[Gatsby] "https://facebook.github.io/react/" -> "https://reactjs.org/" (#10970)
This commit is contained in:
skratchdot
Brian Vaughn
parent
ed4174511a
commit
0344f7ad55
42
CHANGELOG.md
42
CHANGELOG.md
|
|
@ -25,10 +25,10 @@
|
|||
|
||||
### New Features
|
||||
* Components can now return arrays and strings from `render`. (Docs coming soon!)
|
||||
* Improved error handling with introduction of "error boundaries". [Error boundaries](https://facebook.github.io/react/blog/2017/07/26/error-handling-in-react-16.html) are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.
|
||||
* Improved error handling with introduction of "error boundaries". [Error boundaries](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html) are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.
|
||||
* First-class support for declaratively rendering a subtree into another DOM node with `ReactDOM.createPortal()`. (Docs coming soon!)
|
||||
* Streaming mode for server side rendering is enabled with `ReactDOMServer.renderToNodeStream()` and `ReactDOMServer.renderToStaticNodeStream()`. ([@aickin](https://github.com/aickin) in [#10425](https://github.com/facebook/react/pull/10425), [#10044](https://github.com/facebook/react/pull/10044), [#10039](https://github.com/facebook/react/pull/10039), [#10024](https://github.com/facebook/react/pull/10024), [#9264](https://github.com/facebook/react/pull/9264), and others.)
|
||||
* [React DOM now allows passing non-standard attributes](https://facebook.github.io/react/blog/2017/09/08/dom-attributes-in-react-16.html). ([@nhunzaker](https://github.com/nhunzaker) in [#10385](https://github.com/facebook/react/pull/10385), [10564](https://github.com/facebook/react/pull/10564), [#10495](https://github.com/facebook/react/pull/10495) and others)
|
||||
* [React DOM now allows passing non-standard attributes](https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html). ([@nhunzaker](https://github.com/nhunzaker) in [#10385](https://github.com/facebook/react/pull/10385), [10564](https://github.com/facebook/react/pull/10564), [#10495](https://github.com/facebook/react/pull/10495) and others)
|
||||
|
||||
### Breaking Changes
|
||||
- There are several changes to the behavior of scheduling and lifecycle methods:
|
||||
|
|
@ -54,13 +54,13 @@
|
|||
* The server renderer has been completely rewritten, with some improvements:
|
||||
* Server rendering does not use markup validation anymore, and instead tries its best to attach to existing DOM, warning about inconsistencies. It also doesn't use comments for empty components and data-reactid attributes on each node anymore.
|
||||
* Hydrating a server rendered container now has an explicit API. Use `ReactDOM.hydrate` instead of `ReactDOM.render` if you're reviving server rendered HTML. Keep using `ReactDOM.render` if you're just doing client-side rendering.
|
||||
* When "unknown" props are passed to DOM components, for valid values, React will now render them in the DOM. [See this post for more details.](https://facebook.github.io/react/blog/2017/09/08/dom-attributes-in-react-16.html) ([@nhunzaker](https://github.com/nhunzaker) in [#10385](https://github.com/facebook/react/pull/10385), [10564](https://github.com/facebook/react/pull/10564), [#10495](https://github.com/facebook/react/pull/10495) and others)
|
||||
* Errors in the render and lifecycle methods now unmount the component tree by default. To prevent this, add [error boundaries](https://facebook.github.io/react/blog/2017/07/26/error-handling-in-react-16.html) to the appropriate places in the UI.
|
||||
* When "unknown" props are passed to DOM components, for valid values, React will now render them in the DOM. [See this post for more details.](https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html) ([@nhunzaker](https://github.com/nhunzaker) in [#10385](https://github.com/facebook/react/pull/10385), [10564](https://github.com/facebook/react/pull/10564), [#10495](https://github.com/facebook/react/pull/10495) and others)
|
||||
* Errors in the render and lifecycle methods now unmount the component tree by default. To prevent this, add [error boundaries](https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html) to the appropriate places in the UI.
|
||||
|
||||
### Removed Deprecations
|
||||
|
||||
- There is no `react-with-addons.js` build anymore. All compatible addons are published separately on npm, and have single-file browser versions if you need them.
|
||||
- The deprecations introduced in 15.x have been removed from the core package. `React.createClass` is now available as create-react-class, `React.PropTypes` as prop-types, `React.DOM` as react-dom-factories, react-addons-test-utils as react-dom/test-utils, and shallow renderer as react-test-renderer/shallow. See [15.5.0](https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html) and [15.6.0](https://facebook.github.io/react/blog/2017/06/13/react-v15.6.0.html) blog posts for instructions on migrating code and automated codemods.
|
||||
- The deprecations introduced in 15.x have been removed from the core package. `React.createClass` is now available as create-react-class, `React.PropTypes` as prop-types, `React.DOM` as react-dom-factories, react-addons-test-utils as react-dom/test-utils, and shallow renderer as react-test-renderer/shallow. See [15.5.0](https://reactjs.org/blog/2017/04/07/react-v15.5.0.html) and [15.6.0](https://reactjs.org/blog/2017/06/13/react-v15.6.0.html) blog posts for instructions on migrating code and automated codemods.
|
||||
|
||||
## 15.6.2 (September 25, 2017)
|
||||
|
||||
|
|
@ -605,7 +605,7 @@ Each of these changes will continue to work as before with a new warning until t
|
|||
|
||||
- Split the main `react` package into two: `react` and `react-dom`. This paves the way to writing components that can be shared between the web version of React and React Native. This means you will need to include both files and some functions have been moved from `React` to `ReactDOM`.
|
||||
- Addons have been moved to separate packages (`react-addons-clone-with-props`, `react-addons-create-fragment`, `react-addons-css-transition-group`, `react-addons-linked-state-mixin`, `react-addons-perf`, `react-addons-pure-render-mixin`, `react-addons-shallow-compare`, `react-addons-test-utils`, `react-addons-transition-group`, `react-addons-update`, `ReactDOM.unstable_batchedUpdates`).
|
||||
- Stateless functional components - React components were previously created using React.createClass or using ES6 classes. This release adds a [new syntax](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions) where a user defines a single [stateless render function](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions) (with one parameter: `props`) which returns a JSX element, and this function may be used as a component.
|
||||
- Stateless functional components - React components were previously created using React.createClass or using ES6 classes. This release adds a [new syntax](https://reactjs.org/docs/reusable-components.html#stateless-functions) where a user defines a single [stateless render function](https://reactjs.org/docs/reusable-components.html#stateless-functions) (with one parameter: `props`) which returns a JSX element, and this function may be used as a component.
|
||||
- Refs to DOM components as the DOM node itself. Previously the only useful thing you can do with a DOM component is call `getDOMNode()` to get the underlying DOM node. Starting with this release, a ref to a DOM component _is_ the actual DOM node. **Note that refs to custom (user-defined) components work exactly as before; only the built-in DOM components are affected by this change.**
|
||||
|
||||
|
||||
|
|
@ -613,8 +613,8 @@ Each of these changes will continue to work as before with a new warning until t
|
|||
|
||||
- `React.initializeTouchEvents` is no longer necessary and has been removed completely. Touch events now work automatically.
|
||||
- Add-Ons: Due to the DOM node refs change mentioned above, `TestUtils.findAllInRenderedTree` and related helpers are no longer able to take a DOM component, only a custom component.
|
||||
- The `props` object is now frozen, so mutating props after creating a component element is no longer supported. In most cases, [`React.cloneElement`](https://facebook.github.io/react/docs/react-api.html#cloneelement) should be used instead. This change makes your components easier to reason about and enables the compiler optimizations mentioned above.
|
||||
- Plain objects are no longer supported as React children; arrays should be used instead. You can use the [`createFragment`](https://facebook.github.io/react/docs/create-fragment.html) helper to migrate, which now returns an array.
|
||||
- The `props` object is now frozen, so mutating props after creating a component element is no longer supported. In most cases, [`React.cloneElement`](https://reactjs.org/docs/react-api.html#cloneelement) should be used instead. This change makes your components easier to reason about and enables the compiler optimizations mentioned above.
|
||||
- Plain objects are no longer supported as React children; arrays should be used instead. You can use the [`createFragment`](https://reactjs.org/docs/create-fragment.html) helper to migrate, which now returns an array.
|
||||
- Add-Ons: `classSet` has been removed. Use [classnames](https://github.com/JedWatson/classnames) instead.
|
||||
- Web components (custom elements) now use native property names. Eg: `class` instead of `className`.
|
||||
|
||||
|
|
@ -622,9 +622,9 @@ Each of these changes will continue to work as before with a new warning until t
|
|||
|
||||
- `this.getDOMNode()` is now deprecated and `ReactDOM.findDOMNode(this)` can be used instead. Note that in the common case, `findDOMNode` is now unnecessary since a ref to the DOM component is now the actual DOM node.
|
||||
- `setProps` and `replaceProps` are now deprecated. Instead, call ReactDOM.render again at the top level with the new props.
|
||||
- ES6 component classes must now extend `React.Component` in order to enable stateless function components. The [ES3 module pattern](https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#other-languages) will continue to work.
|
||||
- ES6 component classes must now extend `React.Component` in order to enable stateless function components. The [ES3 module pattern](https://reactjs.org/blog/2015/01/27/react-v0.13.0-beta-1.html#other-languages) will continue to work.
|
||||
- Reusing and mutating a `style` object between renders has been deprecated. This mirrors our change to freeze the `props` object.
|
||||
- Add-Ons: `cloneWithProps` is now deprecated. Use [`React.cloneElement`](https://facebook.github.io/react/docs/react-api.html#cloneelement) instead (unlike `cloneWithProps`, `cloneElement` does not merge `className` or `style` automatically; you can merge them manually if needed).
|
||||
- Add-Ons: `cloneWithProps` is now deprecated. Use [`React.cloneElement`](https://reactjs.org/docs/react-api.html#cloneelement) instead (unlike `cloneWithProps`, `cloneElement` does not merge `className` or `style` automatically; you can merge them manually if needed).
|
||||
- Add-Ons: To improve reliability, `CSSTransitionGroup` will no longer listen to transition events. Instead, you should specify transition durations manually using props such as `transitionEnterTimeout={500}`.
|
||||
|
||||
### Notable enhancements
|
||||
|
|
@ -665,7 +665,7 @@ Each of these changes will continue to work as before with a new warning until t
|
|||
|
||||
#### Breaking Changes
|
||||
|
||||
- The `react-tools` package and `JSXTransformer.js` browser file [have been deprecated](https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html). You can continue using version `0.13.3` of both, but we no longer support them and recommend migrating to [Babel](http://babeljs.io/), which has built-in support for React and JSX.
|
||||
- The `react-tools` package and `JSXTransformer.js` browser file [have been deprecated](https://reactjs.org/blog/2015/06/12/deprecating-jstransform-and-react-tools.html). You can continue using version `0.13.3` of both, but we no longer support them and recommend migrating to [Babel](http://babeljs.io/), which has built-in support for React and JSX.
|
||||
|
||||
#### New Features
|
||||
|
||||
|
|
@ -765,9 +765,9 @@ Each of these changes will continue to work as before with a new warning until t
|
|||
|
||||
#### New Features
|
||||
|
||||
* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html) for details.
|
||||
* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](https://reactjs.org/blog/2015/01/27/react-v0.13.0-beta-1.html) for details.
|
||||
* Added new top-level API `React.findDOMNode(component)`, which should be used in place of `component.getDOMNode()`. The base class for ES6-based components will not have `getDOMNode`. This change will enable some more patterns moving forward.
|
||||
* Added a new top-level API `React.cloneElement(el, props)` for making copies of React elements – see the [v0.13 RC2 notes](https://facebook.github.io/react/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement) for more details.
|
||||
* Added a new top-level API `React.cloneElement(el, props)` for making copies of React elements – see the [v0.13 RC2 notes](https://reactjs.org/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement) for more details.
|
||||
* New `ref` style, allowing a callback to be used in place of a name: `<Photo ref={(c) => this._photo = c} />` allows you to reference the component with `this._photo` (as opposed to `ref="photo"` which gives `this.refs.photo`).
|
||||
* `this.setState()` can now take a function as the first argument for transactional state updates, such as `this.setState((state, props) => ({count: state.count + 1}));` – this means that you no longer need to use `this._pendingState`, which is now gone.
|
||||
* Support for iterators and immutable-js sequences as children.
|
||||
|
|
@ -781,7 +781,7 @@ Each of these changes will continue to work as before with a new warning until t
|
|||
|
||||
#### New Features
|
||||
|
||||
* [`React.addons.createFragment` was added](https://facebook.github.io/react/docs/create-fragment.html) for adding keys to entire sets of children.
|
||||
* [`React.addons.createFragment` was added](https://reactjs.org/docs/create-fragment.html) for adding keys to entire sets of children.
|
||||
|
||||
#### Deprecations
|
||||
|
||||
|
|
@ -1007,7 +1007,7 @@ Each of these changes will continue to work as before with a new warning until t
|
|||
|
||||
#### New Features
|
||||
* Added warnings to help migrate towards descriptors
|
||||
* Made it possible to server render without React-related markup (`data-reactid`, `data-react-checksum`). This DOM will not be mountable by React. [Read the docs for `React.renderComponentToStaticMarkup`](https://facebook.github.io/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup)
|
||||
* Made it possible to server render without React-related markup (`data-reactid`, `data-react-checksum`). This DOM will not be mountable by React. [Read the docs for `React.renderComponentToStaticMarkup`](https://reactjs.org/docs/top-level-api.html#react.rendercomponenttostaticmarkup)
|
||||
* Added support for more attributes:
|
||||
* `srcSet` for `<img>` to specify images at different pixel ratios
|
||||
* `textAnchor` for SVG
|
||||
|
|
@ -1019,7 +1019,7 @@ Each of these changes will continue to work as before with a new warning until t
|
|||
|
||||
### Addons
|
||||
|
||||
* `update` function to deal with immutable data. [Read the docs](https://facebook.github.io/react/docs/update.html)
|
||||
* `update` function to deal with immutable data. [Read the docs](https://reactjs.org/docs/update.html)
|
||||
|
||||
### react-tools
|
||||
* Added an option argument to `transform` function. The only option supported is `harmony`, which behaves the same as `jsx --harmony` on the command line. This uses the ES6 transforms from [jstransform](https://github.com/facebook/jstransform).
|
||||
|
|
@ -1181,7 +1181,7 @@ Each of these changes will continue to work as before with a new warning until t
|
|||
|
||||
### React with Addons (New!)
|
||||
|
||||
* Introduced a separate build with several "addons" which we think can help improve the React experience. We plan to deprecate this in the long-term, instead shipping each as standalone pieces. [Read more in the docs](https://facebook.github.io/react/docs/addons.html).
|
||||
* Introduced a separate build with several "addons" which we think can help improve the React experience. We plan to deprecate this in the long-term, instead shipping each as standalone pieces. [Read more in the docs](https://reactjs.org/docs/addons.html).
|
||||
|
||||
### JSX
|
||||
|
||||
|
|
@ -1214,10 +1214,10 @@ Each of these changes will continue to work as before with a new warning until t
|
|||
* Switch from using `id` attribute to `data-reactid` to track DOM nodes. This allows you to integrate with other JS and CSS libraries more easily.
|
||||
* Support for more DOM elements and attributes (e.g., `<canvas>`)
|
||||
* Improved server-side rendering APIs. `React.renderComponentToString(<component>, callback)` allows you to use React on the server and generate markup which can be sent down to the browser.
|
||||
* `prop` improvements: validation and default values. [Read our blog post for details...](https://facebook.github.io/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html)
|
||||
* Support for the `key` prop, which allows for finer control over reconciliation. [Read the docs for details...](https://facebook.github.io/react/docs/multiple-components.html)
|
||||
* Removed `React.autoBind`. [Read our blog post for details...](https://facebook.github.io/react/blog/2013/07/02/react-v0-4-autobind-by-default.html)
|
||||
* Improvements to forms. We've written wrappers around `<input>`, `<textarea>`, `<option>`, and `<select>` in order to standardize many inconsistencies in browser implementations. This includes support for `defaultValue`, and improved implementation of the `onChange` event, and circuit completion. [Read the docs for details...](https://facebook.github.io/react/docs/forms.html)
|
||||
* `prop` improvements: validation and default values. [Read our blog post for details...](https://reactjs.org/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html)
|
||||
* Support for the `key` prop, which allows for finer control over reconciliation. [Read the docs for details...](https://reactjs.org/docs/multiple-components.html)
|
||||
* Removed `React.autoBind`. [Read our blog post for details...](https://reactjs.org/blog/2013/07/02/react-v0-4-autobind-by-default.html)
|
||||
* Improvements to forms. We've written wrappers around `<input>`, `<textarea>`, `<option>`, and `<select>` in order to standardize many inconsistencies in browser implementations. This includes support for `defaultValue`, and improved implementation of the `onChange` event, and circuit completion. [Read the docs for details...](https://reactjs.org/docs/forms.html)
|
||||
* We've implemented an improved synthetic event system that conforms to the W3C spec.
|
||||
* Updates to your component are batched now, which may result in a significantly faster re-render of components. `this.setState` now takes an optional callback as it's second parameter. If you were using `onClick={this.setState.bind(this, state)}` previously, you'll want to make sure you add a third parameter so that the event is not treated as the callback.
|
||||
|
||||
|
|
|
|||
|
|
@ -2,4 +2,4 @@
|
|||
|
||||
Want to contribute to React? There are a few things you need to know.
|
||||
|
||||
We wrote a **[contribution guide](https://facebook.github.io/react/contributing/how-to-contribute.html)** to help you get started.
|
||||
We wrote a **[contribution guide](https://reactjs.org/contributing/how-to-contribute.html)** to help you get started.
|
||||
|
|
|
|||
18
README.md
18
README.md
|
|
@ -1,4 +1,4 @@
|
|||
# [React](https://facebook.github.io/react/) · [](https://circleci.com/gh/facebook/react) [](https://coveralls.io/github/facebook/react?branch=master) [](https://www.npmjs.com/package/react) [](CONTRIBUTING.md#pull-requests)
|
||||
# [React](https://reactjs.org/) · [](https://circleci.com/gh/facebook/react) [](https://coveralls.io/github/facebook/react?branch=master) [](https://www.npmjs.com/package/react) [](CONTRIBUTING.md#pull-requests)
|
||||
|
||||
React is a JavaScript library for building user interfaces.
|
||||
|
||||
|
|
@ -6,11 +6,11 @@ React is a JavaScript library for building user interfaces.
|
|||
* **Component-Based:** Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
|
||||
* **Learn Once, Write Anywhere:** We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using [React Native](https://facebook.github.io/react-native/).
|
||||
|
||||
[Learn how to use React in your own project](https://facebook.github.io/react/docs/getting-started.html).
|
||||
[Learn how to use React in your own project](https://reactjs.org/docs/getting-started.html).
|
||||
|
||||
## Examples
|
||||
|
||||
We have several examples [on the website](https://facebook.github.io/react/). Here is the first one to get you started:
|
||||
We have several examples [on the website](https://reactjs.org/). Here is the first one to get you started:
|
||||
|
||||
```jsx
|
||||
class HelloMessage extends React.Component {
|
||||
|
|
@ -27,19 +27,19 @@ ReactDOM.render(
|
|||
|
||||
This example will render "Hello John" into a container on the page.
|
||||
|
||||
You'll notice that we used an HTML-like syntax; [we call it JSX](https://facebook.github.io/react/docs/introducing-jsx.html). JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML. We recommend using [Babel](https://babeljs.io/) with a [React preset](https://babeljs.io/docs/plugins/preset-react/) to convert JSX into native JavaScript for browsers to digest.
|
||||
You'll notice that we used an HTML-like syntax; [we call it JSX](https://reactjs.org/docs/introducing-jsx.html). JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML. We recommend using [Babel](https://babeljs.io/) with a [React preset](https://babeljs.io/docs/plugins/preset-react/) to convert JSX into native JavaScript for browsers to digest.
|
||||
|
||||
## Installation
|
||||
|
||||
React is available as the `react` package on [npm](https://www.npmjs.com/). It is also available on a [CDN](https://facebook.github.io/react/docs/installation.html#using-a-cdn).
|
||||
React is available as the `react` package on [npm](https://www.npmjs.com/). It is also available on a [CDN](https://reactjs.org/docs/installation.html#using-a-cdn).
|
||||
|
||||
React is flexible and can be used in a variety of projects. You can create new apps with it, but you can also gradually introduce it into an existing codebase without doing a rewrite.
|
||||
|
||||
The recommended way to install React depends on your project. Here you can find short guides for the most common scenarios:
|
||||
|
||||
* [Trying Out React](https://facebook.github.io/react/docs/installation.html#trying-out-react)
|
||||
* [Creating a New Application](https://facebook.github.io/react/docs/installation.html#creating-a-new-application)
|
||||
* [Adding React to an Existing Application](https://facebook.github.io/react/docs/installation.html#adding-react-to-an-existing-application)
|
||||
* [Trying Out React](https://reactjs.org/docs/installation.html#trying-out-react)
|
||||
* [Creating a New Application](https://reactjs.org/docs/installation.html#creating-a-new-application)
|
||||
* [Adding React to an Existing Application](https://reactjs.org/docs/installation.html#adding-react-to-an-existing-application)
|
||||
|
||||
## Contributing
|
||||
|
||||
|
|
@ -51,7 +51,7 @@ Facebook has adopted a Code of Conduct that we expect project participants to ad
|
|||
|
||||
### Contributing Guide
|
||||
|
||||
Read our [contributing guide](https://facebook.github.io/react/contributing/how-to-contribute.html) to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to React.
|
||||
Read our [contributing guide](https://reactjs.org/contributing/how-to-contribute.html) to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to React.
|
||||
|
||||
### Beginner Friendly Bugs
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
# React Documentation & Website
|
||||
|
||||
## [Read the React Documentation](https://facebook.github.io/react/)
|
||||
## [Read the React Documentation](https://reactjs.org/)
|
||||
|
||||
This folder is not the right place to *read* the documentation.
|
||||
|
||||
Instead, head over [to the React website](https://facebook.github.io/react/) to read it.
|
||||
Instead, head over [to the React website](https://reactjs.org/) to read it.
|
||||
|
||||
This folder only contains the source code for the website.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
name: React
|
||||
description: A JavaScript library for building user interfaces
|
||||
url: https://facebook.github.io
|
||||
baseurl: /react
|
||||
url: https://reactjs.org/
|
||||
baseurl: /
|
||||
permalink: /blog/:year/:month/:day/:title.html
|
||||
paginate_path: /blog/page:num/
|
||||
paginate: 5
|
||||
|
|
|
|||
|
|
@ -22,8 +22,8 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta property="og:title" content="{{ title }}">
|
||||
<meta property="og:type" content="{{ type }}">
|
||||
<meta property="og:url" content="https://facebook.github.io/react{{ page.url }}">
|
||||
<meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
|
||||
<meta property="og:url" content="https://reactjs.org/{{ page.url }}">
|
||||
<meta property="og:image" content="https://reactjs.org/img/logo_og.png">
|
||||
<meta property="og:description" content="{{ description }}">
|
||||
<meta property="fb:app_id" content="623268441017527">
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ This week, many people in the React community are at [ReactEurope](https://www.r
|
|||
|
||||
With React 0.14, we're continuing to let React mature and to make minor changes as the APIs continue to settle down. I'll talk only about the two largest changes in this blog post; when we publish the final release we'll be sure to update all of our documentation and include a full changelog.
|
||||
|
||||
You can install the new beta with `npm install react@0.14.0-beta1` and `npm install react-dom@0.14.0-beta1`. As mentioned in [Deprecating react-tools](https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html), we're no longer updating the react-tools package so this release doesn't include a new version of it. Please try the new version out and let us know what you think, and please do file issues on our GitHub repo if you run into any problems.
|
||||
You can install the new beta with `npm install react@0.14.0-beta1` and `npm install react-dom@0.14.0-beta1`. As mentioned in [Deprecating react-tools](https://reactjs.org/blog/2015/06/12/deprecating-jstransform-and-react-tools.html), we're no longer updating the react-tools package so this release doesn't include a new version of it. Please try the new version out and let us know what you think, and please do file issues on our GitHub repo if you run into any problems.
|
||||
|
||||
## Two Packages
|
||||
|
||||
|
|
|
|||
|
|
@ -13,6 +13,6 @@ In order to make debugging in production easier, we're introducing an Error Code
|
|||
|
||||
While we hope you don't see errors often, you can see how it works [here](/docs/error-decoder.html?invariant=109&args[]=Foo). This is what the same error from above will look like:
|
||||
|
||||
> Minified React error #109; visit https://facebook.github.io/react/docs/error-decoder.html?invariant=109&args[]=Foo for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
|
||||
> Minified React error #109; visit https://reactjs.org/docs/error-decoder.html?invariant=109&args[]=Foo for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
|
||||
|
||||
We do this so that the developer experience is as good as possible, while also keeping the production bundle size as small as possible. This feature shouldn't require any changes on your side — use the `min.js` files in production or bundle your application code with `process.env.NODE_ENV === 'production'` and you should be good to go!
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ See the [documentation for `ReactDOMServer`](/docs/react-dom-server.html) for mo
|
|||
|
||||
### Support for custom DOM attributes
|
||||
|
||||
Instead of ignoring unrecognized HTML and SVG attributes, React will now [pass them through to the DOM](https://facebook.github.io/react/blog/2017/09/08/dom-attributes-in-react-16.html). This has the added benefit of allowing us to get rid of most of React's attribute whitelist, resulting in reduced file sizes.
|
||||
Instead of ignoring unrecognized HTML and SVG attributes, React will now [pass them through to the DOM](https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html). This has the added benefit of allowing us to get rid of most of React's attribute whitelist, resulting in reduced file sizes.
|
||||
|
||||
### Reduced file size
|
||||
|
||||
|
|
@ -168,7 +168,7 @@ React 16 includes a number of small breaking changes. These only affect uncommon
|
|||
|
||||
* There is no `react/lib/*` and `react-dom/lib/*` anymore. Even in CommonJS environments, React and ReactDOM are precompiled to single files (“flat bundles”). If you previously relied on undocumented React internals, and they don’t work anymore, let us know about your specific case in a new issue, and we’ll try to figure out a migration strategy for you.
|
||||
* There is no `react-with-addons.js` build anymore. All compatible addons are published separately on npm, and have single-file browser versions if you need them.
|
||||
* The deprecations introduced in 15.x have been removed from the core package. `React.createClass` is now available as `create-react-class`, `React.PropTypes` as `prop-types`, `React.DOM` as `react-dom-factories`, `react-addons-test-utils` as `react-dom/test-utils`, and shallow renderer as `react-test-renderer/shallow`. See [15.5.0](https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html) and [15.6.0](https://facebook.github.io/react/blog/2017/06/13/react-v15.6.0.html) blog posts for instructions on migrating code and automated codemods.
|
||||
* The deprecations introduced in 15.x have been removed from the core package. `React.createClass` is now available as `create-react-class`, `React.PropTypes` as `prop-types`, `React.DOM` as `react-dom-factories`, `react-addons-test-utils` as `react-dom/test-utils`, and shallow renderer as `react-test-renderer/shallow`. See [15.5.0](https://reactjs.org/blog/2017/04/07/react-v15.5.0.html) and [15.6.0](https://reactjs.org/blog/2017/06/13/react-v15.6.0.html) blog posts for instructions on migrating code and automated codemods.
|
||||
* The names and paths to the single-file browser builds have changed to emphasize the difference between development and production builds. For example:
|
||||
* `react/dist/react.js` → `react/umd/react.development.js`
|
||||
* `react/dist/react.min.js` → `react/umd/react.production.min.js`
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ permalink: docs/cross-origin-errors.html
|
|||
>
|
||||
> The following section applies only to the development mode of React. Error handling in production mode is done with regular try/catch statements.
|
||||
|
||||
In [development mode](https://facebook.github.io/react/docs/optimizing-performance.html), React uses a global `error` event handler to preserve the "pause on exceptions" behavior of browser DevTools. It also logs errors to the developer console.
|
||||
In [development mode](https://reactjs.org/docs/optimizing-performance.html), React uses a global `error` event handler to preserve the "pause on exceptions" behavior of browser DevTools. It also logs errors to the developer console.
|
||||
|
||||
If an error is thrown from a [different origin](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) the browser will mask its details and React will not be able to log the original error message. This is a security precaution taken by browsers to avoid leaking sensitive information.
|
||||
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ We recommend following [these instructions](http://babeljs.io/docs/editors) to c
|
|||
|
||||
### Help, I'm Stuck!
|
||||
|
||||
If you get stuck, check out the [community support resources](https://facebook.github.io/react/community/support.html). In particular, [Reactiflux chat](/community/support.html#reactiflux-chat) is a great way to get quick help. If you don't get a good answer anywhere, please file an issue, and we'll help you out.
|
||||
If you get stuck, check out the [community support resources](https://reactjs.org/community/support.html). In particular, [Reactiflux chat](/community/support.html#reactiflux-chat) is a great way to get quick help. If you don't get a good answer anywhere, please file an issue, and we'll help you out.
|
||||
|
||||
With this out of the way, let's get started!
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ The unknown-prop warning will fire if you attempt to render a DOM element with a
|
|||
|
||||
There are a couple of likely reasons this warning could be appearing:
|
||||
|
||||
1. Are you using `{...this.props}` or `cloneElement(element, this.props)`? Your component is transferring its own props directly to a child element (eg. https://facebook.github.io/react/docs/transferring-props.html). When transferring props to a child component, you should ensure that you are not accidentally forwarding props that were intended to be interpreted by the parent component.
|
||||
1. Are you using `{...this.props}` or `cloneElement(element, this.props)`? Your component is transferring its own props directly to a child element (eg. https://reactjs.org/docs/transferring-props.html). When transferring props to a child component, you should ensure that you are not accidentally forwarding props that were intended to be interpreted by the parent component.
|
||||
|
||||
2. You are using a non-standard DOM attribute on a native DOM node, perhaps to represent custom data. If you are trying to attach custom data to a standard DOM element, consider using a custom data attribute as described [on MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes).
|
||||
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ class Header extends React.Component {
|
|||
<div className="header__inner">
|
||||
<span className="header__logo">
|
||||
<img
|
||||
src="https://facebook.github.io/react/img/logo.svg"
|
||||
src="https://reactjs.org/img/logo.svg"
|
||||
alt=""
|
||||
width="32"
|
||||
height="32"
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
"bugs": {
|
||||
"url": "https://github.com/facebook/react/issues"
|
||||
},
|
||||
"homepage": "https://facebook.github.io/react/",
|
||||
"homepage": "https://reactjs.org/",
|
||||
"dependencies": {
|
||||
"create-react-class": "^15.6.2",
|
||||
"fbjs": "^0.8.16",
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
"bugs": {
|
||||
"url": "https://github.com/facebook/react/issues"
|
||||
},
|
||||
"homepage": "https://facebook.github.io/react/",
|
||||
"homepage": "https://reactjs.org/",
|
||||
"dependencies": {
|
||||
"fbjs": "^0.8.16",
|
||||
"loose-envify": "^1.1.0",
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
"bugs": {
|
||||
"url": "https://github.com/facebook/react/issues"
|
||||
},
|
||||
"homepage": "https://facebook.github.io/react/",
|
||||
"homepage": "https://reactjs.org/",
|
||||
"dependencies": {
|
||||
"fbjs": "^0.8.16",
|
||||
"object-assign": "^4.1.1"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# react
|
||||
|
||||
An npm package to get you immediate access to [React](https://facebook.github.io/react/),
|
||||
An npm package to get you immediate access to [React](https://reactjs.org/),
|
||||
without also requiring the JSX transformer. This is especially useful for cases where you
|
||||
want to [`browserify`](https://github.com/substack/node-browserify) your module using
|
||||
`React`.
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
"react"
|
||||
],
|
||||
"version": "16.0.0",
|
||||
"homepage": "https://facebook.github.io/react/",
|
||||
"homepage": "https://reactjs.org/",
|
||||
"bugs": "https://github.com/facebook/react/issues",
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
The error code system substitutes React's invariant error messages with error IDs to provide a better debugging support in production. Check out the blog post [here](https://facebook.github.io/react/blog/2016/07/11/introducing-reacts-error-code-system.html).
|
||||
The error code system substitutes React's invariant error messages with error IDs to provide a better debugging support in production. Check out the blog post [here](https://reactjs.org/blog/2016/07/11/introducing-reacts-error-code-system.html).
|
||||
|
||||
## Note for cutting a new React release
|
||||
1. For each release, we run `yarn build -- --extract-errors` to update the error codes before calling `yarn build`. The build step uses `codes.json` for a production (minified) build; there should be no warning like `Error message "foo" cannot be found` for a successful release.
|
||||
|
|
@ -11,4 +11,4 @@ The error code system consists of 5 parts:
|
|||
- [`extract-errors.js`](https://github.com/facebook/react/blob/master/scripts/error-codes/extract-errors.js) is an node script that traverses our codebase and updates `codes.json`. Use it by calling `yarn build -- --extract-errors`.
|
||||
- [`replace-invariant-error-codes.js`](https://github.com/facebook/react/blob/master/scripts/error-codes/replace-invariant-error-codes.js) is a Babel pass that rewrites error messages to IDs for a production (minified) build.
|
||||
- [`reactProdInvariant.js`](https://github.com/facebook/react/blob/master/src/shared/utils/reactProdInvariant.js) is the replacement for `invariant` in production. This file gets imported by the Babel plugin and should _not_ be used manually.
|
||||
- [`ErrorDecoderComponent`](https://github.com/facebook/react/blob/master/docs/_js/ErrorDecoderComponent.js) is a React component that lives at https://facebook.github.io/react/docs/error-decoder.html. This page takes parameters like `?invariant=109&args[]=Foo` and displays a corresponding error message. Our documentation site's [`Rakefile`](https://github.com/facebook/react/blob/master/docs/Rakefile#L64-L69) has a task (`bundle exec rake copy_error_codes`) for adding the latest `codes.json` to the error decoder page. This task is included in the default `bundle exec rake release` task.
|
||||
- [`ErrorDecoderComponent`](https://github.com/facebook/react/blob/master/docs/_js/ErrorDecoderComponent.js) is a React component that lives at https://reactjs.org/docs/error-decoder.html. This page takes parameters like `?invariant=109&args[]=Foo` and displays a corresponding error message. Our documentation site's [`Rakefile`](https://github.com/facebook/react/blob/master/docs/Rakefile#L64-L69) has a task (`bundle exec rake copy_error_codes`) for adding the latest `codes.json` to the error decoder page. This task is included in the default `bundle exec rake release` task.
|
||||
|
|
|
|||
|
|
@ -457,7 +457,7 @@ git commit -am 'Rebuild the website'
|
|||
git push
|
||||
```
|
||||
|
||||
Now open https://facebook.github.io/react/, give it a few minutes, refresh, and behold.
|
||||
Now open https://reactjs.org/, give it a few minutes, refresh, and behold.
|
||||
|
||||
Don’t forget to switch to `master` for the future development.
|
||||
|
||||
|
|
|
|||
|
|
@ -263,7 +263,7 @@ function forEachSingleChild(bookKeeping, child, name) {
|
|||
/**
|
||||
* Iterates through children that are typically specified as `props.children`.
|
||||
*
|
||||
* See https://facebook.github.io/react/docs/react-api.html#react.children.foreach
|
||||
* See https://reactjs.org/docs/react-api.html#react.children.foreach
|
||||
*
|
||||
* The provided forEachFunc(child, index) will be called for each
|
||||
* leaf child.
|
||||
|
|
@ -332,7 +332,7 @@ function mapIntoWithKeyPrefixInternal(children, array, prefix, func, context) {
|
|||
/**
|
||||
* Maps children that are typically specified as `props.children`.
|
||||
*
|
||||
* See https://facebook.github.io/react/docs/react-api.html#react.children.map
|
||||
* See https://reactjs.org/docs/react-api.html#react.children.map
|
||||
*
|
||||
* The provided mapFunction(child, key, index) will be called for each
|
||||
* leaf child.
|
||||
|
|
@ -355,7 +355,7 @@ function mapChildren(children, func, context) {
|
|||
* Count the number of children that are typically specified as
|
||||
* `props.children`.
|
||||
*
|
||||
* See https://facebook.github.io/react/docs/react-api.html#react.children.count
|
||||
* See https://reactjs.org/docs/react-api.html#react.children.count
|
||||
*
|
||||
* @param {?*} children Children tree container.
|
||||
* @return {number} The number of children.
|
||||
|
|
@ -368,7 +368,7 @@ function countChildren(children, context) {
|
|||
* Flatten a children object (typically specified as `props.children`) and
|
||||
* return an array with appropriately re-keyed children.
|
||||
*
|
||||
* See https://facebook.github.io/react/docs/react-api.html#react.children.toarray
|
||||
* See https://reactjs.org/docs/react-api.html#react.children.toarray
|
||||
*/
|
||||
function toArray(children) {
|
||||
var result = [];
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ var invariant = require('fbjs/lib/invariant');
|
|||
* Returns the first child in a collection of children and verifies that there
|
||||
* is only one child in the collection.
|
||||
*
|
||||
* See https://facebook.github.io/react/docs/react-api.html#react.children.only
|
||||
* See https://reactjs.org/docs/react-api.html#react.children.only
|
||||
*
|
||||
* The current implementation of this function assumes that a single child gets
|
||||
* passed without a wrapper, but the purpose of this helper function is to
|
||||
|
|
|
|||
|
|
@ -175,7 +175,7 @@ var ReactElement = function(type, key, ref, self, source, owner, props) {
|
|||
|
||||
/**
|
||||
* Create and return a new ReactElement of the given type.
|
||||
* See https://facebook.github.io/react/docs/react-api.html#createelement
|
||||
* See https://reactjs.org/docs/react-api.html#createelement
|
||||
*/
|
||||
ReactElement.createElement = function(type, config, children) {
|
||||
var propName;
|
||||
|
|
@ -267,7 +267,7 @@ ReactElement.createElement = function(type, config, children) {
|
|||
|
||||
/**
|
||||
* Return a function that produces ReactElements of a given type.
|
||||
* See https://facebook.github.io/react/docs/react-api.html#createfactory
|
||||
* See https://reactjs.org/docs/react-api.html#createfactory
|
||||
*/
|
||||
ReactElement.createFactory = function(type) {
|
||||
var factory = ReactElement.createElement.bind(null, type);
|
||||
|
|
@ -296,7 +296,7 @@ ReactElement.cloneAndReplaceKey = function(oldElement, newKey) {
|
|||
|
||||
/**
|
||||
* Clone and return a new ReactElement using element as the starting point.
|
||||
* See https://facebook.github.io/react/docs/react-api.html#cloneelement
|
||||
* See https://reactjs.org/docs/react-api.html#cloneelement
|
||||
*/
|
||||
ReactElement.cloneElement = function(element, config, children) {
|
||||
var propName;
|
||||
|
|
@ -365,7 +365,7 @@ ReactElement.cloneElement = function(element, config, children) {
|
|||
|
||||
/**
|
||||
* Verifies the object is a ReactElement.
|
||||
* See https://facebook.github.io/react/docs/react-api.html#isvalidelement
|
||||
* See https://reactjs.org/docs/react-api.html#isvalidelement
|
||||
* @param {?object} object
|
||||
* @return {boolean} True if `object` is a valid component.
|
||||
* @final
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ class ReactMarkupReadableStream extends Readable {
|
|||
/**
|
||||
* Render a ReactElement to its initial HTML. This should only be used on the
|
||||
* server.
|
||||
* See https://facebook.github.io/react/docs/react-dom-stream.html#rendertonodestream
|
||||
* See https://reactjs.org/docs/react-dom-stream.html#rendertonodestream
|
||||
*/
|
||||
function renderToNodeStream(element) {
|
||||
return new ReactMarkupReadableStream(element, false);
|
||||
|
|
@ -41,7 +41,7 @@ function renderToNodeStream(element) {
|
|||
/**
|
||||
* Similar to renderToNodeStream, except this doesn't create extra DOM attributes
|
||||
* such as data-react-id that React uses internally.
|
||||
* See https://facebook.github.io/react/docs/react-dom-stream.html#rendertostaticnodestream
|
||||
* See https://reactjs.org/docs/react-dom-stream.html#rendertostaticnodestream
|
||||
*/
|
||||
function renderToStaticNodeStream(element) {
|
||||
return new ReactMarkupReadableStream(element, true);
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ var ReactPartialRenderer = require('ReactPartialRenderer');
|
|||
/**
|
||||
* Render a ReactElement to its initial HTML. This should only be used on the
|
||||
* server.
|
||||
* See https://facebook.github.io/react/docs/react-dom-server.html#rendertostring
|
||||
* See https://reactjs.org/docs/react-dom-server.html#rendertostring
|
||||
*/
|
||||
function renderToString(element) {
|
||||
var renderer = new ReactPartialRenderer(element, false);
|
||||
|
|
@ -25,7 +25,7 @@ function renderToString(element) {
|
|||
/**
|
||||
* Similar to renderToString, except this doesn't create extra DOM attributes
|
||||
* such as data-react-id that React uses internally.
|
||||
* See https://facebook.github.io/react/docs/react-dom-server.html#rendertostaticmarkup
|
||||
* See https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup
|
||||
*/
|
||||
function renderToStaticMarkup(element) {
|
||||
var renderer = new ReactPartialRenderer(element, true);
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@ function findAllInRenderedFiberTreeInternal(fiber, test) {
|
|||
/**
|
||||
* Utilities for making it easy to test React components.
|
||||
*
|
||||
* See https://facebook.github.io/react/docs/test-utils.html
|
||||
* See https://reactjs.org/docs/test-utils.html
|
||||
*
|
||||
* Todo: Support the entire DOM.scry query syntax. For now, these simple
|
||||
* utilities will suffice for testing purposes.
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
"engines": {
|
||||
"node": ">=7.6.0"
|
||||
},
|
||||
"homepage": "https://facebook.github.io/react/",
|
||||
"homepage": "https://reactjs.org/",
|
||||
"keywords": [
|
||||
"gatsby"
|
||||
],
|
||||
|
|
|
|||
Loading…
Reference in New Issue