Compare commits

..

134 Commits

Author SHA1 Message Date
Paul O’Shannessy
0fc0871c89 [docs] Fox Ryan's name: #3311 2015-03-04 12:30:29 -08:00
Christopher Chedeau
40336d8144 Update round-up 25 2015-03-04 09:25:22 -08:00
Matthew Johnston
758436e0eb Update 2015-03-03-community-roundup-25.md 2015-03-04 09:08:34 -08:00
Matthew Johnston
b7867b1363 Update 2015-03-03-community-roundup-25.md 2015-03-04 09:08:30 -08:00
Matthew Johnston
67005be6e0 Update 2015-03-03-community-roundup-25.md 2015-03-04 09:08:26 -08:00
Matthew Johnston
2183b55939 Community Roundup #25 blog post 2015-03-04 09:08:21 -08:00
Paul O’Shannessy
8b94509d75 Facebook, not FaceBook 2015-03-03 12:47:12 -08:00
Paul O’Shannessy
dfc4016425 v0.13 rc blog post
(cherry picked from commit a3642d3995)
2015-03-03 12:43:58 -08:00
Paul O’Shannessy
1d7ea352bf v0.13 RC blog post
Note: we need to manually specify date in these files so that the sort order is
correct (2 posts on the same day). Otherwise it will just be ABC order, which
is wrong.

Closes: #3256
(cherry picked from commit 63146e1f16)
2015-02-24 14:06:54 -08:00
Paul O’Shannessy
4d90b9bdf3 Fix typo 2015-02-24 12:46:15 -08:00
Cheng Lou
5174b31d3d [Blog] Fix post code snippet display
I think nokogiri (is that what we use?) accidentally escaped this
snippet. Simply putting spaces between braces fixes it.

(cherry picked from commit 99d23a54bc)
2015-02-24 12:43:13 -08:00
Sebastian Markbage
58e38a2e8c Add Blog Post about ReactElement Changes in 0.13
Explains some of the rationale for the new warnings added in 0.13.
2015-02-24 11:28:02 -08:00
Greg Hurrell
4e3fe5c13f Add Relay blog post
closes #3174

