reactTutorial

An Intro Tutorial on ReactJS, focused on building a Tic Tac Toe game.

Clone the repository
If you don't have nodeJS installed on your computer, you can install it here: nodeJS
From the main directory, install the necessary npm packages:

npm install

gulp

Note: If you get stuck, you can look to the 'steps' directory to see solutions! Or look at the docs here: ReactJS Documentation

Build a react component called Box, render that component to the page
Give Box a property that dictates what text it renders, render an 'X'
Give Box some style! Make it a button with height 100px and width 100px
Have Box render text based on its state.
Have Box's state change every 300ms, alternating between 'X' and 'O'.
Where should this be written?
This is a good moment to learn about the component cycle!
Make sure to clear your interval!
Have Box's state change based on clicks. Set inital state to '-'.
How do we set up an event handler for React components?
Make Box alternate between 'X' and 'O' on clicks.
Let's make a new component called Row that renders 3 Box components.
Pull the state out of each Box and into the higher level Row component.
Don't forget to pass each child Box a key property.
Rig up the event handling so that clicks on a Box component change the state on their parent Row component.
Now create a Board component that renders three Row components.
Pull the state out of the Row components and into the Board component.
Rig up event handling so clicks on Box's bubble up to the Board itself.

###Todos:

andrewzey/reactTutorial