From 92ad9c2f7abb36a306f563fe48b7f52649929608 Mon Sep 17 00:00:00 2001 From: Emma Date: Sun, 23 Jun 2019 22:07:22 +0100 Subject: [PATCH 01/32] Update thinking-in-react.md (#2095) Please refer to https://justsimply.dev for the thinking behind these proposed changes. --- content/docs/thinking-in-react.md | 26 ++++++++++++-------------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/content/docs/thinking-in-react.md b/content/docs/thinking-in-react.md index 7b2e2e7e6..25be9d812 100644 --- a/content/docs/thinking-in-react.md +++ b/content/docs/thinking-in-react.md @@ -35,13 +35,13 @@ Our JSON API returns some data that looks like this: The first thing you'll want to do is to draw boxes around every component (and subcomponent) in the mock and give them all names. If you're working with a designer, they may have already done this, so go talk to them! Their Photoshop layer names may end up being the names of your React components! -But how do you know what should be its own component? Just 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. +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. Just 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*, 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. ![Component diagram](../images/blog/thinking-in-react-components.png) -You'll see here that we have five components in our simple app. We've italicized the data each component represents. +You'll see here that we have five components in our app. We've italicized the data each component represents. 1. **`FilterableProductTable` (orange):** contains the entirety of the example 2. **`SearchBar` (blue):** receives all *user input* @@ -51,7 +51,7 @@ You'll see here that we have five components in our simple app. We've italicized If you look at `ProductTable`, you'll see that the table header (containing the "Name" and "Price" labels) isn't its own component. This is a matter of preference, and there's an argument to be made either way. For this example, we left it as part of `ProductTable` because it is part of rendering the *data collection* which is `ProductTable`'s responsibility. However, if this header grows to be complex (i.e. if we were to add affordances for sorting), it would certainly make sense to make this its own `ProductTableHeader` component. -Now that we've identified the components in our mock, let's arrange them into a hierarchy. This is easy. Components that appear within another component in the mock should appear as a child in the hierarchy: +Now that we've identified the components in our mock, let's arrange them into a hierarchy. Components that appear within another component in the mock should appear as a child in the hierarchy: * `FilterableProductTable` * `SearchBar` @@ -70,9 +70,9 @@ To build a static version of your app that renders your data model, you'll want You can build top-down or bottom-up. That is, you can either start with building the components higher up in the hierarchy (i.e. starting with `FilterableProductTable`) or with the ones lower in it (`ProductRow`). In simpler examples, it's usually easier to go top-down, and on larger projects, it's easier to go bottom-up and write tests as you build. -At the end of this step, you'll have a library of reusable components that render your data model. The components will only have `render()` methods since this is a static version of your app. The component at the top of the hierarchy (`FilterableProductTable`) will take your data model as a prop. If you make a change to your underlying data model and call `ReactDOM.render()` again, the UI will be updated. It's easy to see how your UI is updated and where to make changes since there's nothing complicated going on. React's **one-way data flow** (also called *one-way binding*) keeps everything modular and fast. +At the end of this step, you'll have a library of reusable components that render your data model. The components will only have `render()` methods since this is a static version of your app. The component at the top of the hierarchy (`FilterableProductTable`) will take your data model as a prop. If you make a change to your underlying data model and call `ReactDOM.render()` again, the UI will be updated. You can see how your UI is updated and where to make changes. React's **one-way data flow** (also called *one-way binding*) keeps everything modular and fast. -Simply refer to the [React docs](/docs/) if you need help executing this step. +Refer to the [React docs](/docs/) if you need help executing this step. ### A Brief Interlude: Props vs State {#a-brief-interlude-props-vs-state} @@ -80,9 +80,9 @@ There are two types of "model" data in React: props and state. It's important to ## Step 3: Identify The Minimal (but complete) Representation Of UI State {#step-3-identify-the-minimal-but-complete-representation-of-ui-state} -To make your UI interactive, you need to be able to trigger changes to your underlying data model. React makes this easy with **state**. +To make your UI interactive, you need to be able to trigger changes to your underlying data model. React achieves this with **state**. -To build your app correctly, you first need to think of the minimal set of mutable state that your app needs. The key here is [DRY: *Don't Repeat Yourself*](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself). Figure out the absolute minimal representation of the state your application needs and compute everything else you need on-demand. For example, if you're building a TODO list, just keep an array of the TODO items around; don't keep a separate state variable for the count. Instead, when you want to render the TODO count, simply take the length of the TODO items array. +To build your app correctly, you first need to think of the minimal set of mutable state that your app needs. The key here is [DRY: *Don't Repeat Yourself*](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself). Figure out the absolute minimal representation of the state your application needs and compute everything else you need on-demand. For example, if you're building a TODO list, keep an array of the TODO items around; don't keep a separate state variable for the count. Instead, when you want to render the TODO count, take the length of the TODO items array. Think of all of the pieces of data in our example application. We have: @@ -91,7 +91,7 @@ Think of all of the pieces of data in our example application. We have: * The value of the checkbox * The filtered list of products -Let's go through each one and figure out which one is state. Simply ask three questions about each piece of data: +Let's go through each one and figure out which one is state. Ask three questions about each piece of data: 1. Is it passed in from a parent via props? If so, it probably isn't state. 2. Does it remain unchanged over time? If so, it probably isn't state. @@ -117,7 +117,7 @@ For each piece of state in your application: * Identify every component that renders something based on that state. * Find a common owner component (a single component above all the components that need the state in the hierarchy). * Either the common owner or another component higher up in the hierarchy should own the state. - * If you can't find a component where it makes sense to own the state, create a new component simply for holding the state and add it somewhere in the hierarchy above the common owner component. + * If you can't find a component where it makes sense to own the state, create a new component solely for holding the state and add it somewhere in the hierarchy above the common owner component. Let's run through this strategy for our application: @@ -135,14 +135,12 @@ You can start seeing how your application will behave: set `filterText` to `"bal So far, we've built an app that renders correctly as a function of props and state flowing down the hierarchy. Now it's time to support data flowing the other way: the form components deep in the hierarchy need to update the state in `FilterableProductTable`. -React makes this data flow explicit to make it easy to understand how your program works, but it does require a little more typing than traditional two-way data binding. +React makes this data flow explicit to help you understand how your program works, but it does require a little more typing than traditional two-way data binding. If you try to type or check the box in the current version of the example, you'll see that React ignores your input. This is intentional, as we've set the `value` prop of the `input` to always be equal to the `state` passed in from `FilterableProductTable`. Let's think about what we want to happen. We want to make sure that whenever the user changes the form, we update the state to reflect the user input. Since components should only update their own state, `FilterableProductTable` will pass callbacks to `SearchBar` that will fire whenever the state should be updated. We can use the `onChange` event on the inputs to be notified of it. The callbacks passed by `FilterableProductTable` will call `setState()`, and the app will be updated. -Though this sounds complex, it's really just a few lines of code. And it's really explicit how your data is flowing throughout the app. - ## And That's It {#and-thats-it} -Hopefully, this gives you an idea of how to think about building components and applications with React. While it may be a little more typing than you're used to, remember that code is read far more than it's written, and it's extremely easy to read this modular, explicit code. As you start to build large libraries of components, you'll appreciate this explicitness and modularity, and with code reuse, your lines of code will start to shrink. :) +Hopefully, this gives you an idea of how to think about building components and applications with React. While it may be a little more typing than you're used to, remember that code is read far more than it's written, and it's less difficult to read this modular, explicit code. As you start to build large libraries of components, you'll appreciate this explicitness and modularity, and with code reuse, your lines of code will start to shrink. :) From 39f30d42115ef9968c71d2ceaf04b6140c0a24c9 Mon Sep 17 00:00:00 2001 From: Emma Date: Mon, 24 Jun 2019 22:54:37 +0100 Subject: [PATCH 02/32] 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 03/32] 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 04/32] 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 05/32] 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 06/32] 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 07/32] 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 08/32] 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 09/32] 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 10/32] [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 11/32] 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 12/32] 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 13/32] 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 14/32] 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 18f662ce41b0de118cf071e22d994a3117eb6878 Mon Sep 17 00:00:00 2001 From: Neil de Carteret Date: Mon, 1 Jul 2019 16:46:54 +0100 Subject: [PATCH 15/32] Update hooks-faq.md (#2113) * Update hooks-faq.md I tripped up slightly while reading this example for using the callback form of a state setter inside an effect. I've added a few lines that might help a hook newbie grok the differences between the examples. * Update hooks-faq.md * Update hooks-faq.md --- content/docs/hooks-faq.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md index a61e99e9c..d3683b076 100644 --- a/content/docs/hooks-faq.md +++ b/content/docs/hooks-faq.md @@ -675,7 +675,9 @@ function Counter() { } ``` -Specifying `[count]` as a list of dependencies would fix the bug, but would cause the interval to be reset on every change. That may not be desirable. To fix this, we can use the [functional update form of `setState`](/docs/hooks-reference.html#functional-updates). It lets us specify *how* the state needs to change without referencing the *current* state: +The empty set of dependencies, `[]`, means that the effect will only run once when the component mounts, and not on every re-render. The problem is that inside the `setInterval` callback, the value of `count` does not change, because we've created a closure with the value of `count` set to `0` as it was when the effect callback ran. Every second, this callback then calls `setCount(0 + 1)`, so the count never goes above 1. + +Specifying `[count]` as a list of dependencies would fix the bug, but would cause the interval to be reset on every change. Effectively, each `setInterval` would get one chance to execute before being cleared (similar to a `setTimout`.) That may not be desirable. To fix this, we can use the [functional update form of `setState`](/docs/hooks-reference.html#functional-updates). It lets us specify *how* the state needs to change without referencing the *current* state: ```js{6,9} function Counter() { @@ -694,6 +696,8 @@ function Counter() { (The identity of the `setCount` function is guaranteed to be stable so it's safe to omit.) +Now, the `setInterval` callback executes once a second, but each time the inner call to `setCount` can use an up-to-date value for `count` (called `c` in the callback here.) + In more complex cases (such as if one state depends on another state), try moving the state update logic outside the effect with the [`useReducer` Hook](/docs/hooks-reference.html#usereducer). [This article](https://adamrackis.dev/state-and-use-reducer/) offers an example of how you can do this. **The identity of the `dispatch` function from `useReducer` is always stable** — even if the reducer function is declared inside the component and reads its props. As a last resort, if you want something like `this` in a class, you can [use a ref](/docs/hooks-faq.html#is-there-something-like-instance-variables) to hold a mutable variable. Then you can write and read to it. For example: From ed9d73105a93239f94d84c619e84ae8adec43483 Mon Sep 17 00:00:00 2001 From: SR Date: Mon, 1 Jul 2019 12:08:56 -0700 Subject: [PATCH 16/32] Update tutorial.md (#2115) changed 'any React apps' to 'any React app' --- content/tutorial/tutorial.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index 191381cab..57b5e39f4 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -16,7 +16,7 @@ This tutorial doesn't assume any existing React knowledge. ## Before We Start the Tutorial {#before-we-start-the-tutorial} -We will build a small game during this tutorial. **You might be tempted to skip it because you're not building games -- but give it a chance.** The techniques you'll learn in the tutorial are fundamental to building any React apps, and mastering it will give you a deep understanding of React. +We will build a small game during this tutorial. **You might be tempted to skip it because you're not building games -- but give it a chance.** The techniques you'll learn in the tutorial are fundamental to building any React app, and mastering it will give you a deep understanding of React. >Tip > From 2dd6924e25a9f9292c2a6fbca1d62eb958fba1fb Mon Sep 17 00:00:00 2001 From: aaron Date: Thu, 4 Jul 2019 05:25:25 +1000 Subject: [PATCH 17/32] move past conferences to the bottom of the list (#2118) --- content/community/conferences.md | 60 ++++++++++++++++---------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/content/community/conferences.md b/content/community/conferences.md index febeb0755..ede5d0593 100644 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -12,36 +12,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c ## Upcoming Conferences {#upcoming-conferences} -### ReactEurope 2019 {#reacteurope-2019} -May 23-24, 2019 in Paris, France - -[Website](https://www.react-europe.org) - [Twitter](https://twitter.com/ReactEurope) - [Facebook](https://www.facebook.com/ReactEurope) - [Videos](https://www.youtube.com/c/ReacteuropeOrgConf) - -### React Conf Armenia 2019 {#react-conf-am-19} -May 25, 2019 in Yerevan, Armenia - -[Website](https://reactconf.am/) - [Twitter](https://twitter.com/ReactConfAM) - [Facebook](https://www.facebook.com/reactconf.am/) - [YouTube](https://www.youtube.com/c/JavaScriptConferenceArmenia) - [CFP](http://bit.ly/speakReact) - -### ReactNext 2019 {#react-next-2019} -June 11, 2019. Tel Aviv, Israel - -[Website](https://react-next.com) - [Twitter](https://twitter.com/ReactNext) - [Videos](https://www.youtube.com/channel/UC3BT8hh3yTTYxbLQy_wbk2w) - -### React Norway 2019 {#react-norway-2019} -June 12, 2019. Larvik, Norway - -[Website](https://reactnorway.com) - [Twitter](https://twitter.com/ReactNorway) - -### React Loop 2019 {#react-loop-2019} -June 21, 2019 Chicago, Illinois USA - -[Website](https://reactloop.com) - [Twitter](https://twitter.com/ReactLoop) - -### Chain React 2019 {#chain-react-2019} -July 11-12, 2019. Portland, OR, USA. - -[Website](https://infinite.red/ChainReactConf) - ### React Rally 2019 {#react-rally-2019} August 22-23, 2019. Salt Lake City, USA. @@ -395,3 +365,33 @@ May 3, 2019 in London, UK May 11 in Sofia, Bulgaria [Website](http://react-not-a-conf.com/) - [Twitter](https://twitter.com/reactnotaconf) - [Facebook](https://www.facebook.com/events/780891358936156) + +### ReactEurope 2019 {#reacteurope-2019} +May 23-24, 2019 in Paris, France + +[Website](https://www.react-europe.org) - [Twitter](https://twitter.com/ReactEurope) - [Facebook](https://www.facebook.com/ReactEurope) - [Videos](https://www.youtube.com/c/ReacteuropeOrgConf) + +### React Conf Armenia 2019 {#react-conf-am-19} +May 25, 2019 in Yerevan, Armenia + +[Website](https://reactconf.am/) - [Twitter](https://twitter.com/ReactConfAM) - [Facebook](https://www.facebook.com/reactconf.am/) - [YouTube](https://www.youtube.com/c/JavaScriptConferenceArmenia) - [CFP](http://bit.ly/speakReact) + +### ReactNext 2019 {#react-next-2019} +June 11, 2019. Tel Aviv, Israel + +[Website](https://react-next.com) - [Twitter](https://twitter.com/ReactNext) - [Videos](https://www.youtube.com/channel/UC3BT8hh3yTTYxbLQy_wbk2w) + +### React Norway 2019 {#react-norway-2019} +June 12, 2019. Larvik, Norway + +[Website](https://reactnorway.com) - [Twitter](https://twitter.com/ReactNorway) + +### React Loop 2019 {#react-loop-2019} +June 21, 2019 Chicago, Illinois USA + +[Website](https://reactloop.com) - [Twitter](https://twitter.com/ReactLoop) + +### Chain React 2019 {#chain-react-2019} +July 11-12, 2019. Portland, OR, USA. + +[Website](https://infinite.red/ChainReactConf) From 06a029d53d7ee7e5e717dd39450ac6af1ff554e5 Mon Sep 17 00:00:00 2001 From: Akansh Gulati Date: Fri, 5 Jul 2019 03:32:06 +0530 Subject: [PATCH 18/32] fix(Blog): Post title updated to correct word for yes word in spanish (#2122) --- 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 812a5e8ca..ac5b8e74d 100644 --- a/content/blog/2019-02-23-is-react-translated-yet.md +++ b/content/blog/2019-02-23-is-react-translated-yet.md @@ -1,5 +1,5 @@ --- -title: "Is React Translated Yet? ¡Sí! Sim! はい！" +title: "Is React Translated Yet? ¡Sí! Sím! はい！" author: [tesseralis] --- From 26d9c14a7db52dc1d1275a3ae9a18d73e333f1e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Fri, 5 Jul 2019 13:52:38 -0400 Subject: [PATCH 19/32] Revert "fix(Blog): Post title updated to correct word for yes word in spanish (#2122)" (#2130) This reverts commit 06a029d53d7ee7e5e717dd39450ac6af1ff554e5. --- 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 ac5b8e74d..812a5e8ca 100644 --- a/content/blog/2019-02-23-is-react-translated-yet.md +++ b/content/blog/2019-02-23-is-react-translated-yet.md @@ -1,5 +1,5 @@ --- -title: "Is React Translated Yet? ¡Sí! Sím! はい！" +title: "Is React Translated Yet? ¡Sí! Sim! はい！" author: [tesseralis] --- From 40e96a44e5d42b57a453afeb5f6daed792025371 Mon Sep 17 00:00:00 2001 From: Maxim Kudryavtsev Date: Sat, 6 Jul 2019 07:16:17 +0300 Subject: [PATCH 20/32] Add DevExtreme Reactive to the Components list (#2127) --- content/community/tools-ui-components.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/community/tools-ui-components.md b/content/community/tools-ui-components.md index 57367cf75..a0535c829 100644 --- a/content/community/tools-ui-components.md +++ b/content/community/tools-ui-components.md @@ -72,6 +72,7 @@ permalink: community/ui-components.html ## Fee Based Components {#fee-based-components} * **[ag-Grid](https://www.ag-grid.com)** Advanced data grid / data table for React. +* **[DevExtreme Reactive](https://devexpress.github.io/devextreme-reactive/react/)** High-performance plugin-based Data Grid, Scheduler and Chart components for Bootstrap and Material Design. * **[ExtReact components](https://www.sencha.com/products/extreact//)**: 115+ Ready-to-Use UI Components. * **[Grapecity Wijmo UI Components for React](https://www.grapecity.com/en/react/)**: Expand your React UI options with Wijmo’s complete collection of JavaScript components. * **[jQWidgets React components](https://www.jqwidgets.com/react/)**: Enterprise Ready 70+ UI Components. From b57265b8f9c8601aa52777f8c859fc5f14835d6e Mon Sep 17 00:00:00 2001 From: Natalie Marleny <31798108+nataliemarleny@users.noreply.github.com> Date: Tue, 9 Jul 2019 07:34:06 +0100 Subject: [PATCH 21/32] =?UTF-8?q?[Documentation]=20Fix:=20Update=20link=20?= =?UTF-8?q?to=20Chrome=20Accessibility=20Inspec=E2=80=A6=20(#2134)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/accessibility.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md index 61a5a8bc2..6e75e34e6 100644 --- a/content/docs/accessibility.md +++ b/content/docs/accessibility.md @@ -468,7 +468,7 @@ to assistive technology, such as screen readers. In some browsers we can easily view the accessibility information for each element in the accessibility tree: - [Using the Accessibility Inspector in Firefox](https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector) -- [Activate the Accessibility Inspector in Chrome](https://gist.github.com/marcysutton/0a42f815878c159517a55e6652e3b23a) +- [Using the Accessibility Inspector in Chrome](https://developers.google.com/web/tools/chrome-devtools/accessibility/reference#pane) - [Using the Accessibility Inspector in OS X Safari](https://developer.apple.com/library/content/documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXTestingApps.html) ### Screen readers {#screen-readers} From 06dd4cbe97886a0428efbfa9814274751a1d4284 Mon Sep 17 00:00:00 2001 From: UmaR Aamer Date: Tue, 9 Jul 2019 20:33:15 +0500 Subject: [PATCH 22/32] React Native added support for hooks in 0.59 (#2121) * React Native added support for hooks in 0.59 React Native 0.59 and above already support React Hooks, this line is no longer necessary, causes confusion for some people that it is not working right now. We can also mention React Native version if needed. * update with react native mention of hooks support * Update content/docs/hooks-faq.md suggested changes Co-Authored-By: Alexey Pyltsyn --- content/docs/hooks-faq.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md index d3683b076..ef3662b88 100644 --- a/content/docs/hooks-faq.md +++ b/content/docs/hooks-faq.md @@ -70,7 +70,7 @@ Starting with 16.8.0, React includes a stable implementation of React Hooks for: Note that **to enable Hooks, all React packages need to be 16.8.0 or higher**. Hooks won't work if you forget to update, for example, React DOM. -React Native will fully support Hooks in its next stable release. +React Native 0.59 and above support Hooks. ### Do I need to rewrite all my class components? {#do-i-need-to-rewrite-all-my-class-components} From e1abbdecfd1a5a804bd38852e88373f54ddde014 Mon Sep 17 00:00:00 2001 From: Daniel Banck Date: Tue, 9 Jul 2019 17:33:51 +0200 Subject: [PATCH 23/32] Add Kiel to the list of React Meetups (#2136) --- content/community/meetups.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/community/meetups.md b/content/community/meetups.md index cbdcf3e38..fc6c0e46a 100644 --- a/content/community/meetups.md +++ b/content/community/meetups.md @@ -55,6 +55,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet * [Düsseldorf](https://www.meetup.com/de-DE/ReactJS-Meetup-Dusseldorf/) * [Hamburg](https://www.meetup.com/Hamburg-React-js-Meetup/) * [Karlsruhe](https://www.meetup.com/react_ka/) +* [Kiel](https://www.meetup.com/Kiel-React-Native-Meetup/) * [Munich](https://www.meetup.com/ReactJS-Meetup-Munich/) * [React Berlin](https://www.meetup.com/React-Berlin/) * [React.JS Girls Berlin](https://www.meetup.com/ReactJS-Girls-Berlin/) From 4af9f2dcd1014c18ea6ce98794ba0d63874ac9d2 Mon Sep 17 00:00:00 2001 From: Mikko Vedru Date: Thu, 11 Jul 2019 21:11:59 +0300 Subject: [PATCH 24/32] Reduce confusion about adding additional fields to .this (#2142) As a new React learner, this part was a bit confusing as I though that it was referencing `() => this.tick()` part of the code. My addition would help at least people like me. --- content/docs/state-and-lifecycle.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md index 3967ae7c9..e3ddafa28 100644 --- a/content/docs/state-and-lifecycle.md +++ b/content/docs/state-and-lifecycle.md @@ -244,7 +244,7 @@ The `componentDidMount()` method runs after the component output has been render } ``` -Note how we save the timer ID right on `this`. +Note how we save the timer ID right on `this` (`this.timerID`). While `this.props` is set up by React itself and `this.state` has a special meaning, you are free to add additional fields to the class manually if you need to store something that doesn’t participate in the data flow (like a timer ID). From b84fb3d281220b226b8eab38e84720ff82c3cc12 Mon Sep 17 00:00:00 2001 From: Hamid Sarfraz Date: Sun, 14 Jul 2019 03:34:14 +0500 Subject: [PATCH 25/32] Added option for more cdns. (#2144) --- content/docs/cdn-links.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/content/docs/cdn-links.md b/content/docs/cdn-links.md index 73e3e8171..dd0757b94 100644 --- a/content/docs/cdn-links.md +++ b/content/docs/cdn-links.md @@ -22,6 +22,8 @@ The versions above are only meant for development, and are not suitable for prod To load a specific version of `react` and `react-dom`, replace `16` with the version number. +Both React and ReactDOM are available on PageCDN ([React](https://pagecdn.com/lib/react), [ReactDOM](https://pagecdn.com/lib/react-dom)) and CDNJS ([React](https://cdnjs.com/libraries/react), [ReactDOM](https://cdnjs.com/libraries/react-dom)). + ### Why the `crossorigin` Attribute? {#why-the-crossorigin-attribute} If you serve React from a CDN, we recommend to keep the [`crossorigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) attribute set: From dc650ecdae55a0077fc345e6aa2dbf65af3038e2 Mon Sep 17 00:00:00 2001 From: Taeheon Kim Date: Sun, 14 Jul 2019 07:34:36 +0900 Subject: [PATCH 26/32] Update docs about an existence of .elementType (#2145) Hi, I've met the same issue on [here](https://github.com/facebook/prop-types/issues/200) at storybook and found the following [PR](https://github.com/facebook/prop-types/pull/211) that adds the `elementType` feature. It could find the doc on npm, but not the official react site. --- content/docs/typechecking-with-proptypes.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md index c986fc010..9034ba9dc 100644 --- a/content/docs/typechecking-with-proptypes.md +++ b/content/docs/typechecking-with-proptypes.md @@ -57,6 +57,9 @@ MyComponent.propTypes = { // A React element. optionalElement: PropTypes.element, + // A React element type (ie. MyComponent). + optionalElementType: PropTypes.elementType, + // You can also declare that a prop is an instance of a class. This uses // JS's instanceof operator. optionalMessage: PropTypes.instanceOf(Message), From a0911655e08da904d0d6abac731c150e83551ff4 Mon Sep 17 00:00:00 2001 From: Alex Krolick Date: Sun, 14 Jul 2019 10:12:46 -0700 Subject: [PATCH 27/32] Revert "Added option for more cdns. (#2144)" (#2146) This reverts commit b84fb3d281220b226b8eab38e84720ff82c3cc12. --- content/docs/cdn-links.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/content/docs/cdn-links.md b/content/docs/cdn-links.md index dd0757b94..73e3e8171 100644 --- a/content/docs/cdn-links.md +++ b/content/docs/cdn-links.md @@ -22,8 +22,6 @@ The versions above are only meant for development, and are not suitable for prod To load a specific version of `react` and `react-dom`, replace `16` with the version number. -Both React and ReactDOM are available on PageCDN ([React](https://pagecdn.com/lib/react), [ReactDOM](https://pagecdn.com/lib/react-dom)) and CDNJS ([React](https://cdnjs.com/libraries/react), [ReactDOM](https://cdnjs.com/libraries/react-dom)). - ### Why the `crossorigin` Attribute? {#why-the-crossorigin-attribute} If you serve React from a CDN, we recommend to keep the [`crossorigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) attribute set: From 989460ffe4c371b076e2f8093f6ddeb8d0bd5467 Mon Sep 17 00:00:00 2001 From: Jamison Dance Date: Sat, 20 Jul 2019 10:44:44 -0600 Subject: [PATCH 28/32] Add React Conf to list of community conferences (#2158) * Add React Conf to list of community conferences * Whoops, put right day in --- content/community/conferences.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/content/community/conferences.md b/content/community/conferences.md index ede5d0593..2c388b523 100644 --- a/content/community/conferences.md +++ b/content/community/conferences.md @@ -52,6 +52,11 @@ September 26-28, 2019 in Alicante, Spain [Website](http://reactalicante.es/) - [Twitter](https://twitter.com/reactalicante) - [Facebook](https://www.facebook.com/ReactAlicante) +### React Conf 2019 {#react-conf-2019} +October 24-25, 2019 in Henderson, Nevada USA + +[Website](https://conf.reactjs.org/) - [Twitter](https://twitter.com/reactjs) + ### React Advanced 2019 {#react-advanced-2019} October 25, 2019 in London, UK From 5dca78b7e3b078df79615cfa6e8cf8464f8b397a Mon Sep 17 00:00:00 2001 From: Peng Jie Date: Mon, 22 Jul 2019 13:12:27 +0800 Subject: [PATCH 29/32] docs(hooks): fix typo (#2161) --- content/docs/hooks-faq.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md index ef3662b88..3e0cf6290 100644 --- a/content/docs/hooks-faq.md +++ b/content/docs/hooks-faq.md @@ -567,7 +567,7 @@ Depending on your use case, there are a few more options described below. Let's see why this matters. -If you specify a [list of dependencies](/docs/hooks-reference.html#conditionally-firing-an-effect) as the last argument to `useEffect`, `useMemo`, `useCallback`, or `useImperativeHandle`, it must include all values used inside that participate in the React data flow. That includes props, state, and anything derived from them. +If you specify a [list of dependencies](/docs/hooks-reference.html#conditionally-firing-an-effect) as the last argument to `useEffect`, `useMemo`, `useCallback`, or `useImperativeHandle`, it must include all values used inside that participate in the React data flow. That includes props, state, and anything derived from them. It is **only** safe to omit a function from the dependency list if nothing in it (or the functions called by it) references props, state, or values derived from them. This example has a bug: @@ -618,7 +618,7 @@ 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]); @@ -677,7 +677,7 @@ function Counter() { The empty set of dependencies, `[]`, means that the effect will only run once when the component mounts, and not on every re-render. The problem is that inside the `setInterval` callback, the value of `count` does not change, because we've created a closure with the value of `count` set to `0` as it was when the effect callback ran. Every second, this callback then calls `setCount(0 + 1)`, so the count never goes above 1. -Specifying `[count]` as a list of dependencies would fix the bug, but would cause the interval to be reset on every change. Effectively, each `setInterval` would get one chance to execute before being cleared (similar to a `setTimout`.) That may not be desirable. To fix this, we can use the [functional update form of `setState`](/docs/hooks-reference.html#functional-updates). It lets us specify *how* the state needs to change without referencing the *current* state: +Specifying `[count]` as a list of dependencies would fix the bug, but would cause the interval to be reset on every change. Effectively, each `setInterval` would get one chance to execute before being cleared (similar to a `setTimeout`.) That may not be desirable. To fix this, we can use the [functional update form of `setState`](/docs/hooks-reference.html#functional-updates). It lets us specify *how* the state needs to change without referencing the *current* state: ```js{6,9} function Counter() { From 1d8e542b031c350021f620a90f1f7f4a22b15194 Mon Sep 17 00:00:00 2001 From: imed jaberi <43971542+3imed-jaberi@users.noreply.github.com> Date: Mon, 22 Jul 2019 23:52:31 +0100 Subject: [PATCH 30/32] update the status of Arabic translation .. (#2157) --- content/languages.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/languages.yml b/content/languages.yml index 268515d7a..6f957905f 100644 --- a/content/languages.yml +++ b/content/languages.yml @@ -10,7 +10,7 @@ - name: Arabic translated_name: العربية code: ar - status: 0 + status: 1 - name: Azerbaijani translated_name: Azərbaycanca code: az From d00058b1f922438cd9a6ac858cf4c0883c28eddc Mon Sep 17 00:00:00 2001 From: Richard Taylor Dawson Date: Tue, 23 Jul 2019 22:25:13 -0600 Subject: [PATCH 31/32] Fixing typo in contributing section of the docs (#2166) --- 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 812a5e8ca..f88698a66 100644 --- a/content/blog/2019-02-23-is-react-translated-yet.md +++ b/content/blog/2019-02-23-is-react-translated-yet.md @@ -23,7 +23,7 @@ In the past, React community members have created unofficial translations for [C If you would like to help out on a current translation, check out the [Languages](/languages) page and click on the "Contribute" link for your language. -Can't find your language? If you'd like to maintain your langauge's translation fork, follow the instructions in the [translation repo](https://github.com/reactjs/reactjs.org-translation#starting-a-new-translation)! +Can't find your language? If you'd like to maintain your language's translation fork, follow the instructions in the [translation repo](https://github.com/reactjs/reactjs.org-translation#starting-a-new-translation)! ## Backstory {#backstory} From eef56ffdcfa995e3478f85cd9d02f4be01f65b79 Mon Sep 17 00:00:00 2001 From: Colin Date: Thu, 25 Jul 2019 12:54:48 -0400 Subject: [PATCH 32/32] Add a relevant FAQ link in "Thinking In React" (#2170) --- 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 12b2712ee..493682295 100644 --- a/content/docs/thinking-in-react.md +++ b/content/docs/thinking-in-react.md @@ -76,7 +76,7 @@ Refer to the [React docs](/docs/) if you need help executing this step. ### A Brief Interlude: Props vs State {#a-brief-interlude-props-vs-state} -There are two types of "model" data in React: props and state. It's important to understand the distinction between the two; skim [the official React docs](/docs/interactivity-and-dynamic-uis.html) if you aren't sure what the difference is. +There are two types of "model" data in React: props and state. It's important to understand the distinction between the two; skim [the official React docs](/docs/state-and-lifecycle.html) if you aren't sure what the difference is. See also [FAQ: What is the difference between state and props?](/docs/faq-state.html#what-is-the-difference-between-state-and-props) ## Step 3: Identify The Minimal (but complete) Representation Of UI State {#step-3-identify-the-minimal-but-complete-representation-of-ui-state}