Compare commits

..

283 Commits

Author SHA1 Message Date
Jim
76c87da026 Blog post for react render and top level API
(cherry picked from commit c0f951665d)
2015-10-02 12:01:52 -07:00
Trinh Hoang Nhu
fcc51bc523 Add missing comma (,) between propTypes and render
Add missing comma (,) between `propTypes` and `render`
(cherry picked from commit 3c56146a44)
2015-10-02 12:01:28 -07:00
Yuichi Hagio
8e495cd849 Update 02-displaying-data.ja-JP.md
1. Fixed a spelling mistake to be more readable.
2. Removed the English lines that were already translated below.
(cherry picked from commit d724393f0e)
2015-10-02 12:00:38 -07:00
Paul O’Shannessy
9c89a5b73d Install babel, shrinkwrap 2015-09-25 20:29:27 -07:00
Vipul A M
2f76d0016d Cherry-pick squashed version of #4131 - switch website to use babel 2015-09-25 20:29:26 -07:00
Paul O’Shannessy
d5680caefe Merge pull request #4846 from zpao/docs-use-babel
[docs] Remove references to react-tools, JSXTransformer, replace with Babel.
(cherry picked from commit d3d2504e72)
2015-09-25 20:24:55 -07:00
Paul O’Shannessy
64ff2ea3c6 Merge pull request #4978 from zpao/tutorial-server
[docs] Make the server required for the tutorial
(cherry picked from commit 6ff4ba9512)
2015-09-25 20:22:54 -07:00
Paul O’Shannessy
4597bf074b Merge pull request #4956 from reggi/patch-1
doc: typo existant to existent
(cherry picked from commit 1ce5ba4c56)
2015-09-25 20:22:46 -07:00
Paul O’Shannessy
fe9fa883bb Merge pull request #4853 from zpao/jsfiddle-babel
[docs] Add jsfiddle integration for Babel
(cherry picked from commit 78b50485f6)
2015-09-25 20:22:38 -07:00
Paul O’Shannessy
7077c5ed96 Merge pull request #4931 from bspaulding/safe-taint-docs
Extracted "safe taint" in docs/homepage to align with best practice
(cherry picked from commit 06568114f3)
2015-09-22 11:04:48 -07:00
Paul O’Shannessy
217c54d7a7 Merge pull request #4921 from benjaffe/master
[docs] Clarify when autobinding does(n't) happens
(cherry picked from commit 56ccd82374)
2015-09-22 11:04:43 -07:00
Paul O’Shannessy
a3adc3a2d6 Merge pull request #4899 from iamchenxin/master
Update zh-CN docs.
(cherry picked from commit aac4219e80)
2015-09-22 11:04:36 -07:00
Paul O’Shannessy
6a43405632 Merge pull request #4802 from 8398a7/patch-1
Update Japanese translation to 75fafe1

(cherry picked from commit c6ecda7503)
2015-09-22 11:03:31 -07:00
Paul O’Shannessy
fd290d7c6d Merge pull request #4874 from brigand/patch-6
Clarifies "Fetching from the server"
(cherry picked from commit 609f14eed4)
2015-09-14 20:44:03 -07:00
Paul O’Shannessy
2c42c7cfa2 Merge pull request #4868 from AnSavvides/docs-readability
Make docs more consistent
(cherry picked from commit e97da42b67)
2015-09-14 19:45:46 -07:00
Paul O’Shannessy
1da84956be Merge pull request #4869 from arush/patch-1
DOCS - typo in ref callback example
(cherry picked from commit b53dfa6d27)
2015-09-14 19:45:42 -07:00
Jim
b8d2947689 Merge pull request #4855 from iamchenxin/master
Maintain why-react-zh-CN sync to the current why-react
(cherry picked from commit 2fcf54939b)
2015-09-14 19:45:38 -07:00
Paul O’Shannessy
de0f651d15 Merge pull request #4833 from youngminz/master
Update Korean translation
(cherry picked from commit ed11f83763)
2015-09-14 19:45:15 -07:00
Steven Luscher
d62018227e Community Roundup #27 – Relay Edition
(cherry picked from commit f30b0d1f1c)
2015-09-14 08:36:48 -07:00
Ben Alpert
080c48c090 Add Babel version to blog post
(cherry picked from commit 4b3b56f36a)
2015-09-10 13:29:26 -07:00
Paul O’Shannessy
5b193e03eb Merge pull request #4824 from facebook/prefill-stack-overflow-tag
Pre-fill tag when asking a Stack Overflow question
(cherry picked from commit 12b6f3d03c)
2015-09-10 10:01:09 -07:00
Paul O’Shannessy
299b2fdd5c Merge pull request #4780 from matchu/patch-1
avoid the phrase "key property"
(cherry picked from commit ea8e06283c)
2015-09-10 10:01:06 -07:00
Paul O’Shannessy
ad3a024f9b Merge pull request #4739 from henrik/patch-1
docs: "also lets pass" -> "also lets you pass"
(cherry picked from commit dc23faf64d)
2015-09-10 10:00:57 -07:00
Paul O’Shannessy
80dd480a47 Merge pull request #4724 from AnSavvides/test-util-readability
Make definitions more readable & optional params more obvious
(cherry picked from commit 77703dbb80)
2015-09-10 10:00:52 -07:00
Ben Alpert
dcfbf801e4 Merge pull request #4703 from spicyj/rarr
Clarify use of arrow functions
(cherry picked from commit d4f38933f2)
2015-09-10 10:00:46 -07:00
Ben Alpert
32663aabc6 0.14 RC blog post
(cherry picked from commit 5bf56134be)
2015-09-10 09:51:13 -07:00
Ben Alpert
ad8e207c32 New devtools blog post
(cherry picked from commit f5bd8fc0ad)
2015-09-02 15:16:12 -07:00
Edvin Erikson
7f1c1022b5 Updated event pooling note in docs
(cherry picked from commit 6793a7197e)
2015-08-31 11:28:33 -07:00
Edvin Erikson
e5a89f5865 Added documentation about pooled events
(cherry picked from commit 1e3c3e1b6b)
2015-08-31 11:28:33 -07:00
Paul O’Shannessy
4fda63c77b Merge pull request #4684 from lyip1992/patch-3
Update 10.1-animation.md
(cherry picked from commit 27e5a563db)
2015-08-25 09:56:13 -07:00
Paul O’Shannessy
1ba4023de0 Merge pull request #4686 from lyip1992/patch-5
Update 06-transferring-props.md
(cherry picked from commit d5e5261e38)
2015-08-25 09:56:13 -07:00
Paul O’Shannessy
f4dfb0a184 Merge pull request #4687 from lyip1992/patch-6
Update 04-multiple-components.md
(cherry picked from commit 7dbcff2df4)
2015-08-25 09:56:13 -07:00
Paul O’Shannessy
dc8c5b1ecf Merge pull request #4688 from lyip1992/patch-7
Update 02.3-jsx-gotchas.md
(cherry picked from commit cca1065183)
2015-08-25 09:56:12 -07:00
Paul O’Shannessy
7263473999 Merge pull request #4685 from lyip1992/patch-4
Update 08.1-more-about-refs.md
(cherry picked from commit adfbc64d4b)
2015-08-25 09:56:12 -07:00
Paul O’Shannessy
bcbad461d1 Merge pull request #4678 from ning-github/patch-1
Remove redundancy regarding 'latest React news'
(cherry picked from commit 6508b1ad27)
2015-08-25 09:56:12 -07:00
Jim
b01f1c920c Merge pull request #4679 from ning-github/patch-2
Fix typo
(cherry picked from commit b36ee449cb)
2015-08-25 09:56:12 -07:00
Ben Alpert
c20b8fec2f Fix formatting in test utils docs
(cherry picked from commit 66881ae083)
2015-08-25 09:48:07 -07:00
Ben Alpert
356b8f3559 Capitalize Babel
(cherry picked from commit 61962c1751)
2015-08-20 13:34:23 -07:00
Kyle Kelley
7d914eab27 Update tooling docs to suggest babel
`react-tools` is deprecated, `babel` is our future

* https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html
* https://babeljs.io/docs/usage/jsx/

(cherry picked from commit 009902bcd0)
2015-08-20 13:16:32 -07:00
Ben Alpert
9cd6048720 Spruce up refs docs
Fixes #4651.

(cherry picked from commit 1db20999f0)
2015-08-19 16:35:58 -07:00
Tyler Brock
3154f055cf Clarify invocation order of componentDidMount
OP is delivering on promise made here: https://discuss.reactjs.org/t/how-do-you-invoke-the-render-callback-in-jsx/1744
(cherry picked from commit 1e10bb5923)
2015-08-19 16:35:57 -07:00
Levi Buzolic
b793785882 Update Advanced Performance code examples so they would output values
Noticed the code examples in *Advanced Performance* wouldn't be rendering the example props, this could lead to some minor confusion for new users.
(cherry picked from commit 009f766d6e)
2015-08-19 16:35:57 -07:00
Mikolaj Dadela
cfa922a3d7 Updated the Performance tools doc page.
Now it’s possible to read the page from top to the bottom without
asking oneself “Ok, but how do I get these measurements?”

(cherry picked from commit 75fafe1c0b)
2015-08-19 16:35:57 -07:00
Kohei TAKATA
a4e0bf2fc7 Translate ref-01-top-level-api.md to Japanese
(cherry picked from commit ae38ea9275)
2015-08-19 16:35:57 -07:00
MIKAMI Yoshiyuki
7a623e21fd Fix Markdown conversion with marked
(cherry picked from commit 47ce8ecacb)
2015-08-19 16:35:57 -07:00
Kohei TAKATA
6d8930650c Translate 01-introduction.md to Japanese
(cherry picked from commit edca54fb93)
2015-08-19 16:35:57 -07:00
li.li
0093870008 update component api docs
(cherry picked from commit f027ca8ca0)
2015-08-19 16:35:57 -07:00
Domenico Matteo
fd2e0bae59 improve ReactTestUtils.Simulate documentation
(cherry picked from commit 97e219e785)
2015-08-19 16:35:57 -07:00
Matthew Johnston
5ef792995f ReactEurope roundup blog post
(cherry picked from commit 0b07fed32c)
2015-08-13 17:16:28 -07:00
Paul O’Shannessy
841ba07f24 Fix grammar in Relay blog post
Brings in #4617 properly

(cherry picked from commit 530a30c1d5)
2015-08-12 12:10:31 -07:00
Paul O’Shannessy
0ec71215de Merge pull request #4619 from jaredly/beta-2
update devtools post to note beta 2
(cherry picked from commit 1b7d6c381f)
2015-08-12 12:08:33 -07:00
Jim
e719951cdd Merge pull request #4613 from tako-black/translate_advanced-performance_to_japanese
Translate 11-advanced-performance.md to Japanese
(cherry picked from commit d7b59de1c3)
2015-08-12 12:04:59 -07:00
Jim
95463d395d Merge pull request #4602 from tako-black/update_tutorial_ja-JP
Change tutorial.ja-JP.md to use marked
(cherry picked from commit bcd32768e6)
2015-08-12 12:04:59 -07:00
Sebastian Markbåge
2dc652a900 Merge pull request #4554 from chernysh/chernysh-added-docs-img-events
Added documentation for <img> events
(cherry picked from commit 7f119d41c7)
2015-08-12 12:04:24 -07:00
Jim
62487d9233 Merge pull request #4552 from psibi/patch-1
Include Haskell language
(cherry picked from commit c97ed7b804)
2015-08-12 12:01:52 -07:00
Jim
abf95dcbd2 Merge pull request #4381 from mikrofusion/clarify-main-ideas
clarify the two main ideas behind react.
(cherry picked from commit ff7996b58a)
2015-08-12 12:01:51 -07:00
Jim
d2544377e3 Merge pull request #4541 from marocchino/update-korean
Update Korean translation to e88c7bf
(cherry picked from commit 134e0700cd)
2015-08-12 12:01:29 -07:00
Jim
0ef62a8ea1 Merge pull request #4537 from afhole/patch-1
Update 02.1-jsx-in-depth.md
(cherry picked from commit 50d73f9a13)
2015-08-12 11:58:32 -07:00
Paul O’Shannessy
58bc35de1c Merge pull request #2664 from jasonwebster/patch-1
Add additional supported methods to event documentation
(cherry picked from commit b766c62bb9)
2015-08-12 11:58:32 -07:00
Jim
223fc26ee7 Merge pull request #4506 from tako-black/translate_perf_to_japanese
Translate 10.9-perf.md to Japanese
(cherry picked from commit 98d4fde55c)
2015-08-12 11:58:31 -07:00
Jim
f0abb45dce Merge pull request #4469 from KevinTCoughlin/kevintcoughlin/#4265
Fixes #4265 - Clarify React.render note in documentation
(cherry picked from commit fab001aa80)
2015-08-12 11:58:31 -07:00
Jim
22eb779351 Merge pull request #4495 from tako-black/translate_pure-render-mixin_to_japanese
Translate 10.8-pure-render-mixin.md to Japanese
(cherry picked from commit be39979460)
2015-08-12 11:58:31 -07:00
Paul O’Shannessy
158d1c7755 Merge pull request #4486 from yangmillstheory/docfix
Fix grammar
(cherry picked from commit 3056066ede)
2015-08-12 11:58:31 -07:00
Jim
041248881b Merge pull request #4483 from marocchino/update-korean
Update Korean translation to 991c437
(cherry picked from commit 44997df9eb)
2015-08-12 11:58:30 -07:00
Joseph Savona
cac6bc870d Relay Technical Preview - blog post 2015-08-11 12:09:17 -07:00
youmoo
35225abeba Update 2015-05-01-graphql-introduction.md
Or the alternative:

`REST is an acronym for Representational State Transfer, which is an architectural style rather than a formal protocol`.

Sorry , I'am not a native speaker:)
(cherry picked from commit 0a19e0c0e5)
2015-08-07 19:32:32 -07:00
Jared Forsyth
f92f1e7f33 Add blog post about the new devtools beta
(cherry picked from commit 1343cc0c9b)
2015-08-03 15:15:29 -07:00
Jim
6e4865946b Merge pull request #4478 from tako-black/translate_update_to_japanese
Translate 10.7-update.md to Japanese
(cherry picked from commit f23fe004bb)
2015-07-24 17:41:25 -07:00
Paul O’Shannessy
252f3571e5 Merge pull request #4386 from AnSavvides/4369-walkthrough-clarification
[#4369] Make getting started a little less confusing
(cherry picked from commit bcfba9178f)
2015-07-24 17:41:25 -07:00
Jim
55fe64dd94 Merge pull request #4472 from tako-black/translate_create-fragment_to_japanese
Translate 10.6-create-fragment.md to Japanese
(cherry picked from commit 318c288bd3)
2015-07-24 17:41:25 -07:00
Jim
fa05a157e4 Merge pull request #4459 from tako-black/translate_clone-with-props_to_japanese
Translate 10.5-clone-with-props.md to Japanese
(cherry picked from commit 3dcc4b8b90)
2015-07-24 17:41:24 -07:00
Jim
ae5224a05f Merge pull request #4471 from Yeti-or/yeti-or.fix-docs
Docs: Fix jsx iife example
(cherry picked from commit 42caf036e2)
2015-07-24 17:41:24 -07:00
Jim
9aa45c7517 Merge pull request #4460 from tako-black/enclose_variables_in_back_quote
Enclose variables in back quote
(cherry picked from commit b71ad1f600)
2015-07-24 17:41:24 -07:00
Jim
95f77e6c0a Merge pull request #4455 from marocchino/update-korean
Update Korean translation to e928c65
(cherry picked from commit e10c873d09)
2015-07-24 17:41:24 -07:00
Paul O’Shannessy
a8c729ee7b Merge pull request #4404 from jbonta/component_api_docs
Make component api docs clearer
(cherry picked from commit 82a9a5595e)
2015-07-24 17:41:24 -07:00
Jim
503b3cfe0a Merge pull request #4443 from tako-black/translate_test-utils_to_japanese
Translate 10.4test-utils.md to Japanese
(cherry picked from commit f000fa564e)
2015-07-24 17:41:23 -07:00
Jim
0229aea457 Merge pull request #4444 from tako-black/Add_period
Add period
(cherry picked from commit dc0d4bae7b)
2015-07-24 17:41:23 -07:00
Ben Alpert
b7f9cd4f25 counterexample -> antipattern
(cherry picked from commit d13fafa5dd)
2015-07-20 08:29:11 -07:00
Paul O’Shannessy
f8477dcf58 Merge pull request #4413 from zpao/more-default-value-docs-chagnes
Tweaks to new content in forms documentation
(cherry picked from commit c72f2e455a)
2015-07-17 14:24:29 -07:00
Jim
ff19f79a33 Merge pull request #4379 from eriklharper/patch-1
Add more information about defaultValue
(cherry picked from commit 976b51adf8)
2015-07-17 14:24:28 -07:00
Jim
c4d8d1503d Merge pull request #4407 from Simek/patch-4
split code block for readability
(cherry picked from commit aa5f503595)
2015-07-17 14:24:28 -07:00
Jim
ab9f340857 Merge pull request #4409 from tako-black/translate_class-name-manipulation_to_japanese
Translate 10.3-class-name-manipulation.md to Japanese
(cherry picked from commit b66fa7eb05)
2015-07-17 14:24:28 -07:00
Paul O’Shannessy
ef7ff3ba88 Merge pull request #3186 from benekastah/patch-1
Modify sample CSS so that it works in Safari
(cherry picked from commit ddb84f44a8)
2015-07-17 14:24:28 -07:00
Jim
6297aa4118 Merge pull request #4382 from tako-black/enclose_a_name_of_library_in_back_quote
Enclose a name of library in back quote
(cherry picked from commit d6c062b213)
2015-07-17 14:24:27 -07:00
Jim
26fa6256e5 Merge pull request #4383 from tako-black/translate_form-input-binding-sugar_to_japanese
Translate 10.2-form-input-binding-sugar.md to Japanese
(cherry picked from commit d76a686c7f)
2015-07-17 14:24:27 -07:00
Jim
04539d9e17 Merge pull request #4377 from sugarshin/typo_docs
Delete unnecessary control code.
(cherry picked from commit 432d887f4a)
2015-07-17 14:24:27 -07:00
Jim
329efd4d70 Merge pull request #4371 from tako-black/translate_animation_to_japanese
Translate 10.1-animation.md to Japanese
(cherry picked from commit 704ea0bb83)
2015-07-17 14:24:27 -07:00
Paul O’Shannessy
1d9ee9dcdb Merge pull request #4144 from lukehorvat/docs/iife-jsx
Add IIFE example to JSX documentation
(cherry picked from commit 4d178415e8)
2015-07-17 14:24:27 -07:00
Paul O’Shannessy
b84f325a20 Merge pull request #4291 from rwoodnz/patch-2
indicate file name requried for static file
(cherry picked from commit e9b3974d7c)
2015-07-17 14:24:26 -07:00
Paul O’Shannessy
f676fa41ef Merge pull request #4357 from yangmillstheory/docfix
Warn against JSX transform failure for non-HTTP-served JSX
(cherry picked from commit e9915f0735)
2015-07-17 14:24:26 -07:00
Paul O’Shannessy
dd570dcb5c Merge pull request #4363 from tako-black/change_css_to_uppercase
Change `css` to uppercase
(cherry picked from commit fa7aeb65ac)
2015-07-17 14:24:26 -07:00
Jim
5396d5180d Merge pull request #4362 from makky3939/translate_04_self_closing_tag
Translate 4-self-closing-tag.md to Japanese
(cherry picked from commit bd390afc22)
2015-07-17 14:24:26 -07:00
Jim
73fce2dd31 Merge pull request #4356 from makky3939/fix_03-interactivity-and-dynamic-uis_ja-JP_md
Update 03-interactivity-and-dynamic-uis.ja-JP.md
(cherry picked from commit ea964e760c)
2015-07-17 14:24:26 -07:00
Jim
34d9e8482e Merge pull request #4358 from makky3939/remove_controll_character_from_jp_docs
Remove controll character from jp.md
(cherry picked from commit 0572747d74)
2015-07-17 14:24:26 -07:00
Jim
649804e4d4 Merge pull request #4351 from tako-black/translate_addons_to_japanese
Translate 10-addons.md to Japanese
(cherry picked from commit 2b3d83fe34)
2015-07-17 14:24:25 -07:00
Jim
86682159d1 Merge pull request #4348 from himkt/master
remove controll character from 02-displaying-data.ja-JP.md
(cherry picked from commit 13c9bb4845)
2015-07-17 14:24:25 -07:00
Jim
257c4288d9 Merge pull request #4346 from makky3939/fix_typo_09-tooling-integration_ja-JP_md
fix typo 09-tooling-integration.ja-JP.md
(cherry picked from commit 7661d6c7da)
2015-07-17 14:24:25 -07:00
Paul O’Shannessy
177df50d7f Merge pull request #4337 from tako-black/translate_tooling-integration_to_japanese
Translate 09.tooling-integration.md to Japanese
(cherry picked from commit 4ec2575cd8)
2015-07-17 14:24:25 -07:00
Jim
cdb2988155 Merge pull request #4334 from tako-black/add_meta_tag_in_the_header_of_html
Add meta tag in the header of HTML in translated documentation.
(cherry picked from commit 6c0ab0b60e)
2015-07-17 14:24:25 -07:00
Jim
017d377c26 Merge pull request #4320 from tako-black/translate_more-about-refs_to_japanese
Translate 08.1-more-about-refs.md to Japanese
(cherry picked from commit a9e2111b34)
2015-07-17 14:24:24 -07:00
Paul O’Shannessy
71a6e5da7a Merge pull request #4319 from tako-black/enclose_a_name_of_function_in_back_quote
Enclose a name of function in back quote
(cherry picked from commit 59eddf8943)
2015-07-17 14:24:24 -07:00
Frankie Bagnardi
c0f32a9078 Blog: move "refs to custom components..." fixes #4305
Just to prevent the TL;DR confusion. Separate paragraph and moved up above the code block. `s/References/Refs` for consistency.

(cherry picked from commit 335f7d5e57)
2015-07-15 16:36:47 +02:00
Paul O’Shannessy
e3e209d8e1 Merge pull request #4314 from devonharvey/patch-1
Fix typo on line 91 of tutorial.md
(cherry picked from commit 6eaf03df1a)
2015-07-08 10:26:14 -07:00
Jim
a76d3f22c2 Merge pull request #4312 from tako-black/translate_working-with-the-browser_to_japanese
Translate 08-working-with-the-browser.md to Japanese
(cherry picked from commit c3f0d7c6bd)
2015-07-08 10:26:14 -07:00
Jim
322fd3b56a Merge pull request #4310 from tako-black/enclose_a_value_of_variable_in_back_quote
Enclose a value of variable in back quote
(cherry picked from commit ed0d41bb88)
2015-07-08 10:26:14 -07:00
Jim
80225fb613 Merge pull request #4300 from tako-black/translate_forms_to_japanese
Translate 07-forms.md to Japanese
(cherry picked from commit 25be80c959)
2015-07-08 10:26:14 -07:00
Jim
c9119c1135 Merge pull request #4299 from tako-black/enclose_a_value_in_back_quote
Enclose a value of variable in back quote
(cherry picked from commit 2284c0f449)
2015-07-08 10:26:14 -07:00
Jim
ce0ff2a975 Merge pull request #4292 from dariocravero/patch-1
Update 2015-07-03-react-v0.14-beta-1.md
(cherry picked from commit a8955e7c3e)
2015-07-08 10:26:13 -07:00
Jim
085f5319e9 Merge pull request #4290 from rwoodnz/patch-1
Suggest open index.html in browser regularly.
(cherry picked from commit abf965c3c5)
2015-07-08 10:26:13 -07:00
Paul O’Shannessy
30a44efd43 Merge pull request #4289 from joshuago/patch-1
Fix typos
(cherry picked from commit 5370987cc0)
2015-07-08 10:26:13 -07:00
Jim
2fde241c5e Merge pull request #4276 from tako-black/translate_transferring-props_to_japanese
Translate 06-transferring-props.md to Japanese
(cherry picked from commit 2d86486fd1)
2015-07-08 10:26:13 -07:00
Jim
7f23486f7e Merge pull request #4266 from tako-black/translate_reusable-components_to_japanese
Translate 05-reusable-components.md to Japanese
(cherry picked from commit c3e411a0dc)
2015-07-08 10:26:13 -07:00
Jim
f995ca79d1 Merge pull request #4262 from coryhouse/patch-1
Removed redundant word
(cherry picked from commit bde585f4e0)
2015-07-08 10:26:12 -07:00
Jim
ea4f405840 Merge pull request #4252 from bhamodi/patch-2
Update url to save a redirect
(cherry picked from commit ae9b2c0649)
2015-07-08 10:26:10 -07:00
Jim
8972a956bd Merge pull request #4249 from tako-black/translate_multiple-components_to_japanese
Translate 04-multiple-components.md to Japanese
(cherry picked from commit d9d442808a)
2015-07-08 10:13:02 -07:00
Paul O’Shannessy
b8b8477265 Merge pull request #4242 from tako-black/translate_interactivity-and-dynamic-uis_to_japanese
Translate 03-interactivity-and-dynamic-uis.md to Japanese
(cherry picked from commit dd3244c4f2)
2015-07-08 10:13:02 -07:00
Jim
1fab5ae1a6 Merge pull request #4240 from tako-black/translate_jsx-gotchas_to_japanese
Translate 02.3-jsx-gotchas.md to Japanese
(cherry picked from commit e695ebb5c6)
2015-07-08 10:13:01 -07:00
Jim
8a3c65851e Merge pull request #4232 from marocchino/update-docs
Update translated docs
(cherry picked from commit 5fb8cbc6ca)
2015-07-08 10:13:01 -07:00
Paul O’Shannessy
f92d447ab8 Merge pull request #4229 from tako-black/translate_jsx-spread_to_japanese
Translate 02.2-jsx-spread.md to Japanese
(cherry picked from commit 859a5d5c3c)
2015-07-08 10:13:01 -07:00
Jim
ba9cbe2567 Merge pull request #4222 from tako-black/translate_jsx-in-depth_to_japanese
Translate 02.1-jsx-in-depth.ja-JP.md to Japanese
(cherry picked from commit 9bcc8dab93)
2015-07-08 10:13:01 -07:00
Ben Alpert
418bc097d5 Merge pull request #4204 from dpercy/patch-1
Fix docs typo: "overridden" -> "overwritten"
(cherry picked from commit ef00e856aa)
2015-07-08 10:13:01 -07:00
Ben Alpert
4e1918d4ea Fix react-addons-update package name
(cherry picked from commit cb5913a842)
2015-07-04 17:26:57 +02:00
Ben Alpert
52c9efedb3 beta1 blog post
Closes #4275.

(cherry picked from commit b2db10f43e)
2015-07-03 10:50:24 +02:00
Andres Kalle
8a83957e8c Typo fix
(cherry picked from commit af2071af63)
2015-06-30 15:58:07 +02:00
Kohei TAKATA
c3aee0aecc Change 'Javascript' to 'JavaScript'
(cherry picked from commit aefb608fd6)
2015-06-27 03:02:10 -07:00
Kohei TAKATA
bef8b1af6c Translate 02-displaying-data.md to Japanese
(cherry picked from commit af34ca7b41)
2015-06-24 20:20:00 -07:00
Tay Yang Shun
4d3aaa75ae Add site title to first code snippet of getting started
(cherry picked from commit bd9d4b2499)
2015-06-24 20:19:33 -07:00
Kohei TAKATA
2ce18630c1 Fix link of getting-started.ja-JP.md
(cherry picked from commit 3c53d25587)
2015-06-22 22:41:49 -07:00
Kohei TAKATA
0f938506e3 Translate 01-why-react.md to Japanese
(cherry picked from commit 1d3906f91d)
2015-06-22 22:41:45 -07:00
Cristovao Verstraeten
fcb0d942b1 update script sources to be even with the example file in reactjs/react-tutorial repo ... apply to japanese and korean translation (+2 squashed commit)
Squashed commit:

[4564e55] Ensures we don't need to update this page for every release.

[b0d60f9] update script sources to be even with the example file in reactjs/react-tutorial repo

(cherry picked from commit c227a398ba)
2015-06-22 22:41:38 -07:00
Shim Won
41821af38d Update Korean transltaion to 4c778e2
(cherry picked from commit e67c0943b8)
2015-06-22 22:41:32 -07:00
Ben Alpert
3cf37af574 Fix typo in blog post
(#4183)

(cherry picked from commit df05c6efb8)
2015-06-20 16:49:52 -07:00
Ingvar Stepanyan
d48ce78261 Update 2015-06-12-deprecating-jstransform-and-react-tools.md
Add paragraph about parsing JSX after deprecation of esprima-fb.
(cherry picked from commit cab21c7783)
2015-06-16 10:58:03 -07:00
Dustan Kasten
eff75729f2 s/parse/parser in jstransform deprecation blog post
(cherry picked from commit 54e77a251c)
2015-06-12 21:52:31 -07:00
Paul O’Shannessy
4c50ced1a8 [blog] Deprecate JSTransform & react-tools 2015-06-12 16:48:16 -07:00
Jim
7cf376483f Merge pull request #4074 from jimfb/docs-context-parameter-confusing
Fixed confusing use of the word/name `context` in documentation
2015-06-10 15:59:26 -07:00
Ben Alpert
b2fb150972 Merge pull request #4070 from tako-black/fix_md_file
Fix code of getting-started-ja-JP
2015-06-10 15:59:22 -07:00
Paul O’Shannessy
f6d9da57c6 Merge pull request #4046 from basarat/patch-2
📝 document changes for classes
2015-06-10 15:59:18 -07:00
Scott Feeney
0620cec299 Merge pull request #4003 from AnSavvides/on-change-vs-on-input
[#3964] Add note about React's onChange vs. DOM's oninput
2015-06-10 15:59:13 -07:00
Ben Alpert
2b60d3c31f Merge pull request #3884 from glenjamin/patch-3
Document boolean attributes in JSX
2015-06-10 15:59:08 -07:00
Paul O’Shannessy
a590c90fb0 Merge pull request #4063 from zpao/fix-ja-docs
fix japanese docs permalinks
2015-06-08 20:17:27 -07:00
Ben Alpert
7bee7eff7e Merge pull request #3993 from arianf/doctype
added missing DOCTYPE
2015-06-01 14:32:23 -07:00
Paul O’Shannessy
cc0c897a79 Merge pull request #3980 from cody/http
Revert links to non-https fiddles back to http in old blog posts
2015-06-01 14:32:18 -07:00
Paul O’Shannessy
d34b93cdb9 Merge pull request #3935 from julen/docs/transition-group
Docs: value for `transitionAppear` must be boolean
2015-06-01 14:32:09 -07:00
Ben Alpert
616454f95f Merge pull request #3931 from marocchino/update-korean
Update Korean transltaion to 5bee4a5
2015-06-01 14:32:04 -07:00
Ben Alpert
dc482ec339 Merge pull request #3909 from spicyj/tir-redirect
Redirect Thinking in React blog post to docs
2015-06-01 14:32:00 -07:00
Christopher Chedeau
ad2e54a25c [Blog post] React Native Release Process 2015-05-22 13:19:22 -07:00
Paul O’Shannessy
af44a476d0 Merge pull request #3803 from zpao/docs-fancy-authors
[docs] Give authors links.
2015-05-21 11:45:03 -07:00
Paul O’Shannessy
246cd6e7ac Merge pull request #3888 from marocchino/korean-update
Update Korean Translation to 5275244
2015-05-21 11:44:56 -07:00
Paul O’Shannessy
20b41da601 Merge pull request #3892 from spicyj/docs-wwb
[docs] Clarify wording in Working with the Browser
2015-05-21 11:44:49 -07:00
Paul O’Shannessy
9c0f0f58ca Merge pull request #3889 from garethnic/WorkBrowser
change wording in 'Working with the Browser'
2015-05-21 11:44:42 -07:00
Paul O’Shannessy
78b97cb5b2 Merge pull request #3905 from troeggla/replace-getdomnode
Replaced call to deprected .getDOMNode() with React.findDOMNode().
2015-05-21 11:44:37 -07:00
Ben Alpert
daee5502cf Merge pull request #3910 from spicyj/gh-3904
Clarify tutorial instructions
2015-05-21 11:44:32 -07:00
Jim
c72390a94c Merge pull request #3856 from chaseadamsio/chaseadamsio-patch-1
Change object typo to objects
2015-05-21 11:43:45 -07:00
Paul O’Shannessy
b8e11d04db Merge pull request #3881 from ef718/docs-grammar
Fix punctuation and grammar
2015-05-21 11:43:39 -07:00
Paul O’Shannessy
36a058b7a0 Merge pull request #3837 from davidneat/transition-group-appear-high-level-docs
Added transitionAppear docs
2015-05-21 11:42:35 -07:00
Paul O’Shannessy
d3d819fff5 [docs] Fix 404 due to relative url
Closes #3914

(cherry picked from commit 021574e07d)
2015-05-21 11:40:24 -07:00
Paul O’Shannessy
be7fe9cb40 Followup to #3852, use https
(cherry picked from commit cfa354415b)
2015-05-21 11:40:09 -07:00
Ben Alpert
dc47b92da8 Deprecate reactjs Google Group
(cherry picked from commit ffabf4b5ff)
2015-05-13 15:17:00 -07:00
Ben Alpert
9947e4ee9b Merge pull request #3852 from thewarpaint/patch-1
Add Wikipedia link to Cross-site scripting article on "XSS attack" string
2015-05-10 22:16:08 -07:00
Ben Alpert
17e04d5034 Merge pull request #3805 from hejld/master
Removed redundant grave accent character from Component API docs
2015-05-10 22:16:03 -07:00
Ben Alpert
118845f53a Merge pull request #3797 from marocchino/update-korean
Update Korean Translation to 9484d0f
2015-05-10 22:15:57 -07:00
Paul O’Shannessy
2b372f188a Merge pull request #3778 from masterfung/docs-update
updated some typos, grammers, and made sentences sound better
2015-05-10 22:15:51 -07:00
Paul O’Shannessy
107ce2b80d Update website with 0.13.3 builds 2015-05-08 16:32:30 -07:00
Paul O’Shannessy
2668de126c Fix docs for #3690 2015-05-08 13:53:50 -07:00
Paul O’Shannessy
179b6380cf v0.13.3 blog post 2015-05-08 13:53:49 -07:00
Paul O’Shannessy
668d6a3fed v0.13.3 2015-05-08 13:53:49 -07:00
Paul O’Shannessy
1d950ddbd4 Readme for 0.13.3 2015-05-08 13:53:49 -07:00
Paul O’Shannessy
95e864fd07 Changelog for 0.13.3 2015-05-08 13:53:49 -07:00
Ben Alpert
13e67bed24 Merge pull request #3841 from spicyj/yolo
Preserve prototype with replaceState
2015-05-08 13:53:49 -07:00
Paul O’Shannessy
b8ae729d3f Revert "Reset changes to code made in #3693"
This reverts commit 405346545f.
2015-05-08 13:53:48 -07:00
Ben Alpert
e9126cf90b Add forgotten clipPath wrapper in getMarkupWrap
(cherry picked from commit 3b10a7b038)
2015-05-08 13:53:48 -07:00
Ben Alpert
80ea01d364 Fix context warning with non-pure getChildContext
Fixes #3709.
2015-05-08 11:36:29 -07:00
Ben Alpert
92a7e5f41c Merge pull request #3802 from spicyj/cleaner-depr
Better warning messages for deprecated methods
2015-05-08 11:20:37 -07:00
Ben Alpert
56b0a496f4 Merge pull request #3727 from spicyj/dsih
Relax dangerouslySetInnerHTML validation
2015-05-08 10:49:56 -07:00
Scott Feeney
135499782e Merge pull request #3716 from graue/optional-shallow-render-context
Shallow render components that define contextTypes
2015-05-08 10:49:36 -07:00
codesuki
bd6e42fab4 Added support for SVG clipPath element and clip-path attribute 2015-05-08 10:46:25 -07:00
Paul O’Shannessy
e64c0a50f9 Bump version for dev 2015-05-08 10:40:07 -07:00
Paul O’Shannessy
b7ea06614d Update 2015-05-01-graphql-introduction.md
typo fix
2015-05-01 17:01:59 -07:00
Paul O’Shannessy
a72828817b Fix a couple grammar issues in GraphQL blog post 2015-05-01 12:35:50 -07:00
Paul O’Shannessy
49cbc88cd2 GraphQL Introduction Blog Post
(cherry picked from commit 693da719a3)
2015-05-01 11:20:03 -07:00
Jim
fd36708b1d Merge pull request #3794 from jsfb/fix-thinking-in-react-blog-post
Fixed jsfiddles broken on https.  Fixes 3735.
2015-05-01 11:09:28 -07:00
Paul O’Shannessy
9643243116 Merge pull request #3784 from ef718/docs-punctuation
Add punctuation
2015-05-01 11:09:22 -07:00
Jim
a12ef37050 Merge pull request #3767 from kubosho/patch-1
Use jQuery 2.1.3 (latest) to be up-to-date and consistent with other docs)
2015-05-01 11:09:17 -07:00
Paul O’Shannessy
7a967b680b Merge pull request #3734 from marocchino/update-korean
Update Translation to 0183f70
2015-05-01 11:09:12 -07:00
Jim
4c7479a2a0 Merge pull request #3723 from jsfb/fix-bad-homepage-link
Fix bad links in docs.  Fixes #3654.
2015-05-01 11:09:07 -07:00
Paul O’Shannessy
9611a4b105 Merge pull request #3691 from jonscottclark/patch-1
Add 'cache: false' to $.ajax when fetching comments (docs/tutorial)
2015-05-01 11:09:02 -07:00
Ben Alpert
0493fa21f7 Merge pull request #3429 from AoDev/patch-1
Add a note about react classe name convention
2015-05-01 11:08:58 -07:00
mheiber
f05bfaea33 Update cloneWithProps documentation
Updated documentation to reflect that using React.cloneElement is the new way to copy an element and preserve `key` and `ref`.

Fixes #3432, closes #3447.

(cherry picked from commit 39442aaa84)
2015-04-22 17:06:12 -07:00
Paul O’Shannessy
405346545f Reset changes to code made in #3693
Reverting this bit in the stable branch so builds aren't changed. We can pick
this up again if we do a 0.13.3.
2015-04-20 22:17:59 -07:00
Paul O’Shannessy
5ef593e4a0 Merge pull request #3693 from reedloden/swap-http-to-https
SSL/TLSize all the things! (convert http:// to https:// where appropriate)
2015-04-20 11:08:54 -07:00
Paul O’Shannessy
92252f5781 Merge pull request #3694 from adamzap/fix-tutorial-line-highlighting
Fix missing line highlight in tutorial
2015-04-20 11:05:02 -07:00
Paul O’Shannessy
b14a7be10d Merge pull request #3703 from JimBobSquarePants/patch-1
Example is JSX not JS.
2015-04-20 11:04:56 -07:00
Paul O’Shannessy
3ff97a9277 Merge pull request #3705 from zpao/doc/update-supported-attrs
[docs] Update supported HTML attributes
2015-04-20 11:04:51 -07:00
Paul O’Shannessy
7a2c84d81a Tweak wording in 0.13.2 blog post
(cherry picked from commit feef6e885b)
2015-04-18 16:08:25 -07:00
Paul O’Shannessy
6ed202288b v0.13.2 blog post 2015-04-18 15:33:58 -07:00
Paul O’Shannessy
179f904525 Update website with 0.13.2 builds 2015-04-18 15:33:58 -07:00
Paul O’Shannessy
c98c7ccd28 v0.13.2 2015-04-18 15:28:48 -07:00
Paul O’Shannessy
78cca021f3 Update Patent Grant
https://code.facebook.com/posts/1639473982937255/updating-our-open-source-patent-grant/
2015-04-18 15:28:48 -07:00
Paul O’Shannessy
e1437078fc Readme for 0.13.2 2015-04-18 15:28:48 -07:00
Paul O’Shannessy
4f1c61f915 Changelog for 0.13.2 2015-04-18 15:28:48 -07:00
Ben Alpert
4cecb72965 Merge pull request #3675 from spicyj/gh-3655
Add warning for getDefaultProps on ES6 classes
2015-04-17 18:35:19 -07:00
Paul O’Shannessy
db6dcd695f Merge pull request #3485 from jnu/ie10-flex-unitless
Treat flexPositive, flexNegative as unitless styles
2015-04-17 18:35:19 -07:00
Paul O’Shannessy
16cb748161 Update test for backporting #3507 2015-04-17 18:35:19 -07:00
Jim
2e3ac9b683 Merge pull request #3638 from devicehubnet/master
check if type.prototype is object in instantiateReactComponent
2015-04-17 18:35:19 -07:00
Paul O’Shannessy
3509628c22 re-shrinkwrap 2015-04-17 18:35:18 -07:00
Paul O’Shannessy
742d8567e8 Merge pull request #3662 from zpao/update-uglify
Update uglify dependency
2015-04-17 18:35:18 -07:00
Paul O’Shannessy
1c03cd6fd9 Merge pull request #3636 from cody/jsx-target
Add target option to npm readme
2015-04-17 18:35:18 -07:00
Ben Alpert
8b4377ed68 Merge pull request #3627 from spicyj/mut-warn-clone
Refer to cloneElement in mutation warning
2015-04-17 18:35:18 -07:00
Paul O’Shannessy
2c7e818c7c Merge pull request #3618 from TimeBomb/master
Document new es6module flag in react-tools README
2015-04-17 18:35:18 -07:00
Paul O’Shannessy
717ad76529 Merge pull request #3614 from kassens/set_style_null
Fix for style not always reset when set to null
2015-04-17 18:35:18 -07:00
Paul O’Shannessy
9b2176fc23 Merge pull request #3563 from quizlet/fix-addons-hasownproperty
Fix immutability helper to check hasOwnProperty safely
2015-04-17 18:35:18 -07:00
Paul O’Shannessy
7b07d85398 Merge pull request #3519 from jonchester/patch-1
Add IE-specific 'unselectable' attribute
2015-04-17 18:35:18 -07:00
Paul O’Shannessy
6d021d31ef Merge pull request #3513 from agelter/master
Added support for the 'low', 'high', and 'optimum' attributes that are missing from the <meter> tag.
2015-04-17 18:35:18 -07:00
Paul O’Shannessy
ed8b4d6533 Merge pull request #3507 from dpellier/master
Add scoped property to the list of DOM standard properties
2015-04-17 18:35:18 -07:00
Paul O’Shannessy
440d7b9fd0 Merge pull request #3499 from sverrejoh/patch-1
Don't add 'px' to strokeDashoffset CSS Properties
2015-04-17 18:35:17 -07:00
Jim
28483ea245 Merge pull request #3494 from letiemble/B_Context_Rerender
Fix the context handling when updating a rendered component.
2015-04-17 18:35:17 -07:00
Paul O’Shannessy
4d142ad5f1 Version bump for dev 2015-04-17 18:35:17 -07:00
Paul O’Shannessy
4a700aedf8 Merge pull request #3678 from marocchino/update-korean
Update Translation to 6a7a4fd
2015-04-17 18:13:28 -07:00
Paul O’Shannessy
4423200007 Merge pull request #3673 from ultrafez/patch-1
"Advanced performance" typo fix
2015-04-17 18:13:16 -07:00
Jim
f4d7c704dd Merge pull request #3625 from dmin/patch-1
Docs: Fix example JSX output
2015-04-17 18:12:57 -07:00
Christopher Chedeau
fab11d22b8 Update 2015-04-17-react-native-v0.4.md 2015-04-17 09:14:29 -07:00
Christopher Chedeau
c3cf556ca0 React Native 0.4 Blog Post 2015-04-17 09:14:29 -07:00
Ben Alpert
3fd813f752 Merge pull request #3456 from cody/html-jsx
Fix HTML to JSX converter to work with https
2015-04-14 14:43:35 -07:00
Ben Alpert
8109af6d7f Merge pull request #3663 from spicyj/san-md
[docs] Use marked instead of Showdown and escape HTML
(cherry picked from commit be03fa7f46)
2015-04-13 16:46:05 -07:00
Paul O’Shannessy
e0c9fbc9f5 Merge pull request #3658 from sbezludny/patch-1
Fixed typo
2015-04-13 16:12:32 -07:00
Paul O’Shannessy
a1b4f40f9d Merge pull request #3642 from marocchino/ko-update
Update Korean translation to 0185c68
2015-04-13 16:12:32 -07:00
Paul O’Shannessy
aa7eb4302d Merge pull request #3641 from ljharb/patch-1
Updating `es5-shim` URL
2015-04-13 16:12:32 -07:00
Jim
5b18053ac0 Merge pull request #3635 from garethnic/reuseCompDoc
Clarify sentence in Reusable Components doc
2015-04-13 16:12:32 -07:00
Paul O’Shannessy
03595c918a Merge pull request #3584 from ThornWinters/patch-1
More Uniform Formating
2015-04-13 16:12:32 -07:00
Paul O’Shannessy
8680314086 [docs] Fix typo
Introduced in #3589
2015-04-08 10:39:43 -07:00
Paul O’Shannessy
396c6b68ed Merge pull request #3612 from gaearon/patch-1
Mention Flux in “communicate between components”
2015-04-08 10:38:17 -07:00
Ben Alpert
cc8f9d3c30 Merge pull request #3590 from koba04/patch-1
component.render method returns a ReactElement.
2015-04-08 10:38:06 -07:00
Ben Alpert
5daf9f39c0 Merge pull request #3589 from theseyi/master
Documentation: Fixed typo / grammar in 'clone with props'
2015-04-08 10:37:55 -07:00
Ben Alpert
8685fed099 Merge pull request #3588 from marocchino/ko-update
Update Korean translation to d402bd3
2015-04-08 10:36:40 -07:00
Paul O’Shannessy
4bf4112542 Merge pull request #3567 from chenglou/rm-getdomnode
Remove some `getDOMNode` from docs and DOMComponent test
2015-04-03 10:40:52 -07:00
Paul O’Shannessy
ff4c157ed7 Merge pull request #3562 from dalinaum/rename
Rename 19--dangerouslySetInnerHTML.md -> 19-dangerously-set-inner-html.md
2015-04-03 10:40:52 -07:00
Paul O’Shannessy
397fa72d1d Merge pull request #3544 from prathamesh-sonpatki/fix-link-to-display-name
Fixed link to displayName component spec from JSX in depth article
2015-04-03 10:40:52 -07:00
Paul O’Shannessy
b2043987cc Merge pull request #3539 from russellpwirtz/patch-1
Update tutorial.md
2015-04-03 10:40:52 -07:00
Paul O’Shannessy
6343ec5d79 Merge pull request #3537 from marocchino/korean-update
Update Korean translations
2015-04-03 10:40:52 -07:00
Ben Alpert
12b794a3b8 Merge pull request #3529 from uzarubin/patch-1
Swapping defaultChecked and defaultValue
2015-04-03 10:40:52 -07:00
Paul O’Shannessy
449726408e Merge pull request #3511 from AnSavvides/glossary-space
Minor space change to be in line with coding style everywhere else
2015-04-03 10:39:59 -07:00
Paul O’Shannessy
e63149d4f0 Merge pull request #3504 from clariroid/docsJP
Translate 2 docs into Japanese
2015-04-03 10:39:59 -07:00
Paul O’Shannessy
40f77d2715 Merge pull request #3498 from AnSavvides/patch-1
Include latest version of jQuery in tutorial
2015-04-03 10:39:59 -07:00
Paul O’Shannessy
1b4bc922f9 Merge pull request #3491 from bobbyrenwick/transition-group-appear-docs
adding docs for componentWillAppear and componentDidAppear
2015-04-03 10:39:59 -07:00
Paul O’Shannessy
4c779313af Merge pull request #3487 from zpao/doc/video
[docs] Videos: use https, right width videos
2015-04-03 10:39:58 -07:00
Paul O’Shannessy
be13240980 Merge pull request #3483 from julen/docs/document-body-footgun
Docs: do not render components to `document.body`
2015-04-03 10:39:58 -07:00
Paul O’Shannessy
29f11069f3 Merge pull request #3271 from delftswa2014/fix/todo-example
Added the key attribute into the todo example
2015-04-03 10:36:17 -07:00
Paul O’Shannessy
263084f5b7 Merge pull request #3240 from reactkr/translate-ko-release
Korean translation for docs
2015-04-03 10:36:17 -07:00
Ben Alpert
ad02e8bb56 [docs] Fix type on renderIntoDocument
Fixes #3581.

(cherry picked from commit d402bd3831)
2015-04-03 09:12:23 -07:00
Ben Alpert
35bc0f0b41 Fix inverted feature test in .travis.yml
I messed this up in #3540.

(cherry picked from commit 9c12e48f68)
2015-04-01 15:17:46 -07:00
Ahmad Wali Sidiqi
3b5ff0aea7 Fix small typo in 11-advanced-performance.md.
"React didn't even had"->"React didn't even have"

http://english.stackexchange.com/questions/204603/proper-usage-of-didnt-had-or-didnt-have
(cherry picked from commit 4fe1b59849)
2015-03-31 17:03:23 -07:00
Ben Alpert
d77f417767 Squelch git warning on Travis
(cherry picked from commit 835fc3d0fb)
2015-03-30 11:26:14 -07:00
Ben Alpert
946c3f04cc Set name and email a different way
(cherry picked from commit 76805fdfda)
2015-03-30 11:20:34 -07:00
Ben Alpert
d30547792c Set git name and email for Travis
(cherry picked from commit be566e0aa6)
2015-03-30 11:17:49 -07:00
Ben Alpert
6d577d83b8 [docs] English tweaks (and testing Travis)
(cherry picked from commit b7c4da59ca)
2015-03-30 11:11:02 -07:00
Ben Alpert
7f5292bea4 Autobuild website on Travis from stable branch
$REACT_WEBSITE_BRANCH in https://travis-ci.org/facebook/react/settings/env_vars now needs to point to the stable branch (currently 0.13-stable). I haven't tested the commit-and-push part of this but everything else works so I'm hopeful.

(cherry picked from commit accb4f6047)
2015-03-30 10:57:48 -07:00
Ben Alpert
987f243c73 Keep docs/js/{react,JSXTransformer}.js in repo
This way we don't need to rebuild them each time for the website.

(cherry picked from commit 0b6c7c29fe)
2015-03-30 10:57:48 -07:00
Paul O’Shannessy
0a9d6c6bbf Update TravisCI to use exiting env var
$TRAVIS_COMMIT_RANGE was broken but it seems what we're doing is worse and
resulting in false negatives.

The result of the bad range was that we weren't running lint or tests for
things we should have been. It actually looks like $TRAVIS_COMMIT has been
wrong and it's not clear why this has been working at all.

(cherry picked from commit 08b1515f7f)
2015-03-30 10:57:48 -07:00
Christopher Chedeau
54e82a552a Roundup 26 2015-03-30 07:25:14 -07:00
Ben Alpert
65f40df8b5 [docs] Split up second sentence more
(cherry picked from commit eef22ece37)
2015-03-26 12:30:48 -07:00
Ben Alpert
4924cdc436 [docs] Tweak words on homepage
(cherry picked from commit cf956ac8be)
2015-03-26 12:30:48 -07:00
Ben Alpert
67805ed12d Add React Native blog post
(cherry picked from commit 951adcdd4c)
2015-03-26 10:11:10 -07:00
Ben Alpert
5b86aca6ff [docs] Update site nav
(cherry picked from commit ca66399402)
2015-03-26 10:06:38 -07:00
Joseph Savona
d10c8fc1af Merge pull request #3463 from josephsavona/relay-components
Building The Facebook News Feed With Relay
2015-03-19 13:04:22 -07:00
Paul O’Shannessy
9b7de5b196 0.13 blog post, starter kit 2015-03-16 16:54:35 -07:00
Paul O’Shannessy
f308c03455 v0.13.1 2015-03-16 16:50:30 -07:00
Paul O’Shannessy
d4424e87a7 Update Readme for 0.13.1 2015-03-16 16:41:33 -07:00
Paul O’Shannessy
3003dcc0b1 Changelog for 0.13.1 2015-03-16 16:40:40 -07:00
Paul O’Shannessy
8436732a23 Merge pull request #3427 from zpao/full-page-dom-components
Ensure FullPageComponents are treated as DOM components
(cherry picked from commit dacd4db1fa)
2015-03-16 16:27:28 -07:00
Ben Alpert
a82e70ed34 Merge pull request #3414 from spicyj/gh-3407
Fix up Perf a bit better for 0.13
(cherry picked from commit 0a312bba89)
2015-03-16 16:27:28 -07:00
Ben Alpert
2e72fd8e43 Merge pull request #3412 from spicyj/gh-3329
Squash getDOMNode warning from isDOMComponent
(cherry picked from commit ed257cb691)
2015-03-16 16:27:28 -07:00
Ben Alpert
6cc7567eff Merge pull request #3410 from robertknight/3409-style-null-to-nonnull
Fix incorrect update of style when props.style transitions from null to non-null
(cherry picked from commit bcd70ad500)
2015-03-16 16:27:27 -07:00
Paul O’Shannessy
cfbf1d559f Merge pull request #3402 from vkramskikh/fix-empty-selects-with-value
Fix for empty <select> elements with value
(cherry picked from commit 68a2f89cc6)
2015-03-16 16:27:27 -07:00
Paul O’Shannessy
ce9fd5f028 Merge pull request #3381 from zpao/jsx-nonstrictmodule
Fix module option parsing of jsx command
(cherry picked from commit b0a59a643a)
2015-03-16 16:27:27 -07:00
Paul O’Shannessy
9432aceb4d version bump for dev 2015-03-16 16:27:27 -07:00
Paul O’Shannessy
9f95d8793e Merge pull request #3419 from xmo-odoo/patch-1
Link to inserting raw HTML document
2015-03-16 16:24:13 -07:00
Jim
9e0954abdd Merge pull request #3422 from jviereck/doc-typo-fix
Fix small typo ("of" instead of "or")
2015-03-16 16:24:08 -07:00
Paul O’Shannessy
71f65d3da6 Merge pull request #3394 from cody/getDOMNode
Fix in docs: getDOMNode --> findDOMNode
2015-03-16 16:24:03 -07:00
Paul O’Shannessy
fe8d706c1c v0.13 starter kit 2015-03-10 14:47:44 -07:00
Paul O’Shannessy
edb8f7f4af v0.13.0 2015-03-10 14:45:29 -07:00
Paul O’Shannessy
594f816930 Update readme for 0.13 2015-03-10 14:45:29 -07:00
Paul O’Shannessy
94bf54a328 shrinkwrap 2015-03-10 14:45:29 -07:00
934 changed files with 49692 additions and 95641 deletions

View File

@@ -1,27 +0,0 @@
{
"presets": ["react"],
"ignore": ["third_party"],
"plugins": [
"fbjs-scripts/babel-6/dev-expression",
"syntax-trailing-function-commas",
"babel-plugin-transform-object-rest-spread",
"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

@@ -6,7 +6,6 @@ charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
max_line_length = 80
trim_trailing_whitespace = true

View File

@@ -1,16 +1,21 @@
# We can probably lint these later but not important at this point
src/shared/vendor
src/vendor
# eslint uses JSX* node types to determine if using JSX. esprima-fb still uses
# XJS* nodes. When we fix that (https://github.com/facebook/esprima/pull/85) we
# can enable linting the tests and fix those errors.
src/**/__tests__/**
# This should be enabled but that folder has too much in it that doesn't belong
src/test
test/the-files-to-test.generated.js
# This is synced with a different file internally, don't want to lint it yet
vendor/fbtransform/syntax.js
vendor/jasmine/
vendor/jasmine-jsreporter/
# But not in docs/_js/examples/*
docs/_js/*.js
docs/js/
docs/_site/
# gems
docs/vendor/bundle/
# This should be more like examples/**/thirdparty/** but
# we should fix https://github.com/facebook/esprima/pull/85 first
examples/
# Ignore built files.
build/
coverage/
scripts/bench/bench-*.js
vendor/*

51
.eslintrc Normal file
View File

@@ -0,0 +1,51 @@
---
parser: esprima-fb
env:
browser: true
node: true
globals:
__DEV__: true
rules:
# ERRORS
space-before-blocks: 2
indent: [2, 2, indentSwitchCase: true]
brace-style: 2
space-after-keywords: 2
strict: 2
# We actually have a transform to support this and we fix this for bundled
# releases but not for the npm package, so enforce it strictly
no-comma-dangle: 2
# Make this a warning for now. We do this in a few places so we might need to
# disable
no-unused-expressions: 2
block-scoped-var: 2
eol-last: 2
dot-notation: 2
consistent-return: 2
no-unused-vars: [2, args: none]
quotes: [2, 'single']
# WARNINGS
# This is the only one that's hard to track since we don't lint just changes.
max-len: [1, 80]
# WISHLIST. One day...
# We'll need a custom version of this that does a subset of the whole rule.
# Otherwise this is just too noisy.
# valid-jsdoc: 1
# DISABLED. These aren't compatible with our style
# We use this for private/internal variables
no-underscore-dangle: 0
# We pass constructors around / access them from members
new-cap: 0
# We do this a lot.
no-use-before-define: 0
# We do this in a few places to align values
key-spacing: 0
# DISABLED. These currently cause errors when running.
no-multi-spaces: 0

View File

@@ -1,73 +0,0 @@
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,
}
};

6
.gitignore vendored
View File

@@ -7,7 +7,6 @@ static
_SpecRunner.html
__benchmarks__
build/
coverage/
.module-cache
*.gem
docs/.bundle
@@ -21,8 +20,3 @@ examples/shared/*.js
test/the-files-to-test.generated.js
*.log*
chrome-user-data
*.sublime-project
*.sublime-workspace
.idea
*.iml
.vscode

View File

@@ -1,119 +1,62 @@
Adam Timberlake <adam.timberlake@gmail.com>
Alex Mykyta <dancingwithcows@gmail.com>
Alex Pien <alexpien@gmail.com>
Alex Pien <alexpien@gmail.com> <pien@pien-mbp.dhcp.thefacebook.com>
Alex Pien <alexpien@gmail.com> <pien@pien-mbp.local>
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>
Jeff Morrison <jeff@anafx.com> <jeffmo@fb.com>
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>
Josh Duck <josh@fb.com> <github@joshduck.com>
Juan Serrano <germ13@users.noreply.github.com>
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>
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>
Minwe LUO <minwe@yunshipei.com>
Murray M. Moss <murray@mmoss.name> <MMoss@cainc.com>
Murray M. Moss <murray@mmoss.name> <mmoss@users.noreply.github.com>
Neri Marschik <marschik_neri@cyberagent.co.jp>
Nick Gavalas <njg57@cornell.edu>
Nick Thompson <ncthom91@gmail.com> <nickt@instagram.com>
Patrick Stapleton <github@gdi2290.com>
Paul OShannessy <paul@oshannessy.com> <poshannessy@fb.com>
Paul Shen <paul@mnml0.com> <paulshen@fb.com>
Pete Hunt <floydophone@gmail.com>
@@ -124,39 +67,23 @@ 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

@@ -1,7 +1,7 @@
---
language: node_js
node_js:
- 4
- '0.10'
sudo: false
cache:
directories:
@@ -15,8 +15,6 @@ before_install:
echo "Only docs were updated, stopping build process."
exit
fi
npm install -g npm@latest-2
npm --version
script:
- |
if [ "$TEST_TYPE" = build_website ]; then
@@ -43,46 +41,35 @@ script:
fi
popd
fi
elif [ "$TEST_TYPE" = build ]; then
if [ "$SERVER" ]; then
set -e
./node_modules/.bin/grunt build
curl \
-F "react=@build/react.js" \
-F "react.min=@build/react.min.js" \
-F "react-with-addons=@build/react-with-addons.js" \
-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 "npm-react-native=@build/packages/react-native-renderer.tgz" \
-F "commit=$TRAVIS_COMMIT" \
-F "date=`git log --format='%ct' -1`" \
-F "pull_request=$TRAVIS_PULL_REQUEST" \
-F "token=$SECRET_TOKEN" \
-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
grunt $TEST_TYPE
fi
after_script:
- |
if [ "$TEST_TYPE" = test ] && [ "$SERVER" ]; then
grunt build
curl \
-F "react=@build/react.js" \
-F "react.min=@build/react.min.js" \
-F "transformer=@build/JSXTransformer.js" \
-F "react-with-addons=@build/react-with-addons.js" \
-F "react-with-addons.min=@build/react-with-addons.min.js" \
-F "npm-react=@build/react.tgz" \
-F "npm-react-tools=@build/react-tools.tgz" \
-F "commit=$TRAVIS_COMMIT" \
-F "date=`git log --format='%ct' -1`" \
-F "pull_request=$TRAVIS_PULL_REQUEST" \
-F "token=$SECRET_TOKEN" \
-F "branch=$TRAVIS_BRANCH" \
$SERVER
fi
env:
matrix:
- TEST_TYPE=build
- TEST_TYPE=test
- TEST_TYPE=jest
- TEST_TYPE=lint
- TEST_TYPE=build_website
- TEST_TYPE=test:webdriver:saucelabs:modern
global:
# SERVER
- secure: qPvsJ46XzGrdIuPA70b55xQNGF8jcK7N1LN5CCQYYocXLa+fBrl+fTE77QvehOPhqwJXcj6kOxI+sY0KrVwV7gmq2XY2HZGWUSCxTN0SZlNIzqPA80Y7G/yOjA4PUt8LKgP+8tptyhTAY56qf+hgW8BoLiKOdztYF2p+3zXOLuA=
@@ -90,8 +77,18 @@ env:
- secure: dkpPW+VnoqC/okhRdV90m36NcyBFhcwEKL3bNFExAwi0dXnFao8RoFlvnwiPlA23h2faROkMIetXlti6Aju08BgUFV+f9aL6vLyU7gUent4Nd3413zf2fwDtXIWIETg6uLnOpSykGKgCAT/hY3Q2oPLqOoY0OxfgnbqwxkxljrE=
# GITHUB_TOKEN
- secure: EHCyCSKMwKlLHNtcj9nmkRzmiiPE3aDGlPcnEyrDJeRI0SeN/iCXHXfFivR0vFq3vr+9naMBczAR2AEidtps5KbJrKqdZnjPFRbmfVtzWr/LlvVCub3u13Pub6TdKIVBTny1PuZ5X8GvdxMNVig89jGjvzhhWuQRaz3VhJnTra4=
# COVERALLS_TOKEN
- secure: h/cUq+TrUMZOQmkFD7CvuwX0uAwmjIfKZ4qSUzY+QzUtDzOzA0L/XF84xTBq1Q5YYsEiaoF6GxxGCdrLQiBA/ZTd+88UHgeZPMRvi0xG9Q+PeePVOsZMTxy4/WWFgOfSQCk49Mj9zizGgO78i6vxq+SDXMtFHnZ+TpPJIEW6/m0=
matrix:
fast_finish: true
allow_failures:
- env: TEST_TYPE=test:coverage
- env: TEST_TYPE=perf:full
- env: TEST_TYPE=test:webdriver:saucelabs:modern
- env: TEST_TYPE=test:webdriver:saucelabs BROWSER_NAME=ie11
- env: TEST_TYPE=test:webdriver:saucelabs BROWSER_NAME=ie10
- env: TEST_TYPE=test:webdriver:saucelabs BROWSER_NAME=ie9
- env: TEST_TYPE=test:webdriver:saucelabs BROWSER_NAME=ie8
- env: TEST_TYPE=test:webdriver:saucelabs:ios
- env: TEST_TYPE=test:webdriver:saucelabs BROWSER_NAME=safari
notifications:
irc:
use_notice: true

361
AUTHORS
View File

@@ -1,92 +1,45 @@
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>
Alex Smith <iqwz@ya.ru>
Alex Zelenskiy <azelenskiy@fb.com>
Alexander Shtuchkin <ashtuchkin@gmail.com>
Alexander Solovyov <alexander@solovyov.net>
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>
Arian Faurtosh <arian@icloud.com>
Artem Nezvigin <artem@artnez.com>
Austin Wright <aaa@bzfx.net>
Ayman Osman <aymano.osman@gmail.com>
Baraa Hamodi <bhamodi@uwaterloo.ca>
Bartosz Kaszubowski <gosimek@gmail.com>
Basarat Ali Syed <basaratali@gmail.com>
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>
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>
@@ -97,412 +50,205 @@ 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>
Chris Sciolla <csciolla1@gmail.com>
Christian <christianoliff@yahoo.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>
Dan Fox <iamdanfox@gmail.com>
Dan Schafer <dschafer@fb.com>
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>
Daniel Miladinov <dmiladinov@wingspan.com>
Daniel Rodgers-Pryor <djrodgerspryor@gmail.com>
Daniel Schonfeld <daniel@schonfeld.org>
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>
Eduardo Garcia <emumaniacx@gmail.com>
Edvin Erikson <edvin@rocketblast.com>
Elaine Fang <elainefang@Elaines-MacBook-Pro.local>
Enguerran <engcolson@gmail.com>
Eric Clemmons <eric@smarterspam.com>
Eric Eastwood <contact@ericeastwood.com>
Eric Florenzano <floguy@gmail.com>
Eric O'Connell <eric.oconnell@idealist.org>
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>
Felix Gnass <fgnass@gmail.com>
Felix Kling <felix.kling@gmx.net>
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>
Georgii Dolzhykov <thorn.mailbox@gmail.com>
Gilbert <gilbertbgarza@gmail.com>
Glen Mailer <glenjamin@gmail.com>
Grant Timmerman <granttimmerman@gmail.com>
Greg Hurrell <glh@fb.com>
Greg Perkins <gregrperkins@fb.com>
Greg Roodt <groodt@gmail.com>
Gregory <g.marcilhacy@gmail.com>
Guangqiang Dong <gqdong@fb.com>
Guido Bouman <m@guido.vc>
Harry Hull <harry.hull1@gmail.com>
Harry Marr <harry.marr@gmail.com>
Harry Moreno <morenoh149@gmail.com>
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>
Jan Hancic <jan.hancic@gmail.com>
Jan Kassens <jan@kassens.net>
Jan Raasch <jan@janraasch.com>
Jared Forsyth <jared@jaredforsyth.com>
Jason <usaman2010us@gmail.com>
Jason Bonta <jbonta@gmail.com>
Jason Ly <jason.ly@gmail.com>
Jason Miller <aidenn0@geocities.com>
Jason Quense <monastic.panic@gmail.com>
Jason Trill <jason@jasontrill.com>
Jason Webster <jason@metalabdesign.com>
Jay Jaeho Lee <jay@spoqa.com>
Jean Lauliac <lauliacj@gmail.com>
Jed Watson <jed.watson@me.com>
Jeff Barczewski <jeff.barczewski@gmail.com>
Jeff Carpenter <gcarpenterv@gmail.com>
Jeff Chan <jefftchan@gmail.com>
Jeff Hicken <jhicken@gmail.com>
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>
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>
Jon Madison <jon@tfftech.com>
Jon Scott Clark <jonscottclark@gmail.com>
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>
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>
João Valente <filipevalente@gmail.com>
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>
Kyle Mathews <mathews.kyle@gmail.com>
Laurence Rowe <l@lrowe.co.uk>
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>
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 <mfunk86@gmail.com>
Mark Funk <mark@boomtownroi.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>
Matthew Johnston <matthewjohnston4@users.noreply.github.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>
Niklas Boström <nbostrom@gmail.com>
Ning Xia <ning-github@users.noreply.github.com>
Niole Nelson <niolenelson@gmail.com>
Oiva Eskola <oiva.eskola@gmail.com>
Oleg <o.yanchinskiy@gmail.com>
Oleksii Markhovskyi <olexiy.markhovsky@gmail.com>
Oliver Zeigermann <oliver.zeigermann@gmail.com>
Olivier Tassinari <Olivier.tassinari@gmail.com>
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>
Paul Shen <paul@mnml0.com>
@@ -511,186 +257,87 @@ 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>
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>
Sander Spies <sandermail@gmail.com>
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>
Seyi Adebajo <hello@seyinanigans.com>
Shane O'Sullivan <shaneosullivan1@gmail.com>
Shaun Trennery <shaun.trennery@gmail.com>
Sheraz <undernewmanagement@users.noreply.github.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>
Sven Helmberger <fforw@gmx.de>
Sverre Johansen <sverre.johansen@gmail.com>
Sébastien Lorber <lorber.sebastien@gmail.com>
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>
Thomas Shafer <thomasjshafer@gmail.com>
ThomasCrvsr <crevoisier.thomas@gmail.com>
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>
Tsung Hung <thung@me.com>
Tyler Brock <tyler.brock@gmail.com>
Ustin Zarubin <ustin.zarubin@campusbellhops.com>
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>
Wout Mertens <Wout.Mertens@gmail.com>
Xavier Morel <xmo-odoo@users.noreply.github.com>
XuefengWu <benewu@gmail.com>
Yakov Dalinchuk <murashki@users.noreply.github.com>
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>
clariroid <clarinette.uranus@gmail.com>
claudiopro <claudio.procida@gmail.com>
cutbko <kutsenko.eugene@hotmail.com>
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,279 +1,3 @@
## 15.0.2 (April 29, 2016)
### React
- Removed extraneous files from npm package. ([@gaearon](https://github.com/gaearon) in [#6388](https://github.com/facebook/react/pull/6388))
- Ensure `componentWillUnmount` is only called once. ([@jimfb](https://github.com/jimfb) in [#6613](https://github.com/facebook/react/pull/6613))
### ReactDOM
- Fixed bug resulting in disabled buttons responding to mouse events in IE. ([@nhunzaker](https://github.com/nhunzaker) in [#6215](https://github.com/facebook/react/pull/6215))
- Ensure `<option>`s are correctly selected when inside `<optgroup>`. ([@trevorsmith](https://github.com/trevorsmith) in [#6442](https://github.com/facebook/react/pull/6442))
- Restore support for rendering into a shadow root. ([@Wildhoney](https://github.com/Wildhoney) in [#6462](https://github.com/facebook/react/pull/6462))
- Ensure nested `<body>` elements are caught when warning for invalid markup. ([@keyanzhang](https://github.com/keyanzhang) in [#6469](https://github.com/facebook/react/pull/6469))
- Improve warning when encountering multiple elements with the same key. ([@hkal](https://github.com/hkal) in [#6500](https://github.com/facebook/react/pull/6500))
### React TestUtils Add-on
- Ensure that functional components do not have an owner. ([@gaearon](https://github.com/gaearon) in [#6362](https://github.com/facebook/react/pull/6362))
- Handle invalid arguments to `scryRenderedDOMComponentsWithClass` better. ([@ipeters90](https://github.com/ipeters90) in [#6529](https://github.com/facebook/react/pull/6529))
### React Perf Add-on
- Ignore DOM operations that occur outside the batch operation. ([@gaearon](https://github.com/gaearon) in [#6516](https://github.com/facebook/react/pull/6516))
### React Native Renderer
- These files are now shipped inside the React npm package. They have no impact on React core or ReactDOM.
## 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 separate packages (`react-addons-clone-with-props`, `react-addons-create-fragment`, `react-addons-css-transition-group`, `react-addons-linked-state-mixin`, `react-addons-perf`, `react-addons-pure-render-mixin`, `react-addons-shallow-compare`, `react-addons-test-utils`, `react-addons-transition-group`, `react-addons-update`, `ReactDOM.unstable_batchedUpdates`).
- Stateless functional components - React components were previously created using React.createClass or using ES6 classes. This release adds a [new syntax](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions) where a user defines a single [stateless render function](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions) (with one parameter: `props`) which returns a JSX element, and this function may be used as a component.
- 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
@@ -368,7 +92,7 @@ Each of these changes will continue to work as before with a new warning until t
* 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](https://facebook.github.io/react/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement) for more details.
* Added a new top-level API `React.cloneElement(el, props)` for making copies of React elements see the [v0.13 RC2 notes](/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.
@@ -382,7 +106,7 @@ Each of these changes will continue to work as before with a new warning until t
#### New Features
* [`React.addons.createFragment` was added](https://facebook.github.io/react/docs/create-fragment.html) for adding keys to entire sets of children.
* [`React.addons.createFragment` was added](/react/docs/create-fragment.html) for adding keys to entire sets of children.
#### Deprecations
@@ -402,12 +126,6 @@ Each of these changes will continue to work as before with a new warning until t
* `es3` restores the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg `this.static` will become `this['static']` for IE8 compatibility).
* The transform for the call spread operator has also been enabled.
### JSXTransformer
#### Breaking Changes
* The return value of `transform` now contains `sourceMap` as a JS object already, not an instance of `SourceMapGenerator`.
### JSX
#### Breaking Changes

View File

@@ -1,10 +1,6 @@
# Contributing to React
React is one of Facebook's first open source projects that is both under very active development and is also being used to ship code to everybody on [facebook.com](https://www.facebook.com). We're still working out the kinks to make contributing to this project as easy and transparent as possible, but we're not quite there yet. Hopefully this document makes the process for contributing clear and answers some questions that you may have.
## [Code of Conduct](https://code.facebook.com/codeofconduct)
Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read [the full text](https://code.facebook.com/codeofconduct) so that you can understand what actions will and will not be tolerated.
React is one of Facebook's first open source projects that is both under very active development and is also being used to ship code to everybody on [facebook.com](https://www.facebook.com). We're still working out the kinks to make contributing to this project as easy and transparent as possible, but we're not quite there yet. Hopefully this document makes the process for contributing clear and preempts some questions you may have.
## Our Development Process
@@ -14,24 +10,8 @@ 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…
@@ -43,11 +23,11 @@ The core team will be monitoring for pull requests. When we get one, we'll run s
5. Make sure your code lints (`grunt lint`) - we've done our best to make sure these rules match our internal linting guidelines.
6. If you haven't already, complete the CLA.
### Contributor License Agreement (CLA)
### Contributor License Agreement ("CLA")
In order to accept your pull request, we need you to submit a CLA. You only need to do this once, so if you've done this for another Facebook open source project, you're good to go. If you are submitting a pull request for the first time, just let us know that you have completed the CLA and we can cross-check with your GitHub username.
[Complete your CLA here.](https://code.facebook.com/cla)
[Complete your CLA here](https://code.facebook.com/cla)
## Bugs
@@ -68,27 +48,17 @@ 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.
You can check the status of your code styling by simply running: `grunt lint`
### Code
However, there are still some styles that the linter cannot pick up. If you are unsure about something, looking at [Airbnb's Style Guide](https://github.com/airbnb/javascript) will guide you in the right direction.
### Code Conventions
* Use semicolons `;`
* Commas last `,`
* Use semicolons;
* Commas last,
* 2 spaces for indentation (no tabs)
* Prefer `'` over `"`
* `'use strict';`
* 80 character line length
* Write "attractive" code
* "Attractive"
* Do not use the optional parameters of `setTimeout` and `setInterval`
### Documentation

View File

@@ -1,46 +1,45 @@
'use strict';
var path = require('path');
var GULP_EXE = 'gulp';
if (process.platform === 'win32') {
GULP_EXE += '.cmd';
}
var jsxTask = require('./grunt/tasks/jsx');
var browserifyTask = require('./grunt/tasks/browserify');
var populistTask = require('./grunt/tasks/populist');
var webdriverPhantomJSTask = require('./grunt/tasks/webdriver-phantomjs');
var webdriverJasmineTasks = require('./grunt/tasks/webdriver-jasmine');
var sauceTunnelTask = require('./grunt/tasks/sauce-tunnel');
var npmTask = require('./grunt/tasks/npm');
var releaseTasks = require('./grunt/tasks/release');
var npmReactTasks = require('./grunt/tasks/npm-react');
var npmReactToolsTasks = require('./grunt/tasks/npm-react-tools');
var versionCheckTask = require('./grunt/tasks/version-check');
var gemReactSourceTasks = require('./grunt/tasks/gem-react-source');
var eslintTask = require('./grunt/tasks/eslint');
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jsx: require('./grunt/config/jsx'),
browserify: require('./grunt/config/browserify'),
populist: require('./grunt/config/populist')(grunt),
connect: require('./grunt/config/server')(grunt),
'webdriver-jasmine': require('./grunt/config/webdriver-jasmine'),
'webdriver-perf': require('./grunt/config/webdriver-perf'),
npm: require('./grunt/config/npm'),
clean: [
'./build',
'./*.gem',
'./docs/_site',
'./examples/shared/*.js',
'.module-cache',
'.module-cache'
],
'compare_size': require('./grunt/config/compare_size'),
jshint: require('./grunt/config/jshint'),
/*eslint-disable camelcase */
compare_size: require('./grunt/config/compare_size')
/*eslint-enable camelcase */
});
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_EXE),
args: args,
opts: Object.assign({stdio: 'inherit'}, opts),
}, function(err, result, code) {
if (err) {
grunt.fail.fatal('Something went wrong running gulp: ', result);
}
done(code === 0);
});
}
Object.keys(grunt.file.readJSON('package.json').devDependencies)
.filter(function(npmTaskName) {
return npmTaskName.indexOf('grunt-') === 0;
@@ -52,94 +51,227 @@ module.exports = function(grunt) {
grunt.loadNpmTasks(npmTaskName);
});
grunt.registerTask('eslint', require('./grunt/tasks/eslint'));
grunt.registerTask('eslint', eslintTask);
grunt.registerTask('lint', ['eslint']);
grunt.registerTask(
'download-previous-version',
require('./grunt/tasks/download-previous-version.js')
);
grunt.registerTask('delete-build-modules', function() {
// Use gulp here.
spawnGulp(['react:clean'], null, this.async());
if (grunt.file.exists('build/modules')) {
grunt.file.delete('build/modules');
}
});
// Our own browserify-based tasks to build a single JS file build.
grunt.registerMultiTask('browserify', require('./grunt/tasks/browserify'));
// Register jsx:normal and :release tasks.
grunt.registerMultiTask('jsx', jsxTask);
grunt.registerMultiTask('npm', require('./grunt/tasks/npm'));
// Our own browserify-based tasks to build a single JS file build
grunt.registerMultiTask('browserify', browserifyTask);
grunt.registerMultiTask('populist', populistTask);
grunt.registerTask('sauce-tunnel', sauceTunnelTask);
grunt.registerMultiTask('webdriver-jasmine', webdriverJasmineTasks);
grunt.registerMultiTask('webdriver-perf', require('./grunt/tasks/webdriver-perf'));
grunt.registerMultiTask('npm', npmTask);
var npmReactTasks = require('./grunt/tasks/npm-react');
grunt.registerTask('npm-react:release', npmReactTasks.buildRelease);
grunt.registerTask('npm-react:pack', npmReactTasks.packRelease);
grunt.registerTask('npm-react-tools:release', npmReactToolsTasks.buildRelease);
grunt.registerTask('npm-react-tools:pack', npmReactToolsTasks.packRelease);
grunt.registerTask('gem-react-source:release', gemReactSourceTasks.buildRelease);
grunt.registerTask('gem-react-source:pack', gemReactSourceTasks.packRelease);
var npmReactDOMTasks = require('./grunt/tasks/npm-react-dom');
grunt.registerTask('npm-react-dom:release', npmReactDOMTasks.buildRelease);
grunt.registerTask('npm-react-dom:pack', npmReactDOMTasks.packRelease);
var npmReactNativeTasks = require('./grunt/tasks/npm-react-native');
grunt.registerTask('npm-react-native:release', npmReactNativeTasks.buildRelease);
grunt.registerTask('npm-react-native:pack', npmReactNativeTasks.packRelease);
var npmReactAddonsTasks = require('./grunt/tasks/npm-react-addons');
grunt.registerTask('npm-react-addons:release', npmReactAddonsTasks.buildReleases);
grunt.registerTask('npm-react-addons:pack', npmReactAddonsTasks.packReleases);
grunt.registerTask('version-check', require('./grunt/tasks/version-check'));
grunt.registerTask('version-check', versionCheckTask);
grunt.registerTask('build:basic', [
'build-modules',
'jsx:normal',
'version-check',
'browserify:basic',
'browserify:basic'
]);
grunt.registerTask('build:addons', [
'build-modules',
'browserify:addons',
'jsx:normal',
'browserify:addons'
]);
grunt.registerTask('build:transformer', [
'jsx:normal',
'browserify:transformer'
]);
grunt.registerTask('build:min', [
'build-modules',
'jsx:normal',
'version-check',
'browserify:min',
'browserify:min'
]);
grunt.registerTask('build:addons-min', [
'build-modules',
'browserify:addonsMin',
'jsx:normal',
'browserify:addonsMin'
]);
grunt.registerTask('build:withCodeCoverageLogging', [
'jsx:normal',
'version-check',
'browserify:withCodeCoverageLogging'
]);
grunt.registerTask('build:perf', [
'jsx:normal',
'version-check',
'browserify:transformer',
'browserify:basic',
'browserify:min',
'download-previous-version'
]);
grunt.registerTask('build:test', [
'delete-build-modules',
'jsx:test',
'version-check',
'populist:test'
]);
grunt.registerTask('build:npm-react', [
'version-check',
'build-modules',
'npm-react:release',
'jsx:normal',
'npm-react:release'
]);
grunt.registerTask('build:gem-react-source', [
'build',
'gem-react-source:release'
]);
grunt.registerTask('build:react-dom', require('./grunt/tasks/react-dom'));
var jestTasks = require('./grunt/tasks/jest');
grunt.registerTask('jest:normal', jestTasks.normal);
grunt.registerTask('jest:coverage', jestTasks.coverage);
grunt.registerTask('webdriver-phantomjs', webdriverPhantomJSTask);
grunt.registerTask('test', ['jest:normal']);
grunt.registerTask('coverage:parse', require('./grunt/tasks/coverage-parse'));
grunt.registerTask('test:webdriver:phantomjs', [
'connect',
'webdriver-phantomjs',
'webdriver-jasmine:local'
]);
grunt.registerTask('perf:webdriver:phantomjs', [
'connect',
'webdriver-phantomjs',
'webdriver-perf:local'
]);
grunt.registerTask('test:full', [
'build:test',
'build:basic',
'connect',
'webdriver-phantomjs',
'webdriver-jasmine:local',
'sauce-tunnel',
'webdriver-jasmine:saucelabs_android',
'webdriver-jasmine:saucelabs_firefox',
'webdriver-jasmine:saucelabs_chrome'
]);
grunt.registerTask('perf:full', [
'build:perf',
'connect',
'webdriver-phantomjs',
'webdriver-perf:local',
'sauce-tunnel',
'webdriver-perf:saucelabs_firefox',
'webdriver-perf:saucelabs_chrome',
'webdriver-perf:saucelabs_ie11',
'webdriver-perf:saucelabs_ie8'
]);
grunt.registerTask('test:webdriver:saucelabs', [
'build:test',
'build:basic',
'connect',
'sauce-tunnel',
'webdriver-jasmine:saucelabs_' + (process.env.BROWSER_NAME || 'ie8')
]);
grunt.registerTask('test:webdriver:saucelabs:modern', [
'build:test',
'build:basic',
'connect',
'sauce-tunnel',
'webdriver-jasmine:saucelabs_android',
'webdriver-jasmine:saucelabs_firefox',
'webdriver-jasmine:saucelabs_chrome',
'webdriver-jasmine:saucelabs_ie11'
]);
grunt.registerTask('test:webdriver:saucelabs:ie', [
'build:test',
'build:basic',
'connect',
'sauce-tunnel',
'webdriver-jasmine:saucelabs_ie8',
'webdriver-jasmine:saucelabs_ie9',
'webdriver-jasmine:saucelabs_ie10',
'webdriver-jasmine:saucelabs_ie11'
]);
grunt.registerTask('test:webdriver:saucelabs:ios', [
'build:test',
'build:basic',
'connect',
'sauce-tunnel',
'webdriver-jasmine:saucelabs_ios6_1',
'webdriver-jasmine:saucelabs_ios5_1',
'webdriver-jasmine:saucelabs_ios4'
]);
grunt.registerTask('test:coverage', [
'build:test',
'build:withCodeCoverageLogging',
'test:webdriver:phantomjs',
'coverage:parse'
]);
grunt.registerTask('fasttest', function() {
if (grunt.option('debug')) {
grunt.task.run('build:test', 'connect:server:keepalive');
} else {
grunt.task.run('build:test', 'test:webdriver:phantomjs');
}
});
grunt.registerTask('test', function() {
if (grunt.option('debug')) {
grunt.task.run('build:test', 'build:basic', 'connect:server:keepalive');
} else {
grunt.task.run('build:test', 'build:basic', 'test:webdriver:phantomjs');
}
});
grunt.registerTask('perf', ['build:perf', 'perf:webdriver:phantomjs']);
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.
// in order so we can take advantage of that and only run jsx:normal once.
grunt.registerTask('build', [
'delete-build-modules',
'build-modules',
'jsx:normal',
'version-check',
'browserify:basic',
'browserify:transformer',
'browserify:addons',
'browserify:min',
'browserify:addonsMin',
'build:react-dom',
'npm-react:release',
'npm-react:pack',
'npm-react-dom:release',
'npm-react-dom:pack',
'npm-react-native:release',
'npm-react-native:pack',
'npm-react-addons:release',
'npm-react-addons:pack',
'compare_size',
'npm-react-tools:release',
'npm-react-tools:pack',
'compare_size'
]);
// Automate the release!
var releaseTasks = require('./grunt/tasks/release');
grunt.registerTask('release:setup', releaseTasks.setup);
grunt.registerTask('release:bower', releaseTasks.bower);
grunt.registerTask('release:docs', releaseTasks.docs);
@@ -150,17 +282,15 @@ module.exports = function(grunt) {
'release:setup',
'clean',
'build',
'gem-react-source:release',
'gem-react-source:pack',
'release:bower',
'release:starter',
'compress',
'release:docs',
'release:msg',
'release:msg'
]);
grunt.registerTask('build-modules', function() {
spawnGulp(['react:modules'], null, this.async());
});
// The default task - build - to keep setup easy.
// The default task - build - to keep setup easy
grunt.registerTask('default', ['build']);
};

