Skip to content

Fix a few typos and add a few suggestions #160

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Oct 16, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion content/blog/2015-03-30-community-roundup-26.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
6 changes: 3 additions & 3 deletions content/docs/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).

Expand Down Expand Up @@ -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:

Expand All @@ -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.

Expand Down
4 changes: 2 additions & 2 deletions content/docs/reference-react.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: I don't think this comma is necessary?

implements shouldComponentUpdate() with a shallow prop and state comparison.

This ^ isn't an independent clause. Maybe it's an appositive?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What am I doing with my life... 🤡


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.

Expand Down
6 changes: 3 additions & 3 deletions content/tutorial/tutorial.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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) {
Expand All @@ -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() {
Expand Down