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
339 changed files with 39313 additions and 2465 deletions

View File

@@ -14,6 +14,8 @@ vendor/jasmine-jsreporter/
# But not in docs/_js/examples/*
docs/_js/*.js
docs/js/
# gems
docs/vendor/bundle/
# This should be more like examples/**/thirdparty/** but
# we should fix https://github.com/facebook/esprima/pull/85 first
examples/
examples/

2
.gitignore vendored
View File

@@ -9,11 +9,13 @@ __benchmarks__
build/
.module-cache
*.gem
docs/.bundle
docs/code
docs/_site
docs/.sass-cache
docs/js/*
docs/downloads
docs/vendor/bundle
examples/shared/*.js
test/the-files-to-test.generated.js
*.log*

View File

@@ -5,20 +5,45 @@ node_js:
sudo: false
cache:
directories:
- docs/vendor/bundle
- node_modules
before_install:
- |
if [ "$TRAVIS_PULL_REQUEST" != "false" ]; then
PR_FIRST=$(curl -s https://github.com/${TRAVIS_REPO_SLUG}/pull/${TRAVIS_PULL_REQUEST}.patch | head -1 | grep -o -E '\b[0-9a-f]{40}\b' | tr -d '\n')
TRAVIS_COMMIT_RANGE=$PR_FIRST^..$TRAVIS_COMMIT
fi
git diff --name-only $TRAVIS_COMMIT_RANGE | grep -qvE '(\.md$)|(^(docs|examples))/' || {
if [ "$TEST_TYPE" != build_website ] && \
! git diff --name-only $TRAVIS_COMMIT_RANGE | grep -qvE '(\.md$)|(^(docs|examples))/'
then
echo "Only docs were updated, stopping build process."
exit
}
fi
script:
- |
grunt $TEST_TYPE
if [ "$TEST_TYPE" = build_website ]; then
if [ "$TRAVIS_BRANCH" = "$REACT_WEBSITE_BRANCH" ] && [ "$TRAVIS_PULL_REQUEST" = false ]; then
set -e
GH_PAGES_DIR="$TRAVIS_BUILD_DIR"/../react-gh-pages
echo "machine github.com login reactjs-bot password $GITHUB_TOKEN" >~/.netrc
git config --global user.name "Travis CI"
git config --global user.email "travis@reactjs.org"
git clone --branch gh-pages --depth=50 \
https://reactjs-bot@github.com/facebook/react.git \
$GH_PAGES_DIR
pushd docs
bundle install --jobs=3 --retry=3 --path=vendor/bundle
bundle exec rake release
cd $GH_PAGES_DIR
git status
if ! git diff-index --quiet HEAD --; then
git add -A .
git commit -m "Rebuild website"
git push origin gh-pages
fi
popd
fi
else
grunt $TEST_TYPE
fi
after_script:
- |
if [ "$TEST_TYPE" = test ] && [ "$SERVER" ]; then
@@ -43,12 +68,15 @@ env:
- 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=
# SECRET_TOKEN
- secure: dkpPW+VnoqC/okhRdV90m36NcyBFhcwEKL3bNFExAwi0dXnFao8RoFlvnwiPlA23h2faROkMIetXlti6Aju08BgUFV+f9aL6vLyU7gUent4Nd3413zf2fwDtXIWIETg6uLnOpSykGKgCAT/hY3Q2oPLqOoY0OxfgnbqwxkxljrE=
# GITHUB_TOKEN
- secure: EHCyCSKMwKlLHNtcj9nmkRzmiiPE3aDGlPcnEyrDJeRI0SeN/iCXHXfFivR0vFq3vr+9naMBczAR2AEidtps5KbJrKqdZnjPFRbmfVtzWr/LlvVCub3u13Pub6TdKIVBTny1PuZ5X8GvdxMNVig89jGjvzhhWuQRaz3VhJnTra4=
matrix:
fast_finish: true
allow_failures:

View File

@@ -1,3 +1,79 @@
## 0.13.3 (May 8, 2015)
### React Core
#### New Features
* Added `clipPath` element and attribute for SVG
* Improved warnings for deprecated methods in plain JS classes
#### Bug Fixes
* Loosened `dangerouslySetInnerHTML` restrictions so `{__html: undefined}` will no longer throw
* Fixed extraneous context warning with non-pure `getChildContext`
* Ensure `replaceState(obj)` retains prototype of `obj`
### React with Add-ons
### Bug Fixes
* Test Utils: Ensure that shallow rendering works when components define `contextTypes`
## 0.13.2 (April 18, 2015)
### React Core
#### New Features
* Added `strokeDashoffset`, `flexPositive`, `flexNegative` to the list of unitless CSS properties
* Added support for more DOM properties:
* `scoped` - for `<style>` elements
* `high`, `low`, `optimum` - for `<meter>` elements
* `unselectable` - IE-specific property to prevent user selection
#### Bug Fixes
* Fixed a case where re-rendering after rendering null didn't properly pass context
* Fixed a case where re-rendering after rendering with `style={null}` didn't properly update `style`
* Update `uglify` dependency to prevent a bug in IE8
* Improved warnings
### React with Add-Ons
#### Bug Fixes
* Immutabilty Helpers: Ensure it supports `hasOwnProperty` as an object key
### React Tools
* Improve documentation for new options
## 0.13.1 (March 16, 2015)
### React Core
#### Bug Fixes
* Don't throw when rendering empty `<select>` elements
* Ensure updating `style` works when transitioning from `null`
### React with Add-Ons
#### Bug Fixes
* TestUtils: Don't warn about `getDOMNode` for ES6 classes
* TestUtils: Ensure wrapped full page components (`<html>`, `<head>`, `<body>`) are treated as DOM components
* Perf: Stop double-counting DOM components
### React Tools
#### Bug Fixes
* Fix option parsing for `--non-strict-es6module`
## 0.13.0 (March 10, 2015)
### React Core
@@ -14,7 +90,7 @@
#### New Features
* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html) for details.
* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html) for details.
* Added new top-level API `React.findDOMNode(component)`, which should be used in place of `component.getDOMNode()`. The base class for ES6-based components will not have `getDOMNode`. This change will enable some more patterns moving forward.
* Added a new top-level API `React.cloneElement(el, props)` for making copies of React elements see the [v0.13 RC2 notes](/react/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement) for more details.
* 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`).
@@ -250,7 +326,7 @@
#### New Features
* Added warnings to help migrate towards descriptors
* Made it possible to server render without React-related markup (`data-reactid`, `data-react-checksum`). This DOM will not be mountable by React. [Read the docs for `React.renderComponentToStaticMarkup`](http://facebook.github.io/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup)
* Made it possible to server render without React-related markup (`data-reactid`, `data-react-checksum`). This DOM will not be mountable by React. [Read the docs for `React.renderComponentToStaticMarkup`](https://facebook.github.io/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup)
* Added support for more attributes:
* `srcSet` for `<img>` to specify images at different pixel ratios
* `textAnchor` for SVG
@@ -262,7 +338,7 @@
### Addons
* `update` function to deal with immutable data. [Read the docs](http://facebook.github.io/react/docs/update.html)
* `update` function to deal with immutable data. [Read the docs](https://facebook.github.io/react/docs/update.html)
### react-tools
* Added an option argument to `transform` function. The only option supported is `harmony`, which behaves the same as `jsx --harmony` on the command line. This uses the ES6 transforms from [jstransform](https://github.com/facebook/jstransform).
@@ -424,7 +500,7 @@
### React with Addons (New!)
* Introduced a separate build with several "addons" which we think can help improve the React experience. We plan to deprecate this in the long-term, instead shipping each as standalone pieces. [Read more in the docs](http://facebook.github.io/react/docs/addons.html).
* Introduced a separate build with several "addons" which we think can help improve the React experience. We plan to deprecate this in the long-term, instead shipping each as standalone pieces. [Read more in the docs](https://facebook.github.io/react/docs/addons.html).
### JSX
@@ -457,10 +533,10 @@
* Switch from using `id` attribute to `data-reactid` to track DOM nodes. This allows you to integrate with other JS and CSS libraries more easily.
* Support for more DOM elements and attributes (e.g., `<canvas>`)
* Improved server-side rendering APIs. `React.renderComponentToString(<component>, callback)` allows you to use React on the server and generate markup which can be sent down to the browser.
* `prop` improvements: validation and default values. [Read our blog post for details...](http://facebook.github.io/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html)
* Support for the `key` prop, which allows for finer control over reconciliation. [Read the docs for details...](http://facebook.github.io/react/docs/multiple-components.html)
* Removed `React.autoBind`. [Read our blog post for details...](http://facebook.github.io/react/blog/2013/07/02/react-v0-4-autobind-by-default.html)
* Improvements to forms. We've written wrappers around `<input>`, `<textarea>`, `<option>`, and `<select>` in order to standardize many inconsistencies in browser implementations. This includes support for `defaultValue`, and improved implementation of the `onChange` event, and circuit completion. [Read the docs for details...](http://facebook.github.io/react/docs/forms.html)
* `prop` improvements: validation and default values. [Read our blog post for details...](https://facebook.github.io/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html)
* Support for the `key` prop, which allows for finer control over reconciliation. [Read the docs for details...](https://facebook.github.io/react/docs/multiple-components.html)
* Removed `React.autoBind`. [Read our blog post for details...](https://facebook.github.io/react/blog/2013/07/02/react-v0-4-autobind-by-default.html)
* Improvements to forms. We've written wrappers around `<input>`, `<textarea>`, `<option>`, and `<select>` in order to standardize many inconsistencies in browser implementations. This includes support for `defaultValue`, and improved implementation of the `onChange` event, and circuit completion. [Read the docs for details...](https://facebook.github.io/react/docs/forms.html)
* We've implemented an improved synthetic event system that conforms to the W3C spec.
* Updates to your component are batched now, which may result in a significantly faster re-render of components. `this.setState` now takes an optional callback as it's second parameter. If you were using `onClick={this.setState.bind(this, state)}` previously, you'll want to make sure you add a third parameter so that the event is not treated as the callback.

View File

@@ -1,6 +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://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.
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
@@ -45,8 +45,8 @@ Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe
## How to Get in Touch
* IRC - [#reactjs on freenode](http://webchat.freenode.net/?channels=reactjs)
* Mailing list - [reactjs on Google Groups](http://groups.google.com/group/reactjs)
* IRC - [#reactjs on freenode](https://webchat.freenode.net/?channels=reactjs)
* Discussion forum - [discuss.reactjs.org](https://discuss.reactjs.org/)
## Style Guide

View File

@@ -18,7 +18,6 @@ module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
copy: require('./grunt/config/copy'),
jsx: require('./grunt/config/jsx'),
browserify: require('./grunt/config/browserify'),
populist: require('./grunt/config/populist')(grunt),
@@ -269,7 +268,6 @@ module.exports = function(grunt) {
'npm-react:pack',
'npm-react-tools:release',
'npm-react-tools:pack',
'copy:react_docs',
'compare_size'
]);

46
PATENTS
View File

@@ -1,23 +1,33 @@
Additional Grant of Patent Rights
Additional Grant of Patent Rights Version 2
"Software" means the React software distributed by Facebook, Inc.
Facebook hereby grants you a perpetual, worldwide, royalty-free, non-exclusive,
irrevocable (subject to the termination provision below) license under any
rights in any patent claims owned by Facebook, to make, have made, use, sell,
offer to sell, import, and otherwise transfer the Software. For avoidance of
doubt, no license is granted under Facebooks rights in any patent claims that
are infringed by (i) modifications to the Software made by you or a third party,
or (ii) the Software in combination with any software or other technology
provided by you or a third party.
Facebook, Inc. ("Facebook") hereby grants to each recipient of the Software
("you") a perpetual, worldwide, royalty-free, non-exclusive, irrevocable
(subject to the termination provision below) license under any Necessary
Claims, to make, have made, use, sell, offer to sell, import, and otherwise
transfer the Software. For avoidance of doubt, no license is granted under
Facebook's rights in any patent claims that are infringed by (i) modifications
to the Software made by you or any third party or (ii) the Software in
combination with any software or other technology.
The license granted hereunder will terminate, automatically and without notice,
for anyone that makes any claim (including by filing any lawsuit, assertion or
other action) alleging (a) direct, indirect, or contributory infringement or
inducement to infringe any patent: (i) by Facebook or any of its subsidiaries or
affiliates, whether or not such claim is related to the Software, (ii) by any
party if such claim arises in whole or in part from any software, product or
service of Facebook or any of its subsidiaries or affiliates, whether or not
such claim is related to the Software, or (iii) by any party relating to the
Software; or (b) that any right in any patent claim of Facebook is invalid or
unenforceable.
if you (or any of your subsidiaries, corporate affiliates or agents) initiate
directly or indirectly, or take a direct financial interest in, any Patent
Assertion: (i) against Facebook or any of its subsidiaries or corporate
affiliates, (ii) against any party if such Patent Assertion arises in whole or
in part from any software, technology, product or service of Facebook or any of
its subsidiaries or corporate affiliates, or (iii) against any party relating
to the Software. Notwithstanding the foregoing, if Facebook or any of its
subsidiaries or corporate affiliates files a lawsuit alleging patent
infringement against you in the first instance, and you respond by filing a
patent infringement counterclaim in that lawsuit against that party that is
unrelated to the Software, the license granted hereunder will not terminate
under section (i) of this paragraph due to such counterclaim.
A "Necessary Claim" is a claim of a patent owned by Facebook that is
necessarily infringed by the Software standing alone.
A "Patent Assertion" is any lawsuit or other action alleging direct, indirect,
or contributory infringement or inducement to infringe any patent, including a
cross-claim or counterclaim.

View File

@@ -1,16 +1,18 @@
# [React](http://facebook.github.io/react) [![Build Status](https://travis-ci.org/facebook/react.svg?branch=master)](https://travis-ci.org/facebook/react)
# [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.
* **Just the UI:** Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.
* **Virtual DOM:** React uses a *virtual DOM* diff implementation for ultra-high performance. It can also render on the server using Node.js — no heavy browser DOM required.
* **Virtual DOM:** React abstracts away the DOM from you, giving a simpler programming model and better performance. React can also render on the server using Node, and it can power native apps using [React Native](https://facebook.github.io/react-native/).
* **Data flow:** React implements one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding.
[Learn how to use React in your own project.](http://facebook.github.io/react/docs/getting-started.html)
**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).
## Examples
We have several examples [on the website](http://facebook.github.io/react/). Here is the first one to get you started:
We have several examples [on the website](https://facebook.github.io/react/). Here is the first one to get you started:
```js
var HelloMessage = React.createClass({
@@ -27,7 +29,7 @@ React.render(
This example will render "Hello John" into a container on the page.
You'll notice that we used an HTML-like syntax; [we call it JSX](http://facebook.github.io/react/docs/jsx-in-depth.html). JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML. A simple transform is included with React that allows converting JSX into native JavaScript for browsers to digest.
You'll notice that we used an HTML-like syntax; [we call it JSX](https://facebook.github.io/react/docs/jsx-in-depth.html). JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML. A simple transform is included with React that allows converting JSX into native JavaScript for browsers to digest.
## Installation
@@ -35,12 +37,12 @@ The fastest way to get started is to serve JavaScript from the CDN (also availab
```html
<!-- The core React library -->
<script src="http://fb.me/react-0.12.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="http://fb.me/JSXTransformer-0.12.2.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
```
We've also built a [starter kit](http://facebook.github.io/react/downloads/react-0.12.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:

View File

@@ -44,7 +44,7 @@ require('commoner').version(
sourceMap: this.options.sourceMapInline,
stripTypes: this.options.stripTypes,
es6module: this.options.es6module,
nonStrictEs6Module: this.options.nonStrictEs6Module,
nonStrictEs6module: this.options.nonStrictEs6module,
target: this.options.target
};
return transform(source, options);

View File

@@ -80,3 +80,6 @@ DEPENDENCIES
rake
rb-fsevent
sanitize (~> 2.0)
BUNDLED WITH
1.10.1

View File

@@ -4,7 +4,8 @@ require('yaml')
desc "generate js from jsx"
task :js do
system "../bin/jsx --harmony _js js"
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"

View File

@@ -1,7 +1,7 @@
---
name: React
description: A JavaScript library for building user interfaces
url: http://facebook.github.io
url: https://facebook.github.io
baseurl: "/react"
permalink: "/blog/:year/:month/:day/:title.html"
paginate_path: "/blog/page:num/"
@@ -25,13 +25,15 @@ exclude:
- Gemfile.lock
- README.md
- Rakefile
- vendor/bundle
markdown: redcarpet
redcarpet:
extensions:
- fenced_code_blocks
- footnotes
sass:
style: :compressed
sass_dir: _css
gems:
- jekyll-redirect-from
react_version: 0.13.0-rc2
react_version: 0.13.3

View File

@@ -68,7 +68,7 @@ h3 {
}
h4 {
font-size: 17px;
font-size: 16px;
}
h5 {

58
docs/_data/authors.yml Normal file
View File

@@ -0,0 +1,58 @@
# Map of short name to more information. `name` will be used but if you don't
# want to use your real name, just use whatever. If url is included, your name
# will be a link to the provided url.
billandjing:
name: Bill Fisher and Jing Chen
chenglou:
name: Cheng Lou
url: https://twitter.com/_chenglou
Daniel15:
name: Daniel Lo Nigro
url: http://dan.cx/
fisherwebdev:
name: Bill Fisher
url: https://twitter.com/fisherwebdev
jaredly:
name: Jared Forsyth
url: https://twitter.com/jaredforsyth
jgebhardt:
name: Jonas Gebhardt
url: https://twitter.com/jonasgebhardt
jimandsebastian:
name: Jim Sproch and Sebastian Markbåge
josephsavona:
name: Joseph Savona
url: https://twitter.com/en_JS
kmeht:
name: Kunal Mehta
url: https://github.com/kmeht
LoukaN:
name: Lou Husson
url: https://twitter.com/loukan42
matthewjohnston4:
name: Matthew Johnston
url: https://github.com/matthewathome
petehunt:
name: Pete Hunt
url: https://twitter.com/floydophone
schrockn:
name: Nick Schrock
url: https://twitter.com/schrockn
sebmarkbage:
name: Sebastian Markbåge
url: https://twitter.com/sebmarkbage
spicyj:
name: Ben Alpert
url: http://benalpert.com
steveluscher:
name: Steven Luscher
url: https://twitter.com/steveluscher
vjeux:
name: Vjeux
url: https://twitter.com/vjeux
wincent:
name: Greg Hurrell
url: https://twitter.com/wincent
zpao:
name: Paul OShannessy
url: https://twitter.com/zpao

View File

@@ -58,7 +58,7 @@
- id: test-utils
title: Test Utilities
- id: clone-with-props
title: Cloning Components
title: Cloning Elements
- id: create-fragment
title: Keyed Fragments
- id: update
@@ -93,7 +93,7 @@
items:
- id: flux-overview
title: Flux Overview
href: http://facebook.github.io/flux/docs/overview.html
href: https://facebook.github.io/flux/docs/overview.html
- id: flux-todo-list
title: Flux TodoMVC Tutorial
href: http://facebook.github.io/flux/docs/todo-list.html
href: https://facebook.github.io/flux/docs/todo-list.html

View File

@@ -1,10 +1,30 @@
<h1><a href="/react{{ page.url }}">{{ page.title }}</a></h1>
<p class="meta">{{ page.date | date_to_string }} by {{ page.author }}</p>
{% assign page = include.page %}
{% assign author = site.data.authors[page.author] %}
<div id="post">
{% if content != '' %}
{{ page.excerpt }}
<h1>
{% if include.isPermalink %}
{{ page.title }}
{% else %}
{{ page.content }}
<a href="/react{{ page.url }}">{{ page.title }}</a>
{% endif %}
</h1>
<p class="meta">
{{ page.date | date: "%B %e, %Y" }}
by
{% if author.url %}
<a href="{{author.url}}">{{ author.name }}</a>
{% else %}
{{ author.name }}
{% endif %}
</p>
<hr>
<div class="post">
{{ include.content }}
</div>
{% if include.isPermalink %}
<div class="fb-like" data-send="true" data-width="650" data-show-faces="false"></div>
{% endif %}

View File

@@ -1,12 +1,13 @@
var MARKDOWN_COMPONENT = `
var converter = new Showdown.converter();
var MarkdownEditor = React.createClass({
getInitialState: function() {
return {value: 'Type some *markdown* here!'};
},
handleChange: function() {
this.setState({value: this.refs.textarea.getDOMNode().value});
this.setState({value: React.findDOMNode(this.refs.textarea).value});
},
rawMarkup: function() {
return { __html: marked(this.state.value, {sanitize: true}) };
},
render: function() {
return (
@@ -19,9 +20,7 @@ var MarkdownEditor = React.createClass({
<h3>Output</h3>
<div
className="content"
dangerouslySetInnerHTML={{
__html: converter.makeHtml(this.state.value)
}}
dangerouslySetInnerHTML={this.rawMarkup()}
/>
</div>
);

View File

@@ -1,8 +1,8 @@
var TODO_COMPONENT = `
var TodoList = React.createClass({
render: function() {
var createItem = function(itemText) {
return <li>{itemText}</li>;
var createItem = function(itemText, index) {
return <li key={index + itemText}>{itemText}</li>;
};
return <ul>{this.props.items.map(createItem)}</ul>;
}

View File

@@ -1,46 +0,0 @@
var HELLO_COMPONENT = "\
var HelloMessage = React.createClass({\n\
render: function() {\n\
return <div>Hello {this.props.name}</div>;\n\
}\n\
});\n\
\n\
React.render(<HelloMessage name=\"John\" />, mountNode);\
";
function transformer(harmony, code) {
return JSXTransformer.transform(code, {harmony: harmony}).code;
}
var CompilerPlayground = React.createClass({
getInitialState: function() {
return {harmony: false};
},
handleHarmonyChange: function(e) {
this.setState({harmony: e.target.checked});
},
render: function() {
return (
<div>
<ReactPlayground
codeText={HELLO_COMPONENT}
renderCode={true}
transformer={transformer.bind(null, this.state.harmony)}
showCompiledJSTab={false}
showLineNumbers={true}
/>
<label className="compiler-option">
<input
type="checkbox"
onChange={this.handleHarmonyChange}
checked={this.state.harmony} />{' '}
Enable ES6 transforms (<code>--harmony</code>)
</label>
</div>
);
}
});
React.render(
<CompilerPlayground />,
document.getElementById('jsxCompiler')
);

View File

@@ -21,7 +21,7 @@ var CodeMirrorEditor = React.createClass({
componentDidMount: function() {
if (IS_MOBILE) return;
this.editor = CodeMirror.fromTextArea(this.refs.editor.getDOMNode(), {
this.editor = CodeMirror.fromTextArea(React.findDOMNode(this.refs.editor), {
mode: 'javascript',
lineNumbers: this.props.lineNumbers,
lineWrapping: true,
@@ -91,7 +91,7 @@ var ReactPlayground = React.createClass({
getDefaultProps: function() {
return {
transformer: function(code) {
return JSXTransformer.transform(code).code;
return babel.transform(code).code;
},
editorTabTitle: 'Live JSX Editor',
showCompiledJSTab: true,
@@ -194,7 +194,7 @@ var ReactPlayground = React.createClass({
},
executeCode: function() {
var mountNode = this.refs.mount.getDOMNode();
var mountNode = React.findDOMNode(this.refs.mount);
try {
React.unmountComponentAtNode(mountNode);

View File

@@ -8,8 +8,8 @@
<meta name="viewport" content="width=device-width">
<meta property="og:title" content="{{ page.title }} | React">
<meta property="og:type" content="website">
<meta property="og:url" content="http://facebook.github.io/react{{ page.url }}">
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png">
<meta property="og:url" content="https://facebook.github.io/react{{ page.url }}">
<meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
<meta property="og:description" content="A JavaScript library for building user interfaces">
<meta property="fb:app_id" content="623268441017527">
@@ -28,12 +28,11 @@
<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="/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/JSXTransformer.js"></script>
<script type="text/javascript" src="/react/js/live_editor.js"></script>
<script type="text/javascript" src="/react/js/showdown.js"></script>
</head>
<body>
@@ -45,12 +44,16 @@
<img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
React
</a>
<ul class="nav-site">
<li><a href="/react/docs/getting-started.html"{% if page.sectionid == 'docs' or page.sectionid == 'tips' %} class="active"{% endif %}>docs</a></li>
<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><a href="https://github.com/facebook/react">github</a>
<ul class="nav-site nav-site-internal">
<li><a href="/react/docs/getting-started.html"{% if page.sectionid == 'docs' or page.sectionid == 'tips' %} class="active"{% endif %}>Docs</a></li>
<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>
</ul>
<ul class="nav-site nav-site-external">
<li><a href="https://github.com/facebook/react">GitHub</a>
<li><a href="https://facebook.github.io/react-native/">React Native</a>
</ul>
</div>
</div>

View File

@@ -6,15 +6,6 @@ sectionid: blog
<section class="content wrap blogContent">
{% include nav_blog.html %}
<div class="inner-content">
<h1>{{ page.title }}</h1>
<p class="meta">{{ page.date | date: "%B %e, %Y" }} by {{ page.author }}</p>
<hr>
<div class="post">
{{ content }}
</div>
<div class="fb-like" data-send="true" data-width="650" data-show-faces="false"></div>
{% include blog_post.html isPermalink="true" page=page content=content %}
</div>
</section>

View File

@@ -1,9 +1,9 @@
---
title: JSFiddle Integration
author: Christopher Chedeau
author: vjeux
---
[JSFiddle](http://jsfiddle.net) just announced support for React. This is an exciting news as it makes collaboration on snippets of code a lot easier. You can play around this **[base React JSFiddle](http://jsfiddle.net/vjeux/kb3gN/)**, fork it and share it! A [fiddle without JSX](http://jsfiddle.net/vjeux/VkebS/) is also available.
[JSFiddle](https://jsfiddle.net) just announced support for React. This is an exciting news as it makes collaboration on snippets of code a lot easier. You can play around this **[base React JSFiddle](http://jsfiddle.net/vjeux/kb3gN/)**, fork it and share it! A [fiddle without JSX](http://jsfiddle.net/vjeux/VkebS/) is also available.
<blockquote class="twitter-tweet" align="center"><p>React (by Facebook) is now available on JSFiddle. <a href="http://t.co/wNQf9JPv5u" title="http://facebook.github.io/react/">facebook.github.io/react/</a></p>&mdash; JSFiddle (@jsfiddle) <a href="https://twitter.com/jsfiddle/status/341114115781177344">June 2, 2013</a></blockquote>

View File

@@ -1,6 +1,6 @@
---
title: Why did we build React?
author: Pete Hunt
author: petehunt
---
There are a lot of JavaScript MVC frameworks out there. Why did we build React
@@ -40,7 +40,7 @@ React really shines when your data changes over time.
In a traditional JavaScript application, you need to look at what data changed
and imperatively make changes to the DOM to keep it up-to-date. Even AngularJS,
which provides a declarative interface via directives and data binding [requires
a linking function to manually update DOM nodes](http://code.angularjs.org/1.0.8/docs/guide/directive#reasonsbehindthecompilelinkseparation).
a linking function to manually update DOM nodes](https://code.angularjs.org/1.0.8/docs/guide/directive#reasonsbehindthecompilelinkseparation).
React takes a different approach.
@@ -74,7 +74,7 @@ some pretty cool things with it:
- We've built internal prototypes that run React apps in a web worker and use
React to drive **native iOS views** via an Objective-C bridge.
- You can run React
[on the server](http://github.com/petehunt/react-server-rendering-example)
[on the server](https://github.com/petehunt/react-server-rendering-example)
for SEO, performance, code sharing and overall flexibility.
- Events behave in a consistent, standards-compliant way in all browsers
(including IE8) and automatically use

View File

@@ -1,6 +1,6 @@
---
title: "Community Round-up #1"
author: Vjeux
author: vjeux
---
React was open sourced two weeks ago and it's time for a little round-up of what has been going on.
@@ -38,10 +38,10 @@ It looks like [Ben Alpert](http://benalpert.com/) is the first person outside of
## Origins of React
[Pete Hunt](http://www.petehunt.net/blog/) explained what differentiates React from other JavaScript libraries in [a previous blog post](http://facebook.github.io/react/blog/2013/06/05/why-react.html). [Lee Byron](http://leebyron.com/) gives another perspective on Quora:
[Pete Hunt](http://www.petehunt.net/blog/) explained what differentiates React from other JavaScript libraries in [a previous blog post](/react/blog/2013/06/05/why-react.html). [Lee Byron](http://leebyron.com/) gives another perspective on Quora:
> React isn't quite like any other popular Javascript libraries, and it solves a very specific problem: complex UI rendering. It's also intended to be used along side many other popular libraries. For example, React works well with Backbone.js, amongst many others.
>
> React was born out of frustrations with the common pattern of writing two-way data bindings in complex MVC apps. React is an implementation of one-way data bindings.
>
> [Read the full post...](http://www.quora.com/React-JS-Library/How-is-Facebooks-React-JavaScript-library/answer/Lee-Byron?srid=3DcX)
> [Read the full post...](https://www.quora.com/React-JS-Library/How-is-Facebooks-React-JavaScript-library/answer/Lee-Byron?srid=3DcX)

View File

@@ -1,6 +1,6 @@
---
title: "Community Round-up #2"
author: Vjeux
author: vjeux
---
Since the launch we have received a lot of feedback and are actively working on React 0.4. In the meantime, here are the highlights of this week.
@@ -21,12 +21,12 @@ Since the launch we have received a lot of feedback and are actively working on
## React and Socket.IO Chat Application
[Danial Khosravi](http://danialk.github.io/) made a real-time chat application that interacts with the back-end using Socket.IO.
[Danial Khosravi](https://danialk.github.io/) made a real-time chat application that interacts with the back-end using Socket.IO.
> A week ago I was playing with AngularJS and [this little chat application](https://github.com/btford/angular-socket-io-im) which uses socket.io and nodejs for realtime communication. Yesterday I saw a post about ReactJS in [EchoJS](http://www.echojs.com/) and started playing with this UI library. After playing a bit with React, I decided to write and chat application using React and I used Bran Ford's Backend for server side of this little app.
> <figure>[![](/react/img/blog/chatapp.png)](http://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/)</figure>
> <figure>[![](/react/img/blog/chatapp.png)](https://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/)</figure>
>
> [Read the full post...](http://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/)
> [Read the full post...](https://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/)
## React and Other Frameworks
@@ -36,7 +36,7 @@ Since the launch we have received a lot of feedback and are actively working on
>
> We've designed React from the beginning to work well with other libraries. Angular is no exception. Let's take the original Angular example and use React to implement the fundoo-rating directive.
>
> [Read the full post...](http://www.quora.com/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look)
> [Read the full post...](https://www.quora.com/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look)
In the same vein, [Markov Twain](https://twitter.com/markov_twain/status/345702941845499906) re-implemented the examples on the front-page [with Ember](http://jsbin.com/azihiw/2/edit) and [Vlad Yazhbin](https://twitter.com/vla) re-implemented the tutorial [with Angular](http://jsfiddle.net/vla/Cdrse/).
@@ -64,7 +64,7 @@ Mozilla and Google are actively working on Web Components. [Vjeux](http://blog.v
Many of you pointed out differences between JSX and HTML. In order to clear up some confusion, we have added some documentation that covers the four main differences:
- [Whitespace removal](http://facebook.github.io/react/docs/jsx-is-not-html.html)
- [HTML Entities](http://facebook.github.io/react/docs/jsx-is-not-html.html)
- [Comments](http://facebook.github.io/react/docs/jsx-is-not-html.html)
- [Custom HTML Attributes](http://facebook.github.io/react/docs/jsx-is-not-html.html)
- [Whitespace removal](/react/docs/jsx-is-not-html.html)
- [HTML Entities](/react/docs/jsx-is-not-html.html)
- [Comments](/react/docs/jsx-is-not-html.html)
- [Custom HTML Attributes](/react/docs/jsx-is-not-html.html)

View File

@@ -1,6 +1,6 @@
---
title: "React v0.3.3"
author: Paul O'Shannessy
author: zpao
---
We have a ton of great stuff coming in v0.4, but in the meantime we're releasing v0.3.3. This release addresses some small issues people were having and simplifies our tools to make them easier to use.

View File

@@ -1,13 +1,13 @@
---
title: "Community Round-up #3"
author: Vjeux
author: vjeux
---
The highlight of this week is that an interaction-heavy app has been ported to React. React components are solving issues they had with nested views.
## Moving From Backbone To React
[Clay Allsopp](http://twitter.com/clayallsopp) successfully ported [Propeller](http://usepropeller.com/blog/posts/from-backbone-to-react/), a fairly big, interaction-heavy JavaScript app, to React.
[Clay Allsopp](https://twitter.com/clayallsopp) successfully ported [Propeller](http://usepropeller.com/blog/posts/from-backbone-to-react/), a fairly big, interaction-heavy JavaScript app, to React.
> [<img style="float: right; margin: 0 0 10px 10px;" src="/react/img/blog/propeller-logo.png" />](http://usepropeller.com/blog/posts/from-backbone-to-react/)Subviews involve a lot of easy-to-forget boilerplate that Backbone (by design) doesn't automate. Libraries like Backbone.Marionette offer more abstractions to make view nesting easier, but they're all limited by the fact that Backbone delegates how and went view-document attachment occurs to the application code.
>
@@ -19,7 +19,7 @@ The highlight of this week is that an interaction-heavy app has been ported to R
## Grunt Task for JSX
[Eric Clemmons](http://ericclemmons.github.io/) wrote a task for [Grunt](http://gruntjs.com/) that applies the JSX transformation to your Javascript files. It also works with [Browserify](http://browserify.org/) if you want all your files to be concatenated and minified together.
[Eric Clemmons](https://ericclemmons.github.io/) wrote a task for [Grunt](http://gruntjs.com/) that applies the JSX transformation to your Javascript files. It also works with [Browserify](http://browserify.org/) if you want all your files to be concatenated and minified together.
> Grunt task for compiling Facebook React's .jsx templates into .js
>

View File

@@ -1,6 +1,6 @@
---
title: "New in React v0.4: Autobind by Default"
author: Paul O'Shannessy
author: zpao
---
React v0.4 is very close to completion. As we finish it off, we'd like to share with you some of the major changes we've made since v0.3. This is the first of several posts we'll be making over the next week.
@@ -8,7 +8,7 @@ React v0.4 is very close to completion. As we finish it off, we'd like to share
## What is React.autoBind?
If you take a look at most of our current examples, you'll see us using `React.autoBind` for event handlers. This is used in place of `Function.prototype.bind`. Remember that in JS, [function calls are late-bound](http://bonsaiden.github.io/JavaScript-Garden/#function.this). That means that if you simply pass a function around, the `this` used inside won't necessarily be the `this` you expect. `Function.prototype.bind` creates a new, properly bound, function so that when called, `this` is exactly what you expect it to be.
If you take a look at most of our current examples, you'll see us using `React.autoBind` for event handlers. This is used in place of `Function.prototype.bind`. Remember that in JS, [function calls are late-bound](https://bonsaiden.github.io/JavaScript-Garden/#function.this). That means that if you simply pass a function around, the `this` used inside won't necessarily be the `this` you expect. `Function.prototype.bind` creates a new, properly bound, function so that when called, `this` is exactly what you expect it to be.
Before we launched React, we would write this:

View File

@@ -1,6 +1,6 @@
---
title: "Community Round-up #4"
author: Vjeux
author: vjeux
---
React reconciliation process appears to be very well suited to implement a text editor with a live preview as people at Khan Academy show us.
@@ -54,4 +54,4 @@ Over the past several weeks, members of our team, [Pete Hunt](http://www.petehun
[Tom Occhino](http://tomocchino.com/) implemented Snake in 150 lines with React.
> [Check the source on Github](https://github.com/tomocchino/react-snake/blob/master/src/snake.js)
> <figure>[![](/react/img/blog/snake.png)](http://tomocchino.github.io/react-snake/)</figure>
> <figure>[![](/react/img/blog/snake.png)](https://tomocchino.github.io/react-snake/)</figure>

View File

@@ -1,6 +1,6 @@
---
title: "New in React v0.4: Prop Validation and Default Values"
author: Paul O'Shannessy
author: zpao
---
Many of the questions we got following the public launch of React revolved around `props`, specifically that people wanted to do validation and to make sure their components had sensible defaults.

View File

@@ -1,12 +1,12 @@
---
title: "React v0.4.0"
author: Paul O'Shannessy
author: zpao
---
Over the past 2 months we've been taking feedback and working hard to make React even better. We fixed some bugs, made some under-the-hood improvements, and added several features that we think will improve the experience developing with React. Today we're proud to announce the availability of React v0.4!
This release could not have happened without the support of our growing community. Since launch day, the community has contributed blog posts, questions to the [Google Group](http://groups.google.com/group/reactjs), and issues and pull requests on GitHub. We've had contributions ranging from documentation improvements to major changes to React's rendering. We've seen people integrate React into the tools they're using and the products they're building, and we're all very excited to see what our budding community builds next!
This release could not have happened without the support of our growing community. Since launch day, the community has contributed blog posts, questions to the [Google Group](https://groups.google.com/group/reactjs), and issues and pull requests on GitHub. We've had contributions ranging from documentation improvements to major changes to React's rendering. We've seen people integrate React into the tools they're using and the products they're building, and we're all very excited to see what our budding community builds next!
React v0.4 has some big changes. We've also restructured the documentation to better communicate how to use React. We've summarized the changes below and linked to documentation where we think it will be especially useful.
@@ -18,10 +18,10 @@ When you're ready, [go download it](/react/downloads.html)!
* Switch from using `id` attribute to `data-reactid` to track DOM nodes. This allows you to integrate with other JS and CSS libraries more easily.
* Support for more DOM elements and attributes (e.g., `<canvas>`)
* Improved server-side rendering APIs. `React.renderComponentToString(<component>, callback)` allows you to use React on the server and generate markup which can be sent down to the browser.
* `prop` improvements: validation and default values. [Read our blog post for details...](http://facebook.github.io/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html)
* Support for the `key` prop, which allows for finer control over reconciliation. [Read the docs for details...](http://facebook.github.io/react/docs/multiple-components.html)
* Removed `React.autoBind`. [Read our blog post for details...](http://facebook.github.io/react/blog/2013/07/02/react-v0-4-autobind-by-default.html)
* Improvements to forms. We've written wrappers around `<input>`, `<textarea>`, `<option>`, and `<select>` in order to standardize many inconsistencies in browser implementations. This includes support for `defaultValue`, and improved implementation of the `onChange` event, and circuit completion. [Read the docs for details...](http://facebook.github.io/react/docs/forms.html)
* `prop` improvements: validation and default values. [Read our blog post for details...](/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html)
* Support for the `key` prop, which allows for finer control over reconciliation. [Read the docs for details...](/react/docs/multiple-components.html)
* Removed `React.autoBind`. [Read our blog post for details...](/react/blog/2013/07/02/react-v0-4-autobind-by-default.html)
* Improvements to forms. We've written wrappers around `<input>`, `<textarea>`, `<option>`, and `<select>` in order to standardize many inconsistencies in browser implementations. This includes support for `defaultValue`, and improved implementation of the `onChange` event, and circuit completion. [Read the docs for details...](/react/docs/forms.html)
* We've implemented an improved synthetic event system that conforms to the W3C spec.
* Updates to your component are batched now, which may result in a significantly faster re-render of components. `this.setState` now takes an optional callback as its second parameter. If you were using `onClick={this.setState.bind(this, state)}` previously, you'll want to make sure you add a third parameter so that the event is not treated as the callback.

View File

@@ -1,6 +1,6 @@
---
title: "Community Round-up #5"
author: Vjeux
author: vjeux
---
We launched the [React Facebook Page](https://www.facebook.com/react) along with the React v0.4 launch. 700 people already liked it to get updated on the project :)
@@ -52,7 +52,7 @@ Learning a new library is always easier when you have working examples you can p
## React Chosen Wrapper
[Cheng Lou](https://github.com/chenglou) wrote a wrapper for the [Chosen](http://harvesthq.github.io/chosen/) input library called [react-chosen](https://github.com/chenglou/react-chosen). It took just 25 lines to be able to use jQuery component as a React one.
[Cheng Lou](https://github.com/chenglou) wrote a wrapper for the [Chosen](https://harvesthq.github.io/chosen/) input library called [react-chosen](https://github.com/chenglou/react-chosen). It took just 25 lines to be able to use jQuery component as a React one.
```javascript
React.renderComponent(
@@ -60,7 +60,7 @@ React.renderComponent(
<option value="Facebook">Facebook</option>
<option value="Harvest">Harvest</option>
</Chosen>
, document.body);
, document.getElementById('example'));
```
@@ -75,7 +75,7 @@ React.renderComponent(
[Tom Occhino](http://tomocchino.com/) and [Jordan Walke](https://github.com/jordwalke), React developers, did a presentation of React at Facebook Seattle's office. Check out the first 25 minutes for the presentation and the remaining 45 for a Q&A. I highly recommend you watching this video.
<figure><iframe width="650" height="400" src="//www.youtube.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe></figure>
<figure><iframe width="650" height="400" src="//www.youtube-nocookie.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe></figure>
## Docs

View File

@@ -1,6 +1,6 @@
---
title: "React v0.4.1"
author: Paul O'Shannessy
author: zpao
---
React v0.4.1 is a small update, mostly containing correctness fixes. Some code has been restructured internally but those changes do not impact any of our public APIs.

View File

@@ -1,6 +1,6 @@
---
title: "Use React and JSX in Ruby on Rails"
author: Paul O'Shannessy
author: zpao
---
Today we're releasing a gem to make it easier to use React and JSX in Ruby on Rails applications: [react-rails](https://github.com/facebook/react-rails).
@@ -38,7 +38,7 @@ When you name your file with `myfile.js.jsx`, `react-rails` will automatically t
```js
/** @jsx React.DOM */
React.renderComponent(<MyComponent/>, document.body)
React.renderComponent(<MyComponent/>, document.getElementById('example'))
```

View File

@@ -1,6 +1,6 @@
---
title: "Community Round-up #6"
author: Vjeux
author: vjeux
---
This is the first Community Round-up where none of the items are from Facebook/Instagram employees. It's great to see the adoption of React growing.
@@ -54,7 +54,7 @@ este.demos.react.todoApp = este.react.create (`/** @lends {React.ReactComponent.
## React Stylus Boilerplate
[Zaim Bakar](http://zaim.github.io/) shared his boilerplate to get started with Stylus CSS processor.
[Zaim Bakar](https://zaim.github.io/) shared his boilerplate to get started with Stylus CSS processor.
> This is my boilerplate React project using Grunt as the build tool, and Stylus as my CSS preprocessor.
>

View File

@@ -1,6 +1,6 @@
---
title: "Use React and JSX in Python Applications"
author: Kunal Mehta
author: kmeht
---
Today we're happy to announce the initial release of [PyReact](https://github.com/facebook/react-python), which makes it easier to use React and JSX in your Python applications. It's designed to provide an API to transform your JSX files into JavaScript, as well as provide access to the latest React source files.

View File

@@ -1,6 +1,6 @@
---
title: "Community Round-up #7"
author: Vjeux
author: vjeux
---
It's been three months since we open sourced React and it is going well. Some stats so far:
@@ -10,7 +10,7 @@ It's been three months since we open sourced React and it is going well. Some st
* [226 posts on Google Group](https://groups.google.com/forum/#!forum/reactjs)
* [76 Github projects using React](https://gist.github.com/vjeux/6335762)
* [30 contributors](https://github.com/facebook/react/graphs/contributors)
* [15 blog posts](http://facebook.github.io/react/blog/)
* [15 blog posts](/react/blog/)
* 2 early adopters: [Khan Academy](http://benalpert.com/2013/06/09/using-react-to-speed-up-khan-academy.html) and [Propeller](http://usepropeller.com/blog/posts/from-backbone-to-react/)

View File

@@ -1,6 +1,6 @@
---
title: "Community Round-up #8"
author: Vjeux
author: vjeux
---
A lot has happened in the month since our last update. Here are some of the more interesting things we've found. But first, we have a couple updates before we share links.
@@ -66,4 +66,4 @@ While this is not going to work for all the attributes since they are camelCased
[Vjeux](http://blog.vjeux.com/) re-implemented the display part of the IRC logger in React. Just 130 lines are needed for a performant infinite scroll with timestamps and color-coded author names.
<iframe width="100%" height="300" src="https://jsfiddle.net/vjeux/QL9tz/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
[View the source on JSFiddle...](http://jsfiddle.net/vjeux/QL9tz)

View File

@@ -1,6 +1,6 @@
---
title: "React v0.5"
author: Paul O'Shannessy
author: zpao
---
This release is the result of several months of hard work from members of the team and the community. While there are no groundbreaking changes in core, we've worked hard to improve performance and memory usage. We've also worked hard to make sure we are being consistent in our usage of DOM properties.

View File

@@ -1,6 +1,6 @@
---
title: "React v0.5.1"
author: Paul O'Shannessy
author: zpao
---
This release focuses on fixing some small bugs that have been uncovered over the past two weeks. I would like to thank everybody involved, specifically members of the community who fixed half of the issues found. Thanks to [Ben Alpert][1], [Andrey Popp][2], and [Laurence Rowe][3] for their contributions!

View File

@@ -1,6 +1,6 @@
---
title: "Community Round-up #9"
author: Vjeux
author: vjeux
---
We organized a React hackathon last week-end in the Facebook Seattle office. 50 people, grouped into 15 teams, came to hack for a day on React. It was a lot of fun and we'll probably organize more in the future.

View File

@@ -1,142 +0,0 @@
---
title: "Thinking in React"
author: Pete Hunt
---
React is, in my opinion, the premier way to build big, fast Web apps with JavaScript. It has scaled very well for us at Facebook and Instagram.
One of the many great parts of React is how it makes you think about apps as you build them. In this post I'll walk you through the thought process of building a searchable product data table using React.
## Start with a mock
Imagine that we already have a JSON API and a mock from our designer. Our designer apparently isn't very good because the mock looks like this:
![Mockup](/react/img/blog/thinking-in-react-mock.png)
Our JSON API returns some data that looks like this:
```
[
{category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
{category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
{category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
{category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
{category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
{category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
];
```
## Step 1: break the UI into a component hierarchy
The first thing you'll want to do is to draw boxes around every component (and subcomponent) in the mock and give them all names. If you're working with a designer they may have already done this, so go talk to them! Their Photoshop layer names may end up being the names of your React components!
But how do you know what should be its own component? Just use the same techniques for deciding if you should create a new function or object. One such technique is the [single responsibility principle](http://en.wikipedia.org/wiki/Single_responsibility_principle), that is, a component should ideally only do one thing. If it ends up growing it should be decomposed into smaller subcomponents.
Since you're often displaying a JSON data model to a user, you'll find that if your model was built correctly your UI (and therefore your component structure) will map nicely onto it. That's because user interfaces and data models tend to adhere to the same *information architecture* which means the work of separating your UI into components is often trivial. Just break it up into components that represent exactly one piece of your data model.
![Component diagram](/react/img/blog/thinking-in-react-components.png)
You'll see here that we have five components in our simple app. I've italicized the data each component represents.
1. **`FilterableProductTable` (orange):** contains the entirety of the example
2. **`SearchBar` (blue):** receives all *user input*
3. **`ProductTable` (green):** displays and filters the *data collection* based on *user input*
4. **`ProductCategoryRow` (turquoise):** displays a heading for each *category*
5. **`ProductRow` (red):** displays a row for each *product*
If you look at `ProductTable` you'll see that the table header (containing the "Name" and "Price" labels) isn't its own component. This is a matter of preference and there's an argument to be made either way. For this example I left it as part of `ProductTable` because it is part of rendering the *data collection* which is `ProductTable`'s responsibility. However if this header grows to be complex (i.e. if we were to add affordances for sorting) it would certainly make sense to make this its own `ProductTableHeader` component.
Now that we've identified the components in our mock, let's arrange them into a hierarchy. This is easy. Components that appear within another component in the mock should appear as a child in the hierarchy:
* `FilterableProductTable`
* `SearchBar`
* `ProductTable`
* `ProductCategoryRow`
* `ProductRow`
## Step 2: Build a static version in React
<iframe width="100%" height="300" src="https://jsfiddle.net/6wQMG/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
Now that you have your component hierarchy it's time to start implementing your app. The easiest way is to build a version that takes your data model and renders the UI but has no interactivity. It's easiest to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing. We'll see why.
To build a static version of your app that renders your data model you'll want to build components that reuse other components and pass data using *props*. *props* are a way of passing data from parent to child. If you're familiar with the concept of *state*, **don't use state at all** to build this static version. State is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app you don't need it.
You can build top-down or bottom-up. That is, you can either start with building the components higher up in the hierarchy (i.e. starting with `FilterableProductTable`) or with the ones lower in it (`ProductRow`). In simpler examples it's usually easier to go top-down and on larger projects it's easier to go bottom-up and write tests as you build.
At the end of this step you'll have a library of reusable components that render your data model. The components will only have `render()` methods since this is a static version of your app. The component at the top of the hierarchy (`FilterableProductTable`) will take your data model as a prop. If you make a change to your underlying data model and call `renderComponent()` again the UI will be updated. It's easy to see how your UI is updated and where to make changes since there's nothing complicated going on since React's **one-way data flow** (also called *one-way binding*) keeps everything modular, easy to reason about, and fast.
Simply refer to the [React docs](http://facebook.github.io/react/docs/) if you need help executing this step.
### A brief interlude: props vs state
There are two types of "model" data in React: props and state. It's important to understand the distinction between the two; skim [the official React docs](http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html) if you aren't sure what the difference is.
## Step 3: Identify the minimal (but complete) representation of UI state
To make your UI interactive you need to be able to trigger changes to your underlying data model. React makes this easy with **state**.
To build your app correctly you first need to think of the minimal set of mutable state that your app needs. The key here is DRY: *Don't Repeat Yourself*. Figure out what the absolute minimal representation of the state of your application needs to be and compute everything else you need on-demand. For example, if you're building a TODO list, just keep an array of the TODO items around; don't keep a separate state variable for the count. Instead, when you want to render the TODO count simply take the length of the TODO items array.
Think of all of the pieces of data in our example application. We have:
* The original list of products
* The search text the user has entered
* The value of the checkbox
* The filtered list of products
Let's go through each one and figure out which one is state. Simply ask three questions about each piece of data:
1. Is it passed in from a parent via props? If so, it probably isn't state.
2. Does it change over time? If not, it probably isn't state.
3. Can you compute it based on any other state or props in your component? If so, it's not state.
The original list of products is passed in as props, so that's not state. The search text and the checkbox seem to be state since they change over time and can't be computed from anything. And finally, the filtered list of products isn't state because it can be computed by combining the original list of products with the search text and value of the checkbox.
So finally, our state is:
* The search text the user has entered
* The value of the checkbox
## Step 4: Identify where your state should live
<iframe width="100%" height="300" src="https://jsfiddle.net/QvHnx/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
OK, so we've identified what the minimal set of app state is. Next we need to identify which component mutates, or *owns*, this state.
Remember: React is all about one-way data flow down the component hierarchy. It may not be immediately clear which component should own what state. **This is often the most challenging part for newcomers to understand,** so follow these steps to figure it out:
For each piece of state in your application:
* Identify every component that renders something based on that state.
* Find a common owner component (a single component above all the components that need the state in the hierarchy).
* Either the common owner or another component higher up in the hierarchy should own the state.
* If you can't find a component where it makes sense to own the state, create a new component simply for holding the state and add it somewhere in the hierarchy above the common owner component.
Let's run through this strategy for our application:
* `ProductTable` needs to filter the product list based on state and `SearchBar` needs to display the search text and checked state.
* The common owner component is `FilterableProductTable`.
* It conceptually makes sense for the filter text and checked value to live in `FilterableProductTable`
Cool, so we've decided that our state lives in `FilterableProductTable`. First, add a `getInitialState()` method to `FilterableProductTable` that returns `{filterText: '', inStockOnly: false}` to reflect the initial state of your application. Then pass `filterText` and `inStockOnly` to `ProductTable` and `SearchBar` as a prop. Finally, use these props to filter the rows in `ProductTable` and set the values of the form fields in `SearchBar`.
You can start seeing how your application will behave: set `filterText` to `"ball"` and refresh your app. You'll see the data table is updated correctly.
## Step 5: Add inverse data flow
<iframe width="100%" height="300" src="https://jsfiddle.net/3Vs3Q/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
So far we've built an app that renders correctly as a function of props and state flowing down the hierarchy. Now it's time to support data flowing the other way: the form components deep in the hierarchy need to update the state in `FilterableProductTable`.
React makes this data flow explicit to make it easy to understand how your program works, but it does require a little more typing than traditional two-way data binding. React provides an add-on called `ReactLink` to make this pattern as convenient as two-way binding, but for the purpose of this post we'll keep everything explicit.
If you try to type or check the box in the current version of the example you'll see that React ignores your input. This is intentional, as we've set the `value` prop of the `input` to always be equal to the `state` passed in from `FilterableProductTable`.
Let's think about what we want to happen. We want to make sure that whenever the user changes the form we update the state to reflect the user input. Since components should only update their own state, `FilterableProductTable` will pass a callback to `SearchBar` that will fire whenever the state should be updated. We can use the `onChange` event on the inputs to be notified of it. And the callback passed by `FilterableProductTable` will call `setState()` and the app will be updated.
Though this sounds like a lot it's really just a few lines of code. And it's really explicit how your data is flowing throughout the app.
## And that's it
Hopefully this gives you an idea of how to think about building components and applications with React. While it may be a little more typing than you're used to, remember that code is read far more than it's written, and it's extremely easy to read this modular, explicit code. As you start to build large libraries of components you'll appreciate this explicitness and modularity, and with code reuse your lines of code will start to shrink :)

View File

@@ -1,6 +1,6 @@
---
title: "Community Round-up #10"
author: Vjeux
author: vjeux
---
This is the 10th round-up already and React has come quite far since it was open sourced. Almost all new web projects at Khan Academy, Facebook, and Instagram are being developed using React. React has been deployed in a variety of contexts: a Chrome extension, a Windows 8 application, mobile websites, and desktop websites supporting Internet Explorer 8! Language-wise, React is not only being used within JavaScript but also CoffeeScript and ClojureScript.
@@ -26,7 +26,7 @@ The best part is that no drastic changes have been required to support all those
[Pete Hunt](http://www.petehunt.net/)'s talk at JSConf EU 2013 is now available in video.
<figure><iframe width="600" height="370" src="//www.youtube.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe></figure>
<figure><iframe width="600" height="370" src="//www.youtube-nocookie.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe></figure>
## Server-side React with PHP

View File

@@ -1,6 +1,6 @@
---
title: "Community Round-up #11"
author: Vjeux
author: vjeux
---
This round-up is the proof that React has taken off from its Facebook's root: it features three in-depth presentations of React done by external people. This is awesome, keep them coming!
@@ -9,25 +9,25 @@ This round-up is the proof that React has taken off from its Facebook's root: it
[Steve Luscher](https://github.com/steveluscher) working at [LeanPub](https://leanpub.com/) made a 30 min talk at [Super VanJS](https://twitter.com/vanjs). He does a remarkable job at explaining why React is so fast with very exciting demos using the HTML5 Audio API.
<figure><iframe width="600" height="338" src="//www.youtube.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe></figure>
<figure><iframe width="600" height="338" src="//www.youtube-nocookie.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe></figure>
## React Tips
[Connor McSheffrey](http://connormcsheffrey.com/) and [Cheng Lou](https://github.com/chenglou) added a new section to the documentation. It's a list of small tips that you will probably find useful while working on React. Since each article is very small and focused, we [encourage you to contribute](http://facebook.github.io/react/tips/introduction.html)!
[Connor McSheffrey](http://connormcsheffrey.com/) and [Cheng Lou](https://github.com/chenglou) added a new section to the documentation. It's a list of small tips that you will probably find useful while working on React. Since each article is very small and focused, we [encourage you to contribute](/react/tips/introduction.html)!
- [Inline Styles](http://facebook.github.io/react/tips/inline-styles.html)
- [If-Else in JSX](http://facebook.github.io/react/tips/if-else-in-JSX.html)
- [Self-Closing Tag](http://facebook.github.io/react/tips/self-closing-tag.html)
- [Maximum Number of JSX Root Nodes](http://facebook.github.io/react/tips/maximum-number-of-jsx-root-nodes.html)
- [Shorthand for Specifying Pixel Values in style props](http://facebook.github.io/react/tips/style-props-value-px.html)
- [Type of the Children props](http://facebook.github.io/react/tips/children-props-type.html)
- [Value of null for Controlled Input](http://facebook.github.io/react/tips/controlled-input-null-value.html)
- [`componentWillReceiveProps` Not Triggered After Mounting](http://facebook.github.io/react/tips/componentWillReceiveProps-not-triggered-after-mounting.html)
- [Props in getInitialState Is an Anti-Pattern](http://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html)
- [DOM Event Listeners in a Component](http://facebook.github.io/react/tips/dom-event-listeners.html)
- [Load Initial Data via AJAX](http://facebook.github.io/react/tips/initial-ajax.html)
- [False in JSX](http://facebook.github.io/react/tips/false-in-jsx.html)
- [Inline Styles](/react/tips/inline-styles.html)
- [If-Else in JSX](/react/tips/if-else-in-JSX.html)
- [Self-Closing Tag](/react/tips/self-closing-tag.html)
- [Maximum Number of JSX Root Nodes](/react/tips/maximum-number-of-jsx-root-nodes.html)
- [Shorthand for Specifying Pixel Values in style props](/react/tips/style-props-value-px.html)
- [Type of the Children props](/react/tips/children-props-type.html)
- [Value of null for Controlled Input](/react/tips/controlled-input-null-value.html)
- [`componentWillReceiveProps` Not Triggered After Mounting](/react/tips/componentWillReceiveProps-not-triggered-after-mounting.html)
- [Props in getInitialState Is an Anti-Pattern](/react/tips/props-in-getInitialState-as-anti-pattern.html)
- [DOM Event Listeners in a Component](/react/tips/dom-event-listeners.html)
- [Load Initial Data via AJAX](/react/tips/initial-ajax.html)
- [False in JSX](/react/tips/false-in-jsx.html)
## Intro to the React Framework
@@ -50,7 +50,7 @@ This round-up is the proof that React has taken off from its Facebook's root: it
## Genesis Skeleton
[Eric Clemmons](http://ericclemmons.github.io/) is working on a "Modern, opinionated, full-stack starter kit for rapid, streamlined application development". The version 0.4.0 has just been released and has first-class support for React.
[Eric Clemmons](https://ericclemmons.github.io/) is working on a "Modern, opinionated, full-stack starter kit for rapid, streamlined application development". The version 0.4.0 has just been released and has first-class support for React.
<figure>[![](/react/img/blog/genesis_skeleton.png)](http://genesis-skeleton.com/)</figure>

View File

@@ -1,6 +1,6 @@
---
title: "React v0.5.2, v0.4.2"
author: Paul O'Shannessy
author: zpao
---
Today we're releasing an update to address a potential XSS vulnerability that can arise when using user data as a `key`. Typically "safe" data is used for a `key`, for example, an id from your database, or a unique hash. However there are cases where it may be reasonable to use user generated content. A carefully crafted piece of content could result in arbitrary JS execution. While we make a very concerted effort to ensure all text is escaped before inserting it into the DOM, we missed one case. Immediately following the discovery of this vulnerability, we performed an audit to ensure we this was the only such vulnerability.
@@ -15,7 +15,7 @@ While we've encouraged responsible disclosure as part of [Facebook's whitehat bo
You can learn more about the vulnerability discussed here: [CVE-2013-7035][cve].
[download]: http://facebook.github.io/react/downloads.html
[download]: /react/downloads.html
[bounty]: https://www.facebook.com/whitehat/
[ember]: http://emberjs.com/security/
[cve]: https://groups.google.com/forum/#!topic/reactjs/OIqxlB2aGfU

View File

@@ -1,6 +1,6 @@
---
title: "React v0.8"
author: Paul O'Shannessy
author: zpao
---
I'll start by answering the obvious question:

View File

@@ -1,28 +1,28 @@
---
title: "Community Round-up #12"
author: Vjeux
author: vjeux
---
React got featured on the front-page of Hacker News thanks to the Om library. If you try it out for the first time, take a look at the [docs](/react/docs/getting-started.html) and do not hesitate to ask questions on the [Google Group](http://groups.google.com/group/reactjs), [IRC](irc://chat.freenode.net/reactjs) or [Stack Overflow](http://stackoverflow.com/questions/tagged/reactjs). We are trying our best to help you out!
React got featured on the front-page of Hacker News thanks to the Om library. If you try it out for the first time, take a look at the [docs](/react/docs/getting-started.html) and do not hesitate to ask questions on the [Google Group](https://groups.google.com/group/reactjs), [IRC](irc://chat.freenode.net/reactjs) or [Stack Overflow](http://stackoverflow.com/questions/tagged/reactjs). We are trying our best to help you out!
## The Future of Javascript MVC
[David Nolen](http://swannodette.github.io/) announced Om, a thin wrapper on-top of React in ClojureScript. It stands out by only using immutable data structures. This unlocks the ability to write a very efficient [shouldComponentUpdate](http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate) and get huge performance improvements on some tasks.
[David Nolen](https://swannodette.github.io/) announced Om, a thin wrapper on-top of React in ClojureScript. It stands out by only using immutable data structures. This unlocks the ability to write a very efficient [shouldComponentUpdate](/react/docs/component-specs.html#updating-shouldcomponentupdate) and get huge performance improvements on some tasks.
> We've known this for some time over here in the ClojureScript corner of the world - all of our collections are immutable and modeled directly on the original Clojure versions written in Java. Modern JavaScript engines have now been tuned to the point that it's no longer uncommon to see collection performance within 2.5X of the Java Virtual Machine.
>
> Wait, wait, wait. What does the performance of persistent data structures have to do with the future of JavaScript MVCs?
>
> A whole lot.
> <figure>[![](/react/img/blog/om-backbone.png)](http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/)</figure>
> <figure>[![](/react/img/blog/om-backbone.png)](https://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/)</figure>
>
> [Read the full article...](http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/)
> [Read the full article...](https://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/)
## Scroll Position with React
Managing the scroll position when new content is inserted is usually very tricky to get right. [Vjeux](http://blog.vjeux.com/) discovered that [componentWillUpdate](http://facebook.github.io/react/docs/component-specs.html#updating-componentwillupdate) and [componentDidUpdate](http://facebook.github.io/react/docs/component-specs.html#updating-componentdidupdate) were triggered exactly at the right time to manage the scroll position.
Managing the scroll position when new content is inserted is usually very tricky to get right. [Vjeux](http://blog.vjeux.com/) discovered that [componentWillUpdate](/react/docs/component-specs.html#updating-componentwillupdate) and [componentDidUpdate](/react/docs/component-specs.html#updating-componentdidupdate) were triggered exactly at the right time to manage the scroll position.
> We can check the scroll position before the component has updated with componentWillUpdate and scroll if necessary at componentDidUpdate
>
@@ -45,10 +45,10 @@ componentDidUpdate: function() {
## Lights Out
React declarative approach is well suited to write games. [Cheng Lou](https://github.com/chenglou) wrote the famous Lights Out game in React. It's a good example of use of [TransitionGroup](http://facebook.github.io/react/docs/animation.html) to implement animations.
<figure>[![](/react/img/blog/lights-out.png)](http://chenglou.github.io/react-lights-out/)</figure>
React declarative approach is well suited to write games. [Cheng Lou](https://github.com/chenglou) wrote the famous Lights Out game in React. It's a good example of use of [TransitionGroup](/react/docs/animation.html) to implement animations.
<figure>[![](/react/img/blog/lights-out.png)](https://chenglou.github.io/react-lights-out/)</figure>
[Try it out!](http://chenglou.github.io/react-lights-out/)
[Try it out!](https://chenglou.github.io/react-lights-out/)
## Reactive Table Bookmarklet
@@ -63,9 +63,7 @@ React declarative approach is well suited to write games. [Cheng Lou](https://gi
[Ross Allen](https://twitter.com/ssorallen) implemented [MontageJS](http://montagejs.org/)'s [Reddit tutorial](http://montagejs.org/docs/tutorial-reddit-client-with-montagejs.html) in React. This is a good opportunity to compare the philosophies of the two libraries.
<iframe width="100%" height="300" src="https://jsfiddle.net/ssorallen/fEsYt/embedded/result,html,js" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
[View the source on JSFiddle...](http://jsfiddle.net/ssorallen/fEsYt/)
[View the source on JSFiddle...](https://jsfiddle.net/ssorallen/fEsYt/)
## Writing Good React Components
@@ -93,9 +91,9 @@ hoodie new todomvc -t "hoodiehq/hoodie-react-todomvc"
## JSX Compiler
Ever wanted to have a quick way to see what a JSX tag would be converted to? [Tim Yung](http://www.yungsters.com/) made a page for it.
<figure>[![](/react/img/blog/jsx-compiler.png)](http://facebook.github.io/react/jsx-compiler.html)</figure>
<figure>[![](/react/img/blog/jsx-compiler.png)](/react/jsx-compiler.html)</figure>
[Try it out!](http://facebook.github.io/react/jsx-compiler.html)
[Try it out!](/react/jsx-compiler.html)

View File

@@ -1,6 +1,6 @@
---
title: "Community Round-up #13"
author: Vjeux
author: vjeux
---
Happy holidays! This blog post is a little-late Christmas present for all the React users. Hopefully it will inspire you to write awesome web apps in 2014!
@@ -12,14 +12,14 @@ Happy holidays! This blog post is a little-late Christmas present for all the Re
<figure><iframe src="//player.vimeo.com/video/79659941" width="220" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></figure>
[Try out the demos!](http://petehunt.github.io/react-touch/)
[Try out the demos!](https://petehunt.github.io/react-touch/)
## Introduction to React
[Stoyan Stefanov](http://www.phpied.com/) talked at Joe Dev On Tech about React. He goes over all the features of the library and ends with a concrete example.
<figure><iframe width="560" height="315" src="//www.youtube.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe></figure>
<figure><iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe></figure>
## JSX: E4X The Good Parts

View File

@@ -1,11 +1,11 @@
---
title: "React Chrome Developer Tools"
author: Sebastian Markbåge
author: sebmarkbage
---
With the new year, we thought you'd enjoy some new tools for debugging React code. Today we're releasing the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi), an extension to the Chrome Developer Tools. [Download them from the Chrome Web Store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi).
<figure><iframe width="560" height="315" src="//www.youtube.com/embed/Cey7BS6dE0M" frameborder="0" allowfullscreen></iframe></figure>
<figure><iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/Cey7BS6dE0M" frameborder="0" allowfullscreen></iframe></figure>
You will get a new tab titled "React" in your Chrome DevTools. This tab shows you a list of the root React Components that are rendered on the page as well as the subcomponents that each root renders.

View File

@@ -1,6 +1,6 @@
---
title: "Community Round-up #14"
author: Vjeux
author: vjeux
---
The theme of this first round-up of 2014 is integration. I've tried to assemble a list of articles and projects that use React in various environments.
@@ -28,7 +28,7 @@ React is only one-piece of your web application stack. [Mark Lussier](https://gi
## React Rails Tutorial
[Selem Delul](http://selem.im) bundled the [React Tutorial](http://facebook.github.io/react/docs/tutorial.html) into a rails app. This is a good example on how to get started with a rails project.
[Selem Delul](http://selem.im) bundled the [React Tutorial](/react/docs/tutorial.html) into a rails app. This is a good example on how to get started with a rails project.
> ```
git clone https://github.com/necrodome/react-rails-tutorial
@@ -45,7 +45,7 @@ rails s
[Eldar Djafarov](http://eldar.djafarov.com/) implemented a mixin to link Backbone models to React state and a small abstraction to write two-way binding on-top.
<iframe width="100%" height="300" src="https://jsfiddle.net/djkojb/qZf48/13/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
[View code on JSFiddle](http://jsfiddle.net/djkojb/qZf48/13/)
[Check out the blog post...](http://eldar.djafarov.com/2013/11/reactjs-mixing-with-backbone/)
@@ -71,8 +71,7 @@ rails s
[Thomas Aylott](http://subtlegradient.com/) implemented an API that looks like Web Components but using React underneath.
<iframe width="100%" height="300" src="https://jsfiddle.net/SubtleGradient/ue2Aa/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
[View the source on JSFiddle...](http://jsfiddle.net/SubtleGradient/ue2Aa)
## React vs Angular

View File

@@ -1,9 +1,9 @@
---
title: "Community Round-up #15"
author: Jonas Gebhardt
author: jgebhardt
---
Interest in React seems to have surged ever since David Nolen ([@swannodette](https://twitter.com/swannodette))'s introduction of [Om](https://github.com/swannodette/om) in his post ["The Future of Javascript MVC Frameworks"](http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/).
Interest in React seems to have surged ever since David Nolen ([@swannodette](https://twitter.com/swannodette))'s introduction of [Om](https://github.com/swannodette/om) in his post ["The Future of Javascript MVC Frameworks"](https://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/).
In this React Community Round-up, we are taking a closer look at React from a functional programming perspective.
@@ -15,13 +15,13 @@ To start things off, Eric Normand ([@ericnormand](https://twitter.com/ericnorman
> [Read the full post...](http://www.lispcast.com/react-another-level-of-indirection)
## Reagent: Minimalistic React for ClojureScript
Dan Holmsand ([@holmsand](https://twitter.com/holmsand)) created [Reagent](http://holmsand.github.io/reagent/), a simplistic ClojureScript API to React.
Dan Holmsand ([@holmsand](https://twitter.com/holmsand)) created [Reagent](https://holmsand.github.io/reagent/), a simplistic ClojureScript API to React.
> It allows you to define efficient React components using nothing but plain ClojureScript functions and data, that describe your UI using a Hiccup-like syntax.
>
> The goal of Reagent is to make it possible to define arbitrarily complex UIs using just a couple of basic concepts, and to be fast enough by default that you rarely have to care about performance.
>
> [Check it out on Github...](http://holmsand.github.io/reagent/)
> [Check it out on Github...](https://holmsand.github.io/reagent/)
## Functional DOM programming
@@ -34,7 +34,7 @@ React's one-way data-binding naturally lends itself to a functional programming
Pete also explains this in detail at his #MeteorDevShop talk (about 30 Minutes):
<iframe width="560" height="315" src="//www.youtube.com/embed/Lqcs6hPOcFw?start=2963" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/Lqcs6hPOcFw?start=2963" frameborder="0" allowfullscreen></iframe>
@@ -106,7 +106,7 @@ In a separate post, Dyrkell breaks down [how to build a binary clock component](
[[Demo](http://www.lexicallyscoped.com/demo/binclock/)] [[Code](https://github.com/fredyr/binclock/blob/master/src/binclock/core.cljs)]
### Time Travel: Implementing undo in Om
David Nolen shows how to leverage immutable data structures to [add global undo](http://swannodette.github.io/2013/12/31/time-travel/) functionality to an app using just 13 lines of ClojureScript.
David Nolen shows how to leverage immutable data structures to [add global undo](https://swannodette.github.io/2013/12/31/time-travel/) functionality to an app using just 13 lines of ClojureScript.
### A Step-by-Step Om Walkthrough

View File

@@ -1,6 +1,6 @@
---
title: "Community Round-up #16"
author: Jonas Gebhardt
author: jgebhardt
---
There have been many posts recently covering the <i>why</i> and <i>how</i> of React. This week's community round-up includes a collection of recent articles to help you get started with React, along with a few posts that explain some of the inner workings.
@@ -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.com/watch?v=rFvZydtmsxM&feature=youtu.be&a) introduction to React Components. [[part 1](http://www.youtube.com/watch?v=rFvZydtmsxM&feature=youtu.be&a)], [[part 2](http://www.youtube.com/watch?v=5yvFLrt7N8M)]
Joe Maddalone ([@joemaddalone](https://twitter.com/joemaddalone)) of [egghead.io](https://egghead.io/) created a series of React video tutorials, such as [this](http://www.youtube-nocookie.com/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

@@ -1,6 +1,6 @@
---
title: React v0.9 RC
author: Ben Alpert
author: spicyj
---
We're almost ready to release React v0.9! We're posting a release candidate so that you can test your apps on it; we'd much prefer to find show-stopping bugs now rather than after we release.
@@ -8,13 +8,13 @@ We're almost ready to release React v0.9! We're posting a release candidate so t
The release candidate is available for download from the CDN:
* **React**
Dev build with warnings: <http://fb.me/react-0.9.0-rc1.js>
Minified build for production: <http://fb.me/react-0.9.0-rc1.min.js>
Dev build with warnings: <https://fb.me/react-0.9.0-rc1.js>
Minified build for production: <https://fb.me/react-0.9.0-rc1.min.js>
* **React with Add-Ons**
Dev build with warnings: <http://fb.me/react-with-addons-0.9.0-rc1.js>
Minified build for production: <http://fb.me/react-with-addons-0.9.0-rc1.min.js>
Dev build with warnings: <https://fb.me/react-with-addons-0.9.0-rc1.js>
Minified build for production: <https://fb.me/react-with-addons-0.9.0-rc1.min.js>
* **In-Browser JSX transformer**
<http://fb.me/JSXTransformer-0.9.0-rc1.js>
<https://fb.me/JSXTransformer-0.9.0-rc1.js>
We've also published version `0.9.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower.

View File

@@ -1,6 +1,6 @@
---
title: React v0.9
author: Ben Alpert
author: spicyj
---
I'm excited to announce that today we're releasing React v0.9, which incorporates many bug fixes and several new features since the last release. This release contains almost four months of work, including over 800 commits from over 70 committers!
@@ -10,13 +10,13 @@ Thanks to everyone who tested the release candidate; we were able to find and fi
As always, the release is available for download from the CDN:
* **React**
Dev build with warnings: <http://fb.me/react-0.9.0.js>
Minified build for production: <http://fb.me/react-0.9.0.min.js>
Dev build with warnings: <https://fb.me/react-0.9.0.js>
Minified build for production: <https://fb.me/react-0.9.0.min.js>
* **React with Add-Ons**
Dev build with warnings: <http://fb.me/react-with-addons-0.9.0.js>
Minified build for production: <http://fb.me/react-with-addons-0.9.0.min.js>
Dev build with warnings: <https://fb.me/react-with-addons-0.9.0.js>
Minified build for production: <https://fb.me/react-with-addons-0.9.0.min.js>
* **In-Browser JSX Transformer**
<http://fb.me/JSXTransformer-0.9.0.js>
<https://fb.me/JSXTransformer-0.9.0.js>
We've also published version `0.9.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.

View File

@@ -1,6 +1,6 @@
---
title: "Community Round-up #17"
author: Jonas Gebhardt
author: jgebhardt
---
@@ -15,12 +15,12 @@ Large parts of Facebook's web frontend are already powered by React. The recentl
Sberbank, Russia's largest bank, recently switched large parts of their site to use React, as detailed in [this post by Vyacheslav Slinko](https://groups.google.com/forum/#!topic/reactjs/Kj6WATX0atg).
### Relato
[Relato](http://bripkens.github.io/relato/) by [Ben Ripkens](https://github.com/bripkens) shows Open Source Statistics based on npm data. It features a filterable and sortable table built in React. Check it out &ndash; it's super fast!
[Relato](https://bripkens.github.io/relato/) by [Ben Ripkens](https://github.com/bripkens) shows Open Source Statistics based on npm data. It features a filterable and sortable table built in React. Check it out &ndash; it's super fast!
### Makona Editor
John Lynch ([@johnrlynch](https://twitter.com/johnrlynch)) created Makona, a block-style document editor for the web. Blocks of different content types comprise documents, authored using plain markup. At the switch of a toggle, block contents are then rendered on the page. While not quite a WYSIWYG editor, Makona uses plain textareas for input. This makes it compatible with a wider range of platforms than traditional rich text editors.
<figure>[![](/react/img/blog/makona-editor.png)](http://johnthethird.github.io/makona-editor/)</figure>
<figure>[![](/react/img/blog/makona-editor.png)](https://johnthethird.github.io/makona-editor/)</figure>
### Create Chrome extensions using React
React is in no way limited to just web pages. Brandon Tilley ([@BinaryMuse](https://twitter.com/BinaryMuse)) just released a detailed walk-through of [how he built his Chrome extension "Fast Tab Switcher" using React](http://brandontilley.com/2014/02/24/creating-chrome-extensions-with-react.html).
@@ -40,12 +40,12 @@ Javier Aguirre ([@javaguirre](https://twitter.com/javaguirre)) put together a si
### SVG-based graphical node editor
[NoFlo](http://noflojs.org/) and [Meemoo](http://meemoo.org/) developer [Forresto Oliphant](http://www.forresto.com/) built an awesome SVG-based [node editor](http://forresto.github.io/prototyping/react/) in React.
<figure>[![](/react/img/blog/react-svg-fbp.png)](http://forresto.github.io/prototyping/react/)</figure>
[NoFlo](http://noflojs.org/) and [Meemoo](http://meemoo.org/) developer [Forresto Oliphant](http://www.forresto.com/) built an awesome SVG-based [node editor](https://forresto.github.io/prototyping/react/) in React.
<figure>[![](/react/img/blog/react-svg-fbp.png)](https://forresto.github.io/prototyping/react/)</figure>
### Ultimate Tic-Tac-Toe Game in React
Rafał Cieślak ([@Ravicious](https://twitter.com/Ravicious)) wrote a [React version](http://ravicious.github.io/ultimate-ttt/) of [Ultimate Tic Tac Toe](http://mathwithbaddrawings.com/2013/06/16/ultimate-tic-tac-toe/). Find the source [here](https://github.com/ravicious/ultimate-ttt).
Rafał Cieślak ([@Ravicious](https://twitter.com/Ravicious)) wrote a [React version](https://ravicious.github.io/ultimate-ttt/) of [Ultimate Tic Tac Toe](http://mathwithbaddrawings.com/2013/06/16/ultimate-tic-tac-toe/). Find the source [here](https://github.com/ravicious/ultimate-ttt).
@@ -55,7 +55,7 @@ Rafał Cieślak ([@Ravicious](https://twitter.com/Ravicious)) wrote a [React ver
Emanuele shared this awesome demo video with us:
<iframe width="560" height="315" src="//www.youtube.com/embed/jYcpaemt90M" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/jYcpaemt90M" frameborder="0" allowfullscreen></iframe>
@@ -63,7 +63,7 @@ Emanuele shared this awesome demo video with us:
### Table Sorter
[Table Sorter](http://bgerm.github.io/react-table-sorter-demo/) by [bgerm](https://github.com/bgerm) [[source](https://github.com/bgerm/react-table-sorter-demo)] is another helpful React component.
[Table Sorter](https://bgerm.github.io/react-table-sorter-demo/) by [bgerm](https://github.com/bgerm) [[source](https://github.com/bgerm/react-table-sorter-demo)] is another helpful React component.
### Static-search
@@ -83,7 +83,7 @@ Dmitry Chestnykh [@dchest](https://twitter.com/dchest) wrote a [static search in
## React server rendering
Ever wonder how to pre-render React components on the server? [react-server-example](https://github.com/mhart/react-server-example) by Michael Hart ([@hichaelmart](http://twitter.com/hichaelmart)) walks through the necessary steps.
Ever wonder how to pre-render React components on the server? [react-server-example](https://github.com/mhart/react-server-example) by Michael Hart ([@hichaelmart](https://twitter.com/hichaelmart)) walks through the necessary steps.
Similarly, Alan deLevie ([@adelevie](https://twitter.com/adelevie)) created [react-client-server-starter](https://github.com/adelevie/react-client-server-starter), another detailed walk-through of how to server-render your app.

View File

@@ -1,6 +1,6 @@
---
title: "Community Round-up #18"
author: Jonas Gebhardt
author: jgebhardt
---
In this Round-up, we are taking a few closer looks at React's interplay with different frameworks and architectures.
@@ -41,7 +41,7 @@ Thomas Boyt ([@thomasaboyt](https://twitter.com/thomasaboyt)) wrote [this detail
## React vs. Ember
Eric Berry ([@coderberry](https://twitter.com/coderberry)) developed Ember equivalents for some of the official React examples. Read his post for a side-by-side comparison of the respective implementations: ["Facebook React vs. Ember"](http://instructure.github.io/blog/2013/12/17/facebook-react-vs-ember/).
Eric Berry ([@coderberry](https://twitter.com/coderberry)) developed Ember equivalents for some of the official React examples. Read his post for a side-by-side comparison of the respective implementations: ["Facebook React vs. Ember"](https://instructure.github.io/blog/2013/12/17/facebook-react-vs-ember/).
## React and plain old HTML
@@ -75,7 +75,7 @@ Ian Bicking ([@ianbicking](https://twitter.com/ianbicking)) of Mozilla Labs [exp
React was also recently mentioned at ng-conf, where the Angular team commented on React's concept of the virtual DOM:
<iframe width="560" height="315" src="//www.youtube.com/embed/srt3OBP2kGc?start=113" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/srt3OBP2kGc?start=113" frameborder="0" allowfullscreen></iframe>
## React and Web Components

View File

@@ -1,20 +1,20 @@
---
title: React v0.10 RC
author: Paul OShannessy
author: zpao
---
[v0.9 has only been out for a month](http://facebook.github.io/react/blog/2014/02/20/react-v0.9.html), but were getting ready to push out v0.10 already. Unlike v0.9 which took a long time, we don't have a long list of changes to talk about.
[v0.9 has only been out for a month](/react/blog/2014/02/20/react-v0.9.html), but were getting ready to push out v0.10 already. Unlike v0.9 which took a long time, we don't have a long list of changes to talk about.
The release candidate is available for download from the CDN:
* **React**
Dev build with warnings: <http://fb.me/react-0.10.0-rc1.js>
Minified build for production: <http://fb.me/react-0.10.0-rc1.min.js>
Dev build with warnings: <https://fb.me/react-0.10.0-rc1.js>
Minified build for production: <https://fb.me/react-0.10.0-rc1.min.js>
* **React with Add-Ons**
Dev build with warnings: <http://fb.me/react-with-addons-0.10.0-rc1.js>
Minified build for production: <http://fb.me/react-with-addons-0.10.0-rc1.min.js>
Dev build with warnings: <https://fb.me/react-with-addons-0.10.0-rc1.js>
Minified build for production: <https://fb.me/react-with-addons-0.10.0-rc1.min.js>
* **In-Browser JSX transformer**
<http://fb.me/JSXTransformer-0.10.0-rc1.js>
<https://fb.me/JSXTransformer-0.10.0-rc1.js>
We've also published version `0.10.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
@@ -24,7 +24,7 @@ Please try these builds out and [file an issue on GitHub](https://github.com/fac
The main purpose of this release is to provide a smooth upgrade path as we evolve some of the implementation of core. In v0.9 we started warning in cases where you called methods on unmounted components. This is part of an effort to enforce the idea that the return value of a component (`React.DOM.div()`, `MyComponent()`) is in fact not a reference to the component instance React uses in the virtual DOM. The return value is instead a light-weight object that React knows how to use. Since the return value currently is a reference to the same object React uses internally, we need to make this transition in stages as many people have come to depend on this implementation detail.
In 0.10, were adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think youre making to a mounted component. Well forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on [this page](http://fb.me/react-warning-descriptors). Most of the time you can solve your pattern by using refs.
In 0.10, were adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think youre making to a mounted component. Well forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on [this page](https://fb.me/react-warning-descriptors). Most of the time you can solve your pattern by using refs.
Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:

View File

@@ -1,6 +1,6 @@
---
title: React v0.10
author: Paul OShannessy
author: zpao
---
Hot on the heels of the [release candidate earlier this week](/react/blog/2014/03/19/react-v0.10-rc1.html), we're ready to call v0.10 done. The only major issue we discovered had to do with the `react-tools` package, which has been updated. We've copied over the changelog from the RC with some small clarifying changes.
@@ -8,13 +8,13 @@ Hot on the heels of the [release candidate earlier this week](/react/blog/2014/0
The release is available for download from the CDN:
* **React**
Dev build with warnings: <http://fb.me/react-0.10.0.js>
Minified build for production: <http://fb.me/react-0.10.0.min.js>
Dev build with warnings: <https://fb.me/react-0.10.0.js>
Minified build for production: <https://fb.me/react-0.10.0.min.js>
* **React with Add-Ons**
Dev build with warnings: <http://fb.me/react-with-addons-0.10.0.js>
Minified build for production: <http://fb.me/react-with-addons-0.10.0.min.js>
Dev build with warnings: <https://fb.me/react-with-addons-0.10.0.js>
Minified build for production: <https://fb.me/react-with-addons-0.10.0.min.js>
* **In-Browser JSX transformer**
<http://fb.me/JSXTransformer-0.10.0.js>
<https://fb.me/JSXTransformer-0.10.0.js>
We've also published version `0.10.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
@@ -24,7 +24,7 @@ Please try these builds out and [file an issue on GitHub](https://github.com/fac
The main purpose of this release is to provide a smooth upgrade path as we evolve some of the implementation of core. In v0.9 we started warning in cases where you called methods on unmounted components. This is part of an effort to enforce the idea that the return value of a component (`React.DOM.div()`, `MyComponent()`) is in fact not a reference to the component instance React uses in the virtual DOM. The return value is instead a light-weight object that React knows how to use. Since the return value currently is a reference to the same object React uses internally, we need to make this transition in stages as many people have come to depend on this implementation detail.
In 0.10, were adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think youre making to a mounted component. Well forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on [this page](http://fb.me/react-warning-descriptors). Most of the time you can solve your pattern by using refs.
In 0.10, were adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think youre making to a mounted component. Well forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on [this page](https://fb.me/react-warning-descriptors). Most of the time you can solve your pattern by using refs.
Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:

View File

@@ -1,6 +1,6 @@
---
title: The Road to 1.0
author: Paul O'Shannessy
author: zpao
---
When we launched React last spring, we purposefully decided not to call it 1.0. It was production ready, but we had plans to evolve APIs and behavior as we saw how people were using React, both internally and externally. We've learned a lot over the past 9 months and we've thought a lot about what 1.0 will mean for React. A couple weeks ago, I outlined [several projects][projects] that we have planned to take us to 1.0 and beyond. Today I'm writing a bit more about them to give our users a better insight into our plans.
@@ -51,6 +51,6 @@ Finding a way to define animations in a declarative way is a hard problem. We've
There are several other things I listed on [our projects page][projects] that we're tracking. Some of them are internals and have no obvious outward effect (improve tests, repo separation, updated test runner). I encourage you to take a look.
[v0.10]: http://facebook.github.io/react/blog/2014/03/21/react-v0.10.html
[v0.10]: /react/blog/2014/03/21/react-v0.10.html
[pitofsuccess]: http://blog.codinghorror.com/falling-into-the-pit-of-success/
[projects]: https://github.com/facebook/react/wiki/Projects

View File

@@ -1,6 +1,6 @@
---
title: "Use React and JSX in ASP.NET MVC"
author: Daniel Lo Nigro
author: Daniel15
---
Today we're happy to announce the initial release of

View File

@@ -1,11 +1,11 @@
---
title: "Flux: An Application Architecture for React"
author: Bill Fisher and Jing Chen
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:
<figure><iframe width="560" height="315" src="//www.youtube.com/embed/nYkdrAPrdcw?list=PLb0IAmt7-GS188xDYE-u1ShQmFFGbrk0v&start=621" frameborder="0" allowfullscreen></iframe></figure>
<figure><iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/nYkdrAPrdcw?list=PLb0IAmt7-GS188xDYE-u1ShQmFFGbrk0v&start=621" frameborder="0" allowfullscreen></iframe></figure>
To summarize, Flux works well for us because the single directional data flow makes it easy to understand and modify an application as it becomes more complicated. We found that two-way data bindings lead to cascading updates, where changing one data model led to another data model updating, making it very difficult to predict what would change as the result of a single user interaction.
@@ -13,4 +13,4 @@ In Flux, the Dispatcher is a singleton that directs the flow of data and ensures
When a user interacts with a React view, the view sends an action (usually represented as a JavaScript object with some fields) through the dispatcher, which notifies the various stores that hold the application's data and business logic. When the stores change state, they notify the views that something has updated. This works especially well with React's declarative model, which allows the stores to send updates without specifying how to transition views between states.
Flux is more of a pattern than a formal framework, so you can start using Flux immediately without a lot of new code. An [example of this architecture](https://github.com/facebook/flux/tree/master/examples/flux-todomvc) is available, along with more [detailed documentation](http://facebook.github.io/flux/docs/overview.html) and a [tutorial](http://facebook.github.io/flux/docs/todo-list.html). Look for more examples to come in the future.
Flux is more of a pattern than a formal framework, so you can start using Flux immediately without a lot of new code. An [example of this architecture](https://github.com/facebook/flux/tree/master/examples/flux-todomvc) is available, along with more [detailed documentation](https://facebook.github.io/flux/docs/overview.html) and a [tutorial](https://facebook.github.io/flux/docs/todo-list.html). Look for more examples to come in the future.

View File

@@ -1,13 +1,13 @@
---
title: "One Year of Open-Source React"
author: Cheng Lou
author: chenglou
---
Today marks the one-year open-source anniversary of React.
Its been a crazy ride. 2.3k commits and 1.5k issues and pull requests later, were approaching version 1.0 and nearing 7k Github stars, with big names such as Khan Academy, New York Times, and Airbnb (and naturally, Facebook and Instagram) using React in production, and many more developers blogging their success stories with it. The [roadmap](http://facebook.github.io/react/blog/2014/03/28/the-road-to-1.0.html) gives a glimpse into the future of the library; exciting stuff lies ahead!
Its been a crazy ride. 2.3k commits and 1.5k issues and pull requests later, were approaching version 1.0 and nearing 7k Github stars, with big names such as Khan Academy, New York Times, and Airbnb (and naturally, Facebook and Instagram) using React in production, and many more developers blogging their success stories with it. The [roadmap](/react/blog/2014/03/28/the-road-to-1.0.html) gives a glimpse into the future of the library; exciting stuff lies ahead!
Every success has its story. React was born out of our frustration at existing solutions for building UIs. When it was first suggested at Facebook, few people thought that functionally re-rendering everything and diffing the results could ever perform well. However, support grew after we built the first implementation and people wrote their first components. When we open-sourced React, the initial reception was [similarly skeptical](http://www.reddit.com/r/programming/comments/1fak87/react_facebooks_latest_javascript_client_library/). It challenges many pre-established conventions and received mostly disapproving first-impressions, intermingled with positive ones that often were votes of confidence in Facebooks engineering capabilities. On an open, competitive platform such as the web, it's been hard to convince people to try React. [JSX](http://facebook.github.io/react/docs/jsx-in-depth.html), in particular, filtered out a huge chunk of potential early adopters.
Every success has its story. React was born out of our frustration at existing solutions for building UIs. When it was first suggested at Facebook, few people thought that functionally re-rendering everything and diffing the results could ever perform well. However, support grew after we built the first implementation and people wrote their first components. When we open-sourced React, the initial reception was [similarly skeptical](https://www.reddit.com/r/programming/comments/1fak87/react_facebooks_latest_javascript_client_library/). It challenges many pre-established conventions and received mostly disapproving first-impressions, intermingled with positive ones that often were votes of confidence in Facebooks engineering capabilities. On an open, competitive platform such as the web, it's been hard to convince people to try React. [JSX](/react/docs/jsx-in-depth.html), in particular, filtered out a huge chunk of potential early adopters.
Fast forward one year, React has strongly [grown in popularity](https://news.ycombinator.com/item?id=7489959). Special acknowledgments go to Khan Academy, the ClojureScript community, and established frameworks such as Ember and Angular for contributing to and debating on our work. We'd also like to thank all the [individual contributors](https://github.com/facebook/react/graphs/contributors) who have taken the time to help out over the past year. React, as a library and as a new paradigm on the web, wouldn't have gained as much traction without them. In the future, we will continue to try to set an example of what's possible to achieve when we rethink about current “best practices”.

View File

@@ -1,6 +1,6 @@
---
title: "Community Round-up #19"
author: Cheng Lou
author: chenglou
---
## React Meetups!
@@ -13,7 +13,7 @@ In case you haven't seen it, we've consolidated the tooling solution around Reac
- [Ryan Florence](https://github.com/rpflorence) and [Michael Jackson](https://github.com/mjackson)'s [react-nested-router](https://github.com/rpflorence/react-nested-router), which is a translation of the Ember router API to React.
- [Stephen J. Collings](https://github.com/stevoland)'s [react-bootstrap](https://github.com/react-bootstrap/react-bootstrap), which wraps the popular framework with a bit of React goodness. The [website](http://react-bootstrap.github.io/components.html) features live-editable demos.
- [Stephen J. Collings](https://github.com/stevoland)'s [react-bootstrap](https://github.com/react-bootstrap/react-bootstrap), which wraps the popular framework with a bit of React goodness. The [website](https://react-bootstrap.github.io/components.html) features live-editable demos.
- [Andrey Popp](https://github.com/andreypopp)'s [react-quickstart](https://github.com/andreypopp/react-quickstart), which gives you a quick template for server-side rendering and routing, among other features.
@@ -23,7 +23,7 @@ These are some of the links that often pop up on the #reactjs IRC channel. If yo
The core concepts React themselves is something very valuable that the community is exploring and pushing further. A year ago, we wouldn't have imagined something like [Bruce Hauman](http://rigsomelight.com)'s [Flappy Bird ClojureScript port](http://rigsomelight.com/2014/05/01/interactive-programming-flappy-bird-clojurescript.html), whose interactive programming has been made possible through React:
<iframe width="560" height="315" src="//www.youtube.com/embed/KZjFVdU8VLI" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/KZjFVdU8VLI" frameborder="0" allowfullscreen></iframe>
And don't forget [Pete Hunt](https://github.com/petehunt)'s Wolfenstein 3D rendering engine in React ([source code](https://github.com/petehunt/wolfenstein3D-react/blob/master/js/renderer.js#L183)). While it's nearly a year old, it's still a nice demo.

View File

@@ -1,6 +1,6 @@
---
title: React v0.11 RC
author: Paul OShannessy
author: zpao
---
It's that time again… we're just about ready to ship a new React release! v0.11 includes a wide array of bug fixes and features. We highlighted some of the most important changes below, along with the full changelog.
@@ -8,13 +8,13 @@ It's that time again… we're just about ready to ship a new React release! v0.1
The release candidate is available for download from the CDN:
* **React**
Dev build with warnings: <http://fb.me/react-0.11.0-rc1.js>
Minified build for production: <http://fb.me/react-0.11.0-rc1.min.js>
Dev build with warnings: <https://fb.me/react-0.11.0-rc1.js>
Minified build for production: <https://fb.me/react-0.11.0-rc1.min.js>
* **React with Add-Ons**
Dev build with warnings: <http://fb.me/react-with-addons-0.11.0-rc1.js>
Minified build for production: <http://fb.me/react-with-addons-0.11.0-rc1.min.js>
Dev build with warnings: <https://fb.me/react-with-addons-0.11.0-rc1.js>
Minified build for production: <https://fb.me/react-with-addons-0.11.0-rc1.min.js>
* **In-Browser JSX transformer**
<http://fb.me/JSXTransformer-0.11.0-rc1.js>
<https://fb.me/JSXTransformer-0.11.0-rc1.js>
We've also published version `0.11.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower.

View File

@@ -1,6 +1,6 @@
---
title: React v0.11
author: Paul OShannessy
author: zpao
---
**Update:** We missed a few important changes in our initial post and changelog. We've updated this post with details about [Descriptors](#descriptors) and [Prop Type Validation](#prop-type-validation).
@@ -15,13 +15,13 @@ This version has been cooking for a couple months now and includes a wide array
The release is available for download from the CDN:
* **React**
Dev build with warnings: <http://fb.me/react-0.11.0.js>
Minified build for production: <http://fb.me/react-0.11.0.min.js>
Dev build with warnings: <https://fb.me/react-0.11.0.js>
Minified build for production: <https://fb.me/react-0.11.0.min.js>
* **React with Add-Ons**
Dev build with warnings: <http://fb.me/react-with-addons-0.11.0.js>
Minified build for production: <http://fb.me/react-with-addons-0.11.0.min.js>
Dev build with warnings: <https://fb.me/react-with-addons-0.11.0.js>
Minified build for production: <https://fb.me/react-with-addons-0.11.0.min.js>
* **In-Browser JSX transformer**
<http://fb.me/JSXTransformer-0.11.0.js>
<https://fb.me/JSXTransformer-0.11.0.js>
We've also published version `0.11.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
@@ -100,7 +100,7 @@ Keyboard and mouse events also now include a normalized `e.getModifierState()` t
## Descriptors
In our [v0.10 release notes](http://facebook.github.io/react/blog/2014/03/21/react-v0.10.html#clone-on-mount), we called out that we were deprecating the existing behavior of the component function call (eg `component = MyComponent(props, ...children)` or `component = <MyComponent prop={...}/>`). Previously that would create an instance and React would modify that internally. You could store that reference and then call functions on it (eg `component.setProps(...)`). This no longer works. `component` in the above examples will be a descriptor and not an instance that can be operated on. The v0.10 release notes provide a complete example along with a migration path. The development builds also provided warnings if you called functions on descriptors.
In our [v0.10 release notes](/react/blog/2014/03/21/react-v0.10.html#clone-on-mount), we called out that we were deprecating the existing behavior of the component function call (eg `component = MyComponent(props, ...children)` or `component = <MyComponent prop={...}/>`). Previously that would create an instance and React would modify that internally. You could store that reference and then call functions on it (eg `component.setProps(...)`). This no longer works. `component` in the above examples will be a descriptor and not an instance that can be operated on. The v0.10 release notes provide a complete example along with a migration path. The development builds also provided warnings if you called functions on descriptors.
Along with this change to descriptors, `React.isValidComponent` and `React.PropTypes.component` now actually validate that the value is a descriptor. Overwhelmingly, these functions are used to validate the value of `MyComponent()`, which as mentioned is now a descriptor, not a component instance. We opted to reduce code churn and make the migration to 0.11 as easy as possible. However, we realize this is has caused some confusion and we're working to make sure we are consistent with our terminology.

View File

@@ -1,6 +1,6 @@
---
title: React v0.11.1
author: Paul OShannessy
author: zpao
---
Today we're releasing React v0.11.1 to address a few small issues. Thanks to everybody who has reported them as they've begun upgrading.
@@ -16,13 +16,13 @@ We'd also like to call out a couple additional breaking changes that we failed t
The release is available for download from the CDN:
* **React**
Dev build with warnings: <http://fb.me/react-0.11.1.js>
Minified build for production: <http://fb.me/react-0.11.1.min.js>
Dev build with warnings: <https://fb.me/react-0.11.1.js>
Minified build for production: <https://fb.me/react-0.11.1.min.js>
* **React with Add-Ons**
Dev build with warnings: <http://fb.me/react-with-addons-0.11.1.js>
Minified build for production: <http://fb.me/react-with-addons-0.11.1.min.js>
Dev build with warnings: <https://fb.me/react-with-addons-0.11.1.js>
Minified build for production: <https://fb.me/react-with-addons-0.11.1.min.js>
* **In-Browser JSX transformer**
<http://fb.me/JSXTransformer-0.11.1.js>
<https://fb.me/JSXTransformer-0.11.1.js>
We've also published version `0.11.1` of the `react` and `react-tools` packages on npm and the `react` package on bower.

View File

@@ -1,6 +1,6 @@
---
title: "Community Round-up #20"
author: Lou Husson
author: LoukaN
---
It's an exciting time for React as there are now more commits from open source contributors than from Facebook engineers! Keep up the good work :)
@@ -9,19 +9,19 @@ It's an exciting time for React as there are now more commits from open source c
[Atom, GitHub's code editor, is now using React](http://blog.atom.io/2014/07/02/moving-atom-to-react.html) to build the editing experience. They made the move in order to improve performance. By default, React helped them eliminate unnecessary reflows, enabling them to focus on architecting the rendering pipeline in order to minimize repaints by using hardware acceleration. This is a testament to the fact that React's architecture is perfect for high performant applications.
[<img src="http://blog.atom.io/img/posts/gpu-cursor-move.gif" style="width: 100%;" />](http://blog.atom.io/2014/07/02/moving-atom-to-react.html)
[<img src="/react/img/blog/gpu-cursor-move.gif" style="width: 100%;" />](http://blog.atom.io/2014/07/02/moving-atom-to-react.html)
## Why Does React Scale?
At the last [JSConf.us](http://2014.jsconf.us/), Vjeux talked about the design decisions made in the API that allows it to scale to a large number of developers. If you don't have 20 minutes, take a look at the [annotated slides](https://speakerdeck.com/vjeux/why-does-react-scale-jsconf-2014).
<iframe width="650" height="315" src="//www.youtube.com/embed/D-ioDiacTm8" frameborder="0" allowfullscreen></iframe>
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/D-ioDiacTm8" frameborder="0" allowfullscreen></iframe>
## Live Editing
One of the best features of React is that it provides the foundations to implement concepts that were otherwise extremely difficult, like server-side rendering, undo-redo, rendering to non-DOM environments like canvas... [Dan Abramov](https://twitter.com/dan_abramov) got hot code reloading working with webpack in order to [live edit a React project](http://gaearon.github.io/react-hot-loader/)!
One of the best features of React is that it provides the foundations to implement concepts that were otherwise extremely difficult, like server-side rendering, undo-redo, rendering to non-DOM environments like canvas... [Dan Abramov](https://twitter.com/dan_abramov) got hot code reloading working with webpack in order to [live edit a React project](https://gaearon.github.io/react-hot-loader/)!
<iframe src="//player.vimeo.com/video/100010922" width="650" height="315" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
@@ -63,7 +63,7 @@ If you missed the last [London React Meetup](http://www.meetup.com/London-React-
- React on Rails - How to use React with Ruby on Rails to build isomorphic apps
- Building an isomorphic, real-time to-do list with moped and node.js
<iframe width="650" height="315" src="//www.youtube.com/embed/CP3lvm5Ppqo" frameborder="0" allowfullscreen></iframe>
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/CP3lvm5Ppqo" frameborder="0" allowfullscreen></iframe>
In related news, the next [React SF Meetup](http://www.meetup.com/ReactJS-San-Francisco/events/195518392/) will be from Prezi: [“Immediate Mode on the Web: How We Implemented the Prezi Viewer in JavaScript”](https://medium.com/prezi-engineering/how-and-why-prezi-turned-to-javascript-56e0ca57d135). While not in React, their tech is really awesome and shares a lot of React's design principles and perf optimizations.
@@ -112,4 +112,3 @@ var Foo = React.createClass({
## Random Tweet
<blockquote class="twitter-tweet" data-conversation="none" lang="en"><p>“<a href="https://twitter.com/apphacker">@apphacker</a>: I take back the mean things I said about <a href="https://twitter.com/reactjs">@reactjs</a> I actually like it.” Summarizing the life of ReactJS in a single tweet.</p>&mdash; Jordan (@jordwalke) <a href="https://twitter.com/jordwalke/statuses/490747339607265280">July 20, 2014</a></blockquote>

View File

@@ -1,11 +1,11 @@
---
title: "Flux: Actions and the Dispatcher"
author: Bill Fisher
author: fisherwebdev
---
Flux is the application architecture Facebook uses to build JavaScript applications. It's based on a unidirectional data flow. We've built everything from small widgets to huge applications with Flux, and it's handled everything we've thrown at it. Because we've found it to be a great way to structure our code, we're excited to share it with the open source community. [Jing Chen presented Flux](http://youtu.be/nYkdrAPrdcw?t=10m20s) at the F8 conference, and since that time we've seen a lot of interest in it. We've also published an [overview of Flux](http://facebook.github.io/flux/docs/overview.html) and a [TodoMVC example](https://github.com/facebook/flux/tree/master/examples/flux-todomvc/), with an accompanying [tutorial](http://facebook.github.io/flux/docs/todo-list.html).
Flux is the application architecture Facebook uses to build JavaScript applications. It's based on a unidirectional data flow. We've built everything from small widgets to huge applications with Flux, and it's handled everything we've thrown at it. Because we've found it to be a great way to structure our code, we're excited to share it with the open source community. [Jing Chen presented Flux](http://youtu.be/nYkdrAPrdcw?t=10m20s) at the F8 conference, and since that time we've seen a lot of interest in it. We've also published an [overview of Flux](https://facebook.github.io/flux/docs/overview.html) and a [TodoMVC example](https://github.com/facebook/flux/tree/master/examples/flux-todomvc/), with an accompanying [tutorial](https://facebook.github.io/flux/docs/todo-list.html).
Flux is more of a pattern than a full-blown framework, and you can start using it without a lot of new code beyond React. Up until recently, however, we haven't released one crucial piece of our Flux software: the dispatcher. But along with the creation of the new [Flux code repository](https://github.com/facebook/flux) and [Flux website](http://facebook.github.io/flux/), we've now open sourced the same [dispatcher](http://facebook.github.io/flux/docs/dispatcher.html) we use in our production applications.
Flux is more of a pattern than a full-blown framework, and you can start using it without a lot of new code beyond React. Up until recently, however, we haven't released one crucial piece of our Flux software: the dispatcher. But along with the creation of the new [Flux code repository](https://github.com/facebook/flux) and [Flux website](https://facebook.github.io/flux/), we've now open sourced the same [dispatcher](https://facebook.github.io/flux/docs/dispatcher.html) we use in our production applications.
Where the Dispatcher Fits in the Flux Data Flow
@@ -21,7 +21,7 @@ When new data enters the system, whether through a person interacting with the a
Different actions are identified by a type attribute. When all of the stores receive the action, they typically use this attribute to determine if and how they should respond to it. In a Flux application, both stores and views control themselves; they are not acted upon by external objects. Actions flow into the stores through the callbacks they define and register, not through setter methods.
Letting the stores update themselves eliminates many entanglements typically found in MVC applications, where cascading updates between models can lead to unstable state and make accurate testing very difficult. The objects within a Flux application are highly decoupled, and adhere very strongly to the [Law of Demeter](http://en.wikipedia.org/wiki/Law_of_Demeter), the principle that each object within a system should know as little as possible about the other objects in the system. This results in software that is more maintainable, adaptable, testable, and easier for new engineering team members to understand.
Letting the stores update themselves eliminates many entanglements typically found in MVC applications, where cascading updates between models can lead to unstable state and make accurate testing very difficult. The objects within a Flux application are highly decoupled, and adhere very strongly to the [Law of Demeter](https://en.wikipedia.org/wiki/Law_of_Demeter), the principle that each object within a system should know as little as possible about the other objects in the system. This results in software that is more maintainable, adaptable, testable, and easier for new engineering team members to understand.
<img src="/react/img/blog/flux-diagram.png" style="width: 100%;" />

View File

@@ -1,10 +1,10 @@
---
title: "Community Round-up #21"
author: Lou Husson
author: LoukaN
---
## React Router
[Ryan Florence](http://ryanflorence.com/) and [Michael Jackson](http://twitter.com/mjackson) ported Ember's router to React in a project called [React Router](https://github.com/rackt/react-router). This is a very good example of both communities working together to make the web better!
[Ryan Florence](http://ryanflorence.com/) and [Michael Jackson](https://twitter.com/mjackson) ported Ember's router to React in a project called [React Router](https://github.com/rackt/react-router). This is a very good example of both communities working together to make the web better!
```javascript
React.renderComponent((
@@ -16,7 +16,7 @@ React.renderComponent((
</Route>
</Route>
</Routes>
), document.body);
), document.getElementById('example'));
```
## Going Big with React
@@ -49,7 +49,7 @@ Areeb Malik, from Facebook, talks about his experience using React. "On paper, a
## Referencing Dynamic Children
While Matt Zabriskie was working on [react-tabs](https://www.npmjs.org/package/react-tabs) he discovered how to use React.Children.map and React.addons.cloneWithProps in order to [reference dynamic children](http://www.mattzabriskie.com/blog/react-referencing-dynamic-children).
While Matt Zabriskie was working on [react-tabs](https://www.npmjs.com/package/react-tabs) he discovered how to use React.Children.map and React.addons.cloneWithProps in order to [reference dynamic children](http://www.mattzabriskie.com/blog/react-referencing-dynamic-children).
```javascript
var App = React.createClass({
@@ -83,12 +83,12 @@ Have you ever wondered how JSX was implemented? James Long wrote a very instruct
[Matt Zabriskie](https://github.com/mzabriskie) released a [project](https://github.com/mzabriskie/react-draggable) to make your react components draggable.
[![](/react/img/blog/react-draggable.png)](http://mzabriskie.github.io/react-draggable/example/)
[![](/react/img/blog/react-draggable.png)](https://mzabriskie.github.io/react-draggable/example/)
## HTML Parser2 React
[Jason Brown](http://browniefed.github.io/) adapted htmlparser2 to React: [htmlparser2-react](https://www.npmjs.org/package/htmlparser2-react). That allows you to convert raw HTML to the virtual DOM.
[Jason Brown](https://browniefed.github.io/) adapted htmlparser2 to React: [htmlparser2-react](https://www.npmjs.com/package/htmlparser2-react). That allows you to convert raw HTML to the virtual DOM.
This is not the intended way to use React but can be useful as last resort if you have an existing piece of HTML.
```javascript
@@ -104,7 +104,7 @@ var parsedComponent = reactParser(html, React);
If you haven't yet tried out React, Jacob Rios did a Hangout where he covers the most important aspects and thankfully he recorded it!
<iframe width="650" height="315" src="//www.youtube.com/embed/lAn7GVoGlKU" frameborder="0" allowfullscreen></iframe>
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/lAn7GVoGlKU" frameborder="0" allowfullscreen></iframe>
## Random Tweets

View File

@@ -1,13 +1,13 @@
---
title: "Introducing the JSX Specification"
author: Sebastian Markbåge
author: sebmarkbage
---
At Facebook we've been using JSX for a long time. We originally introduced it to the world last year alongside React, but we actually used it in another form before that to create native DOM nodes. We've also seen some similar efforts grow out of our work in order to be used with other libraries and in interesting ways. At this point React JSX is just one of many implementations.
In order to make it easier to implement new versions and to make sure that the syntax remains compatible, we're now formalizing the syntax of JSX in a stand-alone spec without any semantic meaning. It's completely stand-alone from React itself.
Read the spec now at <http://facebook.github.io/jsx/>.
Read the spec now at <https://facebook.github.io/jsx/>.
This is not a proposal to be standardized in ECMAScript. It's just a reference document that transpiler writers and syntax highlighters can agree on. It's currently in a draft stage and will probably continue to be a living document.

View File

@@ -1,7 +1,7 @@
---
title: "Community Round-up #22"
layout: post
author: Lou Husson
author: LoukaN
---
This has been an exciting summer as four big companies: Yahoo, Mozilla, Airbnb and Reddit announced that they were using React!
@@ -20,7 +20,7 @@ This has been an exciting summer as four big companies: Yahoo, Mozilla, Airbnb a
[Vjeux](http://blog.vjeux.com/), from the React team, gave a talk at OSCON on the history of React and the various optimizations strategies that are implemented. You can also check out the [annotated slides](https://speakerdeck.com/vjeux/oscon-react-architecture) or [Chris Dawson](http://thenewstack.io/author/chrisdawson/)'s notes titled [JavaScripts History and How it Led To React](http://thenewstack.io/javascripts-history-and-how-it-led-to-reactjs/).
<iframe width="650" height="315" src="//www.youtube.com/embed/eCf5CquV_Bw" frameborder="0" allowfullscreen></iframe>
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/eCf5CquV_Bw" frameborder="0" allowfullscreen></iframe>
## v8 optimizations
@@ -30,7 +30,7 @@ Jakob Kummerow landed [two optimizations to V8](http://www.chromium.org/develope
## Reusable Components by Khan Academy
[Khan Academy](https://www.khanacademy.org/) released [many high quality standalone components](http://khan.github.io/react-components/) they are using. This is a good opportunity to see what React code used in production look like.
[Khan Academy](https://www.khanacademy.org/) released [many high quality standalone components](https://khan.github.io/react-components/) they are using. This is a good opportunity to see what React code used in production look like.
```javascript
var TeX = require('react-components/js/tex.jsx');
@@ -89,7 +89,7 @@ var Button = React.createClass({
If you are getting started with React, [Joe Maddalone](http://www.joemaddalone.com/) made a good tutorial on how to build your first component.
<iframe width="650" height="200" src="//www.youtube.com/embed/rFvZydtmsxM" frameborder="0" allowfullscreen></iframe>
<iframe width="650" height="200" src="//www.youtube-nocookie.com/embed/rFvZydtmsxM" frameborder="0" allowfullscreen></iframe>
## Saving time & staying sane?

View File

@@ -1,6 +1,6 @@
---
title: React v0.11.2
author: Paul OShannessy
author: zpao
---
Today we're releasing React v0.11.2 to add a few small features.
@@ -14,13 +14,13 @@ And lastly, on the heels of announcing Flow at [@Scale](http://atscaleconference
The release is available for download from the CDN:
* **React**
Dev build with warnings: <http://fb.me/react-0.11.2.js>
Minified build for production: <http://fb.me/react-0.11.2.min.js>
Dev build with warnings: <https://fb.me/react-0.11.2.js>
Minified build for production: <https://fb.me/react-0.11.2.min.js>
* **React with Add-Ons**
Dev build with warnings: <http://fb.me/react-with-addons-0.11.2.js>
Minified build for production: <http://fb.me/react-with-addons-0.11.2.min.js>
Dev build with warnings: <https://fb.me/react-with-addons-0.11.2.js>
Minified build for production: <https://fb.me/react-with-addons-0.11.2.min.js>
* **In-Browser JSX transformer**
<http://fb.me/JSXTransformer-0.11.2.js>
<https://fb.me/JSXTransformer-0.11.2.js>
We've also published version `0.11.2` of the `react` and `react-tools` packages on npm and the `react` package on bower.

View File

@@ -1,11 +1,11 @@
---
title: "Testing Flux Applications"
author: Bill Fisher
author: fisherwebdev
---
**A more up-to-date version of this post is available as part of the [Flux documentation](http://facebook.github.io/flux/docs/testing-flux-applications.html).**
**A more up-to-date version of this post is available as part of the [Flux documentation](https://facebook.github.io/flux/docs/testing-flux-applications.html).**
[Flux](http://facebook.github.io/flux/) is the application architecture that Facebook uses to build web applications with [React](http://facebook.github.io/react/). It's based on a unidirectional data flow. In previous blog posts and documentation articles, we've shown the [basic structure and data flow](http://facebook.github.io/flux/docs/overview.html), more closely examined the [dispatcher and action creators](http://facebook.github.io/react/blog/2014/07/30/flux-actions-and-the-dispatcher.html), and shown how to put it all together with a [tutorial](http://facebook.github.io/flux/docs/todo-list.html). Now let's look at how to do formal unit testing of Flux applications with [Jest](http://facebook.github.io/jest/), Facebook's auto-mocking testing framework.
[Flux](https://facebook.github.io/flux/) is the application architecture that Facebook uses to build web applications with [React](/react/). It's based on a unidirectional data flow. In previous blog posts and documentation articles, we've shown the [basic structure and data flow](https://facebook.github.io/flux/docs/overview.html), more closely examined the [dispatcher and action creators](/react/blog/2014/07/30/flux-actions-and-the-dispatcher.html), and shown how to put it all together with a [tutorial](https://facebook.github.io/flux/docs/todo-list.html). Now let's look at how to do formal unit testing of Flux applications with [Jest](https://facebook.github.io/jest/), Facebook's auto-mocking testing framework.
Testing with Jest
@@ -180,7 +180,7 @@ Now we have a collection of objects that will come back from MyOtherStore whenev
A brief example of this technique is up on GitHub within the Flux Chat example's [UnreadThreadStore-test.js](https://github.com/facebook/flux/tree/master/examples/flux-chat/js/stores/__tests__/UnreadThreadStore-test.js).
For more information about the `mock` property of mocked methods or Jest's ability to provide custom mock values, see Jest's documentation on [mock functions](http://facebook.github.io/jest/docs/mock-functions.html).
For more information about the `mock` property of mocked methods or Jest's ability to provide custom mock values, see Jest's documentation on [mock functions](https://facebook.github.io/jest/docs/mock-functions.html).
Moving Logic from React to Stores
@@ -315,11 +315,11 @@ render: function() {
},
```
To learn how to test React components themselves, check out the [Jest tutorial for React](http://facebook.github.io/jest/docs/tutorial-react.html) and the [ReactTestUtils documentation](http://facebook.github.io/react/docs/test-utils.html).
To learn how to test React components themselves, check out the [Jest tutorial for React](https://facebook.github.io/jest/docs/tutorial-react.html) and the [ReactTestUtils documentation](/react/docs/test-utils.html).
Further Reading
---------------
- [Mocks Aren't Stubs](http://martinfowler.com/articles/mocksArentStubs.html) by Martin Fowler
- [Jest API Reference](http://facebook.github.io/jest/docs/api.html)
- [Jest API Reference](https://facebook.github.io/jest/docs/api.html)

View File

@@ -1,10 +1,10 @@
---
title: "Introducing React Elements"
author: Sebastian Markbåge
author: sebmarkbage
redirect_from: "blog/2014/10/14/introducting-react-elements.html"
---
The upcoming React 0.12 tweaks some APIs to get us close to the final 1.0 API. This release is all about setting us up for making the `ReactElement` type really FAST, [jest unit testing](http://facebook.github.io/jest/) easier, making classes simpler (in preparation for ES6 classes) and better integration with third-party languages!
The upcoming React 0.12 tweaks some APIs to get us close to the final 1.0 API. This release is all about setting us up for making the `ReactElement` type really FAST, [jest unit testing](https://facebook.github.io/jest/) easier, making classes simpler (in preparation for ES6 classes) and better integration with third-party languages!
If you currently use JSX everywhere, you don't really have to do anything to get these benefits! The updated transformer will do it for you.
@@ -72,7 +72,7 @@ This is the biggest change to 0.12. Don't worry though. This functionality conti
### React With JSX
If you use the React specific [JSX](http://facebook.github.io/jsx/) transform, the upgrade path is simple. Just make sure you have React in scope.
If you use the React specific [JSX](https://facebook.github.io/jsx/) transform, the upgrade path is simple. Just make sure you have React in scope.
```javascript
// If you use node/browserify modules make sure
@@ -92,7 +92,7 @@ var MyOtherComponent = React.createClass({
});
```
*NOTE: React's JSX will not call arbitrary functions in future releases. This restriction is introduced so that it's easier to reason about the output of JSX by both the reader of your code and optimizing compilers. The JSX syntax is not tied to React. Just the transpiler. You can still use [the JSX spec](http://facebook.github.io/jsx/) with a different transpiler for custom purposes.*
*NOTE: React's JSX will not call arbitrary functions in future releases. This restriction is introduced so that it's easier to reason about the output of JSX by both the reader of your code and optimizing compilers. The JSX syntax is not tied to React. Just the transpiler. You can still use [the JSX spec](https://facebook.github.io/jsx/) with a different transpiler for custom purposes.*
### React Without JSX

View File

@@ -1,6 +1,6 @@
---
title: "React v0.12 RC"
author: Sebastian Markbåge
author: sebmarkbage
---
We are finally ready to share the work we've been doing over the past couple months. A lot has gone into this and we want to make sure we iron out any potential issues before we make this final. So, we're shipping a Release Candidate for React v0.12 today. If you get a chance, please give it a try and report any issues you find! A full changelog will accompany the final release but we've highlighted the interesting and breaking changes below.
@@ -9,13 +9,13 @@ We are finally ready to share the work we've been doing over the past couple mon
The release candidate is available for download:
* **React**
Dev build with warnings: <http://fb.me/react-0.12.0-rc1.js>
Minified build for production: <http://fb.me/react-0.12.0-rc1.min.js>
Dev build with warnings: <https://fb.me/react-0.12.0-rc1.js>
Minified build for production: <https://fb.me/react-0.12.0-rc1.min.js>
* **React with Add-Ons**
Dev build with warnings: <http://fb.me/react-with-addons-0.12.0-rc1.js>
Minified build for production: <http://fb.me/react-with-addons-0.12.0-rc1.min.js>
Dev build with warnings: <https://fb.me/react-with-addons-0.12.0-rc1.js>
Minified build for production: <https://fb.me/react-with-addons-0.12.0-rc1.min.js>
* **In-Browser JSX transformer**
<http://fb.me/JSXTransformer-0.12.0-rc1.js>
<https://fb.me/JSXTransformer-0.12.0-rc1.js>
We've also published version `0.12.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
@@ -27,7 +27,7 @@ The biggest conceptual change we made in v0.12 is the move to React Elements. [W
## JSX Changes
Earlier this year we decided to write [a specification for JSX](http://facebook.github.io/jsx/). This has allowed us to make some changes focused on the React specific JSX and still allow others to innovate in the same space.
Earlier this year we decided to write [a specification for JSX](https://facebook.github.io/jsx/). This has allowed us to make some changes focused on the React specific JSX and still allow others to innovate in the same space.
### The `@jsx` Pragma is Gone!

View File

@@ -1,16 +1,16 @@
---
title: "Community Round-up #23"
layout: post
author: Lou Husson
author: LoukaN
---
This round-up is a special edition on [Flux](http://facebook.github.io/flux/). If you expect to see diagrams showing arrows that all point in the same direction, you won't be disappointed!
This round-up is a special edition on [Flux](https://facebook.github.io/flux/). If you expect to see diagrams showing arrows that all point in the same direction, you won't be disappointed!
## React And Flux at ForwardJS
Facebook engineers [Jing Chen](https://github.com/jingc) and [Bill Fisher](https://github.com/fisherwebdev) gave a talk about Flux and React at [ForwardJS](http://forwardjs.com/), and how using an application architecture with a unidirectional data flow helped solve recurring bugs.
<iframe width="650" height="315" src="//www.youtube.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe>
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe>
# Yahoo
@@ -24,10 +24,10 @@ Yahoo is converting Yahoo Mail to React and Flux and in the process, they open s
## Reflux
[Mikael Brassman](http://spoike.ghost.io/) wrote [Reflux](https://github.com/spoike/refluxjs), a library that implements Flux concepts. Note that it diverges significantly from the way we use Flux at Facebook. He explains [the reasons why in a blog post](http://spoike.ghost.io/deconstructing-reactjss-flux/).
[Mikael Brassman](https://spoike.ghost.io/) wrote [Reflux](https://github.com/spoike/refluxjs), a library that implements Flux concepts. Note that it diverges significantly from the way we use Flux at Facebook. He explains [the reasons why in a blog post](https://spoike.ghost.io/deconstructing-reactjss-flux/).
<center>
<a href="http://spoike.ghost.io/deconstructing-reactjss-flux/"><img src="/react/img/blog/reflux-flux.png" width="400" /></a>
<a href="https://spoike.ghost.io/deconstructing-reactjss-flux/"><img src="/react/img/blog/reflux-flux.png" width="400" /></a>
</center>
@@ -107,22 +107,22 @@ undo: function() {
## React and Flux
[Christian Alfoni](https://github.com/christianalfoni) wrote an article where [he compares Backbone, Angular and Flux](http://christianalfoni.github.io/javascript/2014/08/20/react-js-and-flux.html) on a simple example that's representative of a real project he worked on.
[Christian Alfoni](https://github.com/christianalfoni) wrote an article where [he compares Backbone, Angular and Flux](https://christianalfoni.github.io/javascript/2014/08/20/react-js-and-flux.html) on a simple example that's representative of a real project he worked on.
> Wow, that was a bit more code! Well, try to think of it like this. In the above examples, if we were to do any changes to the application we would probably have to move things around. In the FLUX example we have considered that from the start.
>
> Any changes to the application is adding, not moving things around. If you need a new store, just add it and make components dependant of it. If you need more views, create a component and use it inside any other component without affecting their current "parent controller or models".
>
> [Read the full article...](http://christianalfoni.github.io/javascript/2014/08/20/react-js-and-flux.html)
> [Read the full article...](https://christianalfoni.github.io/javascript/2014/08/20/react-js-and-flux.html)
## Flux: Step by Step approach
[Nicola Paolucci](https://github.com/durdn) from Atlassian wrote a great guide to help your getting understand [Flux step by step](http://blogs.atlassian.com/2014/08/flux-architecture-step-by-step/).
[Nicola Paolucci](https://github.com/durdn) from Atlassian wrote a great guide to help your getting understand [Flux step by step](https://blogs.atlassian.com/2014/08/flux-architecture-step-by-step/).
<center>
<a href="http://blogs.atlassian.com/2014/08/flux-architecture-step-by-step/"><img src="/react/img/blog/flux-chart.png" width="400" /></a>
<a href="https://blogs.atlassian.com/2014/08/flux-architecture-step-by-step/"><img src="/react/img/blog/flux-chart.png" width="400" /></a>
</center>
@@ -144,7 +144,7 @@ undo: function() {
Last but not least, Flux and React ideas are not limited to JavaScript inside of the browser. The iOS team at Facebook re-implemented Newsfeed using very similar patterns.
<iframe width="650" height="315" src="//www.youtube.com/embed/XhXC4SKOGfQ" frameborder="0" allowfullscreen></iframe>
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/XhXC4SKOGfQ" frameborder="0" allowfullscreen></iframe>
## Random Tweet

View File

@@ -1,6 +1,6 @@
---
title: React.js Conf
author: Vjeux
author: vjeux
---
Every few weeks someone asks us when we are going to organize a conference for React. Our answer has always been "some day". In the mean time, people have been talking about React at other JavaScript conferences around the world. But now the time has finally come for us to have a conference of our own.

View File

@@ -1,6 +1,6 @@
---
title: React v0.12
author: Paul OShannessy
author: zpao
---
We're happy to announce the availability of React v0.12! After over a week of baking as the release candidate, we uncovered and fixed a few small issues. Thanks to all of you who upgraded and gave us feedback!
@@ -11,13 +11,13 @@ We have talked a lot about some of the bigger changes in this release. [We intro
The release is available for download:
* **React**
Dev build with warnings: <http://fb.me/react-0.12.0.js>
Minified build for production: <http://fb.me/react-0.12.0.min.js>
Dev build with warnings: <https://fb.me/react-0.12.0.js>
Minified build for production: <https://fb.me/react-0.12.0.min.js>
* **React with Add-Ons**
Dev build with warnings: <http://fb.me/react-with-addons-0.12.0.js>
Minified build for production: <http://fb.me/react-with-addons-0.12.0.min.js>
Dev build with warnings: <https://fb.me/react-with-addons-0.12.0.js>
Minified build for production: <https://fb.me/react-with-addons-0.12.0.min.js>
* **In-Browser JSX transformer**
<http://fb.me/JSXTransformer-0.12.0.js>
<https://fb.me/JSXTransformer-0.12.0.js>
We've also published version `0.12.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.

View File

@@ -1,6 +1,6 @@
---
title: React.js Conf Updates
author: Vjeux
author: vjeux
---
Yesterday was the [React.js Conf](http://conf.reactjs.com/index.html) call for presenters submission deadline. We were

View File

@@ -1,7 +1,7 @@
---
title: "Community Round-up #24"
layout: post
author: Steven Luscher
author: steveluscher
---
## Keep it Simple
@@ -14,11 +14,11 @@ Murilo Pereira ([mpereira](https://github.com/mpereira)) tussles with the topic
I ([steveluscher](https://github.com/steveluscher)) spoke at Manning Publications' “Powered By JavaScript” Strangeloop pre-conf in St. Louis. There, I proposed a new notation to talk about development complexity Big-Coffee Notation ☕(n) and spoke about the features of React that help keep our Big-Coffee from going quadratic, as our user interfaces get more complex.
<iframe width="560" height="315" src="//www.youtube.com/embed/rI0GQc__0SM" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/rI0GQc__0SM" frameborder="0" allowfullscreen></iframe>
James Pearce ([jamesgpearce](https://github.com/jamesgpearce)) carried Big-Coffee all the way to Raleigh, NC. At the _All Things Open_ conference, he spoke about some of the design decisions that went into React, particularly those that lend themselves to simpler, more reliable code.
<iframe width="560" height="315" src="//www.youtube.com/embed/m2fuO2wl_3c" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/m2fuO2wl_3c" frameborder="0" allowfullscreen></iframe>
## All About Isomorphism
@@ -38,7 +38,7 @@ Ryan Florence ([rpflorence](https://github.com/rpflorence])) and Michael Jackson
Jonathan Beebe ([somethingkindawierd](https://github.com/somethingkindawierd)) spoke about how he uses React to build tools that deliver hope to those trying to make the best of a bad situation. Watch his talk from this year's _Nodevember_ conference in Nashville
<iframe width="420" height="315" src="//www.youtube.com/embed/uZgAq1CZ1N8" frameborder="0" allowfullscreen></iframe>
<iframe width="420" height="315" src="//www.youtube-nocookie.com/embed/uZgAq1CZ1N8" frameborder="0" allowfullscreen></iframe>
If you take a peek under the covers, you'll find that React powers [Carousel](https://blog.carousel.com/2014/11/introducing-carousel-for-web-ipad-and-android-tablet/), Dropbox's new photo and video gallery app.
@@ -48,11 +48,11 @@ We enjoyed a cinematic/narrative experience with this React-powered, interactive
Spend the next 60 seconds watching Daniel Woelfel ([dwwoelfel](https://github.com/dwwoelfel)) serialize a React app's state as a string, then deserialize it to produce a working UI. Read about how he uses this technique to [reproduce bugs](http://blog.circleci.com/local-state-global-concerns/) reported to him by his users.
<iframe width="420" height="315" src="//www.youtube.com/embed/5yHFTN-_mOo" frameborder="0" allowfullscreen></iframe>
<iframe width="420" height="315" src="//www.youtube-nocookie.com/embed/5yHFTN-_mOo" frameborder="0" allowfullscreen></iframe>
## Community Components
Tom Chen ([tomchentw](https://github.com/tomchentw)) brings us a [react-google-maps](http://tomchentw.github.io/react-google-maps/) component, and a way to syntax highlight source code using Prism and the [react-prism](http://tomchentw.github.io/react-prism/) component, for good measure.
Tom Chen ([tomchentw](https://github.com/tomchentw)) brings us a [react-google-maps](https://tomchentw.github.io/react-google-maps/) component, and a way to syntax highlight source code using Prism and the [react-prism](https://tomchentw.github.io/react-prism/) component, for good measure.
Jed Watson ([jedwatson](https://github.com/JedWatson)) helps you manage touch, tap, and press events using the [react-tappable](https://github.com/JedWatson/react-tappable) component.

View File

@@ -1,6 +1,6 @@
---
title: React v0.12.2
author: Paul OShannessy
author: zpao
---
We just shipped React v0.12.2, bringing the 0.12 branch up to date with a few small fixes that landed in master over the past 2 months.
@@ -10,13 +10,13 @@ You may have noticed that we did not do an announcement for v0.12.1. That releas
The release is available for download from the CDN:
* **React**
Dev build with warnings: <http://fb.me/react-0.12.2.js>
Minified build for production: <http://fb.me/react-0.12.2.min.js>
Dev build with warnings: <https://fb.me/react-0.12.2.js>
Minified build for production: <https://fb.me/react-0.12.2.min.js>
* **React with Add-Ons**
Dev build with warnings: <http://fb.me/react-with-addons-0.12.2.js>
Minified build for production: <http://fb.me/react-with-addons-0.12.2.min.js>
Dev build with warnings: <https://fb.me/react-with-addons-0.12.2.js>
Minified build for production: <https://fb.me/react-with-addons-0.12.2.min.js>
* **In-Browser JSX transformer**
<http://fb.me/JSXTransformer-0.12.2.js>
<https://fb.me/JSXTransformer-0.12.2.js>
We've also published version `0.12.2` of the `react` and `react-tools` packages on npm and the `react` package on bower. `0.12.1` is also available in the same locations if need those.

View File

@@ -1,6 +1,6 @@
---
title: React.js Conf Diversity Scholarship
author: Paul OShannessy
author: zpao
---
Today I'm really happy to announce the React.js Conf Diversity Scholarship! We believe that a diverse set of viewpoints and opinions is really important to build a thriving community. In an ideal world, every part of the tech community would be made up of people from all walks of life. However the reality is that we must be proactive and make an effort to make sure everybody has a voice. As conference organizers we worked closely with the Diversity Team here at Facebook to set aside 10 tickets and provide a scholarship. 10 tickets may not be many in the grand scheme but we really believe that this will have a positive impact on the discussions we have at the conference.
@@ -11,7 +11,7 @@ I'm really excited about this and I hope you are too! The full announcement is b
The Diversity Team at Facebook is excited to announce that we are now accepting applications for the React.js Conf scholarship!
Beginning today, those studying or working in computer science or a related field can apply for an all-expense paid scholarship to attend the React.js Conf at Facebooks Headquarters in Menlo Park, CA on January 28 & 29, 2015. React opens a world of new possibilities such as server-side rendering, real-time updates, different rendering targets like SVG and canvas. 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/) and [previous](http://facebook.github.io/react/blog/2014/10/27/react-js-conf.html) [updates](http://facebook.github.io/react/blog/2014/11/24/react-js-conf-updates.html) on our blog.
Beginning today, those studying or working in computer science or a related field can apply for an all-expense paid scholarship to attend the React.js Conf at Facebooks Headquarters in Menlo Park, CA on January 28 & 29, 2015. React opens a world of new possibilities such as server-side rendering, real-time updates, different rendering targets like SVG and canvas. 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/) and [previous](/react/blog/2014/10/27/react-js-conf.html) [updates](/react/blog/2014/11/24/react-js-conf-updates.html) on our blog.
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.

View File

@@ -1,6 +1,6 @@
---
title: React v0.13.0 Beta 1
author: Sebastian Markbåge
author: sebmarkbage
---
React 0.13 has a lot of nice features but there is one particular feature that I'm really excited about. I couldn't wait for React.js Conf to start tomorrow morning.

View File

@@ -1,7 +1,7 @@
---
title: React.js Conf Round-up 2015
layout: post
author: Steven Luscher
author: steveluscher
---
It was a privilege to welcome the React community to Facebook HQ on January 2829 for the first-ever React.js Conf, and a pleasure to be be able to unveil three new technologies that we've been using internally at Facebook for some time: GraphQL, Relay, and React Native.
@@ -16,7 +16,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
</p>
</div>
<div class="skinny-col">
<iframe width="305" height="171" src="https://www.youtube.com/embed/KVZ-P-ZI6W4" frameborder="0" allowfullscreen></iframe>
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/KVZ-P-ZI6W4" frameborder="0" allowfullscreen></iframe>
</div>
</div>
@@ -28,7 +28,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
</p>
</div>
<div class="skinny-col">
<iframe width="305" height="171" src="https://www.youtube.com/embed/yaymfLj5tjA" frameborder="0" allowfullscreen></iframe>
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/yaymfLj5tjA" frameborder="0" allowfullscreen></iframe>
</div>
</div>
@@ -40,7 +40,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
</p>
</div>
<div class="skinny-col">
<iframe width="305" height="171" src="https://www.youtube.com/embed/OZGgVxFxSIs" frameborder="0" allowfullscreen></iframe>
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/OZGgVxFxSIs" frameborder="0" allowfullscreen></iframe>
</div>
</div>
@@ -52,7 +52,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
</p>
</div>
<div class="skinny-col">
<iframe width="305" height="171" src="https://www.youtube.com/embed/9sc8Pyc51uU" frameborder="0" allowfullscreen></iframe>
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/9sc8Pyc51uU" frameborder="0" allowfullscreen></iframe>
</div>
</div>
@@ -64,7 +64,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
</p>
</div>
<div class="skinny-col">
<iframe width="305" height="171" src="https://www.youtube.com/embed/W2DgDNQZOwo" frameborder="0" allowfullscreen></iframe>
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/W2DgDNQZOwo" frameborder="0" allowfullscreen></iframe>
</div>
</div>
@@ -76,7 +76,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
</p>
</div>
<div class="skinny-col">
<iframe width="305" height="171" src="https://www.youtube.com/embed/XZfvW1a8Xac" frameborder="0" allowfullscreen></iframe>
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/XZfvW1a8Xac" frameborder="0" allowfullscreen></iframe>
</div>
</div>
@@ -88,7 +88,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
</p>
</div>
<div class="skinny-col">
<iframe width="305" height="171" src="https://www.youtube.com/embed/KtmjkCuV-EU" frameborder="0" allowfullscreen></iframe>
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/KtmjkCuV-EU" frameborder="0" allowfullscreen></iframe>
</div>
</div>
@@ -96,11 +96,11 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
<div class="skinny-col">
<h3 style="margin-top:0"><a class="anchor" name="talk-performance"></a>High-performance <a class="hash-link" href="#talk-performance">#</a></h3>
<p>
<strong>Jason Bonta</strong> showed us how complex user interfaces can get, and how his team keeps them performant as they scale. He also had the pleasure of open-sourcing his teams work on <a href="http://facebook.github.io/fixed-data-table/">FixedDataTable</a>.
<strong>Jason Bonta</strong> showed us how complex user interfaces can get, and how his team keeps them performant as they scale. He also had the pleasure of open-sourcing his teams work on <a href="https://facebook.github.io/fixed-data-table/">FixedDataTable</a>.
</p>
</div>
<div class="skinny-col">
<iframe width="305" height="171" src="https://www.youtube.com/embed/KYzlpRvWZ6c" frameborder="0" allowfullscreen></iframe>
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/KYzlpRvWZ6c" frameborder="0" allowfullscreen></iframe>
</div>
</div>
@@ -112,7 +112,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
</p>
</div>
<div class="skinny-col">
<iframe width="305" height="171" src="https://www.youtube.com/embed/Sla-DkvmIHY" frameborder="0" allowfullscreen></iframe>
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/Sla-DkvmIHY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
@@ -124,7 +124,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
</p>
</div>
<div class="skinny-col">
<iframe width="305" height="171" src="https://www.youtube.com/embed/z5e7kWSHWTg" frameborder="0" allowfullscreen></iframe>
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/z5e7kWSHWTg" frameborder="0" allowfullscreen></iframe>
</div>
</div>
@@ -136,7 +136,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
</p>
</div>
<div class="skinny-col">
<iframe width="305" height="171" src="https://www.youtube.com/embed/7rDsRXj9-cU" frameborder="0" allowfullscreen></iframe>
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/7rDsRXj9-cU" frameborder="0" allowfullscreen></iframe>
</div>
</div>
@@ -148,7 +148,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
</p>
</div>
<div class="skinny-col">
<iframe width="305" height="171" src="https://www.youtube.com/embed/g0TD0efcwVg" frameborder="0" allowfullscreen></iframe>
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/g0TD0efcwVg" frameborder="0" allowfullscreen></iframe>
</div>
</div>
@@ -160,7 +160,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
</p>
</div>
<div class="skinny-col">
<iframe width="305" height="171" src="https://www.youtube.com/embed/I7IdS-PbEgI" frameborder="0" allowfullscreen></iframe>
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/I7IdS-PbEgI" frameborder="0" allowfullscreen></iframe>
</div>
</div>
@@ -171,7 +171,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
<strong>Jafar Husain</strong> told us a story about how Netflix was able to push React into places where the DOM could not go.
</div>
<div class="skinny-col">
<iframe width="305" height="171" src="https://www.youtube.com/embed/eNC0mRYGWgc" frameborder="0" allowfullscreen></iframe>
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/eNC0mRYGWgc" frameborder="0" allowfullscreen></iframe>
</div>
</div>
@@ -182,7 +182,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
<strong>Zach Nation</strong> showed us how we can produce visualizations from over 45 million data points without breaking a sweat.
</div>
<div class="skinny-col">
<iframe width="305" height="171" src="https://www.youtube.com/embed/2ii1lEkIv1s" frameborder="0" allowfullscreen></iframe>
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/2ii1lEkIv1s" frameborder="0" allowfullscreen></iframe>
</div>
</div>
@@ -193,7 +193,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
<strong>David Nolen</strong> gave us a view of React from a non-JavaScript perspective, challenging some common intuition along the way.
</div>
<div class="skinny-col">
<iframe width="305" height="171" src="https://www.youtube.com/embed/5hGHdETNteE" frameborder="0" allowfullscreen></iframe>
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/5hGHdETNteE" frameborder="0" allowfullscreen></iframe>
</div>
</div>
@@ -204,7 +204,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
<strong>Bill Fisher</strong> coordinated a Flux panel together with <strong>Michael Ridgway</strong>, <strong>Spike Brehm</strong>, <strong>Andres Suarez</strong>, <strong>Jing Chen</strong>, <strong>Ian Obermiller</strong>, and <strong>Kyle Davis</strong>.
</div>
<div class="skinny-col">
<iframe width="305" height="171" src="https://www.youtube.com/embed/LTj4O7WJJ98" frameborder="0" allowfullscreen></iframe>
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/LTj4O7WJJ98" frameborder="0" allowfullscreen></iframe>
</div>
</div>
@@ -215,7 +215,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
<strong>Bonnie Eisenman</strong> led us through the adapter approach to inter-component communication taken by her team at Codecademy.
</div>
<div class="skinny-col">
<iframe width="305" height="171" src="https://www.youtube.com/embed/ZM6wXoFTY3o" frameborder="0" allowfullscreen></iframe>
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/ZM6wXoFTY3o" frameborder="0" allowfullscreen></iframe>
</div>
</div>
@@ -226,7 +226,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
<strong>James Brantly</strong> demonstrated how we can reap the benefits of static typing using both Flow and TypeScript.
</div>
<div class="skinny-col">
<iframe width="305" height="171" src="https://www.youtube.com/embed/9PTa9-PPVAc" frameborder="0" allowfullscreen></iframe>
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/9PTa9-PPVAc" frameborder="0" allowfullscreen></iframe>
</div>
</div>
@@ -237,7 +237,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
<strong>Tom Occhino</strong>, <strong>Ben Alpert</strong>, <strong>Lee Byron</strong>, <strong>Christopher Chedeau</strong>, <strong>Sebastian Markbåge</strong>, <strong>Jing Chen</strong>, and <strong>Dan Schafer</strong> closed the conference with a Q&amp;A session.
</div>
<div class="skinny-col">
<iframe width="305" height="171" src="https://www.youtube.com/embed/EPpkboSKvPI" frameborder="0" allowfullscreen></iframe>
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/EPpkboSKvPI" frameborder="0" allowfullscreen></iframe>
</div>
</div>
@@ -266,4 +266,4 @@ And, in case you missed a session, you can borrow **Michael Chans** [drawings
**All proceeds from React.js Conf 2015 were donated to the wonderful programs at [code.org](http://code.org)**. These programs aim to increase access to the field of computer science by underrepresented members of our community. Watch this video to learn more.
<iframe width="305" height="171" src="https://www.youtube.com/embed/FC5FbmsH4fw" frameborder="0" allowfullscreen></iframe>
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/FC5FbmsH4fw" frameborder="0" allowfullscreen></iframe>

View File

@@ -1,14 +1,14 @@
---
title: "Introducing Relay and GraphQL"
layout: post
author: Greg Hurrell
author: wincent
---
## Data fetching for React applications
There's more to building an application than creating a user interface. Data fetching is still a tricky problem, especially as applications become more complicated. At [React.js Conf](http://conf.reactjs.com/) we announced two projects we've created at Facebook to make data fetching simple for developers, even as a product grows to include dozens of contributors and the application becomes as complex as Facebook itself.
<iframe width="560" height="315" src="https://www.youtube.com/embed/9sc8Pyc51uU" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/9sc8Pyc51uU" frameborder="0" allowfullscreen></iframe>
The two projects &mdash; Relay and GraphQL &mdash; have been in use in production at Facebook for some time, and we're excited to be bringing them to the world as open source in the future. In the meantime, we wanted to share some additional information about the projects here.

View File

@@ -1,6 +1,6 @@
---
title: "React v0.13 RC"
author: Paul O'Shannessy
author: zpao
date: 2015-02-24 14:00
---
@@ -12,13 +12,13 @@ We've talked a little bit about the changes that are coming. The splashiest of t
The release candidate is available for download:
* **React**
Dev build with warnings: <http://fb.me/react-0.13.0-rc1.js>
Minified build for production: <http://fb.me/react-0.13.0-rc1.min.js>
Dev build with warnings: <https://fb.me/react-0.13.0-rc1.js>
Minified build for production: <https://fb.me/react-0.13.0-rc1.min.js>
* **React with Add-Ons**
Dev build with warnings: <http://fb.me/react-with-addons-0.13.0-rc1.js>
Minified build for production: <http://fb.me/react-with-addons-0.13.0-rc1.min.js>
Dev build with warnings: <https://fb.me/react-with-addons-0.13.0-rc1.js>
Minified build for production: <https://fb.me/react-with-addons-0.13.0-rc1.min.js>
* **In-Browser JSX transformer**
<http://fb.me/JSXTransformer-0.13.0-rc1.js>
<https://fb.me/JSXTransformer-0.13.0-rc1.js>
We've also published version `0.13.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
@@ -39,7 +39,7 @@ We've also published version `0.13.0-rc1` of the `react` and `react-tools` packa
#### New Features
* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html) for details
* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](/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.
* 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.

View File

@@ -1,6 +1,6 @@
---
title: "Streamlining React Elements"
author: Sebastian Markbåge
author: sebmarkbage
date: 2015-02-24 11:00
---

View File

@@ -1,6 +1,6 @@
---
title: "React v0.13 RC2"
author: Sebastian Markbåge
author: sebmarkbage
---
Thanks to everybody who has already been testing the release candidate. We've received some good feedback and as a result we're going to do a second release candidate. The changes are minimal. We haven't changed the behavior of any APIs we exposed in the previous release candidate. Here's a summary of the changes:
@@ -13,13 +13,13 @@ Thanks to everybody who has already been testing the release candidate. We've re
The release candidate is available for download:
* **React**
Dev build with warnings: <http://fb.me/react-0.13.0-rc2.js>
Minified build for production: <http://fb.me/react-0.13.0-rc2.min.js>
Dev build with warnings: <https://fb.me/react-0.13.0-rc2.js>
Minified build for production: <https://fb.me/react-0.13.0-rc2.min.js>
* **React with Add-Ons**
Dev build with warnings: <http://fb.me/react-with-addons-0.13.0-rc2.js>
Minified build for production: <http://fb.me/react-with-addons-0.13.0-rc2.min.js>
Dev build with warnings: <https://fb.me/react-with-addons-0.13.0-rc2.js>
Minified build for production: <https://fb.me/react-with-addons-0.13.0-rc2.min.js>
* **In-Browser JSX transformer**
<http://fb.me/JSXTransformer-0.13.0-rc2.js>
<https://fb.me/JSXTransformer-0.13.0-rc2.js>
We've also published version `0.13.0-rc2` of the `react` and `react-tools` packages on npm and the `react` package on bower.

View File

@@ -1,7 +1,7 @@
---
title: "Community Round-up #25"
layout: post
author: Matthew Johnston
author: matthewjohnston4
---
## React 101
@@ -12,7 +12,7 @@ Interest in React has been exploding recently, so it's a good time to explore so
[Formidable Labs](https://github.com/FormidableLabs) and [Seattle JS](http://www.meetup.com/seattlejs/) recently hosted a series of React, Flux, and Flow workshops, and the first part is available to watch online:
<iframe width="650" height="300" src="//www.youtube.com/embed/Pd6Ub7Ju2RM" frameborder="0" allowfullscreen></iframe>
<iframe width="650" height="300" src="//www.youtube-nocookie.com/embed/Pd6Ub7Ju2RM" frameborder="0" allowfullscreen></iframe>
[AEFlash](https://github.com/aearly) writes up [some best practices and tips](http://aeflash.com/2015-02/react-tips-and-best-practices.html) to help you avoid potential pitfalls when developing with React.
@@ -40,7 +40,7 @@ Our own [Sebastian Markbåge](https://github.com/sebmarkbage) was on the [Web Pl
[Andrew Hillel](https://twitter.com/andyhillel) of the BBC gives [an excellent and thorough breakdown](http://www.bbc.co.uk/blogs/internet/entries/47a96d23-ae04-444e-808f-678e6809765d) of the stack they used to rebuild their homepage, with React as an integral part of the front-end.
A team from New Zealand called [Atomic](https://atomic.io/) is [building web and mobile prototyping and design tools](http://thenextweb.com/creativity/2015/02/19/meet-atomic-missing-tool-interface-design-thats-entirely-browser/) entirely in-browser, and as co-founder [Darryl Gray](http://twitter.com/darrylgray) says, “React.js “totally changed” the fact that browser performance often wasnt good enough for complex tools like this.”.
A team from New Zealand called [Atomic](https://atomic.io/) is [building web and mobile prototyping and design tools](http://thenextweb.com/creativity/2015/02/19/meet-atomic-missing-tool-interface-design-thats-entirely-browser/) entirely in-browser, and as co-founder [Darryl Gray](https://twitter.com/darrylgray) says, “React.js “totally changed” the fact that browser performance often wasnt good enough for complex tools like this.”.
[Polarr](https://github.com/Polarrco) have rebuilt [their browser-based photo editor](http://polarrist.tumblr.com/post/111290422225/polarr-photo-editor-2-0-alpha-is-here) with React.

View File

@@ -1,6 +1,6 @@
---
title: "React v0.13"
author: Ben Alpert
author: spicyj
---
Today, we're happy to release React v0.13!
@@ -17,13 +17,13 @@ Our planned optimizations require that ReactElement objects are immutable, which
The release is now available for download:
* **React**
Dev build with warnings: <http://fb.me/react-0.13.0.js>
Minified build for production: <http://fb.me/react-0.13.0.min.js>
Dev build with warnings: <https://fb.me/react-0.13.0.js>
Minified build for production: <https://fb.me/react-0.13.0.min.js>
* **React with Add-Ons**
Dev build with warnings: <http://fb.me/react-with-addons-0.13.0.js>
Minified build for production: <http://fb.me/react-with-addons-0.13.0.min.js>
Dev build with warnings: <https://fb.me/react-with-addons-0.13.0.js>
Minified build for production: <https://fb.me/react-with-addons-0.13.0.min.js>
* **In-Browser JSX transformer**
<http://fb.me/JSXTransformer-0.13.0.js>
<https://fb.me/JSXTransformer-0.13.0.js>
We've also published version `0.13.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
@@ -45,7 +45,7 @@ We've also published version `0.13.0` of the `react` and `react-tools` packages
#### New Features
* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html) for details.
* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](/react/blog/2015/01/27/react-v0.13.0-beta-1.html) for details.
* Added new top-level API `React.findDOMNode(component)`, which should be used in place of `component.getDOMNode()`. The base class for ES6-based components will not have `getDOMNode`. This change will enable some more patterns moving forward.
* Added a new top-level API `React.cloneElement(el, props)` for making copies of React elements see the [v0.13 RC2 notes](/react/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement) for more details.
* 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`).

View File

@@ -0,0 +1,47 @@
---
title: "React v0.13.1"
author: zpao
---
It's been less than a week since we shipped v0.13.0 but it's time to do another quick release. We just released v0.13.1 which contains bugfixes for a number of small issues.
Thanks all of you who have been upgrading your applications and taking the time to report issues. And a huge thank you to those of you who submitted pull requests for the issues you found! 2 of the 6 fixes that went out today came from people who aren't on the core team!
The release is now available for download:
* **React**
Dev build with warnings: <https://fb.me/react-0.13.1.js>
Minified build for production: <https://fb.me/react-0.13.1.min.js>
* **React with Add-Ons**
Dev build with warnings: <https://fb.me/react-with-addons-0.13.1.js>
Minified build for production: <https://fb.me/react-with-addons-0.13.1.min.js>
* **In-Browser JSX transformer**
<https://fb.me/JSXTransformer-0.13.1.js>
We've also published version `0.13.1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
- - -
## Changelog
### React Core
#### Bug Fixes
* Don't throw when rendering empty `<select>` elements
* Ensure updating `style` works when transitioning from `null`
### React with Add-Ons
### Bug Fixes
* TestUtils: Don't warn about `getDOMNode` for ES6 classes
* TestUtils: Ensure wrapped full page components (`<html>`, `<head>`, `<body>`) are treated as DOM components
* Perf: Stop double-counting DOM components
### React Tools
#### Bug Fixes
* Fix option parsing for `--non-strict-es6module`

View File

@@ -0,0 +1,222 @@
---
title: "Building The Facebook News Feed With Relay"
author: josephsavona
---
At React.js Conf in January we gave a preview of Relay, a new framework for building data-driven applications in React. In this post, we'll describe the process of creating a Relay application. This post assumes some familiarity with the concepts of Relay and GraphQL, so if you haven't already we recommend reading [our introductory blog post](/react/blog/2015/02/20/introducing-relay-and-graphql.html) or watching [the conference talk](https://www.youtube-nocookie.com/watch?v=9sc8Pyc51uU).
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.
<br/>
## The Relay Architecture
The diagram below shows the main parts of the Relay architecture on the client and the server:
<img src="/react/img/blog/relay-components/relay-architecture.png" alt="Relay Architecture" width="650" />
The main pieces are as follows:
- Relay Components: React components annotated with declarative data descriptions.
- Actions: Descriptions of how data should change in response to user actions.
- Relay Store: A client-side data store that is fully managed by the framework.
- Server: An HTTP server with GraphQL endpoints (one for reads, one for writes) that respond to GraphQL queries.
This post will focus on **Relay components** that describe encapsulated units of UI and their data dependencies. These components form the majority of a Relay application.
<br/>
## A Relay Application
To see how components work and can be composed, let's implement a basic version of the Facebook News Feed in Relay. Our application will have two components: a `<NewsFeed>` that renders a list of `<Story>` items. We'll introduce the plain React version of each component first and then convert it to a Relay component. The goal is something like the following:
<img src="/react/img/blog/relay-components/sample-newsfeed.png" alt="Sample News Feed" width="360" />
<br/>
## The `<Story>` Begins
The first step is a React `<Story>` component that accepts a `story` prop with the story's text and author information. Note that all examples uses ES6 syntax and elide presentation details to focus on the pattern of data access.
```javascript
// Story.react.js
class Story extends React.Component {
render() {
var story = this.props.story;
return (
<View>
<Image uri={story.author.profile_picture.uri} />
<Text>{story.author.name}</Text>
<Text>{story.text}</Text>
</View>
);
}
}
module.exports = Story;
```
<br/>
## What's the `<Story>`?
Relay automates the process of fetching data for components by wrapping existing React components in Relay containers (themselves React components):
```javascript
// Story.react.js
class Story extends React.Component { ... }
module.exports = Relay.createContainer(Story, {
queries: {
story: /* TODO */
}
});
```
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 query is defined. In this case we'll add a GraphQL query for `story`:
```javascript
// Story.react.js
class Story extends React.Component { ... }
module.exports = Relay.createContainer(Story, {
queries: {
story: graphql`
Story {
author {
name,
profile_picture {
uri
}
},
text
}
`
}
});
```
Queries use ES6 template literals tagged with the `graphql` function. Similar to how JSX transpiles to plain JavaScript objects and function calls, these template literals transpile to plain objects that describe queries. Note that the query's structure closely matches the object structure that we expected in `<Story>`'s render function.
<br/>
## `<Story>`s on Demand
We can render a Relay component by providing Relay with the component (`<Story>`) and the ID of the data (a story ID). Given this information, Relay will first fetch the results of the query and then `render()` the component. The value of `props.story` will be a plain JavaScript object such as the following:
```javascript
{
author: {
name: "Greg",
profile_picture: {
uri: "https://…"
}
},
text: "The first Relay blog post is up…"
}
```
Relay guarantees that all data required to render a component will be available before it is rendered. This means that `<Story>` does not need to handle a loading state; the `story` is *guaranteed* to be available before `render()` is called. We have found that this invariant simplifies our application code *and* improves the user experience. Of course, Relay also has options to delay the fetching of some parts of our queries.
The diagram below shows how Relay containers make data available to our React components:
<img src="/react/img/blog/relay-components/relay-containers-data-flow.png" width="650" alt="Relay Container Data Flow" />
<br/>
## `<NewsFeed>` Worthy
Now that the `<Story>` is over we can continue with the `<NewsFeed>` component. Again, we'll start with a React version:
```javascript
// NewsFeed.react.js
class NewsFeed extends React.Component {
render() {
var stories = this.props.viewer.stories; // `viewer` is the active user
return (
<View>
{stories.map(story => <Story story={story} />)}
<Button onClick={() => this.loadMore()}>Load More</Button>
</View>
);
}
loadMore() {
// TODO: fetch more stories
}
}
module.exports = NewsFeed;
```
<br/>
## All the News Fit to be Relayed
`<NewsFeed>` has two new requirements: it composes `<Story>` and requests more data at runtime.
Just as React views can be nested, Relay queries can compose queries from child components. Composition in GraphQL uses ES6 template literal substitution: `${Component.getQuery('prop')}`. Pagination can be accomplished with a query parameter, specified with `<param>` (as in `stories(first: <count>)`):
```javascript
// NewsFeed.react.js
class NewsFeed extends React.Component { ... }
module.exports = Relay.createContainer(NewsFeed, {
queryParams: {
count: 3 /* default to 3 stories */
},
queries: {
viewer: graphql`
Viewer {
stories(first: <count>) { /* fetch viewer's stories */
edges { /* traverse the graph */
node {
${Story.getQuery('story')} /* compose child query */
}
}
}
}
`
}
});
```
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 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
class NewsFeed extends React.Component {
render() { ... }
loadMore() {
// read current params
var count = this.props.queryParams.count;
// update params
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.queryParams.count`.
<br/>
## In Conclusion
These two components form a solid core for our application. With the use of Relay containers and GraphQL queries, we've enabled the following benefits:
- Automatic and efficient pre-fetching of data for an entire view hierarchy in a single network request.
- Trivial pagination with automatic optimizations to fetch only the additional items.
- View composition and reusability, so that `<Story>` can be used on its own or within `<NewsFeed>`, without any changes to either component.
- Automatic subscriptions, so that components will re-render if their data changes. Unaffected components will not re-render unnecessarily.
- Exactly *zero* lines of imperative data fetching logic. Relay takes full advantage of React's declarative component model.
But Relay has many more tricks up its sleeve. For example, it's built from the start to handle reads and writes, allowing for features like optimistic client updates with transactional rollback. Relay can also defer fetching select parts of queries, and it uses a local data store to avoid fetching the same data twice. These are all powerful features that we hope to explore in future posts.

