Compare commits
54 Commits
v16.0.0-al
...
v0.14.1
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
b247f68b33 | ||
|
|
6e2450e8f2 | ||
|
|
c2dde8df0b | ||
|
|
aaf8f870cb | ||
|
|
4952cd00d4 | ||
|
|
eadbf33296 | ||
|
|
12cafa7e00 | ||
|
|
090c2dd833 | ||
|
|
c469697ad7 | ||
|
|
d8a9cd365c | ||
|
|
6323f03148 | ||
|
|
6384e56d8d | ||
|
|
84f6915315 | ||
|
|
fdb2486b98 | ||
|
|
fb620be2b8 | ||
|
|
0acdefb7cc | ||
|
|
e0f74c6c6c | ||
|
|
8ab0651158 | ||
|
|
712c6cb1d8 | ||
|
|
e931e02a36 | ||
|
|
6c84e3d410 | ||
|
|
e8b5c75c0f | ||
|
|
b5524faa4b | ||
|
|
411726dcf1 | ||
|
|
28f242d0b4 | ||
|
|
5cc9abfe60 | ||
|
|
348a37cc99 | ||
|
|
bed6aefc46 | ||
|
|
1e175d0858 | ||
|
|
193e4cf582 | ||
|
|
b0aa296519 | ||
|
|
b020e69edc | ||
|
|
d69657bca4 | ||
|
|
8812c6b678 | ||
|
|
60e30f1da4 | ||
|
|
e4300d951c | ||
|
|
13f3cdeeb1 | ||
|
|
fe085c1cce | ||
|
|
b71499e5f4 | ||
|
|
df0dac72c2 | ||
|
|
5f2a80c086 | ||
|
|
e21f1c7759 | ||
|
|
21588d900f | ||
|
|
5039dad053 | ||
|
|
b120cdafb2 | ||
|
|
f93bb3aa6a | ||
|
|
ac2853b5d4 | ||
|
|
007cf55872 | ||
|
|
ec7947979b | ||
|
|
24f7659b7c | ||
|
|
c2443c227c | ||
|
|
3603d45157 | ||
|
|
0811e63e22 | ||
|
|
3917c04f16 |
28
.babelrc
28
.babelrc
@@ -1,28 +0,0 @@
|
||||
{
|
||||
"presets": ["react"],
|
||||
"ignore": ["third_party"],
|
||||
"plugins": [
|
||||
"transform-class-properties",
|
||||
"syntax-trailing-function-commas",
|
||||
"transform-object-rest-spread",
|
||||
"transform-es2015-template-literals",
|
||||
"transform-es2015-literals",
|
||||
"transform-es2015-arrow-functions",
|
||||
"transform-es2015-block-scoped-functions",
|
||||
["transform-es2015-classes", { "loose": true }],
|
||||
"transform-es2015-object-super",
|
||||
"transform-es2015-shorthand-properties",
|
||||
"transform-es2015-computed-properties",
|
||||
"transform-es2015-for-of",
|
||||
"check-es2015-constants",
|
||||
["transform-es2015-spread", { "loose": true }],
|
||||
"transform-es2015-parameters",
|
||||
["transform-es2015-destructuring", { "loose": true }],
|
||||
["transform-es2015-block-scoping", { "throwIfClosureRequired": true }],
|
||||
"transform-es2015-modules-commonjs",
|
||||
"transform-es3-member-expression-literals",
|
||||
"transform-es3-property-literals",
|
||||
"./scripts/babel/transform-object-assign-require",
|
||||
"transform-react-jsx-source"
|
||||
]
|
||||
}
|
||||
@@ -1,6 +1,5 @@
|
||||
# We can probably lint these later but not important at this point
|
||||
src/renderers/art
|
||||
src/__mocks__/vendor
|
||||
src/shared/vendor
|
||||
# But not in docs/_js/examples/*
|
||||
docs/_js/*.js
|
||||
docs/js/
|
||||
@@ -10,10 +9,11 @@ docs/vendor/bundle/
|
||||
# This should be more like examples/**/thirdparty/** but
|
||||
# we should fix https://github.com/facebook/esprima/pull/85 first
|
||||
examples/
|
||||
fixtures/
|
||||
# Ignore built files.
|
||||
build/
|
||||
coverage/
|
||||
scripts/bench/bench-*.js
|
||||
vendor/*
|
||||
**/node_modules
|
||||
# react-codemod
|
||||
packages/react-codemod/test/
|
||||
packages/react-codemod/scripts/
|
||||
packages/react-codemod/build/
|
||||
packages/react-codemod/node_modules/
|
||||
vendor/react-dom.js
|
||||
|
||||
63
.eslintrc
Normal file
63
.eslintrc
Normal file
@@ -0,0 +1,63 @@
|
||||
---
|
||||
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
|
||||
64
.eslintrc.js
64
.eslintrc.js
@@ -1,64 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const OFF = 0;
|
||||
// const WARNING = 1;
|
||||
const ERROR = 2;
|
||||
|
||||
module.exports = {
|
||||
extends: 'fbjs',
|
||||
|
||||
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': OFF,
|
||||
'brace-style': [ERROR, '1tbs'],
|
||||
'comma-dangle': [ERROR, 'always-multiline'],
|
||||
'consistent-return': OFF,
|
||||
'dot-location': [ERROR, 'property'],
|
||||
'dot-notation': ERROR,
|
||||
'eol-last': ERROR,
|
||||
'eqeqeq': [ERROR, 'allow-null'],
|
||||
'indent': [ERROR, 2, {SwitchCase: 1}],
|
||||
'jsx-quotes': [ERROR, 'prefer-double'],
|
||||
'keyword-spacing': [ERROR, {after: true, before: true}],
|
||||
'no-bitwise': OFF,
|
||||
'no-inner-declarations': [ERROR, 'functions'],
|
||||
'no-multi-spaces': ERROR,
|
||||
'no-restricted-syntax': [ERROR, 'WithStatement'],
|
||||
'no-shadow': ERROR,
|
||||
'no-unused-expressions': ERROR,
|
||||
'no-unused-vars': [ERROR, {args: 'none'}],
|
||||
'quotes': [ERROR, 'single', {avoidEscape: true, allowTemplateLiterals: true }],
|
||||
'space-before-blocks': ERROR,
|
||||
'space-before-function-paren': [ERROR, {anonymous: 'never', named: 'never'}],
|
||||
|
||||
// React & JSX
|
||||
// Our transforms set this automatically
|
||||
'react/jsx-boolean-value': [ERROR, 'always'],
|
||||
'react/jsx-no-undef': ERROR,
|
||||
// We don't care to do this
|
||||
'react/jsx-sort-prop-types': OFF,
|
||||
'react/jsx-space-before-closing': ERROR,
|
||||
'react/jsx-uses-react': ERROR,
|
||||
'react/no-is-mounted': OFF,
|
||||
// This isn't useful in our test code
|
||||
'react/react-in-jsx-scope': ERROR,
|
||||
'react/self-closing-comp': ERROR,
|
||||
// We don't care to do this
|
||||
'react/jsx-wrap-multilines': [ERROR, {declaration: false, assignment: false}],
|
||||
|
||||
// CUSTOM RULES
|
||||
// the second argument of warning/invariant should be a literal string
|
||||
'react-internal/warning-and-invariant-args': ERROR,
|
||||
'react-internal/no-primitive-constructors': ERROR,
|
||||
},
|
||||
|
||||
globals: {
|
||||
expectDev: true,
|
||||
},
|
||||
};
|
||||
39
.flowconfig
39
.flowconfig
@@ -1,39 +0,0 @@
|
||||
[ignore]
|
||||
|
||||
<PROJECT_ROOT>/examples/.*
|
||||
<PROJECT_ROOT>/fixtures/.*
|
||||
<PROJECT_ROOT>/build/.*
|
||||
<PROJECT_ROOT>/.*/node_modules/y18n/.*
|
||||
<PROJECT_ROOT>/.*/__mocks__/.*
|
||||
<PROJECT_ROOT>/.*/__tests__/.*
|
||||
|
||||
# Ignore Docs
|
||||
<PROJECT_ROOT>/docs/.*
|
||||
<PROJECT_ROOT>/.*/docs/.*
|
||||
|
||||
[include]
|
||||
|
||||
[libs]
|
||||
./node_modules/fbjs/flow/lib/dev.js
|
||||
./flow
|
||||
|
||||
[options]
|
||||
module.system=haste
|
||||
|
||||
esproposal.class_static_fields=enable
|
||||
esproposal.class_instance_fields=enable
|
||||
|
||||
munge_underscores=false
|
||||
|
||||
suppress_type=$FlowIssue
|
||||
suppress_type=$FlowFixMe
|
||||
suppress_type=$FixMe
|
||||
suppress_type=$FlowExpectedError
|
||||
|
||||
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-3]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*www[a-z,_]*\\)?)\\)
|
||||
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-3]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*www[a-z,_]*\\)?)\\)?:? #[0-9]+
|
||||
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
|
||||
suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
|
||||
|
||||
[version]
|
||||
^0.37.0
|
||||
9
.github/ISSUE_TEMPLATE.md
vendored
9
.github/ISSUE_TEMPLATE.md
vendored
@@ -1,9 +0,0 @@
|
||||
**Do you want to request a *feature* or report a *bug*?**
|
||||
|
||||
**What is the current behavior?**
|
||||
|
||||
**If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/reactjs/69z2wepo/).**
|
||||
|
||||
**What is the expected behavior?**
|
||||
|
||||
**Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?**
|
||||
10
.github/PULL_REQUEST_TEMPLATE.md
vendored
10
.github/PULL_REQUEST_TEMPLATE.md
vendored
@@ -1,10 +0,0 @@
|
||||
**Before submitting a pull request,** please make sure the following is done:
|
||||
|
||||
1. Fork [the repository](https://github.com/facebook/react) and create your branch from `master`.
|
||||
2. If you've added code that should be tested, add tests!
|
||||
3. If you've changed APIs, update the documentation.
|
||||
4. Ensure the test suite passes (`npm test`).
|
||||
5. Make sure your code lints (`npm run lint`).
|
||||
6. Run the [Flow](https://flowtype.org/) typechecks (`npm run flow`).
|
||||
7. If you added or removed any tests, run `./scripts/fiber/record-tests` before submitting the pull request, and commit the resulting changes.
|
||||
8. If you haven't already, complete the [CLA](https://code.facebook.com/cla).
|
||||
7
.gitignore
vendored
7
.gitignore
vendored
@@ -7,7 +7,6 @@ static
|
||||
_SpecRunner.html
|
||||
__benchmarks__
|
||||
build/
|
||||
coverage/
|
||||
.module-cache
|
||||
*.gem
|
||||
docs/.bundle
|
||||
@@ -15,12 +14,9 @@ docs/code
|
||||
docs/_site
|
||||
docs/.sass-cache
|
||||
docs/js/*
|
||||
docs/downloads/*.zip
|
||||
docs/downloads
|
||||
docs/vendor/bundle
|
||||
examples/shared/*.js
|
||||
examples/**/bundle.js
|
||||
fixtures/dom/public/react-dom.js
|
||||
fixtures/dom/public/react.js
|
||||
test/the-files-to-test.generated.js
|
||||
*.log*
|
||||
chrome-user-data
|
||||
@@ -28,4 +24,3 @@ chrome-user-data
|
||||
*.sublime-workspace
|
||||
.idea
|
||||
*.iml
|
||||
.vscode
|
||||
|
||||
35
.mailmap
35
.mailmap
@@ -7,61 +7,47 @@ Andreas Savvides <asavvides@twitter.com> <AnSavvides@users.noreply.github.com>
|
||||
Andreas Savvides <asavvides@twitter.com> <andreas@nibbli.com>
|
||||
Andreas Svensson <andreas@syranide.com>
|
||||
Andres Suarez <zertosh@gmail.com>
|
||||
Andrew Kulakov <avk@8xx8.ru>
|
||||
Andrew Sokolov <asokolov@atlassian.com>
|
||||
Anto Aravinth <anto.aravinth.cse@gmail.com>
|
||||
Baraa Hamodi <bhamodi@uwaterloo.ca> <baraa@optimizely.com>
|
||||
Ben Alpert <ben@benalpert.com> <balpert@fb.com>
|
||||
Ben Alpert <ben@benalpert.com> <spicyjalapeno@gmail.com>
|
||||
Ben Halpern <bendhalpern@gmail.com>
|
||||
Ben Newman <bn@cs.stanford.edu> <benjamn@fb.com>
|
||||
Benjamin Woodruff <github@benjam.info> <bgw@fb.com>
|
||||
Bill Fisher <fisherwebdev@gmail.com>
|
||||
Blaine Kasten <blainekasten@gmail.com>
|
||||
Brandon Tilley <brandon@brandontilley.com>
|
||||
Changsoon Bok <winmain@gmail.com>
|
||||
Cheng Lou <chenglou92@gmail.com> <chenglou@fb.com>
|
||||
Christian Oliff <christianoliff@yahoo.com>
|
||||
Christoph Pojer <christoph.pojer@gmail.com>
|
||||
Christoph Pojer <christoph.pojer@gmail.com> <cpojer@fb.com>
|
||||
Connor McSheffrey <c@conr.me> <connor.mcsheffrey@gmail.com>
|
||||
Conor Hastings <hastings.conorm@gmail.com> <conor@socialtables.com>
|
||||
Dan Schafer <dschafer@fb.com>
|
||||
Daniel Gasienica <daniel@gasienica.ch> <daniel@fiftythree.com>
|
||||
Daniel Gasienica <daniel@gasienica.ch> <dgasienica@zynga.com>
|
||||
Daniel Hejl <daniel.hejl@hotmail.com>
|
||||
Daniel Lo Nigro <daniel@dan.cx> <danlo@fb.com>
|
||||
Dave Galbraith <dave@jut.io>
|
||||
Dennis Johnson <songawee@gmail.com>
|
||||
Dmitry Blues <dmitri.blyus@gmail.com>
|
||||
Dongsheng Liu <bellanchor@gmail.com>
|
||||
Erik Harper <eharper@mixpo.com>
|
||||
Evan Coonrod <evan@paloalto.com>
|
||||
Fabio M. Costa <fabiomcosta@gmail.com> <fabs@fb.com>
|
||||
Felix Kling <felix.kling@gmx.net> <fkling@fb.com>
|
||||
François-Xavier Bois <fxbois@gmail.com>
|
||||
Fyodor Ivanishchev <cbrwizard@gmail.com>
|
||||
Gabe Levi <gabelevi@gmail.com> <glevi@fb.com>
|
||||
Geert Pasteels <geert.pasteels@gmail.com>
|
||||
George A Sisco III <george.sisco@gmail.com>
|
||||
Georgii Dolzhykov <thorn.mailbox@gmail.com>
|
||||
Harry Hull <harry.hull1@gmail.com>
|
||||
Hendrik Swanepoel <hendrik.swanepoel@gmail.com>
|
||||
Hyeock Kwon <doublus@gmail.com>
|
||||
Ian Obermiller <ian@obermillers.com> <iano@fb.com>
|
||||
Ilia Pavlenkov <dortonway@gmail.com>
|
||||
Ilyá Belsky <gelias.gbelsky@gmail.com>
|
||||
Ingvar Stepanyan <me@rreverser.com> <rreverser@ubuntu.rreverser.a4.internal.cloudapp.net>
|
||||
Irae Carvalho <irae@irae.pro.br>
|
||||
Ivan Vergiliev <ivan.vergiliev@gmail.com>
|
||||
JJ Weber <jj.weber@gmail.com>
|
||||
Jae Hun Ro <jhr24@duke.edu>
|
||||
Jaime Mingo <j.mingov@3boll.com>
|
||||
James Brantly <james@jbrantly.com>
|
||||
Jan Hancic <jan.hancic@gmail.com> <jan.hancic@caplin.com>
|
||||
Jan Kassens <jan@kassens.net> <jkassens@fb.com>
|
||||
Jason Bonta <jbonta@gmail.com> <jasonbonta@fb.com>
|
||||
Jason Quense <monastic.panic@gmail.com>
|
||||
Jason Trill <jason@jasontrill.com>
|
||||
Jeff Chan <jefftchan@gmail.com> <jeff@quizlet.com>
|
||||
Jeff Morrison <jeff@anafx.com> <Jeff@anafx.com>
|
||||
@@ -70,14 +56,10 @@ Jeff Morrison <jeff@anafx.com> <lbljeffmo@gmail.com>
|
||||
Jeffrey Lin <lin.jeffrey@gmail.com> <jeffreylin@fb.com>
|
||||
Jim Sproch <jsproch@fb.com>
|
||||
Jim Sproch <jsproch@fb.com> <jsfb@github>
|
||||
Jim Sproch <jsproch@fb.com> <none@no-reply.com>
|
||||
Jinwoo Oh <arkist@gmail.com>
|
||||
Jinxiu Lee <lee.jinxiu@gmail.com>
|
||||
Jiyeon Seo <zzzeons@gmail.com>
|
||||
Jon Chester <jonchester@fb.com>
|
||||
Jon Madison <jon@tfftech.com>
|
||||
Jonathan Hsu <jhiswin@gmail.com>
|
||||
Jonathan Persson <persson.jonathan@gmail.com> <jonathan.persson@creuna.se>
|
||||
Jordan Walke <jordojw@gmail.com>
|
||||
Jordan Walke <jordojw@gmail.com> <jordanjcw@fb.com>
|
||||
Joseph Savona <joesavona@fb.com> <josephsavona@users.noreply.github.com>
|
||||
@@ -87,12 +69,10 @@ Jun Wu <quark@lihdd.net>
|
||||
Justin Robison <jrobison151@gmail.com>
|
||||
Keito Uchiyama <projects@keito.me> <keito@fb.com>
|
||||
Kevin Coughlin <kevintcoughlin@gmail.com> <kevincoughlin@tumblr.com>
|
||||
Krystian Karczewski <karcz.k@gmail.com>
|
||||
Kunal Mehta <k.mehta@berkeley.edu> <kunalm@fb.com>
|
||||
Laurence Rowe <l@lrowe.co.uk> <laurence@lrowe.co.uk>
|
||||
Marcin K. <katzoo@github.mail>
|
||||
Mark Anderson <undernewmanagement@users.noreply.github.com>
|
||||
Mark Funk <mfunk86@gmail.com> <mark@boomtownroi.com>
|
||||
Martin Andert <mandert@gmail.com>
|
||||
Mathieu M-Gosselin <mathieumg@gmail.com> <mathieumg@atx33.com>
|
||||
Matsunoki <himkt@klis.tsukuba.ac.jp>
|
||||
@@ -100,10 +80,7 @@ Matt Brookes <matt@brookes.net>
|
||||
Matt Dunn-Rankin <mdunnrankin@gmail.com> <matchu1993@gmail.com>
|
||||
Matt Zabriskie <mzabriskie@gmail.com>
|
||||
Matthew Johnston <matthewjohnston4@outlook.com> <matthewjohnston4@users.noreply.github.com>
|
||||
Matthew Looi <looi.matthew@gmail.com>
|
||||
Mattijs Kneppers <mattijs@arttech.nl>
|
||||
Max Heiber <max.heiber@gmail.com>
|
||||
Max Stoiber <contact@mstoiber.com>
|
||||
Michal Srb <xixixao@seznam.cz> xixixao <xixixao@seznam.cz>
|
||||
Michelle Todd <himichelletodd@gmail.com> <michelle@khanacademy.org>
|
||||
Mihai Parparita <mihai.parparita@gmail.com> <mihai@persistent.info>
|
||||
@@ -124,39 +101,27 @@ Petri Lievonen <plievone@cc.hut.fi>
|
||||
Petri Lievonen <plievone@cc.hut.fi> <petri.lievonen@tkk.fi>
|
||||
Pieter Vanderwerff <me@pieter.io> <pieter@heyday.co.nz>
|
||||
Pouja Nikray <poujanik@gmail.com>
|
||||
Rainer Oviir <roviir@gmail.com> <raineroviir@rainers-MacBook-Pro.local>
|
||||
Ray <ray@tomo.im>
|
||||
Richard Feldman <richard.t.feldman@gmail.com> <richard@noredink.com>
|
||||
Richard Livesey <Livesey7@hotmail.co.uk>
|
||||
Rob Arnold <robarnold@cs.cmu.edu>
|
||||
Robert Binna <rbinna@gmail.com> <speedskater@users.noreply.github.com>
|
||||
Robin Frischmann <robin@rofrischmann.de>
|
||||
Sander Spies <sandermail@gmail.com>
|
||||
Scott Feeney <scott@oceanbase.org> <smf@fb.com>
|
||||
Sebastian Markbåge <sebastian@calyptus.eu> <sema@fb.com>
|
||||
Sergey Rubanov <chi187@gmail.com>
|
||||
Shogun Sea <shogunsea08@gmail.com> <xxin@groupon.com>
|
||||
Soichiro Kawamura <mail@w-st.com>
|
||||
Sota Ohara <ohrst.18@gmail.com>
|
||||
Steven Luscher <react@steveluscher.com> <github@steveluscher.com>
|
||||
Steven Luscher <react@steveluscher.com> <steveluscher@fb.com>
|
||||
Steven Luscher <react@steveluscher.com> <steveluscher@instagram.com>
|
||||
Steven Luscher <react@steveluscher.com> <steveluscher@users.noreply.github.com>
|
||||
Stoyan Stefanov <ssttoo@ymail.com>
|
||||
Tengfei Guo <terryr3rd@yeah.net> <tfguo369@gmail.com>
|
||||
Thomas Aylott <oblivious@subtlegradient.com> <aylott@fb.com>
|
||||
Timothy Yung <yungsters@gmail.com> <yungsters@fb.com>
|
||||
Tomoya Suzuki <tmysz.dev@gmail.com>
|
||||
Vasiliy Loginevskiy <Yeti.or@gmail.com>
|
||||
Vasiliy Loginevskiy <Yeti.or@gmail.com> <yeti-or@yandex-team.ru>
|
||||
Vjeux <vjeuxx@gmail.com>
|
||||
Vjeux <vjeuxx@gmail.com> <vjeux@fb.com>
|
||||
Volkan Unsal <spocksplanet@gmail.com>
|
||||
Wander Wang <wander.wang@ismole.com>
|
||||
Xavier Morel <xmo-odoo@users.noreply.github.com>
|
||||
YouBao Nong <noyobo@gmail.com> <nongyoubao@alibaba-inc.com>
|
||||
Yutaka Nakajima <nakazye@gmail.com>
|
||||
Zach Bruggeman <mail@bruggie.com> <zbruggeman@me.com>
|
||||
iawia002 <z2d@jifangcheng.com> <850127508@qq.com>
|
||||
元彦 <yuanyan@users.noreply.github.com>
|
||||
张敏 <cookfront@gmail.com>
|
||||
|
||||
69
.travis.yml
69
.travis.yml
@@ -1,36 +1,22 @@
|
||||
---
|
||||
sudo: required
|
||||
dist: trusty
|
||||
language: node_js
|
||||
node_js:
|
||||
- 6
|
||||
rvm:
|
||||
- 2.2.3
|
||||
- 4
|
||||
sudo: false
|
||||
cache:
|
||||
directories:
|
||||
- docs/vendor/bundle
|
||||
- node_modules
|
||||
- $HOME/.yarn-cache
|
||||
before_install:
|
||||
- |
|
||||
echo "machine github.com login reactjs-bot password $GITHUB_TOKEN" >~/.netrc
|
||||
unset GITHUB_TOKEN
|
||||
|
||||
if [ "$TEST_TYPE" != build_website ] && \
|
||||
! git diff --name-only $TRAVIS_COMMIT_RANGE | grep -qvE '(\.md$)|(^(docs|examples))/'
|
||||
then
|
||||
echo "Only docs were updated, stopping build process."
|
||||
exit
|
||||
fi
|
||||
|
||||
sudo apt-key adv --fetch-keys http://dl.yarnpkg.com/debian/pubkey.gpg
|
||||
echo "deb http://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
|
||||
sudo apt-get update -qq
|
||||
sudo apt-get install -y -qq yarn
|
||||
yarn --version
|
||||
install:
|
||||
- |
|
||||
yarn install
|
||||
npm install -g npm@latest-2
|
||||
npm --version
|
||||
script:
|
||||
- |
|
||||
if [ "$TEST_TYPE" = build_website ]; then
|
||||
@@ -38,8 +24,9 @@ script:
|
||||
set -e
|
||||
|
||||
GH_PAGES_DIR="$TRAVIS_BUILD_DIR"/../react-gh-pages
|
||||
git config --global user.name "$GITHUB_USER_NAME"
|
||||
git config --global user.email "$GITHUB_USER_EMAIL"
|
||||
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 \
|
||||
@@ -49,7 +36,7 @@ script:
|
||||
bundle exec rake release
|
||||
cd $GH_PAGES_DIR
|
||||
git status
|
||||
if test -n "$(git status --porcelain)"; then
|
||||
if ! git diff-index --quiet HEAD --; then
|
||||
git add -A .
|
||||
git commit -m "Rebuild website"
|
||||
git push origin gh-pages
|
||||
@@ -67,11 +54,8 @@ script:
|
||||
-F "react-with-addons.min=@build/react-with-addons.min.js" \
|
||||
-F "react-dom=@build/react-dom.js" \
|
||||
-F "react-dom.min=@build/react-dom.min.js" \
|
||||
-F "react-dom-server=@build/react-dom-server.js" \
|
||||
-F "react-dom-server.min=@build/react-dom-server.min.js" \
|
||||
-F "npm-react=@build/packages/react.tgz" \
|
||||
-F "npm-react-dom=@build/packages/react-dom.tgz" \
|
||||
-F "npm-react-native=@build/packages/react-native-renderer.tgz" \
|
||||
-F "commit=$TRAVIS_COMMIT" \
|
||||
-F "date=`git log --format='%ct' -1`" \
|
||||
-F "pull_request=$TRAVIS_PULL_REQUEST" \
|
||||
@@ -79,43 +63,14 @@ script:
|
||||
-F "branch=$TRAVIS_BRANCH" \
|
||||
$SERVER
|
||||
fi
|
||||
elif [ "$TEST_TYPE" = test ]; then
|
||||
set -e
|
||||
./node_modules/.bin/grunt jest:coverage
|
||||
cat ./coverage/lcov.info | ./node_modules/.bin/coveralls
|
||||
|
||||
echo 'Testing in server-render (HTML generation) mode...'
|
||||
printf '\nmodule.exports.useCreateElement = false;\n' \
|
||||
>> src/renderers/dom/shared/ReactDOMFeatureFlags.js
|
||||
./node_modules/.bin/grunt jest:normal
|
||||
git checkout -- src/renderers/dom/shared/ReactDOMFeatureFlags.js
|
||||
|
||||
echo 'Testing in fiber mode...'
|
||||
scripts/fiber/record-tests --track-facts
|
||||
git --no-pager diff scripts/fiber
|
||||
FIBER_TESTS_STATUS=$(git status --porcelain scripts/fiber)
|
||||
test -z "$FIBER_TESTS_STATUS"
|
||||
|
||||
./node_modules/.bin/gulp react:extract-errors
|
||||
elif [ "$TEST_TYPE" = flow ]; then
|
||||
set -e
|
||||
./node_modules/.bin/grunt flow
|
||||
|
||||
ALL_FILES=`find src -name '*.js' | grep -v umd/ | grep -v __tests__ | grep -v __mocks__`
|
||||
COUNT_ALL_FILES=`echo "$ALL_FILES" | wc -l`
|
||||
COUNT_WITH_FLOW=`grep '@flow' $ALL_FILES | perl -pe 's/:.+//' | wc -l`
|
||||
node scripts/facts-tracker/index.js \
|
||||
"flow-files" "$COUNT_WITH_FLOW/$COUNT_ALL_FILES"
|
||||
|
||||
else
|
||||
./node_modules/.bin/grunt $TEST_TYPE
|
||||
fi
|
||||
env:
|
||||
matrix:
|
||||
- TEST_TYPE=build
|
||||
- TEST_TYPE=test
|
||||
- TEST_TYPE=jest
|
||||
- TEST_TYPE=lint
|
||||
- TEST_TYPE=flow
|
||||
- TEST_TYPE=build_website
|
||||
global:
|
||||
# SERVER
|
||||
@@ -123,9 +78,9 @@ env:
|
||||
# SECRET_TOKEN
|
||||
- secure: dkpPW+VnoqC/okhRdV90m36NcyBFhcwEKL3bNFExAwi0dXnFao8RoFlvnwiPlA23h2faROkMIetXlti6Aju08BgUFV+f9aL6vLyU7gUent4Nd3413zf2fwDtXIWIETg6uLnOpSykGKgCAT/hY3Q2oPLqOoY0OxfgnbqwxkxljrE=
|
||||
# GITHUB_TOKEN
|
||||
- secure: Sn+HwLSkbgM5MqVszq/CJHcOsZax17zwW0ILpGgAaEKD6MHNmEBdc71skaLr+6R4gHVO5ybV2cgSxHuBLHKzYoidq5ksGKRHNeXfyOv8jeHGTN/FjwMQbM+WkIK3wFroLsuQ1kW2FBfFEXqx4rET6GXwdcqycGl8GSFB1l0VNzE=
|
||||
# COVERALLS_TOKEN
|
||||
- secure: h/cUq+TrUMZOQmkFD7CvuwX0uAwmjIfKZ4qSUzY+QzUtDzOzA0L/XF84xTBq1Q5YYsEiaoF6GxxGCdrLQiBA/ZTd+88UHgeZPMRvi0xG9Q+PeePVOsZMTxy4/WWFgOfSQCk49Mj9zizGgO78i6vxq+SDXMtFHnZ+TpPJIEW6/m0=
|
||||
- secure: EHCyCSKMwKlLHNtcj9nmkRzmiiPE3aDGlPcnEyrDJeRI0SeN/iCXHXfFivR0vFq3vr+9naMBczAR2AEidtps5KbJrKqdZnjPFRbmfVtzWr/LlvVCub3u13Pub6TdKIVBTny1PuZ5X8GvdxMNVig89jGjvzhhWuQRaz3VhJnTra4=
|
||||
matrix:
|
||||
fast_finish: true
|
||||
notifications:
|
||||
irc:
|
||||
use_notice: true
|
||||
|
||||
147
AUTHORS
147
AUTHORS
@@ -1,21 +1,17 @@
|
||||
839 <8398a7@gmail.com>
|
||||
Aaron Franks <aaron.franks@gmail.com>
|
||||
Aaron Gelter <aaron.gelter@harman.com>
|
||||
Adam Bloomston <adam@glitterfram.es>
|
||||
Adam Krebs <amk528@cs.nyu.edu>
|
||||
Adam Mark <adammark75@gmail.com>
|
||||
Adam Solove <asolove@gmail.com>
|
||||
Adam Timberlake <adam.timberlake@gmail.com>
|
||||
Adam Zapletal <adamzap@gmail.com>
|
||||
Ahmad Wali Sidiqi <wali-s@users.noreply.github.com>
|
||||
Alan Plum <me@pluma.io>
|
||||
Alan Souza <alansouzati@gmail.com>
|
||||
Alan deLevie <adelevie@gmail.com>
|
||||
Alastair Hole <afhole@gmail.com>
|
||||
Alex <ultrafez@users.noreply.github.com>
|
||||
Alex Boatwright <drdelambre@gmail.com>
|
||||
Alex Boyd <alex@opengroove.org>
|
||||
Alex Dajani <xelad1@gmail.com>
|
||||
Alex Lopatin <alex@alexlopatin.com>
|
||||
Alex Mykyta <dancingwithcows@gmail.com>
|
||||
Alex Pien <alexpien@gmail.com>
|
||||
@@ -27,28 +23,22 @@ Alexander Tseung <alextsg@gmail.com>
|
||||
Alexandre Gaudencio <shahor@shahor.fr>
|
||||
Alexey Raspopov <avenger7x13@gmail.com>
|
||||
Alexey Shamrin <shamrin@gmail.com>
|
||||
Ali Ukani <ali.ukani@gmail.com>
|
||||
Andre Z Sanchez <andrezacsanchez@gmail.com>
|
||||
Andreas Savvides <asavvides@twitter.com>
|
||||
Andreas Svensson <andreas@syranide.com>
|
||||
Andres Kalle <mjomble@gmail.com>
|
||||
Andres Suarez <zertosh@gmail.com>
|
||||
Andrew Clark <acdlite@me.com>
|
||||
Andrew Cobby <cobbweb@users.noreply.github.com>
|
||||
Andrew Davey <andrew@equin.co.uk>
|
||||
Andrew Henderson <andrew.m.henderson@gmail.com>
|
||||
Andrew Kulakov <avk@8xx8.ru>
|
||||
Andrew Rasmussen <andras@fb.com>
|
||||
Andrew Sokolov <asokolov@atlassian.com>
|
||||
Andrew Zich <azich@fb.com>
|
||||
Andrey Popp <8mayday@gmail.com>
|
||||
Anthony van der Hoorn <anthony.vanderhoorn@gmail.com>
|
||||
Anto Aravinth <anto.aravinth.cse@gmail.com>
|
||||
Antonio Ruberto <anto.ruberto@gmail.com>
|
||||
Antti Ahti <antti.ahti@gmail.com>
|
||||
Anuj Tomar <ankuto@gmail.com>
|
||||
AoDev <AoDev@users.noreply.github.com>
|
||||
April Arcus <april.arcus@gmail.com>
|
||||
Areeb Malik <areeb.malik91@gmail.com>
|
||||
Aria Buckles <aria@khanacademy.org>
|
||||
Aria Stewart <aredridel@dinhe.net>
|
||||
@@ -63,9 +53,7 @@ Battaile Fauber <battaile@gmail.com>
|
||||
Beau Smith <beau@beausmith.com>
|
||||
Ben Alpert <ben@benalpert.com>
|
||||
Ben Anderson <banderson@constantcontact.com>
|
||||
Ben Brooks <ben@benbrooks.net>
|
||||
Ben Foxall <benfoxall@gmail.com>
|
||||
Ben Halpern <bendhalpern@gmail.com>
|
||||
Ben Jaffe <jaffe.ben@gmail.com>
|
||||
Ben Moss <ben@mossity.com>
|
||||
Ben Newman <bn@cs.stanford.edu>
|
||||
@@ -73,20 +61,16 @@ Ben Ripkens <bripkens.dev@gmail.com>
|
||||
Benjamin Keen <ben.keen@gmail.com>
|
||||
Benjamin Leiken <benleiken@gmail.com>
|
||||
Benjamin Woodruff <github@benjam.info>
|
||||
Benjy Cui <benjytrys@gmail.com>
|
||||
Bill Blanchard <bill@plumbdev.com>
|
||||
Bill Fisher <fisherwebdev@gmail.com>
|
||||
Blaine Hatab <jbhatab@gmail.com>
|
||||
Blaine Kasten <blainekasten@gmail.com>
|
||||
Bob Eagan <bob@synapsestudios.com>
|
||||
Bob Ralian <bob.ralian@gmail.com>
|
||||
Bob Renwick <bob.renwick@gmail.com>
|
||||
Bobby <puppybytes@gmail.com>
|
||||
Bojan Mihelac <bmihelac@mihelac.org>
|
||||
Bradley Spaulding <brad.spaulding@gmail.com>
|
||||
Brandon Bloom <brandon@brandonbloom.name>
|
||||
Brandon Tilley <brandon@brandontilley.com>
|
||||
Brenard Cubacub <bcbcb@users.noreply.github.com>
|
||||
Brian Cooke <bri@bricooke.com>
|
||||
Brian Holt <btholt@gmail.com>
|
||||
Brian Hsu <brianhsu@Brians-MacBook-Pro.local>
|
||||
@@ -97,19 +81,14 @@ Brian Rue <brian@rollbar.com>
|
||||
Bruno Škvorc <bruno@skvorc.me>
|
||||
Cam Song <neosoyn@gmail.com>
|
||||
Cam Spiers <camspiers@gmail.com>
|
||||
Cameron Chamberlain <git@camjc.com>
|
||||
Cameron Matheson <cameron@instructure.com>
|
||||
Carter Chung <carterchung@users.noreply.github.com>
|
||||
Cassus Adam Banko <banko.adam@gmail.com>
|
||||
Cat Chen <catchen@fb.com>
|
||||
Cedric Sohrauer <cedric.sohrauer@infopark.de>
|
||||
Cesar William Alvarenga <cesarwbr@gmail.com>
|
||||
Changsoon Bok <winmain@gmail.com>
|
||||
Charles Marsh <charlie@khanacademy.org>
|
||||
Chase Adams <realchaseadams@gmail.com>
|
||||
Cheng Lou <chenglou92@gmail.com>
|
||||
Chitharanjan Das <das.chitharanjan@gmail.com>
|
||||
Chris Bolin <bolin.chris@gmail.com>
|
||||
Chris Grovers <chrisgrovers@users.noreply.github.com>
|
||||
Chris Ha <chriskevinha@gmail.com>
|
||||
Chris Rebert <github@rebertia.com>
|
||||
@@ -117,15 +96,12 @@ Chris Sciolla <csciolla1@gmail.com>
|
||||
Christian Alfoni <christianalfoni@gmail.com>
|
||||
Christian Oliff <christianoliff@yahoo.com>
|
||||
Christian Roman <chroman16@gmail.com>
|
||||
Christoffer Sawicki <christoffer.sawicki@gmail.com>
|
||||
Christoph Pojer <christoph.pojer@gmail.com>
|
||||
Christopher Monsanto <chris@monsan.to>
|
||||
Clay Allsopp <clay.allsopp@gmail.com>
|
||||
Connor McSheffrey <c@conr.me>
|
||||
Conor Hastings <hastings.conorm@gmail.com>
|
||||
Cory House <housecor@gmail.com>
|
||||
Cotton Hou <himcotton@gmail.com>
|
||||
Craig Akimoto <strawbrary@users.noreply.github.com>
|
||||
Cristovao Verstraeten <cristovao@apleasantview.com>
|
||||
Damien Pellier <dpellier@leadformance.com>
|
||||
Dan Abramov <dan.abramov@gmail.com>
|
||||
@@ -135,7 +111,6 @@ Daniel Carlsson <daniel.carlsson.1987@gmail.com>
|
||||
Daniel Cousens <dcousens@users.noreply.github.com>
|
||||
Daniel Friesen <daniel@nadir-seen-fire.com>
|
||||
Daniel Gasienica <daniel@gasienica.ch>
|
||||
Daniel Hejl <daniel.hejl@hotmail.com>
|
||||
Daniel Hejl <hejldaniel@gmail.com>
|
||||
Daniel Lo Nigro <daniel@dan.cx>
|
||||
Daniel Mané <danmane@gmail.com>
|
||||
@@ -146,31 +121,23 @@ Danny Ben-David <dannybd@fb.com>
|
||||
Darcy <smadad@me.com>
|
||||
Daryl Lau <daryl@weak.io>
|
||||
Darío Javier Cravero <dario@uxtemple.com>
|
||||
Dave Galbraith <dave@jut.io>
|
||||
David Baker <djbaker2@gmail.com>
|
||||
David Ed Mellum <david@edmellum.com>
|
||||
David Goldberg <gberg1@users.noreply.github.com>
|
||||
David Granado <davidjgranado@gmail.com>
|
||||
David Greenspan <dgreenspan@alum.mit.edu>
|
||||
David Hellsing <david@aino.se>
|
||||
David Hu <davidhu91@gmail.com>
|
||||
David Khourshid <davidkpiano@gmail.com>
|
||||
David Mininger <dmininger@gmail.com>
|
||||
David Neubauer <davidneub@gmail.com>
|
||||
David Percy <davetp425@gmail.com>
|
||||
Dean Shi <dnshi@users.noreply.github.com>
|
||||
Denis Sokolov <denis@sokolov.cc>
|
||||
Deniss Jacenko <deniss.jacenko+github@gmail.com>
|
||||
Dennis Johnson <djohnson@rallydev.com>
|
||||
Devon Blandin <dblandin@gmail.com>
|
||||
Devon Harvey <devonharvey@gmail.com>
|
||||
Dmitrii Abramov <dmitrii@rheia.us>
|
||||
Dmitriy Rozhkov <dmitriy.rozhkov@xing.com>
|
||||
Dmitry Blues <dmitri.blyus@gmail.com>
|
||||
Dmitry Mazuro <dmitry.mazuro@icloud.com>
|
||||
Domenico Matteo <matteo.domenico@gmail.com>
|
||||
Don Abrams <donabrams@gmail.com>
|
||||
Dongsheng Liu <bellanchor@gmail.com>
|
||||
Dustan Kasten <dustan.kasten@gmail.com>
|
||||
Dustin Getz <dgetz@wingspan.com>
|
||||
Dylan Harrington <dylanharrington@gmail.com>
|
||||
@@ -186,7 +153,6 @@ Eric Schoffstall <contra@wearefractal.com>
|
||||
Erik Harper <eharper@mixpo.com>
|
||||
Espen Hovlandsdal <rexxars@gmail.com>
|
||||
Evan Coonrod <evan@paloalto.com>
|
||||
Evan Vosberg <evanvosberg@urban.to>
|
||||
Fabio M. Costa <fabiomcosta@gmail.com>
|
||||
Federico Rampazzo <frampone@gmail.com>
|
||||
Felipe Oliveira Carvalho <felipekde@gmail.com>
|
||||
@@ -196,15 +162,11 @@ Fernando Correia <fernando@servicero.com>
|
||||
Frankie Bagnardi <f.bagnardi@gmail.com>
|
||||
François-Xavier Bois <fxbois@gmail.com>
|
||||
Fred Zhao <fredz@fb.com>
|
||||
Freddy Rangel <frederick.rangel@gmail.com>
|
||||
Fyodor Ivanishchev <cbrwizard@gmail.com>
|
||||
G Scott Olson <gscottolson@gmail.com>
|
||||
G. Kay Lee <balancetraveller+github@gmail.com>
|
||||
Gabe Levi <gabelevi@gmail.com>
|
||||
Gajus Kuizinas <g.kuizinas@anuary.com>
|
||||
Gareth Nicholson <gareth.nic@gmail.com>
|
||||
Garren Smith <garren.smith@gmail.com>
|
||||
Gavin McQuistin <gavin@kickfiredesign.com>
|
||||
Geert Pasteels <geert.pasteels@gmail.com>
|
||||
Geert-Jan Brits <gbrits@gmail.com>
|
||||
George A Sisco III <george.sisco@gmail.com>
|
||||
@@ -225,52 +187,39 @@ Harshad Sabne <harshadsabne@users.noreply.github.com>
|
||||
Hekar Khani <hekark@gmail.com>
|
||||
Hendrik Swanepoel <hendrik.swanepoel@gmail.com>
|
||||
Henrik Nyh <henrik@nyh.se>
|
||||
Henry Wong <henryw4k@gmail.com>
|
||||
Henry Zhu <hi@henryzoo.com>
|
||||
Hideo Matsumoto <hideo-m@pekeq.com>
|
||||
Hou Chia <kchia87@gmail.com>
|
||||
Huang-Wei Chang <chang.huangwei.01@gmail.com>
|
||||
Hugo Agbonon <hugo@agbonon.fr>
|
||||
Hugo Jobling <me@thisishugo.com>
|
||||
Hyeock Kwon <doublus@gmail.com>
|
||||
Héliton Nordt <hnordt@hnordt.com>
|
||||
Ian Obermiller <ian@obermillers.com>
|
||||
Ignacio Carbajo <icarbajop@gmail.com>
|
||||
Igor Scekic <igorscekic2@gmail.com>
|
||||
Ilia Pavlenkov <dortonway@gmail.com>
|
||||
Ilya Shuklin <ilya.shuklin@gmail.com>
|
||||
Ilyá Belsky <gelias.gbelsky@gmail.com>
|
||||
Ingvar Stepanyan <me@rreverser.com>
|
||||
Irae Carvalho <irae@irae.pro.br>
|
||||
Isaac Salier-Hellendag <isaac@fb.com>
|
||||
Iurii Kucherov <yuyokk@gmail.com>
|
||||
Ivan Kozik <ivan@ludios.org>
|
||||
Ivan Krechetov <ikr@ikr.su>
|
||||
Ivan Vergiliev <ivan.vergiliev@gmail.com>
|
||||
J. Andrew Brassington <jabbrass@zoho.com>
|
||||
J. Renée Beach <splendidnoise@gmail.com>
|
||||
JD Isaacks <jd@jisaacks.com>
|
||||
JJ Weber <jj.weber@gmail.com>
|
||||
JW <JW00000@gmail.com>
|
||||
Jack Zhang <jzhang31191@gmail.com>
|
||||
Jackie Wung <jacquelinewung@gmail.com>
|
||||
Jacob Gable <jacob.gable@gmail.com>
|
||||
Jacob Greenleaf <jake@imgur.com>
|
||||
Jae Hun Ro <jhr24@duke.edu>
|
||||
Jaeho Lee <me@jaeholee.org>
|
||||
Jaime Mingo <j.mingov@3boll.com>
|
||||
Jake Worth <jakeworth82@gmail.com>
|
||||
Jakub Malinowski <jakubmal@gmail.com>
|
||||
James <james@mystrata.com>
|
||||
James Brantly <james@jbrantly.com>
|
||||
James Burnett <jtburnett@tribune.com>
|
||||
James Friend <james@jsdf.co>
|
||||
James Ide <ide@fb.com>
|
||||
James Long <longster@gmail.com>
|
||||
James Pearce <jpearce@fb.com>
|
||||
James Seppi <james.seppi@gmail.com>
|
||||
James South <james_south@hotmail.com>
|
||||
James Wen <jrw2175@columbia.edu>
|
||||
Jamie Wong <jamie.lf.wong@gmail.com>
|
||||
Jamis Charles <jacharles@paypal.com>
|
||||
Jamison Dance <jergason@gmail.com>
|
||||
@@ -296,7 +245,6 @@ Jeff Kolesky <github@kolesky.com>
|
||||
Jeff Morrison <jeff@anafx.com>
|
||||
Jeff Welch <whatthejeff@gmail.com>
|
||||
Jeffrey Lin <lin.jeffrey@gmail.com>
|
||||
Jeremy Fairbank <elpapapollo@gmail.com>
|
||||
Jesse Skinner <jesse@thefutureoftheweb.com>
|
||||
Jignesh Kakadiya <jigneshhk1992@gmail.com>
|
||||
Jim OBrien <jimobrien930@gmail.com>
|
||||
@@ -304,19 +252,14 @@ Jim Sproch <jsproch@fb.com>
|
||||
Jimmy Jea <jimjea@gmail.com>
|
||||
Jing Chen <jingc@fb.com>
|
||||
Jinwoo Oh <arkist@gmail.com>
|
||||
Jinxiu Lee <lee.jinxiu@gmail.com>
|
||||
Jiyeon Seo <zzzeons@gmail.com>
|
||||
Jody McIntyre <scjody@modernduck.com>
|
||||
Joe Critchley <joecritch@gmail.com>
|
||||
Joe Stein <joeaarons@gmail.com>
|
||||
Joel Auterson <joel.auterson@googlemail.com>
|
||||
Johannes Baiter <johannes.baiter@gmail.com>
|
||||
Johannes Emerich <johannes@emerich.de>
|
||||
Johannes Lumpe <johannes@johanneslumpe.de>
|
||||
John Heroy <johnheroy@users.noreply.github.com>
|
||||
John Ryan <tjfryan@fb.com>
|
||||
John Watson <jwatson@fb.com>
|
||||
John-David Dalton <john.david.dalton@gmail.com>
|
||||
Jon Beebe <jon.beebe@daveramsey.com>
|
||||
Jon Chester <jonchester@fb.com>
|
||||
Jon Hester <jon.d.hester@gmail.com>
|
||||
@@ -326,7 +269,6 @@ Jon Tewksbury <jontewks@gmail.com>
|
||||
Jonas Enlund <jonas.enlund@gmail.com>
|
||||
Jonas Gebhardt <jonas@instagram.com>
|
||||
Jonathan Hsu <jhiswin@gmail.com>
|
||||
Jonathan Persson <persson.jonathan@gmail.com>
|
||||
Jordan Harband <ljharb@gmail.com>
|
||||
Jordan Walke <jordojw@gmail.com>
|
||||
Jorrit Schippers <jorrit@ncode.nl>
|
||||
@@ -334,9 +276,7 @@ Joseph Nudell <joenudell@gmail.com>
|
||||
Joseph Savona <joesavona@fb.com>
|
||||
Josh Bassett <josh.bassett@gmail.com>
|
||||
Josh Duck <josh@fb.com>
|
||||
Josh Perez <josh.perez@airbnb.com>
|
||||
Josh Yudaken <yud@instagram.com>
|
||||
Joshua Evans <joshua.evans@quantified.co>
|
||||
Joshua Go <joshuago@gmail.com>
|
||||
Joshua Goldberg <jsgoldberg90@gmail.com>
|
||||
Joshua Ma <me@joshma.com>
|
||||
@@ -345,34 +285,23 @@ Juan Serrano <germ13@users.noreply.github.com>
|
||||
Julen Ruiz Aizpuru <julenx@gmail.com>
|
||||
Julian Viereck <julian.viereck@gmail.com>
|
||||
Julien Bordellier <git@julienbordellier.com>
|
||||
Julio Lopez <ljuliom@gmail.com>
|
||||
Jun Wu <quark@lihdd.net>
|
||||
Juraj Dudak <jdudak@fb.com>
|
||||
Justas Brazauskas <brazauskasjustas@gmail.com>
|
||||
Justin Jaffray <justinjaffray@khanacademy.org>
|
||||
Justin Robison <jrobison151@gmail.com>
|
||||
Justin Woo <moomoowoo@gmail.com>
|
||||
Kale <krydrogen@gmail.com>
|
||||
Kamron Batman <kamronbatman@users.noreply.github.com>
|
||||
Karl Mikkelsen <karl@kingkarl.com>
|
||||
Karpich Dmitry <karpich@gollard.ru>
|
||||
Keito Uchiyama <projects@keito.me>
|
||||
Ken Powers <ken@kenpowers.net>
|
||||
Kent C. Dodds <kent@doddsfamily.us>
|
||||
Kevin Cheng <09chengk@gmail.com>
|
||||
Kevin Coughlin <kevintcoughlin@gmail.com>
|
||||
Kevin Huang <huang.kev@gmail.com>
|
||||
Kevin Lau <thekevlau@gmail.com>
|
||||
Kevin Old <kevin@kevinold.com>
|
||||
Kevin Robinson <krobinson@twitter.com>
|
||||
Kewei Jiang <jkewei328@hotmail.com>
|
||||
Kier Borromeo <seraphipod@gmail.com>
|
||||
KimCoding <jeokrang@hanmail.net>
|
||||
Kirk Steven Hansen <hanski07@kirk-hansens-macbook.local>
|
||||
Kit Randel <kit@nocturne.net.nz>
|
||||
Kohei TAKATA <kt.koheitakata@gmail.com>
|
||||
Koo Youngmin <youngmin@youngminz.kr>
|
||||
Krystian Karczewski <karcz.k@gmail.com>
|
||||
Kunal Mehta <k.mehta@berkeley.edu>
|
||||
Kurt Ruppel <me@kurtruppel.com>
|
||||
Kyle Kelley <rgbkrk@gmail.com>
|
||||
@@ -382,7 +311,6 @@ Laurent Etiemble <laurent.etiemble@monobjc.net>
|
||||
Lee Byron <lee@leebyron.com>
|
||||
Lee Jaeyoung <jaeyoung@monodiary.net>
|
||||
Lei <tendant@gmail.com>
|
||||
Leland Richardson <leland.m.richardson@gmail.com>
|
||||
Leon Fedotov <LeonFedotov@users.noreply.github.com>
|
||||
Leon Yip <lyip1992@users.noreply.github.com>
|
||||
Leonardo YongUk Kim <dalinaum@gmail.com>
|
||||
@@ -390,99 +318,71 @@ Levi Buzolic <levibuzolic@gmail.com>
|
||||
Levi McCallum <levi@levimccallum.com>
|
||||
Lily <qvang.j@gmail.com>
|
||||
Logan Allen <loganfynne@gmail.com>
|
||||
Lovisa Svallingson <lovisasvallingson@gmail.com>
|
||||
Ludovico Fischer <livrerie@gmail.com>
|
||||
Luigy Leon <luichi.19@gmail.com>
|
||||
Luke Horvat <lukehorvat@gmail.com>
|
||||
MIKAMI Yoshiyuki <yoshuki@saikyoline.jp>
|
||||
Maher Beg <maherbeg@gmail.com>
|
||||
Manas <prometheansacrifice@gmail.com>
|
||||
Marcin K. <katzoo@github.mail>
|
||||
Marcin Kwiatkowski <marcin.kwiatkowski@hotmail.com>
|
||||
Marcin Szczepanski <marcins@gmail.com>
|
||||
Mariano Desanze <protronm@gmail.com>
|
||||
Marjan <marjan.georgiev@gmail.com>
|
||||
Mark Anderson <undernewmanagement@users.noreply.github.com>
|
||||
Mark Funk <mfunk86@gmail.com>
|
||||
Mark Funk <mark@boomtownroi.com>
|
||||
Mark Hintz <markohintz@gmail.com>
|
||||
Mark IJbema <markijbema@gmail.com>
|
||||
Mark Murphy <murphy.mark@live.ca>
|
||||
Mark Richardson <echo@fb.com>
|
||||
Mark Rushakoff <mark@influxdb.com>
|
||||
Mark Sun <sunmark14@gmail.com>
|
||||
Marlon Landaverde <milanlandaverde@gmail.com>
|
||||
Marshall Roch <mroch@fb.com>
|
||||
Martin Andert <mandert@gmail.com>
|
||||
Martin Hujer <mhujer@gmail.com>
|
||||
Martin Jul <martin@mjul.com>
|
||||
Martin Konicek <mkonicek@fb.com>
|
||||
Martin Mihaylov <martomi@users.noreply.github.com>
|
||||
Masaki KOBAYASHI <makky.4d6b.3f5@gmail.com>
|
||||
Mathieu M-Gosselin <mathieumg@gmail.com>
|
||||
Mathieu Savy <savy.mathieu@gmail.com>
|
||||
Matias Singers <mail@matiassingers.com>
|
||||
Matsunoki <himkt@klis.tsukuba.ac.jp>
|
||||
Matt Brookes <matt@brookes.net>
|
||||
Matt Dunn-Rankin <mdunnrankin@gmail.com>
|
||||
Matt Harrison <mt.harrison86@gmail.com>
|
||||
Matt Huggins <matt.huggins@gmail.com>
|
||||
Matt Stow <matt.stow@foxsports.com.au>
|
||||
Matt Zabriskie <mzabriskie@gmail.com>
|
||||
Matthew Dapena-Tretter <m@tthewwithanm.com>
|
||||
Matthew Herbst <mherbst@chegg.com>
|
||||
Matthew Hodgson <matthew@matrix.org>
|
||||
Matthew Johnston <matthewjohnston4@outlook.com>
|
||||
Matthew King <mking@users.noreply.github.com>
|
||||
Matthew Looi <looi.matthew@gmail.com>
|
||||
Matthew Miner <matthew@matthewminer.com>
|
||||
Matthias Le Brun <mlbli@me.com>
|
||||
Matti Nelimarkka <matti.nelimarkka@hiit.fi>
|
||||
Mattijs Kneppers <mattijs@arttech.nl>
|
||||
Max F. Albrecht <1@178.is>
|
||||
Max Heiber <max.heiber@gmail.com>
|
||||
Max Stoiber <contact@mstoiber.com>
|
||||
Maxi Ferreira <charca@gmail.com>
|
||||
Maxim Abramchuk <MaximAbramchuck@gmail.com>
|
||||
Merrick Christensen <merrick.christensen@gmail.com>
|
||||
Mert Kahyaoğlu <mertkahyaoglu93@gmail.com>
|
||||
Michael Chan <mijoch@gmail.com>
|
||||
Michael McDermott <michael@mgmcdermott.com>
|
||||
Michael Randers-Pehrson <michael.rp@gmail.com>
|
||||
Michael Ridgway <mridgway@yahoo-inc.com>
|
||||
Michael Warner <MichaelJWarner@hotmail.com>
|
||||
Michael Wiencek <mwtuea@gmail.com>
|
||||
Michael Ziwisky <mikezx@gmail.com>
|
||||
Michal Srb <xixixao@seznam.cz>
|
||||
Michelle Todd <himichelletodd@gmail.com>
|
||||
Mihai Parparita <mihai.parparita@gmail.com>
|
||||
Mike D Pilsbury <mike.pilsbury@gmail.com>
|
||||
Mike Groseclose <mike.groseclose@gmail.com>
|
||||
Mike Nordick <mnordick>
|
||||
Mikolaj Dadela <mikolaj.dadela@hgv-online.de>
|
||||
Miles Johnson <mileswjohnson@gmail.com>
|
||||
Minwe LUO <minwe@yunshipei.com>
|
||||
Miorel Palii <miorel@fb.com>
|
||||
Morhaus <alexandre.kirszenberg@gmail.com>
|
||||
Moshe Kolodny <kolodny.github@gmail.com>
|
||||
Mouad Debbar <mdebbar@fb.com>
|
||||
Murad <rogozhnikoff@users.noreply.github.com>
|
||||
Murray M. Moss <murray@mmoss.name>
|
||||
Nadeesha Cabral <nadeesha.cabral@gmail.com>
|
||||
Naman Goel <naman34@gmail.com>
|
||||
Nate Hunzaker <nate.hunzaker@gmail.com>
|
||||
Nate Lee <nathaniel.jy.lee88@gmail.com>
|
||||
Nathan Smith <NogsMPLS@users.noreply.github.com>
|
||||
Nathan White <nw@nwhite.net>
|
||||
Nee <944316342@qq.com>
|
||||
Neri Marschik <marschik_neri@cyberagent.co.jp>
|
||||
Nguyen Truong Duy <truongduy134@yahoo.com>
|
||||
Nicholas Bergson-Shilcock <me@nicholasbs.net>
|
||||
Nicholas Clawson <nickclaw@users.noreply.github.com>
|
||||
Nick Balestra <nickbalestra@users.noreply.github.com>
|
||||
Nick Fitzgerald <fitzgen@gmail.com>
|
||||
Nick Gavalas <njg57@cornell.edu>
|
||||
Nick Merwin <nick@lemurheavy.com>
|
||||
Nick Presta <nick@nickpresta.ca>
|
||||
Nick Raienko <enaqxx@gmail.com>
|
||||
Nick Thompson <ncthom91@gmail.com>
|
||||
Nick Williams <WickyNilliams@users.noreply.github.com>
|
||||
@@ -498,10 +398,8 @@ Owen Coutts <owenc@fb.com>
|
||||
Pablo Lacerda de Miranda <pablolm@yahoo-inc.com>
|
||||
Paolo Moretti <moretti@users.noreply.github.com>
|
||||
Pascal Hartig <passy@twitter.com>
|
||||
Patrick <info@telepark.de>
|
||||
Patrick Laughlin <patrick@laughl.info>
|
||||
Patrick Stapleton <github@gdi2290.com>
|
||||
Paul Benigeri <me@benigeri.com>
|
||||
Paul Harper <benekastah@gmail.com>
|
||||
Paul O’Shannessy <paul@oshannessy.com>
|
||||
Paul Seiffert <paul.seiffert@gmail.com>
|
||||
@@ -511,25 +409,19 @@ Pete Hunt <floydophone@gmail.com>
|
||||
Peter Blazejewicz <peter.blazejewicz@gmail.com>
|
||||
Peter Cottle <pcottle@fb.com>
|
||||
Peter Jaros <peter.a.jaros@gmail.com>
|
||||
Peter Newnham <peter.newnham@appsbroker.com>
|
||||
Petri Lehtinen <petri@digip.org>
|
||||
Petri Lievonen <plievone@cc.hut.fi>
|
||||
Pieter Vanderwerff <me@pieter.io>
|
||||
Pouja Nikray <poujanik@gmail.com>
|
||||
Prathamesh Sonpatki <csonpatki@gmail.com>
|
||||
Prayag Verma <prayag.verma@gmail.com>
|
||||
Preston Parry <ClimbsRocks@users.noreply.github.com>
|
||||
Rafael <rafael.garcia@clever.com>
|
||||
Rafal Dittwald <rafal.dittwald@gmail.com>
|
||||
Rainer Oviir <roviir@gmail.com>
|
||||
Rajat Sehgal <rajatsehgal1988@gmail.com>
|
||||
Rajiv Tirumalareddy <rajivtreddy@gmail.com>
|
||||
Ram Kaniyur <quadrupleslap@users.noreply.github.com>
|
||||
Randall Randall <randall@randallsquared.com>
|
||||
Ray <ray@tomo.im>
|
||||
Raymond Ha <raymond@shraymonks.com>
|
||||
Reed Loden <reed@reedloden.com>
|
||||
Remko Tronçon <git@el-tramo.be>
|
||||
Richard D. Worth <rdworth@gmail.com>
|
||||
Richard Feldman <richard.t.feldman@gmail.com>
|
||||
Richard Kho <hello@richardkho.com>
|
||||
@@ -537,22 +429,16 @@ Richard Littauer <richard.littauer@gmail.com>
|
||||
Richard Livesey <Livesey7@hotmail.co.uk>
|
||||
Richard Wood <rwoodnz@gmail.com>
|
||||
Rick Beerendonk <rick@beerendonk.com>
|
||||
Rick Ford <rickfordrick@gmail.com>
|
||||
Riley Tomasek <riley.tomasek@gmail.com>
|
||||
Rob Arnold <robarnold@cs.cmu.edu>
|
||||
Robert Binna <rbinna@gmail.com>
|
||||
Robert Knight <robert.knight@mendeley.com>
|
||||
Robert Sedovsek <robert.sedovsek@gmail.com>
|
||||
Robin Berjon <robin@berjon.com>
|
||||
Robin Frischmann <robin@rofrischmann.de>
|
||||
Roman Pominov <rpominov+github@gmail.com>
|
||||
Roman Vanesyan <roman.vanesyan@gmail.com>
|
||||
Russ <russwirtz@gmail.com>
|
||||
Ryan Seddon <seddon.ryan@gmail.com>
|
||||
Sahat Yalkabov <sakhat@gmail.com>
|
||||
Saif Hakim <saif@benchling.com>
|
||||
Saiichi Hashimoto <saiichihashimoto@gmail.com>
|
||||
Sam Beveridge <sbeveridge@saltstack.com>
|
||||
Sam Saccone <samccone@gmail.com>
|
||||
Sam Selikoff <sam.selikoff@gmail.com>
|
||||
Samy Al Zahrani <samy@sadeem.net>
|
||||
@@ -561,9 +447,7 @@ Scott Burch <scott@bulldoginfo.com>
|
||||
Scott Feeney <scott@oceanbase.org>
|
||||
Sean Kinsey <oyvind@fb.com>
|
||||
Sebastian Markbåge <sebastian@calyptus.eu>
|
||||
Sebastian McKenzie <sebmck@gmail.com>
|
||||
Seoh Char <devthewild@gmail.com>
|
||||
Sercan Eraslan <sercan.eraslan@sahibinden.com>
|
||||
Serg <undrdog@yandex.ru>
|
||||
Sergey Generalov <sergey@genbit.ru>
|
||||
Sergey Rubanov <chi187@gmail.com>
|
||||
@@ -572,25 +456,18 @@ Shane O'Sullivan <shaneosullivan1@gmail.com>
|
||||
Shaun Trennery <shaun.trennery@gmail.com>
|
||||
ShihChi Huang <hhuang@netflix.com>
|
||||
Shim Won <marocchino@gmail.com>
|
||||
Shinnosuke Watanabe <snnskwtnb@gmail.com>
|
||||
Shogun Sea <shogunsea08@gmail.com>
|
||||
Shota Kubota <kubosho@users.noreply.github.com>
|
||||
Shripad K <assortmentofsorts@gmail.com>
|
||||
Sibi <psibi2000@gmail.com>
|
||||
Simen Bekkhus <sbekkhus91@gmail.com>
|
||||
Simon Højberg <r.hackr@gmail.com>
|
||||
Simon Welsh <simon@simon.geek.nz>
|
||||
Simone Vittori <hello@simonewebdesign.it>
|
||||
Soichiro Kawamura <mail@w-st.com>
|
||||
Sophia Westwood <sophia@quip.com>
|
||||
Sota Ohara <ohrst.18@gmail.com>
|
||||
Spencer Handley <spencerhandley@gmail.com>
|
||||
Stefan Dombrowski <sdo451@gmail.com>
|
||||
Stephen Murphy <smurphy3@apple.com>
|
||||
Sterling Cobb <sterlingcobb@gmail.com>
|
||||
Steve Baker <_steve_@outlook.com>
|
||||
Steven Luscher <react@steveluscher.com>
|
||||
Steven Vachon <contact@svachon.com>
|
||||
Stoyan Stefanov <ssttoo@ymail.com>
|
||||
Sundeep Malladi <sundeep.malladi@gmail.com>
|
||||
Sunny Juneja <me@sunnyjuneja.com>
|
||||
@@ -601,11 +478,9 @@ Sławomir Laskowski <laskowski.box@gmail.com>
|
||||
Taeho Kim <dittos@gmail.com>
|
||||
Tay Yang Shun <tay.yang.shun@gmail.com>
|
||||
Ted Kim <ted@vcnc.co.kr>
|
||||
Tengfei Guo <terryr3rd@yeah.net>
|
||||
Teodor Szente <teodor98sz@gmail.com>
|
||||
Thomas Aylott <oblivious@subtlegradient.com>
|
||||
Thomas Boyt <thomas.boyt@venmo.com>
|
||||
Thomas Broadley <buriedunderbooks@hotmail.com>
|
||||
Thomas Reggi <socialtr@gmail.com>
|
||||
Thomas Röggla <t.roggla@cwi.nl>
|
||||
Thomas Shaddox <thomas@heyzap.com>
|
||||
@@ -615,15 +490,12 @@ Tienchai Wirojsaksaree <tienchai@fb.com>
|
||||
Tim Routowicz <troutowicz@gmail.com>
|
||||
Tim Schaub <tschaub@users.noreply.github.com>
|
||||
Timothy Yung <yungsters@gmail.com>
|
||||
Timur Carpeev <timuric@users.noreply.github.com>
|
||||
Tobias Reiss <tag+github@basecode.de>
|
||||
Tom Duncalf <tom@tomduncalf.com>
|
||||
Tom Haggie <thaggie@gmail.com>
|
||||
Tom Hauburger <thauburger@gmail.com>
|
||||
Tom MacWright <tom@macwright.org>
|
||||
Tom Occhino <tomocchino@gmail.com>
|
||||
Tomasz Kołodziejski <tkolodziejski@gmail.com>
|
||||
Tomoya Suzuki <tmysz.dev@gmail.com>
|
||||
Tony Spiro <tspiro@tonyspiro.com>
|
||||
Toru Kobayashi <koba0004@gmail.com>
|
||||
Trinh Hoang Nhu <trinhhoangnhu@gmail.com>
|
||||
@@ -634,17 +506,14 @@ Vadim Chernysh <chernysh.vadim@gmail.com>
|
||||
Varun Rau <varunrau@gmail.com>
|
||||
Vasiliy Loginevskiy <Yeti.or@gmail.com>
|
||||
Victor Alvarez <v.alvarez312@gmail.com>
|
||||
Victor Homyakov <vkhomyackov@gmail.com>
|
||||
Victor Koenders <victor.koenders@gmail.com>
|
||||
Ville Immonen <ville.immonen@iki.fi>
|
||||
Vincent Riemer <vincentriemer@gmail.com>
|
||||
Vincent Siao <vincent@asana.com>
|
||||
Vipul A M <vipulnsward@gmail.com>
|
||||
Vitaly Kramskikh <vkramskikh@gmail.com>
|
||||
Vitor Balocco <vitorbal@gmail.com>
|
||||
Vjeux <vjeuxx@gmail.com>
|
||||
Volkan Unsal <spocksplanet@gmail.com>
|
||||
Wander Wang <wander.wang@ismole.com>
|
||||
Wayne Larsen <wayne@larsen.st>
|
||||
WickyNilliams <WickyNilliams@MBA>
|
||||
Wincent Colaiuta <win@wincent.com>
|
||||
@@ -656,14 +525,9 @@ Yasar icli <hello@yasaricli.com>
|
||||
YouBao Nong <noyobo@gmail.com>
|
||||
Yuichi Hagio <yhagio87@gmail.com>
|
||||
Yuriy Dybskiy <yuriy@dybskiy.com>
|
||||
Yutaka Nakajima <nakazye@gmail.com>
|
||||
Yuval Dekel <thedekel@fb.com>
|
||||
Zach Bruggeman <mail@bruggie.com>
|
||||
Zach Ramaekers <zramaekers@gmail.com>
|
||||
Zacharias <zachasme@users.noreply.github.com>
|
||||
Zeke Sikelianos <zeke@sikelianos.com>
|
||||
Zhangjd <zhang.jd@qq.com>
|
||||
adraeth <jerzy.mirecki@gmail.com>
|
||||
arush <arush@ilovebrands.net>
|
||||
brafdlog <brafdlog@gmail.com>
|
||||
chen <kikyous@163.com>
|
||||
@@ -674,23 +538,14 @@ davidxi <davidgraycn@gmail.com>
|
||||
dongmeng.ldm <dongmeng.ldm@alibaba-inc.com>
|
||||
iamchenxin <iamchenxin@gmail.com>
|
||||
iamdoron <doronpagot@gmail.com>
|
||||
iawia002 <z2d@jifangcheng.com>
|
||||
imagentleman <imagentlemail@gmail.com>
|
||||
koh-taka <koh-taka@users.noreply.github.com>
|
||||
kohashi85 <hako584@gmail.com>
|
||||
laiso <laiso@lai.so>
|
||||
leeyoungalias <leeyoungalias@qq.com>
|
||||
li.li <li.li@ele.me>
|
||||
maxprafferty <maxprafferty@gmail.com>
|
||||
rgarifullin <ringarifullin@gmail.com>
|
||||
songawee <dennis@songawee.com>
|
||||
sugarshin <shinsugar@gmail.com>
|
||||
wali-s <ahmad3y2k@hotmail.com>
|
||||
yiminghe <yiminghe@gmail.com>
|
||||
youmoo <youmoolee@gmail.com>
|
||||
zhangjg <jinguozhang@qq.com>
|
||||
zwhitchcox <zwhitchcox@gmail.com>
|
||||
Árni Hermann Reynisson <arnihr@gmail.com>
|
||||
元彦 <yuanyan@users.noreply.github.com>
|
||||
凌恒 <jiakun.dujk@alibaba-inc.com>
|
||||
张敏 <cookfront@gmail.com>
|
||||
|
||||
435
CHANGELOG.md
435
CHANGELOG.md
@@ -1,416 +1,3 @@
|
||||
## 15.4.2 (January 6, 2017)
|
||||
|
||||
### React
|
||||
|
||||
* Fixed build issues with the Brunch bundler. ([@gaearon](https://github.com/gaearon) in [#8686](https://github.com/facebook/react/pull/8686))
|
||||
* Improved error messages for invalid element types. ([@spicyj](https://github.com/spicyj) in [#8612](https://github.com/facebook/react/pull/8612))
|
||||
* Removed a warning about `getInitialState` when `this.state` is set. ([@bvaughn](https://github.com/bvaughn) in [#8594](https://github.com/facebook/react/pull/8594))
|
||||
* Removed some dead code. ([@diegomura](https://github.com/diegomura) in [#8050](https://github.com/facebook/react/pull/8050), [@dfrownfelter](https://github.com/dfrownfelter) in [#8597](https://github.com/facebook/react/pull/8597))
|
||||
|
||||
### React DOM
|
||||
|
||||
* Fixed a decimal point issue on uncontrolled number inputs. ([@nhunzaker](https://github.com/nhunzaker) in [#7750](https://github.com/facebook/react/pull/7750))
|
||||
* Fixed rendering of textarea placeholder in IE11. ([@aweary](https://github.com/aweary) in [#8020](https://github.com/facebook/react/pull/8020))
|
||||
* Worked around a script engine bug in IE9. ([@eoin](https://github.com/eoin) in [#8018](https://github.com/facebook/react/pull/8018))
|
||||
|
||||
### React Addons
|
||||
|
||||
* Fixed build issues in RequireJS and SystemJS environments. ([@gaearon](https://github.com/gaearon) in [#8686](https://github.com/facebook/react/pull/8686))
|
||||
* Added missing package dependencies. ([@kweiberth](https://github.com/kweiberth) in [#8467](https://github.com/facebook/react/pull/8467))
|
||||
|
||||
## 15.4.1 (November 22, 2016)
|
||||
|
||||
### React
|
||||
* Restructure variable assignment to work around a Rollup bug ([@gaearon](https://github.com/gaearon) in [#8384](https://github.com/facebook/react/pull/8384))
|
||||
|
||||
### React DOM
|
||||
* Fixed event handling on disabled button elements ([@spicyj](https://github.com/spicyj) in [#8387](https://github.com/facebook/react/pull/8387))
|
||||
* Fixed compatibility of browser build with AMD environments ([@zpao](https://github.com/zpao) in [#8374](https://github.com/facebook/react/pull/8374))
|
||||
|
||||
## 15.4.0 (November 16, 2016)
|
||||
|
||||
### React
|
||||
* React package and browser build no longer "secretly" includes React DOM. ([@sebmarkbage](https://github.com/sebmarkbage) in [#7164](https://github.com/facebook/react/pull/7164) and [#7168](https://github.com/facebook/react/pull/7168))
|
||||
* Required PropTypes now fail with specific messages for null and undefined. ([@chenglou](https://github.com/chenglou) in [#7291](https://github.com/facebook/react/pull/7291))
|
||||
* Improved development performance by freezing children instead of copying. ([@keyanzhang](https://github.com/keyanzhang) in [#7455](https://github.com/facebook/react/pull/7455))
|
||||
|
||||
### React DOM
|
||||
* Fixed occasional test failures when React DOM is used together with shallow renderer. ([@goatslacker](https://github.com/goatslacker) in [#8097](https://github.com/facebook/react/pull/8097))
|
||||
* Added a warning for invalid `aria-` attributes. ([@jessebeach](https://github.com/jessebeach) in [#7744](https://github.com/facebook/react/pull/7744))
|
||||
* Added a warning for using `autofocus` rather than `autoFocus`. ([@hkal](https://github.com/hkal) in [#7694](https://github.com/facebook/react/pull/7694))
|
||||
* Removed an unnecessary warning about polyfilling `String.prototype.split`. ([@nhunzaker](https://github.com/nhunzaker) in [#7629](https://github.com/facebook/react/pull/7629))
|
||||
* Clarified the warning about not calling PropTypes manually. ([@jedwards1211](https://github.com/jedwards1211) in [#7777](https://github.com/facebook/react/pull/7777))
|
||||
* The unstable `batchedUpdates` API now passes the wrapped function's return value through. ([@bgnorlov](https://github.com/bgnorlov) in [#7444](https://github.com/facebook/react/pull/7444))
|
||||
* Fixed a bug with updating text in IE 8. ([@mnpenner](https://github.com/mnpenner) in [#7832](https://github.com/facebook/react/pull/7832))
|
||||
|
||||
### React Perf
|
||||
* When ReactPerf is started, you can now view the relative time spent in components as a chart in Chrome Timeline. ([@gaearon](https://github.com/gaearon) in [#7549](https://github.com/facebook/react/pull/7549))
|
||||
|
||||
### React Test Utils
|
||||
* If you call `Simulate.click()` on a `<input disabled onClick={foo} />` then `foo` will get called whereas it didn't before. ([@nhunzaker](https://github.com/nhunzaker) in [#7642](https://github.com/facebook/react/pull/7642))
|
||||
|
||||
### React Test Renderer
|
||||
* Due to packaging changes, it no longer crashes when imported together with React DOM in the same file. ([@sebmarkbage](https://github.com/sebmarkbage) in [#7164](https://github.com/facebook/react/pull/7164) and [#7168](https://github.com/facebook/react/pull/7168))
|
||||
* `ReactTestRenderer.create()` now accepts `{createNodeMock: element => mock}` as an optional argument so you can mock refs with snapshot testing. ([@Aweary](https://github.com/Aweary) in [#7649](https://github.com/facebook/react/pull/7649), [#8261](https://github.com/facebook/react/pull/8261))
|
||||
|
||||
|
||||
## 15.3.2 (September 19, 2016)
|
||||
|
||||
### React
|
||||
- Remove plain object warning from React.createElement & React.cloneElement. ([@spudly](https://github.com/spudly) in [#7724](https://github.com/facebook/react/pull/7724))
|
||||
|
||||
### React DOM
|
||||
- Add `playsInline` to supported HTML attributes. ([@reaperhulk](https://github.com/reaperhulk) in [#7519](https://github.com/facebook/react/pull/7519))
|
||||
- Add `as` to supported HTML attributes. ([@kevinslin](https://github.com/kevinslin) in [#7582](https://github.com/facebook/react/pull/7582))
|
||||
- Improve DOM nesting validation warning about whitespace. ([@spicyj](https://github.com/spicyj) in [#7515](https://github.com/facebook/react/pull/7515))
|
||||
- Avoid "Member not found" exception in IE10 when calling `preventDefault()` in Synthetic Events. ([@g-palmer](https://github.com/g-palmer) in [#7411](https://github.com/facebook/react/pull/7411))
|
||||
- Fix memory leak in `onSelect` implementation. ([@AgtLucas](https://github.com/AgtLucas) in [#7533](https://github.com/facebook/react/pull/7533))
|
||||
- Improve robustness of `document.documentMode` checks to handle Google Tag Manager. ([@SchleyB](https://github.com/SchleyB) in [#7594](https://github.com/facebook/react/pull/7594))
|
||||
- Add more cases to controlled inputs warning. ([@marcin-mazurek](https://github.com/marcin-mazurek) in [#7544](https://github.com/facebook/react/pull/7544))
|
||||
- Handle case of popup blockers overriding `document.createEvent`. ([@Andarist](https://github.com/Andarist) in [#7621](https://github.com/facebook/react/pull/7621))
|
||||
- Fix issue with `dangerouslySetInnerHTML` and SVG in Internet Explorer. ([@zpao](https://github.com/zpao) in [#7618](https://github.com/facebook/react/pull/7618))
|
||||
- Improve handling of Japanese IME on Internet Explorer. ([@msmania](https://github.com/msmania) in [#7107](https://github.com/facebook/react/pull/7107))
|
||||
|
||||
### React Test Renderer
|
||||
- Support error boundaries. ([@millermedeiros](https://github.com/millermedeiros) in [#7558](https://github.com/facebook/react/pull/7558), [#7569](https://github.com/facebook/react/pull/7569), [#7619](https://github.com/facebook/react/pull/7619))
|
||||
- Skip null ref warning. ([@Aweary](https://github.com/Aweary) in [#7658](https://github.com/facebook/react/pull/7658))
|
||||
|
||||
### React Perf Add-on
|
||||
- Ensure lifecycle timers are stopped on errors. ([@gaearon](https://github.com/gaearon) in [#7548](https://github.com/facebook/react/pull/7548))
|
||||
|
||||
|
||||
## 15.3.1 (August 19, 2016)
|
||||
|
||||
### React
|
||||
|
||||
- Improve performance of development builds in various ways. ([@gaearon](https://github.com/gaearon) in [#7461](https://github.com/facebook/react/pull/7461), [#7463](https://github.com/facebook/react/pull/7463), [#7483](https://github.com/facebook/react/pull/7483), [#7488](https://github.com/facebook/react/pull/7488), [#7491](https://github.com/facebook/react/pull/7491), [#7510](https://github.com/facebook/react/pull/7510))
|
||||
- Cleanup internal hooks to improve performance of development builds. ([@gaearon](https://github.com/gaearon) in [#7464](https://github.com/facebook/react/pull/7464), [#7472](https://github.com/facebook/react/pull/7472), [#7481](https://github.com/facebook/react/pull/7481), [#7496](https://github.com/facebook/react/pull/7496))
|
||||
- Upgrade fbjs to pick up another performance improvement from [@gaearon](https://github.com/gaearon) for development builds. ([@zpao](https://github.com/zpao) in [#7532](https://github.com/facebook/react/pull/7532))
|
||||
- Improve startup time of React in Node. ([@zertosh](https://github.com/zertosh) in [#7493](https://github.com/facebook/react/pull/7493))
|
||||
- Improve error message of `React.Children.only`. ([@spicyj](https://github.com/spicyj) in [#7514](https://github.com/facebook/react/pull/7514))
|
||||
|
||||
### React DOM
|
||||
- Avoid `<input>` validation warning from browsers when changing `type`. ([@nhunzaker](https://github.com/nhunzaker) in [#7333](https://github.com/facebook/react/pull/7333))
|
||||
- Avoid "Member not found" exception in IE10 when calling `stopPropagation()` in Synthetic Events. ([@nhunzaker](https://github.com/nhunzaker) in [#7343](https://github.com/facebook/react/pull/7343))
|
||||
- Fix issue resulting in inability to update some `<input>` elements in mobile browsers. ([@keyanzhang](https://github.com/keyanzhang) in [#7397](https://github.com/facebook/react/pull/7397))
|
||||
- Fix memory leak in server rendering. ([@keyanzhang](https://github.com/keyanzhang) in [#7410](https://github.com/facebook/react/pull/7410))
|
||||
- Fix issue resulting in `<input type="range">` values not updating when changing `min` or `max`. ([@troydemonbreun](https://github.com/troydemonbreun) in [#7486](https://github.com/facebook/react/pull/7486))
|
||||
- Add new warning for rare case of attempting to unmount a container owned by a different copy of React. ([@ventuno](https://github.com/ventuno) in [#7456](https://github.com/facebook/react/pull/7456))
|
||||
|
||||
### React Test Renderer
|
||||
- Fix ReactTestInstance::toJSON() with empty top-level components. ([@Morhaus](https://github.com/Morhaus) in [#7523](https://github.com/facebook/react/pull/7523))
|
||||
|
||||
### React Native Renderer
|
||||
- Change `trackedTouchCount` invariant into a console.error for better reliability. ([@yungsters](https://github.com/yungsters) in [#7400](https://github.com/facebook/react/pull/7400))
|
||||
|
||||
|
||||
## 15.3.0 (July 29, 2016)
|
||||
|
||||
### React
|
||||
- Add `React.PureComponent` - a new base class to extend, replacing `react-addons-pure-render-mixin` now that mixins don't work with ES2015 classes. ([@spicyj](https://github.com/spicyj) in [#7195](https://github.com/facebook/react/pull/7195))
|
||||
- Add new warning when modifying `this.props.children`. ([@jimfb](https://github.com/jimfb) in [#7001](https://github.com/facebook/react/pull/7001))
|
||||
- Fixed issue with ref resolution order. ([@gaearon](https://github.com/gaearon) in [#7101](https://github.com/facebook/react/pull/7101))
|
||||
- Warn when mixin is undefined. ([@swaroopsm](https://github.com/swaroopsm) in [#6158](https://github.com/facebook/react/pull/6158))
|
||||
- Downgrade "unexpected batch number" invariant to a warning. ([@spicyj](https://github.com/spicyj) in [#7133](https://github.com/facebook/react/pull/7133))
|
||||
- Validate arguments to `oneOf` and `oneOfType` PropTypes sooner. ([@troydemonbreun](https://github.com/troydemonbreun) in [#6316](https://github.com/facebook/react/pull/6316))
|
||||
- Warn when calling PropTypes directly. ([@Aweary](https://github.com/Aweary) in [#7132](https://github.com/facebook/react/pull/7132), [#7194](https://github.com/facebook/react/pull/7194))
|
||||
- Improve warning when using Maps as children. ([@keyanzhang](https://github.com/keyanzhang) in [#7260](https://github.com/facebook/react/pull/7260))
|
||||
- Add additional type information to the `PropTypes.element` warning. ([@alexzherdev](https://github.com/alexzherdev) in [#7319](https://github.com/facebook/react/pull/7319))
|
||||
- Improve component identification in no-op `setState` warning. ([@keyanzhang](https://github.com/keyanzhang) in [#7326](https://github.com/facebook/react/pull/7326))
|
||||
|
||||
### React DOM
|
||||
- Fix issue with nested server rendering. ([@Aweary](https://github.com/Aweary) in [#7033](https://github.com/facebook/react/pull/7033))
|
||||
- Add `xmlns`, `xmlnsXlink` to supported SVG attributes. ([@salzhrani](https://github.com/salzhrani) in [#6471](https://github.com/facebook/react/pull/6471))
|
||||
- Add `referrerPolicy` to supported HTML attributes. ([@Aweary](https://github.com/Aweary) in [#7274](https://github.com/facebook/react/pull/7274))
|
||||
- Fix issue resulting in `<input type="range">` initial value being rounded. ([@troydemonbreun](https://github.com/troydemonbreun) in [#7251](https://github.com/facebook/react/pull/7251))
|
||||
|
||||
### React Test Renderer
|
||||
- Initial public release of package allowing more focused testing. Install with `npm install react-test-renderer`. ([@spicyj](https://github.com/spicyj) in [#6944](https://github.com/facebook/react/pull/6944), [#7258](https://github.com/facebook/react/pull/7258), [@iamdustan](https://github.com/iamdustan) in [#7362](https://github.com/facebook/react/pull/7362))
|
||||
|
||||
### React Perf Add-on
|
||||
- Fix issue resulting in excessive warnings when encountering an internal measurement error. ([@sassanh](https://github.com/sassanh) in [#7299](https://github.com/facebook/react/pull/7299))
|
||||
|
||||
### React TestUtils Add-on
|
||||
- Implement `type` property on for events created via `TestUtils.Simulate.*`. ([@yaycmyk](https://github.com/yaycmyk) in [#6154](https://github.com/facebook/react/pull/6154))
|
||||
- Fix crash when running TestUtils with the production build of React. ([@gaearon](https://github.com/gaearon) in [#7246](https://github.com/facebook/react/pull/7246))
|
||||
|
||||
|
||||
## 15.2.1 (July 8, 2016)
|
||||
|
||||
### React
|
||||
- Fix errant warning about missing React element. ([@gaearon](https://github.com/gaearon) in [#7193](https://github.com/facebook/react/pull/7193))
|
||||
- Better removal of dev-only code, leading to a small reduction in the minified production bundle size. ([@gaearon](https://github.com/gaearon) in [#7188](https://github.com/facebook/react/pull/7188), [#7189](https://github.com/facebook/react/pull/7189))
|
||||
|
||||
### React DOM
|
||||
- Add stack trace to null input value warning. ([@jimfb](https://github.com/jimfb) in [#7040](https://github.com/facebook/react/pull/7040))
|
||||
- Fix webcomponents example. ([@jalexanderfox](https://github.com/jalexanderfox) in [#7057](https://github.com/facebook/react/pull/7057))
|
||||
- Fix `unstable_renderSubtreeIntoContainer` so that context properly updates when linked to state. ([@gaearon](https://github.com/gaearon) in [#7125](https://github.com/facebook/react/pull/7125))
|
||||
- Improve invariant wording for void elements. ([@starkch](https://github.com/starkch) in [#7066](https://github.com/facebook/react/pull/7066))
|
||||
- Ensure no errors are thrown due to event handlers in server rendering. ([@rricard](https://github.com/rricard) in [#7127](https://github.com/facebook/react/pull/7127))
|
||||
- Fix regression resulting in `value`-less submit and reset inputs removing the browser-default text. ([@zpao](https://github.com/zpao) in [#7197](https://github.com/facebook/react/pull/7197))
|
||||
- Fix regression resulting in empty `name` attribute being added to inputs when not provided. ([@okonet](https://github.com/okonet) in [#7199](https://github.com/facebook/react/pull/7199))
|
||||
- Fix issue with nested server rendering. ([@Aweary](https://github.com/Aweary) in [#7033](https://github.com/facebook/react/pull/7033))
|
||||
|
||||
### React Perf Add-on
|
||||
- Make `ReactPerf.start()` work properly during lifecycle methods. ([@gaearon](https://github.com/gaearon) in [#7208](https://github.com/facebook/react/pull/7208)).
|
||||
|
||||
### React CSSTransitionGroup Add-on
|
||||
- Fix issue resulting in spurious unknown property warnings. ([@batusai513](https://github.com/batusai513) in [#7165](https://github.com/facebook/react/pull/7165))
|
||||
|
||||
### React Native Renderer
|
||||
- Improve error handling in cross-platform touch event handling. ([@yungsters](https://github.com/yungsters) in [#7143](https://github.com/facebook/react/pull/7143))
|
||||
|
||||
|
||||
## 15.2.0 (July 1, 2016)
|
||||
|
||||
### React
|
||||
- Add error codes to production invariants, with links to the view the full error text. ([@keyanzhang](https://github.com/keyanzhang) in [#6948](https://github.com/facebook/react/pull/6948))
|
||||
- Include component stack information in PropType validation warnings. ([@troydemonbreun](https://github.com/troydemonbreun) in [#6398](https://github.com/facebook/react/pull/6398), [@spicyj](https://github.com/spicyj) in [#6771](https://github.com/facebook/react/pull/6771))
|
||||
- Include component stack information in key warnings. ([@keyanzhang](https://github.com/keyanzhang) in [#6799](https://github.com/facebook/react/pull/6799))
|
||||
- Stop validating props at mount time, only validate at element creation. ([@keyanzhang](https://github.com/keyanzhang) in [#6824](https://github.com/facebook/react/pull/6824))
|
||||
- New invariant providing actionable error in missing instance case. ([@yungsters](https://github.com/yungsters) in [#6990](https://github.com/facebook/react/pull/6990))
|
||||
- Add `React.PropTypes.symbol` to support ES2015 Symbols as props. ([@puradox](https://github.com/puradox) in [#6377](https://github.com/facebook/react/pull/6377))
|
||||
- Fix incorrect coercion of ref or key that are undefined in development ([@gaearon](https://github.com/gaearon) in [#6880](https://github.com/facebook/react/pull/6880))
|
||||
- Fix a false positive when passing other element’s props to cloneElement ([@ericmatthys](https://github.com/ericmatthys) in [#6268](https://github.com/facebook/react/pull/6268))
|
||||
- Warn if you attempt to define `childContextTypes` on a functional component ([@Aweary](https://github.com/Aweary) in [#6933](https://github.com/facebook/react/pull/6933))
|
||||
|
||||
### React DOM
|
||||
- Add warning for unknown properties on DOM elements. ([@jimfb](https://github.com/jimfb) in [#6800](https://github.com/facebook/react/pull/6800), [@gm758](https://github.com/gm758) in [#7152](https://github.com/facebook/react/pull/7152))
|
||||
- Properly remove attributes from custom elements. ([@grassator](https://github.com/grassator) in [#6748](https://github.com/facebook/react/pull/6748))
|
||||
- Fix invalid unicode escape in attribute name regular expression. ([@nbjahan](https://github.com/nbjahan) in [#6772](https://github.com/facebook/react/pull/6772))
|
||||
- Add `onLoad` handling to `<link>` element. ([@roderickhsiao](https://github.com/roderickhsiao) in [#6815](https://github.com/facebook/react/pull/6815))
|
||||
- Add `onError` handling to `<source>` element. ([@wadahiro](https://github.com/wadahiro) in [#6941](https://github.com/facebook/react/pull/6941))
|
||||
- Handle `value` and `defaultValue` more accurately in the DOM. ([@jimfb](https://github.com/jimfb) in [#6406](https://github.com/facebook/react/pull/6406))
|
||||
- Fix events issue in environments with mutated `Object.prototype`. ([@Weizenlol](https://github.com/Weizenlol) in [#6886](https://github.com/facebook/react/pull/6886))
|
||||
- Fix issue where `is="null"` ended up in the DOM in Firefox. ([@darobin](https://github.com/darobin) in [#6896](https://github.com/facebook/react/pull/6896))
|
||||
- Improved performance of text escaping by using [escape-html](https://github.com/component/escape-html). ([@aickin](https://github.com/aickin) in [#6862](https://github.com/facebook/react/pull/6862))
|
||||
- Fix issue with `dangerouslySetInnerHTML` and SVG in Internet Explorer. ([@joshhunt](https://github.com/joshhunt) in [#6982](https://github.com/facebook/react/pull/6982))
|
||||
- Fix issue with `<textarea>` placeholders. ([@jimfb](https://github.com/jimfb) in [#7002](https://github.com/facebook/react/pull/7002))
|
||||
- Fix controlled vs uncontrolled detection of `<input type="radio"/>`. ([@jimfb](https://github.com/jimfb) in [#7003](https://github.com/facebook/react/pull/7003))
|
||||
- Improve performance of updating text content. ([@trueadm](https://github.com/trueadm) in [#7005](https://github.com/facebook/react/pull/7005))
|
||||
- Ensure controlled `<select>` components behave the same on initial render as they do on updates. ([@yiminghe](https://github.com/yiminghe) in [#5362](https://github.com/facebook/react/pull/5362))
|
||||
|
||||
### React Perf Add-on
|
||||
- Add `isRunning()` API. ([@nfcampos](https://github.com/nfcampos) in [#6763](https://github.com/facebook/react/pull/6763))
|
||||
- Improve accuracy of lifecycle hook timing. ([@gaearon](https://github.com/gaearon) in [#6858](https://github.com/facebook/react/pull/6858))
|
||||
- Fix internal errors when using ReactPerf with portal components. ([@gaearon](https://github.com/gaearon) in [#6860](https://github.com/facebook/react/pull/6860))
|
||||
- Fix performance regression. ([@spicyj](https://github.com/spicyj) in [#6770](https://github.com/facebook/react/pull/6770))
|
||||
- Add warning that ReactPerf is not enabled in production. ([@sashashakun](https://github.com/sashashakun) in [#6884](https://github.com/facebook/react/pull/6884))
|
||||
|
||||
### React CSSTransitionGroup Add-on
|
||||
- Fix timing issue with `null` node. ([@keyanzhang](https://github.com/keyanzhang) in [#6958](https://github.com/facebook/react/pull/6958))
|
||||
|
||||
### React Native Renderer
|
||||
- Dependencies on React Native modules use CommonJS requires instead of providesModule. ([@davidaurelio](https://github.com/davidaurelio) in [#6715](https://github.com/facebook/react/pull/6715))
|
||||
|
||||
|
||||
## 15.1.0 (May 20, 2016)
|
||||
|
||||
### React
|
||||
- Ensure we're using the latest `object-assign`, which has protection against a non-spec-compliant native `Object.assign`. ([@zpao](https://github.com/zpao) in [#6681](https://github.com/facebook/react/pull/6681))
|
||||
- Add a new warning to communicate that `props` objects passed to `createElement` must be plain objects. ([@richardscarrott](https://github.com/richardscarrott) in [#6134](https://github.com/facebook/react/pull/6134))
|
||||
- Fix a batching bug resulting in some lifecycle methods incorrectly being called multiple times. ([@spicyj](https://github.com/spicyj) in [#6650](https://github.com/facebook/react/pull/6650))
|
||||
|
||||
### React DOM
|
||||
- Fix regression in custom elements support. ([@jscissr](https://github.com/jscissr) in [#6570](https://github.com/facebook/react/pull/6570))
|
||||
- Stop incorrectly warning about using `onScroll` event handler with server rendering. ([@Aweary](https://github.com/Aweary) in [#6678](https://github.com/facebook/react/pull/6678))
|
||||
- Fix grammar in the controlled input warning. ([@jakeboone02](https://github.com/jakeboone02) in [#6657](https://github.com/facebook/react/pull/6657))
|
||||
- Fix issue preventing `<object>` nodes from being able to read `<param>` nodes in IE. ([@syranide](https://github.com/syranide) in [#6691](https://github.com/facebook/react/pull/6691))
|
||||
- Fix issue resulting in crash when using experimental error boundaries with server rendering. ([@jimfb](https://github.com/jimfb) in [#6694](https://github.com/facebook/react/pull/6694))
|
||||
- Add additional information to the controlled input warning. ([@borisyankov](https://github.com/borisyankov) in [#6341](https://github.com/facebook/react/pull/6341))
|
||||
|
||||
### React Perf Add-on
|
||||
- Completely rewritten to collect data more accurately and to be easier to maintain. ([@gaearon](https://github.com/gaearon) in [#6647](https://github.com/facebook/react/pull/6647), [#6046](https://github.com/facebook/react/pull/6046))
|
||||
|
||||
### React Native Renderer
|
||||
- Remove some special cases for platform specific branching. ([@sebmarkbage](https://github.com/sebmarkbage) in [#6660](https://github.com/facebook/react/pull/6660))
|
||||
- Remove use of `merge` utility. ([@sebmarkbage](https://github.com/sebmarkbage) in [#6634](https://github.com/facebook/react/pull/6634))
|
||||
- Renamed some modules to better indicate usage ([@javache](https://github.com/javache) in [#6643](https://github.com/facebook/react/pull/6643))
|
||||
|
||||
|
||||
## 15.0.2 (April 29, 2016)
|
||||
|
||||
### React
|
||||
- Removed extraneous files from npm package. ([@gaearon](https://github.com/gaearon) in [#6388](https://github.com/facebook/react/pull/6388))
|
||||
- Ensure `componentWillUnmount` is only called once. ([@jimfb](https://github.com/jimfb) in [#6613](https://github.com/facebook/react/pull/6613))
|
||||
|
||||
### ReactDOM
|
||||
- Fixed bug resulting in disabled buttons responding to mouse events in IE. ([@nhunzaker](https://github.com/nhunzaker) in [#6215](https://github.com/facebook/react/pull/6215))
|
||||
- Ensure `<option>`s are correctly selected when inside `<optgroup>`. ([@trevorsmith](https://github.com/trevorsmith) in [#6442](https://github.com/facebook/react/pull/6442))
|
||||
- Restore support for rendering into a shadow root. ([@Wildhoney](https://github.com/Wildhoney) in [#6462](https://github.com/facebook/react/pull/6462))
|
||||
- Ensure nested `<body>` elements are caught when warning for invalid markup. ([@keyanzhang](https://github.com/keyanzhang) in [#6469](https://github.com/facebook/react/pull/6469))
|
||||
- Improve warning when encountering multiple elements with the same key. ([@hkal](https://github.com/hkal) in [#6500](https://github.com/facebook/react/pull/6500))
|
||||
|
||||
### React TestUtils Add-on
|
||||
- Ensure that functional components do not have an owner. ([@gaearon](https://github.com/gaearon) in [#6362](https://github.com/facebook/react/pull/6362))
|
||||
- Handle invalid arguments to `scryRenderedDOMComponentsWithClass` better. ([@ipeters90](https://github.com/ipeters90) in [#6529](https://github.com/facebook/react/pull/6529))
|
||||
|
||||
### React Perf Add-on
|
||||
- Ignore DOM operations that occur outside the batch operation. ([@gaearon](https://github.com/gaearon) in [#6516](https://github.com/facebook/react/pull/6516))
|
||||
|
||||
### React Native Renderer
|
||||
- These files are now shipped inside the React npm package. They have no impact on React core or ReactDOM.
|
||||
|
||||
|
||||
## 15.0.1 (April 8, 2016)
|
||||
|
||||
### React
|
||||
- Restore `React.__spread` API to unbreak code compiled with some tools making use of this undocumented API. It is now officially deprecated. ([@zpao](https://github.com/zpao) in [#6444](https://github.com/facebook/react/pull/6444))
|
||||
|
||||
### ReactDOM
|
||||
- Fixed issue resulting in loss of cursor position in controlled inputs. ([@spicyj](https://github.com/spicyj) in [#6449](https://github.com/facebook/react/pull/6449))
|
||||
|
||||
|
||||
## 15.0.0 (April 7, 2016)
|
||||
|
||||
### Major changes
|
||||
|
||||
- **Initial render now uses `document.createElement` instead of generating HTML.** Previously we would generate a large string of HTML and then set `node.innerHTML`. At the time, this was decided to be faster than using `document.createElement` for the majority of cases and browsers that we supported. Browsers have continued to improve and so overwhelmingly this is no longer true. By using `createElement` we can make other parts of React faster. ([@spicyj](https://github.com/spicyj) in [#5205](https://github.com/facebook/react/pull/5205))
|
||||
- **`data-reactid` is no longer on every node.** As a result of using `document.createElement`, we can prime the node cache as we create DOM nodes, allowing us to skip a potential lookup (which used the `data-reactid` attribute). Root nodes will have a `data-reactroot` attribute and server generated markup will still contain `data-reactid`. ([@spicyj](https://github.com/spicyj) in [#5205](https://github.com/facebook/react/pull/5205))
|
||||
- **No more extra `<span>`s.** ReactDOM will now render plain text nodes interspersed with comment nodes that are used for demarcation. This gives us the same ability to update individual pieces of text, without creating extra nested nodes. If you were targeting these `<span>`s in your CSS, you will need to adjust accordingly. You can always render them explicitly in your components. ([@mwiencek](https://github.com/mwiencek) in [#5753](https://github.com/facebook/react/pull/5753))
|
||||
- **Rendering `null` now uses comment nodes.** Previously `null` would render to `<noscript>` elements. We now use comment nodes. This may cause issues if making use of `:nth-child` CSS selectors. While we consider this rendering behavior an implementation detail of React, it's worth noting the potential problem. ([@spicyj](https://github.com/spicyj) in [#5451](https://github.com/facebook/react/pull/5451))
|
||||
- **Functional components can now return `null`.** We added support for [defining stateless components as functions](/react/blog/2015/09/10/react-v0.14-rc1.html#stateless-function-components) in React 0.14. However, React 0.14 still allowed you to define a class component without extending `React.Component` or using `React.createClass()`, so [we couldn’t reliably tell if your component is a function or a class](https://github.com/facebook/react/issues/5355), and did not allow returning `null` from it. This issue is solved in React 15, and you can now return `null` from any component, whether it is a class or a function. ([@jimfb](https://github.com/jimfb) in [#5884](https://github.com/facebook/react/pull/5884))
|
||||
- **Improved SVG support.** All SVG tags are now fully supported. (Uncommon SVG tags are not present on the `React.DOM` element helper, but JSX and `React.createElement` work on all tag names.) All SVG attributes that are implemented by the browsers should be supported too. If you find any attributes that we have missed, please [let us know in this issue](https://github.com/facebook/react/issues/1657). ([@zpao](https://github.com/zpao) in [#6243](https://github.com/facebook/react/pull/6243))
|
||||
|
||||
### Breaking changes
|
||||
|
||||
- **No more extra `<span>`s.**
|
||||
- **`React.cloneElement()` now resolves `defaultProps`.** We fixed a bug in `React.cloneElement()` that some components may rely on. If some of the `props` received by `cloneElement()` are `undefined`, it used to return an element with `undefined` values for those props. We’re changing it to be consistent with `createElement()`. Now any `undefined` props passed to `cloneElement()` are resolved to the corresponding component’s `defaultProps`. ([@truongduy134](https://github.com/truongduy134) in [#5997](https://github.com/facebook/react/pull/5997))
|
||||
- **`ReactPerf.getLastMeasurements()` is opaque.** This change won’t affect applications but may break some third-party tools. We are [revamping `ReactPerf` implementation](https://github.com/facebook/react/pull/6046) and plan to release it during the 15.x cycle. The internal performance measurement format is subject to change so, for the time being, we consider the return value of `ReactPerf.getLastMeasurements()` an opaque data structure that should not be relied upon. ([@gaearon](https://github.com/gaearon) in [#6286](https://github.com/facebook/react/pull/6286))
|
||||
|
||||
#### Removed deprecations
|
||||
|
||||
These deprecations were introduced nine months ago in v0.14 with a warning and are removed:
|
||||
|
||||
- Deprecated APIs are removed from the `React` top-level export: `findDOMNode`, `render`, `renderToString`, `renderToStaticMarkup`, and `unmountComponentAtNode`. As a reminder, they are now available on `ReactDOM` and `ReactDOMServer`. ([@jimfb](https://github.com/jimfb) in [#5832](https://github.com/facebook/react/pull/5832))
|
||||
- Deprecated addons are removed: `batchedUpdates` and `cloneWithProps`. ([@jimfb](https://github.com/jimfb) in [#5859](https://github.com/facebook/react/pull/5859), [@zpao](https://github.com/zpao) in [#6016](https://github.com/facebook/react/pull/6016))
|
||||
- Deprecated component instance methods are removed: `setProps`, `replaceProps`, and `getDOMNode`. ([@jimfb](https://github.com/jimfb) in [#5570](https://github.com/facebook/react/pull/5570))
|
||||
- Deprecated CommonJS `react/addons` entry point is removed. As a reminder, you should use separate `react-addons-*` packages instead. This only applies if you use the CommonJS builds. ([@gaearon](https://github.com/gaearon) in [#6285](https://github.com/facebook/react/pull/6285))
|
||||
- Passing `children` to void elements like `<input>` was deprecated, and now throws an error. ([@jonhester](https://github.com/jonhester) in [#3372](https://github.com/facebook/react/pull/3372))
|
||||
- React-specific properties on DOM `refs` (e.g. `this.refs.div.props`) were deprecated, and are removed now. ([@jimfb](https://github.com/jimfb) in [#5495](https://github.com/facebook/react/pull/5495))
|
||||
|
||||
### New deprecations, introduced with a warning
|
||||
|
||||
Each of these changes will continue to work as before with a new warning until the release of React 16 so you can upgrade your code gradually.
|
||||
|
||||
- `LinkedStateMixin` and `valueLink` are now deprecated due to very low popularity. If you need this, you can use a wrapper component that implements the same behavior: [react-linked-input](https://www.npmjs.com/package/react-linked-input). ([@jimfb](https://github.com/jimfb) in [#6127](https://github.com/facebook/react/pull/6127))
|
||||
- Future versions of React will treat `<input value={null}>` as a request to clear the input. However, React 0.14 has been ignoring `value={null}`. React 15 warns you on a `null` input value and offers you to clarify your intention. To fix the warning, you may explicitly pass an empty string to clear a controlled input, or pass `undefined` to make the input uncontrolled. ([@antoaravinth](https://github.com/antoaravinth) in [#5048](https://github.com/facebook/react/pull/5048))
|
||||
- `ReactPerf.printDOM()` was renamed to `ReactPerf.printOperations()`, and `ReactPerf.getMeasurementsSummaryMap()` was renamed to `ReactPerf.getWasted()`. ([@gaearon](https://github.com/gaearon) in [#6287](https://github.com/facebook/react/pull/6287))
|
||||
|
||||
### New helpful warnings
|
||||
|
||||
- If you use a minified copy of the _development_ build, React DOM kindly encourages you to use the faster production build instead. ([@spicyj](https://github.com/spicyj) in [#5083](https://github.com/facebook/react/pull/5083))
|
||||
- React DOM: When specifying a unit-less CSS value as a string, a future version will not add `px` automatically. This version now warns in this case (ex: writing `style={{'{{'}}width: '300'}}`. Unitless *number* values like `width: 300` are unchanged. ([@pluma](https://github.com/pluma) in [#5140](https://github.com/facebook/react/pull/5140))
|
||||
- Synthetic Events will now warn when setting and accessing properties (which will not get cleared appropriately), as well as warn on access after an event has been returned to the pool. ([@kentcdodds](https://github.com/kentcdodds) in [#5940](https://github.com/facebook/react/pull/5940) and [@koba04](https://github.com/koba04) in [#5947](https://github.com/facebook/react/pull/5947))
|
||||
- Elements will now warn when attempting to read `ref` and `key` from the props. ([@prometheansacrifice](https://github.com/prometheansacrifice) in [#5744](https://github.com/facebook/react/pull/5744))
|
||||
- React will now warn if you pass a different `props` object to `super()` in the constructor. ([@prometheansacrifice](https://github.com/prometheansacrifice) in [#5346](https://github.com/facebook/react/pull/5346))
|
||||
- React will now warn if you call `setState()` inside `getChildContext()`. ([@raineroviir](https://github.com/raineroviir) in [#6121](https://github.com/facebook/react/pull/6121))
|
||||
- React DOM now attempts to warn for mistyped event handlers on DOM elements, such as `onclick` which should be `onClick`. ([@ali](https://github.com/ali) in [#5361](https://github.com/facebook/react/pull/5361))
|
||||
- React DOM now warns about `NaN` values in `style`. ([@jontewks](https://github.com/jontewks) in [#5811](https://github.com/facebook/react/pull/5811))
|
||||
- React DOM now warns if you specify both `value` and `defaultValue` for an input. ([@mgmcdermott](https://github.com/mgmcdermott) in [#5823](https://github.com/facebook/react/pull/5823))
|
||||
- React DOM now warns if an input switches between being controlled and uncontrolled. ([@TheBlasfem](https://github.com/TheBlasfem) in [#5864](https://github.com/facebook/react/pull/5864))
|
||||
- React DOM now warns if you specify `onFocusIn` or `onFocusOut` handlers as they are unnecessary in React. ([@jontewks](https://github.com/jontewks) in [#6296](https://github.com/facebook/react/pull/6296))
|
||||
- React now prints a descriptive error message when you pass an invalid callback as the last argument to `ReactDOM.render()`, `this.setState()`, or `this.forceUpdate()`. ([@conorhastings](https://github.com/conorhastings) in [#5193](https://github.com/facebook/react/pull/5193) and [@gaearon](https://github.com/gaearon) in [#6310](https://github.com/facebook/react/pull/6310))
|
||||
- Add-Ons: `TestUtils.Simulate()` now prints a helpful message if you attempt to use it with shallow rendering. ([@conorhastings](https://github.com/conorhastings) in [#5358](https://github.com/facebook/react/pull/5358))
|
||||
- PropTypes: `arrayOf()` and `objectOf()` provide better error messages for invalid arguments. ([@chicoxyzzy](https://github.com/chicoxyzzy) in [#5390](https://github.com/facebook/react/pull/5390))
|
||||
|
||||
### Notable bug fixes
|
||||
|
||||
- Fixed multiple small memory leaks. ([@spicyj](https://github.com/spicyj) in [#4983](https://github.com/facebook/react/pull/4983) and [@victor-homyakov](https://github.com/victor-homyakov) in [#6309](https://github.com/facebook/react/pull/6309))
|
||||
- Input events are handled more reliably in IE 10 and IE 11; spurious events no longer fire when using a placeholder. ([@jquense](https://github.com/jquense) in [#4051](https://github.com/facebook/react/pull/4051))
|
||||
- The `componentWillReceiveProps()` lifecycle method is now consistently called when `context` changes. ([@milesj](https://github.com/milesj) in [#5787](https://github.com/facebook/react/pull/5787))
|
||||
- `React.cloneElement()` doesn’t append slash to an existing `key` when used inside `React.Children.map()`. ([@ianobermiller](https://github.com/ianobermiller) in [#5892](https://github.com/facebook/react/pull/5892))
|
||||
- React DOM now supports the `cite` and `profile` HTML attributes. ([@AprilArcus](https://github.com/AprilArcus) in [#6094](https://github.com/facebook/react/pull/6094) and [@saiichihashimoto](https://github.com/saiichihashimoto) in [#6032](https://github.com/facebook/react/pull/6032))
|
||||
- React DOM now supports `cssFloat`, `gridRow` and `gridColumn` CSS properties. ([@stevenvachon](https://github.com/stevenvachon) in [#6133](https://github.com/facebook/react/pull/6133) and [@mnordick](https://github.com/mnordick) in [#4779](https://github.com/facebook/react/pull/4779))
|
||||
- React DOM now correctly handles `borderImageOutset`, `borderImageWidth`, `borderImageSlice`, `floodOpacity`, `strokeDasharray`, and `strokeMiterlimit` as unitless CSS properties. ([@rofrischmann](https://github.com/rofrischmann) in [#6210](https://github.com/facebook/react/pull/6210) and [#6270](https://github.com/facebook/react/pull/6270))
|
||||
- React DOM now supports the `onAnimationStart`, `onAnimationEnd`, `onAnimationIteration`, `onTransitionEnd`, and `onInvalid` events. Support for `onLoad` has been added to `object` elements. ([@tomduncalf](https://github.com/tomduncalf) in [#5187](https://github.com/facebook/react/pull/5187), [@milesj](https://github.com/milesj) in [#6005](https://github.com/facebook/react/pull/6005), and [@ara4n](https://github.com/ara4n) in [#5781](https://github.com/facebook/react/pull/5781))
|
||||
- React DOM now defaults to using DOM attributes instead of properties, which fixes a few edge case bugs. Additionally the nullification of values (ex: `href={null}`) now results in the forceful removal, no longer trying to set to the default value used by browsers in the absence of a value. ([@syranide](https://github.com/syranide) in [#1510](https://github.com/facebook/react/pull/1510))
|
||||
- React DOM does not mistakingly coerce `children` to strings for Web Components. ([@jimfb](https://github.com/jimfb) in [#5093](https://github.com/facebook/react/pull/5093))
|
||||
- React DOM now correctly normalizes SVG `<use>` events. ([@edmellum](https://github.com/edmellum) in [#5720](https://github.com/facebook/react/pull/5720))
|
||||
- React DOM does not throw if a `<select>` is unmounted while its `onChange` handler is executing. ([@sambev](https://github.com/sambev) in [#6028](https://github.com/facebook/react/pull/6028))
|
||||
- React DOM does not throw in Windows 8 apps. ([@Andrew8xx8](https://github.com/Andrew8xx8) in [#6063](https://github.com/facebook/react/pull/6063))
|
||||
- React DOM does not throw when asynchronously unmounting a child with a `ref`. ([@yiminghe](https://github.com/yiminghe) in [#6095](https://github.com/facebook/react/pull/6095))
|
||||
- React DOM no longer forces synchronous layout because of scroll position tracking. ([@syranide](https://github.com/syranide) in [#2271](https://github.com/facebook/react/pull/2271))
|
||||
- `Object.is` is used in a number of places to compare values, which leads to fewer false positives, especially involving `NaN`. In particular, this affects the `shallowCompare` add-on. ([@chicoxyzzy](https://github.com/chicoxyzzy) in [#6132](https://github.com/facebook/react/pull/6132))
|
||||
- Add-Ons: ReactPerf no longer instruments adding or removing an event listener because they don’t really touch the DOM due to event delegation. ([@antoaravinth](https://github.com/antoaravinth) in [#5209](https://github.com/facebook/react/pull/5209))
|
||||
|
||||
### Other improvements
|
||||
|
||||
- React now uses `loose-envify` instead of `envify` so it installs fewer transitive dependencies. ([@qerub](https://github.com/qerub) in [#6303](https://github.com/facebook/react/pull/6303))
|
||||
- Shallow renderer now exposes `getMountedInstance()`. ([@glenjamin](https://github.com/glenjamin) in [#4918](https://github.com/facebook/react/pull/4918))
|
||||
- Shallow renderer now returns the rendered output from `render()`. ([@simonewebdesign](https://github.com/simonewebdesign) in [#5411](https://github.com/facebook/react/pull/5411))
|
||||
- React no longer depends on ES5 *shams* for `Object.create` and `Object.freeze` in older environments. It still, however, requires ES5 *shims* in those environments. ([@dgreensp](https://github.com/dgreensp) in [#4959](https://github.com/facebook/react/pull/4959))
|
||||
- React DOM now allows `data-` attributes with names that start with numbers. ([@nLight](https://github.com/nLight) in [#5216](https://github.com/facebook/react/pull/5216))
|
||||
- React DOM adds a new `suppressContentEditableWarning` prop for components like [Draft.js](https://facebook.github.io/draft-js/) that intentionally manage `contentEditable` children with React. ([@mxstbr](https://github.com/mxstbr) in [#6112](https://github.com/facebook/react/pull/6112))
|
||||
- React improves the performance for `createClass()` on complex specs. ([@spicyj](https://github.com/spicyj) in [#5550](https://github.com/facebook/react/pull/5550))
|
||||
|
||||
|
||||
## 0.14.8 (March 29, 2016)
|
||||
|
||||
### React
|
||||
- Fixed memory leak when rendering on the server
|
||||
|
||||
## 0.14.7 (January 28, 2016)
|
||||
|
||||
### React
|
||||
- Fixed bug with `<option>` tags when using `dangerouslySetInnerHTML`
|
||||
- Fixed memory leak in synthetic event system
|
||||
|
||||
### React TestUtils Add-on
|
||||
- Fixed bug with calling `setState` in `componentWillMount` when using shallow rendering
|
||||
|
||||
|
||||
## 0.14.6 (January 6, 2016)
|
||||
|
||||
### React
|
||||
- Updated `fbjs` dependency to pick up change affecting handling of undefined document.
|
||||
|
||||
|
||||
## 0.14.5 (December 29, 2015)
|
||||
|
||||
### React
|
||||
- More minor internal changes for better compatibility with React Native
|
||||
|
||||
|
||||
## 0.14.4 (December 29, 2015)
|
||||
|
||||
### React
|
||||
- Minor internal changes for better compatibility with React Native
|
||||
|
||||
### React DOM
|
||||
- The `autoCapitalize` and `autoCorrect` props are now set as attributes in the DOM instead of properties to improve cross-browser compatibility
|
||||
- Fixed bug with controlled `<select>` elements not handling updates properly
|
||||
|
||||
### React Perf Add-on
|
||||
- Some DOM operation names have been updated for clarity in the output of `.printDOM()`
|
||||
|
||||
|
||||
## 0.14.3 (November 18, 2015)
|
||||
|
||||
### React DOM
|
||||
- Added support for `nonce` attribute for `<script>` and `<style>` elements
|
||||
- Added support for `reversed` attribute for `<ol>` elements
|
||||
|
||||
### React TestUtils Add-on
|
||||
- Fixed bug with shallow rendering and function refs
|
||||
|
||||
### React CSSTransitionGroup Add-on
|
||||
- Fixed bug resulting in timeouts firing incorrectly when mounting and unmounting rapidly
|
||||
|
||||
### React on Bower
|
||||
- Added `react-dom-server.js` to expose `renderToString` and `renderToStaticMarkup` for usage in the browser
|
||||
|
||||
|
||||
## 0.14.2 (November 2, 2015)
|
||||
|
||||
### React DOM
|
||||
- Fixed bug with development build preventing events from firing in some versions of Internet Explorer & Edge
|
||||
- Fixed bug with development build when using es5-sham in older versions of Internet Explorer
|
||||
- Added support for `integrity` attribute
|
||||
- Fixed bug resulting in `children` prop being coerced to a string for custom elements, which was not the desired behavior
|
||||
- Moved `react` from `dependencies` to `peerDependencies` to match expectations and align with `react-addons-*` packages
|
||||
|
||||
|
||||
## 0.14.1 (October 28, 2015)
|
||||
|
||||
### React DOM
|
||||
@@ -435,7 +22,7 @@ Each of these changes will continue to work as before with a new warning until t
|
||||
### Major changes
|
||||
|
||||
- Split the main `react` package into two: `react` and `react-dom`. This paves the way to writing components that can be shared between the web version of React and React Native. This means you will need to include both files and some functions have been moved from `React` to `ReactDOM`.
|
||||
- Addons have been moved to separate packages (`react-addons-clone-with-props`, `react-addons-create-fragment`, `react-addons-css-transition-group`, `react-addons-linked-state-mixin`, `react-addons-perf`, `react-addons-pure-render-mixin`, `react-addons-shallow-compare`, `react-addons-test-utils`, `react-addons-transition-group`, `react-addons-update`, `ReactDOM.unstable_batchedUpdates`).
|
||||
- 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.**
|
||||
|
||||
@@ -444,8 +31,8 @@ Each of these changes will continue to work as before with a new warning until t
|
||||
|
||||
- `React.initializeTouchEvents` is no longer necessary and has been removed completely. Touch events now work automatically.
|
||||
- Add-Ons: Due to the DOM node refs change mentioned above, `TestUtils.findAllInRenderedTree` and related helpers are no longer able to take a DOM component, only a custom component.
|
||||
- The `props` object is now frozen, so mutating props after creating a component element is no longer supported. In most cases, [`React.cloneElement`](https://facebook.github.io/react/docs/react-api.html#cloneelement) should be used instead. This change makes your components easier to reason about and enables the compiler optimizations mentioned above.
|
||||
- Plain objects are no longer supported as React children; arrays should be used instead. You can use the [`createFragment`](https://facebook.github.io/react/docs/create-fragment.html) helper to migrate, which now returns an array.
|
||||
- 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`.
|
||||
|
||||
@@ -453,9 +40,9 @@ Each of these changes will continue to work as before with a new warning until t
|
||||
|
||||
- `this.getDOMNode()` is now deprecated and `ReactDOM.findDOMNode(this)` can be used instead. Note that in the common case, `findDOMNode` is now unnecessary since a ref to the DOM component is now the actual DOM node.
|
||||
- `setProps` and `replaceProps` are now deprecated. Instead, call ReactDOM.render again at the top level with the new props.
|
||||
- ES6 component classes must now extend `React.Component` in order to enable stateless function components. The [ES3 module pattern](https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#other-languages) will continue to work.
|
||||
- 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`](https://facebook.github.io/react/docs/react-api.html#cloneelement) instead (unlike `cloneWithProps`, `cloneElement` does not merge `className` or `style` automatically; you can merge them manually if needed).
|
||||
- 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
|
||||
@@ -496,7 +83,7 @@ Each of these changes will continue to work as before with a new warning until t
|
||||
|
||||
#### Breaking Changes
|
||||
|
||||
- The `react-tools` package and `JSXTransformer.js` browser file [have been deprecated](https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html). You can continue using version `0.13.3` of both, but we no longer support them and recommend migrating to [Babel](http://babeljs.io/), which has built-in support for React and JSX.
|
||||
- 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
|
||||
|
||||
@@ -549,7 +136,7 @@ Each of these changes will continue to work as before with a new warning until t
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
* Immutability Helpers: Ensure it supports `hasOwnProperty` as an object key
|
||||
* Immutabilty Helpers: Ensure it supports `hasOwnProperty` as an object key
|
||||
|
||||
### React Tools
|
||||
|
||||
@@ -598,7 +185,7 @@ Each of these changes will continue to work as before with a new warning until t
|
||||
|
||||
* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html) for details.
|
||||
* Added new top-level API `React.findDOMNode(component)`, which should be used in place of `component.getDOMNode()`. The base class for ES6-based components will not have `getDOMNode`. This change will enable some more patterns moving forward.
|
||||
* Added a new top-level API `React.cloneElement(el, props)` for making copies of React elements – see the [v0.13 RC2 notes](https://facebook.github.io/react/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement) for more details.
|
||||
* Added a new top-level API `React.cloneElement(el, props)` for making copies of React elements – see the [v0.13 RC2 notes](/react/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement) for more details.
|
||||
* New `ref` style, allowing a callback to be used in place of a name: `<Photo ref={(c) => this._photo = c} />` allows you to reference the component with `this._photo` (as opposed to `ref="photo"` which gives `this.refs.photo`).
|
||||
* `this.setState()` can now take a function as the first argument for transactional state updates, such as `this.setState((state, props) => ({count: state.count + 1}));` – this means that you no longer need to use `this._pendingState`, which is now gone.
|
||||
* Support for iterators and immutable-js sequences as children.
|
||||
@@ -612,7 +199,7 @@ Each of these changes will continue to work as before with a new warning until t
|
||||
|
||||
#### New Features
|
||||
|
||||
* [`React.addons.createFragment` was added](https://facebook.github.io/react/docs/create-fragment.html) for adding keys to entire sets of children.
|
||||
* [`React.addons.createFragment` was added](/react/docs/create-fragment.html) for adding keys to entire sets of children.
|
||||
|
||||
#### Deprecations
|
||||
|
||||
@@ -1080,14 +667,14 @@ Each of these changes will continue to work as before with a new warning until t
|
||||
|
||||
* Upgrade Commoner so `require` statements are no longer relativized when passing through the transformer. This was a feature needed when building React, but doesn't translate well for other consumers of `bin/jsx`.
|
||||
* Upgraded our dependencies on Commoner and Recast so they use a different directory for their cache.
|
||||
* Freeze our Esprima dependency.
|
||||
* Freeze our esprima dependency.
|
||||
|
||||
|
||||
## 0.3.2 (May 31, 2013)
|
||||
|
||||
### JSX
|
||||
|
||||
* Improved compatibility with other coding styles (specifically, multiple assignments with a single `var`).
|
||||
* Improved compatability with other coding styles (specifically, multiple assignments with a single `var`).
|
||||
|
||||
### react-tools
|
||||
|
||||
|
||||
@@ -1,5 +1,79 @@
|
||||
# Contributing to React
|
||||
|
||||
Want to contribute to React? There are a few things you need to know.
|
||||
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.
|
||||
|
||||
We wrote a **[contribution guide](https://facebook.github.io/react/contributing/how-to-contribute.html)** to help you get started.
|
||||
## [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.
|
||||
|
||||
## Our Development Process
|
||||
|
||||
Some of the core team will be working directly on GitHub. These changes will be public from the beginning. Other changesets will come via a bridge with Facebook's internal source control. This is a necessity as it allows engineers at Facebook outside of the core team to move fast and contribute from an environment they are comfortable in.
|
||||
|
||||
### `master` is unsafe
|
||||
|
||||
We will do our best to keep `master` in good shape, with tests passing at all times. But in order to move fast, we will make API changes that your application might not be compatible with. We will do our best to communicate these changes and always version appropriately so you can lock into a specific version if need be.
|
||||
|
||||
### Pull Requests
|
||||
|
||||
The core team will be monitoring for pull requests. When we get one, we'll run some Facebook-specific integration tests on it first. From here, we'll need to get another person to sign off on the changes and then merge the pull request. For API changes we may need to fix internal uses, which could cause some delay. We'll do our best to provide updates and feedback throughout the process.
|
||||
|
||||
*Before* submitting a pull request, please make sure the following is done…
|
||||
|
||||
1. Fork the repo and create your branch from `master`.
|
||||
2. If you've added code that should be tested, add tests!
|
||||
3. If you've changed APIs, update the documentation.
|
||||
4. Ensure the test suite passes (`grunt test`).
|
||||
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)
|
||||
|
||||
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)
|
||||
|
||||
## Bugs
|
||||
|
||||
### Where to Find Known Issues
|
||||
|
||||
We will be using GitHub Issues for our public bugs. We will keep a close eye on this and try to make it clear when we have an internal fix in progress. Before filing a new task, try to make sure your problem doesn't already exist.
|
||||
|
||||
### Reporting New Issues
|
||||
|
||||
The best way to get your bug fixed is to provide a reduced test case. jsFiddle, jsBin, and other sites provide a way to give live examples. Those are especially helpful though may not work for `JSX`-based code.
|
||||
|
||||
### 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.
|
||||
|
||||
## How to Get in Touch
|
||||
|
||||
* IRC - [#reactjs on freenode](https://webchat.freenode.net/?channels=reactjs)
|
||||
* Discussion forum - [discuss.reactjs.org](https://discuss.reactjs.org/)
|
||||
|
||||
## 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`
|
||||
|
||||
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 `,`
|
||||
* 2 spaces for indentation (no tabs)
|
||||
* Prefer `'` over `"`
|
||||
* `'use strict';`
|
||||
* 80 character line length
|
||||
* Write "attractive" code
|
||||
* Do not use the optional parameters of `setTimeout` and `setInterval`
|
||||
|
||||
### Documentation
|
||||
|
||||
* Do not wrap lines at 80 characters
|
||||
|
||||
## License
|
||||
|
||||
By contributing to React, you agree that your contributions will be licensed under its BSD license.
|
||||
|
||||
103
Gruntfile.js
103
Gruntfile.js
@@ -1,16 +1,13 @@
|
||||
'use strict';
|
||||
|
||||
var assign = require('object-assign');
|
||||
var path = require('path');
|
||||
|
||||
var GULP_EXE = 'gulp';
|
||||
if (process.platform === 'win32') {
|
||||
GULP_EXE += '.cmd';
|
||||
}
|
||||
|
||||
module.exports = function(grunt) {
|
||||
|
||||
grunt.initConfig({
|
||||
pkg: grunt.file.readJSON('package.json'),
|
||||
jsx: require('./grunt/config/jsx'),
|
||||
browserify: require('./grunt/config/browserify'),
|
||||
npm: require('./grunt/config/npm'),
|
||||
clean: [
|
||||
@@ -20,17 +17,20 @@ module.exports = function(grunt) {
|
||||
'./examples/shared/*.js',
|
||||
'.module-cache',
|
||||
],
|
||||
'compare_size': require('./grunt/config/compare_size'),
|
||||
/*eslint-disable camelcase */
|
||||
compare_size: require('./grunt/config/compare_size'),
|
||||
/*eslint-enable camelcase */
|
||||
});
|
||||
|
||||
function spawnGulp(args, opts, done) {
|
||||
grunt.config.set('compress', require('./grunt/config/compress'));
|
||||
|
||||
function spawnGulp(args, opts, done) {
|
||||
grunt.util.spawn({
|
||||
// This could be more flexible (require.resolve & lookup bin in package)
|
||||
// but if it breaks we'll fix it then.
|
||||
cmd: path.join('node_modules', '.bin', GULP_EXE),
|
||||
cmd: path.join('node_modules', '.bin', 'gulp'),
|
||||
args: args,
|
||||
opts: Object.assign({stdio: 'inherit'}, opts),
|
||||
opts: assign({stdio: 'inherit'}, opts),
|
||||
}, function(err, result, code) {
|
||||
if (err) {
|
||||
grunt.fail.fatal('Something went wrong running gulp: ', result);
|
||||
@@ -50,23 +50,18 @@ module.exports = function(grunt) {
|
||||
grunt.loadNpmTasks(npmTaskName);
|
||||
});
|
||||
|
||||
grunt.registerTask('eslint', function() {
|
||||
// Use gulp here.
|
||||
spawnGulp(['eslint'], null, this.async());
|
||||
});
|
||||
grunt.registerTask('eslint', require('./grunt/tasks/eslint'));
|
||||
|
||||
grunt.registerTask('lint', ['eslint']);
|
||||
|
||||
grunt.registerTask('flow', function() {
|
||||
// Use gulp here.
|
||||
spawnGulp(['flow'], null, this.async());
|
||||
});
|
||||
|
||||
grunt.registerTask('delete-build-modules', function() {
|
||||
// Use gulp here.
|
||||
spawnGulp(['react:clean'], null, this.async());
|
||||
});
|
||||
|
||||
// Register jsx:normal and :release tasks.
|
||||
grunt.registerMultiTask('jsx', require('./grunt/tasks/jsx'));
|
||||
|
||||
// Our own browserify-based tasks to build a single JS file build.
|
||||
grunt.registerMultiTask('browserify', require('./grunt/tasks/browserify'));
|
||||
|
||||
@@ -80,26 +75,11 @@ module.exports = function(grunt) {
|
||||
grunt.registerTask('npm-react-dom:release', npmReactDOMTasks.buildRelease);
|
||||
grunt.registerTask('npm-react-dom:pack', npmReactDOMTasks.packRelease);
|
||||
|
||||
var npmReactNativeTasks = require('./grunt/tasks/npm-react-native');
|
||||
grunt.registerTask('npm-react-native:release', npmReactNativeTasks.buildRelease);
|
||||
grunt.registerTask('npm-react-native:pack', npmReactNativeTasks.packRelease);
|
||||
|
||||
var npmReactAddonsTasks = require('./grunt/tasks/npm-react-addons');
|
||||
grunt.registerTask('npm-react-addons:release', npmReactAddonsTasks.buildReleases);
|
||||
grunt.registerTask('npm-react-addons:pack', npmReactAddonsTasks.packReleases);
|
||||
|
||||
var npmReactTestRendererTasks = require('./grunt/tasks/npm-react-test');
|
||||
grunt.registerTask('npm-react-test:release', npmReactTestRendererTasks.buildRelease);
|
||||
grunt.registerTask('npm-react-test:pack', npmReactTestRendererTasks.packRelease);
|
||||
|
||||
var npmReactNoopRendererTasks = require('./grunt/tasks/npm-react-noop');
|
||||
grunt.registerTask('npm-react-noop:release', npmReactNoopRendererTasks.buildRelease);
|
||||
grunt.registerTask('npm-react-noop:pack', npmReactNoopRendererTasks.packRelease);
|
||||
|
||||
grunt.registerTask('version-check', function() {
|
||||
// Use gulp here.
|
||||
spawnGulp(['version-check'], null, this.async());
|
||||
});
|
||||
grunt.registerTask('version-check', require('./grunt/tasks/version-check'));
|
||||
|
||||
grunt.registerTask('build:basic', [
|
||||
'build-modules',
|
||||
@@ -119,49 +99,18 @@ module.exports = function(grunt) {
|
||||
'build-modules',
|
||||
'browserify:addonsMin',
|
||||
]);
|
||||
grunt.registerTask('build:dom', [
|
||||
'build-modules',
|
||||
'version-check',
|
||||
'browserify:dom',
|
||||
]);
|
||||
grunt.registerTask('build:dom-min', [
|
||||
'build-modules',
|
||||
'version-check',
|
||||
'browserify:domMin',
|
||||
]);
|
||||
grunt.registerTask('build:dom-server', [
|
||||
'build-modules',
|
||||
'version-check',
|
||||
'browserify:domServer',
|
||||
]);
|
||||
grunt.registerTask('build:dom-server-min', [
|
||||
'build-modules',
|
||||
'version-check',
|
||||
'browserify:domServerMin',
|
||||
]);
|
||||
grunt.registerTask('build:dom-fiber', [
|
||||
'build-modules',
|
||||
'version-check',
|
||||
'browserify:domFiber',
|
||||
]);
|
||||
grunt.registerTask('build:dom-fiber-min', [
|
||||
'build-modules',
|
||||
'version-check',
|
||||
'browserify:domFiberMin',
|
||||
]);
|
||||
grunt.registerTask('build:npm-react', [
|
||||
'version-check',
|
||||
'build-modules',
|
||||
'npm-react:release',
|
||||
]);
|
||||
grunt.registerTask('build:react-dom', require('./grunt/tasks/react-dom'));
|
||||
|
||||
var jestTasks = require('./grunt/tasks/jest');
|
||||
grunt.registerTask('jest:normal', jestTasks.normal);
|
||||
grunt.registerTask('jest:coverage', jestTasks.coverage);
|
||||
|
||||
grunt.registerTask('test', ['jest:normal']);
|
||||
grunt.registerTask('test', ['jest']);
|
||||
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.
|
||||
grunt.registerTask('build', [
|
||||
@@ -172,24 +121,13 @@ module.exports = function(grunt) {
|
||||
'browserify:addons',
|
||||
'browserify:min',
|
||||
'browserify:addonsMin',
|
||||
'browserify:dom',
|
||||
'browserify:domMin',
|
||||
'browserify:domServer',
|
||||
'browserify:domServerMin',
|
||||
'browserify:domFiber',
|
||||
'browserify:domFiberMin',
|
||||
'build:react-dom',
|
||||
'npm-react:release',
|
||||
'npm-react:pack',
|
||||
'npm-react-dom:release',
|
||||
'npm-react-dom:pack',
|
||||
'npm-react-native:release',
|
||||
'npm-react-native:pack',
|
||||
'npm-react-addons:release',
|
||||
'npm-react-addons:pack',
|
||||
'npm-react-test:release',
|
||||
'npm-react-test:pack',
|
||||
'npm-react-noop:release',
|
||||
'npm-react-noop:pack',
|
||||
'compare_size',
|
||||
]);
|
||||
|
||||
@@ -199,12 +137,15 @@ module.exports = function(grunt) {
|
||||
grunt.registerTask('release:bower', releaseTasks.bower);
|
||||
grunt.registerTask('release:docs', releaseTasks.docs);
|
||||
grunt.registerTask('release:msg', releaseTasks.msg);
|
||||
grunt.registerTask('release:starter', releaseTasks.starter);
|
||||
|
||||
grunt.registerTask('release', [
|
||||
'release:setup',
|
||||
'clean',
|
||||
'build',
|
||||
'release:bower',
|
||||
'release:starter',
|
||||
'compress',
|
||||
'release:docs',
|
||||
'release:msg',
|
||||
]);
|
||||
|
||||
2
LICENSE
2
LICENSE
@@ -2,7 +2,7 @@ BSD License
|
||||
|
||||
For React software
|
||||
|
||||
Copyright (c) 2013-present, Facebook, Inc.
|
||||
Copyright (c) 2013-2015, Facebook, Inc.
|
||||
All rights reserved.
|
||||
|
||||
Redistribution and use in source and binary forms, with or without modification,
|
||||
|
||||
85
README.md
85
README.md
@@ -1,10 +1,12 @@
|
||||
# [React](https://facebook.github.io/react/) · [](https://circleci.com/gh/facebook/react) [](https://travis-ci.org/facebook/react) [](https://coveralls.io/github/facebook/react?branch=master) [](https://www.npmjs.com/package/react) [](CONTRIBUTING.md#pull-requests)
|
||||
# [React](https://facebook.github.io/react/) [](https://travis-ci.org/facebook/react) [](http://badge.fury.io/js/react)
|
||||
|
||||
React is a JavaScript library for building user interfaces.
|
||||
|
||||
* **Declarative:** React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable, simpler to understand, and easier to debug.
|
||||
* **Component-Based:** Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
|
||||
* **Learn Once, Write Anywhere:** We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using [React Native](https://facebook.github.io/react-native/).
|
||||
* **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/).
|
||||
* **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).
|
||||
|
||||
@@ -12,12 +14,12 @@ React is a JavaScript library for building user interfaces.
|
||||
|
||||
We have several examples [on the website](https://facebook.github.io/react/). Here is the first one to get you started:
|
||||
|
||||
```jsx
|
||||
class HelloMessage extends React.Component {
|
||||
render() {
|
||||
```js
|
||||
var HelloMessage = React.createClass({
|
||||
render: function() {
|
||||
return <div>Hello {this.props.name}</div>;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<HelloMessage name="John" />,
|
||||
@@ -27,35 +29,68 @@ 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/introducing-jsx.html). JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML. We recommend using [Babel](https://babeljs.io/) with a [React preset](https://babeljs.io/docs/plugins/preset-react/) to convert JSX into native JavaScript for browsers to digest.
|
||||
You'll notice that we used an HTML-like syntax; [we call it JSX](https://facebook.github.io/react/docs/jsx-in-depth.html). JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML. A simple transform is included with React that allows converting JSX into native JavaScript for browsers to digest.
|
||||
|
||||
## Installation
|
||||
|
||||
React is available as the `react` package on [npm](https://www.npmjs.com/). It is also available on a [CDN](https://facebook.github.io/react/docs/installation.html#using-a-cdn).
|
||||
The fastest way to get started is to serve JavaScript from the CDN (also available on [cdnjs](https://cdnjs.com/libraries/react) and [jsdelivr](http://www.jsdelivr.com/#!react)):
|
||||
|
||||
React is flexible and can be used in a variety of projects. You can create new apps with it, but you can also gradually introduce it into an existing codebase without doing a rewrite.
|
||||
```html
|
||||
<!-- The core React library -->
|
||||
<script src="https://fb.me/react-0.14.1.js"></script>
|
||||
<!-- The ReactDOM Library -->
|
||||
<script src="https://fb.me/react-dom-0.14.1.js"></script>
|
||||
```
|
||||
|
||||
The recommended way to install React depends on your project. Here you can find short guides for the most common scenarios:
|
||||
We've also built a [starter kit](https://facebook.github.io/react/downloads/react-0.14.1.zip) which might be useful if this is your first time using React. It includes a webpage with an example of using React with live code.
|
||||
|
||||
* [Trying Out React](https://facebook.github.io/react/docs/installation.html#trying-out-react)
|
||||
* [Creating a Single Page Application](https://facebook.github.io/react/docs/installation.html#creating-a-single-page-application)
|
||||
* [Adding React to an Existing Application](https://facebook.github.io/react/docs/installation.html#adding-react-to-an-existing-application)
|
||||
If you'd like to use [bower](http://bower.io), it's as easy as:
|
||||
|
||||
## Contributing
|
||||
```sh
|
||||
bower install --save react
|
||||
```
|
||||
|
||||
The main purpose of this repository is to continue to evolve React core, making it faster and easier to use. Development of React happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements. Read below to learn how you can take part in improving React.
|
||||
## Contribute
|
||||
|
||||
### [Code of Conduct](https://code.facebook.com/codeofconduct)
|
||||
The main purpose of this repository is to continue to evolve React core, making it faster and easier to use. If you're interested in helping with that, then keep reading. If you're not interested in helping right now that's ok too. :) Any feedback you have about using React would be greatly appreciated.
|
||||
|
||||
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.
|
||||
### Building Your Copy of React
|
||||
|
||||
### Contributing Guide
|
||||
The process to build `react.js` is built entirely on top of node.js, using many libraries you may already be familiar with.
|
||||
|
||||
Read our [contributing guide](https://facebook.github.io/react/contributing/how-to-contribute.html) to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to React.
|
||||
#### Prerequisites
|
||||
|
||||
### Good First Bug
|
||||
* 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 are familiar with `npm` and know whether or not you need to use `sudo` when installing packages globally.
|
||||
* You are familiar with `git`.
|
||||
|
||||
To help you get your feet wet and get you familiar with our contribution process, we have a list of [good first bugs](https://github.com/facebook/react/labels/good%20first%20bug) that contain bugs which are fairly easy to fix. This is a great place to get started.
|
||||
#### Build
|
||||
|
||||
Once you have the repository cloned, building a copy of `react.js` is really easy.
|
||||
|
||||
```sh
|
||||
# grunt-cli is needed by grunt; you might have this installed already
|
||||
npm install -g grunt-cli
|
||||
npm install
|
||||
grunt build
|
||||
```
|
||||
|
||||
At this point, you should now have a `build/` directory populated with everything you need to use React. The examples should all work.
|
||||
|
||||
### Grunt
|
||||
|
||||
We use grunt to automate many tasks. Run `grunt -h` to see a mostly complete listing. The important ones to know:
|
||||
|
||||
```sh
|
||||
# Build and run tests with PhantomJS
|
||||
grunt test
|
||||
# Build and run tests in your browser
|
||||
grunt test --debug
|
||||
# Lint the code with ESLint
|
||||
grunt lint
|
||||
# Wipe out build directory
|
||||
grunt clean
|
||||
```
|
||||
|
||||
### License
|
||||
|
||||
@@ -65,5 +100,9 @@ React documentation is [Creative Commons licensed](./LICENSE-docs).
|
||||
|
||||
Examples provided in this repository and in the documentation are [separately licensed](./LICENSE-examples).
|
||||
|
||||
### 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)
|
||||
|
||||
48
bin/jsx-internal
Executable file
48
bin/jsx-internal
Executable file
@@ -0,0 +1,48 @@
|
||||
#!/usr/bin/env node
|
||||
// -*- mode: js -*-
|
||||
// vim: set ft=javascript :
|
||||
|
||||
'use strict';
|
||||
|
||||
var babel = require('babel');
|
||||
|
||||
var devExpressionPlugin = require('fbjs/scripts/babel/dev-expression');
|
||||
|
||||
var TRANSFORM_IGNORE_RE = /^WebComponents$/;
|
||||
|
||||
require('commoner').version(
|
||||
require('../package.json').version
|
||||
).resolve(function(id) {
|
||||
var context = this;
|
||||
|
||||
// Note that the result of context.getProvidedP() is cached for the
|
||||
// duration of the build, so it is both consistent and cheap to
|
||||
// evaluate multiple times.
|
||||
return context.getProvidedP().then(function(idToPath) {
|
||||
// If a module declares its own identifier using @providesModule
|
||||
// then that identifier will be a key in the idToPath object.
|
||||
if (idToPath.hasOwnProperty(id)) {
|
||||
return context.readFileP(idToPath[id]);
|
||||
}
|
||||
|
||||
// Otherwise assume the identifier maps directly to a path in the
|
||||
// filesystem.
|
||||
return context.readModuleP(id);
|
||||
});
|
||||
|
||||
}).process(function(id, source) {
|
||||
var context = this;
|
||||
|
||||
// This is hacky but that's ok… It really only matters for tests since it
|
||||
// won't otherwise be in the dependency tree.
|
||||
if (!TRANSFORM_IGNORE_RE.test(id)) {
|
||||
// This is where JSX, ES6, etc. desugaring happens.
|
||||
source = babel.transform(source, {
|
||||
blacklist: ['spec.functionName', 'validation.react'],
|
||||
plugins: [devExpressionPlugin],
|
||||
filename: id,
|
||||
}).code;
|
||||
}
|
||||
|
||||
return source;
|
||||
});
|
||||
51
circle.yml
51
circle.yml
@@ -1,51 +0,0 @@
|
||||
---
|
||||
general:
|
||||
branches:
|
||||
ignore:
|
||||
- gh-pages
|
||||
|
||||
machine:
|
||||
timezone: America/Los_Angeles
|
||||
node:
|
||||
version: 6
|
||||
ruby:
|
||||
version: 2.2.3
|
||||
environment:
|
||||
TRAVIS_REPO_SLUG: facebook/react
|
||||
YARN_VERSION: 0.17.8
|
||||
PATH: "${PATH}:${HOME}/.yarn/bin"
|
||||
|
||||
dependencies:
|
||||
pre:
|
||||
# This is equivalent to $TRAVIS_COMMIT_RANGE
|
||||
# Need to figure out how to bail early if this is a "docs only" build
|
||||
- echo $CIRCLE_COMPARE_URL | cut -d/ -f7
|
||||
# install yarn if it's not already installed
|
||||
- |
|
||||
if [[ ! -e ~/.yarn/bin/yarn || $(yarn --version) != "${YARN_VERSION}" ]]; then
|
||||
curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version $YARN_VERSION
|
||||
fi
|
||||
override:
|
||||
- bundle install --gemfile=docs/Gemfile --deployment --path=vendor/bundle --jobs=3 --retry=3
|
||||
- yarn install
|
||||
- scripts/circleci/set_up_github_keys.sh
|
||||
post:
|
||||
# - npm ls --depth=0
|
||||
cache_directories:
|
||||
- docs/vendor/bundle
|
||||
- .grunt # Show size comparisons between builds
|
||||
- ~/react-gh-pages # docs checkout
|
||||
- ~/.yarn
|
||||
- ~/.yarn-cache
|
||||
|
||||
test:
|
||||
override:
|
||||
- ./scripts/circleci/test_entry_point.sh:
|
||||
parallel: true
|
||||
|
||||
deployment:
|
||||
staging:
|
||||
branch: /.*/
|
||||
commands:
|
||||
- ./scripts/circleci/upload_build.sh
|
||||
- ./scripts/circleci/build_gh_pages.sh
|
||||
@@ -1,7 +1,6 @@
|
||||
---
|
||||
layout: single
|
||||
title: Page Not Found
|
||||
permalink: 404.html
|
||||
---
|
||||
|
||||
We couldn't find what you were looking for.
|
||||
|
||||
16
docs/Gemfile
16
docs/Gemfile
@@ -3,12 +3,11 @@ source 'https://rubygems.org'
|
||||
gem 'rake'
|
||||
|
||||
# jekyll, which builds it all
|
||||
# 3.0 includes sass processing
|
||||
gem 'jekyll', '~>3.1'
|
||||
# 2.0 includes sass processing
|
||||
gem 'jekyll', '~>2.0'
|
||||
|
||||
# Jekyll extensions
|
||||
# Auto redirect pages
|
||||
gem 'jekyll-redirect-from'
|
||||
gem 'jekyll-paginate'
|
||||
|
||||
# JSON
|
||||
gem 'json'
|
||||
@@ -18,12 +17,3 @@ gem 'rb-fsevent'
|
||||
|
||||
# For markdown header cleanup
|
||||
gem 'sanitize', '~>2.0'
|
||||
|
||||
# Markdown
|
||||
gem 'redcarpet'
|
||||
|
||||
# Syntax highlighting
|
||||
gem 'pygments.rb'
|
||||
|
||||
# Avoid having to poll for changes on Windows
|
||||
gem 'wdm', '>= 0.1.0' if Gem.win_platform?
|
||||
@@ -1,70 +1,85 @@
|
||||
GEM
|
||||
remote: https://rubygems.org/
|
||||
specs:
|
||||
blankslate (2.1.2.4)
|
||||
celluloid (0.15.2)
|
||||
timers (~> 1.1.0)
|
||||
classifier (1.3.4)
|
||||
fast-stemmer (>= 1.0.0)
|
||||
coffee-script (2.3.0)
|
||||
coffee-script-source
|
||||
execjs
|
||||
coffee-script-source (1.7.1)
|
||||
colorator (0.1)
|
||||
ffi (1.9.14)
|
||||
ffi (1.9.14-x64-mingw32)
|
||||
jekyll (3.1.6)
|
||||
execjs (2.2.1)
|
||||
fast-stemmer (1.0.2)
|
||||
ffi (1.9.3)
|
||||
jekyll (2.2.0)
|
||||
classifier (~> 1.3)
|
||||
colorator (~> 0.1)
|
||||
jekyll-coffeescript (~> 1.0)
|
||||
jekyll-gist (~> 1.0)
|
||||
jekyll-paginate (~> 1.0)
|
||||
jekyll-sass-converter (~> 1.0)
|
||||
jekyll-watch (~> 1.1)
|
||||
jekyll-watch (~> 1.0)
|
||||
kramdown (~> 1.3)
|
||||
liquid (~> 3.0)
|
||||
liquid (~> 2.6.1)
|
||||
mercenary (~> 0.3.3)
|
||||
rouge (~> 1.7)
|
||||
pygments.rb (~> 0.6.0)
|
||||
redcarpet (~> 3.1)
|
||||
safe_yaml (~> 1.0)
|
||||
jekyll-paginate (1.1.0)
|
||||
jekyll-redirect-from (0.11.0)
|
||||
jekyll (>= 2.0)
|
||||
jekyll-sass-converter (1.4.0)
|
||||
sass (~> 3.4)
|
||||
jekyll-watch (1.4.0)
|
||||
listen (~> 3.0, < 3.1)
|
||||
json (2.0.1)
|
||||
kramdown (1.11.1)
|
||||
liquid (3.0.6)
|
||||
listen (3.0.8)
|
||||
rb-fsevent (~> 0.9, >= 0.9.4)
|
||||
rb-inotify (~> 0.9, >= 0.9.7)
|
||||
mercenary (0.3.6)
|
||||
mini_portile2 (2.1.0)
|
||||
nokogiri (1.6.8)
|
||||
mini_portile2 (~> 2.1.0)
|
||||
pkg-config (~> 1.1.7)
|
||||
nokogiri (1.6.8-x64-mingw32)
|
||||
mini_portile2 (~> 2.1.0)
|
||||
pkg-config (~> 1.1.7)
|
||||
pkg-config (1.1.7)
|
||||
posix-spawn (0.3.11)
|
||||
pygments.rb (0.6.3)
|
||||
toml (~> 0.1.0)
|
||||
jekyll-coffeescript (1.0.0)
|
||||
coffee-script (~> 2.2)
|
||||
jekyll-gist (1.1.0)
|
||||
jekyll-paginate (1.0.0)
|
||||
jekyll-redirect-from (0.5.0)
|
||||
jekyll (~> 2.0)
|
||||
jekyll-sass-converter (1.2.0)
|
||||
sass (~> 3.2)
|
||||
jekyll-watch (1.1.0)
|
||||
listen (~> 2.7)
|
||||
json (1.8.1)
|
||||
kramdown (1.4.1)
|
||||
liquid (2.6.1)
|
||||
listen (2.7.9)
|
||||
celluloid (>= 0.15.2)
|
||||
rb-fsevent (>= 0.9.3)
|
||||
rb-inotify (>= 0.9)
|
||||
mercenary (0.3.4)
|
||||
mini_portile (0.6.0)
|
||||
nokogiri (1.6.3.1)
|
||||
mini_portile (= 0.6.0)
|
||||
parslet (1.5.0)
|
||||
blankslate (~> 2.0)
|
||||
posix-spawn (0.3.9)
|
||||
pygments.rb (0.6.0)
|
||||
posix-spawn (~> 0.3.6)
|
||||
yajl-ruby (~> 1.2.0)
|
||||
rake (11.2.2)
|
||||
rb-fsevent (0.9.7)
|
||||
rb-inotify (0.9.7)
|
||||
yajl-ruby (~> 1.1.0)
|
||||
rake (10.3.2)
|
||||
rb-fsevent (0.9.4)
|
||||
rb-inotify (0.9.5)
|
||||
ffi (>= 0.5.0)
|
||||
redcarpet (3.3.4)
|
||||
rouge (1.11.1)
|
||||
redcarpet (3.1.2)
|
||||
safe_yaml (1.0.4)
|
||||
sanitize (2.1.0)
|
||||
sanitize (2.0.6)
|
||||
nokogiri (>= 1.4.4)
|
||||
sass (3.4.22)
|
||||
yajl-ruby (1.2.1)
|
||||
sass (3.3.14)
|
||||
timers (1.1.0)
|
||||
toml (0.1.1)
|
||||
parslet (~> 1.5.0)
|
||||
yajl-ruby (1.1.0)
|
||||
|
||||
PLATFORMS
|
||||
ruby
|
||||
x64-mingw32
|
||||
|
||||
DEPENDENCIES
|
||||
jekyll (~> 3.1)
|
||||
jekyll-paginate
|
||||
jekyll (~> 2.0)
|
||||
jekyll-redirect-from
|
||||
json
|
||||
pygments.rb
|
||||
rake
|
||||
rb-fsevent
|
||||
redcarpet
|
||||
sanitize (~> 2.0)
|
||||
|
||||
BUNDLED WITH
|
||||
1.11.2
|
||||
1.10.1
|
||||
|
||||
@@ -8,17 +8,14 @@ If you are working on the site, you will want to install and run a local copy of
|
||||
|
||||
### Dependencies
|
||||
|
||||
In order to use Jekyll, you will need to have Ruby installed. macOS comes pre-installed with Ruby, but you may need to update RubyGems (via `gem update --system`).
|
||||
Otherwise, [RVM](https://rvm.io/) and [rbenv](https://github.com/sstephenson/rbenv) are popular ways to install Ruby.
|
||||
In order to use Jekyll, you will need to have Ruby installed.
|
||||
|
||||
- [Ruby](http://www.ruby-lang.org/) (version >= 1.8.7)
|
||||
- [RubyGems](http://rubygems.org/) (version >= 1.3.7)
|
||||
- [Bundler](http://gembundler.com/)
|
||||
|
||||
The version of the Pygment syntax highlighter used by Jekyll requires Python 2.7.x (not 3.x). macOS comes pre-installed with Python 2.7, but you may need to install it on other OSs.
|
||||
|
||||
- [Python](https://www.python.org) (version 2.7.x)
|
||||
|
||||
Mac OS X comes pre-installed with Ruby, but you may need to update RubyGems (via `gem update --system`).
|
||||
Otherwise, [RVM](https://rvm.io/) and [rbenv](https://github.com/sstephenson/rbenv) are popular ways to install Ruby.
|
||||
Once you have RubyGems and installed Bundler (via `gem install bundler`), use it to install the dependencies:
|
||||
|
||||
```sh
|
||||
@@ -29,16 +26,15 @@ $ npm install
|
||||
|
||||
### Instructions
|
||||
|
||||
The site requires React, so first make sure you've built the project (via [`grunt`](http://gruntjs.com/getting-started)).
|
||||
The site requires React, so first make sure you've built the project (via `grunt`).
|
||||
|
||||
Use Jekyll to serve the website locally (by default, at `http://localhost:4000`):
|
||||
|
||||
```sh
|
||||
$ cd react/docs
|
||||
$ bundle exec rake
|
||||
$ bundle exec rake fetch_remotes
|
||||
$ bundle exec jekyll serve -w
|
||||
$ open http://localhost:4000/react/index.html
|
||||
$ open http://localhost:4000/react/
|
||||
```
|
||||
|
||||
We use [SASS](http://sass-lang.com/) (with [Bourbon](http://bourbon.io/)) for our CSS, and we use JSX to transform some of our JS.
|
||||
|
||||
@@ -1,18 +1,10 @@
|
||||
require('rubygems')
|
||||
require('json')
|
||||
require('yaml')
|
||||
require('open-uri')
|
||||
|
||||
desc "download babel-browser"
|
||||
task :fetch_remotes do
|
||||
IO.copy_stream(
|
||||
open('https://unpkg.com/babel-standalone@6.15.0/babel.min.js'),
|
||||
'js/babel.min.js'
|
||||
)
|
||||
end
|
||||
|
||||
desc "generate js from jsx"
|
||||
task :js do
|
||||
system "cp ../node_modules/babel/node_modules/babel-core/browser.min.js ./js/babel-browser.min.js"
|
||||
system "../node_modules/.bin/babel _js --out-dir=js"
|
||||
end
|
||||
|
||||
@@ -32,25 +24,6 @@ task :update_version do
|
||||
end
|
||||
end
|
||||
|
||||
desc "update SRI hashes"
|
||||
task :update_hashes do
|
||||
map = {
|
||||
'react.js' => 'dev',
|
||||
'react.min.js' => 'prod',
|
||||
'react-with-addons.js' => 'addons_dev',
|
||||
'react-with-addons.min.js' => 'addons_prod',
|
||||
'react-dom.js' => 'dom_dev',
|
||||
'react-dom.min.js' => 'dom_prod',
|
||||
'react-dom-server.js' => 'dom_server_dev',
|
||||
'react-dom-server.min.js' => 'dom_server_prod'
|
||||
}
|
||||
site_config = YAML.load_file('_config.yml')
|
||||
map.each do |file, key|
|
||||
site_config['react_hashes'][key] = `openssl dgst -sha384 -binary ../../react-bower/#{file} | openssl base64 -A`
|
||||
end
|
||||
File.open('_config.yml', 'w+') { |f| f.write(site_config.to_yaml) }
|
||||
end
|
||||
|
||||
desc "update acknowledgements list"
|
||||
task :update_acknowledgements do
|
||||
authors = File.readlines('../AUTHORS').map {|author| author.gsub(/ <.*\n/,'')}
|
||||
@@ -61,15 +34,8 @@ task :update_acknowledgements do
|
||||
File.open('_data/acknowledgements.yml', 'w+') { |f| f.write(cols.to_yaml) }
|
||||
end
|
||||
|
||||
desc "copy error codes to docs"
|
||||
task :copy_error_codes do
|
||||
codes_json = File.read('../scripts/error-codes/codes.json')
|
||||
codes_js = "var errorMap = #{codes_json.chomp};\n"
|
||||
File.write('js/errorMap.js', codes_js)
|
||||
end
|
||||
|
||||
desc "build into ../../react-gh-pages"
|
||||
task :release => [:update_version, :js, :fetch_remotes, :copy_error_codes] do
|
||||
task :release => [:update_version, :default] do
|
||||
system "jekyll build -d ../../react-gh-pages"
|
||||
end
|
||||
|
||||
|
||||
@@ -2,47 +2,24 @@
|
||||
name: React
|
||||
description: A JavaScript library for building user interfaces
|
||||
url: https://facebook.github.io
|
||||
baseurl: /react
|
||||
permalink: /blog/:year/:month/:day/:title.html
|
||||
paginate_path: /blog/page:num/
|
||||
baseurl: "/react"
|
||||
permalink: "/blog/:year/:month/:day/:title.html"
|
||||
paginate_path: "/blog/page:num/"
|
||||
relative_permalinks: true
|
||||
paginate: 5
|
||||
timezone: America/Los_Angeles
|
||||
highlighter: pygments
|
||||
defaults:
|
||||
- scope:
|
||||
path: ''
|
||||
type: posts
|
||||
type: post
|
||||
values:
|
||||
layout: post
|
||||
sectionid: blog
|
||||
- scope:
|
||||
path: blog
|
||||
type: pages
|
||||
values:
|
||||
sectionid: blog
|
||||
- scope:
|
||||
path: tutorial
|
||||
type: pages
|
||||
values:
|
||||
layout: tutorial
|
||||
sectionid: tutorial
|
||||
- scope:
|
||||
path: docs
|
||||
type: pages
|
||||
type: page
|
||||
values:
|
||||
layout: docs
|
||||
sectionid: docs
|
||||
- scope:
|
||||
path: contributing
|
||||
type: pages
|
||||
values:
|
||||
sectionid: docs
|
||||
- scope:
|
||||
path: community
|
||||
type: pages
|
||||
values:
|
||||
layout: community
|
||||
sectionid: community
|
||||
exclude:
|
||||
- Gemfile
|
||||
- Gemfile.lock
|
||||
@@ -59,14 +36,4 @@ sass:
|
||||
sass_dir: _css
|
||||
gems:
|
||||
- jekyll-redirect-from
|
||||
- jekyll-paginate
|
||||
react_version: 15.4.0
|
||||
react_hashes:
|
||||
dev: buVLzxzBI8Ps3svVMSUurNdb5dozNidH5Ow4H0YgZeia3t6Oeui2VLpvtAq1fwtK
|
||||
prod: nCjsa0kjNQPQdxWm12/ReVJzfBJaVubEwwDswyQDGMKYJmeWv3qShMuETfU5fisu
|
||||
addons_dev: /u97pKzBwasbC1yj8gSIq1z30o4ZTUX9j1Mv/hyAjmG41ydTNHw9JFOhwFbDgxmR
|
||||
addons_prod: /p86n4b5VTlWoA/INEHQZ+zjx9g1pJduoFmTEJ6fSzFTq1mBaXaBcWVGtZJXD68L
|
||||
dom_dev: lUxkeWjg3I3lXmxcM1gvgo0yvm2w9alc1osa4L8yWZFO6l/vg9h5hSlHPFioltrm
|
||||
dom_prod: u8x1yIGN9IjGNYbBaDMsp1D4MK3sCmMU13mcBX+bm+aMo5+gaT8HIwIj39GlXaRS
|
||||
dom_server_dev: Okj1hVX1VF+oZSkPcJQ/YcnW6bsIpeni222ylwUaMnSmdCe0zWKmMwpFMVqzy4Ws
|
||||
dom_server_prod: wiA4u+G5fEfF4xzhhVnNWeSifVyttoEIpgc3APaMKQgw5A4wHbEMihf63tk1qoyt
|
||||
react_version: 0.14.0
|
||||
|
||||
@@ -37,7 +37,7 @@ html * {
|
||||
border-bottom: 1px dotted #cb4b16;
|
||||
}
|
||||
.cm-s-solarized-light span.cm-keyword {
|
||||
color: #859900;
|
||||
color: #268bd2;
|
||||
}
|
||||
.cm-s-solarized-light span.cm-atom {
|
||||
color: #2aa198;
|
||||
@@ -61,7 +61,7 @@ html * {
|
||||
color: #93a1a1;
|
||||
}
|
||||
.cm-s-solarized-light span.cm-property {
|
||||
color: #657b83;
|
||||
color: #637c84;
|
||||
}
|
||||
.cm-s-solarized-light span.cm-operator {
|
||||
color: #657b83;
|
||||
@@ -74,13 +74,14 @@ html * {
|
||||
border-bottom: 1px dotted #cb4b16;
|
||||
}
|
||||
.cm-s-solarized-light span.cm-bracket {
|
||||
color: #268bd2;
|
||||
color: #cb4b16;
|
||||
}
|
||||
.cm-s-solarized-light span.cm-tag {
|
||||
color: #268bd2;
|
||||
color: #657b83;
|
||||
}
|
||||
.cm-s-solarized-light span.cm-attribute {
|
||||
color: #586e75;
|
||||
font-weight: bold;
|
||||
}
|
||||
.cm-s-solarized-light span.cm-meta {
|
||||
color: #268bd2;
|
||||
@@ -165,6 +166,7 @@ html * {
|
||||
}
|
||||
.cm-s-solarized-dark span.cm-attribute {
|
||||
color: #93a1a1;
|
||||
font-weight: bold;
|
||||
}
|
||||
.cm-s-solarized-dark span.cm-meta {
|
||||
color: #268bd2;
|
||||
|
||||
@@ -112,6 +112,8 @@ li {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
a {
|
||||
color: $linkColor;
|
||||
text-decoration: none;
|
||||
@@ -129,7 +131,3 @@ a {
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
input {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
$side: nth($pos, 2);
|
||||
|
||||
@if $length == 2 { // eg. to top
|
||||
// Swap for backwards compatibility
|
||||
// Swap for backwards compatability
|
||||
$degree: _position-flipper(nth($pos, 2));
|
||||
}
|
||||
@else if $length == 3 { // eg. to top left
|
||||
@@ -38,7 +38,7 @@
|
||||
$spec: to $side $corner;
|
||||
}
|
||||
@else if $length == 1 {
|
||||
// Swap for backwards compatibility
|
||||
// Swap for backwards compatability
|
||||
@if $type == string {
|
||||
$degree: $pos;
|
||||
$spec: to _position-flipper($pos);
|
||||
|
||||
@@ -2,21 +2,17 @@
|
||||
- - '839'
|
||||
- Aaron Franks
|
||||
- Aaron Gelter
|
||||
- Adam Bloomston
|
||||
- Adam Krebs
|
||||
- Adam Mark
|
||||
- Adam Solove
|
||||
- Adam Timberlake
|
||||
- Adam Zapletal
|
||||
- Ahmad Wali Sidiqi
|
||||
- Alan Plum
|
||||
- Alan Souza
|
||||
- Alan deLevie
|
||||
- Alastair Hole
|
||||
- Alex
|
||||
- Alex Boatwright
|
||||
- Alex Boyd
|
||||
- Alex Dajani
|
||||
- Alex Lopatin
|
||||
- Alex Mykyta
|
||||
- Alex Pien
|
||||
@@ -28,28 +24,22 @@
|
||||
- Alexandre Gaudencio
|
||||
- Alexey Raspopov
|
||||
- Alexey Shamrin
|
||||
- Ali Ukani
|
||||
- Andre Z Sanchez
|
||||
- Andreas Savvides
|
||||
- Andreas Svensson
|
||||
- Andres Kalle
|
||||
- Andres Suarez
|
||||
- Andrew Clark
|
||||
- Andrew Cobby
|
||||
- Andrew Davey
|
||||
- Andrew Henderson
|
||||
- Andrew Kulakov
|
||||
- Andrew Rasmussen
|
||||
- Andrew Sokolov
|
||||
- Andrew Zich
|
||||
- Andrey Popp
|
||||
- Anthony van der Hoorn
|
||||
- Anto Aravinth
|
||||
- Antonio Ruberto
|
||||
- Antti Ahti
|
||||
- Anuj Tomar
|
||||
- AoDev
|
||||
- April Arcus
|
||||
- Areeb Malik
|
||||
- Aria Buckles
|
||||
- Aria Stewart
|
||||
@@ -64,9 +54,7 @@
|
||||
- Beau Smith
|
||||
- Ben Alpert
|
||||
- Ben Anderson
|
||||
- Ben Brooks
|
||||
- Ben Foxall
|
||||
- Ben Halpern
|
||||
- Ben Jaffe
|
||||
- Ben Moss
|
||||
- Ben Newman
|
||||
@@ -74,20 +62,16 @@
|
||||
- Benjamin Keen
|
||||
- Benjamin Leiken
|
||||
- Benjamin Woodruff
|
||||
- Benjy Cui
|
||||
- Bill Blanchard
|
||||
- Bill Fisher
|
||||
- Blaine Hatab
|
||||
- Blaine Kasten
|
||||
- Bob Eagan
|
||||
- Bob Ralian
|
||||
- Bob Renwick
|
||||
- Bobby
|
||||
- Bojan Mihelac
|
||||
- Bradley Spaulding
|
||||
- Brandon Bloom
|
||||
- Brandon Tilley
|
||||
- Brenard Cubacub
|
||||
- Brian Cooke
|
||||
- Brian Holt
|
||||
- Brian Hsu
|
||||
@@ -98,19 +82,14 @@
|
||||
- Bruno Škvorc
|
||||
- Cam Song
|
||||
- Cam Spiers
|
||||
- Cameron Chamberlain
|
||||
- Cameron Matheson
|
||||
- Carter Chung
|
||||
- Cassus Adam Banko
|
||||
- Cat Chen
|
||||
- Cedric Sohrauer
|
||||
- Cesar William Alvarenga
|
||||
- Changsoon Bok
|
||||
- Charles Marsh
|
||||
- Chase Adams
|
||||
- Cheng Lou
|
||||
- Chitharanjan Das
|
||||
- Chris Bolin
|
||||
- Chris Grovers
|
||||
- Chris Ha
|
||||
- Chris Rebert
|
||||
@@ -118,15 +97,12 @@
|
||||
- Christian Alfoni
|
||||
- Christian Oliff
|
||||
- Christian Roman
|
||||
- Christoffer Sawicki
|
||||
- Christoph Pojer
|
||||
- Christopher Monsanto
|
||||
- Clay Allsopp
|
||||
- Connor McSheffrey
|
||||
- Conor Hastings
|
||||
- Cory House
|
||||
- Cotton Hou
|
||||
- Craig Akimoto
|
||||
- Cristovao Verstraeten
|
||||
- Damien Pellier
|
||||
- Dan Abramov
|
||||
@@ -137,7 +113,6 @@
|
||||
- Daniel Friesen
|
||||
- Daniel Gasienica
|
||||
- Daniel Hejl
|
||||
- Daniel Hejl
|
||||
- Daniel Lo Nigro
|
||||
- Daniel Mané
|
||||
- Daniel Miladinov
|
||||
@@ -147,31 +122,23 @@
|
||||
- Darcy
|
||||
- Daryl Lau
|
||||
- Darío Javier Cravero
|
||||
- Dave Galbraith
|
||||
- David Baker
|
||||
- David Ed Mellum
|
||||
- David Goldberg
|
||||
- David Granado
|
||||
- David Greenspan
|
||||
- David Hellsing
|
||||
- David Hu
|
||||
- David Khourshid
|
||||
- David Mininger
|
||||
- David Neubauer
|
||||
- David Percy
|
||||
- Dean Shi
|
||||
- Denis Sokolov
|
||||
- Deniss Jacenko
|
||||
- Dennis Johnson
|
||||
- Devon Blandin
|
||||
- Devon Harvey
|
||||
- Dmitrii Abramov
|
||||
- Dmitriy Rozhkov
|
||||
- Dmitry Blues
|
||||
- Dmitry Mazuro
|
||||
- Domenico Matteo
|
||||
- Don Abrams
|
||||
- Dongsheng Liu
|
||||
- Dustan Kasten
|
||||
- Dustin Getz
|
||||
- Dylan Harrington
|
||||
@@ -187,7 +154,6 @@
|
||||
- Erik Harper
|
||||
- Espen Hovlandsdal
|
||||
- Evan Coonrod
|
||||
- Evan Vosberg
|
||||
- Fabio M. Costa
|
||||
- Federico Rampazzo
|
||||
- Felipe Oliveira Carvalho
|
||||
@@ -197,15 +163,11 @@
|
||||
- Frankie Bagnardi
|
||||
- François-Xavier Bois
|
||||
- Fred Zhao
|
||||
- Freddy Rangel
|
||||
- Fyodor Ivanishchev
|
||||
- G Scott Olson
|
||||
- G. Kay Lee
|
||||
- Gabe Levi
|
||||
- Gajus Kuizinas
|
||||
- Gareth Nicholson
|
||||
- Garren Smith
|
||||
- Gavin McQuistin
|
||||
- Geert Pasteels
|
||||
- Geert-Jan Brits
|
||||
- George A Sisco III
|
||||
@@ -221,57 +183,44 @@
|
||||
- Guido Bouman
|
||||
- Harry Hull
|
||||
- Harry Marr
|
||||
- Harry Moreno
|
||||
- - Harry Moreno
|
||||
- Harshad Sabne
|
||||
- Hekar Khani
|
||||
- Hendrik Swanepoel
|
||||
- Henrik Nyh
|
||||
- Henry Wong
|
||||
- Henry Zhu
|
||||
- Hideo Matsumoto
|
||||
- Hou Chia
|
||||
- Huang-Wei Chang
|
||||
- - Hugo Agbonon
|
||||
- Hugo Jobling
|
||||
- Hyeock Kwon
|
||||
- Héliton Nordt
|
||||
- Ian Obermiller
|
||||
- Ignacio Carbajo
|
||||
- Igor Scekic
|
||||
- Ilia Pavlenkov
|
||||
- Ilya Shuklin
|
||||
- Ilyá Belsky
|
||||
- Ingvar Stepanyan
|
||||
- Irae Carvalho
|
||||
- Isaac Salier-Hellendag
|
||||
- Iurii Kucherov
|
||||
- Ivan Kozik
|
||||
- Ivan Krechetov
|
||||
- Ivan Vergiliev
|
||||
- J. Andrew Brassington
|
||||
- J. Renée Beach
|
||||
- JD Isaacks
|
||||
- JJ Weber
|
||||
- JW
|
||||
- Jack Zhang
|
||||
- Jackie Wung
|
||||
- Jacob Gable
|
||||
- Jacob Greenleaf
|
||||
- Jae Hun Ro
|
||||
- Jaeho Lee
|
||||
- Jaime Mingo
|
||||
- Jake Worth
|
||||
- Jakub Malinowski
|
||||
- James
|
||||
- James Brantly
|
||||
- James Burnett
|
||||
- James Friend
|
||||
- James Ide
|
||||
- James Long
|
||||
- James Pearce
|
||||
- James Seppi
|
||||
- James South
|
||||
- James Wen
|
||||
- Jamie Wong
|
||||
- Jamis Charles
|
||||
- Jamison Dance
|
||||
@@ -297,7 +246,6 @@
|
||||
- Jeff Morrison
|
||||
- Jeff Welch
|
||||
- Jeffrey Lin
|
||||
- Jeremy Fairbank
|
||||
- Jesse Skinner
|
||||
- Jignesh Kakadiya
|
||||
- Jim OBrien
|
||||
@@ -305,19 +253,14 @@
|
||||
- Jimmy Jea
|
||||
- Jing Chen
|
||||
- Jinwoo Oh
|
||||
- Jinxiu Lee
|
||||
- Jiyeon Seo
|
||||
- Jody McIntyre
|
||||
- Joe Critchley
|
||||
- Joe Stein
|
||||
- Joel Auterson
|
||||
- Johannes Baiter
|
||||
- Johannes Emerich
|
||||
- Johannes Lumpe
|
||||
- John Heroy
|
||||
- John Ryan
|
||||
- John Watson
|
||||
- John-David Dalton
|
||||
- Jon Beebe
|
||||
- Jon Chester
|
||||
- Jon Hester
|
||||
@@ -327,7 +270,6 @@
|
||||
- Jonas Enlund
|
||||
- Jonas Gebhardt
|
||||
- Jonathan Hsu
|
||||
- Jonathan Persson
|
||||
- Jordan Harband
|
||||
- Jordan Walke
|
||||
- Jorrit Schippers
|
||||
@@ -335,9 +277,7 @@
|
||||
- Joseph Savona
|
||||
- Josh Bassett
|
||||
- Josh Duck
|
||||
- Josh Perez
|
||||
- Josh Yudaken
|
||||
- Joshua Evans
|
||||
- Joshua Go
|
||||
- Joshua Goldberg
|
||||
- Joshua Ma
|
||||
@@ -346,34 +286,23 @@
|
||||
- Julen Ruiz Aizpuru
|
||||
- Julian Viereck
|
||||
- Julien Bordellier
|
||||
- Julio Lopez
|
||||
- Jun Wu
|
||||
- Juraj Dudak
|
||||
- Justas Brazauskas
|
||||
- Justin Jaffray
|
||||
- Justin Robison
|
||||
- Justin Woo
|
||||
- Kale
|
||||
- Kamron Batman
|
||||
- Karl Mikkelsen
|
||||
- Karpich Dmitry
|
||||
- Keito Uchiyama
|
||||
- Ken Powers
|
||||
- Kent C. Dodds
|
||||
- Kevin Cheng
|
||||
- Kevin Coughlin
|
||||
- Kevin Huang
|
||||
- Kevin Lau
|
||||
- Kevin Old
|
||||
- Kevin Robinson
|
||||
- Kewei Jiang
|
||||
- Kier Borromeo
|
||||
- KimCoding
|
||||
- Kirk Steven Hansen
|
||||
- Kit Randel
|
||||
- Kohei TAKATA
|
||||
- Koo Youngmin
|
||||
- Krystian Karczewski
|
||||
- Kunal Mehta
|
||||
- Kurt Ruppel
|
||||
- Kyle Kelley
|
||||
@@ -383,7 +312,6 @@
|
||||
- Lee Byron
|
||||
- Lee Jaeyoung
|
||||
- Lei
|
||||
- Leland Richardson
|
||||
- Leon Fedotov
|
||||
- Leon Yip
|
||||
- Leonardo YongUk Kim
|
||||
@@ -391,13 +319,9 @@
|
||||
- Levi McCallum
|
||||
- Lily
|
||||
- Logan Allen
|
||||
- Lovisa Svallingson
|
||||
- Ludovico Fischer
|
||||
- Luigy Leon
|
||||
- Luke Horvat
|
||||
- MIKAMI Yoshiyuki
|
||||
- Maher Beg
|
||||
- Manas
|
||||
- Marcin K.
|
||||
- Marcin Kwiatkowski
|
||||
- Marcin Szczepanski
|
||||
@@ -407,83 +331,59 @@
|
||||
- Mark Funk
|
||||
- Mark Hintz
|
||||
- Mark IJbema
|
||||
- Mark Murphy
|
||||
- Mark Richardson
|
||||
- Mark Rushakoff
|
||||
- Mark Sun
|
||||
- Marlon Landaverde
|
||||
- Marshall Roch
|
||||
- Martin Andert
|
||||
- Martin Hujer
|
||||
- Martin Jul
|
||||
- Martin Konicek
|
||||
- Martin Mihaylov
|
||||
- Masaki KOBAYASHI
|
||||
- Mathieu M-Gosselin
|
||||
- Mathieu Savy
|
||||
- Matias Singers
|
||||
- Matsunoki
|
||||
- Matt Brookes
|
||||
- Matt Dunn-Rankin
|
||||
- Matt Harrison
|
||||
- Matt Huggins
|
||||
- Matt Stow
|
||||
- Matt Zabriskie
|
||||
- Matthew Dapena-Tretter
|
||||
- Matthew Herbst
|
||||
- Matthew Hodgson
|
||||
- Matthew Johnston
|
||||
- Matthew King
|
||||
- Matthew Looi
|
||||
- Matthew Miner
|
||||
- Matthias Le Brun
|
||||
- Matti Nelimarkka
|
||||
- Mattijs Kneppers
|
||||
- Max F. Albrecht
|
||||
- Max Heiber
|
||||
- Max Stoiber
|
||||
- Maxi Ferreira
|
||||
- Maxim Abramchuk
|
||||
- Merrick Christensen
|
||||
- Mert Kahyaoğlu
|
||||
- Michael Chan
|
||||
- Michael McDermott
|
||||
- Michael Randers-Pehrson
|
||||
- Michael Ridgway
|
||||
- Michael Warner
|
||||
- Michael Wiencek
|
||||
- Michael Ziwisky
|
||||
- Michal Srb
|
||||
- Michelle Todd
|
||||
- Mihai Parparita
|
||||
- Mike D Pilsbury
|
||||
- Mike Groseclose
|
||||
- Mike Nordick
|
||||
- - Mike Groseclose
|
||||
- Mikolaj Dadela
|
||||
- Miles Johnson
|
||||
- Minwe LUO
|
||||
- Miorel Palii
|
||||
- - Morhaus
|
||||
- Moshe Kolodny
|
||||
- Morhaus
|
||||
- Mouad Debbar
|
||||
- Murad
|
||||
- Murray M. Moss
|
||||
- Nadeesha Cabral
|
||||
- Naman Goel
|
||||
- Nate Hunzaker
|
||||
- Nate Lee
|
||||
- Nathan Smith
|
||||
- Nathan White
|
||||
- Nee
|
||||
- Neri Marschik
|
||||
- Nguyen Truong Duy
|
||||
- Nicholas Bergson-Shilcock
|
||||
- Nicholas Clawson
|
||||
- Nick Balestra
|
||||
- Nick Fitzgerald
|
||||
- Nick Gavalas
|
||||
- Nick Merwin
|
||||
- Nick Presta
|
||||
- Nick Raienko
|
||||
- Nick Thompson
|
||||
- Nick Williams
|
||||
@@ -499,10 +399,8 @@
|
||||
- Pablo Lacerda de Miranda
|
||||
- Paolo Moretti
|
||||
- Pascal Hartig
|
||||
- Patrick
|
||||
- Patrick Laughlin
|
||||
- Patrick Stapleton
|
||||
- Paul Benigeri
|
||||
- Paul Harper
|
||||
- Paul O’Shannessy
|
||||
- Paul Seiffert
|
||||
@@ -512,25 +410,19 @@
|
||||
- Peter Blazejewicz
|
||||
- Peter Cottle
|
||||
- Peter Jaros
|
||||
- Peter Newnham
|
||||
- Petri Lehtinen
|
||||
- Petri Lievonen
|
||||
- Pieter Vanderwerff
|
||||
- Pouja Nikray
|
||||
- Prathamesh Sonpatki
|
||||
- Prayag Verma
|
||||
- Preston Parry
|
||||
- Rafael
|
||||
- Rafal Dittwald
|
||||
- Rainer Oviir
|
||||
- Rajat Sehgal
|
||||
- Rajiv Tirumalareddy
|
||||
- Ram Kaniyur
|
||||
- Randall Randall
|
||||
- Ray
|
||||
- Raymond Ha
|
||||
- Reed Loden
|
||||
- Remko Tronçon
|
||||
- Richard D. Worth
|
||||
- Richard Feldman
|
||||
- Richard Kho
|
||||
@@ -538,22 +430,16 @@
|
||||
- Richard Livesey
|
||||
- Richard Wood
|
||||
- Rick Beerendonk
|
||||
- Rick Ford
|
||||
- Riley Tomasek
|
||||
- Rob Arnold
|
||||
- Robert Binna
|
||||
- Robert Knight
|
||||
- Robert Sedovsek
|
||||
- Robin Berjon
|
||||
- Robin Frischmann
|
||||
- Roman Pominov
|
||||
- Roman Vanesyan
|
||||
- Russ
|
||||
- Ryan Seddon
|
||||
- Sahat Yalkabov
|
||||
- Saif Hakim
|
||||
- Saiichi Hashimoto
|
||||
- Sam Beveridge
|
||||
- Sam Saccone
|
||||
- Sam Selikoff
|
||||
- Samy Al Zahrani
|
||||
@@ -562,9 +448,7 @@
|
||||
- Scott Feeney
|
||||
- Sean Kinsey
|
||||
- Sebastian Markbåge
|
||||
- Sebastian McKenzie
|
||||
- Seoh Char
|
||||
- Sercan Eraslan
|
||||
- Serg
|
||||
- Sergey Generalov
|
||||
- Sergey Rubanov
|
||||
@@ -573,25 +457,18 @@
|
||||
- Shaun Trennery
|
||||
- ShihChi Huang
|
||||
- Shim Won
|
||||
- Shinnosuke Watanabe
|
||||
- Shogun Sea
|
||||
- Shota Kubota
|
||||
- Shripad K
|
||||
- Sibi
|
||||
- Simen Bekkhus
|
||||
- Simon Højberg
|
||||
- Simon Welsh
|
||||
- Simone Vittori
|
||||
- Soichiro Kawamura
|
||||
- Sophia Westwood
|
||||
- Sota Ohara
|
||||
- Spencer Handley
|
||||
- Stefan Dombrowski
|
||||
- Stephen Murphy
|
||||
- Sterling Cobb
|
||||
- Steve Baker
|
||||
- Steven Luscher
|
||||
- Steven Vachon
|
||||
- Stoyan Stefanov
|
||||
- Sundeep Malladi
|
||||
- Sunny Juneja
|
||||
@@ -602,11 +479,9 @@
|
||||
- Taeho Kim
|
||||
- Tay Yang Shun
|
||||
- Ted Kim
|
||||
- Tengfei Guo
|
||||
- Teodor Szente
|
||||
- Thomas Aylott
|
||||
- Thomas Boyt
|
||||
- Thomas Broadley
|
||||
- Thomas Reggi
|
||||
- Thomas Röggla
|
||||
- Thomas Shaddox
|
||||
@@ -616,15 +491,12 @@
|
||||
- Tim Routowicz
|
||||
- Tim Schaub
|
||||
- Timothy Yung
|
||||
- Timur Carpeev
|
||||
- Tobias Reiss
|
||||
- Tom Duncalf
|
||||
- Tom Haggie
|
||||
- Tom Hauburger
|
||||
- Tom MacWright
|
||||
- Tom Occhino
|
||||
- Tomasz Kołodziejski
|
||||
- Tomoya Suzuki
|
||||
- Tony Spiro
|
||||
- Toru Kobayashi
|
||||
- Trinh Hoang Nhu
|
||||
@@ -635,17 +507,14 @@
|
||||
- Varun Rau
|
||||
- Vasiliy Loginevskiy
|
||||
- Victor Alvarez
|
||||
- Victor Homyakov
|
||||
- Victor Koenders
|
||||
- Ville Immonen
|
||||
- Vincent Riemer
|
||||
- Vincent Siao
|
||||
- Vipul A M
|
||||
- Vitaly Kramskikh
|
||||
- Vitor Balocco
|
||||
- Vjeux
|
||||
- Volkan Unsal
|
||||
- Wander Wang
|
||||
- Wayne Larsen
|
||||
- WickyNilliams
|
||||
- Wincent Colaiuta
|
||||
@@ -657,14 +526,9 @@
|
||||
- YouBao Nong
|
||||
- Yuichi Hagio
|
||||
- Yuriy Dybskiy
|
||||
- Yutaka Nakajima
|
||||
- Yuval Dekel
|
||||
- Zach Bruggeman
|
||||
- Zach Ramaekers
|
||||
- Zacharias
|
||||
- Zeke Sikelianos
|
||||
- Zhangjd
|
||||
- adraeth
|
||||
- arush
|
||||
- brafdlog
|
||||
- chen
|
||||
@@ -675,23 +539,14 @@
|
||||
- dongmeng.ldm
|
||||
- iamchenxin
|
||||
- iamdoron
|
||||
- iawia002
|
||||
- imagentleman
|
||||
- koh-taka
|
||||
- kohashi85
|
||||
- laiso
|
||||
- leeyoungalias
|
||||
- li.li
|
||||
- maxprafferty
|
||||
- rgarifullin
|
||||
- songawee
|
||||
- sugarshin
|
||||
- wali-s
|
||||
- yiminghe
|
||||
- youmoo
|
||||
- zhangjg
|
||||
- zwhitchcox
|
||||
- "Árni Hermann Reynisson"
|
||||
- "元彦"
|
||||
- "凌恒"
|
||||
- "张敏"
|
||||
- Árni Hermann Reynisson
|
||||
- 凌恒
|
||||
- 张敏
|
||||
|
||||
@@ -13,9 +13,6 @@ Daniel15:
|
||||
fisherwebdev:
|
||||
name: Bill Fisher
|
||||
url: https://twitter.com/fisherwebdev
|
||||
gaearon:
|
||||
name: Dan Abramov
|
||||
url: https://twitter.com/dan_abramov
|
||||
jaredly:
|
||||
name: Jared Forsyth
|
||||
url: https://twitter.com/jaredforsyth
|
||||
@@ -31,9 +28,6 @@ jingc:
|
||||
josephsavona:
|
||||
name: Joseph Savona
|
||||
url: https://twitter.com/en_JS
|
||||
keyanzhang:
|
||||
name: Keyan Zhang
|
||||
url: https://twitter.com/keyanzhang
|
||||
kmeht:
|
||||
name: Kunal Mehta
|
||||
url: https://github.com/kmeht
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
- title: Community Resources
|
||||
items:
|
||||
- id: support
|
||||
title: Where To Get Support
|
||||
- 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
|
||||
@@ -1,10 +0,0 @@
|
||||
- title: Contributing
|
||||
items:
|
||||
- id: how-to-contribute
|
||||
title: How to Contribute
|
||||
- id: codebase-overview
|
||||
title: Codebase Overview
|
||||
- id: implementation-notes
|
||||
title: Implementation Notes
|
||||
- id: design-principles
|
||||
title: Design Principles
|
||||
@@ -1,86 +1,99 @@
|
||||
- title: Quick Start
|
||||
items:
|
||||
- id: installation
|
||||
title: Installation
|
||||
- id: hello-world
|
||||
title: Hello World
|
||||
- id: introducing-jsx
|
||||
title: Introducing JSX
|
||||
- id: rendering-elements
|
||||
title: Rendering Elements
|
||||
- id: components-and-props
|
||||
title: Components and Props
|
||||
- id: state-and-lifecycle
|
||||
title: State and Lifecycle
|
||||
- id: handling-events
|
||||
title: Handling Events
|
||||
- id: conditional-rendering
|
||||
title: Conditional Rendering
|
||||
- id: lists-and-keys
|
||||
title: Lists and Keys
|
||||
- id: forms
|
||||
title: Forms
|
||||
- id: lifting-state-up
|
||||
title: Lifting State Up
|
||||
- id: composition-vs-inheritance
|
||||
title: Composition vs Inheritance
|
||||
- id: thinking-in-react
|
||||
title: Thinking In React
|
||||
- title: Advanced Guides
|
||||
- id: getting-started
|
||||
title: Getting Started
|
||||
- id: tutorial
|
||||
title: Tutorial
|
||||
- id: thinking-in-react
|
||||
title: Thinking in React
|
||||
- title: Community Resources
|
||||
items:
|
||||
- id: conferences
|
||||
title: Conferences
|
||||
- id: videos
|
||||
title: Videos
|
||||
- id: complementary-tools
|
||||
title: Complementary Tools
|
||||
- id: examples
|
||||
title: Examples
|
||||
- title: Guides
|
||||
items:
|
||||
- id: why-react
|
||||
title: Why React?
|
||||
- id: displaying-data
|
||||
title: Displaying Data
|
||||
subitems:
|
||||
- id: jsx-in-depth
|
||||
title: JSX In Depth
|
||||
- id: typechecking-with-proptypes
|
||||
title: Typechecking With PropTypes
|
||||
- id: refs-and-the-dom
|
||||
title: Refs and the DOM
|
||||
- id: uncontrolled-components
|
||||
title: Uncontrolled Components
|
||||
- id: optimizing-performance
|
||||
title: Optimizing Performance
|
||||
- id: react-without-es6
|
||||
title: React Without ES6
|
||||
- id: react-without-jsx
|
||||
title: React Without JSX
|
||||
- id: reconciliation
|
||||
title: Reconciliation
|
||||
- id: context
|
||||
title: Context
|
||||
- id: web-components
|
||||
title: Web Components
|
||||
- id: higher-order-components
|
||||
title: Higher-Order Components
|
||||
title: JSX in Depth
|
||||
- id: jsx-spread
|
||||
title: JSX Spread Attributes
|
||||
- id: jsx-gotchas
|
||||
title: JSX Gotchas
|
||||
- id: interactivity-and-dynamic-uis
|
||||
title: Interactivity and Dynamic UIs
|
||||
- id: multiple-components
|
||||
title: Multiple Components
|
||||
- id: reusable-components
|
||||
title: Reusable Components
|
||||
- id: transferring-props
|
||||
title: Transferring Props
|
||||
- id: forms
|
||||
title: Forms
|
||||
- id: working-with-the-browser
|
||||
title: Working With the Browser
|
||||
subitems:
|
||||
- id: more-about-refs
|
||||
title: Refs to Components
|
||||
- id: tooling-integration
|
||||
title: Tooling Integration
|
||||
- id: addons
|
||||
title: Add-Ons
|
||||
subitems:
|
||||
- id: animation
|
||||
title: Animation
|
||||
- id: two-way-binding-helpers
|
||||
title: Two-Way Binding Helpers
|
||||
- id: test-utils
|
||||
title: Test Utilities
|
||||
- id: clone-with-props
|
||||
title: Cloning Elements
|
||||
- id: create-fragment
|
||||
title: Keyed Fragments
|
||||
- id: update
|
||||
title: Immutability Helpers
|
||||
- id: pure-render-mixin
|
||||
title: PureRenderMixin
|
||||
- id: perf
|
||||
title: Performance Tools
|
||||
- id: advanced-performance
|
||||
title: Advanced Performance
|
||||
- id: context
|
||||
title: Context
|
||||
- title: Reference
|
||||
items:
|
||||
- id: react-api
|
||||
title: React
|
||||
subitems:
|
||||
- id: react-component
|
||||
title: React.Component
|
||||
- id: react-dom
|
||||
title: ReactDOM
|
||||
- id: react-dom-server
|
||||
title: ReactDOMServer
|
||||
- id: dom-elements
|
||||
title: DOM Elements
|
||||
- id: events
|
||||
title: SyntheticEvent
|
||||
- id: addons
|
||||
title: Add-Ons
|
||||
subitems:
|
||||
- id: perf
|
||||
title: Performance Tools
|
||||
- id: test-utils
|
||||
title: Test Utilities
|
||||
- id: animation
|
||||
title: Animation
|
||||
- id: create-fragment
|
||||
title: Keyed Fragments
|
||||
- id: update
|
||||
title: Immutability Helpers
|
||||
- id: pure-render-mixin
|
||||
title: PureRenderMixin
|
||||
- id: shallow-compare
|
||||
title: Shallow Compare
|
||||
- id: two-way-binding-helpers
|
||||
title: Two-way Binding Helpers
|
||||
- id: top-level-api
|
||||
title: Top-Level API
|
||||
- id: component-api
|
||||
title: Component API
|
||||
- id: component-specs
|
||||
title: Component Specs and Lifecycle
|
||||
- id: tags-and-attributes
|
||||
title: Supported Tags and Attributes
|
||||
- id: events
|
||||
title: Event System
|
||||
- id: dom-differences
|
||||
title: DOM Differences
|
||||
- id: special-non-dom-attributes
|
||||
title: Special Non-DOM Attributes
|
||||
- id: reconciliation
|
||||
title: Reconciliation
|
||||
- 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
|
||||
- id: flux-todo-list
|
||||
title: Flux TodoMVC Tutorial
|
||||
href: https://facebook.github.io/flux/docs/todo-list.html
|
||||
|
||||
38
docs/_data/nav_tips.yml
Normal file
38
docs/_data/nav_tips.yml
Normal file
@@ -0,0 +1,38 @@
|
||||
- title: Tips
|
||||
items:
|
||||
- id: introduction
|
||||
title: Introduction
|
||||
- id: inline-styles
|
||||
title: Inline Styles
|
||||
- id: if-else-in-JSX
|
||||
title: If-Else in JSX
|
||||
- id: self-closing-tag
|
||||
title: Self-Closing Tag
|
||||
- id: maximum-number-of-jsx-root-nodes
|
||||
title: Maximum Number of JSX Root Nodes
|
||||
- id: style-props-value-px
|
||||
title: Shorthand for Specifying Pixel Values in style props
|
||||
- id: children-props-type
|
||||
title: Type of the Children props
|
||||
- id: controlled-input-null-value
|
||||
title: Value of null for Controlled Input
|
||||
- id: componentWillReceiveProps-not-triggered-after-mounting
|
||||
title: componentWillReceiveProps Not Triggered After Mounting
|
||||
- id: props-in-getInitialState-as-anti-pattern
|
||||
title: Props in getInitialState Is an Anti-Pattern
|
||||
- id: dom-event-listeners
|
||||
title: DOM Event Listeners in a Component
|
||||
- id: initial-ajax
|
||||
title: Load Initial Data via AJAX
|
||||
- id: false-in-jsx
|
||||
title: False in JSX
|
||||
- id: communicate-between-components
|
||||
title: Communicate Between Components
|
||||
- id: expose-component-functions
|
||||
title: Expose Component Functions
|
||||
- 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
|
||||
@@ -1,71 +0,0 @@
|
||||
- title: Tutorial
|
||||
items:
|
||||
- id: tutorial
|
||||
title: Overview
|
||||
subitems:
|
||||
- id: what-were-building
|
||||
title: What We're Building
|
||||
href: /react/tutorial/tutorial.html#what-were-building
|
||||
forceInternal: true
|
||||
- id: what-is-react
|
||||
title: What is React?
|
||||
href: /react/tutorial/tutorial.html#what-is-react
|
||||
forceInternal: true
|
||||
- id: getting-started
|
||||
title: Getting Started
|
||||
href: /react/tutorial/tutorial.html#getting-started
|
||||
forceInternal: true
|
||||
- id: passing-data-through-props
|
||||
title: Passing Data Through Props
|
||||
href: /react/tutorial/tutorial.html#passing-data-through-props
|
||||
forceInternal: true
|
||||
- id: an-interactive-component
|
||||
title: An Interactive Component
|
||||
href: /react/tutorial/tutorial.html#an-interactive-component
|
||||
forceInternal: true
|
||||
- id: developer-tools
|
||||
title: Developer Tools
|
||||
href: /react/tutorial/tutorial.html#developer-tools
|
||||
forceInternal: true
|
||||
- id: lifting-state-up
|
||||
title: Lifting State Up
|
||||
href: /react/tutorial/tutorial.html#lifting-state-up
|
||||
forceInternal: true
|
||||
subitems:
|
||||
- id: why-immutability-is-important
|
||||
title: Why Immutability Is Important
|
||||
href: /react/tutorial/tutorial.html#why-immutability-is-important
|
||||
forceInternal: true
|
||||
- id: functional-components
|
||||
title: Functional Components
|
||||
href: /react/tutorial/tutorial.html#functional-components
|
||||
forceInternal: true
|
||||
- id: taking-turns
|
||||
title: Taking Turns
|
||||
href: /react/tutorial/tutorial.html#taking-turns
|
||||
forceInternal: true
|
||||
- id: declaring-a-winner
|
||||
title: Declaring a Winner
|
||||
href: /react/tutorial/tutorial.html#declaring-a-winner
|
||||
forceInternal: true
|
||||
- id: storing-a-history
|
||||
title: Storing A History
|
||||
href: /react/tutorial/tutorial.html#storing-a-history
|
||||
forceInternal: true
|
||||
subitems:
|
||||
- id: showing-the-moves
|
||||
title: Showing the Moves
|
||||
href: /react/tutorial/tutorial.html#showing-the-moves
|
||||
forceInternal: true
|
||||
- id: keys
|
||||
title: Keys
|
||||
href: /react/tutorial/tutorial.html#keys
|
||||
forceInternal: true
|
||||
- id: implementing-time-travel
|
||||
title: Implementing Time Travel
|
||||
href: /react/tutorial/tutorial.html#implementing-time-travel
|
||||
forceInternal: true
|
||||
- id: wrapping-up
|
||||
title: Wrapping Up
|
||||
href: /react/tutorial/tutorial.html#wrapping-up
|
||||
forceInternal: true
|
||||
@@ -1,41 +0,0 @@
|
||||
<footer class="nav-footer">
|
||||
<section class="sitemap">
|
||||
<a href="/react/" class="nav-home">
|
||||
</a>
|
||||
<div>
|
||||
<h5><a href="/react/docs/">Docs</a></h5>
|
||||
<a href="/react/docs/hello-world.html">Quick Start</a>
|
||||
<a href="/react/docs/thinking-in-react.html">Thinking in React</a>
|
||||
<a href="/react/tutorial/tutorial.html">Tutorial</a>
|
||||
<a href="/react/docs/jsx-in-depth.html">Advanced Guides</a>
|
||||
</div>
|
||||
<div>
|
||||
<h5><a href="/react/community/support.html">Community</a></h5>
|
||||
<a href="http://stackoverflow.com/questions/tagged/reactjs" target="_blank">Stack Overflow</a>
|
||||
<a href="https://discuss.reactjs.org/" target="_blank">Discussion Forum</a>
|
||||
<a href="https://discord.gg/0ZcbPKXt5bZjGY5n" target="_blank">Reactiflux Chat</a>
|
||||
<a href="https://www.facebook.com/react" target="_blank">Facebook</a>
|
||||
<a href="https://twitter.com/reactjs" target="_blank">Twitter</a>
|
||||
</div>
|
||||
<div>
|
||||
<h5><a href="/react/community/support.html">Resources</a></h5>
|
||||
<a href="/react/community/conferences.html">Conferences</a>
|
||||
<a href="/react/community/videos.html">Videos</a>
|
||||
<a href="https://github.com/facebook/react/wiki/Examples" target="_blank">Examples</a>
|
||||
<a href="https://github.com/facebook/react/wiki/Complementary-Tools" target="_blank">Complementary Tools</a>
|
||||
</div>
|
||||
<div>
|
||||
<h5>More</h5>
|
||||
<a href="/react/blog/">Blog</a>
|
||||
<a href="https://github.com/facebook/react" target="_blank">GitHub</a>
|
||||
<a href="http://facebook.github.io/react-native/" target="_blank">React Native</a>
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
</section>
|
||||
<a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource">
|
||||
<img src="/react/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/>
|
||||
</a>
|
||||
<section class="copyright">
|
||||
Copyright © {{ site.time | date: '%Y' }} Facebook Inc.
|
||||
</section>
|
||||
</footer>
|
||||
@@ -1,13 +0,0 @@
|
||||
<div class="hero">
|
||||
<div class="wrap">
|
||||
<div class="text"><strong>React</strong></div>
|
||||
<div class="minitext">
|
||||
A JavaScript library for building user interfaces
|
||||
</div>
|
||||
|
||||
<div class="buttons-unit">
|
||||
<a href="/react/docs/hello-world.html" class="button">Get Started</a>
|
||||
<a href="/react/tutorial/tutorial.html" class="button">Take the Tutorial</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,24 +0,0 @@
|
||||
<div class="nav-docs">
|
||||
<!-- Community Nav -->
|
||||
{% for section in site.data.nav_community %}
|
||||
<div class="nav-docs-section">
|
||||
<h3>{{ section.title }}</h3>
|
||||
<ul>
|
||||
{% for item in section.items %}
|
||||
<li>
|
||||
{{ item | community_sidebar_link }}
|
||||
{% if item.subitems %}
|
||||
<ul>
|
||||
{% for subitem in item.subitems %}
|
||||
<li>
|
||||
{{ subitem | community_sidebar_link }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@@ -6,12 +6,12 @@
|
||||
<ul>
|
||||
{% for item in section.items %}
|
||||
<li>
|
||||
{{ item | docs_sidebar_link}}
|
||||
{{ item | sidebar_item_link}}
|
||||
{% if item.subitems %}
|
||||
<ul>
|
||||
{% for subitem in item.subitems %}
|
||||
<li>
|
||||
{{ subitem | docs_sidebar_link }}
|
||||
{{ subitem | sidebar_item_link}}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
@@ -22,18 +22,17 @@
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<!-- Contributing Nav -->
|
||||
{% for section in site.data.nav_contributing %}
|
||||
<!-- Tips Nav -->
|
||||
{% for section in site.data.nav_tips %}
|
||||
<div class="nav-docs-section">
|
||||
<h3>{{ section.title }}</h3>
|
||||
<ul>
|
||||
{% for item in section.items %}
|
||||
<li>
|
||||
<a href="/react/contributing/{{ item.id }}.html"{% if page.id == item.id %} class="active"{% endif %}>{{ item.title }}</a>
|
||||
<a href="/react/tips/{{ item.id }}.html"{% if page.id == item.id %} class="active"{% endif %}>{{ item.title }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
|
||||
@@ -1,24 +0,0 @@
|
||||
<div class="nav-docs">
|
||||
<!-- Tutorial Nav -->
|
||||
{% for section in site.data.nav_tutorial %}
|
||||
<div class="nav-docs-section">
|
||||
<h3>{{ section.title }}</h3>
|
||||
<ul>
|
||||
{% for item in section.items %}
|
||||
<li>
|
||||
{{ item | tutorial_sidebar_link }}
|
||||
{% if item.subitems %}
|
||||
<ul>
|
||||
{% for subitem in item.subitems %}
|
||||
<li>
|
||||
{{ subitem | tutorial_sidebar_link }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@@ -1,23 +0,0 @@
|
||||
<div class="nav-main">
|
||||
<div class="wrap">
|
||||
<a class="nav-home" href="/react/">
|
||||
<img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
|
||||
React
|
||||
</a>
|
||||
<div class="nav-lists">
|
||||
<ul class="nav-site nav-site-internal">
|
||||
<li><a href="/react/docs/hello-world.html"{% if page.sectionid == 'docs' or page.sectionid == 'tips' or page.sectionid == 'contributing' %} class="active"{% endif %}>Docs</a></li>
|
||||
<li><a href="/react/tutorial/tutorial.html"{% if page.sectionid == 'tutorial' %} class="active"{% endif %}>Tutorial</a></li>
|
||||
<li><a href="/react/community/support.html"{% if page.sectionid == 'community' %} class="active"{% endif %}>Community</a></li>
|
||||
<li><a href="/react/blog/"{% if page.sectionid == 'blog' %} class="active"{% endif %}>Blog</a></li>
|
||||
<li class="nav-site-search">
|
||||
<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://github.com/facebook/react/releases">v{{site.react_version}}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,111 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) 2013-present, Facebook, Inc.
|
||||
* All rights reserved.
|
||||
*
|
||||
* This source code is licensed under the BSD-style license found in the
|
||||
* LICENSE file in the root directory of this source tree. An additional grant
|
||||
* of patent rights can be found in the PATENTS file in the same directory.
|
||||
*/
|
||||
/* global React ReactDOM errorMap:true */
|
||||
'use strict';
|
||||
|
||||
function replaceArgs(msg, argList) {
|
||||
let argIdx = 0;
|
||||
return msg.replace(/%s/g, function() {
|
||||
const arg = argList[argIdx++];
|
||||
return arg === undefined ? '[missing argument]' : arg;
|
||||
});
|
||||
}
|
||||
|
||||
function urlify(str) {
|
||||
const urlRegex = /(https:\/\/fb\.me\/[a-z\-]+)/g;
|
||||
|
||||
const segments = str.split(urlRegex);
|
||||
|
||||
for (let i = 0; i < segments.length; i++) {
|
||||
if (i % 2 === 1) {
|
||||
segments[i] = (<a key={i} target="_blank" href={segments[i]}>{segments[i]}</a>);
|
||||
}
|
||||
}
|
||||
|
||||
return segments;
|
||||
}
|
||||
|
||||
// ?invariant=123&args[]=foo&args[]=bar
|
||||
function parseQueryString() {
|
||||
const rawQueryString = window.location.search.substring(1);
|
||||
if (!rawQueryString) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let code = '';
|
||||
let args = [];
|
||||
|
||||
const queries = rawQueryString.split('&');
|
||||
for (let i = 0; i < queries.length; i++) {
|
||||
const query = decodeURIComponent(queries[i]);
|
||||
if (query.indexOf('invariant=') === 0) {
|
||||
code = query.slice(10);
|
||||
} else if (query.indexOf('args[]=') === 0) {
|
||||
args.push(query.slice(7));
|
||||
}
|
||||
}
|
||||
|
||||
return [code, args];
|
||||
}
|
||||
|
||||
function ErrorResult(props) {
|
||||
const code = props.code;
|
||||
const errorMsg = props.msg;
|
||||
|
||||
if (!code) {
|
||||
return (
|
||||
<p>When you encounter an error, you'll receive a link to this page for that specific error and we'll show you the full error text.</p>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p>The full text of the error you just encountered is:</p>
|
||||
<code>{urlify(errorMsg)}</code>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
class ErrorDecoder extends React.Component {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
|
||||
this.state = {
|
||||
code: null,
|
||||
errorMsg: '',
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
const parseResult = parseQueryString();
|
||||
if (parseResult != null) {
|
||||
const [code, args] = parseResult;
|
||||
if (errorMap[code]) {
|
||||
this.setState({
|
||||
code: code,
|
||||
errorMsg: replaceArgs(errorMap[code], args),
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ErrorResult
|
||||
code={this.state.code}
|
||||
msg={this.state.errorMsg}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<ErrorDecoder />,
|
||||
document.querySelector('.error-decoder-container')
|
||||
);
|
||||
@@ -1,30 +0,0 @@
|
||||
// Add anchors to headings client-side, which prevents them from showing up
|
||||
// in RSS feeds. See https://github.com/facebook/react/issues/4124.
|
||||
(function() {
|
||||
var selector = '.inner-content h2, .inner-content h3, .inner-content h4';
|
||||
var elements = document.querySelectorAll(selector);
|
||||
for (var i = 0; i < elements.length; i++) {
|
||||
var textMethod = document.body.textContent ? "textContent" : "innerText";
|
||||
var roughText = elements[i][textMethod];
|
||||
|
||||
// Regex rule for making the title URL-friendly.
|
||||
var urlFriendlyText = roughText.trim()
|
||||
.toLowerCase()
|
||||
.replace(/\s+/g, '-')
|
||||
.replace(/[^A-Za-z0-9\-_.\p{Cyrillic}\p{Hangul}\p{Hiragana}\p{Katakana}\p{Han}]/g, '');
|
||||
|
||||
// Create the anchor we'll jump to.
|
||||
var anchor = document.createElement('a');
|
||||
anchor.className = 'anchor';
|
||||
anchor.name = urlFriendlyText;
|
||||
elements[i].insertBefore(anchor, elements[i].firstChild);
|
||||
|
||||
// Create the clickable "#" icon.
|
||||
var hashLink = document.createElement('a');
|
||||
var icon = document.createTextNode("#");
|
||||
hashLink.appendChild(icon);
|
||||
hashLink.className = 'hash-link';
|
||||
hashLink.href = '#' + urlFriendlyText;
|
||||
elements[i].appendChild(hashLink);
|
||||
}
|
||||
}());
|
||||
@@ -1,13 +1,12 @@
|
||||
var name = Math.random() > 0.5 ? 'Jane' : 'John';
|
||||
var HELLO_COMPONENT = `
|
||||
class HelloMessage extends React.Component {
|
||||
render() {
|
||||
var HelloMessage = React.createClass({
|
||||
render: function() {
|
||||
return <div>Hello {this.props.name}</div>;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(<HelloMessage name="${name}" />, mountNode);
|
||||
`.trim();
|
||||
ReactDOM.render(<HelloMessage name="John" />, mountNode);
|
||||
`;
|
||||
|
||||
ReactDOM.render(
|
||||
<ReactPlayground codeText={HELLO_COMPONENT} />,
|
||||
|
||||
@@ -1,39 +1,34 @@
|
||||
var MARKDOWN_COMPONENT = `
|
||||
class MarkdownEditor extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this.state = {value: 'Type some *markdown* here!'};
|
||||
}
|
||||
|
||||
handleChange(e) {
|
||||
this.setState({value: e.target.value});
|
||||
}
|
||||
|
||||
getRawMarkup() {
|
||||
var md = new Remarkable();
|
||||
return { __html: md.render(this.state.value) };
|
||||
}
|
||||
|
||||
render() {
|
||||
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}) };
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<div className="MarkdownEditor">
|
||||
<h3>Input</h3>
|
||||
<textarea
|
||||
onChange={this.handleChange}
|
||||
ref="textarea"
|
||||
defaultValue={this.state.value} />
|
||||
<h3>Output</h3>
|
||||
<div
|
||||
className="content"
|
||||
dangerouslySetInnerHTML={this.getRawMarkup()}
|
||||
dangerouslySetInnerHTML={this.rawMarkup()}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(<MarkdownEditor />, mountNode);
|
||||
`.trim();
|
||||
`;
|
||||
|
||||
ReactDOM.render(
|
||||
<ReactPlayground codeText={MARKDOWN_COMPONENT} />,
|
||||
|
||||
@@ -1,33 +1,26 @@
|
||||
var TIMER_COMPONENT = `
|
||||
class Timer extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {secondsElapsed: 0};
|
||||
}
|
||||
|
||||
tick() {
|
||||
this.setState((prevState) => ({
|
||||
secondsElapsed: prevState.secondsElapsed + 1
|
||||
}));
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.interval = setInterval(() => this.tick(), 1000);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
var Timer = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {secondsElapsed: 0};
|
||||
},
|
||||
tick: function() {
|
||||
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
|
||||
},
|
||||
componentDidMount: function() {
|
||||
this.interval = setInterval(this.tick, 1000);
|
||||
},
|
||||
componentWillUnmount: function() {
|
||||
clearInterval(this.interval);
|
||||
}
|
||||
|
||||
render() {
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<div>Seconds Elapsed: {this.state.secondsElapsed}</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(<Timer />, mountNode);
|
||||
`.trim();
|
||||
`;
|
||||
|
||||
ReactDOM.render(
|
||||
<ReactPlayground codeText={TIMER_COMPONENT} />,
|
||||
|
||||
@@ -1,56 +1,41 @@
|
||||
var TODO_COMPONENT = `
|
||||
class TodoApp extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
this.state = {items: [], text: ''};
|
||||
var TodoList = React.createClass({
|
||||
render: function() {
|
||||
var createItem = function(itemText, index) {
|
||||
return <li key={index + itemText}>{itemText}</li>;
|
||||
};
|
||||
return <ul>{this.props.items.map(createItem)}</ul>;
|
||||
}
|
||||
|
||||
render() {
|
||||
});
|
||||
var TodoApp = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {items: [], text: ''};
|
||||
},
|
||||
onChange: function(e) {
|
||||
this.setState({text: e.target.value});
|
||||
},
|
||||
handleSubmit: function(e) {
|
||||
e.preventDefault();
|
||||
var nextItems = this.state.items.concat([this.state.text]);
|
||||
var nextText = '';
|
||||
this.setState({items: nextItems, text: nextText});
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<div>
|
||||
<h3>TODO</h3>
|
||||
<TodoList items={this.state.items} />
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<input onChange={this.handleChange} value={this.state.text} />
|
||||
<input onChange={this.onChange} value={this.state.text} />
|
||||
<button>{'Add #' + (this.state.items.length + 1)}</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
handleChange(e) {
|
||||
this.setState({text: e.target.value});
|
||||
}
|
||||
|
||||
handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
var newItem = {
|
||||
text: this.state.text,
|
||||
id: Date.now()
|
||||
};
|
||||
this.setState((prevState) => ({
|
||||
items: prevState.items.concat(newItem),
|
||||
text: ''
|
||||
}));
|
||||
}
|
||||
}
|
||||
|
||||
class TodoList extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<ul>
|
||||
{this.props.items.map(item => (
|
||||
<li key={item.id}>{item.text}</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(<TodoApp />, mountNode);
|
||||
`.trim();
|
||||
`;
|
||||
|
||||
ReactDOM.render(
|
||||
<ReactPlayground codeText={TODO_COMPONENT} />,
|
||||
|
||||
82
docs/_js/html-jsx.js
Normal file
82
docs/_js/html-jsx.js
Normal file
@@ -0,0 +1,82 @@
|
||||
/**
|
||||
* Copyright 2013-2015, Facebook, Inc.
|
||||
* All rights reserved.
|
||||
*
|
||||
* This source code is licensed under the BSD-style license found in the
|
||||
* LICENSE file in the root directory of this source tree. An additional grant
|
||||
* of patent rights can be found in the PATENTS file in the same directory.
|
||||
*/
|
||||
|
||||
/**
|
||||
* This is a web interface for the HTML to JSX converter contained in
|
||||
* `html-jsx-lib.js`.
|
||||
*/
|
||||
;(function() {
|
||||
|
||||
var HELLO_COMPONENT = "\
|
||||
<!-- Hello world -->\n\
|
||||
<div class=\"awesome\" style=\"border: 1px solid red\">\n\
|
||||
<label for=\"name\">Enter your name: </label>\n\
|
||||
<input type=\"text\" id=\"name\" />\n\
|
||||
</div>\n\
|
||||
<p>Enter your HTML here</p>\
|
||||
";
|
||||
|
||||
var HTMLtoJSXComponent = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {
|
||||
outputClassName: 'NewComponent',
|
||||
createClass: true
|
||||
};
|
||||
},
|
||||
onReactClassNameChange: function(evt) {
|
||||
this.setState({ outputClassName: evt.target.value });
|
||||
},
|
||||
onCreateClassChange: function(evt) {
|
||||
this.setState({ createClass: evt.target.checked });
|
||||
},
|
||||
setInput: function(input) {
|
||||
this.setState({ input: input });
|
||||
this.convertToJsx();
|
||||
},
|
||||
convertToJSX: function(input) {
|
||||
var converter = new HTMLtoJSX({
|
||||
outputClassName: this.state.outputClassName,
|
||||
createClass: this.state.createClass
|
||||
});
|
||||
return converter.convert(input);
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<div>
|
||||
<div id="options">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={this.state.createClass}
|
||||
onChange={this.onCreateClassChange} />
|
||||
Create class
|
||||
</label>
|
||||
<label style={{display: this.state.createClass ? '' : 'none'}}>
|
||||
·
|
||||
Class name:
|
||||
<input
|
||||
type="text"
|
||||
value={this.state.outputClassName}
|
||||
onChange={this.onReactClassNameChange} />
|
||||
</label>
|
||||
</div>
|
||||
<ReactPlayground
|
||||
codeText={HELLO_COMPONENT}
|
||||
renderCode={true}
|
||||
transformer={this.convertToJSX}
|
||||
showCompiledJSTab={false}
|
||||
editorTabTitle="Live HTML Editor"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(<HTMLtoJSXComponent />, document.getElementById('jsxCompiler'));
|
||||
}());
|
||||
@@ -21,8 +21,8 @@ var CodeMirrorEditor = React.createClass({
|
||||
componentDidMount: function() {
|
||||
if (IS_MOBILE) return;
|
||||
|
||||
this.editor = CodeMirror.fromTextArea(this.refs.editor, {
|
||||
mode: 'jsx',
|
||||
this.editor = CodeMirror.fromTextArea(ReactDOM.findDOMNode(this.refs.editor), {
|
||||
mode: 'javascript',
|
||||
lineNumbers: this.props.lineNumbers,
|
||||
lineWrapping: true,
|
||||
smartIndent: false, // javascript mode does bad things with jsx indents
|
||||
@@ -90,14 +90,8 @@ var ReactPlayground = React.createClass({
|
||||
|
||||
getDefaultProps: function() {
|
||||
return {
|
||||
transformer: function(code, options) {
|
||||
var presets = ['react'];
|
||||
if (!options || !options.skipES2015Transform) {
|
||||
presets.push('es2015');
|
||||
}
|
||||
return Babel.transform(code, {
|
||||
presets
|
||||
}).code;
|
||||
transformer: function(code) {
|
||||
return babel.transform(code).code;
|
||||
},
|
||||
editorTabTitle: 'Live JSX Editor',
|
||||
showCompiledJSTab: true,
|
||||
@@ -121,15 +115,15 @@ var ReactPlayground = React.createClass({
|
||||
this.setState({mode: mode});
|
||||
},
|
||||
|
||||
compileCode: function(options) {
|
||||
return this.props.transformer(this.state.code, options);
|
||||
compileCode: function() {
|
||||
return this.props.transformer(this.state.code);
|
||||
},
|
||||
|
||||
render: function() {
|
||||
var isJS = this.state.mode === this.MODES.JS;
|
||||
var compiledCode = '';
|
||||
try {
|
||||
compiledCode = this.compileCode({skipES2015Transform: true});
|
||||
compiledCode = this.compileCode();
|
||||
} catch (err) {}
|
||||
|
||||
var JSContent =
|
||||
@@ -200,22 +194,20 @@ var ReactPlayground = React.createClass({
|
||||
},
|
||||
|
||||
executeCode: function() {
|
||||
var mountNode = this.refs.mount;
|
||||
var mountNode = ReactDOM.findDOMNode(this.refs.mount);
|
||||
|
||||
try {
|
||||
ReactDOM.unmountComponentAtNode(mountNode);
|
||||
} catch (e) { }
|
||||
|
||||
try {
|
||||
var compiledCode;
|
||||
var compiledCode = this.compileCode();
|
||||
if (this.props.renderCode) {
|
||||
compiledCode = this.compileCode({skipES2015Transform: true});
|
||||
ReactDOM.render(
|
||||
<CodeMirrorEditor codeText={compiledCode} readOnly={true} />,
|
||||
mountNode
|
||||
);
|
||||
} else {
|
||||
compiledCode = this.compileCode({skipES2015Transform: false});
|
||||
eval(compiledCode);
|
||||
}
|
||||
} catch (err) {
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
---
|
||||
layout: default
|
||||
sectionid: community
|
||||
---
|
||||
|
||||
<section class="content wrap communityContent">
|
||||
<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 }}
|
||||
</h1>
|
||||
<div class="subHeader">{{ page.description }}</div>
|
||||
|
||||
{{ content }}
|
||||
|
||||
<div class="docs-prevnext">
|
||||
{% if page.prev %}
|
||||
<a class="docs-prev" href="/react/community/{{ page.prev }}">← Prev</a>
|
||||
{% endif %}
|
||||
{% if page.next %}
|
||||
<a class="docs-next" href="/react/community/{{ page.next }}">Next →</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include nav_community.html %}
|
||||
</section>
|
||||
@@ -1,32 +1,21 @@
|
||||
{% if page.excerpt %}
|
||||
{% assign type = 'article' %}
|
||||
{% assign sectionTitle = 'React Blog' %}
|
||||
{% assign description = page.excerpt | strip_html %}
|
||||
{% else %}
|
||||
{% assign type = 'website' %}
|
||||
{% assign sectionTitle = 'React' %}
|
||||
{% assign description = 'A JavaScript library for building user interfaces' %}
|
||||
{% endif %}
|
||||
{% assign title = page.title | append: ' - ' | append: sectionTitle %}
|
||||
<!DOCTYPE html>
|
||||
<!--[if IE]><![endif]-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>{{ title }}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta property="og:title" content="{{ title }}">
|
||||
<meta property="og:type" content="{{ type }}">
|
||||
<title>{{ page.title }} | React</title>
|
||||
<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:description" content="{{ description }}">
|
||||
<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">
|
||||
@@ -39,29 +28,68 @@
|
||||
<script src="/react/js/es5-shim.min.js"></script>
|
||||
<script src="/react/js/es5-sham.min.js"></script>
|
||||
<![endif]-->
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
|
||||
<script src="/react/js/codemirror.js"></script>
|
||||
<script src="/react/js/javascript.js"></script>
|
||||
<script src="/react/js/xml.js"></script>
|
||||
<script src="/react/js/jsx.js"></script>
|
||||
<script src="/react/js/react.js"></script>
|
||||
<script src="/react/js/react-dom.js"></script>
|
||||
<script src="/react/js/babel.min.js"></script>
|
||||
<script src="/react/js/babel-browser.min.js"></script>
|
||||
<script src="/react/js/live_editor.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
|
||||
{% include navigation.html %}
|
||||
<div class="nav-main">
|
||||
<div class="wrap">
|
||||
<a class="nav-home" href="/react/index.html">
|
||||
<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>
|
||||
</ul>
|
||||
|
||||
<ul class="nav-site nav-site-external">
|
||||
<li><a href="https://github.com/facebook/react">GitHub</a>
|
||||
<li><a href="https://facebook.github.io/react-native/">React Native</a>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if page.id == 'home' %}
|
||||
<div class="hero">
|
||||
<div class="wrap">
|
||||
<div class="text"><strong>React</strong></div>
|
||||
<div class="minitext">
|
||||
A JavaScript library for building user interfaces
|
||||
</div>
|
||||
|
||||
<div class="buttons-unit">
|
||||
<a href="/react/docs/getting-started.html" class="button">Get Started</a>
|
||||
<a href="/react/downloads.html" class="button">Download React v{{site.react_version}}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{{ content }}
|
||||
|
||||
{% include footer.html %}
|
||||
<footer class="wrap">
|
||||
<div class="left">
|
||||
A Facebook & Instagram collaboration.<br>
|
||||
<a href="/react/acknowledgements.html">Acknowledgements</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
© 2013–{{ site.time | date: '%Y' }} Facebook Inc.<br>
|
||||
Documentation licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<div id="fb-root"></div>
|
||||
<script src="/react/js/anchor-links.js"></script>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
@@ -76,15 +104,9 @@
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId=623268441017527";
|
||||
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>
|
||||
|
||||
@@ -4,10 +4,12 @@ sectionid: docs
|
||||
---
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
{% 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>
|
||||
|
||||
@@ -22,6 +24,4 @@ sectionid: docs
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include nav_docs.html %}
|
||||
</section>
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
---
|
||||
layout: default
|
||||
---
|
||||
|
||||
{% if page.id == 'home' %}
|
||||
{% include hero.html %}
|
||||
{% endif %}
|
||||
|
||||
<section class="content wrap">
|
||||
{{ content }}
|
||||
</section>
|
||||
@@ -4,9 +4,8 @@ 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 %}
|
||||
</div>
|
||||
{% include nav_blog.html %}
|
||||
</section>
|
||||
|
||||
@@ -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>
|
||||
@@ -1,9 +1,11 @@
|
||||
---
|
||||
layout: default
|
||||
sectionid: contributing
|
||||
sectionid: tips
|
||||
---
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
{% include nav_docs.html %}
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>{{ page.title }}</h1>
|
||||
<div class="subHeader">{{ page.description }}</div>
|
||||
@@ -11,13 +13,11 @@ sectionid: contributing
|
||||
|
||||
<div class="docs-prevnext">
|
||||
{% if page.prev %}
|
||||
<a class="docs-prev" href="/react/contributing/{{ page.prev }}">← Prev</a>
|
||||
<a class="docs-prev" href="/react/tips/{{ page.prev }}">← Prev</a>
|
||||
{% endif %}
|
||||
{% if page.next %}
|
||||
<a class="docs-next" href="/react/contributing/{{ page.next }}">Next →</a>
|
||||
<a class="docs-next" href="/react/tips/{{ page.next }}">Next →</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include nav_docs.html %}
|
||||
</section>
|
||||
@@ -1,29 +0,0 @@
|
||||
---
|
||||
layout: default
|
||||
sectionid: tutorial
|
||||
---
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
{% include nav_tutorial.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 }}
|
||||
</h1>
|
||||
<div class="subHeader">{{ page.description }}</div>
|
||||
|
||||
{{ content }}
|
||||
|
||||
<div class="docs-prevnext">
|
||||
{% if page.prev %}
|
||||
<a class="docs-prev" href="/react/tutorial/{{ page.prev }}">← Prev</a>
|
||||
{% endif %}
|
||||
{% if page.next %}
|
||||
<a class="docs-next" href="/react/tutorial/{{ page.next }}">Next →</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -6,7 +6,7 @@
|
||||
module Authors
|
||||
class Generator < Jekyll::Generator
|
||||
def generate(site)
|
||||
site.posts.docs.each do |post|
|
||||
site.posts.each do |post|
|
||||
authors = []
|
||||
if post['author'].kind_of?(Array)
|
||||
for author in post['author']
|
||||
|
||||
17
docs/_plugins/header_links.rb
Normal file
17
docs/_plugins/header_links.rb
Normal file
@@ -0,0 +1,17 @@
|
||||
require 'redcarpet'
|
||||
require 'sanitize'
|
||||
|
||||
# Simple converter that is probably better than RedCarpet's built in TOC id
|
||||
# generator (which ends up with things lik id="toc_1"... terrible).
|
||||
|
||||
class Redcarpet::Render::HTML
|
||||
def header(title, level)
|
||||
clean_title = Sanitize.clean(title)
|
||||
.downcase
|
||||
.gsub(/\s+/, "-")
|
||||
.gsub(/[^A-Za-z0-9\-_.]/, "")
|
||||
|
||||
return "<h#{level}><a class=\"anchor\" name=\"#{clean_title}\"></a>#{title} <a class=\"hash-link\" href=\"##{clean_title}\">#</a></h#{level}>"
|
||||
end
|
||||
end
|
||||
|
||||
@@ -1,39 +1,13 @@
|
||||
module Jekyll
|
||||
module SidebarItemFilter
|
||||
def docs_sidebar_link(item)
|
||||
return sidebar_helper(item, 'docs')
|
||||
end
|
||||
|
||||
def docs_old_sidebar_link(item)
|
||||
return sidebar_helper(item, 'docs-old')
|
||||
end
|
||||
|
||||
def community_sidebar_link(item)
|
||||
return sidebar_helper(item, 'community')
|
||||
end
|
||||
|
||||
def tutorial_sidebar_link(item)
|
||||
return sidebar_helper(item, 'tutorial')
|
||||
end
|
||||
|
||||
def sidebar_helper(item, group)
|
||||
forceInternal = item["forceInternal"]
|
||||
|
||||
def sidebar_item_link(item)
|
||||
pageID = @context.registers[:page]["id"]
|
||||
itemID = item["id"]
|
||||
href = item["href"] || "/react/#{group}/#{itemID}.html"
|
||||
classes = []
|
||||
if pageID == itemID
|
||||
classes.push("active")
|
||||
end
|
||||
if item["href"] && (forceInternal == nil)
|
||||
classes.push("external")
|
||||
end
|
||||
className = classes.size > 0 ? " class=\"#{classes.join(' ')}\"" : ""
|
||||
href = item["href"] || "/react/docs/#{itemID}.html"
|
||||
className = pageID == itemID ? ' class="active"' : ''
|
||||
|
||||
return "<a href=\"#{href}\"#{className}>#{item["title"]}</a>"
|
||||
end
|
||||
|
||||
end
|
||||
end
|
||||
|
||||
|
||||
@@ -56,7 +56,7 @@ to the DOM.
|
||||
> lightweight description of what the DOM should look like.
|
||||
|
||||
We call this process **reconciliation**. Check out
|
||||
[this jsFiddle](http://jsfiddle.net/2h6th4ju/) to see an example of
|
||||
[this jsFiddle](http://jsfiddle.net/fv6RD/3/) to see an example of
|
||||
reconciliation in action.
|
||||
|
||||
Because this re-render is so fast (around 1ms for TodoMVC), the developer
|
||||
|
||||
@@ -47,7 +47,7 @@ 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="100%" height="340" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></figure>
|
||||
<figure><iframe src="https://player.vimeo.com/video/67248575" width="500" height="340" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></figure>
|
||||
|
||||
## Snake in React
|
||||
|
||||
|
||||
@@ -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="100%" 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="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>
|
||||
|
||||
|
||||
## 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="100%" height="400" src="//www.youtube-nocookie.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe></figure>
|
||||
<figure><iframe width="650" height="400" src="//www.youtube-nocookie.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe></figure>
|
||||
|
||||
|
||||
## Docs
|
||||
|
||||
@@ -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.
|
||||
>
|
||||
|
||||
@@ -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="100%" height="450" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen></iframe></figure>
|
||||
<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>
|
||||
|
||||
|
||||
## Pump - Clojure bindings for React
|
||||
@@ -56,7 +56,7 @@ The video will be available soon on the [JSConf EU website](http://2013.jsconf.e
|
||||
|
||||
[Todd Kennedy](http://blog.selfassembled.org/) working at [Condé Nast](http://www.condenast.com/) implemented a wrapper on-top of [JSHint](http://www.jshint.com/) that first converts JSX files to JS.
|
||||
|
||||
> A wrapper around JSHint to allow linting of files containing JSX syntax. Accepts glob patterns. Respects your local .jshintrc file and .gitignore to filter your glob patterns.
|
||||
> A wrapper around JSHint to allow linting of files containg JSX syntax. Accepts glob patterns. Respects your local .jshintrc file and .gitignore to filter your glob patterns.
|
||||
>
|
||||
> ```
|
||||
npm install -g jsxhint
|
||||
@@ -96,3 +96,4 @@ var Table = React.createClass({
|
||||
> You see that React components are defined using a regular JS object. Some properties and methods of the object such as render() have special meanings, the rest is upforgrabs.
|
||||
>
|
||||
> [Read the full article...](http://www.phpied.com/reactive-table/)
|
||||
|
||||
|
||||
@@ -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="100%" height="370" src="//www.youtube-nocookie.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe></figure>
|
||||
<figure><iframe width="600" height="370" src="//www.youtube-nocookie.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe></figure>
|
||||
|
||||
|
||||
## Server-side React with PHP
|
||||
|
||||
@@ -9,7 +9,7 @@ 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="100%" height="338" src="//www.youtube-nocookie.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe></figure>
|
||||
<figure><iframe width="600" height="338" src="//www.youtube-nocookie.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe></figure>
|
||||
|
||||
|
||||
## React Tips
|
||||
@@ -64,7 +64,7 @@ This round-up is the proof that React has taken off from its Facebook's root: it
|
||||
>
|
||||
> [Read the full article...](http://rz.scale-it.pl/2013/10/20/frontend_components_in_react.html)
|
||||
|
||||
<figure><iframe src="https://docs.google.com/presentation/d/1JSFbjCuuexwOHCeHWBMNRIJdyfD2Z0ZQwX65WOWkfaI/embed?start=false" frameborder="0" width="100%" height="468" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"> </iframe></figure>
|
||||
<figure><iframe src="https://docs.google.com/presentation/d/1JSFbjCuuexwOHCeHWBMNRIJdyfD2Z0ZQwX65WOWkfaI/embed?start=false" frameborder="0" width="600" height="468" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"> </iframe></figure>
|
||||
|
||||
|
||||
## JSX
|
||||
|
||||
@@ -10,7 +10,7 @@ Happy holidays! This blog post is a little-late Christmas present for all the Re
|
||||
|
||||
[Pete Hunt](http://www.petehunt.net/) wrote three demos showing that React can be used to run 60fps native-like experiences on mobile web. A frosted glass effect, an image gallery with 3d animations and an infinite scroll view.
|
||||
|
||||
<figure><iframe src="//player.vimeo.com/video/79659941" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></figure>
|
||||
<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/)
|
||||
|
||||
@@ -19,7 +19,7 @@ Happy holidays! This blog post is a little-late Christmas present for all the Re
|
||||
|
||||
[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="100%" height="315" src="//www.youtube-nocookie.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe></figure>
|
||||
<figure><iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe></figure>
|
||||
|
||||
|
||||
## JSX: E4X The Good Parts
|
||||
@@ -115,3 +115,4 @@ var MyComponent = React.createClass({
|
||||
## Random Tweet
|
||||
|
||||
<center><blockquote class="twitter-tweet" lang="en"><p>I may be starting to get annoying with this, but ReactJS is really exciting. I truly feel the virtual DOM is a game changer.</p>— Eric Florenzano (@ericflo) <a href="https://twitter.com/ericflo/statuses/413842834974732288">December 20, 2013</a></blockquote></center>
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ author: sebmarkbage
|
||||
|
||||
With the new year, we thought you'd enjoy some new tools for debugging React code. Today we're releasing the [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi), an extension to the Chrome Developer Tools. [Download them from the Chrome Web Store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi).
|
||||
|
||||
<figure><iframe width="100%" height="315" src="//www.youtube-nocookie.com/embed/Cey7BS6dE0M" frameborder="0" allowfullscreen></iframe></figure>
|
||||
<figure><iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/Cey7BS6dE0M" frameborder="0" allowfullscreen></iframe></figure>
|
||||
|
||||
You will get a new tab titled "React" in your Chrome DevTools. This tab shows you a list of the root React Components that are rendered on the page as well as the subcomponents that each root renders.
|
||||
|
||||
@@ -15,3 +15,4 @@ When you inspect a DOM element using the regular Elements tab, you can switch ov
|
||||
<figure>[](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)</figure>
|
||||
|
||||
We hope these tools will help your team better understand your component hierarchy and track down bugs. We're very excited about this initial launch and appreciate any feedback you may have. As always, we also accept [pull requests on GitHub](https://github.com/facebook/react-devtools).
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@ React is only one-piece of your web application stack. [Mark Lussier](https://gi
|
||||
>
|
||||
> I encourage you to fork, and make it right and submit a pull request!
|
||||
>
|
||||
> My current opinion is using tools like Grunt, Browserify, Bower and multiple grunt plugins to get the job done. I also opted for Zepto over jQuery and the Flatiron Project's Director when I need a router. Oh and for the last little bit of tech that makes you mad, I am in the SASS camp when it comes to stylesheets
|
||||
> My current opinion is using tools like Grunt, Browserify, Bower and mutiple grunt plugins to get the job done. I also opted for Zepto over jQuery and the Flatiron Project's Director when I need a router. Oh and for the last little bit of tech that makes you mad, I am in the SASS camp when it comes to stylesheets
|
||||
>
|
||||
> [Check it out on GitHub...](https://github.com/intabulas/reactjs-baseline)
|
||||
|
||||
@@ -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/tutorial/tutorial.html) into a rails app. This is a good example on how to get started with a rails project.
|
||||
[Selem Delul](http://selem.im) bundled the [React Tutorial](/react/docs/tutorial.html) into a rails app. This is a good example on how to get started with a rails project.
|
||||
|
||||
> ```
|
||||
git clone https://github.com/necrodome/react-rails-tutorial
|
||||
|
||||
@@ -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="100%" height="315" src="//www.youtube-nocookie.com/embed/Lqcs6hPOcFw?start=2963" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/Lqcs6hPOcFw?start=2963" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ There have been many posts recently covering the <i>why</i> and <i>how</i> of Re
|
||||
## React in a nutshell
|
||||
Got five minutes to pitch React to your coworkers? John Lynch ([@johnrlynch](https://twitter.com/johnrlynch)) put together [this excellent and refreshing slideshow](http://slid.es/johnlynch/reactjs):
|
||||
|
||||
<iframe src="//slid.es/johnlynch/reactjs/embed" width="100%" height="420" scrolling="no" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
|
||||
<iframe src="//slid.es/johnlynch/reactjs/embed" width="576" height="420" scrolling="no" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
|
||||
|
||||
|
||||
|
||||
@@ -54,7 +54,7 @@ It's great to see the React community expand internationally. [This site](http:/
|
||||
|
||||
### Egghead.io video tutorials
|
||||
|
||||
Joe Maddalone ([@joemaddalone](https://twitter.com/joemaddalone)) of [egghead.io](https://egghead.io/) created a series of React video tutorials, such as [this](http://www.youtube-nocookie.com/v/rFvZydtmsxM) introduction to React Components. [[part 1](http://www.youtube-nocookie.com/v/rFvZydtmsxM)], [[part 2](http://www.youtube-nocookie.com/v/5yvFLrt7N8M)]
|
||||
Joe Maddalone ([@joemaddalone](https://twitter.com/joemaddalone)) of [egghead.io](https://egghead.io/) created a series of React video tutorials, such as [this](http://www.youtube-nocookie.com/watch?v=rFvZydtmsxM&feature=youtu.be&a) introduction to React Components. [[part 1](http://www.youtube-nocookie.com/watch?v=rFvZydtmsxM&feature=youtu.be&a)], [[part 2](http://www.youtube-nocookie.com/watch?v=5yvFLrt7N8M)]
|
||||
|
||||
### "React: Finally, a great server/client web stack"
|
||||
|
||||
|
||||
@@ -49,7 +49,7 @@ React.DOM.div(null,
|
||||
)
|
||||
```
|
||||
|
||||
We believe this new behavior is more helpful and eliminates cases where unwanted whitespace was previously added.
|
||||
We believe this new behavior is more helpful and elimates cases where unwanted whitespace was previously added.
|
||||
|
||||
In cases where you want to preserve the space adjacent to a newline, you can write a JS string like `{"Monkeys: "}` in your JSX source. We've included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can [install jsx\_whitespace\_transformer from npm](https://github.com/facebook/react/blob/master/npm-jsx_whitespace_transformer/README.md) and run it over your source tree to modify files in place. The transformed JSX files will preserve your code's existing whitespace behavior.
|
||||
|
||||
|
||||
@@ -57,7 +57,7 @@ React.DOM.div(null,
|
||||
)
|
||||
```
|
||||
|
||||
We believe this new behavior is more helpful and eliminates cases where unwanted whitespace was previously added.
|
||||
We believe this new behavior is more helpful and elimates cases where unwanted whitespace was previously added.
|
||||
|
||||
In cases where you want to preserve the space adjacent to a newline, you can write `{'Monkeys: '}` or `Monkeys:{' '}` in your JSX source. We've included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can [install jsx\_whitespace\_transformer from npm](https://github.com/facebook/react/blob/master/npm-jsx_whitespace_transformer/README.md) and run it over your source tree to modify files in place. The transformed JSX files will preserve your code's existing whitespace behavior.
|
||||
|
||||
|
||||
@@ -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="100%" height="315" src="//www.youtube-nocookie.com/embed/jYcpaemt90M" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/jYcpaemt90M" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -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="100%" height="315" src="//www.youtube-nocookie.com/embed/srt3OBP2kGc?start=113" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/srt3OBP2kGc?start=113" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
## React and Web Components
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@ author: [fisherwebdev, jingc]
|
||||
|
||||
We recently spoke at one of f8's breakout session about Flux, a data flow architecture that works well with React. Check out the video here:
|
||||
|
||||
<figure><iframe width="100%" 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-nocookie.com/embed/nYkdrAPrdcw?list=PLb0IAmt7-GS188xDYE-u1ShQmFFGbrk0v&start=621" frameborder="0" allowfullscreen></iframe></figure>
|
||||
|
||||
To summarize, Flux works well for us because the single directional data flow makes it easy to understand and modify an application as it becomes more complicated. We found that two-way data bindings lead to cascading updates, where changing one data model led to another data model updating, making it very difficult to predict what would change as the result of a single user interaction.
|
||||
|
||||
|
||||
@@ -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="100%" height="315" src="//www.youtube-nocookie.com/embed/KZjFVdU8VLI" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/KZjFVdU8VLI" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
And don't forget [Pete Hunt](https://github.com/petehunt)'s Wolfenstein 3D rendering engine in React ([source code](https://github.com/petehunt/wolfenstein3D-react/blob/master/js/renderer.js#L183)). While it's nearly a year old, it's still a nice demo.
|
||||
|
||||
|
||||
@@ -16,14 +16,14 @@ It's an exciting time for React as there are now more commits from open source c
|
||||
|
||||
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="100%" height="315" src="//www.youtube-nocookie.com/embed/D-ioDiacTm8" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/D-ioDiacTm8" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
|
||||
## Live Editing
|
||||
|
||||
One of the best features of React is that it provides the foundations to implement concepts that were otherwise extremely difficult, like server-side rendering, undo-redo, rendering to non-DOM environments like canvas... [Dan Abramov](https://twitter.com/dan_abramov) got hot code reloading working with webpack in order to [live edit a React project](https://gaearon.github.io/react-hot-loader/)!
|
||||
|
||||
<iframe src="//player.vimeo.com/video/100010922" width="100%" height="315" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
|
||||
<iframe src="//player.vimeo.com/video/100010922" width="650" height="315" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
|
||||
|
||||
|
||||
## ReactIntl Mixin by Yahoo
|
||||
@@ -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="100%" height="315" src="//www.youtube-nocookie.com/embed/CP3lvm5Ppqo" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/CP3lvm5Ppqo" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
In related news, the next [React SF Meetup](http://www.meetup.com/ReactJS-San-Francisco/events/195518392/) will be from Prezi: [“Immediate Mode on the Web: How We Implemented the Prezi Viewer in JavaScript”](https://medium.com/prezi-engineering/how-and-why-prezi-turned-to-javascript-56e0ca57d135). While not in React, their tech is really awesome and shares a lot of React's design principles and perf optimizations.
|
||||
|
||||
|
||||
@@ -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="100%" height="315" src="//www.youtube-nocookie.com/embed/lAn7GVoGlKU" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/lAn7GVoGlKU" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
|
||||
## Random Tweets
|
||||
|
||||
@@ -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 [JavaScript’s History and How it Led To React](http://thenewstack.io/javascripts-history-and-how-it-led-to-reactjs/).
|
||||
|
||||
<iframe width="100%" height="315" src="//www.youtube-nocookie.com/embed/eCf5CquV_Bw" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/eCf5CquV_Bw" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
|
||||
## v8 optimizations
|
||||
@@ -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="100%" height="200" src="//www.youtube-nocookie.com/embed/rFvZydtmsxM" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="200" src="//www.youtube-nocookie.com/embed/rFvZydtmsxM" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
|
||||
## Saving time & staying sane?
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -10,7 +10,7 @@ This round-up is a special edition on [Flux](https://facebook.github.io/flux/).
|
||||
|
||||
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="100%" height="315" src="//www.youtube-nocookie.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
# Yahoo
|
||||
|
||||
@@ -102,7 +102,7 @@ undo: function() {
|
||||
|
||||
[Dan Abramov](https://twitter.com/dan_abramov) working at Stampsy made a talk about React and Flux. It's a very good overview of the concepts at play.
|
||||
|
||||
<iframe src="//slides.com/danabramov/components-react-flux-wip/embed" width="100%" height="315" scrolling="no" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
|
||||
<iframe src="//slides.com/danabramov/components-react-flux-wip/embed" width="650" height="315" scrolling="no" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
|
||||
|
||||
|
||||
## React and Flux
|
||||
@@ -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="100%" height="315" src="//www.youtube-nocookie.com/embed/XhXC4SKOGfQ" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/XhXC4SKOGfQ" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
|
||||
## Random Tweet
|
||||
|
||||
@@ -10,14 +10,14 @@ amazed that 600 people requested to be notified when ticket go on sale. This is
|
||||
When we organized the conference, we decided to start small since this is the
|
||||
first React.js conference. Also, we weren't sure what level of demand to expect,
|
||||
so we planned for a single-track, two-day conference on Facebook's campus. The
|
||||
largest room available would accommodate 18 speaking slots and 200 attendees.
|
||||
largest room available would accomodate 18 speaking slots and 200 attendees.
|
||||
The spacial configuration makes it difficult to add a second track and changing
|
||||
venues only two months in advance would be too difficult, so we are deciding to
|
||||
stick with the originally planned format and venue on Facebook's campus.
|
||||
|
||||
Unfortunately, this means that we can only accept a small number of the awesome
|
||||
conference talk proposals. In order to make sure attendees get a fair shot at
|
||||
registering, we're going to sell tickets in three separate first-come,
|
||||
registering, we're going to to sell tickets in three separate first-come,
|
||||
first-serve phases. **Tickets will cost $200 regardless of which phase they are
|
||||
purchased from and all proceeds will go to charity**.
|
||||
|
||||
|
||||
@@ -14,11 +14,11 @@ Murilo Pereira ([mpereira](https://github.com/mpereira)) tussles with the topic
|
||||
|
||||
I ([steveluscher](https://github.com/steveluscher)) spoke at Manning Publications' “Powered By JavaScript” Strangeloop pre-conf in St. Louis. There, I proposed a new notation to talk about development complexity – Big-Coffee Notation ☕(n) – and spoke about the features of React that help keep our Big-Coffee from going quadratic, as our user interfaces get more complex.
|
||||
|
||||
<iframe width="100%" height="315" src="//www.youtube-nocookie.com/embed/rI0GQc__0SM" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/rI0GQc__0SM" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
James Pearce ([jamesgpearce](https://github.com/jamesgpearce)) carried Big-Coffee all the way to Raleigh, NC. At the _All Things Open_ conference, he spoke about some of the design decisions that went into React, particularly those that lend themselves to simpler, more reliable code.
|
||||
|
||||
<iframe width="100%" height="315" src="//www.youtube-nocookie.com/embed/m2fuO2wl_3c" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/m2fuO2wl_3c" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
## All About Isomorphism
|
||||
|
||||
@@ -38,7 +38,7 @@ Ryan Florence ([rpflorence](https://github.com/rpflorence])) and Michael Jackson
|
||||
|
||||
Jonathan Beebe ([somethingkindawierd](https://github.com/somethingkindawierd)) spoke about how he uses React to build tools that deliver hope to those trying to make the best of a bad situation. Watch his talk from this year's _Nodevember_ conference in Nashville
|
||||
|
||||
<iframe width="100%" height="315" src="//www.youtube-nocookie.com/embed/uZgAq1CZ1N8" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="420" height="315" src="//www.youtube-nocookie.com/embed/uZgAq1CZ1N8" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
If you take a peek under the covers, you'll find that React powers [Carousel](https://blog.carousel.com/2014/11/introducing-carousel-for-web-ipad-and-android-tablet/), Dropbox's new photo and video gallery app.
|
||||
|
||||
@@ -48,7 +48,7 @@ We enjoyed a cinematic/narrative experience with this React-powered, interactive
|
||||
|
||||
Spend the next 60 seconds watching Daniel Woelfel ([dwwoelfel](https://github.com/dwwoelfel)) serialize a React app's state as a string, then deserialize it to produce a working UI. Read about how he uses this technique to [reproduce bugs](http://blog.circleci.com/local-state-global-concerns/) reported to him by his users.
|
||||
|
||||
<iframe width="100%" height="315" src="//www.youtube-nocookie.com/embed/5yHFTN-_mOo" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="420" height="315" src="//www.youtube-nocookie.com/embed/5yHFTN-_mOo" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
## Community Components
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ layout: post
|
||||
author: steveluscher
|
||||
---
|
||||
|
||||
It was a privilege to welcome the React community to Facebook HQ on January 28–29 for the first-ever React.js Conf, and a pleasure to be able to unveil three new technologies that we've been using internally at Facebook for some time: GraphQL, Relay, and React Native.
|
||||
It was a privilege to welcome the React community to Facebook HQ on January 28–29 for the first-ever React.js Conf, and a pleasure to be be able to unveil three new technologies that we've been using internally at Facebook for some time: GraphQL, Relay, and React Native.
|
||||
|
||||
## The talks
|
||||
|
||||
@@ -16,7 +16,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/KVZ-P-ZI6W4" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/KVZ-P-ZI6W4" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -28,7 +28,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/yaymfLj5tjA" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/yaymfLj5tjA" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -40,7 +40,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/OZGgVxFxSIs" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/OZGgVxFxSIs" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -52,7 +52,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/9sc8Pyc51uU" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/9sc8Pyc51uU" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -64,7 +64,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/W2DgDNQZOwo" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/W2DgDNQZOwo" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -76,7 +76,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/XZfvW1a8Xac" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/XZfvW1a8Xac" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -88,7 +88,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/KtmjkCuV-EU" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/KtmjkCuV-EU" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -100,7 +100,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/KYzlpRvWZ6c" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/KYzlpRvWZ6c" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -112,7 +112,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/Sla-DkvmIHY" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/Sla-DkvmIHY" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -124,7 +124,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/z5e7kWSHWTg" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/z5e7kWSHWTg" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -136,7 +136,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/7rDsRXj9-cU" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/7rDsRXj9-cU" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -148,7 +148,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/g0TD0efcwVg" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/g0TD0efcwVg" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -160,7 +160,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
||||
</p>
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/I7IdS-PbEgI" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/I7IdS-PbEgI" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -171,7 +171,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
||||
<strong>Jafar Husain</strong> told us a story about how Netflix was able to push React into places where the DOM could not go.
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/eNC0mRYGWgc" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/eNC0mRYGWgc" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -182,7 +182,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
||||
<strong>Zach Nation</strong> showed us how we can produce visualizations from over 45 million data points without breaking a sweat.
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/2ii1lEkIv1s" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/2ii1lEkIv1s" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -193,7 +193,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
||||
<strong>David Nolen</strong> gave us a view of React from a non-JavaScript perspective, challenging some common intuition along the way.
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/5hGHdETNteE" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/5hGHdETNteE" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -204,7 +204,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
||||
<strong>Bill Fisher</strong> coordinated a Flux panel together with <strong>Michael Ridgway</strong>, <strong>Spike Brehm</strong>, <strong>Andres Suarez</strong>, <strong>Jing Chen</strong>, <strong>Ian Obermiller</strong>, and <strong>Kyle Davis</strong>.
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/LTj4O7WJJ98" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/LTj4O7WJJ98" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -215,7 +215,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
||||
<strong>Bonnie Eisenman</strong> led us through the ‘adapter’ approach to inter-component communication taken by her team at Codecademy.
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/ZM6wXoFTY3o" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/ZM6wXoFTY3o" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -226,7 +226,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
||||
<strong>James Brantly</strong> demonstrated how we can reap the benefits of static typing using both Flow and TypeScript.
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/9PTa9-PPVAc" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/9PTa9-PPVAc" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -237,7 +237,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
||||
<strong>Tom Occhino</strong>, <strong>Ben Alpert</strong>, <strong>Lee Byron</strong>, <strong>Christopher Chedeau</strong>, <strong>Sebastian Markbåge</strong>, <strong>Jing Chen</strong>, and <strong>Dan Schafer</strong> closed the conference with a Q&A session.
|
||||
</div>
|
||||
<div class="skinny-col">
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/EPpkboSKvPI" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/EPpkboSKvPI" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -245,7 +245,7 @@ It was a privilege to welcome the React community to Facebook HQ on January 28
|
||||
|
||||
The conference is over, but the conversation has just begun.
|
||||
|
||||
**Mihai Parparita** detailed his efforts to [hack his way to a React.js Conf ticket](http://blog.persistent.info/2014/12/html-munging-my-way-to-reactjs-conf.html); **James Long** blogged about [his first encounter with React Native](http://jlongster.com/First-Impressions-using-React-Native); **Eric Florenzano** talked about how he perceives the [impact of Relay, GraphQL, and React Native](https://medium.com/@ericflo/facebook-just-taught-us-all-how-to-build-websites-51f1e7e996f2) on software development; **Margaret Staples** blogged about her experience of [being on-campus at Facebook HQ](http://deadlugosi.blogspot.com/2015/02/facebook-gave-me-ice-cream.html); **Jeff Barczewski** tied his experience of attending the conference up with a bow in this [blog post filled with photos, videos, and links](http://codewinds.com/blog/2015-02-04-reactjs-conf.html); **Kevin Old** left us with [his takeaways](http://kevinold.com/2015/01/31/takeaways-from-reactjs-conf-2015.html); **Paul Wittmann** found React Native [freshly on his radar](http://www.railslove.com/stories/fresh-on-our-radar-react-native); and finally, undeterred by not being able to attend the conference in person, **Justin Ball** [summarized it from afar](http://www.justinball.com/2015/02/02/i-didn't-attend-react.js-conf.html).
|
||||
**Mihai Parparita** detailed his efforts to [hack his way to a React.js Conf ticket](http://blog.persistent.info/2014/12/html-munging-my-way-to-reactjs-conf.html); **James Long** blogged about [his first encounter with React Native](http://jlongster.com/First-Impressions-using-React-Native); **Eric Florenzano** talked about how he perceives the [impact of Relay, GraphQL, and React Native](https://medium.com/@ericflo/facebook-just-taught-us-all-how-to-build-websites-51f1e7e996f2) on software development; **Margaret Staples** blogged about her experience of [being on-campus at Facebook HQ](http://deadlugosi.blogspot.com/2015/02/facebook-gave-me-ice-cream.html); **Jeff Barczewski** tied his experience of attending the conference up with a bow in this [blog post filled with photos, videos, and links](http://codewinds.com/blog/2015-02-04-reactjs-conf.html); **Kevin Old** left us with [his takeaways](http://kevinold.com/2015/01/31/takeaways-from-reactjs-conf-2015.html); **Paul Wittmann** found React Native [freshly on his radar](http://www.railslove.com/stories/fresh-on-our-radar-react-native); and finally, undeterred by not being able to attend the conference in person, **Justin Ball** [summarized it from afar](http://www.justinball.com/2015/02/03/i-didn't-attend-react.js-conf/).
|
||||
|
||||
And, in case you missed a session, you can borrow **Michael Chan’s** [drawings](http://chantastic.io/2015-reactjs-conf/), **Mihai Parparita’s** [summary](https://quip.com/uJQeABv7nkFN), or **Shaohua Zhou’s** [day 1](http://getshao.com/2015/01/29/react-js-conf-notes-day1/) / [day 2](http://getshao.com/2015/01/29/react-js-conf-notes-day-2/) notes.
|
||||
|
||||
@@ -266,4 +266,4 @@ And, in case you missed a session, you can borrow **Michael Chan’s** [drawings
|
||||
|
||||
**All proceeds from React.js Conf 2015 were donated to the wonderful programs at [code.org](http://code.org)**. These programs aim to increase access to the field of computer science by underrepresented members of our community. Watch this video to learn more.
|
||||
|
||||
<iframe width="100%" height="171" src="https://www.youtube-nocookie.com/embed/FC5FbmsH4fw" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="305" height="171" src="https://www.youtube-nocookie.com/embed/FC5FbmsH4fw" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
@@ -8,7 +8,7 @@ author: wincent
|
||||
|
||||
There's more to building an application than creating a user interface. Data fetching is still a tricky problem, especially as applications become more complicated. At [React.js Conf](http://conf.reactjs.com/) we announced two projects we've created at Facebook to make data fetching simple for developers, even as a product grows to include dozens of contributors and the application becomes as complex as Facebook itself.
|
||||
|
||||
<iframe width="100%" height="315" src="https://www.youtube-nocookie.com/embed/9sc8Pyc51uU" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/9sc8Pyc51uU" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
The two projects — Relay and GraphQL — have been in use in production at Facebook for some time, and we're excited to be bringing them to the world as open source in the future. In the meantime, we wanted to share some additional information about the projects here.
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ Interest in React has been exploding recently, so it's a good time to explore so
|
||||
|
||||
[Formidable Labs](https://github.com/FormidableLabs) and [Seattle JS](http://www.meetup.com/seattlejs/) recently hosted a series of React, Flux, and Flow workshops, and the first part is available to watch online:
|
||||
|
||||
<iframe width="100%" height="300" src="//www.youtube-nocookie.com/embed/Pd6Ub7Ju2RM" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="300" src="//www.youtube-nocookie.com/embed/Pd6Ub7Ju2RM" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
[AEFlash](https://github.com/aearly) writes up [some best practices and tips](http://aeflash.com/2015-02/react-tips-and-best-practices.html) to help you avoid potential pitfalls when developing with React.
|
||||
|
||||
@@ -20,7 +20,7 @@ Black Mutt Media [takes us through their usage of React](http://blackmuttmedia.c
|
||||
|
||||
Our own [Sebastian Markbåge](https://github.com/sebmarkbage) was on the [Web Platform Podcast](http://thewebplatform.libsyn.com/31-building-with-reactjs) to have a chat about all aspects of React.
|
||||
|
||||
<iframe style="border: none" src="//html5-player.libsyn.com/embed/episode/id/3370114/height/75/width/200/theme/standard-mini/direction/no/autoplay/no/autonext/no/thumbnail/yes/preload/no/no_addthis/no/" height="26" width="100%" scrolling="no" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" oallowfullscreen="" msallowfullscreen=""></iframe>
|
||||
<iframe style="border: none" src="//html5-player.libsyn.com/embed/episode/id/3370114/height/75/width/200/theme/standard-mini/direction/no/autoplay/no/autonext/no/thumbnail/yes/preload/no/no_addthis/no/" height="26" width="650" scrolling="no" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" oallowfullscreen="" msallowfullscreen=""></iframe>
|
||||
|
||||
## Community Additions
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@ title: "Building The Facebook News Feed With Relay"
|
||||
author: josephsavona
|
||||
---
|
||||
|
||||
At React.js Conf in January we gave a preview of Relay, a new framework for building data-driven applications in React. In this post, we'll describe the process of creating a Relay application. This post assumes some familiarity with the concepts of Relay and GraphQL, so if you haven't already we recommend reading [our introductory blog post](/react/blog/2015/02/20/introducing-relay-and-graphql.html) or watching [the conference talk](https://www.youtube-nocookie.com/v/9sc8Pyc51uU).
|
||||
At React.js Conf in January we gave a preview of Relay, a new framework for building data-driven applications in React. In this post, we'll describe the process of creating a Relay application. This post assumes some familiarity with the concepts of Relay and GraphQL, so if you haven't already we recommend reading [our introductory blog post](/react/blog/2015/02/20/introducing-relay-and-graphql.html) or watching [the conference talk](https://www.youtube-nocookie.com/watch?v=9sc8Pyc51uU).
|
||||
|
||||
We're working hard to prepare GraphQL and Relay for public release. In the meantime, we'll continue to provide information about what you can expect.
|
||||
|
||||
@@ -40,18 +40,20 @@ The first step is a React `<Story>` component that accepts a `story` prop with t
|
||||
|
||||
```javascript
|
||||
// Story.react.js
|
||||
export default class Story extends React.Component {
|
||||
class Story extends React.Component {
|
||||
render() {
|
||||
var story = this.props.story;
|
||||
return (
|
||||
<View>
|
||||
<Image uri={story.author.profilePicture.uri} />
|
||||
<Image uri={story.author.profile_picture.uri} />
|
||||
<Text>{story.author.name}</Text>
|
||||
<Text>{story.text}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Story;
|
||||
```
|
||||
|
||||
<br/>
|
||||
@@ -64,41 +66,41 @@ Relay automates the process of fetching data for components by wrapping existing
|
||||
// Story.react.js
|
||||
class Story extends React.Component { ... }
|
||||
|
||||
export default Relay.createContainer(Story, {
|
||||
fragments: {
|
||||
module.exports = Relay.createContainer(Story, {
|
||||
queries: {
|
||||
story: /* TODO */
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
Before adding the GraphQL fragment, let's look at the component hierarchy this creates:
|
||||
Before adding the GraphQL query, let's look at the component hierarchy this creates:
|
||||
|
||||
<img src="/react/img/blog/relay-components/relay-containers.png" width="397" alt="React Container Data Flow" />
|
||||
|
||||
Most props will be passed through from the container to the original component. However, Relay will return the query results for a prop whenever a fragment is defined. In this case we'll add a GraphQL fragment for `story`:
|
||||
Most props will be passed through from the container to the original component. However, Relay will return the query results for a prop whenever a query is defined. In this case we'll add a GraphQL query for `story`:
|
||||
|
||||
```javascript
|
||||
// Story.react.js
|
||||
class Story extends React.Component { ... }
|
||||
|
||||
export default Relay.createContainer(Story, {
|
||||
fragments: {
|
||||
story: () => Relay.QL`
|
||||
fragment on Story {
|
||||
module.exports = Relay.createContainer(Story, {
|
||||
queries: {
|
||||
story: graphql`
|
||||
Story {
|
||||
author {
|
||||
name
|
||||
profilePicture {
|
||||
name,
|
||||
profile_picture {
|
||||
uri
|
||||
}
|
||||
}
|
||||
},
|
||||
text
|
||||
}
|
||||
`,
|
||||
},
|
||||
`
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
Queries use ES6 template literals tagged with the `Relay.QL` function. Similar to how JSX transpiles to plain JavaScript objects and function calls, these template literals transpile to plain objects that describe fragments. Note that the fragment's structure closely matches the object structure that we expected in `<Story>`'s render function.
|
||||
Queries use ES6 template literals tagged with the `graphql` function. Similar to how JSX transpiles to plain JavaScript objects and function calls, these template literals transpile to plain objects that describe queries. Note that the query's structure closely matches the object structure that we expected in `<Story>`'s render function.
|
||||
|
||||
<br/>
|
||||
|
||||
@@ -110,7 +112,7 @@ We can render a Relay component by providing Relay with the component (`<Story>`
|
||||
{
|
||||
author: {
|
||||
name: "Greg",
|
||||
profilePicture: {
|
||||
profile_picture: {
|
||||
uri: "https://…"
|
||||
}
|
||||
},
|
||||
@@ -157,35 +159,35 @@ module.exports = NewsFeed;
|
||||
|
||||
`<NewsFeed>` has two new requirements: it composes `<Story>` and requests more data at runtime.
|
||||
|
||||
Just as React views can be nested, Relay components can compose query fragments from child components. Composition in GraphQL uses ES6 template literal substitution: `${Component.getFragment('prop')}`. Pagination can be accomplished with a variable, specified with `$variable` (as in `stories(first: $count)`):
|
||||
Just as React views can be nested, Relay queries can compose queries from child components. Composition in GraphQL uses ES6 template literal substitution: `${Component.getQuery('prop')}`. Pagination can be accomplished with a query parameter, specified with `<param>` (as in `stories(first: <count>)`):
|
||||
|
||||
```javascript
|
||||
// NewsFeed.react.js
|
||||
class NewsFeed extends React.Component { ... }
|
||||
|
||||
export default Relay.createContainer(NewsFeed, {
|
||||
initialVariables: {
|
||||
count: 3 /* default to 3 stories */
|
||||
module.exports = Relay.createContainer(NewsFeed, {
|
||||
queryParams: {
|
||||
count: 3 /* default to 3 stories */
|
||||
},
|
||||
fragments: {
|
||||
viewer: () => Relay.QL`
|
||||
fragment on Viewer {
|
||||
stories(first: $count) { /* fetch viewer's stories */
|
||||
edges { /* traverse the graph */
|
||||
queries: {
|
||||
viewer: graphql`
|
||||
Viewer {
|
||||
stories(first: <count>) { /* fetch viewer's stories */
|
||||
edges { /* traverse the graph */
|
||||
node {
|
||||
${Story.getFragment('story')} /* compose child fragment */
|
||||
${Story.getQuery('story')} /* compose child query */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`,
|
||||
},
|
||||
`
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
Whenever `<NewsFeed>` is rendered, Relay will recursively expand all the composed fragments and fetch the queries in a single trip to the server. In this case, the `text` and `author` data will be fetched for each of the 3 story nodes.
|
||||
Whenever `<NewsFeed>` is rendered, Relay will recursively expand all the composed queries and fetch them in a single trip to the server. In this case, the `text` and `author` data will be fetched for each of the 3 story nodes.
|
||||
|
||||
Query variables are available to components as `props.relay.variables` and can be modified with `props.relay.setVariables(nextVariables)`. We can use these to implement pagination:
|
||||
Query parameters are available to components as `props.queryParams` and can be modified with `props.setQueryParams(nextParams)`. We can use these to implement pagination:
|
||||
|
||||
```javascript
|
||||
// NewsFeed.react.js
|
||||
@@ -194,16 +196,16 @@ class NewsFeed extends React.Component {
|
||||
|
||||
loadMore() {
|
||||
// read current params
|
||||
var count = this.props.relay.variables.count;
|
||||
var count = this.props.queryParams.count;
|
||||
// update params
|
||||
this.props.relay.setVariables({
|
||||
count: count + 5,
|
||||
this.props.setQueryParams({
|
||||
count: count + 5
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Now when `loadMore()` is called, Relay will send a GraphQL request for the additional five stories. When these stories are fetched, the component will re-render with the new stories available in `props.viewer.stories` and the updated count reflected in `props.relay.variables.count`.
|
||||
Now when `loadMore()` is called, Relay will send a GraphQL request for the additional five stories. When these stories are fetched, the component will re-render with the new stories available in `props.viewer.stories` and the updated count reflected in `props.queryParams.count`.
|
||||
|
||||
<br/>
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@ We open sourced React Native last week and the community reception blew away all
|
||||
|
||||
**Give us 6 months**. At Facebook, we strive to only open-source projects that we are using in production. While the Android backend for React Native is starting to work (see video below at 37min), it hasn't been shipped to any users yet. There's a lot of work that goes into open-sourcing a project, and we want to do it right so that you have a great experience when using it.
|
||||
|
||||
<iframe width="100%" height="315" src="https://www.youtube-nocookie.com/embed/X6YbAKiLCLU?start=2220" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/X6YbAKiLCLU?start=2220" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
|
||||
## Ray Wenderlich - Property Finder
|
||||
@@ -92,3 +92,4 @@ Clay Allsopp wrote a post about [all the crazy things you could do with a JavaSc
|
||||
We've spent a lot of efforts getting the onboarding as easy as possible and we're really happy that people noticed. We still have a lot of work to do on documentation, stay tuned!
|
||||
|
||||
<blockquote class="twitter-tweet" lang="en"><p>Wow. Getting started with React Native might have been the smoothest experience I’ve ever had with a new developer product.</p>— Andreas Eldh (@eldh) <a href="https://twitter.com/eldh/status/581186172094980096">March 26, 2015</a></blockquote>
|
||||
|
||||
|
||||
@@ -19,4 +19,4 @@ You now have three ways to get React Native. You should chose the one you want b
|
||||
|
||||
If you want more details, I highly recommend this video that explains how Facebook mobile release process works and why it was setup this way.
|
||||
|
||||
<iframe width="100%" height="300" src="https://www.youtube.com/embed/mOyoTUETmSM" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="300" src="https://www.youtube.com/embed/mOyoTUETmSM" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
@@ -8,39 +8,39 @@ Last month, the first React.js European conference took place in the city of Par
|
||||
|
||||
[Christopher Chedeau](https://github.com/vjeux) gave the opening keynote to the conference:
|
||||
|
||||
<iframe width="100%" height="366" src="//www.youtube.com/embed/PAA9O4E1IM4" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="366" src="//www.youtube.com/embed/PAA9O4E1IM4" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
[Spencer Ahrens](https://github.com/sahrens) walks through building an advanced gestural UI leveraging the unique power of the React Native layout and animation systems to build a complex and fluid experience:
|
||||
|
||||
<iframe width="100%" height="366" src="//www.youtube.com/embed/xDlfrcM6YBk" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="366" src="//www.youtube.com/embed/xDlfrcM6YBk" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
[Lee Byron](https://github.com/leebyron) explores GraphQL, its core principles, how it works, and what makes it a powerful tool:
|
||||
|
||||
<iframe width="100%" height="366" src="//www.youtube.com/embed/WQLzZf34FJ8" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="366" src="//www.youtube.com/embed/WQLzZf34FJ8" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
[Joseph Savona](https://github.com/josephsavona) explores the problems Relay solves, its architecture and the query lifecycle, and how can you use Relay to build more scalable apps. There are examples of how Relay powers applications as complex as the Facebook News Feed:
|
||||
|
||||
<iframe width="100%" height="366" src="//www.youtube.com/embed/IrgHurBjQbg" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="366" src="//www.youtube.com/embed/IrgHurBjQbg" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
[Nick Schrock](https://github.com/schrockn) and [Dan Schafer](https://github.com/dschafer) take a deeper dive into putting GraphQL to work. How can we build a GraphQL API to work with an existing REST API or server-side data model? What are best practices when building a GraphQL API, and how do they differ from traditional REST best practices? How does Facebook use GraphQL? Most importantly, what does a complete and coherent GraphQL API looks like, and how can we get started building one?
|
||||
|
||||
<iframe width="100%" height="366" src="//www.youtube.com/embed/gY48GW87Feo" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="366" src="//www.youtube.com/embed/gY48GW87Feo" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
[Sebastian Markbåge](https://github.com/sebmarkbage) talks about why the DOM is flawed and how it is becoming a second-class citizen in the land of React apps:
|
||||
|
||||
<iframe width="100%" height="366" src="//www.youtube.com/embed/Zemce4Y1Y-A" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="366" src="//www.youtube.com/embed/Zemce4Y1Y-A" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
[Sebastian McKenzie](https://github.com/sebmck) goes over how existing JSX build pipeline infrastructure can be further utilised to perform even more significant code transformations such as transpilation, optimisation, profiling and more, reducing bugs, making your code faster and you as a developer more productive and happy:
|
||||
|
||||
<iframe width="100%" height="366" src="//www.youtube.com/embed/OFuDvqZmUrE" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="366" src="//www.youtube.com/embed/OFuDvqZmUrE" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
[Cheng Lou](https://github.com/chenglou) gives a talk on the past, the present and the future of animation, and the place React can potentially take in this:
|
||||
|
||||
<iframe width="100%" height="366" src="//www.youtube.com/embed/1tavDv5hXpo" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="366" src="//www.youtube.com/embed/1tavDv5hXpo" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
And there was a Q&A session with the whole team covering a range of React topics:
|
||||
|
||||
<iframe width="100%" height="366" src="//www.youtube.com/embed/CRJZBZ_-6hQ" frameborder="0" allowfullscreen></iframe>
|
||||
<iframe width="650" height="366" src="//www.youtube.com/embed/CRJZBZ_-6hQ" frameborder="0" allowfullscreen></iframe>
|
||||
|
||||
And there were lots of great talks from the React community:
|
||||
|
||||
|
||||
@@ -1,31 +0,0 @@
|
||||
---
|
||||
title: "React v0.14.2"
|
||||
author: zpao
|
||||
---
|
||||
|
||||
We have a quick update following the release of 0.14.1 last week. It turns out we broke a couple things in the development build of React when using Internet Explorer. Luckily it was only the development build, so your production applications were unaffected. This release is mostly to address those issues. There is one notable change if consuming React from npm. For the `react-dom` package, we moved `react` from a regular dependency to a peer dependency. This will impact very few people as these two are typically installed together at the top level, but it will fix some issues with dependencies of installed components also using `react` as a peer dependency.
|
||||
|
||||
The release is now available for download:
|
||||
|
||||
* **React**
|
||||
Dev build with warnings: <https://fb.me/react-0.14.2.js>
|
||||
Minified build for production: <https://fb.me/react-0.14.2.min.js>
|
||||
* **React with Add-Ons**
|
||||
Dev build with warnings: <https://fb.me/react-with-addons-0.14.2.js>
|
||||
Minified build for production: <https://fb.me/react-with-addons-0.14.2.min.js>
|
||||
* **React DOM** (include React in the page before React DOM)
|
||||
Dev build with warnings: <https://fb.me/react-dom-0.14.2.js>
|
||||
Minified build for production: <https://fb.me/react-dom-0.14.2.min.js>
|
||||
|
||||
We've also published version `0.14.2` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower.
|
||||
|
||||
- - -
|
||||
|
||||
## Changelog
|
||||
|
||||
### React DOM
|
||||
- Fixed bug with development build preventing events from firing in some versions of Internet Explorer & Edge
|
||||
- Fixed bug with development build when using es5-sham in older versions of Internet Explorer
|
||||
- Added support for `integrity` attribute
|
||||
- Fixed bug resulting in `children` prop being coerced to a string for custom elements, which was not the desired behavior.
|
||||
- Moved `react` from `dependencies` to `peerDependencies` to match expectations and align with `react-addons-*` packages
|
||||
@@ -1,40 +0,0 @@
|
||||
---
|
||||
title: "React v0.14.3"
|
||||
author: zpao
|
||||
---
|
||||
|
||||
It's time for another installment of React patch releases! We didn't break anything in v0.14.2 but we do have a couple of other bugs we're fixing. The biggest change in this release is actually an addition of a new built file. We heard from a number of people that they still need the ability to use React to render to a string on the client. While the use cases are not common and there are other ways to achieve this, we decided that it's still valuable to support. So we're now building `react-dom-server.js`, which will be shipped to Bower and in the `dist/` directory of the `react-dom` package on npm. This file works the same way as `react-dom.js` and therefore requires that the primary React build has already been included on the page.
|
||||
|
||||
The release is now available for download:
|
||||
|
||||
* **React**
|
||||
Dev build with warnings: <https://fb.me/react-0.14.3.js>
|
||||
Minified build for production: <https://fb.me/react-0.14.3.min.js>
|
||||
* **React with Add-Ons**
|
||||
Dev build with warnings: <https://fb.me/react-with-addons-0.14.3.js>
|
||||
Minified build for production: <https://fb.me/react-with-addons-0.14.3.min.js>
|
||||
* **React DOM** (include React in the page before React DOM)
|
||||
Dev build with warnings: <https://fb.me/react-dom-0.14.3.js>
|
||||
Minified build for production: <https://fb.me/react-dom-0.14.3.min.js>
|
||||
* **React DOM Server** (include React in the page before React DOM Server)
|
||||
Dev build with warnings: <https://fb.me/react-dom-server-0.14.3.js>
|
||||
Minified build for production: <https://fb.me/react-dom-server-0.14.3.min.js>
|
||||
|
||||
We've also published version `0.14.3` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower.
|
||||
|
||||
- - -
|
||||
|
||||
## Changelog
|
||||
|
||||
### React DOM
|
||||
- Added support for `nonce` attribute for `<script>` and `<style>` elements
|
||||
- Added support for `reversed` attribute for `<ol>` elements
|
||||
|
||||
### React TestUtils Add-on
|
||||
- Fixed bug with shallow rendering and function refs
|
||||
|
||||
### React CSSTransitionGroup Add-on
|
||||
- Fixed bug resulting in timeouts firing incorrectly when mounting and unmounting rapidly
|
||||
|
||||
### React on Bower
|
||||
- Added `react-dom-server.js` to expose `renderToString` and `renderToStaticMarkup` for usage in the browser
|
||||
@@ -1,45 +0,0 @@
|
||||
---
|
||||
title: React.js Conf 2016 Diversity Scholarship
|
||||
author: zpao
|
||||
---
|
||||
|
||||
I am thrilled to announced that we will be organizing another diversity scholarship program for the upcoming React.js Conf! The tech industry is suffering from a lack of diversity, but it's important to us that we have a thriving community that is made up of people with a variety of experiences and viewpoints.
|
||||
|
||||
When we ran this program last year, we had *over 200* people apply for only 10 tickets. There were so many people that we wanted to bring in but we couldn't. The results were still awesome, and we had bright individuals from around the world attending who would have otherwise been unable to. These attendees took part in discussions at the conference and brought perspectives that we might not have otherwise seen there.
|
||||
|
||||
This year we're excited to bring back the scholarship, but we've set aside **40 tickets** because we really believe that it's important to do our best to make sure we have an even more diverse audience.
|
||||
|
||||
This is something I'm personally really excited to be a part of. I know the rest of the team is as well. We're really proud to have everyone at Facebook providing support and funding for this.
|
||||
|
||||
The details of the scholarship are provided below (or you can [go directly to the application](http://goo.gl/forms/PEmKj8oUp4)). I encourage you to apply! If you don't feel like you are eligible yourself, you can still help – send this along to friends, family, coworkers, acquaintances, or anybody who might be interested. And even if you haven't spoken before, please consider [submitting a proposal for a talk](http://conf.reactjs.com/) (either 30 minutes or just 5 minutes) - we're hoping to have a very diverse group of speakers in addition to attendees.
|
||||
|
||||
|
||||
- - -
|
||||
|
||||
Facebook is excited to announce that we are now accepting applications for the React.js Conf Diversity Scholarship!
|
||||
|
||||
Beginning today, those studying or working in computer science or a related field can apply for a partial scholarship to attend the React.js Conf in San Francisco, CA on February 22 & 23, 2016.
|
||||
|
||||
React opens a world of new possibilities such as server-side rendering, real-time updates, different rendering targets like SVG and canvas. React Native makes is easy to use the same concepts and technologies to build native mobile experiences on iOS and Android. Join us at React.js Conf to shape the future of client-side applications! For more information about the React.js conference, please see [the website](http://conf.reactjs.com/).
|
||||
|
||||
At Facebook, we believe that anyone anywhere can make a positive impact by developing products to make the world more open and connected to the people and things they care about. Given the current realities of the tech industry and the lack of representation of communities we seek to serve, applicants currently under-represented in Computer Science and related fields are strongly encouraged to apply. Facebook will make determinations on scholarship recipients in its sole discretion. Facebook complies with all equal opportunity laws.
|
||||
|
||||
To apply for the scholarship, please visit the application page: **<http://goo.gl/forms/PEmKj8oUp4>**
|
||||
|
||||
## Award Includes
|
||||
|
||||
* Paid registration fee for the React.js Conf Feburary 22 & 23 in downtown San Francisco, CA
|
||||
* Paid lodging expenses for February 21, 22, 23
|
||||
|
||||
## Important Dates
|
||||
|
||||
* Sunday December 13th 2015 - 11:59 PST: Applications for the React.js Conf Scholarship must be submitted in full
|
||||
* Wednesday, December 16th, 2015: Award recipients will be notified by email of their acceptance
|
||||
* Monday & Tuesday, February 22 & 23, 2016: React.js Conf
|
||||
|
||||
## Eligibility
|
||||
|
||||
* Must currently be studying or working in Computer Science or a related field
|
||||
* International applicants are welcome, but you will be responsible for securing your own visa to attend the conference
|
||||
* You must be able to provide your own transportation to San Francisco
|
||||
* You must be available to attend the full duration of React.js Conf on February 22 & 23 in San Francisco, CA
|
||||
@@ -1,80 +0,0 @@
|
||||
---
|
||||
title: "isMounted is an Antipattern"
|
||||
author: jimfb
|
||||
---
|
||||
|
||||
As we move closer to officially deprecating isMounted, it's worth understanding why the function is an antipattern, and how to write code without the isMounted function.
|
||||
|
||||
The primary use case for `isMounted()` is to avoid calling `setState()` after a component has unmounted, because calling `setState()` after a component has unmounted will emit a warning. The “setState warning” exists to help you catch bugs, because calling `setState()` on an unmounted component is an indication that your app/component has somehow failed to clean up properly. Specifically, calling `setState()` in an unmounted component means that your app is still holding a reference to the component after the component has been unmounted - which often indicates a memory leak!
|
||||
|
||||
To avoid the error message, people often add lines like this:
|
||||
|
||||
```js
|
||||
if(this.isMounted()) { // This is bad.
|
||||
this.setState({...});
|
||||
}
|
||||
```
|
||||
|
||||
Checking `isMounted` before calling `setState()` does eliminate the warning, but it also defeats the purpose of the warning, since now you will never get the warning (even when you should!)
|
||||
|
||||
Other uses of `isMounted()` are similarly erroneous; using `isMounted()` is a code smell because the only reason you would check is because you think you might be holding a reference after the component has unmounted.
|
||||
|
||||
An easy migration strategy for anyone upgrading their code to avoid `isMounted()` is to track the mounted status yourself. Just set a `_isMounted` property to true in `componentDidMount` and set it to false in `componentWillUnmount`, and use this variable to check your component's status.
|
||||
|
||||
An optimal solution would be to find places where `setState()` might be called after a component has unmounted, and fix them. Such situations most commonly occur due to callbacks, when a component is waiting for some data and gets unmounted before the data arrives. Ideally, any callbacks should be canceled in `componentWillUnmount`, prior to unmounting.
|
||||
|
||||
For instance, if you are using a Flux store in your component, you must unsubscribe in `componentWillUnmount`:
|
||||
|
||||
```javascript{9}
|
||||
class MyComponent extends React.Component {
|
||||
componentDidMount() {
|
||||
mydatastore.subscribe(this);
|
||||
}
|
||||
render() {
|
||||
...
|
||||
}
|
||||
componentWillUnmount() {
|
||||
mydatastore.unsubscribe(this);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
If you use ES6 promises, you may need to wrap your promise in order to make it cancelable.
|
||||
|
||||
```js
|
||||
const cancelablePromise = makeCancelable(
|
||||
new Promise(r => component.setState({...}}))
|
||||
);
|
||||
|
||||
cancelablePromise
|
||||
.promise
|
||||
.then(() => console.log('resolved'))
|
||||
.catch((reason) => console.log('isCanceled', reason.isCanceled));
|
||||
|
||||
cancelablePromise.cancel(); // Cancel the promise
|
||||
```
|
||||
|
||||
Where `makeCancelable` is [defined by @istarkov](https://github.com/facebook/react/issues/5465#issuecomment-157888325) as:
|
||||
|
||||
```js
|
||||
const makeCancelable = (promise) => {
|
||||
let hasCanceled_ = false;
|
||||
|
||||
const wrappedPromise = new Promise((resolve, reject) => {
|
||||
promise.then((val) =>
|
||||
hasCanceled_ ? reject({isCanceled: true}) : resolve(val)
|
||||
);
|
||||
promise.catch((error) =>
|
||||
hasCanceled_ ? reject({isCanceled: true}) : reject(error)
|
||||
);
|
||||
});
|
||||
|
||||
return {
|
||||
promise: wrappedPromise,
|
||||
cancel() {
|
||||
hasCanceled_ = true;
|
||||
},
|
||||
};
|
||||
};
|
||||
```
|
||||
As an added bonus for getting your code cleaned up early, getting rid of `isMounted()` makes it one step easier for you to upgrade to ES6 classes, where using `isMounted()` is already prohibited. Happy coding!
|
||||
@@ -1,383 +0,0 @@
|
||||
---
|
||||
title: "React Components, Elements, and Instances"
|
||||
author: gaearon
|
||||
---
|
||||
|
||||
The difference between **components, their instances, and elements** confuses many React beginners. Why are there three different terms to refer to something that is painted on screen?
|
||||
|
||||
## Managing the Instances
|
||||
|
||||
If you’re new to React, you probably only worked with component classes and instances before. For example, you may declare a `Button` *component* by creating a class. When the app is running, you may have several *instances* of this component on screen, each with its own properties and local state. This is the traditional object-oriented UI programming. Why introduce *elements*?
|
||||
|
||||
In this traditional UI model, it is up to you to take care of creating and destroying child component instances. If a `Form` component wants to render a `Button` component, it needs to create its instance, and manually keep it up to date with any new information.
|
||||
|
||||
```js
|
||||
class Form extends TraditionalObjectOrientedView {
|
||||
render() {
|
||||
// Read some data passed to the view
|
||||
const { isSubmitted, buttonText } = this.attrs;
|
||||
|
||||
if (!isSubmitted && !this.button) {
|
||||
// Form is not yet submitted. Create the button!
|
||||
this.button = new Button({
|
||||
children: buttonText,
|
||||
color: 'blue'
|
||||
});
|
||||
this.el.appendChild(this.button.el);
|
||||
}
|
||||
|
||||
if (this.button) {
|
||||
// The button is visible. Update its text!
|
||||
this.button.attrs.children = buttonText;
|
||||
this.button.render();
|
||||
}
|
||||
|
||||
if (isSubmitted && this.button) {
|
||||
// Form was submitted. Destroy the button!
|
||||
this.el.removeChild(this.button.el);
|
||||
this.button.destroy();
|
||||
}
|
||||
|
||||
if (isSubmitted && !this.message) {
|
||||
// Form was submitted. Show the success message!
|
||||
this.message = new Message({ text: 'Success!' });
|
||||
this.el.appendChild(this.message.el);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This is pseudocode, but it is more or less what you end up with when you write composite UI code that behaves consistently in an object-oriented way using a library like Backbone.
|
||||
|
||||
Each component instance has to keep references to its DOM node and to the instances of the children components, and create, update, and destroy them when the time is right. The lines of code grow as the square of the number of possible states of the component, and the parents have direct access to their children component instances, making it hard to decouple them in the future.
|
||||
|
||||
So how is React different?
|
||||
|
||||
## Elements Describe the Tree
|
||||
|
||||
In React, this is where the *elements* come to rescue. **An element is a plain object *describing* a component instance or DOM node and its desired properties.** It contains only information about the component type (for example, a `Button`), its properties (for example, its `color`), and any child elements inside it.
|
||||
|
||||
An element is not an actual instance. Rather, it is a way to tell React what you *want* to see on the screen. You can’t call any methods on the element. It’s just an immutable description object with two fields: `type: (string | ReactClass)` and `props: Object`[^1].
|
||||
|
||||
### DOM Elements
|
||||
|
||||
When an element’s `type` is a string, it represents a DOM node with that tag name, and `props` correspond to its attributes. This is what React will render. For example:
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'button',
|
||||
props: {
|
||||
className: 'button button-blue',
|
||||
children: {
|
||||
type: 'b',
|
||||
props: {
|
||||
children: 'OK!'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This element is just a way to represent the following HTML as a plain object:
|
||||
|
||||
```html
|
||||
<button class='button button-blue'>
|
||||
<b>
|
||||
OK!
|
||||
</b>
|
||||
</button>
|
||||
```
|
||||
|
||||
Note how elements can be nested. By convention, when we want to create an element tree, we specify one or more child elements as the `children` prop of their containing element.
|
||||
|
||||
What’s important is that both child and parent elements are *just descriptions and not the actual instances*. They don’t refer to anything on the screen when you create them. You can create them and throw them away, and it won’t matter much.
|
||||
|
||||
React elements are easy to traverse, don’t need to be parsed, and of course they are much lighter than the actual DOM elements—they’re just objects!
|
||||
|
||||
### Component Elements
|
||||
|
||||
However, the `type` of an element can also be a function or a class corresponding to a React component:
|
||||
|
||||
```js
|
||||
{
|
||||
type: Button,
|
||||
props: {
|
||||
color: 'blue',
|
||||
children: 'OK!'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This is the core idea of React.
|
||||
|
||||
**An element describing a component is also an element, just like an element describing the DOM node. They can be nested and mixed with each other.**
|
||||
|
||||
This feature lets you define a `DangerButton` component as a `Button` with a specific `color` property value without worrying about whether `Button` renders to a DOM `<button>`, a `<div>`, or something else entirely:
|
||||
|
||||
```js
|
||||
const DangerButton = ({ children }) => ({
|
||||
type: Button,
|
||||
props: {
|
||||
color: 'red',
|
||||
children: children
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
You can mix and match DOM and component elements in a single element tree:
|
||||
|
||||
```js
|
||||
const DeleteAccount = () => ({
|
||||
type: 'div',
|
||||
props: {
|
||||
children: [{
|
||||
type: 'p',
|
||||
props: {
|
||||
children: 'Are you sure?'
|
||||
}
|
||||
}, {
|
||||
type: DangerButton,
|
||||
props: {
|
||||
children: 'Yep'
|
||||
}
|
||||
}, {
|
||||
type: Button,
|
||||
props: {
|
||||
color: 'blue',
|
||||
children: 'Cancel'
|
||||
}
|
||||
}]
|
||||
});
|
||||
```
|
||||
|
||||
Or, if you prefer JSX:
|
||||
|
||||
```js
|
||||
const DeleteAccount = () => (
|
||||
<div>
|
||||
<p>Are you sure?</p>
|
||||
<DangerButton>Yep</DangerButton>
|
||||
<Button color='blue'>Cancel</Button>
|
||||
</div>
|
||||
);
|
||||
```
|
||||
|
||||
This mix and matching helps keep components decoupled from each other, as they can express both *is-a* and *has-a* relationships exclusively through composition:
|
||||
|
||||
* `Button` is a DOM `<button>` with specific properties.
|
||||
* `DangerButton` is a `Button` with specific properties.
|
||||
* `DeleteAccount` contains a `Button` and a `DangerButton` inside a `<div>`.
|
||||
|
||||
### Components Encapsulate Element Trees
|
||||
|
||||
When React sees an element with a function or class `type`, it knows to ask *that* component what element it renders to, given the corresponding `props`.
|
||||
|
||||
When it sees this element:
|
||||
|
||||
```js
|
||||
{
|
||||
type: Button,
|
||||
props: {
|
||||
color: 'blue',
|
||||
children: 'OK!'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
React will ask `Button` what it renders to. The `Button` will return this element:
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'button',
|
||||
props: {
|
||||
className: 'button button-blue',
|
||||
children: {
|
||||
type: 'b',
|
||||
props: {
|
||||
children: 'OK!'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
React will repeat this process until it knows the underlying DOM tag elements for every component on the page.
|
||||
|
||||
React is like a child asking “what is Y” for every “X is Y” you explain to them until they figure out every little thing in the world.
|
||||
|
||||
Remember the `Form` example above? It can be written in React as follows[^1]:
|
||||
|
||||
```js
|
||||
const Form = ({ isSubmitted, buttonText }) => {
|
||||
if (isSubmitted) {
|
||||
// Form submitted! Return a message element.
|
||||
return {
|
||||
type: Message,
|
||||
props: {
|
||||
text: 'Success!'
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Form is still visible! Return a button element.
|
||||
return {
|
||||
type: Button,
|
||||
props: {
|
||||
children: buttonText,
|
||||
color: 'blue'
|
||||
}
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
That’s it! For a React component, props are the input, and an element tree is the output.
|
||||
|
||||
**The returned element tree can contain both elements describing DOM nodes, and elements describing other components. This lets you compose independent parts of UI without relying on their internal DOM structure.**
|
||||
|
||||
We let React create, update, and destroy instances. We *describe* them with elements we return from the components, and React takes care of managing the instances.
|
||||
|
||||
### Components Can Be Classes or Functions
|
||||
|
||||
In the code above, `Form`, `Message`, and `Button` are React components. They can either be written as functions, like above, or as classes descending from `React.Component`. These three ways to declare a component are mostly equivalent:
|
||||
|
||||
```js
|
||||
// 1) As a function of props
|
||||
const Button = ({ children, color }) => ({
|
||||
type: 'button',
|
||||
props: {
|
||||
className: 'button button-' + color,
|
||||
children: {
|
||||
type: 'b',
|
||||
props: {
|
||||
children: children
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 2) Using the React.createClass() factory
|
||||
const Button = React.createClass({
|
||||
render() {
|
||||
const { children, color } = this.props;
|
||||
return {
|
||||
type: 'button',
|
||||
props: {
|
||||
className: 'button button-' + color,
|
||||
children: {
|
||||
type: 'b',
|
||||
props: {
|
||||
children: children
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
// 3) As an ES6 class descending from React.Component
|
||||
class Button extends React.Component {
|
||||
render() {
|
||||
const { children, color } = this.props;
|
||||
return {
|
||||
type: 'button',
|
||||
props: {
|
||||
className: 'button button-' + color,
|
||||
children: {
|
||||
type: 'b',
|
||||
props: {
|
||||
children: children
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
When a component is defined as a class, it is a little bit more powerful than a functional component. It can store some local state and perform custom logic when the corresponding DOM node is created or destroyed.
|
||||
|
||||
A functional component is less powerful but is simpler, and acts like a class component with just a single `render()` method. Unless you need features available only in a class, we encourage you to use functional components instead.
|
||||
|
||||
**However, whether functions or classes, fundamentally they are all components to React. They take the props as their input, and return the elements as their output.**
|
||||
|
||||
### Top-Down Reconciliation
|
||||
|
||||
When you call:
|
||||
|
||||
```js
|
||||
ReactDOM.render({
|
||||
type: Form,
|
||||
props: {
|
||||
isSubmitted: false,
|
||||
buttonText: 'OK!'
|
||||
}
|
||||
}, document.getElementById('root'));
|
||||
```
|
||||
|
||||
React will ask the `Form` component what element tree it returns, given those `props`. It will gradually “refine” its understanding of your component tree in terms of simpler primitives:
|
||||
|
||||
```js
|
||||
// React: You told me this...
|
||||
{
|
||||
type: Form,
|
||||
props: {
|
||||
isSubmitted: false,
|
||||
buttonText: 'OK!'
|
||||
}
|
||||
}
|
||||
|
||||
// React: ...And Form told me this...
|
||||
{
|
||||
type: Button,
|
||||
props: {
|
||||
children: 'OK!',
|
||||
color: 'blue'
|
||||
}
|
||||
}
|
||||
|
||||
// React: ...and Button told me this! I guess I'm done.
|
||||
{
|
||||
type: 'button',
|
||||
props: {
|
||||
className: 'button button-blue',
|
||||
children: {
|
||||
type: 'b',
|
||||
props: {
|
||||
children: 'OK!'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This is a part of the process that React calls [reconciliation](/react/docs/reconciliation.html) which starts when you call [`ReactDOM.render()`](/react/docs/top-level-api.html#reactdom.render) or [`setState()`](/react/docs/component-api.html#setstate). By the end of the reconciliation, React knows the result DOM tree, and a renderer like `react-dom` or `react-native` applies the minimal set of changes necessary to update the DOM nodes (or the platform-specific views in case of React Native).
|
||||
|
||||
This gradual refining process is also the reason React apps are easy to optimize. If some parts of your component tree become too large for React to visit efficiently, you can tell it to [skip this “refining” and diffing certain parts of the tree if the relevant props have not changed](/react/docs/advanced-performance.html). It is very fast to calculate whether the props have changed if they are immutable, so React and immutability work great together, and can provide great optimizations with the minimal effort.
|
||||
|
||||
You might have noticed that this blog entry talks a lot about components and elements, and not so much about the instances. The truth is, instances have much less importance in React than in most object-oriented UI frameworks.
|
||||
|
||||
Only components declared as classes have instances, and you never create them directly: React does that for you. While [mechanisms for a parent component instance to access a child component instance](/react/docs/more-about-refs.html) exist, they are only used for imperative actions (such as setting focus on a field), and should generally be avoided.
|
||||
|
||||
React takes care of creating an instance for every class component, so you can write components in an object-oriented way with methods and local state, but other than that, instances are not very important in the React’s programming model and are managed by React itself.
|
||||
|
||||
## Summary
|
||||
|
||||
An *element* is a plain object describing what you want to appear on the screen in terms of the DOM nodes or other components. Elements can contain other elements in their props. Creating a React element is cheap. Once an element is created, it is never mutated.
|
||||
|
||||
A *component* can be declared in several different ways. It can be a class with a `render()` method. Alternatively, in simple cases, it can be defined as a function. In either case, it takes props as an input, and returns an element tree as the output.
|
||||
|
||||
When a component receives some props as an input, it is because a particular parent component returned an element with its `type` and these props. This is why people say that the props flows one way in React: from parents to children.
|
||||
|
||||
An *instance* is what you refer to as `this` in the component class you write. It is useful for [storing local state and reacting to the lifecycle events](/react/docs/component-api.html).
|
||||
|
||||
Functional components don’t have instances at all. Class components have instances, but you never need to create a component instance directly—React takes care of this.
|
||||
|
||||
Finally, to create elements, use [`React.createElement()`](/react/docs/top-level-api.html#react.createelement), [JSX](/react/docs/jsx-in-depth.html), or an [element factory helper](/react/docs/top-level-api.html#react.createfactory). Don’t write elements as plain objects in the real code—just know that they are plain objects under the hood.
|
||||
|
||||
## Further Reading
|
||||
|
||||
* [Introducing React Elements](/react/blog/2014/10/14/introducing-react-elements.html)
|
||||
* [Streamlining React Elements](/react/blog/2015/02/24/streamlining-react-elements.html)
|
||||
* [React (Virtual) DOM Terminology](/react/docs/glossary.html)
|
||||
|
||||
[^1]: All React elements require an additional ``$$typeof: Symbol.for('react.element')`` field declared on the object for [security reasons](https://github.com/facebook/react/pull/4832). It is omitted in the examples above. This blog entry uses inline objects for elements to give you an idea of what’s happening underneath but the code won’t run as is unless you either add `$$typeof` to the elements, or change the code to use `React.createElement()` or JSX.
|
||||
@@ -1,37 +0,0 @@
|
||||
---
|
||||
title: "React v0.14.4"
|
||||
author: spicyj
|
||||
---
|
||||
|
||||
Happy December! We have a minor point release today. It has just a few small bug fixes.
|
||||
|
||||
The release is now available for download:
|
||||
|
||||
* **React**
|
||||
Dev build with warnings: <https://fb.me/react-0.14.4.js>
|
||||
Minified build for production: <https://fb.me/react-0.14.4.min.js>
|
||||
* **React with Add-Ons**
|
||||
Dev build with warnings: <https://fb.me/react-with-addons-0.14.4.js>
|
||||
Minified build for production: <https://fb.me/react-with-addons-0.14.4.min.js>
|
||||
* **React DOM** (include React in the page before React DOM)
|
||||
Dev build with warnings: <https://fb.me/react-dom-0.14.4.js>
|
||||
Minified build for production: <https://fb.me/react-dom-0.14.4.min.js>
|
||||
* **React DOM Server** (include React in the page before React DOM Server)
|
||||
Dev build with warnings: <https://fb.me/react-dom-server-0.14.4.js>
|
||||
Minified build for production: <https://fb.me/react-dom-server-0.14.4.min.js>
|
||||
|
||||
We've also published version `0.14.4` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower.
|
||||
|
||||
- - -
|
||||
|
||||
## Changelog
|
||||
|
||||
### React
|
||||
- Minor internal changes for better compatibility with React Native
|
||||
|
||||
### React DOM
|
||||
- The `autoCapitalize` and `autoCorrect` props are now set as attributes in the DOM instead of properties to improve cross-browser compatibility
|
||||
- Fixed bug with controlled `<select>` elements not handling updates properly
|
||||
|
||||
### React Perf Add-on
|
||||
- Some DOM operation names have been updated for clarity in the output of `.printDOM()`
|
||||
@@ -1,60 +0,0 @@
|
||||
---
|
||||
title: "(A => B) !=> (B => A)"
|
||||
author: jimfb
|
||||
---
|
||||
|
||||
The documentation for `componentWillReceiveProps` states that `componentWillReceiveProps` will be invoked when the props change as the result of a rerender. Some people assume this means "if `componentWillReceiveProps` is called, then the props must have changed", but that conclusion is logically incorrect.
|
||||
|
||||
The guiding principle is one of my favorites from formal logic/mathematics:
|
||||
> A implies B does not imply B implies A
|
||||
|
||||
Example: "If I eat moldy food, then I will get sick" does not imply "if I am sick, then I must have eaten moldy food". There are many other reasons I could be feeling sick. For instance, maybe the flu is circulating around the office. Similarly, there are many reasons that `componentWillReceiveProps` might get called, even if the props didn’t change.
|
||||
|
||||
If you don’t believe me, call `ReactDOM.render()` three times with the exact same props, and try to predict the number of times `componentWillReceiveProps` will get called:
|
||||
|
||||
|
||||
```js
|
||||
class Component extends React.Component {
|
||||
componentWillReceiveProps(nextProps) {
|
||||
console.log('componentWillReceiveProps', nextProps.data.bar);
|
||||
}
|
||||
render() {
|
||||
return <div>Bar {this.props.data.bar}!</div>;
|
||||
}
|
||||
}
|
||||
|
||||
var container = document.getElementById('container');
|
||||
|
||||
var mydata = {bar: 'drinks'};
|
||||
ReactDOM.render(<Component data={mydata} />, container);
|
||||
ReactDOM.render(<Component data={mydata} />, container);
|
||||
ReactDOM.render(<Component data={mydata} />, container);
|
||||
```
|
||||
|
||||
|
||||
In this case, the answer is "2". React calls `componentWillReceiveProps` twice (once for each of the two updates). Both times, the value of "drinks" is printed (ie. the props didn’t change).
|
||||
|
||||
To understand why, we need to think about what *could* have happened. The data *could* have changed between the initial render and the two subsequent updates, if the code had performed a mutation like this:
|
||||
|
||||
```js
|
||||
var mydata = {bar: 'drinks'};
|
||||
ReactDOM.render(<Component data={mydata} />, container);
|
||||
mydata.bar = 'food'
|
||||
ReactDOM.render(<Component data={mydata} />, container);
|
||||
mydata.bar = 'noise'
|
||||
ReactDOM.render(<Component data={mydata} />, container);
|
||||
```
|
||||
|
||||
React has no way of knowing that the data didn’t change. Therefore, React needs to call `componentWillReceiveProps`, because the component needs to be notified of the new props (even if the new props happen to be the same as the old props).
|
||||
|
||||
You might think that React could just use smarter checks for equality, but there are some issues with this idea:
|
||||
|
||||
* The old `mydata` and the new `mydata` are actually the same physical object (only the object’s internal value changed). Since the references are triple-equals-equal, doing an equality check doesn’t tell us if the value has changed. The only possible solution would be to have created a deep copy of the data, and then later do a deep comparison - but this can be prohibitively expensive for large data structures (especially ones with cycles).
|
||||
* The `mydata` object might contain references to functions which have captured variables within closures. There is no way for React to peek into these closures, and thus no way for React to copy them and/or verify equality.
|
||||
* The `mydata` object might contain references to objects which are re-instantiated during the parent's render (ie. not triple-equals-equal) but are conceptually equal (ie. same keys and same values). A deep-compare (expensive) could detect this, except that functions present a problem again because there is no reliable way to compare two functions to see if they are semantically equivalent.
|
||||
|
||||
Given the language constraints, it is sometimes impossible for us to achieve meaningful equality semantics. In such cases, React will call `componentWillReceiveProps` (even though the props might not have changed) so the component has an opportunity to examine the new props and act accordingly.
|
||||
|
||||
As a result, your implementation of `componentWillReceiveProps` MUST NOT assume that your props have changed. If you want an operation (such as a network request) to occur only when props have changed, your `componentWillReceiveProps` code needs to check to see if the props actually changed.
|
||||
|
||||
|
||||
@@ -1,10 +0,0 @@
|
||||
---
|
||||
title: "Discontinuing IE 8 Support in React DOM"
|
||||
author: spicyj
|
||||
---
|
||||
|
||||
Since its 2013 release, React has supported all popular browsers, including Internet Explorer 8 and above. We handle normalizing many quirks present in old browser versions, including event system differences, so that your app code doesn't have to worry about most browser bugs.
|
||||
|
||||
Today, Microsoft [discontinued support for older versions of IE](https://www.microsoft.com/en-us/WindowsForBusiness/End-of-IE-support). Starting with React v15, we're discontinuing React DOM's support for IE 8. We've heard that most React DOM apps already don't support old versions of Internet Explorer, so this shouldn't affect many people. This change will help us develop faster and make React DOM even better. (We won't actively remove IE 8–related code quite yet, but we will deprioritize new bugs that are reported. If you need to support IE 8 we recommend you stay on React v0.14.)
|
||||
|
||||
React DOM will continue to support IE 9 and above for the foreseeable future.
|
||||
@@ -1,60 +0,0 @@
|
||||
---
|
||||
title: "New Versioning Scheme"
|
||||
author: sebmarkbage
|
||||
---
|
||||
|
||||
Today we're announcing that we're switching to major revisions for React. The current version is 0.14.7. The next release will be: **15.0.0**
|
||||
|
||||
This change shouldn't materially affect most of you. Moving to major semver versions simply helps indicate our commitment to stability and gives us the flexibility to add new backwards-compatible features in minor releases. This means we can have fewer major releases and you won't have to wait as long to take advantage of improvements to React. Plus, if you're a component author, this versioning scheme gives you the flexibility to support two major versions of React at the same time so you don't need to leave anyone behind.
|
||||
|
||||
The core of the React API has been stable for years. Our business as well as many of yours all depend heavily on the use of React as a core piece of our infrastructure. We're committed to the stability as well as the progress of React going forward.
|
||||
|
||||
## Bring Everyone Along
|
||||
|
||||
React isn't just a library but an ecosystem. We know that your applications and ours are not just isolated islands of code. It is a network of your own application code, your own open source components and third party libraries that all depend on React.
|
||||
|
||||
<img src="/react/img/blog/versioning-1.png" width="403">
|
||||
|
||||
Therefore it is important that we don't just upgrade our own codebases but that we bring our whole community with us. We take the upgrade path very seriously - for everyone.
|
||||
|
||||
<img src="/react/img/blog/versioning-poll.png" width="596">
|
||||
|
||||
## Introducing Minor Releases
|
||||
|
||||
Ideally everyone could just depend on the latest version of React all the time.
|
||||
|
||||
<img src="/react/img/blog/versioning-2.png" width="463">
|
||||
|
||||
We know that in practice that is not possible. In the future, we expect more new additive APIs rather than breakage of existing ones. By moving to major revisions in the semver scheme, we can release new versions without breaking existing ones.
|
||||
|
||||
<img src="/react/img/blog/versioning-3.png" width="503">
|
||||
|
||||
That means that if one component needs a new API, there is no need for any of the other components to do any further work. They remain compatible.
|
||||
|
||||
## What Happened to 1.0.0?
|
||||
|
||||
Part of React's growth and popularity is that it is stable and performant in production. People have long asked what React v1.0 will look. Technically some breaking changes are important to avoid stagnating, but we still achieve stability by making it easy to upgrade. If major version numbers indicate API stability and engender trust that it can be used in production, then we got there a long time ago. There are too many preconceived notions of what v1.0 is. We're still following semver. We're just communicating stability by moving the 0 from the beginning to the end.
|
||||
|
||||
## Breaking Changes
|
||||
|
||||
Minor revision releases will include deprecation warnings and tips for how to upgrade an API or pattern that will be removed or changed in the future.
|
||||
|
||||
We will continue to release [codemods](https://www.youtube.com/watch?v=d0pOgY8__JM) for common patterns to make automatic upgrades of your codebase easier.
|
||||
|
||||
Once we've reached the end of life for a particular major version, we'll release a new major version where all deprecated APIs have been removed.
|
||||
|
||||
## Avoiding The Major Cliff
|
||||
|
||||
If you try to upgrade your component to 16.0.0 you might find that your application no longer works if you still have other dependencies. E.g. if Ryan's and Jed's components are only compatible with 15.x.x.
|
||||
|
||||
<img src="/react/img/blog/versioning-4.png" width="498">
|
||||
|
||||
Worst case, you revert back to 15.1.0 for your application. Since you'll want to use your component, you might also revert that one.
|
||||
|
||||
<img src="/react/img/blog/versioning-5.png" width="493">
|
||||
|
||||
Of course, Ryan and Jed think the same way. If we're not careful, we can hit a cliff where nobody upgrades. This has happened to many software project ecosystems in the past.
|
||||
|
||||
Therefore, we're committed to making it easy for most components and libraries built on top of React to be compatible with two major versions at the same time. We will do this by introducing new APIs before completely removing the old ones, thereby avoiding those cliffs.
|
||||
|
||||
<img src="/react/img/blog/versioning-6.png" width="493">
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user