diff --git a/content/blog/2015-03-30-community-roundup-26.md b/content/blog/2015-03-30-community-roundup-26.md index d45b3051..1ad461ad 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](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. diff --git a/content/docs/installation.md b/content/docs/installation.md index 491bc1ac..6da49500 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 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](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). @@ -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. diff --git a/content/docs/reference-react.md b/content/docs/reference-react.md index 95a0ab49..f25dbed8 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 { @@ -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. diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index 416280fe..02cad76e 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() {