[Craig McKeachie](http://www.funnyant.com/author/admin/) author of [JavaScript Framework Guide](http://www.funnyant.com/javascript-framework-guide/) wrote an excellent news named ["What is React.js? Another Template Library?](http://www.funnyant.com/reactjs-what-is-it/)
[Craig McKeachie](http://www.funnyant.com/author/admin/) author of [JavaScript Framework Guide](http://www.funnyant.com/javascript-framework-guide/) wrote an excellent news named ["What is React.js? Another Template Library?](http://www.funnyant.com/reactjs-what-is-it/)
@ -7,7 +7,7 @@ At Facebook we've been using JSX for a long time. We originally introduced it to
In order to make it easier to implement new versions and to make sure that the syntax remains compatible, we're now formalizing the syntax of JSX in a stand-alone spec without any semantic meaning. It's completely stand-alone from React itself.
In order to make it easier to implement new versions and to make sure that the syntax remains compatible, we're now formalizing the syntax of JSX in a stand-alone spec without any semantic meaning. It's completely stand-alone from React itself.
Read the spec now at <https://facebook.github.io/jsx/>.
Read the spec now at https://facebook.github.io/jsx/.
This is not a proposal to be standardized in ECMAScript. It's just a reference document that transpiler writers and syntax highlighters can agree on. It's currently in a draft stage and will probably continue to be a living document.
This is not a proposal to be standardized in ECMAScript. It's just a reference document that transpiler writers and syntax highlighters can agree on. It's currently in a draft stage and will probably continue to be a living document.
@ -10,13 +10,13 @@ We have talked a lot about some of the bigger changes in this release. [We intro
The release is available for download:
The release is available for download:
- **React**
- **React**
Dev build with warnings: <https://fb.me/react-0.12.0.js>
Dev build with warnings: https://fb.me/react-0.12.0.js
Minified build for production: <https://fb.me/react-0.12.0.min.js>
Minified build for production: https://fb.me/react-0.12.0.min.js
- **React with Add-Ons**
- **React with Add-Ons**
Dev build with warnings: <https://fb.me/react-with-addons-0.12.0.js>
Dev build with warnings: https://fb.me/react-with-addons-0.12.0.js
Minified build for production: <https://fb.me/react-with-addons-0.12.0.min.js>
Minified build for production: https://fb.me/react-with-addons-0.12.0.min.js
- **In-Browser JSX transformer**
- **In-Browser JSX transformer**
<https://fb.me/JSXTransformer-0.12.0.js>
https://fb.me/JSXTransformer-0.12.0.js
We've also published version `0.12.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
We've also published version `0.12.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
@ -37,7 +37,7 @@ The old methods will still work but will warn upon first use. They will be remov
- DOM components don't make use of `React.DOM`, instead we pass the tag name directly. `<div/>` becomes `React.createElement('div')`
- DOM components don't make use of `React.DOM`, instead we pass the tag name directly. `<div/>` becomes `React.createElement('div')`
- We introduced spread attributes as a quick way to transfer props.
- We introduced spread attributes as a quick way to transfer props.
## DevTools Improvements, No More `__internals` {#devtools-improvements-no-more-\_\_internals} {/*devtools-improvements-no-more-__internals-devtools-improvements-no-more-__internals*/}
## DevTools Improvements, No More `__internals` {/*devtools-improvements-no-more-__internals*/}
For months we've gotten complaints about the React DevTools message. It shouldn't have logged the up-sell message when you were already using the DevTools. Unfortunately this was because the way we implemented these tools resulted in the DevTools knowing about React, but not the reverse. We finally gave this some attention and enabled React to know if the DevTools are installed. We released an update to the devtools several weeks ago making this possible. Extensions in Chrome should auto-update so you probably already have the update installed!
For months we've gotten complaints about the React DevTools message. It shouldn't have logged the up-sell message when you were already using the DevTools. Unfortunately this was because the way we implemented these tools resulted in the DevTools knowing about React, but not the reverse. We finally gave this some attention and enabled React to know if the DevTools are installed. We released an update to the devtools several weeks ago making this possible. Extensions in Chrome should auto-update so you probably already have the update installed!
@ -10,13 +10,13 @@ You may have noticed that we did not do an announcement for v0.12.1. That releas
The release is available for download from the CDN:
The release is available for download from the CDN:
- **React**
- **React**
Dev build with warnings: <https://fb.me/react-0.12.2.js>
Dev build with warnings: https://fb.me/react-0.12.2.js
Minified build for production: <https://fb.me/react-0.12.2.min.js>
Minified build for production: https://fb.me/react-0.12.2.min.js
- **React with Add-Ons**
- **React with Add-Ons**
Dev build with warnings: <https://fb.me/react-with-addons-0.12.2.js>
Dev build with warnings: https://fb.me/react-with-addons-0.12.2.js
Minified build for production: <https://fb.me/react-with-addons-0.12.2.min.js>
Minified build for production: https://fb.me/react-with-addons-0.12.2.min.js
- **In-Browser JSX transformer**
- **In-Browser JSX transformer**
<https://fb.me/JSXTransformer-0.12.2.js>
https://fb.me/JSXTransformer-0.12.2.js
We've also published version `0.12.2` of the `react` and `react-tools` packages on npm and the `react` package on bower. `0.12.1` is also available in the same locations if need those.
We've also published version `0.12.2` of the `react` and `react-tools` packages on npm and the `react` package on bower. `0.12.1` is also available in the same locations if need those.
@ -16,7 +16,7 @@ Beginning today, those studying or working in computer science or a related fiel
At Facebook, we believe that anyone anywhere can make a positive impact by developing products to make the world more open and connected to the people and things they care about. Given the current realities of the tech industry and the lack of representation of communities we seek to serve, applicants currently under-represented in Computer Science and related fields are strongly encouraged to apply.
At Facebook, we believe that anyone anywhere can make a positive impact by developing products to make the world more open and connected to the people and things they care about. Given the current realities of the tech industry and the lack of representation of communities we seek to serve, applicants currently under-represented in Computer Science and related fields are strongly encouraged to apply.
Facebook will make determinations on scholarship recipients in its sole discretion. Facebook complies with all equal opportunity laws.
Facebook will make determinations on scholarship recipients in its sole discretion. Facebook complies with all equal opportunity laws.
To apply for the scholarship, please visit the Application Page: <https://www.surveymonkey.com/s/XVJGK6R>
To apply for the scholarship, please visit the Application Page: https://www.surveymonkey.com/s/XVJGK6R
@ -194,7 +194,7 @@ Since these objects can have any keys with almost any value, we can’t differen
To differentiate ReactElements from one of these objects, we have to tag them with `_isReactElement`. This is another issue preventing us from inlining ReactElements as simple object literals.
To differentiate ReactElements from one of these objects, we have to tag them with `_isReactElement`. This is another issue preventing us from inlining ReactElements as simple object literals.
### Solution: Just use an Array and key={…} {/*solution-just-use-an-array-and-key*/}
### Solution: Just use an Array and `key={...}` {/*solution-just-use-an-array-and-key*/}
Most of the time you can just use an array with keyed ReactElements.
Most of the time you can just use an array with keyed ReactElements.
@ -23,7 +23,7 @@ React opens a world of new possibilities such as server-side rendering, real-tim
At Facebook, we believe that anyone anywhere can make a positive impact by developing products to make the world more open and connected to the people and things they care about. Given the current realities of the tech industry and the lack of representation of communities we seek to serve, applicants currently under-represented in Computer Science and related fields are strongly encouraged to apply. Facebook will make determinations on scholarship recipients in its sole discretion. Facebook complies with all equal opportunity laws.
At Facebook, we believe that anyone anywhere can make a positive impact by developing products to make the world more open and connected to the people and things they care about. Given the current realities of the tech industry and the lack of representation of communities we seek to serve, applicants currently under-represented in Computer Science and related fields are strongly encouraged to apply. Facebook will make determinations on scholarship recipients in its sole discretion. Facebook complies with all equal opportunity laws.
To apply for the scholarship, please visit the application page: **<http://goo.gl/forms/PEmKj8oUp4>**
To apply for the scholarship, please visit the application page: **http://goo.gl/forms/PEmKj8oUp4**
@ -16,7 +16,7 @@ Before participating in React's communities, [please read our Code of Conduct.](
Stack Overflow is a popular forum to ask code-level questions or if you're stuck with a specific error. Read through the [existing questions](https://stackoverflow.com/questions/tagged/reactjs) tagged with **reactjs** or [ask your own](https://stackoverflow.com/questions/ask?tags=reactjs)!
Stack Overflow is a popular forum to ask code-level questions or if you're stuck with a specific error. Read through the [existing questions](https://stackoverflow.com/questions/tagged/reactjs) tagged with **reactjs** or [ask your own](https://stackoverflow.com/questions/ask?tags=reactjs)!
<!--
{/*
TODO: decide on the criteria for inclusion before uncommenting. (Change Popular Discussion Forums into heading while un-commenting)
TODO: decide on the criteria for inclusion before uncommenting. (Change Popular Discussion Forums into heading while un-commenting)
@ -31,7 +31,7 @@ Each community consists of many thousands of React users.
@ -316,10 +316,6 @@ Notice how the `App` component does not need to know *what* `Toolbar` will do wi
## Event propagation {/*event-propagation*/}
## Event propagation {/*event-propagation*/}
<!--
// TODO illo
-->
Event handlers will also catch events from any children your component might have. We say that an event "bubbles" or "propagates" up the tree: it starts with where the event happened, and then goes up the tree.
Event handlers will also catch events from any children your component might have. We say that an event "bubbles" or "propagates" up the tree: it starts with where the event happened, and then goes up the tree.
This `<div>` contains two buttons. Both the `<div>`*and* each button have their own `onClick` handlers. Which handlers do you think will fire when you click a button?
This `<div>` contains two buttons. Both the `<div>`*and* each button have their own `onClick` handlers. Which handlers do you think will fire when you click a button?
@ -420,10 +416,6 @@ As a result of `e.stopPropagation()`, clicking on the buttons now only shows a s
<DeepDivetitle="Capture phase events">
<DeepDivetitle="Capture phase events">
<!--
// TODO Illo
-->
In rare cases, you might need to catch all events on child elements, *even if they stopped propagation*. For example, maybe you want to log every click to analytics, regardless of the propagation logic. You can do this by adding `Capture` at the end of the event name:
In rare cases, you might need to catch all events on child elements, *even if they stopped propagation*. For example, maybe you want to log every click to analytics, regardless of the propagation logic. You can do this by adding `Capture` at the end of the event name:
@ -231,12 +231,8 @@ And `TaskList` passes the event handlers to `Task`:
In a small example like this, this works well, but if you have tens or hundreds of components in the middle, passing down all state and functions can be quite frustrating!
In a small example like this, this works well, but if you have tens or hundreds of components in the middle, passing down all state and functions can be quite frustrating!
<!--(TODO: illustration of prop drilling)-->
This is why, as an alternative to passing them through props, you might want to put both the `tasks` state and the `dispatch` function [into context.](/learn/passing-data-deeply-with-context) **This way, any component below `TaskApp` in the tree can read the tasks and dispatch actions without the repetitive "prop drilling".**
This is why, as an alternative to passing them through props, you might want to put both the `tasks` state and the `dispatch` function [into context.](/learn/passing-data-deeply-with-context) **This way, any component below `TaskApp` in the tree can read the tasks and dispatch actions without the repetitive "prop drilling".**
<!--(TODO: illustration of context)-->
Here is how you can combine a reducer with context:
Here is how you can combine a reducer with context:
@ -460,8 +460,6 @@ Although `nextList` and `list` are two different arrays, **`nextList[0]` and `li
Objects are not _really_ located "inside" arrays. They might appear to be "inside" in code, but each object in an array is a separate value, to which the array "points". This is why you need to be careful when changing nested fields like `list[0]`. Another person's artwork list may point to the same element of the array!
Objects are not _really_ located "inside" arrays. They might appear to be "inside" in code, but each object in an array is a separate value, to which the array "points". This is why you need to be careful when changing nested fields like `list[0]`. Another person's artwork list may point to the same element of the array!
<!-- TODOODLE -->
**When updating nested state, you need to create copies from the point where you want to update, and all the way up to the top level.** Let's see how this works.
**When updating nested state, you need to create copies from the point where you want to update, and all the way up to the top level.** Let's see how this works.
In this example, two separate artwork lists have the same initial state. They are supposed to be isolated, but because of a mutation, their state is accidentally shared, and checking a box in one list affects the other list:
In this example, two separate artwork lists have the same initial state. They are supposed to be isolated, but because of a mutation, their state is accidentally shared, and checking a box in one list affects the other list:
dan
2 years ago
GitHub