(cherry picked from commit 531add88c4)
2015-02-19 21:28:49 -08:00
Paul O’Shannessy
3f79ad1e4a Merge pull request #3190 from steveluscher/sorry-lee
Added the immutability talk to the React.js Conf update
2015-02-18 21:40:52 -08:00
Steven Luscher
de8b3eb9d4 Added the immutability talk to the React.js Conf update. 2015-02-18 21:37:38 -08:00
Paul O’Shannessy
276df014a1 Merge pull request #3168 from briankung/docs-jsx-namespacing
[Docs] Clarify section on namespaced components
2015-02-18 13:42:04 -08:00
Ben Alpert
36719c561e Merge pull request #3167 from MichelleTodd/docs-grammar
[Docs] Reword section on React without JSX
2015-02-18 13:42:04 -08:00
Paul O’Shannessy
043ac1a5b3 Merge pull request #3134 from briankung/update-safe_yaml
Fix for the jekyll docs build process
2015-02-18 13:42:04 -08:00
Paul O’Shannessy
ea71d21159 Merge pull request #3089 from iamdanfox/fix-markdown-parsing-error-3075
Fix markdown parsing error
2015-02-18 13:42:04 -08:00
Paul O’Shannessy
8f8e9713b1 Merge pull request #3082 from hzoo/patch-1
Add React.js Conf Keynote talk (with playlist)
2015-02-18 13:42:03 -08:00
Jim
f005189a8b Merge pull request #3078 from vincentriemer/patch-1
Fixed pure-render-mixin documentation
2015-02-18 13:42:03 -08:00
Paul O’Shannessy
788c118fcd Merge pull request #3074 from noyobo/master
fix Chinese docs typos
2015-02-18 13:42:03 -08:00
Jim
5f72c6640e Merge pull request #3073 from gsklee/patch-3
Fix typos in animation.md
2015-02-18 13:42:03 -08:00
Paul O’Shannessy
bf3d1ee84d Merge pull request #3046 from cobbweb/patch-1
Add autoFocus to supported HTML attributes
2015-02-18 13:42:03 -08:00
Paul O’Shannessy
4e11282ddc Merge pull request #3166 from steveluscher/conf-roundup-2015
Wrote React.js Conf Round-up 2015
2015-02-18 13:29:52 -08:00
Steven Luscher
233980826c Added special edition round-up for React.js Conf 2015 2015-02-18 13:10:30 -08:00
Christopher Chedeau
c5516cd27f update image perf 2015-02-11 12:45:15 -08:00
Christopher Chedeau
69cc1ce6a3 Tweaks on Advanced Performance 2015-02-11 11:14:32 -08:00
Christopher Chedeau
e29766a811 Advanced Performance Doc 2015-02-11 10:56:15 -08:00
Paul O’Shannessy
20d84472e8 Merge pull request #3036 from jergason/master
Fix list formatting in glossary
2015-02-04 15:32:53 -08:00
Paul O’Shannessy
6969d3d325 Merge pull request #3032 from germ13/patch-1
Corrected documentation
2015-02-04 15:32:53 -08:00
Paul O’Shannessy
bfc655f2c4 Merge pull request #3016 from hnordt/patch-1
Removing unnecessary returns
2015-02-04 15:32:53 -08:00
Paul O’Shannessy
f7b0647f64 Merge pull request #3013 from akheron/patch-2
Document React.addons.TestUtils.isElement()
2015-02-04 15:32:53 -08:00
Paul O’Shannessy
3f367e2688 Merge pull request #3011 from koba04/fix-coponent-api-doc
Fix consistency of component api document
2015-02-04 15:32:53 -08:00
Paul O’Shannessy
2958c0fe62 Merge pull request #3007 from JoelOtter/patch-2
Add note linking to up-to-date doc on Flux website
2015-02-04 15:32:53 -08:00
Paul O’Shannessy
13016af6cd Merge pull request #3001 from rgarcia/patch-1
remove extraneous comma in tutorial
2015-02-04 15:32:52 -08:00
Paul O’Shannessy
962c31d8b1 Merge pull request #2999 from sedovsek/master
Changed unit to pixels due to inconsistent font-size rendering of code elements.
2015-02-04 15:32:52 -08:00
Paul O’Shannessy
55e8a3139a Merge pull request #2997 from rickbeerendonk/2943-jsx-build-tool-documentation
Documents that JSX tool is transforming files with .js extension (and no...
2015-02-04 15:32:52 -08:00
Paul O’Shannessy
2c06df31c8 Merge pull request #2987 from jsfb/fix-markdown-output-wrap
Fixed linewrap issue on markdown output css.  Fixes #2986
2015-02-04 15:32:52 -08:00
Paul O’Shannessy
7254f167be Merge pull request #2969 from gsklee/patch-1
Update thinking-in-react.md
2015-02-04 15:32:52 -08:00
Jim
33375f5805 Merge pull request #2965 from ClimbsRocks/patch-4
Docs wording tweak: subject verb agreement
2015-02-04 15:32:52 -08:00
Ben Alpert
80e4bc4dd5 Merge pull request #2962 from ClimbsRocks/patch-3
Docs wording tweak for clarity
2015-02-04 15:32:52 -08:00
Ben Alpert
c5bce48542 Merge pull request #2961 from ClimbsRocks/patch-1
Rewording for clarity
2015-02-04 15:32:52 -08:00
Paul O’Shannessy
5b16016e0a Fix type in 0.13 blog post
Pull in #2971 to the markdown
2015-01-29 16:13:35 -08:00
Paul O’Shannessy
ea4dd2068d One more typo fix in the 0.13 beta blog post 2015-01-28 00:01:54 -08:00
Sebastian Markbåge
48064fce51 Less parens in CS
Idiomatic!
2015-01-27 23:50:12 -08:00
Sebastian Markbåge
f9d32be8b2 Hotfix demo
Static properties + Add module pattern demo.
2015-01-27 23:41:44 -08:00
Paul O’Shannessy
48443c26b9 0.13 beta blog post 2015-01-27 23:06:41 -08:00
Paul O’Shannessy
1a22b72d1f Merge pull request #2903 from tendant/merge-conflicts-in-translation
Update documents for Chinese translation
2015-01-22 13:18:50 -08:00
Ben Alpert
76d6ed9b78 Merge pull request #2902 from swestwood/patch-2
Correctly highlight changed line in tutorial.
2015-01-22 13:18:38 -08:00
Paul O’Shannessy
d0b20dd364 Merge pull request #2890 from amykyta/patch-1
Update 02.1-jsx-in-depth.md
2015-01-22 13:18:08 -08:00
Paul O’Shannessy
0384af0e73 Merge pull request #2881 from camsong/master
Add Chinese translation to several pages.
2015-01-22 13:17:52 -08:00
Paul O’Shannessy
8fa006c892 Merge pull request #2875 from kchia/patch-2
Update 03-interactivity-and-dynamic-uis.md: correct typo
2015-01-22 13:17:33 -08:00
Paul O’Shannessy
c31270108c [docs] Use current date in copyright footer
This will be based on the site generation time, making doc generation
slightly less deterministic but that's ok. Now we won't depend on
helpful community members updating it for us (#2874) when we forget,
it'll just happen naturally the next time the site is generated.

Conflicts:
	docs/_layouts/default.html
2015-01-22 13:11:33 -08:00
Cheng Lou
b8adf96d4b Merge pull request #2859 from javawizard/patch-1
ref-08-reconciliation.md: grammar/punctuation fixes
2015-01-16 16:30:48 -08:00
Paul O’Shannessy
9a7cfb95dc Merge pull request #2824 from zpao/docs-tutorial-server
[docs] Talk about running a server in tutorial
2015-01-16 16:30:48 -08:00
Paul O’Shannessy
371548b90c Merge pull request #2801 from jsfb/componentDidUpdate-docs
Update docs to indicate that componentDDidUpdate is fired after changes are flushed to the DOM.  Fix
2015-01-16 16:30:48 -08:00
Paul O’Shannessy
3ffbb22ccb Merge pull request #2795 from chenglou/tips-lib
[Docs] Tip on integration with other libraries
2015-01-16 16:30:48 -08:00
Paul O’Shannessy
17d947a671 Merge pull request #2791 from rickbeerendonk/patch-1
Update ref-09-glossary.md
2015-01-16 16:30:48 -08:00
Paul O’Shannessy
bb212f5a60 Merge pull request #2788 from mihaip/master
SyntheticEvent.timeStamp is a number, not a Date
2015-01-16 16:30:48 -08:00
Paul O’Shannessy
b4b4aab162 Merge pull request #2773 from vanesyan/patch-1
Update ref-01-top-level-api.md
2015-01-16 16:30:48 -08:00
Paul O’Shannessy
3ab3fabf5e Merge pull request #2760 from alextsg/patch-3
Update 14-communicate-between-components.md for grammatical changes
2015-01-16 16:30:48 -08:00
Paul O’Shannessy
b75c2aecfb Merge pull request #2759 from alextsg/patch-2
Update 05-maximum-number-of-jsx-root-nodes.md for capitalization
2015-01-16 16:30:47 -08:00
Paul O’Shannessy
35929909ae Merge pull request #2734 from Minwe/master
add Forms and Event System docs Chinese translation
2015-01-16 16:30:47 -08:00
Paul O’Shannessy
69a7e3969b Merge pull request #2733 from morenoh149/patch-1
Added note for proper example display
2015-01-16 16:30:47 -08:00
Paul O’Shannessy
6500fd26c5 Merge pull request #2707 from camsong/master
More Chinese Doc Translation
2015-01-16 16:30:47 -08:00
Paul O’Shannessy
132a022936 Merge pull request #2675 from af/topLevelAPIDocs
Top level api docs for createFactory
2015-01-16 16:30:47 -08:00
Paul O’Shannessy
2e2bcbd861 Merge pull request #2360 from beausmith/patch-1
Highlighted changed lines in examples
2015-01-16 16:30:47 -08:00
Paul O’Shannessy
9d2ab67164 Merge pull request #2297 from pedronauck/docs-namespace-in-jsx
Add a section at 'jsx-in-depth' talking about namespaced components
2015-01-16 16:30:47 -08:00
Paul O’Shannessy
e350d12e1c Merge pull request #2752 from peterblazejewicz/fix/blog-typo
Fix conference year typo in blog post content
2014-12-19 14:30:38 -08:00
Paul O’Shannessy
f9f5823f9d Diversity Scholarship blog post 2014-12-19 13:23:17 -08:00
Paul O’Shannessy
1e1f02a83a Merge pull request #2724 from zpao/release-0.12.2
Release 0.12.2
2014-12-18 12:45:02 -08:00
Paul O’Shannessy
6c5cb72cdc 0.12.2 starter kit 2014-12-18 12:35:02 -08:00
Paul O’Shannessy
ea14845c15 Bump version for 0.12.2 2014-12-18 12:34:46 -08:00
Paul O’Shannessy
2f6a95d5a2 v0.12.2 blog post 2014-12-18 12:30:22 -08:00
Paul O’Shannessy
7468f092ae Readme + Changelog for 0.12.2 2014-12-18 12:30:22 -08:00
Paul O’Shannessy
e6e60c4fa8 update docs for 0.12.2 changes 2014-12-18 12:30:22 -08:00
Paul O’Shannessy
6526f89235 Merge pull request #2726 from zpao/createElement-undefined-null
Protect better against createElement(null/undefined)
Conflicts:
	src/classic/element/__tests__/ReactElementValidator-test.js
2014-12-18 12:30:22 -08:00
Paul O’Shannessy
bbe2e886ab Merge pull request #2658 from ianobermiller/margin-attrs
Support marginHeight and marginWidth attributes
2014-12-18 12:30:21 -08:00
Paul O’Shannessy
359eb75723 Merge pull request #2610 from zpao/update-commonjs-example
Update commonjs example for 0.12
2014-12-18 12:30:21 -08:00
Paul O’Shannessy
fb0fafb436 Merge pull request #2489 from cody/form
Add Attributes formAction, formEncType, formMethod and formTarget
2014-12-18 12:30:21 -08:00
Ben Alpert
3e6363116c Merge pull request #2482 from BinaryMuse/bkt/fix-stroke-opacity
Add strokeOpacity to unitless CSS properties
2014-12-18 12:30:21 -08:00
Paul O’Shannessy
d339631295 Merge pull request #2452 from Shahor/master
Trailing commas break old IE versions
2014-12-18 12:30:21 -08:00
Paul O’Shannessy
5f88996977 Merge pull request #1708 from chenglou/displayName
Use double quote for transformed `displayName`
2014-12-18 12:30:21 -08:00
Paul O’Shannessy
b02db228ca Merge pull request #2718 from alextsg/patch-1
Update tutorial.md for grammatical changes
2014-12-16 12:32:34 -08:00
Paul O’Shannessy
e9067f9ecd Merge pull request #2716 from RichardLitt/patch-2
Delete extraneous period
2014-12-16 12:32:34 -08:00
Paul O’Shannessy
c7ff4447e0 Merge pull request #2705 from Swader/patch-1
Update 02-displaying-data.md
2014-12-16 12:32:34 -08:00
Paul O’Shannessy
d9094a1418 Merge pull request #2694 from camsong/master
Add Chinese translation of js-spread
2014-12-16 12:32:34 -08:00
Paul O’Shannessy
d6440d6179 Merge pull request #2689 from camsong/master
Add Chinese translation of jsx-in-depth
2014-12-16 12:32:34 -08:00
Paul O’Shannessy
3e17992257 Merge pull request #2679 from tschaub/patch-1
Add missing verb in docs
2014-12-16 12:32:34 -08:00
Ben Alpert
b82a3c51c5 Merge pull request #2672 from cookfront/master
The same problem in issue #2648
2014-12-16 12:32:34 -08:00
Cheng Lou
84e461f5e3 Merge pull request #2671 from benkeen/patch-1
Update 10.6-update.md
2014-12-16 12:32:34 -08:00
Paul O’Shannessy
e9f344c030 Merge pull request #2635 from zpao/docs/props-state-clarification
[docs] Clarify when state may duplicate props
2014-12-03 14:52:59 -08:00
Paul O’Shannessy
250060981d Merge pull request #2639 from zpao/own-jsfiddle
Own our fiddles so we can update them more easily
2014-12-03 14:52:59 -08:00
Paul O’Shannessy
308112dbd2 Merge pull request #2649 from cookfront/master
In `Transferring Props` guide, `Manual Transfer` section will lead an er...
2014-12-03 14:52:59 -08:00
Paul O’Shannessy
0bd6bdaa64 Merge pull request #2615 from af/createElement-docs
Add top-level API docs section for React.createElement.
2014-12-03 14:52:59 -08:00
Paul O’Shannessy
bfaddf42ae Merge pull request #2636 from zpao/docs/spread-assign-update
[docs] Remove generic spread, Object.assign  mentions
2014-12-03 14:52:59 -08:00
Paul O’Shannessy
5dd855c898 Merge pull request #2622 from rafd/patch-1
add note re: handling events in capture phase
2014-12-03 14:52:59 -08:00
Paul O’Shannessy
a4d2e97400 Merge pull request #2623 from jbhatab/patch-1
Screencast interfacing react + backbone
2014-12-03 14:52:59 -08:00
Paul O’Shannessy
b112a27aa0 Merge pull request #2616 from christianalfoni/patch-3
Adding link to wiki
2014-12-03 14:52:59 -08:00
Paul O’Shannessy
8eef2fcd3d Merge pull request #2633 from koba04/fix-addons-document
Fix addons documentation of development only part
2014-12-03 14:52:02 -08:00
Paul O’Shannessy
725c545589 Merge pull request #2630 from shamrin/patch-1
fix typo in addons.update() $splice command help
2014-12-03 14:48:36 -08:00
Steven Luscher
d70a1a5a6f Community #24: New Carousel link, spelled react-prism correctly, and removed the whale-speak. 2014-11-25 10:27:03 -08:00
Steven Luscher
f25ab5ceaa Wrote Community Roundup #24 2014-11-25 10:27:03 -08:00
Christopher Chedeau
b1d0c74726 Mention that talks will be recorded 2014-11-24 11:29:11 +00:00
Christopher Chedeau
0e0803401b better wording thanks to @jwalke 2014-11-24 10:33:45 +00:00
Christopher Chedeau
af5d168460 react.js conf updates 2014-11-24 09:26:50 +00:00
Cheng Lou
0f9739a4f2 Merge pull request #2555 from mfunkie/patch-1
Animation documentation for ReactTransitionGroup
2014-11-19 15:35:55 +00:00
Paul O’Shannessy
3efc8c8aa9 Merge pull request #2554 from samccone/patch-1
Update tutorial language to be more explicit.
2014-11-19 15:35:44 +00:00
Paul O’Shannessy
ae13325143 Merge pull request #2544 from mjul/patch-1
Update 10.4-test-utils.md
2014-11-19 15:33:51 +00:00
Cheng Lou
7dd33967b6 Merge pull request #2514 from jvalente/patch-1
Update ref-09-glossary.md
2014-11-19 15:33:42 +00:00
Paul O’Shannessy
8dc8b0fd44 Merge pull request #2498 from ikr/patch-1
There's no isComponentOfType() anymore
2014-11-19 15:33:31 +00:00
Paul O’Shannessy
4fb45410b3 Merge pull request #2475 from jsfb/master
Use adjective "too" instead of "to"
2014-11-19 15:31:46 +00:00
Paul O’Shannessy
bc8baef372 Merge pull request #2473 from zertosh/docs-ssr-at-sc
Add React at SoundCloud talk
2014-11-19 15:31:36 +00:00
Paul O’Shannessy
a067fc0fee Changelog, Readme updates for v0.12.1 2014-11-18 09:30:26 +01:00
jeffmo
e9dde65341 Include 0.12.1 starter kit 2014-11-17 23:57:54 -08:00
jeffmo
6a739ccba6 Update jstransform to version 8.2.0 2014-11-17 22:31:27 -08:00
jeffmo
2119a29770 Needed to npm shrinkwrap with --dev 2014-11-17 19:44:09 -08:00
jeffmo
8f3416e6fd v0.12.1 2014-11-17 19:37:24 -08:00
Christopher Chedeau
11527d7fe4 Merge pull request #2543 from spicyj/strip-types-2
Cherry-pick jstransform, strip-types upgrades and re-shrinkwrap
2014-11-16 20:30:19 -08:00
Ben Alpert
d7e3fb36ad Re-shrinkwrap dependencies with new package.json
After running `npm install` with the old shrinkwrap, I ran:

```
rm -rf npm-shrinkwrap.json node_modules/esprima-fb/
npm install
npm install envify@3.0.0
npm shrinkwrap --dev
```

and ended up with this file. (I had to re-install envify because it wants jstransform@'^6.1.0' but was getting the one at the root which is now `8.0.0`. Now it uses its own copy in `node_modules/envify/node_modules/jstransform/`.)
2014-11-16 20:22:21 -08:00
Gabe Levi
361b00e652 Update stripTypes transform to use fixed up jstransform transform
(cherry picked from commit 0d308add09)
2014-11-16 19:53:58 -08:00
Andres Suarez
9f584d607a Remove esprima-fb and use Syntax from jstransform
(cherry picked from commit bf0a857a92)
2014-11-16 19:53:58 -08:00
Zacharias
55a58460d9 Update jstransform version to ^7.0.0
(cherry picked from commit c260c45db3)
2014-11-16 19:53:58 -08:00
Paul O’Shannessy
ed1ca69183 Merge pull request #2463 from fson/render-to-string-docs
Update React.renderToString argument type in docs
2014-11-05 16:15:25 -08:00
Paul O’Shannessy
a47c6d3717 Merge pull request #2434 from Shraymonks/propTypes-docs
Update deprecated propTypes
2014-11-05 16:15:20 -08:00
Paul O’Shannessy
b6af3c8586 Merge pull request #2433 from zpao/fiddle-integration
Bring in jsfiddle integration script, add harmony
2014-10-31 11:23:43 -07:00
Paul O’Shannessy
cf0a22578d Merge pull request #2443 from kruppel/kurt/minor-tip-typo
Fix typo in If/Else JSX doc.
2014-10-31 10:13:11 -07:00
Cheng Lou
9ee824e5de Merge pull request #2418 from spencer48/patch-1
(docs) Added commas to increase readability.
2014-10-29 18:17:25 -07:00
Paul O’Shannessy
a354e65974 Merge pull request #2428 from cody/fixes
React.renderComponent --> React.render
2014-10-29 18:16:58 -07:00
Paul O’Shannessy
0c1191d2bc Merge pull request #2419 from johnheroy/patch-1
Add comma for readability in tutorial.md
2014-10-29 18:16:19 -07:00
Paul O’Shannessy
434b4a275a Add 0.12 starter kit 2014-10-28 11:40:57 -07:00
Christopher Chedeau
d56bc2f219 Change the date and the link url to match the proper roundup 2014-10-28 11:36:03 -07:00
Paul O’Shannessy
3e925822a6 v0.12.0
- update versions in packages, react
- update version in docs
- npm shrinkwrap
2014-10-28 11:23:41 -07:00
1001 changed files with 34980 additions and 100585 deletions

View File

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

View File

@@ -1,19 +0,0 @@
# We can probably lint these later but not important at this point
src/shared/vendor
# But not in docs/_js/examples/*
docs/_js/*.js
docs/js/
docs/_site/
# gems
docs/vendor/bundle/
# This should be more like examples/**/thirdparty/** but
# we should fix https://github.com/facebook/esprima/pull/85 first
examples/
# Ignore built files.
build/
# react-codemod
packages/react-codemod/test/
packages/react-codemod/scripts/
packages/react-codemod/build/
packages/react-codemod/node_modules/
vendor/*

View File

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

7
.gitignore vendored
View File

@@ -9,19 +9,12 @@ __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*
chrome-user-data
*.sublime-project
*.sublime-workspace
.idea
*.iml
.vscode

21
.jshintrc Normal file
View File

@@ -0,0 +1,21 @@
{
"node": true,
"boss": true,
"curly": true,
"devel": true,
"eqnull": true,
"expr": true,
"funcscope": true,
"globalstrict": true,
"loopfunc": true,
"newcap": false,
"noempty": true,
"nonstandard": true,
"onecase": true,
"sub": true,
"regexdash": true,
"trailing": true,
"undef": true,
"unused": "vars"
}

View File

@@ -1,23 +1,8 @@
Adam Timberlake <adam.timberlake@gmail.com>
Alex Mykyta <dancingwithcows@gmail.com>
Alex Pien <alexpien@gmail.com>
Alex Pien <alexpien@gmail.com> <pien@pien-mbp.dhcp.thefacebook.com>
Alex Pien <alexpien@gmail.com> <pien@pien-mbp.local>
Andreas Savvides <asavvides@twitter.com> <AnSavvides@users.noreply.github.com>
Andreas Savvides <asavvides@twitter.com> <andreas@nibbli.com>
Andreas Svensson <andreas@syranide.com>
Andres Suarez <zertosh@gmail.com>
Andrew Sokolov <asokolov@atlassian.com>
Baraa Hamodi <bhamodi@uwaterloo.ca> <baraa@optimizely.com>
Ben Alpert <ben@benalpert.com> <balpert@fb.com>
Ben Alpert <ben@benalpert.com> <spicyjalapeno@gmail.com>
Ben Newman <bn@cs.stanford.edu> <benjamn@fb.com>
Benjamin Woodruff <github@benjam.info> <bgw@fb.com>
Bill Fisher <fisherwebdev@gmail.com>
Blaine Kasten <blainekasten@gmail.com>
Brandon Tilley <brandon@brandontilley.com>
Cheng Lou <chenglou92@gmail.com> <chenglou@fb.com>
Christian Oliff <christianoliff@yahoo.com>
Christoph Pojer <christoph.pojer@gmail.com>
Christoph Pojer <christoph.pojer@gmail.com> <cpojer@fb.com>
Connor McSheffrey <c@conr.me> <connor.mcsheffrey@gmail.com>
@@ -25,72 +10,39 @@ Dan Schafer <dschafer@fb.com>
Daniel Gasienica <daniel@gasienica.ch> <daniel@fiftythree.com>
Daniel Gasienica <daniel@gasienica.ch> <dgasienica@zynga.com>
Daniel Lo Nigro <daniel@dan.cx> <danlo@fb.com>
Dmitry Blues <dmitri.blyus@gmail.com>
Erik Harper <eharper@mixpo.com>
Evan Coonrod <evan@paloalto.com>
Fabio M. Costa <fabiomcosta@gmail.com> <fabs@fb.com>
Felix Kling <felix.kling@gmx.net> <fkling@fb.com>
François-Xavier Bois <fxbois@gmail.com>
Gabe Levi <gabelevi@gmail.com> <glevi@fb.com>
Geert Pasteels <geert.pasteels@gmail.com>
George A Sisco III <george.sisco@gmail.com>
Georgii Dolzhykov <thorn.mailbox@gmail.com>
Harry Hull <harry.hull1@gmail.com>
Hendrik Swanepoel <hendrik.swanepoel@gmail.com>
Ian Obermiller <ian@obermillers.com> <iano@fb.com>
Ilyá Belsky <gelias.gbelsky@gmail.com>
Ingvar Stepanyan <me@rreverser.com> <rreverser@ubuntu.rreverser.a4.internal.cloudapp.net>
Irae Carvalho <irae@irae.pro.br>
Ivan Vergiliev <ivan.vergiliev@gmail.com>
Jae Hun Ro <jhr24@duke.edu>
Jaime Mingo <j.mingov@3boll.com>
James Brantly <james@jbrantly.com>
Jan Hancic <jan.hancic@gmail.com> <jan.hancic@caplin.com>
Jan Kassens <jan@kassens.net> <jkassens@fb.com>
Jason Bonta <jbonta@gmail.com> <jasonbonta@fb.com>
Jason Trill <jason@jasontrill.com>
Jeff Chan <jefftchan@gmail.com> <jeff@quizlet.com>
Jeff Morrison <jeff@anafx.com> <Jeff@anafx.com>
Jeff Morrison <jeff@anafx.com> <jeffmo@fb.com>
Jeff Morrison <jeff@anafx.com> <lbljeffmo@gmail.com>
Jeffrey Lin <lin.jeffrey@gmail.com> <jeffreylin@fb.com>
Jim Sproch <jsproch@fb.com>
Jim Sproch <jsproch@fb.com> <jsfb@github>
Jiyeon Seo <zzzeons@gmail.com>
Jon Chester <jonchester@fb.com>
Jon Madison <jon@tfftech.com>
Jonathan Hsu <jhiswin@gmail.com>
Jordan Walke <jordojw@gmail.com>
Jordan Walke <jordojw@gmail.com> <jordanjcw@fb.com>
Joseph Savona <joesavona@fb.com> <josephsavona@users.noreply.github.com>
Josh Duck <josh@fb.com> <github@joshduck.com>
Juan Serrano <germ13@users.noreply.github.com>
Jun Wu <quark@lihdd.net>
Justin Robison <jrobison151@gmail.com>
Keito Uchiyama <projects@keito.me> <keito@fb.com>
Kevin Coughlin <kevintcoughlin@gmail.com> <kevincoughlin@tumblr.com>
Kunal Mehta <k.mehta@berkeley.edu> <kunalm@fb.com>
Laurence Rowe <l@lrowe.co.uk> <laurence@lrowe.co.uk>
Marcin K. <katzoo@github.mail>
Mark Anderson <undernewmanagement@users.noreply.github.com>
Martin Andert <mandert@gmail.com>
Mathieu M-Gosselin <mathieumg@gmail.com> <mathieumg@atx33.com>
Matsunoki <himkt@klis.tsukuba.ac.jp>
Matt Brookes <matt@brookes.net>
Matt Dunn-Rankin <mdunnrankin@gmail.com> <matchu1993@gmail.com>
Matt Zabriskie <mzabriskie@gmail.com>
Matthew Johnston <matthewjohnston4@outlook.com> <matthewjohnston4@users.noreply.github.com>
Max Heiber <max.heiber@gmail.com>
Michal Srb <xixixao@seznam.cz> xixixao <xixixao@seznam.cz>
Michelle Todd <himichelletodd@gmail.com> <michelle@khanacademy.org>
Mihai Parparita <mihai.parparita@gmail.com> <mihai@persistent.info>
Minwe LUO <minwe@yunshipei.com>
Murray M. Moss <murray@mmoss.name> <MMoss@cainc.com>
Murray M. Moss <murray@mmoss.name> <mmoss@users.noreply.github.com>
Neri Marschik <marschik_neri@cyberagent.co.jp>
Nick Gavalas <njg57@cornell.edu>
Nick Thompson <ncthom91@gmail.com> <nickt@instagram.com>
Patrick Stapleton <github@gdi2290.com>
Paul OShannessy <paul@oshannessy.com> <poshannessy@fb.com>
Paul Shen <paul@mnml0.com> <paulshen@fb.com>
Pete Hunt <floydophone@gmail.com>
@@ -100,28 +52,16 @@ Pete Hunt <floydophone@gmail.com> <phunt@instagram.com>
Petri Lievonen <plievone@cc.hut.fi>
Petri Lievonen <plievone@cc.hut.fi> <petri.lievonen@tkk.fi>
Pieter Vanderwerff <me@pieter.io> <pieter@heyday.co.nz>
Pouja Nikray <poujanik@gmail.com>
Ray <ray@tomo.im>
Richard Feldman <richard.t.feldman@gmail.com> <richard@noredink.com>
Richard Livesey <Livesey7@hotmail.co.uk>
Rob Arnold <robarnold@cs.cmu.edu>
Sander Spies <sandermail@gmail.com>
Scott Feeney <scott@oceanbase.org> <smf@fb.com>
Sebastian Markbåge <sebastian@calyptus.eu> <sema@fb.com>
Sergey Rubanov <chi187@gmail.com>
Steven Luscher <react@steveluscher.com> <github@steveluscher.com>
Steven Luscher <react@steveluscher.com> <steveluscher@fb.com>
Steven Luscher <react@steveluscher.com> <steveluscher@instagram.com>
Steven Luscher <react@steveluscher.com> <steveluscher@users.noreply.github.com>
Stoyan Stefanov <ssttoo@ymail.com>
Thomas Aylott <oblivious@subtlegradient.com> <aylott@fb.com>
Timothy Yung <yungsters@gmail.com> <yungsters@fb.com>
Vasiliy Loginevskiy <Yeti.or@gmail.com>
Vasiliy Loginevskiy <Yeti.or@gmail.com> <yeti-or@yandex-team.ru>
Vjeux <vjeuxx@gmail.com>
Vjeux <vjeuxx@gmail.com> <vjeux@fb.com>
Volkan Unsal <spocksplanet@gmail.com>
Xavier Morel <xmo-odoo@users.noreply.github.com>
YouBao Nong <noyobo@gmail.com> <nongyoubao@alibaba-inc.com>
Zach Bruggeman <mail@bruggie.com> <zbruggeman@me.com>
张敏 <cookfront@gmail.com>

View File

@@ -1,88 +1,65 @@
---
language: node_js
node_js:
- 4
sudo: false
- '0.10'
cache:
directories:
- docs/vendor/bundle
- node_modules
before_install:
- |
if [ "$TEST_TYPE" != build_website ] && \
! git diff --name-only $TRAVIS_COMMIT_RANGE | grep -qvE '(\.md$)|(^(docs|examples))/'
then
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))/' || {
echo "Only docs were updated, stopping build process."
exit
fi
npm install -g npm@latest-2
npm --version
}
script:
- |
if [ "$TEST_TYPE" = build_website ]; then
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
elif [ "$TEST_TYPE" = build ]; then
if [ "$SERVER" ]; then
set -e
./node_modules/.bin/grunt build
curl \
-F "react=@build/react.js" \
-F "react.min=@build/react.min.js" \
-F "react-with-addons=@build/react-with-addons.js" \
-F "react-with-addons.min=@build/react-with-addons.min.js" \
-F "react-dom=@build/react-dom.js" \
-F "react-dom.min=@build/react-dom.min.js" \
-F "react-dom-server=@build/react-dom-server.js" \
-F "react-dom-server.min=@build/react-dom-server.min.js" \
-F "npm-react=@build/packages/react.tgz" \
-F "npm-react-dom=@build/packages/react-dom.tgz" \
-F "commit=$TRAVIS_COMMIT" \
-F "date=`git log --format='%ct' -1`" \
-F "pull_request=$TRAVIS_PULL_REQUEST" \
-F "token=$SECRET_TOKEN" \
-F "branch=$TRAVIS_BRANCH" \
$SERVER
fi
else
./node_modules/.bin/grunt $TEST_TYPE
grunt $TEST_TYPE
after_script:
- |
if [ "$TEST_TYPE" = test ] && [ "$SERVER" ]; then
grunt build
curl \
-F "react=@build/react.js" \
-F "react.min=@build/react.min.js" \
-F "transformer=@build/JSXTransformer.js" \
-F "react-with-addons=@build/react-with-addons.js" \
-F "react-with-addons.min=@build/react-with-addons.min.js" \
-F "npm-react=@build/react.tgz" \
-F "npm-react-tools=@build/react-tools.tgz" \
-F "commit=$TRAVIS_COMMIT" \
-F "date=`git log --format='%ct' -1`" \
-F "pull_request=$TRAVIS_PULL_REQUEST" \
-F "token=$SECRET_TOKEN" \
-F "branch=$TRAVIS_BRANCH" \
$SERVER
fi
env:
matrix:
- TEST_TYPE=build
- TEST_TYPE=jest
- TEST_TYPE=test
- 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:
- env: TEST_TYPE=lint
- env: TEST_TYPE=test:coverage
- env: TEST_TYPE=perf:full
- env: TEST_TYPE=test:webdriver:saucelabs:modern
- env: TEST_TYPE=test:webdriver:saucelabs BROWSER_NAME=ie11
- env: TEST_TYPE=test:webdriver:saucelabs BROWSER_NAME=ie10
- env: TEST_TYPE=test:webdriver:saucelabs BROWSER_NAME=ie9
- env: TEST_TYPE=test:webdriver:saucelabs BROWSER_NAME=ie8
- env: TEST_TYPE=test:webdriver:saucelabs:ios
- env: TEST_TYPE=test:webdriver:saucelabs BROWSER_NAME=safari
notifications:
irc:
use_notice: true

314
AUTHORS
View File

@@ -1,551 +1,243 @@
839 <8398a7@gmail.com>
Aaron Franks <aaron.franks@gmail.com>
Aaron Gelter <aaron.gelter@harman.com>
Adam Krebs <amk528@cs.nyu.edu>
Adam Mark <adammark75@gmail.com>
Adam Solove <asolove@gmail.com>
Adam Timberlake <adam.timberlake@gmail.com>
Adam Zapletal <adamzap@gmail.com>
Ahmad Wali Sidiqi <wali-s@users.noreply.github.com>
Alan Souza <alansouzati@gmail.com>
Alan deLevie <adelevie@gmail.com>
Alastair Hole <afhole@gmail.com>
Alex <ultrafez@users.noreply.github.com>
Alex Boyd <alex@opengroove.org>
Alex Lopatin <alex@alexlopatin.com>
Alex Mykyta <dancingwithcows@gmail.com>
Alex Pien <alexpien@gmail.com>
Alex Smith <iqwz@ya.ru>
Alex Zelenskiy <azelenskiy@fb.com>
Alexander Shtuchkin <ashtuchkin@gmail.com>
Alexander Solovyov <alexander@solovyov.net>
Alexander Tseung <alextsg@gmail.com>
Alexandre Gaudencio <shahor@shahor.fr>
Alexey Raspopov <avenger7x13@gmail.com>
Alexey Shamrin <shamrin@gmail.com>
Andre Z Sanchez <andrezacsanchez@gmail.com>
Andreas Savvides <asavvides@twitter.com>
Andreas Svensson <andreas@syranide.com>
Andres Kalle <mjomble@gmail.com>
Andres Suarez <zertosh@gmail.com>
Andrew Cobby <cobbweb@users.noreply.github.com>
Andrew Davey <andrew@equin.co.uk>
Andrew Rasmussen <andras@fb.com>
Andrew Sokolov <asokolov@atlassian.com>
Andrew Zich <azich@fb.com>
Andrey Popp <8mayday@gmail.com>
Anthony van der Hoorn <anthony.vanderhoorn@gmail.com>
Antonio Ruberto <anto.ruberto@gmail.com>
Antti Ahti <antti.ahti@gmail.com>
Anuj Tomar <ankuto@gmail.com>
AoDev <AoDev@users.noreply.github.com>
Areeb Malik <areeb.malik91@gmail.com>
Aria Buckles <aria@khanacademy.org>
Aria Stewart <aredridel@dinhe.net>
Arian Faurtosh <arian@icloud.com>
Artem Nezvigin <artem@artnez.com>
Austin Wright <aaa@bzfx.net>
Ayman Osman <aymano.osman@gmail.com>
Baraa Hamodi <bhamodi@uwaterloo.ca>
Bartosz Kaszubowski <gosimek@gmail.com>
Basarat Ali Syed <basaratali@gmail.com>
Battaile Fauber <battaile@gmail.com>
Beau Smith <beau@beausmith.com>
Ben Alpert <ben@benalpert.com>
Ben Anderson <banderson@constantcontact.com>
Ben Foxall <benfoxall@gmail.com>
Ben Jaffe <jaffe.ben@gmail.com>
Ben Moss <ben@mossity.com>
Ben Newman <bn@cs.stanford.edu>
Ben Ripkens <bripkens.dev@gmail.com>
Benjamin Keen <ben.keen@gmail.com>
Benjamin Leiken <benleiken@gmail.com>
Benjamin Woodruff <github@benjam.info>
Bill Fisher <fisherwebdev@gmail.com>
Blaine Hatab <jbhatab@gmail.com>
Blaine Kasten <blainekasten@gmail.com>
Bob Eagan <bob@synapsestudios.com>
Bob Ralian <bob.ralian@gmail.com>
Bob Renwick <bob.renwick@gmail.com>
Bojan Mihelac <bmihelac@mihelac.org>
Bradley Spaulding <brad.spaulding@gmail.com>
Brandon Bloom <brandon@brandonbloom.name>
Brandon Tilley <brandon@brandontilley.com>
Brian Cooke <bri@bricooke.com>
Brian Holt <btholt@gmail.com>
Brian Hsu <brianhsu@Brians-MacBook-Pro.local>
Brian Kim <briankimpossible@gmail.com>
Brian Kung <brian@callmekung.com>
Brian Reavis <brian@thirdroute.com>
Brian Rue <brian@rollbar.com>
Bruno Škvorc <bruno@skvorc.me>
Cam Song <neosoyn@gmail.com>
Cam Spiers <camspiers@gmail.com>
Carter Chung <carterchung@users.noreply.github.com>
Cassus Adam Banko <banko.adam@gmail.com>
Cat Chen <catchen@fb.com>
Cedric Sohrauer <cedric.sohrauer@infopark.de>
Charles Marsh <charlie@khanacademy.org>
Chase Adams <realchaseadams@gmail.com>
Cheng Lou <chenglou92@gmail.com>
Chitharanjan Das <das.chitharanjan@gmail.com>
Chris Grovers <chrisgrovers@users.noreply.github.com>
Chris Ha <chriskevinha@gmail.com>
Chris Rebert <github@rebertia.com>
Chris Sciolla <csciolla1@gmail.com>
Christian Alfoni <christianalfoni@gmail.com>
Christian Oliff <christianoliff@yahoo.com>
Christian Roman <chroman16@gmail.com>
Christoph Pojer <christoph.pojer@gmail.com>
Christopher Monsanto <chris@monsan.to>
Clay Allsopp <clay.allsopp@gmail.com>
Connor McSheffrey <c@conr.me>
Cory House <housecor@gmail.com>
Cotton Hou <himcotton@gmail.com>
Cristovao Verstraeten <cristovao@apleasantview.com>
Damien Pellier <dpellier@leadformance.com>
Dan Abramov <dan.abramov@gmail.com>
Dan Fox <iamdanfox@gmail.com>
Dan Schafer <dschafer@fb.com>
Daniel Carlsson <daniel.carlsson.1987@gmail.com>
Daniel Cousens <dcousens@users.noreply.github.com>
Daniel Friesen <daniel@nadir-seen-fire.com>
Daniel Gasienica <daniel@gasienica.ch>
Daniel Hejl <hejldaniel@gmail.com>
Daniel Lo Nigro <daniel@dan.cx>
Daniel Mané <danmane@gmail.com>
Daniel Miladinov <dmiladinov@wingspan.com>
Daniel Rodgers-Pryor <djrodgerspryor@gmail.com>
Daniel Schonfeld <daniel@schonfeld.org>
Danny Ben-David <dannybd@fb.com>
Darcy <smadad@me.com>
Daryl Lau <daryl@weak.io>
Darío Javier Cravero <dario@uxtemple.com>
David Baker <djbaker2@gmail.com>
David Goldberg <gberg1@users.noreply.github.com>
David Greenspan <dgreenspan@alum.mit.edu>
David Hellsing <david@aino.se>
David Hu <davidhu91@gmail.com>
David Mininger <dmininger@gmail.com>
David Neubauer <davidneub@gmail.com>
David Percy <davetp425@gmail.com>
Denis Sokolov <denis@sokolov.cc>
Dennis Johnson <djohnson@rallydev.com>
Devon Blandin <dblandin@gmail.com>
Devon Harvey <devonharvey@gmail.com>
Dmitrii Abramov <dmitrii@rheia.us>
Dmitry Blues <dmitri.blyus@gmail.com>
Dmitry Mazuro <dmitry.mazuro@icloud.com>
Domenico Matteo <matteo.domenico@gmail.com>
Don Abrams <donabrams@gmail.com>
Dustan Kasten <dustan.kasten@gmail.com>
Dustin Getz <dgetz@wingspan.com>
Dylan Harrington <dylanharrington@gmail.com>
Eduardo Garcia <emumaniacx@gmail.com>
Edvin Erikson <edvin@rocketblast.com>
Elaine Fang <elainefang@Elaines-MacBook-Pro.local>
Enguerran <engcolson@gmail.com>
Eric Clemmons <eric@smarterspam.com>
Eric Eastwood <contact@ericeastwood.com>
Eric Florenzano <floguy@gmail.com>
Eric O'Connell <eric.oconnell@idealist.org>
Eric Schoffstall <contra@wearefractal.com>
Erik Harper <eharper@mixpo.com>
Espen Hovlandsdal <rexxars@gmail.com>
Evan Coonrod <evan@paloalto.com>
Fabio M. Costa <fabiomcosta@gmail.com>
Federico Rampazzo <frampone@gmail.com>
Felipe Oliveira Carvalho <felipekde@gmail.com>
Felix Gnass <fgnass@gmail.com>
Felix Kling <felix.kling@gmx.net>
Fernando Correia <fernando@servicero.com>
Frankie Bagnardi <f.bagnardi@gmail.com>
François-Xavier Bois <fxbois@gmail.com>
Fred Zhao <fredz@fb.com>
G Scott Olson <gscottolson@gmail.com>
G. Kay Lee <balancetraveller+github@gmail.com>
Gabe Levi <gabelevi@gmail.com>
Gareth Nicholson <gareth.nic@gmail.com>
Garren Smith <garren.smith@gmail.com>
Geert Pasteels <geert.pasteels@gmail.com>
Geert-Jan Brits <gbrits@gmail.com>
George A Sisco III <george.sisco@gmail.com>
Georgii Dolzhykov <thorn.mailbox@gmail.com>
Gilbert <gilbertbgarza@gmail.com>
Glen Mailer <glenjamin@gmail.com>
Grant Timmerman <granttimmerman@gmail.com>
Greg Hurrell <glh@fb.com>
Greg Perkins <gregrperkins@fb.com>
Greg Roodt <groodt@gmail.com>
Gregory <g.marcilhacy@gmail.com>
Guangqiang Dong <gqdong@fb.com>
Guido Bouman <m@guido.vc>
Harry Hull <harry.hull1@gmail.com>
Harry Marr <harry.marr@gmail.com>
Harry Moreno <morenoh149@gmail.com>
Harshad Sabne <harshadsabne@users.noreply.github.com>
Hekar Khani <hekark@gmail.com>
Hendrik Swanepoel <hendrik.swanepoel@gmail.com>
Henrik Nyh <henrik@nyh.se>
Henry Zhu <hi@henryzoo.com>
Hou Chia <kchia87@gmail.com>
Hugo Jobling <me@thisishugo.com>
Héliton Nordt <hnordt@hnordt.com>
Ian Obermiller <ian@obermillers.com>
Ignacio Carbajo <icarbajop@gmail.com>
Igor Scekic <igorscekic2@gmail.com>
Ilya Shuklin <ilya.shuklin@gmail.com>
Ilyá Belsky <gelias.gbelsky@gmail.com>
Ian Obermiller <iano@fb.com>
Ingvar Stepanyan <me@rreverser.com>
Irae Carvalho <irae@irae.pro.br>
Isaac Salier-Hellendag <isaac@fb.com>
Ivan Kozik <ivan@ludios.org>
Ivan Krechetov <ikr@ikr.su>
Ivan Vergiliev <ivan.vergiliev@gmail.com>
J. Andrew Brassington <jabbrass@zoho.com>
J. Renée Beach <splendidnoise@gmail.com>
JD Isaacks <jd@jisaacks.com>
JW <JW00000@gmail.com>
Jack Zhang <jzhang31191@gmail.com>
Jacob Gable <jacob.gable@gmail.com>
Jacob Greenleaf <jake@imgur.com>
Jae Hun Ro <jhr24@duke.edu>
Jaime Mingo <j.mingov@3boll.com>
Jakub Malinowski <jakubmal@gmail.com>
James <james@mystrata.com>
James Brantly <james@jbrantly.com>
James Burnett <jtburnett@tribune.com>
James Ide <ide@fb.com>
James Long <longster@gmail.com>
James Pearce <jpearce@fb.com>
James Seppi <james.seppi@gmail.com>
James South <james_south@hotmail.com>
Jamie Wong <jamie.lf.wong@gmail.com>
Jamis Charles <jacharles@paypal.com>
Jamison Dance <jergason@gmail.com>
Jan Hancic <jan.hancic@gmail.com>
Jan Kassens <jan@kassens.net>
Jan Raasch <jan@janraasch.com>
Jared Forsyth <jared@jaredforsyth.com>
Jason <usaman2010us@gmail.com>
Jason Bonta <jbonta@gmail.com>
Jason Ly <jason.ly@gmail.com>
Jason Miller <aidenn0@geocities.com>
Jason Quense <monastic.panic@gmail.com>
Jason Trill <jason@jasontrill.com>
Jason Webster <jason@metalabdesign.com>
Jay Jaeho Lee <jay@spoqa.com>
Jean Lauliac <lauliacj@gmail.com>
Jed Watson <jed.watson@me.com>
Jeff Barczewski <jeff.barczewski@gmail.com>
Jeff Carpenter <gcarpenterv@gmail.com>
Jeff Chan <jefftchan@gmail.com>
Jeff Hicken <jhicken@gmail.com>
Jeff Kolesky <github@kolesky.com>
Jeff Morrison <jeff@anafx.com>
Jeff Welch <whatthejeff@gmail.com>
Jeffrey Lin <lin.jeffrey@gmail.com>
Jesse Skinner <jesse@thefutureoftheweb.com>
Jignesh Kakadiya <jigneshhk1992@gmail.com>
Jim OBrien <jimobrien930@gmail.com>
Jim Sproch <jsproch@fb.com>
Jimmy Jea <jimjea@gmail.com>
Jing Chen <jingc@fb.com>
Jinwoo Oh <arkist@gmail.com>
Jiyeon Seo <zzzeons@gmail.com>
Joe Stein <joeaarons@gmail.com>
Joel Auterson <joel.auterson@googlemail.com>
Johannes Baiter <johannes.baiter@gmail.com>
Johannes Emerich <johannes@emerich.de>
Johannes Lumpe <johannes@johanneslumpe.de>
John Heroy <johnheroy@users.noreply.github.com>
John Watson <jwatson@fb.com>
Jon Beebe <jon.beebe@daveramsey.com>
Jon Chester <jonchester@fb.com>
Jon Hester <jon.d.hester@gmail.com>
Jon Madison <jon@tfftech.com>
Jon Scott Clark <jonscottclark@gmail.com>
Jon Tewksbury <jontewks@gmail.com>
Jonas Enlund <jonas.enlund@gmail.com>
Jonas Gebhardt <jonas@instagram.com>
Jonathan Hsu <jhiswin@gmail.com>
Jordan Harband <ljharb@gmail.com>
Jordan Walke <jordojw@gmail.com>
Jorrit Schippers <jorrit@ncode.nl>
Joseph Nudell <joenudell@gmail.com>
Joseph Savona <joesavona@fb.com>
Josh Bassett <josh.bassett@gmail.com>
Josh Duck <josh@fb.com>
Josh Yudaken <yud@instagram.com>
Joshua Go <joshuago@gmail.com>
Joshua Goldberg <jsgoldberg90@gmail.com>
Joshua Ma <me@joshma.com>
João Valente <filipevalente@gmail.com>
Juan Serrano <germ13@users.noreply.github.com>
Julen Ruiz Aizpuru <julenx@gmail.com>
Julian Viereck <julian.viereck@gmail.com>
Julien Bordellier <git@julienbordellier.com>
Jun Wu <quark@lihdd.net>
Juraj Dudak <jdudak@fb.com>
Justin Jaffray <justinjaffray@khanacademy.org>
Justin Robison <jrobison151@gmail.com>
Justin Woo <moomoowoo@gmail.com>
Kamron Batman <kamronbatman@users.noreply.github.com>
Karl Mikkelsen <karl@kingkarl.com>
Karpich Dmitry <karpich@gollard.ru>
Keito Uchiyama <projects@keito.me>
Kevin Coughlin <kevintcoughlin@gmail.com>
Kevin Huang <huang.kev@gmail.com>
Kevin Old <kevin@kevinold.com>
KimCoding <jeokrang@hanmail.net>
Kirk Steven Hansen <hanski07@kirk-hansens-macbook.local>
Kit Randel <kit@nocturne.net.nz>
Kohei TAKATA <kt.koheitakata@gmail.com>
Koo Youngmin <youngmin@youngminz.kr>
Kunal Mehta <k.mehta@berkeley.edu>
Kurt Ruppel <me@kurtruppel.com>
Kyle Kelley <rgbkrk@gmail.com>
Kyle Mathews <mathews.kyle@gmail.com>
Laurence Rowe <l@lrowe.co.uk>
Laurent Etiemble <laurent.etiemble@monobjc.net>
Lee Byron <lee@leebyron.com>
Lee Jaeyoung <jaeyoung@monodiary.net>
Lei <tendant@gmail.com>
Leon Fedotov <LeonFedotov@users.noreply.github.com>
Leon Yip <lyip1992@users.noreply.github.com>
Leonardo YongUk Kim <dalinaum@gmail.com>
Levi Buzolic <levibuzolic@gmail.com>
Levi McCallum <levi@levimccallum.com>
Lily <qvang.j@gmail.com>
Logan Allen <loganfynne@gmail.com>
Luigy Leon <luichi.19@gmail.com>
Luke Horvat <lukehorvat@gmail.com>
MIKAMI Yoshiyuki <yoshuki@saikyoline.jp>
Marcin K. <katzoo@github.mail>
Marcin Kwiatkowski <marcin.kwiatkowski@hotmail.com>
Marcin Szczepanski <marcins@gmail.com>
Mariano Desanze <protronm@gmail.com>
Marjan <marjan.georgiev@gmail.com>
Mark Anderson <undernewmanagement@users.noreply.github.com>
Mark Funk <mark@boomtownroi.com>
Mark Hintz <markohintz@gmail.com>
Mark IJbema <markijbema@gmail.com>
Mark Richardson <echo@fb.com>
Marlon Landaverde <milanlandaverde@gmail.com>
Marshall Roch <mroch@fb.com>
Martin Andert <mandert@gmail.com>
Martin Jul <martin@mjul.com>
Martin Konicek <mkonicek@fb.com>
Martin Mihaylov <martomi@users.noreply.github.com>
Masaki KOBAYASHI <makky.4d6b.3f5@gmail.com>
Mathieu M-Gosselin <mathieumg@gmail.com>
Matias Singers <mail@matiassingers.com>
Matsunoki <himkt@klis.tsukuba.ac.jp>
Matt Brookes <matt@brookes.net>
Matt Dunn-Rankin <mdunnrankin@gmail.com>
Matt Harrison <mt.harrison86@gmail.com>
Matt Huggins <matt.huggins@gmail.com>
Matt Zabriskie <mzabriskie@gmail.com>
Matthew Dapena-Tretter <m@tthewwithanm.com>
Matthew Johnston <matthewjohnston4@outlook.com>
Matthew King <mking@users.noreply.github.com>
Matthew Miner <matthew@matthewminer.com>
Matthias Le Brun <mlbli@me.com>
Matti Nelimarkka <matti.nelimarkka@hiit.fi>
Max F. Albrecht <1@178.is>
Max Heiber <max.heiber@gmail.com>
Maxi Ferreira <charca@gmail.com>
Maxim Abramchuk <MaximAbramchuck@gmail.com>
Merrick Christensen <merrick.christensen@gmail.com>
Mert Kahyaoğlu <mertkahyaoglu93@gmail.com>
Michael Chan <mijoch@gmail.com>
Michael Randers-Pehrson <michael.rp@gmail.com>
Michael Ridgway <mridgway@yahoo-inc.com>
Michael Warner <MichaelJWarner@hotmail.com>
Michal Srb <xixixao@seznam.cz>
Michelle Todd <himichelletodd@gmail.com>
Mihai Parparita <mihai.parparita@gmail.com>
Mike D Pilsbury <mike.pilsbury@gmail.com>
Mike Groseclose <mike.groseclose@gmail.com>
Mikolaj Dadela <mikolaj.dadela@hgv-online.de>
Minwe LUO <minwe@yunshipei.com>
Miorel Palii <miorel@fb.com>
Morhaus <alexandre.kirszenberg@gmail.com>
Mouad Debbar <mdebbar@fb.com>
Murad <rogozhnikoff@users.noreply.github.com>
Murray M. Moss <murray@mmoss.name>
Nadeesha Cabral <nadeesha.cabral@gmail.com>
Naman Goel <naman34@gmail.com>
Nate Hunzaker <nate.hunzaker@gmail.com>
Nathan White <nw@nwhite.net>
Neri Marschik <marschik_neri@cyberagent.co.jp>
Nicholas Bergson-Shilcock <me@nicholasbs.net>
Nick Fitzgerald <fitzgen@gmail.com>
Nick Gavalas <njg57@cornell.edu>
Nick Merwin <nick@lemurheavy.com>
Nick Raienko <enaqxx@gmail.com>
Nick Thompson <ncthom91@gmail.com>
Nick Williams <WickyNilliams@users.noreply.github.com>
Niklas Boström <nbostrom@gmail.com>
Ning Xia <ning-github@users.noreply.github.com>
Niole Nelson <niolenelson@gmail.com>
Oiva Eskola <oiva.eskola@gmail.com>
Oleg <o.yanchinskiy@gmail.com>
Oleksii Markhovskyi <olexiy.markhovsky@gmail.com>
Oliver Zeigermann <oliver.zeigermann@gmail.com>
Olivier Tassinari <Olivier.tassinari@gmail.com>
Owen Coutts <owenc@fb.com>
Pablo Lacerda de Miranda <pablolm@yahoo-inc.com>
Paolo Moretti <moretti@users.noreply.github.com>
Pascal Hartig <passy@twitter.com>
Patrick Laughlin <patrick@laughl.info>
Patrick Stapleton <github@gdi2290.com>
Paul Harper <benekastah@gmail.com>
Paul OShannessy <paul@oshannessy.com>
Paul Seiffert <paul.seiffert@gmail.com>
Paul Shen <paul@mnml0.com>
Pedro Nauck <pedronauck@gmail.com>
Pete Hunt <floydophone@gmail.com>
Peter Blazejewicz <peter.blazejewicz@gmail.com>
Peter Cottle <pcottle@fb.com>
Peter Jaros <peter.a.jaros@gmail.com>
Petri Lehtinen <petri@digip.org>
Petri Lievonen <plievone@cc.hut.fi>
Pieter Vanderwerff <me@pieter.io>
Pouja Nikray <poujanik@gmail.com>
Prathamesh Sonpatki <csonpatki@gmail.com>
Preston Parry <ClimbsRocks@users.noreply.github.com>
Rafael <rafael.garcia@clever.com>
Rafal Dittwald <rafal.dittwald@gmail.com>
Rajiv Tirumalareddy <rajivtreddy@gmail.com>
Randall Randall <randall@randallsquared.com>
Ray <ray@tomo.im>
Raymond Ha <raymond@shraymonks.com>
Reed Loden <reed@reedloden.com>
Richard D. Worth <rdworth@gmail.com>
Richard Feldman <richard.t.feldman@gmail.com>
Richard Kho <hello@richardkho.com>
Richard Littauer <richard.littauer@gmail.com>
Richard Livesey <Livesey7@hotmail.co.uk>
Richard Wood <rwoodnz@gmail.com>
Rick Beerendonk <rick@beerendonk.com>
Riley Tomasek <riley.tomasek@gmail.com>
Rob Arnold <robarnold@cs.cmu.edu>
Robert Knight <robert.knight@mendeley.com>
Robert Sedovsek <robert.sedovsek@gmail.com>
Robin Berjon <robin@berjon.com>
Roman Vanesyan <roman.vanesyan@gmail.com>
Russ <russwirtz@gmail.com>
Ryan Seddon <seddon.ryan@gmail.com>
Sahat Yalkabov <sakhat@gmail.com>
Saif Hakim <saif@benchling.com>
Sam Saccone <samccone@gmail.com>
Sam Selikoff <sam.selikoff@gmail.com>
Samy Al Zahrani <samy@sadeem.net>
Sander Spies <sandermail@gmail.com>
Scott Burch <scott@bulldoginfo.com>
Scott Feeney <scott@oceanbase.org>
Sean Kinsey <oyvind@fb.com>
Sebastian Markbåge <sebastian@calyptus.eu>
Seoh Char <devthewild@gmail.com>
Serg <undrdog@yandex.ru>
Sergey Generalov <sergey@genbit.ru>
Sergey Rubanov <chi187@gmail.com>
Seyi Adebajo <hello@seyinanigans.com>
Shane O'Sullivan <shaneosullivan1@gmail.com>
Shaun Trennery <shaun.trennery@gmail.com>
ShihChi Huang <hhuang@netflix.com>
Shim Won <marocchino@gmail.com>
Shota Kubota <kubosho@users.noreply.github.com>
Sheraz <undernewmanagement@users.noreply.github.com>
Shripad K <assortmentofsorts@gmail.com>
Sibi <psibi2000@gmail.com>
Simon Højberg <r.hackr@gmail.com>
Simon Welsh <simon@simon.geek.nz>
Sophia Westwood <sophia@quip.com>
Spencer Handley <spencerhandley@gmail.com>
Stefan Dombrowski <sdo451@gmail.com>
Stephen Murphy <smurphy3@apple.com>
Sterling Cobb <sterlingcobb@gmail.com>
Steve Baker <_steve_@outlook.com>
Steven Luscher <react@steveluscher.com>
Stoyan Stefanov <ssttoo@ymail.com>
Sundeep Malladi <sundeep.malladi@gmail.com>
Sunny Juneja <me@sunnyjuneja.com>
Sven Helmberger <fforw@gmx.de>
Sverre Johansen <sverre.johansen@gmail.com>
Sébastien Lorber <lorber.sebastien@gmail.com>
Sławomir Laskowski <laskowski.box@gmail.com>
Taeho Kim <dittos@gmail.com>
Tay Yang Shun <tay.yang.shun@gmail.com>
Ted Kim <ted@vcnc.co.kr>
Teodor Szente <teodor98sz@gmail.com>
Thomas Aylott <oblivious@subtlegradient.com>
Thomas Boyt <thomas.boyt@venmo.com>
Thomas Reggi <socialtr@gmail.com>
Thomas Röggla <t.roggla@cwi.nl>
Thomas Shaddox <thomas@heyzap.com>
Thomas Shafer <thomasjshafer@gmail.com>
ThomasCrvsr <crevoisier.thomas@gmail.com>
Tienchai Wirojsaksaree <tienchai@fb.com>
Tim Routowicz <troutowicz@gmail.com>
Tim Schaub <tschaub@users.noreply.github.com>
Timothy Yung <yungsters@gmail.com>
Tobias Reiss <tag+github@basecode.de>
Tom Haggie <thaggie@gmail.com>
Tom Hauburger <thauburger@gmail.com>
Tom MacWright <tom@macwright.org>
Tom Occhino <tomocchino@gmail.com>
Tomasz Kołodziejski <tkolodziejski@gmail.com>
Tony Spiro <tspiro@tonyspiro.com>
Toru Kobayashi <koba0004@gmail.com>
Trinh Hoang Nhu <trinhhoangnhu@gmail.com>
Tsung Hung <thung@me.com>
Tyler Brock <tyler.brock@gmail.com>
Ustin Zarubin <ustin.zarubin@campusbellhops.com>
Vadim Chernysh <chernysh.vadim@gmail.com>
Varun Rau <varunrau@gmail.com>
Vasiliy Loginevskiy <Yeti.or@gmail.com>
Victor Alvarez <v.alvarez312@gmail.com>
Victor Koenders <victor.koenders@gmail.com>
Ville Immonen <ville.immonen@iki.fi>
Vincent Riemer <vincentriemer@gmail.com>
Vincent Siao <vincent@asana.com>
Vipul A M <vipulnsward@gmail.com>
Vitaly Kramskikh <vkramskikh@gmail.com>
Vjeux <vjeuxx@gmail.com>
Volkan Unsal <spocksplanet@gmail.com>
Wayne Larsen <wayne@larsen.st>
WickyNilliams <WickyNilliams@MBA>
Wincent Colaiuta <win@wincent.com>
Wout Mertens <Wout.Mertens@gmail.com>
Xavier Morel <xmo-odoo@users.noreply.github.com>
XuefengWu <benewu@gmail.com>
Yakov Dalinchuk <murashki@users.noreply.github.com>
Yasar icli <hello@yasaricli.com>
YouBao Nong <noyobo@gmail.com>
Yuichi Hagio <yhagio87@gmail.com>
Yuriy Dybskiy <yuriy@dybskiy.com>
Yuval Dekel <thedekel@fb.com>
Zach Bruggeman <mail@bruggie.com>
Zacharias <zachasme@users.noreply.github.com>
arush <arush@ilovebrands.net>
brafdlog <brafdlog@gmail.com>
chen <kikyous@163.com>
clariroid <clarinette.uranus@gmail.com>
claudiopro <claudio.procida@gmail.com>
cutbko <kutsenko.eugene@hotmail.com>
davidxi <davidgraycn@gmail.com>
dongmeng.ldm <dongmeng.ldm@alibaba-inc.com>
iamchenxin <iamchenxin@gmail.com>
iamdoron <doronpagot@gmail.com>
imagentleman <imagentlemail@gmail.com>
laiso <laiso@lai.so>
li.li <li.li@ele.me>
sugarshin <shinsugar@gmail.com>
wali-s <ahmad3y2k@hotmail.com>
yiminghe <yiminghe@gmail.com>
youmoo <youmoolee@gmail.com>
zhangjg <jinguozhang@qq.com>
Árni Hermann Reynisson <arnihr@gmail.com>
凌恒 <jiakun.dujk@alibaba-inc.com>
张敏 <cookfront@gmail.com>
jon madison <jon@tfftech.com>

View File

@@ -1,302 +1,3 @@
## 0.14.8 (March 29, 2016)
### React
- Fixed memory leak when rendering on the server
## 0.14.7 (January 28, 2016)
### React
- Fixed bug with `<option>` tags when using `dangerouslySetInnerHTML`
- Fixed memory leak in synthetic event system
### React TestUtils Add-on
- Fixed bug with calling `setState` in `componentWillMount` when using shallow rendering
## 0.14.6 (January 6, 2016)
### React
- Updated `fbjs` dependency to pick up change affecting handling of undefined document.
## 0.14.5 (December 29, 2015)
### React
- More minor internal changes for better compatibility with React Native
## 0.14.4 (December 29, 2015)
### React
- Minor internal changes for better compatibility with React Native
### React DOM
- The `autoCapitalize` and `autoCorrect` props are now set as attributes in the DOM instead of properties to improve cross-browser compatibility
- Fixed bug with controlled `<select>` elements not handling updates properly
### React Perf Add-on
- Some DOM operation names have been updated for clarity in the output of `.printDOM()`
## 0.14.3 (November 18, 2015)
### React DOM
- Added support for `nonce` attribute for `<script>` and `<style>` elements
- Added support for `reversed` attribute for `<ol>` elements
### React TestUtils Add-on
- Fixed bug with shallow rendering and function refs
### React CSSTransitionGroup Add-on
- Fixed bug resulting in timeouts firing incorrectly when mounting and unmounting rapidly
### React on Bower
- Added `react-dom-server.js` to expose `renderToString` and `renderToStaticMarkup` for usage in the browser
## 0.14.2 (November 2, 2015)
### React DOM
- Fixed bug with development build preventing events from firing in some versions of Internet Explorer & Edge
- Fixed bug with development build when using es5-sham in older versions of Internet Explorer
- Added support for `integrity` attribute
- Fixed bug resulting in `children` prop being coerced to a string for custom elements, which was not the desired behavior
- Moved `react` from `dependencies` to `peerDependencies` to match expectations and align with `react-addons-*` packages
## 0.14.1 (October 28, 2015)
### React DOM
- Fixed bug where events wouldn't fire in old browsers when using React in development mode
- Fixed bug preventing use of `dangerouslySetInnerHTML` with Closure Compiler Advanced mode
- Added support for `srcLang`, `default`, and `kind` attributes for `<track>` elements
- Added support for `color` attribute
- Ensured legacy `.props` access on DOM nodes is updated on re-renders
### React TestUtils Add-on
- Fixed `scryRenderedDOMComponentsWithClass` so it works with SVG
### React CSSTransitionGroup Add-on
- Fix bug preventing `0` to be used as a timeout value
### React on Bower
- Added `react-dom.js` to `main` to improve compatibility with tooling
## 0.14.0 (October 7, 2015)
### Major changes
- Split the main `react` package into two: `react` and `react-dom`. This paves the way to writing components that can be shared between the web version of React and React Native. This means you will need to include both files and some functions have been moved from `React` to `ReactDOM`.
- Addons have been moved to seperate packages (`react-addons-clone-with-props`, `react-addons-create-fragment`, `react-addons-css-transition-group`, `react-addons-linked-state-mixin`, `react-addons-perf`, `react-addons-pure-render-mixin`, `react-addons-shallow-compare`, `react-addons-test-utils`, `react-addons-transition-group`, `react-addons-update`, `ReactDOM.unstable_batchedUpdates`).
- Stateless functional components - React components were previously created using React.createClass or using ES6 classes. This release adds a [new syntax](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions) where a user defines a single [stateless render function](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions) (with one parameter: `props`) which returns a JSX element, and this function may be used as a component.
- Refs to DOM components as the DOM node itself. Previously the only useful thing you can do with a DOM component is call `getDOMNode()` to get the underlying DOM node. Starting with this release, a ref to a DOM component _is_ the actual DOM node. **Note that refs to custom (user-defined) components work exactly as before; only the built-in DOM components are affected by this change.**
### Breaking changes
- `React.initializeTouchEvents` is no longer necessary and has been removed completely. Touch events now work automatically.
- Add-Ons: Due to the DOM node refs change mentioned above, `TestUtils.findAllInRenderedTree` and related helpers are no longer able to take a DOM component, only a custom component.
- The `props` object is now frozen, so mutating props after creating a component element is no longer supported. In most cases, [`React.cloneElement`](/react/docs/top-level-api.html#react.cloneelement) should be used instead. This change makes your components easier to reason about and enables the compiler optimizations mentioned above.
- Plain objects are no longer supported as React children; arrays should be used instead. You can use the [`createFragment`](/react/docs/create-fragment.html) helper to migrate, which now returns an array.
- Add-Ons: `classSet` has been removed. Use [classnames](https://github.com/JedWatson/classnames) instead.
- Web components (custom elements) now use native property names. Eg: `class` instead of `className`.
### Deprecations
- `this.getDOMNode()` is now deprecated and `ReactDOM.findDOMNode(this)` can be used instead. Note that in the common case, `findDOMNode` is now unnecessary since a ref to the DOM component is now the actual DOM node.
- `setProps` and `replaceProps` are now deprecated. Instead, call ReactDOM.render again at the top level with the new props.
- ES6 component classes must now extend `React.Component` in order to enable stateless function components. The [ES3 module pattern](/react/blog/2015/01/27/react-v0.13.0-beta-1.html#other-languages) will continue to work.
- Reusing and mutating a `style` object between renders has been deprecated. This mirrors our change to freeze the `props` object.
- Add-Ons: `cloneWithProps` is now deprecated. Use [`React.cloneElement`](/react/docs/top-level-api.html#react.cloneelement) instead (unlike `cloneWithProps`, `cloneElement` does not merge `className` or `style` automatically; you can merge them manually if needed).
- Add-Ons: To improve reliability, `CSSTransitionGroup` will no longer listen to transition events. Instead, you should specify transition durations manually using props such as `transitionEnterTimeout={500}`.
### Notable enhancements
- Added `React.Children.toArray` which takes a nested children object and returns a flat array with keys assigned to each child. This helper makes it easier to manipulate collections of children in your `render` methods, especially if you want to reorder or slice `this.props.children` before passing it down. In addition, `React.Children.map` now returns plain arrays too.
- React uses `console.error` instead of `console.warn` for warnings so that browsers show a full stack trace in the console. (Our warnings appear when you use patterns that will break in future releases and for code that is likely to behave unexpectedly, so we do consider our warnings to be “must-fix” errors.)
- Previously, including untrusted objects as React children [could result in an XSS security vulnerability](http://danlec.com/blog/xss-via-a-spoofed-react-element). This problem should be avoided by properly validating input at the application layer and by never passing untrusted objects around your application code. As an additional layer of protection, [React now tags elements](https://github.com/facebook/react/pull/4832) with a specific [ES2015 (ES6) `Symbol`](http://www.2ality.com/2014/12/es6-symbols.html) in browsers that support it, in order to ensure that React never considers untrusted JSON to be a valid element. If this extra security protection is important to you, you should add a `Symbol` polyfill for older browsers, such as the one included by [Babels polyfill](http://babeljs.io/docs/usage/polyfill/).
- When possible, React DOM now generates XHTML-compatible markup.
- React DOM now supports these standard HTML attributes: `capture`, `challenge`, `inputMode`, `is`, `keyParams`, `keyType`, `minLength`, `summary`, `wrap`. It also now supports these non-standard attributes: `autoSave`, `results`, `security`.
- React DOM now supports these SVG attributes, which render into namespaced attributes: `xlinkActuate`, `xlinkArcrole`, `xlinkHref`, `xlinkRole`, `xlinkShow`, `xlinkTitle`, `xlinkType`, `xmlBase`, `xmlLang`, `xmlSpace`.
- The `image` SVG tag is now supported by React DOM.
- In React DOM, arbitrary attributes are supported on custom elements (those with a hyphen in the tag name or an `is="..."` attribute).
- React DOM now supports these media events on `audio` and `video` tags: `onAbort`, `onCanPlay`, `onCanPlayThrough`, `onDurationChange`, `onEmptied`, `onEncrypted`, `onEnded`, `onError`, `onLoadedData`, `onLoadedMetadata`, `onLoadStart`, `onPause`, `onPlay`, `onPlaying`, `onProgress`, `onRateChange`, `onSeeked`, `onSeeking`, `onStalled`, `onSuspend`, `onTimeUpdate`, `onVolumeChange`, `onWaiting`.
- Many small performance improvements have been made.
- Many warnings show more context than before.
- Add-Ons: A [`shallowCompare`](https://github.com/facebook/react/pull/3355) add-on has been added as a migration path for `PureRenderMixin` in ES6 classes.
- Add-Ons: `CSSTransitionGroup` can now use [custom class names](https://github.com/facebook/react/blob/48942b85/docs/docs/10.1-animation.md#custom-classes) instead of appending `-enter-active` or similar to the transition name.
### New helpful warnings
- React DOM now warns you when nesting HTML elements invalidly, which helps you avoid surprising errors during updates.
- Passing `document.body` directly as the container to `ReactDOM.render` now gives a warning as doing so can cause problems with browser extensions that modify the DOM.
- Using multiple instances of React together is not supported, so we now warn when we detect this case to help you avoid running into the resulting problems.
### Notable bug fixes
- Click events are handled by React DOM more reliably in mobile browsers, particularly in Mobile Safari.
- SVG elements are created with the correct namespace in more cases.
- React DOM now renders `<option>` elements with multiple text children properly and renders `<select>` elements on the server with the correct option selected.
- When two separate copies of React add nodes to the same document (including when a browser extension uses React), React DOM tries harder not to throw exceptions during event handling.
- Using non-lowercase HTML tag names in React DOM (e.g., `React.createElement('DIV')`) no longer causes problems, though we continue to recommend lowercase for consistency with the JSX tag name convention (lowercase names refer to built-in components, capitalized names refer to custom components).
- React DOM understands that these CSS properties are unitless and does not append “px” to their values: `animationIterationCount`, `boxOrdinalGroup`, `flexOrder`, `tabSize`, `stopOpacity`.
- Add-Ons: When using the test utils, `Simulate.mouseEnter` and `Simulate.mouseLeave` now work.
- Add-Ons: ReactTransitionGroup now correctly handles multiple nodes being removed simultaneously.
### React Tools / Babel
#### Breaking Changes
- The `react-tools` package and `JSXTransformer.js` browser file [have been deprecated](/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html). You can continue using version `0.13.3` of both, but we no longer support them and recommend migrating to [Babel](http://babeljs.io/), which has built-in support for React and JSX.
#### New Features
- Babel 5.8.24 introduces **Inlining React elements:** The `optimisation.react.inlineElements` transform converts JSX elements to object literals like `{type: 'div', props: ...}` instead of calls to `React.createElement`. This should only be enabled in production, since it disables some development warnings/checks.
- Babel 5.8.24 introduces **Constant hoisting for React elements:** The `optimisation.react.constantElements` transform hoists element creation to the top level for subtrees that are fully static, which reduces calls to `React.createElement` and the resulting allocations. More importantly, it tells React that the subtree hasnt changed so React can completely skip it when reconciling. This should only be enabled in production, since it disables some development warnings/checks.
## 0.13.3 (May 8, 2015)
### React Core
#### 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
#### Breaking Changes
* Deprecated patterns that warned in 0.12 no longer work: most prominently, calling component classes without using JSX or React.createElement and using non-component functions with JSX or createElement
* Mutating `props` after an element is created is deprecated and will cause warnings in development mode; future versions of React will incorporate performance optimizations assuming that props aren't mutated
* Static methods (defined in `statics`) are no longer autobound to the component class
* `ref` resolution order has changed slightly such that a ref to a component is available immediately after its `componentDidMount` method is called; this change should be observable only if your component calls a parent component's callback within your `componentDidMount`, which is an anti-pattern and should be avoided regardless
* Calls to `setState` in life-cycle methods are now always batched and therefore asynchronous. Previously the first call on the first mount was synchronous.
* `setState` and `forceUpdate` on an unmounted component now warns instead of throwing. That avoids a possible race condition with Promises.
* Access to most internal properties has been completely removed, including `this._pendingState` and `this._rootNodeID`.
#### New Features
* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html) for details.
* 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`).
* `this.setState()` can now take a function as the first argument for transactional state updates, such as `this.setState((state, props) => ({count: state.count + 1}));` this means that you no longer need to use `this._pendingState`, which is now gone.
* Support for iterators and immutable-js sequences as children.
#### Deprecations
* `ComponentClass.type` is deprecated. Just use `ComponentClass` (usually as `element.type === ComponentClass`).
* Some methods that are available on `createClass`-based components are removed or deprecated from ES6 classes (`getDOMNode`, `replaceState`, `isMounted`, `setProps`, `replaceProps`).
### React with Add-Ons
#### New Features
* [`React.addons.createFragment` was added](/react/docs/create-fragment.html) for adding keys to entire sets of children.
#### Deprecations
* `React.addons.classSet` is now deprecated. This functionality can be replaced with several freely available modules. [classnames](https://www.npmjs.com/package/classnames) is one such module.
* Calls to `React.addons.cloneWithProps` can be migrated to use `React.cloneElement` instead make sure to merge `style` and `className` manually if desired.
### React Tools
#### Breaking Changes
* When transforming ES6 syntax, `class` methods are no longer enumerable by default, which requires `Object.defineProperty`; if you support browsers such as IE8, you can pass `--target es3` to mirror the old behavior
#### New Features
* `--target` option is available on the jsx command, allowing users to specify and ECMAScript version to target.
* `es5` is the default.
* `es3` restores the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg `this.static` will become `this['static']` for IE8 compatibility).
* The transform for the call spread operator has also been enabled.
### JSXTransformer
#### Breaking Changes
* The return value of `transform` now contains `sourceMap` as a JS object already, not an instance of `SourceMapGenerator`.
### JSX
#### Breaking Changes
* A change was made to how some JSX was parsed, specifically around the use of `>` or `}` when inside an element. Previously it would be treated as a string but now it will be treated as a parse error. The [`jsx_orphaned_brackets_transformer`](https://www.npmjs.com/package/jsx_orphaned_brackets_transformer) package on npm can be used to find and fix potential issues in your JSX code.
## 0.12.2 (December 18, 2014)
### React Core
@@ -491,7 +192,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`](https://facebook.github.io/react/docs/top-level-api.html#react.rendercomponenttostaticmarkup)
* Made it possible to server render without React-related markup (`data-reactid`, `data-react-checksum`). This DOM will not be mountable by React. [Read the docs for `React.renderComponentToStaticMarkup`](http://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
@@ -503,7 +204,7 @@
### Addons
* `update` function to deal with immutable data. [Read the docs](https://facebook.github.io/react/docs/update.html)
* `update` function to deal with immutable data. [Read the docs](http://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).
@@ -665,7 +366,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](https://facebook.github.io/react/docs/addons.html).
* Introduced a separate build with several "addons" which we think can help improve the React experience. We plan to deprecate this in the long-term, instead shipping each as standalone pieces. [Read more in the docs](http://facebook.github.io/react/docs/addons.html).
### JSX
@@ -698,10 +399,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...](https://facebook.github.io/react/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html)
* Support for the `key` prop, which allows for finer control over reconciliation. [Read the docs for details...](https://facebook.github.io/react/docs/multiple-components.html)
* Removed `React.autoBind`. [Read our blog post for details...](https://facebook.github.io/react/blog/2013/07/02/react-v0-4-autobind-by-default.html)
* Improvements to forms. We've written wrappers around `<input>`, `<textarea>`, `<option>`, and `<select>` in order to standardize many inconsistencies in browser implementations. This includes support for `defaultValue`, and improved implementation of the `onChange` event, and circuit completion. [Read the docs for details...](https://facebook.github.io/react/docs/forms.html)
* `prop` improvements: validation and default values. [Read our blog post for details...](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)
* 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,10 +1,6 @@
# Contributing to React
React is one of Facebook's first open source projects that is both under very active development and is also being used to ship code to everybody on [facebook.com](https://www.facebook.com). We're still working out the kinks to make contributing to this project as easy and transparent as possible, but we're not quite there yet. Hopefully this document makes the process for contributing clear and answers some questions that you may have.
## [Code of Conduct](https://code.facebook.com/codeofconduct)
Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read [the full text](https://code.facebook.com/codeofconduct) so that you can understand what actions will and will not be tolerated.
React is one of Facebook's first open source projects that is both under very active development and is also being used to ship code to everybody on facebook.com. 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
@@ -27,11 +23,11 @@ The core team will be monitoring for pull requests. When we get one, we'll run s
5. Make sure your code lints (`grunt lint`) - we've done our best to make sure these rules match our internal linting guidelines.
6. If you haven't already, complete the CLA.
### Contributor License Agreement (CLA)
### Contributor License Agreement ("CLA")
In order to accept your pull request, we need you to submit a CLA. You only need to do this once, so if you've done this for another Facebook open source project, you're good to go. If you are submitting a pull request for the first time, just let us know that you have completed the CLA and we can cross-check with your GitHub username.
[Complete your CLA here.](https://code.facebook.com/cla)
Complete your CLA here: <https://code.facebook.com/cla>
## Bugs
@@ -45,29 +41,24 @@ The best way to get your bug fixed is to provide a reduced test case. jsFiddle,
### Security Bugs
Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe disclosure of security bugs. With that in mind, please do not file public issues; go through the process outlined on that page.
Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe disclosure of security bugs. With that in mind, please do not file public issues and go through the process outlined on that page.
## How to Get in Touch
* IRC - [#reactjs on freenode](https://webchat.freenode.net/?channels=reactjs)
* Discussion forum - [discuss.reactjs.org](https://discuss.reactjs.org/)
* IRC - [#reactjs on freenode](http://webchat.freenode.net/?channels=reactjs)
* Mailing list - [reactjs on Google Groups](http://groups.google.com/group/reactjs)
## Style Guide
Our linter will catch most styling issues that may exist in your code.
You can check the status of your code styling by simply running: `grunt lint`
### Code
However, there are still some styles that the linter cannot pick up. If you are unsure about something, looking at [Airbnb's Style Guide](https://github.com/airbnb/javascript) will guide you in the right direction.
### Code Conventions
* Use semicolons `;`
* Commas last `,`
* Use semicolons;
* Commas last,
* 2 spaces for indentation (no tabs)
* Prefer `'` over `"`
* `'use strict';`
* `"use strict";`
* 80 character line length
* Write "attractive" code
* "Attractive"
* Do not use the optional parameters of `setTimeout` and `setInterval`
### Documentation

View File

@@ -1,138 +1,237 @@
'use strict';
var assign = require('object-assign');
var path = require('path');
var exec = require('child_process').exec;
var jsxTask = require('./grunt/tasks/jsx');
var browserifyTask = require('./grunt/tasks/browserify');
var populistTask = require('./grunt/tasks/populist');
var webdriverPhantomJSTask = require('./grunt/tasks/webdriver-phantomjs');
var webdriverJasmineTasks = require('./grunt/tasks/webdriver-jasmine');
var sauceTunnelTask = require('./grunt/tasks/sauce-tunnel');
var npmTask = require('./grunt/tasks/npm');
var releaseTasks = require('./grunt/tasks/release');
var npmReactTasks = require('./grunt/tasks/npm-react');
var npmReactToolsTasks = require('./grunt/tasks/npm-react-tools');
var versionCheckTask = require('./grunt/tasks/version-check');
var gemReactSourceTasks = require('./grunt/tasks/gem-react-source');
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),
connect: require('./grunt/config/server')(grunt),
"webdriver-jasmine": require('./grunt/config/webdriver-jasmine'),
"webdriver-perf": require('./grunt/config/webdriver-perf'),
npm: require('./grunt/config/npm'),
clean: [
'./build',
'./*.gem',
'./docs/_site',
'./examples/shared/*.js',
'.module-cache',
],
/*eslint-disable camelcase */
compare_size: require('./grunt/config/compare_size'),
/*eslint-enable camelcase */
clean: ['./build', './*.gem', './docs/_site', './examples/shared/*.js', '.module-cache'],
jshint: require('./grunt/config/jshint'),
compare_size: require('./grunt/config/compare_size')
});
grunt.config.set('compress', require('./grunt/config/compress'));
function spawnGulp(args, opts, done) {
grunt.util.spawn({
// This could be more flexible (require.resolve & lookup bin in package)
// but if it breaks we'll fix it then.
cmd: path.join('node_modules', '.bin', 'gulp'),
args: args,
opts: assign({stdio: 'inherit'}, opts),
}, function(err, result, code) {
if (err) {
grunt.fail.fatal('Something went wrong running gulp: ', result);
}
done(code === 0);
});
}
Object.keys(grunt.file.readJSON('package.json').devDependencies)
.filter(function(npmTaskName) {
return npmTaskName.indexOf('grunt-') === 0;
})
.filter(function(npmTaskName) {
return npmTaskName !== 'grunt-cli';
})
.forEach(function(npmTaskName) {
grunt.loadNpmTasks(npmTaskName);
});
.filter(function(npmTaskName) { return npmTaskName.indexOf('grunt-') === 0; })
.filter(function(npmTaskName) { return npmTaskName != 'grunt-cli'; })
.forEach(function(npmTaskName) { grunt.loadNpmTasks(npmTaskName); });
grunt.registerTask('eslint', require('./grunt/tasks/eslint'));
// Alias 'jshint' to 'lint' to better match the workflow we know
grunt.registerTask('lint', ['jshint']);
grunt.registerTask('lint', ['eslint']);
grunt.registerTask('download-previous-version', require('./grunt/tasks/download-previous-version.js'));
grunt.registerTask('delete-build-modules', function() {
// Use gulp here.
spawnGulp(['react:clean'], null, this.async());
if (grunt.file.exists('build/modules')) {
grunt.file.delete('build/modules');
}
});
// Register jsx:normal and :release tasks.
grunt.registerMultiTask('jsx', require('./grunt/tasks/jsx'));
grunt.registerMultiTask('jsx', jsxTask);
// Our own browserify-based tasks to build a single JS file build.
grunt.registerMultiTask('browserify', require('./grunt/tasks/browserify'));
// Our own browserify-based tasks to build a single JS file build
grunt.registerMultiTask('browserify', browserifyTask);
grunt.registerMultiTask('npm', require('./grunt/tasks/npm'));
grunt.registerMultiTask('populist', populistTask);
grunt.registerTask('sauce-tunnel', sauceTunnelTask);
grunt.registerMultiTask('webdriver-jasmine', webdriverJasmineTasks);
grunt.registerMultiTask('webdriver-perf', require('./grunt/tasks/webdriver-perf'));
grunt.registerMultiTask('npm', npmTask);
var npmReactTasks = require('./grunt/tasks/npm-react');
grunt.registerTask('npm-react:release', npmReactTasks.buildRelease);
grunt.registerTask('npm-react:pack', npmReactTasks.packRelease);
grunt.registerTask('npm-react-tools:release', npmReactToolsTasks.buildRelease);
grunt.registerTask('npm-react-tools:pack', npmReactToolsTasks.packRelease);
grunt.registerTask('gem-react-source:release', gemReactSourceTasks.buildRelease);
grunt.registerTask('gem-react-source:pack', gemReactSourceTasks.packRelease);
var npmReactDOMTasks = require('./grunt/tasks/npm-react-dom');
grunt.registerTask('npm-react-dom:release', npmReactDOMTasks.buildRelease);
grunt.registerTask('npm-react-dom:pack', npmReactDOMTasks.packRelease);
grunt.registerTask('version-check', versionCheckTask);
var npmReactAddonsTasks = require('./grunt/tasks/npm-react-addons');
grunt.registerTask('npm-react-addons:release', npmReactAddonsTasks.buildReleases);
grunt.registerTask('npm-react-addons:pack', npmReactAddonsTasks.packReleases);
grunt.registerTask('version-check', require('./grunt/tasks/version-check'));
grunt.registerTask('build:basic', [
'build-modules',
grunt.registerTask('build:basic', ['jsx:normal', 'version-check', 'browserify:basic']);
grunt.registerTask('build:addons', ['jsx:normal', 'browserify:addons']);
grunt.registerTask('build:transformer', ['jsx:normal', 'browserify:transformer']);
grunt.registerTask('build:min', ['jsx:normal', 'version-check', 'browserify:min']);
grunt.registerTask('build:addons-min', ['jsx:normal', 'browserify:addonsMin']);
grunt.registerTask('build:withCodeCoverageLogging', [
'jsx:normal',
'version-check',
'browserify:withCodeCoverageLogging'
]);
grunt.registerTask('build:perf', [
'jsx:normal',
'version-check',
'browserify:transformer',
'browserify:basic',
]);
grunt.registerTask('build:addons', [
'build-modules',
'browserify:addons',
]);
grunt.registerTask('build:min', [
'build-modules',
'version-check',
'browserify:min',
'download-previous-version'
]);
grunt.registerTask('build:addons-min', [
'build-modules',
'browserify:addonsMin',
]);
grunt.registerTask('build:npm-react', [
grunt.registerTask('build:test', [
'delete-build-modules',
'jsx:test',
'version-check',
'build-modules',
'npm-react:release',
'populist:test'
]);
grunt.registerTask('build:react-dom', require('./grunt/tasks/react-dom'));
grunt.registerTask('build:npm-react', ['version-check', 'jsx:normal', 'npm-react:release']);
grunt.registerTask('build:gem-react-source', ['build', 'gem-react-source:release'])
grunt.registerTask('test', ['jest']);
grunt.registerTask('webdriver-phantomjs', webdriverPhantomJSTask);
grunt.registerTask('coverage:parse', require('./grunt/tasks/coverage-parse'));
grunt.registerTask('test:webdriver:phantomjs', [
'connect',
'webdriver-phantomjs',
'webdriver-jasmine:local'
]);
grunt.registerTask('perf:webdriver:phantomjs', [
'connect',
'webdriver-phantomjs',
'webdriver-perf:local'
]);
grunt.registerTask('test:full', [
'build:test',
'build:basic',
'connect',
'webdriver-phantomjs',
'webdriver-jasmine:local',
'sauce-tunnel',
'webdriver-jasmine:saucelabs_android',
'webdriver-jasmine:saucelabs_firefox',
'webdriver-jasmine:saucelabs_chrome'
]);
grunt.registerTask('perf:full', [
'build:perf',
'connect',
'webdriver-phantomjs',
'webdriver-perf:local',
'sauce-tunnel',
'webdriver-perf:saucelabs_firefox',
'webdriver-perf:saucelabs_chrome',
'webdriver-perf:saucelabs_ie11',
'webdriver-perf:saucelabs_ie8',
]);
grunt.registerTask('test:webdriver:saucelabs', [
'build:test',
'build:basic',
'connect',
'sauce-tunnel',
'webdriver-jasmine:saucelabs_' + (process.env.BROWSER_NAME || 'ie8')
]);
grunt.registerTask('test:webdriver:saucelabs:modern', [
'build:test',
'build:basic',
'connect',
'sauce-tunnel',
'webdriver-jasmine:saucelabs_android',
'webdriver-jasmine:saucelabs_firefox',
'webdriver-jasmine:saucelabs_chrome',
'webdriver-jasmine:saucelabs_ie11'
]);
grunt.registerTask('test:webdriver:saucelabs:ie', [
'build:test',
'build:basic',
'connect',
'sauce-tunnel',
'webdriver-jasmine:saucelabs_ie8',
'webdriver-jasmine:saucelabs_ie9',
'webdriver-jasmine:saucelabs_ie10',
'webdriver-jasmine:saucelabs_ie11'
]);
grunt.registerTask('test:webdriver:saucelabs:ios', [
'build:test',
'build:basic',
'connect',
'sauce-tunnel',
'webdriver-jasmine:saucelabs_ios6_1',
'webdriver-jasmine:saucelabs_ios5_1',
'webdriver-jasmine:saucelabs_ios4'
]);
grunt.registerTask('test:coverage', [
'build:test',
'build:withCodeCoverageLogging',
'test:webdriver:phantomjs',
'coverage:parse'
]);
grunt.registerTask('fasttest', function() {
if (grunt.option('debug')) {
grunt.task.run('build:test', 'connect:server:keepalive');
} else {
grunt.task.run('build:test', 'test:webdriver:phantomjs');
}
});
grunt.registerTask('test', function() {
if (grunt.option('debug')) {
grunt.task.run('build:test', 'build:basic', 'connect:server:keepalive');
} else {
grunt.task.run('build:test', 'build:basic', 'test:webdriver:phantomjs');
}
});
grunt.registerTask('perf', ['build:perf', 'perf:webdriver:phantomjs']);
grunt.registerTask('npm:test', ['build', 'npm:pack']);
grunt.registerTask('jest', require('./grunt/tasks/jest'));
// Optimized build task that does all of our builds. The subtasks will be run
// in order so we can take advantage of that and only run build-modules once.
// in order so we can take advantage of that and only run jsx:normal once.
grunt.registerTask('build', [
'delete-build-modules',
'build-modules',
'jsx:normal',
'version-check',
'browserify:basic',
'browserify:transformer',
'browserify:addons',
'browserify:min',
'browserify:addonsMin',
'build:react-dom',
'npm-react:release',
'npm-react:pack',
'npm-react-dom:release',
'npm-react-dom:pack',
'npm-react-addons:release',
'npm-react-addons:pack',
'compare_size',
'npm-react-tools:release',
'npm-react-tools:pack',
'copy:react_docs',
'compare_size'
]);
// Automate the release!
var releaseTasks = require('./grunt/tasks/release');
grunt.registerTask('release:setup', releaseTasks.setup);
grunt.registerTask('release:bower', releaseTasks.bower);
grunt.registerTask('release:docs', releaseTasks.docs);
@@ -143,17 +242,15 @@ module.exports = function(grunt) {
'release:setup',
'clean',
'build',
'gem-react-source:release',
'gem-react-source:pack',
'release:bower',
'release:starter',
'compress',
'release:docs',
'release:msg',
'release:msg'
]);
grunt.registerTask('build-modules', function() {
spawnGulp(['react:modules'], null, this.async());
});
// The default task - build - to keep setup easy.
// The default task - build - to keep setup easy
grunt.registerTask('default', ['build']);
};

View File

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

46
PATENTS
View File

@@ -1,33 +1,23 @@
Additional Grant of Patent Rights Version 2
Additional Grant of Patent Rights
"Software" means the React software distributed by Facebook, Inc.
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.
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.
The license granted hereunder will terminate, automatically and without notice,
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.
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.

View File

@@ -1,18 +1,16 @@
# [React](https://facebook.github.io/react/) [![Build Status](https://travis-ci.org/facebook/react.svg?branch=0.14-stable)](https://travis-ci.org/facebook/react) [![npm version](https://badge.fury.io/js/react.svg)](http://badge.fury.io/js/react)
# [React](http://facebook.github.io/react) [![Build Status](https://travis-ci.org/facebook/react.svg?branch=0.12-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 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/).
* **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.
* **Data flow:** React implements one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding.
**NEW**! Check out our newest project [React Native](https://github.com/facebook/react-native), which uses React and JavaScript to create native mobile apps.
[Learn how to use React in your own project](https://facebook.github.io/react/docs/getting-started.html).
[Learn how to use React in your own project.](http://facebook.github.io/react/docs/getting-started.html)
## Examples
We have several examples [on the website](https://facebook.github.io/react/). Here is the first one to get you started:
We have several examples [on the website](http://facebook.github.io/react/). Here is the first one to get you started:
```js
var HelloMessage = React.createClass({
@@ -21,7 +19,7 @@ var HelloMessage = React.createClass({
}
});
ReactDOM.render(
React.render(
<HelloMessage name="John" />,
document.getElementById('container')
);
@@ -29,7 +27,7 @@ ReactDOM.render(
This example will render "Hello John" into a container on the page.
You'll notice that we used an HTML-like syntax; [we call it JSX](https://facebook.github.io/react/docs/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](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.
## Installation
@@ -37,12 +35,12 @@ The fastest way to get started is to serve JavaScript from the CDN (also availab
```html
<!-- The core React library -->
<script src="https://fb.me/react-0.14.8.js"></script>
<!-- The ReactDOM Library -->
<script src="https://fb.me/react-dom-0.14.8.js"></script>
<script src="http://fb.me/react-0.12.2.js"></script>
<!-- In-browser JSX transformer, remove when pre-compiling JSX. -->
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
```
We've also built a [starter kit](https://facebook.github.io/react/downloads/react-0.14.8.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](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.
If you'd like to use [bower](http://bower.io), it's as easy as:
@@ -60,7 +58,7 @@ The process to build `react.js` is built entirely on top of node.js, using many
#### Prerequisites
* You have `node` installed at v0.10.0+ (it might work at lower versions, we just haven't tested) and `npm` at v2.0.0+.
* You have `node` installed at v0.10.0+ (it might work at lower versions, we just haven't tested).
* You are familiar with `npm` and know whether or not you need to use `sudo` when installing packages globally.
* You are familiar with `git`.
@@ -86,7 +84,9 @@ We use grunt to automate many tasks. Run `grunt -h` to see a mostly complete lis
grunt test
# Build and run tests in your browser
grunt test --debug
# Lint the code with ESLint
# For speed, you can use fasttest and add --filter to only run one test
grunt fasttest --filter=ReactIdentity
# Lint the code with JSHint
grunt lint
# Wipe out build directory
grunt clean
@@ -103,6 +103,3 @@ Examples provided in this repository and in the documentation are [separately li
### More…
There's only so much we can cram in here. To read more about the community and guidelines for submitting pull requests, please read the [Contributing document](CONTRIBUTING.md).
## Troubleshooting
See the [Troubleshooting Guide](https://github.com/facebook/react/wiki/Troubleshooting)

28
bin/jsx Executable file
View File

@@ -0,0 +1,28 @@
#!/usr/bin/env node
// -*- mode: js -*-
"use strict";
var transform = require('../main').transform;
require('commoner').version(
require('../package.json').version
).resolve(function(id) {
return this.readModuleP(id);
}).option(
'--harmony',
'Turns on JS transformations such as ES6 Classes etc.'
).option(
'--strip-types',
'Strips out type annotations.'
).option(
'--source-map-inline',
'Embed inline sourcemap in transformed source'
).process(function(id, source) {
// This is where JSX, ES6, etc. desugaring happens.
var options = {
harmony: this.options.harmony,
sourceMap: this.options.sourceMapInline,
stripTypes: this.options.stripTypes
};
return transform(source, options);
});

View File

@@ -1,17 +1,13 @@
#!/usr/bin/env node
// -*- mode: js -*-
// vim: set ft=javascript :
"use strict";
'use strict';
var getAllVisitors = require('../vendor/fbtransform/visitors').getAllVisitors;
var transform = require('jstransform').transform;
var propagate = require("../vendor/constants").propagate;
var babel = require('babel');
var devExpressionPlugin = require('fbjs/scripts/babel/dev-expression');
var TRANSFORM_IGNORE_RE = /^WebComponents$/;
require('commoner').version(
require('../package.json').version
require("commoner").version(
require("../package.json").version
).resolve(function(id) {
var context = this;
@@ -32,16 +28,30 @@ require('commoner').version(
}).process(function(id, source) {
var context = this;
var constants = context.config.constants || {};
// This is hacky but that's ok… It really only matters for tests since it
// won't otherwise be in the dependency tree.
if (!TRANSFORM_IGNORE_RE.test(id)) {
// This is where JSX, ES6, etc. desugaring happens.
source = babel.transform(source, {
blacklist: ['spec.functionName', 'validation.react'],
plugins: [devExpressionPlugin],
filename: id,
}).code;
// This is where JSX, ES6, etc. desugaring happens.
source = transform(getAllVisitors(), source).code;
// Constant propagation means removing any obviously dead code after
// replacing constant expressions with literal (boolean) values.
source = propagate(constants, source);
if (context.config.mocking) {
// Make sure there is exactly one newline at the end of the module.
source = source.replace(/\s+$/m, "\n");
return context.getProvidedP().then(function(idToPath) {
if (id !== "mock-modules" &&
id !== "mocks" &&
id !== "test/all" &&
idToPath.hasOwnProperty("mock-modules")) {
return source + '\nrequire("mock-modules").register(' +
JSON.stringify(id) + ', module);\n';
}
return source;
});
}
return source;

View File

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

View File

@@ -21,7 +21,7 @@ Once you have RubyGems and installed Bundler (via `gem install bundler`), use it
```sh
$ cd react/docs
$ bundle install # Might need sudo.
$ npm install
$ npm install # Might need sudo.
```
### Instructions
@@ -52,7 +52,7 @@ $ bundle exec rake watch # Automatically compiles as needed.
### Updating `facebook.github.io/react`
The easiest way to do this is to have a separate clone of this repository, checked out to the `gh-pages` branch. We have a build step that expects this to be in a directory named `react-gh-pages` at the same depth as `react`. Then it's just a matter of running `grunt docs`, which will compile the site and copy it out to this repository. From there, you can check it in.
The easiest way to do this is to have a separate clone of this repository, checked out to the `gh-pages` branch. We have a build step that expects this to be in a directory named `react-gh-pages` at the same depth as `react`. Then it's just a matter of running `grunt docs`, which will compile the site and copy it out to this repository. From there you can check it in.
**Note:** This should only be done for new releases. You should create a tag corresponding to the release tag in the main repository.

View File

@@ -4,13 +4,12 @@ require('yaml')
desc "generate js from jsx"
task :js do
system "cp ../node_modules/babel/node_modules/babel-core/browser.min.js ./js/babel-browser.min.js"
system "../node_modules/babel/bin/babel.js _js --out-dir=js"
system "../bin/jsx --harmony _js js"
end
desc "watch js"
task :watch do
Process.spawn "../node_modules/.bin/babel _js --out-dir=js --watch"
Process.spawn "../bin/jsx --watch --harmony _js js"
Process.waitall
end
@@ -24,25 +23,6 @@ task :update_version do
end
end
desc "update SRI hashes"
task :update_hashes do
map = {
'react.js' => 'dev',
'react.min.js' => 'prod',
'react-with-addons.js' => 'addons_dev',
'react-with-addons.min.js' => 'addons_prod',
'react-dom.js' => 'dom_dev',
'react-dom.min.js' => 'dom_prod',
'react-dom-server.js' => 'dom_server_dev',
'react-dom-server.min.js' => 'dom_server_prod'
}
site_config = YAML.load_file('_config.yml')
map.each do |file, key|
site_config['react_hashes'][key] = `openssl dgst -sha384 -binary ../../react-bower/#{file} | openssl base64 -A`
end
File.open('_config.yml', 'w+') { |f| f.write(site_config.to_yaml) }
end
desc "update acknowledgements list"
task :update_acknowledgements do
authors = File.readlines('../AUTHORS').map {|author| author.gsub(/ <.*\n/,'')}

View File

@@ -1,7 +1,7 @@
---
name: React
description: A JavaScript library for building user interfaces
url: https://facebook.github.io
url: http://facebook.github.io
baseurl: "/react"
permalink: "/blog/:year/:month/:day/:title.html"
paginate_path: "/blog/page:num/"
@@ -25,24 +25,13 @@ 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.14.8
react_hashes:
dev: xQae1pUPdAKUe0u0KUTNt09zzdwheX4VSUsV8vatqM+t6X7rta01qOzessL808ox
prod: zTm/dblzLXQNp3CgY+hfaC/WJ6h4XtNrePh2CW2+rO9GPuNiPb9jmthvAL+oI/dQ
addons_dev: I5TF2q2QDmB31aN5lcClArdUo+WJH/Yi3hcH3PBVXFe5DYtYCFh7Jx/dmpba12zn
addons_prod: KPHTQfiYMhtsIRbZcY4ri1lBYZQbj4ePsSdzODR2Bu5L5ts3APVyqwKPBThO5Hgc
dom_dev: A1t0GCrR06cTHvMjaxeSE8XOiz6j7NvWdmxhN/9z748wEvJTVk13Rr8gMzTUnd8G
dom_prod: ntqCsHbLdMxT352UbhPbT7fqjE8xi4jLmQYQa8mYR+ylAapbXRfdsDweueDObf7m
dom_server_dev: 3I5+eGB/ILYa6pQQX+rM9O0SyDltamM40RiZ5JvIijSYEfVGZU0vY4Iwx9a1eYyD
dom_server_prod: Kt9dEqXzv00orFPW2o3H+kxQtSiNO8EqXsXJT3i99rCcp74N/Km98V0kUxAzy44k
react_version: 0.12.2

View File

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

View File

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

View File

@@ -1,66 +0,0 @@
# Map of short name to more information. `name` will be used but if you don't
# want to use your real name, just use whatever. If url is included, your name
# will be a link to the provided url.
benigeri:
name: Paul Benigeri
url: https://github.com/benigeri
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
gaearon:
name: Dan Abramov
url: https://twitter.com/dan_abramov
jaredly:
name: Jared Forsyth
url: https://twitter.com/jaredforsyth
jgebhardt:
name: Jonas Gebhardt
url: https://twitter.com/jonasgebhardt
jimfb:
name: Jim Sproch
url: http://www.jimsproch.com
jingc:
name: Jing Chen
url: https://twitter.com/jingc
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

@@ -8,16 +8,12 @@
title: Thinking in React
- title: Community Resources
items:
- id: conferences
title: Conferences
- id: videos
title: Videos
- id: complementary-tools
title: Complementary Tools
href: https://github.com/facebook/react/wiki/Complementary-Tools
- id: examples
title: Examples
href: https://github.com/facebook/react/wiki/Examples
- title: Guides
items:
- id: why-react
@@ -45,7 +41,7 @@
title: Working With the Browser
subitems:
- id: more-about-refs
title: Refs to Components
title: More About Refs
- id: tooling-integration
title: Tooling Integration
- id: addons
@@ -55,24 +51,20 @@
title: Animation
- id: two-way-binding-helpers
title: Two-Way Binding Helpers
- id: class-name-manipulation
title: Class Name Manipulation
- id: test-utils
title: Test Utilities
- id: clone-with-props
title: Cloning Elements
- id: create-fragment
title: Keyed Fragments
title: Cloning Components
- id: update
title: Immutability Helpers
- id: pure-render-mixin
title: PureRenderMixin
- id: perf
title: Performance Tools
- id: shallow-compare
title: Shallow Compare
- id: advanced-performance
title: Advanced Performance
- id: context
title: Context
- title: Reference
items:
- id: top-level-api
@@ -91,15 +83,13 @@
title: Special Non-DOM Attributes
- id: reconciliation
title: Reconciliation
- id: webcomponents
title: Web Components
- id: glossary
title: React (Virtual) DOM Terminology
- title: Flux
items:
- id: flux-overview
title: Flux Overview
href: https://facebook.github.io/flux/docs/overview.html
href: http://facebook.github.io/flux/docs/overview.html
- id: flux-todo-list
title: Flux TodoMVC Tutorial
href: https://facebook.github.io/flux/docs/todo-list.html
href: http://facebook.github.io/flux/docs/todo-list.html

View File

@@ -30,9 +30,9 @@
title: Communicate Between Components
- id: expose-component-functions
title: Expose Component Functions
- id: references-to-components
title: References to Components
- id: children-undefined
title: this.props.children undefined
- id: use-react-with-other-libraries
title: Use React with Other Libraries
- id: dangerously-set-inner-html
title: Dangerously Set innerHTML

View File

@@ -1,32 +1,10 @@
{% assign page = include.page %}
<h1><a href="/react{{ page.url }}">{{ page.title }}</a></h1>
<p class="meta">{{ page.date | date_to_string }} by {{ page.author }}</p>
<h1>
{% if include.isPermalink %}
{{ page.title }}
<div id="post">
{% if content != '' %}
{{ page.excerpt }}
{% else %}
<a href="/react{{ page.url }}">{{ page.title }}</a>
{{ page.content }}
{% endif %}
</h1>
<p class="meta">
{{ page.date | date: "%B %e, %Y" }}
by
{% for author in page.authors %}
{% if author.url %}
<a href="{{author.url}}">{{ author.name }}</a>
{% else %}
{{ author.name }}
{% endif %}
{% if forloop.last == false %} and {% endif %}
{% endfor %}
</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,7 +0,0 @@
---
rules:
block-scoped-var: 0
no-undef: 0
strict: 0
react/react-in-jsx-scope: 0
react/jsx-no-undef: 0

View File

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

View File

@@ -1,13 +1,12 @@
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.value});
},
rawMarkup: function() {
return { __html: marked(this.state.value, {sanitize: true}) };
this.setState({value: this.refs.textarea.getDOMNode().value});
},
render: function() {
return (
@@ -20,17 +19,19 @@ var MarkdownEditor = React.createClass({
<h3>Output</h3>
<div
className="content"
dangerouslySetInnerHTML={this.rawMarkup()}
dangerouslySetInnerHTML={{
__html: converter.makeHtml(this.state.value)
}}
/>
</div>
);
}
});
ReactDOM.render(<MarkdownEditor />, mountNode);
React.render(<MarkdownEditor />, mountNode);
`;
ReactDOM.render(
React.render(
<ReactPlayground codeText={MARKDOWN_COMPONENT} />,
document.getElementById('markdownExample')
);

View File

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

View File

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

View File

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

45
docs/_js/jsx-compiler.js Normal file
View File

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

@@ -9,26 +9,17 @@ var IS_MOBILE = (
);
var CodeMirrorEditor = React.createClass({
propTypes: {
lineNumbers: React.PropTypes.bool,
onChange: React.PropTypes.func,
},
getDefaultProps: function() {
return {
lineNumbers: false,
};
},
componentDidMount: function() {
if (IS_MOBILE) return;
this.editor = CodeMirror.fromTextArea(ReactDOM.findDOMNode(this.refs.editor), {
this.editor = CodeMirror.fromTextArea(this.refs.editor.getDOMNode(), {
mode: 'javascript',
lineNumbers: this.props.lineNumbers,
lineNumbers: false,
lineWrapping: true,
smartIndent: false, // javascript mode does bad things with jsx indents
matchBrackets: true,
theme: 'solarized-light',
readOnly: this.props.readOnly,
readOnly: this.props.readOnly
});
this.editor.on('change', this.handleChange);
},
@@ -60,7 +51,7 @@ var CodeMirrorEditor = React.createClass({
{editor}
</div>
);
},
}
});
var selfCleaningTimeout = {
@@ -71,7 +62,7 @@ var selfCleaningTimeout = {
setTimeout: function() {
clearTimeout(this.timeoutID);
this.timeoutID = setTimeout.apply(null, arguments);
},
}
};
var ReactPlayground = React.createClass({
@@ -84,18 +75,16 @@ var ReactPlayground = React.createClass({
transformer: React.PropTypes.func,
renderCode: React.PropTypes.bool,
showCompiledJSTab: React.PropTypes.bool,
showLineNumbers: React.PropTypes.bool,
editorTabTitle: React.PropTypes.string,
editorTabTitle: React.PropTypes.string
},
getDefaultProps: function() {
return {
transformer: function(code) {
return babel.transform(code).code;
return JSXTransformer.transform(code).code;
},
editorTabTitle: 'Live JSX Editor',
showCompiledJSTab: true,
showLineNumbers: false,
showCompiledJSTab: true
};
},
@@ -133,7 +122,6 @@ var ReactPlayground = React.createClass({
onChange={this.handleCodeChange}
codeText={compiledCode}
readOnly={true}
lineNumbers={this.props.showLineNumbers}
/>;
var JSXContent =
@@ -142,7 +130,6 @@ var ReactPlayground = React.createClass({
onChange={this.handleCodeChange}
className="playgroundStage"
codeText={this.state.code}
lineNumbers={this.props.showLineNumbers}
/>;
var JSXTabClassName =
@@ -194,16 +181,16 @@ var ReactPlayground = React.createClass({
},
executeCode: function() {
var mountNode = ReactDOM.findDOMNode(this.refs.mount);
var mountNode = this.refs.mount.getDOMNode();
try {
ReactDOM.unmountComponentAtNode(mountNode);
React.unmountComponentAtNode(mountNode);
} catch (e) { }
try {
var compiledCode = this.compileCode();
if (this.props.renderCode) {
ReactDOM.render(
React.render(
<CodeMirrorEditor codeText={compiledCode} readOnly={true} />,
mountNode
);
@@ -212,11 +199,11 @@ var ReactPlayground = React.createClass({
}
} catch (err) {
this.setTimeout(function() {
ReactDOM.render(
React.render(
<div className="playgroundError">{err.toString()}</div>,
mountNode
);
}, 500);
}
},
}
});

View File

@@ -8,34 +8,32 @@
<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="https://facebook.github.io/react{{ page.url }}">
<meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
<meta property="og:url" content="http://facebook.github.io/react{{ page.url }}">
<meta property="og:image" content="http://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">
<link rel="shortcut icon" href="/react/favicon.ico">
<link rel="alternate" type="application/rss+xml" title="{{ site.name }}" href="{{ site.url }}{{ site.baseurl }}/feed.xml">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
<link rel="stylesheet" href="/react/css/syntax.css">
<link rel="stylesheet" href="/react/css/codemirror.css">
<link rel="stylesheet" href="/react/css/react.css">
<script src="//use.typekit.net/vqa1hcx.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<!--[if lte IE 8]>
<script src="/react/js/html5shiv.min.js"></script>
<script src="/react/js/es5-shim.min.js"></script>
<script src="/react/js/es5-sham.min.js"></script>
<script type="text/javascript" src="/react/js/html5shiv.min.js"></script>
<script type="text/javascript" src="/react/js/es5-shim.min.js"></script>
<script type="text/javascript" src="/react/js/es5-sham.min.js"></script>
<![endif]-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
<script src="/react/js/codemirror.js"></script>
<script src="/react/js/javascript.js"></script>
<script src="/react/js/react.js"></script>
<script src="/react/js/react-dom.js"></script>
<script src="/react/js/babel-browser.min.js"></script>
<script src="/react/js/live_editor.js"></script>
<script type="text/javascript" src="/react/js/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>
@@ -47,19 +45,12 @@
<img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
React
</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>
<li>
<input id="algolia-doc-search" type="text" placeholder="Search docs..." />
</li>
</ul>
<ul class="nav-site nav-site-external">
<li><a href="https://github.com/facebook/react">GitHub</a></li>
<li><a href="https://facebook.github.io/react-native/">React Native</a></li>
<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="http://github.com/facebook/react">github</a>
</ul>
</div>
</div>
@@ -89,7 +80,7 @@
</div>
<div class="right">
&copy; 2013&ndash;{{ site.time | date: '%Y' }} Facebook Inc.<br>
Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
Documentation licensed under <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
</div>
</footer>
</div>
@@ -112,12 +103,6 @@
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=623268441017527";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
docsearch({
apiKey: '36221914cce388c46d0420343e0bb32e',
indexName: 'react',
inputSelector: '#algolia-doc-search'
});
</script>
</body>
</html>

View File

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

View File

@@ -6,6 +6,15 @@ sectionid: blog
<section class="content wrap blogContent">
{% include nav_blog.html %}
<div class="inner-content">
{% include blog_post.html isPermalink="true" page=page content=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>
</div>
</section>

View File

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

View File

@@ -8,15 +8,13 @@ layout: default
<div class="subHeader">{{ page.description }}</div>
{{ content }}
{% if page.prev or page.next %}
<div class="docs-prevnext">
{% if page.prev %}
<a class="docs-prev" href="/react/docs/{{ page.prev }}">&larr; Prev</a>
{% endif %}
{% if page.next %}
<a class="docs-next" href="/react/docs/{{ page.next }}">Next &rarr;</a>
{% endif %}
</div>
{% endif %}
<div class="docs-prevnext">
{% if page.prev %}
<a class="docs-prev" href="/react/docs/{{ page.prev }}">&larr; Prev</a>
{% endif %}
{% if page.next %}
<a class="docs-next" href="/react/docs/{{ page.next }}">Next &rarr;</a>
{% endif %}
</div>
</div>
</section>

View File

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

View File

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

View File

@@ -1,9 +1,9 @@
---
title: JSFiddle Integration
author: vjeux
author: Christopher Chedeau
---
[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.
[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.
<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: petehunt
author: Pete Hunt
---
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](https://code.angularjs.org/1.0.8/docs/guide/directive#reasonsbehindthecompilelinkseparation).
a linking function to manually update DOM nodes](http://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](https://github.com/petehunt/react-server-rendering-example)
[on the server](http://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](/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](http://facebook.github.io/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...](https://www.quora.com/React-JS-Library/How-is-Facebooks-React-JavaScript-library/answer/Lee-Byron?srid=3DcX)
> [Read the full post...](http://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](https://danialk.github.io/) made a real-time chat application that interacts with the back-end using Socket.IO.
[Danial Khosravi](http://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)](https://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/)</figure>
> <figure>[![](/react/img/blog/chatapp.png)](http://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/)</figure>
>
> [Read the full post...](https://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/)
> [Read the full post...](http://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...](https://www.quora.com/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look)
> [Read the full post...](http://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](/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)
- [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)

View File

@@ -1,6 +1,6 @@
---
title: "React v0.3.3"
author: zpao
author: Paul O'Shannessy
---
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](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.
[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.
> [<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](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.
[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.
> 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: zpao
author: Paul O'Shannessy
---
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](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.
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.
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.
@@ -47,11 +47,11 @@ Over the past several weeks, members of our team, [Pete Hunt](http://www.petehun
[Pete Hunt](http://www.petehunt.net/) recorded himself implementing a simple `<Blink>` tag in React.
<figure><iframe src="https://player.vimeo.com/video/67248575" width="500" height="340" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></figure>
<figure><iframe src="http://player.vimeo.com/video/67248575" width="500" height="340" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></figure>
## Snake in React
[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)](https://tomocchino.github.io/react-snake/)</figure>
> <figure>[![](/react/img/blog/snake.png)](http://tomocchino.github.io/react-snake/)</figure>

View File

@@ -1,6 +1,6 @@
---
title: "New in React v0.4: Prop Validation and Default Values"
author: zpao
author: Paul O'Shannessy
---
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: zpao
author: Paul O'Shannessy
---
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](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!
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!
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...](/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)
* `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)
* 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](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.
[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.
```javascript
React.renderComponent(
@@ -60,7 +60,7 @@ React.renderComponent(
<option value="Facebook">Facebook</option>
<option value="Harvest">Harvest</option>
</Chosen>
, document.getElementById('example'));
, document.body);
```
@@ -68,14 +68,14 @@ React.renderComponent(
[Domenic Denicola](http://domenicdenicola.com/) wrote a slide deck about the great applications of ES6 features and one slide shows how we could use Template Strings to compile JSX at run-time without the need for a pre-processing phase.
<figure><iframe src="https://www.slideshare.net/slideshow/embed_code/24187146?rel=0&startSlide=36" width="600" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe></figure>
<figure><iframe src="http://www.slideshare.net/slideshow/embed_code/24187146?rel=0&startSlide=36" width="600" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe></figure>
## React Presentation
[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-nocookie.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe></figure>
<figure><iframe width="650" height="400" src="//www.youtube.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe></figure>
## Docs

View File

@@ -1,6 +1,6 @@
---
title: "React v0.4.1"
author: zpao
author: Paul O'Shannessy
---
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: zpao
author: Paul O'Shannessy
---
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.getElementById('example'))
React.renderComponent(<MyComponent/>, document.body)
```

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](https://zaim.github.io/) shared his boilerplate to get started with Stylus CSS processor.
[Zaim Bakar](http://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: kmeht
author: Kunal Mehta
---
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](/react/blog/)
* [15 blog posts](http://facebook.github.io/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.
@@ -34,7 +34,7 @@ While this is not going to work for all the attributes since they are camelCased
## Remarkable React
[Stoyan Stefanov](http://www.phpied.com/) gave a talk at [BrazilJS](http://braziljs.com.br/) about React and wrote an article with the content of the presentation. He goes through the difficulties of writing _active apps_ using the DOM API and shows how React handles it.
[Stoyan Stefanov](http://www.phpied.com/) gave a talk at [BrazilJS](http://braziljs.com.br/) about React and wrote an article with the content of the presentation. He goes through the difficulties of writting _active apps_ using the DOM API and shows how React handles it.
> So how does exactly React deal with it internally? Two crazy ideas - virtual DOM and synthetic events.
>
@@ -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.
[View the source on JSFiddle...](http://jsfiddle.net/vjeux/QL9tz)
<iframe width="100%" height="300" src="http://jsfiddle.net/vjeux/QL9tz/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

View File

@@ -1,6 +1,6 @@
---
title: "React v0.5"
author: zpao
author: Paul O'Shannessy
---
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: zpao
author: Paul O'Shannessy
---
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.
@@ -29,7 +29,7 @@ We organized a React hackathon last week-end in the Facebook Seattle office. 50
The video will be available soon on the [JSConf EU website](http://2013.jsconf.eu/speakers/pete-hunt-react-rethinking-best-practices.html), but in the meantime, here are Pete's slides:
<figure><iframe src="https://www.slideshare.net/slideshow/embed_code/26589373" width="550" height="450" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen></iframe></figure>
<figure><iframe src="http://www.slideshare.net/slideshow/embed_code/26589373" width="550" height="450" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen></iframe></figure>
## Pump - Clojure bindings for React

View File

@@ -0,0 +1,142 @@
---
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="http://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="http://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="http://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-nocookie.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe></figure>
<figure><iframe width="600" height="370" src="//www.youtube.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-nocookie.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe></figure>
<figure><iframe width="600" height="338" src="//www.youtube.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](/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](http://facebook.github.io/react/tips/introduction.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)
- [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)
## 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](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.
[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.
<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: zpao
author: Paul O'Shannessy
---
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]: /react/downloads.html
[download]: http://facebook.github.io/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: zpao
author: Paul O'Shannessy
---
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](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!
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!
## The Future of Javascript MVC
[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.
[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.
> 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)](https://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/)</figure>
> <figure>[![](/react/img/blog/om-backbone.png)](http://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/)</figure>
>
> [Read the full article...](https://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/)
> [Read the full article...](http://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](/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.
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.
> 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](/react/docs/animation.html) to implement animations.
<figure>[![](/react/img/blog/lights-out.png)](https://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](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>
[Try it out!](https://chenglou.github.io/react-lights-out/)
[Try it out!](http://chenglou.github.io/react-lights-out/)
## Reactive Table Bookmarklet
@@ -63,7 +63,9 @@ 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.
[View the source on JSFiddle...](https://jsfiddle.net/ssorallen/fEsYt/)
<iframe width="100%" height="300" src="http://jsfiddle.net/ssorallen/fEsYt/embedded/result,html,js" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
[View the source on JSFiddle...](http://jsfiddle.net/ssorallen/fEsYt/)
## Writing Good React Components
@@ -91,9 +93,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)](/react/jsx-compiler.html)</figure>
<figure>[![](/react/img/blog/jsx-compiler.png)](http://facebook.github.io/react/jsx-compiler.html)</figure>
[Try it out!](/react/jsx-compiler.html)
[Try it out!](http://facebook.github.io/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!](https://petehunt.github.io/react-touch/)
[Try out the demos!](http://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-nocookie.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe></figure>
<figure><iframe width="560" height="315" src="//www.youtube.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: sebmarkbage
author: Sebastian Markbåge
---
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-nocookie.com/embed/Cey7BS6dE0M" frameborder="0" allowfullscreen></iframe></figure>
<figure><iframe width="560" height="315" src="//www.youtube.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](/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](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.
> ```
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.
[View code on JSFiddle](http://jsfiddle.net/djkojb/qZf48/13/)
<iframe width="100%" height="300" src="http://jsfiddle.net/djkojb/qZf48/13/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
[Check out the blog post...](http://eldar.djafarov.com/2013/11/reactjs-mixing-with-backbone/)
@@ -71,7 +71,8 @@ rails s
[Thomas Aylott](http://subtlegradient.com/) implemented an API that looks like Web Components but using React underneath.
[View the source on JSFiddle...](http://jsfiddle.net/SubtleGradient/ue2Aa)
<iframe width="100%" height="300" src="http://jsfiddle.net/SubtleGradient/ue2Aa/embedded/html,js,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
## React vs Angular

View File

@@ -1,9 +1,9 @@
---
title: "Community Round-up #15"
author: jgebhardt
author: Jonas Gebhardt
---
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/).
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/).
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](https://holmsand.github.io/reagent/), a simplistic ClojureScript API to React.
Dan Holmsand ([@holmsand](https://twitter.com/holmsand)) created [Reagent](http://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...](https://holmsand.github.io/reagent/)
> [Check it out on Github...](http://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-nocookie.com/embed/Lqcs6hPOcFw?start=2963" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="//www.youtube.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](https://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](http://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: jgebhardt
author: Jonas Gebhardt
---
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-nocookie.com/v/rFvZydtmsxM) introduction to React Components. [[part 1](http://www.youtube-nocookie.com/v/rFvZydtmsxM)], [[part 2](http://www.youtube-nocookie.com/v/5yvFLrt7N8M)]
Joe Maddalone ([@joemaddalone](https://twitter.com/joemaddalone)) of [egghead.io](https://egghead.io/) created a series of React video tutorials, such as [this](http://www.youtube.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)]
### "React: Finally, a great server/client web stack"

View File

@@ -1,6 +1,6 @@
---
title: React v0.9 RC
author: spicyj
author: Ben Alpert
---
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: <https://fb.me/react-0.9.0-rc1.js>
Minified build for production: <https://fb.me/react-0.9.0-rc1.min.js>
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>
* **React with Add-Ons**
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>
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>
* **In-Browser JSX transformer**
<https://fb.me/JSXTransformer-0.9.0-rc1.js>
<http://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: spicyj
author: Ben Alpert
---
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: <https://fb.me/react-0.9.0.js>
Minified build for production: <https://fb.me/react-0.9.0.min.js>
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>
* **React with Add-Ons**
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>
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>
* **In-Browser JSX Transformer**
<https://fb.me/JSXTransformer-0.9.0.js>
<http://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: jgebhardt
author: Jonas Gebhardt
---
@@ -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](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!
[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!
### 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)](https://johnthethird.github.io/makona-editor/)</figure>
<figure>[![](/react/img/blog/makona-editor.png)](http://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](https://forresto.github.io/prototyping/react/) in React.
<figure>[![](/react/img/blog/react-svg-fbp.png)](https://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](http://forresto.github.io/prototyping/react/) in React.
<figure>[![](/react/img/blog/react-svg-fbp.png)](http://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](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).
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).
@@ -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-nocookie.com/embed/jYcpaemt90M" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="//www.youtube.com/embed/jYcpaemt90M" frameborder="0" allowfullscreen></iframe>
@@ -63,7 +63,7 @@ Emanuele shared this awesome demo video with us:
### Table Sorter
[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.
[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.
### 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](https://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](http://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: jgebhardt
author: Jonas Gebhardt
---
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"](https://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"](http://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-nocookie.com/embed/srt3OBP2kGc?start=113" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="//www.youtube.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: zpao
author: Paul OShannessy
---
[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.
[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.
The release candidate is available for download from the CDN:
* **React**
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>
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>
* **React with Add-Ons**
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>
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>
* **In-Browser JSX transformer**
<https://fb.me/JSXTransformer-0.10.0-rc1.js>
<http://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](https://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](http://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: zpao
author: Paul OShannessy
---
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: <https://fb.me/react-0.10.0.js>
Minified build for production: <https://fb.me/react-0.10.0.min.js>
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>
* **React with Add-Ons**
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>
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>
* **In-Browser JSX transformer**
<https://fb.me/JSXTransformer-0.10.0.js>
<http://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](https://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](http://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: zpao
author: Paul O'Shannessy
---
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.
@@ -33,7 +33,7 @@ There are other features of ES6 we're already using in core. I'm sure we'll see
## Context
While we haven't documented `context`, it exists in some form in React already. It exists as a way to pass values through a tree without having to use props at every single point. We've seen this need crop up time and time again, so we want to make this as easy as possible. Its use has performance tradeoffs, and there are known weaknesses in our implementation, so we want to make sure this is a solid feature.
While we haven't documented `context`, it exists in some form in React already. It exists as a way to pass values through a tree without having to use props at every single point. We've seen this need crop up time and time again, so we want to make this as easy as possible. It's use has performance tradeoffs, and there are known weaknesses in our implementation, so we want to make sure this is a solid feature.
## Addons
@@ -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]: /react/blog/2014/03/21/react-v0.10.html
[v0.10]: http://facebook.github.io/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: Daniel15
author: Daniel Lo Nigro
---
Today we're happy to announce the initial release of

View File

@@ -1,11 +1,11 @@
---
title: "Flux: An Application Architecture for React"
author: [fisherwebdev, jingc]
author: Bill Fisher and Jing Chen
---
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-nocookie.com/embed/nYkdrAPrdcw?list=PLb0IAmt7-GS188xDYE-u1ShQmFFGbrk0v&start=621" frameborder="0" allowfullscreen></iframe></figure>
<figure><iframe width="560" height="315" src="//www.youtube.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](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.
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.

View File

@@ -1,13 +1,13 @@
---
title: "One Year of Open-Source React"
author: chenglou
author: Cheng Lou
---
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](/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](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!
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.
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.
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: chenglou
author: Cheng Lou
---
## 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](https://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](http://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-nocookie.com/embed/KZjFVdU8VLI" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="//www.youtube.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: zpao
author: Paul OShannessy
---
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: <https://fb.me/react-0.11.0-rc1.js>
Minified build for production: <https://fb.me/react-0.11.0-rc1.min.js>
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>
* **React with Add-Ons**
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>
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>
* **In-Browser JSX transformer**
<https://fb.me/JSXTransformer-0.11.0-rc1.js>
<http://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: zpao
author: Paul OShannessy
---
**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: <https://fb.me/react-0.11.0.js>
Minified build for production: <https://fb.me/react-0.11.0.min.js>
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>
* **React with Add-Ons**
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>
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>
* **In-Browser JSX transformer**
<https://fb.me/JSXTransformer-0.11.0.js>
<http://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](/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](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.
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: zpao
author: Paul OShannessy
---
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: <https://fb.me/react-0.11.1.js>
Minified build for production: <https://fb.me/react-0.11.1.min.js>
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>
* **React with Add-Ons**
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>
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>
* **In-Browser JSX transformer**
<https://fb.me/JSXTransformer-0.11.1.js>
<http://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: LoukaN
author: Lou Husson
---
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="/react/img/blog/gpu-cursor-move.gif" style="width: 100%;" />](http://blog.atom.io/2014/07/02/moving-atom-to-react.html)
[<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)
## 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-nocookie.com/embed/D-ioDiacTm8" frameborder="0" allowfullscreen></iframe>
<iframe width="650" height="315" src="//www.youtube.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](https://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](http://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-nocookie.com/embed/CP3lvm5Ppqo" frameborder="0" allowfullscreen></iframe>
<iframe width="650" height="315" src="//www.youtube.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,3 +112,4 @@ 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: fisherwebdev
author: Bill Fisher
---
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 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 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.
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.
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](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.
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.
<img src="/react/img/blog/flux-diagram.png" style="width: 100%;" />

View File

@@ -1,10 +1,10 @@
---
title: "Community Round-up #21"
author: LoukaN
author: Lou Husson
---
## React Router
[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!
[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!
```javascript
React.renderComponent((
@@ -16,7 +16,7 @@ React.renderComponent((
</Route>
</Route>
</Routes>
), document.getElementById('example'));
), document.body);
```
## 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.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).
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).
```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)](https://mzabriskie.github.io/react-draggable/example/)
[![](/react/img/blog/react-draggable.png)](http://mzabriskie.github.io/react-draggable/example/)
## HTML Parser2 React
[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.
[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.
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-nocookie.com/embed/lAn7GVoGlKU" frameborder="0" allowfullscreen></iframe>
<iframe width="650" height="315" src="//www.youtube.com/embed/lAn7GVoGlKU" frameborder="0" allowfullscreen></iframe>
## Random Tweets

View File

@@ -1,13 +1,13 @@
---
title: "Introducing the JSX Specification"
author: sebmarkbage
author: Sebastian Markbåge
---
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 <https://facebook.github.io/jsx/>.
Read the spec now at <http://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: LoukaN
author: Lou Husson
---
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-nocookie.com/embed/eCf5CquV_Bw" frameborder="0" allowfullscreen></iframe>
<iframe width="650" height="315" src="//www.youtube.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](https://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](http://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-nocookie.com/embed/rFvZydtmsxM" frameborder="0" allowfullscreen></iframe>
<iframe width="650" height="200" src="//www.youtube.com/embed/rFvZydtmsxM" frameborder="0" allowfullscreen></iframe>
## Saving time & staying sane?

View File

@@ -1,6 +1,6 @@
---
title: React v0.11.2
author: zpao
author: Paul OShannessy
---
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: <https://fb.me/react-0.11.2.js>
Minified build for production: <https://fb.me/react-0.11.2.min.js>
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>
* **React with Add-Ons**
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>
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>
* **In-Browser JSX transformer**
<https://fb.me/JSXTransformer-0.11.2.js>
<http://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: fisherwebdev
author: Bill Fisher
---
**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).**
**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).**
[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.
[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.
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](https://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](http://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](https://facebook.github.io/jest/docs/tutorial-react.html) and the [ReactTestUtils documentation](/react/docs/test-utils.html).
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).
Further Reading
---------------
- [Mocks Aren't Stubs](http://martinfowler.com/articles/mocksArentStubs.html) by Martin Fowler
- [Jest API Reference](https://facebook.github.io/jest/docs/api.html)
- [Jest API Reference](http://facebook.github.io/jest/docs/api.html)

View File

@@ -1,10 +1,10 @@
---
title: "Introducing React Elements"
author: sebmarkbage
author: Sebastian Markbåge
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](https://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](http://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](https://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](http://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](https://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](http://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: sebmarkbage
author: Sebastian Markbåge
---
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: <https://fb.me/react-0.12.0-rc1.js>
Minified build for production: <https://fb.me/react-0.12.0-rc1.min.js>
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>
* **React with Add-Ons**
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>
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>
* **In-Browser JSX transformer**
<https://fb.me/JSXTransformer-0.12.0-rc1.js>
<http://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](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.
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.
### The `@jsx` Pragma is Gone!
@@ -41,7 +41,7 @@ We have wanted to do this since before we even open sourced React. No more `/**
The React specific JSX transform no longer transforms to function calls. Instead we use `React.createElement` and pass it arguments. This allows us to make optimizations and better support React as a compile target for things like Om. Read more in the [React Elements introduction](/react/blog/2014/10/14/introducting-react-elements.html).
The result of this change is that we will no longer support arbitrary function calls. We understand that the ability to do was a convenient shortcut for many people but we believe the gains will be worth it.
The result of this change is that we will no longer support arbitrary function calls. We understand that the ability to do was was a convenient shortcut for many people but we believe the gains will be worth it.
### JSX Lower-case Convention

View File

@@ -1,16 +1,16 @@
---
title: "Community Round-up #23"
layout: post
author: LoukaN
author: Lou Husson
---
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!
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!
## 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-nocookie.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe>
<iframe width="650" height="315" src="//www.youtube.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](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/).
[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/).
<center>
<a href="https://spoike.ghost.io/deconstructing-reactjss-flux/"><img src="/react/img/blog/reflux-flux.png" width="400" /></a>
<a href="http://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](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.
[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.
> 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...](https://christianalfoni.github.io/javascript/2014/08/20/react-js-and-flux.html)
> [Read the full article...](http://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](https://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](http://blogs.atlassian.com/2014/08/flux-architecture-step-by-step/).
<center>
<a href="https://blogs.atlassian.com/2014/08/flux-architecture-step-by-step/"><img src="/react/img/blog/flux-chart.png" width="400" /></a>
<a href="http://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-nocookie.com/embed/XhXC4SKOGfQ" frameborder="0" allowfullscreen></iframe>
<iframe width="650" height="315" src="//www.youtube.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.

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