View File

@@ -2,7 +2,7 @@ BSD License
For React software
Copyright (c) 2013-present, Facebook, Inc.
Copyright (c) 2013-2015, 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://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](https://facebook.github.io/react/) [![Build Status](https://travis-ci.org/facebook/react.svg?branch=0.13-stable)](https://travis-ci.org/facebook/react)
React is a JavaScript library for building user interfaces.
@@ -8,7 +8,7 @@ React is a JavaScript library for building user interfaces.
**NEW**! Check out our newest project [React Native](https://github.com/facebook/react-native), which uses React and JavaScript to create native mobile apps.
[Learn how to use React in your own project](https://facebook.github.io/react/docs/getting-started.html).
[Learn how to use React in your own project.](https://facebook.github.io/react/docs/getting-started.html).
## Examples
@@ -21,7 +21,7 @@ var HelloMessage = React.createClass({
}
});
ReactDOM.render(
React.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](https://www.jsdelivr.com/projects/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](http://www.jsdelivr.com/#!react)):
```html
<!-- The core React library -->
<script src="https://fb.me/react-15.0.2.js"></script>
<!-- The ReactDOM Library -->
<script src="https://fb.me/react-dom-15.0.2.js"></script>
<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>
```
We've also built a [starter kit](https://facebook.github.io/react/downloads/react-15.0.2.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-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.
If you'd like to use [bower](http://bower.io), it's as easy as:
@@ -50,12 +50,6 @@ 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.
@@ -66,7 +60,7 @@ The process to build `react.js` is built entirely on top of node.js, using many
#### Prerequisites
* You have `node` installed at v4.0.0+ and `npm` at v2.0.0+.
* You have `node` installed at v0.10.0+ (it might work at lower versions, we just haven't tested).
* You are familiar with `npm` and know whether or not you need to use `sudo` when installing packages globally.
* You are familiar with `git`.
@@ -90,16 +84,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
# For speed, you can use fasttest and add --filter to only run one test
grunt fasttest --filter=ReactIdentity
# 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).
@@ -111,6 +105,3 @@ Examples provided in this repository and in the documentation are [separately li
### More…
There's only so much we can cram in here. To read more about the community and guidelines for submitting pull requests, please read the [Contributing document](CONTRIBUTING.md).
## Troubleshooting
See the [Troubleshooting Guide](https://github.com/facebook/react/wiki/Troubleshooting)

51
bin/jsx Executable file
View File

@@ -0,0 +1,51 @@
#!/usr/bin/env node
// -*- mode: js -*-
'use strict';
var transform = require('../main').transform;
require('commoner').version(
require('../package.json').version
).resolve(function(id) {
return this.readModuleP(id);
}).option(
'--harmony',
'Turns on JS transformations such as ES6 Classes etc.'
).option(
'--target [version]',
'Specify your target version of ECMAScript. Valid values are "es3" and ' +
'"es5". The default is "es5". "es3" will avoid uses of defineProperty and ' +
'will quote reserved words. WARNING: "es5" is not properly supported, even ' +
'with the use of es5shim, es5sham. If you need to support IE8, use "es3".',
'es5'
).option(
'--strip-types',
'Strips out type annotations.'
).option(
'--es6module',
'Parses the file as a valid ES6 module. ' +
'(Note that this means implicit strict mode)'
).option(
'--non-strict-es6module',
'Parses the file as an ES6 module, except disables implicit strict-mode. ' +
'(This is useful if you\'re porting non-ES6 modules to ES6, but haven\'t ' +
'yet verified that they are strict-mode safe yet)'
).option(
'--source-map-inline',
'Embed inline sourcemap in transformed source'
).process(function(id, source) {
// This is where JSX, ES6, etc. desugaring happens.
// We don't do any pre-processing of options so that the command line and the
// JS API both expose the same set of options. We do extract the options that
// we care about from commoner though so we aren't passing too many things
// along.
var options = {
harmony: this.options.harmony,
sourceMap: this.options.sourceMapInline,
stripTypes: this.options.stripTypes,
es6module: this.options.es6module,
nonStrictEs6module: this.options.nonStrictEs6module,
target: this.options.target
};
return transform(source, options);
});

57
bin/jsx-internal Executable file
View File

@@ -0,0 +1,57 @@
#!/usr/bin/env node
// -*- mode: js -*-
"use strict";
var transform = require('../main').transform;
var propagate = require("../vendor/constants").propagate;
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;
var constants = context.config.constants || {};
// This is where JSX, ES6, etc. desugaring happens.
source = transform(source, {harmony: true, stripTypes: true});
// Constant propagation means removing any obviously dead code after
// replacing constant expressions with literal (boolean) values.
source = propagate(constants, source);
if (context.config.mocking) {
// Make sure there is exactly one newline at the end of the module.
source = source.replace(/\s+$/m, "\n");
return context.getProvidedP().then(function(idToPath) {
if (id !== "mock-modules" &&
id !== "mocks" &&
id !== "test/all" &&
idToPath.hasOwnProperty("mock-modules")) {
return source + '\nrequire("mock-modules").register(' +
JSON.stringify(id) + ', module);\n';
}
return source;
});
}
return source;
});

View File

@@ -21,7 +21,7 @@ Once you have RubyGems and installed Bundler (via `gem install bundler`), use it
```sh
$ cd react/docs
$ bundle install # Might need sudo.
$ npm install
$ npm install # Might need sudo.
```
### Instructions

View File

@@ -1,24 +1,16 @@
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
desc "watch js"
task :watch do
Process.spawn "../node_modules/.bin/babel _js --out-dir=js --watch"
Process.spawn "../bin/jsx --watch --harmony _js js"
Process.waitall
end
@@ -32,25 +24,6 @@ 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/,'')}
@@ -62,7 +35,7 @@ task :update_acknowledgements do
end
desc "build into ../../react-gh-pages"
task :release => [:update_version, :js, :fetch_remotes] do
task :release => [:update_version, :default] do
system "jekyll build -d ../../react-gh-pages"
end

View File

@@ -36,13 +36,4 @@ sass:
sass_dir: _css
gems:
- jekyll-redirect-from
react_version: 15.0.1
react_hashes:
dev: PcrCc8vAh3jounTGQGibvUE4liSu8s91ycPotf/cfEHdSnq9qaW2c9tFr3oyDzW4
prod: S9sTQnq5vvBUhj91S9s9dhE4fiZWgytnfFyIW7hu3Vk5leHzq03A9dULSd0IqW9N
addons_dev: TUMXymomVw+mFbSSojSWXtBVJiWEfUKUYzgZsgvUsdD9fL/y0PPc55825Ui2ZPY6
addons_prod: rBjtXXl33XbsJR2IbEYJRYH5VnUUMi4o6Zr7ai4UPxcrY0Cw3QpnaU9iIJ2GcyLy
dom_dev: ukADzi8g85qHW1NDinecbLJu/a+yfhgXK6G2Kl7vCckNICr4Pt1hN7mpfPzsgbD2
dom_prod: n1Sg+vSen3Mb4Ggzsi2jq4MHCXmlKD0spQXmiYaPSt/8WR7PzpwLTmH8OI+yAluA
dom_server_dev: eQOoGEpIR1fqOenVhLKRmPctitl54hZLIFg9uMYElEMx0r175Qedt3utJwCjsSrr
dom_server_prod: 41Tbqk6dOco41BSH7Fb2xAWh8PJTYntH+OR/m80NT+L5IF6XWcq/kvNZGzhBws60
react_version: 0.13.3

View File

@@ -1,93 +1,46 @@
---
- - '839'
- Aaron Franks
- Aaron Gelter
- Adam Bloomston
- - Aaron Franks
- 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
@@ -98,412 +51,205 @@
- 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
- - Morhaus
- Moshe Kolodny
- Mouad Debbar
- Murad
- Murray M. Moss
- - Mouad Debbar
- 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
@@ -512,186 +258,87 @@
- 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,9 +1,8 @@
# 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.
benigeri:
name: Paul Benigeri
url: https://github.com/benigeri
billandjing:
name: Bill Fisher and Jing Chen
chenglou:
name: Cheng Lou
url: https://twitter.com/_chenglou
@@ -13,21 +12,14 @@ 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
jimfb:
name: Jim Sproch
url: http://www.jimsproch.com
jingc:
name: Jing Chen
url: https://twitter.com/jingc
jimandsebastian:
name: Jim Sproch and Sebastian Markbåge
josephsavona:
name: Joseph Savona
url: https://twitter.com/en_JS

View File

@@ -14,10 +14,8 @@
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
@@ -45,16 +43,9 @@
title: Working With the Browser
subitems:
- id: more-about-refs
title: Refs to Components
title: More About Refs
- id: tooling-integration
title: Tooling Integration
subitems:
- id: language-tooling
title: Language Tooling
- id: package-management
title: Package Management
- id: environments
title: Server-side Environments
- id: addons
title: Add-Ons
subitems:
@@ -62,6 +53,8 @@
title: Animation
- id: two-way-binding-helpers
title: Two-Way Binding Helpers
- id: class-name-manipulation
title: Class Name Manipulation
- id: test-utils
title: Test Utilities
- id: clone-with-props
@@ -74,12 +67,8 @@
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
@@ -98,8 +87,6 @@
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

@@ -30,6 +30,8 @@
title: Communicate Between Components
- id: expose-component-functions
title: Expose Component Functions
- id: references-to-components
title: References to Components
- id: children-undefined
title: this.props.children undefined
- id: use-react-with-other-libraries

View File

@@ -1,4 +1,5 @@
{% assign page = include.page %}
{% assign author = site.data.authors[page.author] %}
<h1>
{% if include.isPermalink %}
@@ -11,14 +12,11 @@
<p class="meta">
{{ page.date | date: "%B %e, %Y" }}
by
{% 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 %}
{% if author.url %}
<a href="{{author.url}}">{{ author.name }}</a>
{% else %}
{{ author.name }}
{% endif %}
</p>
<hr>

View File

@@ -1,7 +1,3 @@
---
rules:
block-scoped-var: 0
no-undef: 0
strict: 0
react/react-in-jsx-scope: 0
react/jsx-no-undef: 0
block-scoped-var: false
no-undef: false

View File

@@ -5,10 +5,10 @@ var HelloMessage = React.createClass({
}
});
ReactDOM.render(<HelloMessage name="John" />, mountNode);
React.render(<HelloMessage name="John" />, mountNode);
`;
ReactDOM.render(
React.render(
<ReactPlayground codeText={HELLO_COMPONENT} />,
document.getElementById('helloExample')
);

View File

@@ -4,7 +4,7 @@ var MarkdownEditor = React.createClass({
return {value: 'Type some *markdown* here!'};
},
handleChange: function() {
this.setState({value: this.refs.textarea.value});
this.setState({value: React.findDOMNode(this.refs.textarea).value});
},
rawMarkup: function() {
return { __html: marked(this.state.value, {sanitize: true}) };
@@ -27,10 +27,10 @@ var MarkdownEditor = React.createClass({
}
});
ReactDOM.render(<MarkdownEditor />, mountNode);
React.render(<MarkdownEditor />, mountNode);
`;
ReactDOM.render(
React.render(
<ReactPlayground codeText={MARKDOWN_COMPONENT} />,
document.getElementById('markdownExample')
);

View File

@@ -19,10 +19,10 @@ var Timer = React.createClass({
}
});
ReactDOM.render(<Timer />, mountNode);
React.render(<Timer />, mountNode);
`;
ReactDOM.render(
React.render(
<ReactPlayground codeText={TIMER_COMPONENT} />,
document.getElementById('timerExample')
);

View File

@@ -1,8 +1,8 @@
var TODO_COMPONENT = `
var TodoList = React.createClass({
render: function() {
var createItem = function(item) {
return <li key={item.id}>{item.text}</li>;
var createItem = function(itemText, index) {
return <li key={index + itemText}>{itemText}</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([{text: this.state.text, id: Date.now()}]);
var nextItems = this.state.items.concat([this.state.text]);
var nextText = '';
this.setState({items: nextItems, text: nextText});
},
@@ -34,10 +34,10 @@ var TodoApp = React.createClass({
}
});
ReactDOM.render(<TodoApp />, mountNode);
React.render(<TodoApp />, mountNode);
`;
ReactDOM.render(
React.render(
<ReactPlayground codeText={TODO_COMPONENT} />,
document.getElementById('todoExample')
);

View File

@@ -1,5 +1,5 @@
/**
* Copyright 2013-present, Facebook, Inc.
* Copyright 2013-2015, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
@@ -78,5 +78,5 @@ var HELLO_COMPONENT = "\
}
});
ReactDOM.render(<HTMLtoJSXComponent />, document.getElementById('jsxCompiler'));
React.render(<HTMLtoJSXComponent />, document.getElementById('jsxCompiler'));
}());

View File

@@ -11,24 +11,24 @@ var IS_MOBILE = (
var CodeMirrorEditor = React.createClass({
propTypes: {
lineNumbers: React.PropTypes.bool,
onChange: React.PropTypes.func,
onChange: React.PropTypes.func
},
getDefaultProps: function() {
return {
lineNumbers: false,
lineNumbers: false
};
},
componentDidMount: function() {
if (IS_MOBILE) return;
this.editor = CodeMirror.fromTextArea(ReactDOM.findDOMNode(this.refs.editor), {
this.editor = CodeMirror.fromTextArea(React.findDOMNode(this.refs.editor), {
mode: 'javascript',
lineNumbers: this.props.lineNumbers,
lineWrapping: true,
smartIndent: false, // javascript mode does bad things with jsx indents
matchBrackets: true,
theme: 'solarized-light',
readOnly: this.props.readOnly,
readOnly: this.props.readOnly
});
this.editor.on('change', this.handleChange);
},
@@ -60,7 +60,7 @@ var CodeMirrorEditor = React.createClass({
{editor}
</div>
);
},
}
});
var selfCleaningTimeout = {
@@ -71,7 +71,7 @@ var selfCleaningTimeout = {
setTimeout: function() {
clearTimeout(this.timeoutID);
this.timeoutID = setTimeout.apply(null, arguments);
},
}
};
var ReactPlayground = React.createClass({
@@ -85,7 +85,7 @@ var ReactPlayground = React.createClass({
renderCode: React.PropTypes.bool,
showCompiledJSTab: React.PropTypes.bool,
showLineNumbers: React.PropTypes.bool,
editorTabTitle: React.PropTypes.string,
editorTabTitle: React.PropTypes.string
},
getDefaultProps: function() {
@@ -95,7 +95,7 @@ var ReactPlayground = React.createClass({
},
editorTabTitle: 'Live JSX Editor',
showCompiledJSTab: true,
showLineNumbers: false,
showLineNumbers: false
};
},
@@ -194,16 +194,16 @@ var ReactPlayground = React.createClass({
},
executeCode: function() {
var mountNode = ReactDOM.findDOMNode(this.refs.mount);
var mountNode = React.findDOMNode(this.refs.mount);
try {
ReactDOM.unmountComponentAtNode(mountNode);
React.unmountComponentAtNode(mountNode);
} catch (e) { }
try {
var compiledCode = this.compileCode();
if (this.props.renderCode) {
ReactDOM.render(
React.render(
<CodeMirrorEditor codeText={compiledCode} readOnly={true} />,
mountNode
);
@@ -212,11 +212,11 @@ var ReactPlayground = React.createClass({
}
} catch (err) {
this.setTimeout(function() {
ReactDOM.render(
React.render(
<div className="playgroundError">{err.toString()}</div>,
mountNode
);
}, 500);
}
},
}
});

View File

@@ -16,26 +16,23 @@
<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">
<script src="//use.typekit.net/vqa1hcx.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<!--[if lte IE 8]>
<script src="/react/js/html5shiv.min.js"></script>
<script src="/react/js/es5-shim.min.js"></script>
<script src="/react/js/es5-sham.min.js"></script>
<script type="text/javascript" src="/react/js/html5shiv.min.js"></script>
<script type="text/javascript" src="/react/js/es5-shim.min.js"></script>
<script type="text/javascript" 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>
<script src="/react/js/react-dom.js"></script>
<script src="/react/js/babel-browser.min.js"></script>
<script src="/react/js/live_editor.js"></script>
<script type="text/javascript" src="/react/js/babel-browser.min.js"></script>
<script type="text/javascript" src="/react/js/codemirror.js"></script>
<script type="text/javascript" src="/react/js/javascript.js"></script>
<script type="text/javascript" src="/react/js/react.js"></script>
<script type="text/javascript" src="/react/js/live_editor.js"></script>
</head>
<body>
@@ -52,14 +49,11 @@
<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>
<li><a href="https://facebook.github.io/react-native/">React Native</a></li>
<li><a href="https://github.com/facebook/react">GitHub</a>
<li><a href="https://facebook.github.io/react-native/">React Native</a>
</ul>
</div>
</div>
@@ -112,12 +106,6 @@
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

@@ -1,8 +0,0 @@
<!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

@@ -1,22 +0,0 @@
# This transforms the data associated with each post, specifically the author.
# We store our author information in a yaml file and specify the keys in The
# post front matter. Instead of looking up the complete data each time we need
# it, we'll just look it up here and assign. This plays nicely with tools like
# jekyll-feed which expect post.author to be in a specific format.
module Authors
class Generator < Jekyll::Generator
def generate(site)
site.posts.each do |post|
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
end

View File

@@ -4,14 +4,7 @@ module Jekyll
pageID = @context.registers[:page]["id"]
itemID = item["id"]
href = item["href"] || "/react/docs/#{itemID}.html"
classes = []
if pageID == itemID
classes.push("active")
end
if item["href"]
classes.push("external")
end
className = classes.size > 0 ? " class=\"#{classes.join(' ')}\"" : ""
className = pageID == itemID ? ' class="active"' : ''
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 writing _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 writting _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 containing 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 containg 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 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
> 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
>
> [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/v/rFvZydtmsxM) introduction to React Components. [[part 1](http://www.youtube-nocookie.com/v/rFvZydtmsxM)], [[part 2](http://www.youtube-nocookie.com/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/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)]
### "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 eliminates cases where unwanted whitespace was previously added.
We believe this new behavior is more helpful and elimates 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 eliminates cases where unwanted whitespace was previously added.
We believe this new behavior is more helpful and elimates 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

@@ -33,7 +33,7 @@ There are other features of ES6 we're already using in core. I'm sure we'll see
## Context
While we haven't documented `context`, it exists in some form in React already. It exists as a way to pass values through a tree without having to use props at every single point. We've seen this need crop up time and time again, so we want to make this as easy as possible. Its use has performance tradeoffs, and there are known weaknesses in our implementation, so we want to make sure this is a solid feature.
While we haven't documented `context`, it exists in some form in React already. It exists as a way to pass values through a tree without having to use props at every single point. We've seen this need crop up time and time again, so we want to make this as easy as possible. It's use has performance tradeoffs, and there are known weaknesses in our implementation, so we want to make sure this is a solid feature.
## Addons

View File

@@ -1,6 +1,6 @@
---
title: "Flux: An Application Architecture for React"
author: [fisherwebdev, jingc]
author: fisherwebdevandjing
---
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 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 was a convenient shortcut for many people but we believe the gains will be worth it.
### JSX Lower-case Convention

View File

@@ -10,14 +10,14 @@ amazed that 600 people requested to be notified when ticket go on sale. This is
When we organized the conference, we decided to start small since this is the
first React.js conference. Also, we weren't sure what level of demand to expect,
so we planned for a single-track, two-day conference on Facebook's campus. The
largest room available would accommodate 18 speaking slots and 200 attendees.
largest room available would accomodate 18 speaking slots and 200 attendees.
The spacial configuration makes it difficult to add a second track and changing
venues only two months in advance would be too difficult, so we are deciding to
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 sell tickets in three separate first-come,
registering, we're going to 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 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 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/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/watch?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,18 +40,20 @@ The first step is a React `<Story>` component that accepts a `story` prop with t
```javascript
// Story.react.js
export default class Story extends React.Component {
class Story extends React.Component {
render() {
var story = this.props.story;
return (
<View>
<Image uri={story.author.profilePicture.uri} />
<Image uri={story.author.profile_picture.uri} />
<Text>{story.author.name}</Text>
<Text>{story.text}</Text>
</View>
);
}
}
module.exports = Story;
```
<br/>
@@ -64,41 +66,41 @@ Relay automates the process of fetching data for components by wrapping existing
// Story.react.js
class Story extends React.Component { ... }
export default Relay.createContainer(Story, {
fragments: {
module.exports = Relay.createContainer(Story, {
queries: {
story: /* TODO */
}
});
```
Before adding the GraphQL fragment, let's look at the component hierarchy this creates:
Before adding the GraphQL query, 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 fragment is defined. In this case we'll add a GraphQL fragment 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 query is defined. In this case we'll add a GraphQL query for `story`:
```javascript
// Story.react.js
class Story extends React.Component { ... }
export default Relay.createContainer(Story, {
fragments: {
story: () => Relay.QL`
fragment on Story {
module.exports = Relay.createContainer(Story, {
queries: {
story: graphql`
Story {
author {
name
profilePicture {
name,
profile_picture {
uri
}
}
},
text
}
`,
},
`
}
});
```
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.
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.
<br/>
@@ -110,7 +112,7 @@ We can render a Relay component by providing Relay with the component (`<Story>`
{
author: {
name: "Greg",
profilePicture: {
profile_picture: {
uri: "https://…"
}
},
@@ -157,35 +159,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 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)`):
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>)`):
```javascript
// NewsFeed.react.js
class NewsFeed extends React.Component { ... }
export default Relay.createContainer(NewsFeed, {
initialVariables: {
count: 3 /* default to 3 stories */
module.exports = Relay.createContainer(NewsFeed, {
queryParams: {
count: 3 /* default to 3 stories */
},
fragments: {
viewer: () => Relay.QL`
fragment on Viewer {
stories(first: $count) { /* fetch viewer's stories */
edges { /* traverse the graph */
queries: {
viewer: graphql`
Viewer {
stories(first: <count>) { /* fetch viewer's stories */
edges { /* traverse the graph */
node {
${Story.getFragment('story')} /* compose child fragment */
${Story.getQuery('story')} /* compose child query */
}
}
}
}
`,
},
`
}
});
```
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.
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.
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:
Query parameters are available to components as `props.queryParams` and can be modified with `props.setQueryParams(nextParams)`. We can use these to implement pagination:
```javascript
// NewsFeed.react.js
@@ -194,16 +196,16 @@ class NewsFeed extends React.Component {
loadMore() {
// read current params
var count = this.props.relay.variables.count;
var count = this.props.queryParams.count;
// update params
this.props.relay.setVariables({
count: count + 5,
this.props.setQueryParams({
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.relay.variables.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.queryParams.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. Developers 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. Developer 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 to 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 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

@@ -28,7 +28,7 @@ If you cant use `npm` yet, we also provide pre-built browser builds for your
Dev build with warnings: <https://fb.me/react-dom-0.14.0-rc1.js>
Minified build for production: <https://fb.me/react-dom-0.14.0-rc1.min.js>
These builds are also available in the `react` package on bower.
These builds are also available in the `react` and `react-dom` packages on bower.
## Changelog
@@ -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/reactjs/react-codemod/blob/master/README.md) we used at Facebook to help you with this transition.
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 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: ["jimfb", "sebmarkbage"]
title: "React.render and the Top Level React API"
author: jimandsebastian
---

View File

@@ -1,203 +0,0 @@
---
title: "React v0.14"
author: spicyj
---
Were happy to announce the release of React 0.14 today! This release has a few major changes, primarily designed to simplify the code you write every day and to better support environments like React Native.
If you tried the release candidate, thank you your support is invaluable and we've fixed a few bugs that you reported.
As with all of our releases, we consider this version to be stable enough to use in production and recommend that you upgrade in order to take advantage of our latest improvements.
## 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.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
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-0.14.0.js>
Minified build for production: <https://fb.me/react-0.14.0.min.js>
* **React with Add-Ons**
Dev build with warnings: <https://fb.me/react-with-addons-0.14.0.js>
Minified build for production: <https://fb.me/react-with-addons-0.14.0.min.js>
* **React DOM** (include React in the page before React DOM)
Dev build with warnings: <https://fb.me/react-dom-0.14.0.js>
Minified build for production: <https://fb.me/react-dom-0.14.0.min.js>
## Changelog
### Major changes
- #### Two Packages: React and React DOM
As we look at packages like [react-native](https://github.com/facebook/react-native), [react-art](https://github.com/reactjs/react-art), [react-canvas](https://github.com/Flipboard/react-canvas), and [react-three](https://github.com/Izzimach/react-three), it has become clear that the beauty and essence of React has nothing to do with browsers or the DOM.
To make this more clear and to make it easier to build more environments that React can render to, were splitting 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.** We dont expect all the code in an app to be shared, but we want to be able to share the components that do behave the same across platforms.
The `react` package contains `React.createElement`, `.createClass`, `.Component`, `.PropTypes`, `.Children`, and the other helpers related to elements and component classes. We think of these as the [_isomorphic_](http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/) or [_universal_](https://medium.com/@mjackson/universal-javascript-4761051b7ae9) helpers that you need to build components.
The `react-dom` package has `ReactDOM.render`, `.unmountComponentAtNode`, and `.findDOMNode`. In `react-dom/server` we have server-side rendering support with `ReactDOMServer.renderToString` and `.renderToStaticMarkup`.
```js
var React = require('react');
var ReactDOM = require('react-dom');
var MyComponent = React.createClass({
render: function() {
return <div>Hello World</div>;
}
});
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/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`
- `react-addons-update`
- `ReactDOM.unstable_batchedUpdates` in `react-dom`.
For now, please use matching versions of `react` and `react-dom` (and the add-ons, if you use them) in your apps to avoid versioning problems.
- #### DOM node refs
The other big change were making in this release is exposing refs to DOM components as the DOM node itself. That means: we looked at what you can do with a `ref` to a React DOM component and realized that the only useful thing you can do with it is call `this.refs.giraffe.getDOMNode()` to get the underlying DOM node. Starting with this release, `this.refs.giraffe` _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.**
```js
var Zoo = React.createClass({
render: function() {
return <div>Giraffe name: <input ref="giraffe" /></div>;
},
showName: function() {
// Previously: var input = this.refs.giraffe.getDOMNode();
var input = this.refs.giraffe;
alert(input.value);
}
});
```
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
In idiomatic React code, most of the components you write will be stateless, simply composing other components. Were introducing a new, simpler syntax for these components where you can take `props` as an argument and return the element you want to render:
```js
// A functional component using an ES2015 (ES6) arrow function:
var Aquarium = (props) => {
var fish = getFish(props.species);
return <Tank>{fish}</Tank>;
};
// Or with destructuring and an implicit return, simply:
var Aquarium = ({species}) => (
<Tank>
{getFish(species)}
</Tank>
);
// Then use: <Aquarium species="rainbowfish" />
```
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
The `react-tools` package and `JSXTransformer.js` browser file [have been deprecated](/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.
- #### Compiler optimizations
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`.
**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.
### Breaking changes
In almost all cases, we change our APIs gradually and warn for at least one release to give you time to clean up your code. These two breaking changes did not have a warning in 0.13 but should be easy to find and clean up:
- `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.
These three breaking changes had a warning in 0.13, so you shouldnt have to do anything if your code is already free of warnings:
- The `props` object is now frozen, so mutating props after creating a component element is no longer supported. In most cases, [`React.cloneElement`](/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`](/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.
### New deprecations, introduced with a warning
Each of these changes will continue to work as before with a new warning until the release of 0.15 so you can upgrade your code gradually.
- 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/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.
- 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`](/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.

View File

@@ -1,86 +0,0 @@
---
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

@@ -1,40 +0,0 @@
---
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

@@ -1,31 +0,0 @@
---
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

@@ -1,40 +0,0 @@
---
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

@@ -1,45 +0,0 @@
---
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

@@ -1,80 +0,0 @@
---
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

@@ -1,383 +0,0 @@
---
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

@@ -1,37 +0,0 @@
---
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

@@ -1,60 +0,0 @@
---
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

@@ -1,10 +0,0 @@
---
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

@@ -1,60 +0,0 @@
---
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

@@ -1,94 +0,0 @@
---
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

@@ -1,32 +0,0 @@
---
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

@@ -1,32 +0,0 @@
---
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

@@ -1,259 +0,0 @@
---
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. Reacts use of the `<noscript>` tag has always been considered an implementation detail 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

@@ -1,34 +0,0 @@
---
title: "React v15.0.1"
author: zpao
---
Yesterday afternoon we shipped v15.0.0 and quickly got some feedback about a couple of issues. We apologize for these problems and we've been working since then to make sure we get fixes into your hands as quickly as possible.
The first of these issues is related to the removal of an undocumented API. This API was added to enable [JSX Spread Attributes](/react/docs/jsx-spread.html) in our JS compile tools (react-tools, JSXTransformer) before `Object.assign` was standard. When we stopped supporting these tools last year, we kept the API there to catch the longer tail of people using those tools. Meanwhile we moved to using Babel and encouraged others to do the same. Babel will typically compile the spread use to an `_extends` helper, which will use `Object.assign`. We did not properly research other compilation tools before deciding to remove the API in v15. Specifically, TypeScript and coffee-react are two popular packages using `React.__spread`, as well as reactify which still makes use react-tools. In order to make sure that code compiled with these tools is not broken, we will be restoring the `React.__spread` API and adding a warning. It will be removed in the future so if you maintain a project making using of it, we encourage you to compile to `Object.assign` directly or a similar helper function.
The second issue resulted in cursor position being lost in controlled inputs. We merged a pull request earlier this week to fix a separate regression from v0.14. Our goal was to target `<option>` elements but we ended up targeting all interactions with `value` properties. Unfortunately we didn't test it as thoroughly as we thought. We backed out the offending change and fixed the issue in different way which doesn't have the same problem.
We apologize if you installed 15.0.0 and have encountered these issues yourselves.
As usual, you can get install the `react` package via npm or download a browser bundle.
* **React**
Dev build with warnings: <https://fb.me/react-15.0.1.js>
Minified build for production: <https://fb.me/react-15.0.1.min.js>
* **React with Add-Ons**
Dev build with warnings: <https://fb.me/react-with-addons-15.0.1.js>
Minified build for production: <https://fb.me/react-with-addons-15.0.1.min.js>
* **React DOM** (include React in the page before React DOM)
Dev build with warnings: <https://fb.me/react-dom-15.0.1.js>
Minified build for production: <https://fb.me/react-dom-15.0.1.min.js>
## Changelog
### React
- Restore `React.__spread` API to unbreak code compiled with some tools making use of this undocumented API. It is now officially deprecated.
<small>[@zpao](https://github.com/zpao) in [#6444](https://github.com/facebook/react/pull/6444)</small>
### ReactDOM
- Fixed issue resulting in loss of cursor position in controlled inputs.
<small>[@spicyj](https://github.com/spicyj) in [#6449](https://github.com/facebook/react/pull/6449)</small>

View File

@@ -16,8 +16,4 @@ 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.
- [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.
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.

View File

@@ -9,12 +9,8 @@ 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
{% for author in page.authors %}
{{ author.name }}
{% if forloop.last == false %} and {% endif %}
{% endfor %}
</p>
{% assign author = site.data.authors[page.author] %}
<p><strong><a href="/react{{ page.url }}">{{ page.title }}</a></strong> on {{ page.date | date: "%B %e, %Y" }} by {{ author.name }}</p>
{% endfor %}
</div>
</section>

View File

@@ -5,7 +5,7 @@
font-family: monospace;
}
.CodeMirror-scroll {
/* Set scrolling behavior here */
/* Set scrolling behaviour 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 actual scrolling happens, thus preventing shaking and
before actuall 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;
}
li > a {
a {
box-sizing: content-box;
padding: 0 10px;
line-height: $navHeight;
@@ -260,22 +260,6 @@ 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 {
@@ -406,39 +390,6 @@ 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;
}
@@ -759,8 +710,6 @@ p a code {
margin-bottom: 0;
background-color: transparent;
border: 0;
float: left;
min-width: 100%;
}
.highlight pre code {
@@ -856,72 +805,3 @@ 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

@@ -1,28 +0,0 @@
---
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

@@ -1,29 +0,0 @@
---
id: why-react-it-IT
title: Perché React?
permalink: why-react-it-IT.html
next: displaying-data-it-IT.html
---
React è una libreria JavaScript per creare interfacce utente scritta da Facebook e Instagram. A molti piace pensare a React come alla **V** di **[MVC](https://it.wikipedia.org/wiki/Model-View-Controller)**.
Abbiamo costruito React per risolvere un problema: **costruire applicazioni di grandi dimensioni con dati che cambiano nel tempo**.
## Semplice
Dichiara semplicemente come la tua app debba apparire in ogni istante, e React gestirà automaticamente tutti gli aggiornamenti della UI quando i dati sottostanti cambiano.
## Dichiarativo
Quando i dati cambiano, React preme idealmente il bottone "aggiorna", e sa come aggiornare soltanto le parti che sono cambiate.
## Costruisci Componenti Componibili
React è basato interamente sulla costruzione di componenti riutilizzabili. Infatti, con React l'*unica* cosa che fai è costruire componenti. Dal momento che sono così incapsulati, i componenti facilitano il riutilizzo del codice, la verifica e la separazione dei concetti.
## Dagli Cinque Minuti
React sfida molte convenzioni, e a prima vista alcune delle idee potrebbero sembrare folli. [Dagli cinque minuti](https://signalvnoise.com/posts/3124-give-it-five-minutes) mentre leggi questa guida; quelle idee folli hanno funzionato per costruire migliaia di componenti sia dentro che fuori da Facebook e Instagram.
## Per Approfondire
Puoi approfondire le nostre motivazioni per la costruzione di React leggendo [questo articolo del blog](/react/blog/2013/06/05/why-react.html).

View File

@@ -4,13 +4,14 @@ 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)
@@ -27,3 +28,5 @@ React挑战了很多传统的知识第一眼看上去可能很多想法有点
## 了解更多
你可以从这篇[博客](/react/blog/2013/06/05/why-react.html)了解更多我们创造 React 的动机。

View File

@@ -1,128 +0,0 @@
---
id: displaying-data-it-IT
title: Visualizzare Dati
permalink: displaying-data-it-IT.html
prev: why-react-it-IT.html
next: jsx-in-depth-it-IT.html
---
L'attività più basilare che puoi effettuare con una UI è mostrare dei dati. React rende visualizzare dati semplice e mantiene automaticamente l'interfaccia aggiornata quando i dati cambiano.
## Per Cominciare
Diamo un'occhiata ad un esempio davvero semplice. Creiamo un file dal nome `hello-react.html` con il codice seguente:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React</title>
<script src="https://fb.me/react-{{site.react_version}}.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// ** Il tuo codice va qui! **
</script>
</body>
</html>
```
Nel resto della documentazione, ci concentreremo soltanto sul codice JavaScript e assumeremo che sia inserito in un modello come quello qui sopra. Sostituisci il commento segnaposto qui sopra con il seguente codice JSX:
```javascript
var HelloWorld = React.createClass({
render: function() {
return (
<p>
Ciao, <input type="text" placeholder="Scrivi il tuo nome" />!
È il {this.props.date.toTimeString()}
</p>
);
}
});
setInterval(function() {
ReactDOM.render(
<HelloWorld date={new Date()} />,
document.getElementById('example')
);
}, 500);
```
## Aggiornamenti Reattivi
Apri `hello-react.html` in un browser web e scrivi il tuo nome nel campo di testo. Osserva che React cambia soltanto la stringa di testo dell'ora nella UI — ogni input che inserisci nel campo di testo rimane, anche se non hai scritto alcun codice che gestisce questo comportamento. React lo capisce da solo al tuo posto e fa la cosa giusta.
La maniera in cui siamo in grado di capirlo è che React non manipola il DOM a meno che non sia necessario. **Utilizza un DOM interno fittizio e veloce per effettuare confronti ed effettuare le mutazioni del DOM più efficienti al tuo posto.**
Gli input di questo componente sono chiamati `props` — breve per "properties". Sono passati come attributi nella sintassi JSX. Puoi pensare ad essi come immutabili nel contesto del componente, ovvero, **non assegnare mai `this.props`**.
## I Componenti Sono Come Funzioni
I componenti React sono molto semplici. Puoi immaginarli come semplici funzioni che ricevono in ingresso `props` e `state` (discusso in seguito) e rendono HTML. Fatta questa premessa, i componenti sono molto semplici da descrivere.
> Nota:
>
> **Una limitazione**: i componenti React possono rendere soltanto un singolo nodo radice. Se desideri restituire nodi multipli, essi *devono* essere avvolti in un singolo nodo radice.
## Sintassi JSX
Crediamo fermamente che i componenti sono la maniera corretta di separare i concetti anziché i "modelli" e la "logica di presentazione." Pensiamo che il markup e il codice che lo genera siano intimamente collegati. Inoltre, la logica di presentazione è solitamente molto complessa e usare un linguaggio di modello per esprimerla risulta dispendioso.
Abbiamo scoperto che la migliore soluzione a questo problema è generare HTML e un albero di componenti direttamente dal codice JavaScript in maniera da poter utilizzare tutta la potenza espressiva di un vero linguaggio di programmazione per costruire UI.
Per rendere il compito più facile, abbiamo aggiunto una semplice e **opzionale** sintassi simile all'HTML per creare questi nodi di albero React.
**JSX ti permette di creare oggetti JavaScript usando una sintassi HTML.** Per generare un collegamento in React usando puro JavaScript puoi scrivere:
`React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Ciao!')`
Con JSX ciò diventa:
`<a href="https://facebook.github.io/react/">Ciao!</a>`
Abbiamo scoperto che questo ha reso la costruzione di applicazioni React più semplice e i designer tendono a preferire la sintassi, ma ciascuno ha un diverso flusso di lavoro, quindi **JSX non è richiesto per utilizzare React.**
JSX è di dimensioni contenute. Per maggiori informazioni, consulta [JSX in profondità](/react/docs/jsx-in-depth-it-IT.html). Oppure osserva la trasformazione in tempo reale sulla [REPL di Babel](https://babeljs.io/repl/).
JSX è simile all'HTML, ma non proprio identico. Consulta la guida [JSX gotchas](/react/docs/jsx-gotchas-it-IT.html) per alcune differenze fondamentali.
[Babel offre una varietà di strumenti per cominciare a usare JSX](http://babeljs.io/docs/setup/), dagli strumenti a riga di comando alle integrazioni in Ruby on Rails. Scegli lo strumento che funziona meglio per te.
## React senza JSX
JSX è completamente opzionale; non è necessario utilizzare JSX con React. Puoi creare elementi React in puro JavaScript usando `React.createElement`, che richiede un nome di tag o di componente, un oggetto di proprietà e un numero variabile di argomenti che rappresentano nodi figli opzionali.
```javascript
var child1 = React.createElement('li', null, 'Primo Contenuto di Testo');
var child2 = React.createElement('li', null, 'Secondo Contenuto di Testo');
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
ReactDOM.render(root, document.getElementById('example'));
```
Per comodità, puoi creare funzioni factory scorciatoia per costruire elementi da componenti personalizzati.
```javascript
var Factory = React.createFactory(ComponentClass);
...
var root = Factory({ custom: 'prop' });
ReactDOM.render(root, document.getElementById('example'));
```
React possiede già delle factory predefinite per i tag HTML comuni:
```javascript
var root = React.DOM.ul({ className: 'my-list' },
React.DOM.li(null, 'Contenuto di Testo')
);
```

View File

@@ -48,7 +48,7 @@ var HelloWorld = React.createClass({
});
setInterval(function() {
ReactDOM.render(
React.render(
<HelloWorld date={new Date()} />,
document.getElementById('example')
);
@@ -62,7 +62,7 @@ setInterval(function() {
このことについて私たちが理解できる方法は、Reactは必要になるまで、DOMの操作を行わないということです。 **Reactは、DOMの変化を表現し、あなたにもっとも効率的なDOMの変化を見積もるために早い、内部のモックのDOMを使っています。**
このコンポーネントのインプットは `props` と呼ばれるものです。"properties" の省略形です。それらはJSXシンタックスの中でアトリビュートとして渡されます。それらはコンポーネントの中で不変と考えるべきで、 **`this.props` には書き込まないようにしてください**
このコンポーネントのインプットは `props` と呼ばれるものです。"properties" の省略形です。それらはJSXシンタックスの中でアトリビュートとして渡されます。それらはコンポーネントの中で不変と考えるべきで、 **`this.props` と書かないようにしてください**
## コンポーネントは関数のようなものです。
@@ -104,7 +104,7 @@ JSXは完全にオプションです。Reactと一緒にJSXを使う必要はあ
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'));
React.render(root, document.getElementById('example'));
```
便利に書くために、カスタムコンポーネントで要素を作るために簡略した記法でファクトリー関数を作ることができます。
@@ -112,7 +112,7 @@ ReactDOM.render(root, document.getElementById('example'));
var Factory = React.createFactory(ComponentClass);
...
var root = Factory({ custom: 'prop' });
ReactDOM.render(root, document.getElementById('example'));
React.render(root, document.getElementById('example'));
```
Reactはすでに、共通なHTMLのタグについてはビルトインの関数を持っています。

View File

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

View File

@@ -8,6 +8,7 @@ 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:
@@ -19,7 +20,6 @@ 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>
@@ -48,13 +48,14 @@ var HelloWorld = React.createClass({
});
setInterval(function() {
ReactDOM.render(
React.render(
<HelloWorld date={new Date()} />,
document.getElementById('example')
);
}, 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.
@@ -63,6 +64,7 @@ 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.
@@ -71,6 +73,7 @@ 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.
@@ -95,6 +98,7 @@ 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.
@@ -103,7 +107,7 @@ JSX is completely optional; you don't have to use JSX with React. You can create
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'));
React.render(root, document.getElementById('example'));
```
For convenience, you can create short-hand factory functions to create elements from custom components.
@@ -112,7 +116,7 @@ For convenience, you can create short-hand factory functions to create elements
var Factory = React.createFactory(ComponentClass);
...
var root = Factory({ custom: 'prop' });
ReactDOM.render(root, document.getElementById('example'));
React.render(root, document.getElementById('example'));
```
React already has built-in factories for common HTML tags:

View File

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

@@ -1,228 +0,0 @@
---
id: jsx-in-depth-it-IT
title: JSX in Profondità
permalink: jsx-in-depth-it-IT.html
prev: displaying-data-it-IT.html
next: jsx-spread-it-IT.html
---
[JSX](https://facebook.github.io/jsx/) è un'estensione della sintassi JavaScript che somiglia all'XML. Puoi usare una semplice trasformazione sintattica di JSX con React.
## Perché JSX?
Non devi per forza utilizzare JSX con React. Puoi anche usare semplice JS. Tuttavia, raccomandiamo di utilizzare JSX perché usa una sintassi concisa e familiare per definire strutture ad albero dotate di attributi.
È più familiare a sviluppatori occasionali come i designer.
L'XML ha i benefici di tag di apertura e chiusura bilanciati. Ciò rende la lettura di grandi strutture ad albero più semplice di chiamate a funzione o oggetti letterali.
Non altera la semantica di JavaScript.
## Tag HTML o Componenti React
React può sia rendere tag HTML (stringhe) che componenti React (classi).
Per rendere untag HTML, usa nomi di tag minuscoli in JSX:
```javascript
var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));
```
Per rendere un componente React, definisci una variabile locale che comincia con una lettera maiuscola:
```javascript
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));
```
Il JSX di React utilizza la convenzione maiuscolo o minuscolo per distinguere tra classi di componenti locali e tag HTML.
> Nota:
>
> Poiché JSX è JavaScript, gli identificatori come `class` e `for` sono sconsigliati
> come nomi di attributi XML. Invece, i componenti DOM React si aspettano nomi di proprietà
> come `className` e `htmlFor` rispettivamente.
## La Trasformazione
Il JSX di React viene trasformato da una sintassi XML a JavaScript nativo. Gli elementi XML, gli attributi e i figli sono trasformati in argomenti passati a `React.createElement`.
```javascript
var Nav;
// Input (JSX):
var app = <Nav color="blue" />;
// Output (JS):
var app = React.createElement(Nav, {color:"blue"});
```
Osserva che per utilizzare `<Nav />`, la variabile `Nav` deve essere visibile.
JSX permette anche di specificare i figli usando una sintassi XML:
```javascript
var Nav, Profile;
// Input (JSX):
var app = <Nav color="blue"><Profile>click</Profile></Nav>;
// Output (JS):
var app = React.createElement(
Nav,
{color:"blue"},
React.createElement(Profile, null, "click")
);
```
JSX inferirà il [displayName](/react/docs/component-specs-it-IT.html#displayname) della classe dall'assegnazione delle variabile, quando il valore di displayName è indefinito:
```javascript
// Input (JSX):
var Nav = React.createClass({ });
// Output (JS):
var Nav = React.createClass({displayName: "Nav", });
```
Usa la [REPL di Babel](https://babeljs.io/repl/) per provare il JSX e vedere come viene trasformato
in JavaScript nativo, e il
[convertitore da HTML a JSX](/react/html-jsx.html) per convertire il tuo HTML esistente a
JSX.
Se desideri utilizzare JSX, la guida [Primi Passi](/react/docs/getting-started-it-IT.html) ti mostra come impostare la compilazione.
> Nota:
>
> L'espressione JSX viene sempre valutata come un ReactElement. Le implementazioni
> attuali potrebbero differire. Un modo ottimizzato potrebbe porre il
> ReactElement in linea come un oggetto letterale per evitare il codice di validazione in
> `React.createElement`.
## Namespace dei Componenti
Se stai costruendo un componente che ha parecchi figli, come ad esempio un modulo, potresti facilmente trovarti con una quantità di dichiarazioni di variabili:
```javascript
// Imbarazzante blocco di dichiarazioni di variabili
var Form = MyFormComponent;
var FormRow = Form.Row;
var FormLabel = Form.Label;
var FormInput = Form.Input;
var App = (
<Form>
<FormRow>
<FormLabel />
<FormInput />
</FormRow>
</Form>
);
```
Per rendere tutto ciò più semplice e leggibile, *i componenti con un namespace* ti permettono di usare un componente che dispone di altri componenti come proprietà:
```javascript
var Form = MyFormComponent;
var App = (
<Form>
<Form.Row>
<Form.Label />
<Form.Input />
</Form.Row>
</Form>
);
```
Per fare ciò, devi semplicemente creare i tuoi *"sub-componenti"* come proprietà del componente principale:
```javascript
var MyFormComponent = React.createClass({ ... });
MyFormComponent.Row = React.createClass({ ... });
MyFormComponent.Label = React.createClass({ ... });
MyFormComponent.Input = React.createClass({ ... });
```
JSX gestirà il tutto correttamente al momento di compilare il tuo codice.
```javascript
var App = (
React.createElement(Form, null,
React.createElement(Form.Row, null,
React.createElement(Form.Label, null),
React.createElement(Form.Input, null)
)
)
);
```
> Nota:
>
> Questa funzionalità è disponibile nella [v0.11](/react/blog/2014/07/17/react-v0.11.html#jsx) e successive.
## Espressioni JavaScript
### Expressioni come Attributi
Per usare un'espressione JavaScript come valore di un attributo, racchiudi l'espressione in un paio
di parentesi graffe (`{}`) anziché doppi apici (`""`).
```javascript
// Input (JSX):
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
// Output (JS):
var person = React.createElement(
Person,
{name: window.isLoggedIn ? window.name : ''}
);
```
### Attributi Booleani
Omettere il valore di un attributo fa in modo che JSX lo tratti come `true`. Per passare `false` occorre utilizzare un'espressione come attributo. Ciò capita spesso quando si usano elementi di moduli HTML, con attributi come `disabled`, `required`, `checked` e `readOnly`.
```javascript
// Queste due forme sono equivalenti in JSX per disabilitare un bottone
<input type="button" disabled />;
<input type="button" disabled={true} />;
// E queste due forme sono equivalenti in JSX per non disabilitare un bottone
<input type="button" />;
<input type="button" disabled={false} />;
```
### Expressioni per Figli
Similmente, espressioni JavaScript possono essere utilizzate per rappresentare figli:
```javascript
// Input (JSX):
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
// Output (JS):
var content = React.createElement(
Container,
null,
window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
);
```
### Commenti
È facile aggiungere commenti al tuo codice JSX; sono semplici espressioni JS. Devi soltanto prestare attenzione a porre `{}` attorno ai commenti quando ti trovi dentro la sezione figli di un tag.
```javascript
var content = (
<Nav>
{/* commento figlio, racchiuso in {} */}
<Person
/* commento
su più
righe */
name={window.isLoggedIn ? window.name : ''} // fine del commento su una riga
/>
</Nav>
);
```
> NOTA:
>
> JSX è simile all'HTML, ma non esattamente identico. Consulta la guida [JSX gotchas](/react/docs/jsx-gotchas-it-IT.html) per le differenze fondamentali.

View File

@@ -26,7 +26,7 @@ ReactはHTMLタグ文字列とReactコンポーネントクラス
```javascript
var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));
React.render(myDivElement, document.getElementById('example'));
```
以下のように大文字から始まるローカル変数を作成するだけで、Reactのコンポーネントをレンダリングできます。
@@ -34,7 +34,7 @@ ReactDOM.render(myDivElement, document.getElementById('example'));
```javascript
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));
React.render(myElement, document.getElementById('example'));
```
ReactのJSXは大文字と小文字を使うことで、ローカルのコンポーネントクラスとHTMLタグを識別する習慣があります。
@@ -216,4 +216,4 @@ var content = (
```
> 注意:
> JSXはHTMLに似ていますが、全く同じではありません。いくつかのキーの違いについては[JSXの理解](/react/docs/jsx-gotchas.html) をご覧ください。
> JSXはHTMLに似ていますが、全く同じではありません。いくつかのキーの違いについては[JSXの理解](/react/docs/jsx-gotchas.html) をご覧ください。

View File

@@ -26,7 +26,7 @@ HTML 태그를 렌더하려면, 그냥 JSX에 소문자 태그를 사용하세
```javascript
var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));
React.render(myDivElement, document.getElementById('example'));
```
React 컴포넌트를 렌더하려면, 대문자로 시작하는 로컬 변수를 만드세요.
@@ -34,7 +34,7 @@ React 컴포넌트를 렌더하려면, 대문자로 시작하는 로컬 변수
```javascript
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));
React.render(myElement, document.getElementById('example'));
```
React JSX는 대소문자를 로컬 컴포넌트 클래스와 HTML 태그를 구별하는 컨벤션으로 사용합니다.
@@ -83,7 +83,7 @@ var Nav = React.createClass({ });
var Nav = React.createClass({displayName: "Nav", });
```
[바벨 REPL](https://babeljs.io/repl/)를 보면 JSX에서 어떻게 네이티브 JavaScript로 변환(desugars)하는지 볼 수 있고, [HTML-JSX 변환기](/react/html-jsx.html)는 이미 있는 HTML을 JSX로 변환해 줍니다.
[JSX 컴파일러](/react/jsx-compiler.html)를 보면 JSX에서 어떻게 네이티브 JavaScript로 변환(desugars)하는지 볼 수 있고, [HTML-JSX 변환기](/react/html-jsx.html)는 이미 있는 HTML을 JSX로 변환해 줍니다.
JSX를 사용 하시려면, [시작하기](/react/docs/getting-started-ko-KR.html) 가이드에서 어떻게 컴파일을 하기 위해 설정하는지 보실 수 있습니다.

View File

@@ -22,11 +22,11 @@ It doesn't alter the semantics of JavaScript.
React can either render HTML tags (strings) or React components (classes).
To render an HTML tag, just use lower-case tag names in JSX:
To render a HTML tag, just use lower-case tag names in JSX:
```javascript
var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));
React.render(myDivElement, document.getElementById('example'));
```
To render a React Component, just create a local variable that starts with an upper-case letter:
@@ -34,7 +34,7 @@ To render a React Component, just create a local variable that starts with an up
```javascript
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));
React.render(myElement, document.getElementById('example'));
```
React's JSX uses the upper vs. lower case convention to distinguish between local component classes and HTML tags.
@@ -82,7 +82,10 @@ 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.
@@ -160,7 +163,8 @@ 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,6 +8,7 @@ next: jsx-spread-zh-CN.html
[JSX](https://facebook.github.io/jsx/) 是一个看起来很像 XML 的 JavaScript 语法扩展。React 可以用来做简单的 JSX 句法转换。
## 为什么要用 JSX
你不需要为了 React 使用 JSX可以直接使用原生 JS。但是我们建议使用 JSX 是因为它能精确,也是常用的定义包含属性的树状结构的语法。
@@ -27,7 +28,7 @@ React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。
```javascript
var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));
React.render(myDivElement, document.getElementById('example'));
```
要渲染 React 组件,只需创建一个大写字母开头的本地变量。
@@ -35,7 +36,7 @@ ReactDOM.render(myDivElement, document.getElementById('example'));
```javascript
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));
React.render(myElement, document.getElementById('example'));
```
React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标签。
@@ -45,6 +46,7 @@ React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标
> 由于 JSX 就是 JavaScript一些标识符像 `class` 和 `for` 不建议作为 XML
> 属性名。作为替代React DOM 使用 `className` 和 `htmlFor` 来做对应的属性。
## 转换Transform
JSX 把类 XML 的语法转成原生 JavaScriptXML 元素、属性和子节点被转换成 `React.createElement` 的参数。
@@ -88,7 +90,6 @@ var Nav = React.createClass({displayName: "Nav", });
> 注意:
>
>
> JSX 表达式总是会当作 ReactElement 执行。具体的实际细节可能不同。一种优化
> 的模式是把 ReactElement 当作一个行内的对象字面量形式来绕过
> `React.createElement` 里的校验代码。
@@ -98,7 +99,7 @@ var Nav = React.createClass({displayName: "Nav", });
如果你正在构建一个有很多子组件的组件,比如表单,你也许会最终得到许多的变量声明。
```javascript
// 尴尬的变量声明块
// 尴尬的变量声明块
var Form = MyFormComponent;
var FormRow = Form.Row;
var FormLabel = Form.Label;
@@ -220,5 +221,5 @@ var content = (
```
> 注意:
>
>
> JSX 类似于 HTML但不完全一样。参考 [JSX 陷阱](/react/docs/jsx-gotchas-zh-CN.html) 了解主要不同。

View File

@@ -1,52 +0,0 @@
---
id: jsx-spread-it-IT
title: Attributi Spread JSX
permalink: jsx-spread-it-IT.html
prev: jsx-in-depth-it-IT.html
next: jsx-gotchas-it-IT.html
---
Se sai in anticipo che tutte le proprietà che desideri assegnare ad un componente, usare JSX è facile:
```javascript
var component = <Component foo={x} bar={y} />;
```
## Le Props Mutevoli sono il Male
Se non sai quali proprietà desideri impostare, potresti essere tentato di aggiungerle all'oggetto in seguito:
```javascript
var component = <Component />;
component.props.foo = x; // male
component.props.bar = y; // altrettanto male
```
Questo è un anti-pattern perché significa che non possiamo aiutarti a verificare i propTypes per tempo. Ciò significa che i tuoi errori di propTypes finiscono per avere uno stack trace indecifrabile.
Le props dovrebbero essere considerate immutabili. Mutare l'oggetto props altrove potrebbe causare conseguenze inattese, quindi a questo punto dovrebbe essere idealmente considerato un oggetto congelato.
## Attributi Spread
Adesso puoi utilizzare una nuova caratteristica di JSX chiamata attributi spread:
```javascript
var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;
```
Le proprietà dell'oggetto che passi al componente sono copiate nelle sue props.
Puoi usarlo più volte o combinarlo con altri attributi. L'ordine in cui sono specificati è rilevante. Attributi successivi ridefiniscono quelli precedentemente impostati.
```javascript
var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'
```
## Cos'è la strana notazione `...`?
L'operatore `...` (o operatore spread) è già supportato per gli [array in ES6](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator). Esiste anche una proposta per ES7 per le proprietà [Spread e Rest di Object](https://github.com/sebmarkbage/ecmascript-rest-spread). Stiamo prendendo spunto da questi standard supportati o in corso di sviluppo per fornire una sintassi più pulita a JSX.

View File

@@ -12,7 +12,7 @@ next: jsx-gotchas-ko-KR.html
var component = <Component foo={x} bar={y} />;
```
## Props의 변경은 나빠요
## Props의 변경은 나빠요.[^1]
하지만 어떤 프로퍼티를 설정하고 싶은지 모른다면, 객체 레이어에 넣고 싶어질 수도 있습니다.
@@ -50,3 +50,7 @@ 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
## Mutating Props is Bad, mkay
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 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.
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.

View File

@@ -12,6 +12,7 @@ next: jsx-gotchas-zh-CN.html
var component = <Component foo={x} bar={y} />;
```
## 修改 Props 是不好的,明白吗
如果你不知道要设置哪些 Props那么现在最好不要设置它
@@ -24,7 +25,8 @@ next: jsx-gotchas-zh-CN.html
这样是反模式,因为 React 不能帮你检查属性类型propTypes。这样即使你的 属性类型有错误也不能得到清晰的错误提示。
Props 应该被认为是不可变的。在别处修改 props 对象可能会导致预料之外的结果,所以原则上这将是一个冻结的对象。
Props 应该被当作禁止修改的。修改 props 对象可能会导致预料之外的结果,所以最好不要去修改 props 对象。
## 展开属性Spread Attributes
@@ -47,6 +49,7 @@ Props 应该被认为是不可变的。在别处修改 props 对象可能会导
console.log(component.props.foo); // 'override'
```
## 这个奇怪的 `...` 标记是什么?
这个 `...` 操作符(增强的操作符)已经被 [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 拥有更优雅的语法。
这个 `...` 操作符(增强的操作符)已经被 [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 拥有更优雅的语法。

View File

@@ -1,68 +0,0 @@
---
id: jsx-gotchas-it-IT
title: JSX Gotchas
permalink: jsx-gotchas-it-IT.html
prev: jsx-spread-it-IT.html
next: interactivity-and-dynamic-uis-it-IT.html
---
JSX somiglia all'HTML ma ci sono delle differenze importanti da tenere in considerazione.
> Nota:
>
> Per le differenze del DOM, come l'attributo `style` in linea, consulta [here](/react/docs/dom-differences-it-IT.html).
## Entità HTML
Puoi inserire entità HTML nel testo letterale in JSX:
```javascript
<div>Primo &middot; Secondo</div>
```
Se desideri visualizzare un'entità HTML all'interno di un contenuto dinamico, avrai problemi con il doppio escape, poiché React effettua in maniera predefinita l'escape di tutte le stringhe visualizzate per prevenire un'ampia gamma di attacchi XSS.
```javascript
// Male: Mostra "Primo &middot; Secondo"
<div>{'Primo &middot; Secondo'}</div>
```
Esistono molte maniere di aggirare questo problema. La più facile è scrivere i caratteri Unicode direttamente in JavaScript. Dovrai assicurarti che il file sia salvato come UTF-8 e che le appropriate direttive UTF-8 siano impostate in modo che il browser li visualizzi correttamente.
```javascript
<div>{'Primo · Secondo'}</div>
```
Un'alternativa più sicura consiste nel trovare il [codice Unicode corrispondente all'entità](http://www.fileformat.info/info/unicode/char/b7/index.htm) e usarlo all'interno di una stringa JavaScript.
```javascript
<div>{'Primo \u00b7 Secondo'}</div>
<div>{'Primo ' + String.fromCharCode(183) + ' Secondo'}</div>
```
Puoi usare array misti con stringhe ed elementi JSX.
```javascript
<div>{['Primo ', <span>&middot;</span>, ' Secondo']}</div>
```
Come ultima risorsa, puoi sempre [inserire HTML nativo](/react/tips/dangerously-set-inner-html.html).
```javascript
<div dangerouslySetInnerHTML={{'{{'}}__html: 'Primo &middot; Secondo'}} />
```
## Attributi HTML Personalizzati
Se passi proprietà che non esistono nella specifica HTML ad elementi HTML nativi, React li ignorerà. Se vuoi usare un attributo personalizzato, devi prefiggerlo con `data-`.
```javascript
<div data-custom-attribute="foo" />
```
Gli attributi per [l'Accessibilità del Web](http://www.w3.org/WAI/intro/aria) che iniziano per `aria-` saranno gestiti correttamente.
```javascript
<div aria-hidden={true} />
```

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,12 +61,6 @@ 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

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

View File

@@ -1,84 +0,0 @@
---
id: interactivity-and-dynamic-uis-it-IT
title: Interattività e UI Dinamiche
permalink: interactivity-and-dynamic-uis-it-IT.html
prev: jsx-gotchas-it-IT.html
next: multiple-components-it-IT.html
---
Hai già [imparato a mostrare dati](/react/docs/displaying-data-it-IT.html) con React. Adesso vediamo come rendere le nostre UI interattive.
## Un Esempio Semplice
```javascript
var LikeButton = React.createClass({
getInitialState: function() {
return {liked: false};
},
handleClick: function(event) {
this.setState({liked: !this.state.liked});
},
render: function() {
var text = this.state.liked ? 'mi piace' : 'non mi piace';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
});
ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);
```
## Gestione degli Eventi ed Eventi Sintetici
Con React devi semplicemente passare il tuo gestore di eventi come una proprietà camelCased in modo simile a come faresti nel normale HTML. React si assicura che tutti gli eventi si comportano in maniera identica in IE8 e successivi implementando un sistema di eventi sintetici. Ovvero, React sa come propagare e catturare eventi secondo la specifica, e garantisce che gli eventi passati ai tuoi gestori di eventi siano consistenti con la [specifica W3C](http://www.w3.org/TR/DOM-Level-3-Events/), qualunque browser tu stia utilizzando.
## Dietro le Quinte: Binding Automatico e Delega degli Eventi
Dietro le quinte, React esegue alcune operazioni per mantenere il tuo codice ad alte prestazioni e facile da comprendere.
**Binding automatico:** Quando crei le callback in JavaScript, solitamente devi fare il binding esplicito del metodo alla sua istanza, in modo che il valore di `this` sia corretto. Con React, ogni metodo è automaticamente legato alla propria istanza del componente (eccetto quando si usa la sintassi delle classi ES6). React immagazzina il metodo legato in maniera tale da essere estremamente efficiente in termini di CPU e memoria. Ti permette anche di scrivere meno codice!
**Delega degli eventi:** React non associa realmente i gestori di eventi ai nodi stessi. Quando React si avvia, comincia ad ascoltare tutti gli eventi a livello globale usando un singolo event listener. Quando un componente viene montato o smontato, i gestori di eventi sono semplicemente aggiunti o rimossi da un mapping interno. Quando si verifica un evento, React sa come inoltrarlo utilizzando questo mapping. Quando non ci sono più gestori di eventi rimasti nel mapping, i gestori di eventi di React sono semplici operazioni fittizie. Per saperne di più sul perché questo approccio è veloce, leggi [l'eccellente articolo sul blog di David Walsh](http://davidwalsh.name/event-delegate).
## I Componenti Sono Macchine a Stati Finiti
React considera le UI come semplici macchine a stati finiti. Pensando alla UI come in uno di tanti stati diversi e visualizzando questi stati, è facile mantenere la UI consistente.
In React, aggiorni semplicemente lo stato di un componente, e quindi visualizzi una nuova UI basata su questo nuovo stato. React si occupa di aggiornare il DOM al tuo posto nella maniera più efficiente.
## Come Funziona lo Stato
Una maniera comune di informare React di un cambiamento nei dati è chiamare `setState(data, callback)`. Questo metodo effettua il merge di `data` in `this.state` e ridisegna il componente. Quando il componente ha terminato la fase di ri-rendering, la `callback` opzionale viene invocata. Nella maggior parte dei casi non avrai bisogno di fornire una `callback` dal momento che React si occuperà di mantenere la UI aggiornata per te.
## Quali Componenti Devono Avere uno Stato?
La maggior parte dei tuoi componenti dovrebbero semplicemente ricevere dei dati da `props` e visualizzarli. Tuttavia, a volte hai bisogno di reagire all'input dell'utente, una richiesta al server o il trascorrere del tempo. In questi casi utilizzi lo stato.
**Prova a mantenere il maggior numero possibile dei tuoi componenti privi di stato.** Facendo ciò, isolerai lo stato nel suo luogo logicamente corretto e minimizzerai la ridondanza, rendendo più semplice ragionare sulla tua applicazione.
Un pattern comune è quello di creare diversi componenti privi di stato che mostrano semplicemente dati, e di avere un componente dotato di stato al di sopra di essi nella gerarchia, che passa il proprio stato ai suoi figli tramite le `props`. Il componente dotato di stato incapsula tutta la logica di interazione, mentre i componenti privi di stato si occupano della visualizzazione dei dati in maniera dichiarativa.
## Cosa *Dovrebbe* Contenere lo Stato?
**Lo stato dovrebbe contenere dati che i gestori di eventi del componente possono modificare per scatenare un aggiornamento della UI.** In applicazioni reali, questi dati tendono ad essere molto limitati e serializzabili come JSON. Quando costruisci un componente dotato di stato, pensa alla minima rappresentazione possibile del suo stato, e conserva solo quelle proprietà in `this.state`. All'interno di `render()` calcola quindi ogni altra informazione necessaria basandoti sullo stato. Ti accorgerai che pensare e scrivere applicazioni in questo modo porta alla scrittura dell'applicazione più corretta, dal momento che aggiungere valori ridondanti o calcolati allo stato significherebbe doverli mantenere sincronizzati esplicitamente, anziché affidarti a React perché li calcoli al tuo posto.
## Cosa *Non Dovrebbe* Contenere lo Stato?
`this.state` dovrebbe contenere soltanto la quantità minima di dati indispensabile a rappresentare lo stato della tua UI. In quanto tale, non dovrebbe contenere:
* **Dati calcolati:** Non preoccuparti di precalcolare valori basati sullo stato — è più semplice assicurarti che la tua UI sia consistente se effettui tutti i calcoli all'interno di `render()`. Per esempio, se lo stato contiene un array di elementi di una lista, e vuoi mostrare il numero di elementi come stringa, mostra semplicemente `this.state.listItems.length + ' elementi nella lista'` nel tuo metodo `render()` anziché conservarlo nello stato.
* **Componenti React:** Costruiscili in `render()` basandoti sulle proprietà e sullo stato del componente.
* **Dati duplicati dalle proprietà:** Prova ad utilizzare le proprietà come fonte di verità ove possibile. Un uso valido dello stato per i valori delle proprietà è conservarne il valore precedente quando le proprietà cambiano nel tempo.

View File

@@ -29,7 +29,7 @@ var LikeButton = React.createClass({
}
});
ReactDOM.render(
React.render(
<LikeButton />,
document.getElementById('example')
);
@@ -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,6 +8,7 @@ next: multiple-components-ko-KR.html
이미 React에서 [어떻게 데이터를 표시](/react/docs/displaying-data-ko-KR.html)하는지를 배웠습니다. 이제 UI와의 상호작용을 어떻게 만드는지 살펴보죠.
## 간단한 예제
```javascript
@@ -28,35 +29,40 @@ var LikeButton = React.createClass({
}
});
ReactDOM.render(
React.render(
<LikeButton />,
document.getElementById('example')
);
```
## 이벤트 핸들링과 통합적인(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의 컴포넌트 인스턴스에 바인드됩니다.(ES6 클래스 문법을 사용할 때는 재외하고) React가 바인드 메소드를 캐시하기 때문에 매우 CPU와 메모리에 효율적입니다. 타이핑해야 할 것도 줄어들죠!
**오토바인딩:** JavaScript에서 콜백을 만들 때, 보통은 `this`의 값이 정확하도록 명시적으로 메소드를 인스턴스에 바인드해야 합니다. React에서는 모든 메소드가 자동으로 React의 컴포넌트 인스턴스에 바인드됩니다. 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를 사용합니다.
@@ -65,6 +71,7 @@ React에게 데이터의 변경을 알리는 일반적인 방법은 `setState(da
일반적인 패턴은 데이터만 렌더하는 여러 상태를 가지지 않은 컴포넌트를 만들고, 그 위에 상태기반(stateful) 컴포넌트를 만들어 계층 안의 자식 컴포넌트에게 `props`를 통해 state를 전달하는 것입니다. state를 가지지 않은 컴포넌트가 선언적인 방법으로 데이터를 렌더링 하는 동안, 상태기반 컴포넌트는 모든 상호작용 로직을 캡슐화합니다.
## state를 어떻게 *써야* 할까요?
**state는 컴포넌트의 이벤트 핸들러에 의해 UI 업데이트를 트리거할때 변경될 가능성이 있어, 그때 사용할 데이터를 가져야 합니다.** 실제 앱에서는 이 데이터는 매우 작고 JSON 직렬화 가능한 경향이 있습니다. 상태기반 컴포넌트를 만들때, 가능한 작게 state를 서술하고 `this.state`에만 저장하도록 해보세요. 그냥 `render()` 안에서 이 state를 기반으로 다른 모든 정보를 계산합니다. 이 방식으로 애플리케이션을 작성하고 생각하면 가장 최적의 애플리케이션으로 발전해가는 경향이 있다는 것을 발견하게 될 것입니다. 꼭 필요하지 않은 값이나 계산된 값을 state에 추가하는 것은 render가 그것을 계산하는 대신에 명시적으로 그것들을 맞춰줘야 하는 것을 의미하기 때문이죠.
@@ -75,4 +82,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,6 +8,7 @@ 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
@@ -28,34 +29,41 @@ var LikeButton = React.createClass({
}
});
ReactDOM.render(
React.render(
<LikeButton />,
document.getElementById('example')
);
```
## 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 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.
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.
If you'd like to use React on a touch device such as a phone or tablet, simply call `React.initializeTouchEvents(true);` to enable touch event handling.
## 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/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!
**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!
**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.
@@ -64,14 +72,15 @@ 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 *Shouldn't* Go in State?
## What *Shouldnt* 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 may change as the result of a parent component re-rendering.
* **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.

View File

@@ -8,6 +8,7 @@ next: multiple-components-zh-CN.html
我们已经学习如何使用 React [显示数据](/react/docs/displaying-data-zh-CN.html)。现在让我们来学习如何创建交互式界面。
## 简单例子
```javascript
@@ -28,34 +29,40 @@ var LikeButton = React.createClass({
}
});
ReactDOM.render(
React.render(
<LikeButton />,
document.getElementById('example')
);
```
## 事件处理与合成事件Synthetic Events
React 里只需把事件处理器event handler以骆峰命名camelCased形式当作组件的 props 传入即可,就像使用普通 HTML 那样。React 内部创建一套合成事件系统来使所有事件在 IE8 和以上浏览器表现一致。也就是说React 知道如何冒泡和捕获事件,而且你的事件处理器接收到的 events 参数与 [W3C 规范](http://www.w3.org/TR/DOM-Level-3-Events/) 一致,无论你使用哪种浏览器。
如果需要在手机或平板等触摸设备上使用 React需要调用 `React.initializeTouchEvents(true);` 启用触摸事件处理。
## 幕后原理自动绑定Autobinding和事件代理Event Delegation
在幕后React 做了一些操作来让代码高效运行且易于理解。
**Autobinding:** 在 JavaScript 里创建回调的时候,为了保证 `this` 的正确性,一般都需要显式地绑定方法到它的实例上。 React所有方法被自动绑定到了它的组件实例上除非使用ES6的class符号。React 还缓存这些绑定方法,所以 CPU 和内存都是非常高效。而且还能减少打字!
**Autobinding:** 在 JavaScript 里创建回调的时候,为了保证 `this` 的正确性,一般都需要显式地绑定方法到它的实例上。有了 React所有方法被自动绑定到了它的组件实例上。React 还缓存这些绑定方法,所以 CPU 和内存都是非常高效。而且还能减少打字!
**事件代理 ** 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。
@@ -64,14 +71,16 @@ 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 可能变化。

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