From bef68481c31b6628f1e5b73b69e0b2b2382d3997 Mon Sep 17 00:00:00 2001 From: Gabriel Lett Viviani Date: Thu, 13 Apr 2017 11:15:34 -0300 Subject: [PATCH 01/35] Fix the proptypes deprecation warning url on the "Don't Call PropTypes Warning" doc page (#9419) * Use the same prop-types link on the warning docs page as the main proptypes doc page * Link to repo instead --- docs/warnings/dont-call-proptypes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/warnings/dont-call-proptypes.md b/docs/warnings/dont-call-proptypes.md index bc468689af3..05da5c04c73 100644 --- a/docs/warnings/dont-call-proptypes.md +++ b/docs/warnings/dont-call-proptypes.md @@ -5,7 +5,7 @@ permalink: warnings/dont-call-proptypes.html --- > Note: -> `React.PropTypes` is deprecated as of React v15.5. Please use [the `prop-types` library instead](https://github.com/aackerman/PropTypes). +> `React.PropTypes` is deprecated as of React v15.5. Please use [the `prop-types` library instead](https://github.com/reactjs/prop-types). In a future major release of React, the code that implements PropType validation functions will be stripped in production. Once this happens, any code that calls these functions manually (that isn't stripped in production) will throw an error. From 6e9e6e747897b89db53cbfc68bfaaa527472ac05 Mon Sep 17 00:00:00 2001 From: Eric Elliott Date: Thu, 13 Apr 2017 08:13:55 -1000 Subject: [PATCH 02/35] Docs: Clarification of setState() behavior (#9329) * Clarification of setState() behavior `setState()` is a frequent source of confusion for people new to React, and I believe part of that is due to minimization of the impact of the asynchronous behavior of `setState()` in the documentation. This revision is an attempt to clarify that behavior. For motivation and justification, see [setState Gate](https://medium.com/javascript-scene/setstate-gate-abc10a9b2d82). * Update reference-react-component.md * Signature fix * Update to address @acdlite concerns * Add more details --- docs/docs/reference-react-component.md | 55 ++++++++++++++++++++------ 1 file changed, 44 insertions(+), 11 deletions(-) diff --git a/docs/docs/reference-react-component.md b/docs/docs/reference-react-component.md index d8c2be7302f..936f440464a 100644 --- a/docs/docs/reference-react-component.md +++ b/docs/docs/reference-react-component.md @@ -229,34 +229,67 @@ componentWillUnmount() ### `setState()` ```javascript -setState(nextState, callback) +setState(updater, [callback]) ``` -Performs a shallow merge of nextState into current state. This is the primary method you use to trigger UI updates from event handlers and server request callbacks. +`setState()` enqueues changes to the component state and tells React that this component and its children need to be re-rendered with the updated state. This is the primary method you use to update the user interface in response to event handlers and server responses. -The first argument can be an object (containing zero or more keys to update) or a function (of state and props) that returns an object containing keys to update. +Think of `setState()` as a *request* rather than an immediate command to update the component. For better perceived performance, React may delay it, and then update several components in a single pass. React does not guarantee that the state changes are applied immediately. -Here is the simple object usage: +`setState()` does not always immediately update the component. It may batch or defer the update until later. This makes reading `this.state` right after calling `setState()` a potential pitfall. Instead, use `componentDidUpdate` or a `setState` callback (`setState(updater, callback)`), either of which are guaranteed to fire after the update has been applied. If you need to set the state based on the previous state, read about the `updater` argument below. + +`setState()` will always lead to a re-render unless `shouldComponentUpdate()` returns `false`. If mutable objects are being used and conditional rendering logic cannot be implemented in `shouldComponentUpdate()`, calling `setState()` only when the new state differs from the previous state will avoid unnecessary re-renders. + +The first argument is an `updater` function with the signature: ```javascript -this.setState({mykey: 'my new value'}); +(prevState, props) => nextState ``` -It's also possible to pass a function with the signature `function(state, props) => newState`. This enqueues an atomic update that consults the previous value of state and props before setting any values. For instance, suppose we wanted to increment a value in state by `props.step`: +`prevState` is a reference to the previous state. It should not be directly mutated. Instead, changes should be represented by building a new state object based on the input from `prevState` and `props`. For instance, suppose we wanted to increment a value in state by `props.step`: ```javascript this.setState((prevState, props) => { - return {myInteger: prevState.myInteger + props.step}; + return {counter: prevState.counter + props.step}; }); ``` -The second parameter is an optional callback function that will be executed once `setState` is completed and the component is re-rendered. Generally we recommend using `componentDidUpdate()` for such logic instead. +Both `prevState` and `props` received by the updater function are guaranteed to be up-to-date. -`setState()` does not immediately mutate `this.state` but creates a pending state transition. Accessing `this.state` after calling this method can potentially return the existing value. +The second parameter to `setState()` is an optional callback function that will be executed once `setState` is completed and the component is re-rendered. Generally we recommend using `componentDidUpdate()` for such logic instead. -There is no guarantee of synchronous operation of calls to `setState` and calls may be batched for performance gains. +You may optionally pass an object as the first argument to `setState()` instead of a function: -`setState()` will always lead to a re-render unless `shouldComponentUpdate()` returns `false`. If mutable objects are being used and conditional rendering logic cannot be implemented in `shouldComponentUpdate()`, calling `setState()` only when the new state differs from the previous state will avoid unnecessary re-renders. +```javascript +setState(stateChange, [callback]) +``` + +This performs a shallow merge of `stateChange` into the new state, e.g., to adjust a shopping cart item quantity: + +```javascript +this.setState({quantity: 2}) +``` + +This form of `setState()` is also asynchronous, and multiple calls during the same cycle may be batched together. For example, if you attempt to increment an item quantity more than once in the same cycle, that will result in the equivalent of: + +```javaScript +Object.assign( + previousState, + {quantity: state.quantity + 1}, + {quantity: state.quantity + 1}, + ... +) +``` + +Subsequent calls will override values from previous calls in the same cycle, so the quantity will only be incremented once. If the next state depends on the previous state, we recommend using the updater function form, instead: + +```js +this.setState((prevState) => { + return {counter: prevState.quantity + 1}; +}); +``` + +For more detail, see the [State and Lifecycle guide](/react/docs/state-and-lifecycle.html). * * * From 0478b6da7f2c1751869a51e6cc9285e915f51f58 Mon Sep 17 00:00:00 2001 From: Jack Date: Fri, 14 Apr 2017 03:11:23 +1000 Subject: [PATCH 03/35] Update proptypes doc (#9391) * Update proptypes doc * Removed note --- docs/contributing/codebase-overview.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/contributing/codebase-overview.md b/docs/contributing/codebase-overview.md index 637c4893241..b9be535b416 100644 --- a/docs/contributing/codebase-overview.md +++ b/docs/contributing/codebase-overview.md @@ -301,10 +301,8 @@ While the code is separated in the source tree, the exact package boundaries are The "core" of React includes all the [top-level `React` APIs](/react/docs/top-level-api.html#react), for example: * `React.createElement()` -* `React.createClass()` * `React.Component` * `React.Children` -* `React.PropTypes` **React core only includes the APIs necessary to define components.** It does not include the [reconciliation](/react/docs/reconciliation.html) algorithm or any platform-specific code. It is used both by React DOM and React Native components. From 8af2f5c42638d93c706db942fcb8c3d793c0fe61 Mon Sep 17 00:00:00 2001 From: Marks Polakovs Date: Thu, 13 Apr 2017 21:54:12 +0200 Subject: [PATCH 04/35] Add tabs to installation page (#9275, #9277) (#9401) * Add tabs to installation page (#9275, #9277) This adds tabs for create-react-app and existing apps to the installation section of the docs. The tab implementation is a simplified version of React Native's installation page. Fixes #9275. * Use classList instead of className * Use same implementation as in RN --- docs/docs/installation.md | 94 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 90 insertions(+), 4 deletions(-) diff --git a/docs/docs/installation.md b/docs/docs/installation.md index d4ee06ae544..8f583117ef4 100644 --- a/docs/docs/installation.md +++ b/docs/docs/installation.md @@ -11,27 +11,86 @@ redirect_from: - "docs/environments.html" next: hello-world.html --- + React is flexible and can be used in a variety of projects. You can create new apps with it, but you can also gradually introduce it into an existing codebase without doing a rewrite. +
+ + + Which of these options best describes what you want to do? +
+
+ Try React + Create a New App + Add React to an Existing App +
+ + + ## Trying Out React If you're just interested in playing around with React, you can use CodePen. Try starting from [this Hello World example code](http://codepen.io/gaearon/pen/rrpgNB?editors=0010). You don't need to install anything; you can just modify the code and see if it works. If you prefer to use your own text editor, you can also download this HTML file, edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so don't use it in production. -## Creating a Single Page Application +If you want to use it for a full application, there are two popular ways to get started with React: using Create React App, or adding it to an existing application. + + + +## Creating a New Application [Create React App](http://github.com/facebookincubator/create-react-app) is the best way to start building a new React single page application. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. ```bash npm install -g create-react-app -create-react-app hello-world -cd hello-world +create-react-app my-app + +cd my-app npm start ``` -Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. It uses [webpack](https://webpack.js.org/), [Babel](http://babeljs.io/) and [ESLint](http://eslint.org/) under the hood, but configures them for you. +Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. It uses build tools like Babel and webpack under the hood, but works with zero configuration. + + ## Adding React to an Existing Application @@ -134,3 +193,30 @@ The versions above are only meant for development, and are not suitable for prod To load a specific version of `react` and `react-dom`, replace `15` with the version number. If you use Bower, React is available via the `react` package. + + \ No newline at end of file From 072618062655ce8870220d5e4ae62e02b5c4b29b Mon Sep 17 00:00:00 2001 From: hanumanthan Date: Thu, 13 Apr 2017 05:26:22 +0530 Subject: [PATCH 05/35] Refractor docs to indicate that state set to props in constructor will not recieve the updated props (#9404) --- docs/docs/reference-react-component.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/docs/reference-react-component.md b/docs/docs/reference-react-component.md index 936f440464a..67efaae6a74 100644 --- a/docs/docs/reference-react-component.md +++ b/docs/docs/reference-react-component.md @@ -113,7 +113,7 @@ The constructor for a React component is called before it is mounted. When imple The constructor is the right place to initialize state. If you don't initialize state and you don't bind methods, you don't need to implement a constructor for your React component. -It's okay to initialize state based on props if you know what you're doing. Here's an example of a valid `React.Component` subclass constructor: +It's okay to initialize state based on props. This effectively "forks" the props and sets the state with the initial props. Here's an example of a valid `React.Component` subclass constructor: ```js constructor(props) { @@ -124,7 +124,7 @@ constructor(props) { } ``` -Beware of this pattern, as it effectively "forks" the props and can lead to bugs. Instead of syncing props to state, you often want to [lift the state up](/react/docs/lifting-state-up.html). +Beware of this pattern, as state won't be up-to-date with any props update. Instead of syncing props to state, you often want to [lift the state up](/react/docs/lifting-state-up.html). If you "fork" props by using them for state, you might also want to implement [`componentWillReceiveProps(nextProps)`](#componentwillreceiveprops) to keep the state up-to-date with them. But lifting state up is often easier and less bug-prone. From 97595a3615a9e7bd42dabc381552e30a050128ce Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Thu, 13 Apr 2017 21:51:19 +0100 Subject: [PATCH 06/35] Switch Installation to a tab when hash is present (#9422) --- docs/docs/installation.md | 39 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/docs/docs/installation.md b/docs/docs/installation.md index 8f583117ef4..3072d7768e7 100644 --- a/docs/docs/installation.md +++ b/docs/docs/installation.md @@ -195,6 +195,10 @@ To load a specific version of `react` and `react-dom`, replace `15` with the ver If you use Bower, React is available via the `react` package. \ No newline at end of file From f6d37c9e60d189db80cf76796eda9322c9e7b1c8 Mon Sep 17 00:00:00 2001 From: Abhay Nikam Date: Fri, 14 Apr 2017 21:32:07 +0530 Subject: [PATCH 07/35] Updated the Good First Bug section in readme (#9429) * Updated the Good First Bug section in readme * Inconsistent use of quotes. Prefered single quotes instead of double quotes * Updated Good first bug link in how_to_contribute doc. * Undo JSX attribute quote change * don't capitalize "beginner friendly issue" (cherry picked from commit 36c935ca8f9df7e19b5051997f4eb381402113ac) --- docs/contributing/how-to-contribute.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/contributing/how-to-contribute.md b/docs/contributing/how-to-contribute.md index 5b2c6c50311..b45eb1798b9 100644 --- a/docs/contributing/how-to-contribute.md +++ b/docs/contributing/how-to-contribute.md @@ -64,7 +64,7 @@ Working on your first Pull Request? You can learn how from this free video serie **[How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)** -To help you get your feet wet and get you familiar with our contribution process, we have a list of **[good first bugs](https://github.com/facebook/react/labels/good%20first%20bug)** that contain bugs which are fairly easy to fix. This is a great place to get started. +To help you get your feet wet and get you familiar with our contribution process, we have a list of **[beginner friendly issues](https://github.com/facebook/react/issues?q=is%3Aopen+is%3Aissue+label%3A%22Difficulty%3A+beginner%22)** that contain bugs which are fairly easy to fix. This is a great place to get started. If you decide to fix an issue, please be sure to check the comment thread in case somebody is already working on a fix. If nobody is working on it at the moment, please leave a comment stating that you intend to work on it so other people don't accidentally duplicate your effort. @@ -101,7 +101,7 @@ In order to accept your pull request, we need you to submit a CLA. You only need ### Development Workflow -After cloning React, run `npm install` to fetch its dependencies. +After cloning React, run `npm install` to fetch its dependencies. Then, you can run several commands: * `npm run lint` checks the code style. From a46332dadba509ca63b6e55f7ba5c8f8bbe425b0 Mon Sep 17 00:00:00 2001 From: NE-SmallTown Date: Tue, 18 Apr 2017 21:42:40 +0800 Subject: [PATCH 08/35] [Documentation] Impreove the react-component section of doc (#9349) * Impreove react-component of doc [#9304](https://github.com/facebook/react/issues/9304) * update description * add missing space (cherry picked from commit 359f5d276ffd4da96e3a00d7245da9fad004ba0d) --- docs/docs/reference-react-component.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/reference-react-component.md b/docs/docs/reference-react-component.md index 67efaae6a74..2c1b0770cb8 100644 --- a/docs/docs/reference-react-component.md +++ b/docs/docs/reference-react-component.md @@ -136,7 +136,7 @@ If you "fork" props by using them for state, you might also want to implement [` componentWillMount() ``` -`componentWillMount()` is invoked immediately before mounting occurs. It is called before `render()`, therefore setting state in this method will not trigger a re-rendering. Avoid introducing any side-effects or subscriptions in this method. +`componentWillMount()` is invoked immediately before mounting occurs. It is called before `render()`, therefore setting state synchronously in this method will not trigger a re-rendering. Avoid introducing any side-effects or subscriptions in this method. This is the only lifecycle hook called on server rendering. Generally, we recommend using the `constructor()` instead. From c4b08b71fffd3cc5c3970f93ff3ae29ae4aa72f9 Mon Sep 17 00:00:00 2001 From: Fraser Haer Date: Tue, 18 Apr 2017 23:47:44 +1000 Subject: [PATCH 09/35] Unique headings for linking purposes (#9259) Previously two headings were 'Javascript Expressions' - now 'Javascript Expressions as Props' and 'Javascript Expressions as Children' (cherry picked from commit 363f6cb2e592f2a283eac279fb393666dcb92b65) --- docs/docs/jsx-in-depth.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/docs/jsx-in-depth.md b/docs/docs/jsx-in-depth.md index 41c3813dd84..c71bc68be73 100644 --- a/docs/docs/jsx-in-depth.md +++ b/docs/docs/jsx-in-depth.md @@ -172,7 +172,7 @@ function Story(props) { There are several different ways to specify props in JSX. -### JavaScript Expressions +### JavaScript Expressions as Props You can pass any JavaScript expression as a prop, by surrounding it with `{}`. For example, in this JSX: @@ -308,7 +308,7 @@ You can mix together different types of children, so you can use string literals A React component can't return multiple React elements, but a single JSX expression can have multiple children, so if you want a component to render multiple things you can wrap it in a `div` like this. -### JavaScript Expressions +### JavaScript Expressions as Children You can pass any JavaScript expression as children, by enclosing it within `{}`. For example, these expressions are equivalent: From 6aa332643fce2d9e3ae28240f09e644bc7131527 Mon Sep 17 00:00:00 2001 From: Jayen Ashar Date: Wed, 19 Apr 2017 00:29:17 +1000 Subject: [PATCH 10/35] Update jsx-in-depth.md (#9178) * Update jsx-in-depth.md Line 9 isn't changed * Move selection down * Fix (cherry picked from commit ccb38a96cf480d99a18f8764ccd12c59289bb542) --- docs/docs/jsx-in-depth.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/jsx-in-depth.md b/docs/docs/jsx-in-depth.md index c71bc68be73..d75fd72fc4f 100644 --- a/docs/docs/jsx-in-depth.md +++ b/docs/docs/jsx-in-depth.md @@ -152,7 +152,7 @@ function Story(props) { To fix this, we will assign the type to a capitalized variable first: -```js{9-11} +```js{10-12} import React from 'react'; import { PhotoStory, VideoStory } from './stories'; From 86ce647e335a5433082c4eb008f939e5cb15cfa9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Ordon?= Date: Tue, 18 Apr 2017 15:38:19 +0100 Subject: [PATCH 11/35] Sort out conferences by date (#9172) (cherry picked from commit 37f9e35ad93e1cb1042a7bc3d8b78290dfcecec6) --- docs/community/conferences.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/community/conferences.md b/docs/community/conferences.md index f16f7650a59..fdb7fdb25f8 100644 --- a/docs/community/conferences.md +++ b/docs/community/conferences.md @@ -14,16 +14,16 @@ March 28th at the [QEII Centre, London](http://qeiicentre.london/) [Website](http://react.london/) -### ReactEurope 2017 -May 18th & 19th in Paris, France - -[Website](http://www.react-europe.org/) - [Schedule](http://www.react-europe.org/#schedule) - ### React Amsterdam 2017 April 21st in Amsterdam, The Netherlands [Website](https://react.amsterdam) - [Twitter](https://twitter.com/reactamsterdam) +### ReactEurope 2017 +May 18th & 19th in Paris, France + +[Website](http://www.react-europe.org/) - [Schedule](http://www.react-europe.org/#schedule) + ### Chain React 2017 July 10-11 in Portland, Oregon USA @@ -34,6 +34,11 @@ August 24-25 in Salt Lake City, Utah USA [Website](http://www.reactrally.com) - [Twitter](https://twitter.com/reactrally) +### React Native EU 2017 +September 6-7 in Wroclaw, Poland + +[Website](http://react-native.eu/) + ### ReactJS Day 2017 October 6th in Verona, Italy @@ -44,11 +49,6 @@ October 13 in Stockholm, Sweden [Website](https://statejs.com/) -### React Native EU 2017 -September 6-7 in Wroclaw, Poland - -[Website](http://react-native.eu/) - ## Past Conferences From 2b20688e6fe0dfc98a7e179afbf436a9b68017bd Mon Sep 17 00:00:00 2001 From: hanumanthan Date: Tue, 18 Apr 2017 20:57:45 +0530 Subject: [PATCH 12/35] Lift state up - Updating the documentation to mention that onClick is a synthetic event handler (#9427) * Lift state up - Updating the documentation to mention that onClick is a synthetic event handler * Review comments - Rephrase to handle synthetic events and event handler patterns * Tweak (cherry picked from commit 53a3939fb015504d006cc4f2d3ace67133164f09) --- docs/tutorial/tutorial.md | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/docs/tutorial/tutorial.md b/docs/tutorial/tutorial.md index 25cfa29dd5e..d0c1d18402e 100644 --- a/docs/tutorial/tutorial.md +++ b/docs/tutorial/tutorial.md @@ -183,7 +183,7 @@ And change Square to use `this.props.value` again. Now we need to change what ha return this.handleClick(i)} />; ``` -Now we're passing down two props from Board to Square: `value` and `onClick`. The latter is a function that Square can call. So let's do that by changing `render` in Square to have: +Now we're passing down two props from Board to Square: `value` and `onClick`. The latter is a function that Square can call. So let's replace the `this.setState()` call we used to have inside the button click handler in Square's `render()` with a call to `this.props.onClick()`: ```javascript ``` -This means that when the square is clicked, it calls the onClick function that was passed by the parent. The `onClick` doesn't have any special meaning here, but it's popular to name handler props starting with `on` and their implementations with `handle`. Try clicking a square – you should get an error because we haven't defined `handleClick` yet. Add it to the Board class: +Now when the square is clicked, it calls the `onClick` function that was passed by Board. Let's recap what happens here: + +1. The `onClick` prop on the built-in DOM ` ``` This uses the new JavaScript arrow function syntax. If you click on a square now, you should get an alert in your browser. From 4d11d46e278bfca3ec466a3040162e121a44434f Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 18 Apr 2017 17:40:59 +0100 Subject: [PATCH 15/35] Minor tweaks to tutorial --- docs/tutorial/tutorial.md | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/docs/tutorial/tutorial.md b/docs/tutorial/tutorial.md index 827b331923d..2ea4542f030 100644 --- a/docs/tutorial/tutorial.md +++ b/docs/tutorial/tutorial.md @@ -28,23 +28,25 @@ If you need a refresher on JavaScript, we recommend reading [this guide](https:/ ### 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. +We'll be using an online editor called CodePen in this guide. You can begin 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: +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. +3. Replace the contents of `src/index.js` in the generated project with this JS 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`: +5. Delete 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'; -``` + ```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. From d9215934763f58bd72e63ea166a1d12ccbfde225 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 18 Apr 2017 17:44:32 +0100 Subject: [PATCH 16/35] Fix duplicate sentence --- docs/tutorial/tutorial.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/tutorial/tutorial.md b/docs/tutorial/tutorial.md index 2ea4542f030..b8adda09933 100644 --- a/docs/tutorial/tutorial.md +++ b/docs/tutorial/tutorial.md @@ -34,8 +34,6 @@ We'll be using an online editor called CodePen in this guide. You can begin by o You can also follow along locally if you don't mind a few extra steps: -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 JS code. From 7b12cc3bbdb69e7135f2b4fa208558cb1dfea1d4 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 18 Apr 2017 17:53:53 +0100 Subject: [PATCH 17/35] Minor tutorial nits --- docs/tutorial/tutorial.md | 28 ++++++++++++++++------------ 1 file changed, 16 insertions(+), 12 deletions(-) diff --git a/docs/tutorial/tutorial.md b/docs/tutorial/tutorial.md index b8adda09933..612fbc0b562 100644 --- a/docs/tutorial/tutorial.md +++ b/docs/tutorial/tutorial.md @@ -60,7 +60,7 @@ With this out of the way, let's get started! React is a declarative, efficient, and flexible JavaScript library for building user interfaces. -React has a few different kinds of components, but we'll start with React.Component subclasses: +React has a few different kinds of components, but we'll start with `React.Component` subclasses: ```javascript class ShoppingList extends React.Component { @@ -148,7 +148,7 @@ class Square extends React.Component { value: null, }; } - ... + // ... } ``` @@ -158,7 +158,7 @@ Now change the `render` method to display `this.state.value` instead of `this.pr ```javascript ``` @@ -277,7 +277,7 @@ var player = {score: 1, name: 'Jeff'}; var newPlayer = Object.assign({}, player, {score: 2}); // Now player is unchanged, but newPlayer is {score: 2, name: 'Jeff'} -// Or if you are using object spread, you can write: +// Or if you are using object spread syntax proposal, you can write: // var newPlayer = {...player, score: 2}; ``` @@ -322,7 +322,7 @@ class Board extends React.Component { constructor() { super(); this.state = { - ... + // ... xIsNext: true, }; } @@ -346,7 +346,7 @@ Now X and O take turns. Next, change the "status" text in Board's `render` so th ```javascript render() { const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); - ... + // ... ``` ## Declaring a Winner @@ -362,7 +362,7 @@ render() { } else { status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); } - ... + // ... } ``` @@ -374,7 +374,7 @@ handleClick(i) { if (calculateWinner(squares) || squares[i]) { return; } - ... + // ... } ``` @@ -394,7 +394,7 @@ history = [ { squares: [... x 9] }, - ... + // ... ] ``` @@ -413,7 +413,7 @@ class Game extends React.Component { xIsNext: true }; } - ... + // ... } ``` @@ -436,7 +436,9 @@ if (winner) { } else { status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); } -... + +// ... +
{ ); }); -... + +// ... +
    {moves}
