From 834ebcdc62d59b504358802f6339f9434d3218ba Mon Sep 17 00:00:00 2001 From: Fatos Morina Date: Sat, 14 Oct 2017 19:04:11 +0200 Subject: [PATCH 1/8] Add colons and keep the consistency --- content/tutorial/tutorial.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index 416280fe18c..02cad76e01c 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -524,7 +524,7 @@ While we're cleaning up the code, we also changed `onClick={() => props.onClick( An obvious defect in our game is that only X can play. Let's fix that. -Let's default the first move to be by 'X'. Modify our starting state in our Board constructor. +Let's default the first move to be by 'X'. Modify our starting state in our Board constructor: ```javascript{6} class Board extends React.Component { @@ -537,7 +537,7 @@ class Board extends React.Component { } ``` -Each time we move we shall toggle `xIsNext` by flipping the boolean value and saving the state. Now update Board's `handleClick` function to flip the value of `xIsNext`. +Each time we move we shall toggle `xIsNext` by flipping the boolean value and saving the state. Now update Board's `handleClick` function to flip the value of `xIsNext`: ```javascript{3,6} handleClick(i) { @@ -550,7 +550,7 @@ Each time we move we shall toggle `xIsNext` by flipping the boolean value and sa } ``` -Now X and O take turns. Next, change the "status" text in Board's `render` so that it also displays who is next. +Now X and O take turns. Next, change the "status" text in Board's `render` so that it also displays who is next: ```javascript{2} render() { From ddd8cca1cbbd2cfdf5a7da770a5ae5551ff2be5b Mon Sep 17 00:00:00 2001 From: Fatos Morina Date: Sat, 14 Oct 2017 19:06:19 +0200 Subject: [PATCH 2/8] Add missing comma --- content/docs/reference-react.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md index 95a0ab49d08..290735451fa 100644 --- a/content/docs/reference-react.md +++ b/content/docs/reference-react.md @@ -66,7 +66,7 @@ See the [React.Component API Reference](/docs/react-component.html) for a list o ### `React.PureComponent` -`React.PureComponent` is exactly like [`React.Component`](#reactcomponent) but implements [`shouldComponentUpdate()`](/docs/react-component.html#shouldcomponentupdate) with a shallow prop and state comparison. +`React.PureComponent` is exactly like [`React.Component`](#reactcomponent), but implements [`shouldComponentUpdate()`](/docs/react-component.html#shouldcomponentupdate) with a shallow prop and state comparison. If your React component's `render()` function renders the same result given the same props and state, you can use `React.PureComponent` for a performance boost in some cases. From d70e89e2fb2a1f718fa7346099c0d3a91d826b23 Mon Sep 17 00:00:00 2001 From: Fatos Morina Date: Sat, 14 Oct 2017 19:15:11 +0200 Subject: [PATCH 3/8] Use colon --- content/docs/reference-react.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md index 290735451fa..f25dbed8c5c 100644 --- a/content/docs/reference-react.md +++ b/content/docs/reference-react.md @@ -50,7 +50,7 @@ See [Using React without JSX](/docs/react-without-jsx.html) for more information ### `React.Component` -`React.Component` is the base class for React components when they are defined using [ES6 classes](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes). +`React.Component` is the base class for React components when they are defined using [ES6 classes](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes): ```javascript class Greeting extends React.Component { From a30f52f9a1dab73f91a31356d85d02746d0e48b6 Mon Sep 17 00:00:00 2001 From: Fatos Morina Date: Sat, 14 Oct 2017 19:28:04 +0200 Subject: [PATCH 4/8] Highlight Create React App and hyperlink Babel and webpack --- content/blog/2015-03-30-community-roundup-26.md | 2 +- content/docs/installation.md | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/content/blog/2015-03-30-community-roundup-26.md b/content/blog/2015-03-30-community-roundup-26.md index d45b3051f4a..3740c0309eb 100644 --- a/content/blog/2015-03-30-community-roundup-26.md +++ b/content/blog/2015-03-30-community-roundup-26.md @@ -67,7 +67,7 @@ Jay Garcia spent a lot of time during the beta working on a NES music player wit ## React Native with Babel and webpack -React Native ships with a custom packager and custom ES6 transforms instead of using what the open source community settled on such as webpack and Babel. The main reason for this is performance – we couldn't get those tools to have sub-second reload time on a large codebase. +React Native ships with a custom packager and custom ES6 transforms instead of using what the open source community settled on such as [webpack] (https://webpack.js.org/) and [Babel](http://babeljs.io/). The main reason for this is performance – we couldn't get those tools to have sub-second reload time on a large codebase. Roman Liutikov found a way to [use webpack and Babel to run on React Native](https://github.com/roman01la/react-native-babel)! In the future, we want to work with those projects to provide cleaner extension mechanisms. diff --git a/content/docs/installation.md b/content/docs/installation.md index 491bc1acb8a..c0ed27c8cc5 100644 --- a/content/docs/installation.md +++ b/content/docs/installation.md @@ -40,9 +40,9 @@ 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 build tools like Babel and webpack under the hood, but works with zero configuration. +`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] (http://babeljs.io/) and [webpack] (http://babeljs.io/) under the hood, but works with zero configuration. -When you're ready to deploy to production, running `npm run build` will create an optimized build of your app in the `build` folder. You can learn more about Create React App [from its README](https://github.com/facebookincubator/create-react-app#create-react-app-) and the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#table-of-contents). +When you're ready to deploy to production, running `npm run build` will create an optimized build of your app in the `build` folder. You can learn more about `Create React App` [from its README](https://github.com/facebookincubator/create-react-app#create-react-app-) and the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#table-of-contents). ## Adding React to an Existing Application @@ -88,7 +88,7 @@ The [Babel setup instructions](https://babeljs.io/docs/setup/) explain how to co ### Hello World with ES6 and JSX -We recommend using a bundler like [webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/) so you can write modular code and bundle it together into small packages to optimize load time. +We recommend using a bundler like [webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/), so you can write modular code and bundle it together into small packages to optimize load time. The smallest React example looks like this: @@ -102,7 +102,7 @@ ReactDOM.render( ); ``` -This code renders into a DOM element with the id of `root` so you need `
` somewhere in your HTML file. +This code renders into a DOM element with the id of `root`, so you need `
` somewhere in your HTML file. Similarly, you can render a React component inside a DOM element somewhere inside your existing app written with any other JavaScript UI library. From 7cf4c9125864bf7eaf7e4e4ec2c09041aec53f9f Mon Sep 17 00:00:00 2001 From: Fatos Morina Date: Mon, 16 Oct 2017 08:12:45 +0200 Subject: [PATCH 5/8] Remove space after webpack --- content/blog/2015-03-30-community-roundup-26.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/blog/2015-03-30-community-roundup-26.md b/content/blog/2015-03-30-community-roundup-26.md index 3740c0309eb..d7e7d2ed3fe 100644 --- a/content/blog/2015-03-30-community-roundup-26.md +++ b/content/blog/2015-03-30-community-roundup-26.md @@ -67,7 +67,7 @@ Jay Garcia spent a lot of time during the beta working on a NES music player wit ## React Native with Babel and webpack -React Native ships with a custom packager and custom ES6 transforms instead of using what the open source community settled on such as [webpack] (https://webpack.js.org/) and [Babel](http://babeljs.io/). The main reason for this is performance – we couldn't get those tools to have sub-second reload time on a large codebase. +React Native ships with a custom packager and custom ES6 transforms instead of using what the open source community settled on such as [webpack](https://webpack.js.org/) and [Babel](http://babeljs.io/). The main reason for this is performance – we couldn't get those tools to have sub-second reload time on a large codebase. Roman Liutikov found a way to [use webpack and Babel to run on React Native](https://github.com/roman01la/react-native-babel)! In the future, we want to work with those projects to provide cleaner extension mechanisms. From 8238816c9a30edd2df8e7f31073f1dd83fae1b25 Mon Sep 17 00:00:00 2001 From: Fatos Morina Date: Mon, 16 Oct 2017 08:16:26 +0200 Subject: [PATCH 6/8] Update webpack link, remove spaces Update webpack link, remove spaces, unhighlight `Create React App` --- content/docs/installation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/installation.md b/content/docs/installation.md index c0ed27c8cc5..8eaadecabff 100644 --- a/content/docs/installation.md +++ b/content/docs/installation.md @@ -40,7 +40,7 @@ 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 build tools like [Babel] (http://babeljs.io/) and [webpack] (http://babeljs.io/) under the hood, but works with zero configuration. +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](http://babeljs.io/) and [webpack](https://webpack.js.org/) under the hood, but works with zero configuration. When you're ready to deploy to production, running `npm run build` will create an optimized build of your app in the `build` folder. You can learn more about `Create React App` [from its README](https://github.com/facebookincubator/create-react-app#create-react-app-) and the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#table-of-contents). From c043e0062cae2ccc20fe924c70d9028a8cf870d5 Mon Sep 17 00:00:00 2001 From: Fatos Morina Date: Mon, 16 Oct 2017 08:33:13 +0200 Subject: [PATCH 7/8] Use https for BabelJS hyperlink --- content/blog/2015-03-30-community-roundup-26.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/blog/2015-03-30-community-roundup-26.md b/content/blog/2015-03-30-community-roundup-26.md index d7e7d2ed3fe..1ad461ad658 100644 --- a/content/blog/2015-03-30-community-roundup-26.md +++ b/content/blog/2015-03-30-community-roundup-26.md @@ -67,7 +67,7 @@ Jay Garcia spent a lot of time during the beta working on a NES music player wit ## React Native with Babel and webpack -React Native ships with a custom packager and custom ES6 transforms instead of using what the open source community settled on such as [webpack](https://webpack.js.org/) and [Babel](http://babeljs.io/). The main reason for this is performance – we couldn't get those tools to have sub-second reload time on a large codebase. +React Native ships with a custom packager and custom ES6 transforms instead of using what the open source community settled on such as [webpack](https://webpack.js.org/) and [Babel](https://babeljs.io/). The main reason for this is performance – we couldn't get those tools to have sub-second reload time on a large codebase. Roman Liutikov found a way to [use webpack and Babel to run on React Native](https://github.com/roman01la/react-native-babel)! In the future, we want to work with those projects to provide cleaner extension mechanisms. From 64d49360349c5b9d9f5faf727c8ea7adaed6c03b Mon Sep 17 00:00:00 2001 From: Fatos Morina Date: Mon, 16 Oct 2017 08:34:30 +0200 Subject: [PATCH 8/8] Remove quotes for "Create React App" --- content/docs/installation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/installation.md b/content/docs/installation.md index 8eaadecabff..6da4950005b 100644 --- a/content/docs/installation.md +++ b/content/docs/installation.md @@ -42,7 +42,7 @@ 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 build tools like [Babel](http://babeljs.io/) and [webpack](https://webpack.js.org/) under the hood, but works with zero configuration. -When you're ready to deploy to production, running `npm run build` will create an optimized build of your app in the `build` folder. You can learn more about `Create React App` [from its README](https://github.com/facebookincubator/create-react-app#create-react-app-) and the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#table-of-contents). +When you're ready to deploy to production, running `npm run build` will create an optimized build of your app in the `build` folder. You can learn more about Create React App [from its README](https://github.com/facebookincubator/create-react-app#create-react-app-) and the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#table-of-contents). ## Adding React to an Existing Application