diff --git a/content/blog/2018-03-27-update-on-async-rendering.md b/content/blog/2018-03-27-update-on-async-rendering.md index de19850ee..8fd58a456 100644 --- a/content/blog/2018-03-27-update-on-async-rendering.md +++ b/content/blog/2018-03-27-update-on-async-rendering.md @@ -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`. diff --git a/content/blog/2019-02-23-is-react-translated-yet.md b/content/blog/2019-02-23-is-react-translated-yet.md index 3ac56a5a4..812a5e8ca 100644 --- a/content/blog/2019-02-23-is-react-translated-yet.md +++ b/content/blog/2019-02-23-is-react-translated-yet.md @@ -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! diff --git a/content/community/courses.md b/content/community/courses.md index cd05adea0..0de2c69d5 100644 --- a/content/community/courses.md +++ b/content/community/courses.md @@ -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. diff --git a/content/community/meetups.md b/content/community/meetups.md index 6e78bc2f0..cbdcf3e38 100644 --- a/content/community/meetups.md +++ b/content/community/meetups.md @@ -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/) diff --git a/content/docs/create-a-new-react-app.md b/content/docs/create-a-new-react-app.md index 3f4d87e7f..061eae625 100644 --- a/content/docs/create-a-new-react-app.md +++ b/content/docs/create-a-new-react-app.md @@ -40,7 +40,7 @@ Zespół Reacta rekomenduje następujące rozwiązania: [Create React App](http://github.com/facebookincubator/create-react-app) zapewnia bardzo dogodne środowisko pracy sprzyjające **nauce Reacta**. Jest to najlepszy sposób, aby zacząć tworzyć **nową [jednostronicową](/docs/glossary.html#single-page-application) aplikację** w Reakcie. -Środowisko pracy stworzone przez Create React App nie tylko umożliwi ci stosowanie najnowszych funkcjonalności języka JavaScript, lecz także zoptymalizuje twój kod przed oddaniem go do użytku i ogólnie znacznie usprawni twoją pracę. Aby móc skorzystać z tego rozwiązania na swoim komputerze, będziesz potrzebować Node >= 6 oraz npm >= 5.2. Stworzenie projektu umożliwią ci następujące komendy: +Środowisko pracy stworzone przez Create React App nie tylko umożliwi ci stosowanie najnowszych funkcjonalności języka JavaScript, lecz także zoptymalizuje twój kod przed oddaniem go do użytku i ogólnie znacznie usprawni twoją pracę. Aby móc skorzystać z tego rozwiązania na swoim komputerze, będziesz potrzebować Node >= 8.10 oraz npm >= 5.6. Stworzenie projektu umożliwią ci następujące komendy: ```bash npx create-react-app moja-aplikacja diff --git a/content/docs/fragments.md b/content/docs/fragments.md index b30d5266d..9a6b023fb 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -18,7 +18,7 @@ render() { } ``` -Istnieje również nowy [skrócony zapis](#short-syntax) do deklarowania fragmentów, jednak nie jest on jeszcze wspierany przez wszystkie popularne narzędzia. +Istnieje również nowy [skrócony zapis](#short-syntax) do deklarowania fragmentów. ## Motywacja {#motivation} @@ -113,8 +113,6 @@ class Columns extends React.Component { Możesz używać `<>` tak samo, jak innych komponentów. Nie możesz jednak przekazywać do niego klucza (`key`) ani żadnych innych właściwości. -Zwróć uwagę, że **[wiele narzędzi nie posiada jeszcze wsparcia dla tego zapisu](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)**. Do czasu jego dodania pisz po prostu ``. - ### Fragmenty z kluczem {#keyed-fragments} Fragmenty zadeklarowane jawnie przy użyciu składni `` mogą posiadać klucze. Ma to zastosowanie, gdy zechcesz przemapować kolekcję na tablicę fragmentów -- na przykład do stworzenia listy opisów: diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md index 12e1db0b7..a61e99e9c 100644 --- a/content/docs/hooks-faq.md +++ b/content/docs/hooks-faq.md @@ -610,7 +610,7 @@ function ProductPage({ productId }) { This also allows you to handle out-of-order responses with a local variable inside the effect: -```js{2,6,8} +```js{2,6,10} useEffect(() => { let ignore = false; async function fetchProduct() { @@ -618,6 +618,8 @@ This also allows you to handle out-of-order responses with a local variable insi const json = await response.json(); if (!ignore) setProduct(json); } + + fetchProduct(); return () => { ignore = true }; }, [productId]); ``` diff --git a/content/docs/how-to-contribute.md b/content/docs/how-to-contribute.md index 46d5d626a..4222a9af4 100644 --- a/content/docs/how-to-contribute.md +++ b/content/docs/how-to-contribute.md @@ -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. diff --git a/content/docs/optimizing-performance.md b/content/docs/optimizing-performance.md index fb2aa9dc9..1222abf05 100644 --- a/content/docs/optimizing-performance.md +++ b/content/docs/optimizing-performance.md @@ -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: @@ -75,17 +75,17 @@ 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: @@ -93,33 +93,28 @@ 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`.
->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: [ @@ -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} @@ -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).
>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} diff --git a/content/docs/thinking-in-react.md b/content/docs/thinking-in-react.md index 88aa5db51..e8282d3ba 100644 --- a/content/docs/thinking-in-react.md +++ b/content/docs/thinking-in-react.md @@ -37,7 +37,7 @@ W pierwszej kolejności zakreśl na projekcie wszystkie komponenty (i podkompone Skąd wiadomo, co powinno być komponentem? Zastosuj te same metody, których używamy tworząc nowe funkcje lub obiekty. Jedną z takich metod jest [Zasada jednej odpowiedzialności](https://pl.wikipedia.org/wiki/Zasada_jednej_odpowiedzialno%C5%9Bci), zgodnie z którą każdy komponent powinien być odpowiedzialny za tylko jedną rzecz. Jeśli komponent nie spełnia tej zasady i odpowiada za więcej rzeczy, należy go rozbić na kilka mniejszych komponentów. -Model danych wyświetlanych użytkownikowi często odpowiada modelowi zawartemu w plikach JSON. Dlatego jeśli właściwie skonstruujesz swój model, twój interfejs użytkownika (a co za tym idzie także twój układ komponentów) zostanie właściwie zmapowany. Wiąże się to z faktem, że interfejsy użytkownika i modele danych zwykle stosują się do tych samych zasad *architektury informacji*. Wszystko to zaś oznacza, że zadanie podziału interfejsu użytkownika na komponenty jest zwykle zadaniem dziecinnie prostym. Po prostu podziel go tak, aby jednemu elementowi twojego modelu danych odpowiadał jeden komponent. +Model danych wyświetlanych użytkownikowi często odpowiada modelowi zawartemu w plikach JSON. Dlatego jeśli właściwie skonstruujesz swój model, twój interfejs użytkownika (a co za tym idzie także twój układ komponentów) zostanie właściwie zmapowany. Wiąże się to z faktem, że interfejsy użytkownika i modele danych zwykle stosują się do tych samych zasad *architektury informacji*. Podziel swój interfejs tak, aby jednemu elementowi twojego modelu danych odpowiadał jeden komponent. ![Wykres komponentów](../images/blog/thinking-in-react-components.png) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index 4004e7820..c986fc010 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -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.