diff --git a/tutorial/tutorial.md b/tutorial/tutorial.md index d0c1d184..827b3319 100644 --- a/tutorial/tutorial.md +++ b/tutorial/tutorial.md @@ -14,9 +14,47 @@ redirect_from: ## What We're Building -Today, we're going to build an interactive tic-tac-toe game. We'll assume some familiarity with HTML and JavaScript but you should be able to follow along even if you haven't used them before. +Today, we're going to build an interactive tic-tac-toe game. -If you like, you can check out the final result here: Final Result. Try playing the game. You can also click on a link in the move list to go "back in time" and see what the board looked like just after that move was made. +If you like, you can check out the final result here: Final Result. Try playing the game. You can also click on a link in the move list to go "back in time" and see what the board looked like just after that move was made. + +## Prerequisites + +We'll assume some familiarity with HTML and JavaScript but you should be able to follow along even if you haven't used them before. + +If you need a refresher on JavaScript, we recommend reading [this guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript). Note that we're also using some features from ES6, a recent version of JavaScript. In this tutorial, we're using [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), and [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) statements. You can use Babel REPL to check what ES6 code compiles to. + +## How to Follow Along + +### Following Along in Browser + +We'll be using an online editor called CodePen in this guide. Start by opening this starter code. It should display an empty tic-tac-toe field. We will be editing that code during this tutorial. + +### Following Along Locally + +You can also follow along locally if you don't mind a few extra steps: + +1. Make sure you have a recent version of [Node.js](https://nodejs.org/en/) installed. +2. Follow the [installation instructions](/react/docs/installation.html#creating-a-new-application) to create a new project. +3. Replace the contents of `src/index.js` in the generated project with this JavaScript code. +4. Replace the contents of `src/index.css` in the generated project with this CSS code. +5. Delete any other files in the `src/` folder, and add three lines to the top of `src/index.js`: + +```js +import React from 'react'; +import ReactDOM from 'react-dom'; +import './index.css'; +``` + +Now if you run `npm start` in the project folder and open `http://localhost:3000` in the browser, you should see an empty tic-tac-toe field. + +## Help, I'm Stuck! + +If you get stuck, check out the [community support resources](https://facebook.github.io/react/community/support.html). In particular, [Reactiflux chat](/react/community/support.html#reactiflux-chat) is a great way to get quick help. If you don't get a good answer anywhere, please file an issue, and we'll help you out. + +You can also look at the final version of the code. + +With this out of the way, let's get started! ## What is React? @@ -62,7 +100,7 @@ The `ShoppingList` component only renders built-in DOM components, but you can c ## Getting Started -Start with this example: Starter Code. +Start with this example: Starter Code. It contains the shell of what we're building today. We've provided the styles so you only need to worry about the JavaScript. @@ -90,10 +128,12 @@ After: You should see a number in each square in the rendered output. ##An Interactive Component -Let's make the Square component fill in an "X" when you click it. Try changing the opening button tag returned in the `render()` function of the `Square` class to: +Let's make the Square component fill in an "X" when you click it. Try changing the button tag returned in the `render()` function of the `Square` class to: ```html ``` This uses the new JavaScript arrow function syntax. If you click on a square now, you should get an alert in your browser.