Browse Source

Merge pull request #160 from fatosmorina/fix_typos

Fix  a few typos and add a few suggestions
main
Brian Vaughn 7 years ago
committed by GitHub
parent
commit
e46945401e
  1. 2
      content/blog/2015-03-30-community-roundup-26.md
  2. 6
      content/docs/installation.md
  3. 4
      content/docs/reference-react.md
  4. 6
      content/tutorial/tutorial.md

2
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 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. 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.

6
content/docs/installation.md

@ -40,7 +40,7 @@ cd my-app
npm start 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). 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 ### 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: 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 `<div id="root"></div>` somewhere in your HTML file. This code renders into a DOM element with the id of `root`, so you need `<div id="root"></div>` 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. Similarly, you can render a React component inside a DOM element somewhere inside your existing app written with any other JavaScript UI library.

4
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`
`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 ```javascript
class Greeting extends React.Component { 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`
`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. 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.

6
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. 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} ```javascript{6}
class Board extends React.Component { 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} ```javascript{3,6}
handleClick(i) { 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} ```javascript{2}
render() { render() {

Loading…
Cancel
Save