react-redux-workshop

Workshop for learning React and Redux basics.

##Why React?

React is a JavaScript library for creating user interfaces open sourced by Facebook. You can think of it as the V in MVC.

####Simple Express how your UI should look at any given time, and React will manage updating your UI with new data.

####Declarative React components describe the state of the UI. When the state changes, React knows to only update the changed parts.

####Compositional and Reusable All you do with React is create bite-sized, encapsulated UI blocks with which you build your fancy castle.

##Setup

1. Install Brew if you need to.

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

1. Get the latest version of Node using Brew.

$ brew update
$ brew install node
$ node -v

Or use the package installer at https://nodejs.org/dist/v5.6.0/node-v5.6.0.pkg

1. You'll need to clone this project into your working directory to get started.

$ git clone https://github.com/cepeda617/react-redux-workshop.git

1. Go into the workshop directory and install the required node modules.

$ cd ~/Work/react-redux-workshop
$ npm install

1. You can now start the webpack server.

$ npm start

1. Visit http://localhost:8080/ in your browser, preferrably Chrome.

2. If you're welcomed with a "Hello World!" on your screen, you're ready to go!

##Get started! ###[Exercise 1: Edit the `HelloWorld` component →](docs/exercise-1.md)
##Exercises

• Exercise 1: Edit the HelloWorld component
• Exercise 2: Create a simple Toggle component
• Exercise 3: Add properties to customize Toggle values
• Exercise 4: Use children as the Toggle label
• Exercise 5: Handle Toggle clicks
• Exercise 6: Hold Toggle state in the component
• Exercise 7: Add CSS to Toggle
• Exercise 8: Create a Settings component using Toggle components
• Exercise 9: Update Toggle state in the Settings component
• Exercise 10: Use JSON to populate Settings component

##Hungry for more? Check out the React docs at: https://facebook.github.io/react/docs/getting-started.html