Compare commits

...

1029 Commits

Author SHA1 Message Date
Paul O’Shannessy
ca92b9104c 15.0.1 2016-04-08 11:12:25 -07:00
Paul O’Shannessy
a6179d03f3 Update changelog & readme for 15.0.1 2016-04-08 11:12:25 -07:00
Ben Alpert
8afaf0380f Merge pull request #6449 from spicyj/option-value
Set value using attribute only on initial option render
(cherry picked from commit 2b1bd1d7fe)
2016-04-07 21:47:58 -07:00
Paul O’Shannessy
ca0c409b6f Merge pull request #6444 from zpao/re__spreadwarn
Add back React.__spread and make it warn
(cherry picked from commit 516c1d809e)
2016-04-07 17:49:05 -07:00
Paul O’Shannessy
177796ff79 Fix extraneous markup in changelog 2016-04-07 17:49:05 -07:00
Paul O’Shannessy
da3be881ba [docs] Clarify data-reactid in v15 post
(cherry picked from commit 6fd2b29ec8)
2016-04-07 15:27:37 -07:00
Dan Abramov
1a0ec77094 Add the missing download
(cherry picked from commit 1aee28ef1b)
2016-04-07 14:33:05 -07:00
Jim
e226021c5e Merge pull request #6400 from jimfb/return-value-legacy
Document legacyness of the return value of ReactDOM.render()
(cherry picked from commit 1dc7c581db)
2016-04-07 14:28:20 -07:00
Jim
1942c6a035 Merge pull request #6419 from IvanVergiliev/master
Add documentation about empty functional components
(cherry picked from commit 62f64a84a4)
2016-04-07 14:28:14 -07:00
Paul O’Shannessy
c49166401a Update readme for v15 2016-04-07 13:59:21 -07:00
Paul O’Shannessy
500c0003b2 Update Changelog for v15 2016-04-07 13:58:15 -07:00
Paul O’Shannessy
0275d77fc0 [docs] Update site for v15 2016-04-07 13:58:15 -07:00
Dan Abramov
67a4b12e27 Add React 15 post 2016-04-07 13:58:14 -07:00
Paul O’Shannessy
d1c08f11d5 v15.0.0 2016-04-07 12:07:50 -07:00
Paul O’Shannessy
40c0867f63 [docs] Update acknowledgements for v15 2016-04-07 12:04:24 -07:00
Paul O’Shannessy
7081a85ace Shrinkwrap for release branch 2016-04-07 11:55:23 -07:00
Paul O’Shannessy
e8615daaed Merge pull request #6428 from zpao/15-docs-attrs
[docs] Update supported attrs, clarified what supported elements actually means
2016-04-07 11:22:55 -07:00
Sebastian Markbåge
a37e4e94fc Merge pull request #6431 from sebmarkbage/killspread
Kill React.__spread
2016-04-06 18:42:45 -07:00
Paul O’Shannessy
411951d5b8 Merge pull request #6432 from zpao/testutilsinlinerequiresinject
Ensure default injection is injected for test utils
2016-04-06 17:43:26 -07:00
Paul O’Shannessy
95cd88d07a Ensure default injection is injected for test utils 2016-04-06 17:43:08 -07:00
Sebastian Markbage
a142fd2578 Kill React.__spread
This was only for a JSTransform related experiment that is now
dead along with JSTransform.
2016-04-06 17:08:50 -07:00
Paul O’Shannessy
e19353cdb5 Merge pull request #6429 from zpao/viceversa2words
Fix "vice versa" in warning message
2016-04-06 16:46:19 -07:00
Paul O’Shannessy
ff7cc5dc4e Merge pull request #6430 from formido/patch-1
Fix briefly confusing typo
2016-04-06 16:27:38 -07:00
Paul O’Shannessy
a55579af0a Merge pull request #6426 from zpao/valuetest
Fix tests for value change
2016-04-06 16:24:09 -07:00
Michael Terry
edbe103094 Fix briefly confusing typo
There are two examples of a text input with initial value  of "Hello!" on this page, a controlled and an uncontrolled. The explanation for the uncontrolled version mistakenly says it works much like the earlier "uncontrolled" example, but the earlier example was the controlled version.
2016-04-06 15:57:48 -07:00
Paul O’Shannessy
a10665cac0 Fix "vice versa" in warning message
The phrase is 2 words, not 1.
2016-04-06 15:51:06 -07:00
Paul O’Shannessy
a7af9c6ce4 [docs] Update supported attrs, clarified what supported elements actually means 2016-04-06 15:41:56 -07:00
Paul O’Shannessy
65c68b5a04 Merge pull request #6380 from zpao/simulatewarning
Make sure simulated events don't warn when providing extra event properties
2016-04-06 14:59:22 -07:00
Paul O’Shannessy
3f9e21f4eb Merge pull request #6413 from zpao/deps-cleanup
Upgrade a few package dependencies, remove unused task
2016-04-06 14:23:54 -07:00
Paul O’Shannessy
cf1a96611f Fix tests for value change 2016-04-06 13:43:59 -07:00
Paul O’Shannessy
42b1cba048 Make sure simulated events don't warn when providing extra event properties 2016-04-05 14:53:25 -07:00
Paul O’Shannessy
622e84bcfe Merge pull request #6415 from sebmarkbage/typofix
Fix typo
2016-04-05 14:30:48 -07:00
Sebastian Markbage
2d069fc5e6 Fix typo
Resets currentTarget on the pooled event instead of adding an
expando.
2016-04-05 13:40:49 -07:00
Jim
add9ccedd6 Merge pull request #6408 from facebook/gaearon-patch-2
Remove 15 RC1 changelog entry that was fixed in 0.14
2016-04-05 13:29:59 -07:00
Paul O’Shannessy
d10b355b42 Merge pull request #6228 from everdimension/fix_option_value
set value property explicitly for "option" element even if value is empty
2016-04-05 13:27:13 -07:00
Paul O’Shannessy
b72a098657 Upgrade browserify 2016-04-05 10:53:53 -07:00
Paul O’Shannessy
3cd39cbb8f Upgrade fbjs 2016-04-05 10:50:54 -07:00
Paul O’Shannessy
90856ee61b Remove jsx task & jsx-internal script
These haven't been used in a long time so it's time to get rid of them.
2016-04-05 10:18:42 -07:00
Dan Abramov
67ff7104a1 Remove another 0.14 changelog entry for 15 RC1 release notes 2016-04-05 01:32:38 +01:00
Dan Abramov
b151e7fd3b Remove 15 RC1 changelog entry that was fixed in 0.14 2016-04-05 00:49:07 +01:00
Paul O’Shannessy
80bff5397b Merge pull request #6376 from zpao/object.assign
Use object-assign instead of our own dated "polyfill"
2016-04-04 10:21:39 -07:00
Paul O’Shannessy
1573baaee8 Use Object.assign directly and inject object-assign at compile 2016-04-04 09:53:25 -07:00
Paul O’Shannessy
f7db143b41 Update authors for v15
* fix conor

* one fewer jonathan

* nakazye

* Third9 & translucens

* zjjw

* rebase on master to pick up recent changes

* rebase

* shogunsea

* couple names for mailmap

* iawia002

* rebase

* terry3, speedskater

* rebase, handle duplicate mark

* more
2016-04-04 09:46:23 -07:00
Dan Abramov
b0d1e16271 Merge pull request #6405 from facebook/gaearon-patch-2
Clarify that ReactPerf.getLastMeasurements() is now opaque
2016-04-04 17:02:45 +01:00
Dan Abramov
30dc842e34 Clarify that ReactPerf.getLastMeasurements() is now opaque 2016-04-04 16:29:53 +01:00
Dan Abramov
14b19870fe Merge pull request #5731 from MatthewHerbst/docs-arrayof-custom-validator
Documentation for arrayOf custom item validator
2016-04-02 14:12:23 +01:00
Matthew Herbst
0c89da5b25 Added new documentation showing use of a custom validator for arrayOf or objectOf, specifically how the method signature for such a validator differs from the customProp validator method signature. Made minor edits to error message for customProp example to match error messages found in src. 2016-04-02 19:28:25 +08:00
Dan Abramov
44c699a465 Merge pull request #6399 from facebook/gaearon-flip-dev
Flip __DEV__ assignments in ReactDOMProduction-test
2016-04-02 01:25:11 +01:00
Dan Abramov
ec1462834e Update ReactDOMProduction-test.js 2016-04-02 00:53:01 +01:00
Dan Abramov
a5c164daca Merge pull request #6389 from gaearon/reactperf-reactdebuginstancemap
Add ReactDebugInstanceMap
2016-04-01 23:32:20 +01:00
Dan Abramov
599582c3b2 Merge pull request #6392 from facebook/gaearon-add-meeting-notes
Link to the meeting notes from Contributing
2016-04-01 18:32:52 +01:00
Dan Abramov
51bfe2d1f3 Link to the meeting notes 2016-04-01 17:58:55 +01:00
Dan Abramov
575fb79162 Add ReactDebugInstanceMap
This PR is the first in a series of pull requests split from the new `ReactPerf` implementation in #6046.

Here, we introduce a new module called `ReactDebugInstanceMap`. It will be used in `__DEV__` and, when the `__PROFILE__` gate is added, in the `__PROFILE__` builds. It will *not* be used in the production builds.

This module acts as a mapping between “debug IDs” (a new concept) and the internal instances. Not to be confused with the existing `ReactInstanceMap` that maps internal instances to public instances.

What are the “debug IDs” and why do we need them? Both the new `ReactPerf` and other consumers of the devtool API, such as React DevTools, need access to some data from the internal instances, such as the instance type display name, current props and children, and so on. Right now we let such tools access internal instances directly but this hurts our ability to refactor their implementations and burdens React DevTools with undesired implementation details such as having to support React ART in a special way.[1]

The purpose of adding `ReactDebugInstanceMap` is to only expose “debug IDs” instead of the internal instances to any devtools. In a future RP, whenever there is an event such as mounting, updating, or unmounting a component, we will emit an event in `ReactDebugTool` with the debug ID of the instance. We will also add an introspection API that lets the consumer pass an ID and get the information about the current children, props, state, display name, and so on, without exposing the internal instances.

`ReactDebugInstanceMap` has a concept of “registering” an instance. We plan to add the hooks that register an instance as soon as it is created, and unregister it during unmounting. It will only be possible to read information about the instance while it is still registered. If we add support for reparenting, we should be able to move the (un)registration code to different places in the component lifecycle without changing this code. The currently registered instances are held in the `registeredInstancesByIDs` dictionary.

There is also a reverse lookup dictionary called `allInstancesToIDs` which maps instances back to their IDs. It is implemented as a `WeakMap` so the keys are stable and we’re not holding onto the unregistered instances. If we’re not happy with `WeakMap`, one possible alternative would be to add a new field called `_debugID` to all the internal instances, but we don’t want to do this in production. Using `WeakMap` seems like a simpler solution here (and stable IDs are a nice bonus). This, however, means that the `__DEV__` (and the future `__PROFILE__`) builds will only work in browsers that support our usage of `WeakMap`.

[1]: 577ec9b8d9/backend/getData.js
2016-03-31 17:58:55 +01:00
Jim
eb85b7b2c9 Merge pull request #6381 from cbrwizard/clipboard_event_unit_tests
SyntheticClipboardEvent unit tests
2016-03-31 07:37:31 -07:00
Jim
7a8c460e03 Merge pull request #6367 from sottar/translate-thinking-in-react.md-to-Japanese
Translate thinking-in-react.md to Japanese
2016-03-30 20:52:08 -07:00
Dan Abramov
cbe72d4b97 Merge pull request #6383 from gaearon/consistent-spies
Spy at warnings consistently inside test cases
2016-03-30 23:58:15 +01:00
Dan Abramov
b6bc4bd996 Spy at warnings consistently inside test cases
We move any spies on `console.error()` from `beforeEach()` to the individual `it()` tests. This means that if a new test is introduced in these suites, it does not ignore warnings by default, but fails on any unexpected warning, which is Jest's default behavior.

We also change a few old instances of direct `console.error = jest.genMockFn()` assignment to use `spyOn()` for consistency with the rest of the tests.
2016-03-30 22:01:20 +01:00
cbrwizard
e6e38d0f9c SyntheticClipboardEvent unit tests
Adds unit tests for a SyntheticClipboardEvent.
2016-03-30 23:09:23 +03:00
Dan Abramov
05b05c4c81 Merge pull request #6363 from facebook/gaearon-patch-1
Document how to avoid wrapper in ReactTransitionGroup
2016-03-30 01:17:48 +01:00
Dan Abramov
531205065f Document how to avoid wrapper in ReactTransitionGroup
Thanks to @rayshan for some rewording tips too!
2016-03-30 01:16:37 +01:00
Dan Abramov
03fe7dbb37 Fixed paren balance in the doc 2016-03-29 21:30:49 +01:00
Jim
d9ca95c44f Merge pull request #6374 from mfunkie/patch-3
Link to "No Autobinding" section for ES6 classes.
2016-03-29 13:25:52 -07:00
Mark Funk
58a86f6c6c Link to "No Autobinding" section for ES6 classes.
There's a more descriptive section about the lack of Autobinding in ES6 classes and suggestions around it, so this commit adds a link to that section.
2016-03-29 13:19:38 -07:00
Dan Abramov
4910c3bcce Merge pull request #6373 from mfunkie/patch-2
Update ES6 class documentation with binding perf
2016-03-29 20:58:16 +01:00
Mark Funk
fb13cf55fe Update ES6 class documentation with binding perf
Adding a note in the ES6 class documentation about function binding.  Recommending that you bind your handlers in the constructor so that they are referentially the same function every time render is invoked (helps with child components that might potentially call shouldComponentUpdate)
2016-03-29 12:51:57 -07:00
Dan Abramov
b666a44ce1 Merge pull request #6360 from cbrwizard/SyntheticKeyboardEvent_unit_tests
SyntheticKeyboardEvent unit tests
2016-03-29 20:35:06 +01:00
cbrwizard
d743a8dd55 SyntheticKeyboardEvent unit tests
Adds unit tests for SyntheticKeyboardEvent.
2016-03-29 22:28:11 +03:00
Paul O’Shannessy
22a3d0387b Merge pull request #6337 from zpao/15-examples
Update examples for 15 (and other examples fixes)
2016-03-29 11:02:28 -07:00
Paul O’Shannessy
2baa3b7d2f Update examples for v15
- Update commonjs example to use Babel 6
- Update click counter example to match other examples
- Update jquery example
- Stop shipping webcomponents.js in starter kit
2016-03-29 11:00:48 -07:00
Dan Abramov
7f01c47658 Fix whitespace in 0.14.8 blog entry 2016-03-29 18:31:48 +01:00
Dan Abramov
d7fe7ecca5 Merge pull request #6370 from gaearon/148-post
Blog post for React 0.14.8
2016-03-29 17:22:50 +01:00
Dan Abramov
96c0cd061e Update README and CHANGELOG for 0.14.8 2016-03-29 17:07:21 +01:00
Dan Abramov
815d3514a7 Blog post for React 0.14.8 2016-03-29 16:47:11 +01:00
sottar
2890af02f1 Translate thinking-in-react.md to Japanese 2016-03-29 21:02:58 +09:00
Dan Abramov
a2780212ae Merge branch 'andreypopp-patch-1' 2016-03-27 00:25:40 +00:00
Dan Abramov
ba76649c3b Rename example package.json command for consistency with README 2016-03-27 00:25:29 +00:00
Jim
dcd092560d Merge pull request #6305 from maherbeg/maher-error-find-dom-node
Test to verify findDOMNode does not throw in willMount
2016-03-24 18:59:55 -07:00
Maher Beg
70de7e4a38 Test to verify findDOMNode does not throw in willMount
Adds a test to prevent a regression of throwing an error when
calling `findDOMNode(this)` in a component's `componentWillMount`
function. This previously used to throw an invariant violation but
now does not any more.
2016-03-24 18:06:27 -07:00
Paul O’Shannessy
9358ce3b02 Merge pull request #6332 from kentcdodds/pr/beginner-friendly
add beginner friendly resource for learning how to PR
2016-03-24 16:07:01 -07:00
Paul O’Shannessy
6a8ebfc418 Merge pull request #6331 from zpao/isonpmorphic
Make Browserify-specific modules to remove DOM dependencies from npm package
2016-03-24 16:01:51 -07:00
Paul O’Shannessy
d17091ddeb Make Browserify-specific modules to remove DOM dependencies from npm package 2016-03-24 15:28:52 -07:00
Paul O’Shannessy
ae2a7c723f Merge pull request #6333 from kentcdodds/pr/beginner-friendly-badge
add prs welcome badge
2016-03-24 14:58:15 -07:00
Kent C. Dodds
6b307a55fb add prs welcome badge 2016-03-24 14:18:32 -06:00
Kent C. Dodds
f0dbc1e1d3 add beginner friendly resource for learning how to PR 2016-03-24 13:20:18 -06:00
Jim
e119f20927 Merge pull request #6330 from speedskater/patch-1
Updated react conf links
2016-03-24 08:57:21 -07:00
Jim
414f057bc2 Merge pull request #6296 from jontewks/add-warnings
Add warnings for onFocusIn and onFocusOut props
2016-03-24 08:37:45 -07:00
speedskater
c212226fff Updated react conf links
* Added React Conf 2016
* Fixed Links for React Conf 2015
2016-03-24 08:11:35 +01:00
Jim
d8ee071c92 Merge pull request #6195 from mxstbr/perf-links
Add benchling engineering articles about perf to docs
2016-03-23 16:47:42 -07:00
Dan Abramov
f80f2379cd Merge pull request #6326 from gaearon/fix-test
Fix ReactPerf.printOperations() test to work with createElement = false
2016-03-23 22:58:20 +00:00
Dan Abramov
0f1240e877 Fix ReactPerf.printOperations() test to work with createElement = false 2016-03-23 22:24:32 +00:00
Paul O’Shannessy
5e770f4d2d Merge pull request #6191 from strawbrary/edit-on-github-position
[docs] keep position of "Edit on GitHub" link fixed
2016-03-23 12:24:16 -07:00
Paul O’Shannessy
bfb9444300 Merge pull request #6242 from edvinerikson/add-origin-to-css-warnings
added component name to css property warnings
2016-03-23 12:12:51 -07:00
Dan Abramov
f5a9fb378d Add missing set -e to Travis builds
Fixes #6150, corrects a mistake made in d138b286db
2016-03-23 18:59:59 +00:00
Dan Abramov
1e8156143a Merge pull request #6310 from gaearon/setstate-warning
Add more specific error messages for bad callback in setState, replaceState, and ReactDOM.render
2016-03-23 14:50:36 +00:00
Jim
75c2b6ab59 Merge pull request #6257 from terry3/highlight-not-working
Highlight 'NOT' word in example page.
2016-03-22 22:54:48 -07:00
terry3
7169da21ba Highlight 'NOT' word in example page. 2016-03-23 09:19:58 +08:00
Jon Tewksbury
a7fae7e4c7 Add warnings for onFocusIn and onFocusOut props 2016-03-21 17:22:37 -07:00
Jim
c528732504 Merge pull request #6307 from cbrwizard/getEventCharCode_unit_tests
getEventCharCode unit tests
2016-03-21 16:17:06 -07:00
Dan Abramov
af4fe68b14 Change message format to be more consistent with other errors 2016-03-21 23:13:47 +00:00
Dan Abramov
d4657b8331 Add bad callback invariants to ReactDOM.render() calls 2016-03-21 22:33:15 +00:00
Paul O’Shannessy
d433c2f376 Merge pull request #6313 from jimfb/script-integrity-attribute
Removed script security attributes, since fb.me isn't setting the proper headers.
2016-03-21 15:19:16 -07:00
Jim
8b026f901c Removed script security attributes, since fb.me isn't setting the proper headers. 2016-03-21 15:06:08 -07:00
Paul O’Shannessy
39ccdccef1 Merge pull request #6312 from vjeux/fix_docs_jump
[website] Fix jump on the header
2016-03-21 14:44:57 -07:00
Dan Abramov
ebe5128489 Use specific method names in error messages 2016-03-21 21:40:17 +00:00
Dan Abramov
552f00b536 Make setState() callback error message more descriptive
Fixes #6306
2016-03-21 21:24:19 +00:00
Christopher Chedeau
fe617082d9 [website] Fix jump on the header
Algolia adds two inline styles

```css
  position: relative;
  vertical-align: top;
```

to the element once the script inserted at the end of the page runs which super slightly moves the header. The fix is to always apply those two rules this way it doesn't jump. I did not notice it on my machine because it doesn't move when custom fonts are not being used.

Test Plan:
- Open two tabs: reactjs.com and localhost:4000/react
- Click around on reactjs.com to prime the cache with the fonts
- Switch tabs and click around on localhost (but do not force refresh!)
- Now you get custom fonts loaded locally and it doesn't jump when you change tabs
2016-03-21 14:12:20 -07:00
Paul O’Shannessy
40c4635e17 Merge pull request #6303 from qerub/use-loose-envify
Use loose-envify instead of envify
2016-03-21 12:24:46 -07:00
Christoffer Sawicki
ecf824cc2a Use loose-envify instead of envify
This reduces the number of transitive dependencies and decreases the build time (by ~6% on my machine).
2016-03-21 20:18:17 +01:00
Paul O’Shannessy
75e4ef167e Merge pull request #6309 from victor-homyakov/patch-1
Free memory allocated by testElement after usage
2016-03-21 12:16:16 -07:00
Victor Homyakov
0393488f39 Free memory allocated by testElement after usage
IE11 reports `testElement` as detached DOM node consuming memory. It is captured in closure of `setInnerHTML` function and could be safely cleared after feature test.
2016-03-21 14:07:26 +03:00
cbrwizard
7bdf4dba75 getEventCharCode unit tests
Adds unit tests to getEventCharCode.
2016-03-21 12:56:45 +03:00
Dan Abramov
441d9b65bd Merge pull request #6301 from gaearon/remove-dead-export
Remove unused export from DOMChildrenOperations
2016-03-20 00:41:29 +00:00
Dan Abramov
cfec10bd51 Remove unused export from DOMChildrenOperations 2016-03-19 21:05:05 +00:00
Jim
2f24f89111 Merge pull request #6281 from rgarifullin/microfix_docs
Microfix docs
2016-03-19 11:24:27 -07:00
Dan Abramov
67f8524e88 Merge pull request #6289 from gaearon/strip-circular-refs
Strip complex values from ReactPerf.printDOM() output
2016-03-18 22:24:18 +00:00
Dan Abramov
d138b286db Try disabling coverage on master to prevent Travis crashes
We suspect that memory overhead caused by coverage might be the reason Travis fails on master. No guarantees it will work but worth a try.
2016-03-18 00:14:25 +00:00
Dan Abramov
b6547734c6 Strip complex values from ReactPerf.printDOM() output
Fixes #6288
2016-03-17 21:23:43 +00:00
Dan Abramov
5520c399a6 Merge pull request #6287 from gaearon/rename-perf-methods
Rename ReactPerf methods to match the upcoming ReactPerf revamp
2016-03-17 20:47:02 +00:00
Dan Abramov
ea55d66760 Rename ReactPerf methods to match the upcoming ReactPerf revamp 2016-03-17 20:18:42 +00:00
rgarifullin
8e6996267f Add missing semicolon in test-utils part of docs 2016-03-17 22:51:11 +03:00
Dan Abramov
8046cbda10 Merge pull request #6285 from gaearon/no-addons
Remove react/addons
2016-03-17 19:26:03 +00:00
Dan Abramov
b322d65320 Fix the ReactDefaultPerf test to match changes in #6286 2016-03-17 19:23:21 +00:00
Dan Abramov
67647fd82f Merge pull request #6286 from gaearon/opaque-perf-measurements
Make ReactPerf.getLastMeasurements() opaque
2016-03-17 19:12:07 +00:00
Dan Abramov
51d37c64c3 Make ReactPerf measurements opaque
We intend to change the measurement format significantly in #6046. In order to introduce the new ReactPerf during 15.x release cycle, we are making the measurement structure opaque-ish in 15.0.
2016-03-17 18:48:55 +00:00
Dan Abramov
a7ed9fd199 Remove react/addons 2016-03-17 18:18:04 +00:00
Jim
663a78399c Merge pull request #6273 from cbrwizard/getEventKey_tests
getEventKey unit tests
2016-03-17 10:38:16 -07:00
Dan Abramov
e04a138634 Merge pull request #6276 from gaearon/fix-custom-components
Skip all special props when setting attributes on web components
2016-03-17 15:44:40 +00:00
Dan Abramov
8bff1f50a6 Add v15 RC2 download 2016-03-16 22:22:47 +00:00
Dan Abramov
7dd71ca488 Add v15 RC2 blog post 2016-03-16 21:48:24 +00:00
Dan Abramov
97038d1ff7 v15.0.0-rc.2 2016-03-16 21:21:34 +00:00
Dan Abramov
c395c0977f Skip all special props when setting attributes on web components 2016-03-16 21:10:47 +00:00
Dan Abramov
c5f7c8dae1 Merge pull request #6274 from facebook/revert-6226-PR-5202
Revert "Bug fix for issue 5202"
2016-03-16 20:51:07 +00:00
Dan Abramov
9f418df8b3 Revert "Bug fix for issue 5202" 2016-03-16 20:42:28 +00:00
cbrwizard
07824258c6 getEventKey unit tests
Adds unit tests to getEventKey function.
2016-03-16 22:09:41 +03:00
Jim
745108f625 Merge pull request #6270 from rofrischmann/unitless-css-property
added several new unitless properties
2016-03-16 11:21:41 -07:00
Jim
93752bb175 Merge pull request #6226 from antoaravinth/PR-5202
Bug fix for issue 5202
2016-03-16 09:48:01 -07:00
Dan Abramov
a261c45ccf Merge pull request #6267 from gaearon/svg-whitelist
Add more properties to the SVG whitelist
2016-03-16 16:24:40 +00:00
rofrischmann
318e024338 added several new unitless properties 2016-03-16 10:04:09 +01:00
Dan Abramov
9268c1a710 Add vector-effect to SVG whitelist
Requested in https://github.com/facebook/react/issues/1657#issuecomment-148420568
2016-03-15 20:51:54 +00:00
Dan Abramov
6882c7ca40 Add focusable attribute to SVG whitelist
Fixes #6212
2016-03-15 20:18:57 +00:00
Jim
9e1a637644 Merge pull request #6260 from iawia002/master
Update 02-displaying-data.zh-CN.md
2016-03-15 03:32:15 -07:00
Jim
b8682e0f20 Merge pull request #6258 from iamchenxin/zh_docs031316rest
[DOCS] Update zh-docs to v15-rc.1 (with #3240c09)
2016-03-15 02:56:05 -07:00
iamchenxin
28caa8882b [DOCS] Update zh-docs to v15-rc.1 (with #3240c09) 2016-03-15 09:42:29 +00:00
iawia002
37c3b081d9 Update 02-displaying-data.zh-CN.md
每三个是子节点 --> 第三个是子节点
2016-03-14 09:44:52 +08:00
Jim
c927cfa0b4 Merge pull request #6256 from iamchenxin/zh_docs031316
[DOCS] Update zh-docs to v15-rc.1 (with #3240c09)
2016-03-12 21:39:37 -08:00
iamchenxin
02b4d18252 [DOCS] Update zh-docs to v15-rc.1 (with #3240c09) 2016-03-13 04:24:00 +00:00
Christopher Chedeau
3240c09a06 Merge pull request #6202 from vjeux/search
Introduce search
2016-03-11 15:55:55 -08:00
Paul O’Shannessy
20e1acb7dd Merge pull request #6210 from rofrischmann/unitless-border-image-outset
added borderImageOutset to unitless CSS properties
2016-03-11 11:34:30 -08:00
Paul O’Shannessy
ec25297def Merge pull request #6243 from zpao/fuck-svg-2
Revert SVG passthrough and expand whitelist
2016-03-11 11:33:45 -08:00
Paul O’Shannessy
5a17a1ef1d Update DOMLazyTree fragments comment to reflect reality 2016-03-11 11:30:03 -08:00
Paul O’Shannessy
a0a72004e5 Fix lint warnings due to backouts 2016-03-11 11:23:53 -08:00
Paul O’Shannessy
48a1cc52d7 Remove attributes already specified in the HTML config 2016-03-11 11:08:56 -08:00
Paul O’Shannessy
37fc21f1e8 Use 0 instead of null in property config
We're using this value to check bits and null is 0 in that sense anyway. This shaves off a few bytes (though as expected, gzip is virtually unchanged)
2016-03-11 11:08:56 -08:00
Paul O’Shannessy
79a62b09ea Consolidate SVG config to avoid some duplication 2016-03-11 11:08:56 -08:00
Paul O’Shannessy
afda226cb9 Scrape MDN for latest SVG 2016-03-11 11:08:56 -08:00
Paul O’Shannessy
b7e8b7f239 Stop specifying MUST_USE_ATTRIBUTE again (bring back null) 2016-03-11 11:08:56 -08:00
Paul O’Shannessy
9f4f88b21f Revert "Merge pull request #5714 from gaearon/passthrough-svg-attributes"
This reverts commit 53dabe748c, reversing
changes made to 82fe64a456.
2016-03-11 11:08:56 -08:00
Paul O’Shannessy
2fb74cd1ac Revert "Merge pull request #6184 from gaearon/fix-svg-warning"
This reverts commit 36798f7395, reversing
changes made to b89e7d25d5.
2016-03-11 11:08:56 -08:00
Paul O’Shannessy
e8005bf01a Revert "Merge pull request #6164 from gaearon/fix-svg"
This reverts commit 4bbd8d25e1, reversing
changes made to 56c423afd6.
2016-03-11 11:08:56 -08:00
Paul O’Shannessy
0229f48815 Revert "Merge pull request #5736 from gaearon/document-svg-passthrough"
This reverts commit 713401f2eb, reversing
changes made to 53dabe748c.
2016-03-11 11:08:56 -08:00
Paul O’Shannessy
2326d1af9a Merge pull request #6251 from zpao/docfragfix
Add nodes to DocumentFragments before attaching
2016-03-11 11:05:43 -08:00
Paul O’Shannessy
1f2d9b208d Add nodes to DocumentFragments before attaching 2016-03-11 11:02:34 -08:00
Paul O’Shannessy
6eda7d2b25 Merge pull request #6245 from koba04/fix-test-is-not-a-function
Fix markup.test is not a function
2016-03-10 23:46:26 -08:00
Toru Kobayashi
5e98dceded Fix markup.test is not a function 2016-03-11 16:41:22 +09:00
Paul O’Shannessy
c912a1b367 Merge pull request #6233 from sairion/15rc1-comment-bug
Fix ReactMarkupChecksum.addChecksumToMarkup() adds checksum to comments
2016-03-10 23:36:36 -08:00
Jaeho Lee
f30fb748f8 Fix ReactMarkupChecksum.addChecksumToMarkup() adds checksum to comments
`ReactMarkupChecksum.addChecksumToMarkup()` should not add checksum to
comment markup, which is generated from components returns null. This
fixes #6209.
2016-03-11 16:12:54 +09:00
Edvin Erikson
72f33ce892 added component name to css property warnings 2016-03-11 01:33:53 +01:00
everdimension
28a97dbd74 update to set value property with empty string; add test; update ReactDOMComponent test 2016-03-10 20:48:02 +03:00
Paul O’Shannessy
c52265884a Merge pull request #6224 from koba04/adding-a-warning-for-responder-synthetic-event
Add a warning for adding properties into ResponderSyntheticEvent
2016-03-09 14:06:54 -08:00
Paul O’Shannessy
8c57fd9d31 Fix style= formatting in v15 rc blog post 2016-03-09 10:28:13 -08:00
everdimension
ea15fa31b6 set value property explicitly for "option" element even if value is empty 2016-03-09 19:21:35 +03:00
Anto
0fb1cd61e1 Bug fix for issue 5202 2016-03-09 19:16:20 +05:30
Toru Kobayashi
181db5b1f6 Add a warning for adding properties into ResponderSyntheticEvent
This is a additional work for #5947.
2016-03-09 19:30:24 +09:00
Ben Alpert
f9a08b0e9c Merge pull request #6223 from lelandrichardson/patch-1
[fix] key/ref warnings incorrectly throw on DOM Elements
2016-03-08 20:43:08 -08:00
Jim
2f4a8e9d47 Merge pull request #6095 from yiminghe/fix-async-ref-destruct
fix instance null when involve async destruction
2016-03-08 23:06:31 -05:00
Leland Richardson
f938299765 [fix] key/ref warnings incorrectly throw on DOM Elements 2016-03-08 18:51:06 -08:00
Jim
11b55231c4 Merge pull request #6214 from koba04/patch-6
Fix a mixin name in a blog post
2016-03-08 05:57:03 -08:00
Toru Kobayashi
88e1bb33aa Fix a mixin name in a blog post 2016-03-08 21:56:38 +09:00
rofrischmann
36392534a8 added border-image-outset CSS property to unitless properties
According to
https://drafts.csswg.org/css-backgrounds-3/#border-image-outset it
supports both number and length values.
Always applying ‘px’ might in that case perhaps return unwanted
behavior.
2016-03-08 11:52:47 +01:00
Jim
f6463576ee Merge pull request #6208 from JinxiuLee/patch-2
Missed parentheses for matchMeida parameter
2016-03-07 21:39:57 -08:00
Jinxiu
2a7b50a48e Missed parentheses for matchMeida parameter
https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
2016-03-08 11:23:18 +08:00
Paul O’Shannessy
bb9629476e Merge pull request #6207 from zpao/15rc-blog-post-corrections
Remove a couple old updates from blog post
2016-03-07 18:03:31 -08:00
Paul O’Shannessy
d4371aafcf Remove a couple old updates from blog post 2016-03-07 18:00:00 -08:00
Paul O’Shannessy
e245ed6ba9 v15 rc1 starter kit 2016-03-07 17:09:45 -08:00
Paul O’Shannessy
846fd5fbf0 v15.0 rc1 blog post 2016-03-07 17:09:45 -08:00
Paul O’Shannessy
36796348f2 v15.0.0-rc.1 2016-03-07 17:02:10 -08:00
Paul O’Shannessy
e61e6dd4ed Revert "Change release to multi task"
This reverts commit c77f0b2fc5.
2016-03-07 17:02:10 -08:00
Christopher Chedeau
3d51c7523a Introduce search
Powered by the awesome Algolia :)
2016-03-07 13:15:41 -08:00
Paul O’Shannessy
340b344b20 Merge pull request #6201 from zpao/docs-babel-6
[docs] Upgrade to work with babel 6, fetch remote babel-browser for now
2016-03-07 11:43:26 -08:00
Paul O’Shannessy
dc93efaf11 Merge pull request #6200 from cpojer/master
Update to jest 0.9.0.
2016-03-07 10:46:22 -08:00
Paul O’Shannessy
56f8321559 [docs] Upgrade to work with babel 6, fetch remote babel-browser for now 2016-03-07 10:37:06 -08:00
Paul O’Shannessy
f3738d2cd0 Merge pull request #5781 from ara4n/master
support onLoad synthetic event attribute on 'object' tags
2016-03-06 18:57:37 -08:00
cpojer
626bb81241 Update to jest 0.9.0. 2016-03-06 17:35:53 -08:00
Jim
2b0f730081 Merge pull request #6199 from jquense/patch-4
Reset Jest to use Jasmine1 so tests pass again
2016-03-06 12:49:05 -08:00
Jason Quense
6a5866f286 Reset Jest to use Jasmine1 so Tests pass again
fixes #6198
2016-03-06 15:16:50 -05:00
Paul O’Shannessy
f430c47467 Merge pull request #6185 from zpao/fbjs-upgrade
Upgrade fbjs, fbjs-scripts
2016-03-06 12:12:48 -08:00
Max
7e20243516 Add benchling articles about perf to docs
Temporary solution until new react perf is released.

Ref #6174
2016-03-05 20:23:44 +01:00
Jim
10f9476f3a Merge pull request #6121 from raineroviir/rainer
Fix #6114 - Calling setState inside getChildContext should warn
2016-03-05 08:24:39 -08:00
rainer oviir
9c1916dedb Fix #6114 - Calling setState inside getChildContext should warn 2016-03-04 23:20:29 -08:00
Jim
3b86cb10c4 Merge pull request #6177 from yuanyan/patch-1
Remove dead code.
2016-03-04 22:07:17 -08:00
Paul O’Shannessy
4e2a0d14a9 Upgrade fbjs, fbjs-scripts 2016-03-04 16:07:20 -08:00
Jim
1dc705aa0b Merge pull request #6180 from camjc/master
Update PureRenderMixin docs, adding ES6 example
2016-03-04 16:06:31 -08:00
Cameron Chamberlain
9fff1693f6 Update PureRenderMixin docs, adding ES6 example 2016-03-05 11:04:14 +11:00
Craig Akimoto
6432625c6b [docs] keep position of "Edit on GitHub" link fixed 2016-03-04 15:24:31 -08:00
Paul O’Shannessy
8b22a82162 Merge pull request #6189 from zpao/sythetic-events-fix
Fix issue with SyntheticEvents and Proxies
2016-03-04 14:25:14 -08:00
Paul O’Shannessy
f707ee53e2 Extend the correct object in the SyntheticEvent proxy 2016-03-04 13:59:51 -08:00
Jim
25c2bfcd52 Merge pull request #6183 from jimfb/rec-update
Fixed typo in reconciliation docs.
2016-03-04 13:13:23 -08:00
Dan Abramov
36798f7395 Merge pull request #6184 from gaearon/fix-svg-warning
Warn about deprecated SVG attributes only once
2016-03-04 18:14:35 +00:00
Jim
0ba1073e17 Fixed typo in reconciliation docs. 2016-03-04 10:01:35 -08:00
Dan Abramov
8a9ab75261 Warn about SVG attributes once
This fixes a missing check in #5714
2016-03-04 16:26:49 +00:00
Paul O’Shannessy
b89e7d25d5 Merge pull request #6175 from zpao/eslintrc-fixes
ESLint upgrade & fixes
2016-03-03 10:18:53 -08:00
Paul O’Shannessy
093bb22030 Update lint config, dependencies, fix issues
This also fixes messages from new synthetic events warnings
2016-03-03 10:16:02 -08:00
yuanyan
45a321d686 Remove dead code. 2016-03-03 23:08:47 +08:00
Paul O’Shannessy
b271efb7d3 Convert to .eslintrc.js 2016-03-02 23:52:20 -08:00
Jim
f8046f2dc2 Merge pull request #6172 from mgmcdermott/master
Fixed linting warnings and some mis-spacing in SyntheticEvent warnings
2016-03-02 18:54:27 -08:00
Michael McDermott
18af9bc91e Fixed some linting warnings and some mis-spacing in SyntheticEvent warnings. 2016-03-02 18:40:23 -05:00
Jim
09666ad486 Merge pull request #6159 from mxstbr/move-jsx-comment
Move no-jsx note in ReactElement tests
2016-03-02 11:00:20 -08:00
Dan Abramov
4bbd8d25e1 Merge pull request #6164 from gaearon/fix-svg
Don't set children attribute on SVG nodes
2016-03-02 11:02:50 +00:00
Dan Abramov
5eab1bbe29 Don't interpret reserved props as attributes for SVG elements
This fixes a bug introduced in #5714.
The code paths are now similar to web components where we worked around the same issue in #5093.

Additionally, we also skip dangerouslySetInnerHTML and suppressContentEditableWarning.
2016-03-02 02:48:57 +00:00
Max
32b0c62214 Copy and paste no-jsx note from top of file to places where it's used
Closes #6157
2016-03-01 20:06:20 +01:00
Jim
56c423afd6 Merge pull request #6152 from jimfb/fix-blog-code-fragment
Updated code fragment for correctness.
2016-02-29 21:03:18 -08:00
Paul O’Shannessy
4da7e7ef9c Merge pull request #6151 from zpao/docs-external-sidebar-followup
Docs external sidebar followup
2016-02-29 19:28:30 -08:00
jim
aec8a9b4fe Updated code fragment for correctness. 2016-02-29 17:52:43 -08:00
Paul O’Shannessy
e0442f6915 Add redirect layout (again) and use it 2016-02-29 16:48:09 -08:00
Paul O’Shannessy
ab6041bad6 Don't add class="" if we don't need to 2016-02-29 16:30:03 -08:00
Jim
8f2b7d8e71 Merge pull request #6090 from joecritch/docs-external-link-icon
[Docs] Added icon for external links in nav
2016-02-29 15:19:25 -08:00
Paul O’Shannessy
a026b35626 Merge pull request #6140 from NogsMPLS/removeBabelBrowser
[Docs] Remove babel-browser link
2016-02-29 10:03:21 -08:00
Paul O’Shannessy
730e5ac2e6 Merge pull request #6132 from chicoxyzzy/use_object_is_in_oneof_validate_method
Using Object.is implementation when compare values inside React.PropTypes.oneOf
2016-02-29 09:59:09 -08:00
chico
03925f4f06 Using Object.is implementation when compare values inside React.PropTypes.oneOf 2016-02-29 18:46:19 +03:00
Jim
4045747af6 Merge pull request #6141 from wikinee/master
Update 10.2-form-input-binding-sugar.zh-CN.md
2016-02-29 04:56:44 -08:00
Nee
132a291747 Update 10.2-form-input-binding-sugar.zh-CN.md
translation other English Party to Chinese.
2016-02-29 17:28:47 +08:00
Ben Alpert
96eb7ffdda Merge pull request #6139 from mxstbr/fix-rendertostaticmarkup-invariant
Fix renderToStaticMarkup() invariant
2016-02-28 22:27:02 -08:00
Nathan Smith
7dc8910373 remove babel-browser link 2016-02-28 18:03:05 -06:00
Max
4d1bfcc8e1 Fix renderToStaticMarkup invariant 2016-02-28 22:33:23 +01:00
Paul O’Shannessy
5696ccfcd7 Merge pull request #6005 from milesj/synthetic-transition
Added support for synthetic animation/transition events.
2016-02-28 11:09:30 -08:00
Paul O’Shannessy
adc9104d84 Merge pull request #6133 from stevenvachon/patch-1
support standard "cssFloat" css property
2016-02-28 10:59:49 -08:00
Steven Vachon
f68325f5d7 support standard "cssFloat" css property
For tools that compile CSS may have already converted the name.

More info:
https://npmjs.com/camelcase-css
https://npmjs.com/postcss-js
2016-02-27 01:13:15 -05:00
Paul O’Shannessy
5bb4303f9d Merge pull request #6113 from kittens/babel-6
Update to Babel 6
2016-02-26 18:36:55 -08:00
Sebastian McKenzie
1365498b81 Update to Babel 6 2016-02-26 16:49:32 -08:00
Dan Abramov
4c804361e0 Fix the lint issue introduced in #6129 2016-02-26 21:57:16 +00:00
Dan Abramov
1e5bb2e9e4 Merge pull request #6129 from gaearon/syranide-lessvpm
Disable ViewportMetrics unless MouseEvent lacks support for pageX/pageY
2016-02-26 20:56:38 +00:00
Andreas Svensson
471b4af2c8 Disable ViewportMetrics unless MouseEvent lacks support for pageX/pageY 2016-02-26 20:35:48 +00:00
Jim
13871886ba Merge pull request #6127 from jimfb/LinkedInput-to-packages
Moved LinkedInput from addons to packages.
2016-02-26 11:02:52 -08:00
Dan Abramov
92530b4ddc Merge pull request #6068 from gaearon/react-instrumentation
Add ReactInstrumentation
2016-02-26 17:18:19 +00:00
Ben Alpert
74070e5838 Merge pull request #6082 from spicyj/nq-set-props
Remove unused enqueueSetProps methods
2016-02-26 00:39:48 -08:00
Ben Alpert
5b13cbc0e8 Merge pull request #5877 from spicyj/mount-class-error
Clarify error when passing class to render()
2016-02-26 00:26:11 -08:00
Ben Alpert
895fab782b Clarify error when passing class to render() 2016-02-26 00:26:02 -08:00
Miles Johnson
260353e977 Added support for synthetic animation/transition events. 2016-02-25 23:52:32 -08:00
jim
8ab15c1d84 Moved LinkedInput from addons to packages. 2016-02-25 17:49:35 -08:00
Paul O’Shannessy
e2866ae412 Merge pull request #6123 from changhw01/patch-1
Clarify a step in the quick start
2016-02-25 14:52:25 -08:00
Huang-Wei Chang
040e94b7f5 Clarify a step in the quick start
I propose to add a sentence to indicate the page is ready, and the next step (Separate File) is optional. IMMO, the quick-start guide should be really short so that readers can see the result asap. Furthermore, the "Separate File" might not work for readers using Chrome anyway.
2016-02-25 13:17:07 -08:00
yiminghe
df095c005f fix instance null when involve async destruction 2016-02-25 15:42:03 +08:00
Jim
dff05beeff Merge pull request #5947 from koba04/add-warning-for-adding-synthetic-event-property
Add a warning for adding a property in the SyntheticEvent object
2016-02-24 13:30:49 -08:00
Jim
7a3009c2b4 Merge pull request #6112 from mxstbr/surpressContentEditableWarning
Add suppressContentEditableWarning
2016-02-24 13:02:12 -08:00
Max
f7276b304c Add suppressContentEditableWarning
See #5837
2016-02-24 20:41:07 +01:00
Jim
308badbc03 Merge pull request #6094 from AprilArcus/cite-attribute
add "cite" attribute to whitelist for <blockquote> elements
2016-02-24 11:15:37 -08:00
April Arcus
39c597f523 add "cite" attribute to whitelist for <blockquote> elements (fixes #6084) 2016-02-22 20:58:17 -08:00
Joe Critchley
8886cee285 Added icon for external links in Docs nav and unlinked Complementary Tools and Examples in favor of this icon 2016-02-23 02:18:20 +00:00
Jim
de09e0acd8 Merge pull request #6092 from dpercy/patch-2
Fix inverted definition of Controlled component
2016-02-22 15:59:20 -08:00
David Percy
8011112cc1 Fix inverted definition of Controlled component 2016-02-22 18:45:36 -05:00
Jim
fb75341769 Merge pull request #6085 from srph/patch-1
Add ReactLink deprecation notice
2016-02-22 14:49:01 -08:00
Paul O’Shannessy
5652c710c0 Merge pull request #6089 from chromakey/bb-fix-htmltojsx-script-link
Fix script source HTTPS error in html-jsx.md doc
2016-02-22 14:37:26 -08:00
Bill Blanchard
6ec8f078f1 Change script src for htmltojsx.min.js to referral target to fix https error 2016-02-22 16:20:23 -05:00
Kier Borromeo
01b3196896 Add deprecation notice. 2016-02-23 01:24:23 +08:00
Jim
5ebb784be5 Merge pull request #6071 from nakazye/fix_highlight
fix sample code highlight
2016-02-22 07:08:54 -08:00
nakazye
ccfd1ffb30 Replace the code sample in all the languages.
Replace the code sample in all the languages.

But I leave below sample code because of wording relation.

* tutorial6:see 25ef456
* from tutorial16:see 3812b95
2016-02-23 00:05:26 +09:00
Ben Alpert
cf4255445e Remove unused enqueueSetProps methods 2016-02-21 14:30:23 -08:00
Jim
70b5eda83e Merge pull request #5997 from truongduy134/clone-element
Fix #5929. Resolve to default props when config key is set to undefined in cloneElement
2016-02-19 14:53:38 -08:00
Sebastian Markbåge
dcc86b63dc Merge pull request #6074 from sebmarkbage/versionpost
Clarify what the current version scheme is
2016-02-19 12:02:57 -08:00
Sebastian Markbage
a080d863c5 Clarify what the current version scheme is
In case you don't remember what version we're currently on.

Also, clarify that this is semver and that v1.0 comes with preconceived
notions.
2016-02-19 12:02:26 -08:00
Ben Alpert
628a16c84d Hashrockets 2016-02-19 11:39:42 -08:00
Sebastian Markbåge
b3335f371f Merge pull request #6073 from sebmarkbage/versionpost
Versioning Blog Post
2016-02-19 11:34:01 -08:00
Sebastian Markbage
559fed7988 Versioning Blog Post 2016-02-19 11:31:01 -08:00
Ben Alpert
98d3327a5d Merge pull request #6070 from spicyj/server-text
Fix build for useCreateElement: false, run Travis
2016-02-19 09:48:37 -08:00
Ben Alpert
81e5dd0a29 Fix build for useCreateElement: false, run Travis
It's important that we keep these code paths working because they're the only comprehensive test of adopting server-rendered HTML that we have right now. This is terrible and hacky but I am hopeful that it will at least catch stuff.
2016-02-19 09:48:06 -08:00
Ben Alpert
e8fb8c7870 Fix text component rendering with server markup
These weren't caught by CI in #5753 because we don't automatically test that yet... fixing that next.
2016-02-19 09:48:05 -08:00
Dan Abramov
3863330524 Add ReactInstrumentation
This adds `ReactInstrumentation` for the isomorphic package that uses the same approach as `ReactDOMInstrumentation`. Currently it is gated behind `__DEV__` but we will likely change this later to a runtime flag determined by whether there are any active listeners.

The first few events we add here should be sufficient for React DevTools, as determined by the `hook.emit()` calls in d90c432016/backend/attachRenderer.js.

These events will also be useful for reconstructing the parent tree in the ReactPerf rewrite in #6046.
2016-02-18 22:52:22 +00:00
Ben Alpert
684ef3e320 Merge pull request #5753 from mwiencek/no-text-span-2
Don't wrap text in <span> elements
2016-02-18 12:02:17 -08:00
Paul O’Shannessy
f818fa38b4 [docs] Use consistent formatting for headers 2016-02-18 11:53:47 -08:00
Michael Wiencek
203850013a Don't wrap text in <span> elements
Instead, use opening and closing comment nodes to delimit text data.
2016-02-18 13:49:14 -06:00
Jim
5d7cd93b0e Merge pull request #6064 from jimfb/provide-msunsafe-wrapper
Create ms-unsafe functions in one place, simplifies code.
2016-02-18 11:14:47 -08:00
Jim
efa8624eb9 Merge pull request #6059 from jimfb/tutorial-children-callback
Clearify callback text in the tutorial
2016-02-18 11:14:24 -08:00
Toru Kobayashi
decff26e81 Add a warning for adding some properties in the SyntheticEvent object if Proxy is supported 2016-02-18 19:26:32 +09:00
Jim
6454bfb9de Merge pull request #6065 from benjycui/fix-comments
Update comments for EventPluginHub.js
2016-02-18 00:31:50 -08:00
Benjy Cui
c54249c868 Update comments for EventPluginHub.js 2016-02-18 16:23:00 +08:00
Jim
e8e56e8723 Merge pull request #5940 from kentcdodds/pr/warn-event-pool-access
Add warning when reading from event which has been returned to the pool
2016-02-17 21:51:40 -08:00
Kent C. Dodds
6312852688 warn(SyntheticEvent): Warn when accessing or setting properties on released syntheticEvents
Closes #5939
2016-02-17 22:46:12 -07:00
jim
51d16473b0 Create ms-unsafe functions in one place, simplifies code. 2016-02-17 21:10:20 -08:00
Jim
5879c9e1a4 Merge pull request #6063 from Andrew8xx8/master
Wrap insertBefore in Windows 8 apps
2016-02-17 20:28:27 -08:00
Andreww8xx8
8d08f3f00a Wrap insertBefore in Windows 8 apps 2016-02-18 06:12:29 +03:00
Ben Alpert
3a4e1dbb5b Fix merge conflict in #4940 2016-02-17 17:20:37 -08:00
jim
5ffd1db570 Clearify callback text in the tutorial 2016-02-17 16:30:11 -08:00
Ben Alpert
62e9531023 Merge pull request #4940 from spicyj/no-construct
Remove "construct" call except on composites
2016-02-17 15:53:25 -08:00
Ben Alpert
acb49363d5 Remove "construct" call except on composites
This is a little simpler (and a teeny tiny bit faster). The one in ReactCompositeComponent stays because of the way we create ReactCompositeComponentWrapper inside instantiateReactComponent.
2016-02-17 15:48:24 -08:00
Jim
c9e0fc766f Merge pull request #5720 from edmellum/master
Fix #4963 - SVG <use> swallows click events
2016-02-17 07:01:50 -08:00
David Ed Mellum
2fdaba49c7 Fix #4963 - SVG <use> swallows click events 2016-02-17 15:25:45 +01:00
Christoph Pojer
50c28fa9c4 Merge pull request #6052 from cpojer/master
Update to jest-cli 0.9.
2016-02-17 15:44:28 +09:00
cpojer
383e2f938d Update to jest-cli 0.9. 2016-02-17 13:01:14 +09:00
Jim
73ad44567c Merge pull request #6039 from mxstbr/convert-docs-to-stateless
Update documentation to stateless components
2016-02-16 12:25:39 -08:00
Jim
356fa4e8c0 Merge pull request #6048 from mxstbr/update-tutorial-versions
Update jQuery and marked versions in tutorial docs
2016-02-16 12:10:06 -08:00
Max
d26ec08cf1 Update jQuery and marked versions in tutorial 2016-02-16 12:07:03 -08:00
Paul O’Shannessy
41dea65abf Merge pull request #6017 from zpao/docs-sri-task
Generate SRI hashes for docs
2016-02-16 11:50:31 -08:00
Jim
3bee2d962a Merge pull request #5744 from prometheansacrifice/warn-if-user-accesses-key-ref-props
Warns on access of `props.key` and `props.ref`
2016-02-16 10:11:28 -08:00
Manas
c3980a6d08 Warns on access of props.key and props.ref 2016-02-16 22:04:32 +05:30
Jim
ee64241e90 Merge pull request #6044 from bellanchor/master
Fix typo in Chinese tutorial
2016-02-16 03:11:34 -08:00
liudongsheng
5b80f9009f Fix typo in Chinese tutorial 2016-02-16 18:24:07 +08:00
Max
ec41af0557 Update documentation to stateless components
Ref #5949 @jimfb
2016-02-15 10:24:04 -08:00
Jim
2410dc7f15 Merge pull request #6028 from sambev/issue/6027-uncaught-type-error
Fix for issue/6027.
2016-02-13 13:19:11 -08:00
Sam Beveridge
57d59ea344 Remove check for _wrapperState.pendingUpdate.
We can just set it to true regardless.
2016-02-13 12:01:49 -07:00
Paul O’Shannessy
8aacf1e850 Merge pull request #6032 from saiichihashimoto/allow-profile-attr
Allow Profile attr
2016-02-13 09:26:20 -08:00
Paul O’Shannessy
175d0978cc Merge pull request #6031 from jontewks/update-docs
Add npm install instructions to readme
2016-02-13 09:24:04 -08:00
Saiichi Hashimoto
0b87d7f56f Update HTMLDOMPropertyConfig.js 2016-02-13 00:42:47 -08:00
Jon Tewksbury
17c9dffed4 Add npm install instructions to readme 2016-02-12 23:20:52 -08:00
Jim
d684b1598d Merge pull request #5864 from TheBlasfem/master
Warn when an input switches between controlled and uncontrolled
2016-02-12 16:34:55 -08:00
Ben Alpert
b3eaab9f75 Merge pull request #6030 from facebook/vjeux-patch-1
Add thanks for the react org
2016-02-12 15:00:27 -08:00
Christopher Chedeau
5ce1fea75a Add thanks for the react org 2016-02-12 14:50:37 -08:00
Sam Beveridge
385cadf8e3 Forgot to 'not' the pendingUpdate condition. 2016-02-12 14:32:47 -07:00
Sam Beveridge
c4a2425eca Fix for issue/6027.
ReactDOMSelect's _handleChange function tries to set
this._wrapperState.pendingUpdate = true after executing the onChange
function. However, if the select was removed as a result of said
fuction, this._wrapperState would be null. Resulting in an
Uncaught TypeError: Cannot set property 'pendingUpdate' of null.
2016-02-12 14:00:15 -07:00
Jim
bbd5a78efa Merge pull request #6009 from jimfb/error-boundaries-initial-render-componentWillUnmount
Errors in componentWillUnmount should be caught by error boundary on initial render.
2016-02-11 18:11:35 -08:00
jim
dd390b3e36 Errors in componentWillUnmount should be caught by error boundary on initial render. 2016-02-11 17:44:35 -08:00
Jim
293dc75584 Merge pull request #6008 from jimfb/module-pattern
Enable module pattern.
2016-02-11 17:26:46 -08:00
jim
428ef03bbb Enable module pattern. 2016-02-11 12:59:25 -08:00
Ben Alpert
3e41da767f Merge pull request #5892 from ianobermiller/children-map-key-slash
ReactChildren.map: only add slash if new child has key
2016-02-10 16:53:59 -08:00
Paul O’Shannessy
b560fea08d Merge pull request #5909 from rajatsehgal/patch-1
Use const instead of var (ES6 best practices)
2016-02-10 13:32:21 -08:00
Paul O’Shannessy
e5b304ebe3 Merge pull request #6016 from zpao/rm-batched-updates-addons
Remove React.addons.batchedUpdates
2016-02-10 12:23:55 -08:00
Paul O’Shannessy
fcfbcf79a0 [docs] Reformat script tags on download page 2016-02-10 12:13:01 -08:00
Paul O’Shannessy
3ce7e91946 [docs] Automate SRI hash generation with rake task 2016-02-10 12:11:45 -08:00
Paul O’Shannessy
bd3979980f Merge pull request #6004 from TheBlasfem/sri-links
Included SRI hashes for fb.me links on download page
2016-02-10 11:40:08 -08:00
Paul O’Shannessy
6fe495a5ab Remove React.addons.batchedUpdates 2016-02-10 11:20:50 -08:00
Julio Lopez
0509950e74 Included SRI hashes for fb.me links on download page 2016-02-08 22:40:57 -05:00
Nguyen Truong Duy
48ded230fc Resolve default prop values in cloneElement
In cloneElement, when key in input config is set to undefined, the associated
prop value should be resolved to default prop values
2016-02-09 09:02:07 +07:00
Paul O’Shannessy
4a1b0b7dfa Merge pull request #5977 from jfairbank/remove-new-call
Remove instance of invoking ReactElement with new operator
2016-02-08 14:14:50 -08:00
Paul O’Shannessy
9d22ce8440 Merge pull request #6000 from shinnn/process
Do not get `process` object by using `require`
2016-02-08 11:33:15 -08:00
Paul O’Shannessy
08c7b1aa40 Update jsdelivr url 2016-02-08 11:26:46 -08:00
Jim
1e85460909 Merge pull request #5999 from shinnn/https
Use HTTPS protocol for jsdelivr.com URL
2016-02-08 10:22:57 -08:00
Shinnosuke Watanabe
38bf3583cb Do not get process object by using require
Because `process` object is globally available in Node.js.
2016-02-09 01:41:24 +09:00
Shinnosuke Watanabe
a90344a9c1 Use HTTPS protocol for jsdelivr.com URL 2016-02-09 01:00:51 +09:00
Jim
725a723e27 Merge pull request #5992 from pra85/patch-1
[docs] Fix typo in blog
2016-02-05 22:00:54 -08:00
Prayag Verma
e4b463f921 [docs] Fix typo in blog
Found a spelling mistake -
writting > writing
2016-02-06 11:21:40 +05:30
Paul O’Shannessy
886044312c Merge pull request #5986 from zpao/fix-lint
Fix lint
2016-02-05 10:57:57 -08:00
Paul O’Shannessy
a1dab9edbf Fix lint
- Upgrade babel-eslint
- Ignore coverage
- Fix actual lint warning
2016-02-05 10:56:51 -08:00
Jim
81e41ae1b1 Merge pull request #5982 from jimfb/error-boundaries-composite-unmount
Error boundries should not unmount composite components which were not mounted.
2016-02-04 17:20:09 -08:00
jim
86305fba41 Error boundries should not unmount composite components which were not mounted. 2016-02-04 17:10:18 -08:00
Jim
220b4b6b50 Merge pull request #4437 from gajus/patch-1
Improve definition of the controlled and uncontrolled input
2016-02-04 08:34:30 -08:00
Julio Lopez
b38b39a696 warn when an input switches between controlled and uncontrolled
added controlled key to DEV

warn for checkbox inputs

warn for radio inputs

compute controlled instead of value

displaying owner name in warning

displaying input type in warnings
2016-02-04 09:31:41 -05:00
Gajus Kuizinas
97e0fe5d91 Improve definition of the controlled and uncontrolled input. 2016-02-04 12:02:53 +00:00
Jeremy Fairbank
dbb54b1990 Remove instance of invoking ReactElement with new operator 2016-02-03 21:03:32 -05:00
Jim
f2bb01506a Merge pull request #5965 from karczk/issue-5957
Fix for #5957: Bug on resolving default props (HTMLAllCollection)
2016-02-03 14:39:11 -08:00
karczk
ef2b1f26ef Unnecessary type comparisons have been changed to value comparison 2016-02-02 19:35:58 +01:00
krystian.karczewski
8c7d743361 Fix for #5957: Bug on resolving default props (HTMLAllCollection) 2016-02-02 11:51:31 +01:00
Jim
292f2b7608 Merge pull request #5961 from MarkMurphy/issue-5959
Fixes #5959 - jquery-bootstrap example uses handleHidden which does not exist
2016-02-01 22:06:01 -08:00
Mark Murphy
0bd65aa028 Fixes #5959 - jquery-bootstrap example uses which does not exist
1. Add a handleHidden method to the BootstrapModal component.
2. Add an event listener for 'hidden.bs.modal' on the modal root
3. Add a new onHidden prop to the BootstrapModal component.
4. Add a new 'handleModalDidClose' method to the Example component to be used as the onHidden prop of it's modal component.
2016-02-01 21:54:56 -04:00
Jim
2981bef075 Merge pull request #5953 from davidvgalbraith/dont-redundantly-set
test: get rid of 'should be 1' comment
2016-02-01 13:07:46 -08:00
Dave
1beae0c4ff test: get rid of 'should be 1' comment
This should not be 1, since boolean properties always get set.
2016-02-01 12:53:25 -08:00
Jim
823966ef33 Merge pull request #5955 from pekeq/patch-docs-1
Add note in "Fetching from the server" section.
2016-02-01 11:54:27 -08:00
Hideo Matsumoto
d136d28f55 Add note in "Fetching from the server" section. 2016-02-01 23:19:08 +09:00
Jim
1ccec8b711 Merge pull request #5946 from tjfryan/fix-docs-css
Fixes highlight issue for code blocks with overflow (css)
2016-01-29 17:33:44 -08:00
John Ryan
cded0c5c23 Fixes highlight issue for code blocks with overflow 2016-01-29 16:46:16 -08:00
Jim
188e8cde2f Merge pull request #5884 from jimfb/component-extends-react-component
Enable null return values in plain functions
2016-01-29 15:05:08 -08:00
Jim
9d5825cf4b Merge pull request #3372 from jonhester/void-elements
ReactDOMComponent should throw error when provided children for void elements
2016-01-29 13:27:35 -08:00
Jim
67e1291ef7 Merge pull request #1510 from syranide/propattr
Use removeAttribute to forcefully remove properties from the DOM
2016-01-29 12:48:25 -08:00
Rajat Sehgal
a0c32cb629 Use const instead of var (ES6 best practices) 2016-01-29 00:47:43 -05:00
Paul O’Shannessy
9c3f595597 Merge pull request #5923 from puppybits/patch-1
Update 12-context.md
2016-01-28 20:06:09 -08:00
Bobby
6986fdd6bd Update 12-context.md
Context was missing info on how to update the context after the initial render. Added a simple blurb and an example.

[Docs] 12-context.md code review changes
2016-01-28 16:47:56 -08:00
Scott Feeney
c569b329e9 Update website for 0.14.7
(cherry picked from commit e48343bd03)
2016-01-28 12:28:25 -08:00
Scott Feeney
6ecf06ce60 Update CHANGELOG.md and README.md
(cherry picked from commit 741124548d)
2016-01-28 12:28:18 -08:00
Paul O’Shannessy
e9636b1f6a Merge pull request #5903 from zpao/rm-build-deps
Clean up ununsed devDeps
2016-01-28 10:29:03 -08:00
Paul O’Shannessy
4b2b7b0d3e Merge pull request #5911 from Mathieuu/patch-1
Fix broken guide example in "Motivation: Separation of Concerns"
2016-01-28 10:22:33 -08:00
Paul O’Shannessy
fc547e8380 Merge pull request #5928 from scjody/patch-1
Add a link to the list of supported events
2016-01-27 15:47:57 -08:00
Jody McIntyre
01f10eb7ba Add a link to the list of supported events 2016-01-27 18:09:47 -05:00
Paul O’Shannessy
ed40119db8 Merge pull request #5922 from zpao/package-empty-deps
Add empty dependencies for packages
2016-01-27 11:05:21 -08:00
Paul O’Shannessy
a92bc51e0a Add empty dependencies for packages
This ensures that broken npm versions won't crash when doing install --production
2016-01-26 08:37:30 -08:00
Paul O’Shannessy
6f5e619fae Merge pull request #5912 from chrisbolin/patch-1
Small copy changes to TestUtils and Perf summaries
2016-01-25 16:09:57 -08:00
Chris Bolin
edaf5b43b4 Small copy changes to TestUtils and Perf summaries 2016-01-25 19:02:21 -05:00
Paul O’Shannessy
ea79138156 Merge pull request #5917 from zeke/homepage-urls
Fix homepage URLs in package.json files
2016-01-25 12:58:32 -08:00
Zeke Sikelianos
0ce28c6e88 fix homepage URLs in package.json files 2016-01-25 14:44:17 -06:00
Mathieu Savy
e1b7c3aa0c Fix broken guide example in "Motivation: Separation of Concerns"
The code example in `Motivation: Separation of Concerns` now fetches the `Engineering` facebook page instead of the user `pwh`.

With the current version of the graph api, it is impossible to fetch the user picture from an username. However it is still doable for public pages.
2016-01-24 17:04:17 -08:00
Paul O’Shannessy
096115c5c9 Merge pull request #5904 from sercaneraslan/master
Overflow problem fixed
2016-01-22 11:30:06 -08:00
Sercan Eraslan
080ff5ad73 Overflow problem fixed 2016-01-22 20:51:15 +02:00
Paul O’Shannessy
7c52b802b4 Clean up ununsed devDeps
Also removed object-assign. We only support building with node v4+ which has Object.assign.
2016-01-22 10:17:30 -08:00
Paul O’Shannessy
4c03bafa4e Merge pull request #5891 from zpao/vendor-semi
Add semicolon for react-dom source files.
2016-01-21 17:06:48 -08:00
Jim
1aa7fd0d24 Merge pull request #5900 from tmysz/ja-doc
Fix mistranslation "never write to this.props."
2016-01-21 10:53:29 -08:00
tmysz
7e779a9d44 Fix mistranslation "never write to this.props." 2016-01-22 01:41:39 +09:00
Paul O’Shannessy
b41f5a1cdf v0.15.0-alpha.1 2016-01-20 20:07:37 -08:00
Ian Obermiller
30f7641873 ReactChildren.map: only add slash if new child has key
See the new test for the scenario I am trying to fix; if you clone an
element in React.cloneElement, vs just returning it directly, you will
get a different key (with a slash in front) even though the two
children are identical.
2016-01-20 19:20:22 -08:00
Ian Obermiller
76da1f8599 Merge remote-tracking branch 'facebook/master' 2016-01-20 14:50:30 -08:00
jim
757756f682 Enable null return values in plain functions 2016-01-20 14:11:41 -08:00
Paul O’Shannessy
e9e70365c3 Add semicolon for react-dom source files. 2016-01-20 13:35:03 -08:00
Jim
af43d06e97 Merge pull request #5887 from natejlee/patch-1
Fixup missing semi-colon
2016-01-20 00:56:29 -08:00
Nate Lee
7f98dc897d Fixup missing semi-colon
an inconsistency with a missing semi-colon on a variable
2016-01-19 21:35:10 -08:00
Ben Alpert
e420edda36 Merge pull request #5886 from goatslacker/cant-dangerouslysetinnerhtml-for-option
Only add children in ReactDOMOption when there are children
2016-01-19 15:12:09 -08:00
Josh Perez
3da6e2889b Only add children when there are children 2016-01-19 14:48:47 -08:00
Jim
7cee5022f8 Merge pull request #5885 from knpwrs/patch-1
Clarify stateless function component optimizations.
2016-01-19 13:50:41 -08:00
Ken Powers
49fa7d139d Clarify stateless function component optimizations.
As discussed on Discord.
2016-01-19 16:46:00 -05:00
Paul O’Shannessy
31d3bfa763 Merge pull request #5811 from jontewks/warn-nan-style
Warn when a style object has NaN for a value
2016-01-18 17:06:19 -08:00
Paul O’Shannessy
ae5ff24da6 Merge pull request #5865 from leeyoungalias/master
update react example basic-jsx-precompile comand line
2016-01-17 19:42:32 -08:00
Jim
c7808cac69 Merge pull request #5872 from SimenB/patch-1
Fix example from #5870 to avoid double rendering
2016-01-17 14:31:27 -08:00
Simen Bekkhus
f5a9a26a43 Fix example from #5870 to avoid double rendering 2016-01-17 23:25:29 +01:00
Jim
e09dfe1e0e Merge pull request #5870 from SimenB/patch-1
Remove the recommendation to use `isMounted` from beginner docs
2016-01-17 12:08:50 -08:00
Simen Bekkhus
1186cb9ab4 Remove the recommendation to use isMounted from beginner docs 2016-01-17 20:53:20 +01:00
Jon Tewksbury
7a6000c093 Add warning for NaN in style object 2016-01-16 11:10:50 -08:00
leeyoungalias
aedfa3011e update react example basic-jsx-precompile comand line on markdown file,new version of babel needed a react presets dependency. 2016-01-16 22:53:24 +08:00
Jim
2f792d5a60 Merge pull request #5859 from jimfb/clonewithprops
Removed cloneWithProps addon.
2016-01-15 17:25:24 -08:00
jim
accd0d874d Removed cloneWithProps addon. 2016-01-15 17:17:36 -08:00
Paul O’Shannessy
422b4e105c Merge pull request #5840 from koba04/release-event-target-on-destructor
Release syntheticEvent.target on the destructor
2016-01-15 16:38:42 -08:00
Paul O’Shannessy
909cba2254 Merge pull request #5724 from iamchenxin/docs122315
Update zh-docs with 4865ddf(v0.14.3+)
2016-01-15 11:18:35 -08:00
iamchenxin
209b7522d9 update zh-docs14.3 ,fixed confliction 2016-01-14 18:38:07 +08:00
Toru Kobayashi
be0551d01e Release syntheticEvent.target on the destructor 2016-01-14 15:09:56 +09:00
Paul O’Shannessy
f1c1544401 Merge pull request #5849 from david0178418/master
Added additional detail to "props-in-getInitialState" anti-pattern doc
2016-01-13 21:32:33 -08:00
David Granado
fb5cd2f7ae Added additional detail to "props-in-getInitialState" anti-pattern doc
While seemingly self-explanatory, this clarifies the reasons props usage in getInitialState might be considered an antipattern.
2016-01-13 23:22:52 -06:00
Jim
fcc63e1fff Merge pull request #5832 from jimfb/cleanup-top-level-dom-api
Remove DOM functions from top-level isomorphic API
2016-01-13 15:41:03 -08:00
Jim
7334fece2c Merge pull request #5718 from jimfb/linked-input
Added LinkedInput addon.
2016-01-13 15:40:46 -08:00
Jim
689efd1abf Merge pull request #5833 from jimfb/remove-getDOMNode
Removed getDOMNode from react classes.
2016-01-13 15:40:12 -08:00
jim
0acdb7b56a Added LinkedInput addon. 2016-01-13 12:29:00 -08:00
Paul O’Shannessy
1da992a0ab Merge pull request #5735 from cody/refs
[docs] Small fixes to "more about refs"
2016-01-12 13:02:27 -08:00
Stefan Dombrowski
ad4e31c312 [docs] Small fixes to "more about refs"
* Add a null check to "A Complete Example".
* Fix outdated comment. (Found by @mjomble)
* Replace short dash - with longer dash –.
* Remove backticks from state, because it is not code.
2016-01-12 19:07:35 +01:00
Ben Alpert
fdd7fabd12 Merge pull request #5728 from spicyj/input-gc
Remove now-unused instancesByReactID in DOMInput
2016-01-12 10:00:43 -08:00
Paul O’Shannessy
9494ec80c2 Merge pull request #5732 from iamchenxin/en-docs
[docs] deleting some unecessary newline
2016-01-12 09:57:32 -08:00
Ben Alpert
dd93eb7f40 Merge pull request #5834 from spicyj/no-ie8
blog post: Discontinuing IE 8 Support in React DOM
2016-01-12 10:27:46 -07:00
Ben Alpert
1b3adff1ca blog post: Discontinuing IE 8 Support in React DOM 2016-01-12 10:27:30 -07:00
Jim
da1fcd0fbf Merge pull request #5836 from koba04/fixup-jsdoc-for-syntheticevent
Fixup jsdoc for SyntheticEvent
2016-01-12 09:11:31 -08:00
Jim
70097ea27c Merge pull request #5826 from jacenko/master
Fixed typo in shouldComponentUpdate.png
2016-01-12 08:45:38 -08:00
Toru Kobayashi
6f976dfbbe Fixup jsdoc for SyntheticEvent 2016-01-13 00:52:59 +09:00
jim
2e1fb4b529 Remove DOM functions from top-level isomorphic API 2016-01-11 23:57:08 -08:00
jim
e8af100849 Removed getDOMNode from react classes. 2016-01-11 23:32:22 -08:00
Ben Alpert
ee03c19b3b Remove references to IE 8 in docs 2016-01-11 23:32:29 -07:00
Paul O’Shannessy
b60e8c255d Merge pull request #5829 from zpao/style-followup
Fixup style for long lines
2016-01-11 20:55:56 -08:00
Paul O’Shannessy
26f53de4a6 Fixup style for long lines 2016-01-11 17:27:37 -08:00
Jim
171305f7e2 Merge pull request #5823 from mgmcdermott/master
Warn when value and defaultValue props are both specified on input or textarea.
2016-01-11 15:33:43 -08:00
Michael McDermott
f2b62e9d90 Warn when both value and defaultValue or both check and defaultChecked props are specified on input, textarea, or select elements 2016-01-11 18:09:37 -05:00
Deniss Jacenko
d51a1d4ec1 Fixed typo in shouldComponentUpdate.png
Reconciiation -> Reconciliation
2016-01-11 17:29:40 -05:00
Paul O’Shannessy
f7850dd3d7 Merge pull request #5686 from vitorbal/master
Improve documentation for using React with Webpack
2016-01-11 12:25:26 -08:00
Paul O’Shannessy
67e85df1fa Merge pull request #5814 from zpao/docs-update-attrs-0.14.6
[docs] Updated supported attrs
2016-01-11 10:37:33 -08:00
Andreas Svensson
77a137adf9 Use removeAttribute to forcefully remove properties from the DOM, drop MUST_USE_ATTRIBUTE and manage all regular properties as attributes instead 2016-01-09 11:55:56 +01:00
Jim
ea0ac61945 Merge pull request #5813 from graue/tips-unneeded-finddomnode
[docs] remove unnecessary findDOMNode from example
2016-01-08 20:30:25 -08:00
Paul O’Shannessy
708e1b3f03 Sort attrs in HTMLDOMPropertyConfig 2016-01-08 17:23:25 -08:00
Scott Feeney
0c6b909322 [docs] remove unnecessary findDOMNode from example
This call is not needed anymore due to https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#dom-node-refs
2016-01-08 17:19:28 -08:00
Paul O’Shannessy
3574e60867 [docs] Updated supported attrs 2016-01-08 17:17:59 -08:00
Jim
23167f287e Merge pull request #5806 from Zhangjd/master
Update thinking-in-react.zh-CN.md
2016-01-08 10:03:47 -08:00
Zhangjd
a3ec1c34d6 Update thinking-in-react.zh-CN.md 2016-01-08 17:58:23 +08:00
Jim
a1584053cc Merge pull request #5790 from jimfb/componentWillReceiveProps-blogPost
Blog post explains to verify prop mutations in componentWillReceiveProps
2016-01-07 16:21:03 -08:00
Paul O’Shannessy
31fc7fd627 Merge pull request #5801 from zpao/docs-bigger-embeds
[docs] Bigger jsfiddle embeds
2016-01-07 15:08:57 -08:00
Paul O’Shannessy
c3cea365e7 [docs] Bigger jsfiddle embeds 2016-01-07 11:44:25 -08:00
jim
70938de9ae Blog post explains to verify prop mutations in componentWillReceiveProps 2016-01-07 11:11:54 -08:00
Paul O’Shannessy
a7f7ef6ac3 Update website for 0.14.6
(cherry picked from commit d5bf8c553f)
2016-01-07 10:11:21 -08:00
Paul O’Shannessy
5597873d7c Changelog & Readme for v0.14.6
(cherry picked from commit 06cad05d49)
(cherry picked from commit 44e90c040d)
2016-01-07 10:10:38 -08:00
Paul O’Shannessy
19db8e13bc Upgrade to fbjs@^0.6.1
(cherry picked from commit f305deb065)
2016-01-07 10:10:14 -08:00
Jim
78be6f45cc Merge pull request #5799 from gmcquistin/patch-1
[docs] Fix typo in ref-08-reconciliation.md
2016-01-07 09:13:32 -08:00
Gavin McQuistin
d3e315193a Fix typo in ref-08-reconciliation.md 2016-01-07 14:40:44 +00:00
Jim
9b679ab56a Merge pull request #5787 from milesj/receive-props-context-fix
Trigger componentWillReceiveProps when context changes
2016-01-06 15:54:38 -08:00
Miles Johnson
f4c5b2c00b Updated ReactCompositeComponent to trigger componentWillReceiveProps when either props or context change. Fixes issue #5756 2016-01-06 15:49:47 -08:00
Jim
2751e8179d Merge pull request #5784 from jimfb/getNativeNode
Add getNativeNode back, so we can get the native node when performing reorderings (instead of relyin
2016-01-05 15:32:24 -08:00
jim
4e3d38ed27 Removed note explaining why the logic is there, since the justification is now different. 2016-01-05 15:30:00 -08:00
Ben Alpert
0e8db6ba42 Merge pull request #5782 from spicyj/img
Move nodes around by reference instead of by index
2016-01-05 15:13:25 -08:00
Ben Alpert
eb00290673 Remove now-unused prepareToManageChildren
This was a temporary hook needed for the DOM implementation. We no longer need it because we now necessarily load every node into cache (via calling getNativeNode on it) before manipulating any of its siblings.
2016-01-05 15:08:42 -08:00
Ben Alpert
27926572f6 Move nodes around by reference instead of by index
This makes things easier if we ever want to use more than one DOM node for a component. Notably, this is more convenient if we want to remove the wrappers around text components (since text nodes can be split and joined however a browser feels like) or if we want to support returning more than one element from render (#2127).

I left the old indexes so that implementations aren't forced to use the node/image if they prefer indices, because I'm not sure yet whether the changes corresponding to my rewrite of DOMChildrenOperations are easy or hard yet in React Native. (The tests pass with and without the DOMChildrenOperations changes here.)
2016-01-05 15:08:42 -08:00
Ben Alpert
0ebc7b60e1 Revert "Merge pull request #5689 from jimfb/cleanup-5151"
This reverts commit 067547c1d1, reversing
changes made to 102cd29189.
2016-01-05 15:08:15 -08:00
Jim
067547c1d1 Merge pull request #5689 from jimfb/cleanup-5151
Get rid of getNativeNode()
2016-01-05 14:42:05 -08:00
Matthew Hodgson
7f322b5a46 support onLoad synthetic event attribute on 'object' tags - useful for telling when SVGs embedded as objects have loaded 2016-01-05 02:28:25 +00:00
Jim
102cd29189 Merge pull request #5775 from facebook/fix-checkbox-wording
Fix wording to make it more clear that checkbox (input) supports defaultChecked
2016-01-04 13:34:20 -08:00
Jim
a8c2c80fdc Fix wording to make it more clear that checkbox (input) supports defaultChecked
Fix some confusion about why `input` would support `defaultChecked` (it's because you can have an input of type checkbox).  This has come up a couple of times (https://github.com/facebook/react/pull/5633, https://github.com/facebook/react/pull/5774) but both those PRs were wrong and it was just easier to fix it myself.
2016-01-04 13:19:22 -08:00
Paul O’Shannessy
bdcb69f43d Merge pull request #5767 from yhagio/patch-2
Update 10.4-test-utils.md
2016-01-03 13:45:26 -08:00
Yuichi Hagio
c035179ef8 Update 10.4-test-utils.md
Added `var renderer = ReactTestUtils.createRenderer();` (Line 235) to clarify where `renderer` (Line 236) comes from.
2016-01-01 23:15:37 -05:00
Paul O’Shannessy
3b96650e39 Merge pull request #5748 from rickbeerendonk/year-agnostic-copyright
Year-agnostic copyright message, like React Native uses, to prevent the need for yearly changes.
2015-12-29 23:24:24 -08:00
Ben Alpert
2a042a3060 Website for 0.14.5
(cherry picked from commit fb6b3b05f4)
2015-12-29 14:43:30 -08:00
Ben Alpert
e15e059d73 Readme for 0.14.5
(cherry picked from commit d6a0a083e4)
2015-12-29 14:43:30 -08:00
Ben Alpert
dd2dbd0a5c Changelog for 0.14.5
(cherry picked from commit e7b178390d)
2015-12-29 14:43:30 -08:00
Ben Alpert
6dc7f13343 Upgrade fbjs to 0.6 in npm package too
(cherry picked from commit a9732ba548)
2015-12-29 14:43:30 -08:00
Ben Alpert
2a64098271 0.14.4 blog post 2015-12-29 14:19:18 -08:00
Ben Alpert
7cc6738061 Update a few changelog things forgotten in 3f355d99
(cherry picked from commit 0d5d0b2688)
2015-12-29 14:11:45 -08:00
Ben Alpert
8f720f8cd9 update website for 0.14.4
(cherry picked from commit c8398491d8)
2015-12-29 14:11:45 -08:00
Ben Alpert
a58cde6c79 Update readme for 0.14.4
(cherry picked from commit 0516e74473)
2015-12-29 14:11:45 -08:00
Ben Alpert
53920e7c38 Changelog for 0.14.4
(cherry picked from commit 3f355d99c5)
2015-12-29 14:11:45 -08:00
Ben Alpert
99dc2a73f6 Upgrade fbjs to 0.6
(counterpart to a29b4938a8)
2015-12-29 14:11:33 -08:00
Ben Alpert
62c9d999be Merge pull request #5749 from spicyj/lib-native
Add shim files for RN in npm package
2015-12-29 13:34:55 -08:00
Ben Alpert
c29642d6ed Add shim files for RN in npm package 2015-12-29 12:14:22 -08:00
Rick Beerendonk
bef45b0b1a Year-agnostic copyright message, like React Native uses, to prevent the need for yearly changes. 2015-12-29 20:20:32 +01:00
Paul O’Shannessy
51295bf7d0 Merge pull request #5741 from mziwisky/patch-1
Remove extraneous comment
2015-12-29 00:21:24 -08:00
Michael Ziwisky
a0d6a98cbf Remove extraneous comment
This little guy should have been removed in 6bd6ef208b
2015-12-28 19:28:41 -06:00
Dan Abramov
713401f2eb Merge pull request #5736 from gaearon/document-svg-passthrough
Document changes in #5714
2015-12-26 03:09:13 +00:00
Dan Abramov
feb4c487be Document changes in #5714 2015-12-25 18:51:09 +00:00
Dan Abramov
53dabe748c Merge pull request #5714 from gaearon/passthrough-svg-attributes
Pass all SVG attributes through
2015-12-25 13:53:33 +00:00
Dan Abramov
98a7100930 Use JSX in the new tests 2015-12-25 13:50:10 +00:00
Dan Abramov
f27e3aa750 Move the specific else if clause up 2015-12-25 13:48:13 +00:00
Dan Abramov
251d6c30b5 Move SVG attribute deprecation warnings into a devtool
In #5590 a new system was introduced for tracking dev-time warnings.
This commit uses it for reporting SVG attribute deprecation warnings.
2015-12-24 17:50:46 +00:00
Dan Abramov
232a47ad04 Pass SVG attributes through
All attributes defined on SVG elements will now be passed directly regardless of the whitelist. The casing specified by user will be preserved, and setAttribute() will be used.

In the future we will remove support for the camel case aliases to the hyphenated attributes. For example, we currently map `strokeWidth` to `stroke-width` but this is now deprecated behind a warning. When we remove support for this we can remove some of the code paths introduced in this commit.

The purpose of this change is to stop maintaining a separate SVG property config. The config still exists for two purposes:

* Allow a migration path for deprecated camelcased versions of hyphenated SVG attributes
* Track special namespaced attributes (they still require a whitelist)

However it is no longer a blocker for using new non-namespaced SVG attributes, and users don't have to ask us to add them to the whitelist.

Fixes #1657
2015-12-24 17:18:33 +00:00
iamchenxin
6e0a023572 deleting some unecessary newline 2015-12-24 14:57:30 +08:00
iamchenxin
badc15e3c0 update zh-docs (v0.14.3+) 2015-12-24 13:57:07 +08:00
Jim
82fe64a456 Merge pull request #5590 from jimfb/use-devtool-for-unknown-property-warning
Use devtool for unknown property warning
2015-12-23 19:02:58 -08:00
Ben Alpert
edf1952421 Merge pull request #5730 from spicyj/input-type-value
Add another test for #5729
2015-12-23 17:55:08 -08:00
Ben Alpert
432578ef03 Add another test for #5729 2015-12-23 16:25:35 -08:00
Ben Alpert
5043b89d5e Merge pull request #5729 from spicyj/input-type-value
Set input .type before .value always
2015-12-23 15:49:32 -08:00
Ben Alpert
07c0bc6166 Set input .type before .value always
In IE11 (and below), if you run

```
var input = document.createElement('input');
input.value = 'wat';
input.type = 'radio';
console.log(input.value);
```

you get the string "on" logged. Because that makes sense.

So we set the type first.
2015-12-23 15:44:33 -08:00
Ben Alpert
d9dabac48d Remove now-unused instancesByReactID in DOMInput 2015-12-23 15:14:13 -08:00
Paul O’Shannessy
0d5312559a Merge pull request #5725 from RochesterinNYC/patch-1
Clarify React class constructor comments
2015-12-23 11:53:12 -08:00
Paul O’Shannessy
a0741ab468 Merge pull request #5716 from jwworth/pull-request-1450816256
Fix typos in posts
2015-12-23 11:50:08 -08:00
Paul O’Shannessy
56365f4eda Merge pull request #5721 from jdalton/fast-finish
Remove fast_finish in travis.yml.
2015-12-23 11:35:56 -08:00
James Wen
6ff96441da Clarify React class constructor comments
- The constructor is not always overridden by mocks. Makes viewing this constructor during debugging less confusing.
2015-12-23 12:58:18 -05:00
Jake Worth
35e1908bb4 Fix typos in posts 2015-12-23 07:47:17 -05:00
John-David Dalton
f0a15b993c Remove fast_finish in travis.yml. 2015-12-23 00:24:20 -06:00
Jim
4865ddf7ea Merge pull request #5712 from dortonway/master
Fix misunderstanding in tutorial
2015-12-22 16:04:09 -08:00
dortonway
109c9a91e2 Fix misunderstanding in tutorial 2015-12-23 03:01:02 +03:00
Ben Alpert
bae0f19543 Merge pull request #5308 from spicyj/rep
Import ResponderEventPlugin changes from RN
2015-12-22 15:53:11 -08:00
Ben Alpert
bb11639e25 Import ResponderEventPlugin changes from RN 2015-12-22 15:45:51 -08:00
Paul O’Shannessy
89a0ef4ff9 Update badges to include coverage
Also switch to use a different badge provider for consistent styling
2015-12-22 15:41:28 -08:00
Paul O’Shannessy
85e646015d Ensure build directory works when running jest:coverage on its own 2015-12-22 14:36:27 -08:00
Paul O’Shannessy
1d8b816496 Merge pull request #5711 from iamchenxin/docs122215
[docs] Update zh-docs with 7e2a7f0
2015-12-22 14:10:41 -08:00
Paul O’Shannessy
8fa1dfaa8c Merge pull request #5713 from zpao/jest-coverage-followups
Followups to get test coverage reporting to coveralls
2015-12-22 14:07:13 -08:00
Paul O’Shannessy
39c24bf6a6 Addjust travis for jest coverage 2015-12-22 11:47:14 -08:00
Paul O’Shannessy
e68e17503e Remove coverage options from package.json
They don't provide any value and since one of them isn't a valid config usage,
it blurs the line. Instead just store these pieces in the tasks and write them
to the temp config.
2015-12-22 11:14:44 -08:00
Paul O’Shannessy
f3dbc40261 Split jest task into two
This ensures that we don't make jest do the additional tracking it needs to make coverage work.
2015-12-22 10:25:34 -08:00
Paul O’Shannessy
bbef2958b2 Merge pull request #5707 from jdalton/coveralls
Add coveralls support.
2015-12-22 10:07:36 -08:00
Paul O’Shannessy
5b98152a3d Merge pull request #5709 from zpao/youtubenocookie
[docs] fixup other broken youtube-nocookie uses
2015-12-22 10:00:47 -08:00
iamchenxin
a9a4c9d9d0 Update zh-docs with 7e2a7f0 2015-12-23 00:54:48 +08:00
John-David Dalton
9b0ef9244d Add coveralls. 2015-12-22 06:48:33 -06:00
Paul O’Shannessy
82ed8fb0cd [docs] fixup other broken youtube-nocookie uses 2015-12-22 00:54:04 -08:00
Jim
7e2a7f0ce6 Merge pull request #5706 from kchia/patch-3
Capitalizes first letter of first word in the Step 1 instruction
2015-12-21 17:26:10 -08:00
Jim
88ce0fc95f Merge pull request #5708 from kchia/patch-4
Corrects grammatical errors in tutorial
2015-12-21 16:28:34 -08:00
Hou Chia
c465c2ab77 Corrects grammatical errors 2015-12-21 15:03:09 -08:00
Hou Chia
744b1175f3 Capitalizes first letter of first word in the Step 1 instruction
This proposed change makes the documentation formatting more consistent.
2015-12-21 14:51:10 -08:00
Dan Abramov
14d8593102 Fix a minor typo in Contributing 2015-12-21 21:23:07 +00:00
Dan Abramov
d872c25739 Fix the incorrect Jest watch command in Contributing 2015-12-21 21:07:20 +00:00
Paul O’Shannessy
ac20cb2d8c Merge pull request #5705 from facebook/gaearon-patch-1
Mention how to run specific tests in Jest
2015-12-21 12:57:18 -08:00
Jim
9c57c30049 Merge pull request #5699 from jwworth/pull-request-1450702663
Fix typo (duplicate word)
2015-12-21 12:55:55 -08:00
Dan Abramov
cd0c62ef74 Mention how to run specific tests in Jest 2015-12-21 20:54:16 +00:00
Dan Abramov
50af034108 Merge pull request #5695 from gaearon/patch-2
Fix children to be a prop in the blog post example
2015-12-21 20:04:52 +00:00
Dan Abramov
dae1152e66 Merge pull request #5702 from gaearon/patch-3
Mention that Jest can be used directly in Contributing
2015-12-21 19:18:42 +00:00
Dan Abramov
ca31e9f3f7 Remove mention of grunt test --debug from README
It isn't supported anymore.
2015-12-21 19:18:23 +00:00
Dan Abramov
dc9b3fedb2 Mention that Jest can be used directly in Contributing 2015-12-21 19:14:26 +00:00
Jim
8d0efaf980 Merge pull request #5701 from cesarwbr/patch-1
Fix typo in youtube url for video in blog post.
2015-12-21 10:29:09 -08:00
Cesar William Alvarenga
a8b953327a Fix typo
Fix the conference talk youtube url.
2015-12-21 16:02:53 -02:00
Jake Worth
a067949c99 Fix typo 2015-12-21 06:57:52 -06:00
Paul O’Shannessy
aad8024d09 Merge pull request #5697 from kolodny/stricter-update-tests
improved react-addons-update tests
2015-12-20 21:11:29 -08:00
Paul O’Shannessy
1b85c9a6c4 Merge pull request #5698 from facebook/Daniel15-patch-1
Remove smart quotes from code snippet in blog post
2015-12-20 21:09:00 -08:00
Daniel Lo Nigro
abddb558ec Remove smart quotes from code snippet
"Smart" quotes aren't actually very smart.
2015-12-21 15:53:30 +11:00
Moshe Kolodny
7c0189fbad improved react-addons-update tests 2015-12-20 22:01:54 -05:00
Dan Abramov
89538d44a9 Fix minor typos in the blog post 2015-12-18 23:24:07 +00:00
Dan Abramov
421d177dd2 Fix children to be a prop in the blog post example 2015-12-18 21:32:32 +00:00
Ben Alpert
5563771ace Merge pull request #5694 from spicyj/div-html-nesting
Make sure div > html nesting is considered invalid
2015-12-18 12:53:27 -08:00
Ben Alpert
40d5692980 Make sure div > html nesting is considered invalid
See #5128.
2015-12-18 12:49:54 -08:00
Paul O’Shannessy
bdca170d2a Merge pull request #5693 from gaearon/elements-post
Added post about components, elements, and instances
2015-12-18 12:42:33 -08:00
Paul O’Shannessy
9a6c5deeb6 Merge pull request #5692 from zpao/small-style-fixups
A couple small style fixups that were missed in recent PRs
2015-12-18 12:23:54 -08:00
Dan Abramov
f56b28c07a Added post about components, elements, and instances 2015-12-18 20:22:24 +00:00
Paul O’Shannessy
7a1d87bd33 A couple small style fixups that were missed in recent PRs 2015-12-18 11:27:49 -08:00
jim
8eabf84204 Get rid of getNativeNode() 2015-12-17 19:04:27 -08:00
Vitor Balocco
a3d6553a30 Improve documentation for using React with Webpack
Fixes #5679
2015-12-17 17:22:56 +01:00
jim
26f3785a8c Use duck typing instead of allocating event objects 2015-12-16 19:32:55 -08:00
Paul O’Shannessy
83328d4923 Merge pull request #5683 from zpao/build-no-vendor
Don't build vendor files into build/modules
2015-12-16 18:57:14 -08:00
Paul O’Shannessy
b8315fdd59 Don't build vendor files into build/modules 2015-12-16 18:08:26 -08:00
Ben Alpert
963b3cacab Merge pull request #5346 from prometheansacrifice/warn-immutable-props
Warns when mutated props are passed.
2015-12-16 16:09:33 -08:00
Jim
c9c3c339b7 Merge pull request #5216 from nLight/number-in-data-attrs-2329
Allow numbers after `data-` in custom attributes fixes #2329
2015-12-16 15:37:41 -08:00
Jim
ab37776cc2 Merge pull request #5599 from zramaekers/shallow-compare-docs
Add documentation for shallowCompare addon
2015-12-16 15:34:04 -08:00
Jim
0c15b01c38 Merge pull request #5602 from jimfb/error-boundaries
Error boundaries
2015-12-16 13:04:45 -08:00
Jim
3afced6a75 Error boundaries. 2015-12-16 12:15:26 -08:00
Paul O’Shannessy
a15293704a Merge pull request #5673 from DJCordhose/reactelement-doc-fix
fixed docs on ReactElement that were out of sync with code
2015-12-16 11:50:36 -08:00
Jim
ccb97d8e59 Merge pull request #5587 from jimfb/ismounted-alternatives
Added post about upgrading your code to avoid isMounted()
2015-12-16 05:54:55 -08:00
Oliver Zeigermann
20e5a95fe3 fixed docs on ReactElement that were out of sync with code 2015-12-16 11:26:32 +01:00
Jim
bec238a7c9 Added post about upgrading your code to avoid isMounted() 2015-12-15 16:25:07 -08:00
Paul O’Shannessy
6c8cbcae8f Merge pull request #5663 from jonathanp/fix-code-comment
Rephrase comment to better describe use of `warning()`
2015-12-15 14:32:40 -08:00
jpersson
13080f99ba Rephrase comment to better describe use of warning() 2015-12-14 23:27:37 -05:00
Jim
30ef056731 Moved unknown-prop warning into a devtool 2015-12-14 16:29:04 -08:00
Jim
a55ab282fa Initial outline for new devtools api 2015-12-14 16:29:02 -08:00
Ben Alpert
33217f0fb9 Merge pull request #4888 from spicyj/ssr-no-queue
Don't build up mount-ready queue for server side rendering
2015-12-14 14:46:04 -08:00
Ben Alpert
3997164418 Merge pull request #5550 from spicyj/cc-speed
Make createClass 10-15% faster on complex specs
2015-12-14 14:45:44 -08:00
Paul O’Shannessy
eee5d466a6 Merge pull request #5623 from freddyrangel/autocorrect_autocapitalize
Autocorrect and autocapitalize should not be property
2015-12-14 14:11:15 -08:00
Paul O’Shannessy
b6a01d7733 Merge pull request #5658 from applegrain/clarify-dependency-installation
Clarify dependency installation
2015-12-14 11:20:54 -08:00
Lovisa Svallingson
2ff1b2e9e3 Clarify dependency installation
Split browserify and webpack to separate sections.
Remove `babelify` from the webpack section since it's only for browserify
2015-12-14 09:28:20 -07:00
Freddy Rangel
db37deb17c Autocorrect and autocapitalize should not be property
Fixes facebook/react#5436
2015-12-13 23:37:29 -08:00
Jim
55bd203310 Merge pull request #5655 from adraeth/patch-1
Correct highlight in tutorial7.js snippet
2015-12-13 13:13:44 -08:00
Jim
83ee3c38a4 Merge pull request #5654 from jutaz/bugfix/typos
Bugfix - Typos
2015-12-13 10:43:50 -08:00
adraeth
682d61537d Correct highlight in tutorial7.js snippet 2015-12-13 17:38:30 +01:00
Justas Brazauskas
0886273438 Fix few typos in React docs and comments 2015-12-13 16:39:07 +02:00
Jim
410cc30bf9 Merge pull request #5605 from thekevlau/patch-1
Adding class->className as a JSX gotcha
2015-12-11 12:13:48 -08:00
Kevin Lau
fcf74fe9da Finalized wording 2015-12-11 12:05:05 -08:00
Jim
f282710072 Merge pull request #5644 from AndrewHenderson/patch-1
Helps avoid a common Issue when following tutorial
2015-12-11 10:56:01 -08:00
Andrew Henderson
ef32927eb5 Helps avoid a common Issue when following tutorial
https://github.com/reactjs/react-tutorial/issues/87
2015-12-10 22:44:36 -08:00
Jim
eeee272268 Merge pull request #5643 from koh-taka/patch-1
Fix wrong script name (showdown -> marked)
2015-12-10 18:27:17 -08:00
koh-taka
94325ea3ef Fix wrong script name (showdown -> marked)
jp: チュートリアル内のshowdown を marked に修正
2015-12-11 11:23:56 +09:00
Jim
bb084eba24 Merge pull request #5609 from vitorbal/patch-1
Clarify usage of `.propTypes` when using functional components
2015-12-10 15:21:55 -08:00
Vitor Balocco
b1964ad8a7 Clarify usage of .propTypes and .defaultProps when using stateless functional components
I've seen some people unaware about the fact that you can still specify `.propTypes` and `.defaultProps` when you are defining a functional component by setting them as properties of the function.
I thought clarifying this in the docs could help!
2015-12-10 23:21:59 +01:00
Ben Alpert
4f7a2766e4 Merge pull request #5640 from spicyj/no-typechecks
Remove @typechecks
2015-12-10 11:30:40 -08:00
Ben Alpert
46f5251c66 Remove @typechecks
These don't really do anything.

```
codemod.py -d src --extensions js -m '\s* \* @typechecks.*?\n' '\n'
```

with "yes to all".
2015-12-10 11:26:45 -08:00
Jim
be964561ed Merge pull request #5610 from yangshun/change-devtools-message
Change devtools install message on file: URLs
2015-12-10 08:55:57 -08:00
Tay Yang Shun
3deca65a89 Change devtools install message on file: URLs 2015-12-11 00:48:53 +08:00
Kevin Lau
0130a04f05 added nuance about identifiers used in custom elements 2015-12-09 00:33:25 -08:00
Ben Alpert
c65ff201fc Merge pull request #5614 from mark-rushakoff/avoid-negative-lookahead
Avoid negative lookahead in regular expression
2015-12-06 20:27:03 -08:00
Mark Rushakoff
86b44349de Avoid negative lookahead in regular expression
I'm trying to use React with otto
(https://github.com/robertkrimen/otto), which is implemented in Go and
does not support lookaheads or backreferences in regular expressions.
(Unfortunately that *does* mean that otto isn't fully compatible with
the ECMA5 spec; but since this is the only lookahead I am aware of in
the React codebase, this change makes React once again compatible with
otto, and any other JS implementation that may not be fully compliant on
regular expressions).

As far as I can tell, the previous code replaced a sequence of slash
characters with one more slash than before. The new code avoids the
negative lookahead by matching any sequence of slash characters and then
using the special `$&` placeholder to replace the matched sequence with
the original sequence, plus one more slash.
2015-12-06 13:46:16 -08:00
Jim
178fe648de Merge pull request #5611 from dittos/irc-remove-2ndarg
Clean up caller sites of instantiateReactComponent
2015-12-06 05:01:15 -08:00
Taeho Kim
14725ba768 Clean up caller sites of instantiateReactComponent
The 2nd argument was removed since #4139.
2015-12-06 17:31:30 +09:00
Kevin Lau
1d3ff2a159 Adding class->className as a JSX gotcha
It's mentioned as a note in "JSX in Depth" however I think for clarity and ease of look-up, it would be a good idea to also include it in the JSX Gotchas list?
2015-12-04 16:51:38 -08:00
Paul O’Shannessy
856eb72b4f Merge pull request #5593 from zwhitchcox/patch-3
Remove dead code
2015-12-04 15:57:27 -08:00
zwhitchcox
b15c80696c Remove dead code
This isn't used anywhere in React
2015-12-04 18:28:37 -05:00
Paul O’Shannessy
3faf9569d4 [blog] Diversity Scholarship 2016 2015-12-04 14:51:12 -08:00
Paul O’Shannessy
67663ba2c9 Merge pull request #5603 from henryw4k/patch-3
chore(ReactComponentWithPureRenderMixin.js): made "Mixin" lowercase
2015-12-04 13:08:58 -08:00
Paul O’Shannessy
4f9d8c31b8 Merge pull request #5600 from zwhitchcox/patch-4
Change release to multi task
2015-12-04 13:08:08 -08:00
Ben Alpert
2f77367863 Merge pull request #5595 from remko/select-bug
Fix single select incorrectly updating
2015-12-04 11:12:23 -08:00
Henry Wong
4a971c2d1c chore(ReactComponentWithPureRenderMixin.js): made "Mixin" lowercase
When referring to mixin, the rest of the comment is in lowercase; see line 36 and line 37. 
This change helps with the consistency of the usage of "mixin", and not to confuse it with a variable name.
2015-12-04 11:12:07 -08:00
zwhitchcox
c77f0b2fc5 Change release to multi task
More concise and consistent with the other multitasks
2015-12-04 13:29:58 -05:00
Zach Ramaekers
ad54e49f0c adding documentation pages for shallowCompare addon 2015-12-04 08:53:33 -06:00
Remko Tronçon
7d699f4063 Fix single select incorrectly updating
Closes #5592
2015-12-04 11:21:02 +01:00
Jim
f4744f3a70 Merge pull request #5588 from jimfb/setprops-replaceprops-deprecated
Increase severity of setprops and replaceprops deprecations, since their removal is now imminent.
2015-12-03 10:29:20 -08:00
jim
8c7603311a Increase severity of setprops and replaceprops deprecations, since their removal is now imminent. 2015-12-03 04:08:53 -08:00
Jim
526d5c0edc Merge pull request #5589 from wrakky/fix-minlength-docs
Rename minlength to minLength in the tags and attributes documentation page
2015-12-03 04:04:45 -08:00
Peter Newnham
31253c251f Rename minlength to minLength in the tags and attributes documentation page 2015-12-03 09:35:08 +00:00
Jim
50c7b1792c Merge pull request #5570 from jimfb/remove-setprops-replaceprops
Remove setProps and replaceProps.
2015-12-02 19:09:19 -08:00
Paul O’Shannessy
0be7786e1c Merge pull request #5559 from shogunsea/docs-add-marked
[docs]Add marked source in tutorial doc
2015-12-02 11:30:49 -08:00
Paul O’Shannessy
3ca15b0090 Merge pull request #5584 from zwhitchcox/patch-2
Update ref-10-glossary.md
2015-12-02 11:14:22 -08:00
zwhitchcox
b0ae955977 Update ref-10-glossary.md 2015-12-02 08:52:51 -05:00
Scott Feeney
8557cc0d67 Merge pull request #5561 from graue/setstate-cwm
shallow render: fix setState in componentWillMount
2015-12-01 19:49:15 -08:00
Scott Feeney
9c21e2f3c4 shallow render: fix setState in componentWillMount 2015-12-01 19:43:52 -08:00
Ben Alpert
6b3ee0e74d Merge pull request #5576 from spicyj/log-top-level
Log top-level renders with console.time
2015-12-01 11:34:40 -08:00
Ben Alpert
a0f88d29df Log top-level renders with console.time
Behind a flag.
2015-12-01 11:29:13 -08:00
Paul O’Shannessy
f5840e685e Merge pull request #5581 from yuyokk/patch-1
Update 08.1-more-about-refs.md
2015-12-01 11:03:59 -08:00
Iurii Kucherov
36dfe62f68 Update 08.1-more-about-refs.md 2015-12-01 19:28:34 +01:00
Paul O’Shannessy
13c398bef6 Merge pull request #5536 from zpao/keys-on-prototypes
Don't use `key` when defined on String, Number prototypes
2015-11-30 23:33:26 -08:00
xxin
25ef456b13 add marked source in tutorial doc
update wording of later section

no first, no next

more on wording
2015-11-30 19:08:11 -06:00
jim
fbf81a8435 Remove setProps and replaceProps. 2015-11-30 11:46:07 -08:00
Jim
940a75b1fe Merge pull request #5564 from jackiewung/master
Fix file reference typo in starter
2015-11-30 09:34:15 -08:00
Jackie Wung
f1d3f78334 Fix file reference typo in starter 2015-11-29 18:07:31 -08:00
Paul O’Shannessy
34fbcf20d8 Merge pull request #5526 from yangshun/todo-app-id
[docs] Use id for TodoApp example
2015-11-28 11:58:20 -08:00
Paul O’Shannessy
f48bb3a274 Merge pull request #5520 from mhujer/docs-spread-fix-babel
Docs: Transform rest and spread properties using Babel 6
2015-11-28 11:47:30 -08:00
Paul O’Shannessy
6b641de6b8 Merge pull request #5546 from cody/singlechild
[docs] Single Child
2015-11-28 11:46:47 -08:00
Paul O’Shannessy
d54b151bc2 Merge pull request #5556 from timuric/patch-1
Avoid mutating state in the example code
2015-11-28 11:30:35 -08:00
Timur Carpeev
1e98c78541 Avoid mutating state in the example code
According to react documentation it is advised to: 
NEVER mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.
https://facebook.github.io/react/docs/animation.html

In this particular case it is probably doesn't matter since setState is called directly after mutation, but it does provide a bad example of state mutation.

Another way of removing an item from an array can be `newItems = this.state.slice(0,i).concat(this.state.slice(i+1))` however the meaning can be less obvious to some.
2015-11-27 12:33:57 +01:00
Martin Hujer
ed8727ade7 Transform rest and spread properties using Babel 6
> Out of the box Babel doesn't do anything. In order to actually do
> anything to your code you need to enable plugins.
> (https://babeljs.io/docs/plugins/)
2015-11-26 09:17:01 +01:00
Ben Alpert
50c81d5fe6 Make createClass 10-15% faster on complex specs 2015-11-25 18:24:46 -08:00
Ben Alpert
ba0792e72b Add createClass stress test
Running this is left as an exercise for the reader, since my measure.py isn't designed for this at present. But something like this might work:

```diff
diff --git a/scripts/bench/measure.py b/scripts/bench/measure.py
index 4cedf47..627ec97 100755
--- a/scripts/bench/measure.py
+++ b/scripts/bench/measure.py
@@ -79,15 +79,12 @@ def _measure_ssr_ms(engine, react_path, bench_name, bench_path, measure_warm):
             if (typeof React !== 'object') throw new Error('React not laoded');
             report('factory_ms', END - START);

-            globalEval(readFile(ENV.bench_path));
-            if (typeof Benchmark !== 'function') {
-              throw new Error('benchmark not loaded');
-            }
+            globalEval("bm = (function(){" + readFile("bench-createclass-madman.js") + "})");
+            bm();
             var START = now();
-            var html = React.renderToString(React.createElement(Benchmark));
-            html.charCodeAt(0);  // flatten ropes
+            bm();
             var END = now();
-            report('ssr_' + ENV.bench_name + '_cold_ms', END - START);
+            report('cc_' + ENV.bench_name + '_cold_ms', END - START);

             var warmup = ENV.measure_warm ? 80 : 0;
             var trials = ENV.measure_warm ? 40 : 0;
@@ -119,7 +116,7 @@ def _main():
         return 1
     react_path = sys.argv[1]

-    trials = 30
+    trials = 60
     sys.stderr.write("Measuring SSR for PE benchmark (%d trials)\n" % trials)
     for i in range(trials):
         for engine in [
@@ -132,7 +129,7 @@ def _main():
         sys.stderr.flush()
     sys.stderr.write("\n")

-    trials = 3
+    trials = 0#3
     sys.stderr.write("Measuring SSR for PE with warm JIT (%d slow trials)\n" % trials)
     for i in range(trials):
         for engine in [
```
2015-11-25 18:24:46 -08:00
Ben Alpert
8248470bd9 Merge pull request #5547 from spicyj/mc-noq
Kill global queue in ReactMultiChild
2015-11-25 13:13:01 -08:00
Ben Alpert
418ba27485 Kill global queue in ReactMultiChild
As we move away from using HTML for updates, this becomes less useful.
2015-11-25 12:59:02 -08:00
Ben Alpert
08499f9938 Turn on useCreateElement by default
Facebook has been running with this on for a couple weeks now with no ill effects.
2015-11-25 12:59:01 -08:00
Ben Alpert
3722616349 Merge pull request #5543 from spicyj/rt103
Clarify wording in the tutorial
2015-11-25 09:37:28 -08:00
Stefan Dombrowski
c6025da952 [docs] Single Child
* Single Child belongs to Prop Validation, so it was moved there.
* "throw" was changed to "warn".
2015-11-25 17:34:40 +01:00
Paul O’Shannessy
54e6057b1a Merge pull request #5523 from hejld/add-selection-and-composition-events-on-reference-page
[docs] Add missing sections to events reference page in IT and CN
2015-11-24 09:44:49 -08:00
Paul O’Shannessy
e95d3dd812 Merge pull request #5539 from matthewlooi/addCodeHighlightToTutorialDoc
Add highlight to a line of code to tutorial21.js
2015-11-24 09:44:03 -08:00
Ben Alpert
58901af7a6 Clarify wording in the tutorial
reactjs/react-tutorial#103
2015-11-24 09:30:33 -08:00
hejld
18a3a3979e Add missing sections to events reference page in IT and CN 2015-11-24 15:56:58 +01:00
Matthew
e02bd0543f add highlight to a line of code to tutorial20.js (all languages included) 2015-11-24 01:23:55 -05:00
Paul O’Shannessy
f44a0778e3 Don't use key when defined on String, Number prototypes 2015-11-23 15:33:34 -08:00
Paul O’Shannessy
d01188133e Merge pull request #5533 from kryogenic/patch-1
Use null instead of '' in ternary expression
2015-11-23 12:12:14 -08:00
Kale
b74e53c3ca Use null instead of '' in ternary expression
A blank string ('') resolves to <span></span> which produces a warning when place inside a <tr>
2015-11-23 06:38:08 -07:00
Paul O’Shannessy
7ea1d15197 Merge pull request #5524 from chenglou/woohoo-its-me
Remove unreachable return from shouldUpdateReactComponent
2015-11-22 18:54:17 -08:00
Tay Yang Shun
bf4bd19101 [docs] Use id for TodoApp example 2015-11-22 11:54:39 +08:00
Cheng Lou
60af7d1c3d Remove unreachable return from shouldUpdateReactComponent
Eslint didn't catch this (we do have this rule turned on) because it's a
big. There are no other locations I think. Detected that when I minified
some code.
2015-11-21 18:00:40 -05:00
Paul O’Shannessy
c5867ea401 Merge pull request #5518 from mhujer/docs-spread-fix
Docs: Rest and Spread Properties - ECMAScript
2015-11-20 11:30:02 -08:00
Ben Alpert
812e1a877f Merge pull request #5500 from hejld/master
Update DOM_OPERATION_TYPES mappings for ReactDefaultPerfAnalysis
2015-11-20 11:21:06 -08:00
Sebastian Markbåge
64f795e5ef Merge pull request #5411 from simonewebdesign/master
ReactShallowRenderer.render returns the rendered output
2015-11-20 11:20:37 -08:00
Martin Hujer
23edc0d274 Rest/Spread Properties may not be part of ES7
According to the http://www.2ality.com/2015/11/tc39-process.html it is
not a good idea to guess target ES version until the proposal reaches
later phases.

Even the proposal repository now states
  > It is a Stage 2 proposal for ECMAScript. <
(it has been changed in e9813ac78a)
2015-11-20 19:36:29 +01:00
Ben Alpert
acabb22a1d Merge pull request #5503 from spicyj/measure-analyze
benchmarking: measure and analyze scripts
2015-11-19 17:01:53 -08:00
Ben Alpert
907dee2b5d Merge pull request #5451 from spicyj/empty-comments
Use comment nodes for empty components
2015-11-19 16:56:23 -08:00
Paul O’Shannessy
1cdbff26ab Merge pull request #5511 from KeweiCodes/patch-1
Typo
2015-11-19 15:56:25 -08:00
Paul O’Shannessy
aa1e58a41b Merge pull request #5508 from yangshun/patch-1
Add in missing closing </li> for docs template
2015-11-19 13:57:37 -08:00
Kewei Jiang
179263c72f Typo 2015-11-20 10:01:29 +13:00
Jim
22a3f6724a Merge pull request #5510 from jimfb/useless-find-dom-nodes
Removed unnecessary variables/assertions.
2015-11-19 12:14:05 -08:00
jim
1d071c20e8 Removed unnecessary variables/assertions. 2015-11-19 11:32:51 -08:00
Jim
c643ecd7c7 Merge pull request #5495 from jimfb/remove-public-dom-instance
Remove legacy dom node/ref stuff.
2015-11-19 11:27:24 -08:00
Tay Yang Shun
ab6892956d Add in missing closing </li> for docs template 2015-11-20 00:56:25 +08:00
Paul O’Shannessy
0440de9f89 update website for 0.14.3
(cherry picked from commit 3f2f763dea)
2015-11-18 22:39:49 -08:00
Paul O’Shannessy
399a6cfd1c Update readme for 0.14.3
(cherry picked from commit 1cef6ebabf)
2015-11-18 22:39:49 -08:00
Paul O’Shannessy
b40221973c v0.14.3 blog post
(cherry picked from commit f92a630737)
2015-11-18 22:39:49 -08:00
Paul O’Shannessy
fd03270372 Changelog for 0.14.3
(cherry picked from commit 55b6839684)
2015-11-18 22:39:49 -08:00
Ben Alpert
844ca8b6b2 benchmarking: measure and analyze scripts
This uses wall-clock time (for now) so it's noisier than alternatives
(cachegrind, CPU perf-counters), but it's still valuable. In a future diff we
can make it use those.

`measure.py` outputs something that `analyze.py` can understand, but you can use `analyze.py` without `measure.py` too. The file format is simple:

```
$ cat measurements.txt
factory_ms_jsc_jit 13.580322265625
factory_ms_jsc_jit 13.659912109375
factory_ms_jsc_jit 13.67919921875
factory_ms_jsc_nojit 12.827880859375
factory_ms_jsc_nojit 13.105224609375
factory_ms_jsc_nojit 13.195068359375
factory_ms_node 40.4891400039196
factory_ms_node 40.6669420003891
factory_ms_node 43.52413299679756
ssr_pe_cold_ms_jsc_jit 43.06005859375
...
```

(The lines do not need to be sorted.)

Comparing 0.14.0 vs master:

```
$ ./measure.py react-0.14.0.min.js >014.txt
Measuring SSR for PE benchmark (30 trials)
..............................
Measuring SSR for PE with warm JIT (3 slow trials)
...
$ ./measure.py react.min.js >master.txt
Measuring SSR for PE benchmark (30 trials)
..............................
Measuring SSR for PE with warm JIT (3 slow trials)
...
$ ./analyze.py 014.txt master.txt
Comparing 014.txt (control) vs master.txt (test)
Significant differences marked by ***
% change from control to test, with 99% CIs:

* factory_ms_jsc_jit
    % change:  -0.56% [ -2.51%,  +1.39%]
    means: 14.037 (control), 13.9593 (test)
* factory_ms_jsc_nojit
    % change:  +1.23% [ -1.18%,  +3.64%]
    means: 13.2586 (control), 13.4223 (test)
* factory_ms_node
    % change:  +3.53% [ +0.29%,  +6.77%]  ***
    means: 42.0529 (control), 43.54 (test)
* ssr_pe_cold_ms_jsc_jit
    % change:  -6.84% [ -9.04%,  -4.65%]  ***
    means: 44.2444 (control), 41.2187 (test)
* ssr_pe_cold_ms_jsc_nojit
    % change: -11.81% [-14.66%,  -8.96%]  ***
    means: 52.9449 (control), 46.6953 (test)
* ssr_pe_cold_ms_node
    % change:  -2.70% [ -4.52%,  -0.88%]  ***
    means: 96.8909 (control), 94.2741 (test)
* ssr_pe_warm_ms_jsc_jit
    % change: -17.60% [-22.04%, -13.16%]  ***
    means: 13.763 (control), 11.3439 (test)
* ssr_pe_warm_ms_jsc_nojit
    % change: -20.65% [-22.62%, -18.68%]  ***
    means: 30.8829 (control), 24.5074 (test)
* ssr_pe_warm_ms_node
    % change:  -8.76% [-13.48%,  -4.03%]  ***
    means: 30.0193 (control), 27.3964 (test)
$
```
2015-11-18 16:26:01 -08:00
Paul O’Shannessy
d1eba1f78c Merge pull request #5501 from zpao/release-react-dom-server
Make sure react-dom-server is shipped in release process
2015-11-18 13:16:57 -08:00
Paul O’Shannessy
5a80b20017 Make sure react-dom-server is shipped in release process
Also removed some duplicated code to simplify a bit
2015-11-18 13:08:44 -08:00
hejld
a3779421a1 Update DOM_OPERATION_TYPES mappings for ReactDefaultPerfAnalysis 2015-11-18 20:58:32 +01:00
Ben Alpert
1a6d1e74e0 Merge pull request #5330 from laskos/fix-shallow-rendering-function-refs
Fix shallow renderer with ref as function
2015-11-17 23:53:00 -08:00
Paul O’Shannessy
e7a5a98044 Merge pull request #5417 from zpao/ol-reversed
Support reversed for <ol>s
2015-11-17 23:24:27 -08:00
Paul O’Shannessy
904e9e3ea6 Merge pull request #5445 from yangshun/controlled-components-in-tutorial
Use controlled components in tutorial
2015-11-17 22:59:40 -08:00
Tay Yang Shun
3812b95450 [docs] Use controlled components for tutorial 2015-11-18 14:43:03 +08:00
Paul O’Shannessy
c4f134883d Support reversed for <ol>s 2015-11-17 22:42:01 -08:00
Paul O’Shannessy
60cba8fcf7 Merge pull request #5496 from zpao/reactdomserverfollowup
Followup to #5381
2015-11-17 21:57:51 -08:00
Paul O’Shannessy
7729d51726 Followup to #5381
- Export to the right variable
- Simplify lintignore
- Fix cURL command for TravisCI
2015-11-17 17:57:43 -08:00
Paul O’Shannessy
c07b304c76 Merge pull request #5381 from kevinrobinson/react-dom-server-package
Add additional secret property to build artifact for react-dom-server
2015-11-17 16:48:08 -08:00
jim
538d0b08f2 Remove legacy dom node/ref stuff. 2015-11-17 15:30:35 -08:00
Ben Alpert
e03df26e62 Merge pull request #5493 from spicyj/gh-4589
Finish comment in ReactDOMComponentTree
2015-11-17 09:54:23 -08:00
Ben Alpert
6c89857cdc Finish comment in ReactDOMComponentTree 2015-11-17 09:41:24 -08:00
Ben Alpert
892352e95d Merge pull request #5489 from hejld/master
Fix typos and redundant words
2015-11-17 09:37:43 -08:00
hejld
ba8c987391 Fix typos and redundant words 2015-11-17 12:39:29 +01:00
Ben Alpert
85a3142f04 Merge pull request #5481 from hejld/master
Fixed typo
2015-11-16 11:24:04 -08:00
Jim
80bcc519d7 Merge pull request #2774 from jimfb/webcomponents
Added info (example+doc) about react with webcomponents
2015-11-16 11:19:26 -08:00
hejld
94504c3767 Remove rendundant 'the'; keep iff (if and only if) 2015-11-16 20:05:37 +01:00
Jim
7a453646be Added info (example+doc) about react with webcomponents 2015-11-13 20:22:24 -08:00
Paul O’Shannessy
96549a1f48 Merge pull request #5458 from chicoxyzzy/update_deps
Update deps
2015-11-12 16:45:27 -08:00
Paul O’Shannessy
034cfc96c7 [docs] Properly fix Korean docs 2015-11-12 15:57:17 -08:00
Paul O’Shannessy
72d9a8bc15 [docs] Use updated Korean translation
See #5456 for details
2015-11-12 14:23:52 -08:00
Paul O’Shannessy
09b7ff1fc4 Merge pull request #5444 from zpao/tutorial-ids-for-data
[tutorial] Use ids in comments data
2015-11-12 14:22:00 -08:00
Paul O’Shannessy
3bcb0d63f0 [tutorial] Use ids in comments data 2015-11-12 14:20:54 -08:00
chico
dbe8212974 update deps 2015-11-13 01:15:23 +03:00
Manas
593a234c1e Warns when mutated props are passed. 2015-11-13 01:15:38 +05:30
Paul O’Shannessy
2d5612913f Merge pull request #5456 from hugo-agbonon/fix-classname-manipulation-doc
Revert class name manipulation doc to english
2015-11-12 09:57:55 -08:00
Dmitriy Rozhkov
a2b471e098 Allow all characters (except astral) specified in XML specs. fixes #2329 2015-11-12 16:21:34 +01:00
Hugo Agbonon
47253733d3 Revert class name manipulation doc to english 2015-11-12 11:32:08 +01:00
Ben Alpert
ea31f924b8 Merge pull request #5368 from spicyj/adler32
adler32: Properly break loop into 4096-char blocks
2015-11-11 22:21:22 -08:00
Paul O’Shannessy
8104262043 Merge pull request #5390 from chicoxyzzy/arrayof-objectof-tests
Add validation for arrayOf and objectOf in ReactPropTypes
2015-11-11 16:48:33 -08:00
Sebastian Markbåge
951f3b6ba8 Merge pull request #5406 from acdlite/better-error-message-for-setState-in-constructor
Updates the warning that is displayed when `setState` is called within either `render` or a component constructor.
2015-11-11 16:45:12 -08:00
Paul O’Shannessy
12a20b184c Merge pull request #5387 from MattijsKneppers/master
updated Basic Example with External JSX instructions
2015-11-11 10:31:01 -08:00
Ben Alpert
358140679c Use comment nodes for empty components
This makes more sense and avoids DOM nesting problems.

![image](https://cloud.githubusercontent.com/assets/6820/11098713/952348ca-885b-11e5-9757-e4a76467b0b8.png)

(ReactSimpleEmptyComponent isn't used here but React Native can use it as it currently does.)
2015-11-11 10:04:14 -08:00
Mattijs
1220ccc805 update instructions of the following examples: basic-commonjs, basic-jsx-external and basic-jsx-precompile 2015-11-11 10:51:47 +01:00
Paul O’Shannessy
fc245226f9 Merge pull request #5431 from zpao/license-in-packages
Ensure license and patents files are packaged for npm
2015-11-10 15:22:34 -08:00
Jim
4cb210a9da Merge pull request #5412 from yangshun/document-next-context
Add more documentation to Context page
2015-11-10 15:12:08 -08:00
Tay Yang Shun
7d0ee24514 Add more documentation to Context page 2015-11-11 07:06:56 +08:00
Paul O’Shannessy
575d1a5093 Merge pull request #5442 from nickclaw/patch-1
Allow nonce attribute
2015-11-10 14:43:57 -08:00
Paul O’Shannessy
eecd2953cd Merge pull request #5416 from bbrooks/undo-optimistic-update-on-error
Reset state if comment submit fails
2015-11-10 14:42:28 -08:00
Nicholas Clawson
e39f51429b Allow nonce attribute 2015-11-10 10:46:30 -08:00
Jim
d6a547f793 Merge pull request #5403 from yuyokk/patch-1
Clarify note about stable keys
2015-11-10 10:28:49 -08:00
Iurii Kucherov
30ca6619dc State that Math.random() is not a good way to generate keys 2015-11-10 19:02:50 +01:00
Ben Alpert
b4b1adddda Merge pull request #5434 from spicyj/two-reconcile
Handle multiple DOM updates without interference
2015-11-09 17:38:11 -08:00
Ben Alpert
4b80ea23a1 Merge pull request #5433 from spicyj/unmount-children-order
Unmount children before unsetting DOM node info
2015-11-09 17:38:06 -08:00
Ben Alpert
f9a8bdcafe Handle multiple DOM updates without interference
This test failed before! How embarrassing.
2015-11-09 15:22:23 -08:00
Ben Alpert
586653935c Unmount children before unsetting DOM node info 2015-11-09 15:04:57 -08:00
Paul O’Shannessy
10edb83166 Ensure license and patents files are packaged for npm 2015-11-09 12:47:22 -08:00
Jim
95da62765e Merge pull request #5430 from jimfb/changelog-broken-links
Fixed broken links in changelog
2015-11-09 11:28:15 -08:00
jim
5bdb808a46 Fixed broken links in changelog 2015-11-09 11:11:05 -08:00
Jim
a88c39be86 Merge pull request #5424 from stowball/animation-docs-whitespace
Removed unnecessary whitespace before closing bracket
2015-11-09 09:12:49 -08:00
Matt Stow
bc0dc86ae6 Removed unnecessary whitespace before closing bracket 2015-11-09 15:10:01 +11:00
Simone Vittori
c8b8c818b5 ReactShallowRenderer.render returns the rendered output 2015-11-08 13:07:07 +00:00
Ben Brooks
240d7c82cc Reset state if comment submit fails 2015-11-07 13:26:17 -05:00
Ben Alpert
99fbde54a1 Merge pull request #5287 from benhalpern/patch-1
Updated conference page
2015-11-05 13:58:46 -08:00
benhalpern
00eddc2060 Fixed ReactEurope date 2015-11-05 15:33:52 -05:00
Jim
2f7f1a9d45 Merge pull request #5405 from yangshun/inconsistent-error-messages
More consistent error message for findRenderedDOMComponentWithX
2015-11-05 12:03:05 -08:00
Andrew Clark
5fec308d60 Updates the warning that is displayed when setState is called
within either `render` or a component constructor.

Follow up to #5343
2015-11-05 11:12:58 -08:00
Tay Yang Shun
d16754125f More consistent error message for findRenderedDOMComponentWithX 2015-11-06 03:05:08 +08:00
Jim
59dd7b33ee Merge pull request #5391 from zjjw/transition_timeouts
Clear transition timeouts when component unmounts. Fixes #4876
2015-11-05 10:32:18 -08:00
jj
73b496db95 Clear transition timeouts when component unmounts. Fixes #4876 2015-11-05 10:23:15 -08:00
Jim
22b8952fbf Merge pull request #5231 from davidkpiano/patch-1
Updating "JSX Gotchas" docs for Custom Attributes
2015-11-05 09:43:36 -08:00
Jon Hester
aca4ccda35 ReactDOMComponent should throw error when provided children for void elements 2015-11-05 01:52:54 -05:00
Paul O’Shannessy
6d5fe44c86 Merge pull request #5396 from zpao/packagejsons
Improve npm packages' metadata
2015-11-04 21:29:35 -08:00
Paul O’Shannessy
88584a96b7 Generate better readmes for addons npm packages 2015-11-04 21:25:28 -08:00
Paul O’Shannessy
2f6fb746b9 Make sure npm packages have repo and keywords set 2015-11-04 21:25:28 -08:00
chico
a86d25d584 update error messages 2015-11-05 06:12:27 +03:00
Paul O’Shannessy
9b7cc43330 Merge pull request #5352 from chicoxyzzy/eslint-upgrade
remove eslint-disable when possible and update babel-eslint version
2015-11-04 18:17:23 -08:00
chico
b9fd77a4bd update eslint and eslint-plugin-react 2015-11-05 05:14:51 +03:00
chico
4a7456a136 review fixes 2015-11-05 05:11:39 +03:00
chico
8987522a2a remove eslint-disable when possible and update eslint version 2015-11-05 05:11:39 +03:00
Ben Alpert
e131357c23 Merge pull request #5394 from spicyj/tu-shallow-ref
Revert #4993 with an added test for refs
2015-11-04 18:00:27 -08:00
Ben Alpert
9419976e51 Revert #4993 with an added test for refs
We were shallow-rendering a component that used refs at FB so this can't go in as-is. It's a little unclear what we _should_ do though, since there is nothing to hold a ref to (since we're shallowly rendering) and we generally promise that child refs are resolved before a parent's componentDidMount. Also, changing shallow rendering to use the original `_renderValidatedComponent` (instead of `_renderValidatedComponentWithoutOwnerOrContext`) breaks tests because now the `_owner` field doesn't match up for `toEqual` (non-null in `getRenderOutput` but null if constructed in a test).
2015-11-04 17:53:40 -08:00
Paul O’Shannessy
578312e267 Update website for 0.14.2
(cherry picked from commit fdf6f6bbb0)
2015-11-04 17:38:31 -08:00
Paul O’Shannessy
76bbd9e660 Update readme for 0.14.2
(cherry picked from commit 01622a4442)
2015-11-04 17:38:31 -08:00
Paul O’Shannessy
e2fdcb1990 Blog post for 0.14.2
(cherry picked from commit a4fd08973b)
2015-11-04 17:38:31 -08:00
Paul O’Shannessy
cd7387c465 Changelog for 0.14.2
(cherry picked from commit c2dd57c6a6)
2015-11-04 17:38:31 -08:00
Paul O’Shannessy
80af7c7be4 Merge pull request #5353 from chicoxyzzy/patch-1
add Node 5 to devEngines
2015-11-04 15:02:26 -08:00
Jim
4fae036269 Merge pull request #5385 from marocchino/update-korean
Update korean translation to 84af306
2015-11-04 13:57:00 -08:00
Arkist
1c14477a47 Update Korean translation to 84af306 2015-11-05 06:56:48 +09:00
chico
7ae67916cc Adding validation for arrayOf and objectOf in ReactPropTypes 2015-11-05 00:20:33 +03:00
Ben Alpert
35962a0008 Merge pull request #5205 from spicyj/cotree-num
Use incrementing numerical IDs to identify DOM components
2015-11-04 11:41:38 -08:00
Ben Alpert
c193d1a0c2 Don't put IDs in the DOM in createElement mode 2015-11-04 11:39:44 -08:00
Ben Alpert
b80f676d27 Add hooks back for devtools 2015-11-04 11:39:44 -08:00
Ben Alpert
35543c6312 Remove unused modules
- Remove last references to ReactInstanceHandles (still used in responder unit test)
- Remove ClientReactRootIndex/ServerReactRootIndex
2015-11-04 11:39:44 -08:00
Ben Alpert
3cebadaa6b Remove now-unused _rootNodeID from composites 2015-11-04 11:39:44 -08:00
Ben Alpert
e48c8be556 Use incrementing numerical IDs to identify DOM components 2015-11-04 11:39:44 -08:00
Ben Alpert
f06ddf7905 Turn ReactInstanceHandles-test into ReactDOMTreeTraversal-test
This test relied on the fact that ReactDOMComponent still produced hierarchical IDs -- although this module could be used standalone, we're replacing it completely so it makes more sense to just move the tests over to test ReactDOMTreeTraversal.
2015-11-04 11:39:44 -08:00
Ben Alpert
663c4b7d2e Stop relying on hierarchical IDs in ReactDefaultPerf 2015-11-04 11:39:43 -08:00
Ben Alpert
5d94d7d43c Perf: Static children count for wasted time 2015-11-04 11:39:43 -08:00
Ben Alpert
4ba0e95a96 Kill ReactMount.getNode/getID/purgeID with fire 2015-11-04 11:39:43 -08:00
Ben Alpert
796f8c353c put/deleteListener take an instance, not an ID
This removes SimpleEventPlugin's dependency on ReactMount.getID.
2015-11-04 11:39:43 -08:00
Ben Alpert
d11ccd6956 Propagate events based on component tree, not IDs 2015-11-04 11:39:43 -08:00
Ben Alpert
f470cb88f8 Events: Pass native instances up until propagation
Next step: take advantage of having the native instances in EventPropagators instead of converting right back to IDs.
2015-11-04 11:39:43 -08:00
Ben Alpert
6d20556c78 Add functions to find the instance given a node 2015-11-03 17:03:40 -08:00
Ben Alpert
ce528457a4 ReactDOMComponentTree
New module! With this, we have a new module that uses the component tree to store DOM nodes. Most of the logic in this file relates to markup adoption -- if we were to drop that (along with server rendering) this file could just be a `return inst._nativeNode;`.

This works with useCreateElement only because we need to reference each node as it's created.

Events is now the only thing using ReactMount.getNode -- I'll introduce pointers back from the DOM nodes (and a `ReactDOMComponentTree.getInstanceFromNode`) and make that work.
2015-11-03 17:03:40 -08:00
Ben Alpert
5a7c273a1b Always do useCreateElement for updates
Initial render can still be a markup string.
2015-11-03 17:03:40 -08:00
Ben Alpert
276ef737fe Make ReactDOMComponent-test pass with useCreateElement 2015-11-03 17:03:40 -08:00
Ben Alpert
5becbe3f08 Remove obsolete tests with new tree-walking 2015-11-03 17:03:40 -08:00
Ben Alpert
19e2cf5ad5 Make ReactEmptyComponent-test not swallow logs 2015-11-03 17:03:40 -08:00
Kevin Robinson
45c612ed7a Add additional secret property and build for react-dom-server
Update eslintrc, travis build and add task to Gruntfile
2015-11-03 16:39:58 -05:00
Jim
84af306044 Merge pull request #5372 from csbok/patch-1
Update getting-started.ko-KR.md
2015-11-03 03:44:31 -08:00
Ben Alpert
2858bca2e3 Merge pull request #5361 from ali/warn-on-missing-event-handlers
Warn on missing event handler properties
2015-11-02 20:23:20 -08:00
Ali Ukani
9ad4be0316 Warn on missing event handler properties
Fixes #3548. Warns on properties that are case-insensitive matches for
registered event names (e.g. "onclick" instead of "onClick").
2015-11-02 23:13:20 -05:00
Ben Alpert
a4b5f2fffa Merge pull request #5376 from spicyj/gh-4993
Test fixups after #4993
2015-11-02 18:27:25 -08:00
Ben Alpert
c802e9ede9 Test fixups after #4993 2015-11-02 18:26:52 -08:00
Ben Alpert
d2888798f0 Merge pull request #4993 from jsdf/shallow-render-lifecycle
Run all component lifecycle methods when shallow rendering
2015-11-02 18:16:55 -08:00
Ben Alpert
17289020f7 Merge pull request #5356 from rpominov/patch-1
fix shallowRenderer.getRenderOutput() return type in docs
2015-11-02 17:27:08 -08:00
Ben Alpert
5724fca7ae Merge pull request #5358 from conorhastings/invariant-testutils-simulate-shallow-render
#5284 - Show a friendly error when using TestUtils.Simulate with shallow rendering
2015-11-02 17:22:07 -08:00
conorhastings
fbb8d2fe2d Show a friendly error when using TestUtils.Simulate with shallow rendering 2015-11-02 20:14:26 -05:00
Paul O’Shannessy
b9371bc216 Merge pull request #5370 from zpao/babel6docs
Update docs for Babel 6
2015-11-02 16:58:17 -08:00
csbok
2b54e5417d Update getting-started.ko-KR.md
correcting misspelled words
2015-11-03 09:56:41 +09:00
Paul O’Shannessy
bc3b32c968 [docs] Update tooling integration for more babel 6 2015-11-02 13:10:40 -08:00
Paul O’Shannessy
db7ea058e7 [docs] Update Getting Started for babel 6 2015-11-02 12:56:30 -08:00
Paul O’Shannessy
dbab71bbf4 Merge pull request #5350 from ludovicofischer/master
Correct Babel 6 command line usage instructions.
2015-11-02 11:42:44 -08:00
Ben Alpert
ff6714064f adler32: Properly break loop into 4096-char blocks
I believe this was lost in translation in #4400. Can't say I fully understand why this is significant at all though...
2015-11-02 11:29:48 -08:00
Paul O’Shannessy
72a11421d2 Merge pull request #5367 from spicyj/haste-manifest
Add package.json for react-haste package
2015-11-02 11:15:28 -08:00
Paul O’Shannessy
a82400faa2 Merge pull request #5366 from zpao/react-dom-peer-dep
Make React a peerDep of react-dom
2015-11-02 11:14:29 -08:00
Ben Alpert
d44c45f8a5 Add package.json for react-haste package
This will probably go away in a release or two.
2015-11-02 11:03:18 -08:00
Paul O’Shannessy
3c1c02394e Make React a peerDep of react-dom 2015-11-02 10:19:04 -08:00
Roman Pominov
e9f931653d fix shallowRenderer.getRenderOutput() return type in docs 2015-11-01 16:54:41 +03:00
Sergey Rubanov
57b0c8efd0 add Node 5 to devEngines 2015-11-01 04:55:33 +03:00
Ludovico Fischer
6e1f642273 Correct Babel 6 command line usage instructions.
The user should install the babel-cli package, see http://babeljs.io/docs/usage/cli/.
2015-11-01 00:17:16 +01:00
Paul O’Shannessy
88bae3fb73 Merge pull request #5348 from hzoo/patch-2
add docs for babel 6
2015-10-31 12:11:26 -07:00
Henry Zhu
41fc5f21e5 add docs for babel 6 2015-10-31 14:34:20 -04:00
Jim
bbffc36534 Merge pull request #5344 from chicoxyzzy/update-rcc
maskedContext should not be instantiated as null
2015-10-30 18:23:55 -07:00
chico
8a9039891b maskedContext should not be instantiated as null 2015-10-31 04:05:44 +03:00
Ben Alpert
c525732147 Merge pull request #5023 from spicyj/jsc-perf
Add rudimentary jsc perf-counters runner
2015-10-30 17:06:30 -07:00
Paul O’Shannessy
b5d90f8c6b Merge pull request #5331 from tbroadley/typescript-test-windows
Fix for TypeScript test on Windows
2015-10-30 15:45:51 -07:00
Thomas Broadley
d77e161f99 use path library to normalize filepath 2015-10-31 07:38:47 +09:00
Jim
a2d26c82ea Merge pull request #5093 from jimfb/avoid-children-to-string-coercion
Should not coerce children prop on custom elements to a string.  Fixes #5088
2015-10-30 13:42:05 -07:00
Jim
0c790baf31 Merge pull request #5341 from zpao/domprop-integrity
Add integrity to HTML property config
2015-10-30 13:39:17 -07:00
Paul O’Shannessy
68eb1a6fb6 Add integrity to HTML property config 2015-10-30 13:35:51 -07:00
Jim
86fc94750a Should not coerce children prop on custom elements to a string. Fixes #5088 2015-10-30 13:33:21 -07:00
Paul O’Shannessy
bd6417e24e Merge pull request #5293 from chicoxyzzy/update-deps
update dependancies
2015-10-30 13:25:31 -07:00
Paul O’Shannessy
3d75a4234d Merge pull request #5339 from jimfb/contributing-first-bug
Added a note about finding a good-first-bug
2015-10-30 12:10:22 -07:00
Jim
6fd7892a4d Added a note about finding a good-first-bug 2015-10-30 11:05:49 -07:00
chico
38b80b5b37 update deps 2015-10-30 16:34:39 +03:00
Paul O’Shannessy
761921499c Merge pull request #5049 from xelad1/patch-1
Fixed unclear wording in comment
2015-10-29 23:21:05 -07:00
Alex Dajani
aa6fcf902c Fixed unclear wording in comment
Perhaps not understanding what "key a set a fragment..." is supposed to mean.  Hopefully I'm not misreading this as a typo.
2015-10-29 23:20:18 -07:00
Paul O’Shannessy
c35b4384f7 Merge pull request #5235 from wincent/update-blog-syntax
Update syntax in older Relay blog post that may be causing confusion
2015-10-29 23:14:19 -07:00
Paul O’Shannessy
f02584d807 Merge pull request #5300 from zpao/lint-eqeqeq
[lint] Make eqeqeq a failure
2015-10-29 23:06:44 -07:00
Jim
0ef5112e89 Merge pull request #5334 from facebook/revert-5320-overwrite_props
Revert "Overwriting of mutated props in constructor"
2015-10-29 22:47:35 -07:00
Sebastian Markbåge
d914f15c0e Revert "Overwriting of mutated props in constructor" 2015-10-29 22:36:38 -07:00
Christoph Pojer
1384d43f53 Merge pull request #5321 from cpojer/update-tests
Update tests
2015-10-29 18:42:12 -07:00
Thomas Broadley
d80710b0ae fix for TypeScript test on Windows 2015-10-30 10:22:50 +09:00
Jim
d15e2fcd8e Merge pull request #5320 from drdelambre/overwrite_props
Overwriting of mutated props in constructor
2015-10-29 18:15:52 -07:00
Alex Boatwright
cc09ed940f classes in the tests when can 2015-10-29 18:11:28 -07:00
Paul O’Shannessy
12c214a992 Merge pull request #5328 from zpao/non-native-event-name-dispatch
Use a custom event type for our event dispatching in ReactErrorUtils
2015-10-29 17:54:18 -07:00
Sławomir Laskowski
f00d45d65f Fix shallow renderer with ref as function 2015-10-30 00:23:24 +01:00
cpojer
ac17bdaaba Remove generateFromMetadata and getMetadata usage. 2015-10-29 15:45:30 -07:00
Paul O’Shannessy
606aa61209 Merge pull request #5327 from zpao/definepropgetter
Use a getter for canDefineProperty check.
2015-10-29 15:41:02 -07:00
Paul O’Shannessy
29523d0113 Use a custom event type for our event dispatching in ReactErrorUtils
It turns out that IE doesn't like when native events types are used. There may
have been more involved at play but this fixes the issue.
2015-10-29 15:39:14 -07:00
Paul O’Shannessy
d95a2239a8 Use a getter for canDefineProperty check.
This ensures that we treat es5-sham as a broken implementation of defineProperty and we won't try to use it.
2015-10-29 15:17:50 -07:00
Paul O’Shannessy
b8f502b224 Merge pull request #5326 from tbroadley/grunt-lint-windows
Fix for 'grunt lint' on Windows
2015-10-29 14:51:21 -07:00
Thomas Broadley
c0f0d12f96 'grunt lint' now works on Windows 2015-10-30 06:43:43 +09:00
cpojer
2ecfc4f8fb Codemod old APIs away. 2015-10-29 12:40:52 -07:00
cpojer
9d25303d89 Update jest. 2015-10-29 12:40:52 -07:00
Alex Boatwright
c341269ab2 simple fix to prevent overwriting of mutated props 2015-10-28 23:37:29 -07:00
Jim
01341480c2 Merge pull request #5317 from nickbalestra/patch-1
Update 02.1-jsx-in-depth.md
2015-10-28 22:13:57 -07:00
Jim
fbf4cbbae6 Merge pull request #5316 from Third9/master
update Korean docs to 0.14
2015-10-28 21:43:16 -07:00
Nick Balestra
2257d8aa76 Update 02.1-jsx-in-depth.md
Update 02.1-jsx-in-depth.md
2015-10-28 20:14:02 -07:00
KwonH
afc118e3c4 update Korean docs to 0.14
Update getting-started in Korean
2015-10-29 11:51:52 +09:00
Paul O’Shannessy
ee06df1ac5 Bring over updates for 0.14.1 release
Update changelog for 0.14.1

(cherry picked from commit aaf8f870cb)

Update readme for 0.14.1

(cherry picked from commit c2dde8df0b)

0.14.1 blog post

(cherry picked from commit 6e2450e8f2)

Update website for 0.14.1

(cherry picked from commit f0782e2b2e)
2015-10-28 14:43:56 -07:00
Ben Alpert
a65a4851c6 Merge pull request #5309 from spicyj/bench
Add a simple initial-render benchmark test case
2015-10-28 13:58:50 -07:00
Ben Alpert
e849819cb6 Add a simple initial-render benchmark test case 2015-10-28 13:14:24 -07:00
Paul O’Shannessy
2c176da7e8 Merge pull request #5304 from evanvosberg/master
Add non-standard property for supporting Safari mask-icon.
2015-10-28 10:28:21 -07:00
Evan Vosberg
f8b4affb87 Add non-standard property for supporting Safari mask-icon.
See also: https://developer.apple.com/library/prerelease/mac/releasenotes/General/WhatsNewInSafari/Articles/Safari_9.html#//apple_ref/doc/uid/TP40014305-CH9-SW20
2015-10-28 17:35:43 +01:00
Paul O’Shannessy
ad00a6e672 [lint] Make eqeqeq a failure 2015-10-27 15:39:54 -07:00
Ben Alpert
b0a7a00dba Merge pull request #5237 from spicyj/gh-5125
Make sure top-level callback has correct context
2015-10-27 13:26:45 -07:00
Ben Alpert
7f205e9c1b Make sure top-level callback has correct context
Closes #5125 -- incorporates essentially the same fix with a much simpler test case. Thanks @yiminghe for reporting!
2015-10-27 13:11:45 -07:00
Ben Alpert
65b9ceb4f8 Merge pull request #5209 from antoaravinth/5189
Don't instrument listeners for ReactDefaultPerf
2015-10-27 11:59:02 -07:00
Paul O’Shannessy
517872817f Merge pull request #5297 from quadrupleslap/master
Mangle __html in prop validation.
2015-10-27 09:40:29 -07:00
Ram Kaniyur
ad654ceb66 Took keyOf outside the function. 2015-10-28 00:48:54 +11:00
Ram Kaniyur
e26666fb1e Mangle __html in prop validation. 2015-10-28 00:18:00 +11:00
Ants
59db07c4f9 Fix for the issue #5189
Fix for lint issues

Added the test cases for the issue 5189

Removing empty space

Removing the Eventplugin instrumentation code

Removing unwanted white space
2015-10-27 16:33:22 +05:30
Ben Alpert
e603644255 Merge pull request #5291 from spicyj/afu-cycle
Fix cycle in AutoFocusUtils
2015-10-26 15:03:15 -07:00
Ben Alpert
f558b95584 Fix cycle in AutoFocusUtils
In 5c5d2ec182 I accidentally introduced a dependency cycle:

AutoFocusUtils -> findDOMNode -> ReactDOMComponent -> AutoFocusUtils

This breaks some tools internally. We're not actually using findDOMNode in AutoFocusUtils any more so we can just delete it.
2015-10-26 14:52:23 -07:00
Paul O’Shannessy
0f76873ebb Merge pull request #5289 from jonathanp/patch-1
Update 2015-05-01-graphql-introduction.md
2015-10-26 14:19:48 -07:00
jpersson
e2267613ac Update 2015-05-01-graphql-introduction.md 2015-10-26 17:14:11 -04:00
Jonathan Persson
924cddc505 Update 2015-05-01-graphql-introduction.md 2015-10-26 16:32:11 -04:00
benhalpern
a51ef94384 Updated conference info 2015-10-26 16:20:57 -04:00
Ben Alpert
055ecd7f14 Merge pull request #5266 from spicyj/lt-fix-2
Three more fixes for document.createElement mode
2015-10-26 11:41:27 -07:00
Paul O’Shannessy
d17ad0f0c0 Merge pull request #5089 from thomasp9/patch-1
Create 01-why-react.de-DE.md
2015-10-26 10:14:16 -07:00
Patrick
0508a07446 Create 01-why-react.de-DE.md
Translation of 01-why-react.de-DE.md to German
2015-10-26 10:13:45 -07:00
Paul O’Shannessy
0ddc0817e4 Merge pull request #5252 from zpao/eslintlock
[lint] Lock eslint version
2015-10-26 10:12:52 -07:00
Paul O’Shannessy
11919b6d90 Merge pull request #5286 from translucens/add_reactdom_js
Add react-dom.js to tutorials
2015-10-26 09:24:54 -07:00
translucens
73ec3713b3 Add react-dom.js to tutorials 2015-10-26 22:23:50 +09:00
Ben Alpert
22a240fd39 Avoid lastProps[key] lookup in initial render
This makes both Firefox and IE 15-20% faster in initial render (!!). On my PE benchmark, createElement is now on par with HTML in Firefox and faster in IE11 (before, it was slower).
2015-10-24 12:19:30 -07:00
Paul O’Shannessy
56c91248fd Merge pull request #5274 from SpartaSixZero/master
Corrected highlighted line in tutorial example in tutorial7.js
2015-10-24 12:19:28 -07:00
Mark Sun
2f48cc4327 Corrected highlighted line in tutorial example in tutorial7.js 2015-10-24 15:01:14 -04:00
Jim
75e9045719 Merge pull request #5268 from dnshi/update-readme
Update README's example
2015-10-24 06:29:06 -10:00
Dean Shi
2b136a4f84 Update README's example
According to current React version, when I use `React.render`, console shows `React.render is deprecated. Please use ReactDOM.render from require('react-dom') instead.`.

So this PR is a tiny update for the README example.
2015-10-24 00:59:05 -07:00
Ben Alpert
6269ef62cf Two more fixes for document.createElement mode
Is this all of them? I hope so.

- Set text content after creating hierarchy, like the text is a child. I should've done this originally but I guessed it wouldn't matter. I was wrong (~20% perf difference in IE11).
- IE throws when setting an enum-like property to an invalid value. I tried setting every property to the string 'a' and changed the ones that threw to be MUST_USE_ATTRIBUTE. I think these are all correct -- encType is the most suspicious one based on the existing comments but I tested in IE8 and it works fine as an attribute.
2015-10-23 22:46:02 -07:00
Ben Alpert
8aaa66c292 Merge pull request #5263 from spicyj/npmreactreadme
Update addons paths in npm react README
2015-10-23 17:36:23 -07:00
Ben Alpert
3a0ab000bf Update addons paths in npm react README 2015-10-23 17:31:01 -07:00
Ben Alpert
4106251316 Merge pull request #5261 from spicyj/dom-null-undef
Bug fixes for createElement mode
2015-10-23 15:56:21 -07:00
Ben Alpert
939c7596ad Merge pull request #5253 from spicyj/dt-lazy
Perf: Insert nodes top-down in IE and Edge
2015-10-23 15:56:08 -07:00
Ben Alpert
b447b40958 Use attributes to set .type
According to the internet, this should work and it appears to work fine on all the browsers I tested.
2015-10-23 12:08:10 -07:00
Ben Alpert
7221e1b2e9 Don't set DOM props when switching between unset/undefined/null 2015-10-23 11:52:29 -07:00
Ben Alpert
263ca4792e Perf: Insert nodes top-down in IE and Edge 2015-10-23 10:59:27 -07:00
Paul O’Shannessy
4d41cf740a Merge pull request #5250 from conorhastings/track-default-property
add default attribute for use with track element
2015-10-22 20:20:44 -07:00
Paul O’Shannessy
a79fcd7a7f [lint] Lock eslint version
The automatic updating really sucks here as bugs are fixed / behavior of rules changes. Local versions are updated, cached versions on Travis aren't. It's messy. Now we must explicitly update for any thing to change.
2015-10-22 20:15:25 -07:00
Paul O’Shannessy
be6bd3404e Merge pull request #5236 from spicyj/eslint-17
Fix lint for eslint 1.7
2015-10-22 19:59:26 -07:00
conorhastings
bb3a326ecd add default attribute for use with track element 2015-10-22 22:47:17 -04:00
Ben Alpert
b106e96864 Fix lint for eslint 1.7 2015-10-21 14:48:47 -07:00
Ben Alpert
7b97d8d58f Merge pull request #5233 from yiminghe/fix-typo
fix wrong method name
2015-10-21 14:33:38 -07:00
Greg Hurrell
1bcd6804f3 Update syntax in older Relay blog post that may be causing confusion
Just seen on Stack Overflow a question that suggests people may be
confused if they run across some of the old syntax in one of our old
blog posts:

http://stackoverflow.com/questions/33261751/why-does-relay-ql-result-in-unterminated-string-constant-error/

Ideally people would consult the (up-to-date) documentation instead, and
we don't want to have to maintain old blog posts, but in this case the
cost of updating the syntax was low so I just went ahead and did it.
2015-10-21 11:53:22 -07:00
Jim
1dafac9e0c Merge pull request #5230 from kohashi/patch-1
Fix tutorial.ja-JP.md
2015-10-21 07:46:17 -10:00
yiminghe
85fc28624c fix wrong method name 2015-10-22 00:29:22 +08:00
David Khourshid
29939b7270 Updating "JSX Gotchas" docs for Custom Attributes
Adds note that custom attributes are supported on custom elements.
2015-10-21 08:18:48 -04:00
kohashi85
ce002e61b1 Update tutorial.ja-JP.md 2015-10-21 17:04:08 +09:00
Paul O’Shannessy
a468eed33f Merge pull request #5217 from zpao/rm-react-codemod
Move react-codemod to standalone repo
2015-10-20 15:46:49 -07:00
Paul O’Shannessy
8848984c46 Update blog posts linking to react-codemod 2015-10-19 14:39:40 -07:00
Paul O’Shannessy
caece8b4b7 Remove react-codemod 2015-10-19 14:31:31 -07:00
Paul O’Shannessy
5bd04cf259 Merge pull request #5154 from cmatheson/master
add npm 3.x to devengines
2015-10-19 13:52:20 -07:00
Paul O’Shannessy
fc96f31fad Merge pull request #5185 from yungsters/invariant
Remove "Invariant Violation: " from Invariant Error Messages
2015-10-19 12:07:59 -07:00
Paul O’Shannessy
244dd5da4c Merge pull request #5214 from benigeri/patch-1
small edit on reactiflux blog post
2015-10-19 12:03:01 -07:00
Paul Benigeri
7aac368253 small edit on reactiflux blog post 2015-10-19 12:01:47 -07:00
Ben Alpert
3d7def0b48 Merge pull request #5213 from spicyj/gh-5187-f
Follow-ups to #5187
2015-10-19 11:19:10 -07:00
Ben Alpert
545f31741e Follow-ups to #5187 2015-10-19 11:15:02 -07:00
Paul O’Shannessy
8f1ce99cc3 Fix up stray markdown in blog post 2015-10-19 10:23:28 -07:00
Christopher Chedeau
2a7d054bfc Merge pull request #5211 from vjeux/reactiflux
Reactiflux is moving to Discord blog post
2015-10-19 07:42:40 -07:00
Christopher Chedeau
db7522f2c5 Reactiflux is moving to Discord blog post 2015-10-19 07:35:46 -07:00
Jim
9cb01de1bc Merge pull request #5203 from WanderWang/docs-cn
update Chinese docs to 0.14
2015-10-18 09:38:18 -07:00
WanderWang
1044d4c7d5 update Chinese docs to 0.14 2015-10-19 00:34:04 +08:00
Jim
dd3c4474d1 Merge pull request #4051 from jquense/ie-noisy-input-event
opt out of input events for ie 10 and 11
2015-10-18 09:26:52 -07:00
Ben Alpert
617f03518a Merge pull request #5192 from spicyj/ev-ind
Remove unnecessary indirection in events
2015-10-16 21:43:09 -07:00
Jim
7a164fd3a0 Merge pull request #5187 from tomduncalf/support_invalid_event-issue_5152
Add support for "invalid" event within Form elements
2015-10-16 18:02:18 -07:00
Timothy Yung
278939ec58 Upgrade dependency fbjs@0.4.0 2015-10-16 16:10:06 -07:00
Timothy Yung
cdaea311a3 Remove "Invariant Violation: " from Invariant Error Messages 2015-10-16 16:09:28 -07:00
Jim
98c96b6460 Merge pull request #5199 from jimfb/number-found
Print number of matches (previously unclear if zero or multiple)
2015-10-16 13:00:49 -07:00
Jim
e0904a0a90 Print number of matches (previously unclear if zero or multiple) 2015-10-16 13:00:10 -07:00
Jim
3260b00385 Merge pull request #5195 from trickford/patch-1
Specify focus events work on all elements in the React DOM
2015-10-16 11:50:22 -07:00
Ben Alpert
e67ceae1ad Merge pull request #5198 from spicyj/gh-5071a
Fix buggy DOM nesting warning for text components
2015-10-16 11:42:20 -07:00
Ben Alpert
f7816cdbfe Fix buggy DOM nesting warning for text components
cf. #5071
2015-10-16 11:36:16 -07:00
Jim
0fc8f6ade3 Merge pull request #5193 from conorhastings/enqueue-callback-error
update enqueueCallback invariant to more specifically denote type of passed callback
2015-10-16 09:39:56 -07:00
Rick Ford
3d4e8affcd Specify focus events work on all elements in the React DOM
Generally, focus/blur events only apply to focusable elements found in forms. In React, you can listen to focus/blur events on any element.
2015-10-16 11:02:04 -05:00
conorhastings
20ec78d9f0 update enqueueCallback invariant to more specifically explain what caused error 2015-10-16 11:57:08 -04:00
jquense
b5e7a8447c opt out of input events for ie 10 and 11
while supported then Input event is too noisy in IE. Firing on
placeholder sets, and when an input is focused with a placeholder.

fixes #3377 and fixes #3484
2015-10-16 11:28:36 -04:00
Ben Alpert
ef95128ae2 Remove unnecessary indirection in events 2015-10-15 20:13:14 -07:00
Paul O’Shannessy
ed7ab7b94a Merge pull request #5176 from jimfb/tweak-props-change-wording
Tweak wording when talking about props changing
2015-10-15 12:21:14 -07:00
Paul O’Shannessy
e12ee95e09 [docs] Don't make authors links on all posts page 2015-10-15 12:18:15 -07:00
Tom Duncalf
5ceb22953c Add support for "invalid" event within Form elements
Fixes #5152
2015-10-15 20:15:34 +01:00
Paul O’Shannessy
ccfc2d8049 Merge pull request #5178 from jimfb/multiple-authors
Fix blog post authors
2015-10-15 12:04:56 -07:00
Paul O’Shannessy
95afe4608f Merge pull request #5184 from zpao/fix-style-issues
Fix indentation issues
2015-10-15 11:55:37 -07:00
Paul O’Shannessy
0dc6596dc2 Fix indentation issues 2015-10-15 09:29:28 -07:00
Jim
b735dd4ab4 Merge pull request #5048 from antoaravinth/PR-5013
Issue: 5013 Added necessary code for firing warning if value is null
2015-10-14 23:06:54 -07:00
Ants
b42c1dafcc Issue: 5013 Added necessary code for firing warning if value is null
Fixed the lint issues

Added logic for handling the warning only once and added the test cases for the same. Also moved the warning part to only DEV mode

Changed few lines related to the formatting issues

Removing the empty whitespace
2015-10-15 10:13:35 +05:30
Jim
5ae4f035c7 Fix blog post authors 2015-10-14 18:01:33 -07:00
Ben Alpert
8168c8eac6 Merge pull request #5175 from spicyj/text-no-frag
Don't test frag cases in ReactMultiChildText-test
2015-10-14 16:07:11 -07:00
Jim
c47d2cfada Tweak wording when talking about props changing 2015-10-14 14:43:09 -07:00
Paul O’Shannessy
8e9682c542 Merge pull request #5174 from zpao/dom-attributes-track
Add srcLang and kind to better support track elements
2015-10-14 14:35:03 -07:00
Ben Alpert
5f8fe7d614 Don't test frag cases in ReactMultiChildText-test
These are now just testing the same as the array cases directly above. This should make this test a bunch faster because it (intentionally) has n^2 runtime.
2015-10-14 14:31:45 -07:00
Ben Alpert
8e67b7f624 Merge pull request #4988 from spicyj/fdn
Walk down internal tree to find DOM node
2015-10-14 14:31:28 -07:00
Ben Alpert
5c5d2ec182 Walk down internal tree to find DOM node
This reduces our reliance on hierarchical IDs.
2015-10-14 14:22:53 -07:00
Paul O’Shannessy
659172df50 Add srcLang and kind to better support track elements 2015-10-14 12:05:56 -07:00
Jim
555fd46c7e Merge pull request #5140 from pluma/patch-1
Fix #1357. Don't append "px" suffix to CSS string values.
2015-10-14 11:18:53 -07:00
Alan Plum
a299a366ce Fix #1357. Warn when appending "px" to strings. 2015-10-14 18:36:24 +02:00
Sebastian Markbåge
da1135618e Merge pull request #5166 from spicyj/gh-5157
Add feature test for document.createEvent
2015-10-14 00:08:56 -07:00
Ben Alpert
4f9fdeeec1 Merge pull request #5165 from spicyj/cache-lenient
Be more lenient with invalid nodes in the cache
2015-10-13 17:22:12 -07:00
Ben Alpert
1206d8d2eb Add feature test for document.createEvent
See #5157.
2015-10-13 16:34:05 -07:00
Ben Alpert
e89e675508 Be more lenient with invalid nodes in the cache
This matches our old behavior. I was a little too aggressive in turning on this
error and it's still possible to trigger it (using the test added here).
2015-10-13 16:07:06 -07:00
Paul O’Shannessy
af99b2c2a3 Merge pull request #5164 from zpao/fix-csstransitiongroup-proptype
Correctly handle 0 in CSSTransitionGroup timeout props
2015-10-13 14:54:21 -07:00
Paul O’Shannessy
dc21b95244 Correctly handle 0 in CSSTransitionGroup timeout props 2015-10-13 14:39:55 -07:00
Ben Alpert
dddbca472a Merge pull request #5160 from spicyj/gh-5151
Fetch node to unmount separately from unmounting
2015-10-13 12:19:24 -07:00
Ben Alpert
622db4ee4f Fetch node to unmount separately from unmounting
My last strategy of getting each node recursively while unmounting was a pain to make work properly with ReactMount's confusing cache. Now, we get the node before unmounting anything in the subtree (and we don't try to find the nodes of descendants).

This is a temporary solution and can go away when we get rid of the giant ReactMount node hash map.

Fixes #5151.
2015-10-13 12:07:57 -07:00
Ben Alpert
194ab16d7b Merge pull request #5157 from spicyj/createevent
Use 'document.createEvent' not 'new Event'
2015-10-13 11:40:35 -07:00
Paul O’Shannessy
51c0f86ec7 Merge pull request #5147 from zpao/update-release-task
Stop generating gh-pages during release, update message
2015-10-13 11:20:40 -07:00
Ben Alpert
6488a4c187 Use 'document.createEvent' not 'new Event'
Fixes #5153.

This seems to work in all browsers I tested, including old Android and all IE > 8 which didn't work before.
2015-10-13 11:14:23 -07:00
Ben Alpert
50c9b94552 Merge pull request #5156 from spicyj/bp-codemods
Mention codemods more prominently in release blog
2015-10-13 10:50:38 -07:00
Ben Alpert
4a37796f88 Mention codemods more prominently in release blog 2015-10-13 10:37:42 -07:00
Paul O’Shannessy
f7a3ac2d56 Stop generating gh-pages during release, update message 2015-10-13 09:37:32 -07:00
Cameron Matheson
2c1c7fad4d add npm 3.x to devengines 2015-10-13 02:06:48 -06:00
Jim
bffed177f4 Merge pull request #5150 from jimfb/node-v4-readme
Updated node version requirement in README.md
2015-10-12 18:07:29 -07:00
Jim
e46e5784ce Updated node version requirement in README.md 2015-10-12 18:06:06 -07:00
Jim
c1c9b383a0 Merge pull request #5137 from vipulnsward/2576-add-comparison-tests
Added tests to compare testing of components using different types of element creation
2015-10-12 14:08:08 -07:00
Vipul A M
b4a6bc89c2 - Added tests to compare testing of components using different types of element creation
Fixes [#2576]

- Fixed Lint warnings and errors
2015-10-12 16:44:00 -04:00
Ben Alpert
b32835ea61 Merge pull request #5146 from spicyj/ce-scripts
Don't execute <script> tags w/ createElement mode
2015-10-12 13:43:51 -07:00
Ben Alpert
db989bf686 Don't execute <script> tags w/ createElement mode
Each script will execute at most once so we could also set `.textContent` to something like `;`, then add it to the document, then change the `.textContent`, but this seems like the simplest approach. See http://dev.w3.org/html5/spec-preview/the-script-element.html for details.
2015-10-12 13:43:40 -07:00
Jim
37c71a6e1f Merge pull request #5142 from MaxPRafferty/add-selection-and-composition-events-on-reference-page
Add selection and composition events on reference page
2015-10-12 13:37:56 -07:00
maxprafferty
48ada00bdb added selection and composition events to reference page
added composition events to reference page

added selection events to reference page
2015-10-12 15:44:44 -04:00
Paul O’Shannessy
abaf0051de Merge pull request #5124 from bhamodi/master
Documentation Cleanup Round 1.
2015-10-12 12:34:54 -07:00
Baraa Hamodi
45d4296ac5 Documentation cleanup. 2015-10-12 15:33:32 -04:00
Paul O’Shannessy
875e2b36cc Merge pull request #5144 from zpao/grunt-gulp-windows
Use the right gulp executable on Windows
2015-10-12 12:28:21 -07:00
Ben Alpert
b03b195759 Merge pull request #5130 from matiassingers/jasmine-spy-call-args-consistency
Jasmine spies call args property consistency
2015-10-12 10:24:56 -07:00
Paul O’Shannessy
227ba42f81 Use the right gulp executable on Windows 2015-10-12 10:01:23 -07:00
Jim
e45e46a567 Merge pull request #5141 from pluma/patch-2
Removed ESLint warning
2015-10-12 09:59:17 -07:00
Alan Plum
0e451162bc Removed eslint warning. 2015-10-12 17:42:38 +02:00
Matias Singers
f8f2be05ce Consistently use calls[n].args[n] instead of argsForCall[n][n] for Jasmine spies 2015-10-12 22:39:19 +08:00
Ben Alpert
01817c143c Merge pull request #5129 from matiassingers/jasmine-spy-calls-length-consistency
Jasmine spies call count property consistency, take II
2015-10-11 15:03:27 -07:00
Matias Singers
dd0b1a643b Consistently use calls.length instead of callCount for Jasmine spies, take II
See #3105 for take I
2015-10-11 15:42:24 +08:00
Paul O’Shannessy
5dc2858bc9 Merge pull request #5126 from bhamodi/white-space
File Cleanup.
2015-10-10 19:30:29 -07:00
Paul O’Shannessy
0b21632f8e Merge pull request #5123 from vipulnsward/fix-html-jsx-page
- Bring back JSX compiler styling still being used on HTML JSX page
2015-10-10 19:11:26 -07:00
Baraa Hamodi
a86e349535 File Cleanup. 2015-10-10 16:05:58 -04:00
Vipul A M
2b81ea0d20 - Bring back JSX compiler styling still being used on HTML JSX page
Fixes [#5121]
2015-10-10 13:53:59 -04:00
Jim
0b29035484 Merge pull request #5120 from abloomston/patch-1
Include react-dom
2015-10-10 07:35:19 -07:00
Adam Bloomston
ab1be09d7d Include react-dom
Fixes `Uncaught ReferenceError: ReactDOM is not defined`
2015-10-10 10:17:08 -04:00
Paul O’Shannessy
be90351add Update Readme with for 0.14 2015-10-09 17:48:44 -07:00
Jim
5c3e99c7f4 Merge pull request #5116 from jimfb/download-page-links
Added react-dom to individual downloads
2015-10-09 15:17:08 -07:00
Jim
f6e09f1903 Added react-dom to individual downloads 2015-10-09 15:11:11 -07:00
Ben Alpert
fb9e1ed475 Merge pull request #5014 from spicyj/native-parents
Thread native-parent pointers through everything
2015-10-09 15:07:59 -07:00
Ben Alpert
8210299437 Add SVG/MathML support for createElement mode 2015-10-09 14:56:57 -07:00
Ben Alpert
1dca72ebfa Thread native-parent pointers through everything
Now we don't repurpose context for our own secret needs (hi Dan). In this diff I avoid storing the native parent on native (DOM) components and store it only on composites, but we'll probably want to store it on native components too soon for event bubbling.
2015-10-09 14:56:08 -07:00
Ben Alpert
a907da9430 Make Danger-test simpler and more robust 2015-10-09 14:54:42 -07:00
Ben Alpert
4e48c67120 Merge pull request #5113 from spicyj/document-context
Document context
2015-10-09 14:46:56 -07:00
Ben Alpert
28b10a9d6a Document context
Fixes #580.
2015-10-09 14:44:24 -07:00
Paul O’Shannessy
09b688efce [docs] Fix line highlights for linked-state-mixin 2015-10-09 12:32:01 -07:00
Jim
15c731edca Merge pull request #5109 from Josh-a-e/undefined_this_on_controlled_components
add test to show `this` is indeed undefined - closes #3613
2015-10-09 11:44:19 -07:00
Ben Alpert
d95381387e Merge pull request #5111 from spicyj/vdn-current
validateDOMNesting: parentTag -> current
2015-10-09 11:43:31 -07:00
Ben Alpert
9c836b09f2 validateDOMNesting: parentTag -> current 2015-10-09 11:40:55 -07:00
Joshua Evans
8f4c2997a0 add test to show this is indeed undefined - closes #3613 2015-10-09 19:37:58 +01:00
Jim
845135531a Merge pull request #5105 from jimfb/changelog-0.14
Added changelog for 0.14
2015-10-09 10:51:36 -07:00
Paul O’Shannessy
3359e2f64c Merge pull request #5101 from bcbcb/patch-1
[docs] fix forms Default Value example
2015-10-09 10:47:01 -07:00
Jim
e8be7013ba Merge pull request #4981 from iamchenxin/zh_docs
[docs] Sync up tutorial.zh-CN with en(a440f40)
2015-10-09 10:46:16 -07:00
iamchenxin
a8459214d1 [docs] Sync up tutorial.zh-CN with en(a440f40)
[docs] Amend wrong words in zh-CN

08.1-more-about-refs.zh-CN.md

Update zh-CN docs

add thinking-in-react.zh-CN.md

[docs] Update two zh-CN docs

       new file:   ref-01-top-level-api.zh-CN.md
       new file:   ref-02-component-api.zh-CN.md
2015-10-10 01:35:03 +08:00
Jim
72e70f345b Added changelog for 0.14 2015-10-09 10:26:18 -07:00
Ben Alpert
407e88d6c8 Merge pull request #5107 from mbrookes/patch-1
Grammar
2015-10-09 08:59:47 -07:00
Matt Brookes
98aecac34c Grammar
I'm assuming this was meant to say that the JSX spread syntax saves typing, not copying attributes.
2015-10-09 14:31:59 +01:00
Jim
1a7c0a4b16 Merge pull request #5102 from TracyJordan/master
Fixed some comment punctuation in ReactDOMComponent.js
2015-10-09 00:33:39 -07:00
Kevin Cheng
ff17bc25d1 Fixed punctuation 2015-10-08 19:36:05 -07:00
Brenard Cubacub
d96f319d6e [docs] fix forms Default Value example
The Default Value section in the forms docs says "This example will function much like the Controlled Components example above."

The example actually functions like the Uncontrolled Components example, not the Controlled Components example.
2015-10-08 16:41:19 -07:00
Ben Alpert
f522371cee Merge pull request #5100 from spicyj/ssr-dupe
Remove duplication in ReactServerRendering
2015-10-08 15:11:34 -07:00
Ben Alpert
d4420eca8a Remove duplication in ReactServerRendering 2015-10-08 15:06:09 -07:00
Ben Alpert
3f5747009d Merge pull request #5083 from spicyj/warn-min
Warn when using a minified copy of dev React
2015-10-08 14:08:50 -07:00
Paul O’Shannessy
c511f161df Merge pull request #5096 from songawee/docs_babel_fix
fix(docs): adjust babel release to match the babel.js changelog
2015-10-08 11:52:42 -07:00
Ben Alpert
f3a506bc0c Warn when using a minified copy of dev React
Fixes #4842.
2015-10-08 11:44:56 -07:00
songawee
8fb436a5eb fix(docs): adjust babel release to match the babel.js changelog 2015-10-08 12:44:24 -06:00
Ben Alpert
2253405dcc Merge pull request #5085 from spicyj/cdp
Extract defineProperty feature testing to one file
2015-10-08 11:33:07 -07:00
Ben Alpert
4fb39ce984 Merge pull request #5081 from spicyj/svg-tu
Don't break on SVG tags in scryRenderedDOMComponentsWithClass
2015-10-08 08:38:32 -07:00
Ben Alpert
4bb83d237e Don't break on SVG tags in scryRenderedDOMComponentsWithClass
Fixes #5076.
2015-10-08 08:29:53 -07:00
Ben Alpert
e9796cc447 Merge pull request #5084 from spicyj/rearrange-utils
Move escapeTextContentForBrowser and quoteAttributeValueForBrowser to DOM directory
2015-10-08 08:28:40 -07:00
Ben Alpert
3fb2d3f5d4 Extract defineProperty feature testing to one file
This makes it slightly more bearable to debug in IE8 with an exception breakpoint. Also the old way was just silly and could mask other bugs.
2015-10-07 18:33:13 -07:00
Ben Alpert
2637a8eaf4 Move escapeTextContentForBrowser and quoteAttributeValueForBrowser to DOM directory
Only DOM files use these.
2015-10-07 18:11:15 -07:00
Ben Alpert
a7189c57fc Merge pull request #5057 from camsong/patch-1
Text fix in ReactClass.js
2015-10-07 17:19:19 -07:00
Cam Song
9af15d3ecd Text fix in ReactClass.js
Rename 'component class' to 'function' as it should be.
2015-10-08 08:13:27 +08:00
Ben Alpert
0d12643652 Merge pull request #5078 from nickpresta/master
Add docs for `React.Children.toArray` in 0.14.0.
2015-10-07 17:02:06 -07:00
Nick Presta
319b374097 Add docs for React.Children.toArray in 0.14.0.
* Update the docs to change return type of `React.Children.map` from `object` to `array`.
2015-10-07 19:16:05 -04:00
Jim
d0970ee8b8 Merge pull request #5063 from facebook/revert-5062-revert-4959-no-shams
Remove dependence on ES5 shams per #4189
2015-10-07 14:23:35 -07:00
Jim
f97d759db1 Merge pull request #5032 from jimfb/remove-react-link
Added warning for use of ReactLink.
2015-10-07 14:23:11 -07:00
Ben Alpert
40cce38330 Merge pull request #5075 from spicyj/docs-downloads
Update downloads page for 0.14
2015-10-07 13:04:41 -07:00
Ben Alpert
f31a46cb18 Merge pull request #4983 from spicyj/id-swap
Refactor how composite type changes work, fix memory leak in ReactMount caching
2015-10-07 13:02:58 -07:00
Ben Alpert
34d84a36d6 Merge pull request #5066 from camsong/patch-2
Always use ANONYMOUS const in  ReactPropTypes.js
2015-10-07 12:57:59 -07:00
Ben Alpert
8ce7b7120c ReactMount now never expects invalid nodes in its cache
It never really made sense for us to have "invalid" nodes in the cache -- when we unmount things, we should always remove them from the cache properly. Now that swapping composite types doesn't repopulate the cache, we should be okay to now assume that everything in the cache is good.
2015-10-07 12:57:34 -07:00
Ben Alpert
fe9a76ef25 Rewrite ReactInstanceHandles-test to be less brittle 2015-10-07 12:57:34 -07:00
Ben Alpert
60491d89f8 Use returned native node for composite type-change
With this change, all unmounted components should be properly purged from ReactMount's cache.
2015-10-07 12:57:34 -07:00
Ben Alpert
743ccf090f Cache native node on native components, return it when unmounting
This is probably slightly slower for unmounts in the case that no updates were ever performed, but caching the node on the instance should make updates faster. In any case, the more important consequence of this change is that we can fix the current memory leak that happens when swapping composite types.
2015-10-07 12:57:34 -07:00
Ben Alpert
e4a43389b8 Don't use existing "root" ID if non-root
Before, if you had

```
container = <div data-reactid=".0"><div data-reactid=".0.0" /></div>;
```

and did `ReactDOM.render(<span />, container)` you would get

```
<div data-reactid=".0"><span data-reactid=".0" /></div>;
```

(along with a warning not to replace React-rendered children with a new tree like that). But that makes no sense -- the span should have a new index, not truncate the ID of the old child it's replacing.

(Now tests pass again with useCreateElement on; before they threw a "valid but unequal" on our test for this warning.)
2015-10-07 12:57:34 -07:00
Ben Alpert
8ebbb7802c Merge pull request #4918 from glenjamin/shallow-getinstance
Expose component instance in shallow rendering
2015-10-07 12:52:09 -07:00
Ben Alpert
501a2765ac Merge pull request #4947 from fabiomcosta/server_render_index
[react] making sure ReactDOMServer always uses ServerReactRootIndex, …
2015-10-07 12:51:59 -07:00
Ben Alpert
4a29fd892a Merge pull request #4779 from mnordick/master
Support CSS3 Grid Layout Module for inline styles
2015-10-07 12:51:26 -07:00
Ben Alpert
e1d4668fd5 Update downloads page for 0.14 2015-10-07 12:50:59 -07:00
Paul O’Shannessy
926f372dc5 Merge pull request #5073 from mfunkie/patch-2
Update Pure Render Mixin docs to point to new npm package
2015-10-07 12:22:04 -07:00
Paul O’Shannessy
30386b2e86 Final docs update for 0.14 2015-10-07 11:25:50 -07:00
Paul O’Shannessy
42481fe51f [docs] Update acknowledgements for 0.14 2015-10-07 11:25:44 -07:00
Mark Funk
c2ae332718 Update Pure Render Mixin docs to point to new npm package 2015-10-07 14:16:26 -04:00
Paul O’Shannessy
59cd224a03 Bump version in master for 0.15 development 2015-10-07 09:57:53 -07:00
Cam Song
a69f05c881 Always use ANONYMOUS const in ReactPropTypes.js 2015-10-07 11:28:38 +08:00
Jim
fc043bb3a5 Revert "Revert "Remove dependence on ES5 shams per #4189"" 2015-10-06 14:31:20 -07:00
Jim
c103c8d065 Added warning for use of ReactLink. 2015-10-02 11:33:48 -07:00
Ben Alpert
3b28c72142 Add rudimentary jsc perf-counters runner
Works at least on a CentOS 7 machine after running `sudo yum install
webkitgtk webkitgtk-devel`.

The only globals you get are `print` and `PerfCounters`. No `console` nor the other globals provided by the `jsc` command-line tool (load, readFile, etc) though they're probably not hard to implement.

You can disable the JIT by setting the environment variable `JSC_useJIT=false`.

Test Plan:
```
~/local/react/scripts/perf-counters$ make
~/local/react/scripts/perf-counters$ build/jsc-perf <(echo 'PerfCounters.init(); var a = PerfCounters.getCounters().instructions; print("moo"); var b = PerfCounters.getCounters().instructions; print(b - a);')
moo
72182
~/local/react/scripts/perf-counters$
```
2015-09-30 23:36:06 -07:00
Andrey Popp
41640a7475 Update CommonJS example with build script 2015-09-29 12:55:01 +03:00
James Friend
107e3014ef Perform transaction around shallow render to run lifecycle methods 2015-09-28 22:48:15 +10:00
Fabio Costa
e65fe182e7 [react] making sure ReactDOMServer always uses ServerReactRootIndex, even on an environment that can use DOM 2015-09-24 19:59:39 -07:00
Glen Mailer
241533782c Expose component instance in shallow rendering
Fixes #4056
2015-09-20 15:16:51 +01:00
Ben Alpert
b7bf1ccafe Don't build up mount-ready queue for server side rendering
This is a little faster when rendering iframe/img/form/video/audio on the server.
2015-09-15 21:47:30 -07:00
Mike Nordick
8da4efa899 Adding support for CSS3 Grid layout module.
grid-row and grid-column must be unitless numbers.
2015-09-10 15:56:11 -05:00
623 changed files with 54428 additions and 14559 deletions

26
.babelrc Normal file
View File

@@ -0,0 +1,26 @@
{
"presets": ["react"],
"ignore": ["third_party"],
"plugins": [
"fbjs-scripts/babel-6/dev-expression",
"syntax-trailing-function-commas",
"transform-es2015-template-literals",
"transform-es2015-literals",
"transform-es2015-arrow-functions",
"transform-es2015-block-scoped-functions",
["transform-es2015-classes", { "loose": true }],
"transform-es2015-object-super",
"transform-es2015-shorthand-properties",
"transform-es2015-computed-properties",
"transform-es2015-for-of",
"check-es2015-constants",
["transform-es2015-spread", { "loose": true }],
"transform-es2015-parameters",
["transform-es2015-destructuring", { "loose": true }],
"transform-es2015-block-scoping",
"transform-es2015-modules-commonjs",
"transform-es3-member-expression-literals",
"transform-es3-property-literals",
"./scripts/babel/transform-object-assign-require"
]
}

View File

@@ -11,9 +11,6 @@ docs/vendor/bundle/
examples/
# Ignore built files.
build/
# react-codemod
packages/react-codemod/test/
packages/react-codemod/scripts/
packages/react-codemod/build/
packages/react-codemod/node_modules/
vendor/react-dom.js
coverage/
scripts/bench/bench-*.js
vendor/*

View File

@@ -1,63 +0,0 @@
---
parser: babel-eslint
extends:
- ./node_modules/fbjs-scripts/eslint/.eslintrc
plugins:
- react
- react-internal
# We're stricter than the default config, mostly. We'll override a few rules and
# then enable some React specific ones.
rules:
accessor-pairs: 0
brace-style: [2, 1tbs]
comma-dangle: [2, always-multiline]
consistent-return: 2
dot-location: [2, property]
dot-notation: 2
eol-last: 2
indent: [2, 2, {SwitchCase: 1}]
jsx-quotes: [2, prefer-double]
no-bitwise: 0
no-dupe-class-members: 2
no-multi-spaces: 2
no-restricted-syntax: [2, WithStatement]
no-shadow: 2
no-unused-expressions: 2
no-unused-vars: [2, {args: none}]
quotes: [2, single, avoid-escape]
space-after-keywords: 2
space-before-blocks: 2
# TODO: enable this rule after https://github.com/eslint/eslint/pull/3768 lands
space-before-keywords: 0
strict: [2, global]
# JSX
# Our transforms set this automatically
react/display-name: 0
react/jsx-boolean-value: [2, always]
react/jsx-no-undef: 2
# We don't care to do this
react/jsx-sort-prop-types: 0
react/jsx-sort-props: 0
react/jsx-uses-react: 2
react/jsx-uses-vars: 2
# It's easier to test some things this way
react/no-did-mount-set-state: 0
react/no-did-update-set-state: 0
# We define multiple components in test files
react/no-multi-comp: 0
react/no-unknown-property: 2
# This isn't useful in our test code
react/prop-types: 0
react/react-in-jsx-scope: 2
react/self-closing-comp: 2
# We don't care to do this
react/sort-comp: 0
react/wrap-multilines: [2, {declaration: false, assignment: false}]
# CUSTOM RULES
# the second argument of warning/invariant should be a literal string
react-internal/warning-and-invariant-args: 2

73
.eslintrc.js Normal file
View File

@@ -0,0 +1,73 @@
const OFF = 0;
const WARNING = 1;
const ERROR = 2;
module.exports = {
parser: 'babel-eslint',
extends: './node_modules/fbjs-scripts/eslint/.eslintrc.js',
plugins: [
'react',
'react-internal',
],
ecmaFeatures: {
modules: false
},
// We're stricter than the default config, mostly. We'll override a few rules
// and then enable some React specific ones.
rules: {
'accessor-pairs': OFF,
'brace-style': [ERROR, '1tbs'],
'comma-dangle': [ERROR, 'always-multiline'],
'consistent-return': ERROR,
'dot-location': [ERROR, 'property'],
'dot-notation': ERROR,
'eol-last': ERROR,
'eqeqeq': [ERROR, 'allow-null'],
'indent': [ERROR, 2, {SwitchCase: 1}],
'jsx-quotes': [ERROR, 'prefer-double'],
'no-bitwise': OFF,
'no-multi-spaces': ERROR,
'no-restricted-syntax': [ERROR, 'WithStatement'],
'no-shadow': ERROR,
'no-unused-expressions': ERROR,
'no-unused-vars': [ERROR, {args: 'none'}],
'quotes': [ERROR, 'single', 'avoid-escape'],
'space-after-keywords': ERROR,
'space-before-blocks': ERROR,
'space-before-function-paren': [ERROR, {anonymous: 'never', named: 'never'}],
'space-before-keywords': ERROR,
'strict': [ERROR, 'global'],
// React & JSX
// Our transforms set this automatically
'react/display-name': OFF,
'react/jsx-boolean-value': [ERROR, 'always'],
'react/jsx-no-undef': ERROR,
// We don't care to do this
'react/jsx-sort-prop-types': OFF,
'react/jsx-sort-props': OFF,
'react/jsx-uses-react': ERROR,
'react/jsx-uses-vars': ERROR,
// It's easier to test some things this way
'react/no-did-mount-set-state': OFF,
'react/no-did-update-set-state': OFF,
// We define multiple components in test files
'react/no-multi-comp': OFF,
'react/no-unknown-property': OFF,
// This isn't useful in our test code
'react/prop-types': OFF,
'react/react-in-jsx-scope': ERROR,
'react/self-closing-comp': ERROR,
// We don't care to do this
'react/sort-comp': OFF,
'react/wrap-multilines': [ERROR, {declaration: false, assignment: false}],
// CUSTOM RULES
// the second argument of warning/invariant should be a literal string
'react-internal/warning-and-invariant-args': ERROR,
}
};

2
.gitignore vendored
View File

@@ -7,6 +7,7 @@ static
_SpecRunner.html
__benchmarks__
build/
coverage/
.module-cache
*.gem
docs/.bundle
@@ -24,3 +25,4 @@ chrome-user-data
*.sublime-workspace
.idea
*.iml
.vscode

View File

@@ -7,47 +7,61 @@ Andreas Savvides <asavvides@twitter.com> <AnSavvides@users.noreply.github.com>
Andreas Savvides <asavvides@twitter.com> <andreas@nibbli.com>
Andreas Svensson <andreas@syranide.com>
Andres Suarez <zertosh@gmail.com>
Andrew Kulakov <avk@8xx8.ru>
Andrew Sokolov <asokolov@atlassian.com>
Anto Aravinth <anto.aravinth.cse@gmail.com>
Baraa Hamodi <bhamodi@uwaterloo.ca> <baraa@optimizely.com>
Ben Alpert <ben@benalpert.com> <balpert@fb.com>
Ben Alpert <ben@benalpert.com> <spicyjalapeno@gmail.com>
Ben Halpern <bendhalpern@gmail.com>
Ben Newman <bn@cs.stanford.edu> <benjamn@fb.com>
Benjamin Woodruff <github@benjam.info> <bgw@fb.com>
Bill Fisher <fisherwebdev@gmail.com>
Blaine Kasten <blainekasten@gmail.com>
Brandon Tilley <brandon@brandontilley.com>
Changsoon Bok <winmain@gmail.com>
Cheng Lou <chenglou92@gmail.com> <chenglou@fb.com>
Christian Oliff <christianoliff@yahoo.com>
Christoph Pojer <christoph.pojer@gmail.com>
Christoph Pojer <christoph.pojer@gmail.com> <cpojer@fb.com>
Connor McSheffrey <c@conr.me> <connor.mcsheffrey@gmail.com>
Conor Hastings <hastings.conorm@gmail.com> <conor@socialtables.com>
Dan Schafer <dschafer@fb.com>
Daniel Gasienica <daniel@gasienica.ch> <daniel@fiftythree.com>
Daniel Gasienica <daniel@gasienica.ch> <dgasienica@zynga.com>
Daniel Hejl <daniel.hejl@hotmail.com>
Daniel Lo Nigro <daniel@dan.cx> <danlo@fb.com>
Dave Galbraith <dave@jut.io>
Dennis Johnson <songawee@gmail.com>
Dmitry Blues <dmitri.blyus@gmail.com>
Dongsheng Liu <bellanchor@gmail.com>
Erik Harper <eharper@mixpo.com>
Evan Coonrod <evan@paloalto.com>
Fabio M. Costa <fabiomcosta@gmail.com> <fabs@fb.com>
Felix Kling <felix.kling@gmx.net> <fkling@fb.com>
François-Xavier Bois <fxbois@gmail.com>
Fyodor Ivanishchev <cbrwizard@gmail.com>
Gabe Levi <gabelevi@gmail.com> <glevi@fb.com>
Geert Pasteels <geert.pasteels@gmail.com>
George A Sisco III <george.sisco@gmail.com>
Georgii Dolzhykov <thorn.mailbox@gmail.com>
Harry Hull <harry.hull1@gmail.com>
Hendrik Swanepoel <hendrik.swanepoel@gmail.com>
Hyeock Kwon <doublus@gmail.com>
Ian Obermiller <ian@obermillers.com> <iano@fb.com>
Ilia Pavlenkov <dortonway@gmail.com>
Ilyá Belsky <gelias.gbelsky@gmail.com>
Ingvar Stepanyan <me@rreverser.com> <rreverser@ubuntu.rreverser.a4.internal.cloudapp.net>
Irae Carvalho <irae@irae.pro.br>
Ivan Vergiliev <ivan.vergiliev@gmail.com>
JJ Weber <jj.weber@gmail.com>
Jae Hun Ro <jhr24@duke.edu>
Jaime Mingo <j.mingov@3boll.com>
James Brantly <james@jbrantly.com>
Jan Hancic <jan.hancic@gmail.com> <jan.hancic@caplin.com>
Jan Kassens <jan@kassens.net> <jkassens@fb.com>
Jason Bonta <jbonta@gmail.com> <jasonbonta@fb.com>
Jason Quense <monastic.panic@gmail.com>
Jason Trill <jason@jasontrill.com>
Jeff Chan <jefftchan@gmail.com> <jeff@quizlet.com>
Jeff Morrison <jeff@anafx.com> <Jeff@anafx.com>
@@ -56,10 +70,14 @@ Jeff Morrison <jeff@anafx.com> <lbljeffmo@gmail.com>
Jeffrey Lin <lin.jeffrey@gmail.com> <jeffreylin@fb.com>
Jim Sproch <jsproch@fb.com>
Jim Sproch <jsproch@fb.com> <jsfb@github>
Jim Sproch <jsproch@fb.com> <none@no-reply.com>
Jinwoo Oh <arkist@gmail.com>
Jinxiu Lee <lee.jinxiu@gmail.com>
Jiyeon Seo <zzzeons@gmail.com>
Jon Chester <jonchester@fb.com>
Jon Madison <jon@tfftech.com>
Jonathan Hsu <jhiswin@gmail.com>
Jonathan Persson <persson.jonathan@gmail.com> <jonathan.persson@creuna.se>
Jordan Walke <jordojw@gmail.com>
Jordan Walke <jordojw@gmail.com> <jordanjcw@fb.com>
Joseph Savona <joesavona@fb.com> <josephsavona@users.noreply.github.com>
@@ -69,10 +87,12 @@ Jun Wu <quark@lihdd.net>
Justin Robison <jrobison151@gmail.com>
Keito Uchiyama <projects@keito.me> <keito@fb.com>
Kevin Coughlin <kevintcoughlin@gmail.com> <kevincoughlin@tumblr.com>
Krystian Karczewski <karcz.k@gmail.com>
Kunal Mehta <k.mehta@berkeley.edu> <kunalm@fb.com>
Laurence Rowe <l@lrowe.co.uk> <laurence@lrowe.co.uk>
Marcin K. <katzoo@github.mail>
Mark Anderson <undernewmanagement@users.noreply.github.com>
Mark Funk <mfunk86@gmail.com> <mark@boomtownroi.com>
Martin Andert <mandert@gmail.com>
Mathieu M-Gosselin <mathieumg@gmail.com> <mathieumg@atx33.com>
Matsunoki <himkt@klis.tsukuba.ac.jp>
@@ -80,7 +100,10 @@ Matt Brookes <matt@brookes.net>
Matt Dunn-Rankin <mdunnrankin@gmail.com> <matchu1993@gmail.com>
Matt Zabriskie <mzabriskie@gmail.com>
Matthew Johnston <matthewjohnston4@outlook.com> <matthewjohnston4@users.noreply.github.com>
Matthew Looi <looi.matthew@gmail.com>
Mattijs Kneppers <mattijs@arttech.nl>
Max Heiber <max.heiber@gmail.com>
Max Stoiber <contact@mstoiber.com>
Michal Srb <xixixao@seznam.cz> xixixao <xixixao@seznam.cz>
Michelle Todd <himichelletodd@gmail.com> <michelle@khanacademy.org>
Mihai Parparita <mihai.parparita@gmail.com> <mihai@persistent.info>
@@ -101,27 +124,39 @@ Petri Lievonen <plievone@cc.hut.fi>
Petri Lievonen <plievone@cc.hut.fi> <petri.lievonen@tkk.fi>
Pieter Vanderwerff <me@pieter.io> <pieter@heyday.co.nz>
Pouja Nikray <poujanik@gmail.com>
Rainer Oviir <roviir@gmail.com> <raineroviir@rainers-MacBook-Pro.local>
Ray <ray@tomo.im>
Richard Feldman <richard.t.feldman@gmail.com> <richard@noredink.com>
Richard Livesey <Livesey7@hotmail.co.uk>
Rob Arnold <robarnold@cs.cmu.edu>
Robert Binna <rbinna@gmail.com> <speedskater@users.noreply.github.com>
Robin Frischmann <robin@rofrischmann.de>
Sander Spies <sandermail@gmail.com>
Scott Feeney <scott@oceanbase.org> <smf@fb.com>
Sebastian Markbåge <sebastian@calyptus.eu> <sema@fb.com>
Sergey Rubanov <chi187@gmail.com>
Shogun Sea <shogunsea08@gmail.com> <xxin@groupon.com>
Soichiro Kawamura <mail@w-st.com>
Sota Ohara <ohrst.18@gmail.com>
Steven Luscher <react@steveluscher.com> <github@steveluscher.com>
Steven Luscher <react@steveluscher.com> <steveluscher@fb.com>
Steven Luscher <react@steveluscher.com> <steveluscher@instagram.com>
Steven Luscher <react@steveluscher.com> <steveluscher@users.noreply.github.com>
Stoyan Stefanov <ssttoo@ymail.com>
Tengfei Guo <terryr3rd@yeah.net> <tfguo369@gmail.com>
Thomas Aylott <oblivious@subtlegradient.com> <aylott@fb.com>
Timothy Yung <yungsters@gmail.com> <yungsters@fb.com>
Tomoya Suzuki <tmysz.dev@gmail.com>
Vasiliy Loginevskiy <Yeti.or@gmail.com>
Vasiliy Loginevskiy <Yeti.or@gmail.com> <yeti-or@yandex-team.ru>
Vjeux <vjeuxx@gmail.com>
Vjeux <vjeuxx@gmail.com> <vjeux@fb.com>
Volkan Unsal <spocksplanet@gmail.com>
Wander Wang <wander.wang@ismole.com>
Xavier Morel <xmo-odoo@users.noreply.github.com>
YouBao Nong <noyobo@gmail.com> <nongyoubao@alibaba-inc.com>
Yutaka Nakajima <nakazye@gmail.com>
Zach Bruggeman <mail@bruggie.com> <zbruggeman@me.com>
iawia002 <z2d@jifangcheng.com> <850127508@qq.com>
元彦 <yuanyan@users.noreply.github.com>
张敏 <cookfront@gmail.com>

View File

@@ -54,6 +54,8 @@ script:
-F "react-with-addons.min=@build/react-with-addons.min.js" \
-F "react-dom=@build/react-dom.js" \
-F "react-dom.min=@build/react-dom.min.js" \
-F "react-dom-server=@build/react-dom-server.js" \
-F "react-dom-server.min=@build/react-dom-server.min.js" \
-F "npm-react=@build/packages/react.tgz" \
-F "npm-react-dom=@build/packages/react-dom.tgz" \
-F "commit=$TRAVIS_COMMIT" \
@@ -63,13 +65,21 @@ script:
-F "branch=$TRAVIS_BRANCH" \
$SERVER
fi
elif [ "$TEST_TYPE" = test ]; then
set -e
./node_modules/.bin/grunt jest:normal
echo 'Testing in server-render (HTML generation) mode...'
printf '\nmodule.exports.useCreateElement = false;\n' \
>> src/renderers/dom/shared/ReactDOMFeatureFlags.js
./node_modules/.bin/grunt jest:normal
git checkout -- src/renderers/dom/shared/ReactDOMFeatureFlags.js
else
./node_modules/.bin/grunt $TEST_TYPE
fi
env:
matrix:
- TEST_TYPE=build
- TEST_TYPE=jest
- TEST_TYPE=test
- TEST_TYPE=lint
- TEST_TYPE=build_website
global:
@@ -79,8 +89,8 @@ env:
- secure: dkpPW+VnoqC/okhRdV90m36NcyBFhcwEKL3bNFExAwi0dXnFao8RoFlvnwiPlA23h2faROkMIetXlti6Aju08BgUFV+f9aL6vLyU7gUent4Nd3413zf2fwDtXIWIETg6uLnOpSykGKgCAT/hY3Q2oPLqOoY0OxfgnbqwxkxljrE=
# GITHUB_TOKEN
- secure: EHCyCSKMwKlLHNtcj9nmkRzmiiPE3aDGlPcnEyrDJeRI0SeN/iCXHXfFivR0vFq3vr+9naMBczAR2AEidtps5KbJrKqdZnjPFRbmfVtzWr/LlvVCub3u13Pub6TdKIVBTny1PuZ5X8GvdxMNVig89jGjvzhhWuQRaz3VhJnTra4=
matrix:
fast_finish: true
# COVERALLS_TOKEN
- secure: h/cUq+TrUMZOQmkFD7CvuwX0uAwmjIfKZ4qSUzY+QzUtDzOzA0L/XF84xTBq1Q5YYsEiaoF6GxxGCdrLQiBA/ZTd+88UHgeZPMRvi0xG9Q+PeePVOsZMTxy4/WWFgOfSQCk49Mj9zizGgO78i6vxq+SDXMtFHnZ+TpPJIEW6/m0=
notifications:
irc:
use_notice: true

147
AUTHORS
View File

@@ -1,17 +1,21 @@
839 <8398a7@gmail.com>
Aaron Franks <aaron.franks@gmail.com>
Aaron Gelter <aaron.gelter@harman.com>
Adam Bloomston <adam@glitterfram.es>
Adam Krebs <amk528@cs.nyu.edu>
Adam Mark <adammark75@gmail.com>
Adam Solove <asolove@gmail.com>
Adam Timberlake <adam.timberlake@gmail.com>
Adam Zapletal <adamzap@gmail.com>
Ahmad Wali Sidiqi <wali-s@users.noreply.github.com>
Alan Plum <me@pluma.io>
Alan Souza <alansouzati@gmail.com>
Alan deLevie <adelevie@gmail.com>
Alastair Hole <afhole@gmail.com>
Alex <ultrafez@users.noreply.github.com>
Alex Boatwright <drdelambre@gmail.com>
Alex Boyd <alex@opengroove.org>
Alex Dajani <xelad1@gmail.com>
Alex Lopatin <alex@alexlopatin.com>
Alex Mykyta <dancingwithcows@gmail.com>
Alex Pien <alexpien@gmail.com>
@@ -23,22 +27,28 @@ Alexander Tseung <alextsg@gmail.com>
Alexandre Gaudencio <shahor@shahor.fr>
Alexey Raspopov <avenger7x13@gmail.com>
Alexey Shamrin <shamrin@gmail.com>
Ali Ukani <ali.ukani@gmail.com>
Andre Z Sanchez <andrezacsanchez@gmail.com>
Andreas Savvides <asavvides@twitter.com>
Andreas Svensson <andreas@syranide.com>
Andres Kalle <mjomble@gmail.com>
Andres Suarez <zertosh@gmail.com>
Andrew Clark <acdlite@me.com>
Andrew Cobby <cobbweb@users.noreply.github.com>
Andrew Davey <andrew@equin.co.uk>
Andrew Henderson <andrew.m.henderson@gmail.com>
Andrew Kulakov <avk@8xx8.ru>
Andrew Rasmussen <andras@fb.com>
Andrew Sokolov <asokolov@atlassian.com>
Andrew Zich <azich@fb.com>
Andrey Popp <8mayday@gmail.com>
Anthony van der Hoorn <anthony.vanderhoorn@gmail.com>
Anto Aravinth <anto.aravinth.cse@gmail.com>
Antonio Ruberto <anto.ruberto@gmail.com>
Antti Ahti <antti.ahti@gmail.com>
Anuj Tomar <ankuto@gmail.com>
AoDev <AoDev@users.noreply.github.com>
April Arcus <april.arcus@gmail.com>
Areeb Malik <areeb.malik91@gmail.com>
Aria Buckles <aria@khanacademy.org>
Aria Stewart <aredridel@dinhe.net>
@@ -53,7 +63,9 @@ Battaile Fauber <battaile@gmail.com>
Beau Smith <beau@beausmith.com>
Ben Alpert <ben@benalpert.com>
Ben Anderson <banderson@constantcontact.com>
Ben Brooks <ben@benbrooks.net>
Ben Foxall <benfoxall@gmail.com>
Ben Halpern <bendhalpern@gmail.com>
Ben Jaffe <jaffe.ben@gmail.com>
Ben Moss <ben@mossity.com>
Ben Newman <bn@cs.stanford.edu>
@@ -61,16 +73,20 @@ Ben Ripkens <bripkens.dev@gmail.com>
Benjamin Keen <ben.keen@gmail.com>
Benjamin Leiken <benleiken@gmail.com>
Benjamin Woodruff <github@benjam.info>
Benjy Cui <benjytrys@gmail.com>
Bill Blanchard <bill@plumbdev.com>
Bill Fisher <fisherwebdev@gmail.com>
Blaine Hatab <jbhatab@gmail.com>
Blaine Kasten <blainekasten@gmail.com>
Bob Eagan <bob@synapsestudios.com>
Bob Ralian <bob.ralian@gmail.com>
Bob Renwick <bob.renwick@gmail.com>
Bobby <puppybytes@gmail.com>
Bojan Mihelac <bmihelac@mihelac.org>
Bradley Spaulding <brad.spaulding@gmail.com>
Brandon Bloom <brandon@brandonbloom.name>
Brandon Tilley <brandon@brandontilley.com>
Brenard Cubacub <bcbcb@users.noreply.github.com>
Brian Cooke <bri@bricooke.com>
Brian Holt <btholt@gmail.com>
Brian Hsu <brianhsu@Brians-MacBook-Pro.local>
@@ -81,14 +97,19 @@ Brian Rue <brian@rollbar.com>
Bruno Škvorc <bruno@skvorc.me>
Cam Song <neosoyn@gmail.com>
Cam Spiers <camspiers@gmail.com>
Cameron Chamberlain <git@camjc.com>
Cameron Matheson <cameron@instructure.com>
Carter Chung <carterchung@users.noreply.github.com>
Cassus Adam Banko <banko.adam@gmail.com>
Cat Chen <catchen@fb.com>
Cedric Sohrauer <cedric.sohrauer@infopark.de>
Cesar William Alvarenga <cesarwbr@gmail.com>
Changsoon Bok <winmain@gmail.com>
Charles Marsh <charlie@khanacademy.org>
Chase Adams <realchaseadams@gmail.com>
Cheng Lou <chenglou92@gmail.com>
Chitharanjan Das <das.chitharanjan@gmail.com>
Chris Bolin <bolin.chris@gmail.com>
Chris Grovers <chrisgrovers@users.noreply.github.com>
Chris Ha <chriskevinha@gmail.com>
Chris Rebert <github@rebertia.com>
@@ -96,12 +117,15 @@ Chris Sciolla <csciolla1@gmail.com>
Christian Alfoni <christianalfoni@gmail.com>
Christian Oliff <christianoliff@yahoo.com>
Christian Roman <chroman16@gmail.com>
Christoffer Sawicki <christoffer.sawicki@gmail.com>
Christoph Pojer <christoph.pojer@gmail.com>
Christopher Monsanto <chris@monsan.to>
Clay Allsopp <clay.allsopp@gmail.com>
Connor McSheffrey <c@conr.me>
Conor Hastings <hastings.conorm@gmail.com>
Cory House <housecor@gmail.com>
Cotton Hou <himcotton@gmail.com>
Craig Akimoto <strawbrary@users.noreply.github.com>
Cristovao Verstraeten <cristovao@apleasantview.com>
Damien Pellier <dpellier@leadformance.com>
Dan Abramov <dan.abramov@gmail.com>
@@ -111,6 +135,7 @@ Daniel Carlsson <daniel.carlsson.1987@gmail.com>
Daniel Cousens <dcousens@users.noreply.github.com>
Daniel Friesen <daniel@nadir-seen-fire.com>
Daniel Gasienica <daniel@gasienica.ch>
Daniel Hejl <daniel.hejl@hotmail.com>
Daniel Hejl <hejldaniel@gmail.com>
Daniel Lo Nigro <daniel@dan.cx>
Daniel Mané <danmane@gmail.com>
@@ -121,23 +146,31 @@ Danny Ben-David <dannybd@fb.com>
Darcy <smadad@me.com>
Daryl Lau <daryl@weak.io>
Darío Javier Cravero <dario@uxtemple.com>
Dave Galbraith <dave@jut.io>
David Baker <djbaker2@gmail.com>
David Ed Mellum <david@edmellum.com>
David Goldberg <gberg1@users.noreply.github.com>
David Granado <davidjgranado@gmail.com>
David Greenspan <dgreenspan@alum.mit.edu>
David Hellsing <david@aino.se>
David Hu <davidhu91@gmail.com>
David Khourshid <davidkpiano@gmail.com>
David Mininger <dmininger@gmail.com>
David Neubauer <davidneub@gmail.com>
David Percy <davetp425@gmail.com>
Dean Shi <dnshi@users.noreply.github.com>
Denis Sokolov <denis@sokolov.cc>
Deniss Jacenko <deniss.jacenko+github@gmail.com>
Dennis Johnson <djohnson@rallydev.com>
Devon Blandin <dblandin@gmail.com>
Devon Harvey <devonharvey@gmail.com>
Dmitrii Abramov <dmitrii@rheia.us>
Dmitriy Rozhkov <dmitriy.rozhkov@xing.com>
Dmitry Blues <dmitri.blyus@gmail.com>
Dmitry Mazuro <dmitry.mazuro@icloud.com>
Domenico Matteo <matteo.domenico@gmail.com>
Don Abrams <donabrams@gmail.com>
Dongsheng Liu <bellanchor@gmail.com>
Dustan Kasten <dustan.kasten@gmail.com>
Dustin Getz <dgetz@wingspan.com>
Dylan Harrington <dylanharrington@gmail.com>
@@ -153,6 +186,7 @@ Eric Schoffstall <contra@wearefractal.com>
Erik Harper <eharper@mixpo.com>
Espen Hovlandsdal <rexxars@gmail.com>
Evan Coonrod <evan@paloalto.com>
Evan Vosberg <evanvosberg@urban.to>
Fabio M. Costa <fabiomcosta@gmail.com>
Federico Rampazzo <frampone@gmail.com>
Felipe Oliveira Carvalho <felipekde@gmail.com>
@@ -162,11 +196,15 @@ Fernando Correia <fernando@servicero.com>
Frankie Bagnardi <f.bagnardi@gmail.com>
François-Xavier Bois <fxbois@gmail.com>
Fred Zhao <fredz@fb.com>
Freddy Rangel <frederick.rangel@gmail.com>
Fyodor Ivanishchev <cbrwizard@gmail.com>
G Scott Olson <gscottolson@gmail.com>
G. Kay Lee <balancetraveller+github@gmail.com>
Gabe Levi <gabelevi@gmail.com>
Gajus Kuizinas <g.kuizinas@anuary.com>
Gareth Nicholson <gareth.nic@gmail.com>
Garren Smith <garren.smith@gmail.com>
Gavin McQuistin <gavin@kickfiredesign.com>
Geert Pasteels <geert.pasteels@gmail.com>
Geert-Jan Brits <gbrits@gmail.com>
George A Sisco III <george.sisco@gmail.com>
@@ -187,39 +225,52 @@ Harshad Sabne <harshadsabne@users.noreply.github.com>
Hekar Khani <hekark@gmail.com>
Hendrik Swanepoel <hendrik.swanepoel@gmail.com>
Henrik Nyh <henrik@nyh.se>
Henry Wong <henryw4k@gmail.com>
Henry Zhu <hi@henryzoo.com>
Hideo Matsumoto <hideo-m@pekeq.com>
Hou Chia <kchia87@gmail.com>
Huang-Wei Chang <chang.huangwei.01@gmail.com>
Hugo Agbonon <hugo@agbonon.fr>
Hugo Jobling <me@thisishugo.com>
Hyeock Kwon <doublus@gmail.com>
Héliton Nordt <hnordt@hnordt.com>
Ian Obermiller <ian@obermillers.com>
Ignacio Carbajo <icarbajop@gmail.com>
Igor Scekic <igorscekic2@gmail.com>
Ilia Pavlenkov <dortonway@gmail.com>
Ilya Shuklin <ilya.shuklin@gmail.com>
Ilyá Belsky <gelias.gbelsky@gmail.com>
Ingvar Stepanyan <me@rreverser.com>
Irae Carvalho <irae@irae.pro.br>
Isaac Salier-Hellendag <isaac@fb.com>
Iurii Kucherov <yuyokk@gmail.com>
Ivan Kozik <ivan@ludios.org>
Ivan Krechetov <ikr@ikr.su>
Ivan Vergiliev <ivan.vergiliev@gmail.com>
J. Andrew Brassington <jabbrass@zoho.com>
J. Renée Beach <splendidnoise@gmail.com>
JD Isaacks <jd@jisaacks.com>
JJ Weber <jj.weber@gmail.com>
JW <JW00000@gmail.com>
Jack Zhang <jzhang31191@gmail.com>
Jackie Wung <jacquelinewung@gmail.com>
Jacob Gable <jacob.gable@gmail.com>
Jacob Greenleaf <jake@imgur.com>
Jae Hun Ro <jhr24@duke.edu>
Jaeho Lee <me@jaeholee.org>
Jaime Mingo <j.mingov@3boll.com>
Jake Worth <jakeworth82@gmail.com>
Jakub Malinowski <jakubmal@gmail.com>
James <james@mystrata.com>
James Brantly <james@jbrantly.com>
James Burnett <jtburnett@tribune.com>
James Friend <james@jsdf.co>
James Ide <ide@fb.com>
James Long <longster@gmail.com>
James Pearce <jpearce@fb.com>
James Seppi <james.seppi@gmail.com>
James South <james_south@hotmail.com>
James Wen <jrw2175@columbia.edu>
Jamie Wong <jamie.lf.wong@gmail.com>
Jamis Charles <jacharles@paypal.com>
Jamison Dance <jergason@gmail.com>
@@ -245,6 +296,7 @@ Jeff Kolesky <github@kolesky.com>
Jeff Morrison <jeff@anafx.com>
Jeff Welch <whatthejeff@gmail.com>
Jeffrey Lin <lin.jeffrey@gmail.com>
Jeremy Fairbank <elpapapollo@gmail.com>
Jesse Skinner <jesse@thefutureoftheweb.com>
Jignesh Kakadiya <jigneshhk1992@gmail.com>
Jim OBrien <jimobrien930@gmail.com>
@@ -252,14 +304,19 @@ Jim Sproch <jsproch@fb.com>
Jimmy Jea <jimjea@gmail.com>
Jing Chen <jingc@fb.com>
Jinwoo Oh <arkist@gmail.com>
Jinxiu Lee <lee.jinxiu@gmail.com>
Jiyeon Seo <zzzeons@gmail.com>
Jody McIntyre <scjody@modernduck.com>
Joe Critchley <joecritch@gmail.com>
Joe Stein <joeaarons@gmail.com>
Joel Auterson <joel.auterson@googlemail.com>
Johannes Baiter <johannes.baiter@gmail.com>
Johannes Emerich <johannes@emerich.de>
Johannes Lumpe <johannes@johanneslumpe.de>
John Heroy <johnheroy@users.noreply.github.com>
John Ryan <tjfryan@fb.com>
John Watson <jwatson@fb.com>
John-David Dalton <john.david.dalton@gmail.com>
Jon Beebe <jon.beebe@daveramsey.com>
Jon Chester <jonchester@fb.com>
Jon Hester <jon.d.hester@gmail.com>
@@ -269,6 +326,7 @@ Jon Tewksbury <jontewks@gmail.com>
Jonas Enlund <jonas.enlund@gmail.com>
Jonas Gebhardt <jonas@instagram.com>
Jonathan Hsu <jhiswin@gmail.com>
Jonathan Persson <persson.jonathan@gmail.com>
Jordan Harband <ljharb@gmail.com>
Jordan Walke <jordojw@gmail.com>
Jorrit Schippers <jorrit@ncode.nl>
@@ -276,7 +334,9 @@ Joseph Nudell <joenudell@gmail.com>
Joseph Savona <joesavona@fb.com>
Josh Bassett <josh.bassett@gmail.com>
Josh Duck <josh@fb.com>
Josh Perez <josh.perez@airbnb.com>
Josh Yudaken <yud@instagram.com>
Joshua Evans <joshua.evans@quantified.co>
Joshua Go <joshuago@gmail.com>
Joshua Goldberg <jsgoldberg90@gmail.com>
Joshua Ma <me@joshma.com>
@@ -285,23 +345,34 @@ Juan Serrano <germ13@users.noreply.github.com>
Julen Ruiz Aizpuru <julenx@gmail.com>
Julian Viereck <julian.viereck@gmail.com>
Julien Bordellier <git@julienbordellier.com>
Julio Lopez <ljuliom@gmail.com>
Jun Wu <quark@lihdd.net>
Juraj Dudak <jdudak@fb.com>
Justas Brazauskas <brazauskasjustas@gmail.com>
Justin Jaffray <justinjaffray@khanacademy.org>
Justin Robison <jrobison151@gmail.com>
Justin Woo <moomoowoo@gmail.com>
Kale <krydrogen@gmail.com>
Kamron Batman <kamronbatman@users.noreply.github.com>
Karl Mikkelsen <karl@kingkarl.com>
Karpich Dmitry <karpich@gollard.ru>
Keito Uchiyama <projects@keito.me>
Ken Powers <ken@kenpowers.net>
Kent C. Dodds <kent@doddsfamily.us>
Kevin Cheng <09chengk@gmail.com>
Kevin Coughlin <kevintcoughlin@gmail.com>
Kevin Huang <huang.kev@gmail.com>
Kevin Lau <thekevlau@gmail.com>
Kevin Old <kevin@kevinold.com>
Kevin Robinson <krobinson@twitter.com>
Kewei Jiang <jkewei328@hotmail.com>
Kier Borromeo <seraphipod@gmail.com>
KimCoding <jeokrang@hanmail.net>
Kirk Steven Hansen <hanski07@kirk-hansens-macbook.local>
Kit Randel <kit@nocturne.net.nz>
Kohei TAKATA <kt.koheitakata@gmail.com>
Koo Youngmin <youngmin@youngminz.kr>
Krystian Karczewski <karcz.k@gmail.com>
Kunal Mehta <k.mehta@berkeley.edu>
Kurt Ruppel <me@kurtruppel.com>
Kyle Kelley <rgbkrk@gmail.com>
@@ -311,6 +382,7 @@ Laurent Etiemble <laurent.etiemble@monobjc.net>
Lee Byron <lee@leebyron.com>
Lee Jaeyoung <jaeyoung@monodiary.net>
Lei <tendant@gmail.com>
Leland Richardson <leland.m.richardson@gmail.com>
Leon Fedotov <LeonFedotov@users.noreply.github.com>
Leon Yip <lyip1992@users.noreply.github.com>
Leonardo YongUk Kim <dalinaum@gmail.com>
@@ -318,71 +390,99 @@ Levi Buzolic <levibuzolic@gmail.com>
Levi McCallum <levi@levimccallum.com>
Lily <qvang.j@gmail.com>
Logan Allen <loganfynne@gmail.com>
Lovisa Svallingson <lovisasvallingson@gmail.com>
Ludovico Fischer <livrerie@gmail.com>
Luigy Leon <luichi.19@gmail.com>
Luke Horvat <lukehorvat@gmail.com>
MIKAMI Yoshiyuki <yoshuki@saikyoline.jp>
Maher Beg <maherbeg@gmail.com>
Manas <prometheansacrifice@gmail.com>
Marcin K. <katzoo@github.mail>
Marcin Kwiatkowski <marcin.kwiatkowski@hotmail.com>
Marcin Szczepanski <marcins@gmail.com>
Mariano Desanze <protronm@gmail.com>
Marjan <marjan.georgiev@gmail.com>
Mark Anderson <undernewmanagement@users.noreply.github.com>
Mark Funk <mark@boomtownroi.com>
Mark Funk <mfunk86@gmail.com>
Mark Hintz <markohintz@gmail.com>
Mark IJbema <markijbema@gmail.com>
Mark Murphy <murphy.mark@live.ca>
Mark Richardson <echo@fb.com>
Mark Rushakoff <mark@influxdb.com>
Mark Sun <sunmark14@gmail.com>
Marlon Landaverde <milanlandaverde@gmail.com>
Marshall Roch <mroch@fb.com>
Martin Andert <mandert@gmail.com>
Martin Hujer <mhujer@gmail.com>
Martin Jul <martin@mjul.com>
Martin Konicek <mkonicek@fb.com>
Martin Mihaylov <martomi@users.noreply.github.com>
Masaki KOBAYASHI <makky.4d6b.3f5@gmail.com>
Mathieu M-Gosselin <mathieumg@gmail.com>
Mathieu Savy <savy.mathieu@gmail.com>
Matias Singers <mail@matiassingers.com>
Matsunoki <himkt@klis.tsukuba.ac.jp>
Matt Brookes <matt@brookes.net>
Matt Dunn-Rankin <mdunnrankin@gmail.com>
Matt Harrison <mt.harrison86@gmail.com>
Matt Huggins <matt.huggins@gmail.com>
Matt Stow <matt.stow@foxsports.com.au>
Matt Zabriskie <mzabriskie@gmail.com>
Matthew Dapena-Tretter <m@tthewwithanm.com>
Matthew Herbst <mherbst@chegg.com>
Matthew Hodgson <matthew@matrix.org>
Matthew Johnston <matthewjohnston4@outlook.com>
Matthew King <mking@users.noreply.github.com>
Matthew Looi <looi.matthew@gmail.com>
Matthew Miner <matthew@matthewminer.com>
Matthias Le Brun <mlbli@me.com>
Matti Nelimarkka <matti.nelimarkka@hiit.fi>
Mattijs Kneppers <mattijs@arttech.nl>
Max F. Albrecht <1@178.is>
Max Heiber <max.heiber@gmail.com>
Max Stoiber <contact@mstoiber.com>
Maxi Ferreira <charca@gmail.com>
Maxim Abramchuk <MaximAbramchuck@gmail.com>
Merrick Christensen <merrick.christensen@gmail.com>
Mert Kahyaoğlu <mertkahyaoglu93@gmail.com>
Michael Chan <mijoch@gmail.com>
Michael McDermott <michael@mgmcdermott.com>
Michael Randers-Pehrson <michael.rp@gmail.com>
Michael Ridgway <mridgway@yahoo-inc.com>
Michael Warner <MichaelJWarner@hotmail.com>
Michael Wiencek <mwtuea@gmail.com>
Michael Ziwisky <mikezx@gmail.com>
Michal Srb <xixixao@seznam.cz>
Michelle Todd <himichelletodd@gmail.com>
Mihai Parparita <mihai.parparita@gmail.com>
Mike D Pilsbury <mike.pilsbury@gmail.com>
Mike Groseclose <mike.groseclose@gmail.com>
Mike Nordick <mnordick>
Mikolaj Dadela <mikolaj.dadela@hgv-online.de>
Miles Johnson <mileswjohnson@gmail.com>
Minwe LUO <minwe@yunshipei.com>
Miorel Palii <miorel@fb.com>
Morhaus <alexandre.kirszenberg@gmail.com>
Moshe Kolodny <kolodny.github@gmail.com>
Mouad Debbar <mdebbar@fb.com>
Murad <rogozhnikoff@users.noreply.github.com>
Murray M. Moss <murray@mmoss.name>
Nadeesha Cabral <nadeesha.cabral@gmail.com>
Naman Goel <naman34@gmail.com>
Nate Hunzaker <nate.hunzaker@gmail.com>
Nate Lee <nathaniel.jy.lee88@gmail.com>
Nathan Smith <NogsMPLS@users.noreply.github.com>
Nathan White <nw@nwhite.net>
Nee <944316342@qq.com>
Neri Marschik <marschik_neri@cyberagent.co.jp>
Nguyen Truong Duy <truongduy134@yahoo.com>
Nicholas Bergson-Shilcock <me@nicholasbs.net>
Nicholas Clawson <nickclaw@users.noreply.github.com>
Nick Balestra <nickbalestra@users.noreply.github.com>
Nick Fitzgerald <fitzgen@gmail.com>
Nick Gavalas <njg57@cornell.edu>
Nick Merwin <nick@lemurheavy.com>
Nick Presta <nick@nickpresta.ca>
Nick Raienko <enaqxx@gmail.com>
Nick Thompson <ncthom91@gmail.com>
Nick Williams <WickyNilliams@users.noreply.github.com>
@@ -398,8 +498,10 @@ Owen Coutts <owenc@fb.com>
Pablo Lacerda de Miranda <pablolm@yahoo-inc.com>
Paolo Moretti <moretti@users.noreply.github.com>
Pascal Hartig <passy@twitter.com>
Patrick <info@telepark.de>
Patrick Laughlin <patrick@laughl.info>
Patrick Stapleton <github@gdi2290.com>
Paul Benigeri <me@benigeri.com>
Paul Harper <benekastah@gmail.com>
Paul OShannessy <paul@oshannessy.com>
Paul Seiffert <paul.seiffert@gmail.com>
@@ -409,19 +511,25 @@ Pete Hunt <floydophone@gmail.com>
Peter Blazejewicz <peter.blazejewicz@gmail.com>
Peter Cottle <pcottle@fb.com>
Peter Jaros <peter.a.jaros@gmail.com>
Peter Newnham <peter.newnham@appsbroker.com>
Petri Lehtinen <petri@digip.org>
Petri Lievonen <plievone@cc.hut.fi>
Pieter Vanderwerff <me@pieter.io>
Pouja Nikray <poujanik@gmail.com>
Prathamesh Sonpatki <csonpatki@gmail.com>
Prayag Verma <prayag.verma@gmail.com>
Preston Parry <ClimbsRocks@users.noreply.github.com>
Rafael <rafael.garcia@clever.com>
Rafal Dittwald <rafal.dittwald@gmail.com>
Rainer Oviir <roviir@gmail.com>
Rajat Sehgal <rajatsehgal1988@gmail.com>
Rajiv Tirumalareddy <rajivtreddy@gmail.com>
Ram Kaniyur <quadrupleslap@users.noreply.github.com>
Randall Randall <randall@randallsquared.com>
Ray <ray@tomo.im>
Raymond Ha <raymond@shraymonks.com>
Reed Loden <reed@reedloden.com>
Remko Tronçon <git@el-tramo.be>
Richard D. Worth <rdworth@gmail.com>
Richard Feldman <richard.t.feldman@gmail.com>
Richard Kho <hello@richardkho.com>
@@ -429,16 +537,22 @@ Richard Littauer <richard.littauer@gmail.com>
Richard Livesey <Livesey7@hotmail.co.uk>
Richard Wood <rwoodnz@gmail.com>
Rick Beerendonk <rick@beerendonk.com>
Rick Ford <rickfordrick@gmail.com>
Riley Tomasek <riley.tomasek@gmail.com>
Rob Arnold <robarnold@cs.cmu.edu>
Robert Binna <rbinna@gmail.com>
Robert Knight <robert.knight@mendeley.com>
Robert Sedovsek <robert.sedovsek@gmail.com>
Robin Berjon <robin@berjon.com>
Robin Frischmann <robin@rofrischmann.de>
Roman Pominov <rpominov+github@gmail.com>
Roman Vanesyan <roman.vanesyan@gmail.com>
Russ <russwirtz@gmail.com>
Ryan Seddon <seddon.ryan@gmail.com>
Sahat Yalkabov <sakhat@gmail.com>
Saif Hakim <saif@benchling.com>
Saiichi Hashimoto <saiichihashimoto@gmail.com>
Sam Beveridge <sbeveridge@saltstack.com>
Sam Saccone <samccone@gmail.com>
Sam Selikoff <sam.selikoff@gmail.com>
Samy Al Zahrani <samy@sadeem.net>
@@ -447,7 +561,9 @@ Scott Burch <scott@bulldoginfo.com>
Scott Feeney <scott@oceanbase.org>
Sean Kinsey <oyvind@fb.com>
Sebastian Markbåge <sebastian@calyptus.eu>
Sebastian McKenzie <sebmck@gmail.com>
Seoh Char <devthewild@gmail.com>
Sercan Eraslan <sercan.eraslan@sahibinden.com>
Serg <undrdog@yandex.ru>
Sergey Generalov <sergey@genbit.ru>
Sergey Rubanov <chi187@gmail.com>
@@ -456,18 +572,25 @@ Shane O'Sullivan <shaneosullivan1@gmail.com>
Shaun Trennery <shaun.trennery@gmail.com>
ShihChi Huang <hhuang@netflix.com>
Shim Won <marocchino@gmail.com>
Shinnosuke Watanabe <snnskwtnb@gmail.com>
Shogun Sea <shogunsea08@gmail.com>
Shota Kubota <kubosho@users.noreply.github.com>
Shripad K <assortmentofsorts@gmail.com>
Sibi <psibi2000@gmail.com>
Simen Bekkhus <sbekkhus91@gmail.com>
Simon Højberg <r.hackr@gmail.com>
Simon Welsh <simon@simon.geek.nz>
Simone Vittori <hello@simonewebdesign.it>
Soichiro Kawamura <mail@w-st.com>
Sophia Westwood <sophia@quip.com>
Sota Ohara <ohrst.18@gmail.com>
Spencer Handley <spencerhandley@gmail.com>
Stefan Dombrowski <sdo451@gmail.com>
Stephen Murphy <smurphy3@apple.com>
Sterling Cobb <sterlingcobb@gmail.com>
Steve Baker <_steve_@outlook.com>
Steven Luscher <react@steveluscher.com>
Steven Vachon <contact@svachon.com>
Stoyan Stefanov <ssttoo@ymail.com>
Sundeep Malladi <sundeep.malladi@gmail.com>
Sunny Juneja <me@sunnyjuneja.com>
@@ -478,9 +601,11 @@ Sławomir Laskowski <laskowski.box@gmail.com>
Taeho Kim <dittos@gmail.com>
Tay Yang Shun <tay.yang.shun@gmail.com>
Ted Kim <ted@vcnc.co.kr>
Tengfei Guo <terryr3rd@yeah.net>
Teodor Szente <teodor98sz@gmail.com>
Thomas Aylott <oblivious@subtlegradient.com>
Thomas Boyt <thomas.boyt@venmo.com>
Thomas Broadley <buriedunderbooks@hotmail.com>
Thomas Reggi <socialtr@gmail.com>
Thomas Röggla <t.roggla@cwi.nl>
Thomas Shaddox <thomas@heyzap.com>
@@ -490,12 +615,15 @@ Tienchai Wirojsaksaree <tienchai@fb.com>
Tim Routowicz <troutowicz@gmail.com>
Tim Schaub <tschaub@users.noreply.github.com>
Timothy Yung <yungsters@gmail.com>
Timur Carpeev <timuric@users.noreply.github.com>
Tobias Reiss <tag+github@basecode.de>
Tom Duncalf <tom@tomduncalf.com>
Tom Haggie <thaggie@gmail.com>
Tom Hauburger <thauburger@gmail.com>
Tom MacWright <tom@macwright.org>
Tom Occhino <tomocchino@gmail.com>
Tomasz Kołodziejski <tkolodziejski@gmail.com>
Tomoya Suzuki <tmysz.dev@gmail.com>
Tony Spiro <tspiro@tonyspiro.com>
Toru Kobayashi <koba0004@gmail.com>
Trinh Hoang Nhu <trinhhoangnhu@gmail.com>
@@ -506,14 +634,17 @@ Vadim Chernysh <chernysh.vadim@gmail.com>
Varun Rau <varunrau@gmail.com>
Vasiliy Loginevskiy <Yeti.or@gmail.com>
Victor Alvarez <v.alvarez312@gmail.com>
Victor Homyakov <vkhomyackov@gmail.com>
Victor Koenders <victor.koenders@gmail.com>
Ville Immonen <ville.immonen@iki.fi>
Vincent Riemer <vincentriemer@gmail.com>
Vincent Siao <vincent@asana.com>
Vipul A M <vipulnsward@gmail.com>
Vitaly Kramskikh <vkramskikh@gmail.com>
Vitor Balocco <vitorbal@gmail.com>
Vjeux <vjeuxx@gmail.com>
Volkan Unsal <spocksplanet@gmail.com>
Wander Wang <wander.wang@ismole.com>
Wayne Larsen <wayne@larsen.st>
WickyNilliams <WickyNilliams@MBA>
Wincent Colaiuta <win@wincent.com>
@@ -525,9 +656,14 @@ Yasar icli <hello@yasaricli.com>
YouBao Nong <noyobo@gmail.com>
Yuichi Hagio <yhagio87@gmail.com>
Yuriy Dybskiy <yuriy@dybskiy.com>
Yutaka Nakajima <nakazye@gmail.com>
Yuval Dekel <thedekel@fb.com>
Zach Bruggeman <mail@bruggie.com>
Zach Ramaekers <zramaekers@gmail.com>
Zacharias <zachasme@users.noreply.github.com>
Zeke Sikelianos <zeke@sikelianos.com>
Zhangjd <zhang.jd@qq.com>
adraeth <jerzy.mirecki@gmail.com>
arush <arush@ilovebrands.net>
brafdlog <brafdlog@gmail.com>
chen <kikyous@163.com>
@@ -538,14 +674,23 @@ davidxi <davidgraycn@gmail.com>
dongmeng.ldm <dongmeng.ldm@alibaba-inc.com>
iamchenxin <iamchenxin@gmail.com>
iamdoron <doronpagot@gmail.com>
iawia002 <z2d@jifangcheng.com>
imagentleman <imagentlemail@gmail.com>
koh-taka <koh-taka@users.noreply.github.com>
kohashi85 <hako584@gmail.com>
laiso <laiso@lai.so>
leeyoungalias <leeyoungalias@qq.com>
li.li <li.li@ele.me>
maxprafferty <maxprafferty@gmail.com>
rgarifullin <ringarifullin@gmail.com>
songawee <dennis@songawee.com>
sugarshin <shinsugar@gmail.com>
wali-s <ahmad3y2k@hotmail.com>
yiminghe <yiminghe@gmail.com>
youmoo <youmoolee@gmail.com>
zhangjg <jinguozhang@qq.com>
zwhitchcox <zwhitchcox@gmail.com>
Árni Hermann Reynisson <arnihr@gmail.com>
元彦 <yuanyan@users.noreply.github.com>
凌恒 <jiakun.dujk@alibaba-inc.com>
张敏 <cookfront@gmail.com>

View File

@@ -1,3 +1,255 @@
## 15.0.1 (April 8, 2016)
### React
- Restore `React.__spread` API to unbreak code compiled with some tools making use of this undocumented API. It is now officially deprecated. ([@zpao](https://github.com/zpao) in [#6444](https://github.com/facebook/react/pull/6444))
### ReactDOM
- Fixed issue resulting in loss of cursor position in controlled inputs. ([@spicyj](https://github.com/spicyj) in [#6449](https://github.com/facebook/react/pull/6449))
## 15.0.0 (April 7, 2016)
### Major changes
- **Initial render now uses `document.createElement` instead of generating HTML.** Previously we would generate a large string of HTML and then set `node.innerHTML`. At the time, this was decided to be faster than using `document.createElement` for the majority of cases and browsers that we supported. Browsers have continued to improve and so overwhelmingly this is no longer true. By using `createElement` we can make other parts of React faster. ([@spicyj](https://github.com/spicyj) in [#5205](https://github.com/facebook/react/pull/5205))
- **`data-reactid` is no longer on every node.** As a result of using `document.createElement`, we can prime the node cache as we create DOM nodes, allowing us to skip a potential lookup (which used the `data-reactid` attribute). Root nodes will have a `data-reactroot` attribute and server generated markup will still contain `data-reactid`. ([@spicyj](https://github.com/spicyj) in [#5205](https://github.com/facebook/react/pull/5205))
- **No more extra `<span>`s.** ReactDOM will now render plain text nodes interspersed with comment nodes that are used for demarcation. This gives us the same ability to update individual pieces of text, without creating extra nested nodes. If you were targeting these `<span>`s in your CSS, you will need to adjust accordingly. You can always render them explicitly in your components. ([@mwiencek](https://github.com/mwiencek) in [#5753](https://github.com/facebook/react/pull/5753))
- **Rendering `null` now uses comment nodes.** Previously `null` would render to `<noscript>` elements. We now use comment nodes. This may cause issues if making use of `:nth-child` CSS selectors. While we consider this rendering behavior an implementation detail of React, it's worth noting the potential problem. ()[@spicyj](https://github.com/spicyj) in [#5451](https://github.com/facebook/react/pull/5451))
- **Functional components can now return `null`.** We added support for [defining stateless components as functions](/react/blog/2015/09/10/react-v0.14-rc1.html#stateless-function-components) in React 0.14. However, React 0.14 still allowed you to define a class component without extending `React.Component` or using `React.createClass()`, so [we couldnt reliably tell if your component is a function or a class](https://github.com/facebook/react/issues/5355), and did not allow returning `null` from it. This issue is solved in React 15, and you can now return `null` from any component, whether it is a class or a function. ([@jimfb](https://github.com/jimfb) in [#5884](https://github.com/facebook/react/pull/5884))
- **Improved SVG support.** All SVG tags are now fully supported. (Uncommon SVG tags are not present on the `React.DOM` element helper, but JSX and `React.createElement` work on all tag names.) All SVG attributes that are implemented by the browsers should be supported too. If you find any attributes that we have missed, please [let us know in this issue](https://github.com/facebook/react/issues/1657). ([@zpao](https://github.com/zpao) in [#6243](https://github.com/facebook/react/pull/6243))
### Breaking changes
- **No more extra `<span>`s.**
- **`React.cloneElement()` now resolves `defaultProps`.** We fixed a bug in `React.cloneElement()` that some components may rely on. If some of the `props` received by `cloneElement()` are `undefined`, it used to return an element with `undefined` values for those props. Were changing it to be consistent with `createElement()`. Now any `undefined` props passed to `cloneElement()` are resolved to the corresponding components `defaultProps`. ([@truongduy134](https://github.com/truongduy134) in [#5997](https://github.com/facebook/react/pull/5997))
- **`ReactPerf.getLastMeasurements()` is opaque.** This change wont affect applications but may break some third-party tools. We are [revamping `ReactPerf` implementation](https://github.com/facebook/react/pull/6046) and plan to release it during the 15.x cycle. The internal performance measurement format is subject to change so, for the time being, we consider the return value of `ReactPerf.getLastMeasurements()` an opaque data structure that should not be relied upon. ([@gaearon](https://github.com/gaearon) in [#6286](https://github.com/facebook/react/pull/6286))
#### Removed deprecations
These deprecations were introduced nine months ago in v0.14 with a warning and are removed:
- Deprecated APIs are removed from the `React` top-level export: `findDOMNode`, `render`, `renderToString`, `renderToStaticMarkup`, and `unmountComponentAtNode`. As a reminder, they are now available on `ReactDOM` and `ReactDOMServer`. ([@jimfb](https://github.com/jimfb) in [#5832](https://github.com/facebook/react/pull/5832))
- Deprecated addons are removed: `batchedUpdates` and `cloneWithProps`. ([@jimfb](https://github.com/jimfb) in [#5859](https://github.com/facebook/react/pull/5859), [@zpao](https://github.com/zpao) in [#6016](https://github.com/facebook/react/pull/6016))
- Deprecated component instance methods are removed: `setProps`, `replaceProps`, and `getDOMNode`. ([@jimfb](https://github.com/jimfb) in [#5570](https://github.com/facebook/react/pull/5570))
- Deprecated CommonJS `react/addons` entry point is removed. As a reminder, you should use separate `react-addons-*` packages instead. This only applies if you use the CommonJS builds. ([@gaearon](https://github.com/gaearon) in [#6285](https://github.com/facebook/react/pull/6285))
- Passing `children` to void elements like `<input>` was deprecated, and now throws an error. ([@jonhester](https://github.com/jonhester) in [#3372](https://github.com/facebook/react/pull/3372))
- React-specific properties on DOM `refs` (e.g. `this.refs.div.props`) were deprecated, and are removed now. ([@jimfb](https://github.com/jimfb) in [#5495](https://github.com/facebook/react/pull/5495))
### New deprecations, introduced with a warning
Each of these changes will continue to work as before with a new warning until the release of React 16 so you can upgrade your code gradually.
- `LinkedStateMixin` and `valueLink` are now deprecated due to very low popularity. If you need this, you can use a wrapper component that implements the same behavior: [react-linked-input](https://www.npmjs.com/package/react-linked-input). ([@jimfb](https://github.com/jimfb) in [#6127](https://github.com/facebook/react/pull/6127))
- Future versions of React will treat `<input value={null}>` as a request to clear the input. However, React 0.14 has been ignoring `value={null}`. React 15 warns you on a `null` input value and offers you to clarify your intention. To fix the warning, you may explicitly pass an empty string to clear a controlled input, or pass `undefined` to make the input uncontrolled. ([@antoaravinth](https://github.com/antoaravinth) in [#5048](https://github.com/facebook/react/pull/5048))
- `ReactPerf.printDOM()` was renamed to `ReactPerf.printOperations()`, and `ReactPerf.getMeasurementsSummaryMap()` was renamed to `ReactPerf.getWasted()`. ([@gaearon](https://github.com/gaearon) in [#6287](https://github.com/facebook/react/pull/6287))
### New helpful warnings
- If you use a minified copy of the _development_ build, React DOM kindly encourages you to use the faster production build instead. ([@spicyj](https://github.com/spicyj) in [#5083](https://github.com/facebook/react/pull/5083))
- React DOM: When specifying a unit-less CSS value as a string, a future version will not add `px` automatically. This version now warns in this case (ex: writing `style={{'{{'}}width: '300'}}`. Unitless *number* values like `width: 300` are unchanged. ([@pluma](https://github.com/pluma) in [#5140](https://github.com/facebook/react/pull/5140))
- Synthetic Events will now warn when setting and accessing properties (which will not get cleared appropriately), as well as warn on access after an event has been returned to the pool. ([@kentcdodds](https://github.com/kentcdodds) in [#5940](https://github.com/facebook/react/pull/5940) and [@koba04](https://github.com/koba04) in [#5947](https://github.com/facebook/react/pull/5947))
- Elements will now warn when attempting to read `ref` and `key` from the props. ([@prometheansacrifice](https://github.com/prometheansacrifice) in [#5744](https://github.com/facebook/react/pull/5744))
- React will now warn if you pass a different `props` object to `super()` in the constructor. ([@prometheansacrifice](https://github.com/prometheansacrifice) in [#5346](https://github.com/facebook/react/pull/5346))
- React will now warn if you call `setState()` inside `getChildContext()`. ([@raineroviir](https://github.com/raineroviir) in [#6121](https://github.com/facebook/react/pull/6121))
- React DOM now attempts to warn for mistyped event handlers on DOM elements, such as `onclick` which should be `onClick`. ([@ali](https://github.com/ali) in [#5361](https://github.com/facebook/react/pull/5361))
- React DOM now warns about `NaN` values in `style`. ([@jontewks](https://github.com/jontewks) in [#5811](https://github.com/facebook/react/pull/5811))
- React DOM now warns if you specify both `value` and `defaultValue` for an input. ([@mgmcdermott](https://github.com/mgmcdermott) in [#5823](https://github.com/facebook/react/pull/5823))
- React DOM now warns if an input switches between being controlled and uncontrolled. ([@TheBlasfem](https://github.com/TheBlasfem) in [#5864](https://github.com/facebook/react/pull/5864))
- React DOM now warns if you specify `onFocusIn` or `onFocusOut` handlers as they are unnecessary in React. ([@jontewks](https://github.com/jontewks) in [#6296](https://github.com/facebook/react/pull/6296))
- React now prints a descriptive error message when you pass an invalid callback as the last argument to `ReactDOM.render()`, `this.setState()`, or `this.forceUpdate()`. ([@conorhastings](https://github.com/conorhastings) in [#5193](https://github.com/facebook/react/pull/5193) and [@gaearon](https://github.com/gaearon) in [#6310](https://github.com/facebook/react/pull/6310))
- Add-Ons: `TestUtils.Simulate()` now prints a helpful message if you attempt to use it with shallow rendering. ([@conorhastings](https://github.com/conorhastings) in [#5358](https://github.com/facebook/react/pull/5358))
- PropTypes: `arrayOf()` and `objectOf()` provide better error messages for invalid arguments. ([@chicoxyzzy](https://github.com/chicoxyzzy) in [#5390](https://github.com/facebook/react/pull/5390))
### Notable bug fixes
- Fixed multiple small memory leaks. ([@spicyj](https://github.com/spicyj) in [#4983](https://github.com/facebook/react/pull/4983) and [@victor-homyakov](https://github.com/victor-homyakov) in [#6309](https://github.com/facebook/react/pull/6309))
- Input events are handled more reliably in IE 10 and IE 11; spurious events no longer fire when using a placeholder. ([@jquense](https://github.com/jquense) in [#4051](https://github.com/facebook/react/pull/4051))
- The `componentWillReceiveProps()` lifecycle method is now consistently called when `context` changes. ([@milesj](https://github.com/milesj) in [#5787](https://github.com/facebook/react/pull/5787))
- `React.cloneElement()` doesnt append slash to an existing `key` when used inside `React.Children.map()`. ([@ianobermiller](https://github.com/ianobermiller) in [#5892](https://github.com/facebook/react/pull/5892))
- React DOM now supports the `cite` and `profile` HTML attributes. ([@AprilArcus](https://github.com/AprilArcus) in [#6094](https://github.com/facebook/react/pull/6094) and [@saiichihashimoto](https://github.com/saiichihashimoto) in [#6032](https://github.com/facebook/react/pull/6032))
- React DOM now supports `cssFloat`, `gridRow` and `gridColumn` CSS properties. ([@stevenvachon](https://github.com/stevenvachon) in [#6133](https://github.com/facebook/react/pull/6133) and [@mnordick](https://github.com/mnordick) in [#4779](https://github.com/facebook/react/pull/4779))
- React DOM now correctly handles `borderImageOutset`, `borderImageWidth`, `borderImageSlice`, `floodOpacity`, `strokeDasharray`, and `strokeMiterlimit` as unitless CSS properties. ([@rofrischmann](https://github.com/rofrischmann) in [#6210](https://github.com/facebook/react/pull/6210) and [#6270](https://github.com/facebook/react/pull/6270))
- React DOM now supports the `onAnimationStart`, `onAnimationEnd`, `onAnimationIteration`, `onTransitionEnd`, and `onInvalid` events. Support for `onLoad` has been added to `object` elements. ([@tomduncalf](https://github.com/tomduncalf) in [#5187](https://github.com/facebook/react/pull/5187), [@milesj](https://github.com/milesj) in [#6005](https://github.com/facebook/react/pull/6005), and [@ara4n](https://github.com/ara4n) in [#5781](https://github.com/facebook/react/pull/5781))
- React DOM now defaults to using DOM attributes instead of properties, which fixes a few edge case bugs. Additionally the nullification of values (ex: `href={null}`) now results in the forceful removal, no longer trying to set to the default value used by browsers in the absence of a value. ([@syranide](https://github.com/syranide) in [#1510](https://github.com/facebook/react/pull/1510))
- React DOM does not mistakingly coerce `children` to strings for Web Components. ([@jimfb](https://github.com/jimfb) in [#5093](https://github.com/facebook/react/pull/5093))
- React DOM now correctly normalizes SVG `<use>` events. ([@edmellum](https://github.com/edmellum) in [#5720](https://github.com/facebook/react/pull/5720))
- React DOM does not throw if a `<select>` is unmounted while its `onChange` handler is executing. ([@sambev](https://github.com/sambev) in [#6028](https://github.com/facebook/react/pull/6028))
- React DOM does not throw in Windows 8 apps. ([@Andrew8xx8](https://github.com/Andrew8xx8) in [#6063](https://github.com/facebook/react/pull/6063))
- React DOM does not throw when asynchronously unmounting a child with a `ref`. ([@yiminghe](https://github.com/yiminghe) in [#6095](https://github.com/facebook/react/pull/6095))
- React DOM no longer forces synchronous layout because of scroll position tracking. ([@syranide](https://github.com/syranide) in [#2271](https://github.com/facebook/react/pull/2271))
- `Object.is` is used in a number of places to compare values, which leads to fewer false positives, especially involving `NaN`. In particular, this affects the `shallowCompare` add-on. ([@chicoxyzzy](https://github.com/chicoxyzzy) in [#6132](https://github.com/facebook/react/pull/6132))
- Add-Ons: ReactPerf no longer instruments adding or removing an event listener because they dont really touch the DOM due to event delegation. ([@antoaravinth](https://github.com/antoaravinth) in [#5209](https://github.com/facebook/react/pull/5209))
### Other improvements
- React now uses `loose-envify` instead of `envify` so it installs less transitive dependencies. ([@qerub](https://github.com/qerub) in [#6303](https://github.com/facebook/react/pull/6303))
- Shallow renderer now exposes `getMountedInstance()`. ([@glenjamin](https://github.com/glenjamin) in [#4918](https://github.com/facebook/react/pull/4918))
- Shallow renderer now returns the rendered output from `render()`. ([@simonewebdesign](https://github.com/simonewebdesign) in [#5411](https://github.com/facebook/react/pull/5411))
- React no longer depends on ES5 *shams* for `Object.create` and `Object.freeze` in older environments. It still, however, requires ES5 *shims* in those environments. ([@dgreensp](https://github.com/dgreensp) in [#4959](https://github.com/facebook/react/pull/4959))
- React DOM now allows `data-` attributes with names that start with numbers. ([@nLight](https://github.com/nLight) in [#5216](https://github.com/facebook/react/pull/5216))
- React DOM adds a new `suppressContentEditableWarning` prop for components like [Draft.js](https://facebook.github.io/draft-js/) that intentionally manage `contentEditable` children with React. ([@mxstbr](https://github.com/mxstbr) in [#6112](https://github.com/facebook/react/pull/6112))
- React improves the performance for `createClass()` on complex specs. ([@spicyj](https://github.com/spicyj) in [#5550](https://github.com/facebook/react/pull/5550))
## 0.14.8 (March 29, 2016)
### React
- Fixed memory leak when rendering on the server
## 0.14.7 (January 28, 2016)
### React
- Fixed bug with `<option>` tags when using `dangerouslySetInnerHTML`
- Fixed memory leak in synthetic event system
### React TestUtils Add-on
- Fixed bug with calling `setState` in `componentWillMount` when using shallow rendering
## 0.14.6 (January 6, 2016)
### React
- Updated `fbjs` dependency to pick up change affecting handling of undefined document.
## 0.14.5 (December 29, 2015)
### React
- More minor internal changes for better compatibility with React Native
## 0.14.4 (December 29, 2015)
### React
- Minor internal changes for better compatibility with React Native
### React DOM
- The `autoCapitalize` and `autoCorrect` props are now set as attributes in the DOM instead of properties to improve cross-browser compatibility
- Fixed bug with controlled `<select>` elements not handling updates properly
### React Perf Add-on
- Some DOM operation names have been updated for clarity in the output of `.printDOM()`
## 0.14.3 (November 18, 2015)
### React DOM
- Added support for `nonce` attribute for `<script>` and `<style>` elements
- Added support for `reversed` attribute for `<ol>` elements
### React TestUtils Add-on
- Fixed bug with shallow rendering and function refs
### React CSSTransitionGroup Add-on
- Fixed bug resulting in timeouts firing incorrectly when mounting and unmounting rapidly
### React on Bower
- Added `react-dom-server.js` to expose `renderToString` and `renderToStaticMarkup` for usage in the browser
## 0.14.2 (November 2, 2015)
### React DOM
- Fixed bug with development build preventing events from firing in some versions of Internet Explorer & Edge
- Fixed bug with development build when using es5-sham in older versions of Internet Explorer
- Added support for `integrity` attribute
- Fixed bug resulting in `children` prop being coerced to a string for custom elements, which was not the desired behavior
- Moved `react` from `dependencies` to `peerDependencies` to match expectations and align with `react-addons-*` packages
## 0.14.1 (October 28, 2015)
### React DOM
- Fixed bug where events wouldn't fire in old browsers when using React in development mode
- Fixed bug preventing use of `dangerouslySetInnerHTML` with Closure Compiler Advanced mode
- Added support for `srcLang`, `default`, and `kind` attributes for `<track>` elements
- Added support for `color` attribute
- Ensured legacy `.props` access on DOM nodes is updated on re-renders
### React TestUtils Add-on
- Fixed `scryRenderedDOMComponentsWithClass` so it works with SVG
### React CSSTransitionGroup Add-on
- Fix bug preventing `0` to be used as a timeout value
### React on Bower
- Added `react-dom.js` to `main` to improve compatibility with tooling
## 0.14.0 (October 7, 2015)
### Major changes
- 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 seperate 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.
- 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.**
### Breaking changes
- `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/top-level-api.html#react.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.
- 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`.
### Deprecations
- `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.
- 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/top-level-api.html#react.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
- Added `React.Children.toArray` which takes a nested children object and returns a flat array with keys assigned to each child. This helper makes it easier to manipulate collections of children in your `render` methods, especially if you want to reorder or slice `this.props.children` before passing it down. In addition, `React.Children.map` now returns plain arrays too.
- React uses `console.error` instead of `console.warn` for warnings so that browsers show a full stack trace in the console. (Our warnings appear when you use patterns that will break in future releases and for code that is likely to behave unexpectedly, so we do consider our warnings to be “must-fix” errors.)
- Previously, including untrusted objects as React children [could result in an XSS security vulnerability](http://danlec.com/blog/xss-via-a-spoofed-react-element). This problem should be avoided by properly validating input at the application layer and by never passing untrusted objects around your application code. As an additional layer of protection, [React now tags elements](https://github.com/facebook/react/pull/4832) with a specific [ES2015 (ES6) `Symbol`](http://www.2ality.com/2014/12/es6-symbols.html) in browsers that support it, in order to ensure that React never considers untrusted JSON to be a valid element. If this extra security protection is important to you, you should add a `Symbol` polyfill for older browsers, such as the one included by [Babels polyfill](http://babeljs.io/docs/usage/polyfill/).
- When possible, React DOM now generates XHTML-compatible markup.
- React DOM now supports these standard HTML attributes: `capture`, `challenge`, `inputMode`, `is`, `keyParams`, `keyType`, `minLength`, `summary`, `wrap`. It also now supports these non-standard attributes: `autoSave`, `results`, `security`.
- React DOM now supports these SVG attributes, which render into namespaced attributes: `xlinkActuate`, `xlinkArcrole`, `xlinkHref`, `xlinkRole`, `xlinkShow`, `xlinkTitle`, `xlinkType`, `xmlBase`, `xmlLang`, `xmlSpace`.
- The `image` SVG tag is now supported by React DOM.
- In React DOM, arbitrary attributes are supported on custom elements (those with a hyphen in the tag name or an `is="..."` attribute).
- React DOM now supports these media events on `audio` and `video` tags: `onAbort`, `onCanPlay`, `onCanPlayThrough`, `onDurationChange`, `onEmptied`, `onEncrypted`, `onEnded`, `onError`, `onLoadedData`, `onLoadedMetadata`, `onLoadStart`, `onPause`, `onPlay`, `onPlaying`, `onProgress`, `onRateChange`, `onSeeked`, `onSeeking`, `onStalled`, `onSuspend`, `onTimeUpdate`, `onVolumeChange`, `onWaiting`.
- Many small performance improvements have been made.
- Many warnings show more context than before.
- Add-Ons: A [`shallowCompare`](https://github.com/facebook/react/pull/3355) add-on has been added as a migration path for `PureRenderMixin` in ES6 classes.
- Add-Ons: `CSSTransitionGroup` can now use [custom class names](https://github.com/facebook/react/blob/48942b85/docs/docs/10.1-animation.md#custom-classes) instead of appending `-enter-active` or similar to the transition name.
### New helpful warnings
- React DOM now warns you when nesting HTML elements invalidly, which helps you avoid surprising errors during updates.
- Passing `document.body` directly as the container to `ReactDOM.render` now gives a warning as doing so can cause problems with browser extensions that modify the DOM.
- Using multiple instances of React together is not supported, so we now warn when we detect this case to help you avoid running into the resulting problems.
### Notable bug fixes
- Click events are handled by React DOM more reliably in mobile browsers, particularly in Mobile Safari.
- SVG elements are created with the correct namespace in more cases.
- React DOM now renders `<option>` elements with multiple text children properly and renders `<select>` elements on the server with the correct option selected.
- When two separate copies of React add nodes to the same document (including when a browser extension uses React), React DOM tries harder not to throw exceptions during event handling.
- Using non-lowercase HTML tag names in React DOM (e.g., `React.createElement('DIV')`) no longer causes problems, though we continue to recommend lowercase for consistency with the JSX tag name convention (lowercase names refer to built-in components, capitalized names refer to custom components).
- React DOM understands that these CSS properties are unitless and does not append “px” to their values: `animationIterationCount`, `boxOrdinalGroup`, `flexOrder`, `tabSize`, `stopOpacity`.
- Add-Ons: When using the test utils, `Simulate.mouseEnter` and `Simulate.mouseLeave` now work.
- Add-Ons: ReactTransitionGroup now correctly handles multiple nodes being removed simultaneously.
### React Tools / Babel
#### 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.
#### New Features
- Babel 5.8.24 introduces **Inlining React elements:** The `optimisation.react.inlineElements` transform converts JSX elements to object literals like `{type: 'div', props: ...}` instead of calls to `React.createElement`. This should only be enabled in production, since it disables some development warnings/checks.
- Babel 5.8.24 introduces **Constant hoisting for React elements:** The `optimisation.react.constantElements` transform hoists element creation to the top level for subtrees that are fully static, which reduces calls to `React.createElement` and the resulting allocations. More importantly, it tells React that the subtree hasnt changed so React can completely skip it when reconciling. This should only be enabled in production, since it disables some development warnings/checks.
## 0.13.3 (May 8, 2015)
### React Core
@@ -92,7 +344,7 @@
* 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.
* 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](/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://facebook.github.io/react/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.
@@ -106,7 +358,7 @@
#### New Features
* [`React.addons.createFragment` was added](/react/docs/create-fragment.html) for adding keys to entire sets of children.
* [`React.addons.createFragment` was added](https://facebook.github.io/react/docs/create-fragment.html) for adding keys to entire sets of children.
#### Deprecations

View File

@@ -14,8 +14,24 @@ Some of the core team will be working directly on GitHub. These changes will be
We will do our best to keep `master` in good shape, with tests passing at all times. But in order to move fast, we will make API changes that your application might not be compatible with. We will do our best to communicate these changes and always version appropriately so you can lock into a specific version if need be.
### Test Suite
Use `grunt test` to run the full test suite with PhantomJS.
This command is just a facade to [Jest](https://facebook.github.io/jest/). You may optionally run `npm install -g jest-cli` and use Jest commands directly to have more control over how tests are executed.
For example, `jest --watch` lets you automatically run the test suite on every file change.
You can also run a subset of tests by passing a prefix to `jest`. For instance, `jest ReactDOMSVG` will only run tests in the files that start with `ReactDOMSVG`, such as `ReactDOMSVG-test.js`.
When you know which tests you want to run, you can achieve a fast feedback loop by using these two features together. For example, `jest ReactDOMSVG --watch` will re-run only the matching tests on every change.
Just make sure to run the whole test suite before submitting a pull request!
### Pull Requests
**Working on your first Pull Request?** You can learn how from this *free* series [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)
The core team will be monitoring for pull requests. When we get one, we'll run some Facebook-specific integration tests on it first. From here, we'll need to get another person to sign off on the changes and then merge the pull request. For API changes we may need to fix internal uses, which could cause some delay. We'll do our best to provide updates and feedback throughout the process.
*Before* submitting a pull request, please make sure the following is done…
@@ -52,6 +68,11 @@ Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe
* IRC - [#reactjs on freenode](https://webchat.freenode.net/?channels=reactjs)
* Discussion forum - [discuss.reactjs.org](https://discuss.reactjs.org/)
## Meeting Notes
React team meets once a week to discuss the development of React, future plans, and priorities.
You can find the meeting notes in a [dedicated repository](https://github.com/reactjs/core-notes/).
## Style Guide
Our linter will catch most styling issues that may exist in your code.

View File

@@ -1,13 +1,16 @@
'use strict';
var assign = require('object-assign');
var path = require('path');
var GULP_EXE = 'gulp';
if (process.platform === 'win32') {
GULP_EXE += '.cmd';
}
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jsx: require('./grunt/config/jsx'),
browserify: require('./grunt/config/browserify'),
npm: require('./grunt/config/npm'),
clean: [
@@ -17,20 +20,19 @@ module.exports = function(grunt) {
'./examples/shared/*.js',
'.module-cache',
],
/*eslint-disable camelcase */
compare_size: require('./grunt/config/compare_size'),
/*eslint-enable camelcase */
'compare_size': require('./grunt/config/compare_size'),
});
grunt.config.set('compress', require('./grunt/config/compress'));
function spawnGulp(args, opts, done) {
grunt.util.spawn({
// This could be more flexible (require.resolve & lookup bin in package)
// but if it breaks we'll fix it then.
cmd: path.join('node_modules', '.bin', 'gulp'),
cmd: path.join('node_modules', '.bin', GULP_EXE),
args: args,
opts: assign({stdio: 'inherit'}, opts),
opts: Object.assign({stdio: 'inherit'}, opts),
}, function(err, result, code) {
if (err) {
grunt.fail.fatal('Something went wrong running gulp: ', result);
@@ -59,9 +61,6 @@ module.exports = function(grunt) {
spawnGulp(['react:clean'], null, this.async());
});
// Register jsx:normal and :release tasks.
grunt.registerMultiTask('jsx', require('./grunt/tasks/jsx'));
// Our own browserify-based tasks to build a single JS file build.
grunt.registerMultiTask('browserify', require('./grunt/tasks/browserify'));
@@ -106,10 +105,12 @@ module.exports = function(grunt) {
]);
grunt.registerTask('build:react-dom', require('./grunt/tasks/react-dom'));
grunt.registerTask('test', ['jest']);
grunt.registerTask('npm:test', ['build', 'npm:pack']);
var jestTasks = require('./grunt/tasks/jest');
grunt.registerTask('jest:normal', jestTasks.normal);
grunt.registerTask('jest:coverage', jestTasks.coverage);
grunt.registerTask('jest', require('./grunt/tasks/jest'));
grunt.registerTask('test', ['jest:normal']);
grunt.registerTask('npm:test', ['build', 'npm:pack']);
// Optimized build task that does all of our builds. The subtasks will be run
// in order so we can take advantage of that and only run build-modules once.

View File

@@ -2,7 +2,7 @@ BSD License
For React software
Copyright (c) 2013-2015, Facebook, Inc.
Copyright (c) 2013-present, Facebook, Inc.
All rights reserved.
Redistribution and use in source and binary forms, with or without modification,

View File

@@ -1,4 +1,4 @@
# [React](https://facebook.github.io/react/) [![Build Status](https://travis-ci.org/facebook/react.svg?branch=master)](https://travis-ci.org/facebook/react) [![npm version](https://badge.fury.io/js/react.svg)](http://badge.fury.io/js/react)
# [React](https://facebook.github.io/react/) [![Build Status](https://img.shields.io/travis/facebook/react/master.svg?style=flat)](https://travis-ci.org/facebook/react) [![Coverage Status](https://img.shields.io/coveralls/facebook/react/master.svg?style=flat)](https://coveralls.io/github/facebook/react?branch=master) [![npm version](https://img.shields.io/npm/v/react.svg?style=flat)](https://www.npmjs.com/package/react) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md#pull-requests)
React is a JavaScript library for building user interfaces.
@@ -21,7 +21,7 @@ var HelloMessage = React.createClass({
}
});
React.render(
ReactDOM.render(
<HelloMessage name="John" />,
document.getElementById('container')
);
@@ -33,16 +33,16 @@ You'll notice that we used an HTML-like syntax; [we call it JSX](https://faceboo
## Installation
The fastest way to get started is to serve JavaScript from the CDN (also available on [cdnjs](https://cdnjs.com/libraries/react) and [jsdelivr](http://www.jsdelivr.com/#!react)):
The fastest way to get started is to serve JavaScript from the CDN (also available on [cdnjs](https://cdnjs.com/libraries/react) and [jsdelivr](https://www.jsdelivr.com/projects/react)):
```html
<!-- The core React library -->
<script src="https://fb.me/react-0.13.3.js"></script>
<!-- In-browser JSX transformer, remove when pre-compiling JSX. -->
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<script src="https://fb.me/react-15.0.1.js"></script>
<!-- The ReactDOM Library -->
<script src="https://fb.me/react-dom-15.0.1.js"></script>
```
We've also built a [starter kit](https://facebook.github.io/react/downloads/react-0.13.3.zip) which might be useful if this is your first time using React. It includes a webpage with an example of using React with live code.
We've also built a [starter kit](https://facebook.github.io/react/downloads/react-15.0.1.zip) which might be useful if this is your first time using React. It includes a webpage with an example of using React with live code.
If you'd like to use [bower](http://bower.io), it's as easy as:
@@ -50,6 +50,12 @@ If you'd like to use [bower](http://bower.io), it's as easy as:
bower install --save react
```
And it's just as easy with [npm](http://npmjs.com):
```sh
npm i --save react
```
## Contribute
The main purpose of this repository is to continue to evolve React core, making it faster and easier to use. If you're interested in helping with that, then keep reading. If you're not interested in helping right now that's ok too. :) Any feedback you have about using React would be greatly appreciated.
@@ -60,7 +66,7 @@ The process to build `react.js` is built entirely on top of node.js, using many
#### Prerequisites
* You have `node` installed at v0.10.0+ (it might work at lower versions, we just haven't tested) and `npm` at v2.0.0+.
* You have `node` installed at v4.0.0+ and `npm` at v2.0.0+.
* You are familiar with `npm` and know whether or not you need to use `sudo` when installing packages globally.
* You are familiar with `git`.
@@ -84,14 +90,16 @@ We use grunt to automate many tasks. Run `grunt -h` to see a mostly complete lis
```sh
# Build and run tests with PhantomJS
grunt test
# Build and run tests in your browser
grunt test --debug
# Lint the code with ESLint
grunt lint
# Wipe out build directory
grunt clean
```
### Good First Bug
To help you get your feet wet and get you familiar with our contribution process, we have a list of [good first bugs](https://github.com/facebook/react/labels/good%20first%20bug) that contain bugs which are fairly easy to fix. This is a great place to get started.
### License
React is [BSD licensed](./LICENSE). We also provide an additional [patent grant](./PATENTS).

View File

@@ -1,48 +0,0 @@
#!/usr/bin/env node
// -*- mode: js -*-
// vim: set ft=javascript :
'use strict';
var babel = require('babel');
var devExpressionPlugin = require('fbjs/scripts/babel/dev-expression');
var TRANSFORM_IGNORE_RE = /^WebComponents$/;
require('commoner').version(
require('../package.json').version
).resolve(function(id) {
var context = this;
// Note that the result of context.getProvidedP() is cached for the
// duration of the build, so it is both consistent and cheap to
// evaluate multiple times.
return context.getProvidedP().then(function(idToPath) {
// If a module declares its own identifier using @providesModule
// then that identifier will be a key in the idToPath object.
if (idToPath.hasOwnProperty(id)) {
return context.readFileP(idToPath[id]);
}
// Otherwise assume the identifier maps directly to a path in the
// filesystem.
return context.readModuleP(id);
});
}).process(function(id, source) {
var context = this;
// This is hacky but that's ok… It really only matters for tests since it
// won't otherwise be in the dependency tree.
if (!TRANSFORM_IGNORE_RE.test(id)) {
// This is where JSX, ES6, etc. desugaring happens.
source = babel.transform(source, {
blacklist: ['spec.functionName', 'validation.react'],
plugins: [devExpressionPlugin],
filename: id,
}).code;
}
return source;
});

View File

@@ -1,10 +1,18 @@
require('rubygems')
require('json')
require('yaml')
require('open-uri')
desc "download babel-browser"
task :fetch_remotes do
IO.copy_stream(
open('https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js'),
'js/babel-browser.min.js'
)
end
desc "generate js from jsx"
task :js do
system "cp ../node_modules/babel/node_modules/babel-core/browser.min.js ./js/babel-browser.min.js"
system "../node_modules/.bin/babel _js --out-dir=js"
end
@@ -24,6 +32,25 @@ task :update_version do
end
end
desc "update SRI hashes"
task :update_hashes do
map = {
'react.js' => 'dev',
'react.min.js' => 'prod',
'react-with-addons.js' => 'addons_dev',
'react-with-addons.min.js' => 'addons_prod',
'react-dom.js' => 'dom_dev',
'react-dom.min.js' => 'dom_prod',
'react-dom-server.js' => 'dom_server_dev',
'react-dom-server.min.js' => 'dom_server_prod'
}
site_config = YAML.load_file('_config.yml')
map.each do |file, key|
site_config['react_hashes'][key] = `openssl dgst -sha384 -binary ../../react-bower/#{file} | openssl base64 -A`
end
File.open('_config.yml', 'w+') { |f| f.write(site_config.to_yaml) }
end
desc "update acknowledgements list"
task :update_acknowledgements do
authors = File.readlines('../AUTHORS').map {|author| author.gsub(/ <.*\n/,'')}
@@ -35,7 +62,7 @@ task :update_acknowledgements do
end
desc "build into ../../react-gh-pages"
task :release => [:update_version, :default] do
task :release => [:update_version, :js, :fetch_remotes] do
system "jekyll build -d ../../react-gh-pages"
end

View File

@@ -36,4 +36,13 @@ sass:
sass_dir: _css
gems:
- jekyll-redirect-from
react_version: 0.14.0-alpha
react_version: 15.0.0
react_hashes:
dev: Cq98Gnp/9Q99TFfuPlSLebblQc+9qMrZtWD0FCe4s7GUZxPiQs3xrnDfXGa4ViyS
prod: 9BYbHhdnftnl0BXeFq2Vu9/Q4PbgcQEzhgGVV+AdFn45HLRsjIt7quhJDydhEhXy
addons_dev: Qztew90JWMrd/+bXguDKMh+COfzS4qdH8OErl+vquQj4AUkbHVmLuhrvSYMt0vMP
addons_prod: MKtYvu68gr8fPQLs3JN5YEdJWxG31GD1kTLWu/bdTs+c5PzBVqGtiOT7zPREK/G8
dom_dev: WsglX3Pa1NYQZilMa8GLvlqA5nD7k1WkNmpEHgGxsVvwkb8jVAe9Xyk2FkusiMXH
dom_prod: UAMUzFqVISGZygGa8Jiue1c43+A/XIz5Vqo/nhhQ+nDxFYvWtiHF88BDiqUdQeEl
dom_server_dev: WTVIOMLvdH0B5Ci5GizQ6EijmhJ42lwT9AlLpxjvRxWNgAqBye3+CQjap+v3IvAn
dom_server_prod: lYJlraCIcrpyivOoXRj6kFa1mPZndbT5R2Hjq70IPkxwL1MxcGOxg+14bWolaeWs

View File

@@ -1,46 +1,93 @@
---
- - Aaron Franks
- - '839'
- Aaron Franks
- Aaron Gelter
- Adam Bloomston
- Adam Krebs
- Adam Mark
- Adam Solove
- Adam Timberlake
- Adam Zapletal
- Ahmad Wali Sidiqi
- Alan Plum
- Alan Souza
- Alan deLevie
- Alastair Hole
- Alex
- Alex Boatwright
- Alex Boyd
- Alex Dajani
- Alex Lopatin
- Alex Mykyta
- Alex Pien
- Alex Smith
- Alex Zelenskiy
- Alexander Shtuchkin
- Alexander Solovyov
- Alexander Tseung
- Alexandre Gaudencio
- Alexey Raspopov
- Alexey Shamrin
- Ali Ukani
- Andre Z Sanchez
- Andreas Savvides
- Andreas Svensson
- Andres Kalle
- Andres Suarez
- Andrew Clark
- Andrew Cobby
- Andrew Davey
- Andrew Henderson
- Andrew Kulakov
- Andrew Rasmussen
- Andrew Sokolov
- Andrew Zich
- Andrey Popp
- Anthony van der Hoorn
- Anto Aravinth
- Antonio Ruberto
- Antti Ahti
- Anuj Tomar
- AoDev
- April Arcus
- Areeb Malik
- Aria Buckles
- Aria Stewart
- Arian Faurtosh
- Artem Nezvigin
- Austin Wright
- Ayman Osman
- Baraa Hamodi
- Bartosz Kaszubowski
- Basarat Ali Syed
- Battaile Fauber
- Beau Smith
- Ben Alpert
- Ben Anderson
- Ben Brooks
- Ben Foxall
- Ben Halpern
- Ben Jaffe
- Ben Moss
- Ben Newman
- Ben Ripkens
- Benjamin Keen
- Benjamin Leiken
- Benjamin Woodruff
- Benjy Cui
- Bill Blanchard
- Bill Fisher
- Blaine Hatab
- Blaine Kasten
- Bob Eagan
- Bob Ralian
- Bob Renwick
- Bobby
- Bojan Mihelac
- Bradley Spaulding
- Brandon Bloom
- Brandon Tilley
- Brenard Cubacub
- Brian Cooke
- Brian Holt
- Brian Hsu
@@ -51,205 +98,412 @@
- Bruno Škvorc
- Cam Song
- Cam Spiers
- Cameron Chamberlain
- Cameron Matheson
- Carter Chung
- Cassus Adam Banko
- Cat Chen
- Cedric Sohrauer
- Cesar William Alvarenga
- Changsoon Bok
- Charles Marsh
- Chase Adams
- Cheng Lou
- Chitharanjan Das
- Chris Bolin
- Chris Grovers
- Chris Ha
- Chris Rebert
- Chris Sciolla
- Christian
- Christian Alfoni
- Christian Oliff
- Christian Roman
- Christoffer Sawicki
- Christoph Pojer
- Christopher Monsanto
- Clay Allsopp
- Connor McSheffrey
- Conor Hastings
- Cory House
- Cotton Hou
- Craig Akimoto
- Cristovao Verstraeten
- Damien Pellier
- Dan Abramov
- Dan Fox
- Dan Schafer
- Daniel Carlsson
- Daniel Cousens
- Daniel Friesen
- Daniel Gasienica
- Daniel Hejl
- Daniel Hejl
- Daniel Lo Nigro
- Daniel Mané
- Daniel Miladinov
- Daniel Rodgers-Pryor
- Daniel Schonfeld
- Danny Ben-David
- Darcy
- Daryl Lau
- Darío Javier Cravero
- Dave Galbraith
- David Baker
- David Ed Mellum
- David Goldberg
- David Granado
- David Greenspan
- David Hellsing
- David Hu
- David Khourshid
- David Mininger
- David Neubauer
- David Percy
- Dean Shi
- Denis Sokolov
- Deniss Jacenko
- Dennis Johnson
- Devon Blandin
- Devon Harvey
- Dmitrii Abramov
- Dmitriy Rozhkov
- Dmitry Blues
- Dmitry Mazuro
- Domenico Matteo
- Don Abrams
- Dongsheng Liu
- Dustan Kasten
- Dustin Getz
- Dylan Harrington
- Eduardo Garcia
- Edvin Erikson
- Elaine Fang
- Enguerran
- Eric Clemmons
- Eric Eastwood
- Eric Florenzano
- Eric O'Connell
- Eric Schoffstall
- Erik Harper
- Espen Hovlandsdal
- Evan Coonrod
- Evan Vosberg
- Fabio M. Costa
- Federico Rampazzo
- Felipe Oliveira Carvalho
- Felix Gnass
- Felix Kling
- Fernando Correia
- Frankie Bagnardi
- François-Xavier Bois
- Fred Zhao
- Freddy Rangel
- Fyodor Ivanishchev
- G Scott Olson
- G. Kay Lee
- Gabe Levi
- Gajus Kuizinas
- Gareth Nicholson
- Garren Smith
- Gavin McQuistin
- Geert Pasteels
- Geert-Jan Brits
- George A Sisco III
- Georgii Dolzhykov
- Gilbert
- Glen Mailer
- Grant Timmerman
- Greg Hurrell
- Greg Perkins
- Greg Roodt
- Gregory
- Guangqiang Dong
- Guido Bouman
- Harry Hull
- Harry Marr
- - Harry Moreno
- Harry Moreno
- Harshad Sabne
- Hekar Khani
- Hendrik Swanepoel
- Henrik Nyh
- Henry Wong
- Henry Zhu
- Hideo Matsumoto
- Hou Chia
- Huang-Wei Chang
- - Hugo Agbonon
- Hugo Jobling
- Hyeock Kwon
- Héliton Nordt
- Ian Obermiller
- Ignacio Carbajo
- Igor Scekic
- Ilia Pavlenkov
- Ilya Shuklin
- Ilyá Belsky
- Ingvar Stepanyan
- Irae Carvalho
- Isaac Salier-Hellendag
- Iurii Kucherov
- Ivan Kozik
- Ivan Krechetov
- Ivan Vergiliev
- J. Andrew Brassington
- J. Renée Beach
- JD Isaacks
- JJ Weber
- JW
- Jack Zhang
- Jackie Wung
- Jacob Gable
- Jacob Greenleaf
- Jae Hun Ro
- Jaeho Lee
- Jaime Mingo
- Jake Worth
- Jakub Malinowski
- James
- James Brantly
- James Burnett
- James Friend
- James Ide
- James Long
- James Pearce
- James Seppi
- James South
- James Wen
- Jamie Wong
- Jamis Charles
- Jamison Dance
- Jan Hancic
- Jan Kassens
- Jan Raasch
- Jared Forsyth
- Jason
- Jason Bonta
- Jason Ly
- Jason Miller
- Jason Quense
- Jason Trill
- Jason Webster
- Jay Jaeho Lee
- Jean Lauliac
- Jed Watson
- Jeff Barczewski
- Jeff Carpenter
- Jeff Chan
- Jeff Hicken
- Jeff Kolesky
- Jeff Morrison
- Jeff Welch
- Jeffrey Lin
- Jeremy Fairbank
- Jesse Skinner
- Jignesh Kakadiya
- Jim OBrien
- Jim Sproch
- Jimmy Jea
- Jing Chen
- Jinwoo Oh
- Jinxiu Lee
- Jiyeon Seo
- Jody McIntyre
- Joe Critchley
- Joe Stein
- Joel Auterson
- Johannes Baiter
- Johannes Emerich
- Johannes Lumpe
- John Heroy
- John Ryan
- John Watson
- John-David Dalton
- Jon Beebe
- Jon Chester
- Jon Hester
- Jon Madison
- Jon Scott Clark
- Jon Tewksbury
- Jonas Enlund
- Jonas Gebhardt
- Jonathan Hsu
- Jonathan Persson
- Jordan Harband
- Jordan Walke
- Jorrit Schippers
- Joseph Nudell
- Joseph Savona
- Josh Bassett
- Josh Duck
- Josh Perez
- Josh Yudaken
- Joshua Evans
- Joshua Go
- Joshua Goldberg
- Joshua Ma
- João Valente
- Juan Serrano
- Julen Ruiz Aizpuru
- Julian Viereck
- Julien Bordellier
- Julio Lopez
- Jun Wu
- Juraj Dudak
- Justas Brazauskas
- Justin Jaffray
- Justin Robison
- Justin Woo
- Kale
- Kamron Batman
- Karl Mikkelsen
- Karpich Dmitry
- Keito Uchiyama
- Ken Powers
- Kent C. Dodds
- Kevin Cheng
- Kevin Coughlin
- Kevin Huang
- Kevin Lau
- Kevin Old
- Kevin Robinson
- Kewei Jiang
- Kier Borromeo
- KimCoding
- Kirk Steven Hansen
- Kit Randel
- Kohei TAKATA
- Koo Youngmin
- Krystian Karczewski
- Kunal Mehta
- Kurt Ruppel
- Kyle Kelley
- Kyle Mathews
- Laurence Rowe
- Laurent Etiemble
- Lee Byron
- Lee Jaeyoung
- Lei
- Leland Richardson
- Leon Fedotov
- Leon Yip
- Leonardo YongUk Kim
- Levi Buzolic
- Levi McCallum
- Lily
- Logan Allen
- Lovisa Svallingson
- Ludovico Fischer
- Luigy Leon
- Luke Horvat
- MIKAMI Yoshiyuki
- Maher Beg
- Manas
- Marcin K.
- Marcin Kwiatkowski
- Marcin Szczepanski
- Mariano Desanze
- Marjan
- Mark Anderson
- Mark Funk
- Mark Hintz
- Mark IJbema
- Mark Murphy
- Mark Richardson
- Mark Rushakoff
- Mark Sun
- Marlon Landaverde
- Marshall Roch
- Martin Andert
- Martin Hujer
- Martin Jul
- Martin Konicek
- Martin Mihaylov
- Masaki KOBAYASHI
- Mathieu M-Gosselin
- Mathieu Savy
- Matias Singers
- Matsunoki
- Matt Brookes
- Matt Dunn-Rankin
- Matt Harrison
- Matt Huggins
- Matt Stow
- Matt Zabriskie
- Matthew Dapena-Tretter
- Matthew Herbst
- Matthew Hodgson
- Matthew Johnston
- Matthew King
- Matthew Looi
- Matthew Miner
- Matthias Le Brun
- Matti Nelimarkka
- Mattijs Kneppers
- Max F. Albrecht
- Max Heiber
- Max Stoiber
- Maxi Ferreira
- Maxim Abramchuk
- Merrick Christensen
- Mert Kahyaoğlu
- Michael Chan
- Michael McDermott
- Michael Randers-Pehrson
- Michael Ridgway
- Michael Warner
- Michael Wiencek
- Michael Ziwisky
- Michal Srb
- Michelle Todd
- Mihai Parparita
- Mike D Pilsbury
- Mike Groseclose
- Mike Nordick
- Mikolaj Dadela
- Miles Johnson
- Minwe LUO
- Miorel Palii
- - Mouad Debbar
- - Morhaus
- Moshe Kolodny
- Mouad Debbar
- Murad
- Murray M. Moss
- Nadeesha Cabral
- Naman Goel
- Nate Hunzaker
- Nate Lee
- Nathan Smith
- Nathan White
- Nee
- Neri Marschik
- Nguyen Truong Duy
- Nicholas Bergson-Shilcock
- Nicholas Clawson
- Nick Balestra
- Nick Fitzgerald
- Nick Gavalas
- Nick Merwin
- Nick Presta
- Nick Raienko
- Nick Thompson
- Nick Williams
- Niklas Boström
- Ning Xia
- Niole Nelson
- Oiva Eskola
- Oleg
- Oleksii Markhovskyi
- Oliver Zeigermann
- Olivier Tassinari
- Owen Coutts
- Pablo Lacerda de Miranda
- Paolo Moretti
- Pascal Hartig
- Patrick
- Patrick Laughlin
- Patrick Stapleton
- Paul Benigeri
- Paul Harper
- Paul OShannessy
- Paul Seiffert
- Paul Shen
@@ -258,87 +512,186 @@
- Peter Blazejewicz
- Peter Cottle
- Peter Jaros
- Peter Newnham
- Petri Lehtinen
- Petri Lievonen
- Pieter Vanderwerff
- Pouja Nikray
- Prathamesh Sonpatki
- Prayag Verma
- Preston Parry
- Rafael
- Rafal Dittwald
- Rainer Oviir
- Rajat Sehgal
- Rajiv Tirumalareddy
- Ram Kaniyur
- Randall Randall
- Ray
- Raymond Ha
- Reed Loden
- Remko Tronçon
- Richard D. Worth
- Richard Feldman
- Richard Kho
- Richard Littauer
- Richard Livesey
- Richard Wood
- Rick Beerendonk
- Rick Ford
- Riley Tomasek
- Rob Arnold
- Robert Binna
- Robert Knight
- Robert Sedovsek
- Robin Berjon
- Robin Frischmann
- Roman Pominov
- Roman Vanesyan
- Russ
- Ryan Seddon
- Sahat Yalkabov
- Saif Hakim
- Saiichi Hashimoto
- Sam Beveridge
- Sam Saccone
- Sam Selikoff
- Samy Al Zahrani
- Sander Spies
- Scott Burch
- Scott Feeney
- Sean Kinsey
- Sebastian Markbåge
- Sebastian McKenzie
- Seoh Char
- Sercan Eraslan
- Serg
- Sergey Generalov
- Sergey Rubanov
- Seyi Adebajo
- Shane O'Sullivan
- Shaun Trennery
- Sheraz
- ShihChi Huang
- Shim Won
- Shinnosuke Watanabe
- Shogun Sea
- Shota Kubota
- Shripad K
- Sibi
- Simen Bekkhus
- Simon Højberg
- Simon Welsh
- Simone Vittori
- Soichiro Kawamura
- Sophia Westwood
- Sota Ohara
- Spencer Handley
- Stefan Dombrowski
- Stephen Murphy
- Sterling Cobb
- Steve Baker
- Steven Luscher
- Steven Vachon
- Stoyan Stefanov
- Sundeep Malladi
- Sunny Juneja
- Sven Helmberger
- Sverre Johansen
- Sébastien Lorber
- Sławomir Laskowski
- Taeho Kim
- Tay Yang Shun
- Ted Kim
- Tengfei Guo
- Teodor Szente
- Thomas Aylott
- Thomas Boyt
- Thomas Broadley
- Thomas Reggi
- Thomas Röggla
- Thomas Shaddox
- Thomas Shafer
- ThomasCrvsr
- Tienchai Wirojsaksaree
- Tim Routowicz
- Tim Schaub
- Timothy Yung
- Timur Carpeev
- Tobias Reiss
- Tom Duncalf
- Tom Haggie
- Tom Hauburger
- Tom MacWright
- Tom Occhino
- Tomasz Kołodziejski
- Tomoya Suzuki
- Tony Spiro
- Toru Kobayashi
- Trinh Hoang Nhu
- Tsung Hung
- Tyler Brock
- Ustin Zarubin
- Vadim Chernysh
- Varun Rau
- Vasiliy Loginevskiy
- Victor Alvarez
- Victor Homyakov
- Victor Koenders
- Ville Immonen
- Vincent Riemer
- Vincent Siao
- Vipul A M
- Vitaly Kramskikh
- Vitor Balocco
- Vjeux
- Volkan Unsal
- Wander Wang
- Wayne Larsen
- WickyNilliams
- Wincent Colaiuta
- Wout Mertens
- Xavier Morel
- XuefengWu
- Yakov Dalinchuk
- Yasar icli
- YouBao Nong
- Yuichi Hagio
- Yuriy Dybskiy
- Yutaka Nakajima
- Yuval Dekel
- Zach Bruggeman
- Zach Ramaekers
- Zacharias
- Zeke Sikelianos
- Zhangjd
- adraeth
- arush
- brafdlog
- chen
- clariroid
- claudiopro
- cutbko
- davidxi
- dongmeng.ldm
- iamchenxin
- iamdoron
- iawia002
- imagentleman
- koh-taka
- kohashi85
- laiso
- leeyoungalias
- li.li
- maxprafferty
- rgarifullin
- songawee
- sugarshin
- wali-s
- yiminghe
- youmoo
- zhangjg
- zwhitchcox
- "Árni Hermann Reynisson"
- "元彦"
- "凌恒"
- "张敏"

View File

@@ -1,8 +1,9 @@
# Map of short name to more information. `name` will be used but if you don't
# want to use your real name, just use whatever. If url is included, your name
# will be a link to the provided url.
billandjing:
name: Bill Fisher and Jing Chen
benigeri:
name: Paul Benigeri
url: https://github.com/benigeri
chenglou:
name: Cheng Lou
url: https://twitter.com/_chenglou
@@ -12,14 +13,21 @@ Daniel15:
fisherwebdev:
name: Bill Fisher
url: https://twitter.com/fisherwebdev
gaearon:
name: Dan Abramov
url: https://twitter.com/dan_abramov
jaredly:
name: Jared Forsyth
url: https://twitter.com/jaredforsyth
jgebhardt:
name: Jonas Gebhardt
url: https://twitter.com/jonasgebhardt
jimandsebastian:
name: Jim Sproch and Sebastian Markbåge
jimfb:
name: Jim Sproch
url: http://www.jimsproch.com
jingc:
name: Jing Chen
url: https://twitter.com/jingc
josephsavona:
name: Joseph Savona
url: https://twitter.com/en_JS

View File

@@ -14,8 +14,10 @@
title: Videos
- id: complementary-tools
title: Complementary Tools
href: https://github.com/facebook/react/wiki/Complementary-Tools
- id: examples
title: Examples
href: https://github.com/facebook/react/wiki/Examples
- title: Guides
items:
- id: why-react
@@ -65,8 +67,12 @@
title: PureRenderMixin
- id: perf
title: Performance Tools
- id: shallow-compare
title: Shallow Compare
- id: advanced-performance
title: Advanced Performance
- id: context
title: Context
- title: Reference
items:
- id: top-level-api
@@ -85,6 +91,8 @@
title: Special Non-DOM Attributes
- id: reconciliation
title: Reconciliation
- id: webcomponents
title: Web Components
- id: glossary
title: React (Virtual) DOM Terminology
- title: Flux

View File

@@ -11,11 +11,14 @@
<p class="meta">
{{ page.date | date: "%B %e, %Y" }}
by
{% if page.author.url %}
<a href="{{page.author.url}}">{{ page.author.name }}</a>
{% else %}
{{ page.author.name }}
{% endif %}
{% for author in page.authors %}
{% if author.url %}
<a href="{{author.url}}">{{ author.name }}</a>
{% else %}
{{ author.name }}
{% endif %}
{% if forloop.last == false %} and {% endif %}
{% endfor %}
</p>
<hr>

View File

@@ -1,8 +1,8 @@
var TODO_COMPONENT = `
var TodoList = React.createClass({
render: function() {
var createItem = function(itemText, index) {
return <li key={index + itemText}>{itemText}</li>;
var createItem = function(item) {
return <li key={item.id}>{item.text}</li>;
};
return <ul>{this.props.items.map(createItem)}</ul>;
}
@@ -16,7 +16,7 @@ var TodoApp = React.createClass({
},
handleSubmit: function(e) {
e.preventDefault();
var nextItems = this.state.items.concat([this.state.text]);
var nextItems = this.state.items.concat([{text: this.state.text, id: Date.now()}]);
var nextText = '';
this.setState({items: nextItems, text: nextText});
},

View File

@@ -1,5 +1,5 @@
/**
* Copyright 2013-2015, Facebook, Inc.
* Copyright 2013-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the

View File

@@ -16,6 +16,7 @@
<link rel="shortcut icon" href="/react/favicon.ico">
<link rel="alternate" type="application/rss+xml" title="{{ site.name }}" href="{{ site.url }}{{ site.baseurl }}/feed.xml">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
<link rel="stylesheet" href="/react/css/syntax.css">
<link rel="stylesheet" href="/react/css/codemirror.css">
<link rel="stylesheet" href="/react/css/react.css">
@@ -28,6 +29,7 @@
<script src="/react/js/es5-shim.min.js"></script>
<script src="/react/js/es5-sham.min.js"></script>
<![endif]-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
<script src="/react/js/codemirror.js"></script>
<script src="/react/js/javascript.js"></script>
<script src="/react/js/react.js"></script>
@@ -50,11 +52,14 @@
<li><a href="/react/support.html"{% if page.id == 'support' %} class="active"{% endif %}>Support</a></li>
<li><a href="/react/downloads.html"{% if page.id == 'downloads' %} class="active"{% endif %}>Download</a></li>
<li><a href="/react/blog/"{% if page.sectionid == 'blog' %} class="active"{% endif %}>Blog</a></li>
<li>
<input id="algolia-doc-search" type="text" placeholder="Search docs..." />
</li>
</ul>
<ul class="nav-site nav-site-external">
<li><a href="https://github.com/facebook/react">GitHub</a>
<li><a href="https://facebook.github.io/react-native/">React Native</a>
<li><a href="https://github.com/facebook/react">GitHub</a></li>
<li><a href="https://facebook.github.io/react-native/">React Native</a></li>
</ul>
</div>
</div>
@@ -107,6 +112,12 @@
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=623268441017527";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
docsearch({
apiKey: '36221914cce388c46d0420343e0bb32e',
indexName: 'react',
inputSelector: '#algolia-doc-search'
});
</script>
</body>
</html>

View File

@@ -7,9 +7,9 @@ sectionid: docs
{% include nav_docs.html %}
<div class="inner-content">
<a class="edit-page-link" href="https://github.com/facebook/react/tree/master/docs/{{ page.path }}" target="_blank">Edit on GitHub</a>
<h1>
{{ page.title }}
<a class="edit-page-link" href="https://github.com/facebook/react/tree/master/docs/{{ page.path }}" target="_blank">Edit on GitHub</a>
</h1>
<div class="subHeader">{{ page.description }}</div>

View File

@@ -0,0 +1,8 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>Redirecting...</title>
<link rel=canonical href="{{ page.dest_url }}">
<meta http-equiv=refresh content="0; url={{ page.dest_url }}">
<h1>Redirecting...</h1>
<a href="{{ page.dest_url }}">Click here if you are not redirected.</a>
<script>location="{{ page.dest_url }}"</script>

View File

@@ -7,7 +7,15 @@ module Authors
class Generator < Jekyll::Generator
def generate(site)
site.posts.each do |post|
post.data['author'] = site.data['authors'][post['author']]
authors = []
if post['author'].kind_of?(Array)
for author in post['author']
authors.push(site.data['authors'][author])
end
else
authors.push(site.data['authors'][post['author']])
end
post.data['authors'] = authors
end
end
end

View File

@@ -4,7 +4,14 @@ module Jekyll
pageID = @context.registers[:page]["id"]
itemID = item["id"]
href = item["href"] || "/react/docs/#{itemID}.html"
className = pageID == itemID ? ' class="active"' : ''
classes = []
if pageID == itemID
classes.push("active")
end
if item["href"]
classes.push("external")
end
className = classes.size > 0 ? " class=\"#{classes.join(' ')}\"" : ""
return "<a href=\"#{href}\"#{className}>#{item["title"]}</a>"
end

View File

@@ -34,7 +34,7 @@ While this is not going to work for all the attributes since they are camelCased
## Remarkable React
[Stoyan Stefanov](http://www.phpied.com/) gave a talk at [BrazilJS](http://braziljs.com.br/) about React and wrote an article with the content of the presentation. He goes through the difficulties of writting _active apps_ using the DOM API and shows how React handles it.
[Stoyan Stefanov](http://www.phpied.com/) gave a talk at [BrazilJS](http://braziljs.com.br/) about React and wrote an article with the content of the presentation. He goes through the difficulties of writing _active apps_ using the DOM API and shows how React handles it.
> So how does exactly React deal with it internally? Two crazy ideas - virtual DOM and synthetic events.
>

View File

@@ -56,7 +56,7 @@ The video will be available soon on the [JSConf EU website](http://2013.jsconf.e
[Todd Kennedy](http://blog.selfassembled.org/) working at [Cond&eacute; Nast](http://www.condenast.com/) implemented a wrapper on-top of [JSHint](http://www.jshint.com/) that first converts JSX files to JS.
> A wrapper around JSHint to allow linting of files containg JSX syntax. Accepts glob patterns. Respects your local .jshintrc file and .gitignore to filter your glob patterns.
> A wrapper around JSHint to allow linting of files containing JSX syntax. Accepts glob patterns. Respects your local .jshintrc file and .gitignore to filter your glob patterns.
>
> ```
npm install -g jsxhint

View File

@@ -13,7 +13,7 @@ React is only one-piece of your web application stack. [Mark Lussier](https://gi
>
> I encourage you to fork, and make it right and submit a pull request!
>
> My current opinion is using tools like Grunt, Browserify, Bower and mutiple grunt plugins to get the job done. I also opted for Zepto over jQuery and the Flatiron Project's Director when I need a router. Oh and for the last little bit of tech that makes you mad, I am in the SASS camp when it comes to stylesheets
> My current opinion is using tools like Grunt, Browserify, Bower and multiple grunt plugins to get the job done. I also opted for Zepto over jQuery and the Flatiron Project's Director when I need a router. Oh and for the last little bit of tech that makes you mad, I am in the SASS camp when it comes to stylesheets
>
> [Check it out on GitHub...](https://github.com/intabulas/reactjs-baseline)

View File

@@ -54,7 +54,7 @@ It's great to see the React community expand internationally. [This site](http:/
### Egghead.io video tutorials
Joe Maddalone ([@joemaddalone](https://twitter.com/joemaddalone)) of [egghead.io](https://egghead.io/) created a series of React video tutorials, such as [this](http://www.youtube-nocookie.com/watch?v=rFvZydtmsxM&feature=youtu.be&a) introduction to React Components. [[part 1](http://www.youtube-nocookie.com/watch?v=rFvZydtmsxM&feature=youtu.be&a)], [[part 2](http://www.youtube-nocookie.com/watch?v=5yvFLrt7N8M)]
Joe Maddalone ([@joemaddalone](https://twitter.com/joemaddalone)) of [egghead.io](https://egghead.io/) created a series of React video tutorials, such as [this](http://www.youtube-nocookie.com/v/rFvZydtmsxM) introduction to React Components. [[part 1](http://www.youtube-nocookie.com/v/rFvZydtmsxM)], [[part 2](http://www.youtube-nocookie.com/v/5yvFLrt7N8M)]
### "React: Finally, a great server/client web stack"

View File

@@ -49,7 +49,7 @@ React.DOM.div(null,
)
```
We believe this new behavior is more helpful and elimates cases where unwanted whitespace was previously added.
We believe this new behavior is more helpful and eliminates cases where unwanted whitespace was previously added.
In cases where you want to preserve the space adjacent to a newline, you can write a JS string like `{"Monkeys: "}` in your JSX source. We've included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can [install jsx\_whitespace\_transformer from npm](https://github.com/facebook/react/blob/master/npm-jsx_whitespace_transformer/README.md) and run it over your source tree to modify files in place. The transformed JSX files will preserve your code's existing whitespace behavior.

View File

@@ -57,7 +57,7 @@ React.DOM.div(null,
)
```
We believe this new behavior is more helpful and elimates cases where unwanted whitespace was previously added.
We believe this new behavior is more helpful and eliminates cases where unwanted whitespace was previously added.
In cases where you want to preserve the space adjacent to a newline, you can write `{'Monkeys: '}` or `Monkeys:{' '}` in your JSX source. We've included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can [install jsx\_whitespace\_transformer from npm](https://github.com/facebook/react/blob/master/npm-jsx_whitespace_transformer/README.md) and run it over your source tree to modify files in place. The transformed JSX files will preserve your code's existing whitespace behavior.

View File

@@ -1,6 +1,6 @@
---
title: "Flux: An Application Architecture for React"
author: fisherwebdevandjing
author: [fisherwebdev, jingc]
---
We recently spoke at one of f8's breakout session about Flux, a data flow architecture that works well with React. Check out the video here:

View File

@@ -41,7 +41,7 @@ We have wanted to do this since before we even open sourced React. No more `/**
The React specific JSX transform no longer transforms to function calls. Instead we use `React.createElement` and pass it arguments. This allows us to make optimizations and better support React as a compile target for things like Om. Read more in the [React Elements introduction](/react/blog/2014/10/14/introducting-react-elements.html).
The result of this change is that we will no longer support arbitrary function calls. We understand that the ability to do was was a convenient shortcut for many people but we believe the gains will be worth it.
The result of this change is that we will no longer support arbitrary function calls. We understand that the ability to do was a convenient shortcut for many people but we believe the gains will be worth it.
### JSX Lower-case Convention

View File

@@ -17,7 +17,7 @@ stick with the originally planned format and venue on Facebook's campus.
Unfortunately, this means that we can only accept a small number of the awesome
conference talk proposals. In order to make sure attendees get a fair shot at
registering, we're going to to sell tickets in three separate first-come,
registering, we're going to sell tickets in three separate first-come,
first-serve phases. **Tickets will cost $200 regardless of which phase they are
purchased from and all proceeds will go to charity**.

View File

@@ -4,7 +4,7 @@ layout: post
author: steveluscher
---
It was a privilege to welcome the React community to Facebook HQ on January 2829 for the first-ever React.js Conf, and a pleasure to be be able to unveil three new technologies that we've been using internally at Facebook for some time: GraphQL, Relay, and React Native.
It was a privilege to welcome the React community to Facebook HQ on January 2829 for the first-ever React.js Conf, and a pleasure to be able to unveil three new technologies that we've been using internally at Facebook for some time: GraphQL, Relay, and React Native.
## The talks

View File

@@ -3,7 +3,7 @@ title: "Building The Facebook News Feed With Relay"
author: josephsavona
---
At React.js Conf in January we gave a preview of Relay, a new framework for building data-driven applications in React. In this post, we'll describe the process of creating a Relay application. This post assumes some familiarity with the concepts of Relay and GraphQL, so if you haven't already we recommend reading [our introductory blog post](/react/blog/2015/02/20/introducing-relay-and-graphql.html) or watching [the conference talk](https://www.youtube-nocookie.com/watch?v=9sc8Pyc51uU).
At React.js Conf in January we gave a preview of Relay, a new framework for building data-driven applications in React. In this post, we'll describe the process of creating a Relay application. This post assumes some familiarity with the concepts of Relay and GraphQL, so if you haven't already we recommend reading [our introductory blog post](/react/blog/2015/02/20/introducing-relay-and-graphql.html) or watching [the conference talk](https://www.youtube-nocookie.com/v/9sc8Pyc51uU).
We're working hard to prepare GraphQL and Relay for public release. In the meantime, we'll continue to provide information about what you can expect.
@@ -40,20 +40,18 @@ The first step is a React `<Story>` component that accepts a `story` prop with t
```javascript
// Story.react.js
class Story extends React.Component {
export default class Story extends React.Component {
render() {
var story = this.props.story;
return (
<View>
<Image uri={story.author.profile_picture.uri} />
<Image uri={story.author.profilePicture.uri} />
<Text>{story.author.name}</Text>
<Text>{story.text}</Text>
</View>
);
}
}
module.exports = Story;
```
<br/>
@@ -66,41 +64,41 @@ Relay automates the process of fetching data for components by wrapping existing
// Story.react.js
class Story extends React.Component { ... }
module.exports = Relay.createContainer(Story, {
queries: {
export default Relay.createContainer(Story, {
fragments: {
story: /* TODO */
}
});
```
Before adding the GraphQL query, let's look at the component hierarchy this creates:
Before adding the GraphQL fragment, let's look at the component hierarchy this creates:
<img src="/react/img/blog/relay-components/relay-containers.png" width="397" alt="React Container Data Flow" />
Most props will be passed through from the container to the original component. However, Relay will return the query results for a prop whenever a query is defined. In this case we'll add a GraphQL query for `story`:
Most props will be passed through from the container to the original component. However, Relay will return the query results for a prop whenever a fragment is defined. In this case we'll add a GraphQL fragment for `story`:
```javascript
// Story.react.js
class Story extends React.Component { ... }
module.exports = Relay.createContainer(Story, {
queries: {
story: graphql`
Story {
export default Relay.createContainer(Story, {
fragments: {
story: () => Relay.QL`
fragment on Story {
author {
name,
profile_picture {
name
profilePicture {
uri
}
},
}
text
}
`
}
`,
},
});
```
Queries use ES6 template literals tagged with the `graphql` function. Similar to how JSX transpiles to plain JavaScript objects and function calls, these template literals transpile to plain objects that describe queries. Note that the query's structure closely matches the object structure that we expected in `<Story>`'s render function.
Queries use ES6 template literals tagged with the `Relay.QL` function. Similar to how JSX transpiles to plain JavaScript objects and function calls, these template literals transpile to plain objects that describe fragments. Note that the fragment's structure closely matches the object structure that we expected in `<Story>`'s render function.
<br/>
@@ -112,7 +110,7 @@ We can render a Relay component by providing Relay with the component (`<Story>`
{
author: {
name: "Greg",
profile_picture: {
profilePicture: {
uri: "https://…"
}
},
@@ -159,35 +157,35 @@ module.exports = NewsFeed;
`<NewsFeed>` has two new requirements: it composes `<Story>` and requests more data at runtime.
Just as React views can be nested, Relay queries can compose queries from child components. Composition in GraphQL uses ES6 template literal substitution: `${Component.getQuery('prop')}`. Pagination can be accomplished with a query parameter, specified with `<param>` (as in `stories(first: <count>)`):
Just as React views can be nested, Relay components can compose query fragments from child components. Composition in GraphQL uses ES6 template literal substitution: `${Component.getFragment('prop')}`. Pagination can be accomplished with a variable, specified with `$variable` (as in `stories(first: $count)`):
```javascript
// NewsFeed.react.js
class NewsFeed extends React.Component { ... }
module.exports = Relay.createContainer(NewsFeed, {
queryParams: {
count: 3 /* default to 3 stories */
export default Relay.createContainer(NewsFeed, {
initialVariables: {
count: 3 /* default to 3 stories */
},
queries: {
viewer: graphql`
Viewer {
stories(first: <count>) { /* fetch viewer's stories */
edges { /* traverse the graph */
fragments: {
viewer: () => Relay.QL`
fragment on Viewer {
stories(first: $count) { /* fetch viewer's stories */
edges { /* traverse the graph */
node {
${Story.getQuery('story')} /* compose child query */
${Story.getFragment('story')} /* compose child fragment */
}
}
}
}
`
}
`,
},
});
```
Whenever `<NewsFeed>` is rendered, Relay will recursively expand all the composed queries and fetch them in a single trip to the server. In this case, the `text` and `author` data will be fetched for each of the 3 story nodes.
Whenever `<NewsFeed>` is rendered, Relay will recursively expand all the composed fragments and fetch the queries in a single trip to the server. In this case, the `text` and `author` data will be fetched for each of the 3 story nodes.
Query parameters are available to components as `props.queryParams` and can be modified with `props.setQueryParams(nextParams)`. We can use these to implement pagination:
Query variables are available to components as `props.relay.variables` and can be modified with `props.relay.setVariables(nextVariables)`. We can use these to implement pagination:
```javascript
// NewsFeed.react.js
@@ -196,16 +194,16 @@ class NewsFeed extends React.Component {
loadMore() {
// read current params
var count = this.props.queryParams.count;
var count = this.props.relay.variables.count;
// update params
this.props.setQueryParams({
count: count + 5
this.props.relay.setVariables({
count: count + 5,
});
}
}
```
Now when `loadMore()` is called, Relay will send a GraphQL request for the additional five stories. When these stories are fetched, the component will re-render with the new stories available in `props.viewer.stories` and the updated count reflected in `props.queryParams.count`.
Now when `loadMore()` is called, Relay will send a GraphQL request for the additional five stories. When these stories are fetched, the component will re-render with the new stories available in `props.viewer.stories` and the updated count reflected in `props.relay.variables.count`.
<br/>

View File

@@ -77,7 +77,7 @@ We believe there are a number of weakness in typical REST systems, ones that are
* Fetching complicated object graphs require multiple round trips between the client and server to render single views. For mobile applications operating in variable network conditions, these multiple roundtrips are highly undesirable.
* Invariably fields and additional data are added to REST endpoints as the system requirements change. However, old clients also receive this additional data as well, because the data fetching specification is encoded on the server rather than the client. As result, these payloads tend to grow over time for all clients. When this becomes a problem for a system, one solution is to overlay a versioning system onto the REST endpoints. Versioning also complicates a server, and results in code duplication, spaghetti code, or a sophisticated, hand-rolled infrastructure to manage it. Another solution to limit over-fetching is to provide multiple views such as “compact” vs “full” of the same REST endpoint, however this coarse granularity often does not offer adequate flexibility.
* REST endpoints are usually weakly-typed and lack machine-readable metadata. While there is much debate about the merits of strong- versus weak-typing in distributed systems, we believe in strong typing because of the correctness guarantees and tooling opportunities it provides. Developer deal with systems that lack this metadata by inspecting frequently out-of-date documentation and then writing code against the documentation.
* REST endpoints are usually weakly-typed and lack machine-readable metadata. While there is much debate about the merits of strong- versus weak-typing in distributed systems, we believe in strong typing because of the correctness guarantees and tooling opportunities it provides. Developers deal with systems that lack this metadata by inspecting frequently out-of-date documentation and then writing code against the documentation.
* Many of these attributes are linked to the fact that “REST is intended for long-lived network-based applications that span multiple organizations” [according to its inventor](http://roy.gbiv.com/untangled/2008/rest-apis-must-be-hypertext-driven). This is not a requirement for APIs that serve a client app built within the same organization.
Nearly all externally facing REST APIs we know of trend or end up in these non-ideal states, as well as nearly all *internal* REST APIs. The consequences of opaqueness and over-fetching are more severe in internal APIs since their velocity of change and level of usage is almost always higher.
@@ -90,7 +90,7 @@ Because of multiple round-trips and over-fetching, applications built in the RES
Many applications have no formalized client-server contract. Product developers access server capabilities through *ad hoc* endpoints and write custom code to fetch the data they need. Servers define procedures, and they return data. This approach has the virtue of simplicity, but can often become untenable as systems age.
* These systems typically define a custom endpoint per view. For systems with a wide surface area this can quickly grow into a maintenance nightmare of orphaned endpoints, inconsistent tooling, and massive server code duplication. Disciplined engineering organizations can mitigate these issues with great engineering practices, high quality abstractions, and custom tooling. However, given our experience we believe that custom endpoints tend to lead to entropic server codebases.
* Much like REST, the payloads of custom endpoints grow monotonically (even with mitigation from versioning systems) as the server evolves. Deployed clients cannot break, and, with rapid release cycles and backwards compatibility guarantees, distributed applications will have large numbers of extant versions. Under these constraints it is difficult remove data from a custom endpoint.
* Much like REST, the payloads of custom endpoints grow monotonically (even with mitigation from versioning systems) as the server evolves. Deployed clients cannot break, and, with rapid release cycles and backwards compatibility guarantees, distributed applications will have large numbers of extant versions. Under these constraints it is difficult to remove data from a custom endpoint.
* Custom endpoints tend to for a client developer create a clunky, multi-language, multi-environment development process. No matter if the data has been accessed before in a different view, they are required to first change the custom endpoint, then deploy that code to a server accessible from a mobile device, and only then change the client to utilize that data. In GraphQL unless the data in the view is completely new to the entire system a product developer adds a field to a GraphQL query and the work on the client continues unabated.
* Much like REST, most systems with custom endpoints do not have a formalized type system, which eliminates the possibility for the tools and guarantees that introspective type systems can provide. Some custom-endpoint-driven systems do use a strongly typed serialization scheme, such as Protocol Buffers, Thrift, or XML. Those do allow for direct parsing of responses into typed classes and eliminating boilerplate shuffling from JSON into handwritten classes. These systems are as not as expressive and flexible as GraphQL, and the other downsides of *ad hoc* endpoints remain.

View File

@@ -57,7 +57,7 @@ These builds are also available in the `react` package on bower.
ReactDOM.render(<MyComponent />, node);
```
Weve published the [automated codemod script](https://github.com/facebook/react/blob/master/packages/react-codemod/README.md) we used at Facebook to help you with this transition.
Weve published the [automated codemod script](https://github.com/reactjs/react-codemod/blob/master/README.md) we used at Facebook to help you with this transition.
The add-ons have moved to separate packages as well: `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`, and `react-addons-update`, plus `ReactDOM.unstable_batchedUpdates` in `react-dom`.

View File

@@ -1,6 +1,6 @@
---
title: "ReactDOM.render and the Top Level React API"
author: jimandsebastian
author: ["jimfb", "sebmarkbage"]
---

View File

@@ -15,6 +15,8 @@ Like always, we have a few breaking changes in this release. We know changes can
If your code is free of warnings when running under React 0.13, upgrading should be easy. We have two new small breaking changes that didn't give a warning in 0.13 (see below). Every new change in 0.14, including the major changes below, is introduced with a runtime warning and will work as before until 0.15, so you don't have to worry about your app breaking with this upgrade.
For the two major changes which require significant code changes, we've included [codemod scripts](https://github.com/reactjs/react-codemod/blob/master/README.md) to help you upgrade your code automatically.
See the changelog below for more details.
## Installation
@@ -64,7 +66,7 @@ If you cant use `npm` yet, we provide pre-built browser builds for your conve
ReactDOM.render(<MyComponent />, node);
```
The old names will continue to work with a warning until 0.15 is released, and weve published the [automated codemod script](https://github.com/facebook/react/blob/master/packages/react-codemod/README.md) we used at Facebook to help you with this transition.
The old names will continue to work with a warning until 0.15 is released, and weve published the [automated codemod script](https://github.com/reactjs/react-codemod/blob/master/README.md) we used at Facebook to help you with this transition.
The add-ons have moved to separate packages as well:
- `react-addons-clone-with-props`
@@ -99,7 +101,7 @@ If you cant use `npm` yet, we provide pre-built browser builds for your conve
```
This change also applies to the return result of `ReactDOM.render` when passing a DOM node as the top component. As with refs, this change does not affect custom components.
With this change, were deprecating `.getDOMNode()` and replacing it with `ReactDOM.findDOMNode` (see below). If your components are currently using `.getDOMNode()`, they will continue to work with a warning until 0.15.
- #### Stateless functional components
@@ -124,7 +126,7 @@ If you cant use `npm` yet, we provide pre-built browser builds for your conve
```
These components behave just like a React class with only a `render` method defined. Since no component instance is created for a functional component, any `ref` added to one will evaluate to `null`. Functional components do not have lifecycle methods, but you can set `.propTypes` and `.defaultProps` as properties on the function.
This pattern is designed to encourage the creation of these simple components that should comprise large portions of your apps. In the future, well also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations.
- #### Deprecation of react-tools
@@ -133,7 +135,7 @@ If you cant use `npm` yet, we provide pre-built browser builds for your conve
- #### Compiler optimizations
React now supports two compiler optimizations that can be enabled in Babel 5.8.23 and newer. Both of these transforms **should be enabled only in production** (e.g., just before minifying your code) because although they improve runtime performance, they make warning messages more cryptic and skip important checks that happen in development mode, including propTypes.
React now supports two compiler optimizations that can be enabled in Babel 5.8.24 and newer. Both of these transforms **should be enabled only in production** (e.g., just before minifying your code) because although they improve runtime performance, they make warning messages more cryptic and skip important checks that happen in development mode, including propTypes.
**Inlining React elements:** The `optimisation.react.inlineElements` transform converts JSX elements to object literals like `{type: 'div', props: ...}` instead of calls to `React.createElement`.
@@ -159,7 +161,7 @@ Each of these changes will continue to work as before with a new warning until t
- Due to the DOM node refs change mentioned above, `this.getDOMNode()` is now deprecated and `ReactDOM.findDOMNode(this)` can be used instead. Note that in most cases, calling `findDOMNode` is now unnecessary see the example above in the “DOM node refs” section.
With each returned DOM node, we've added a `getDOMNode` method for backwards compatibility that will work with a warning until 0.15. If you have a large codebase, you can use our [automated codemod script](https://github.com/facebook/react/blob/master/packages/react-codemod/README.md) to change your code automatically.
With each returned DOM node, we've added a `getDOMNode` method for backwards compatibility that will work with a warning until 0.15. If you have a large codebase, you can use our [automated codemod script](https://github.com/reactjs/react-codemod/blob/master/README.md) to change your code automatically.
- `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](/react/blog/2015/01/27/react-v0.13.0-beta-1.html#other-languages) will continue to work.

View File

@@ -0,0 +1,86 @@
---
title: "Reactiflux is moving to Discord"
author: benigeri
---
TL;DR: Slack decided that Reactiflux had too many members and disabled new invites. Reactiflux is moving to Discord. Join us: [http://join.reactiflux.com](http://join.reactiflux.com/)
## What happened with Slack?
A few weeks ago, Reactiflux reached 7,500 members on Slack. Shortly after, Slack decided we were too big and disabled invites. There was no way for new users to join. Many of us were sad and upset. We loved Slack. Our community was built around it.
We reached out to Slack several times, but their decision was firm. Our large community caused performance issues. Slack wants to focus on building a great product for teams, not necessarily large open communities. Losing focus and building for too many use cases always leads to product bloat, and eventually a decrease in quality.
## So… why Discord?
After a [long and thorough debate](https://github.com/reactiflux/volunteers/issues/25), Discord quickly emerged as the most promising service. After just a few days, 400 members had joined the Discord server, and many already loved it.
### Easiest to join
Discord is the easiest platform to join. New users can immediately join our conversations without having to create an account. All they need to do is provide a name. No permission granting, no password, no email confirmation.
This is critically useful for us, and will make Reactiflux even more open and accessible.
### Great apps
Out of all of the services weve tried, Discords apps are by far the most polished. They are well designed, easy to use, and surprisingly fast. In addition to the web app, they have mobile apps on both iOS and Android as well as desktop apps for OS X and Windows, with Linux support coming soon.
Their desktop apps are built with React and Electron, and their iOS app is built with React Native.
### Moderation tools
So far, weve been fortunate not to have to deal with spammers and trolls. As our community continues to grow, that might change. Unsurprisingly, Discord is the only app weve seen with legitimate moderation tools. It was built for gaming communities, after all.
### Great multiple Server support
Your Discord account works with every Discord server, which is the equivalent of a Slack team. You dont need to create a new account every time you join a new team. You can join new servers in one click, and its very easy to switch between them. Discord messages also work across servers, so your personal conversations are not scoped to a single server.
Instead of having one huge, crowded Reactiflux server, we can branch off closely related channels into sub-servers. Communities will start overlapping, and it will be easy to interact with non-Reactiflux channels.
### Its hosted
Self-hosted apps require maintenance. Were all busy, and we can barely find the time to keep our landing page up to date and running smoothly. More than anything, we need a stable platform, and we dont have the resources to guarantee that right now.
Its a much safer bet to offload the hosting to Discord, who is already keeping the lights on for all their users.
### We like the team
And they seem to like us back. They are excited for us to join them, and theyve been very responsive to our feedback and suggestions.
They implemented code syntax highlighting just a few days after we told them we needed it.
Discords team has already built a solid suite of apps, and they have shown us how much they care about their users. Were excited to see how they will continue to improve their product.
## And whats the catch?
Choosing the best chat service is subjective. There are a million reasons why Discord *might be* a terrible idea. Here are the ones that were most worried about:
### Difficult channel management
Channel management seems to be the biggest issue. There is no way to opt out of channels; you can only mute them. And you can only mute channels one by one. There is no way to star channels, and channels can only be sorted on the server level. Each user will see the list of channels in the same order.
As the number of channels grow, it will be challenging to keep things in order. Branching off sub-servers will help, and we will keep an easily accessible directory of channels across our main server and all of the sub-servers.
We can build simple tools to make channel lookup easier, and the Discord team is working on improvements that should make this more manageable.
### No Search
Lack of search is clearly a bummer, but Discord is working on it. Search is coming!
### Firewall
A couple of users arent able to access Discord at work since other corporate filters classify it as a gaming application. This sucks, but it seems to be a rare case. So far, it seems only to affect 0.6% of our current community (3/500).
We hope that these users can get Discord's domains whitelisted, and well try to find a solution if this is a widespread issue. The Discord team is aware of the issue as well.
## Is Discord going to disappear tomorrow?
Probably not tomorrow. They have 14 people [full time](https://discordapp.com/company), and theyve raised money from some of the best investors in Silicon Valley, including [Benchmark](http://www.benchmark.com/) and [Accel](http://www.accel.com/companies/).
By focusing on gaming communities, Discord has differentiated itself from the many other communication apps. Discord is well received and has a rapidly growing user base. They plan to keep their basic offerings free for unlimited users and hope to make money with premium offerings (themes, add-ons, content, and more).
## Join us!
More than 500 of us have already migrated to the new Reactiflux. Join us, we're one click away: [http://join.reactiflux.com](http://join.reactiflux.com/)
*Note: Jordan Hawkers thorough [research](http://jhawk.co/team-chat-comparison) made our decision a lot easier.*

View File

@@ -0,0 +1,40 @@
---
title: "React v0.14.1"
author: zpao
---
After a couple weeks of having more people use v0.14, we're ready to ship a patch release addressing a few issues. Thanks to everybody who has reported issues and written patches!
The release is now available for download:
* **React**
Dev build with warnings: <https://fb.me/react-0.14.1.js>
Minified build for production: <https://fb.me/react-0.14.1.min.js>
* **React with Add-Ons**
Dev build with warnings: <https://fb.me/react-with-addons-0.14.1.js>
Minified build for production: <https://fb.me/react-with-addons-0.14.1.min.js>
* **React DOM** (include React in the page before React DOM)
Dev build with warnings: <https://fb.me/react-dom-0.14.1.js>
Minified build for production: <https://fb.me/react-dom-0.14.1.min.js>
We've also published version `0.14.1` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower.
- - -
## Changelog
### React DOM
- Fixed bug where events wouldn't fire in old browsers when using React in development mode
- Fixed bug preventing use of `dangerouslySetInnerHTML` with Closure Compiler Advanced mode
- Added support for `srcLang`, `default`, and `kind` attributes for `<track>` elements
- Added support for `color` attribute
- Ensured legacy `.props` access on DOM nodes is updated on re-renders
### React TestUtils Add-on
- Fixed `scryRenderedDOMComponentsWithClass` so it works with SVG
### React CSSTransitionGroup Add-on
- Fix bug preventing `0` to be used as a timeout value
### React on Bower
- Added `react-dom.js` to `main` to improve compatibility with tooling

View File

@@ -0,0 +1,31 @@
---
title: "React v0.14.2"
author: zpao
---
We have a quick update following the release of 0.14.1 last week. It turns out we broke a couple things in the development build of React when using Internet Explorer. Luckily it was only the development build, so your production applications were unaffected. This release is mostly to address those issues. There is one notable change if consuming React from npm. For the `react-dom` package, we moved `react` from a regular dependency to a peer dependency. This will impact very few people as these two are typically installed together at the top level, but it will fix some issues with dependencies of installed components also using `react` as a peer dependency.
The release is now available for download:
* **React**
Dev build with warnings: <https://fb.me/react-0.14.2.js>
Minified build for production: <https://fb.me/react-0.14.2.min.js>
* **React with Add-Ons**
Dev build with warnings: <https://fb.me/react-with-addons-0.14.2.js>
Minified build for production: <https://fb.me/react-with-addons-0.14.2.min.js>
* **React DOM** (include React in the page before React DOM)
Dev build with warnings: <https://fb.me/react-dom-0.14.2.js>
Minified build for production: <https://fb.me/react-dom-0.14.2.min.js>
We've also published version `0.14.2` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower.
- - -
## Changelog
### React DOM
- Fixed bug with development build preventing events from firing in some versions of Internet Explorer & Edge
- Fixed bug with development build when using es5-sham in older versions of Internet Explorer
- Added support for `integrity` attribute
- Fixed bug resulting in `children` prop being coerced to a string for custom elements, which was not the desired behavior.
- Moved `react` from `dependencies` to `peerDependencies` to match expectations and align with `react-addons-*` packages

View File

@@ -0,0 +1,40 @@
---
title: "React v0.14.3"
author: zpao
---
It's time for another installment of React patch releases! We didn't break anything in v0.14.2 but we do have a couple of other bugs we're fixing. The biggest change in this release is actually an addition of a new built file. We heard from a number of people that they still need the ability to use React to render to a string on the client. While the use cases are not common and there are other ways to achieve this, we decided that it's still valuable to support. So we're now building `react-dom-server.js`, which will be shipped to Bower and in the `dist/` directory of the `react-dom` package on npm. This file works the same way as `react-dom.js` and therefore requires that the primary React build has already been included on the page.
The release is now available for download:
* **React**
Dev build with warnings: <https://fb.me/react-0.14.3.js>
Minified build for production: <https://fb.me/react-0.14.3.min.js>
* **React with Add-Ons**
Dev build with warnings: <https://fb.me/react-with-addons-0.14.3.js>
Minified build for production: <https://fb.me/react-with-addons-0.14.3.min.js>
* **React DOM** (include React in the page before React DOM)
Dev build with warnings: <https://fb.me/react-dom-0.14.3.js>
Minified build for production: <https://fb.me/react-dom-0.14.3.min.js>
* **React DOM Server** (include React in the page before React DOM Server)
Dev build with warnings: <https://fb.me/react-dom-server-0.14.3.js>
Minified build for production: <https://fb.me/react-dom-server-0.14.3.min.js>
We've also published version `0.14.3` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower.
- - -
## Changelog
### React DOM
- Added support for `nonce` attribute for `<script>` and `<style>` elements
- Added support for `reversed` attribute for `<ol>` elements
### React TestUtils Add-on
- Fixed bug with shallow rendering and function refs
### React CSSTransitionGroup Add-on
- Fixed bug resulting in timeouts firing incorrectly when mounting and unmounting rapidly
### React on Bower
- Added `react-dom-server.js` to expose `renderToString` and `renderToStaticMarkup` for usage in the browser

View File

@@ -0,0 +1,45 @@
---
title: React.js Conf 2016 Diversity Scholarship
author: zpao
---
I am thrilled to announced that we will be organizing another diversity scholarship program for the upcoming React.js Conf! The tech industry is suffering from a lack of diversity, but it's important to us that we have a thriving community that is made up of people with a variety of experiences and viewpoints.
When we ran this program last year, we had *over 200* people apply for only 10 tickets. There were so many people that we wanted to bring in but we couldn't. The results were still awesome, and we had bright individuals from around the world attending who would have otherwise been unable to. These attendees took part in discussions at the conference and brought perspectives that we might not have otherwise seen there.
This year we're excited to bring back the scholarship, but we've set aside **40 tickets** because we really believe that it's important to do our best to make sure we have an even more diverse audience.
This is something I'm personally really excited to be a part of. I know the rest of the team is as well. We're really proud to have everyone at Facebook providing support and funding for this.
The details of the scholarship are provided below (or you can [go directly to the application](http://goo.gl/forms/PEmKj8oUp4)). I encourage you to apply! If you don't feel like you are eligible yourself, you can still help send this along to friends, family, coworkers, acquaintances, or anybody who might be interested. And even if you haven't spoken before, please consider [submitting a proposal for a talk](http://conf.reactjs.com/) (either 30 minutes or just 5 minutes) - we're hoping to have a very diverse group of speakers in addition to attendees.
- - -
Facebook is excited to announce that we are now accepting applications for the React.js Conf Diversity Scholarship!
Beginning today, those studying or working in computer science or a related field can apply for a partial scholarship to attend the React.js Conf in San Francisco, CA on February 22 & 23, 2016.
React opens a world of new possibilities such as server-side rendering, real-time updates, different rendering targets like SVG and canvas. React Native makes is easy to use the same concepts and technologies to build native mobile experiences on iOS and Android. Join us at React.js Conf to shape the future of client-side applications! For more information about the React.js conference, please see [the website](http://conf.reactjs.com/).
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>**
## Award Includes
* Paid registration fee for the React.js Conf Feburary 22 & 23 in downtown San Francisco, CA
* Paid lodging expenses for February 21, 22, 23
## Important Dates
* Sunday December 13th 2015 - 11:59 PST: Applications for the React.js Conf Scholarship must be submitted in full
* Wednesday, December 16th, 2015: Award recipients will be notified by email of their acceptance
* Monday & Tuesday, February 22 & 23, 2016: React.js Conf
## Eligibility
* Must currently be studying or working in Computer Science or a related field
* International applicants are welcome, but you will be responsible for securing your own visa to attend the conference
* You must be able to provide your own transportation to San Francisco
* You must be available to attend the full duration of React.js Conf on February 22 & 23 in San Francisco, CA

View File

@@ -0,0 +1,80 @@
---
title: "isMounted is an Antipattern"
author: jimfb
---
As we move closer to officially deprecating isMounted, it's worth understanding why the function is an antipattern, and how to write code without the isMounted function.
The primary use case for `isMounted()` is to avoid calling `setState()` after a component has unmounted, because calling `setState()` after a component has unmounted will emit a warning. The “setState warning” exists to help you catch bugs, because calling `setState()` on an unmounted component is an indication that your app/component has somehow failed to clean up properly. Specifically, calling `setState()` in an unmounted component means that your app is still holding a reference to the component after the component has been unmounted - which often indicates a memory leak!
To avoid the error message, people often add lines like this:
```js
if(this.isMounted()) { // This is bad.
this.setState({...});
}
```
Checking `isMounted` before calling `setState()` does eliminate the warning, but it also defeats the purpose of the warning, since now you will never get the warning (even when you should!)
Other uses of `isMounted()` are similarly erroneous; using `isMounted()` is a code smell because the only reason you would check is because you think you might be holding a reference after the component has unmounted.
An easy migration strategy for anyone upgrading their code to avoid `isMounted()` is to track the mounted status yourself. Just set a `_isMounted` property to true in `componentDidMount` and set it to false in `componentWillUnmount`, and use this variable to check your component's status.
An optimal solution would be to find places where `setState()` might be called after a component has unmounted, and fix them. Such situations most commonly occur due to callbacks, when a component is waiting for some data and gets unmounted before the data arrives. Ideally, any callbacks should be canceled in `componentWillUnmount`, prior to unmounting.
For instance, if you are using a Flux store in your component, you must unsubscribe in `componentWillUnmount`:
```javascript{9}
class MyComponent extends React.Component {
componentDidMount() {
mydatastore.subscribe(this);
}
render() {
...
}
componentWillUnmount() {
mydatastore.unsubscribe(this);
}
}
```
If you use ES6 promises, you may need to wrap your promise in order to make it cancelable.
```js
const cancelablePromise = makeCancelable(
new Promise(r => component.setState({...}}))
);
cancelablePromise
.promise
.then(() => console.log('resolved'))
.catch((reason) => console.log('isCanceled', reason.isCanceled));
cancelablePromise.cancel(); // Cancel the promise
```
Where `makeCancelable` is [defined by @istarkov](https://github.com/facebook/react/issues/5465#issuecomment-157888325) as:
```js
const makeCancelable = (promise) => {
let hasCanceled_ = false;
const wrappedPromise = new Promise((resolve, reject) => {
promise.then((val) =>
hasCanceled_ ? reject({isCanceled: true}) : resolve(val)
);
promise.catch((error) =>
hasCanceled_ ? reject({isCanceled: true}) : reject(error)
);
});
return {
promise: wrappedPromise,
cancel() {
hasCanceled_ = true;
},
};
};
```
As an added bonus for getting your code cleaned up early, getting rid of `isMounted()` makes it one step easier for you to upgrade to ES6 classes, where using `isMounted()` is already prohibited. Happy coding!

View File

@@ -0,0 +1,383 @@
---
title: "React Components, Elements, and Instances"
author: gaearon
---
The difference between **components, their instances, and elements** confuses many React beginners. Why are there three different terms to refer to something that is painted on screen?
## Managing the Instances
If youre new to React, you probably only worked with component classes and instances before. For example, you may declare a `Button` *component* by creating a class. When the app is running, you may have several *instances* of this component on screen, each with its own properties and local state. This is the traditional object-oriented UI programming. Why introduce *elements*?
In this traditional UI model, it is up to you to take care of creating and destroying child component instances. If a `Form` component wants to render a `Button` component, it needs to create its instance, and manually keep it up to date with any new information.
```js
class Form extends TraditionalObjectOrientedView {
render() {
// Read some data passed to the view
const { isSubmitted, buttonText } = this.attrs;
if (!isSubmitted && !this.button) {
// Form is not yet submitted. Create the button!
this.button = new Button({
children: buttonText,
color: 'blue'
});
this.el.appendChild(this.button.el);
}
if (this.button) {
// The button is visible. Update its text!
this.button.attrs.children = buttonText;
this.button.render();
}
if (isSubmitted && this.button) {
// Form was submitted. Destroy the button!
this.el.removeChild(this.button.el);
this.button.destroy();
}
if (isSubmitted && !this.message) {
// Form was submitted. Show the success message!
this.message = new Message({ text: 'Success!' });
this.el.appendChild(this.message.el);
}
}
}
```
This is pseudocode, but it is more or less what you end up with when you write composite UI code that behaves consistently in an object-oriented way using a library like Backbone.
Each component instance has to keep references to its DOM node and to the instances of the children components, and create, update, and destroy them when the time is right. The lines of code grow as the square of the number of possible states of the component, and the parents have direct access to their children component instances, making it hard to decouple them in the future.
So how is React different?
## Elements Describe the Tree
In React, this is where the *elements* come to rescue. **An element is a plain object *describing* a component instance or DOM node and its desired properties.** It contains only information about the component type (for example, a `Button`), its properties (for example, its `color`), and any child elements inside it.
An element is not an actual instance. Rather, it is a way to tell React what you *want* to see on the screen. You cant call any methods on the element. Its just an immutable description object with two fields: `type: (string | ReactClass)` and `props: Object`[^1].
### DOM Elements
When an elements `type` is a string, it represents a DOM node with that tag name, and `props` correspond to its attributes. This is what React will render. For example:
```js
{
type: 'button',
props: {
className: 'button button-blue',
children: {
type: 'b',
props: {
children: 'OK!'
}
}
}
}
```
This element is just a way to represent the following HTML as a plain object:
```html
<button class='button button-blue'>
<b>
OK!
</b>
</button>
```
Note how elements can be nested. By convention, when we want to create an element tree, we specify one or more child elements as the `children` prop of their containing element.
Whats important is that both child and parent elements are *just descriptions and not the actual instances*. They dont refer to anything on the screen when you create them. You can create them and throw them away, and it wont matter much.
React elements are easy to traverse, dont need to be parsed, and of course they are much lighter than the actual DOM elements—theyre just objects!
### Component Elements
However, the `type` of an element can also be a function or a class corresponding to a React component:
```js
{
type: Button,
props: {
color: 'blue',
children: 'OK!'
}
}
```
This is the core idea of React.
**An element describing a component is also an element, just like an element describing the DOM node. They can be nested and mixed with each other.**
This feature lets you define a `DangerButton` component as a `Button` with a specific `color` property value without worrying about whether `Button` renders to a DOM `<button>`, a `<div>`, or something else entirely:
```js
const DangerButton = ({ children }) => ({
type: Button,
props: {
color: 'red',
children: children
}
});
```
You can mix and match DOM and component elements in a single element tree:
```js
const DeleteAccount = () => ({
type: 'div',
props: {
children: [{
type: 'p',
props: {
children: 'Are you sure?'
}
}, {
type: DangerButton,
props: {
children: 'Yep'
}
}, {
type: Button,
props: {
color: 'blue',
children: 'Cancel'
}
}]
});
```
Or, if you prefer JSX:
```js
const DeleteAccount = () => (
<div>
<p>Are you sure?</p>
<DangerButton>Yep</DangerButton>
<Button color='blue'>Cancel</Button>
</div>
);
```
This mix and matching helps keep components decoupled from each other, as they can express both *is-a* and *has-a* relationships exclusively through composition:
* `Button` is a DOM `<button>` with specific properties.
* `DangerButton` is a `Button` with specific properties.
* `DeleteAccount` contains a `Button` and a `DangerButton` inside a `<div>`.
### Components Encapsulate Element Trees
When React sees an element with a function or class `type`, it knows to ask *that* component what element it renders to, given the corresponding `props`.
When it sees this element:
```js
{
type: Button,
props: {
color: 'blue',
children: 'OK!'
}
}
```
React will ask `Button` what it renders to. The `Button` will return this element:
```js
{
type: 'button',
props: {
className: 'button button-blue',
children: {
type: 'b',
props: {
children: 'OK!'
}
}
}
}
```
React will repeat this process until it knows the underlying DOM tag elements for every component on the page.
React is like a child asking “what is Y” for every “X is Y” you explain to them until they figure out every little thing in the world.
Remember the `Form` example above? It can be written in React as follows[^1]:
```js
const Form = ({ isSubmitted, buttonText }) => {
if (isSubmitted) {
// Form submitted! Return a message element.
return {
type: Message,
props: {
text: 'Success!'
}
};
}
// Form is still visible! Return a button element.
return {
type: Button,
props: {
children: buttonText,
color: 'blue'
}
};
};
```
Thats it! For a React component, props are the input, and an element tree is the output.
**The returned element tree can contain both elements describing DOM nodes, and elements describing other components. This lets you compose independent parts of UI without relying on their internal DOM structure.**
We let React create, update, and destroy instances. We *describe* them with elements we return from the components, and React takes care of managing the instances.
### Components Can Be Classes or Functions
In the code above, `Form`, `Message`, and `Button` are React components. They can either be written as functions, like above, or as classes descending from `React.Component`. These three ways to declare a component are mostly equivalent:
```js
// 1) As a function of props
const Button = ({ children, color }) => ({
type: 'button',
props: {
className: 'button button-' + color,
children: {
type: 'b',
props: {
children: children
}
}
}
});
// 2) Using the React.createClass() factory
const Button = React.createClass({
render() {
const { children, color } = this.props;
return {
type: 'button',
props: {
className: 'button button-' + color,
children: {
type: 'b',
props: {
children: children
}
}
}
};
}
});
// 3) As an ES6 class descending from React.Component
class Button extends React.Component {
render() {
const { children, color } = this.props;
return {
type: 'button',
props: {
className: 'button button-' + color,
children: {
type: 'b',
props: {
children: children
}
}
}
};
}
}
```
When a component is defined as a class, it is a little bit more powerful than a functional component. It can store some local state and perform custom logic when the corresponding DOM node is created or destroyed.
A functional component is less powerful but is simpler, and acts like a class component with just a single `render()` method. Unless you need features available only in a class, we encourage you to use functional components instead.
**However, whether functions or classes, fundamentally they are all components to React. They take the props as their input, and return the elements as their output.**
### Top-Down Reconciliation
When you call:
```js
ReactDOM.render({
type: Form,
props: {
isSubmitted: false,
buttonText: 'OK!'
}
}, document.getElementById('root'));
```
React will ask the `Form` component what element tree it returns, given those `props`. It will gradually “refine” its understanding of your component tree in terms of simpler primitives:
```js
// React: You told me this...
{
type: Form,
props: {
isSubmitted: false,
buttonText: 'OK!'
}
}
// React: ...And Form told me this...
{
type: Button,
props: {
children: 'OK!',
color: 'blue'
}
}
// React: ...and Button told me this! I guess I'm done.
{
type: 'button',
props: {
className: 'button button-blue',
children: {
type: 'b',
props: {
children: 'OK!'
}
}
}
}
```
This is a part of the process that React calls [reconciliation](/react/docs/reconciliation.html) which starts when you call [`ReactDOM.render()`](/react/docs/top-level-api.html#reactdom.render) or [`setState()`](/react/docs/component-api.html#setstate). By the end of the reconciliation, React knows the result DOM tree, and a renderer like `react-dom` or `react-native` applies the minimal set of changes necessary to update the DOM nodes (or the platform-specific views in case of React Native).
This gradual refining process is also the reason React apps are easy to optimize. If some parts of your component tree become too large for React to visit efficiently, you can tell it to [skip this “refining” and diffing certain parts of the tree if the relevant props have not changed](/react/docs/advanced-performance.html). It is very fast to calculate whether the props have changed if they are immutable, so React and immutability work great together, and can provide great optimizations with the minimal effort.
You might have noticed that this blog entry talks a lot about components and elements, and not so much about the instances. The truth is, instances have much less importance in React than in most object-oriented UI frameworks.
Only components declared as classes have instances, and you never create them directly: React does that for you. While [mechanisms for a parent component instance to access a child component instance](/react/docs/more-about-refs.html) exist, they are only used for imperative actions (such as setting focus on a field), and should generally be avoided.
React takes care of creating an instance for every class component, so you can write components in an object-oriented way with methods and local state, but other than that, instances are not very important in the Reacts programming model and are managed by React itself.
## Summary
An *element* is a plain object describing what you want to appear on the screen in terms of the DOM nodes or other components. Elements can contain other elements in their props. Creating a React element is cheap. Once an element is created, it is never mutated.
A *component* can be declared in several different ways. It can be a class with a `render()` method. Alternatively, in simple cases, it can be defined as a function. In either case, it takes props as an input, and returns an element tree as the output.
When a component receives some props as an input, it is because a particular parent component returned an element with its `type` and these props. This is why people say that the props flows one way in React: from parents to children.
An *instance* is what you refer to as `this` in the component class you write. It is useful for [storing local state and reacting to the lifecycle events](/react/docs/component-api.html).
Functional components dont have instances at all. Class components have instances, but you never need to create a component instance directly—React takes care of this.
Finally, to create elements, use [`React.createElement()`](/react/docs/top-level-api.html#react.createelement), [JSX](/react/docs/jsx-in-depth.html), or an [element factory helper](/react/docs/top-level-api.html#react.createfactory). Dont write elements as plain objects in the real code—just know that they are plain objects under the hood.
## Further Reading
* [Introducing React Elements](/react/blog/2014/10/14/introducing-react-elements.html)
* [Streamlining React Elements](/react/blog/2015/02/24/streamlining-react-elements.html)
* [React (Virtual) DOM Terminology](/react/docs/glossary.html)
[^1]: All React elements require an additional ``$$typeof: Symbol.for('react.element')`` field declared on the object for [security reasons](https://github.com/facebook/react/pull/4832). It is omitted in the examples above. This blog entry uses inline objects for elements to give you an idea of whats happening underneath but the code wont run as is unless you either add `$$typeof` to the elements, or change the code to use `React.createElement()` or JSX.

View File

@@ -0,0 +1,37 @@
---
title: "React v0.14.4"
author: spicyj
---
Happy December! We have a minor point release today. It has just a few small bug fixes.
The release is now available for download:
* **React**
Dev build with warnings: <https://fb.me/react-0.14.4.js>
Minified build for production: <https://fb.me/react-0.14.4.min.js>
* **React with Add-Ons**
Dev build with warnings: <https://fb.me/react-with-addons-0.14.4.js>
Minified build for production: <https://fb.me/react-with-addons-0.14.4.min.js>
* **React DOM** (include React in the page before React DOM)
Dev build with warnings: <https://fb.me/react-dom-0.14.4.js>
Minified build for production: <https://fb.me/react-dom-0.14.4.min.js>
* **React DOM Server** (include React in the page before React DOM Server)
Dev build with warnings: <https://fb.me/react-dom-server-0.14.4.js>
Minified build for production: <https://fb.me/react-dom-server-0.14.4.min.js>
We've also published version `0.14.4` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower.
- - -
## Changelog
### React
- Minor internal changes for better compatibility with React Native
### React DOM
- The `autoCapitalize` and `autoCorrect` props are now set as attributes in the DOM instead of properties to improve cross-browser compatibility
- Fixed bug with controlled `<select>` elements not handling updates properly
### React Perf Add-on
- Some DOM operation names have been updated for clarity in the output of `.printDOM()`

View File

@@ -0,0 +1,60 @@
---
title: "(A => B) !=> (B => A)"
author: jimfb
---
The documentation for `componentWillReceiveProps` states that `componentWillReceiveProps` will be invoked when the props change as the result of a rerender. Some people assume this means "if `componentWillReceiveProps` is called, then the props must have changed", but that conclusion is logically incorrect.
The guiding principle is one of my favorites from formal logic/mathematics:
> A implies B does not imply B implies A
Example: "If I eat moldy food, then I will get sick" does not imply "if I am sick, then I must have eaten moldy food". There are many other reasons I could be feeling sick. For instance, maybe the flu is circulating around the office. Similarly, there are many reasons that `componentWillReceiveProps` might get called, even if the props didnt change.
If you dont believe me, call `ReactDOM.render()` three times with the exact same props, and try to predict the number of times `componentWillReceiveProps` will get called:
```js
class Component extends React.Component {
componentWillReceiveProps(nextProps) {
console.log('componentWillReceiveProps', nextProps.data.bar);
}
render() {
return <div>Bar {this.props.data.bar}!</div>;
}
}
var container = document.getElementById('container');
var mydata = {bar: 'drinks'};
ReactDOM.render(<Component data={mydata} />, container);
ReactDOM.render(<Component data={mydata} />, container);
ReactDOM.render(<Component data={mydata} />, container);
```
In this case, the answer is "2". React calls `componentWillReceiveProps` twice (once for each of the two updates). Both times, the value of "drinks" is printed (ie. the props didnt change).
To understand why, we need to think about what *could* have happened. The data *could* have changed between the initial render and the two subsequent updates, if the code had performed a mutation like this:
```js
var mydata = {bar: 'drinks'};
ReactDOM.render(<Component data={mydata} />, container);
mydata.bar = 'food'
ReactDOM.render(<Component data={mydata} />, container);
mydata.bar = 'noise'
ReactDOM.render(<Component data={mydata} />, container);
```
React has no way of knowing that the data didnt change. Therefore, React needs to call `componentWillReceiveProps`, because the component needs to be notified of the new props (even if the new props happen to be the same as the old props).
You might think that React could just use smarter checks for equality, but there are some issues with this idea:
* The old `mydata` and the new `mydata` are actually the same physical object (only the objects internal value changed). Since the references are triple-equals-equal, doing an equality check doesnt tell us if the value has changed. The only possible solution would be to have created a deep copy of the data, and then later do a deep comparison - but this can be prohibitively expensive for large data structures (especially ones with cycles).
* The `mydata` object might contain references to functions which have captured variables within closures. There is no way for React to peek into these closures, and thus no way for React to copy them and/or verify equality.
* The `mydata` object might contain references to objects which are re-instantiated during the parent's render (ie. not triple-equals-equal) but are conceptually equal (ie. same keys and same values). A deep-compare (expensive) could detect this, except that functions present a problem again because there is no reliable way to compare two functions to see if they are semantically equivalent.
Given the language constraints, it is sometimes impossible for us to achieve meaningful equality semantics. In such cases, React will call `componentWillReceiveProps` (even though the props might not have changed) so the component has an opportunity to examine the new props and act accordingly.
As a result, your implementation of `componentWillReceiveProps` MUST NOT assume that your props have changed. If you want an operation (such as a network request) to occur only when props have changed, your `componentWillReceiveProps` code needs to check to see if the props actually changed.

View File

@@ -0,0 +1,10 @@
---
title: "Discontinuing IE 8 Support in React DOM"
author: spicyj
---
Since its 2013 release, React has supported all popular browsers, including Internet Explorer 8 and above. We handle normalizing many quirks present in old browser versions, including event system differences, so that your app code doesn't have to worry about most browser bugs.
Today, Microsoft [discontinued support for older versions of IE](https://www.microsoft.com/en-us/WindowsForBusiness/End-of-IE-support). Starting with React v15, we're discontinuing React DOM's support for IE 8. We've heard that most React DOM apps already don't support old versions of Internet Explorer, so this shouldn't affect many people. This change will help us develop faster and make React DOM even better. (We won't actively remove IE 8related code quite yet, but we will deprioritize new bugs that are reported. If you need to support IE 8 we recommend you stay on React v0.14.)
React DOM will continue to support IE 9 and above for the foreseeable future.

View File

@@ -0,0 +1,60 @@
---
title: "New Versioning Scheme"
author: sebmarkbage
---
Today we're announcing that we're switching to major revisions for React. The current version is 0.14.7. The next release will be: **15.0.0**
This change shouldn't materially affect most of you. Moving to major semver versions simply helps indicate our commitment to stability and gives us the flexibility to add new backwards-compatible features in minor releases. This means we can have fewer major releases and you won't have to wait as long to take advantage of improvements to React. Plus, if you're a component author, this versioning scheme gives you the flexibility to support two major versions of React at the same time so you don't need to leave anyone behind.
The core of the React API has been stable for years. Our business as well as many of yours all depend heavily on the use of React as a core piece of our infrastructure. We're committed to the stability as well as the progress of React going forward.
## Bring Everyone Along
React isn't just a library but an ecosystem. We know that your applications and ours are not just isolated islands of code. It is a network of your own application code, your own open source components and third party libraries that all depend on React.
<img src="/react/img/blog/versioning-1.png" width="403">
Therefore it is important that we don't just upgrade our own codebases but that we bring our whole community with us. We take the upgrade path very seriously - for everyone.
<img src="/react/img/blog/versioning-poll.png" width="596">
## Introducing Minor Releases
Ideally everyone could just depend on the latest version of React all the time.
<img src="/react/img/blog/versioning-2.png" width="463">
We know that in practice that is not possible. In the future, we expect more new additive APIs rather than breakage of existing ones. By moving to major revisions in the semver scheme, we can release new versions without breaking existing ones.
<img src="/react/img/blog/versioning-3.png" width="503">
That means that if one component needs a new API, there is no need for any of the other components to do any further work. They remain compatible.
## What Happened to 1.0.0?
Part of React's growth and popularity is that it is stable and performant in production. People have long asked what React v1.0 will look. Technically some breaking changes are important to avoid stagnating, but we still achieve stability by making it easy to upgrade. If major version numbers indicate API stability and engender trust that it can be used in production, then we got there a long time ago. There are too many preconceived notions of what v1.0 is. We're still following semver. We're just communicating stability by moving the 0 from the beginning to the end.
## Breaking Changes
Minor revision releases will include deprecation warnings and tips for how to upgrade an API or pattern that will be removed or changed in the future.
We will continue to release [codemods](https://www.youtube.com/watch?v=d0pOgY8__JM) for common patterns to make automatic upgrades of your codebase easier.
Once we've reached the end of life for a particular major version, we'll release a new major version where all deprecated APIs have been removed.
## Avoiding The Major Cliff
If you try to upgrade your component to 16.0.0 you might find that your application no longer works if you still have other dependencies. E.g. if Ryan's and Jed's components are only compatible with 15.x.x.
<img src="/react/img/blog/versioning-4.png" width="498">
Worst case, you revert back to 15.1.0 for your application. Since you'll want to use your component, you might also revert that one.
<img src="/react/img/blog/versioning-5.png" width="493">
Of course, Ryan and Jed think the same way. If we're not careful, we can hit a cliff where nobody upgrades. This has happened to many software project ecosystems in the past.
Therefore, we're committed to making it easy for most components and libraries built on top of React to be compatible with two major versions at the same time. We will do this by introducing new APIs before completely removing the old ones, thereby avoiding those cliffs.
<img src="/react/img/blog/versioning-6.png" width="493">

View File

@@ -0,0 +1,94 @@
---
title: "React v15.0 Release Candidate"
author: zpao
---
Sorry for the small delay in releasing this. As we said, we've been busy binge-watching House of Cards. That scene in the last episode where Francis and Claire Underwood <abbr title="You didn't think we would actually spoil anything did you?">████████████████████████████████████</abbr>. WOW!
But now we're ready, so without further ado, we're shipping a release candidate for React v15 now. As a reminder, [we're switching to major versions](/react/blog/2016/02/19/new-versioning-scheme.html) to indicate that we have been using React in production for a long time. This 15.0 release follows our previous 0.14 version and we'll continue to follow semver like we've been doing since 2013. It's also worth noting that [we no longer actively support Internet Explorer 8](/react/blog/2016/01/12/discontinuing-ie8-support.html). We believe React will work in its current form there but we will not be prioritizing any efforts to fix new issues that only affect IE8.
Please try it out before we publish the final release. Let us know if you run into any problems by filing issues on our [GitHub repo](https://github.com/facebook/react).
## Upgrade Guide
Like always, we have a few breaking changes in this release. We know changes can be painful (the Facebook codebase has over 15,000 React components), so we always try to make changes gradually in order to minimize the pain.
If your code is free of warnings when running under React 0.14, upgrading should be easy. The bulk of changes in this release are actually behind the scenes, impacting the way that React interacts with the DOM. The other substantial change is that React now supports the full range of SVG elements and attributes. Beyond that we have a large number of incremental improvements and additional warnings aimed to aid developers. We've also laid some groundwork in the core to bring you some new capabilities in future releases.
See the changelog below for more details.
## Installation
We recommend using React from `npm` and using a tool like browserify or webpack to build your code into a single bundle. To install the two packages:
* `npm install --save react@15.0.0-rc.1 react-dom@15.0.0-rc.1`
Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, set the `NODE_ENV` environment variable to `production` to use the production build of React which does not include the development warnings and runs significantly faster.
If you cant use `npm` yet, we provide pre-built browser builds for your convenience, which are also available in the `react` package on bower.
* **React**
Dev build with warnings: <https://fb.me/react-15.0.0-rc.1.js>
Minified build for production: <https://fb.me/react-15.0.0-rc.1.min.js>
* **React with Add-Ons**
Dev build with warnings: <https://fb.me/react-with-addons-15.0.0-rc.1.js>
Minified build for production: <https://fb.me/react-with-addons-15.0.0-rc.1.min.js>
* **React DOM** (include React in the page before React DOM)
Dev build with warnings: <https://fb.me/react-dom-15.0.0-rc.1.js>
Minified build for production: <https://fb.me/react-dom-15.0.0-rc.1.min.js>
## Changelog
### Major changes
- #### `document.createElement` is in and `data-reactid` is out
There were a number of large changes to our interactions with the DOM. One of the most noticeable changes is that we no longer set the `data-reactid` attribute for each DOM node. While this will make it much more difficult to know if a website is using React, the advantage is that the DOM is much more lightweight. This change was made possible by us switching to use `document.createElement` on initial render. Previously we would generate a large string of HTML and then set `node.innerHTML`. At the time, this was decided to be faster than using `document.createElement` for the majority of cases and browsers that we supported. Browsers have continued to improve and so overwhelmingly this is no longer true. By using `createElement` we can make other parts of React faster. The ids were used to map back from events to the original React component, meaning we had to do a bunch of work on every event, even though we cached this data heavily. As we've all experienced, caching and in particularly invalidating caches, can be error prone and we saw many hard to reproduce issues over the years as a result. Now we can build up a direct mapping at render time since we already have a handle on the node.
- #### No more extra `<span>`s
Another big change with our DOM interaction is how we render text blocks. Previously you may have noticed that React rendered a lot of extra `<span>`s. Eg, in our most basic example on the home page we render `<div>Hello {this.props.name}</div>`, resulting in markup that contained 2 `<span>`s. Now we'll render plain text nodes interspersed with comment nodes that are used for demarcation. This gives us the same ability to update individual pieces of text, without creating extra nested nodes. Very few people have depended on the actual markup generated here so it's likely you are not impacted. However if you were targeting these `<span>`s in your CSS, you will need to adjust accordingly. You can always render them explicitly in your components.
- #### Rendering `null` now uses comment nodes
We've also made use of these comment nodes to change what `null` renders to. Rendering to `null` was a feature we added in React v0.11 and was implemented by rendering `<noscript>` elements. By rendering to comment nodes now, there's a chance some of your CSS will be targeting the wrong thing, specifically if you are making use of `:nth-child` selectors. This, along with the other changes mentioned above, have always been considered implementation details of how React targets the DOM. We believe they are safe changes to make without going through a release with warnings detailing the subtle differences as they are details that should not be depended upon. Additionally, we have seen that these changes have improved React performance for many typical applications.
- #### Improved SVG support
All SVG tags and attributes are now fully supported. (Uncommon SVG tags are not present on the `React.DOM` element helper, but JSX and `React.createElement` work on all tag names.) All SVG attributes match their original capitalization and hyphenation as defined in the specification (ex: `gradientTransform` must be camel-cased but `clip-path` should be hyphenated).
### Breaking changes
It's worth calling out the DOM structure changes above again, in particular the change from `<span>`s. In the course of updating the Facebook codebase, we found a very small amount of code that was depending on the markup that React generated. Some of these cases were integration tests like WebDriver which were doing very specific XPath queries to target nodes. Others were simply tests using `ReactDOM.renderToStaticMarkup` and comparing markup. Again, there were a very small number of changes that had to be made, but we don't want anybody to be blindsided. We encourage everybody to run their test suites when upgrading and consider alternative approaches when possible. One approach that will work for some cases is to explicitly use `<span>`s in your `render` method.
These deprecations were introduced in v0.14 with a warning and the APIs are now removed.
- Deprecated APIs removed from `React`, specifically `findDOMNode`, `render`, `renderToString`, `renderToStaticMarkup`, and `unmountComponentAtNode`.
- Deprecated APIs removed from `React.addons`, specifically `batchedUpdates` and `cloneWithProps`.
- Deprecated APIs removed from component instances, specifically `setProps`, `replaceProps`, and `getDOMNode`.
### New deprecations, introduced with a warning
Each of these changes will continue to work as before with a new warning until the release of React 16 so you can upgrade your code gradually.
- `LinkedStateMixin` and `valueLink` are now deprecated due to very low popularity. If you need this, you can use a wrapper component that implements the same behavior: [react-linked-input](https://www.npmjs.com/package/react-linked-input).
### New helpful warnings
- If you use a minified copy of the _development_ build, React DOM kindly encourages you to use the faster production build instead.
- React DOM: When specifying a unit-less CSS value as a string, a future version will not add `px` automatically. This version now warns in this case (ex: writing `style={{'{{'}}width: '300'}}`. (Unitless *number* values like `width: 300` are unchanged.)
- Synthetic Events will now warn when setting and accessing properties (which will not get cleared appropriately), as well as warn on access after an event has been returned to the pool.
- Elements will now warn when attempting to read `ref` and `key` from the props.
- React DOM now attempts to warn for mistyped event handlers on DOM elements (ex: `onclick` which should be `onClick`)
### Notable bug fixes
- Fixed multiple small memory leaks
- Input events are handled more reliably in IE 10 and IE 11; spurious events no longer fire when using a placeholder.
- React DOM now supports the `cite` and `profile` HTML attributes.
- React DOM now supports the `onAnimationStart`, `onAnimationEnd`, `onAnimationIteration`, `onTransitionEnd`, and `onInvalid` events. Support for `onLoad` has been added to `object` elements.
- `Object.is` is used in a number of places to compare values, which leads to fewer false positives, especially involving `NaN`. In particular, this affects the `shallowCompare` add-on.
- React DOM now defaults to using DOM attributes instead of properties, which fixes a few edge case bugs. Additionally the nullification of values (ex: `href={null}`) now results in the forceful removal, no longer trying to set to the default value used by browsers in the absence of a value.

View File

@@ -0,0 +1,32 @@
---
title: "React v15.0 Release Candidate 2"
author: zpao
---
Today we're releasing a second release candidate for version 15. Primarily this is to address 2 issues, but we also picked up a few small changes from new contributors, including some improvements to some of our new warnings.
The most pressing change that was made is to fix a bug in our new code that removes `<span>`s, as discussed in the original RC1 post. Specifically we have some code that takes a different path in IE11 and Edge due to the speed of some DOM operations. There was a bug in this code which didn't break out of the optimization for `DocumentFragment`s, resulting in text not appearing at all. Thanks to the several people who [reported this](https://github.com/facebook/react/issues/6246).
The other change is to our SVG code. In RC1 we had made the decision to pass through all attributes directly. This led to [some confusion with `class` vs `className`](https://github.com/facebook/react/issues/6211) and ultimately led us to reconsider our position on the approach. Passing through all attributes meant that we would have two different patterns for using React where things like hyphenated attributes would work for SVG but not HTML. In the future, we *might* change our approach to the problem for HTML as well but in the meantime, maintaining consistency is important. So we reverted the changes that allowed the attributes to be passed through and instead expanded the SVG property list to include all attributes that are in the spec. We believe we have everything now but definitely [let us know](https://github.com/facebook/react/issues/1657#issuecomment-197031403) if we missed anything. It was and still is our intent to support the full range of SVG tags and attributes in this release.
Thanks again to everybody who has tried the RC1 and reported issues. It has been extremely important and we wouldn't be able to do this without your help!
## Installation
We recommend using React from `npm` and using a tool like browserify or webpack to build your code into a single bundle. To install the two packages:
* `npm install --save react@15.0.0-rc.2 react-dom@15.0.0-rc.2`
Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, set the `NODE_ENV` environment variable to `production` to use the production build of React which does not include the development warnings and runs significantly faster.
If you cant use `npm` yet, we provide pre-built browser builds for your convenience, which are also available in the `react` package on bower.
* **React**
Dev build with warnings: <https://fb.me/react-15.0.0-rc.2.js>
Minified build for production: <https://fb.me/react-15.0.0-rc.2.min.js>
* **React with Add-Ons**
Dev build with warnings: <https://fb.me/react-with-addons-15.0.0-rc.2.js>
Minified build for production: <https://fb.me/react-with-addons-15.0.0-rc.2.min.js>
* **React DOM** (include React in the page before React DOM)
Dev build with warnings: <https://fb.me/react-dom-15.0.0-rc.2.js>
Minified build for production: <https://fb.me/react-dom-15.0.0-rc.2.min.js>

View File

@@ -0,0 +1,32 @@
---
title: "React v0.14.8"
author: gaearon
---
We have already released two release candidates for React 15, and the final version is coming soon.
However [Ian Christian Myers](https://github.com/iancmyers) discovered a memory leak related to server rendering in React 0.14 and [contributed a fix](https://github.com/facebook/react/pull/6060). While this memory leak has already been fixed in a different way in the React 15 release candidates, we decided to cut another 0.14 release that contains just this fix.
The release is now available for download:
* **React**
Dev build with warnings: <https://fb.me/react-0.14.8.js>
Minified build for production: <https://fb.me/react-0.14.8.min.js>
* **React with Add-Ons**
Dev build with warnings: <https://fb.me/react-with-addons-0.14.8.js>
Minified build for production: <https://fb.me/react-with-addons-0.14.8.min.js>
* **React DOM** (include React in the page before React DOM)
Dev build with warnings: <https://fb.me/react-dom-0.14.8.js>
Minified build for production: <https://fb.me/react-dom-0.14.8.min.js>
* **React DOM Server** (include React in the page before React DOM Server)
Dev build with warnings: <https://fb.me/react-dom-server-0.14.8.js>
Minified build for production: <https://fb.me/react-dom-server-0.14.8.min.js>
We've also published version `0.14.8` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower.
- - -
## Changelog
### React
- Fixed memory leak when rendering on the server

View File

@@ -0,0 +1,259 @@
---
title: "React v15.0"
author: gaearon
---
We would like to thank the React community for reporting issues and regressions in the release candidates on our [issue tracker](https://github.com/facebook/react/issues/). Over the last few weeks we fixed those issues, and now, after two release candidates, we are excited to finally release the stable version of React 15.
As a reminder, [were switching to major versions](/react/blog/2016/02/19/new-versioning-scheme.html) to indicate that we have been using React in production for a long time. This 15.0 release follows our previous 0.14 version and well continue to follow semver like weve been doing since 2013. Its also worth noting that [we no longer actively support Internet Explorer 8](/react/blog/2016/01/12/discontinuing-ie8-support.html). We believe React will work in its current form there but we will not be prioritizing any efforts to fix new issues that only affect IE8.
React 15 brings significant improvements to how we interact with the DOM:
* We are now using `document.createElement` instead of setting `innerHTML` when mounting components. This allows us to get rid of the `data-reactid` attribute on every node and make the DOM lighter. Using `document.createElement` is also faster in modern browsers and fixes a number of edge cases related to SVG elements and running multiple copies of React on the same page.
* Historically our support for SVG has been incomplete, and many tags and attributes were missing. We heard you, and in React 15 we [added support for all the SVG attributes that are recognized by todays browsers](https://github.com/facebook/react/pull/6243). If we missed any of the attributes youd like to use, please [let us know](https://github.com/facebook/react/issues/1657). As a bonus, thanks to using `document.createElement`, we no longer need to maintain a list of SVG tags, so any SVG tags that were previously unsupported should work just fine in React 15.
* We received some amazing contributions from the community in this release, and we would like to highlight [this pull request](https://github.com/facebook/react/pull/5753) by [Michael Wiencek](https://github.com/mwiencek) in particular. Thanks to Michaels work, React 15 no longer emits extra `<span>` nodes around the text, making the DOM output much cleaner. This was a longstanding annoyance for React users so its exciting to accept this as an outside contribution.
While this isnt directly related to the release, we understand that in order to receive more community contributions like Michaels, we need to communicate our goals and priorities more openly, and review pull requests more decisively. As a first step towards this, we started publishing [React core team weekly meeting notes](https://github.com/reactjs/core-notes) again. We also intend to introduce an RFC process inspired by [Ember RFCs](https://github.com/emberjs/rfcs) so external contributors can have more insight and influence in the future development of React. We will keep you updated about this on our blog.
We are also experimenting with a new changelog format in this post. Every change now links to the corresponding pull request and mentions the author. Let us know whether you find this useful!
## Upgrade Guide
As usual with major releases, React 15 will remove support for some of the patterns deprecated nine months ago in React 0.14. We know changes can be painful (the Facebook codebase has over 20,000 React components, and thats not even counting React Native), so we always try to make changes gradually in order to minimize the pain.
If your code is free of warnings when running under React 0.14, upgrading should be easy. The bulk of changes in this release are actually behind the scenes, impacting the way that React interacts with the DOM. The other substantial change is that React now supports the full range of SVG elements and attributes. Beyond that we have a large number of incremental improvements and additional warnings aimed to aid developers. Weve also laid some groundwork in the core to bring you some new capabilities in future releases.
See the changelog below for more details.
## Installation
We recommend using React from `npm` and using a tool like browserify or webpack to build your code into a single bundle. To install the two packages:
* `npm install --save react react-dom`
Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, set the `NODE_ENV` environment variable to `production` to use the production build of React which does not include the development warnings and runs significantly faster.
If you cant use `npm` yet, we provide pre-built browser builds for your convenience, which are also available in the `react` package on bower.
* **React**
Dev build with warnings: <https://fb.me/react-15.0.0.js>
Minified build for production: <https://fb.me/react-15.0.0.min.js>
* **React with Add-Ons**
Dev build with warnings: <https://fb.me/react-with-addons-15.0.0.js>
Minified build for production: <https://fb.me/react-with-addons-15.0.0.min.js>
* **React DOM** (include React in the page before React DOM)
Dev build with warnings: <https://fb.me/react-dom-15.0.0.js>
Minified build for production: <https://fb.me/react-dom-15.0.0.min.js>
## Changelog
### Major changes
- #### `document.createElement` is in and `data-reactid` is out
There were a number of large changes to our interactions with the DOM. One of the most noticeable changes is that we no longer set the `data-reactid` attribute for each DOM node. While this will make it more difficult to know if a website is using React, the advantage is that the DOM is much more lightweight. This change was made possible by us switching to use `document.createElement` on initial render. Previously we would generate a large string of HTML and then set `node.innerHTML`. At the time, this was decided to be faster than using `document.createElement` for the majority of cases and browsers that we supported. Browsers have continued to improve and so overwhelmingly this is no longer true. By using `createElement` we can make other parts of React faster. The ids were used to map back from events to the original React component, meaning we had to do a bunch of work on every event, even though we cached this data heavily. As weve all experienced, caching and in particularly invalidating caches, can be error prone and we saw many hard to reproduce issues over the years as a result. Now we can build up a direct mapping at render time since we already have a handle on the node.
**Note:** `data-reactid` is still present for server-rendered content, however it is much smaller than before and is simply an auto-incrementing counter.
<small>[@spicyj](https://github.com/spicyj) in [#5205](https://github.com/facebook/react/pull/5205)</small>
- #### No more extra `<span>`s
Another big change with our DOM interaction is how we render text blocks. Previously you may have noticed that React rendered a lot of extra `<span>`s. For example, in our most basic example on the home page we render `<div>Hello {this.props.name}</div>`, resulting in markup that contained 2 `<span>`s. Now well render plain text nodes interspersed with comment nodes that are used for demarcation. This gives us the same ability to update individual pieces of text, without creating extra nested nodes. Very few people have depended on the actual markup generated here so its likely you are not impacted. However if you were targeting these `<span>`s in your CSS, you will need to adjust accordingly. You can always render them explicitly in your components.
<small>[@mwiencek](https://github.com/mwiencek) in [#5753](https://github.com/facebook/react/pull/5753)</small>
- #### Rendering `null` now uses comment nodes
Weve also made use of these comment nodes to change what `null` renders to. Rendering to `null` was a feature we added in React 0.11 and was implemented by rendering `<noscript>` elements. By rendering to comment nodes now, theres a chance some of your CSS will be targeting the wrong thing, specifically if you are making use of `:nth-child` selectors. This, along with the other changes mentioned above, have always been considered implementation details of how React targets the DOM. We believe they are safe changes to make without going through a release with warnings detailing the subtle differences as they are details that should not be depended upon. Additionally, we have seen that these changes have improved React performance for many typical applications.
<small>[@spicyj](https://github.com/spicyj) in [#5451](https://github.com/facebook/react/pull/5451)</small>
- #### Functional components can now return `null` too
We added support for [defining stateless components as functions](/react/blog/2015/09/10/react-v0.14-rc1.html#stateless-function-components) in React 0.14. However, React 0.14 still allowed you to define a class component without extending `React.Component` or using `React.createClass()`, so [we couldnt reliably tell if your component is a function or a class](https://github.com/facebook/react/issues/5355), and did not allow returning `null` from it. This issue is solved in React 15, and you can now return `null` from any component, whether it is a class or a function.
<small>[@jimfb](https://github.com/jimfb) in [#5884](https://github.com/facebook/react/pull/5884)</small>
- #### Improved SVG support
All SVG tags are now fully supported. (Uncommon SVG tags are not present on the `React.DOM` element helper, but JSX and `React.createElement` work on all tag names.) All SVG attributes that are implemented by the browsers should be supported too. If you find any attributes that we have missed, please [let us know in this issue](https://github.com/facebook/react/issues/1657).
<small>[@zpao](https://github.com/zpao) in [#6243](https://github.com/facebook/react/pull/6243)</small>
### Breaking changes
- #### No more extra `<span>`s
Its worth calling out the DOM structure changes above again, in particular the change from `<span>`s. In the course of updating the Facebook codebase, we found a very small amount of code that was depending on the markup that React generated. Some of these cases were integration tests like WebDriver which were doing very specific XPath queries to target nodes. Others were simply tests using `ReactDOM.renderToStaticMarkup` and comparing markup. Again, there were a very small number of changes that had to be made, but we dont want anybody to be blindsided. We encourage everybody to run their test suites when upgrading and consider alternative approaches when possible. One approach that will work for some cases is to explicitly use `<span>`s in your `render` method.
<small>[@mwiencek](https://github.com/mwiencek) in [#5753](https://github.com/facebook/react/pull/5753)</small>
- #### `React.cloneElement()` now resolves `defaultProps`
We fixed a bug in `React.cloneElement()` that some components may rely on. If some of the `props` received by `cloneElement()` are `undefined`, it used to return an element with `undefined` values for those props. In React 15, were changing it to be consistent with `createElement()`. Now any `undefined` props passed to `cloneElement()` are resolved to the corresponding components `defaultProps`. Only one of our 20,000 React components was negatively affected by this so we feel comfortable releasing this change without keeping the old behavior for another release cycle.
<small>[@truongduy134](https://github.com/truongduy134) in [#5997](https://github.com/facebook/react/pull/5997)</small>
- #### `ReactPerf.getLastMeasurements()` is opaque
This change wont affect applications but may break some third-party tools. We are [revamping `ReactPerf` implementation](https://github.com/facebook/react/pull/6046) and plan to release it during the 15.x cycle. The internal performance measurement format is subject to change so, for the time being, we consider the return value of `ReactPerf.getLastMeasurements()` an opaque data structure that should not be relied upon.
<small>[@gaearon](https://github.com/gaearon) in [#6286](https://github.com/facebook/react/pull/6286)</small>
- #### Removed deprecations
These deprecations were introduced nine months ago in v0.14 with a warning and are removed:
- Deprecated APIs are removed from the `React` top-level export: `findDOMNode`, `render`, `renderToString`, `renderToStaticMarkup`, and `unmountComponentAtNode`. As a reminder, they are now available on `ReactDOM` and `ReactDOMServer`.
<small>[@jimfb](https://github.com/jimfb) in [#5832](https://github.com/facebook/react/pull/5832)</small>
- Deprecated addons are removed: `batchedUpdates` and `cloneWithProps`.
<small>[@jimfb](https://github.com/jimfb) in [#5859](https://github.com/facebook/react/pull/5859), [@zpao](https://github.com/zpao) in [#6016](https://github.com/facebook/react/pull/6016)</small>
- Deprecated component instance methods are removed: `setProps`, `replaceProps`, and `getDOMNode`.
<small>[@jimfb](https://github.com/jimfb) in [#5570](https://github.com/facebook/react/pull/5570)</small>
- Deprecated CommonJS `react/addons` entry point is removed. As a reminder, you should use separate `react-addons-*` packages instead. This only applies if you use the CommonJS builds.
<small>[@gaearon](https://github.com/gaearon) in [#6285](https://github.com/facebook/react/pull/6285)</small>
- Passing `children` to void elements like `<input>` was deprecated, and now throws an error.
<small>[@jonhester](https://github.com/jonhester) in [#3372](https://github.com/facebook/react/pull/3372)</small>
- React-specific properties on DOM `refs` (e.g. `this.refs.div.props`) were deprecated, and are removed now.
<small>[@jimfb](https://github.com/jimfb) in [#5495](https://github.com/facebook/react/pull/5495)</small>
### New deprecations, introduced with a warning
Each of these changes will continue to work as before with a new warning until the release of React 16 so you can upgrade your code gradually.
- `LinkedStateMixin` and `valueLink` are now deprecated due to very low popularity. If you need this, you can use a wrapper component that implements the same behavior: [react-linked-input](https://www.npmjs.com/package/react-linked-input).
<small>[@jimfb](https://github.com/jimfb) in [#6127](https://github.com/facebook/react/pull/6127)</small>
- Future versions of React will treat `<input value={null}>` as a request to clear the input. However, React 0.14 has been ignoring `value={null}`. React 15 warns you on a `null` input value and offers you to clarify your intention. To fix the warning, you may explicitly pass an empty string to clear a controlled input, or pass `undefined` to make the input uncontrolled.
<small>[@antoaravinth](https://github.com/antoaravinth) in [#5048](https://github.com/facebook/react/pull/5048)</small>
- `ReactPerf.printDOM()` was renamed to `ReactPerf.printOperations()`, and `ReactPerf.getMeasurementsSummaryMap()` was renamed to `ReactPerf.getWasted()`.
<small>[@gaearon](https://github.com/gaearon) in [#6287](https://github.com/facebook/react/pull/6287)</small>
### New helpful warnings
- If you use a minified copy of the _development_ build, React DOM kindly encourages you to use the faster production build instead.
<small>[@spicyj](https://github.com/spicyj) in [#5083](https://github.com/facebook/react/pull/5083)</small>
- React DOM: When specifying a unit-less CSS value as a string, a future version will not add `px` automatically. This version now warns in this case (ex: writing `style={{'{{'}}width: '300'}}`. Unitless *number* values like `width: 300` are unchanged.
<small>[@pluma](https://github.com/pluma) in [#5140](https://github.com/facebook/react/pull/5140)</small>
- Synthetic Events will now warn when setting and accessing properties (which will not get cleared appropriately), as well as warn on access after an event has been returned to the pool.
<small>[@kentcdodds](https://github.com/kentcdodds) in [#5940](https://github.com/facebook/react/pull/5940) and [@koba04](https://github.com/koba04) in [#5947](https://github.com/facebook/react/pull/5947)</small>
- Elements will now warn when attempting to read `ref` and `key` from the props.
<small>[@prometheansacrifice](https://github.com/prometheansacrifice) in [#5744](https://github.com/facebook/react/pull/5744)</small>
- React will now warn if you pass a different `props` object to `super()` in the constructor.
<small>[@prometheansacrifice](https://github.com/prometheansacrifice) in [#5346](https://github.com/facebook/react/pull/5346)</small>
- React will now warn if you call `setState()` inside `getChildContext()`.
<small>[@raineroviir](https://github.com/raineroviir) in [#6121](https://github.com/facebook/react/pull/6121)</small>
- React DOM now attempts to warn for mistyped event handlers on DOM elements, such as `onclick` which should be `onClick`.
<small>[@ali](https://github.com/ali) in [#5361](https://github.com/facebook/react/pull/5361)</small>
- React DOM now warns about `NaN` values in `style`.
<small>[@jontewks](https://github.com/jontewks) in [#5811](https://github.com/facebook/react/pull/5811)</small>
- React DOM now warns if you specify both `value` and `defaultValue` for an input.
<small>[@mgmcdermott](https://github.com/mgmcdermott) in [#5823](https://github.com/facebook/react/pull/5823)</small>
- React DOM now warns if an input switches between being controlled and uncontrolled.
<small>[@TheBlasfem](https://github.com/TheBlasfem) in [#5864](https://github.com/facebook/react/pull/5864)</small>
- React DOM now warns if you specify `onFocusIn` or `onFocusOut` handlers as they are unnecessary in React.
<small>[@jontewks](https://github.com/jontewks) in [#6296](https://github.com/facebook/react/pull/6296)</small>
- React now prints a descriptive error message when you pass an invalid callback as the last argument to `ReactDOM.render()`, `this.setState()`, or `this.forceUpdate()`.
<small>[@conorhastings](https://github.com/conorhastings) in [#5193](https://github.com/facebook/react/pull/5193) and [@gaearon](https://github.com/gaearon) in [#6310](https://github.com/facebook/react/pull/6310)</small>
- Add-Ons: `TestUtils.Simulate()` now prints a helpful message if you attempt to use it with shallow rendering.
<small>[@conorhastings](https://github.com/conorhastings) in [#5358](https://github.com/facebook/react/pull/5358)</small>
- PropTypes: `arrayOf()` and `objectOf()` provide better error messages for invalid arguments.
<small>[@chicoxyzzy](https://github.com/chicoxyzzy) in [#5390](https://github.com/facebook/react/pull/5390)</small>
### Notable bug fixes
- Fixed multiple small memory leaks.
<small>[@spicyj](https://github.com/spicyj) in [#4983](https://github.com/facebook/react/pull/4983) and [@victor-homyakov](https://github.com/victor-homyakov) in [#6309](https://github.com/facebook/react/pull/6309)</small>
- Input events are handled more reliably in IE 10 and IE 11; spurious events no longer fire when using a placeholder.
<small>[@jquense](https://github.com/jquense) in [#4051](https://github.com/facebook/react/pull/4051)</small>
- The `componentWillReceiveProps()` lifecycle method is now consistently called when `context` changes.
<small>[@milesj](https://github.com/milesj) in [#5787](https://github.com/facebook/react/pull/5787)</small>
- `React.cloneElement()` doesnt append slash to an existing `key` when used inside `React.Children.map()`.
<small>[@ianobermiller](https://github.com/ianobermiller) in [#5892](https://github.com/facebook/react/pull/5892)</small>
- React DOM now supports the `cite` and `profile` HTML attributes.
<small>[@AprilArcus](https://github.com/AprilArcus) in [#6094](https://github.com/facebook/react/pull/6094) and [@saiichihashimoto](https://github.com/saiichihashimoto) in [#6032](https://github.com/facebook/react/pull/6032)</small>
- React DOM now supports `cssFloat`, `gridRow` and `gridColumn` CSS properties.
<small>[@stevenvachon](https://github.com/stevenvachon) in [#6133](https://github.com/facebook/react/pull/6133) and [@mnordick](https://github.com/mnordick) in [#4779](https://github.com/facebook/react/pull/4779)</small>
- React DOM now correctly handles `borderImageOutset`, `borderImageWidth`, `borderImageSlice`, `floodOpacity`, `strokeDasharray`, and `strokeMiterlimit` as unitless CSS properties.
<small>[@rofrischmann](https://github.com/rofrischmann) in [#6210](https://github.com/facebook/react/pull/6210) and [#6270](https://github.com/facebook/react/pull/6270)</small>
- React DOM now supports the `onAnimationStart`, `onAnimationEnd`, `onAnimationIteration`, `onTransitionEnd`, and `onInvalid` events. Support for `onLoad` has been added to `object` elements.
<small>[@tomduncalf](https://github.com/tomduncalf) in [#5187](https://github.com/facebook/react/pull/5187), [@milesj](https://github.com/milesj) in [#6005](https://github.com/facebook/react/pull/6005), and [@ara4n](https://github.com/ara4n) in [#5781](https://github.com/facebook/react/pull/5781)</small>
- React DOM now defaults to using DOM attributes instead of properties, which fixes a few edge case bugs. Additionally the nullification of values (ex: `href={null}`) now results in the forceful removal, no longer trying to set to the default value used by browsers in the absence of a value.
<small>[@syranide](https://github.com/syranide) in [#1510](https://github.com/facebook/react/pull/1510)</small>
- React DOM does not mistakingly coerce `children` to strings for Web Components.
<small>[@jimfb](https://github.com/jimfb) in [#5093](https://github.com/facebook/react/pull/5093)</small>
- React DOM now correctly normalizes SVG `<use>` events.
<small>[@edmellum](https://github.com/edmellum) in [#5720](https://github.com/facebook/react/pull/5720)</small>
- React DOM does not throw if a `<select>` is unmounted while its `onChange` handler is executing.
<small>[@sambev](https://github.com/sambev) in [#6028](https://github.com/facebook/react/pull/6028)</small>
- React DOM does not throw in Windows 8 apps.
<small>[@Andrew8xx8](https://github.com/Andrew8xx8) in [#6063](https://github.com/facebook/react/pull/6063)</small>
- React DOM does not throw when asynchronously unmounting a child with a `ref`.
<small>[@yiminghe](https://github.com/yiminghe) in [#6095](https://github.com/facebook/react/pull/6095)</small>
- React DOM no longer forces synchronous layout because of scroll position tracking.
<small>[@syranide](https://github.com/syranide) in [#2271](https://github.com/facebook/react/pull/2271)</small>
- `Object.is` is used in a number of places to compare values, which leads to fewer false positives, especially involving `NaN`. In particular, this affects the `shallowCompare` add-on.
<small>[@chicoxyzzy](https://github.com/chicoxyzzy) in [#6132](https://github.com/facebook/react/pull/6132)</small>
- Add-Ons: ReactPerf no longer instruments adding or removing an event listener because they dont really touch the DOM due to event delegation.
<small>[@antoaravinth](https://github.com/antoaravinth) in [#5209](https://github.com/facebook/react/pull/5209)</small>
### Other improvements
- React now uses `loose-envify` instead of `envify` so it installs less transitive dependencies.
<small>[@qerub](https://github.com/qerub) in [#6303](https://github.com/facebook/react/pull/6303)</small>
- Shallow renderer now exposes `getMountedInstance()`.
<small>[@glenjamin](https://github.com/glenjamin) in [#4918](https://github.com/facebook/react/pull/4918)</small>
- Shallow renderer now returns the rendered output from `render()`.
<small>[@simonewebdesign](https://github.com/simonewebdesign) in [#5411](https://github.com/facebook/react/pull/5411)</small>
- React no longer depends on ES5 *shams* for `Object.create` and `Object.freeze` in older environments. It still, however, requires ES5 *shims* in those environments.
<small>[@dgreensp](https://github.com/dgreensp) in [#4959](https://github.com/facebook/react/pull/4959)</small>
- React DOM now allows `data-` attributes with names that start with numbers.
<small>[@nLight](https://github.com/nLight) in [#5216](https://github.com/facebook/react/pull/5216)</small>
- React DOM adds a new `suppressContentEditableWarning` prop for components like [Draft.js](https://facebook.github.io/draft-js/) that intentionally manage `contentEditable` children with React.
<small>[@mxstbr](https://github.com/mxstbr) in [#6112](https://github.com/facebook/react/pull/6112)</small>
- React improves the performance for `createClass()` on complex specs.
<small>[@spicyj](https://github.com/spicyj) in [#5550](https://github.com/facebook/react/pull/5550)</small>

View File

@@ -16,4 +16,8 @@ We'd like to thank all of our contributors:
{% endfor %}
</div>
In addition, we're grateful to [Jeff Barczewski](https://github.com/jeffbski) for allowing us to use the [react](https://www.npmjs.com/package/react) package name on npm and to [Christopher Aue](http://christopheraue.net/) for letting us use the [reactjs.com](http://reactjs.com/) domain name and the [@reactjs](https://twitter.com/reactjs) username on Twitter. We'd also like to thank [ProjectMoon](https://github.com/ProjectMoon) for letting us use the [flux](https://www.npmjs.com/package/flux) package name on npm.
In addition, we're grateful to
- [Jeff Barczewski](https://github.com/jeffbski) for allowing us to use the [react](https://www.npmjs.com/package/react) package name on npm.
- [Christopher Aue](http://christopheraue.net/) for letting us use the [reactjs.com](http://reactjs.com/) domain name and the [@reactjs](https://twitter.com/reactjs) username on Twitter.
- [ProjectMoon](https://github.com/ProjectMoon) for letting us use the [flux](https://www.npmjs.com/package/flux) package name on npm.
- Shane Anderson for allowing us to use the [react](https://github.com/react) org on GitHub.

View File

@@ -9,7 +9,12 @@ id: all-posts
<div class="inner-content">
<h1>All Posts</h1>
{% for page in site.posts %}
<p><strong><a href="/react{{ page.url }}">{{ page.title }}</a></strong> on {{ page.date | date: "%B %e, %Y" }} by {{ page.author.name }}</p>
<p><strong><a href="/react{{ page.url }}">{{ page.title }}</a></strong> on {{ page.date | date: "%B %e, %Y" }} by
{% for author in page.authors %}
{{ author.name }}
{% if forloop.last == false %} and {% endif %}
{% endfor %}
</p>
{% endfor %}
</div>
</section>

View File

@@ -5,7 +5,7 @@
font-family: monospace;
}
.CodeMirror-scroll {
/* Set scrolling behaviour here */
/* Set scrolling behavior here */
overflow: auto;
}
@@ -122,7 +122,7 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
}
/* The fake, visible scrollbars. Used to force redraw during scrolling
before actuall scrolling happens, thus preventing shaking and
before actual scrolling happens, thus preventing shaking and
flickering artifacts. */
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler {
position: absolute;

View File

@@ -129,7 +129,7 @@ h1, h2, h3, h4, h5, h6 {
margin: 0;
}
a {
li > a {
box-sizing: content-box;
padding: 0 10px;
line-height: $navHeight;
@@ -260,6 +260,22 @@ h1, h2, h3, h4, h5, h6 {
&.active {
color: $primary;
}
&.external {
&:after {
content: "";
display: inline-block;
width: 10px;
height: 10px;
padding-left: 5px;
@include retina-image('../img/external', 10px 10px);
background-position: 100% 0;
background-repeat: no-repeat;
font-size: 10px;
line-height: 1em;
opacity: 0.5;
}
}
}
.nav-docs-section {
@@ -390,6 +406,39 @@ h1, h2, h3, h4, h5, h6 {
@include clearfix;
}
/* JSX Compiler */
.jsxCompiler {
margin: 0 auto;
padding-top: 20px;
width: 1220px;
label.compiler-option {
display: block;
margin-top: 5px;
}
#jsxCompiler {
margin-top: 20px;
}
.playgroundPreview {
padding: 0;
width: 600px;
word-wrap: break-word;
pre {
@include code-typography;
}
}
.playgroundError {
// The compiler view kills padding in order to render the CodeMirror code
// more nicely. For the error view, put a padding back
padding: 15px 20px;
}
}
.docs-prev {
float: left;
}
@@ -710,6 +759,8 @@ p a code {
margin-bottom: 0;
background-color: transparent;
border: 0;
float: left;
min-width: 100%;
}
.highlight pre code {
@@ -805,3 +856,72 @@ div[data-twttr-id] iframe {
.three-column > ul:first-child {
margin-left: 20px;
}
/* Algolia Doc Search */
@media screen and (max-width: 960px) {
#algolia-doc-search {
display: none;
}
}
input#algolia-doc-search {
background: transparent url('/react/img/search.png') no-repeat 10px center;
background-size: 16px 16px;
position: relative;
vertical-align: top;
margin-left: 10px;
padding: 0 10px;
padding-left: 35px;
height: 30px;
margin-top: 10px;
font-size: 16px;
line-height: 20px;
background-color: #333;
border-radius: 4px;
color: white;
outline: none;
width: 170px;
transition: width .2s ease;
}
input#algolia-doc-search:focus {
width: 240px;
}
.algolia-autocomplete .aa-dropdown-menu {
margin-left: -110px;
margin-top: -4px;
}
.algolia-autocomplete {
vertical-align: top;
height: 53px;
}
.algolia-docsearch-suggestion {
border-bottom-color: #c05b4d;
}
.algolia-docsearch-suggestion--category-header {
background-color: #cc7a6f;
}
.algolia-docsearch-suggestion--highlight {
color: #c05b4d;
}
.algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight {
background-color: #c05b4d;
}
.aa-cursor .algolia-docsearch-suggestion--content {
color: #c05b4d;
}
.aa-cursor .algolia-docsearch-suggestion {
background: #f1f3f5;
}

View File

@@ -0,0 +1,28 @@
---
id: why-react-de-DE
title: Warum React?
permalink: why-react-de-DE.html
---
React ist eine JavaScript-Bibliothek von Facebook und Instagram für Benutzeroberflächen. Man kann sich React als das **V** in **[MVC](https://de.wikipedia.org/wiki/Model_View_Controller)** vorstellen.
Wir haben React für folgende Aufgabe entwickelt: **umfangreiche Anwendungen zu bauen, deren Daten sich zeitlich ändern**.
## Einfach
Beschreibe, wie sich Deine App zu jedem gewünschten Zeitpunkt präsentieren soll und React kümmert sich um alle Benutzeroberflächen-Änderungen sobald sich die zugrundeliegenden Daten ändern.
## Deklarativ
Bei Datenveränderungen drückt React bildlich die "Aktualisieren"-Taste und versteht sich darauf, nur die veränderten Elemente zu erneuern.
## Baue zusammensetzbare Komponenten
React unterstützt die Entwicklung wiederverwendbarer Komponenten. Tatsächlich machst Du in React nichts anderes, als Komponenten zu bauen. Dank ihrer Kapselung erleichtern Komponenten die Wiederverwendung und das Testen von Code sowie die Trennung der Belange.
## Gib' ihnen fünf Minuten
React hinterfragt eine ganze Reihe konventioneller Standpunkte. Auf den ersten Blick mögen einige Ideen verrückt klingen. [Gib' ihnen fünf Minuten](https://signalvnoise.com/posts/3124-give-it-five-minutes) während Du diese Anleitung liest; diese verrückten Ideen halfen dabei, tausende von Komponenten innerhalb und außerhalb von Facebook und Instagram zu entwickeln.
## Erfahre mehr
Erfahre mehr über unsere Motivation zur Entwicklung von React in [diesem Blogeintrag](/react/blog/2013/06/05/why-react.html).

View File

@@ -4,14 +4,13 @@ title: 为什么使用 React?
permalink: why-react-zh-CN.html
next: displaying-data-zh-CN.html
---
React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很人多认为 React 是 **[MVC](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)** 中的 **V**(视图)。
React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很多人选择将 React 认为是 **[MVC](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)** 中的 **V**(视图)。
我们创造 React 是为了解决一个问题:**构建随着时间数据不断变化的大规模应用程序**。
### 简单
仅仅只要表达出你的应用程序在任一个时间点应该的样子然后当底层的数据变了React 会自动处理所有用户界面的更新。
仅仅只要表达出你的应用程序在任一个时间点应该呈现的样子然后当底层的数据变了React 会自动处理所有用户界面的更新。
### 声明式 (Declarative)
@@ -28,5 +27,3 @@ React挑战了很多传统的知识第一眼看上去可能很多想法有点
## 了解更多
你可以从这篇[博客](/react/blog/2013/06/05/why-react.html)了解更多我们创造 React 的动机。

View File

@@ -62,7 +62,7 @@ setInterval(function() {
このことについて私たちが理解できる方法は、Reactは必要になるまで、DOMの操作を行わないということです。 **Reactは、DOMの変化を表現し、あなたにもっとも効率的なDOMの変化を見積もるために早い、内部のモックのDOMを使っています。**
このコンポーネントのインプットは `props` と呼ばれるものです。"properties" の省略形です。それらはJSXシンタックスの中でアトリビュートとして渡されます。それらはコンポーネントの中で不変と考えるべきで、 **`this.props` と書かないようにしてください**
このコンポーネントのインプットは `props` と呼ばれるものです。"properties" の省略形です。それらはJSXシンタックスの中でアトリビュートとして渡されます。それらはコンポーネントの中で不変と考えるべきで、 **`this.props` には書き込まないようにしてください**
## コンポーネントは関数のようなものです。

View File

@@ -19,6 +19,7 @@ UI를 가지고 할 수 있는 가장 기초적인 것은 데이터를 표시하
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://fb.me/react-{{site.react_version}}.js"></script>
<script src="https://fb.me/react-dom-{{site.react_version}}.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
@@ -54,7 +55,6 @@ setInterval(function() {
}, 500);
```
## 반응 적(Reactive) 업데이트
`hello-react.html` 파일을 웹 브라우저에서 열어 당신의 이름을 텍스트 필드에 써 보세요. React는 단지 시간을 표시하는 부분만을 바꿉니다 — 텍스트 필드 안에 입력한 것은 그대로 남아 있구요, 당신이 이 동작을 관리하는 그 어떤 코드도 쓰지 않았음에도 불구하고 말이죠. React는 그걸 올바른 방법으로 알아서 해줍니다.
@@ -63,7 +63,6 @@ setInterval(function() {
이 컴포넌트에 대한 입력은 `props` 라고 불립니다 — "properties" 를 줄인 것이죠. 그들은 JSX 문법에서는 어트리뷰트로서 전달됩니다. 당신은 `props` 를 컴포넌트 안에서 불변의(immutable) 엘리먼트로서 생각해야 하고, `this.props` 를 덮어씌우려고 해서는 안됩니다.
## 컴포넌트들은 함수와 같습니다
React 컴포넌트들은 매우 단순합니다. 당신은 그것들을 `props``state` (이것들은 나중에 언급할 것입니다) 를 받고 HTML을 렌더링하는 단순한 함수들로 생각해도 됩니다. 이걸 염두하면, 컴포넌트의 작동을 이해하는 것도 쉽습니다.
@@ -72,7 +71,6 @@ React 컴포넌트들은 매우 단순합니다. 당신은 그것들을 `props`
>
> **한가지 제약이 있습니다**: React 컴포넌트들은 단 하나의 루트 노드(root node)만을 렌더할 수 있습니다. 만약 여러개의 노드들을 리턴하고 싶다면, 그것들은 단 하나의 루트 노드로 싸여져 있어야만 합니다.
## JSX 문법
우리는 컴포넌트를 사용하는 것이 "템플릿"과 "디스플레이 로직(display logic)"을 이용하는 것보다 관심을 분리(separate concerns)하는 데에 올바른 방법이라고 강하게 믿고 있습니다. 우리는 마크업과 그것을 만들어내는 코드는 친밀하게 함께 결합되어있다고 생각합니다. 또한, 디스플레이 로직은 종종 매우 복잡하고, 그것을 템플릿 언어를 이용해 표현하는 것은 점점 사용하기 어렵게 됩니다.
@@ -91,12 +89,11 @@ JSX를 이용하면:
우리는 이것이 React 앱들을 만들기 쉽게 하고, 디자이너들이 이 문법을 더 선호하는 것을 발견했습니다, 하지만 모든 사람은 그들만의 선호하는 워크플로우가 있기 마련이므로, **JSX는 React를 사용하기 위해 필수적이지는 않습니다.**
JSX는 매우 작은 언어입니다. 그것을 배우고 싶다면, [JSX 깊게 살펴보기](/react/docs/jsx-in-depth-ko-KR.html). 를 살펴 보시기 바랍니다. 또는, [우리의 온라인 JSX 컴파일러](/react/jsx-compiler.html)를 통해 문법이 변환되는 것을 살펴 보시기 바랍니다.
JSX는 매우 작은 언어입니다. 그것을 배우고 싶다면, [JSX 깊게 살펴보기](/react/docs/jsx-in-depth-ko-KR.html)를 살펴 보시기 바랍니다. 또는, [바벨 REPL](https://babeljs.io/repl/)를 통해 문법이 변환되는 것을 살펴 보시기 바랍니다.
JSX는 HTML과 비슷하지만, 완전히 똑같지는 않습니다. [JSX의 실수하기 쉬운 부분들](/react/docs/jsx-gotchas-ko-KR.html)에 중요한 차이점들에 대해 설명되어 있습니다.
JSX를 사용하기 시작하기 위한 가장 쉬운 방법은 브라우저에서 작동하는 `JSXTransformer`를 사용하는 것입니다. 우리는 이것을 프로덕션에서는 사용하지 않기를 강하게 권장하는 바입니다. 당신은 우리의 커맨드 라인 [react-tools](https://www.npmjs.com/package/react-tools) 패키지를 이용하여 미리 컴파일(precompile)해 사용할 수 있습니다.
[바벨에서 JSX를 시작하는 여러 방법을 제공합니다](http://babeljs.io/docs/setup/). 여기에는 커맨드 라인 툴부터 루비 온 레일스 연동까지 다양한 방법이 있습니다. 가장 편한 툴을 사용하세요.
## JSX 없이 React 사용하기

View File

@@ -8,7 +8,6 @@ next: jsx-in-depth.html
The most basic thing you can do with a UI is display some data. React makes it easy to display data and automatically keeps the interface up-to-date when the data changes.
## Getting Started
Let's look at a really simple example. Create a `hello-react.html` file with the following code:
@@ -20,6 +19,7 @@ Let's look at a really simple example. Create a `hello-react.html` file with the
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://fb.me/react-{{site.react_version}}.js"></script>
<script src="https://fb.me/react-dom-{{site.react_version}}.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
@@ -55,7 +55,6 @@ setInterval(function() {
}, 500);
```
## Reactive Updates
Open `hello-react.html` in a web browser and type your name into the text field. Notice that React is only changing the time string in the UI — any input you put in the text field remains, even though you haven't written any code to manage this behavior. React figures it out for you and does the right thing.
@@ -64,7 +63,6 @@ The way we are able to figure this out is that React does not manipulate the DOM
The inputs to this component are called `props` — short for "properties". They're passed as attributes in JSX syntax. You should think of these as immutable within the component, that is, **never write to `this.props`**.
## Components are Just Like Functions
React components are very simple. You can think of them as simple functions that take in `props` and `state` (discussed later) and render HTML. With this in mind, components are easy to reason about.
@@ -73,7 +71,6 @@ React components are very simple. You can think of them as simple functions that
>
> **One limitation**: React components can only render a single root node. If you want to return multiple nodes they *must* be wrapped in a single root.
## JSX Syntax
We strongly believe that components are the right way to separate concerns rather than "templates" and "display logic." We think that markup and the code that generates it are intimately tied together. Additionally, display logic is often very complex and using template languages to express it becomes cumbersome.
@@ -98,7 +95,6 @@ JSX is similar to HTML, but not exactly the same. See [JSX gotchas](/react/docs/
[Babel exposes a number of ways to get started using JSX](http://babeljs.io/docs/setup/), ranging from command line tools to Ruby on Rails integrations. Choose the tool that works best for you.
## React without JSX
JSX is completely optional; you don't have to use JSX with React. You can create React elements in plain JavaScript using `React.createElement`, which takes a tag name or component, a properties object, and variable number of optional child arguments.

View File

@@ -1,7 +1,6 @@
---
id: displaying-data-zh-CN
title: 显示数据
layout: docs
permalink: displaying-data-zh-CN.html
prev: why-react-zh-CN.html
next: jsx-in-depth-zh-CN.html
@@ -9,7 +8,6 @@ next: jsx-in-depth-zh-CN.html
用户界面能做的最基础的事就是显示一些数据。React 让显示数据变得简单,当数据变化的时候,用户界面会自动同步更新。
## 开始
让我们看一个非常简单的例子。新建一个名为 `hello-react.html` 的文件,代码内容如下:
@@ -21,6 +19,7 @@ next: jsx-in-depth-zh-CN.html
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://fb.me/react-{{site.react_version}}.js"></script>
<script src="https://fb.me/react-dom-{{site.react_version}}.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
@@ -56,7 +55,6 @@ setInterval(function() {
}, 500);
```
## 被动更新 (Reactive Updates)
在浏览器中打开 `hello-react.html` ,在输入框输入你的名字。你会发现 React 在用户界面中只改变了时间, 任何你在输入框输入的内容一直保留着即使你没有写任何代码来完成这个功能。React 为你解决了这个问题,做了正确的事。
@@ -65,7 +63,6 @@ setInterval(function() {
对这个组件的输入称为 `props` - "properties"的缩写。得益于 JSX 语法,它们通过参数传递。你必须知道在组件里,这些属性是不可改变的,也就是说 **`this.props` 是只读的**。
## 组件就像是函数
React 组件非常简单。你可以认为它们就是简单的函数,接受 `props``state` (后面会讨论) 作为参数,然后渲染出 HTML。正是应为它们是这么的简单这使得它们非常容易理解。
@@ -74,12 +71,13 @@ React 组件非常简单。你可以认为它们就是简单的函数,接受 `
>
> **只有一个限制**: React 组件只能渲染单个根节点。如果你想要返回多个节点,它们*必须*被包含在同一个节点里。
## JSX 语法
我们坚信组件是正确方法去做关注分离,而不是通过“模板”和“展示逻辑”。我们认为标签和生成它的代码是紧密相连的。此外,展示逻辑通常是很复杂的,通过模板语言实现这些逻辑会产生大量代码。
我们得出解决这个问题最好的方案是通过 JavaScript 直接生成模板,这样你就可以用一个真正语言的所有表达能力去构建用户界面。为了使这变得更简单,我们做了一个非常简单、**可选**类似 HTML 语法 ,通过函数调用即可生成模板的编译器,称为 JSX。
我们得出解决这个问题最好的方案是通过 JavaScript 直接生成模板,这样你就可以用一个真正语言的所有表达能力去构建用户界面。
为了使这变得更简单,我们做了一个非常简单、**可选**类似 HTML 语法 ,通过函数调用即可生成模板的编译器,称为 JSX。
**JSX 让你可以用 HTML 语法去写 JavaScript 函数调用** 为了在 React 生成一个链接,通过纯 JavaScript 你可以这么写:
@@ -95,16 +93,16 @@ JSX 非常小上面“hello, world”的例子使用了 JSX 所有的特性
JSX 类似于 HTML但不是完全一样。参考 [JSX 陷阱](/react/docs/jsx-gotchas-zh-CN.html) 学习关键区别。
最简单开始学习 JSX 的方法就是使用浏览器端的 `JSXTransformer`。我们强烈建议你不要在生产环境中使用它。你可以通过我们的命令行工具 [react-tools](https://www.npmjs.com/package/react-tools) 包来预编译你的代码
[Babel 公开了一些使用 JSX 的方式],从命令行工具到 Ruby on Rails 集成。选择一个对你来说最合适的工具
## 没有 JSX 的 React
你完全可以选择是否使用 JSX并不是 React 必须。你可以通过 `React.createElement` 来创建一个树。第一个参数是标签,第二个参数是一个属性对象,三个是子节点。
JSX完全是可选的你无需在 React 必须使用 JSX。你可以通过 `React.createElement` 来创建一个树。第一个参数是标签,第二个参数是一个属性对象,三个是子节点。
```javascript
var child = React.createElement('li', null, 'Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child);
var child1 = React.createElement('li', null, 'First Text Content');
var child2 = React.createElement('li', null, 'Second Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
ReactDOM.render(root, document.getElementById('example'));
```
@@ -121,6 +119,6 @@ React 已经为 HTML 标签提供内置工厂方法。
```javascript
var root = React.DOM.ul({ className: 'my-list' },
React.DOM.li(null, 'Text Content')
);
React.DOM.li(null, 'Text Content')
);
```

View File

@@ -216,4 +216,4 @@ var content = (
```
> 注意:
> JSXはHTMLに似ていますが、全く同じではありません。いくつかのキーの違いについては[JSXの理解](/react/docs/jsx-gotchas.html) をご覧ください。
> JSXはHTMLに似ていますが、全く同じではありません。いくつかのキーの違いについては[JSXの理解](/react/docs/jsx-gotchas.html) をご覧ください。

View File

@@ -83,7 +83,7 @@ var Nav = React.createClass({ });
var Nav = React.createClass({displayName: "Nav", });
```
[JSX 컴파일러](/react/jsx-compiler.html)를 보면 JSX에서 어떻게 네이티브 JavaScript로 변환(desugars)하는지 볼 수 있고, [HTML-JSX 변환기](/react/html-jsx.html)는 이미 있는 HTML을 JSX로 변환해 줍니다.
[바벨 REPL](https://babeljs.io/repl/)를 보면 JSX에서 어떻게 네이티브 JavaScript로 변환(desugars)하는지 볼 수 있고, [HTML-JSX 변환기](/react/html-jsx.html)는 이미 있는 HTML을 JSX로 변환해 줍니다.
JSX를 사용 하시려면, [시작하기](/react/docs/getting-started-ko-KR.html) 가이드에서 어떻게 컴파일을 하기 위해 설정하는지 보실 수 있습니다.

View File

@@ -22,7 +22,7 @@ It doesn't alter the semantics of JavaScript.
React can either render HTML tags (strings) or React components (classes).
To render a HTML tag, just use lower-case tag names in JSX:
To render an HTML tag, just use lower-case tag names in JSX:
```javascript
var myDivElement = <div className="foo" />;
@@ -82,10 +82,7 @@ var Nav = React.createClass({ });
var Nav = React.createClass({displayName: "Nav", });
```
Use the [Babel REPL](https://babeljs.io/repl/) to try out JSX and see how it
desugars into native JavaScript, and the
[HTML to JSX converter](/react/html-jsx.html) to convert your existing HTML to
JSX.
Use the [Babel REPL](https://babeljs.io/repl/) to try out JSX and see how it desugars into native JavaScript, and the [HTML to JSX converter](/react/html-jsx.html) to convert your existing HTML to JSX.
If you want to use JSX, the [Getting Started](/react/docs/getting-started.html) guide shows how to set up compilation.
@@ -163,8 +160,7 @@ var App = (
### Attribute Expressions
To use a JavaScript expression as an attribute value, wrap the expression in a
pair of curly braces (`{}`) instead of quotes (`""`).
To use a JavaScript expression as an attribute value, wrap the expression in a pair of curly braces (`{}`) instead of quotes (`""`).
```javascript
// Input (JSX):

View File

@@ -8,7 +8,6 @@ next: jsx-spread-zh-CN.html
[JSX](https://facebook.github.io/jsx/) 是一个看起来很像 XML 的 JavaScript 语法扩展。React 可以用来做简单的 JSX 句法转换。
## 为什么要用 JSX
你不需要为了 React 使用 JSX可以直接使用原生 JS。但是我们建议使用 JSX 是因为它能精确,也是常用的定义包含属性的树状结构的语法。
@@ -46,7 +45,6 @@ React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标
> 由于 JSX 就是 JavaScript一些标识符像 `class` 和 `for` 不建议作为 XML
> 属性名。作为替代React DOM 使用 `className` 和 `htmlFor` 来做对应的属性。
## 转换Transform
JSX 把类 XML 的语法转成原生 JavaScriptXML 元素、属性和子节点被转换成 `React.createElement` 的参数。
@@ -90,6 +88,7 @@ var Nav = React.createClass({displayName: "Nav", });
> 注意:
>
>
> JSX 表达式总是会当作 ReactElement 执行。具体的实际细节可能不同。一种优化
> 的模式是把 ReactElement 当作一个行内的对象字面量形式来绕过
> `React.createElement` 里的校验代码。
@@ -99,7 +98,7 @@ var Nav = React.createClass({displayName: "Nav", });
如果你正在构建一个有很多子组件的组件,比如表单,你也许会最终得到许多的变量声明。
```javascript
// 尴尬的变量声明块
// 尴尬的变量声明块
var Form = MyFormComponent;
var FormRow = Form.Row;
var FormLabel = Form.Label;
@@ -221,5 +220,5 @@ var content = (
```
> 注意:
>
>
> JSX 类似于 HTML但不完全一样。参考 [JSX 陷阱](/react/docs/jsx-gotchas-zh-CN.html) 了解主要不同。

View File

@@ -12,7 +12,7 @@ next: jsx-gotchas-ko-KR.html
var component = <Component foo={x} bar={y} />;
```
## Props의 변경은 나빠요.[^1]
## Props의 변경은 나빠요
하지만 어떤 프로퍼티를 설정하고 싶은지 모른다면, 객체 레이어에 넣고 싶어질 수도 있습니다.
@@ -50,7 +50,3 @@ props는 변하지 않는 것으로 간주해야 합니다. props 객체를 변
## 이상한 `...` 표기법은 무엇인가요?
`...` 연산자(스프레드 연산자)는 이미 [ES6의 배열](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator)에서 지원합니다. [객체 rest와 스프레드 프로퍼티](https://github.com/sebmarkbage/ecmascript-rest-spread)에 대한 ES7의 제안도 있습니다. JSX의 구문을 더 깔끔하게 하기 위해 지원되고 개발중인 표준을 활용하고 있습니다.
[^1]: 아무래도 좋지만, 이 제목의 원문 "Mutating Props is Bad, mkay"는 사우스 파크에
나온 대사 "[Drug is bad, mkay](https://www.youtube-nocookie.com/watch?v=Uh7l8dx-h8M)"의
패러디입니다.

View File

@@ -12,7 +12,7 @@ If you know all the properties that you want to place on a component ahead of ti
var component = <Component foo={x} bar={y} />;
```
## Mutating Props is Bad, mkay
## Mutating Props is Bad
If you don't know which properties you want to set, you might be tempted to add them onto the object later:
@@ -49,4 +49,4 @@ You can use this multiple times or combine it with other attributes. The specifi
## What's with the weird `...` notation?
The `...` operator (or spread operator) is already supported for [arrays in ES6](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator). There is also an ES7 proposal for [Object Rest and Spread Properties](https://github.com/sebmarkbage/ecmascript-rest-spread). We're taking advantage of these supported and developing standards in order to provide a cleaner syntax in JSX.
The `...` operator (or spread operator) is already supported for [arrays in ES6](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator). There is also an ECMAScript proposal for [Object Rest and Spread Properties](https://github.com/sebmarkbage/ecmascript-rest-spread). We're taking advantage of these supported and developing standards in order to provide a cleaner syntax in JSX.

View File

@@ -12,7 +12,6 @@ next: jsx-gotchas-zh-CN.html
var component = <Component foo={x} bar={y} />;
```
## 修改 Props 是不好的,明白吗
如果你不知道要设置哪些 Props那么现在最好不要设置它
@@ -27,7 +26,6 @@ next: jsx-gotchas-zh-CN.html
Props 应该被认为是不可变的。在别处修改 props 对象可能会导致预料之外的结果,所以原则上这将是一个冻结的对象。
## 展开属性Spread Attributes
现在你可以使用 JSX 的新特性 - 展开属性:
@@ -49,7 +47,6 @@ Props 应该被认为是不可变的。在别处修改 props 对象可能会导
console.log(component.props.foo); // 'override'
```
## 这个奇怪的 `...` 标记是什么?
这个 `...` 操作符(增强的操作符)已经被 [ES6 数组](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator) 支持。相关的还有 ES7 规范草案中的 [Object 剩余和展开属性Rest and Spread Properties](https://github.com/sebmarkbage/ecmascript-rest-spread)。我们利用了这些还在制定中标准中已经被支持的特性来使 JSX 拥有更优雅的语法。
这个 `...` 操作符(增强的操作符)已经被 [ES6 数组](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator) 支持。相关的还有 ECMAScript 规范草案中的 [Object 剩余和展开属性Rest and Spread Properties](https://github.com/sebmarkbage/ecmascript-rest-spread)。我们利用了这些还在制定中标准中已经被支持的特性来使 JSX 拥有更优雅的语法。

View File

@@ -27,7 +27,7 @@ If you want to display an HTML entity within dynamic content, you will run into
<div>{'First &middot; Second'}</div>
```
There are various ways to work-around this issue. The easiest one is to write unicode characters directly in JavaScript. You need to make sure that the file is saved as UTF-8 and that the proper UTF-8 directives are set so the browser will display it correctly.
There are various ways to work-around this issue. The easiest one is to write Unicode characters directly in JavaScript. You need to make sure that the file is saved as UTF-8 and that the proper UTF-8 directives are set so the browser will display it correctly.
```javascript
<div>{'First · Second'}</div>
@@ -61,6 +61,12 @@ If you pass properties to native HTML elements that do not exist in the HTML spe
<div data-custom-attribute="foo" />
```
However, arbitrary attributes are supported on custom elements (those with a hyphen in the tag name or an `is="..."` attribute).
```javascript
<x-my-component custom-attribute="foo" />
```
[Web Accessibility](http://www.w3.org/WAI/intro/aria) attributes starting with `aria-` will be rendered properly.
```javascript

View File

@@ -52,6 +52,7 @@ HTML 实体可以插入到 JSX 的文本中。
<div dangerouslySetInnerHTML={{'{{'}}__html: 'First &middot; Second'}} />
```
## 自定义 HTML 属性
如果往原生 HTML 元素里传入 HTML 规范里不存在的属性React 不会显示它们。如果需要使用自定义属性,要加 `data-` 前缀。
@@ -60,6 +61,12 @@ HTML 实体可以插入到 JSX 的文本中。
<div data-custom-attribute="foo" />
```
然而,在自定义元素中任意的属性都是被支持的 那些在tag名里带有连接符或者 `is="..."` 属性的)
```javascript
<x-my-component custom-attribute="foo" />
```
`aria-` 开头的 [网络无障碍](http://www.w3.org/WAI/intro/aria) 属性可以正常使用。
```javascript

View File

@@ -78,7 +78,7 @@ Reactがデータの変更を通知する共通な方法は `setState(data, call
`this.state` UIのstateを表す必要がある最小限の量のデータだけを保持するべきです。このような点で以下のようなものは保持するべきではありません。
* **計算されたデータ:**
* **計算されたデータ:**
stateに基づく事前に計算された値について心配は要りません。 `render()` を用いて、全ての計算を行って、UIの一貫性を保証するよりも簡単です。例えば、stateにリスト化されたアイテムの配列を持っていて、文字列としてその数をレンダリングしたいとして、それらをstateに保持するよりも `render()` メソッドに `this.state.listItems.length + ' list items'` を単純にレンダリングすれば良いのです。
* **Reactのコンポーネント:** 隠れたpropsとstateに基づいて `render()` でそれらをビルドしてください。
* **propsからコピーしたデータ:** 可能であれば、propsを真のソースとして使ってみてください。propsは時とともに変化し得るので、正しくstateにpropsを保持する使い方は、以前の値を知っていることになり得ます。
* **propsからコピーしたデータ:** 可能であれば、propsを真のソースとして使ってみてください。propsは時とともに変化し得るので、正しくstateにpropsを保持する使い方は、以前の値を知っていることになり得ます。

View File

@@ -8,7 +8,6 @@ next: multiple-components-ko-KR.html
이미 React에서 [어떻게 데이터를 표시](/react/docs/displaying-data-ko-KR.html)하는지를 배웠습니다. 이제 UI와의 상호작용을 어떻게 만드는지 살펴보죠.
## 간단한 예제
```javascript
@@ -35,34 +34,29 @@ ReactDOM.render(
);
```
## 이벤트 핸들링과 통합적인(Synthetic) 이벤트
React에서의 이벤트 핸들러는 HTML에서 그러던 것처럼 간단히 카멜케이스 프로퍼티(camelCased prop)로 넘기면 됩니다. React의 모든 이벤트는 통합적인 이벤트 시스템의 구현으로 IE8 이상에서는 같은 행동이 보장됩니다. 즉, React는 사양에 따라 어떻게 이벤트를 일으키고(bubble) 잡는지 알고 있고, 당신이 사용하는 브라우저와 관계없이 이벤트 핸들러에 전달되는 이벤트는 [W3C 사양](http://www.w3.org/TR/DOM-Level-3-Events/)과 같도록 보장됩니다.
## 기본 구현: 오토바인딩과 이벤트 델리게이션
<a name="under-the-hood-autobinding-and-event-delegation"></a>
코드를 고성능으로 유지하고 이해하기 쉽게 하기 위해, React는 보이지 않는 곳에서 몇 가지 일을 수행합니다.
**오토바인딩:** JavaScript에서 콜백을 만들 때, 보통은 `this`의 값이 정확하도록 명시적으로 메소드를 인스턴스에 바인드해야 합니다. React에서는 모든 메소드가 자동으로 React의 컴포넌트 인스턴스에 바인드됩니다. React가 바인드 메소드를 캐시하기 때문에 매우 CPU와 메모리에 효율적입니다. 타이핑해야 할 것도 줄어들죠!
**오토바인딩:** JavaScript에서 콜백을 만들 때, 보통은 `this`의 값이 정확하도록 명시적으로 메소드를 인스턴스에 바인드해야 합니다. React에서는 모든 메소드가 자동으로 React의 컴포넌트 인스턴스에 바인드됩니다.(ES6 클래스 문법을 사용할 때는 재외하고) React가 바인드 메소드를 캐시하기 때문에 매우 CPU와 메모리에 효율적입니다. 타이핑해야 할 것도 줄어들죠!
**이벤트 델리게이션:** React는 실제로는 노드자신에게 이벤트 핸들러를 붙이지 않습니다. React가 시작되면 React는 탑 레벨의 단일 이벤트 리스너로 모든 이벤트를 리스닝하기 시작합니다. 컴포넌트가 마운트되거나 언마운트 될 때, 이벤트 핸들러는 그냥 내부 매핑에서 넣거나 뺄 뿐입니다. 이벤트가 발생하면, React는 이 매핑을 사용해서 어떻게 디스패치할 지를 알게 됩니다. 매핑에 이벤트 핸들러가 남아있지 않으면, React의 이벤트 핸들러는 그냥 아무것도 하지 않습니다. 왜 이 방식이 빠른지 더 알고 싶으시면, [David Walsh의 멋진 블로그 글](http://davidwalsh.name/event-delegate)을 읽어 보세요.
## 컴포넌트는 그냥 state 머신일 뿐
React는 UI를 간단한 state 머신이라 생각합니다. UI를 다양한 state와 그 state의 렌더링으로 생각함으로써 UI를 일관성 있게 관리하기 쉬워집니다.
React에서는, 간단히 컴포넌트의 state를 업데이트하고, 이 새로운 state의 UI를 렌더링합니다. React는 DOM의 변경을 가장 효율적인 방법으로 관리해줍니다.
## state의 동작 원리
React에게 데이터의 변경을 알리는 일반적인 방법은 `setState(data, callback)`을 호출하는 것입니다. 이 메소드는 `this.state``data`를 머지하고 컴포넌트를 다시 렌더링 합니다. 컴포넌트의 재-렌더링이 끝나면, 생략가능한 `callback`이 호출됩니다. 대부분의 경우 React가 UI를 최신상태로 유지해주기 때문에 `callback`을 사용할 필요가 없습니다.
## 어떤 컴포넌트가 state를 가져야 할까요?
대부분의 컴포넌트는 `props`로부터 데이터를 받아 렌더할 뿐입니다만, 가끔 유저 인풋, 서버 요청, 시간의 경과에 반응해야 할 필요가 있습니다. 이럴 때 state를 사용합니다.
@@ -71,7 +65,6 @@ React에게 데이터의 변경을 알리는 일반적인 방법은 `setState(da
일반적인 패턴은 데이터만 렌더하는 여러 상태를 가지지 않은 컴포넌트를 만들고, 그 위에 상태기반(stateful) 컴포넌트를 만들어 계층 안의 자식 컴포넌트에게 `props`를 통해 state를 전달하는 것입니다. state를 가지지 않은 컴포넌트가 선언적인 방법으로 데이터를 렌더링 하는 동안, 상태기반 컴포넌트는 모든 상호작용 로직을 캡슐화합니다.
## state를 어떻게 *써야* 할까요?
**state는 컴포넌트의 이벤트 핸들러에 의해 UI 업데이트를 트리거할때 변경될 가능성이 있어, 그때 사용할 데이터를 가져야 합니다.** 실제 앱에서는 이 데이터는 매우 작고 JSON 직렬화 가능한 경향이 있습니다. 상태기반 컴포넌트를 만들때, 가능한 작게 state를 서술하고 `this.state`에만 저장하도록 해보세요. 그냥 `render()` 안에서 이 state를 기반으로 다른 모든 정보를 계산합니다. 이 방식으로 애플리케이션을 작성하고 생각하면 가장 최적의 애플리케이션으로 발전해가는 경향이 있다는 것을 발견하게 될 것입니다. 꼭 필요하지 않은 값이나 계산된 값을 state에 추가하는 것은 render가 그것을 계산하는 대신에 명시적으로 그것들을 맞춰줘야 하는 것을 의미하기 때문이죠.
@@ -82,4 +75,4 @@ React에게 데이터의 변경을 알리는 일반적인 방법은 `setState(da
* **계산된 데이터:** state에 따라 값을 미리 계산하는 것에 대해 염려하지 마세요. 계산은 모두 `render()`에서 하는 것이 UI의 일관성을 유지하기 쉽습니다. 예를 들어, state에서 list items 배열을 가지고 있고 문자열으로 카운트를 렌더링 할 경우, state에 저장하기보다는 그냥 `render()` 메소드안에서 `this.state.listItems.length + ' list items'`를 렌더하세요.
* **React 컴포넌트:** 가지고 있는 props와 state로 `render()`안에서 만드세요.
* **props에서 복사한 데이터:** 가능한 한 원래의 소스로 props를 사용하도록 해보세요. props를 state에 저장하는 단 하나의 올바른 사용법은 이전 값을 알고 싶을 때입니다. props는 시간이 지나면 변경될 수도 있기 때문이죠.
* **props에서 복사한 데이터:** 가능한 한 원래의 소스로 props를 사용하도록 해보세요. props를 state에 저장하는 단 하나의 올바른 사용법은 이전 값을 알고 싶을 때입니다. props는 부모 컴포넌트의 재 렌더링의 결과 변경될 수도 있기 때문이죠.

View File

@@ -8,7 +8,6 @@ next: multiple-components.html
You've already [learned how to display data](/react/docs/displaying-data.html) with React. Now let's look at how to make our UIs interactive.
## A Simple Example
```javascript
@@ -35,33 +34,28 @@ ReactDOM.render(
);
```
## Event Handling and Synthetic Events
With React you simply pass your event handler as a camelCased prop similar to how you'd do it in normal HTML. React ensures that all events behave identically in IE8 and above by implementing a synthetic event system. That is, React knows how to bubble and capture events according to the spec, and the events passed to your event handler are guaranteed to be consistent with [the W3C spec](http://www.w3.org/TR/DOM-Level-3-Events/), regardless of which browser you're using.
With React you simply pass your event handler as a camelCased prop similar to how you'd do it in normal HTML. React ensures that all events behave similarly in all browsers by implementing a synthetic event system. That is, React knows how to bubble and capture events according to the spec, and the events passed to your event handler are guaranteed to be consistent with [the W3C spec](http://www.w3.org/TR/DOM-Level-3-Events/), regardless of which browser you're using.
## Under the Hood: Autobinding and Event Delegation
Under the hood, React does a few things to keep your code performant and easy to understand.
**Autobinding:** When creating callbacks in JavaScript, you usually need to explicitly bind a method to its instance such that the value of `this` is correct. With React, every method is automatically bound to its component instance (except when using ES6 class syntax). React caches the bound method such that it's extremely CPU and memory efficient. It's also less typing!
**Autobinding:** When creating callbacks in JavaScript, you usually need to explicitly bind a method to its instance such that the value of `this` is correct. With React, every method is automatically bound to its component instance ([except when using ES6 class syntax](/react/docs/reusable-components.html#no-autobinding)). React caches the bound method such that it's extremely CPU and memory efficient. It's also less typing!
**Event delegation:** React doesn't actually attach event handlers to the nodes themselves. When React starts up, it starts listening for all events at the top level using a single event listener. When a component is mounted or unmounted, the event handlers are simply added or removed from an internal mapping. When an event occurs, React knows how to dispatch it using this mapping. When there are no event handlers left in the mapping, React's event handlers are simple no-ops. To learn more about why this is fast, see [David Walsh's excellent blog post](http://davidwalsh.name/event-delegate).
## Components are Just State Machines
React thinks of UIs as simple state machines. By thinking of a UI as being in various states and rendering those states, it's easy to keep your UI consistent.
In React, you simply update a component's state, and then render a new UI based on this new state. React takes care of updating the DOM for you in the most efficient way.
## How State Works
A common way to inform React of a data change is by calling `setState(data, callback)`. This method merges `data` into `this.state` and re-renders the component. When the component finishes re-rendering, the optional `callback` is called. Most of the time you'll never need to provide a `callback` since React will take care of keeping your UI up-to-date for you.
## What Components Should Have State?
Most of your components should simply take some data from `props` and render it. However, sometimes you need to respond to user input, a server request or the passage of time. For this you use state.
@@ -70,15 +64,14 @@ Most of your components should simply take some data from `props` and render it.
A common pattern is to create several stateless components that just render data, and have a stateful component above them in the hierarchy that passes its state to its children via `props`. The stateful component encapsulates all of the interaction logic, while the stateless components take care of rendering data in a declarative way.
## What *Should* Go in State?
**State should contain data that a component's event handlers may change to trigger a UI update.** In real apps this data tends to be very small and JSON-serializable. When building a stateful component, think about the minimal possible representation of its state, and only store those properties in `this.state`. Inside of `render()` simply compute any other information you need based on this state. You'll find that thinking about and writing applications in this way tends to lead to the most correct application, since adding redundant or computed values to state means that you need to explicitly keep them in sync rather than rely on React computing them for you.
## What *Shouldnt* Go in State?
## What *Shouldn't* Go in State?
`this.state` should only contain the minimal amount of data needed to represent your UI's state. As such, it should not contain:
* **Computed data:** Don't worry about precomputing values based on state — it's easier to ensure that your UI is consistent if you do all computation within `render()`. For example, if you have an array of list items in state and you want to render the count as a string, simply render `this.state.listItems.length + ' list items'` in your `render()` method rather than storing it on state.
* **React components:** Build them in `render()` based on underlying props and state.
* **Duplicated data from props:** Try to use props as the source of truth where possible. One valid use to store props in state is to be able to know its previous values, because props can change over time.
* **Duplicated data from props:** Try to use props as the source of truth where possible. One valid use to store props in state is to be able to know its previous values, because props may change as the result of a parent component re-rendering.

View File

@@ -8,7 +8,6 @@ next: multiple-components-zh-CN.html
我们已经学习如何使用 React [显示数据](/react/docs/displaying-data-zh-CN.html)。现在让我们来学习如何创建交互式界面。
## 简单例子
```javascript
@@ -35,7 +34,6 @@ ReactDOM.render(
);
```
## 事件处理与合成事件Synthetic Events
React 里只需把事件处理器event handler以骆峰命名camelCased形式当作组件的 props 传入即可,就像使用普通 HTML 那样。React 内部创建一套合成事件系统来使所有事件在 IE8 和以上浏览器表现一致。也就是说React 知道如何冒泡和捕获事件,而且你的事件处理器接收到的 events 参数与 [W3C 规范](http://www.w3.org/TR/DOM-Level-3-Events/) 一致,无论你使用哪种浏览器。
@@ -48,19 +46,16 @@ React 里只需把事件处理器event handler以骆峰命名camelCased
**事件代理 ** React 实际并没有把事件处理器绑定到节点本身。当 React 启动的时候它在最外层使用唯一一个事件监听器处理所有事件。当组件被加载和卸载时只是在内部映射里添加或删除事件处理器。当事件触发React 根据映射来决定如何分发。当映射里处理器时,会当作空操作处理。参考 [David Walsh 很棒的文章](http://davidwalsh.name/event-delegate) 了解这样做高效的原因。
## 组件其实是状态机State Machines
React 把用户界面当作简单状态机。把用户界面想像成拥有不同状态然后渲染这些状态,可以轻松让用户界面和数据保持一致。
React 里,只需更新组件的 state然后根据新的 state 重新渲染用户界面(不要操作 DOM。React 来决定如何最高效地更新 DOM。
## State 工作原理
常用的通知 React 数据变化的方法是调用 `setState(data, callback)`。这个方法会合并merge `data``this.state`,并重新渲染组件。渲染完成后,调用可选的 `callback` 回调。大部分情况下不需要提供 `callback`,因为 React 会负责把界面更新到最新状态。
## 哪些组件应该有 State
大部分组件的工作应该是从 `props` 里取数据并渲染出来。但是,有时需要对用户输入、服务器请求或者时间变化等作出响应,这时才需要使用 State。
@@ -69,16 +64,14 @@ React 里,只需更新组件的 state然后根据新的 state 重新渲染
常用的模式是创建多个只负责渲染数据的无状态stateless组件在它们的上层创建一个有状态stateful组件并把它的状态通过 `props` 传给子级。这个有状态的组件封装了所有用户的交互逻辑,而这些无状态组件则负责声明式地渲染数据。
## 哪些 *应该* 作为 State
**State 应该包括那些可能被组件的事件处理器改变并触发用户界面更新的数据。** 真实的应用中这种数据一般都很小且能被 JSON 序列化。当创建一个状态化的组件时,想象一下表示它的状态最少需要哪些数据,并只把这些数据存入 `this.state`。在 `render()` 里再根据 state 来计算你需要的其它数据。你会发现以这种方式思考和开发程序最终往往是正确的,因为如果在 state 里添加冗余数据或计算所得数据,需要你经常手动保持数据同步,不能让 React 来帮你处理。
## 哪些 *不应该* 作为 State
`this.state` 应该仅包括能表示用户界面状态所需的最少数据。因些,它不应该包括:
* **计算所得数据:** 不要担心根据 state 来预先计算数据 —— 把所有的计算都放到 `render()` 里更容易保证用户界面和数据的一致性。例如,在 state 里有一个数组listItems我们要把数组长度渲染成字符串 直接在 `render()` 里使用 `this.state.listItems.length + ' list items'` 比把它放到 state 里好的多。
* **React 组件:** 在 `render()` 里使用当前 props 和 state 来创建它。
* **基于 props 的重复数据:** 尽可能使用 props 来作为惟一数据来源。把 props 保存到 state 的一个有效的场景是需要知道它以前值的时候,因为未来的 props 可能变化。
* **基于 props 的重复数据:** 尽可能使用 props 来作为实际状态的源。把 props 保存到 state 的一个有效的场景是需要知道它以前值的时候,因为 props 可能因为父组件重绘的结果而变化。

View File

@@ -8,12 +8,10 @@ next: reusable-components-ko-KR.html
지금까지, 단일 컴포넌트에서 데이터를 표시하고 유저 입력을 다루는 것을 살펴보았습니다. 다음엔 React의 최고의 기능 중 하나인 조합가능성(composability)을 살펴봅시다.
## 동기: 관심의 분리
명확히 정의된 인터페이스와 다른 컴포넌트를 재사용해 모듈러 컴포넌트를 구축하면, 함수와 클래스를 이용했을 때 얻을 수 있는 이점 대부분을 얻을 수 있습니다. 특히 앱에서 *다른 관심을 분리*할 수 있습니다.아무리 간단히 새 컴포넌트를 만들었다고 해도 말이죠. 당신의 애플리케이션에서 쓸 커스텀 컴포넌트 라이브러리를 만들어서, 당신의 도메인에 최적화된 방법으로 UI를 표현할 수 있게 됩니다.
## 조합(Composition) 예제
간단히 페이스북 그래프 API를 사용해 프로필 사진과 유저이름을 보여주는 아바타 컴포넌트를 만든다고 합시다.
@@ -54,14 +52,12 @@ ReactDOM.render(
);
```
## 소유권(Ownership)
위의 예제에서, `Avatar` 인스턴스는 `ProfilePic``ProfileLink`인스턴스를 *가지고* 있습니다. React에서 **소유자는 다른 컴포넌트의 `props`를 설정하는 컴포넌트입니다**. 더 정식으로 말하면, `X` 컴포넌트가 `Y` 컴포넌트의 `render()` 메소드 안에서 만들어졌다면, `Y``X`*소유하고* 있다고 합니다. 앞에서 설명한 바와 같이, 컴포넌트는 자신의 `props`를 변경할 수 없습니다. `props`는 언제나 소유자가 설정한 것과 일치합니다. 이와 같은 중요한 성질은 UI가 일관성 있도록 해줍니다.
위의 예제에서, `Avatar` 인스턴스는 `ProfilePic``ProfileLink`인스턴스를 *가지고* 있습니다. React에서 **소유자는 다른 컴포넌트의 `props`를 설정하는 컴포넌트입니다**. 더 정식으로 말하면, `X` 컴포넌트가 `Y` 컴포넌트의 `render()` 메소드 안에서 만들어졌다면, `Y``X`*소유하고* 있다고 합니다. 앞에서 설명한 바와 같이, 컴포넌트는 자신의 `props`를 변경할 수 없습니다. `props`는 언제나 소유자가 설정한 것과 일치합니다. 이와 같은 근본적인 불변성은 UI가 일관성 있도록 해줍니다.
소유(owner-ownee)관계와 부모·자식 관계를 구별하는 것은 중요합니다. 부모·자식 관계가 DOM에서부터 쓰던 익숙하고 이미 알고있던 단순한 것인 한편, 소유관계는 React 고유의 것입니다. 위의 예제에서, `Avatar``div`, `ProfilePic`, `ProfileLink`인스턴스를 소유하고, `div``ProfilePic``ProfileLink`인스턴스의 (소유자가 아닌) **부모**입니다.
## 자식
React 컴포넌트 인스턴스를 만들 때, 추가적인 React 컴포넌트나 JavaScript 표현식을 시작과 끝 태그 사이에 넣을 수 있습니다. 이렇게 말이죠.
@@ -72,7 +68,6 @@ React 컴포넌트 인스턴스를 만들 때, 추가적인 React 컴포넌트
`Parent``this.props.children`라는 특수 prop으로 자식들을 읽을 수 있습니다. **`this.props.children` 는 불투명한 데이터 구조이며,** [React.Children 유틸리티](/react/docs/top-level-api-ko-KR.html#react.children)를 사용해 자식들을 관리합니다.
### 자식 Reconciliation (비교조정)
**Reconciliation은 React가 DOM을 각각 새로운 렌더 패스에 업데이트하는 과정입니다.** 일반적으로, 자식은 렌더하는 순서에 따라 비교조정됩니다. 예를 들어, 각각의 마크업을 생성하는 두 개의 렌더 패스가 있다고 해봅시다.
@@ -91,7 +86,6 @@ React 컴포넌트 인스턴스를 만들 때, 추가적인 React 컴포넌트
직관적으로 보면, `<p>Paragraph 1</p>`가 없어졌습니다만 그러는 대신에, React는 첫 번째 자식의 텍스트를 비교조정하고 마지막 자식을 파괴하도록 DOM을 비교조정할 것입니다. React는 자식들의 *순서*에 따라 비교조정합니다.
### 상태기반(Stateful) 자식
대부분의 컴포넌트에서는, 이것은 큰 문제가 아닙니다. 하지만 렌더 패스 간에 `this.state`를 유지하는 상태기반의 컴포넌트에서는 매우 문제가 될 수 있습니다.
@@ -111,7 +105,6 @@ React 컴포넌트 인스턴스를 만들 때, 추가적인 React 컴포넌트
</Card>
```
<a name="dynamic-children"></a>
### 동적 자식
@@ -179,7 +172,6 @@ ReactFragment 객체를 넘기는 것으로 자식에 키를 할당할 수도
React에서 데이터는 위에서 말한 것처럼 `props`를 통해 소유자로부터 소유한 컴포넌트로 흐릅니다. 이것은 사실상 단방향 데이터 바인딩입니다. 소유자는 `props``state`를 기준으로 계산한 어떤 값으로 소유한 컴포넌트의 props를 바인드합니다. 이 과정은 재귀적으로 발생하므로, 데이터의 변경은 자동으로 모든 곳에 반영됩니다.
## 성능의 주의점
소유자가 가지고 있는 노드의 수가 많아지면 데이터가 변화하는 비용이 증가할 것으로 생각할 수도 있습니다. 좋은 소식은 JavaScript의 속도는 빠르고 `render()` 메소드는 꽤 간단한 경향이 있어, 대부분 애플리케이션에서 매우 빠르다는 점입니다. 덧붙여, 대부분의 병목 현상은 JS 실행이 아닌 DOM 변경에서 일어나고, React는 배치와 탐지 변경을 이용해 최적화해 줍니다.

View File

@@ -8,59 +8,55 @@ next: reusable-components.html
So far, we've looked at how to write a single component to display data and handle user input. Next let's examine one of React's finest features: composability.
## Motivation: Separation of Concerns
By building modular components that reuse other components with well-defined interfaces, you get much of the same benefits that you get by using functions or classes. Specifically you can *separate the different concerns* of your app however you please simply by building new components. By building a custom component library for your application, you are expressing your UI in a way that best fits your domain.
## Composition Example
Let's create a simple Avatar component which shows a profile picture and username using the Facebook Graph API.
Let's create a simple Avatar component which shows a Facebook page picture and name using the Facebook Graph API.
```javascript
var Avatar = React.createClass({
render: function() {
return (
<div>
<ProfilePic username={this.props.username} />
<ProfileLink username={this.props.username} />
<PagePic pagename={this.props.pagename} />
<PageLink pagename={this.props.pagename} />
</div>
);
}
});
var ProfilePic = React.createClass({
var PagePic = React.createClass({
render: function() {
return (
<img src={'https://graph.facebook.com/' + this.props.username + '/picture'} />
<img src={'https://graph.facebook.com/' + this.props.pagename + '/picture'} />
);
}
});
var ProfileLink = React.createClass({
var PageLink = React.createClass({
render: function() {
return (
<a href={'https://www.facebook.com/' + this.props.username}>
{this.props.username}
<a href={'https://www.facebook.com/' + this.props.pagename}>
{this.props.pagename}
</a>
);
}
});
ReactDOM.render(
<Avatar username="pwh" />,
<Avatar pagename="Engineering" />,
document.getElementById('example')
);
```
## Ownership
In the above example, instances of `Avatar` *own* instances of `ProfilePic` and `ProfileLink`. In React, **an owner is the component that sets the `props` of other components**. More formally, if a component `X` is created in component `Y`'s `render()` method, it is said that `X` is *owned by* `Y`. As discussed earlier, a component cannot mutate its `props` — they are always consistent with what its owner sets them to. This fundamental invariant leads to UIs that are guaranteed to be consistent.
It's important to draw a distinction between the owner-ownee relationship and the parent-child relationship. The owner-ownee relationship is specific to React, while the parent-child relationship is simply the one you know and love from the DOM. In the example above, `Avatar` owns the `div`, `ProfilePic` and `ProfileLink` instances, and `div` is the **parent** (but not owner) of the `ProfilePic` and `ProfileLink` instances.
In the above example, instances of `Avatar` *own* instances of `PagePic` and `PageLink`. In React, **an owner is the component that sets the `props` of other components**. More formally, if a component `X` is created in component `Y`'s `render()` method, it is said that `X` is *owned by* `Y`. As discussed earlier, a component cannot mutate its `props` — they are always consistent with what its owner sets them to. This fundamental invariant leads to UIs that are guaranteed to be consistent.
It's important to draw a distinction between the owner-ownee relationship and the parent-child relationship. The owner-ownee relationship is specific to React, while the parent-child relationship is simply the one you know and love from the DOM. In the example above, `Avatar` owns the `div`, `PagePic` and `PageLink` instances, and `div` is the **parent** (but not owner) of the `PagePic` and `PageLink` instances.
## Children
@@ -72,7 +68,6 @@ When you create a React component instance, you can include additional React com
`Parent` can read its children by accessing the special `this.props.children` prop. **`this.props.children` is an opaque data structure:** use the [React.Children utilities](/react/docs/top-level-api.html#react.children) to manipulate them.
### Child Reconciliation
**Reconciliation is the process by which React updates the DOM with each new render pass.** In general, children are reconciled according to the order in which they are rendered. For example, suppose two render passes generate the following respective markup:
@@ -91,7 +86,6 @@ When you create a React component instance, you can include additional React com
Intuitively, `<p>Paragraph 1</p>` was removed. Instead, React will reconcile the DOM by changing the text content of the first child and destroying the last child. React reconciles according to the *order* of the children.
### Stateful Children
For most components, this is not a big deal. However, for stateful components that maintain data in `this.state` across render passes, this can be very problematic.
@@ -111,7 +105,6 @@ In most cases, this can be sidestepped by hiding elements instead of destroying
</Card>
```
### Dynamic Children
The situation gets more complicated when the children are shuffled around (as in search results) or if new components are added onto the front of the list (as in streams). In these cases where the identity and state of each child must be maintained across render passes, you can uniquely identify each child by assigning it a `key`:
@@ -178,7 +171,6 @@ You can also key children by passing a ReactFragment object. See [Keyed Fragment
In React, data flows from owner to owned component through `props` as discussed above. This is effectively one-way data binding: owners bind their owned component's props to some value the owner has computed based on its `props` or `state`. Since this process happens recursively, data changes are automatically reflected everywhere they are used.
## A Note on Performance
You may be thinking that it's expensive to change data if there are a large number of nodes under an owner. The good news is that JavaScript is fast and `render()` methods tend to be quite simple, so in most applications this is extremely fast. Additionally, the bottleneck is almost always the DOM mutation and not JS execution. React will optimize this for you by using batching and change detection.

View File

@@ -8,59 +8,55 @@ next: reusable-components-zh-CN.html
目前为止,我们已经学了如何用单个组件来展示数据和处理用户输入。下一步让我们来体验 React 最激动人心的特性之一可组合性composability
## 动机:关注分离
通过复用那些接口定义良好的组件来开发新的模块化组件,我们得到了与使用函数和类相似的好处。具体来说就是能够通过开发简单的组件把程序的*不同关注面分离*。如果为程序开发一套自定义的组件库,那么就能以最适合业务场景的方式来展示你的用户界面。
## 组合实例
一起来使用 Facebook Graph API 开发显示个人图片和用户名的简单 Avatar 组件吧。
让我们用 Facebook Graph API 开发一个显示 Facebook 页面图片和用户名的简单 Avatar 组件吧。
```javascript
var Avatar = React.createClass({
render: function() {
return (
<div>
<ProfilePic username={this.props.username} />
<ProfileLink username={this.props.username} />
<PagePic pagename={this.props.pagename} />
<PageLink pagename={this.props.pagename} />
</div>
);
}
});
var ProfilePic = React.createClass({
var PagePic = React.createClass({
render: function() {
return (
<img src={'https://graph.facebook.com/' + this.props.username + '/picture'} />
<img src={'https://graph.facebook.com/' + this.props.pagename + '/picture'} />
);
}
});
var ProfileLink = React.createClass({
var PageLink = React.createClass({
render: function() {
return (
<a href={'https://www.facebook.com/' + this.props.username}>
{this.props.username}
<a href={'https://www.facebook.com/' + this.props.pagename}>
{this.props.pagename}
</a>
);
}
});
ReactDOM.render(
<Avatar username="pwh" />,
<Avatar pagename="Engineering" />,
document.getElementById('example')
);
```
## 从属关系
上面例子中,`Avatar` 拥有 `ProfilePic``ProfileLink` 的实例。`拥有者` 就是给其它组件设置 `props` 的那个组件。更正式地说,
如果组件 `Y``render()` 方法是创建了组件 `X`,那么 `Y` 就拥有 `X`。上面讲过,组件不能修改自身的 `props` - 它们总是与它们拥有者设置的保持一致。这是保持用户界面一致性的基本不变量。
把从属关系与父子关系加以区别至关重要。从属关系是 React 特有的而父子关系简单来讲就是DOM 里的标签的关系。在上一个例子中,`Avatar` 拥有 `div``ProfilePic``ProfileLink` 实例,`div``ProfilePic``ProfileLink` 实例的**父级**(但不是拥有者)。
上面例子中,`Avatar` 拥有 `PagePic``PageLink` 的实例。`拥有者` 就是给其它组件设置 `props` 的那个组件。更正式地说,如果组件 `Y``render()` 方法是创建了组件 `X`,那么 `Y` 就拥有 `X`。上面讲过,组件不能修改自身的 `props` - 它们总是与它们拥有者设置的保持一致。这是保持用户界面一致性的基本不变量。
把从属关系与父子关系加以区别至关重要。从属关系是 React 特有的而父子关系简单来讲就是DOM 里的标签的关系。在上一个例子中,`Avatar` 拥有 `div``PagePic``PageLink` 实例,`div``PagePic``PageLink` 实例的**父级**(但不是拥有者)。
## 子级
@@ -168,7 +164,7 @@ var MyComponent = React.createClass({
});
```
也可以传递ReactFragment 对象 来做有 key 的子级。详见[Keyed Fragments](create-fragment.html)
也可以传递ReactFragment 对象 来做有 key 的子级。详见[Keyed Fragments](create-fragment.html)
## 数据流
@@ -182,5 +178,5 @@ React 里,数据通过上面介绍过的 `props` 从拥有者流向归属者
但是,有时候需要做细粒度的性能控制。这种情况下,可以重写 `shouldComponentUpdate()` 方法返回 false 来让 React 跳过对子树的处理。参考 [React reference docs](/react/docs/component-specs.html) 了解更多。
> 注意:
>
>
> 如果在数据变化时让 `shouldComponentUpdate()` 返回 falseReact 就不能保证用户界面同步。当使用它的时候一定确保你清楚到底做了什么,并且只在遇到明显性能问题的时候才使用它。不要低估 JavaScript 的速度DOM 操作通常才是慢的原因。

View File

@@ -249,7 +249,7 @@ ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
Oppure usando la nuova sintassi freccia di ES6:
```javascript
var HelloMessage = (props) => <div>Ciao {props.name}</div>;
const HelloMessage = (props) => <div>Ciao {props.name}</div>;
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
```

View File

@@ -227,4 +227,4 @@ Counter.defaultProps = { initialCount: 0 };
### ミックスインはありません
不幸なことに、ES6はミックスインのサポートを行いません。それゆえ、ReactをES6のクラスと一緒に使う際にはミックスインのサポートはありません。代わりに、ミックスインに頼ることなくそれらのユースケースをサポートするのが簡単になるよう努力しています。
不幸なことに、ES6はミックスインのサポートを行いません。それゆえ、ReactをES6のクラスと一緒に使う際にはミックスインのサポートはありません。代わりに、ミックスインに頼ることなくそれらのユースケースをサポートするのが簡単になるよう努力しています。

View File

@@ -8,7 +8,6 @@ next: transferring-props-ko-KR.html
인터페이스를 설계할 때, 공통적으로 사용되는 디자인 요소들(버튼, 폼 필드, 레이아웃 컴포넌트 등.)을 잘 정의된 인터페이스의 재사용 가능한 컴포넌트로 분해합니다. 이런 방법으로 다음에 UI를 구축할 때에는 훨씬 적은 코드로 만들 수 있습니다. 이 말은 더 빠른 개발 시간, 더 적은 버그, 더 적은 용량으로 할 수 있다는 뜻이죠.
## Prop 검증
앱의 규모가 커지면 컴포넌트들이 바르게 사용되었는지 확인하는게 도움이 됩니다. 확인은 `propTypes`를 명시해서 할 수 있습니다. `React.PropTypes`는 받은 데이터가 적절한지(valid) 확인하는데 사용할 수 있는 다양한 검증자(validator)를 제공합니다. prop에 부적절한 값을 명시한다면 JavaScript 콘솔에 경고가 보일 것입니다. 성능상의 문제로 `propTypes`는 개발 모드에서만 검사됩니다. 다음은 제공되는 검증자를 설명하는 예제입니다.
@@ -78,7 +77,6 @@ React.createClass({
});
```
## 기본 Prop 값
React는 매우 선언적(declarative)인 방법으로 `props`의 기본값을 정의할 수 있게 해줍니다.
@@ -230,3 +228,30 @@ Counter.defaultProps = { initialCount: 0 };
### 믹스인 안됨
불행하게도 ES6는 믹스인에 대한 지원이 없이 출시되었기 때문에, React에서 ES6 클래스를 사용한다면 믹스인을 사용할 방법이 없습니다. 대신, 우리는 믹스인에 의존하지 않고도 동작하도록 만들기 위해 열심히 노력하고 있습니다.
<a name="stateless-functions"></a>
## 상태를 가지지 않는 함수
React 클래스를 일반 JavaScript 함수로 작성할 수도 있습니다. 상태를 가지지 않는 함수 문법을 사용하는 예제입니다.
```javascript
function HelloMessage(props) {
return <div>Hello {props.name}</div>;
}
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
```
아니면 ES6의 화살표 문법을 사용할 수 있습니다.
```javascript
const HelloMessage = (props) => <div>Hello {props.name}</div>;
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
```
이 단순화된 컴포넌트 API는 prop의 순수 함수인 컴포넌트를 나타냅니다. 이 컴포넌트는 내부 상태가 없어야 하고, 내부 인스턴스가 없어야 하고, 컴포넌트 생명주기 메소드가 없어야 합니다. 아무런 준비 과정없이 입력에 대한 순수한 기능적 변환이어야 합니다.
> 주의:
>
> 상태를 가지지 않는 함수는 내부 인스턴스가 없기 때문에, ref를 상태를 가지지않는 함수에 넣을 수 없습니다. 상태를 가지지 않는 함수는 명령형(imperative) API를 제공하지 않기 때문에 일반적으로 이것은 문제가 되지 않습니다. 명령형 API없이 인스턴스에 할 수 있는 것이 많지 않기도 하죠. 하지만 상태를 가지지 않는 컴포넌트의 DOM 노드를 검색하길 원한다면, 반드시 상태 기반 컴포넌트(예. ES6 클래스 컴포넌트)로 컴포넌트를 감싸고 상태 기반 래퍼 컴포넌트에 ref를 붙여야 합니다.
이상적으로는, 대부분의 컴포넌트는 상태를 가지지 않는 함수여야 합니다. 왜냐 하면 이런 상태를 가지지 않는 컴포넌트는 React 코어 안에서 더 빠른 코드 경로를 거치기 때문입니다. 이는 가능한 한 추천하는 패턴입니다.

View File

@@ -8,7 +8,6 @@ next: transferring-props.html
When designing interfaces, break down the common design elements (buttons, form fields, layout components, etc.) into reusable components with well-defined interfaces. That way, the next time you need to build some UI, you can write much less code. This means faster development time, fewer bugs, and fewer bytes down the wire.
## Prop Validation
As your app grows it's helpful to ensure that your components are used correctly. We do this by allowing you to specify `propTypes`. `React.PropTypes` exports a range of validators that can be used to make sure the data you receive is valid. When an invalid value is provided for a prop, a warning will be shown in the JavaScript console. Note that for performance reasons `propTypes` is only checked in development mode. Here is an example documenting the different validators provided:
@@ -71,14 +70,51 @@ React.createClass({
// won't work inside `oneOfType`.
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error('Validation failed!');
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
}
},
// You can also supply a custom validator to `arrayOf` and `objectOf`.
// It should return an Error object if the validation fails. The validator
// will be called for each key in the array or object. The first two
// arguments of the validator are the array or object itself, and the
// current item's key.
customArrayProp: React.PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
if (!/matchme/.test(propValue[key])) {
return new Error(
'Invalid prop `' + propFullName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
})
},
/* ... */
});
```
### Single Child
With `React.PropTypes.element` you can specify that only a single child can be passed to a component as children.
```javascript
var MyComponent = React.createClass({
propTypes: {
children: React.PropTypes.element.isRequired
},
render: function() {
return (
<div>
{this.props.children} // This must be exactly one element or it will warn.
</div>
);
}
});
```
## Default Prop Values
@@ -97,10 +133,9 @@ var ComponentWithDefaultProps = React.createClass({
The result of `getDefaultProps()` will be cached and used to ensure that `this.props.value` will have a value if it was not specified by the parent component. This allows you to safely just use your props without having to write repetitive and fragile code to handle that yourself.
## Transferring Props: A Shortcut
A common type of React component is one that extends a basic HTML element in a simple way. Often you'll want to copy any HTML attributes passed to your component to the underlying HTML element to save typing. You can use the JSX _spread_ syntax to achieve this:
A common type of React component is one that extends a basic HTML element in a simple way. Often you'll want to copy any HTML attributes passed to your component to the underlying HTML element. To save typing, you can use the JSX _spread_ syntax to achieve this:
```javascript
var CheckLink = React.createClass({
@@ -118,28 +153,6 @@ ReactDOM.render(
);
```
## Single Child
With `React.PropTypes.element` you can specify that only a single child can be passed to
a component as children.
```javascript
var MyComponent = React.createClass({
propTypes: {
children: React.PropTypes.element.isRequired
},
render: function() {
return (
<div>
{this.props.children} // This must be exactly one element or it will throw.
</div>
);
}
});
```
## Mixins
Components are the best way to reuse code in React, but sometimes very different components may share some common functionality. These are sometimes called [cross-cutting concerns](https://en.wikipedia.org/wiki/Cross-cutting_concern). React provides `mixins` to solve this problem.
@@ -209,13 +222,14 @@ export class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {count: props.initialCount};
this.tick = this.tick.bind(this);
}
tick() {
this.setState({count: this.state.count + 1});
}
render() {
return (
<div onClick={this.tick.bind(this)}>
<div onClick={this.tick}>
Clicks: {this.state.count}
</div>
);
@@ -227,14 +241,39 @@ Counter.defaultProps = { initialCount: 0 };
### No Autobinding
Methods follow the same semantics as regular ES6 classes, meaning that they don't automatically bind `this` to the instance. You'll have to explicitly use `.bind(this)` or [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) `=>`.
Methods follow the same semantics as regular ES6 classes, meaning that they don't automatically bind `this` to the instance. You'll have to explicitly use `.bind(this)` or [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) `=>`:
```javascript
// You can use bind() to preserve `this`
<div onClick={this.tick.bind(this)}>
// Or you can use arrow functions
<div onClick={() => this.tick()}>
```
We recommend that you bind your event handlers in the constructor so they are only bound once for every instance:
```javascript
constructor(props) {
super(props);
this.state = {count: props.initialCount};
this.tick = this.tick.bind(this);
}
```
Now you can use `this.tick` directly as it was bound once in the constructor:
```javascript
// It is already bound in the constructor
<div onClick={this.tick}>
```
This is better for performance of your application, especially if you implement [shouldComponentUpdate()](/react/docs/component-specs.html#updating-shouldcomponentupdate) with a [shallow comparison](/react/docs/shallow-compare.html) in the child components.
### No Mixins
Unfortunately ES6 launched without any mixin support. Therefore, there is no support for mixins when you use React with ES6 classes. Instead, we're working on making it easier to support such use cases without resorting to mixins.
## Stateless Functions
You may also define your React classes as a plain JavaScript function. For example using the stateless function syntax:
@@ -249,16 +288,19 @@ ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
Or using the new ES6 arrow syntax:
```javascript
var HelloMessage = (props) => <div>Hello {props.name}</div>;
const HelloMessage = (props) => <div>Hello {props.name}</div>;
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
```
This simplified component API is intended for components that are pure functions of their props. These components must not retain internal state, do not have backing instances, and do not have the component lifecycle methods. They are pure functional transforms of their input, with zero boilerplate.
However, you may still specify `.propTypes` and `.defaultProps` by setting them as properties on the function, just as you would set them on an ES6 class.
> NOTE:
>
>
> Because stateless functions don't have a backing instance, you can't attach a ref to a stateless function component. Normally this isn't an issue, since stateless functions do not provide an imperative API. Without an imperative API, there isn't much you could do with an instance anyway. However, if a user wants to find the DOM node of a stateless function component, they must wrap the component in a stateful component (eg. ES6 class component) and attach the ref to the stateful wrapper component.
In an ideal world, most of your components would be stateless functions because these stateless components can follow a faster code path within the React core. This is the recommended pattern, when possible.
> NOTE:
>
> In React v0.14, stateless functional components were not permitted to return `null` or `false` (a workaround is to return a `<noscript />` instead). This was fixed in React v15, and stateless functional components are now permitted to return `null`.
In an ideal world, most of your components would be stateless functions because in the future well also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations. This is the recommended pattern, when possible.

View File

@@ -8,7 +8,6 @@ next: transferring-props-zh-CN.html
设计接口的时候,把通用的设计元素(按钮,表单框,布局组件等)拆成接口良好定义的可复用的组件。这样,下次开发相同界面程序时就可以写更少的代码,也意义着更高的开发效率,更少的 Bug 和更少的程序体积。
## Prop 验证
随着应用不断变大,保证组件被正确使用变得非常有用。为此我们引入 `propTypes``React.PropTypes` 提供很多验证器 (validator) 来验证传入数据的有效性。当向 props 传入无效数据时JavaScript 控制台会抛出警告。注意为了性能考虑,只在开发环境验证 `propTypes`。下面用例子来说明不同验证器的区别:
@@ -32,10 +31,12 @@ React.createClass({
// React 元素
optionalElement: React.PropTypes.element,
// 你同样可以断言一个 prop 是一个类的实例。
// 用 JS 的 instanceof 操作符声明 prop 为类的实例。
optionalMessage: React.PropTypes.instanceOf(Message),
// 用 enum 来限制 prop 只接受指定的值。
// 你可以用 enum 的方式
// 确保你的 prop 被限定为指定值。
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
// 指定的多个对象类型中的一个
@@ -57,14 +58,16 @@ React.createClass({
fontSize: React.PropTypes.number
}),
// 以后任意类型加上 `isRequired` 来使 prop 不可空。
// 你可以在任意东西后面加上 `isRequired`
// 来确保 如果 prop 没有提供 就会显示一个警告。
requiredFunc: React.PropTypes.func.isRequired,
// 不可空的任意类型
requiredAny: React.PropTypes.any.isRequired,
// 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接
// 使用 `console.warn` 或抛异常,因为这样 `oneOfType` 会失效。
// 你可以自定义一个验证器。如果验证失败需要返回一个 Error 对象。
// 不要直接使用 `console.warn` 或抛异常,
// 因为这在 `oneOfType` 里不起作用。
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error('Validation failed!');
@@ -75,6 +78,26 @@ React.createClass({
});
```
### Single Child
`React.PropTypes.element` 你可以指定仅有一个子级能被传送给组件
```javascript
var MyComponent = React.createClass({
propTypes: {
children: React.PropTypes.element.isRequired
},
render: function() {
return (
<div>
{this.props.children} // 这里必须是一个元素否则就会警告
</div>
);
}
});
```
## 默认 Prop 值
@@ -93,9 +116,9 @@ var ComponentWithDefaultProps = React.createClass({
当父级没有传入 props 时,`getDefaultProps()` 可以保证 `this.props.value` 有默认值,注意 `getDefaultProps` 的结果会被 *缓存*。得益于此,你可以直接使用 props而不必写手动编写一些重复或无意义的代码。
## 传递 Props小技巧
## 传递 Props捷径
有一些常用的 React 组件只是对 HTML 做简单扩展。通常,你想少写点代码来把传入组件的 props 复制到对应的 HTML 元素上。这时 JSX _spread_ 语法会帮到你
有一些常用的 React 组件只是对 HTML 做简单扩展。通常,你想 复制任何传进你的组件的HTML属性 到底层的HTML元素上。为了减少输入,你可以用 JSX _spread_ 语法来完成
```javascript
var CheckLink = React.createClass({
@@ -113,28 +136,6 @@ ReactDOM.render(
);
```
## 单个子级
`React.PropTypes.element` 可以限定只能有一个子级传入。
```javascript
var MyComponent = React.createClass({
propTypes: {
children: React.PropTypes.element.isRequired
},
render: function() {
return (
<div>
{this.props.children} // 有且仅有一个元素,否则会抛异常。
</div>
);
}
});
```
## Mixins
组件是 React 里复用代码最佳方式,但是有时一些复杂的组件间也需要共用一些功能。有时会被称为 [跨切面关注点](https://en.wikipedia.org/wiki/Cross-cutting_concern)。React 使用 `mixins` 来解决这类问题。
@@ -228,3 +229,29 @@ Counter.defaultProps = { initialCount: 0 };
不幸的是ES6的发布没有任何mixin的支持。因此当你在ES6 classes下使用React时不支持mixins。作为替代我们正在努力使它更容易支持这些用例不依靠mixins。
## 无状态函数
你也可以用 JavaScript 函数来定义你的 React 类。例如使用无状态函数语法:
```javascript
function HelloMessage(props) {
return <div>Hello {props.name}</div>;
}
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
```
或者使用新的ES6箭头函数:
```javascript
const HelloMessage = (props) => <div>Hello {props.name}</div>;
ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
```
这个简化的组件API旨在用于那些纯函数态的组件 。这些组件必须没有保持任何内部状态,没有备份实例,也没有组件生命周期方法。他们纯粹的函数式的转化他们的输入,没有引用。
然而你仍然可以以设置为函数的properties的方式来指定 `.propTypes``.defaultProps`就像你在ES6类里设置他们那样。
> 注意:
>
> 因为无状态函数没有备份实例,你不能附加一个引用到一个无状态函数组件。 通常这不是问题因为无状态函数不提供一个命令式的API。没有命令式的API你就没有任何需要实例来做的事。然而如果用户想查找无状态函数组件的DOM节点他们必须把这个组件包装在一个有状态组件里比如ES6 类组件) 并且连接一个引用到有状态的包装组件。
在理想世界里,你的大多数组件都应该是无状态函数,因为将来我们可能会用避免不必要的检查和内存分配的方式来对这些组件进行优化。 如果可能,这是推荐的模式。

View File

@@ -27,16 +27,14 @@ Nel resto di questo tutorial vengono illustrate le best practices, usando JSX e
Nella maggior parte dei casi dovresti esplicitamente passare le proprietà. Ciò assicura che venga esposto soltanto un sottoinsieme dell'API interna, del cui funzionamento si è certi.
```javascript
var FancyCheckbox = React.createClass({
render: function() {
var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
return (
<div className={fancyClass} onClick={this.props.onClick}>
{this.props.children}
</div>
);
}
});
function FancyCheckbox(props) {
var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
return (
<div className={fancyClass} onClick={props.onClick}>
{props.children}
</div>
);
}
ReactDOM.render(
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
Ciao mondo!
@@ -58,22 +56,20 @@ A volte passare manualmente ciascuna proprietà può essere noioso e fragile. In
Elenca tutte le proprietà che desideri consumare, seguite da `...other`.
```javascript
var { checked, ...other } = this.props;
var { checked, ...other } = props;
```
Ciò assicura che vengano passate tutte le proprietà TRANNE quelle che stai consumando tu stesso.
```javascript
var FancyCheckbox = React.createClass({
render: function() {
var { checked, ...other } = this.props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
// `other` contiene { onClick: console.log } ma non la proprietà checked
return (
<div {...other} className={fancyClass} />
);
}
});
function FancyCheckbox(props) {
var { checked, ...other } = props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
// `other` contiene { onClick: console.log } ma non la proprietà checked
return (
<div {...other} className={fancyClass} />
);
}
ReactDOM.render(
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
Ciao mondo!
@@ -89,15 +85,13 @@ ReactDOM.render(
Usa sempre il pattern di destrutturazione quando trasferisci altre proprietà sconosciute in `other`.
```javascript
var FancyCheckbox = React.createClass({
render: function() {
var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
// ANTI-PATTERN: `checked` sarebbe passato al componente interno
return (
<div {...this.props} className={fancyClass} />
);
}
});
function FancyCheckbox(props) {
var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
// ANTI-PATTERN: `checked` sarebbe passato al componente interno
return (
<div {...props} className={fancyClass} />
);
}
```
## Consumare e Trasferire la Stessa Proprietà
@@ -105,23 +99,21 @@ var FancyCheckbox = React.createClass({
Se il tuo componente desidera consumare una proprietà, ma anche passarla ad altri, puoi passarla esplicitamente mediante `checked={checked}`. Questo è preferibile a passare l'intero oggetto `this.props` dal momento che è più facile effettuarne il linting e il refactoring.
```javascript
var FancyCheckbox = React.createClass({
render: function() {
var { checked, title, ...other } = this.props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
var fancyTitle = checked ? 'X ' + title : 'O ' + title;
return (
<label>
<input {...other}
checked={checked}
className={fancyClass}
type="checkbox"
/>
{fancyTitle}
</label>
);
}
});
function FancyCheckbox(props) {
var { checked, title, ...other } = props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
var fancyTitle = checked ? 'X ' + title : 'O ' + title;
return (
<label>
<input {...other}
checked={checked}
className={fancyClass}
type="checkbox"
/>
{fancyTitle}
</label>
);
}
```
> NOTA:
@@ -150,14 +142,12 @@ z; // { a: 3, b: 4 }
Se non usi JSX, puoi usare una libreria per ottenere il medesimo pattern. Underscore supporta `_.omit` per omettere delle proprietà ed `_.extend` per copiare le proprietà in un nuovo oggetto.
```javascript
var FancyCheckbox = React.createClass({
render: function() {
var checked = this.props.checked;
var other = _.omit(this.props, 'checked');
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
return (
React.DOM.div(_.extend({}, other, { className: fancyClass }))
);
}
});
function FancyCheckbox(props) {
var checked = props.checked;
var other = _.omit(props, 'checked');
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
return (
React.DOM.div(_.extend({}, other, { className: fancyClass }))
);
}
```

View File

@@ -29,16 +29,14 @@ React.createElement(Component, Object.assign({}, this.props, { more: 'values' })
ほとんどの場合、プロパティを明確に子要素に渡すべきです。それは、内部のAPIのサブセットだけを外に出していることと、認識しているプロパティが動作することを保証します。
```javascript
var FancyCheckbox = React.createClass({
render: function() {
var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
return (
<div className={fancyClass} onClick={this.props.onClick}>
{this.props.children}
</div>
);
}
});
function FancyCheckbox(props) {
var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
return (
<div className={fancyClass} onClick={props.onClick}>
{props.children}
</div>
);
}
ReactDOM.render(
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
Hello world!
@@ -59,22 +57,20 @@ ReactDOM.render(
以下のように `...other` を使うことで、使いたいプロパティを一覧にすることができます。
```javascript
var { checked, ...other } = this.props;
var { checked, ...other } = props;
```
これは、自分で指定したものは 除き 、全てのpropsを渡すことを保証します。
```javascript
var FancyCheckbox = React.createClass({
render: function() {
var { checked, ...other } = this.props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
// `other` は { onClick: console.log } を含みますが、 checked プロパティは含みません。
return (
<div {...other} className={fancyClass} />
);
}
});
function FancyCheckbox(props) {
var { checked, ...other } = props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
// `other` は { onClick: console.log } を含みますが、 checked プロパティは含みません。
return (
<div {...other} className={fancyClass} />
);
}
ReactDOM.render(
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
Hello world!
@@ -89,15 +85,13 @@ ReactDOM.render(
未知の `other` propsを移譲する際には、分割代入パターンを常に使ってください。
```javascript
var FancyCheckbox = React.createClass({
render: function() {
var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
// アンチパターン: `checked` が内部のコンポーネントに渡されます。
return (
<div {...this.props} className={fancyClass} />
);
}
});
function FancyCheckbox(props) {
var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
// アンチパターン: `checked` が内部のコンポーネントに渡されます。
return (
<div {...props} className={fancyClass} />
);
}
```
## 同じpropを使い、移譲する
@@ -105,23 +99,21 @@ var FancyCheckbox = React.createClass({
コンポーネントがプロパティを使うだけでなく、子要素に渡したい場合は、明確に `checked={checked}` と記述することで再度渡すことができます。 `this.props` オブジェクトで全てを渡すほうが、リファクタリングやチェックをしやすいので好ましいです。
```javascript
var FancyCheckbox = React.createClass({
render: function() {
var { checked, title, ...other } = this.props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
var fancyTitle = checked ? 'X ' + title : 'O ' + title;
return (
<label>
<input {...other}
checked={checked}
className={fancyClass}
type="checkbox"
/>
{fancyTitle}
</label>
);
}
});
function FancyCheckbox(props) {
var { checked, title, ...other } = props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
var fancyTitle = checked ? 'X ' + title : 'O ' + title;
return (
<label>
<input {...other}
checked={checked}
className={fancyClass}
type="checkbox"
/>
{fancyTitle}
</label>
);
}
```
> 注意:
@@ -148,14 +140,12 @@ z; // { a: 3, b: 4 }
JSXを使わない際には、同じパターンを行うライブラリを使うことができます。Underscoreでは、 `_.omit` を使ってプロパティをフィルタしたり、 `_.extend` を使って新しいオブジェクトにプロパティをコピーしたりできます。
```javascript
var FancyCheckbox = React.createClass({
render: function() {
var checked = this.props.checked;
var other = _.omit(this.props, 'checked');
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
return (
React.DOM.div(_.extend({}, other, { className: fancyClass }))
);
}
});
function FancyCheckbox(props) {
var checked = props.checked;
var other = _.omit(props, 'checked');
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
return (
React.DOM.div(_.extend({}, other, { className: fancyClass }))
);
}
```

View File

@@ -27,16 +27,14 @@ React.createElement(Component, Object.assign({}, this.props, { more: 'values' })
대부분의 경우 명시적으로 프로퍼티를 아래로 전달해야 합니다. 이는 동작을 확신하는 내부 API의 일부만 공개하도록 합니다.
```javascript
var FancyCheckbox = React.createClass({
render: function() {
var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
return (
<div className={fancyClass} onClick={this.props.onClick}>
{this.props.children}
</div>
);
}
});
function FancyCheckbox(props) {
var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
return (
<div className={fancyClass} onClick={props.onClick}>
{props.children}
</div>
);
}
ReactDOM.render(
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
세상아 안녕!
@@ -50,30 +48,29 @@ ReactDOM.render(
## JSX에서 `...`를 사용해 전달하기
> 주의:
>
> 아래의 예제에서는 실험적인 ES7 문법이 사용되었기 때문에 `--harmony ` 플래그가 필요합니다. 브라우저에서 JSX 변환기를 사용 중이라면, `<script type="text/jsx;harmony=true">`를 사용해 스크립트를 작성하세요. 자세히 알아보려면 아래의 [잔여 프로퍼티와 스프레드 프로퍼티 ...](/react/docs/transferring-props-ko-KR.html#rest-and-spread-properties-...)를 확인하세요.
>
> `...` 구문은 객체 잔여 스프레드 제안의 일부입니다. 이 제안은 표준화 과정에 있습니다. 더 자세한 내용은 밑의 [잔여 프로퍼티와 스프레드 프로퍼티 ...](/react/docs/transferring-props.html#rest-and-spread-properties-...) 부분을 참고하세요.
때로는 모든 프로퍼티를 일일이 전달 하는것은 지루하고 덧없는 작업입니다. 이 경우 [구조 해체 할당(destructuring assignment)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)을 다른 프로퍼티를 함께 사용해 미상의 프로퍼티를 추출할 수 있습니다.
소비할 프로퍼티들을 나열하고, 그 뒤에 `...other`를 넣습니다.
```javascript
var { checked, ...other } = this.props;
var { checked, ...other } = props;
```
이는 지금 소비한 props를 *제외한* 나머지를 아래로 전달합니다.
```javascript
var FancyCheckbox = React.createClass({
render: function() {
var { checked, ...other } = this.props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
// `other`에는 { onClick: console.log }가 포함되지만 checked 프로퍼티는 제외됩니다
return (
<div {...other} className={fancyClass} />
);
}
});
function FancyCheckbox(props) {
var { checked, ...other } = props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
// `other`에는 { onClick: console.log }가 포함되지만 checked 프로퍼티는 제외됩니다
return (
<div {...other} className={fancyClass} />
);
}
ReactDOM.render(
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
세상아 안녕!
@@ -89,15 +86,13 @@ ReactDOM.render(
미상의 `other` props을 전달할 때는 항상 구조 해체 패턴을 사용하세요.
```javascript
var FancyCheckbox = React.createClass({
render: function() {
var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
// 반례: `checked` 또한 내부 컴포넌트로 전달될 것입니다
return (
<div {...this.props} className={fancyClass} />
);
}
});
function FancyCheckbox(props) {
var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
// 반례: `checked` 또한 내부 컴포넌트로 전달될 것입니다
return (
<div {...props} className={fancyClass} />
);
}
```
## 같은 Prop을 소비하고 전달하기
@@ -105,23 +100,21 @@ var FancyCheckbox = React.createClass({
컴포넌트가 프로퍼티를 사용하지만 계속 넘기길 원한다면, `checked={checked}`처럼 명시적으로 다시 넘길 수 있습니다. 리팩토링과 린트(lint)하기가 더 쉬우므로 이 방식이 `this.props` 객체 전부를 넘기는 것보다 낫습니다.
```javascript
var FancyCheckbox = React.createClass({
render: function() {
var { checked, title, ...other } = this.props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
var fancyTitle = checked ? 'X ' + title : 'O ' + title;
return (
<label>
<input {...other}
checked={checked}
className={fancyClass}
type="checkbox"
/>
{fancyTitle}
</label>
);
}
});
function FancyCheckbox(props) {
var { checked, title, ...other } = props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
var fancyTitle = checked ? 'X ' + title : 'O ' + title;
return (
<label>
<input {...other}
checked={checked}
className={fancyClass}
type="checkbox"
/>
{fancyTitle}
</label>
);
}
```
> 주의:
@@ -133,7 +126,7 @@ var FancyCheckbox = React.createClass({
잔여(Rest, `...`) 프로퍼티는 객체에서 소비되지 않은 나머지 프로퍼티를 추출해 새로운 객체로 만들 수 있게 해 줍니다. 구조 해체 패턴에서 열거된 다른 프로퍼티들은 모두 제외됩니다.
는 [ES7 제안](https://github.com/sebmarkbage/ecmascript-rest-spread)의 실험적인 구현체입니다.
제안은 2 단계에 돌입해 이제 바벨에서 기본값으로 활성화되어있습니다. 바벨의 이전 버전은 `babel --optional es7.objectRestSpread`로 명시적으로 활성화 할 필요가 있을 수도 있습니다.
```javascript
var { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
@@ -151,14 +144,12 @@ z; // { a: 3, b: 4 }
JSX를 사용하지 않는다면 라이브러리를 사용해 같은 패턴을 쓸 수 있습니다. Underscore에서는 `_.omit`을 사용해 특정 프로퍼티를 제외하거나 `_.extend`를 사용해 새로운 객체로 프로퍼티를 복사할 수 있습니다.
```javascript
var FancyCheckbox = React.createClass({
render: function() {
var checked = this.props.checked;
var other = _.omit(this.props, 'checked');
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
return (
React.DOM.div(_.extend({}, other, { className: fancyClass }))
);
}
});
function FancyCheckbox(props) {
var checked = props.checked;
var other = _.omit(props, 'checked');
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
return (
React.DOM.div(_.extend({}, other, { className: fancyClass }))
);
}
```

View File

@@ -20,23 +20,21 @@ If you don't use JSX, you can use any object helper such as ES6 `Object.assign`
React.createElement(Component, Object.assign({}, this.props, { more: 'values' }));
```
The rest of this tutorial explains best practices. It uses JSX and experimental ES7 syntax.
The rest of this tutorial explains best practices. It uses JSX and experimental ECMAScript syntax.
## Manual Transfer
Most of the time you should explicitly pass the properties down. This ensures that you only expose a subset of the inner API, one that you know will work.
```javascript
var FancyCheckbox = React.createClass({
render: function() {
var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
return (
<div className={fancyClass} onClick={this.props.onClick}>
{this.props.children}
</div>
);
}
});
function FancyCheckbox(props) {
var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
return (
<div className={fancyClass} onClick={props.onClick}>
{props.children}
</div>
);
}
ReactDOM.render(
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
Hello world!
@@ -58,22 +56,20 @@ Sometimes it's fragile and tedious to pass every property along. In that case yo
List out all the properties that you would like to consume, followed by `...other`.
```javascript
var { checked, ...other } = this.props;
var { checked, ...other } = props;
```
This ensures that you pass down all the props EXCEPT the ones you're consuming yourself.
```javascript
var FancyCheckbox = React.createClass({
render: function() {
var { checked, ...other } = this.props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
// `other` contains { onClick: console.log } but not the checked property
return (
<div {...other} className={fancyClass} />
);
}
});
function FancyCheckbox(props) {
var { checked, ...other } = props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
// `other` contains { onClick: console.log } but not the checked property
return (
<div {...other} className={fancyClass} />
);
}
ReactDOM.render(
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
Hello world!
@@ -89,39 +85,35 @@ ReactDOM.render(
Always use the destructuring pattern when transferring unknown `other` props.
```javascript
var FancyCheckbox = React.createClass({
render: function() {
var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
// ANTI-PATTERN: `checked` would be passed down to the inner component
return (
<div {...this.props} className={fancyClass} />
);
}
});
function FancyCheckbox(props) {
var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
// ANTI-PATTERN: `checked` would be passed down to the inner component
return (
<div {...props} className={fancyClass} />
);
}
```
## Consuming and Transferring the Same Prop
If your component wants to consume a property but also wants to pass it along, you can repass it explicitly with `checked={checked}`. This is preferable to passing the full `this.props` object since it's easier to refactor and lint.
If your component wants to consume a property but also wants to pass it along, you can repass it explicitly with `checked={checked}`. This is preferable to passing the full `props` object since it's easier to refactor and lint.
```javascript
var FancyCheckbox = React.createClass({
render: function() {
var { checked, title, ...other } = this.props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
var fancyTitle = checked ? 'X ' + title : 'O ' + title;
return (
<label>
<input {...other}
checked={checked}
className={fancyClass}
type="checkbox"
/>
{fancyTitle}
</label>
);
}
});
function FancyCheckbox(props) {
var { checked, title, ...other } = props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
var fancyTitle = checked ? 'X ' + title : 'O ' + title;
return (
<label>
<input {...other}
checked={checked}
className={fancyClass}
type="checkbox"
/>
{fancyTitle}
</label>
);
}
```
> NOTE:
@@ -132,7 +124,7 @@ var FancyCheckbox = React.createClass({
Rest properties allow you to extract the remaining properties from an object into a new object. It excludes every other property listed in the destructuring pattern.
This is an experimental implementation of an [ES7 proposal](https://github.com/sebmarkbage/ecmascript-rest-spread).
This is an experimental implementation of an [ECMAScript proposal](https://github.com/sebmarkbage/ecmascript-rest-spread).
```javascript
var { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
@@ -143,21 +135,19 @@ z; // { a: 3, b: 4 }
> Note:
>
> This proposal has reached stage 2 and is now enabled by default in Babel. Older versions of Babel may need to explicitly enable this transform with `babel --optional es7.objectRestSpread`
> To transform rest and spread properties using Babel 6, you need to install the [`es2015`](https://babeljs.io/docs/plugins/preset-es2015/) preset, the [`transform-object-rest-spread`](https://babeljs.io/docs/plugins/transform-object-rest-spread/) plugin and configure them in the `.babelrc` file.
## Transferring with Underscore
If you don't use JSX, you can use a library to achieve the same pattern. Underscore supports `_.omit` to filter out properties and `_.extend` to copy properties onto a new object.
```javascript
var FancyCheckbox = React.createClass({
render: function() {
var checked = this.props.checked;
var other = _.omit(this.props, 'checked');
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
return (
React.DOM.div(_.extend({}, other, { className: fancyClass }))
);
}
});
function FancyCheckbox(props) {
var checked = props.checked;
var other = _.omit(props, 'checked');
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
return (
React.DOM.div(_.extend({}, other, { className: fancyClass }))
);
}
```

View File

@@ -20,23 +20,21 @@ React 里有一个非常常用的模式就是对组件做一层抽象。组件
React.createElement(Component, Object.assign({}, this.props, { more: 'values' }));
```
下面的教程介绍一些最佳实践。使用了 JSX 和 ES7 的还在试验阶段的特性
下面的教程介绍一些最佳实践。使用了 JSX 和 试验性的ECMAScript 语法
## 手动传递
大部分情况下你应该显式地向下传递 props。这样可以确保只公开你认为是安全的内部 API 的子集。
```javascript
var FancyCheckbox = React.createClass({
render: function() {
var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
return (
<div className={fancyClass} onClick={this.props.onClick}>
{this.props.children}
</div>
);
}
});
function FancyCheckbox(props) {
var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
return (
<div className={fancyClass} onClick={props.onClick}>
{props.children}
</div>
);
}
ReactDOM.render(
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
Hello world!
@@ -58,22 +56,20 @@ ReactDOM.render(
列出所有要当前使用的属性,后面跟着 `...other`
```javascript
var { checked, ...other } = this.props;
var { checked, ...other } = props;
```
这样能确保把所有 props 传下去,*除了* 那些已经被使用了的。
```javascript
var FancyCheckbox = React.createClass({
render: function() {
var { checked, ...other } = this.props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
// `other` 包含 { onClick: console.log } 但 checked 属性除外
return (
<div {...other} className={fancyClass} />
);
}
});
function FancyCheckbox(props) {
var { checked, ...other } = props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
// `other` 包含 { onClick: console.log } 但 checked 属性除外
return (
<div {...other} className={fancyClass} />
);
}
ReactDOM.render(
<FancyCheckbox checked={true} onClick={console.log.bind(console)}>
Hello world!
@@ -83,58 +79,52 @@ ReactDOM.render(
```
> 注意:
>
>
> 上面例子中,`checked` 属性也是一个有效的 DOM 属性。如果你没有使用解构赋值,那么可能无意中把它传下去。
在传递这些未知的 `other` 属性时,要经常使用解构赋值模式。
```javascript
var FancyCheckbox = React.createClass({
render: function() {
var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked';
// 反模式:`checked` 会被传到里面的组件里
return (
<div {...this.props} className={fancyClass} />
);
}
});
function FancyCheckbox(props) {
var fancyClass = props.checked ? 'FancyChecked' : 'FancyUnchecked';
// 反模式:`checked` 会被传到里面的组件里
return (
<div {...props} className={fancyClass} />
);
}
```
## 使用和传递同一个 Prop
如果组件需要使用一个属性又要往下传递,可以直接使用 `checked={checked}` 再传一次。这样做比传整个 `this.props` 对象要好,因为更利于重构和语法检查。
如果组件需要使用一个属性又要往下传递,可以直接使用 `checked={checked}` 再传一次。这样做比传整个 `props` 对象要好,因为更利于重构和语法检查。
```javascript
var FancyCheckbox = React.createClass({
render: function() {
var { checked, title, ...other } = this.props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
var fancyTitle = checked ? 'X ' + title : 'O ' + title;
return (
<label>
<input {...other}
checked={checked}
className={fancyClass}
type="checkbox"
/>
{fancyTitle}
</label>
);
}
});
function FancyCheckbox(props) {
var { checked, title, ...other } = props;
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
var fancyTitle = checked ? 'X ' + title : 'O ' + title;
return (
<label>
<input {...other}
checked={checked}
className={fancyClass}
type="checkbox"
/>
{fancyTitle}
</label>
);
}
```
> 注意:
>
>
> 顺序很重要,把 `{...other}` 放到 JSX props 前面会使它不被覆盖。上面例子中我们可以保证 input 的 type 是 `"checkbox"`。
## 剩余属性和展开属性 `...`
剩余属性可以把对象剩下的属性提取到一个新的对象。会把所有在解构赋值中列出的属性剔除。
这是 [ES7 草案](https://github.com/sebmarkbage/ecmascript-rest-spread) 中的试验特性。
这是 [ECMAScript 草案](https://github.com/sebmarkbage/ecmascript-rest-spread) 中的试验特性。
```javascript
var { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
@@ -145,22 +135,19 @@ z; // { a: 3, b: 4 }
> 注意:
>
> 使[JSX 命令行工具](https://www.npmjs.com/package/react-tools) 配合 `--harmony` 标记来启用 ES7 语法。
> Babel 6转换 rest 和 spread 属性,你需要安装 [`es2015`](https://babeljs.io/docs/plugins/preset-es2015/) preset[`transform-object-rest-spread`](https://babeljs.io/docs/plugins/transform-object-rest-spread/) 插件并在 `.babelrc` 里配置他们.
## 使用 Underscore 来传递
如果不使用 JSX可以使用一些库来实现相同效果。Underscore 提供 `_.omit` 来过滤属性,`_.extend` 复制属性到新的对象。
```javascript
var FancyCheckbox = React.createClass({
render: function() {
var checked = this.props.checked;
var other = _.omit(this.props, 'checked');
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
return (
React.DOM.div(_.extend({}, other, { className: fancyClass }))
);
}
});
function FancyCheckbox(props) {
var checked = props.checked;
var other = _.omit(props, 'checked');
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked';
return (
React.DOM.div(_.extend({}, other, { className: fancyClass }))
);
}
```

View File

@@ -68,6 +68,9 @@ HTML에서는 `<textarea>` 태그의 값을 설정할 때 `<textarea>` 태그의
이것은 사용자 입력을 받아들이지만, 시작에서부터 140자로 값을 자릅니다.
### 체크박스와 라디오 버튼의 잠제적인 문제
변경 핸들링을 일반화하기 위해 React는 `change` 이벤트 대신에 `click` 이벤트를 사용하는 것에 주의하세요. `change` 핸들러 안에서 `preventDefault`를 호출하는 경우를 재외하고 이 동작은 예상대로 동작합니다. 이런 경우 `preventDefault`를 제거하거나, `setTimeout``checked`의 전환을 넣어서 해결 가능합니다.
## 제어되지 않는(Uncontrolled) 컴포넌트
@@ -91,7 +94,7 @@ HTML에서는 `<textarea>` 태그의 값을 설정할 때 `<textarea>` 태그의
}
```
이 예제는 위에있는 **제어되는 컴포넌트**에 더 가깝게 동작할 것입니다.
이 예제는 위에있는 **제어되지 않는 컴포넌트**에 더 가깝게 동작할 것입니다.
마찬가지로, `<input>``defaultChecked`를 지원하고 `<select>``defaultValue`를 지원합니다.
@@ -99,10 +102,8 @@ HTML에서는 `<textarea>` 태그의 값을 설정할 때 `<textarea>` 태그의
>
> `defaultValue`, `defaultChecked` prop은 최초 렌더에서만 사용됩니다. 뒤에 일어나는 렌더에서 값을 업데이트할 필요가 있다면, [제어되는(controlled) 컴포넌트](#controlled-components)를 사용하셔야 합니다.
## 심화 주제
### 왜 제어되는 컴포넌트인가요?
React에서 `<input>`같은 폼 컴포넌트를 사용하면, 전통적인 폼 HTML을 쓸 때에는 없던 어려운 문제가 있습니다. 예를 들어 HTML에서
@@ -123,7 +124,6 @@ HTML과 다르게, React 컴포넌트는 초기화 시점 뿐만 아니라, 어
이 메소드가 어떤 시점에도 뷰를 기술하기 때문에, 텍스트 input의 값은 *언제나* `Untitled`입니다.
### 왜 Textarea에 value를 사용하나요?
HTML에서, `<textarea>`의 값은 보통 그것의 자식들로 설정됩니다.
@@ -141,7 +141,6 @@ HTML에서는 이렇게 하면 여러 줄의 값을 쉽게 개발자가 넣을
자식들을 사용하기로 *했다면*, 자식들은 `defaultValue`처럼 동작할 것입니다.
### 왜 Select에 value를 사용하나요?
HTML `<select>`에서 선택된 `<option>`은 보통 option의 `selected` 어트리뷰트로 기술됩니다. React에서는 컴포넌트를 관리하기 쉽게 하기 위해, 다음 형식이 대신 채용됐습니다.

View File

@@ -32,10 +32,9 @@ Like all DOM events, the `onChange` prop is supported on all native components a
>
> For `<input>` and `<textarea>`, `onChange` supersedes — and should generally be used instead of — the DOM's built-in [`oninput`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput) event handler.
## Controlled Components
An `<input>` with `value` set is a *controlled* component. In a controlled `<input>`, the value of the rendered element will always reflect the `value` prop. For example:
A **controlled** `<input>` has a `value` prop. Rendering a controlled `<input>` will reflect the value of the `value` prop.
```javascript
render: function() {
@@ -43,7 +42,7 @@ An `<input>` with `value` set is a *controlled* component. In a controlled `<inp
}
```
This will render an input that always has a value of `Hello!`. Any user input will have no effect on the rendered element because React has declared the value to be `Hello!`. If you wanted to update the value in response to user input, you could use the `onChange` event:
User input will have no effect on the rendered element because React has declared the value to be `Hello!`. To update the value in response to user input, you could use the `onChange` event:
```javascript
getInitialState: function() {
@@ -53,12 +52,17 @@ This will render an input that always has a value of `Hello!`. Any user input wi
this.setState({value: event.target.value});
},
render: function() {
var value = this.state.value;
return <input type="text" value={value} onChange={this.handleChange} />;
return (
<input
type="text"
value={this.state.value}
onChange={this.handleChange}
/>
);
}
```
In this example, we are simply accepting the newest value provided by the user and updating the `value` prop of the `<input>` component. This pattern makes it easy to implement interfaces that respond to or validate user interactions. For example:
In this example, we are accepting the value provided by the user and updating the `value` prop of the `<input>` component. This pattern makes it easy to implement interfaces that respond to or validate user interactions. For example:
```javascript
handleChange: function(event) {
@@ -66,16 +70,17 @@ In this example, we are simply accepting the newest value provided by the user a
}
```
This would accept user input but truncate the value to the first 140 characters.
This would accept user input and truncate the value to the first 140 characters.
A **Controlled** component does not maintain its own internal state; the component renders purely based on props.
### Potential Issues With Checkboxes and Radio Buttons
Be aware that, in an attempt to normalise change handling for checkbox and radio inputs, React uses a `click` event in place of a `change` event. For the most part this behaves as expected, except when calling `preventDefault` in a `change` handler. `preventDefault` stops the browser from visually updating the input, even if `checked` gets toggled. This can be worked around either by removing the call to `preventDefault`, or putting the toggle of `checked` in a `setTimeout`.
Be aware that, in an attempt to normalize change handling for checkbox and radio inputs, React uses a `click` event in place of a `change` event. For the most part this behaves as expected, except when calling `preventDefault` in a `change` handler. `preventDefault` stops the browser from visually updating the input, even if `checked` gets toggled. This can be worked around either by removing the call to `preventDefault`, or putting the toggle of `checked` in a `setTimeout`.
## Uncontrolled Components
An `<input>` that does not supply a `value` (or sets it to `null`) is an *uncontrolled* component. In an uncontrolled `<input>`, the value of the rendered element will reflect the user's input. For example:
An `<input>` without a `value` property is an *uncontrolled* component:
```javascript
render: function() {
@@ -85,6 +90,8 @@ An `<input>` that does not supply a `value` (or sets it to `null`) is an *uncont
This will render an input that starts off with an empty value. Any user input will be immediately reflected by the rendered element. If you wanted to listen to updates to the value, you could use the `onChange` event just like you can with controlled components.
An **uncontrolled** component maintains its own internal state.
### Default Value
If you want to initialize the component with a non-empty value, you can supply a `defaultValue` prop. For example:
@@ -97,16 +104,14 @@ If you want to initialize the component with a non-empty value, you can supply a
This example will function much like the **Controlled Components** example above.
Likewise, `<input>` supports `defaultChecked` and `<select>` supports `defaultValue`.
Likewise, `<input type="checkbox">` and `<input type="radio">` support `defaultChecked`, and `<select>` supports `defaultValue`.
> Note:
>
> The `defaultValue` and `defaultChecked` props are only used during initial render. If you need to update the value in a subsequent render, you will need to use a [controlled component](#controlled-components).
## Advanced Topics
### Why Controlled Components?
Using form components such as `<input>` in React presents a challenge that is absent when writing traditional form HTML. For example, in HTML:
@@ -127,7 +132,6 @@ Unlike HTML, React components must represent the state of the view at any point
Since this method describes the view at any point in time, the value of the text input should *always* be `Untitled`.
### Why Textarea Value?
In HTML, the value of `<textarea>` is usually set using its children:
@@ -145,7 +149,6 @@ For HTML, this easily allows developers to supply multiline values. However, sin
If you *do* decide to use children, they will behave like `defaultValue`.
### Why Select Value?
The selected `<option>` in an HTML `<select>` is normally specified through that option's `selected` attribute. In React, in order to make components easier to manipulate, the following format is adopted instead:

View File

@@ -7,43 +7,42 @@ next: working-with-the-browser-zh-CN.html
---
诸如 `<input>``<textarea>``<option>` 这样的表单组件不同于其他组件,因为他们可以通过用户交互发生变化。这些组件提供的界面使响应用户交互的表单数据处理更加容易。
关于 `<form>` 事件详情请查看 [表单事件](/react/docs/events-zh-CN.html#form-events)。
## 交互属性
## 交互属性
表单组件支持几个受用户交互影响的属性:
* `value`,用于 `<input>``<textarea>` 组件。
* `checked`,用于类型为 `checkbox` 或者 `radio``<input>` 组件。
* `selected`,用于 `<option>` 组件。
在 HTML 中,`<textarea>` 的值通过子节点设置;在 React 中则应该使用 `value` 代替。
在 HTML 中,`<textarea>` 的值通过子节点设置;在 React 中则应该使用 `value` 代替。
表单组件可以通过 `onChange` 回调函数来监听组件变化。当用户做出以下交互时,`onChange` 执行并通过浏览器做出响应:
* `<input>``<textarea>``value` 发生变化时。
* `<input>``checked` 状态改变时。
* `<option>``selected` 状态改变时。
和所有 DOM 事件一样,所有的 HTML 原生组件都支持 `onChange` 属性,而且可以用来监听冒泡的 `change` 事件。
和所有 DOM 事件一样,所有的 HTML 原生组件都支持 `onChange` 属性,而且可以用来监听冒泡的 `change` 事件。
> 注意:
>
> 对于 `<input>` and `<textarea>` `onChange` 代 — 一般应该用来替代 — the DOM's 内建的 [`oninput`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput) 事件处理。
> 对于 `<input>` and `<textarea>` `onChange` 代 — 一般应该用来替代 — DOM内建的 [`oninput`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput) 事件处理。
## 受限组件
## 受控组件
设置了 `value` `<input>` 一个*受限*组件。 对于受限的 `<input>`,渲染出来的 HTML 元素始终保持 `value` 属性的值。例如:
一个*受控*`<input>` 一个 `value` prop。渲染一个受控 `<input>` 会反映 `value` prop 的值。
```javascript
render: function() {
return <input type="text" value="Hello!" />;
}
```
上面的代码将渲染出一个值为 `Hello!` 的 input 元素。用户在渲染出来的元素里输入任何值都不起作用因为 React 已经值为 `Hello!`如果想响应更新用户输入的值,就得使用 `onChange` 事件:
用户输入在被渲染的元素里将没有作用,因为 React 已经声明值为 `Hello!`要更新 value 来响应用户输入,你可以使用 `onChange` 事件:
```javascript
getInitialState: function() {
@@ -53,12 +52,17 @@ next: working-with-the-browser-zh-CN.html
this.setState({value: event.target.value});
},
render: function() {
var value = this.state.value;
return <input type="text" value={value} onChange={this.handleChange} />;
return (
<input
type="text"
value={this.state.value}
onChange={this.handleChange}
/>
);
}
```
上面的代码中React 将用户输入的值更新 `<input>` 组件的 `value` 属性。这样实现响应或者验证用户输入的界面就很容易。例如:
在这个例子中,我们接受用户提供的值更新 `<input>` 组件的 `value` prop。这个模式使实现响应或者验证用户输入的界面容易。例如:
```javascript
handleChange: function(event) {
@@ -68,14 +72,15 @@ next: working-with-the-browser-zh-CN.html
上面的代码接受用户输入,并截取前 140 个字符。
受控组件不维持一个自己的内部状态;它单纯的基于 props 渲染。
### 复选框与单选按钮的潜在问题
当心在力图标准化复选框与单选按钮的变换处理中React使用`click` 事件代替 `change` 事件。在大多数情况下它们表现的如同预期,除了在`change` handler中调用`preventDefault``preventDefault` 阻止了浏览器视觉上更新输入,即使`checked`被触发。变通的方式是要么移除`preventDefault`的调用,要么把`checked` 的触发放在一个`setTimeout`里。
## 不受限组件
## 不受控组件
没有设置 `value`(或者设为 `null`) `<input>` 组件是一个*不受限*组件。对于不受限的 `<input>` 组件,渲染出来的元素直接反应用户输入。例如:
一个没有 `value` 属性`<input>` 是一个不*受控*组件:
```javascript
render: function() {
@@ -83,7 +88,9 @@ next: working-with-the-browser-zh-CN.html
}
```
上面的代码将渲染出一个空值的输入框,用户输入将立即反应到元素上。和受元素一样,使用 `onChange` 事件可以监听值的变化。
上面的代码将渲染出一个空值的输入框,用户输入将立即反应到元素上。和受元素一样,使用 `onChange` 事件可以监听值的变化。
*不受控*组件维持它自己的内部状态。
### 默认值
@@ -95,29 +102,27 @@ next: working-with-the-browser-zh-CN.html
}
```
这个例子会像上面的**Controlled Components** 例子一样运行。
这个例子会像上面的 **不受控组件** 例子一样运行。
同样的, `<input>` 支持 `defaultChecked``<select>` 支持 `defaultValue`.
同样的, `<input type="checkbox">``<input type="radio">` 支持 `defaultChecked``<select>` 支持 `defaultValue`.
> 注意:
>
> `defaultValue` 和 `defaultChecked` props 只能在内部渲染时被使用。 如果你需要在随后的渲染更新值, 你需要使用 [受组件](#受组件).
> `defaultValue` 和 `defaultChecked` props 只能在内部渲染时被使用。 如果你需要在随后的渲染更新值, 你需要使用 [受组件](#受组件).
## 高级主题
### 为什么使用受限组件?
### 为什么使用受控组件?
在 React 中使用诸如 `<input>` 的表单组件时,遇到了一个在传统 HTML 中没有的挑战。比如下面的代码:
在 React 中使用诸如 `<input>` 的表单组件时,遇到了一个在传统 HTML 中没有的挑战。比如下面的代码:
```html
<input type="text" name="title" value="Untitled" />
```
在 HTML 中将渲染 *初始值* `Untitled` 的输入框。用户改变输入框的值时,节点的 `value` 属性( *property*)将随之变化,但是 `node.getAttribute('value')` 还是会返回初始设置的值 `Untitled`.
它渲染一个*初始值*`Untitled` 的输入框。用户改变输入框的值时,节点的 `value` 属性( *property*)将随之变化,但是 `node.getAttribute('value')` 还是会返回初始设置的值 `Untitled`.
与 HTML 不同React 组件必须在任何时间点描绘视图的状态,而不仅仅是在初始化时。比如在 React 中:
与 HTML 不同React 组件必须在任何时间点表现视图的状态,而不仅仅是在初始化时。比如在 React 中:
```javascript
render: function() {
@@ -125,8 +130,7 @@ next: working-with-the-browser-zh-CN.html
}
```
该方法在任时间点渲染组件以后,输入框的值就应该 *始终* `Untitled`
既然这个方法描述了在任时间点上的视图,那么文本输入框的值就应该*始终*`Untitled`
### 为什么 `<textarea>` 使用 `value` 属性?
@@ -136,8 +140,8 @@ next: working-with-the-browser-zh-CN.html
<!-- 反例:在 React 中不要这样使用! -->
<textarea name="description">This is the description.</textarea>
```
对 HTML 而言让开发者设置多行的值很容易。但是React 是 JavaScript没有字符限制可以使用 `\n` 实现换行。简言之React 已经有 `value``defaultValue` 属性,`</textarea>` 组件的子节点扮演什么角色就有点模棱两可了。基于此, 设置 `<textarea>` 值时不应该使用子节点:
对 HTML 而言让开发者设置多行的值很容易。但是React 是 JavaScript没有字符限制,可以使用 `\n` 实现换行。简言之React 已经有 `value``defaultValue` 属性,`</textarea>` 组件的子节点扮演什么角色就有点模棱两可了。基于此, 设置 `<textarea>` 值时不应该使用子节点:
```javascript
<textarea name="description" value="This is a description." />
@@ -145,8 +149,7 @@ next: working-with-the-browser-zh-CN.html
如果 *非要* 使用子节点,效果和使用 `defaultValue` 一样。
### 为什么 `<select>` 使用 `value` 属性
### 为什么 `<select>` 使用 `value` 属性
HTML 中 `<select>` 通常使用 `<option>``selected` 属性设置选中状态React 为了更方面的控制组件,采用以下方式代替:
@@ -158,7 +161,7 @@ HTML 中 `<select>` 通常使用 `<option>` 的 `selected` 属性设置选中状
</select>
```
如果是不受组件,则使用 `defaultValue`
如果是不受组件,则使用 `defaultValue`
> 注意:
>

View File

@@ -32,7 +32,7 @@ var MyComponent = React.createClass({
ReactDOM.findDOMNode(this.refs.myTextInput).focus();
},
render: function() {
// この参照属性はコンポーネントがマウントされた時に、
// この参照属性はコンポーネントがマウントされた時に、
// this.refs のコンポーネントへの参照を追加します。
return (
<div>

View File

@@ -11,7 +11,7 @@ React는 대부분의 경우 직접 DOM을 다루지 않아도 될만큼 강력
## 가상의 DOM
React는 DOM을 직접 다루지 않기 때문에 굉장히 빠릅니다. React는 메모리에(in-memory) DOM의 표상(representation)을 관리합니다. `render()` 메소드는 DOM의 *서술*를 반환하고, React는 이를 메모리에 있는 DOM의 표상과 비교(diff)해 가장 빠른 방식으로 계산해서 브라우저를 업데이트해 줍니다.
React는 DOM을 직접 다루지 않기 때문에 매우 빠릅니다. React는 메모리에(in-memory) DOM의 표상(representation)을 관리합니다. `render()` 메소드는 사실은 DOM의 *서술*를 반환하고, React는 이를 메모리에 있는 DOM의 표상과 비교해 가장 빠른 방식으로 계산해서 브라우저를 업데이트해 줍니다.
게다가 React는 브라우저의 괴악함(quirks)에도 불구하고 모든 이벤트 객체가 W3C 명세를 보장하도록 통합적인 이벤트 시스템을 구현했습니다. 모든 것이 일관된 방식으로 일어나고(bubbles) 효율적으로 크로스 브라우징을 수행합니다. 심지어 IE8에서도 HTML5 이벤트를 사용할 수 있습니다!
@@ -20,45 +20,7 @@ React는 DOM을 직접 다루지 않기 때문에 굉장히 빠릅니다. React
## Refs와 findDOMNode()
브라우저와 상호 작용하려면 DOM 노드에 대한 참조가 필요합니다. React는 `ReactDOM.findDOMNode(component)` 함수를 갖고 있으며, 이를 통해서 컴포넌트의 DOM 노드의 참조를 얻을 수 있습니다.
> 주의:
>
> `findDOMNode()`는 마운트 된 컴포넌트에서만 동작합니다 (DOM에 배치된 컴포넌트를 말합니다). 아직 마운트 되지 않은 컴포넌트에서 이를 호출하려고 하면 (컴포넌트가 아직 생성되기 이전인 `render()` 시점에 `findDOMNode()`를 호출한다든가) 예외가 발생합니다.
React 컴포넌트에 대한 참조는 현재의 React 컴포넌트를 위해 `this`를, 소유한 컴포넌트의 참조를 얻기 위해 refs를 사용해 얻을 수 있습니다. 다음과 같이 동작합니다:
```javascript
var MyComponent = React.createClass({
handleClick: function() {
// raw DOM API를 사용해 명시적으로 텍스트 인풋을 포커스 합니다.
ReactDOM.findDOMNode(this.refs.myTextInput).focus();
},
render: function() {
// ref 어트리뷰트는 컴포넌트가 마운트되면 그에 대한 참조를 this.refs에 추가합니다.
return (
<div>
<input type="text" ref="myTextInput" />
<input
type="button"
value="Focus the text input"
onClick={this.handleClick}
/>
</div>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
```
## Refs 심화
[refs 심화](/react/docs/more-about-refs-ko-KR.html) 문서에서 refs를 효율적으로 사용하는 법을 포함해 더 많은 내용을 익혀보세요.
브라우저와 상호 작용하려면 DOM 노드에 대한 참조가 필요합니다. `ref`를 어떤 엘리먼트에도 붙일 수 있으며, 이를 통해 컴포넌트 **지원 인스턴스**를 참조 할 수 있습니다. 이는 컴포넌트에 필수 적인 기능을 호출할 때나 기저의 DOM 노드에 접근하고 싶을 때 유용합니다. [refs에서 컴포넌트로](/react/docs/more-about-refs-ko-KR.html) 문서에서 refs를 효율적으로 사용하는 법을 포함해 더 많은 내용을 익혀보세요.
<a name="component-lifecycle"></a>
@@ -72,14 +34,12 @@ ReactDOM.render(
React는 이 프로세스에 훅을 지정할 수 있는 생명주기 메소드를 제공합니다. 발생 직전 시점을 위한 **will** 메소드, 발생 직후 시점을 위한 **did** 메소드가 있습니다.
### Mounting
* `getInitialState(): object`는 컴포넌트가 마운트되기 전에 호출됩니다. 상태기반 컴포넌트는 이를 구현하고 초기 상태 데이터를 리턴합니다.
* `componentWillMount()`는 마운팅되기 직전에 호출됩니다.
* `componentDidMount()`는 마운팅 직후 호출됩니다. 초기화에 필요한 DOM 노드는 이곳에 있어야 합니다.
### Updating
* `componentWillReceiveProps(object nextProps)`는 마운트된 컴포넌트가 새로운 props을 받을 때 호출됩니다. 이 메소드는 `this.props``nextProps`을 비교하여 `this.setState()`를 사용해 상태 변환을 수행하는데 사용되야 합니다.
@@ -87,19 +47,15 @@ React는 이 프로세스에 훅을 지정할 수 있는 생명주기 메소드
* `componentWillUpdate(object nextProps, object nextState)`는 업데이트가 발생하기 직전에 호출됩니다. 이 시점에는 `this.setState()`를 호출할 수 없습니다.
* `componentDidUpdate(object prevProps, object prevState)`는 업데이트가 발생한 후 즉시 호출됩니다.
### Unmounting
* `componentWillUnmount()`는 컴포넌트가 언마운트되어 파괴되기 직전에 호출됩니다. 정리(Cleanup)는 여기서 처리해야 합니다.
### Mounted 메소드
_마운트된_ 합성 컴포넌트들은 다음과 같은 메소드를 지원합니다:
* `findDOMNode(): DOMElement`는 렌더링 된 DOM 노드에 대한 참조를 얻기 위해 모든 마운트된 컴포넌트에서 호출할 수 있습니다.
* `forceUpdate()``this.setState`를 사용하지 않고 컴포넌트 state의 더 깊은 측면(deeper aspect)의 변경된 것을 알고 있을 때 모든 마운트된 컴포넌트에서 호출할 수 있습니다.
* `component.forceUpdate()``this.setState()`를 사용하지 않고 변경된 컴포넌트의 상태의 변경을 적용하고 싶을 때 마운트된 컴포넌트에서 사용할 수 있습니다.
## 브라우저 지원과 Polyfill
@@ -107,7 +63,6 @@ _마운트된_ 합성 컴포넌트들은 다음과 같은 메소드를 지원합
그 철학에 더하여, 우리는 또한 JS 라이브러리의 저자로서 polyfill을 라이브러리에 포함해서 배포하지 않습니다. 만약 모든 라이브러리가 이런 짓을 하면, 같은 polyfill을 여러 번 내리게 되어 쓸모없이 크기만 차지하는 죽은 코드들을 만들 것 입니다. 당신의 제품이 구식 브라우저를 지원해야한다면, [es5-shim](https://github.com/es-shims/es5-shim) 같은 녀석을 사용할 기회가 있었을 겁니다.
### Polyfill은 구식 브라우저를 지원하기 위해 필요하다
[kriskowal's es5-shim](https://github.com/es-shims/es5-shim)의 `es5-shim.js`는 React에 필요한 다음의 기능을 제공합니다:
@@ -134,11 +89,9 @@ _마운트된_ 합성 컴포넌트들은 다음과 같은 메소드를 지원합
`<section>`, `<article>`, `<nav>`, `<header>`, `<footer>`등 HTML5 엘리먼트를 IE8에서 이용하려면 [html5shiv](https://github.com/aFarkas/html5shiv)같은 스크립트가 추가로 필요합니다.
### 크로스 브라우징 이슈
React가 브라우저별 차이점을 썩 잘 추상화하긴 했지만 일부는 한정적이거나 우리가 발견하지 못한 이상한(quirky) 동작을 보여주기도 합니다.
React가 브라우저별 차이점을 썩 잘 추상화하긴 했지만 일부는 한정적이거나 우리가 발견하지 못한 이상한(quirky) 동작을 보여주기도 합니다.
#### IE8에서의 onScroll 이벤트

View File

@@ -8,21 +8,18 @@ next: more-about-refs.html
React provides powerful abstractions that free you from touching the DOM directly in most cases, but sometimes you simply need to access the underlying API, perhaps to work with a third-party library or existing code.
## The Virtual DOM
React is so fast because it never talks to the DOM directly. React maintains a fast in-memory representation of the DOM. `render()` methods return a *description* of the DOM, and React can diff this description with the in-memory representation to compute the fastest way to update the browser.
React is very fast because it never talks to the DOM directly. React maintains a fast in-memory representation of the DOM. `render()` methods actually return a *description* of the DOM, and React can compare this description with the in-memory representation to compute the fastest way to update the browser.
Additionally, React implements a full synthetic event system such that all event objects are guaranteed to conform to the W3C spec despite browser quirks, and everything bubbles consistently and efficiently across browsers. You can even use some HTML5 events in IE8!
Additionally, React implements a full synthetic event system such that all event objects are guaranteed to conform to the W3C spec despite browser quirks, and everything bubbles consistently and efficiently across browsers. You can even use some HTML5 events in older browsers that don't ordinarily support them!
Most of the time you should stay within React's "faked browser" world since it's more performant and easier to reason about. However, sometimes you simply need to access the underlying API, perhaps to work with a third-party library like a jQuery plugin. React provides escape hatches for you to use the underlying DOM API directly.
## Refs and findDOMNode()
To interact with the browser, you'll need a reference to a DOM node. You can attach a `ref` to any element, which allows you to reference the **backing instance** of the component. This is useful if you need to invoke imperative functions on the component, or want to access the underlying DOM nodes. To learn more about refs, including ways to use them effectively, see our [refs to components](/react/docs/more-about-refs.html) documentation.
## Component Lifecycle
Components have three main parts of their lifecycle:
@@ -33,14 +30,12 @@ Components have three main parts of their lifecycle:
React provides lifecycle methods that you can specify to hook into this process. We provide **will** methods, which are called right before something happens, and **did** methods which are called right after something happens.
### Mounting
* `getInitialState(): object` is invoked before a component is mounted. Stateful components should implement this and return the initial state data.
* `componentWillMount()` is invoked immediately before mounting occurs.
* `componentDidMount()` is invoked immediately after mounting occurs. Initialization that requires DOM nodes should go here.
### Updating
* `componentWillReceiveProps(object nextProps)` is invoked when a mounted component receives new props. This method should be used to compare `this.props` and `nextProps` to perform state transitions using `this.setState()`.
@@ -48,61 +43,18 @@ React provides lifecycle methods that you can specify to hook into this process.
* `componentWillUpdate(object nextProps, object nextState)` is invoked immediately before updating occurs. You cannot call `this.setState()` here.
* `componentDidUpdate(object prevProps, object prevState)` is invoked immediately after updating occurs.
### Unmounting
* `componentWillUnmount()` is invoked immediately before a component is unmounted and destroyed. Cleanup should go here.
### Mounted Methods
_Mounted_ composite components also support the following method:
* `component.forceUpdate()` can be invoked on any mounted component when you know that some deeper aspect of the component's state has changed without using `this.setState()`.
## Browser Support
## Browser Support and Polyfills
React supports most popular browsers, including Internet Explorer 9 and above.
At Facebook, we support older browsers, including IE8. We've had polyfills in place for a long time to allow us to write forward-thinking JS. This means we don't have a bunch of hacks scattered throughout our codebase and we can still expect our code to "just work". For example, instead of seeing `+new Date()`, we can just write `Date.now()`. Since the open source React is the same as what we use internally, we've carried over this philosophy of using forward thinking JS.
In addition to that philosophy, we've also taken the stance that we, as authors of a JS library, should not be shipping polyfills as a part of our library. If every library did this, there's a good chance you'd be sending down the same polyfill multiple times, which could be a sizable chunk of dead code. If your product needs to support older browsers, chances are you're already using something like [es5-shim](https://github.com/es-shims/es5-shim).
### Polyfills Needed to Support Older Browsers
`es5-shim.js` from [kriskowal's es5-shim](https://github.com/es-shims/es5-shim) provides the following that React needs:
* `Array.isArray`
* `Array.prototype.every`
* `Array.prototype.forEach`
* `Array.prototype.indexOf`
* `Array.prototype.map`
* `Date.now`
* `Function.prototype.bind`
* `Object.keys`
* `String.prototype.split`
* `String.prototype.trim`
`es5-sham.js`, also from [kriskowal's es5-shim](https://github.com/es-shims/es5-shim), provides the following that React needs:
* `Object.create`
* `Object.freeze`
The unminified build of React needs the following from [paulmillr's console-polyfill](https://github.com/paulmillr/console-polyfill).
* `console.*`
When using HTML5 elements in IE8 including `<section>`, `<article>`, `<nav>`, `<header>`, and `<footer>`, it's also necessary to include [html5shiv](https://github.com/aFarkas/html5shiv) or a similar script.
### Cross-browser Issues
Although React is pretty good at abstracting browser differences, some browsers are limited or present quirky behaviors that we couldn't find a workaround for.
#### onScroll event on IE8
On IE8 the `onScroll` event doesn't bubble and IE8 doesn't have an API to define handlers to the capturing phase of an event, meaning there is no way for React to listen to these events.
Currently a handler to this event is ignored on IE8.
See the [onScroll doesn't work in IE8](https://github.com/facebook/react/issues/631) GitHub issue for more information.
(We don't support older browsers that don't support ES5 methods, but you may find that your apps do work in older browsers if polyfills such as [es5-shim and es5-sham](https://github.com/es-shims/es5-shim) are included in the page. You're on your own if you choose to take this path.)

View File

@@ -8,59 +8,17 @@ next: more-about-refs-zh-CN.html
React提供了强大的抽象机制使你在大多数情况下免于直接接触DOM但有时你仅仅只需要访问底层API也许是为了与第三方库或者已有的代码协作。
## 虚拟DOM
## 虚拟DOM
React如此快速是因为它从不直接操作DOM。React维持了一个快速的内存中的DOM表示。`render()` 方法返回一个DOM的*描述*然后React能根据内存中的描述diff此描述来计算出最快速的方法更新浏览器。
React非常快速是因为它从不直接操作DOM。React维持了一个快速的内存中的DOM表示。`render()` 方法实际上返回一个对DOM的*描述*然后React能根据内存中的“描述”来比较此“描述”以计算出最快速的方法更新浏览器。
此外React实现了一个完备的合成事件(synthetic event)系统以使得所有的事件对象都被保证符合W3C细则而不论各个浏览器的怪癖并且所有事件跨浏览器地一致并高效的冒泡bubbles你甚至能在IE8里使用一些HTML5事件
大多数时间你应该和React的"伪造浏览器"呆在一起因为它更高性能并且容易推理。然而有时你只需要访问底层API或许是为了与第三方库比如一个jQuery插件协作。React为你提供了安全仓口来直接使用底层API。
## Refs 和 findDOMNode()
为了与浏览器互动你需要一个指向DOM node的引用。React有一个函数`ReactDOM.findDOMNode(component)` 你能调用以得到一个指向指向组件的DOM node的引用
> 注意:
>
> `findDOMNode()` 只作用于已挂载的组件已经放置于DOM中的组件。如果你尝试在还没有被挂载的组件上调用此函数比如在`render()` 里有待被创建的组件上调用`findDOMNode()`将会抛出一个异常)
为了获得一个指向React组件的引用你可以要么使用`this` 来得到当前React组件要么使用refs来引用你拥有的组件。它们像这样工作
```javascript
var MyComponent = React.createClass({
handleClick: function() {
// 明确的强制text input使用原生DOM API。
ReactDOM.findDOMNode(this.refs.myTextInput).focus();
},
render: function() {
// 当组件被挂载时
// ref属性给this.refs添加了一个指向指向组件的引用
return (
<div>
<input type="text" ref="myTextInput" />
<input
type="button"
value="Focus the text input"
onClick={this.handleClick}
/>
</div>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
```
## 更多关于Refs
要学习更多有关refs包括更有效使用它们的方法请参见[more about refs](/react/docs/more-about-refs.html) 文档。
为了与浏览器互动你需要一个指向DOM node的引用。你可以连接一个 `ref` 到任何的元素,这允许你引用 组件的 **backing instance** 。它很有用如果你需要在组件上调用命令式函数或者想访问底层的DOM节点。要了解很多关于 refs包括更有效使用他们的方法请查看我们的 [关于Refs的更多内容](/react/docs/more-about-refs-zh-CN.html) 文档
## 组件的生命周期
@@ -72,34 +30,28 @@ ReactDOM.render(
React提供生命周期方法以便你可以指定钩挂到这个过程上。我们提供了 **will** 方法,该方法在某事发生前被调用,**did**方法,在某事发生后被调用。
### 挂载
* `getInitialState(): object` 在组件挂载前被调用. 有状态组件(Stateful components) 应该实现此函数并返回初始state的数据。
* `componentWillMount()` 在挂载发生前被立即调用。
* `componentDidMount()` 在挂载发生后被立即调用。 需要DOM node的初始化应该放在这里。
* `componentWillMount()` 在挂载发生前被立即调用。
* `componentDidMount()` 在挂载发生后被立即调用。 需要DOM node的初始化应该放在这里。
### 更新
* `componentWillReceiveProps(object nextProps)` 当挂载的组件接收到新的props时被调用。此方法应该被用于比较`this.props``nextProps`以用于使用`this.setState()`执行状态转换。
* `shouldComponentUpdate(object nextProps, object nextState): boolean` 当组件决定任何改变是否要更新到DOM时被调用。作为一个优化实现比较`this.props``nextProps``this.state``nextState` 如果React应该跳过更新返回`false`
* `shouldComponentUpdate(object nextProps, object nextState): boolean` 当组件决定任何改变是否要更新到DOM时被调用。作为一个优化实现比较`this.props``nextProps``this.state``nextState` 如果React应该跳过更新返回`false`
* `componentWillUpdate(object nextProps, object nextState)` 在更新发生前被立即调用。你不能在此调用`this.setState()`
* `componentDidUpdate(object prevProps, object prevState)` 在更新发生后被立即调用。
### 卸载
* `componentWillUnmount()` 在组件被卸载和摧毁后被立即调用。清理应该放在这里。
### Mounted Methods
### 已挂载的方法
_Mounted_ 复合组件同样支持以下方法:
* `findDOMNode(): DOMElement` 能够在任何已挂载的组件上调用以便于获取指向它渲染的DOM node的引用
* `forceUpdate()` 能在任何已挂载的组件上调用,当你知道一些更深层次的组件状态变化了但没有使用 `this.setState()`
* `component.forceUpdate()` 可以在任何已挂载的组件上调用,在你知道 某些深处的组件状态被未使用 `this.setState()` 改变了时
## 浏览器支持和填充物(polyfills)
@@ -107,8 +59,7 @@ _Mounted_ 复合组件同样支持以下方法:
除了这种哲学外我们也采用了这样的立场我们作为一个JS库的作者不应该把polyfills作为我们库的一部分。如果所有的库这样做就有很大的机会发送同样的polyfill多次这可能是一个相当大的无用代码。如果你的产品需要支援老的浏览器你很有可能已经在使用某些东西比如[es5-shim](https://github.com/es-shims/es5-shim)。
### 需要用来支持旧浏览器的Polyfills
### 需要用来支持旧浏览器的Polyfills
来自 [kriskowal's es5-shim](https://github.com/es-shims/es5-shim)的`es5-shim.js` 提供了如下React需要的东西
@@ -134,12 +85,10 @@ _Mounted_ 复合组件同样支持以下方法:
当在IE8里使用HTML5元素包括`<section>`, `<article>`, `<nav>`, `<header>`, 和 `<footer>`, 同样必须包含[html5shiv](https://github.com/aFarkas/html5shiv) 或者类似的脚本。
### 跨浏览器问题
### 跨浏览器问题
尽管React在抽象浏览器不同时做的相当好但一些浏览器被限制或者表现出怪异的行为我们没能找到变通的方案解决。
#### IE8的onScroll事件
在IE8`onScroll` 事件不冒泡并且IE8没有定义事件捕获阶段handlers的API意味React这没有办法去监听这些事件。

Some files were not shown because too many files have changed in this diff Show More