Merge branch 'master' into 16.3-release-blog-post

content/authors.yml

@@ -69,7 +69,7 @@ sebmarkbage:
   url: https://twitter.com/sebmarkbage
 sophiebits:
   name: Sophie Alpert
-  url: https://sophiealpert.com
+  url: https://sophiebits.com/
 steveluscher:
   name: Steven Luscher
   url: https://twitter.com/steveluscher

content/blog/2018-03-01-sneak-peek-beyond-react-16.md

@@ -0,0 +1,22 @@
+---
+title: "Sneak Peek: Beyond React 16"
+author: [sophiebits]
+---
+
+[Dan Abramov](https://twitter.com/dan_abramov) from our team just spoke at [JSConf Iceland 2018](https://2018.jsconf.is/) with a preview of some new features we've been working on in React. The talk opens with a question: "With vast differences in computing power and network speed, how do we deliver the best user experience for everyone?"
+
+Here's the video courtesy of JSConf Iceland:
+
+<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Freact%2Fvideos%2F1552821821462886%2F&show_text=0&width=560&mute=0" width="560" height="315" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
+
+I think you'll enjoy the talk more if you stop reading here and just watch the video. If you don't have time to watch, a (very) brief summary follows.
+
+## About the Two Demos
+
+On the first demo, Dan says: "We've built a generic way to ensure that high-priority updates don't get blocked by a low-priority update, called **time slicing**. If my device is fast enough, it feels almost like it's synchronous; if my device is slow, the app still feels responsive. It adapts to the device thanks to the [requestIdleCallback](https://developers.google.com/web/updates/2015/08/using-requestidlecallback) API. Notice that only the final state was displayed; the rendered screen is always consistent and we don't see visual artifacts of slow rendering causing a janky user experience."
+
+On the second demo, Dan explains: "We've built a generic way for components to suspend rendering while they load async data, which we call **suspense**. You can pause any state update until the data is ready, and you can add async loading to any component deep in the tree without plumbing all the props and state through your app and hoisting the logic. On a fast network, updates appear very fluid and instantaneous without a jarring cascade of spinners that appear and disappear. On a slow network, you can intentionally design which loading states the user should see and how granular or coarse they should be, instead of showing spinners based on how the code is written. The app stays responsive throughout."
+
+"Importantly, this is still the React you know. This is still the declarative component paradigm that you probably like about React."
+
+We can't wait to release these new async rendering features later this year. Follow this blog and [@reactjs on Twitter](https://twitter.com/reactjs) for updates.

content/community/conferences.md

@@ -11,6 +11,17 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
 
 ## Upcoming Conferences
 
+### ReactFest 2018
+March 8-9 in London, UK
+
+[Website](https://reactfest.uk/) [Twitter](https://twitter.com/ReactFest) 
+
+### Reactathon 2018
+March 20-22 in San Francisco, USA
+
+[Website](https://www.reactathon.com/) [Twitter](https://twitter.com/reactathon)
+
+
 ### React Native Camp UA 2018
 March 31 in Kiev, Ukraine
 
@@ -26,6 +37,12 @@ April 24-26 in Helsinki, Finland
 
 [Website](https://react-finland.fi/) - [Twitter](https://twitter.com/ReactFinland)
 
+### <React.NotAConf /> 2018
+April 28 in Sofia, Bulgaia
+
+[Website](http://react-not-a-conf.com/) - [Twitter](https://twitter.com/reactnotaconf) - [Facebook](https://www.facebook.com/groups/1614950305478021/)
+
+
 ### ReactEurope 2018
 May 17-18 in Paris, France
 
@@ -41,6 +58,11 @@ August 16-17 in Salt Lake City, Utah USA
 
 [Website](http://www.reactrally.com) - [Twitter](https://twitter.com/reactrally)
 
+### React Native EU 2018
+September 5-6 in Wrocław, Poland
+
+[Website](https://react-native.eu) - [Twitter](https://twitter.com/react_native_eu) - [Facebook](https://www.facebook.com/reactnativeeu)
+
 ### ReactNext 2018
 September 6 in Tel Aviv, Israel
 

content/community/examples.md

@@ -19,3 +19,4 @@ There are many example projects created by the React community. Feel free to add
 * **[Product Comparison Page](https://github.com/Rhymond/product-compare-react)** Simple Product Compare page built in React
 * **[Hacker News Clone React/GraphQL](https://github.com/clintonwoo/hackernews-react-graphql)** Hacker News clone rewritten with universal JavaScript, using React and GraphQL.
 * **[Bitcoin Price Index](https://github.com/mrkjlchvz/bitcoin-price-index)** Simple bitcoin price index data from CoinDesk API.
+* **[Builder Book](https://github.com/builderbook/builderbook)** Open source web app to write and host documentation or sell books. Built with React, Material-UI, Next, Express, Mongoose, MongoDB.

content/community/podcasts.md

@@ -16,6 +16,8 @@ Podcasts dedicated to React and individual podcast episodes with React discussio
 
 - [React 30](https://react30.com/) - A 30-minute podcast all about React (moved to [The React Podcast](http://reactpodcast.com)).
 
+- [React Native Radio](https://devchat.tv/react-native-radio)
+
 ## Episodes
 
 - [CodeWinds Episode 4](http://codewinds.com/podcast/004.html) - Pete Hunt talks with Jeff Barczewski about React.

content/community/tools-starter-kits.md

@@ -7,7 +7,7 @@ permalink: community/starter-kits.html
 
 ## Recommended by the React Team
 
-* **[Create React App](https://github.com/facebookincubator/create-react-app)** - An officially supported way to start a client-side React project with no configuration
+* **[Create React App](https://github.com/facebook/create-react-app)** - An officially supported way to start a client-side React project with no configuration
 * **[Next.js](https://learnnextjs.com/)** - Framework for server-rendered or statically-exported React apps
 * **[Gatsby](https://www.gatsbyjs.org/)** - Blazing-fast static site generator for React
 * **[nwb](https://github.com/insin/nwb)** - A toolkit for React apps, libraries and other npm modules for the web

content/community/tools-ui-components.md

@@ -34,7 +34,7 @@ permalink: community/ui-components.html
 * **[react-dropzone](https://github.com/felixrieseberg/React-Dropzone):** React Dropzone for File-Uploads
 * **[react-forms](http://prometheusresearch.github.io/react-forms/):** Form rendering and validation for React
 * **[react-highlight](https://github.com/akiran/react-highlight):** React component for syntax highlighting
-* **[react-image](https://github.com/yuanyan/react-image):** Like `<img />` and Enhanced Image Component for React.
+* **[react-image](https://github.com/mbrevda/react-image):** Like `<img />` and Enhanced Image Component for React.
 * **[react-input-autosize](https://github.com/JedWatson/react-input-autosize):** Like `<input />` but resizes automatically to fit all its content.
 * **[react-intense](https://github.com/brycedorn/react-intense):** A component for viewing large images up close
 * **[react-joyride](https://github.com/gilbarbara/react-joyride):** Create walkthroughs and guided tours for your ReactJS apps.

content/docs/accessibility.md

@@ -75,7 +75,7 @@ function ListItem({ item }) {
   return ( 
     <>
       <dt>{item.term}</dt>
-      <dd>{item.description}</dd>>
+      <dd>{item.description}</dd>
     </>
   );    
 }
@@ -133,7 +133,7 @@ Also use landmark elements and roles, such as `<main>` and `<aside>`, to demarca
 
 Read more about the use of these elements to enhance accessibility here:
 
-- [Deque University - HTML 5 and ARIA Landmarks](https://dequeuniversity.com/assets/html/jquery-summit/html5/slides/landmarks.html)
+- [Accessible Landmarks](http://www.scottohara.me/blog/2018/03/03/landmarks.html)
 
 ### Programmatically managing focus
 

content/docs/context.md

@@ -15,6 +15,10 @@ With React, it's easy to track the flow of data through your React components. W
 In some cases, you want to pass data through the component tree without having to pass the props down manually at every level.
 You can do this directly in React with the powerful "context" API.
 
+> Note:
+>
+> A [new, safe version of context](https://github.com/reactjs/rfcs/blob/master/text/0002-new-version-of-context.md) is under development for the upcoming 16.3 release.
+
 
 ## Why Not To Use Context
 
@@ -24,7 +28,7 @@ If you want your application to be stable, don't use context. It is an experimen
 
 If you aren't familiar with state management libraries like [Redux](https://github.com/reactjs/redux) or [MobX](https://github.com/mobxjs/mobx), don't use context. For many practical applications, these libraries and their React bindings are a good choice for managing state that is relevant to many components. It is far more likely that Redux is the right solution to your problem than that context is the right solution.
 
-If you aren't an experienced React developer, don't use context. There is usually a better way to implement functionality just using props and state.
+If you're still learning React, don't use context. There is usually a better way to implement functionality just using props and state.
 
 If you insist on using context despite these warnings, try to isolate your use of context to a small area and avoid using the context API directly when possible so that it's easier to upgrade when the API changes.
 

content/docs/design-principles.md

@@ -33,7 +33,7 @@ For example, if React didn't provide support for local state or lifecycle hooks,
 
 This is why sometimes we add features to React itself. If we notice that many components implement a certain feature in incompatible or inefficient ways, we might prefer to bake it into React. We don't do it lightly. When we do it, it's because we are confident that raising the abstraction level benefits the whole ecosystem. State, lifecycle hooks, cross-browser event normalization are good examples of this.
 
-We always discuss such improvement proposals with the community. You can find some of those discussions by the ["big picture"](https://github.com/facebook/react/issues?q=is:open+is:issue+label:"big+picture") label on the React issue tracker.
+We always discuss such improvement proposals with the community. You can find some of those discussions by the ["big picture"](https://github.com/facebook/react/issues?q=is:open+is:issue+label:"Type:+Big+Picture") label on the React issue tracker.
 
 ### Escape Hatches
 

content/docs/faq-state.md

@@ -101,6 +101,6 @@ This [GitHub comment](https://github.com/facebook/react/issues/11527#issuecommen
 
 ### Should I use a state management library like Redux or MobX?
 
-[Maybe.](http://redux.js.org/docs/faq/General.html#general-when-to-use)
+[Maybe.](https://redux.js.org/faq/general#when-should-i-use-redux)
 
 It's a good idea to get to know React first, before adding in additional libraries. You can build quite complex applications using only React.

content/docs/reference-react-component.md

@@ -186,7 +186,7 @@ If you "fork" props by using them for state, you might also want to implement [`
 componentWillMount()
 ```
 
-`componentWillMount()` is invoked immediately before mounting occurs. It is called before `render()`, therefore calling `setState()` synchronously in this method will not trigger an extra rendering. Generally, we recommend using the `constructor()` instead.
+`componentWillMount()` is invoked just before mounting occurs. It is called before `render()`, therefore calling `setState()` synchronously in this method will not trigger an extra rendering. Generally, we recommend using the `constructor()` instead.
 
 Avoid introducing any side-effects or subscriptions in this method. For those use cases, use `componentDidMount()` instead.
 
@@ -248,7 +248,7 @@ We do not recommend doing deep equality checks or using `JSON.stringify()` in `s
 componentWillUpdate(nextProps, nextState)
 ```
 
-`componentWillUpdate()` is invoked immediately before rendering when new props or state are being received. Use this as an opportunity to perform preparation before an update occurs. This method is not called for the initial render.
+`componentWillUpdate()` is invoked just before rendering when new props or state are being received. Use this as an opportunity to perform preparation before an update occurs. This method is not called for the initial render.
 
 Note that you cannot call `this.setState()` here; nor should you do anything else (e.g. dispatch a Redux action) that would trigger an update to a React component before `componentWillUpdate()` returns.
 

content/docs/reference-react-dom-server.md

@@ -69,7 +69,7 @@ If you call [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) on a node that
 >
 > Server-only. This API is not available in the browser.
 >
-> The stream returned from this method will return a byte stream encoded in utf-8. If you need a stream in another encoding, take a look a project like [iconv-lite](https://www.npmjs.com/package/iconv-lite), which provides transform streams for transcoding text.
+> The stream returned from this method will return a byte stream encoded in utf-8. If you need a stream in another encoding, take a look at a project like [iconv-lite](https://www.npmjs.com/package/iconv-lite), which provides transform streams for transcoding text.
 
 * * *
 

content/docs/static-type-checking.md

@@ -22,25 +22,23 @@ We will explain these steps below in detail.
 
 ### Adding Flow to a Project
 
-First, navigate to your project directory in the terminal. You will need to run two commands.
+First, navigate to your project directory in the terminal. You will need to run the following command:
 
 If you use [Yarn](https://yarnpkg.com/), run:
 
 ```bash
 yarn add --dev flow-bin
-yarn run flow init
 ```
 
 If you use [npm](https://www.npmjs.com/), run:
 
 ```bash
 npm install --save-dev flow-bin
-npm run flow init
 ```
 
-The first command installs the latest version of Flow into your project. The second command creates a Flow configuration file that you will need to commit.
+This command installs the latest version of Flow into your project.
 
-Finally, add `flow` to the `"scripts"` section of your `package.json`:
+Now, add `flow` to the `"scripts"` section of your `package.json` to be able to use this from the terminal:
 
 ```js{4}
 {
@@ -53,6 +51,22 @@ Finally, add `flow` to the `"scripts"` section of your `package.json`:
 }
 ```
 
+Finally, run one of the following commands:
+
+If you use [Yarn](https://yarnpkg.com/), run:
+
+```bash
+yarn run flow init
+```
+
+If you use [npm](https://www.npmjs.com/), run:
+
+```bash
+npm run flow init
+```
+
+This command will create a Flow configuration file that you will need to commit.
+
 ### Stripping Flow Syntax from the Compiled Code
 
 Flow extends the JavaScript language with a special syntax for type annotations. However, browsers aren't aware of this syntax, so we need to make sure it doesn't end up in the compiled JavaScript bundle that is sent to the browser.