From 39f30d42115ef9968c71d2ceaf04b6140c0a24c9 Mon Sep 17 00:00:00 2001 From: Emma Date: Mon, 24 Jun 2019 22:54:37 +0100 Subject: [PATCH 01/20] Update thinking-in-react.md (#2098) Follow up to https://github.com/reactjs/reactjs.org/pull/2095#discussion_r296498172 --- content/docs/thinking-in-react.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/thinking-in-react.md b/content/docs/thinking-in-react.md index 25be9d812..12b2712ee 100644 --- a/content/docs/thinking-in-react.md +++ b/content/docs/thinking-in-react.md @@ -37,7 +37,7 @@ The first thing you'll want to do is to draw boxes around every component (and s But how do you know what should be its own component? Use the same techniques for deciding if you should create a new function or object. One such technique is the [single responsibility principle](https://en.wikipedia.org/wiki/Single_responsibility_principle), that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents. -Since you're often displaying a JSON data model to a user, you'll find that if your model was built correctly, your UI (and therefore your component structure) will map nicely. That's because UI and data models tend to adhere to the same *information architecture*, which means the work of separating your UI into components is often trivial. Break it up into components that represent exactly one piece of your data model. +Since you're often displaying a JSON data model to a user, you'll find that if your model was built correctly, your UI (and therefore your component structure) will map nicely. That's because UI and data models tend to adhere to the same *information architecture*. Separate your UI into components, where each component matches one piece of your data model. ![Component diagram](../images/blog/thinking-in-react-components.png) From cb5a61cdbfa5e72646cfb954056c6a4fde490a8c Mon Sep 17 00:00:00 2001 From: Riley Avron Date: Tue, 25 Jun 2019 17:15:19 -0700 Subject: [PATCH 02/20] Add missing function call to example (#2102) An example for useEffect omitted the actual invocation of the function in question. --- content/docs/hooks-faq.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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]); ``` From 4d1197b3be54da0eebbfce0b7a3e5a1c0442ff02 Mon Sep 17 00:00:00 2001 From: Vlad Date: Sat, 29 Jun 2019 21:05:42 +0300 Subject: [PATCH 03/20] Add description of PropTypes.exact (#1581) Info from https://github.com/facebook/prop-types#usage --- content/docs/typechecking-with-proptypes.md | 6 ++++++ 1 file changed, 6 insertions(+) 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. From 1705c25143f58a07832ab5173ce7ea97702f0d98 Mon Sep 17 00:00:00 2001 From: Jesse Jackson Date: Sun, 30 Jun 2019 02:31:25 -0500 Subject: [PATCH 04/20] Improve grammar (#2106) --- content/docs/hooks-reference.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index 7a91e9253..75bd998d3 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -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( From 6a6b9170f423324f10b7f41c45663057abff88fe Mon Sep 17 00:00:00 2001 From: Matt Wood Date: Sun, 30 Jun 2019 02:33:05 -0500 Subject: [PATCH 05/20] Fixed minor code-splitting.md typo (#1292) * Fixed minor code-splitting.md typo * Update code-splitting.md Co-authored-by: Alexey Pyltsyn --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index ff0cc84df..b5bfe9b76 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -115,7 +115,7 @@ parse the dynamic import syntax but is not transforming it. For that you will ne > Note: > -> `React.lazy` and Suspense is not yet available for server-side rendering. If you want to do code-splitting in a server rendered app, we recommend [Loadable Components](https://github.com/smooth-code/loadable-components). It has a nice [guide for bundle splitting with server-side rendering](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md). +> `React.lazy` and Suspense are not yet available for server-side rendering. If you want to do code-splitting in a server rendered app, we recommend [Loadable Components](https://github.com/smooth-code/loadable-components). It has a nice [guide for bundle splitting with server-side rendering](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md). The `React.lazy` function lets you render a dynamic import as a regular component. From aa84270837fc6c199dfc46f526c1d6e9fd5d0a9e Mon Sep 17 00:00:00 2001 From: Dom Date: Sun, 30 Jun 2019 03:36:19 -0400 Subject: [PATCH 06/20] Fixed broken link to discuss.react.org (#2107) * Replaced broken discuss.reactjs.org link On the how-to-contribute page, there is a broken link under the https://reactjs.org/docs/how-to-contribute.html#how-to-get-in-touch section. As outlined in https://github.com/reactjs/reactjs.org/issues/2080 `discuss.reactjs.org` isn't reachable. I edited the text to display `Discussion Forums` which links to https://reactjs.org/community/support.html#popular-discussion-forums (as I was unable to find an official reactjs discussion forum). * fixed text case changed `Discussion Forums` to `Discussion forums` --- content/docs/how-to-contribute.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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. From 7847d234219bbf58510730411ffdb2f4d0151d66 Mon Sep 17 00:00:00 2001 From: Alyssa Date: Sun, 30 Jun 2019 00:37:58 -0700 Subject: [PATCH 07/20] Update 2019-02-23-is-react-translated-yet.md (#2109) --- content/blog/2019-02-23-is-react-translated-yet.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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! From 6fc8c43e364049258eeb26583078758b98d00a9f Mon Sep 17 00:00:00 2001 From: Ayush Rawal <31813648+Ayush-Rawal@users.noreply.github.com> Date: Sun, 30 Jun 2019 07:38:26 +0000 Subject: [PATCH 08/20] Add Meetup (#2097) Add JaipurJS - JavaScript meetup in Jaipur, Rajasthan, India --- content/community/meetups.md | 1 + 1 file changed, 1 insertion(+) 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/) From 03260d7149df8c26a0c0c83a01795a4c31293579 Mon Sep 17 00:00:00 2001 From: ZachMayer Date: Sun, 30 Jun 2019 00:42:08 -0700 Subject: [PATCH 09/20] [docs] Updated required node and npm versions to match CRA docs in 'docs/create-a-new-react-app.html' (#2099) https://facebook.github.io/create-react-app/docs/getting-started --- content/docs/create-a-new-react-app.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/create-a-new-react-app.md b/content/docs/create-a-new-react-app.md index 92799e808..ec1c273b4 100644 --- a/content/docs/create-a-new-react-app.md +++ b/content/docs/create-a-new-react-app.md @@ -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 From d71c6e3695c2d8789866bd2a8ff59be6a6b1a4e6 Mon Sep 17 00:00:00 2001 From: Sibiraj <45618743+sibiraj-sr@users.noreply.github.com> Date: Sun, 30 Jun 2019 13:20:44 +0530 Subject: [PATCH 10/20] Remove tooling support info in fragment docs (#2096) --- content/docs/fragments.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/content/docs/fragments.md b/content/docs/fragments.md index 04de0463b..33619db2f 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -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} @@ -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 `` until the tooling catches up. - ### Keyed Fragments {#keyed-fragments} Fragments declared with the explicit `` 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: From 76588f63356172df1c1fc7437625df81e75ee90b Mon Sep 17 00:00:00 2001 From: Chang Yan Date: Sun, 30 Jun 2019 10:54:45 -0700 Subject: [PATCH 11/20] Correct the description of when gDSFP gets called (#2100) --- content/blog/2018-03-27-update-on-async-rendering.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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`. From d47597f02cce581398118a9ceaa57e3c443542bb Mon Sep 17 00:00:00 2001 From: Chris Dickinson Date: Mon, 1 Jul 2019 06:15:34 +0100 Subject: [PATCH 12/20] Added free Scrimba React Tutorial (#2111) A great video/editor tutorial consisting of 48 hands-on lessons. --- content/community/courses.md | 2 ++ 1 file changed, 2 insertions(+) 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. From c024001caf50180a896c09467d06b2ad7b2fb8f4 Mon Sep 17 00:00:00 2001 From: Sibiraj <45618743+sibiraj-sr@users.noreply.github.com> Date: Mon, 1 Jul 2019 15:09:11 +0530 Subject: [PATCH 13/20] Update Production Optimization docs to use terser (#2112) * Update Production Optimization docs to use terser * Update Optimizing Performance.md * Fix typo Co-Authored-By: Alexey Pyltsyn --- content/docs/optimizing-performance.md | 47 +++++++++++++------------- 1 file changed, 23 insertions(+), 24 deletions(-) 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} From 231d713e2ac472b41cfb7e2e619e28181d657c47 Mon Sep 17 00:00:00 2001 From: Wojciech Grzebieniowski Date: Tue, 2 Jul 2019 21:14:08 +0200 Subject: [PATCH 14/20] Update code-splitting.md --- content/docs/code-splitting.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 589c058ac..656dbabec 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -115,14 +115,10 @@ składnię dynamicznego importu, ale jej nie przekształca w żaden sposób. W t > Uwaga: > -<<<<<<< HEAD > `React.lazy` i `Suspense` nie są jeszcze dostępne dla renderowania po stronie serwera. > Jeśli chcesz dzielić kod dla aplikacji renderowanej na serwerze, sugerujemy skorzystać > z pakietu [Loadable Components](https://github.com/smooth-code/loadable-components). -> Ma on przystępną [instrukcję dzielenia pakietów przy renderowaniu po stronie serwera](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md). -======= -> `React.lazy` and Suspense are not yet available for server-side rendering. If you want to do code-splitting in a server rendered app, we recommend [Loadable Components](https://github.com/smooth-code/loadable-components). It has a nice [guide for bundle splitting with server-side rendering](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md). ->>>>>>> c024001caf50180a896c09467d06b2ad7b2fb8f4 +> Ma on przystępną [instrukcję dzielenia pakietów przy renderowaniu po stronie serwera](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md).\ Funkcja `React.lazy` pozwala renderować dynamicznie importowane komponenty jak zwykłe komponenty. From d97b5fc2b4cb2f0554943f3ff70fa8c7746bacd5 Mon Sep 17 00:00:00 2001 From: Wojciech Grzebieniowski Date: Tue, 2 Jul 2019 21:14:35 +0200 Subject: [PATCH 15/20] Update code-splitting.md --- content/docs/code-splitting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md index 656dbabec..1db7fcd11 100644 --- a/content/docs/code-splitting.md +++ b/content/docs/code-splitting.md @@ -118,7 +118,7 @@ składnię dynamicznego importu, ale jej nie przekształca w żaden sposób. W t > `React.lazy` i `Suspense` nie są jeszcze dostępne dla renderowania po stronie serwera. > Jeśli chcesz dzielić kod dla aplikacji renderowanej na serwerze, sugerujemy skorzystać > z pakietu [Loadable Components](https://github.com/smooth-code/loadable-components). -> Ma on przystępną [instrukcję dzielenia pakietów przy renderowaniu po stronie serwera](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md).\ +> Ma on przystępną [instrukcję dzielenia pakietów przy renderowaniu po stronie serwera](https://github.com/smooth-code/loadable-components/blob/master/packages/server/README.md). Funkcja `React.lazy` pozwala renderować dynamicznie importowane komponenty jak zwykłe komponenty. From cbf12c01e3406a0477444eeb869a01b7db4a95f3 Mon Sep 17 00:00:00 2001 From: Wojciech Grzebieniowski Date: Tue, 2 Jul 2019 21:15:47 +0200 Subject: [PATCH 16/20] Update create-a-new-react-app.md --- content/docs/create-a-new-react-app.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/content/docs/create-a-new-react-app.md b/content/docs/create-a-new-react-app.md index 95ce38faa..061eae625 100644 --- a/content/docs/create-a-new-react-app.md +++ b/content/docs/create-a-new-react-app.md @@ -40,11 +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. -<<<<<<< HEAD -Ś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: -======= -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: ->>>>>>> c024001caf50180a896c09467d06b2ad7b2fb8f4 +Ś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 From 22f2387e36b54a7914c2303bc2186ab45e6da852 Mon Sep 17 00:00:00 2001 From: Wojciech Grzebieniowski Date: Tue, 2 Jul 2019 21:18:32 +0200 Subject: [PATCH 17/20] Update fragments.md --- content/docs/fragments.md | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/content/docs/fragments.md b/content/docs/fragments.md index b0e779efc..9a6b023fb 100644 --- a/content/docs/fragments.md +++ b/content/docs/fragments.md @@ -18,11 +18,7 @@ render() { } ``` -<<<<<<< HEAD -Istnieje również nowy [skrócony zapis](#short-syntax) do deklarowania fragmentów, jednak nie jest on jeszcze wspierany przez wszystkie popularne narzędzia. -======= -There is also a new [short syntax](#short-syntax) for declaring them. ->>>>>>> c024001caf50180a896c09467d06b2ad7b2fb8f4 +Istnieje również nowy [skrócony zapis](#short-syntax) do deklarowania fragmentów. ## Motywacja {#motivation} @@ -117,13 +113,7 @@ 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. -<<<<<<< HEAD -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} -======= -### Keyed Fragments {#keyed-fragments} ->>>>>>> c024001caf50180a896c09467d06b2ad7b2fb8f4 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: From 8865289ff45c0953741ed6185e25a84d7599764a Mon Sep 17 00:00:00 2001 From: Wojciech Grzebieniowski Date: Tue, 2 Jul 2019 21:20:18 +0200 Subject: [PATCH 18/20] Update hooks-reference.md --- content/docs/hooks-reference.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md index 34c48d011..c239cd895 100644 --- a/content/docs/hooks-reference.md +++ b/content/docs/hooks-reference.md @@ -243,11 +243,7 @@ function Counter() { #### Określanie stanu początkowego {#specifying-the-initial-state} -<<<<<<< HEAD Istnieją dwa sposoby na inicjalizację stanu `useReducer`. W zależności od potrzeb, możesz wybrać jeden z nich. Najprostszym sposobem jest przekazanie początkowego stanu, jako drugi 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: ->>>>>>> c024001caf50180a896c09467d06b2ad7b2fb8f4 ```js{3} const [state, dispatch] = useReducer( From d3c9305393636e808131be719e43473dbbe5c5ce Mon Sep 17 00:00:00 2001 From: Wojciech Grzebieniowski Date: Tue, 2 Jul 2019 21:24:02 +0200 Subject: [PATCH 19/20] Update thinking-in-react.md --- content/docs/thinking-in-react.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/content/docs/thinking-in-react.md b/content/docs/thinking-in-react.md index bbe741f04..345980635 100644 --- a/content/docs/thinking-in-react.md +++ b/content/docs/thinking-in-react.md @@ -37,11 +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. -<<<<<<< HEAD -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. -======= -Since you're often displaying a JSON data model to a user, you'll find that if your model was built correctly, your UI (and therefore your component structure) will map nicely. That's because UI and data models tend to adhere to the same *information architecture*. Separate your UI into components, where each component matches one piece of your data model. ->>>>>>> c024001caf50180a896c09467d06b2ad7b2fb8f4 +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 twój interfejs tak, aby jednemu elementowi twojego modelu danych odpowiadał jeden komponent. ![Wykres komponentów](../images/blog/thinking-in-react-components.png) From 7fc28bc46072ec3c64e669cf0ffd8e6b26d0a397 Mon Sep 17 00:00:00 2001 From: Wojciech Grzebieniowski Date: Tue, 2 Jul 2019 21:24:41 +0200 Subject: [PATCH 20/20] Update thinking-in-react.md --- content/docs/thinking-in-react.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/thinking-in-react.md b/content/docs/thinking-in-react.md index 345980635..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*. Podziel twój interfejs 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)