``` From 8cf11932e7ed4836ebbe6a5796ab4add1bc13b66 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 18 Apr 2017 18:00:54 +0100 Subject: [PATCH 18/35] Add missing tutorial sidebar links --- docs/_data/nav_tutorial.yml | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/docs/_data/nav_tutorial.yml b/docs/_data/nav_tutorial.yml index efa090f0cec..2a321a17eec 100644 --- a/docs/_data/nav_tutorial.yml +++ b/docs/_data/nav_tutorial.yml @@ -7,6 +7,18 @@ title: What We're Building href: /react/tutorial/tutorial.html#what-were-building forceInternal: true + - id: prerequisites + title: Prerequisites + href: /react/tutorial/tutorial.html#prerequisites + forceInternal: true + - id: how-to-follow-along + title: How to Follow Along + href: /react/tutorial/tutorial.html#how-to-follow-along + forceInternal: true + - id: help-im-stuck + title: Help, I'm Stuck! + href: /react/tutorial/tutorial.html#help-im-stuck + forceInternal: true - id: what-is-react title: What is React? href: /react/tutorial/tutorial.html#what-is-react From 22546607cd749dff33e6220fb2b1f91acf37ffdc Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 18 Apr 2017 18:07:16 +0100 Subject: [PATCH 19/35] Tweak tutorial structure --- docs/_data/nav_tutorial.yml | 7 +++++- docs/tutorial/tutorial.md | 44 ++++++++++++++++++++----------------- 2 files changed, 30 insertions(+), 21 deletions(-) diff --git a/docs/_data/nav_tutorial.yml b/docs/_data/nav_tutorial.yml index 2a321a17eec..49cc7557f91 100644 --- a/docs/_data/nav_tutorial.yml +++ b/docs/_data/nav_tutorial.yml @@ -1,7 +1,7 @@ - title: Tutorial items: - id: tutorial - title: Overview + title: Before We Start subitems: - id: what-were-building title: What We're Building @@ -19,6 +19,11 @@ title: Help, I'm Stuck! href: /react/tutorial/tutorial.html#help-im-stuck forceInternal: true + - id: overview + title: Overview + href: /react/tutorial/tutorial.html#overview + forceInternal: true + subitems: - id: what-is-react title: What is React? href: /react/tutorial/tutorial.html#what-is-react diff --git a/docs/tutorial/tutorial.md b/docs/tutorial/tutorial.md index 612fbc0b562..2cc9b530598 100644 --- a/docs/tutorial/tutorial.md +++ b/docs/tutorial/tutorial.md @@ -12,25 +12,27 @@ redirect_from: - "docs/tutorial-zh-CN.html" --- -## What We're Building +## Before We Start + +### What We're Building 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. -## Prerequisites +### 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 +### How to Follow Along -### Following Along in Browser +#### Following Along in Browser We'll be using an online editor called CodePen in this guide. You can begin 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 +#### Following Along Locally You can also follow along locally if you don't mind a few extra steps: @@ -48,7 +50,7 @@ You can also follow along locally if you don't mind a few extra steps: 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! +### 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. @@ -56,7 +58,9 @@ You can also look at the Starter Code. @@ -114,7 +118,7 @@ The Square component renders a single `