Skip to content

Sync with reactjs.org @ c024001c #43

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 13 commits into from
Jul 1, 2019
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/2018-03-27-update-on-async-rendering.md
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ Here is an example of a component that uses the legacy `componentWillReceiveProp

Although the above code is not problematic in itself, the `componentWillReceiveProps` lifecycle is often mis-used in ways that _do_ present problems. Because of this, the method will be deprecated.

As of version 16.3, the recommended way to update `state` in response to `props` changes is with the new `static getDerivedStateFromProps` lifecycle. (That lifecycle is called when a component is created and each time it receives new props):
As of version 16.3, the recommended way to update `state` in response to `props` changes is with the new `static getDerivedStateFromProps` lifecycle. It is called when a component is created and each time it re-renders due to changes to props or state:
`embed:update-on-async-rendering/updating-state-from-props-after.js`

You may notice in the example above that `props.currentRow` is mirrored in state (as `state.lastRow`). This enables `getDerivedStateFromProps` to access the previous props value in the same way as is done in `componentWillReceiveProps`.
Expand Down
2 changes: 1 addition & 1 deletion content/blog/2019-02-23-is-react-translated-yet.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ This approach appealed to us for several reasons:
* It encouraged active maintainers for each repo to ensure quality.
* Contributors already understand GitHub as a platform and are motivated to contribute directly to the React organization.

We started of with an initial trial period of three languages: Spanish, Japanese, and Simplified Chinese. This allowed us to work out any kinks in our process and make sure future translations are set up for success. I wanted to give the translation teams freedom to choose whatever tools they felt comfortable with. The only requirement is a [checklist](https://github.com/reactjs/reactjs.org-translation/blob/master/PROGRESS.template.md) that outlines the order of importance for translating pages.
We started off with an initial trial period of three languages: Spanish, Japanese, and Simplified Chinese. This allowed us to work out any kinks in our process and make sure future translations are set up for success. I wanted to give the translation teams freedom to choose whatever tools they felt comfortable with. The only requirement is a [checklist](https://github.com/reactjs/reactjs.org-translation/blob/master/PROGRESS.template.md) that outlines the order of importance for translating pages.

After the trial period, we were ready to accept more languages. I created [a script](https://github.com/reactjs/reactjs.org-translation/blob/master/scripts/create.js) to automate the creation of the new language repo, and a site, [Is React Translated Yet?](https://isreacttranslatedyet.com), to track progress on the different translations. We started *10* new translations on our first day alone!

Expand Down
2 changes: 2 additions & 0 deletions content/community/courses.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ permalink: community/courses.html

- [Free React Bootcamp](https://tylermcginnis.com/free-react-bootcamp/) - Recordings from three days of a free online React bootcamp.

- [Scrimba: Learn React for free](https://scrimba.com/g/glearnreact) - 48 hands-on video tutorials building react apps.

## Paid Courses {#paid-courses}

- [Egghead.io](https://egghead.io/browse/frameworks/react) - Short instructional videos on React and many other topics.
Expand Down
1 change: 1 addition & 0 deletions content/community/meetups.md
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Bangalore](https://www.meetup.com/ReactJS-Bangalore/)
* [Chennai](https://www.meetup.com/React-Chennai/)
* [Delhi NCR](https://www.meetup.com/React-Delhi-NCR/)
* [Jaipur](https://www.meetup.com/JaipurJS-Developer-Meetup/)

## Ireland {#ireland}
* [Dublin](https://www.meetup.com/ReactJS-Dublin/)
Expand Down
4 changes: 1 addition & 3 deletions content/docs/code-splitting.md
Original file line number Diff line number Diff line change
Expand Up @@ -107,9 +107,7 @@ bị biến đổi. Bạn sẽ cần [babel-plugin-syntax-dynamic-import](https:

> Chú ý:
>
> `React.lazy` và Suspense chưa có sẵn cho server-side rendering. Nếu bạn muốn phân chia code ở những ứng dụng render tại server,
chúng tôi xin giới thiệu [Loadable Components](https://github.com/smooth-code/loadable-components). Nó có [hướng dẫn phân chia code với
server-side rendering](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md).
> `React.lazy` và Suspense chưa có sẵn cho server-side rendering. Nếu bạn muốn phân chia code ở những ứng dụng render tại server, chúng tôi xin giới thiệu [Loadable Components](https://github.com/smooth-code/loadable-components). Nó có [hướng dẫn phân chia code với server-side rendering](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md).

Chức năng `React.lazy` cho phép bạn render một import động như một component bình thường.

Expand Down
2 changes: 1 addition & 1 deletion content/docs/create-a-new-react-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ The React team primarily recommends these solutions:

[Create React App](https://github.com/facebookincubator/create-react-app) is a comfortable environment for **learning React**, and is the best way to start building **a new [single-page](/docs/glossary.html#single-page-application) application** in React.

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. You’ll need to have Node >= 6 and npm >= 5.2 on your machine. To create a project, run:
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. You’ll need to have Node >= 8.10 and npm >= 5.6 on your machine. To create a project, run:

```bash
npx create-react-app my-app
Expand Down
4 changes: 1 addition & 3 deletions content/docs/fragments.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ render() {
}
```

There is also a new [short syntax](#short-syntax) for declaring them, but it isn't supported by all popular tools yet.
There is also a new [short syntax](#short-syntax) for declaring them.

## Motivation {#motivation}

Expand Down Expand Up @@ -113,8 +113,6 @@ class Columns extends React.Component {

You can use `<></>` the same way you'd use any other element except that it doesn't support keys or attributes.

Note that **[many tools don't support it yet](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)** so you might want to explicitly write `<React.Fragment>` until the tooling catches up.

### Keyed Fragments {#keyed-fragments}

Fragments declared with the explicit `<React.Fragment>` syntax may have keys. A use case for this is mapping a collection to an array of fragments -- for example, to create a description list:
Expand Down
2 changes: 1 addition & 1 deletion content/docs/hooks-reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -244,7 +244,7 @@ function Counter() {

#### Specifying the initial state {#specifying-the-initial-state}

There’s two different ways to initialize `useReducer` state. You may choose either one depending on the use case. The simplest way to pass the initial state as a second argument:
There are two different ways to initialize `useReducer` state. You may choose either one depending on the use case. The simplest way is to pass the initial state as a second argument:

```js{3}
const [state, dispatch] = useReducer(
Expand Down
2 changes: 1 addition & 1 deletion content/docs/how-to-contribute.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe
### How to Get in Touch {#how-to-get-in-touch}

* IRC: [#reactjs on freenode](https://webchat.freenode.net/?channels=reactjs)
* Discussion forum: [discuss.reactjs.org](https://discuss.reactjs.org/)
* [Discussion forums](https://reactjs.org/community/support.html#popular-discussion-forums)

There is also [an active community of React users on the Discord chat platform](https://www.reactiflux.com/) in case you need help with React.

Expand Down
47 changes: 23 additions & 24 deletions content/docs/optimizing-performance.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,14 +51,14 @@ Remember that only React files ending with `.production.min.js` are suitable for

### Brunch {#brunch}

For the most efficient Brunch production build, install the [`uglify-js-brunch`](https://github.com/brunch/uglify-js-brunch) plugin:
For the most efficient Brunch production build, install the [`terser-brunch`](https://github.com/brunch/terser-brunch) plugin:

```
# If you use npm
npm install --save-dev uglify-js-brunch
npm install --save-dev terser-brunch

# If you use Yarn
yarn add --dev uglify-js-brunch
yarn add --dev terser-brunch
```

Then, to create a production build, add the `-p` flag to the `build` command:
Expand All @@ -75,51 +75,46 @@ For the most efficient Browserify production build, install a few plugins:

```
# If you use npm
npm install --save-dev envify uglify-js uglifyify
npm install --save-dev envify terser uglifyify

# If you use Yarn
yarn add --dev envify uglify-js uglifyify
yarn add --dev envify terser uglifyify
```

To create a production build, make sure that you add these transforms **(the order matters)**:

* The [`envify`](https://github.com/hughsk/envify) transform ensures the right build environment is set. Make it global (`-g`).
* The [`uglifyify`](https://github.com/hughsk/uglifyify) transform removes development imports. Make it global too (`-g`).
* Finally, the resulting bundle is piped to [`uglify-js`](https://github.com/mishoo/UglifyJS2) for mangling ([read why](https://github.com/hughsk/uglifyify#motivationusage)).
* Finally, the resulting bundle is piped to [`terser`](https://github.com/terser-js/terser) for mangling ([read why](https://github.com/hughsk/uglifyify#motivationusage)).

For example:

```
browserify ./index.js \
-g [ envify --NODE_ENV production ] \
-g uglifyify \
| uglifyjs --compress --mangle > ./bundle.js
| terser --compress --mangle > ./bundle.js
```

>**Note:**
>
>The package name is `uglify-js`, but the binary it provides is called `uglifyjs`.<br>
>This is not a typo.

Remember that you only need to do this for production builds. You shouldn't apply these plugins in development because they will hide useful React warnings, and make the builds much slower.

### Rollup {#rollup}

For the most efficient Rollup production build, install a few plugins:

```
```bash
# If you use npm
npm install --save-dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-uglify
npm install --save-dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-terser

# If you use Yarn
yarn add --dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-uglify
yarn add --dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-terser
```

To create a production build, make sure that you add these plugins **(the order matters)**:

* The [`replace`](https://github.com/rollup/rollup-plugin-replace) plugin ensures the right build environment is set.
* The [`commonjs`](https://github.com/rollup/rollup-plugin-commonjs) plugin provides support for CommonJS in Rollup.
* The [`uglify`](https://github.com/TrySound/rollup-plugin-uglify) plugin compresses and mangles the final bundle.
* The [`terser`](https://github.com/TrySound/rollup-plugin-terser) plugin compresses and mangles the final bundle.

```js
plugins: [
Expand All @@ -128,14 +123,14 @@ plugins: [
'process.env.NODE_ENV': JSON.stringify('production')
}),
require('rollup-plugin-commonjs')(),
require('rollup-plugin-uglify')(),
require('rollup-plugin-terser')(),
// ...
]
```

For a complete setup example [see this gist](https://gist.github.com/Rich-Harris/cb14f4bc0670c47d00d191565be36bf0).

Remember that you only need to do this for production builds. You shouldn't apply the `uglify` plugin or the `replace` plugin with `'production'` value in development because they will hide useful React warnings, and make the builds much slower.
Remember that you only need to do this for production builds. You shouldn't apply the `terser` plugin or the `replace` plugin with `'production'` value in development because they will hide useful React warnings, and make the builds much slower.

### webpack {#webpack}

Expand All @@ -144,18 +139,22 @@ Remember that you only need to do this for production builds. You shouldn't appl
>If you're using Create React App, please follow [the instructions above](#create-react-app).<br>
>This section is only relevant if you configure webpack directly.

For the most efficient webpack production build, make sure to include these plugins in your production configuration:
Webpack v4+ will minify your code by default in production mode.

```js
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new webpack.optimize.UglifyJsPlugin()
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
mode: 'production'
optimization: {
minimizer: [new TerserPlugin({ /* additional options here */ })],
},
};
```

You can learn more about this in [webpack documentation](https://webpack.js.org/guides/production/).

Remember that you only need to do this for production builds. You shouldn't apply `UglifyJsPlugin` or `DefinePlugin` with `'production'` value in development because they will hide useful React warnings, and make the builds much slower.
Remember that you only need to do this for production builds. You shouldn't apply `TerserPlugin` in development because it will hide useful React warnings, and make the builds much slower.

## Profiling Components with the Chrome Performance Tab {#profiling-components-with-the-chrome-performance-tab}

Expand Down
6 changes: 6 additions & 0 deletions content/docs/typechecking-with-proptypes.md
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,12 @@ MyComponent.propTypes = {
color: PropTypes.string,
fontSize: PropTypes.number
}),

// An object with warnings on extra properties
optionalObjectWithStrictShape: PropTypes.exact({
name: PropTypes.string,
quantity: PropTypes.number
}),

// You can chain any of the above with `isRequired` to make sure a warning
// is shown if the prop isn't provided.
Expand Down