View File

@@ -0,0 +1,16 @@
---
title: "Introducing React Native"
author: spicyj
---
In January at React.js Conf, we announced React Native, a new framework for building native apps using React. We're happy to announce that we're open-sourcing React Native and you can start building your apps with it today.
For more details, see [Tom Occhino's post on the Facebook Engineering blog](https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/):
> *What we really want is the user experience of the native mobile platforms, combined with the developer experience we have when building with React on the web.*
>
> *With a bit of work, we can make it so the exact same React that's on GitHub can power truly native mobile applications. The only difference in the mobile environment is that instead of running React in the browser and rendering to divs and spans, we run it an embedded instance of JavaScriptCore inside our apps and render to higher-level platform-specific components.*
>
> *It's worth noting that we're not chasing “write once, run anywhere.” Different platforms have different looks, feels, and capabilities, and as such, we should still be developing discrete apps for each platform, but the same set of engineers should be able to build applications for whatever platform they choose, without needing to learn a fundamentally different set of technologies for each. We call this approach “learn once, write anywhere.”*
To learn more, visit the [React Native website](https://facebook.github.io/react-native/).

View File

@@ -0,0 +1,95 @@
---
title: "Community Round-up #26"
layout: post
author: vjeux
---
We open sourced React Native last week and the community reception blew away all our expectations! So many of you tried it, made cool stuff with it, raised many issues and even submitted pull requests to fix them! The entire team wants to say thank you!
<blockquote class="twitter-tweet" lang="en"><p><a href="https://twitter.com/hashtag/reactnative?src=hash">#reactnative</a> is like when you get a new expansion pack, and everybody is running around clueless about which NPC to talk to for the quests</p>&mdash; Ryan Florence (@ryanflorence) <a href="https://twitter.com/ryanflorence/status/581810423554543616">March 28, 2015</a></blockquote>
## When is React Native Android coming?
**Give us 6 months**. At Facebook, we strive to only open-source projects that we are using in production. While the Android backend for React Native is starting to work (see video below at 37min), it hasn't been shipped to any users yet. There's a lot of work that goes into open-sourcing a project, and we want to do it right so that you have a great experience when using it.
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/X6YbAKiLCLU?start=2220" frameborder="0" allowfullscreen></iframe>
## Ray Wenderlich - Property Finder
If you are getting started with React Native, you should absolutely [use this tutorial](http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript) from Colin Eberhardt. It goes through all the steps to make a reasonably complete app.
<center>
[![](/react/img/blog/property-finder.png)](http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript)
</center>
Colin also [blogged about his experience using React Native](http://blog.scottlogic.com/2015/03/26/react-native-retrospective.html) for a few weeks and gives his thoughts on why you would or wouldn't use it.
## The Changelog
Spencer Ahrens and I had the great pleasure to talk about React Native on [The Changelog](https://thechangelog.com/149/) podcast. It was really fun to chat for an hour, I hope that you'll enjoy listening to it. :)
<audio src="http://fdlyr.co/d/changelog/cdn.5by5.tv/audio/broadcasts/changelog/2015/changelog-149.mp3" controls="controls" style="width: 100%"></audio>
## Hacker News
Less than 24 hours after React Native was open sourced, Simarpreet Singh built an [Hacker News reader app from scratch](https://github.com/iSimar/HackerNews-React-Native). It's unbelievable how fast he was able to pull it off!
<center>
[![](/react/img/blog/hacker-news-react-native.png)](https://github.com/iSimar/HackerNews-React-Native)
</center>
## Parse + React
There's a huge ecosystem of JavaScript modules on npm and React Native was designed to work well with the ones that don't have DOM dependencies. Parse is a great example; you can `npm install parse` on your React Native project and it'll work as is. :) We still have [a](https://github.com/facebook/react-native/issues/406) [few](https://github.com/facebook/react-native/issues/370) [issues](https://github.com/facebook/react-native/issues/316) to solve; please create an issue if your favorite library doesn't work out of the box.
<center>
[![](/react/img/blog/parse-react.jpg)](http://blog.parse.com/2015/03/25/parse-and-react-shared-chemistry/)
</center>
## tcomb-form-native
Giulio Canti is the author of the [tcomb-form library](https://github.com/gcanti/tcomb-form) for React. He already [ported it to React Native](https://github.com/gcanti/tcomb-form-native) and it looks great!
<center>
[![](/react/img/blog/tcomb-react-native.png)](https://github.com/gcanti/tcomb-form-native)
</center>
## Facebook Login with React Native
One of the reason we built React Native is to be able to use all the libraries in the native ecosystem. Brent Vatne leads the way and explains [how to use Facebook Login with React Native](http://brentvatne.ca/facebook-login-with-react-native/).
## Modus Create
Jay Garcia spent a lot of time during the beta working on a NES music player with React Native. He wrote a blog post to share his experience and explains some code snippets.
<center>
[![](/react/img/blog/modus-create.gif)](http://moduscreate.com/react-native-has-landed/)
</center>
## React Native with Babel and Webpack
React Native ships with a custom packager and custom ES6 transforms instead of using what the open source community settled on such as Webpack and Babel. The main reason for this is performance we couldn't get those tools to have sub-second reload time on a large codebase.
Roman Liutikov found a way to [use Webpack and Babel to run on React Native](https://github.com/roman01la/react-native-babel)! In the future, we want to work with those projects to provide cleaner extension mechanisms.
## A Dynamic, Crazy, Native Mobile Future—Powered by JavaScript
Clay Allsopp wrote a post about [all the crazy things you could do with a JavaScript engine that renders native views](https://medium.com/@clayallsopp/a-dynamic-crazy-native-mobile-future-powered-by-javascript-70f2d56b1987). What about native embeds, seamless native browser, native search engine or even app generation...
## Random Tweet
We've spent a lot of efforts getting the onboarding as easy as possible and we're really happy that people noticed. We still have a lot of work to do on documentation, stay tuned!
<blockquote class="twitter-tweet" lang="en"><p>Wow. Getting started with React Native might have been the smoothest experience Ive ever had with a new developer product.</p>&mdash; Andreas Eldh (@eldh) <a href="https://twitter.com/eldh/status/581186172094980096">March 26, 2015</a></blockquote>

View File

@@ -0,0 +1,25 @@
---
title: "React Native v0.4"
layout: post
author: vjeux
---
It's been three weeks since we open sourced React Native and there's been some insane amount of activity already: over 12.5k stars, 1000 commits, 500 issues, 380 pull requests, and 100 contributors, plus [35 plugins](http://react.parts/native-ios) and [1 app in the app store](http://herman.asia/building-a-flashcard-app-with-react-native)! We were expecting some buzz around the project but this is way beyond anything we imagined. Thank you!
I'd especially like to thank community members Brent Vatne and James Ide who have both already contributed meaningfully to the project and have been extremely helpful on IRC and with issues and pull requests
## Changelog
The main focus of the past few weeks has been to make React Native the best possible experience for people outside of Facebook. Here's a high level summary of what's happened since we open sourced:
* **Error messages and documentation**: We want React Native to be the absolute best developer experience for building mobile apps. We've added a lot of warnings, improved the documentation, and fixed many bugs. If you encounter anything, and I really mean anything, that is not expected or clear, please create an issue - we want to hear about it and fix it.
* **NPM modules compatibility**: There are a lot of libraries on NPM that do not depend on node/browser internals that would be really useful in React Native, such as superagent, underscore, parse, and many others. The packager is now a lot more faithful to node/browserify/webpack dependency resolution. If your favorite library doesn't work out of the box, please open up an issue.
* **Infrastructure**: We are refactoring the internals of React Native to make it easier to plug in to existing iOS codebases, as well as improve performance by removing redundant views and shadow views, supporting multiple root views and manually registering classes to reduce startup time.
* **Components**: The API for a lot of UI components and APIs, especially the ones we're not using heavily inside of Facebook, has dramatically improved thanks to many of your pull requests.
* **Tests**: We ported JavaScript tests, iOS Snapshot tests, and End to End tests to Travis CI. We have broken GitHub master a couple of times (whoops!) when syncing and we hope that with this growing suite of tests it's going to become harder and harder to do so.
* **Patent Grant**: Many of you had concerns and questions around the PATENTS file. We pushed [a new version of the grant](https://code.facebook.com/posts/1639473982937255/updating-our-open-source-patent-grant/).
* **Per commit history**: In order to synchronize from Facebook to GitHub, we used to do one giant commit every few days. We improved our tooling and now have per commit history that maintains author information (both internal and external from pull requests), and we retroactively applied this to historical diffs to provide proper attribution.
## Where are we going?
In addition to supporting pull requests, issues, and general improvements, we're also working hard on our internal React Native integrations and on React Native for Android.

View File

@@ -0,0 +1,51 @@
---
title: "React v0.13.2"
author: zpao
---
Yesterday the [React Native team shipped v0.4](/react/blog/2015/04/17/react-native-v0.4.html). Those of us working on the web team just a few feet away couldn't just be shown up like that so we're shipping v0.13.2 today as well! This is a bug fix release to address a few things while we continue to work towards v0.14.
The release is now available for download:
* **React**
Dev build with warnings: <https://fb.me/react-0.13.2.js>
Minified build for production: <https://fb.me/react-0.13.2.min.js>
* **React with Add-Ons**
Dev build with warnings: <https://fb.me/react-with-addons-0.13.2.js>
Minified build for production: <https://fb.me/react-with-addons-0.13.2.min.js>
* **In-Browser JSX transformer**
<https://fb.me/JSXTransformer-0.13.2.js>
We've also published version `0.13.2` of the `react` and `react-tools` packages on npm and the `react` package on bower.
- - -
## Changelog
### React Core
#### New Features
* Added `strokeDashoffset`, `flexPositive`, `flexNegative` to the list of unitless CSS properties
* Added support for more DOM properties:
* `scoped` - for `<style>` elements
* `high`, `low`, `optimum` - for `<meter>` elements
* `unselectable` - IE-specific property to prevent user selection
#### Bug Fixes
* Fixed a case where re-rendering after rendering null didn't properly pass context
* Fixed a case where re-rendering after rendering with `style={null}` didn't properly update `style`
* Update `uglify` dependency to prevent a bug in IE8
* Improved warnings
### React with Add-Ons
#### Bug Fixes
* Immutabilty Helpers: Ensure it supports `hasOwnProperty` as an object key
### React Tools
* Improve documentation for new options

View File

@@ -0,0 +1,107 @@
---
title: "GraphQL Introduction"
author: schrockn
---
At the React.js conference in late January 2015, we revealed our next major technology in the React family: [Relay](http://facebook.github.io/react/blog/2015/02/20/introducing-relay-and-graphql.html).
Relay is a new way of structuring client applications that co-locates data-fetching requirements and React components. Instead of placing data fetching logic in some other part of the client application or embedding this logic in a custom endpoint on the server we instead co-locate a *declarative* data-fetching specification alongside the React component. The language of this declarative specification is GraphQL.
GraphQL was not invented to enable Relay. In fact, GraphQL predates Relay by nearly three years. It was invented during the move from Facebook's HTML5-driven mobile applications to purely native applications. It is a query language for graph data that powers the lion's share of interactions in the Facebook Android and iOS applications. Any user of the native iOS or Android app in the last two years has used an app powered by GraphQL.
We plan to open-source a reference implementation of a GraphQL server and publish a language specification in the coming months. Our goal is to evolve GraphQL to adapt to a wide range of backends, so that projects and companies can use this technology to access their own data. We believe that this is a compelling way to structure servers and to provide powerful abstractions, frameworks and tools including, but not exclusively, Relay for product developers.
## What is GraphQL?
A GraphQL query is a string interpreted by a server that returns data in a specified format. Here is an example query:
```js
{
user(id: 3500401) {
id,
name,
isViewerFriend,
profilePicture(size: 50) {
uri,
width,
height
}
}
}
```
(Note: this syntax is slightly different from previous GraphQL examples. We've recently been making improvements to the language.)
And here is the response to that query.
```json
{
"user" : {
"id": 3500401,
"name": "Jing Chen",
"isViewerFriend": true,
"profilePicture": {
"uri": "http://someurl.cdn/pic.jpg",
"width": 50,
"height": 50
}
}
}
```
We will dig into the syntax and semantics of GraphQL in a later post, but even a simple example shows many of its design principles:
* **Hierarchical:** Most product development today involves the creation and manipulation of view hierarchies. To achieve congruence with the structure of these applications, a GraphQL query itself is a hierarchical set of fields. The query is shaped just like the data it returns. It is a natural way for product engineers to describe data requirements.
* **Product-centric:** GraphQL is unapologetically driven by the requirements of views and the front-end engineers that write them. We start with their way of thinking and requirements and build the language and runtime necessary to enable that.
* **Client-specified queries:** In GraphQL, the specification for queries are encoded in the *client* rather than the *server*. These queries are specified at field-level granularity. In the vast majority of applications written without GraphQL, the server determines the data returned in its various scripted endpoints. A GraphQL query, on the other hand, returns exactly what a client asks for and no more.
* **Backwards Compatible:** In a world of deployed native mobile applications with no forced upgrades, backwards compatibility is a challenge. Facebook, for example, releases apps on a two week fixed cycle and pledges to maintain those apps for *at least* two years. This means there are at a *minimum* 52 versions of our clients per platform querying our servers at any given time. Client-specified queries simplifies managing our backwards compatibility guarantees.
* **Structured, Arbitrary Code:** Query languages with field-level granularity have typically queried storage engines directly, such as SQL. GraphQL instead imposes a structure onto a server, and exposes fields that are backed by *arbitrary code*. This allows for both server-side flexibility and a uniform, powerful API across the entire surface area of an application.
* **Application-Layer Protocol:** GraphQL is an application-layer protocol and does not require a particular transport. It is a string that is parsed and interpreted by a server.
* **Strongly-typed:** GraphQL is strongly-typed. Given a query, tooling can ensure that the query is both syntactically correct and valid within the GraphQL type system before execution, i.e. at development time, and the server can make certain guarantees about the shape and nature of the response. This makes it easier to build high quality client tools.
* **Introspective:** GraphQL is introspective. Clients and tools can query the type system using the GraphQL syntax itself. This is a powerful platform for building tools and client software, such as automatic parsing of incoming data into strongly-typed interfaces. It is especially useful in statically typed languages such as Swift, Objective-C and Java, as it obviates the need for repetitive and error-prone code to shuffle raw, untyped JSON into strongly-typed business objects.
## Why invent something new?
Obviously GraphQL is not the first system to manage client-server interactions. In today's world there are two dominant architectural styles for client-server interaction: REST and *ad hoc* endpoints.
### REST
REST, an acronym for Representational State Transfer, is an architectural style rather than a formal protocol. There is actually much debate about what exactly REST is and is not. We wish to avoid such debates. We are interested in the typical attributes of systems that *self-identify* as REST, rather than systems which are formally REST.
Objects in a typical REST system are addressable by URI and interacted with using verbs in the HTTP protocol. An HTTP GET to a particular URI fetches an object and returns a server-specified set of fields. An HTTP PUT edits an object; an HTTP DELETE deletes an object; and so on.
We believe there are a number of weakness in typical REST systems, ones that are particularly problematic in mobile applications:
* Fetching complicated object graphs require multiple round trips between the client and server to render single views. For mobile applications operating in variable network conditions, these multiple roundtrips are highly undesirable.
* Invariably fields and additional data are added to REST endpoints as the system requirements change. However, old clients also receive this additional data as well, because the data fetching specification is encoded on the server rather than the client. As result, these payloads tend to grow over time for all clients. When this becomes a problem for a system, one solution is to overlay a versioning system onto the REST endpoints. Versioning also complicates a server, and results in code duplication, spaghetti code, or a sophisticated, hand-rolled infrastructure to manage it. Another solution to limit over-fetching is to provide multiple views such as “compact” vs “full” of the same REST endpoint, however this coarse granularity often does not offer adequate flexibility.
* REST endpoints are usually weakly-typed and lack machine-readable metadata. While there is much debate about the merits of strong- versus weak-typing in distributed systems, we believe in strong typing because of the correctness guarantees and tooling opportunities it provides. Developer deal with systems that lack this metadata by inspecting frequently out-of-date documentation and then writing code against the documentation.
* 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.
Because of multiple round-trips and over-fetching, applications built in the REST style inevitably end up building *ad hoc* endpoints that are superficially in the REST style. These actually couple the data to a particular view which explicitly violates one of REST's major goals. Most REST systems of any complexity end up as a continuum of endpoints that span from “traditional” REST to *ad hoc* endpoints.
### Ad Hoc Endpoints
Many applications have no formalized client-server contract. Product developers access server capabilities through *ad hoc* endpoints and write custom code to fetch the data they need. Servers define procedures, and they return data. This approach has the virtue of simplicity, but can often become untenable as systems age.
* These systems typically define a custom endpoint per view. For systems with a wide surface area this can quickly grow into a maintenance nightmare of orphaned endpoints, inconsistent tooling, and massive server code duplication. Disciplined engineering organizations can mitigate these issues with great engineering practices, high quality abstractions, and custom tooling. However, given our experience we believe that custom endpoints tend to lead to entropic server codebases.
* Much like REST, the payloads of custom endpoints grow monotonically (even with mitigation from versioning systems) as the server evolves. Deployed clients cannot break, and, with rapid release cycles and backwards compatibility guarantees, distributed applications will have large numbers of extant versions. Under these constraints it is difficult remove data from a custom endpoint.
* 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.
We believe that GraphQL represents a novel way of structuring the client-server contract. Servers publish a type system specific to their application, and GraphQL provides a unified language to query data within the constraints of that type system. That language allows product developers to express data requirements in a form natural to them: a declarative and hierarchal one.
This is a liberating platform for product developers. With GraphQL, no more contending with *ad hoc* endpoints or object retrieval with multiple roundtrips to access server data; instead an elegant, hierarchical, declarative query dispatched to a single endpoint. No more frequent jumps between client and server development environments to do experimentation or to change or create views of existing data; instead experiments are done and new views built within a native, client development environment exclusively. No more shuffling unstructured data from *ad hoc* endpoints into business objects; instead a powerful, introspective type system that serves as a platform for tool building.
Product developers are free to focus on their client software and requirements while rarely leaving their development environment; they can more confidently support shipped clients as a system evolves; and they are using a protocol designed to operate well within the constraints of mobile applications. Product developers can query for exactly what they want, in the way they think about it, across their entire application's data model.
## What's next?
Over the coming months, we will share more technical details about GraphQL, including additional language features, tools that support it, and how it is built and used at Facebook. These posts will culminate in a formal specification of GraphQL to guide implementors across various languages and platforms. We also plan on releasing a reference implementation in the summer, in order to provide a basis for custom deployments and a platform for experimentation. We're incredibly excited to share this system and work with the open source community to improve it.

View File

@@ -0,0 +1,42 @@
---
title: "React v0.13.3"
author: zpao
---
Today we're sharing another patch release in the v0.13 branch. There are only a few small changes, with a couple to address some issues that arose around that undocumented feature so many of you are already using: `context`. We also improved developer ergonomics just a little bit, making some warnings better.
The release is now available for download:
* **React**
Dev build with warnings: <https://fb.me/react-0.13.3.js>
Minified build for production: <https://fb.me/react-0.13.3.min.js>
* **React with Add-Ons**
Dev build with warnings: <https://fb.me/react-with-addons-0.13.3.js>
Minified build for production: <https://fb.me/react-with-addons-0.13.3.min.js>
* **In-Browser JSX transformer**
<https://fb.me/JSXTransformer-0.13.3.js>
We've also published version `0.13.3` of the `react` and `react-tools` packages on npm and the `react` package on bower.
- - -
## Changelog
### React Core
#### New Features
* Added `clipPath` element and attribute for SVG
* Improved warnings for deprecated methods in plain JS classes
#### Bug Fixes
* Loosened `dangerouslySetInnerHTML` restrictions so `{__html: undefined}` will no longer throw
* Fixed extraneous context warning with non-pure `getChildContext`
* Ensure `replaceState(obj)` retains prototype of `obj`
### React with Add-ons
### Bug Fixes
* Test Utils: Ensure that shallow rendering works when components define `contextTypes`

View File

@@ -0,0 +1,22 @@
---
title: "React Native Release Process"
author: vjeux
---
The React Native release process have been a bit chaotic since we open sourced. It was unclear when new code was released, there was no changelog, we bumped the minor and patch version inconsistently and we often had to submit updates right after a release to fix a bad bug. In order to *move fast with stable infra*, we are introducing a real release process with a two-week release schedule.
To explain how it works, let me walk you through an example. Today, Friday, we took the current state of master and put it on the 0.5-stable branch. We [published 0.5.0-rc](https://github.com/facebook/react-native/releases/tag/v0.5.0-rc), an RC (Release Candidate) when we cut the branch. For two weeks, we're going to let it stabilize and only cherry-pick critical bug fixes from master.
Friday in two weeks, we're going to publish the 0.5.0 release, create the 0.6-stable branch and publish 0.6.0-rc as well.
The release process is synchronized with Facebook's mobile release process. This means that everything in the open source release is also being shipped as part of all the Facebook apps that use React Native!
You now have three ways to get React Native. You should chose the one you want based on the amount of risk you tolerate:
- **master**: You have updates as soon as they are committed. This is if you want to live on the bleeding edge or want to submit pull requests.
- **rc**: If you don't want to update every day and deal with many instabilities but want to have recent updates, this is your best shot.
- **release**: This is the most stable version we offer. The trade-off is that it contains commits that are up to a month old.
If you want more details, I highly recommend this video that explains how Facebook mobile release process works and why it was setup this way.
<iframe width="650" height="300" src="https://www.youtube.com/embed/mOyoTUETmSM" frameborder="0" allowfullscreen></iframe>

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