Delete documentation and website source (#11137)
* Deleted docs folder * Deleted www folder * Remove Netlify website build command * Removed refs to docs and www from ESlint config * Removed refs to www/docs from Flow config * Removed unnecessary .gitignore config * Updated license check to remove refs to docs * Removed gh-pages specific portions of Circle build scripts There may be more that we can remove (eg set_up_github_keys.sh) but I'm not positive * Removed docs specific license
Brian Vaughn committed
Oct 6, 2017 at 10:18 UTC
ebb1d316bd7998db04916fd8fdb8d5f4a1b7df58
579 files changed
+1
-48012
.eslintignore
-7
@@ -2,12 +2,6 @@
2
src/renderers/art
3
src/__mocks__/vendor
4
packages/react-art/lib
5
-# But not in docs/_js/examples/*
6
-docs/_js/*.js
7
-docs/js/
8
-docs/_site/
9
-# gems
10
-docs/vendor/bundle/
5
# This should be more like examples/**/thirdparty/** but
6
# we should fix https://github.com/facebook/esprima/pull/85 first
7
fixtures/
@@ -17,5 +11,4 @@ coverage/
11
scripts/bench/benchmarks/**/*.js
12
scripts/bench/remote-repo/
13
vendor/*
20
-www/public/*
14
**/node_modules
.flowconfig
-6
@@ -7,16 +7,10 @@
7
<PROJECT_ROOT>/node_modules/chrome-devtools-frontend/.*
8
<PROJECT_ROOT>/node_modules/devtools-timeline-model/.*
9
<PROJECT_ROOT>/node_modules/create-react-class/.*
10
-<PROJECT_ROOT>/www/node_modules/.*
10
<PROJECT_ROOT>/.*/__mocks__/.*
11
<PROJECT_ROOT>/.*/__tests__/.*
12
14
-# Ignore Docs
15
-<PROJECT_ROOT>/docs/.*
16
-<PROJECT_ROOT>/.*/docs/.*
17
-
13
[include]
19
-./www/node_modules/hex2rgba/
14
15
[libs]
16
./node_modules/fbjs/flow/lib/dev.js
.gitignore
-8
@@ -9,14 +9,6 @@ build/
9
remote-repo/
10
coverage/
11
.module-cache
12
-*.gem
13
-docs/.bundle
14
-docs/code
15
-docs/_site
16
-docs/.sass-cache
17
-docs/js/*
18
-docs/downloads/*.zip
19
-docs/vendor/bundle
12
fixtures/dom/public/react-dom.js
13
fixtures/dom/public/react.js
14
test/the-files-to-test.generated.js
LICENSE-docs
deleted
-393
@@ -1,393 +0,0 @@
1
-Attribution 4.0 International
2
-
3
-=======================================================================
4
-
5
-Creative Commons Corporation ("Creative Commons") is not a law firm and
6
-does not provide legal services or legal advice. Distribution of
7
-Creative Commons public licenses does not create a lawyer-client or
8
-other relationship. Creative Commons makes its licenses and related
9
-information available on an "as-is" basis. Creative Commons gives no
10
-warranties regarding its licenses, any material licensed under their
11
-terms and conditions, or any related information. Creative Commons
12
-disclaims all liability for damages resulting from their use to the
13
-fullest extent possible.
14
-
15
-Using Creative Commons Public Licenses
16
-
17
-Creative Commons public licenses provide a standard set of terms and
18
-conditions that creators and other rights holders may use to share
19
-original works of authorship and other material subject to copyright
20
-and certain other rights specified in the public license below. The
21
-following considerations are for informational purposes only, are not
22
-exhaustive, and do not form part of our licenses.
23
-
24
- Considerations for licensors: Our public licenses are
25
- intended for use by those authorized to give the public
26
- permission to use material in ways otherwise restricted by
27
- copyright and certain other rights. Our licenses are
28
- irrevocable. Licensors should read and understand the terms
29
- and conditions of the license they choose before applying it.
30
- Licensors should also secure all rights necessary before
31
- applying our licenses so that the public can reuse the
32
- material as expected. Licensors should clearly mark any
33
- material not subject to the license. This includes other CC-
34
- licensed material, or material used under an exception or
35
- limitation to copyright. More considerations for licensors:
36
- wiki.creativecommons.org/Considerations_for_licensors
37
-
38
- Considerations for the public: By using one of our public
39
- licenses, a licensor grants the public permission to use the
40
- licensed material under specified terms and conditions. If
41
- the licensor's permission is not necessary for any reason--for
42
- example, because of any applicable exception or limitation to
43
- copyright--then that use is not regulated by the license. Our
44
- licenses grant only permissions under copyright and certain
45
- other rights that a licensor has authority to grant. Use of
46
- the licensed material may still be restricted for other
47
- reasons, including because others have copyright or other
48
- rights in the material. A licensor may make special requests,
49
- such as asking that all changes be marked or described.
50
- Although not required by our licenses, you are encouraged to
51
- respect those requests where reasonable. More_considerations
52
- for the public:
53
- wiki.creativecommons.org/Considerations_for_licensees
54
-
55
-=======================================================================
56
-
57
-Creative Commons Attribution 4.0 International Public License
58
-
59
-By exercising the Licensed Rights (defined below), You accept and agree
60
-to be bound by the terms and conditions of this Creative Commons
61
-Attribution 4.0 International Public License ("Public License"). To the
62
-extent this Public License may be interpreted as a contract, You are
63
-granted the Licensed Rights in consideration of Your acceptance of
64
-these terms and conditions, and the Licensor grants You such rights in
65
-consideration of benefits the Licensor receives from making the
66
-Licensed Material available under these terms and conditions.
67
-
68
-
69
-Section 1 -- Definitions.
70
-
71
- a. Adapted Material means material subject to Copyright and Similar
72
- Rights that is derived from or based upon the Licensed Material
73
- and in which the Licensed Material is translated, altered,
74
- arranged, transformed, or otherwise modified in a manner requiring
75
- permission under the Copyright and Similar Rights held by the
76
- Licensor. For purposes of this Public License, where the Licensed
77
- Material is a musical work, performance, or sound recording,
78
- Adapted Material is always produced where the Licensed Material is
79
- synched in timed relation with a moving image.
80
-
81
- b. Adapter's License means the license You apply to Your Copyright
82
- and Similar Rights in Your contributions to Adapted Material in
83
- accordance with the terms and conditions of this Public License.
84
-
85
- c. Copyright and Similar Rights means copyright and/or similar rights
86
- closely related to copyright including, without limitation,
87
- performance, broadcast, sound recording, and Sui Generis Database
88
- Rights, without regard to how the rights are labeled or
89
- categorized. For purposes of this Public License, the rights
90
- specified in Section 2(b)(1)-(2) are not Copyright and Similar
91
- Rights.
92
-
93
- d. Effective Technological Measures means those measures that, in the
94
- absence of proper authority, may not be circumvented under laws
95
- fulfilling obligations under Article 11 of the WIPO Copyright
96
- Treaty adopted on December 20, 1996, and/or similar international
97
- agreements.
98
-
99
- e. Exceptions and Limitations means fair use, fair dealing, and/or
100
- any other exception or limitation to Copyright and Similar Rights
101
- that applies to Your use of the Licensed Material.
102
-
103
- f. Licensed Material means the artistic or literary work, database,
104
- or other material to which the Licensor applied this Public
105
- License.
106
-
107
- g. Licensed Rights means the rights granted to You subject to the
108
- terms and conditions of this Public License, which are limited to
109
- all Copyright and Similar Rights that apply to Your use of the
110
- Licensed Material and that the Licensor has authority to license.
111
-
112
- h. Licensor means the individual(s) or entity(ies) granting rights
113
- under this Public License.
114
-
115
- i. Share means to provide material to the public by any means or
116
- process that requires permission under the Licensed Rights, such
117
- as reproduction, public display, public performance, distribution,
118
- dissemination, communication, or importation, and to make material
119
- available to the public including in ways that members of the
120
- public may access the material from a place and at a time
121
- individually chosen by them.
122
-
123
- j. Sui Generis Database Rights means rights other than copyright
124
- resulting from Directive 96/9/EC of the European Parliament and of
125
- the Council of 11 March 1996 on the legal protection of databases,
126
- as amended and/or succeeded, as well as other essentially
127
- equivalent rights anywhere in the world.
128
-
129
- k. You means the individual or entity exercising the Licensed Rights
130
- under this Public License. Your has a corresponding meaning.
131
-
132
-
133
-Section 2 -- Scope.
134
-
135
- a. License grant.
136
-
137
- 1. Subject to the terms and conditions of this Public License,
138
- the Licensor hereby grants You a worldwide, royalty-free,
139
- non-sublicensable, non-exclusive, irrevocable license to
140
- exercise the Licensed Rights in the Licensed Material to:
141
-
142
- a. reproduce and Share the Licensed Material, in whole or
143
- in part; and
144
-
145
- b. produce, reproduce, and Share Adapted Material.
146
-
147
- 2. Exceptions and Limitations. For the avoidance of doubt, where
148
- Exceptions and Limitations apply to Your use, this Public
149
- License does not apply, and You do not need to comply with
150
- its terms and conditions.
151
-
152
- 3. Term. The term of this Public License is specified in Section
153
- 6(a).
154
-
155
- 4. Media and formats; technical modifications allowed. The
156
- Licensor authorizes You to exercise the Licensed Rights in
157
- all media and formats whether now known or hereafter created,
158
- and to make technical modifications necessary to do so. The
159
- Licensor waives and/or agrees not to assert any right or
160
- authority to forbid You from making technical modifications
161
- necessary to exercise the Licensed Rights, including
162
- technical modifications necessary to circumvent Effective
163
- Technological Measures. For purposes of this Public License,
164
- simply making modifications authorized by this Section 2(a)
165
- (4) never produces Adapted Material.
166
-
167
- 5. Downstream recipients.
168
-
169
- a. Offer from the Licensor -- Licensed Material. Every
170
- recipient of the Licensed Material automatically
171
- receives an offer from the Licensor to exercise the
172
- Licensed Rights under the terms and conditions of this
173
- Public License.
174
-
175
- b. No downstream restrictions. You may not offer or impose
176
- any additional or different terms or conditions on, or
177
- apply any Effective Technological Measures to, the
178
- Licensed Material if doing so restricts exercise of the
179
- Licensed Rights by any recipient of the Licensed
180
- Material.
181
-
182
- 6. No endorsement. Nothing in this Public License constitutes or
183
- may be construed as permission to assert or imply that You
184
- are, or that Your use of the Licensed Material is, connected
185
- with, or sponsored, endorsed, or granted official status by,
186
- the Licensor or others designated to receive attribution as
187
- provided in Section 3(a)(1)(A)(i).
188
-
189
- b. Other rights.
190
-
191
- 1. Moral rights, such as the right of integrity, are not
192
- licensed under this Public License, nor are publicity,
193
- privacy, and/or other similar personality rights; however, to
194
- the extent possible, the Licensor waives and/or agrees not to
195
- assert any such rights held by the Licensor to the limited
196
- extent necessary to allow You to exercise the Licensed
197
- Rights, but not otherwise.
198
-
199
- 2. Patent and trademark rights are not licensed under this
200
- Public License.
201
-
202
- 3. To the extent possible, the Licensor waives any right to
203
- collect royalties from You for the exercise of the Licensed
204
- Rights, whether directly or through a collecting society
205
- under any voluntary or waivable statutory or compulsory
206
- licensing scheme. In all other cases the Licensor expressly
207
- reserves any right to collect such royalties.
208
-
209
-
210
-Section 3 -- License Conditions.
211
-
212
-Your exercise of the Licensed Rights is expressly made subject to the
213
-following conditions.
214
-
215
- a. Attribution.
216
-
217
- 1. If You Share the Licensed Material (including in modified
218
- form), You must:
219
-
220
- a. retain the following if it is supplied by the Licensor
221
- with the Licensed Material:
222
-
223
- i. identification of the creator(s) of the Licensed
224
- Material and any others designated to receive
225
- attribution, in any reasonable manner requested by
226
- the Licensor (including by pseudonym if
227
- designated);
228
-
229
- ii. a copyright notice;
230
-
231
- iii. a notice that refers to this Public License;
232
-
233
- iv. a notice that refers to the disclaimer of
234
- warranties;
235
-
236
- v. a URI or hyperlink to the Licensed Material to the
237
- extent reasonably practicable;
238
-
239
- b. indicate if You modified the Licensed Material and
240
- retain an indication of any previous modifications; and
241
-
242
- c. indicate the Licensed Material is licensed under this
243
- Public License, and include the text of, or the URI or
244
- hyperlink to, this Public License.
245
-
246
- 2. You may satisfy the conditions in Section 3(a)(1) in any
247
- reasonable manner based on the medium, means, and context in
248
- which You Share the Licensed Material. For example, it may be
249
- reasonable to satisfy the conditions by providing a URI or
250
- hyperlink to a resource that includes the required
251
- information.
252
-
253
- 3. If requested by the Licensor, You must remove any of the
254
- information required by Section 3(a)(1)(A) to the extent
255
- reasonably practicable.
256
-
257
- 4. If You Share Adapted Material You produce, the Adapter's
258
- License You apply must not prevent recipients of the Adapted
259
- Material from complying with this Public License.
260
-
261
-
262
-Section 4 -- Sui Generis Database Rights.
263
-
264
-Where the Licensed Rights include Sui Generis Database Rights that
265
-apply to Your use of the Licensed Material:
266
-
267
- a. for the avoidance of doubt, Section 2(a)(1) grants You the right
268
- to extract, reuse, reproduce, and Share all or a substantial
269
- portion of the contents of the database;
270
-
271
- b. if You include all or a substantial portion of the database
272
- contents in a database in which You have Sui Generis Database
273
- Rights, then the database in which You have Sui Generis Database
274
- Rights (but not its individual contents) is Adapted Material; and
275
-
276
- c. You must comply with the conditions in Section 3(a) if You Share
277
- all or a substantial portion of the contents of the database.
278
-
279
-For the avoidance of doubt, this Section 4 supplements and does not
280
-replace Your obligations under this Public License where the Licensed
281
-Rights include other Copyright and Similar Rights.
282
-
283
-
284
-Section 5 -- Disclaimer of Warranties and Limitation of Liability.
285
-
286
- a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE
287
- EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS
288
- AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF
289
- ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS,
290
- IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION,
291
- WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR
292
- PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS,
293
- ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT
294
- KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT
295
- ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU.
296
-
297
- b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE
298
- TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION,
299
- NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT,
300
- INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES,
301
- COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR
302
- USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN
303
- ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR
304
- DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR
305
- IN PART, THIS LIMITATION MAY NOT APPLY TO YOU.
306
-
307
- c. The disclaimer of warranties and limitation of liability provided
308
- above shall be interpreted in a manner that, to the extent
309
- possible, most closely approximates an absolute disclaimer and
310
- waiver of all liability.
311
-
312
-
313
-Section 6 -- Term and Termination.
314
-
315
- a. This Public License applies for the term of the Copyright and
316
- Similar Rights licensed here. However, if You fail to comply with
317
- this Public License, then Your rights under this Public License
318
- terminate automatically.
319
-
320
- b. Where Your right to use the Licensed Material has terminated under
321
- Section 6(a), it reinstates:
322
-
323
- 1. automatically as of the date the violation is cured, provided
324
- it is cured within 30 days of Your discovery of the
325
- violation; or
326
-
327
- 2. upon express reinstatement by the Licensor.
328
-
329
- For the avoidance of doubt, this Section 6(b) does not affect any
330
- right the Licensor may have to seek remedies for Your violations
331
- of this Public License.
332
-
333
- c. For the avoidance of doubt, the Licensor may also offer the
334
- Licensed Material under separate terms or conditions or stop
335
- distributing the Licensed Material at any time; however, doing so
336
- will not terminate this Public License.
337
-
338
- d. Sections 1, 5, 6, 7, and 8 survive termination of this Public
339
- License.
340
-
341
-
342
-Section 7 -- Other Terms and Conditions.
343
-
344
- a. The Licensor shall not be bound by any additional or different
345
- terms or conditions communicated by You unless expressly agreed.
346
-
347
- b. Any arrangements, understandings, or agreements regarding the
348
- Licensed Material not stated herein are separate from and
349
- independent of the terms and conditions of this Public License.
350
-
351
-
352
-Section 8 -- Interpretation.
353
-
354
- a. For the avoidance of doubt, this Public License does not, and
355
- shall not be interpreted to, reduce, limit, restrict, or impose
356
- conditions on any use of the Licensed Material that could lawfully
357
- be made without permission under this Public License.
358
-
359
- b. To the extent possible, if any provision of this Public License is
360
- deemed unenforceable, it shall be automatically reformed to the
361
- minimum extent necessary to make it enforceable. If the provision
362
- cannot be reformed, it shall be severed from this Public License
363
- without affecting the enforceability of the remaining terms and
364
- conditions.
365
-
366
- c. No term or condition of this Public License will be waived and no
367
- failure to comply consented to unless expressly agreed to by the
368
- Licensor.
369
-
370
- d. Nothing in this Public License constitutes or may be interpreted
371
- as a limitation upon, or waiver of, any privileges and immunities
372
- that apply to the Licensor or You, including from the legal
373
- processes of any jurisdiction or authority.
374
-
375
-
376
-=======================================================================
377
-
378
-Creative Commons is not a party to its public licenses.
379
-Notwithstanding, Creative Commons may elect to apply one of its public
380
-licenses to material it publishes and in those instances will be
381
-considered the "Licensor." Except for the limited purpose of indicating
382
-that material is shared under a Creative Commons public license or as
383
-otherwise permitted by the Creative Commons policies published at
384
-creativecommons.org/policies, Creative Commons does not authorize the
385
-use of the trademark "Creative Commons" or any other trademark or logo
386
-of Creative Commons without its prior written consent including,
387
-without limitation, in connection with any unauthorized modifications
388
-to any of its public licenses or any other arrangements,
389
-understandings, or agreements concerning use of licensed material. For
390
-the avoidance of doubt, this paragraph does not form part of the public
391
-licenses.
392
-
393
-Creative Commons may be contacted at creativecommons.org.
circle.yml
-5
@@ -13,7 +13,6 @@ machine:
13
dependencies:
14
pre:
15
# This is equivalent to $TRAVIS_COMMIT_RANGE
16
- # Need to figure out how to bail early if this is a "docs only" build
16
- echo $CIRCLE_COMPARE_URL | cut -d/ -f7
17
# install yarn if it's not already installed
18
- |
@@ -21,14 +20,11 @@ dependencies:
20
curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version $YARN_VERSION
21
fi
22
override:
24
- - bundle install --gemfile=docs/Gemfile --deployment --path=vendor/bundle --jobs=3 --retry=3
23
- yarn install
24
- scripts/circleci/set_up_github_keys.sh
25
post:
26
# - npm ls --depth=0
27
cache_directories:
30
- - docs/vendor/bundle
31
- - ~/react-gh-pages # docs checkout
28
- ~/.yarn
29
- ~/.yarn-cache
30
@@ -42,4 +38,3 @@ deployment:
38
branch: /.*/
39
commands:
40
- ./scripts/circleci/upload_build.sh
45
- - ./scripts/circleci/build_gh_pages.sh
docs/404.md
deleted
-9
@@ -1,9 +0,0 @@
1
----
2
-layout: single
3
-title: Page Not Found
4
-permalink: 404.html
5
----
6
-
7
-We couldn't find what you were looking for.
8
-
9
-Please contact the owner of the site that linked you to the original URL and let them know their link is broken.
docs/Gemfile
deleted
-29
@@ -1,29 +0,0 @@
1
-source 'https://rubygems.org'
2
-
3
-gem 'rake'
4
-
5
-# jekyll, which builds it all
6
-# 3.0 includes sass processing
7
-gem 'jekyll', '~>3.1'
8
-
9
-# Jekyll extensions
10
-gem 'jekyll-redirect-from'
11
-gem 'jekyll-paginate'
12
-
13
-# JSON
14
-gem 'json'
15
-
16
-# For `rake watch`
17
-gem 'rb-fsevent'
18
-
19
-# For markdown header cleanup
20
-gem 'sanitize', '~>2.0'
21
-
22
-# Markdown
23
-gem 'redcarpet'
24
-
25
-# Syntax highlighting
26
-gem 'pygments.rb'
27
-
28
-# Avoid having to poll for changes on Windows
29
-gem 'wdm', '>= 0.1.0' if Gem.win_platform?
\ No newline at end of file
docs/Gemfile.lock
deleted
-67
@@ -1,67 +0,0 @@
1
-GEM
2
- remote: https://rubygems.org/
3
- specs:
4
- colorator (0.1)
5
- ffi (1.9.14)
6
- ffi (1.9.14-x64-mingw32)
7
- jekyll (3.1.6)
8
- colorator (~> 0.1)
9
- jekyll-sass-converter (~> 1.0)
10
- jekyll-watch (~> 1.1)
11
- kramdown (~> 1.3)
12
- liquid (~> 3.0)
13
- mercenary (~> 0.3.3)
14
- rouge (~> 1.7)
15
- safe_yaml (~> 1.0)
16
- jekyll-paginate (1.1.0)
17
- jekyll-redirect-from (0.11.0)
18
- jekyll (>= 2.0)
19
- jekyll-sass-converter (1.4.0)
20
- sass (~> 3.4)
21
- jekyll-watch (1.4.0)
22
- listen (~> 3.0, < 3.1)
23
- json (2.0.1)
24
- kramdown (1.11.1)
25
- liquid (3.0.6)
26
- listen (3.0.8)
27
- rb-fsevent (~> 0.9, >= 0.9.4)
28
- rb-inotify (~> 0.9, >= 0.9.7)
29
- mercenary (0.3.6)
30
- mini_portile2 (2.1.0)
31
- nokogiri (1.6.8)
32
- mini_portile2 (~> 2.1.0)
33
- pkg-config (~> 1.1.7)
34
- nokogiri (1.6.8-x64-mingw32)
35
- mini_portile2 (~> 2.1.0)
36
- pkg-config (~> 1.1.7)
37
- pkg-config (1.1.7)
38
- posix-spawn (0.3.11)
39
- pygments.rb (0.6.3)
40
- posix-spawn (~> 0.3.6)
41
- yajl-ruby (~> 1.2.0)
42
- rake (11.2.2)
43
- rb-fsevent (0.9.7)
44
- rb-inotify (0.9.7)
45
- ffi (>= 0.5.0)
46
- redcarpet (3.3.4)
47
- rouge (1.11.1)
48
- safe_yaml (1.0.4)
49
- sanitize (2.1.0)
50
- nokogiri (>= 1.4.4)
51
- sass (3.4.22)
52
- yajl-ruby (1.2.1)
53
-
54
-PLATFORMS
55
- ruby
56
- x64-mingw32
57
-
58
-DEPENDENCIES
59
- jekyll (~> 3.1)
60
- jekyll-paginate
61
- jekyll-redirect-from
62
- json
63
- pygments.rb
64
- rake
65
- rb-fsevent
66
- redcarpet
67
- sanitize (~> 2.0)
docs/README.md
deleted
-79
@@ -1,79 +0,0 @@
1
-# React Documentation & Website
2
-
3
-## [Read the React Documentation](https://reactjs.org/)
4
-
5
-This folder is not the right place to *read* the documentation.
6
-
7
-Instead, head over [to the React website](https://reactjs.org/) to read it.
8
-
9
-This folder only contains the source code for the website.
10
-
11
-## Installation
12
-
13
-If you are working on the site, you will want to install and run a local copy of it.
14
-
15
-We use [Jekyll](http://jekyllrb.com/) to build the site using ([mostly](http://zpao.com/posts/adding-line-highlights-to-markdown-code-fences/)) Markdown, and we host it by pushing HTML to [GitHub Pages](http://pages.github.com/).
16
-
17
-### Dependencies
18
-
19
-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`).
20
-Otherwise, [RVM](https://rvm.io/) and [rbenv](https://github.com/sstephenson/rbenv) are popular ways to install Ruby.
21
-
22
- - [Ruby](http://www.ruby-lang.org/) (version >= 1.8.7)
23
- - [RubyGems](http://rubygems.org/) (version >= 1.3.7)
24
- - [Bundler](http://gembundler.com/)
25
-
26
-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.
27
-
28
- - [Python](https://www.python.org) (version 2.7.x)
29
-
30
-Once you have RubyGems and installed Bundler (via `gem install bundler`), use it to install the dependencies:
31
-
32
-```sh
33
-$ cd react/docs
34
-$ bundle install # Might need sudo.
35
-$ npm install
36
-```
37
-
38
-### Instructions
39
-
40
-The site requires React, so first make sure you've built the project (via [`grunt`](http://gruntjs.com/getting-started)).
41
-
42
-Use Jekyll to serve the website locally (by default, at `http://localhost:4000`):
43
-
44
-```sh
45
-$ cd react/docs
46
-$ bundle exec rake
47
-$ bundle exec rake fetch_remotes
48
-$ bundle exec jekyll serve -w
49
-$ open http://localhost:4000/react/index.html
50
-```
51
-
52
-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.
53
-If you only want to modify the HTML or Markdown, you do not have to do anything because we package pre-compiled copies of the CSS and JS.
54
-If you want to modify the CSS or JS, use [Rake](http://rake.rubyforge.org/) to compile them:
55
-
56
-```sh
57
-$ cd react/docs
58
-$ bundle exec rake watch # Automatically compiles as needed.
59
-# bundle exec rake Manually compile CSS and JS.
60
-# bundle exec rake js Manually compile JS, only.
61
-```
62
-
63
-## Afterthoughts
64
-
65
-### Updating `facebook.github.io/react`
66
-
67
-The easiest way to do this is to have a separate clone of this repository, checked out to the `gh-pages` branch. We have a build step that expects this to be in a directory named `react-gh-pages` at the same depth as `react`. Then it's just a matter of running `grunt docs`, which will compile the site and copy it out to this repository. From there, you can check it in.
68
-
69
-**Note:** This should only be done for new releases. You should create a tag corresponding to the release tag in the main repository.
70
-
71
-We also have a rake task that does the same thing (without creating commits). It expects the directory structure mentioned above.
72
-
73
-```sh
74
-$ bundle exec rake release
75
-```
76
-
77
-### Removing the Jekyll / Ruby Dependency
78
-
79
-In an ideal world, we would not be adding a Ruby dependency on part of our project. We would like to move towards a point where we are using React to render the website.
docs/Rakefile
deleted
-74
@@ -1,74 +0,0 @@
1
-require('rubygems')
2
-require('json')
3
-require('yaml')
4
-require('open-uri')
5
-
6
-desc "download babel-browser"
7
-task :fetch_remotes do
8
- IO.copy_stream(
9
- open('https://unpkg.com/babel-standalone@6.15.0/babel.min.js'),
10
- 'js/babel.min.js'
11
- )
12
-end
13
-
14
-desc "generate js from jsx"
15
-task :js do
16
- system "../node_modules/.bin/babel _js --out-dir=js"
17
-end
18
-
19
-desc "watch js"
20
-task :watch do
21
- Process.spawn "../node_modules/.bin/babel _js --out-dir=js --watch"
22
- Process.waitall
23
-end
24
-
25
-desc "update version to match ../package.json"
26
-task :update_version do
27
- react_version = JSON.parse(File.read('../package.json'))['version']
28
- site_config = YAML.load_file('_config.yml')
29
- if site_config['react_version'] != react_version
30
- site_config['react_version'] = react_version
31
- File.open('_config.yml', 'w+') { |f| f.write(site_config.to_yaml) }
32
- end
33
-end
34
-
35
-desc "update SRI hashes"
36
-task :update_hashes do
37
- map = {
38
- 'react.js' => 'dev',
39
- 'react.min.js' => 'prod',
40
- 'react-dom.js' => 'dom_dev',
41
- 'react-dom.min.js' => 'dom_prod',
42
- 'react-dom-server.js' => 'dom_server_dev',
43
- 'react-dom-server.min.js' => 'dom_server_prod'
44
- }
45
- site_config = YAML.load_file('_config.yml')
46
- map.each do |file, key|
47
- site_config['react_hashes'][key] = `openssl dgst -sha384 -binary ../../react-bower/#{file} | openssl base64 -A`
48
- end
49
- File.open('_config.yml', 'w+') { |f| f.write(site_config.to_yaml) }
50
-end
51
-
52
-desc "update acknowledgements list"
53
-task :update_acknowledgements do
54
- authors = File.readlines('../AUTHORS').map {|author| author.gsub(/ <.*\n/,'')}
55
- # split into cols here because nobody knows how to use liquid
56
- # need to to_f because ruby will keep slice_size as int and round on its own
57
- slice_size = (authors.size / 3.to_f).ceil
58
- cols = authors.each_slice(slice_size).to_a
59
- File.open('_data/acknowledgements.yml', 'w+') { |f| f.write(cols.to_yaml) }
60
-end
61
-
62
-desc "copy error codes to docs"
63
-task :copy_error_codes do
64
- codes_json = File.read('../scripts/error-codes/codes.json')
65
- codes_js = "var errorMap = #{codes_json.chomp};\n"
66
- File.write('js/errorMap.js', codes_js)
67
-end
68
-
69
-desc "build into ../../react-gh-pages"
70
-task :release => [:update_version, :js, :fetch_remotes, :copy_error_codes] do
71
- system "jekyll build -d ../../react-gh-pages"
72
-end
73
-
74
-task :default => [:js]
docs/_config.yml
deleted
-72
@@ -1,72 +0,0 @@
1
----
2
-name: React
3
-description: A JavaScript library for building user interfaces
4
-url: https://reactjs.org/
5
-baseurl: /
6
-permalink: /blog/:year/:month/:day/:title.html
7
-paginate_path: /blog/page:num/
8
-paginate: 5
9
-timezone: America/Los_Angeles
10
-highlighter: pygments
11
-defaults:
12
-- scope:
13
- path: ''
14
- type: posts
15
- values:
16
- layout: post
17
- sectionid: blog
18
-- scope:
19
- path: blog
20
- type: pages
21
- values:
22
- sectionid: blog
23
-- scope:
24
- path: tutorial
25
- type: pages
26
- values:
27
- layout: tutorial
28
- sectionid: tutorial
29
-- scope:
30
- path: docs
31
- type: pages
32
- values:
33
- layout: docs
34
- sectionid: docs
35
-- scope:
36
- path: contributing
37
- type: pages
38
- values:
39
- sectionid: docs
40
-- scope:
41
- path: community
42
- type: pages
43
- values:
44
- layout: community
45
- sectionid: community
46
-exclude:
47
-- Gemfile
48
-- Gemfile.lock
49
-- README.md
50
-- Rakefile
51
-- vendor/bundle
52
-markdown: redcarpet
53
-redcarpet:
54
- extensions:
55
- - fenced_code_blocks
56
- - footnotes
57
-sass:
58
- style: :compressed
59
- sass_dir: _css
60
-gems:
61
-- jekyll-redirect-from
62
-- jekyll-paginate
63
-react_version: 16.0.0
64
-react_hashes:
65
- dev: buVLzxzBI8Ps3svVMSUurNdb5dozNidH5Ow4H0YgZeia3t6Oeui2VLpvtAq1fwtK
66
- prod: nCjsa0kjNQPQdxWm12/ReVJzfBJaVubEwwDswyQDGMKYJmeWv3qShMuETfU5fisu
67
- addons_dev: /u97pKzBwasbC1yj8gSIq1z30o4ZTUX9j1Mv/hyAjmG41ydTNHw9JFOhwFbDgxmR
68
- addons_prod: /p86n4b5VTlWoA/INEHQZ+zjx9g1pJduoFmTEJ6fSzFTq1mBaXaBcWVGtZJXD68L
69
- dom_dev: lUxkeWjg3I3lXmxcM1gvgo0yvm2w9alc1osa4L8yWZFO6l/vg9h5hSlHPFioltrm
70
- dom_prod: u8x1yIGN9IjGNYbBaDMsp1D4MK3sCmMU13mcBX+bm+aMo5+gaT8HIwIj39GlXaRS
71
- dom_server_dev: Okj1hVX1VF+oZSkPcJQ/YcnW6bsIpeni222ylwUaMnSmdCe0zWKmMwpFMVqzy4Ws
72
- dom_server_prod: wiA4u+G5fEfF4xzhhVnNWeSifVyttoEIpgc3APaMKQgw5A4wHbEMihf63tk1qoyt
docs/_css/_solarized.scss
deleted
-171
@@ -1,171 +0,0 @@
1
-html * {
2
- color-profile: sRGB;
3
- rendering-intent: auto;
4
-}
5
- .cm-s-solarized-light {
6
- background-color: #f8f5ec;
7
- color: #637c84;
8
- }
9
- .cm-s-solarized-light .emphasis {
10
- font-weight: bold;
11
- }
12
- .cm-s-solarized-light .dotted {
13
- border-bottom: 1px dotted #cb4b16;
14
- }
15
- .cm-s-solarized-light .CodeMirror-gutter {
16
- background-color: #eee8d5;
17
- border-right: 3px solid #eee8d5;
18
- }
19
- .cm-s-solarized-light .CodeMirror-gutter .CodeMirror-gutter-text {
20
- color: #93a1a1;
21
- }
22
- .cm-s-solarized-light .CodeMirror-cursor {
23
- border-left-color: #002b36 !important;
24
- }
25
- .cm-s-solarized-light .CodeMirror-matchingbracket {
26
- color: #002b36;
27
- background-color: #eee8d5;
28
- box-shadow: 0 0 10px #eee8d5;
29
- font-weight: bold;
30
- }
31
- .cm-s-solarized-light .CodeMirror-nonmatchingbracket {
32
- color: #002b36;
33
- background-color: #eee8d5;
34
- box-shadow: 0 0 10px #eee8d5;
35
- font-weight: bold;
36
- color: #dc322f;
37
- border-bottom: 1px dotted #cb4b16;
38
- }
39
- .cm-s-solarized-light span.cm-keyword {
40
- color: #859900;
41
- }
42
- .cm-s-solarized-light span.cm-atom {
43
- color: #2aa198;
44
- }
45
- .cm-s-solarized-light span.cm-number {
46
- color: #586e75;
47
- }
48
- .cm-s-solarized-light span.cm-def {
49
- color: #637c84;
50
- }
51
- .cm-s-solarized-light span.cm-variable {
52
- color: #637c84;
53
- }
54
- .cm-s-solarized-light span.cm-variable-2 {
55
- color: #b58900;
56
- }
57
- .cm-s-solarized-light span.cm-variable-3 {
58
- color: #cb4b16;
59
- }
60
- .cm-s-solarized-light span.cm-comment {
61
- color: #93a1a1;
62
- }
63
- .cm-s-solarized-light span.cm-property {
64
- color: #657b83;
65
- }
66
- .cm-s-solarized-light span.cm-operator {
67
- color: #657b83;
68
- }
69
- .cm-s-solarized-light span.cm-string {
70
- color: #36958e;
71
- }
72
- .cm-s-solarized-light span.cm-error {
73
- font-weight: bold;
74
- border-bottom: 1px dotted #cb4b16;
75
- }
76
- .cm-s-solarized-light span.cm-bracket {
77
- color: #268bd2;
78
- }
79
- .cm-s-solarized-light span.cm-tag {
80
- color: #268bd2;
81
- }
82
- .cm-s-solarized-light span.cm-attribute {
83
- color: #586e75;
84
- }
85
- .cm-s-solarized-light span.cm-meta {
86
- color: #268bd2;
87
- }
88
- .cm-s-solarized-dark {
89
- background-color: #002b36;
90
- color: #839496;
91
- }
92
- .cm-s-solarized-dark .emphasis {
93
- font-weight: bold;
94
- }
95
- .cm-s-solarized-dark .dotted {
96
- border-bottom: 1px dotted #cb4b16;
97
- }
98
- .cm-s-solarized-dark .CodeMirror-gutter {
99
- background-color: #073642;
100
- border-right: 3px solid #073642;
101
- }
102
- .cm-s-solarized-dark .CodeMirror-gutter .CodeMirror-gutter-text {
103
- color: #586e75;
104
- }
105
- .cm-s-solarized-dark .CodeMirror-cursor {
106
- border-left-color: #fdf6e3 !important;
107
- }
108
- .cm-s-solarized-dark .CodeMirror-matchingbracket {
109
- color: #fdf6e3;
110
- background-color: #073642;
111
- box-shadow: 0 0 10px #073642;
112
- font-weight: bold;
113
- }
114
- .cm-s-solarized-dark .CodeMirror-nonmatchingbracket {
115
- color: #fdf6e3;
116
- background-color: #073642;
117
- box-shadow: 0 0 10px #073642;
118
- font-weight: bold;
119
- color: #dc322f;
120
- border-bottom: 1px dotted #cb4b16;
121
- }
122
- .cm-s-solarized-dark span.cm-keyword {
123
- color: #839496;
124
- font-weight: bold;
125
- }
126
- .cm-s-solarized-dark span.cm-atom {
127
- color: #2aa198;
128
- }
129
- .cm-s-solarized-dark span.cm-number {
130
- color: #93a1a1;
131
- }
132
- .cm-s-solarized-dark span.cm-def {
133
- color: #268bd2;
134
- }
135
- .cm-s-solarized-dark span.cm-variable {
136
- color: #cb4b16;
137
- }
138
- .cm-s-solarized-dark span.cm-variable-2 {
139
- color: #cb4b16;
140
- }
141
- .cm-s-solarized-dark span.cm-variable-3 {
142
- color: #cb4b16;
143
- }
144
- .cm-s-solarized-dark span.cm-comment {
145
- color: #586e75;
146
- }
147
- .cm-s-solarized-dark span.cm-property {
148
- color: #b58900;
149
- }
150
- .cm-s-solarized-dark span.cm-operator {
151
- color: #839496;
152
- }
153
- .cm-s-solarized-dark span.cm-string {
154
- color: #6c71c4;
155
- }
156
- .cm-s-solarized-dark span.cm-error {
157
- font-weight: bold;
158
- border-bottom: 1px dotted #cb4b16;
159
- }
160
- .cm-s-solarized-dark span.cm-bracket {
161
- color: #cb4b16;
162
- }
163
- .cm-s-solarized-dark span.cm-tag {
164
- color: #839496;
165
- }
166
- .cm-s-solarized-dark span.cm-attribute {
167
- color: #93a1a1;
168
- }
169
- .cm-s-solarized-dark span.cm-meta {
170
- color: #268bd2;
171
- }
docs/_css/_typography.scss
deleted
-135
@@ -1,135 +0,0 @@
1
-@import 'variables.scss';
2
-
3
-$textColor: $mediumColor;
4
-$textColorLight: lighten($textColor, 20%);
5
-
6
-html {
7
- font-family: $helvetica;
8
- font-family: proxima-nova, $helvetica;
9
- color: $textColor;
10
- line-height: 1.28;
11
-}
12
-
13
-p {
14
- margin: 0 0 10px;
15
-}
16
-
17
-.subHeader {
18
- font-size: 21px;
19
- font-weight: 200;
20
- line-height: 30px;
21
- margin-bottom: 10px;
22
-}
23
-
24
-em {
25
- font-style: italic;
26
-}
27
-
28
-h1,
29
-h2,
30
-h3,
31
-h4,
32
-h5,
33
-h6 {
34
- margin: 10px 0;
35
- font-family: inherit;
36
- font-weight: bold;
37
- line-height: 20px;
38
- color: inherit;
39
- text-rendering: optimizelegibility;
40
-}
41
-
42
-h1 small,
43
-h2 small,
44
-h3 small,
45
-h4 small,
46
-h5 small,
47
-h6 small {
48
- font-weight: normal;
49
- color: $textColorLight
50
-}
51
-
52
-h1,
53
-h2,
54
-h3 {
55
- line-height: 40px;
56
-}
57
-
58
-h1 {
59
- font-size: 39px;
60
-}
61
-
62
-h2 {
63
- font-size: 31px;
64
-}
65
-
66
-h3 {
67
- font-size: 23px;
68
-}
69
-
70
-h4 {
71
- font-size: 16px;
72
-}
73
-
74
-h5 {
75
- font-size: 14px;
76
-}
77
-
78
-h6 {
79
- font-size: 11px;
80
-}
81
-
82
-h1 small {
83
- font-size: 24px;
84
-}
85
-
86
-h2 small {
87
- font-size: 18px;
88
-}
89
-
90
-h3 small {
91
- font-size: 16px;
92
-}
93
-
94
-h4 small {
95
- font-size: 14px;
96
-}
97
-
98
-ul,
99
-ol {
100
- margin: 0 0 10px 25px;
101
- padding: 0;
102
-}
103
-
104
-ul ul,
105
-ul ol,
106
-ol ol,
107
-ol ul {
108
- margin-bottom: 0;
109
-}
110
-
111
-li {
112
- line-height: 20px;
113
-}
114
-
115
-a {
116
- color: $linkColor;
117
- text-decoration: none;
118
- &:hover,
119
- &:focus {
120
- color: $linkInteract;
121
- text-decoration: underline;
122
- }
123
- &:focus {
124
- outline: thin dotted #333;
125
- outline: 5px auto -webkit-focus-ring-color;
126
- outline-offset: -2px;
127
- }
128
-}
129
-.center {
130
- text-align: center;
131
-}
132
-
133
-input {
134
- font-family: inherit;
135
-}
docs/_css/_variables.scss
deleted
-22
@@ -1,22 +0,0 @@
1
-$primary: #cc7a6f;
2
-$linkColor: darken($primary, 9%);
3
-$linkInteract: darken($linkColor, 9%);
4
-$pageBg: #f9f9f9;
5
-
6
-$lightColor: #e9e9e9;
7
-$mediumestColor: #666;
8
-$mediumColor: #484848;
9
-$darkColor: #2d2d2d;
10
-$darkestColor: #222222;
11
-$blueColor: #61dafb;
12
-$orangeColor: complement($blueColor);
13
-
14
-$lightTextColor: #fafafa;
15
-$mediumTextColor: #aaa;
16
-$darkTextColor: $mediumColor;
17
-
18
-$buttonBlueTop: #77a3d2;
19
-$buttonBlueBottom: #4783c2;
20
-$buttonGreyTop: #9a9a9a;
21
-$buttonGreyBottom: #646464;
22
-
docs/_css/bourbon/_bourbon-deprecated-upcoming.scss
deleted
-8
@@ -1,8 +0,0 @@
1
-//************************************************************************//
2
-// These mixins/functions are deprecated
3
-// They will be removed in the next MAJOR version release
4
-//************************************************************************//
5
-@mixin inline-block {
6
- display: inline-block;
7
- @warn "inline-block mixin is deprecated and will be removed in the next major version release";
8
-}
docs/_css/bourbon/_bourbon.scss
deleted
-79
@@ -1,79 +0,0 @@
1
-// Settings
2
-@import "settings/prefixer";
3
-@import "settings/px-to-em";
4
-@import "settings/asset-pipeline";
5
-
6
-// Custom Helpers
7
-@import "helpers/convert-units";
8
-@import "helpers/gradient-positions-parser";
9
-@import "helpers/is-num";
10
-@import "helpers/linear-angle-parser";
11
-@import "helpers/linear-gradient-parser";
12
-@import "helpers/linear-positions-parser";
13
-@import "helpers/linear-side-corner-parser";
14
-@import "helpers/radial-arg-parser";
15
-@import "helpers/radial-positions-parser";
16
-@import "helpers/radial-gradient-parser";
17
-@import "helpers/render-gradients";
18
-@import "helpers/shape-size-stripper";
19
-@import "helpers/str-to-num";
20
-
21
-// Custom Functions
22
-@import "functions/assign";
23
-@import "functions/color-lightness";
24
-@import "functions/flex-grid";
25
-@import "functions/golden-ratio";
26
-@import "functions/grid-width";
27
-@import "functions/modular-scale";
28
-@import "functions/px-to-em";
29
-@import "functions/px-to-rem";
30
-@import "functions/strip-units";
31
-@import "functions/tint-shade";
32
-@import "functions/transition-property-name";
33
-@import "functions/unpack";
34
-
35
-// CSS3 Mixins
36
-@import "css3/animation";
37
-@import "css3/appearance";
38
-@import "css3/backface-visibility";
39
-@import "css3/background";
40
-@import "css3/background-image";
41
-@import "css3/border-image";
42
-@import "css3/border-radius";
43
-@import "css3/box-sizing";
44
-@import "css3/calc";
45
-@import "css3/columns";
46
-@import "css3/filter";
47
-@import "css3/flex-box";
48
-@import "css3/font-face";
49
-@import "css3/font-feature-settings";
50
-@import "css3/hyphens";
51
-@import "css3/hidpi-media-query";
52
-@import "css3/image-rendering";
53
-@import "css3/keyframes";
54
-@import "css3/linear-gradient";
55
-@import "css3/perspective";
56
-@import "css3/radial-gradient";
57
-@import "css3/transform";
58
-@import "css3/transition";
59
-@import "css3/user-select";
60
-@import "css3/placeholder";
61
-
62
-// Addons & other mixins
63
-@import "addons/button";
64
-@import "addons/clearfix";
65
-@import "addons/directional-values";
66
-@import "addons/ellipsis";
67
-@import "addons/font-family";
68
-@import "addons/hide-text";
69
-@import "addons/html5-input-types";
70
-@import "addons/position";
71
-@import "addons/prefixer";
72
-@import "addons/retina-image";
73
-@import "addons/size";
74
-@import "addons/timing-functions";
75
-@import "addons/triangle";
76
-@import "addons/word-wrap";
77
-
78
-// Soon to be deprecated Mixins
79
-@import "bourbon-deprecated-upcoming";
docs/_css/bourbon/addons/_button.scss
deleted
-374
@@ -1,374 +0,0 @@
1
-@mixin button ($style: simple, $base-color: #4294f0, $text-size: inherit, $padding: 7px 18px) {
2
-
3
- @if type-of($style) == string and type-of($base-color) == color {
4
- @include buttonstyle($style, $base-color, $text-size, $padding);
5
- }
6
-
7
- @if type-of($style) == string and type-of($base-color) == number {
8
- $padding: $text-size;
9
- $text-size: $base-color;
10
- $base-color: #4294f0;
11
-
12
- @if $padding == inherit {
13
- $padding: 7px 18px;
14
- }
15
-
16
- @include buttonstyle($style, $base-color, $text-size, $padding);
17
- }
18
-
19
- @if type-of($style) == color and type-of($base-color) == color {
20
- $base-color: $style;
21
- $style: simple;
22
- @include buttonstyle($style, $base-color, $text-size, $padding);
23
- }
24
-
25
- @if type-of($style) == color and type-of($base-color) == number {
26
- $padding: $text-size;
27
- $text-size: $base-color;
28
- $base-color: $style;
29
- $style: simple;
30
-
31
- @if $padding == inherit {
32
- $padding: 7px 18px;
33
- }
34
-
35
- @include buttonstyle($style, $base-color, $text-size, $padding);
36
- }
37
-
38
- @if type-of($style) == number {
39
- $padding: $base-color;
40
- $text-size: $style;
41
- $base-color: #4294f0;
42
- $style: simple;
43
-
44
- @if $padding == #4294f0 {
45
- $padding: 7px 18px;
46
- }
47
-
48
- @include buttonstyle($style, $base-color, $text-size, $padding);
49
- }
50
-
51
- &:disabled {
52
- opacity: 0.5;
53
- cursor: not-allowed;
54
- }
55
-}
56
-
57
-
58
-// Selector Style Button
59
-//************************************************************************//
60
-@mixin buttonstyle($type, $b-color, $t-size, $pad) {
61
- // Grayscale button
62
- @if $type == simple and $b-color == grayscale($b-color) {
63
- @include simple($b-color, true, $t-size, $pad);
64
- }
65
-
66
- @if $type == shiny and $b-color == grayscale($b-color) {
67
- @include shiny($b-color, true, $t-size, $pad);
68
- }
69
-
70
- @if $type == pill and $b-color == grayscale($b-color) {
71
- @include pill($b-color, true, $t-size, $pad);
72
- }
73
-
74
- @if $type == flat and $b-color == grayscale($b-color) {
75
- @include flat($b-color, true, $t-size, $pad);
76
- }
77
-
78
- // Colored button
79
- @if $type == simple {
80
- @include simple($b-color, false, $t-size, $pad);
81
- }
82
-
83
- @else if $type == shiny {
84
- @include shiny($b-color, false, $t-size, $pad);
85
- }
86
-
87
- @else if $type == pill {
88
- @include pill($b-color, false, $t-size, $pad);
89
- }
90
-
91
- @else if $type == flat {
92
- @include flat($b-color, false, $t-size, $pad);
93
- }
94
-}
95
-
96
-
97
-// Simple Button
98
-//************************************************************************//
99
-@mixin simple($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
100
- $color: hsl(0, 0, 100%);
101
- $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
102
- $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
103
- $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
104
- $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
105
-
106
- @if is-light($base-color) {
107
- $color: hsl(0, 0, 20%);
108
- $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
109
- }
110
-
111
- @if $grayscale == true {
112
- $border: grayscale($border);
113
- $inset-shadow: grayscale($inset-shadow);
114
- $stop-gradient: grayscale($stop-gradient);
115
- $text-shadow: grayscale($text-shadow);
116
- }
117
-
118
- border: 1px solid $border;
119
- border-radius: 3px;
120
- box-shadow: inset 0 1px 0 0 $inset-shadow;
121
- color: $color;
122
- display: inline-block;
123
- font-size: $textsize;
124
- font-weight: bold;
125
- @include linear-gradient ($base-color, $stop-gradient);
126
- padding: $padding;
127
- text-decoration: none;
128
- text-shadow: 0 1px 0 $text-shadow;
129
- background-clip: padding-box;
130
-
131
- &:hover:not(:disabled) {
132
- $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
133
- $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
134
- $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
135
-
136
- @if $grayscale == true {
137
- $base-color-hover: grayscale($base-color-hover);
138
- $inset-shadow-hover: grayscale($inset-shadow-hover);
139
- $stop-gradient-hover: grayscale($stop-gradient-hover);
140
- }
141
-
142
- box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
143
- cursor: pointer;
144
- @include linear-gradient ($base-color-hover, $stop-gradient-hover);
145
- }
146
-
147
- &:active:not(:disabled),
148
- &:focus:not(:disabled) {
149
- $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
150
- $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
151
-
152
- @if $grayscale == true {
153
- $border-active: grayscale($border-active);
154
- $inset-shadow-active: grayscale($inset-shadow-active);
155
- }
156
-
157
- border: 1px solid $border-active;
158
- box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active;
159
- }
160
-}
161
-
162
-
163
-// Shiny Button
164
-//************************************************************************//
165
-@mixin shiny($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
166
- $color: hsl(0, 0, 100%);
167
- $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
168
- $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
169
- $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
170
- $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12);
171
- $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33);
172
- $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
173
- $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
174
-
175
- @if is-light($base-color) {
176
- $color: hsl(0, 0, 20%);
177
- $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
178
- }
179
-
180
- @if $grayscale == true {
181
- $border: grayscale($border);
182
- $border-bottom: grayscale($border-bottom);
183
- $fourth-stop: grayscale($fourth-stop);
184
- $inset-shadow: grayscale($inset-shadow);
185
- $second-stop: grayscale($second-stop);
186
- $text-shadow: grayscale($text-shadow);
187
- $third-stop: grayscale($third-stop);
188
- }
189
-
190
- border: 1px solid $border;
191
- border-bottom: 1px solid $border-bottom;
192
- border-radius: 5px;
193
- box-shadow: inset 0 1px 0 0 $inset-shadow;
194
- color: $color;
195
- display: inline-block;
196
- font-size: $textsize;
197
- font-weight: bold;
198
- @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
199
- padding: $padding;
200
- text-align: center;
201
- text-decoration: none;
202
- text-shadow: 0 -1px 1px $text-shadow;
203
-
204
- &:hover:not(:disabled) {
205
- $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
206
- $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
207
- $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
208
- $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
209
-
210
- @if $grayscale == true {
211
- $first-stop-hover: grayscale($first-stop-hover);
212
- $second-stop-hover: grayscale($second-stop-hover);
213
- $third-stop-hover: grayscale($third-stop-hover);
214
- $fourth-stop-hover: grayscale($fourth-stop-hover);
215
- }
216
-
217
- cursor: pointer;
218
- @include linear-gradient(top, $first-stop-hover 0%,
219
- $second-stop-hover 50%,
220
- $third-stop-hover 50%,
221
- $fourth-stop-hover 100%);
222
- }
223
-
224
- &:active:not(:disabled),
225
- &:focus:not(:disabled) {
226
- $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
227
-
228
- @if $grayscale == true {
229
- $inset-shadow-active: grayscale($inset-shadow-active);
230
- }
231
-
232
- box-shadow: inset 0 0 20px 0 $inset-shadow-active;
233
- }
234
-}
235
-
236
-
237
-// Pill Button
238
-//************************************************************************//
239
-@mixin pill($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
240
- $color: hsl(0, 0, 100%);
241
- $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
242
- $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
243
- $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
244
- $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%);
245
- $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
246
- $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
247
-
248
- @if is-light($base-color) {
249
- $color: hsl(0, 0, 20%);
250
- $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
251
- }
252
-
253
- @if $grayscale == true {
254
- $border-bottom: grayscale($border-bottom);
255
- $border-sides: grayscale($border-sides);
256
- $border-top: grayscale($border-top);
257
- $inset-shadow: grayscale($inset-shadow);
258
- $stop-gradient: grayscale($stop-gradient);
259
- $text-shadow: grayscale($text-shadow);
260
- }
261
-
262
- border: 1px solid $border-top;
263
- border-color: $border-top $border-sides $border-bottom;
264
- border-radius: 16px;
265
- box-shadow: inset 0 1px 0 0 $inset-shadow;
266
- color: $color;
267
- display: inline-block;
268
- font-size: $textsize;
269
- font-weight: normal;
270
- line-height: 1;
271
- @include linear-gradient ($base-color, $stop-gradient);
272
- padding: $padding;
273
- text-align: center;
274
- text-decoration: none;
275
- text-shadow: 0 -1px 1px $text-shadow;
276
- background-clip: padding-box;
277
-
278
- &:hover:not(:disabled) {
279
- $base-color-hover: adjust-color($base-color, $lightness: -4.5%);
280
- $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
281
- $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
282
- $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%);
283
- $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%);
284
- $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%);
285
- $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);
286
-
287
- @if $grayscale == true {
288
- $base-color-hover: grayscale($base-color-hover);
289
- $border-bottom: grayscale($border-bottom);
290
- $border-sides: grayscale($border-sides);
291
- $border-top: grayscale($border-top);
292
- $inset-shadow-hover: grayscale($inset-shadow-hover);
293
- $stop-gradient-hover: grayscale($stop-gradient-hover);
294
- $text-shadow-hover: grayscale($text-shadow-hover);
295
- }
296
-
297
- border: 1px solid $border-top;
298
- border-color: $border-top $border-sides $border-bottom;
299
- box-shadow: inset 0 1px 0 0 $inset-shadow-hover;
300
- cursor: pointer;
301
- @include linear-gradient ($base-color-hover, $stop-gradient-hover);
302
- text-shadow: 0 -1px 1px $text-shadow-hover;
303
- background-clip: padding-box;
304
- }
305
-
306
- &:active:not(:disabled),
307
- &:focus:not(:disabled) {
308
- $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
309
- $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
310
- $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
311
- $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%);
312
- $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%);
313
-
314
- @if $grayscale == true {
315
- $active-color: grayscale($active-color);
316
- $border-active: grayscale($border-active);
317
- $border-bottom-active: grayscale($border-bottom-active);
318
- $inset-shadow-active: grayscale($inset-shadow-active);
319
- $text-shadow-active: grayscale($text-shadow-active);
320
- }
321
-
322
- background: $active-color;
323
- border: 1px solid $border-active;
324
- border-bottom: 1px solid $border-bottom-active;
325
- box-shadow: inset 0 0 6px 3px $inset-shadow-active;
326
- text-shadow: 0 -1px 1px $text-shadow-active;
327
- }
328
-}
329
-
330
-
331
-
332
-// Flat Button
333
-//************************************************************************//
334
-@mixin flat($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
335
- $color: hsl(0, 0, 100%);
336
-
337
- @if is-light($base-color) {
338
- $color: hsl(0, 0, 20%);
339
- }
340
-
341
- background-color: $base-color;
342
- border-radius: 3px;
343
- border: none;
344
- color: $color;
345
- display: inline-block;
346
- font-size: inherit;
347
- font-weight: bold;
348
- padding: 7px 18px;
349
- text-decoration: none;
350
- background-clip: padding-box;
351
-
352
- &:hover:not(:disabled){
353
- $base-color-hover: adjust-color($base-color, $saturation: 4%, $lightness: 5%);
354
-
355
- @if $grayscale == true {
356
- $base-color-hover: grayscale($base-color-hover);
357
- }
358
-
359
- background-color: $base-color-hover;
360
- cursor: pointer;
361
- }
362
-
363
- &:active:not(:disabled),
364
- &:focus:not(:disabled) {
365
- $base-color-active: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
366
-
367
- @if $grayscale == true {
368
- $base-color-active: grayscale($base-color-active);
369
- }
370
-
371
- background-color: $base-color-active;
372
- cursor: pointer;
373
- }
374
-}
docs/_css/bourbon/addons/_clearfix.scss
deleted
-23
@@ -1,23 +0,0 @@
1
-// Modern micro clearfix provides an easy way to contain floats without adding additional markup.
2
-//
3
-// Example usage:
4
-//
5
-// // Contain all floats within .wrapper
6
-// .wrapper {
7
-// @include clearfix;
8
-// .content,
9
-// .sidebar {
10
-// float : left;
11
-// }
12
-// }
13
-
14
-@mixin clearfix {
15
- &:after {
16
- content:"";
17
- display:table;
18
- clear:both;
19
- }
20
-}
21
-
22
-// Acknowledgements
23
-// Beat *that* clearfix: [Thierry Koblentz](http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php)
docs/_css/bourbon/addons/_directional-values.scss
deleted
-111
@@ -1,111 +0,0 @@
1
-// directional-property mixins are shorthands
2
-// for writing properties like the following
3
-//
4
-// @include margin(null 0 10px);
5
-// ------
6
-// margin-right: 0;
7
-// margin-bottom: 10px;
8
-// margin-left: 0;
9
-//
10
-// - or -
11
-//
12
-// @include border-style(dotted null);
13
-// ------
14
-// border-top-style: dotted;
15
-// border-bottom-style: dotted;
16
-//
17
-// ------
18
-//
19
-// Note: You can also use false instead of null
20
-
21
-@function collapse-directionals($vals) {
22
- $output: null;
23
-
24
- $A: nth( $vals, 1 );
25
- $B: if( length($vals) < 2, $A, nth($vals, 2));
26
- $C: if( length($vals) < 3, $A, nth($vals, 3));
27
- $D: if( length($vals) < 2, $A, nth($vals, if( length($vals) < 4, 2, 4) ));
28
-
29
- @if $A == 0 { $A: 0 }
30
- @if $B == 0 { $B: 0 }
31
- @if $C == 0 { $C: 0 }
32
- @if $D == 0 { $D: 0 }
33
-
34
- @if $A == $B and $A == $C and $A == $D { $output: $A }
35
- @else if $A == $C and $B == $D { $output: $A $B }
36
- @else if $B == $D { $output: $A $B $C }
37
- @else { $output: $A $B $C $D }
38
-
39
- @return $output;
40
-}
41
-
42
-@function contains-falsy($list) {
43
- @each $item in $list {
44
- @if not $item {
45
- @return true;
46
- }
47
- }
48
-
49
- @return false;
50
-}
51
-
52
-@mixin directional-property($pre, $suf, $vals) {
53
- // Property Names
54
- $top: $pre + "-top" + if($suf, "-#{$suf}", "");
55
- $bottom: $pre + "-bottom" + if($suf, "-#{$suf}", "");
56
- $left: $pre + "-left" + if($suf, "-#{$suf}", "");
57
- $right: $pre + "-right" + if($suf, "-#{$suf}", "");
58
- $all: $pre + if($suf, "-#{$suf}", "");
59
-
60
- $vals: collapse-directionals($vals);
61
-
62
- @if contains-falsy($vals) {
63
- @if nth($vals, 1) { #{$top}: nth($vals, 1); }
64
-
65
- @if length($vals) == 1 {
66
- @if nth($vals, 1) { #{$right}: nth($vals, 1); }
67
- } @else {
68
- @if nth($vals, 2) { #{$right}: nth($vals, 2); }
69
- }
70
-
71
- // prop: top/bottom right/left
72
- @if length($vals) == 2 {
73
- @if nth($vals, 1) { #{$bottom}: nth($vals, 1); }
74
- @if nth($vals, 2) { #{$left}: nth($vals, 2); }
75
-
76
- // prop: top right/left bottom
77
- } @else if length($vals) == 3 {
78
- @if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
79
- @if nth($vals, 2) { #{$left}: nth($vals, 2); }
80
-
81
- // prop: top right bottom left
82
- } @else if length($vals) == 4 {
83
- @if nth($vals, 3) { #{$bottom}: nth($vals, 3); }
84
- @if nth($vals, 4) { #{$left}: nth($vals, 4); }
85
- }
86
-
87
- // prop: top/right/bottom/left
88
- } @else {
89
- #{$all}: $vals;
90
- }
91
-}
92
-
93
-@mixin margin($vals...) {
94
- @include directional-property(margin, false, $vals...);
95
-}
96
-
97
-@mixin padding($vals...) {
98
- @include directional-property(padding, false, $vals...);
99
-}
100
-
101
-@mixin border-style($vals...) {
102
- @include directional-property(border, style, $vals...);
103
-}
104
-
105
-@mixin border-color($vals...) {
106
- @include directional-property(border, color, $vals...);
107
-}
108
-
109
-@mixin border-width($vals...) {
110
- @include directional-property(border, width, $vals...);
111
-}
docs/_css/bourbon/addons/_ellipsis.scss
deleted
-7
@@ -1,7 +0,0 @@
1
-@mixin ellipsis($width: 100%) {
2
- display: inline-block;
3
- max-width: $width;
4
- overflow: hidden;
5
- text-overflow: ellipsis;
6
- white-space: nowrap;
7
-}
docs/_css/bourbon/addons/_font-family.scss
deleted
-5
@@ -1,5 +0,0 @@
1
-$georgia: Georgia, Cambria, "Times New Roman", Times, serif;
2
-$helvetica: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
3
-$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
4
-$monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
5
-$verdana: Verdana, Geneva, sans-serif;
docs/_css/bourbon/addons/_hide-text.scss
deleted
-10
@@ -1,10 +0,0 @@
1
-@mixin hide-text {
2
- overflow: hidden;
3
-
4
- &:before {
5
- content: "";
6
- display: block;
7
- width: 0;
8
- height: 100%;
9
- }
10
-}
docs/_css/bourbon/addons/_html5-input-types.scss
deleted
-86
@@ -1,86 +0,0 @@
1
-//************************************************************************//
2
-// Generate a variable ($all-text-inputs) with a list of all html5
3
-// input types that have a text-based input, excluding textarea.
4
-// http://diveintohtml5.org/forms.html
5
-//************************************************************************//
6
-$inputs-list: 'input[type="email"]',
7
- 'input[type="number"]',
8
- 'input[type="password"]',
9
- 'input[type="search"]',
10
- 'input[type="tel"]',
11
- 'input[type="text"]',
12
- 'input[type="url"]',
13
-
14
- // Webkit & Gecko may change the display of these in the future
15
- 'input[type="color"]',
16
- 'input[type="date"]',
17
- 'input[type="datetime"]',
18
- 'input[type="datetime-local"]',
19
- 'input[type="month"]',
20
- 'input[type="time"]',
21
- 'input[type="week"]';
22
-
23
-// Bare inputs
24
-//************************************************************************//
25
-$all-text-inputs: assign-inputs($inputs-list);
26
-
27
-// Hover Pseudo-class
28
-//************************************************************************//
29
-$all-text-inputs-hover: assign-inputs($inputs-list, hover);
30
-
31
-// Focus Pseudo-class
32
-//************************************************************************//
33
-$all-text-inputs-focus: assign-inputs($inputs-list, focus);
34
-
35
-
36
-
37
-// You must use interpolation on the variable:
38
-// #{$all-text-inputs}
39
-// #{$all-text-inputs-hover}
40
-// #{$all-text-inputs-focus}
41
-
42
-// Example
43
-//************************************************************************//
44
-// #{$all-text-inputs}, textarea {
45
-// border: 1px solid red;
46
-// }
47
-
48
-
49
-
50
-//************************************************************************//
51
-// Generate a variable ($all-button-inputs) with a list of all html5
52
-// input types that have a button-based input, excluding button.
53
-//************************************************************************//
54
-$inputs-button-list: 'input[type="button"]',
55
- 'input[type="reset"]',
56
- 'input[type="submit"]';
57
-
58
-// Bare inputs
59
-//************************************************************************//
60
-$all-button-inputs: assign-inputs($inputs-button-list);
61
-
62
-// Hover Pseudo-class
63
-//************************************************************************//
64
-$all-button-inputs-hover: assign-inputs($inputs-button-list, hover);
65
-
66
-// Focus Pseudo-class
67
-//************************************************************************//
68
-$all-button-inputs-focus: assign-inputs($inputs-button-list, focus);
69
-
70
-// Active Pseudo-class
71
-//************************************************************************//
72
-$all-button-inputs-active: assign-inputs($inputs-button-list, active);
73
-
74
-
75
-
76
-// You must use interpolation on the variable:
77
-// #{$all-button-inputs}
78
-// #{$all-button-inputs-hover}
79
-// #{$all-button-inputs-focus}
80
-// #{$all-button-inputs-active}
81
-
82
-// Example
83
-//************************************************************************//
84
-// #{$all-button-inputs}, button {
85
-// border: 1px solid red;
86
-// }
docs/_css/bourbon/addons/_position.scss
deleted
-32
@@ -1,32 +0,0 @@
1
-@mixin position ($position: relative, $coordinates: null null null null) {
2
-
3
- @if type-of($position) == list {
4
- $coordinates: $position;
5
- $position: relative;
6
- }
7
-
8
- $coordinates: unpack($coordinates);
9
-
10
- $top: nth($coordinates, 1);
11
- $right: nth($coordinates, 2);
12
- $bottom: nth($coordinates, 3);
13
- $left: nth($coordinates, 4);
14
-
15
- position: $position;
16
-
17
- @if ($top and $top == auto) or (type-of($top) == number) {
18
- top: $top;
19
- }
20
-
21
- @if ($right and $right == auto) or (type-of($right) == number) {
22
- right: $right;
23
- }
24
-
25
- @if ($bottom and $bottom == auto) or (type-of($bottom) == number) {
26
- bottom: $bottom;
27
- }
28
-
29
- @if ($left and $left == auto) or (type-of($left) == number) {
30
- left: $left;
31
- }
32
-}
docs/_css/bourbon/addons/_prefixer.scss
deleted
-45
@@ -1,45 +0,0 @@
1
-//************************************************************************//
2
-// Example: @include prefixer(border-radius, $radii, webkit ms spec);
3
-//************************************************************************//
4
-// Variables located in /settings/_prefixer.scss
5
-
6
-@mixin prefixer ($property, $value, $prefixes) {
7
- @each $prefix in $prefixes {
8
- @if $prefix == webkit {
9
- @if $prefix-for-webkit {
10
- -webkit-#{$property}: $value;
11
- }
12
- }
13
- @else if $prefix == moz {
14
- @if $prefix-for-mozilla {
15
- -moz-#{$property}: $value;
16
- }
17
- }
18
- @else if $prefix == ms {
19
- @if $prefix-for-microsoft {
20
- -ms-#{$property}: $value;
21
- }
22
- }
23
- @else if $prefix == o {
24
- @if $prefix-for-opera {
25
- -o-#{$property}: $value;
26
- }
27
- }
28
- @else if $prefix == spec {
29
- @if $prefix-for-spec {
30
- #{$property}: $value;
31
- }
32
- }
33
- @else {
34
- @warn "Unrecognized prefix: #{$prefix}";
35
- }
36
- }
37
-}
38
-
39
-@mixin disable-prefix-for-all() {
40
- $prefix-for-webkit: false !global;
41
- $prefix-for-mozilla: false !global;
42
- $prefix-for-microsoft: false !global;
43
- $prefix-for-opera: false !global;
44
- $prefix-for-spec: false !global;
45
-}
docs/_css/bourbon/addons/_retina-image.scss
deleted
-31
@@ -1,31 +0,0 @@
1
-@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) {
2
- @if $asset-pipeline {
3
- background-image: image-url("#{$filename}.#{$extension}");
4
- }
5
- @else {
6
- background-image: url("#{$filename}.#{$extension}");
7
- }
8
-
9
- @include hidpi {
10
- @if $asset-pipeline {
11
- @if $retina-filename {
12
- background-image: image-url("#{$retina-filename}.#{$extension}");
13
- }
14
- @else {
15
- background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}");
16
- }
17
- }
18
-
19
- @else {
20
- @if $retina-filename {
21
- background-image: url("#{$retina-filename}.#{$extension}");
22
- }
23
- @else {
24
- background-image: url("#{$filename}#{$retina-suffix}.#{$extension}");
25
- }
26
- }
27
-
28
- background-size: $background-size;
29
-
30
- }
31
-}
docs/_css/bourbon/addons/_size.scss
deleted
-16
@@ -1,16 +0,0 @@
1
-@mixin size($size) {
2
- $height: nth($size, 1);
3
- $width: $height;
4
-
5
- @if length($size) > 1 {
6
- $height: nth($size, 2);
7
- }
8
-
9
- @if $height == auto or (type-of($height) == number and not unitless($height)) {
10
- height: $height;
11
- }
12
-
13
- @if $width == auto or (type-of($width) == number and not unitless($width)) {
14
- width: $width;
15
- }
16
-}
docs/_css/bourbon/addons/_timing-functions.scss
deleted
-32
@@ -1,32 +0,0 @@
1
-// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
2
-// Timing functions are the same as demo'ed here: http://jqueryui.com/resources/demos/effect/easing.html
3
-
4
-// EASE IN
5
-$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
6
-$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
7
-$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
8
-$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
9
-$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
10
-$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
11
-$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335);
12
-$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
13
-
14
-// EASE OUT
15
-$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
16
-$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
17
-$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
18
-$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
19
-$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
20
-$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
21
-$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
22
-$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);
23
-
24
-// EASE IN OUT
25
-$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
26
-$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
27
-$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
28
-$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
29
-$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
30
-$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
31
-$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);
32
-$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550);
docs/_css/bourbon/addons/_triangle.scss
deleted
-83
@@ -1,83 +0,0 @@
1
-@mixin triangle ($size, $color, $direction) {
2
- height: 0;
3
- width: 0;
4
-
5
- $width: nth($size, 1);
6
- $height: nth($size, length($size));
7
-
8
- $foreground-color: nth($color, 1);
9
- $background-color: if(length($color) == 2, nth($color, 2), transparent);
10
-
11
- @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
12
-
13
- $width: $width / 2;
14
- $height: if(length($size) > 1, $height, $height/2);
15
-
16
- @if $direction == up {
17
- border-left: $width solid $background-color;
18
- border-right: $width solid $background-color;
19
- border-bottom: $height solid $foreground-color;
20
-
21
- } @else if $direction == right {
22
- border-top: $width solid $background-color;
23
- border-bottom: $width solid $background-color;
24
- border-left: $height solid $foreground-color;
25
-
26
- } @else if $direction == down {
27
- border-left: $width solid $background-color;
28
- border-right: $width solid $background-color;
29
- border-top: $height solid $foreground-color;
30
-
31
- } @else if $direction == left {
32
- border-top: $width solid $background-color;
33
- border-bottom: $width solid $background-color;
34
- border-right: $height solid $foreground-color;
35
- }
36
- }
37
-
38
- @else if ($direction == up-right) or ($direction == up-left) {
39
- border-top: $height solid $foreground-color;
40
-
41
- @if $direction == up-right {
42
- border-left: $width solid $background-color;
43
-
44
- } @else if $direction == up-left {
45
- border-right: $width solid $background-color;
46
- }
47
- }
48
-
49
- @else if ($direction == down-right) or ($direction == down-left) {
50
- border-bottom: $height solid $foreground-color;
51
-
52
- @if $direction == down-right {
53
- border-left: $width solid $background-color;
54
-
55
- } @else if $direction == down-left {
56
- border-right: $width solid $background-color;
57
- }
58
- }
59
-
60
- @else if ($direction == inset-up) {
61
- border-width: $height $width;
62
- border-style: solid;
63
- border-color: $background-color $background-color $foreground-color;
64
- }
65
-
66
- @else if ($direction == inset-down) {
67
- border-width: $height $width;
68
- border-style: solid;
69
- border-color: $foreground-color $background-color $background-color;
70
- }
71
-
72
- @else if ($direction == inset-right) {
73
- border-width: $width $height;
74
- border-style: solid;
75
- border-color: $background-color $background-color $background-color $foreground-color;
76
- }
77
-
78
- @else if ($direction == inset-left) {
79
- border-width: $width $height;
80
- border-style: solid;
81
- border-color: $background-color $foreground-color $background-color $background-color;
82
- }
83
-}
docs/_css/bourbon/addons/_word-wrap.scss
deleted
-8
@@ -1,8 +0,0 @@
1
-@mixin word-wrap($wrap: break-word) {
2
- word-wrap: $wrap;
3
-
4
- @if $wrap == break-word {
5
- overflow-wrap: break-word;
6
- word-break: break-all;
7
- }
8
-}
docs/_css/bourbon/css3/_animation.scss
deleted
-52
@@ -1,52 +0,0 @@
1
-// http://www.w3.org/TR/css3-animations/#the-animation-name-property-
2
-// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
3
-
4
-// Official animation shorthand property.
5
-@mixin animation ($animations...) {
6
- @include prefixer(animation, $animations, webkit moz spec);
7
-}
8
-
9
-// Individual Animation Properties
10
-@mixin animation-name ($names...) {
11
- @include prefixer(animation-name, $names, webkit moz spec);
12
-}
13
-
14
-
15
-@mixin animation-duration ($times...) {
16
- @include prefixer(animation-duration, $times, webkit moz spec);
17
-}
18
-
19
-
20
-@mixin animation-timing-function ($motions...) {
21
-// ease | linear | ease-in | ease-out | ease-in-out
22
- @include prefixer(animation-timing-function, $motions, webkit moz spec);
23
-}
24
-
25
-
26
-@mixin animation-iteration-count ($values...) {
27
-// infinite | <number>
28
- @include prefixer(animation-iteration-count, $values, webkit moz spec);
29
-}
30
-
31
-
32
-@mixin animation-direction ($directions...) {
33
-// normal | alternate
34
- @include prefixer(animation-direction, $directions, webkit moz spec);
35
-}
36
-
37
-
38
-@mixin animation-play-state ($states...) {
39
-// running | paused
40
- @include prefixer(animation-play-state, $states, webkit moz spec);
41
-}
42
-
43
-
44
-@mixin animation-delay ($times...) {
45
- @include prefixer(animation-delay, $times, webkit moz spec);
46
-}
47
-
48
-
49
-@mixin animation-fill-mode ($modes...) {
50
-// none | forwards | backwards | both
51
- @include prefixer(animation-fill-mode, $modes, webkit moz spec);
52
-}
docs/_css/bourbon/css3/_appearance.scss
deleted
-3
@@ -1,3 +0,0 @@
1
-@mixin appearance ($value) {
2
- @include prefixer(appearance, $value, webkit moz ms o spec);
3
-}
docs/_css/bourbon/css3/_backface-visibility.scss
deleted
-6
@@ -1,6 +0,0 @@
1
-//************************************************************************//
2
-// Backface-visibility mixin
3
-//************************************************************************//
4
-@mixin backface-visibility($visibility) {
5
- @include prefixer(backface-visibility, $visibility, webkit spec);
6
-}
docs/_css/bourbon/css3/_background-image.scss
deleted
-42
@@ -1,42 +0,0 @@
1
-//************************************************************************//
2
-// Background-image property for adding multiple background images with
3
-// gradients, or for stringing multiple gradients together.
4
-//************************************************************************//
5
-
6
-@mixin background-image($images...) {
7
- $webkit-images: ();
8
- $spec-images: ();
9
-
10
- @each $image in $images {
11
- $webkit-image: ();
12
- $spec-image: ();
13
-
14
- @if (type-of($image) == string) {
15
- $url-str: str-slice($image, 0, 3);
16
- $gradient-type: str-slice($image, 0, 6);
17
-
18
- @if $url-str == "url" {
19
- $webkit-image: $image;
20
- $spec-image: $image;
21
- }
22
-
23
- @else if $gradient-type == "linear" {
24
- $gradients: _linear-gradient-parser($image);
25
- $webkit-image: map-get($gradients, webkit-image);
26
- $spec-image: map-get($gradients, spec-image);
27
- }
28
-
29
- @else if $gradient-type == "radial" {
30
- $gradients: _radial-gradient-parser($image);
31
- $webkit-image: map-get($gradients, webkit-image);
32
- $spec-image: map-get($gradients, spec-image);
33
- }
34
- }
35
-
36
- $webkit-images: append($webkit-images, $webkit-image, comma);
37
- $spec-images: append($spec-images, $spec-image, comma);
38
- }
39
-
40
- background-image: $webkit-images;
41
- background-image: $spec-images;
42
-}
docs/_css/bourbon/css3/_background.scss
deleted
-55
@@ -1,55 +0,0 @@
1
-//************************************************************************//
2
-// Background property for adding multiple backgrounds using shorthand
3
-// notation.
4
-//************************************************************************//
5
-
6
-@mixin background($backgrounds...) {
7
- $webkit-backgrounds: ();
8
- $spec-backgrounds: ();
9
-
10
- @each $background in $backgrounds {
11
- $webkit-background: ();
12
- $spec-background: ();
13
- $background-type: type-of($background);
14
-
15
- @if $background-type == string or list {
16
- $background-str: if($background-type == list, nth($background, 1), $background);
17
-
18
- $url-str: str-slice($background-str, 0, 3);
19
- $gradient-type: str-slice($background-str, 0, 6);
20
-
21
- @if $url-str == "url" {
22
- $webkit-background: $background;
23
- $spec-background: $background;
24
- }
25
-
26
- @else if $gradient-type == "linear" {
27
- $gradients: _linear-gradient-parser("#{$background}");
28
- $webkit-background: map-get($gradients, webkit-image);
29
- $spec-background: map-get($gradients, spec-image);
30
- }
31
-
32
- @else if $gradient-type == "radial" {
33
- $gradients: _radial-gradient-parser("#{$background}");
34
- $webkit-background: map-get($gradients, webkit-image);
35
- $spec-background: map-get($gradients, spec-image);
36
- }
37
-
38
- @else {
39
- $webkit-background: $background;
40
- $spec-background: $background;
41
- }
42
- }
43
-
44
- @else {
45
- $webkit-background: $background;
46
- $spec-background: $background;
47
- }
48
-
49
- $webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma);
50
- $spec-backgrounds: append($spec-backgrounds, $spec-background, comma);
51
- }
52
-
53
- background: $webkit-backgrounds;
54
- background: $spec-backgrounds;
55
-}
docs/_css/bourbon/css3/_border-image.scss
deleted
-59
@@ -1,59 +0,0 @@
1
-@mixin border-image($borders...) {
2
- $webkit-borders: ();
3
- $spec-borders: ();
4
-
5
- @each $border in $borders {
6
- $webkit-border: ();
7
- $spec-border: ();
8
- $border-type: type-of($border);
9
-
10
- @if $border-type == string or list {
11
- $border-str: if($border-type == list, nth($border, 1), $border);
12
-
13
- $url-str: str-slice($border-str, 0, 3);
14
- $gradient-type: str-slice($border-str, 0, 6);
15
-
16
- @if $url-str == "url" {
17
- $webkit-border: $border;
18
- $spec-border: $border;
19
- }
20
-
21
- @else if $gradient-type == "linear" {
22
- $gradients: _linear-gradient-parser("#{$border}");
23
- $webkit-border: map-get($gradients, webkit-image);
24
- $spec-border: map-get($gradients, spec-image);
25
- }
26
-
27
- @else if $gradient-type == "radial" {
28
- $gradients: _radial-gradient-parser("#{$border}");
29
- $webkit-border: map-get($gradients, webkit-image);
30
- $spec-border: map-get($gradients, spec-image);
31
- }
32
-
33
- @else {
34
- $webkit-border: $border;
35
- $spec-border: $border;
36
- }
37
- }
38
-
39
- @else {
40
- $webkit-border: $border;
41
- $spec-border: $border;
42
- }
43
-
44
- $webkit-borders: append($webkit-borders, $webkit-border, comma);
45
- $spec-borders: append($spec-borders, $spec-border, comma);
46
- }
47
-
48
- -webkit-border-image: $webkit-borders;
49
- border-image: $spec-borders;
50
- border-style: solid;
51
-}
52
-
53
-//Examples:
54
-// @include border-image(url("image.png"));
55
-// @include border-image(url("image.png") 20 stretch);
56
-// @include border-image(linear-gradient(45deg, orange, yellow));
57
-// @include border-image(linear-gradient(45deg, orange, yellow) stretch);
58
-// @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round);
59
-// @include border-image(radial-gradient(top, cover, orange, yellow, orange));
docs/_css/bourbon/css3/_border-radius.scss
deleted
-22
@@ -1,22 +0,0 @@
1
-//************************************************************************//
2
-// Shorthand Border-radius mixins
3
-//************************************************************************//
4
-@mixin border-top-radius($radii) {
5
- @include prefixer(border-top-left-radius, $radii, spec);
6
- @include prefixer(border-top-right-radius, $radii, spec);
7
-}
8
-
9
-@mixin border-bottom-radius($radii) {
10
- @include prefixer(border-bottom-left-radius, $radii, spec);
11
- @include prefixer(border-bottom-right-radius, $radii, spec);
12
-}
13
-
14
-@mixin border-left-radius($radii) {
15
- @include prefixer(border-top-left-radius, $radii, spec);
16
- @include prefixer(border-bottom-left-radius, $radii, spec);
17
-}
18
-
19
-@mixin border-right-radius($radii) {
20
- @include prefixer(border-top-right-radius, $radii, spec);
21
- @include prefixer(border-bottom-right-radius, $radii, spec);
22
-}
docs/_css/bourbon/css3/_box-sizing.scss
deleted
-4
@@ -1,4 +0,0 @@
1
-@mixin box-sizing ($box) {
2
-// content-box | border-box | inherit
3
- @include prefixer(box-sizing, $box, webkit moz spec);
4
-}
docs/_css/bourbon/css3/_calc.scss
deleted
-4
@@ -1,4 +0,0 @@
1
-@mixin calc($property, $value) {
2
- #{$property}: -webkit-calc(#{$value});
3
- #{$property}: calc(#{$value});
4
-}
docs/_css/bourbon/css3/_columns.scss
deleted
-47
@@ -1,47 +0,0 @@
1
-@mixin columns($arg: auto) {
2
-// <column-count> || <column-width>
3
- @include prefixer(columns, $arg, webkit moz spec);
4
-}
5
-
6
-@mixin column-count($int: auto) {
7
-// auto || integer
8
- @include prefixer(column-count, $int, webkit moz spec);
9
-}
10
-
11
-@mixin column-gap($length: normal) {
12
-// normal || length
13
- @include prefixer(column-gap, $length, webkit moz spec);
14
-}
15
-
16
-@mixin column-fill($arg: auto) {
17
-// auto || length
18
- @include prefixer(column-fill, $arg, webkit moz spec);
19
-}
20
-
21
-@mixin column-rule($arg) {
22
-// <border-width> || <border-style> || <color>
23
- @include prefixer(column-rule, $arg, webkit moz spec);
24
-}
25
-
26
-@mixin column-rule-color($color) {
27
- @include prefixer(column-rule-color, $color, webkit moz spec);
28
-}
29
-
30
-@mixin column-rule-style($style: none) {
31
-// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
32
- @include prefixer(column-rule-style, $style, webkit moz spec);
33
-}
34
-
35
-@mixin column-rule-width ($width: none) {
36
- @include prefixer(column-rule-width, $width, webkit moz spec);
37
-}
38
-
39
-@mixin column-span($arg: none) {
40
-// none || all
41
- @include prefixer(column-span, $arg, webkit moz spec);
42
-}
43
-
44
-@mixin column-width($length: auto) {
45
-// auto || length
46
- @include prefixer(column-width, $length, webkit moz spec);
47
-}
docs/_css/bourbon/css3/_filter.scss
deleted
-5
@@ -1,5 +0,0 @@
1
-@mixin filter($function: none) {
2
- // <filter-function> [<filter-function]* | none
3
- @include prefixer(filter, $function, webkit spec);
4
-}
5
-
docs/_css/bourbon/css3/_flex-box.scss
deleted
-321
@@ -1,321 +0,0 @@
1
-// CSS3 Flexible Box Model and property defaults
2
-
3
-// Custom shorthand notation for flexbox
4
-@mixin box($orient: inline-axis, $pack: start, $align: stretch) {
5
- @include display-box;
6
- @include box-orient($orient);
7
- @include box-pack($pack);
8
- @include box-align($align);
9
-}
10
-
11
-@mixin display-box {
12
- display: -webkit-box;
13
- display: -moz-box;
14
- display: -ms-flexbox; // IE 10
15
- display: box;
16
-}
17
-
18
-@mixin box-orient($orient: inline-axis) {
19
-// horizontal|vertical|inline-axis|block-axis|inherit
20
- @include prefixer(box-orient, $orient, webkit moz spec);
21
-}
22
-
23
-@mixin box-pack($pack: start) {
24
-// start|end|center|justify
25
- @include prefixer(box-pack, $pack, webkit moz spec);
26
- -ms-flex-pack: $pack; // IE 10
27
-}
28
-
29
-@mixin box-align($align: stretch) {
30
-// start|end|center|baseline|stretch
31
- @include prefixer(box-align, $align, webkit moz spec);
32
- -ms-flex-align: $align; // IE 10
33
-}
34
-
35
-@mixin box-direction($direction: normal) {
36
-// normal|reverse|inherit
37
- @include prefixer(box-direction, $direction, webkit moz spec);
38
- -ms-flex-direction: $direction; // IE 10
39
-}
40
-
41
-@mixin box-lines($lines: single) {
42
-// single|multiple
43
- @include prefixer(box-lines, $lines, webkit moz spec);
44
-}
45
-
46
-@mixin box-ordinal-group($int: 1) {
47
- @include prefixer(box-ordinal-group, $int, webkit moz spec);
48
- -ms-flex-order: $int; // IE 10
49
-}
50
-
51
-@mixin box-flex($value: 0.0) {
52
- @include prefixer(box-flex, $value, webkit moz spec);
53
- -ms-flex: $value; // IE 10
54
-}
55
-
56
-@mixin box-flex-group($int: 1) {
57
- @include prefixer(box-flex-group, $int, webkit moz spec);
58
-}
59
-
60
-// CSS3 Flexible Box Model and property defaults
61
-// Unified attributes for 2009, 2011, and 2012 flavours.
62
-
63
-// 2009 - display (box | inline-box)
64
-// 2011 - display (flexbox | inline-flexbox)
65
-// 2012 - display (flex | inline-flex)
66
-@mixin display($value) {
67
-// flex | inline-flex
68
- @if $value == "flex" {
69
- // 2009
70
- display: -webkit-box;
71
- display: -moz-box;
72
- display: box;
73
-
74
- // 2012
75
- display: -webkit-flex;
76
- display: -moz-flex;
77
- display: -ms-flexbox; // 2011 (IE 10)
78
- display: flex;
79
- }
80
-
81
- @elseif $value == "inline-flex" {
82
- display: -webkit-inline-box;
83
- display: -moz-inline-box;
84
- display: inline-box;
85
-
86
- display: -webkit-inline-flex;
87
- display: -moz-inline-flex;
88
- display: -ms-inline-flexbox;
89
- display: inline-flex;
90
- }
91
-
92
- @else {
93
- display: $value;
94
- }
95
-}
96
-
97
-// 2009 - box-flex (integer)
98
-// 2011 - flex (decimal | width decimal)
99
-// 2012 - flex (integer integer width)
100
-@mixin flex($value) {
101
-
102
- // Grab flex-grow for older browsers.
103
- $flex-grow: nth($value, 1);
104
-
105
- // 2009
106
- @include prefixer(box-flex, $flex-grow, webkit moz spec);
107
-
108
- // 2011 (IE 10), 2012
109
- @include prefixer(flex, $value, webkit moz ms spec);
110
-}
111
-
112
-// 2009 - box-orient ( horizontal | vertical | inline-axis | block-axis)
113
-// - box-direction (normal | reverse)
114
-// 2011 - flex-direction (row | row-reverse | column | column-reverse)
115
-// 2012 - flex-direction (row | row-reverse | column | column-reverse)
116
-@mixin flex-direction($value: row) {
117
-
118
- // Alt values.
119
- $value-2009: $value;
120
- $value-2011: $value;
121
- $direction: "normal";
122
-
123
- @if $value == row {
124
- $value-2009: horizontal;
125
- }
126
-
127
- @elseif $value == "row-reverse" {
128
- $value-2009: horizontal;
129
- $direction: reverse;
130
- }
131
-
132
- @elseif $value == column {
133
- $value-2009: vertical;
134
- }
135
-
136
- @elseif $value == "column-reverse" {
137
- $value-2009: vertical;
138
- $direction: reverse;
139
- }
140
-
141
- // 2009
142
- @include prefixer(box-orient, $value-2009, webkit moz spec);
143
- @if $direction == "reverse" {
144
- @include prefixer(box-direction, $direction, webkit moz spec);
145
- }
146
-
147
- // 2012
148
- @include prefixer(flex-direction, $value, webkit moz spec);
149
-
150
- // 2011 (IE 10)
151
- -ms-flex-direction: $value;
152
-}
153
-
154
-// 2009 - box-lines (single | multiple)
155
-// 2011 - flex-wrap (nowrap | wrap | wrap-reverse)
156
-// 2012 - flex-wrap (nowrap | wrap | wrap-reverse)
157
-@mixin flex-wrap($value: nowrap) {
158
-
159
- // Alt values.
160
- $alt-value: $value;
161
- @if $value == nowrap {
162
- $alt-value: single;
163
- }
164
-
165
- @elseif $value == wrap {
166
- $alt-value: multiple;
167
- }
168
-
169
- @elseif $value == "wrap-reverse" {
170
- $alt-value: multiple;
171
- }
172
-
173
- @include prefixer(box-lines, $alt-value, webkit moz spec);
174
- @include prefixer(flex-wrap, $value, webkit moz ms spec);
175
-}
176
-
177
-// 2009 - TODO: parse values into flex-direction/flex-wrap
178
-// 2011 - TODO: parse values into flex-direction/flex-wrap
179
-// 2012 - flex-flow (flex-direction || flex-wrap)
180
-@mixin flex-flow($value) {
181
- @include prefixer(flex-flow, $value, webkit moz spec);
182
-}
183
-
184
-// 2009 - box-ordinal-group (integer)
185
-// 2011 - flex-order (integer)
186
-// 2012 - order (integer)
187
-@mixin order($int: 0) {
188
- // 2009
189
- @include prefixer(box-ordinal-group, $int, webkit moz spec);
190
-
191
- // 2012
192
- @include prefixer(order, $int, webkit moz spec);
193
-
194
- // 2011 (IE 10)
195
- -ms-flex-order: $int;
196
-}
197
-
198
-// 2012 - flex-grow (number)
199
-@mixin flex-grow($number: 0) {
200
- @include prefixer(flex-grow, $number, webkit moz spec);
201
- -ms-flex-positive: $number;
202
-}
203
-
204
-// 2012 - flex-shrink (number)
205
-@mixin flex-shrink($number: 1) {
206
- @include prefixer(flex-shrink, $number, webkit moz spec);
207
- -ms-flex-negative: $number;
208
-}
209
-
210
-// 2012 - flex-basis (number)
211
-@mixin flex-basis($width: auto) {
212
- @include prefixer(flex-basis, $width, webkit moz spec);
213
- -ms-flex-preferred-size: $width;
214
-}
215
-
216
-// 2009 - box-pack (start | end | center | justify)
217
-// 2011 - flex-pack (start | end | center | justify)
218
-// 2012 - justify-content (flex-start | flex-end | center | space-between | space-around)
219
-@mixin justify-content ($value: flex-start) {
220
-
221
- // Alt values.
222
- $alt-value: $value;
223
- @if $value == "flex-start" {
224
- $alt-value: start;
225
- }
226
-
227
- @elseif $value == "flex-end" {
228
- $alt-value: end;
229
- }
230
-
231
- @elseif $value == "space-between" {
232
- $alt-value: justify;
233
- }
234
-
235
- @elseif $value == "space-around" {
236
- $alt-value: center;
237
- }
238
-
239
- // 2009
240
- @include prefixer(box-pack, $alt-value, webkit moz spec);
241
-
242
- // 2012
243
- @include prefixer(justify-content, $value, webkit moz ms o spec);
244
-
245
- // 2011 (IE 10)
246
- -ms-flex-pack: $alt-value;
247
-}
248
-
249
-// 2009 - box-align (start | end | center | baseline | stretch)
250
-// 2011 - flex-align (start | end | center | baseline | stretch)
251
-// 2012 - align-items (flex-start | flex-end | center | baseline | stretch)
252
-@mixin align-items($value: stretch) {
253
-
254
- $alt-value: $value;
255
-
256
- @if $value == "flex-start" {
257
- $alt-value: start;
258
- }
259
-
260
- @elseif $value == "flex-end" {
261
- $alt-value: end;
262
- }
263
-
264
- // 2009
265
- @include prefixer(box-align, $alt-value, webkit moz spec);
266
-
267
- // 2012
268
- @include prefixer(align-items, $value, webkit moz ms o spec);
269
-
270
- // 2011 (IE 10)
271
- -ms-flex-align: $alt-value;
272
-}
273
-
274
-// 2011 - flex-item-align (auto | start | end | center | baseline | stretch)
275
-// 2012 - align-self (auto | flex-start | flex-end | center | baseline | stretch)
276
-@mixin align-self($value: auto) {
277
-
278
- $value-2011: $value;
279
- @if $value == "flex-start" {
280
- $value-2011: start;
281
- }
282
-
283
- @elseif $value == "flex-end" {
284
- $value-2011: end;
285
- }
286
-
287
- // 2012
288
- @include prefixer(align-self, $value, webkit moz spec);
289
-
290
- // 2011 (IE 10)
291
- -ms-flex-item-align: $value-2011;
292
-}
293
-
294
-// 2011 - flex-line-pack (start | end | center | justify | distribute | stretch)
295
-// 2012 - align-content (flex-start | flex-end | center | space-between | space-around | stretch)
296
-@mixin align-content($value: stretch) {
297
-
298
- $value-2011: $value;
299
- @if $value == "flex-start" {
300
- $value-2011: start;
301
- }
302
-
303
- @elseif $value == "flex-end" {
304
- $value-2011: end;
305
- }
306
-
307
- @elseif $value == "space-between" {
308
- $value-2011: justify;
309
- }
310
-
311
- @elseif $value == "space-around" {
312
- $value-2011: distribute;
313
- }
314
-
315
- // 2012
316
- @include prefixer(align-content, $value, webkit moz spec);
317
-
318
- // 2011 (IE 10)
319
- -ms-flex-line-pack: $value-2011;
320
-}
321
-
docs/_css/bourbon/css3/_font-face.scss
deleted
-23
@@ -1,23 +0,0 @@
1
-// Order of the includes matters, and it is: normal, bold, italic, bold+italic.
2
-
3
-@mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: $asset-pipeline) {
4
- @font-face {
5
- font-family: $font-family;
6
- font-weight: $weight;
7
- font-style: $style;
8
-
9
- @if $asset-pipeline == true {
10
- src: font-url('#{$file-path}.eot');
11
- src: font-url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
12
- font-url('#{$file-path}.woff') format('woff'),
13
- font-url('#{$file-path}.ttf') format('truetype'),
14
- font-url('#{$file-path}.svg##{$font-family}') format('svg');
15
- } @else {
16
- src: url('#{$file-path}.eot');
17
- src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
18
- url('#{$file-path}.woff') format('woff'),
19
- url('#{$file-path}.ttf') format('truetype'),
20
- url('#{$file-path}.svg##{$font-family}') format('svg');
21
- }
22
- }
23
-}
docs/_css/bourbon/css3/_font-feature-settings.scss
deleted
-10
@@ -1,10 +0,0 @@
1
-// Font feature settings mixin and property default.
2
-// Examples: @include font-feature-settings("liga");
3
-// @include font-feature-settings("lnum" false);
4
-// @include font-feature-settings("pnum" 1, "kern" 0);
5
-// @include font-feature-settings("ss01", "ss02");
6
-
7
-@mixin font-feature-settings($settings...) {
8
- @if length($settings) == 0 { $settings: none; }
9
- @include prefixer(font-feature-settings, $settings, webkit moz ms spec);
10
-}
\ No newline at end of file
docs/_css/bourbon/css3/_hidpi-media-query.scss
deleted
-10
@@ -1,10 +0,0 @@
1
-// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
2
-@mixin hidpi($ratio: 1.3) {
3
- @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
4
- only screen and (min--moz-device-pixel-ratio: $ratio),
5
- only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
6
- only screen and (min-resolution: #{round($ratio*96)}dpi),
7
- only screen and (min-resolution: #{$ratio}dppx) {
8
- @content;
9
- }
10
-}
docs/_css/bourbon/css3/_hyphens.scss
deleted
-4
@@ -1,4 +0,0 @@
1
-@mixin hyphens($hyphenation: none) {
2
-// none | manual | auto
3
- @include prefixer(hyphens, $hyphenation, webkit moz ms spec);
4
-}
\ No newline at end of file
docs/_css/bourbon/css3/_image-rendering.scss
deleted
-14
@@ -1,14 +0,0 @@
1
-@mixin image-rendering ($mode:auto) {
2
-
3
- @if ($mode == crisp-edges) {
4
- -ms-interpolation-mode: nearest-neighbor; // IE8+
5
- image-rendering: -moz-crisp-edges;
6
- image-rendering: -o-crisp-edges;
7
- image-rendering: -webkit-optimize-contrast;
8
- image-rendering: crisp-edges;
9
- }
10
-
11
- @else {
12
- image-rendering: $mode;
13
- }
14
-}
docs/_css/bourbon/css3/_keyframes.scss
deleted
-35
@@ -1,35 +0,0 @@
1
-// Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content
2
-@mixin keyframes($name) {
3
- $original-prefix-for-webkit: $prefix-for-webkit;
4
- $original-prefix-for-mozilla: $prefix-for-mozilla;
5
- $original-prefix-for-microsoft: $prefix-for-microsoft;
6
- $original-prefix-for-opera: $prefix-for-opera;
7
- $original-prefix-for-spec: $prefix-for-spec;
8
-
9
- @if $original-prefix-for-webkit {
10
- @include disable-prefix-for-all();
11
- $prefix-for-webkit: true !global;
12
- @-webkit-keyframes #{$name} {
13
- @content;
14
- }
15
- }
16
- @if $original-prefix-for-mozilla {
17
- @include disable-prefix-for-all();
18
- $prefix-for-mozilla: true !global;
19
- @-moz-keyframes #{$name} {
20
- @content;
21
- }
22
- }
23
-
24
- $prefix-for-webkit: $original-prefix-for-webkit !global;
25
- $prefix-for-mozilla: $original-prefix-for-mozilla !global;
26
- $prefix-for-microsoft: $original-prefix-for-microsoft !global;
27
- $prefix-for-opera: $original-prefix-for-opera !global;
28
- $prefix-for-spec: $original-prefix-for-spec !global;
29
-
30
- @if $original-prefix-for-spec {
31
- @keyframes #{$name} {
32
- @content;
33
- }
34
- }
35
-}
docs/_css/bourbon/css3/_linear-gradient.scss
deleted
-38
@@ -1,38 +0,0 @@
1
-@mixin linear-gradient($pos, $G1, $G2: null,
2
- $G3: null, $G4: null,
3
- $G5: null, $G6: null,
4
- $G7: null, $G8: null,
5
- $G9: null, $G10: null,
6
- $fallback: null) {
7
- // Detect what type of value exists in $pos
8
- $pos-type: type-of(nth($pos, 1));
9
- $pos-spec: null;
10
- $pos-degree: null;
11
-
12
- // If $pos is missing from mixin, reassign vars and add default position
13
- @if ($pos-type == color) or (nth($pos, 1) == "transparent") {
14
- $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
15
- $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
16
- $pos: null;
17
- }
18
-
19
- @if $pos {
20
- $positions: _linear-positions-parser($pos);
21
- $pos-degree: nth($positions, 1);
22
- $pos-spec: nth($positions, 2);
23
- }
24
-
25
- $full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10;
26
-
27
- // Set $G1 as the default fallback color
28
- $fallback-color: nth($G1, 1);
29
-
30
- // If $fallback is a color use that color as the fallback color
31
- @if (type-of($fallback) == color) or ($fallback == "transparent") {
32
- $fallback-color: $fallback;
33
- }
34
-
35
- background-color: $fallback-color;
36
- background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome
37
- background-image: unquote("linear-gradient(#{$pos-spec}#{$full})");
38
-}
docs/_css/bourbon/css3/_perspective.scss
deleted
-8
@@ -1,8 +0,0 @@
1
-@mixin perspective($depth: none) {
2
- // none | <length>
3
- @include prefixer(perspective, $depth, webkit moz spec);
4
-}
5
-
6
-@mixin perspective-origin($value: 50% 50%) {
7
- @include prefixer(perspective-origin, $value, webkit moz spec);
8
-}
docs/_css/bourbon/css3/_placeholder.scss
deleted
-8
@@ -1,8 +0,0 @@
1
-@mixin placeholder {
2
- $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
3
- @each $placeholder in $placeholders {
4
- &:#{$placeholder}-placeholder {
5
- @content;
6
- }
7
- }
8
-}
docs/_css/bourbon/css3/_radial-gradient.scss
deleted
-39
@@ -1,39 +0,0 @@
1
-// Requires Sass 3.1+
2
-@mixin radial-gradient($G1, $G2,
3
- $G3: null, $G4: null,
4
- $G5: null, $G6: null,
5
- $G7: null, $G8: null,
6
- $G9: null, $G10: null,
7
- $pos: null,
8
- $shape-size: null,
9
- $fallback: null) {
10
-
11
- $data: _radial-arg-parser($G1, $G2, $pos, $shape-size);
12
- $G1: nth($data, 1);
13
- $G2: nth($data, 2);
14
- $pos: nth($data, 3);
15
- $shape-size: nth($data, 4);
16
-
17
- $full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10;
18
-
19
- // Strip deprecated cover/contain for spec
20
- $shape-size-spec: _shape-size-stripper($shape-size);
21
-
22
- // Set $G1 as the default fallback color
23
- $first-color: nth($full, 1);
24
- $fallback-color: nth($first-color, 1);
25
-
26
- @if (type-of($fallback) == color) or ($fallback == "transparent") {
27
- $fallback-color: $fallback;
28
- }
29
-
30
- // Add Commas and spaces
31
- $shape-size: if($shape-size, '#{$shape-size}, ', null);
32
- $pos: if($pos, '#{$pos}, ', null);
33
- $pos-spec: if($pos, 'at #{$pos}', null);
34
- $shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} ');
35
-
36
- background-color: $fallback-color;
37
- background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full}));
38
- background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})");
39
-}
docs/_css/bourbon/css3/_transform.scss
deleted
-15
@@ -1,15 +0,0 @@
1
-@mixin transform($property: none) {
2
-// none | <transform-function>
3
- @include prefixer(transform, $property, webkit moz ms o spec);
4
-}
5
-
6
-@mixin transform-origin($axes: 50%) {
7
-// x-axis - left | center | right | length | %
8
-// y-axis - top | center | bottom | length | %
9
-// z-axis - length
10
- @include prefixer(transform-origin, $axes, webkit moz ms o spec);
11
-}
12
-
13
-@mixin transform-style ($style: flat) {
14
- @include prefixer(transform-style, $style, webkit moz ms o spec);
15
-}
docs/_css/bourbon/css3/_transition.scss
deleted
-77
@@ -1,77 +0,0 @@
1
-// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
2
-// Example: @include transition (all 2s ease-in-out);
3
-// @include transition (opacity 1s ease-in 2s, width 2s ease-out);
4
-// @include transition-property (transform, opacity);
5
-
6
-@mixin transition ($properties...) {
7
- // Fix for vendor-prefix transform property
8
- $needs-prefixes: false;
9
- $webkit: ();
10
- $moz: ();
11
- $spec: ();
12
-
13
- // Create lists for vendor-prefixed transform
14
- @each $list in $properties {
15
- @if nth($list, 1) == "transform" {
16
- $needs-prefixes: true;
17
- $list1: -webkit-transform;
18
- $list2: -moz-transform;
19
- $list3: ();
20
-
21
- @each $var in $list {
22
- $list3: join($list3, $var);
23
-
24
- @if $var != "transform" {
25
- $list1: join($list1, $var);
26
- $list2: join($list2, $var);
27
- }
28
- }
29
-
30
- $webkit: append($webkit, $list1);
31
- $moz: append($moz, $list2);
32
- $spec: append($spec, $list3);
33
- }
34
-
35
- // Create lists for non-prefixed transition properties
36
- @else {
37
- $webkit: append($webkit, $list, comma);
38
- $moz: append($moz, $list, comma);
39
- $spec: append($spec, $list, comma);
40
- }
41
- }
42
-
43
- @if $needs-prefixes {
44
- -webkit-transition: $webkit;
45
- -moz-transition: $moz;
46
- transition: $spec;
47
- }
48
- @else {
49
- @if length($properties) >= 1 {
50
- @include prefixer(transition, $properties, webkit moz spec);
51
- }
52
-
53
- @else {
54
- $properties: all 0.15s ease-out 0s;
55
- @include prefixer(transition, $properties, webkit moz spec);
56
- }
57
- }
58
-}
59
-
60
-@mixin transition-property ($properties...) {
61
- -webkit-transition-property: transition-property-names($properties, 'webkit');
62
- -moz-transition-property: transition-property-names($properties, 'moz');
63
- transition-property: transition-property-names($properties, false);
64
-}
65
-
66
-@mixin transition-duration ($times...) {
67
- @include prefixer(transition-duration, $times, webkit moz spec);
68
-}
69
-
70
-@mixin transition-timing-function ($motions...) {
71
-// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
72
- @include prefixer(transition-timing-function, $motions, webkit moz spec);
73
-}
74
-
75
-@mixin transition-delay ($times...) {
76
- @include prefixer(transition-delay, $times, webkit moz spec);
77
-}
docs/_css/bourbon/css3/_user-select.scss
deleted
-3
@@ -1,3 +0,0 @@
1
-@mixin user-select($arg: none) {
2
- @include prefixer(user-select, $arg, webkit moz ms spec);
3
-}
docs/_css/bourbon/functions/_assign.scss
deleted
-11
@@ -1,11 +0,0 @@
1
-@function assign-inputs($inputs, $pseudo: null) {
2
- $list : ();
3
-
4
- @each $input in $inputs {
5
- $input: unquote($input);
6
- $input: if($pseudo, $input + ":" + $pseudo, $input);
7
- $list: append($list, $input, comma);
8
- }
9
-
10
- @return $list;
11
-}
\ No newline at end of file
docs/_css/bourbon/functions/_color-lightness.scss
deleted
-13
@@ -1,13 +0,0 @@
1
-// Programatically determines whether a color is light or dark
2
-// Returns a boolean
3
-// More details here http://robots.thoughtbot.com/closer-look-color-lightness
4
-
5
-@function is-light($hex-color) {
6
- $-local-red: red(rgba($hex-color, 1.0));
7
- $-local-green: green(rgba($hex-color, 1.0));
8
- $-local-blue: blue(rgba($hex-color, 1.0));
9
-
10
- $-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255;
11
-
12
- @return $-local-lightness > .6;
13
-}
docs/_css/bourbon/functions/_flex-grid.scss
deleted
-39
@@ -1,39 +0,0 @@
1
-// Flexible grid
2
-@function flex-grid($columns, $container-columns: $fg-max-columns) {
3
- $width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
4
- $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
5
- @return percentage($width / $container-width);
6
-}
7
-
8
-// Flexible gutter
9
-@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
10
- $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
11
- @return percentage($gutter / $container-width);
12
-}
13
-
14
-// The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function.
15
-// This function takes the fluid grid equation (target / context = result) and uses columns to help define each.
16
-//
17
-// The calculation presumes that your column structure will be missing the last gutter:
18
-//
19
-// -- column -- gutter -- column -- gutter -- column
20
-//
21
-// $fg-column: 60px; // Column Width
22
-// $fg-gutter: 25px; // Gutter Width
23
-// $fg-max-columns: 12; // Total Columns For Main Container
24
-//
25
-// div {
26
-// width: flex-grid(4); // returns (315px / 995px) = 31.65829%;
27
-// margin-left: flex-gutter(); // returns (25px / 995px) = 2.51256%;
28
-//
29
-// p {
30
-// width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
31
-// float: left;
32
-// margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%;
33
-// }
34
-//
35
-// blockquote {
36
-// float: left;
37
-// width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%;
38
-// }
39
-// }
\ No newline at end of file
docs/_css/bourbon/functions/_golden-ratio.scss
deleted
-3
@@ -1,3 +0,0 @@
1
-@function golden-ratio($value, $increment) {
2
- @return modular-scale($value, $increment, $golden)
3
-}
docs/_css/bourbon/functions/_grid-width.scss
deleted
-13
@@ -1,13 +0,0 @@
1
-@function grid-width($n) {
2
- @return $n * $gw-column + ($n - 1) * $gw-gutter;
3
-}
4
-
5
-// The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function.
6
-//
7
-// $gw-column: 100px; // Column Width
8
-// $gw-gutter: 40px; // Gutter Width
9
-//
10
-// div {
11
-// width: grid-width(4); // returns 520px;
12
-// margin-left: $gw-gutter; // returns 40px;
13
-// }
docs/_css/bourbon/functions/_modular-scale.scss
deleted
-66
@@ -1,66 +0,0 @@
1
-// Scaling Variables
2
-$golden: 1.618;
3
-$minor-second: 1.067;
4
-$major-second: 1.125;
5
-$minor-third: 1.2;
6
-$major-third: 1.25;
7
-$perfect-fourth: 1.333;
8
-$augmented-fourth: 1.414;
9
-$perfect-fifth: 1.5;
10
-$minor-sixth: 1.6;
11
-$major-sixth: 1.667;
12
-$minor-seventh: 1.778;
13
-$major-seventh: 1.875;
14
-$octave: 2;
15
-$major-tenth: 2.5;
16
-$major-eleventh: 2.667;
17
-$major-twelfth: 3;
18
-$double-octave: 4;
19
-
20
-@function modular-scale($value, $increment, $ratio) {
21
- $v1: nth($value, 1);
22
- $v2: nth($value, length($value));
23
- $value: $v1;
24
-
25
- // scale $v2 to just above $v1
26
- @while $v2 > $v1 {
27
- $v2: ($v2 / $ratio); // will be off-by-1
28
- }
29
- @while $v2 < $v1 {
30
- $v2: ($v2 * $ratio); // will fix off-by-1
31
- }
32
-
33
- // check AFTER scaling $v2 to prevent double-counting corner-case
34
- $double-stranded: $v2 > $v1;
35
-
36
- @if $increment > 0 {
37
- @for $i from 1 through $increment {
38
- @if $double-stranded and ($v1 * $ratio) > $v2 {
39
- $value: $v2;
40
- $v2: ($v2 * $ratio);
41
- } @else {
42
- $v1: ($v1 * $ratio);
43
- $value: $v1;
44
- }
45
- }
46
- }
47
-
48
- @if $increment < 0 {
49
- // adjust $v2 to just below $v1
50
- @if $double-stranded {
51
- $v2: ($v2 / $ratio);
52
- }
53
-
54
- @for $i from $increment through -1 {
55
- @if $double-stranded and ($v1 / $ratio) < $v2 {
56
- $value: $v2;
57
- $v2: ($v2 / $ratio);
58
- } @else {
59
- $v1: ($v1 / $ratio);
60
- $value: $v1;
61
- }
62
- }
63
- }
64
-
65
- @return $value;
66
-}
docs/_css/bourbon/functions/_px-to-em.scss
deleted
-13
@@ -1,13 +0,0 @@
1
-// Convert pixels to ems
2
-// eg. for a relational value of 12px write em(12) when the parent is 16px
3
-// if the parent is another value say 24px write em(12, 24)
4
-
5
-@function em($pxval, $base: $em-base) {
6
- @if not unitless($pxval) {
7
- $pxval: strip-units($pxval);
8
- }
9
- @if not unitless($base) {
10
- $base: strip-units($base);
11
- }
12
- @return ($pxval / $base) * 1em;
13
-}
docs/_css/bourbon/functions/_px-to-rem.scss
deleted
-15
@@ -1,15 +0,0 @@
1
-// Convert pixels to rems
2
-// eg. for a relational value of 12px write rem(12)
3
-// Assumes $em-base is the font-size of <html>
4
-
5
-@function rem($pxval) {
6
- @if not unitless($pxval) {
7
- $pxval: strip-units($pxval);
8
- }
9
-
10
- $base: $em-base;
11
- @if not unitless($base) {
12
- $base: strip-units($base);
13
- }
14
- @return ($pxval / $base) * 1rem;
15
-}
docs/_css/bourbon/functions/_strip-units.scss
deleted
-5
@@ -1,5 +0,0 @@
1
-// Srtips the units from a value. e.g. 12px -> 12
2
-
3
-@function strip-units($val) {
4
- @return ($val / ($val * 0 + 1));
5
-}
docs/_css/bourbon/functions/_tint-shade.scss
deleted
-9
@@ -1,9 +0,0 @@
1
-// Add percentage of white to a color
2
-@function tint($color, $percent){
3
- @return mix(white, $color, $percent);
4
-}
5
-
6
-// Add percentage of black to a color
7
-@function shade($color, $percent){
8
- @return mix(black, $color, $percent);
9
-}
docs/_css/bourbon/functions/_transition-property-name.scss
deleted
-22
@@ -1,22 +0,0 @@
1
-// Return vendor-prefixed property names if appropriate
2
-// Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background
3
-//************************************************************************//
4
-@function transition-property-names($props, $vendor: false) {
5
- $new-props: ();
6
-
7
- @each $prop in $props {
8
- $new-props: append($new-props, transition-property-name($prop, $vendor), comma);
9
- }
10
-
11
- @return $new-props;
12
-}
13
-
14
-@function transition-property-name($prop, $vendor: false) {
15
- // put other properties that need to be prefixed here aswell
16
- @if $vendor and $prop == transform {
17
- @return unquote('-'+$vendor+'-'+$prop);
18
- }
19
- @else {
20
- @return $prop;
21
- }
22
-}
\ No newline at end of file
docs/_css/bourbon/functions/_unpack.scss
deleted
-17
@@ -1,17 +0,0 @@
1
-// Convert shorthand to the 4-value syntax
2
-
3
-@function unpack($shorthand) {
4
- @if length($shorthand) == 1 {
5
- @return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1);
6
- }
7
- @else if length($shorthand) == 2 {
8
- @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2);
9
- }
10
- @else if length($shorthand) == 3 {
11
- @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2);
12
- }
13
- @else {
14
- @return $shorthand;
15
- }
16
-}
17
-
docs/_css/bourbon/helpers/_convert-units.scss
deleted
-15
@@ -1,15 +0,0 @@
1
-//************************************************************************//
2
-// Helper function for str-to-num fn.
3
-// Source: http://sassmeister.com/gist/9647408
4
-//************************************************************************//
5
-@function _convert-units($number, $unit) {
6
- $strings: 'px' 'cm' 'mm' '%' 'ch' 'pica' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax', 'deg', 'rad', 'grad', 'turn';
7
- $units: 1px 1cm 1mm 1% 1ch 1pica 1in 1em 1rem 1pt 1pc 1ex 1vw 1vh 1vmin 1vmax, 1deg, 1rad, 1grad, 1turn;
8
- $index: index($strings, $unit);
9
-
10
- @if not $index {
11
- @warn "Unknown unit `#{$unit}`.";
12
- @return false;
13
- }
14
- @return $number * nth($units, $index);
15
-}
docs/_css/bourbon/helpers/_gradient-positions-parser.scss
deleted
-13
@@ -1,13 +0,0 @@
1
-@function _gradient-positions-parser($gradient-type, $gradient-positions) {
2
- @if $gradient-positions
3
- and ($gradient-type == linear)
4
- and (type-of($gradient-positions) != color) {
5
- $gradient-positions: _linear-positions-parser($gradient-positions);
6
- }
7
- @else if $gradient-positions
8
- and ($gradient-type == radial)
9
- and (type-of($gradient-positions) != color) {
10
- $gradient-positions: _radial-positions-parser($gradient-positions);
11
- }
12
- @return $gradient-positions;
13
-}
docs/_css/bourbon/helpers/_is-num.scss
deleted
-8
@@ -1,8 +0,0 @@
1
-//************************************************************************//
2
-// Helper for linear-gradient-parser
3
-//************************************************************************//
4
-@function _is-num($char) {
5
- $values: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 0 1 2 3 4 5 6 7 8 9;
6
- $index: index($values, $char);
7
- @return if($index, true, false);
8
-}
docs/_css/bourbon/helpers/_linear-angle-parser.scss
deleted
-25
@@ -1,25 +0,0 @@
1
-// Private function for linear-gradient-parser
2
-@function _linear-angle-parser($image, $first-val, $prefix, $suffix) {
3
- $offset: null;
4
- $unit-short: str-slice($first-val, str-length($first-val) - 2, str-length($first-val));
5
- $unit-long: str-slice($first-val, str-length($first-val) - 3, str-length($first-val));
6
-
7
- @if ($unit-long == "grad") or
8
- ($unit-long == "turn") {
9
- $offset: if($unit-long == "grad", -100grad * 3, -0.75turn);
10
- }
11
-
12
- @else if ($unit-short == "deg") or
13
- ($unit-short == "rad") {
14
- $offset: if($unit-short == "deg", -90 * 3, 1.6rad);
15
- }
16
-
17
- @if $offset {
18
- $num: _str-to-num($first-val);
19
-
20
- @return (
21
- webkit-image: -webkit- + $prefix + ($offset - $num) + $suffix,
22
- spec-image: $image
23
- );
24
- }
25
-}
docs/_css/bourbon/helpers/_linear-gradient-parser.scss
deleted
-41
@@ -1,41 +0,0 @@
1
-@function _linear-gradient-parser($image) {
2
- $image: unquote($image);
3
- $gradients: ();
4
- $start: str-index($image, "(");
5
- $end: str-index($image, ",");
6
- $first-val: str-slice($image, $start + 1, $end - 1);
7
-
8
- $prefix: str-slice($image, 0, $start);
9
- $suffix: str-slice($image, $end, str-length($image));
10
-
11
- $has-multiple-vals: str-index($first-val, " ");
12
- $has-single-position: unquote(_position-flipper($first-val) + "");
13
- $has-angle: _is-num(str-slice($first-val, 0, 0));
14
-
15
- @if $has-multiple-vals {
16
- $gradients: _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals);
17
- }
18
-
19
- @else if $has-single-position != "" {
20
- $pos: unquote($has-single-position + "");
21
-
22
- $gradients: (
23
- webkit-image: -webkit- + $image,
24
- spec-image: $prefix + "to " + $pos + $suffix
25
- );
26
- }
27
-
28
- @else if $has-angle {
29
- // Rotate degree for webkit
30
- $gradients: _linear-angle-parser($image, $first-val, $prefix, $suffix);
31
- }
32
-
33
- @else {
34
- $gradients: (
35
- webkit-image: -webkit- + $image,
36
- spec-image: $image
37
- );
38
- }
39
-
40
- @return $gradients;
41
-}
docs/_css/bourbon/helpers/_linear-positions-parser.scss
deleted
-61
@@ -1,61 +0,0 @@
1
-@function _linear-positions-parser($pos) {
2
- $type: type-of(nth($pos, 1));
3
- $spec: null;
4
- $degree: null;
5
- $side: null;
6
- $corner: null;
7
- $length: length($pos);
8
- // Parse Side and corner positions
9
- @if ($length > 1) {
10
- @if nth($pos, 1) == "to" { // Newer syntax
11
- $side: nth($pos, 2);
12
-
13
- @if $length == 2 { // eg. to top
14
- // Swap for backwards compatibility
15
- $degree: _position-flipper(nth($pos, 2));
16
- }
17
- @else if $length == 3 { // eg. to top left
18
- $corner: nth($pos, 3);
19
- }
20
- }
21
- @else if $length == 2 { // Older syntax ("top left")
22
- $side: _position-flipper(nth($pos, 1));
23
- $corner: _position-flipper(nth($pos, 2));
24
- }
25
-
26
- @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") {
27
- $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
28
- }
29
- @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") {
30
- $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
31
- }
32
- @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") {
33
- $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
34
- }
35
- @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") {
36
- $degree: _position-flipper(#{$side}) _position-flipper(#{$corner});
37
- }
38
- $spec: to $side $corner;
39
- }
40
- @else if $length == 1 {
41
- // Swap for backwards compatibility
42
- @if $type == string {
43
- $degree: $pos;
44
- $spec: to _position-flipper($pos);
45
- }
46
- @else {
47
- $degree: -270 - $pos; //rotate the gradient opposite from spec
48
- $spec: $pos;
49
- }
50
- }
51
- $degree: unquote($degree + ",");
52
- $spec: unquote($spec + ",");
53
- @return $degree $spec;
54
-}
55
-
56
-@function _position-flipper($pos) {
57
- @return if($pos == left, right, null)
58
- if($pos == right, left, null)
59
- if($pos == top, bottom, null)
60
- if($pos == bottom, top, null);
61
-}
docs/_css/bourbon/helpers/_linear-side-corner-parser.scss
deleted
-31
@@ -1,31 +0,0 @@
1
-// Private function for linear-gradient-parser
2
-@function _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals) {
3
- $val-1: str-slice($first-val, 0, $has-multiple-vals - 1 );
4
- $val-2: str-slice($first-val, $has-multiple-vals + 1, str-length($first-val));
5
- $val-3: null;
6
- $has-val-3: str-index($val-2, " ");
7
-
8
- @if $has-val-3 {
9
- $val-3: str-slice($val-2, $has-val-3 + 1, str-length($val-2));
10
- $val-2: str-slice($val-2, 0, $has-val-3 - 1);
11
- }
12
-
13
- $pos: _position-flipper($val-1) _position-flipper($val-2) _position-flipper($val-3);
14
- $pos: unquote($pos + "");
15
-
16
- // Use old spec for webkit
17
- @if $val-1 == "to" {
18
- @return (
19
- webkit-image: -webkit- + $prefix + $pos + $suffix,
20
- spec-image: $image
21
- );
22
- }
23
-
24
- // Bring the code up to spec
25
- @else {
26
- @return (
27
- webkit-image: -webkit- + $image,
28
- spec-image: $prefix + "to " + $pos + $suffix
29
- );
30
- }
31
-}
docs/_css/bourbon/helpers/_radial-arg-parser.scss
deleted
-69
@@ -1,69 +0,0 @@
1
-@function _radial-arg-parser($G1, $G2, $pos, $shape-size) {
2
- @each $value in $G1, $G2 {
3
- $first-val: nth($value, 1);
4
- $pos-type: type-of($first-val);
5
- $spec-at-index: null;
6
-
7
- // Determine if spec was passed to mixin
8
- @if type-of($value) == list {
9
- $spec-at-index: if(index($value, at), index($value, at), false);
10
- }
11
- @if $spec-at-index {
12
- @if $spec-at-index > 1 {
13
- @for $i from 1 through ($spec-at-index - 1) {
14
- $shape-size: $shape-size nth($value, $i);
15
- }
16
- @for $i from ($spec-at-index + 1) through length($value) {
17
- $pos: $pos nth($value, $i);
18
- }
19
- }
20
- @else if $spec-at-index == 1 {
21
- @for $i from ($spec-at-index + 1) through length($value) {
22
- $pos: $pos nth($value, $i);
23
- }
24
- }
25
- $G1: null;
26
- }
27
-
28
- // If not spec calculate correct values
29
- @else {
30
- @if ($pos-type != color) or ($first-val != "transparent") {
31
- @if ($pos-type == number)
32
- or ($first-val == "center")
33
- or ($first-val == "top")
34
- or ($first-val == "right")
35
- or ($first-val == "bottom")
36
- or ($first-val == "left") {
37
-
38
- $pos: $value;
39
-
40
- @if $pos == $G1 {
41
- $G1: null;
42
- }
43
- }
44
-
45
- @else if
46
- ($first-val == "ellipse")
47
- or ($first-val == "circle")
48
- or ($first-val == "closest-side")
49
- or ($first-val == "closest-corner")
50
- or ($first-val == "farthest-side")
51
- or ($first-val == "farthest-corner")
52
- or ($first-val == "contain")
53
- or ($first-val == "cover") {
54
-
55
- $shape-size: $value;
56
-
57
- @if $value == $G1 {
58
- $G1: null;
59
- }
60
-
61
- @else if $value == $G2 {
62
- $G2: null;
63
- }
64
- }
65
- }
66
- }
67
- }
68
- @return $G1, $G2, $pos, $shape-size;
69
-}
docs/_css/bourbon/helpers/_radial-gradient-parser.scss
deleted
-50
@@ -1,50 +0,0 @@
1
-@function _radial-gradient-parser($image) {
2
- $image: unquote($image);
3
- $gradients: ();
4
- $start: str-index($image, "(");
5
- $end: str-index($image, ",");
6
- $first-val: str-slice($image, $start + 1, $end - 1);
7
-
8
- $prefix: str-slice($image, 0, $start);
9
- $suffix: str-slice($image, $end, str-length($image));
10
-
11
- $is-spec-syntax: str-index($first-val, "at");
12
-
13
- @if $is-spec-syntax and $is-spec-syntax > 1 {
14
- $keyword: str-slice($first-val, 1, $is-spec-syntax - 2);
15
- $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val));
16
- $pos: append($pos, $keyword, comma);
17
-
18
- $gradients: (
19
- webkit-image: -webkit- + $prefix + $pos + $suffix,
20
- spec-image: $image
21
- )
22
- }
23
-
24
- @else if $is-spec-syntax == 1 {
25
- $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val));
26
-
27
- $gradients: (
28
- webkit-image: -webkit- + $prefix + $pos + $suffix,
29
- spec-image: $image
30
- )
31
- }
32
-
33
- @else if str-index($image, "cover") or str-index($image, "contain") {
34
- @warn "Radial-gradient needs to be updated to conform to latest spec.";
35
-
36
- $gradients: (
37
- webkit-image: null,
38
- spec-image: $image
39
- )
40
- }
41
-
42
- @else {
43
- $gradients: (
44
- webkit-image: -webkit- + $image,
45
- spec-image: $image
46
- )
47
- }
48
-
49
- @return $gradients;
50
-}
docs/_css/bourbon/helpers/_radial-positions-parser.scss
deleted
-18
@@ -1,18 +0,0 @@
1
-@function _radial-positions-parser($gradient-pos) {
2
- $shape-size: nth($gradient-pos, 1);
3
- $pos: nth($gradient-pos, 2);
4
- $shape-size-spec: _shape-size-stripper($shape-size);
5
-
6
- $pre-spec: unquote(if($pos, "#{$pos}, ", null))
7
- unquote(if($shape-size, "#{$shape-size},", null));
8
- $pos-spec: if($pos, "at #{$pos}", null);
9
-
10
- $spec: "#{$shape-size-spec} #{$pos-spec}";
11
-
12
- // Add comma
13
- @if ($spec != ' ') {
14
- $spec: "#{$spec},"
15
- }
16
-
17
- @return $pre-spec $spec;
18
-}
docs/_css/bourbon/helpers/_render-gradients.scss
deleted
-26
@@ -1,26 +0,0 @@
1
-// User for linear and radial gradients within background-image or border-image properties
2
-
3
-@function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) {
4
- $pre-spec: null;
5
- $spec: null;
6
- $vendor-gradients: null;
7
- @if $gradient-type == linear {
8
- @if $gradient-positions {
9
- $pre-spec: nth($gradient-positions, 1);
10
- $spec: nth($gradient-positions, 2);
11
- }
12
- }
13
- @else if $gradient-type == radial {
14
- $pre-spec: nth($gradient-positions, 1);
15
- $spec: nth($gradient-positions, 2);
16
- }
17
-
18
- @if $vendor {
19
- $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients);
20
- }
21
- @else if $vendor == false {
22
- $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})";
23
- $vendor-gradients: unquote($vendor-gradients);
24
- }
25
- @return $vendor-gradients;
26
-}
docs/_css/bourbon/helpers/_shape-size-stripper.scss
deleted
-10
@@ -1,10 +0,0 @@
1
-@function _shape-size-stripper($shape-size) {
2
- $shape-size-spec: null;
3
- @each $value in $shape-size {
4
- @if ($value == "cover") or ($value == "contain") {
5
- $value: null;
6
- }
7
- $shape-size-spec: "#{$shape-size-spec} #{$value}";
8
- }
9
- @return $shape-size-spec;
10
-}
docs/_css/bourbon/helpers/_str-to-num.scss
deleted
-50
@@ -1,50 +0,0 @@
1
-//************************************************************************//
2
-// Helper function for linear/radial-gradient-parsers.
3
-// Source: http://sassmeister.com/gist/9647408
4
-//************************************************************************//
5
-@function _str-to-num($string) {
6
- // Matrices
7
- $strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
8
- $numbers: 0 1 2 3 4 5 6 7 8 9;
9
-
10
- // Result
11
- $result: 0;
12
- $divider: 0;
13
- $minus: false;
14
-
15
- // Looping through all characters
16
- @for $i from 1 through str-length($string) {
17
- $character: str-slice($string, $i, $i);
18
- $index: index($strings, $character);
19
-
20
- @if $character == '-' {
21
- $minus: true;
22
- }
23
-
24
- @else if $character == '.' {
25
- $divider: 1;
26
- }
27
-
28
- @else {
29
- @if not $index {
30
- $result: if($minus, $result * -1, $result);
31
- @return _convert-units($result, str-slice($string, $i));
32
- }
33
-
34
- $number: nth($numbers, $index);
35
-
36
- @if $divider == 0 {
37
- $result: $result * 10;
38
- }
39
-
40
- @else {
41
- // Move the decimal dot to the left
42
- $divider: $divider * 10;
43
- $number: $number / $divider;
44
- }
45
-
46
- $result: $result + $number;
47
- }
48
- }
49
- @return if($minus, $result * -1, $result);
50
-}
docs/_css/bourbon/settings/_asset-pipeline.scss
deleted
-1
@@ -1 +0,0 @@
1
-$asset-pipeline: false !default;
docs/_css/bourbon/settings/_prefixer.scss
deleted
-6
@@ -1,6 +0,0 @@
1
-// Variable settings for /addons/prefixer.scss
2
-$prefix-for-webkit: true !default;
3
-$prefix-for-mozilla: true !default;
4
-$prefix-for-microsoft: true !default;
5
-$prefix-for-opera: true !default;
6
-$prefix-for-spec: true !default; // required for keyframe mixin
docs/_css/bourbon/settings/_px-to-em.scss
deleted
-1
@@ -1 +0,0 @@
1
-$em-base: 16px !default;
docs/_data/acknowledgements.yml
deleted
-1130
@@ -1,1130 +0,0 @@
1
----
2
-- '839'
3
-- Aaron Ackerman
4
-- Aaron Cannon
5
-- Aaron Franks
6
-- Aaron Gelter
7
-- Abhay Nikam
8
-- Abhishek Soni
9
-- Adam
10
-- Adam Bloomston
11
-- Adam Krebs
12
-- Adam Mark
13
-- Adam Solove
14
-- Adam Stankiewicz
15
-- Adam Timberlake
16
-- Adam Zapletal
17
-- Addy Osmani
18
-- Adrian Sieber
19
-- Aesop Wolf
20
-- Ahmad Wali Sidiqi
21
-- Alan Plum
22
-- Alan Souza
23
-- Alan deLevie
24
-- Alastair Hole
25
-- Alex
26
-- Alex Babkov
27
-- Alex Baumgertner
28
-- Alex Boatwright
29
-- Alex Boyd
30
-- Alex Dajani
31
-- Alex Jacobs
32
-- Alex Katopodis
33
-- Alex Lopatin
34
-- Alex Mykyta
35
-- Alex Pien
36
-- Alex Smith
37
-- Alex Zelenskiy
38
-- Alex Zherdev
39
-- Alexander
40
-- Alexander Shtuchkin
41
-- Alexander Solovyov
42
-- Alexander Tseung
43
-- Alexandre Gaudencio
44
-- Alexandre Kirszenberg
45
-- Alexey Raspopov
46
-- Alexey Shamrin
47
-- Ali Taheri Moghaddar
48
-- Ali Ukani
49
-- Alireza Mostafizi
50
-- Almero Steyn
51
-- Amanvir Sangha
52
-- Amjad Masad
53
-- Anastasia A
54
-- Andre Giron
55
-- Andre Z Sanchez
56
-- Andreas Möller
57
-- Andreas Savvides
58
-- Andreas Svensson
59
-- Andres Kalle
60
-- Andres Suarez
61
-- Andrew Clark
62
-- Andrew Cobby
63
-- Andrew Davey
64
-- Andrew Henderson
65
-- Andrew Imm
66
-- Andrew Kulakov
67
-- Andrew Lo
68
-- Andrew Poliakov
69
-- Andrew Rasmussen
70
-- Andrew Rota
71
-- Andrew Sokolov
72
-- Andrew Zich
73
-- Andrey Marchenko
74
-- Andrey Okonetchnikov
75
-- Andrey Popp
76
-- Andrey Safronov
77
-- Andy Edwards
78
-- Ankeet Maini
79
-- Anthony van der Hoorn
80
-- Anto Aravinth
81
-- Antonio Ruberto
82
-- Antti Ahti
83
-- António Nuno Monteiro
84
-- Anuj Tomar
85
-- Anuja Ware
86
-- AoDev
87
-- April Arcus
88
-- Areeb Malik
89
-- Aria Buckles
90
-- Aria Stewart
91
-- Arian Faurtosh
92
-- Arni Fannar
93
-- Arshabh Kumar Agarwal
94
-- Artem Nezvigin
95
-- Arthur Gunn
96
-- Ashish
97
-- Austin Wright
98
-- Avinash Kondeti
99
-- Ayman Osman
100
-- B.Orlov
101
-- BDav24
102
-- BEAUDRU Manuel
103
-- Baraa Hamodi
104
-- Bartosz Kaszubowski
105
-- Basarat Ali Syed
106
-- Battaile Fauber
107
-- Beau Smith
108
-- Ben Anderson
109
-- Ben Berman
110
-- Ben Brooks
111
-- Ben Foxall
112
-- Ben Halpern
113
-- Ben Jaffe
114
-- Ben Moss
115
-- Ben Newman
116
-- Ben Ripkens
117
-- Benedikt Meurer
118
-- Benjamin Keen
119
-- Benjamin Leiken
120
-- Benjamin Woodruff
121
-- Benjy Cui
122
-- Benoit Girard
123
-- Benton Rochester
124
-- Bernard Lin
125
-- Bill Blanchard
126
-- Bill Fisher
127
-- Billy Shih
128
-- Blaine Hatab
129
-- Blaine Kasten
130
-- Bob Eagan
131
-- Bob Ralian
132
-- Bob Renwick
133
-- Bobby
134
-- Bogdan Chadkin
135
-- Bojan Mihelac
136
-- Boris Yankov
137
-- Brad Vogel
138
-- Bradford
139
-- Bradley Spaulding
140
-- Brandon Bloom
141
-- Brandon Dail
142
-- Brandon Tilley
143
-- Brenard Cubacub
144
-- Brent Vatne
145
-- Brian Cooke
146
-- Brian Emil Hartz
147
-- Brian Holt
148
-- Brian Hsu
149
-- Brian Kim
150
-- Brian Kung
151
-- Brian Reavis
152
-- Brian Rue
153
-- Brian Vaughn
154
-- Bruce Harris
155
-- Bruno Heridet
156
-- Bruno Škvorc
157
-- Bryan Braun
158
-- CT Wu
159
-- Cam Song
160
-- Cam Spiers
161
-- Cameron Chamberlain
162
-- Cameron Matheson
163
-- Carolina Powers
164
-- Carter Chung
165
-- Cassus Adam Banko
166
-- Cat Chen
167
-- Cedric Sohrauer
168
-- Cesar William Alvarenga
169
-- Chad Fawcett
170
-- Changsoon Bok
171
-- Charles Marsh
172
-- Charlie Garcia
173
-- Chase Adams
174
-- Cheng Lou
175
-- Chitharanjan Das
176
-- Chris
177
-- Chris Bolin
178
-- Chris Grovers
179
-- Chris Ha
180
-- Chris Pearce
181
-- Chris Rebert
182
-- Chris Sciolla
183
-- Christian Alfoni
184
-- Christian Oliff
185
-- Christian Roman
186
-- Christoffer Sawicki
187
-- Christoph Pojer
188
-- Christophe Hurpeau
189
-- Christopher Monsanto
190
-- Claudio Brandolino
191
-- Clay Allsopp
192
-- Clay Miller
193
-- Clement Hoang
194
-- CodinCat
195
-- Cody Reichert
196
-- Colin Wren
197
-- Connor McSheffrey
198
-- Conor Hastings
199
-- Constantin Gavrilete
200
-- Cory House
201
-- Cotton Hou
202
-- Craig Akimoto
203
-- Cristovao Verstraeten
204
-- DQNEO
205
-- Dai Nguyen
206
-- Damian Nicholson
207
-- Damien Pellier
208
-- Damien Soulard
209
-- Dan Abramov
210
-- Dan Fox
211
-- Dan Schafer
212
-- DanZeuss
213
-- Daniel Carlsson
214
-- Daniel Cousens
215
-- Daniel Friesen
216
-- Daniel Gasienica
217
-- Daniel Hejl
218
-- Daniel Hejl
219
-- Daniel Liburd
220
-- Daniel Lo Nigro
221
-- Daniel Mané
222
-- Daniel Miladinov
223
-- Daniel Rodgers-Pryor
224
-- Daniel Rosenwasser
225
-- Daniel Rotter
226
-- Daniel Schonfeld
227
-- Daniela Borges
228
-- Danilo Vitoriano
229
-- Danny Ben-David
230
-- Danny Hurlburt
231
-- Darcy
232
-- Daryl Lau
233
-- Darío Javier Cravero
234
-- Dave Galbraith
235
-- Dave Lunny
236
-- Dave Voyles
237
-- David Aurelio
238
-- David Baker
239
-- David Beitey
240
-- David Ed Mellum
241
-- David Goldberg
242
-- David Granado
243
-- David Greenspan
244
-- David Hellsing
245
-- David Hu
246
-- David Khourshid
247
-- David Mininger
248
-- David Neubauer
249
-- David Percy
250
-- Dean Shi
251
-- Denis Laxalde
252
-- Denis Pismenny
253
-- Denis Sokolov
254
-- Deniss Jacenko
255
-- Dennis Johnson
256
-- Desmond Brand
257
-- Devedse
258
-- Devinsuit
259
-- Devon Blandin
260
-- Devon Harvey
261
-- Dheeraj Kumar
262
-- Dhyey Thakore
263
-- Diego Muracciole
264
-- Dima Beznos
265
-- Dimzel Sobolev
266
-- Dmitri Zaitsev
267
-- Dmitrii Abramov
268
-- Dmitriy Kubyshkin
269
-- Dmitriy Rozhkov
270
-- Dmitry Blues
271
-- Dmitry Mazuro
272
-- Dmitry Zhuravlev-Nevsky
273
-- Domenico Matteo
274
-- Dominic Gannaway
275
-- Don Abrams
276
-- Dongsheng Liu
277
-- Duke Pham
278
-- Dustan Kasten
279
-- Dustin Getz
280
-- Dylan Harrington
281
-- Dylan Kirby
282
-- Edgar (Algebr)
283
-- Eduard
284
-- Eduardo Garcia
285
-- Edvin Erikson
286
-- Elaine Fang
287
-- Eli White
288
-- Enguerran
289
-- Eoin Hennessy
290
-- Eric Churchill
291
-- Eric Clemmons
292
-- Eric Douglas
293
-- Eric Eastwood
294
-- Eric Elliott
295
-- Eric Florenzano
296
-- Eric Matthys
297
-- Eric Nakagawa
298
-- Eric O'Connell
299
-- Eric Pitcher
300
-- Eric Sakmar
301
-- Eric Schoffstall
302
-- Erik Harper
303
-- Erik Hellman
304
-- Espen Hovlandsdal
305
-- Esteban
306
-- Eugene
307
-- EugeneGarbuzov
308
-- Evan Coonrod
309
-- Evan Jacobs
310
-- Evan Scott
311
-- Evan Vosberg
312
-- Fabio M. Costa
313
-- Fabrizio Castellarin
314
-- Faheel Ahmad
315
-- Fatih
316
-- Federico Rampazzo
317
-- Felipe Oliveira Carvalho
318
-- Felix Gnass
319
-- Felix Kling
320
-- Fernando Alex Helwanger
321
-- Fernando Correia
322
-- Fernando Montoya
323
-- Filip Hoško
324
-- Filip Spiridonov
325
-- Flarnie Marchan
326
-- Fokke Zandbergen
327
-- Frank Yan
328
-- Frankie Bagnardi
329
-- François Chalifour
330
-- François-Xavier Bois
331
-- Fraser Haer
332
-- Fred Zhao
333
-- Freddy Rangel
334
-- Fyodor Ivanishchev
335
-- G Scott Olson
336
-- G. Kay Lee
337
-- Gabe Levi
338
-- Gabriel Lett Viviani
339
-- Gajus Kuizinas
340
-- Gant Laborde
341
-- Gareth Nicholson
342
-- Garmash Nikolay
343
-- Garren Smith
344
-- Garrett McCullough
345
-- Gavin McQuistin
346
-- Gaëtan Renaudeau
347
-- Geert Pasteels
348
-- Geert-Jan Brits
349
-- George A Sisco III
350
-- Georgii Dolzhykov
351
-- Gert Hengeveld
352
-- Giamir Buoncristiani
353
-- Gil Chen-Zion
354
-- Gilbert
355
-- Giorgio Polvara
356
-- Giuseppe
357
-- Glen Mailer
358
-- Grant Timmerman
359
-- Greg Hurrell
360
-- Greg Palmer
361
-- Greg Perkins
362
-- Greg Roodt
363
-- Gregory
364
-- Grgur Grisogono
365
-- Griffin Michl
366
-- Guangqiang Dong
367
-- Guido Bouman
368
-- Guilherme Oenning
369
-- Guilherme Ruiz
370
-- Guillaume Claret
371
-- Harry Hull
372
-- Harry Marr
373
-- Harry Moreno
374
-- Harshad Sabne
375
-- Hekar Khani
376
-- Hendrik Swanepoel
377
-- Henrik Nyh
378
-- Henry Harris
379
-- Henry Wong
380
-- Henry Zhu
381
-- Hideo Matsumoto
382
-- Hikaru Suido
383
-- Hiroyuki Wada
384
-- Hou Chia
385
-- Huang-Wei Chang
386
-- Hugo Agbonon
387
-- Hugo Jobling
388
-- Hyeock Kwon
389
-- Héctor Ramos
390
-- Héliton Nordt
391
-- Ian Obermiller
392
-- Ian Sutherland
393
-- Ignacio Carbajo
394
-- Igor Scekic
395
-- Ike Peters
396
-- Ilia Pavlenkov
397
-- Ilya Gelman
398
-- Ilya Shuklin
399
-- Ilyá Belsky
400
-- Ingvar Stepanyan
401
-- Irae Carvalho
402
-- Isaac Salier-Hellendag
403
-- Islam Sharabash
404
-- Iurii Kucherov
405
-- Ivan
406
-- Ivan Kozik
407
-- Ivan Krechetov
408
-- Ivan Vergiliev
409
-- Ivan Zotov
410
-- J. Andrew Brassington
411
-- J. Renée Beach
412
-- JD Isaacks
413
-- JJ Weber
414
-- JW
415
-- Jack
416
-- Jack Cross
417
-- Jack Ford
418
-- Jack Zhang
419
-- Jackie Wung
420
-- Jackson Huang
421
-- Jacob Gable
422
-- Jacob Greenleaf
423
-- Jacob Lamont
424
-- Jae Hun Lee
425
-- Jae Hun Ro
426
-- Jaeho Lee
427
-- Jaime Mingo
428
-- Jake Boone
429
-- Jake Worth
430
-- Jakub Malinowski
431
-- James
432
-- James Brantly
433
-- James Burnett
434
-- James Friend
435
-- James Ide
436
-- James Long
437
-- James Pearce
438
-- James Seppi
439
-- James South
440
-- James Wen
441
-- Jamie Wong
442
-- Jamis Charles
443
-- Jamison Dance
444
-- Jan Hancic
445
-- Jan Kassens
446
-- Jan Raasch
447
-- Jan Schär
448
-- Jane Manchun Wong
449
-- Jared Forsyth
450
-- Jared Fox
451
-- Jarrod Mosen
452
-- Jason
453
-- Jason Bonta
454
-- Jason Grlicky
455
-- Jason Ly
456
-- Jason Miller
457
-- Jason Quense
458
-- Jason Trill
459
-- Jason Webster
460
-- Jay Jaeho Lee
461
-- Jay Phelps
462
-- Jayen Ashar
463
-- Jean Lauliac
464
-- Jed Watson
465
-- Jeff Barczewski
466
-- Jeff Carpenter
467
-- Jeff Chan
468
-- Jeff Hicken
469
-- Jeff Kolesky
470
-- Jeff Morrison
471
-- Jeff Welch
472
-- Jeffrey Lin
473
-- Jeffrey Wan
474
-- Jen Wong
475
-- Jeremy Fairbank
476
-- Jess Telford
477
-- Jesse Skinner
478
-- Jignesh Kakadiya
479
-- Jim OBrien
480
-- Jim Sproch
481
-- Jiminikiz
482
-- Jimmy Jea
483
-- Jing Chen
484
-- Jinwoo Oh
485
-- Jinxiu Lee
486
-- Jirat Ki
487
-- Jiyeon Seo
488
-- Jody McIntyre
489
-- Joe Critchley
490
-- Joe Stein
491
-- Joel Auterson
492
-- Joel Denning
493
-- Joel Sequeira
494
-- Johan Tinglöf
495
-- Johannes Baiter
496
-- Johannes Emerich
497
-- Johannes Lumpe
498
-- John Heroy
499
-- John Longanecker
500
-- John Ryan
501
-- John Watson
502
-- John-David Dalton
503
-- Jon Beebe
504
-- Jon Bretman
505
-- Jon Chester
506
-- Jon Hester
507
-- Jon Madison
508
-- Jon Scott Clark
509
-- Jon Tewksbury
510
-- Jonas Enlund
511
-- Jonas Gebhardt
512
-- Jonathan Hsu
513
-- Jonathan Persson
514
-- Jordan Harband
515
-- Jordan Walke
516
-- Jorrit Schippers
517
-- Joseph Nudell
518
-- Joseph Savona
519
-- Josh Bassett
520
-- Josh Duck
521
-- Josh Hunt
522
-- Josh Perez
523
-- Josh Yudaken
524
-- Joshua Evans
525
-- Joshua Go
526
-- Joshua Goldberg
527
-- Joshua Ma
528
-- João Valente
529
-- Juan
530
-- Juan Serrano
531
-- Julen Ruiz Aizpuru
532
-- Julian Viereck
533
-- Julien Bordellier
534
-- Julio Lopez
535
-- Jun Kim
536
-- Jun Wu
537
-- Juraj Dudak
538
-- Justas Brazauskas
539
-- Justin
540
-- Justin Grant
541
-- Justin Jaffray
542
-- Justin Robison
543
-- Justin Woo
544
-- KB
545
-- Kale
546
-- Kamron Batman
547
-- Karl Horky
548
-- Karl Mikkelsen
549
-- Karpich Dmitry
550
-- Karthik Balakrishnan
551
-- Karthik Chintapalli
552
-- Kateryna
553
-- Kaylee Knowles
554
-- KeicaM
555
-- Keito Uchiyama
556
-- Ken Powers
557
-- Kenneth Chau
558
-- Kent C. Dodds
559
-- Kevin Cheng
560
-- Kevin Coughlin
561
-- Kevin Huang
562
-- Kevin Lacker
563
-- Kevin Lau
564
-- Kevin Lin
565
-- Kevin Old
566
-- Kevin Robinson
567
-- Kevin Suttle
568
-- Kewei Jiang
569
-- Keyan Zhang
570
-- Kier Borromeo
571
-- Kiho · Cham
572
-- KimCoding
573
-- Kirk Steven Hansen
574
-- Kit Randel
575
-- Kite
576
-- Kohei TAKATA
577
-- Koo Youngmin
578
-- Krystian Karczewski
579
-- Kunal Mehta
580
-- Kurt Furbush
581
-- Kurt Ruppel
582
-- Kurt Weiberth
583
-- Kyle Kelley
584
-- Kyle Mathews
585
-- Laurence Rowe
586
-- Laurent Etiemble
587
-- Lee Byron
588
-- Lee Jaeyoung
589
-- Lee Sanghyeon
590
-- Lei
591
-- Leland Richardson
592
-- Leon Fedotov
593
-- Leon Yip
594
-- Leonardo YongUk Kim
595
-- Levi Buzolic
596
-- Levi McCallum
597
-- Lewis Blackwood
598
-- Liangzhen Zhu
599
-- Lily
600
-- Linus Unnebäck
601
-- Lipis
602
-- Liz
603
-- Logan Allen
604
-- Lovisa Svallingson
605
-- Lucas
606
-- Ludovico Fischer
607
-- Luigy Leon
608
-- Luke Belliveau
609
-- Luke Horvat
610
-- Lutz Rosema
611
-- MICHAEL JACKSON
612
-- MIKAMI Yoshiyuki
613
-- Maciej Kasprzyk
614
-- Maher Beg
615
-- Maksim Shastsel
616
-- Manas
617
-- Marcelo Alves
618
-- Marcin K.
619
-- Marcin Kwiatkowski
620
-- Marcin Mazurek
621
-- Marcin Szczepanski
622
-- Marcio Puga
623
-- Marcos Ojeda
624
-- Marcy Sutton
625
-- Mariano Desanze
626
-- Mario Souto
627
-- Marius Skaar Ludvigsen
628
-- Marjan
629
-- Mark Anderson
630
-- Mark Funk
631
-- Mark Hintz
632
-- Mark IJbema
633
-- Mark Murphy
634
-- Mark Pedrotti
635
-- Mark Penner
636
-- Mark Richardson
637
-- Mark Rushakoff
638
-- Mark Sun
639
-- Marks Polakovs
640
-- Marlon Landaverde
641
-- Marshall Bowers
642
-- Marshall Roch
643
-- Martin Andert
644
-- Martin Hochel
645
-- Martin Hujer
646
-- Martin Jul
647
-- Martin Konicek
648
-- Martin Mihaylov
649
-- Martin V
650
-- Masaki KOBAYASHI
651
-- Mateusz Burzyński
652
-- Mathieu M-Gosselin
653
-- Mathieu Savy
654
-- Matias Singers
655
-- Matsunoki
656
-- Matt Brookes
657
-- Matt Dunn-Rankin
658
-- Matt Harrison
659
-- Matt Huggins
660
-- Matt Stow
661
-- Matt Zabriskie
662
-- Matthew Dapena-Tretter
663
-- Matthew Herbst
664
-- Matthew Hodgson
665
-- Matthew Johnston
666
-- Matthew King
667
-- Matthew Looi
668
-- Matthew Miner
669
-- Matthew Shotton
670
-- Matthias Le Brun
671
-- Matti Nelimarkka
672
-- Mattijs Kneppers
673
-- Max Donchenko
674
-- Max F. Albrecht
675
-- Max Heiber
676
-- Max Stoiber
677
-- Maxi Ferreira
678
-- Maxim Abramchuk
679
-- Maxwel D'souza
680
-- Merrick Christensen
681
-- Mert Kahyaoğlu
682
-- Michael Chan
683
-- Michael Jackson
684
-- Michael McDermott
685
-- Michael O'Brien
686
-- Michael Randers-Pehrson
687
-- Michael Ridgway
688
-- Michael Sinov
689
-- Michael Terry
690
-- Michael Warner
691
-- Michael Wiencek
692
-- Michael Ziwisky
693
-- Michal Srb
694
-- Michał Ordon
695
-- Michał Pierzchała
696
-- Michele Bertoli
697
-- Michelle Todd
698
-- Michiya
699
-- Mihai Parparita
700
-- Mike D Pilsbury
701
-- Mike Groseclose
702
-- Mike Nordick
703
-- Mikhail Osher
704
-- Mikolaj Dadela
705
-- Miles Johnson
706
-- Miller Medeiros
707
-- Minwe LUO
708
-- Minwei Xu
709
-- Miorel Palii
710
-- Mitchel Humpherys
711
-- Mitermayer Reis
712
-- Moacir Rosa
713
-- Mojtaba Dashtinejad
714
-- Morhaus
715
-- Moshe Kolodny
716
-- Mouad Debbar
717
-- Murad
718
-- Murray M. Moss
719
-- Murtaza Haveliwala
720
-- NE-SmallTown
721
-- Nadeesha Cabral
722
-- Naman Goel
723
-- Nate
724
-- Nate Hunzaker
725
-- Nate Lee
726
-- Nate Norberg
727
-- Nathan Hardy
728
-- Nathan Smith
729
-- Nathan White
730
-- Nee
731
-- Neo
732
-- Neri Marschik
733
-- NestorTejero
734
-- Nguyen Truong Duy
735
-- Nicholas Bergson-Shilcock
736
-- Nicholas Clawson
737
-- Nick Balestra
738
-- Nick Fitzgerald
739
-- Nick Gavalas
740
-- Nick Kasten
741
-- Nick Merwin
742
-- Nick Presta
743
-- Nick Raienko
744
-- Nick Thompson
745
-- Nick Williams
746
-- Nik Nyby
747
-- Nikita Lebedev
748
-- Niklas Boström
749
-- Nikoloz Buligini
750
-- Nima Jahanshahi
751
-- Ning Xia
752
-- Niole Nelson
753
-- Nolan Lawson
754
-- Nuno Campos
755
-- OJ Kwon
756
-- Oiva Eskola
757
-- Oleg
758
-- Oleksii Markhovskyi
759
-- Oliver Zeigermann
760
-- Olivier Tassinari
761
-- Omid Hezaveh
762
-- Oscar Bolmsten
763
-- Oskari Mantere
764
-- Owen Coutts
765
-- Pablo Lacerda de Miranda
766
-- Paolo Moretti
767
-- Pascal Hartig
768
-- Patrick
769
-- Patrick Finnigan
770
-- Patrick Laughlin
771
-- Patrick Stapleton
772
-- Paul Benigeri
773
-- Paul Harper
774
-- Paul Kehrer
775
-- Paul Manta
776
-- Paul O’Shannessy
777
-- Paul Seiffert
778
-- Paul Shen
779
-- Pedro Nauck
780
-- Pete Hunt
781
-- Peter Blazejewicz
782
-- Peter Cottle
783
-- Peter Jaros
784
-- Peter Newnham
785
-- Peter Ruibal
786
-- Petri Lehtinen
787
-- Petri Lievonen
788
-- Phil Quinn
789
-- Phil Rajchgot
790
-- Philip Jackson
791
-- Philipp Spieß
792
-- Pieter De Baets
793
-- Pieter Vanderwerff
794
-- Piotr Czajkowski
795
-- Piper Chester
796
-- Pontus Abrahamsson
797
-- Pouja Nikray
798
-- Prathamesh Sonpatki
799
-- Prayag Verma
800
-- Preston Parry
801
-- Qin Junwen
802
-- RSG
803
-- Rachel D. Cartwright
804
-- Rafael
805
-- Rafael Angeline
806
-- Rafal Dittwald
807
-- Ragnar Þór Valgeirsson
808
-- Rahul Gupta
809
-- Rainer Oviir
810
-- Raito Bezarius
811
-- Rajat Sehgal
812
-- Rajiv Tirumalareddy
813
-- Ram Kaniyur
814
-- Randall Randall
815
-- Ray
816
-- Ray Dai
817
-- Raymond Ha
818
-- Reed Loden
819
-- Remko Tronçon
820
-- Ricardo
821
-- Rich Harris
822
-- Richard
823
-- Richard D. Worth
824
-- Richard Feldman
825
-- Richard Kho
826
-- Richard Littauer
827
-- Richard Livesey
828
-- Richard Maisano
829
-- Richard Roncancio
830
-- Richard Wood
831
-- Richie Thomas
832
-- Rick Beerendonk
833
-- Rick Ford
834
-- Riley Tomasek
835
-- Rob Arnold
836
-- Robert Binna
837
-- Robert Chang
838
-- Robert Haritonov
839
-- Robert Kielty
840
-- Robert Knight
841
-- Robert Martin
842
-- Robert Sedovsek
843
-- Robin Berjon
844
-- Robin Frischmann
845
-- Robin Ricard
846
-- Roderick Hsiao
847
-- Rodrigo Pombo
848
-- Rohan Nair
849
-- Roman Liutikov
850
-- Roman Matusevich
851
-- Roman Pominov
852
-- Roman Vanesyan
853
-- Rui Araújo
854
-- Russ
855
-- Ryan Lahfa
856
-- Ryan Seddon
857
-- Ryo Shibayama
858
-- Sahat Yalkabov
859
-- Saif Hakim
860
-- Saiichi Hashimoto
861
-- Sakina Crocker
862
-- Sam Balana
863
-- Sam Beveridge
864
-- Sam Saccone
865
-- Sam Selikoff
866
-- Samer Buna
867
-- Samuel
868
-- Samuel Hapák
869
-- Samuel Reed
870
-- Samuel Scheiderich
871
-- Samy Al Zahrani
872
-- Sander Spies
873
-- Sasha Aickin
874
-- Sassan Haradji
875
-- Satoshi Nakajima
876
-- Scott
877
-- Scott Burch
878
-- Scott Feeney
879
-- Sean Gransee
880
-- Sean Kinsey
881
-- Sean Smith
882
-- Seba
883
-- Sebastian Markbåge
884
-- Sebastian McKenzie
885
-- Senin Roman
886
-- Seoh Char
887
-- Sercan Eraslan
888
-- Serg
889
-- Sergey Generalov
890
-- Sergey Rubanov
891
-- Seyi Adebajo
892
-- Shane O'Sullivan
893
-- Shaun Trennery
894
-- ShihChi Huang
895
-- Shim Won
896
-- Shinnosuke Watanabe
897
-- Shogun Sea
898
-- Shota Kubota
899
-- Shripad K
900
-- Shubheksha Jalan
901
-- Shuhei Kagawa
902
-- Sibi
903
-- Simen Bekkhus
904
-- Simon Højberg
905
-- Simon Welsh
906
-- Simone Vittori
907
-- Skasi
908
-- Snowmanzzz(Zhengzhong Zhao)
909
-- Soichiro Kawamura
910
-- Soo Jae Hwang
911
-- Sophia
912
-- Sophia Westwood
913
-- Sophie Alpert
914
-- Sota Ohara
915
-- Spen Taylor
916
-- Spencer Ahrens
917
-- Spencer Handley
918
-- Sriram Thiagarajan
919
-- Stefan Dombrowski
920
-- Stephen John Sorensen
921
-- Stephen Murphy
922
-- Stephie
923
-- Sterling Cobb
924
-- Steve Baker
925
-- Steve Mao
926
-- Steven Luscher
927
-- Steven Syrek
928
-- Steven Vachon
929
-- Stolenkid
930
-- Stoyan Stefanov
931
-- Stuart Harris
932
-- SunHuawei
933
-- Sundeep Malladi
934
-- Sung Won Cho
935
-- Sunny Juneja
936
-- Sunny Ripert
937
-- Superlaziness
938
-- Sven Helmberger
939
-- Sverre Johansen
940
-- Swaroop SM
941
-- Sébastien Lorber
942
-- Sławomir Laskowski
943
-- Taegon Kim
944
-- Taeho Kim
945
-- Taehwan, No
946
-- Tanase Hagi
947
-- Tanner
948
-- Tay Yang Shun
949
-- Ted Kim
950
-- TedPowers
951
-- Tengfei Guo
952
-- Teodor Szente
953
-- Tetsuharu OHZEKI
954
-- Tetsuya Hasegawa
955
-- Thibaut Rizzi
956
-- Thomas Aylott
957
-- Thomas Boyt
958
-- Thomas Broadley
959
-- Thomas Reggi
960
-- Thomas Röggla
961
-- Thomas Shaddox
962
-- Thomas Shafer
963
-- ThomasCrvsr
964
-- Tiago Fernandez
965
-- Tienchai Wirojsaksaree
966
-- Tim Routowicz
967
-- Tim Schaub
968
-- Timothy Yung
969
-- Timur Carpeev
970
-- Tobias Reiss
971
-- Tom Duncalf
972
-- Tom Gasson
973
-- Tom Haggie
974
-- Tom Hauburger
975
-- Tom MacWright
976
-- Tom Occhino
977
-- Tomasz Kołodziejski
978
-- Tomoya Suzuki
979
-- Tomáš Hromada
980
-- Tony Rossi
981
-- Tony Spiro
982
-- Toru Kobayashi
983
-- Trevor Smith
984
-- Trinh Hoang Nhu
985
-- Troy DeMonbreun
986
-- Tsung Hung
987
-- Tyler Brock
988
-- Tyler Buchea
989
-- Tyler Deitz
990
-- Ujjwal Ojha
991
-- Uladzimir Havenchyk
992
-- Usman
993
-- Ustin Zarubin
994
-- Vadim Chernysh
995
-- Valentin Shergin
996
-- Van der Auwermeulen Grégoire
997
-- Varayut Lerdkanlayanawat
998
-- Varun Bhuvanendran
999
-- Varun Rau
1000
-- Vasiliy Loginevskiy
1001
-- Vedat Mahir YILMAZ
1002
-- Veljko Tornjanski
1003
-- Vesa Laakso
1004
-- Victor Alvarez
1005
-- Victor Homyakov
1006
-- Victor Koenders
1007
-- Victoria Quirante
1008
-- Vikash Agrawal
1009
-- Ville Immonen
1010
-- Vincent Riemer
1011
-- Vincent Siao
1012
-- Vincent Taing
1013
-- Vipul A M
1014
-- Vitaliy Potapov
1015
-- Vitaly Kramskikh
1016
-- Vitor Balocco
1017
-- Vjeux
1018
-- Vladimir Kovpak
1019
-- Vladimir Tikunov
1020
-- Volkan Unsal
1021
-- Wander Wang
1022
-- Wayne Larsen
1023
-- Weizenlol
1024
-- Whien
1025
-- WickyNilliams
1026
-- Will Myers
1027
-- William Hoffmann
1028
-- Wincent Colaiuta
1029
-- Wout Mertens
1030
-- Xavier Morel
1031
-- XuefengWu
1032
-- Yakov Dalinchuk
1033
-- Yan Li
1034
-- Yasar icli
1035
-- Yaxian
1036
-- YouBao Nong
1037
-- Yuichi Hagio
1038
-- Yura Chuchola
1039
-- Yuriy Dybskiy
1040
-- Yusong Liu
1041
-- Yutaka Nakajima
1042
-- Yuval Dekel
1043
-- Zac Braddy
1044
-- Zac Smith
1045
-- Zach Bruggeman
1046
-- Zach Ramaekers
1047
-- Zacharias
1048
-- Zeke Sikelianos
1049
-- Zhangjd
1050
-- adraeth
1051
-- ankitml
1052
-- arush
1053
-- bel3atar
1054
-- brafdlog
1055
-- brillout
1056
-- chen
1057
-- chocolateboy
1058
-- cjshawMIT
1059
-- clariroid
1060
-- claudiopro
1061
-- cloudy1
1062
-- comerc
1063
-- cutbko
1064
-- davidxi
1065
-- dfrownfelter
1066
-- djskinner
1067
-- dongmeng.ldm
1068
-- everdimension
1069
-- gillchristian
1070
-- gitanupam
1071
-- guoyong yi
1072
-- hanumanthan
1073
-- hao.huang
1074
-- hjmoss
1075
-- hkal
1076
-- iamchenxin
1077
-- iamdoron
1078
-- iawia002
1079
-- imagentleman
1080
-- imjanghyuk
1081
-- inkinworld
1082
-- jaaberg
1083
-- jddxf
1084
-- jinmmd
1085
-- koh-taka
1086
-- kohashi85
1087
-- ksvitkovsky
1088
-- laiso
1089
-- lamo2k123
1090
-- leeyoungalias
1091
-- li.li
1092
-- lucas
1093
-- maxprafferty
1094
-- mdogadailo
1095
-- mfijas
1096
-- mguidotto
1097
-- mondaychen
1098
-- najisawas
1099
-- neeldeep
1100
-- newvlad
1101
-- nhducit
1102
-- ogom
1103
-- pingan1927
1104
-- rgarifullin
1105
-- saiyagg
1106
-- scloudyy
1107
-- segmentationfaulter
1108
-- shifengchen
1109
-- songawee
1110
-- starkch
1111
-- sugarshin
1112
-- tokikuch
1113
-- ventuno
1114
-- wacii
1115
-- wali-s
1116
-- walrusfruitcake
1117
-- yiminghe
1118
-- youmoo
1119
-- yuntao.qyt
1120
-- z.ky
1121
-- zhangjg
1122
-- zhangs
1123
-- zombieJ
1124
-- zwhitchcox
1125
-- "Árni Hermann Reynisson"
1126
-- "元彦"
1127
-- "凌恒"
1128
-- "张敏"
1129
-- "王晓勇"
1130
-- "龙海燕"
\ No newline at end of file
docs/_data/authors.yml
deleted
-78
@@ -1,78 +0,0 @@
1
-# Map of short name to more information. `name` will be used but if you don't
2
-# want to use your real name, just use whatever. If url is included, your name
3
-# will be a link to the provided url.
4
-acdlite:
5
- name: Andrew Clark
6
- url: https://twitter.com/acdlite
7
-benigeri:
8
- name: Paul Benigeri
9
- url: https://github.com/benigeri
10
-chenglou:
11
- name: Cheng Lou
12
- url: https://twitter.com/_chenglou
13
-Daniel15:
14
- name: Daniel Lo Nigro
15
- url: http://dan.cx/
16
-fisherwebdev:
17
- name: Bill Fisher
18
- url: https://twitter.com/fisherwebdev
19
-flarnie:
20
- name: Flarnie Marchan
21
- url: https://twitter.com/ProbablyFlarnie
22
-gaearon:
23
- name: Dan Abramov
24
- url: https://twitter.com/dan_abramov
25
-jaredly:
26
- name: Jared Forsyth
27
- url: https://twitter.com/jaredforsyth
28
-jgebhardt:
29
- name: Jonas Gebhardt
30
- url: https://twitter.com/jonasgebhardt
31
-jimfb:
32
- name: Jim Sproch
33
- url: http://www.jimsproch.com
34
-jingc:
35
- name: Jing Chen
36
- url: https://twitter.com/jingc
37
-josephsavona:
38
- name: Joseph Savona
39
- url: https://twitter.com/en_JS
40
-keyanzhang:
41
- name: Keyan Zhang
42
- url: https://twitter.com/keyanzhang
43
-kmeht:
44
- name: Kunal Mehta
45
- url: https://github.com/kmeht
46
-LoukaN:
47
- name: Lou Husson
48
- url: https://twitter.com/loukan42
49
-matthewjohnston4:
50
- name: Matthew Johnston
51
- url: https://github.com/matthewathome
52
-nhunzaker:
53
- name: Nathan Hunzaker
54
- url: https://github.com/nhunzaker
55
-petehunt:
56
- name: Pete Hunt
57
- url: https://twitter.com/floydophone
58
-schrockn:
59
- name: Nick Schrock
60
- url: https://twitter.com/schrockn
61
-sebmarkbage:
62
- name: Sebastian Markbåge
63
- url: https://twitter.com/sebmarkbage
64
-sophiebits:
65
- name: Sophie Alpert
66
- url: https://sophiealpert.com
67
-steveluscher:
68
- name: Steven Luscher
69
- url: https://twitter.com/steveluscher
70
-vjeux:
71
- name: Vjeux
72
- url: https://twitter.com/vjeux
73
-wincent:
74
- name: Greg Hurrell
75
- url: https://twitter.com/wincent
76
-zpao:
77
- name: Paul O’Shannessy
78
- url: https://twitter.com/zpao
docs/_data/nav_community.yml
deleted
-14
@@ -1,14 +0,0 @@
1
-- title: Community Resources
2
- items:
3
- - id: support
4
- title: Where To Get Support
5
- - id: conferences
6
- title: Conferences
7
- - id: videos
8
- title: Videos
9
- - id: examples
10
- title: Examples
11
- href: https://github.com/facebook/react/wiki/Examples
12
- - id: complementary-tools
13
- title: Complementary Tools
14
- href: https://github.com/facebook/react/wiki/Complementary-Tools
docs/_data/nav_contributing.yml
deleted
-10
@@ -1,10 +0,0 @@
1
-- title: Contributing
2
- items:
3
- - id: how-to-contribute
4
- title: How to Contribute
5
- - id: codebase-overview
6
- title: Codebase Overview
7
- - id: implementation-notes
8
- title: Implementation Notes
9
- - id: design-principles
10
- title: Design Principles
docs/_data/nav_docs.yml
deleted
-81
@@ -1,81 +0,0 @@
1
-- title: Quick Start
2
- items:
3
- - id: installation
4
- title: Installation
5
- - id: hello-world
6
- title: Hello World
7
- - id: introducing-jsx
8
- title: Introducing JSX
9
- - id: rendering-elements
10
- title: Rendering Elements
11
- - id: components-and-props
12
- title: Components and Props
13
- - id: state-and-lifecycle
14
- title: State and Lifecycle
15
- - id: handling-events
16
- title: Handling Events
17
- - id: conditional-rendering
18
- title: Conditional Rendering
19
- - id: lists-and-keys
20
- title: Lists and Keys
21
- - id: forms
22
- title: Forms
23
- - id: lifting-state-up
24
- title: Lifting State Up
25
- - id: composition-vs-inheritance
26
- title: Composition vs Inheritance
27
- - id: thinking-in-react
28
- title: Thinking In React
29
-- title: Advanced Guides
30
- items:
31
- - id: jsx-in-depth
32
- title: JSX In Depth
33
- - id: typechecking-with-proptypes
34
- title: Typechecking With PropTypes
35
- - id: refs-and-the-dom
36
- title: Refs and the DOM
37
- - id: uncontrolled-components
38
- title: Uncontrolled Components
39
- - id: optimizing-performance
40
- title: Optimizing Performance
41
- - id: react-without-es6
42
- title: React Without ES6
43
- - id: react-without-jsx
44
- title: React Without JSX
45
- - id: reconciliation
46
- title: Reconciliation
47
- - id: context
48
- title: Context
49
- - id: portals
50
- title: Portals
51
- - id: web-components
52
- title: Web Components
53
- - id: higher-order-components
54
- title: Higher-Order Components
55
- - id: integrating-with-other-libraries
56
- title: Integrating with Other Libraries
57
- - id: accessibility
58
- title: Accessibility
59
-- title: Reference
60
- items:
61
- - id: react-api
62
- title: React
63
- subitems:
64
- - id: react-component
65
- title: React.Component
66
- - id: react-dom
67
- title: ReactDOM
68
- - id: react-dom-server
69
- title: ReactDOMServer
70
- - id: dom-elements
71
- title: DOM Elements
72
- - id: events
73
- title: SyntheticEvent
74
- - id: test-utils
75
- title: Test Utilities
76
- - id: shallow-renderer
77
- title: Shallow Renderer
78
- - id: test-renderer
79
- title: Test Renderer
80
- - id: javascript-environment-requirements
81
- title: JS Environment Requirements
docs/_data/nav_tutorial.yml
deleted
-90
@@ -1,90 +0,0 @@
1
-- title: Tutorial
2
- items:
3
- - id: tutorial
4
- title: Before We Start
5
- href: /tutorial/tutorial.html#before-we-start
6
- forceInternal: true
7
- subitems:
8
- - id: what-were-building
9
- title: What We're Building
10
- href: /tutorial/tutorial.html#what-were-building
11
- forceInternal: true
12
- - id: prerequisites
13
- title: Prerequisites
14
- href: /tutorial/tutorial.html#prerequisites
15
- forceInternal: true
16
- - id: how-to-follow-along
17
- title: How to Follow Along
18
- href: /tutorial/tutorial.html#how-to-follow-along
19
- forceInternal: true
20
- - id: help-im-stuck
21
- title: Help, I'm Stuck!
22
- href: /tutorial/tutorial.html#help-im-stuck
23
- forceInternal: true
24
- - id: overview
25
- title: Overview
26
- href: /tutorial/tutorial.html#overview
27
- forceInternal: true
28
- subitems:
29
- - id: what-is-react
30
- title: What is React?
31
- href: /tutorial/tutorial.html#what-is-react
32
- forceInternal: true
33
- - id: getting-started
34
- title: Getting Started
35
- href: /tutorial/tutorial.html#getting-started
36
- forceInternal: true
37
- - id: passing-data-through-props
38
- title: Passing Data Through Props
39
- href: /tutorial/tutorial.html#passing-data-through-props
40
- forceInternal: true
41
- - id: an-interactive-component
42
- title: An Interactive Component
43
- href: /tutorial/tutorial.html#an-interactive-component
44
- forceInternal: true
45
- - id: developer-tools
46
- title: Developer Tools
47
- href: /tutorial/tutorial.html#developer-tools
48
- forceInternal: true
49
- - id: lifting-state-up
50
- title: Lifting State Up
51
- href: /tutorial/tutorial.html#lifting-state-up
52
- forceInternal: true
53
- subitems:
54
- - id: why-immutability-is-important
55
- title: Why Immutability Is Important
56
- href: /tutorial/tutorial.html#why-immutability-is-important
57
- forceInternal: true
58
- - id: functional-components
59
- title: Functional Components
60
- href: /tutorial/tutorial.html#functional-components
61
- forceInternal: true
62
- - id: taking-turns
63
- title: Taking Turns
64
- href: /tutorial/tutorial.html#taking-turns
65
- forceInternal: true
66
- - id: declaring-a-winner
67
- title: Declaring a Winner
68
- href: /tutorial/tutorial.html#declaring-a-winner
69
- forceInternal: true
70
- - id: storing-a-history
71
- title: Storing A History
72
- href: /tutorial/tutorial.html#storing-a-history
73
- forceInternal: true
74
- subitems:
75
- - id: showing-the-moves
76
- title: Showing the Moves
77
- href: /tutorial/tutorial.html#showing-the-moves
78
- forceInternal: true
79
- - id: keys
80
- title: Keys
81
- href: /tutorial/tutorial.html#keys
82
- forceInternal: true
83
- - id: implementing-time-travel
84
- title: Implementing Time Travel
85
- href: /tutorial/tutorial.html#implementing-time-travel
86
- forceInternal: true
87
- - id: wrapping-up
88
- title: Wrapping Up
89
- href: /tutorial/tutorial.html#wrapping-up
90
- forceInternal: true
docs/_includes/blog_post.html
deleted
-32
@@ -1,32 +0,0 @@
1
-{% assign page = include.page %}
2
-
3
-<h1>
4
-{% if include.isPermalink %}
5
- {{ page.title }}
6
-{% else %}
7
- <a href="/react{{ page.url }}">{{ page.title }}</a>
8
-{% endif %}
9
-</h1>
10
-
11
-<p class="meta">
12
- {{ page.date | date: "%B %e, %Y" }}
13
- by
14
- {% for author in page.authors %}
15
- {% if author.url %}
16
- <a href="{{author.url}}">{{ author.name }}</a>
17
- {% else %}
18
- {{ author.name }}
19
- {% endif %}
20
- {% if forloop.last == false %} and {% endif %}
21
- {% endfor %}
22
-</p>
23
-
24
-<hr>
25
-
26
-<div class="post">
27
- {{ include.content }}
28
-</div>
29
-
30
-{% if include.isPermalink %}
31
- <div class="fb-like" data-send="true" data-width="650" data-show-faces="false"></div>
32
-{% endif %}
docs/_includes/footer.html
deleted
-41
@@ -1,41 +0,0 @@
1
-<footer class="nav-footer">
2
- <section class="sitemap">
3
- <a href="/react/" class="nav-home">
4
- </a>
5
- <div>
6
- <h5><a href="/react/docs/">Docs</a></h5>
7
- <a href="/react/docs/hello-world.html">Quick Start</a>
8
- <a href="/react/docs/thinking-in-react.html">Thinking in React</a>
9
- <a href="/react/tutorial/tutorial.html">Tutorial</a>
10
- <a href="/react/docs/jsx-in-depth.html">Advanced Guides</a>
11
- </div>
12
- <div>
13
- <h5><a href="/react/community/support.html">Community</a></h5>
14
- <a href="http://stackoverflow.com/questions/tagged/reactjs" target="_blank">Stack Overflow</a>
15
- <a href="https://discuss.reactjs.org/" target="_blank">Discussion Forum</a>
16
- <a href="https://discord.gg/0ZcbPKXt5bZjGY5n" target="_blank">Reactiflux Chat</a>
17
- <a href="https://www.facebook.com/react" target="_blank">Facebook</a>
18
- <a href="https://twitter.com/reactjs" target="_blank">Twitter</a>
19
- </div>
20
- <div>
21
- <h5><a href="/react/community/support.html">Resources</a></h5>
22
- <a href="/react/community/conferences.html">Conferences</a>
23
- <a href="/react/community/videos.html">Videos</a>
24
- <a href="https://github.com/facebook/react/wiki/Examples" target="_blank">Examples</a>
25
- <a href="https://github.com/facebook/react/wiki/Complementary-Tools" target="_blank">Complementary Tools</a>
26
- </div>
27
- <div>
28
- <h5>More</h5>
29
- <a href="/react/blog/">Blog</a>
30
- <a href="https://github.com/facebook/react" target="_blank">GitHub</a>
31
- <a href="http://facebook.github.io/react-native/" target="_blank">React Native</a>
32
- <a href="/react/acknowledgements.html">Acknowledgements</a>
33
- </div>
34
- </section>
35
- <a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource">
36
- <img src="/react/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/>
37
- </a>
38
- <section class="copyright">
39
- Copyright © {{ site.time | date: '%Y' }} Facebook Inc.
40
- </section>
41
-</footer>
docs/_includes/hero.html
deleted
-13
@@ -1,13 +0,0 @@
1
-<div class="hero">
2
- <div class="wrap">
3
- <div class="text"><strong>React</strong></div>
4
- <div class="minitext">
5
- A JavaScript library for building user interfaces
6
- </div>
7
-
8
- <div class="buttons-unit">
9
- <a href="/react/docs/hello-world.html" class="button">Get Started</a>
10
- <a href="/react/tutorial/tutorial.html" class="button">Take the Tutorial</a>
11
- </div>
12
- </div>
13
-</div>
docs/_includes/nav_blog.html
deleted
-11
@@ -1,11 +0,0 @@
1
-<div class="nav-docs nav-blog">
2
- <div class="nav-docs-section">
3
- <h3>Recent posts</h3>
4
- <ul>
5
- {% for post in site.posts limit:10 %}
6
- <li><a href="/react{{ post.url }}"{% if page.title == post.title %} class="active"{% endif %}>{{ post.title }}</a></li>
7
- {% endfor %}
8
- <li><a href="/react/blog/all.html">All posts ...</a></li>
9
- </ul>
10
- </div>
11
-</div>
docs/_includes/nav_community.html
deleted
-24
@@ -1,24 +0,0 @@
1
-<div class="nav-docs">
2
- <!-- Community Nav -->
3
- {% for section in site.data.nav_community %}
4
- <div class="nav-docs-section">
5
- <h3>{{ section.title }}</h3>
6
- <ul>
7
- {% for item in section.items %}
8
- <li>
9
- {{ item | community_sidebar_link }}
10
- {% if item.subitems %}
11
- <ul>
12
- {% for subitem in item.subitems %}
13
- <li>
14
- {{ subitem | community_sidebar_link }}
15
- </li>
16
- {% endfor %}
17
- </ul>
18
- {% endif %}
19
- </li>
20
- {% endfor %}
21
- </ul>
22
- </div>
23
- {% endfor %}
24
-</div>
docs/_includes/nav_docs.html
deleted
-39
@@ -1,39 +0,0 @@
1
-<div class="nav-docs">
2
- <!-- Docs Nav -->
3
- {% for section in site.data.nav_docs %}
4
- <div class="nav-docs-section">
5
- <h3>{{ section.title }}</h3>
6
- <ul>
7
- {% for item in section.items %}
8
- <li>
9
- {{ item | docs_sidebar_link}}
10
- {% if item.subitems %}
11
- <ul>
12
- {% for subitem in item.subitems %}
13
- <li>
14
- {{ subitem | docs_sidebar_link }}
15
- </li>
16
- {% endfor %}
17
- </ul>
18
- {% endif %}
19
- </li>
20
- {% endfor %}
21
- </ul>
22
- </div>
23
- {% endfor %}
24
-
25
- <!-- Contributing Nav -->
26
- {% for section in site.data.nav_contributing %}
27
- <div class="nav-docs-section">
28
- <h3>{{ section.title }}</h3>
29
- <ul>
30
- {% for item in section.items %}
31
- <li>
32
- <a href="/react/contributing/{{ item.id }}.html"{% if page.id == item.id %} class="active"{% endif %}>{{ item.title }}</a>
33
- </li>
34
- {% endfor %}
35
- </ul>
36
- </div>
37
- {% endfor %}
38
-
39
-</div>
docs/_includes/nav_tutorial.html
deleted
-24
@@ -1,24 +0,0 @@
1
-<div class="nav-docs">
2
- <!-- Tutorial Nav -->
3
- {% for section in site.data.nav_tutorial %}
4
- <div class="nav-docs-section">
5
- <h3>{{ section.title }}</h3>
6
- <ul>
7
- {% for item in section.items %}
8
- <li>
9
- {{ item | tutorial_sidebar_link }}
10
- {% if item.subitems %}
11
- <ul>
12
- {% for subitem in item.subitems %}
13
- <li>
14
- {{ subitem | tutorial_sidebar_link }}
15
- </li>
16
- {% endfor %}
17
- </ul>
18
- {% endif %}
19
- </li>
20
- {% endfor %}
21
- </ul>
22
- </div>
23
- {% endfor %}
24
-</div>
docs/_includes/navigation.html
deleted
-23
@@ -1,23 +0,0 @@
1
-<div class="nav-main">
2
- <div class="wrap">
3
- <a class="nav-home" href="/react/">
4
- <img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
5
- React
6
- </a>
7
- <div class="nav-lists">
8
- <ul class="nav-site nav-site-internal">
9
- <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>
10
- <li><a href="/react/tutorial/tutorial.html"{% if page.sectionid == 'tutorial' %} class="active"{% endif %}>Tutorial</a></li>
11
- <li><a href="/react/community/support.html"{% if page.sectionid == 'community' %} class="active"{% endif %}>Community</a></li>
12
- <li><a href="/react/blog/"{% if page.sectionid == 'blog' %} class="active"{% endif %}>Blog</a></li>
13
- <li class="nav-site-search">
14
- <input id="algolia-doc-search" type="text" placeholder="Search docs..." />
15
- </li>
16
- </ul>
17
- <ul class="nav-site nav-site-external">
18
- <li><a href="https://github.com/facebook/react">GitHub</a></li>
19
- <li><a href="https://github.com/facebook/react/releases">v{{site.react_version}}</a></li>
20
- </ul>
21
- </div>
22
- </div>
23
-</div>
docs/_js/ErrorDecoderComponent.js
deleted
-109
@@ -1,109 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- */
7
-/* global React ReactDOM errorMap:true */
8
-'use strict';
9
-
10
-function replaceArgs(msg, argList) {
11
- let argIdx = 0;
12
- return msg.replace(/%s/g, function() {
13
- const arg = argList[argIdx++];
14
- return arg === undefined ? '[missing argument]' : arg;
15
- });
16
-}
17
-
18
-function urlify(str) {
19
- const urlRegex = /(https:\/\/fb\.me\/[a-z\-]+)/g;
20
-
21
- const segments = str.split(urlRegex);
22
-
23
- for (let i = 0; i < segments.length; i++) {
24
- if (i % 2 === 1) {
25
- segments[i] = (<a key={i} target="_blank" href={segments[i]}>{segments[i]}</a>);
26
- }
27
- }
28
-
29
- return segments;
30
-}
31
-
32
-// ?invariant=123&args[]=foo&args[]=bar
33
-function parseQueryString() {
34
- const rawQueryString = window.location.search.substring(1);
35
- if (!rawQueryString) {
36
- return null;
37
- }
38
-
39
- let code = '';
40
- let args = [];
41
-
42
- const queries = rawQueryString.split('&');
43
- for (let i = 0; i < queries.length; i++) {
44
- const query = decodeURIComponent(queries[i]);
45
- if (query.indexOf('invariant=') === 0) {
46
- code = query.slice(10);
47
- } else if (query.indexOf('args[]=') === 0) {
48
- args.push(query.slice(7));
49
- }
50
- }
51
-
52
- return [code, args];
53
-}
54
-
55
-function ErrorResult(props) {
56
- const code = props.code;
57
- const errorMsg = props.msg;
58
-
59
- if (!code) {
60
- return (
61
- <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>
62
- );
63
- }
64
-
65
- return (
66
- <div>
67
- <p>The full text of the error you just encountered is:</p>
68
- <code>{urlify(errorMsg)}</code>
69
- </div>
70
- );
71
-}
72
-
73
-class ErrorDecoder extends React.Component {
74
- constructor(...args) {
75
- super(...args);
76
-
77
- this.state = {
78
- code: null,
79
- errorMsg: '',
80
- };
81
- }
82
-
83
- componentWillMount() {
84
- const parseResult = parseQueryString();
85
- if (parseResult != null) {
86
- const [code, args] = parseResult;
87
- if (errorMap[code]) {
88
- this.setState({
89
- code: code,
90
- errorMsg: replaceArgs(errorMap[code], args),
91
- });
92
- }
93
- }
94
- }
95
-
96
- render() {
97
- return (
98
- <ErrorResult
99
- code={this.state.code}
100
- msg={this.state.errorMsg}
101
- />
102
- );
103
- }
104
-}
105
-
106
-ReactDOM.render(
107
- <ErrorDecoder />,
108
- document.querySelector('.error-decoder-container')
109
-);
docs/_js/anchor-links.js
deleted
-30
@@ -1,30 +0,0 @@
1
-// Add anchors to headings client-side, which prevents them from showing up
2
-// in RSS feeds. See https://github.com/facebook/react/issues/4124.
3
-(function() {
4
- var selector = '.inner-content h2, .inner-content h3, .inner-content h4';
5
- var elements = document.querySelectorAll(selector);
6
- for (var i = 0; i < elements.length; i++) {
7
- var textMethod = document.body.textContent ? "textContent" : "innerText";
8
- var roughText = elements[i][textMethod];
9
-
10
- // Regex rule for making the title URL-friendly.
11
- var urlFriendlyText = roughText.trim()
12
- .toLowerCase()
13
- .replace(/\s+/g, '-')
14
- .replace(/[^A-Za-z0-9\-_.\p{Cyrillic}\p{Hangul}\p{Hiragana}\p{Katakana}\p{Han}]/g, '');
15
-
16
- // Create the anchor we'll jump to.
17
- var anchor = document.createElement('a');
18
- anchor.className = 'anchor';
19
- anchor.name = urlFriendlyText;
20
- elements[i].insertBefore(anchor, elements[i].firstChild);
21
-
22
- // Create the clickable "#" icon.
23
- var hashLink = document.createElement('a');
24
- var icon = document.createTextNode("#");
25
- hashLink.appendChild(icon);
26
- hashLink.className = 'hash-link';
27
- hashLink.href = '#' + urlFriendlyText;
28
- elements[i].appendChild(hashLink);
29
- }
30
-}());
docs/_js/examples/.eslintrc
deleted
-7
@@ -1,7 +0,0 @@
1
----
2
-rules:
3
- block-scoped-var: 0
4
- no-undef: 0
5
- strict: 0
6
- react/react-in-jsx-scope: 0
7
- react/jsx-no-undef: 0
docs/_js/examples/hello.js
deleted
-15
@@ -1,15 +0,0 @@
1
-var name = Math.random() > 0.5 ? 'Jane' : 'John';
2
-var HELLO_COMPONENT = `
3
-class HelloMessage extends React.Component {
4
- render() {
5
- return <div>Hello {this.props.name}</div>;
6
- }
7
-}
8
-
9
-ReactDOM.render(<HelloMessage name="${name}" />, mountNode);
10
-`.trim();
11
-
12
-ReactDOM.render(
13
- <ReactPlayground codeText={HELLO_COMPONENT} />,
14
- document.getElementById('helloExample')
15
-);
docs/_js/examples/markdown.js
deleted
-42
@@ -1,42 +0,0 @@
1
-var MARKDOWN_COMPONENT = `
2
-class MarkdownEditor extends React.Component {
3
- constructor(props) {
4
- super(props);
5
- this.handleChange = this.handleChange.bind(this);
6
- this.state = {value: 'Type some *markdown* here!'};
7
- }
8
-
9
- handleChange(e) {
10
- this.setState({value: e.target.value});
11
- }
12
-
13
- getRawMarkup() {
14
- var md = new Remarkable();
15
- return { __html: md.render(this.state.value) };
16
- }
17
-
18
- render() {
19
- return (
20
- <div className="MarkdownEditor">
21
- <h3>Input</h3>
22
- <textarea
23
- onChange={this.handleChange}
24
- defaultValue={this.state.value}
25
- />
26
- <h3>Output</h3>
27
- <div
28
- className="content"
29
- dangerouslySetInnerHTML={this.getRawMarkup()}
30
- />
31
- </div>
32
- );
33
- }
34
-}
35
-
36
-ReactDOM.render(<MarkdownEditor />, mountNode);
37
-`.trim();
38
-
39
-ReactDOM.render(
40
- <ReactPlayground codeText={MARKDOWN_COMPONENT} />,
41
- document.getElementById('markdownExample')
42
-);
docs/_js/examples/timer.js
deleted
-35
@@ -1,35 +0,0 @@
1
-var TIMER_COMPONENT = `
2
-class Timer extends React.Component {
3
- constructor(props) {
4
- super(props);
5
- this.state = {secondsElapsed: 0};
6
- }
7
-
8
- tick() {
9
- this.setState((prevState) => ({
10
- secondsElapsed: prevState.secondsElapsed + 1
11
- }));
12
- }
13
-
14
- componentDidMount() {
15
- this.interval = setInterval(() => this.tick(), 1000);
16
- }
17
-
18
- componentWillUnmount() {
19
- clearInterval(this.interval);
20
- }
21
-
22
- render() {
23
- return (
24
- <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
25
- );
26
- }
27
-}
28
-
29
-ReactDOM.render(<Timer />, mountNode);
30
-`.trim();
31
-
32
-ReactDOM.render(
33
- <ReactPlayground codeText={TIMER_COMPONENT} />,
34
- document.getElementById('timerExample')
35
-);
docs/_js/examples/todo.js
deleted
-61
@@ -1,61 +0,0 @@
1
-var TODO_COMPONENT = `
2
-class TodoApp extends React.Component {
3
- constructor(props) {
4
- super(props);
5
- this.handleChange = this.handleChange.bind(this);
6
- this.handleSubmit = this.handleSubmit.bind(this);
7
- this.state = {items: [], text: ''};
8
- }
9
-
10
- render() {
11
- return (
12
- <div>
13
- <h3>TODO</h3>
14
- <TodoList items={this.state.items} />
15
- <form onSubmit={this.handleSubmit}>
16
- <input onChange={this.handleChange} value={this.state.text} />
17
- <button>{'Add #' + (this.state.items.length + 1)}</button>
18
- </form>
19
- </div>
20
- );
21
- }
22
-
23
- handleChange(e) {
24
- this.setState({text: e.target.value});
25
- }
26
-
27
- handleSubmit(e) {
28
- e.preventDefault();
29
- if (!this.state.text.length) {
30
- return;
31
- }
32
- var newItem = {
33
- text: this.state.text,
34
- id: Date.now()
35
- };
36
- this.setState((prevState) => ({
37
- items: prevState.items.concat(newItem),
38
- text: ''
39
- }));
40
- }
41
-}
42
-
43
-class TodoList extends React.Component {
44
- render() {
45
- return (
46
- <ul>
47
- {this.props.items.map(item => (
48
- <li key={item.id}>{item.text}</li>
49
- ))}
50
- </ul>
51
- );
52
- }
53
-}
54
-
55
-ReactDOM.render(<TodoApp />, mountNode);
56
-`.trim();
57
-
58
-ReactDOM.render(
59
- <ReactPlayground codeText={TODO_COMPONENT} />,
60
- document.getElementById('todoExample')
61
-);
docs/_js/html-jsx-lib.js
deleted
-7
@@ -1,7 +0,0 @@
1
-// Ideally it would be nice to just redirect, but GitHub Pages is very basic and
2
-// lacks that functionality.
3
-console.warn(
4
- 'html-jsx-lib.js has moved to http://reactjs.github.io/react-magic/' +
5
- 'htmltojsx.min.js. If using React-Magic, you are no longer required to ' +
6
- 'link to this file. Please delete its <script> tag.'
7
-);
docs/_js/jsfiddle-integration.js
deleted
-10
@@ -1,10 +0,0 @@
1
-(function() {
2
- var tag = document.querySelector(
3
- 'script[type="application/javascript;version=1.7"]'
4
- );
5
- if (!tag || tag.textContent.indexOf('window.onload=function(){') !== -1) {
6
- alert('Bad JSFiddle configuration, please fork the original React JSFiddle');
7
- }
8
- tag.setAttribute('type', 'text/jsx;harmony=true');
9
- tag.textContent = tag.textContent.replace(/^\/\/<!\[CDATA\[/, '');
10
-})();
docs/_js/live_editor.js
deleted
-234
@@ -1,234 +0,0 @@
1
-var IS_MOBILE = (
2
- navigator.userAgent.match(/Android/i)
3
- || navigator.userAgent.match(/webOS/i)
4
- || navigator.userAgent.match(/iPhone/i)
5
- || navigator.userAgent.match(/iPad/i)
6
- || navigator.userAgent.match(/iPod/i)
7
- || navigator.userAgent.match(/BlackBerry/i)
8
- || navigator.userAgent.match(/Windows Phone/i)
9
-);
10
-
11
-var CodeMirrorEditor = createReactClass({
12
- propTypes: {
13
- lineNumbers: PropTypes.bool,
14
- onChange: PropTypes.func,
15
- },
16
- getDefaultProps: function() {
17
- return {
18
- lineNumbers: false,
19
- };
20
- },
21
- componentDidMount: function() {
22
- if (IS_MOBILE) return;
23
-
24
- this.editor = CodeMirror.fromTextArea(this.refs.editor, {
25
- mode: 'jsx',
26
- lineNumbers: this.props.lineNumbers,
27
- lineWrapping: true,
28
- smartIndent: false, // javascript mode does bad things with jsx indents
29
- matchBrackets: true,
30
- theme: 'solarized-light',
31
- readOnly: this.props.readOnly,
32
- });
33
- this.editor.on('change', this.handleChange);
34
- },
35
-
36
- componentDidUpdate: function() {
37
- if (this.props.readOnly) {
38
- this.editor.setValue(this.props.codeText);
39
- }
40
- },
41
-
42
- handleChange: function() {
43
- if (!this.props.readOnly) {
44
- this.props.onChange && this.props.onChange(this.editor.getValue());
45
- }
46
- },
47
-
48
- render: function() {
49
- // wrap in a div to fully contain CodeMirror
50
- var editor;
51
-
52
- if (IS_MOBILE) {
53
- editor = <pre style={{overflow: 'scroll'}}>{this.props.codeText}</pre>;
54
- } else {
55
- editor = <textarea ref="editor" defaultValue={this.props.codeText} />;
56
- }
57
-
58
- return (
59
- <div style={this.props.style} className={this.props.className}>
60
- {editor}
61
- </div>
62
- );
63
- },
64
-});
65
-
66
-var selfCleaningTimeout = {
67
- componentDidUpdate: function() {
68
- clearTimeout(this.timeoutID);
69
- },
70
-
71
- setTimeout: function() {
72
- clearTimeout(this.timeoutID);
73
- this.timeoutID = setTimeout.apply(null, arguments);
74
- },
75
-};
76
-
77
-var ReactPlayground = createReactClass({
78
- mixins: [selfCleaningTimeout],
79
-
80
- MODES: {JSX: 'JSX', JS: 'JS'}, //keyMirror({JSX: true, JS: true}),
81
-
82
- propTypes: {
83
- codeText: PropTypes.string.isRequired,
84
- transformer: PropTypes.func,
85
- renderCode: PropTypes.bool,
86
- showCompiledJSTab: PropTypes.bool,
87
- showLineNumbers: PropTypes.bool,
88
- editorTabTitle: PropTypes.string,
89
- },
90
-
91
- getDefaultProps: function() {
92
- return {
93
- transformer: function(code, options) {
94
- var presets = ['react'];
95
- if (!options || !options.skipES2015Transform) {
96
- presets.push('es2015');
97
- }
98
- return Babel.transform(code, {
99
- presets
100
- }).code;
101
- },
102
- editorTabTitle: 'Live JSX Editor',
103
- showCompiledJSTab: true,
104
- showLineNumbers: false,
105
- };
106
- },
107
-
108
- getInitialState: function() {
109
- return {
110
- mode: this.MODES.JSX,
111
- code: this.props.codeText,
112
- };
113
- },
114
-
115
- handleCodeChange: function(value) {
116
- this.setState({code: value});
117
- this.executeCode();
118
- },
119
-
120
- handleCodeModeSwitch: function(mode) {
121
- this.setState({mode: mode});
122
- },
123
-
124
- compileCode: function(options) {
125
- return this.props.transformer(this.state.code, options);
126
- },
127
-
128
- render: function() {
129
- var isJS = this.state.mode === this.MODES.JS;
130
- var compiledCode = '';
131
- try {
132
- compiledCode = this.compileCode({skipES2015Transform: true});
133
- } catch (err) {}
134
-
135
- var JSContent =
136
- <CodeMirrorEditor
137
- key="js"
138
- className="playgroundStage CodeMirror-readonly"
139
- onChange={this.handleCodeChange}
140
- codeText={compiledCode}
141
- readOnly={true}
142
- lineNumbers={this.props.showLineNumbers}
143
- />;
144
-
145
- var JSXContent =
146
- <CodeMirrorEditor
147
- key="jsx"
148
- onChange={this.handleCodeChange}
149
- className="playgroundStage"
150
- codeText={this.state.code}
151
- lineNumbers={this.props.showLineNumbers}
152
- />;
153
-
154
- var JSXTabClassName =
155
- 'playground-tab' + (isJS ? '' : ' playground-tab-active');
156
- var JSTabClassName =
157
- 'playground-tab' + (isJS ? ' playground-tab-active' : '');
158
-
159
- var JSTab =
160
- <div
161
- className={JSTabClassName}
162
- onClick={this.handleCodeModeSwitch.bind(this, this.MODES.JS)}>
163
- Compiled JS
164
- </div>;
165
-
166
- var JSXTab =
167
- <div
168
- className={JSXTabClassName}
169
- onClick={this.handleCodeModeSwitch.bind(this, this.MODES.JSX)}>
170
- {this.props.editorTabTitle}
171
- </div>
172
-
173
- return (
174
- <div className="playground">
175
- <div>
176
- {JSXTab}
177
- {this.props.showCompiledJSTab && JSTab}
178
- </div>
179
- <div className="playgroundCode">
180
- {isJS ? JSContent : JSXContent}
181
- </div>
182
- <div className="playgroundPreview">
183
- <div ref="mount" />
184
- </div>
185
- </div>
186
- );
187
- },
188
-
189
- componentDidMount: function() {
190
- this.executeCode();
191
- },
192
-
193
- componentDidUpdate: function(prevProps, prevState) {
194
- // execute code only when the state's not being updated by switching tab
195
- // this avoids re-displaying the error, which comes after a certain delay
196
- if (this.props.transformer !== prevProps.transformer ||
197
- this.state.code !== prevState.code) {
198
- this.executeCode();
199
- }
200
- },
201
-
202
- executeCode: function() {
203
- var mountNode = this.refs.mount;
204
-
205
- try {
206
- ReactDOM.unmountComponentAtNode(mountNode);
207
- } catch (e) { }
208
-
209
- try {
210
- var compiledCode;
211
- if (this.props.renderCode) {
212
- compiledCode = this.compileCode({skipES2015Transform: true});
213
- ReactDOM.render(
214
- <CodeMirrorEditor codeText={compiledCode} readOnly={true} />,
215
- mountNode
216
- );
217
- } else {
218
- compiledCode = this.compileCode({skipES2015Transform: false});
219
- eval(compiledCode);
220
- }
221
- } catch (err) {
222
- // Babel errors are preformatted, runtime errors are not.
223
- const errorMessage = err._babel ?
224
- <pre style={{overflowX: 'auto'}} className="playgroundError">{err.toString()}</pre> :
225
- <div className="playgroundError">{err.toString()}</div>;
226
- this.setTimeout(function() {
227
- ReactDOM.render(
228
- errorMessage,
229
- mountNode
230
- );
231
- }, 500);
232
- }
233
- },
234
-});
docs/_layouts/community.html
deleted
-29
@@ -1,29 +0,0 @@
1
----
2
-layout: default
3
-sectionid: community
4
----
5
-
6
-<section class="content wrap communityContent">
7
- <div class="inner-content">
8
- <a class="edit-page-link"
9
- href="https://github.com/facebook/react/tree/master/docs/{{ page.path }}"
10
- target="_blank">Edit on GitHub</a>
11
- <h1>
12
- {{ page.title }}
13
- </h1>
14
- <div class="subHeader">{{ page.description }}</div>
15
-
16
- {{ content }}
17
-
18
- <div class="docs-prevnext">
19
- {% if page.prev %}
20
- <a class="docs-prev" href="/react/community/{{ page.prev }}">← Prev</a>
21
- {% endif %}
22
- {% if page.next %}
23
- <a class="docs-next" href="/react/community/{{ page.next }}">Next →</a>
24
- {% endif %}
25
- </div>
26
- </div>
27
-
28
- {% include nav_community.html %}
29
-</section>
docs/_layouts/contributing.html
deleted
-23
@@ -1,23 +0,0 @@
1
----
2
-layout: default
3
-sectionid: contributing
4
----
5
-
6
-<section class="content wrap documentationContent">
7
- <div class="inner-content">
8
- <h1>{{ page.title }}</h1>
9
- <div class="subHeader">{{ page.description }}</div>
10
- {{ content }}
11
-
12
- <div class="docs-prevnext">
13
- {% if page.prev %}
14
- <a class="docs-prev" href="/react/contributing/{{ page.prev }}">← Prev</a>
15
- {% endif %}
16
- {% if page.next %}
17
- <a class="docs-next" href="/react/contributing/{{ page.next }}">Next →</a>
18
- {% endif %}
19
- </div>
20
- </div>
21
-
22
- {% include nav_docs.html %}
23
-</section>
docs/_layouts/default.html
deleted
-96
@@ -1,96 +0,0 @@
1
-{% if page.excerpt %}
2
-{% assign type = 'article' %}
3
-{% assign sectionTitle = 'React Blog' %}
4
-{% assign description = page.excerpt | strip_html %}
5
-{% else %}
6
-{% assign type = 'website' %}
7
-{% assign sectionTitle = 'React' %}
8
-{% assign description = 'A JavaScript library for building user interfaces' %}
9
-{% endif %}
10
-{% if page.id == 'home' %}
11
- {% assign title = sectionTitle | append: ' - ' | append: page.title %}
12
-{% else %}
13
- {% assign title = page.title | append: ' - ' | append: sectionTitle %}
14
-{% endif %}
15
-<!DOCTYPE html>
16
-<!--[if IE]><![endif]-->
17
-<html>
18
-<head>
19
- <meta charset="utf-8">
20
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
21
- <title>{{ title }}</title>
22
- <meta name="viewport" content="width=device-width, initial-scale=1">
23
- <meta property="og:title" content="{{ title }}">
24
- <meta property="og:type" content="{{ type }}">
25
- <meta property="og:url" content="https://reactjs.org/{{ page.url }}">
26
- <meta property="og:image" content="https://reactjs.org/logo-og.png">
27
- <meta property="og:description" content="{{ description }}">
28
- <meta property="fb:app_id" content="623268441017527">
29
-
30
- <link rel="shortcut icon" href="/react/favicon.ico">
31
- <link rel="alternate" type="application/rss+xml" title="{{ site.name }}" href="{{ site.url }}{{ site.baseurl }}/feed.xml">
32
-
33
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
34
- <link rel="stylesheet" href="/react/css/syntax.css">
35
- <link rel="stylesheet" href="/react/css/codemirror.css">
36
- <link rel="stylesheet" href="/react/css/react.css">
37
-
38
- <script src="//use.typekit.net/vqa1hcx.js"></script>
39
- <script>try{Typekit.load();}catch(e){}</script>
40
-
41
- <!--[if lte IE 8]>
42
- <script src="https://unpkg.com/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
43
- <script src="https://unpkg.com/es5-shim@4.5.9/es5-shim.min.js"></script>
44
- <script src="https://unpkg.com/es5-shim@4.5.9/es5-sham.min.js"></script>
45
- <![endif]-->
46
- <script src="https://unpkg.com/docsearch.js@1.5.0/dist/cdn/docsearch.min.js"></script>
47
- <script src="https://unpkg.com/codemirror@5.15.2"></script>
48
- <script src="https://unpkg.com/codemirror@5.15.2/mode/javascript/javascript.js"></script>
49
- <script src="https://unpkg.com/codemirror@5.15.2/mode/xml/xml.js"></script>
50
- <script src="https://unpkg.com/codemirror@5.15.2/mode/jsx/jsx.js"></script>
51
- <script src="https://unpkg.com/prop-types/prop-types.min.js"></script>
52
- <script src="https://unpkg.com/react/umd/react.production.min.js"></script>
53
- <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
54
- <script src="https://unpkg.com/create-react-class/create-react-class.min.js"></script>
55
- <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
56
- <script src="/react/js/live_editor.js"></script>
57
-</head>
58
-<body>
59
-
60
- <div class="container">
61
-
62
- {% include navigation.html %}
63
-
64
- {{ content }}
65
-
66
- {% include footer.html %}
67
- </div>
68
-
69
- <div id="fb-root"></div>
70
- <script src="/react/js/anchor-links.js"></script>
71
- <script>
72
- (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
73
- (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
74
- m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
75
- })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
76
- ga('create', 'UA-41298772-1', 'facebook.github.io');
77
- ga('send', 'pageview');
78
-
79
- !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
80
-
81
- (function(d, s, id) {
82
- var js, fjs = d.getElementsByTagName(s)[0];
83
- if (d.getElementById(id)) return;
84
- js = d.createElement(s); js.id = id;
85
- js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId=623268441017527";
86
- fjs.parentNode.insertBefore(js, fjs);
87
- }(document, 'script', 'facebook-jssdk'));
88
-
89
- docsearch({
90
- apiKey: '36221914cce388c46d0420343e0bb32e',
91
- indexName: 'react',
92
- inputSelector: '#algolia-doc-search'
93
- });
94
- </script>
95
-</body>
96
-</html>
docs/_layouts/docs.html
deleted
-27
@@ -1,27 +0,0 @@
1
----
2
-layout: default
3
-sectionid: docs
4
----
5
-
6
-<section class="content wrap documentationContent">
7
- <div class="inner-content">
8
- <a class="edit-page-link" href="https://github.com/facebook/react/tree/master/docs/{{ page.path }}" target="_blank">Edit on GitHub</a>
9
- <h1>
10
- {{ page.title }}
11
- </h1>
12
- <div class="subHeader">{{ page.description }}</div>
13
-
14
- {{ content }}
15
-
16
- <div class="docs-prevnext">
17
- {% if page.prev %}
18
- <a class="docs-prev" href="/react/docs/{{ page.prev }}">← Prev</a>
19
- {% endif %}
20
- {% if page.next %}
21
- <a class="docs-next" href="/react/docs/{{ page.next }}">Next →</a>
22
- {% endif %}
23
- </div>
24
- </div>
25
-
26
- {% include nav_docs.html %}
27
-</section>
docs/_layouts/hero.html
deleted
-11
@@ -1,11 +0,0 @@
1
----
2
-layout: default
3
----
4
-
5
-{% if page.id == 'home' %}
6
- {% include hero.html %}
7
-{% endif %}
8
-
9
-<section class="content wrap">
10
- {{ content }}
11
-</section>
docs/_layouts/page.html
deleted
-7
@@ -1,7 +0,0 @@
1
----
2
-layout: default
3
----
4
-
5
-<section class="content wrap">
6
- {{ content }}
7
-</section>
docs/_layouts/post.html
deleted
-12
@@ -1,12 +0,0 @@
1
----
2
-layout: default
3
-sectionid: blog
4
----
5
-
6
-<section class="content wrap blogContent">
7
-
8
- <div class="inner-content">
9
- {% include blog_post.html isPermalink="true" page=page content=content %}
10
- </div>
11
- {% include nav_blog.html %}
12
-</section>
docs/_layouts/redirect.html
deleted
-8
@@ -1,8 +0,0 @@
1
-<!DOCTYPE html>
2
-<meta charset="utf-8">
3
-<title>Redirecting...</title>
4
-<link rel=canonical href="{{ page.dest_url }}">
5
-<meta http-equiv=refresh content="0; url={{ page.dest_url }}">
6
-<h1>Redirecting...</h1>
7
-<a href="{{ page.dest_url }}">Click here if you are not redirected.</a>
8
-<script>location="{{ page.dest_url }}"</script>
docs/_layouts/single.html
deleted
-22
@@ -1,22 +0,0 @@
1
----
2
-layout: default
3
----
4
-
5
-<section class="content wrap documentationContent nosidebar">
6
- <div class="inner-content">
7
- <h1>{{ page.title }}</h1>
8
- <div class="subHeader">{{ page.description }}</div>
9
- {{ content }}
10
-
11
- {% if page.prev or page.next %}
12
- <div class="docs-prevnext">
13
- {% if page.prev %}
14
- <a class="docs-prev" href="/react/docs/{{ page.prev }}">← Prev</a>
15
- {% endif %}
16
- {% if page.next %}
17
- <a class="docs-next" href="/react/docs/{{ page.next }}">Next →</a>
18
- {% endif %}
19
- </div>
20
- {% endif %}
21
- </div>
22
-</section>
docs/_layouts/tutorial.html
deleted
-29
@@ -1,29 +0,0 @@
1
----
2
-layout: default
3
-sectionid: tutorial
4
----
5
-
6
-<section class="content wrap documentationContent">
7
- {% include nav_tutorial.html %}
8
-
9
- <div class="inner-content">
10
- <a class="edit-page-link"
11
- href="https://github.com/facebook/react/tree/master/docs/{{ page.path }}"
12
- target="_blank">Edit on GitHub</a>
13
- <h1>
14
- {{ page.title }}
15
- </h1>
16
- <div class="subHeader">{{ page.description }}</div>
17
-
18
- {{ content }}
19
-
20
- <div class="docs-prevnext">
21
- {% if page.prev %}
22
- <a class="docs-prev" href="/react/tutorial/{{ page.prev }}">← Prev</a>
23
- {% endif %}
24
- {% if page.next %}
25
- <a class="docs-next" href="/react/tutorial/{{ page.next }}">Next →</a>
26
- {% endif %}
27
- </div>
28
- </div>
29
-</section>
docs/_plugins/authors.rb
deleted
-22
@@ -1,22 +0,0 @@
1
-# This transforms the data associated with each post, specifically the author.
2
-# We store our author information in a yaml file and specify the keys in The
3
-# post front matter. Instead of looking up the complete data each time we need
4
-# it, we'll just look it up here and assign. This plays nicely with tools like
5
-# jekyll-feed which expect post.author to be in a specific format.
6
-module Authors
7
- class Generator < Jekyll::Generator
8
- def generate(site)
9
- site.posts.docs.each do |post|
10
- authors = []
11
- if post['author'].kind_of?(Array)
12
- for author in post['author']
13
- authors.push(site.data['authors'][author])
14
- end
15
- else
16
- authors.push(site.data['authors'][post['author']])
17
- end
18
- post.data['authors'] = authors
19
- end
20
- end
21
- end
22
-end
docs/_plugins/highlight_lines.rb
deleted
-39
@@ -1,39 +0,0 @@
1
-# Replace Jekyll's handling of the Redcarpet code_block (which already adds
2
-# support for highlighting, but needs support for the very non-standard
3
-# "code fences with line highlights" extension).
4
-# Since this is currently depending on Redcarpet to cooperate, we are going to
5
-# be naive, and only allow line highlighting when a language is specified. If
6
-# you don't want any syntax highlighting but want to highlight lines, then you
7
-# need to specify text as your language, like:
8
-# ```text{4}
9
-
10
-
11
-module Jekyll
12
- module Converters
13
- class Markdown
14
- class RedcarpetParser
15
- module WithPygments
16
- def block_code(code, lang)
17
- require 'pygments'
18
- lang_parts = lang && lang.split('{')
19
- lang = lang_parts && !lang_parts[0].empty? && lang_parts[0] || 'text'
20
- hl_lines = ''
21
- if lang_parts && lang_parts.size >= 2
22
- hl_lines = lang_parts[1].gsub(/[{}]/, '').split(',').map do |ln|
23
- if matches = /(\d+)-(\d+)/.match(ln)
24
- ln = Range.new(matches[1], matches[2]).to_a.join(' ')
25
- end
26
- ln
27
- end.join(' ')
28
- end
29
- output = add_code_tags(
30
- Pygments.highlight(code, :lexer => lang,
31
- :options => { :encoding => 'utf-8', :hl_lines => hl_lines }),
32
- lang
33
- )
34
- end
35
- end
36
- end
37
- end
38
- end
39
-end
docs/_plugins/sidebar_item.rb
deleted
-40
@@ -1,40 +0,0 @@
1
-module Jekyll
2
- module SidebarItemFilter
3
- def docs_sidebar_link(item)
4
- return sidebar_helper(item, 'docs')
5
- end
6
-
7
- def docs_old_sidebar_link(item)
8
- return sidebar_helper(item, 'docs-old')
9
- end
10
-
11
- def community_sidebar_link(item)
12
- return sidebar_helper(item, 'community')
13
- end
14
-
15
- def tutorial_sidebar_link(item)
16
- return sidebar_helper(item, 'tutorial')
17
- end
18
-
19
- def sidebar_helper(item, group)
20
- forceInternal = item["forceInternal"]
21
-
22
- pageID = @context.registers[:page]["id"]
23
- itemID = item["id"]
24
- href = item["href"] || "/react/#{group}/#{itemID}.html"
25
- classes = []
26
- if pageID == itemID
27
- classes.push("active")
28
- end
29
- if item["href"] && (forceInternal == nil)
30
- classes.push("external")
31
- end
32
- className = classes.size > 0 ? " class=\"#{classes.join(' ')}\"" : ""
33
-
34
- return "<a href=\"#{href}\"#{className}>#{item["title"]}</a>"
35
- end
36
-
37
- end
38
-end
39
-
40
-Liquid::Template.register_filter(Jekyll::SidebarItemFilter)
docs/_posts/2013-06-02-jsfiddle-integration.md
deleted
-9
@@ -1,9 +0,0 @@
1
----
2
-title: JSFiddle Integration
3
-author: [vjeux]
4
----
5
-
6
-[JSFiddle](https://jsfiddle.net) just announced support for React. This is an exciting news as it makes collaboration on snippets of code a lot easier. You can play around this **[base React JSFiddle](http://jsfiddle.net/vjeux/kb3gN/)**, fork it and share it! A [fiddle without JSX](http://jsfiddle.net/vjeux/VkebS/) is also available.
7
-
8
-
9
-<blockquote class="twitter-tweet" align="center"><p>React (by Facebook) is now available on JSFiddle. <a href="http://t.co/wNQf9JPv5u" title="http://facebook.github.io/react/">facebook.github.io/react/</a></p>— JSFiddle (@jsfiddle) <a href="https://twitter.com/jsfiddle/status/341114115781177344">June 2, 2013</a></blockquote>
docs/_posts/2013-06-05-why-react.md
deleted
-88
@@ -1,88 +0,0 @@
1
----
2
-title: Why did we build React?
3
-author: [petehunt]
4
----
5
-
6
-There are a lot of JavaScript MVC frameworks out there. Why did we build React
7
-and why would you want to use it?
8
-
9
-## React isn't an MVC framework.
10
-
11
-React is a library for building composable user interfaces. It encourages
12
-the creation of reusable UI components which present data that changes over
13
-time.
14
-
15
-## React doesn't use templates.
16
-
17
-Traditionally, web application UIs are built using templates or HTML directives.
18
-These templates dictate the full set of abstractions that you are allowed to use
19
-to build your UI.
20
-
21
-React approaches building user interfaces differently by breaking them into
22
-**components**. This means React uses a real, full featured programming language
23
-to render views, which we see as an advantage over templates for a few reasons:
24
-
25
-- **JavaScript is a flexible, powerful programming language** with the ability
26
- to build abstractions. This is incredibly important in large applications.
27
-- By unifying your markup with its corresponding view logic, React can actually
28
- make views **easier to extend and maintain**.
29
-- By baking an understanding of markup and content into JavaScript, there's
30
- **no manual string concatenation** and therefore less surface area for XSS
31
- vulnerabilities.
32
-
33
-We've also created [JSX](/docs/jsx-in-depth.html), an optional syntax
34
-extension, in case you prefer the readability of HTML to raw JavaScript.
35
-
36
-## Reactive updates are dead simple.
37
-
38
-React really shines when your data changes over time.
39
-
40
-In a traditional JavaScript application, you need to look at what data changed
41
-and imperatively make changes to the DOM to keep it up-to-date. Even AngularJS,
42
-which provides a declarative interface via directives and data binding [requires
43
-a linking function to manually update DOM nodes](https://code.angularjs.org/1.0.8/docs/guide/directive#reasonsbehindthecompilelinkseparation).
44
-
45
-React takes a different approach.
46
-
47
-When your component is first initialized, the `render` method is called,
48
-generating a lightweight representation of your view. From that representation,
49
-a string of markup is produced, and injected into the document. When your data
50
-changes, the `render` method is called again. In order to perform updates as
51
-efficiently as possible, we diff the return value from the previous call to
52
-`render` with the new one, and generate a minimal set of changes to be applied
53
-to the DOM.
54
-
55
-> The data returned from `render` is neither a string nor a DOM node -- it's a
56
-> lightweight description of what the DOM should look like.
57
-
58
-We call this process **reconciliation**. Check out
59
-[this jsFiddle](http://jsfiddle.net/2h6th4ju/) to see an example of
60
-reconciliation in action.
61
-
62
-Because this re-render is so fast (around 1ms for TodoMVC), the developer
63
-doesn't need to explicitly specify data bindings. We've found this approach
64
-makes it easier to build apps.
65
-
66
-## HTML is just the beginning.
67
-
68
-Because React has its own lightweight representation of the document, we can do
69
-some pretty cool things with it:
70
-
71
-- Facebook has dynamic charts that render to `<canvas>` instead of HTML.
72
-- Instagram is a "single page" web app built entirely with React and
73
- `Backbone.Router`. Designers regularly contribute React code with JSX.
74
-- We've built internal prototypes that run React apps in a web worker and use
75
- React to drive **native iOS views** via an Objective-C bridge.
76
-- You can run React
77
- [on the server](https://github.com/petehunt/react-server-rendering-example)
78
- for SEO, performance, code sharing and overall flexibility.
79
-- Events behave in a consistent, standards-compliant way in all browsers
80
- (including IE8) and automatically use
81
- [event delegation](http://davidwalsh.name/event-delegate).
82
-
83
-Head on over to https://reactjs.org to check out what we have
84
-built. Our documentation is geared towards building apps with the framework,
85
-but if you are interested in the nuts and bolts
86
-[get in touch](/support.html) with us!
87
-
88
-Thanks for reading!
docs/_posts/2013-06-12-community-roundup.md
deleted
-47
@@ -1,47 +0,0 @@
1
----
2
-title: "Community Round-up #1"
3
-author: [vjeux]
4
----
5
-
6
-React was open sourced two weeks ago and it's time for a little round-up of what has been going on.
7
-
8
-## Khan Academy Question Editor
9
-
10
-It looks like [Sophie Alpert](http://sophiebits.com/) is the first person outside of Facebook and Instagram to push React code to production. We are very grateful for her contributions in form of pull requests, bug reports and presence on IRC ([#reactjs on Freenode](irc://chat.freenode.net/reactjs)). Sophie wrote about her experience using React:
11
-
12
-> I just rewrote a 2000-line project in React and have now made a handful of pull requests to React. Everything about React I've seen so far seems really well thought-out and I'm proud to be the first non-FB/IG production user of React.
13
->
14
-> The project that I rewrote in React (and am continuing to improve) is the Khan Academy question editor which content creators can use to enter questions and hints that will be presented to students:
15
-> <figure><a href="http://sophiebits.com/2013/06/09/using-react-to-speed-up-khan-academy.html"><img src="../img/blog/khan-academy-editor.png"></a></figure>
16
->
17
-> [Read the full post...](http://sophiebits.com/2013/06/09/using-react-to-speed-up-khan-academy.html)
18
-
19
-## Pimp my Backbone.View (by replacing it with React)
20
-
21
-[Paul Seiffert](https://blog.mayflower.de/) wrote a blog post that explains how to integrate React into Backbone applications.
22
-
23
-> React has some interesting concepts for JavaScript view objects that can be used to eliminate this one big problem I have with Backbone.js.
24
->
25
-> As in most MVC implementations (although React is probably just a VC implementation), a view is one portion of the screen that is managed by a controlling object. This object is responsible for deciding when to re-render the view and how to react to user input. With React, these view-controllers objects are called components. A component knows how to render its view and how to handle to the user's interaction with it.
26
->
27
-> The interesting thing is that React is figuring out by itself when to re-render a view and how to do this in the most efficient way.
28
->
29
-> [Read the full post...](https://blog.mayflower.de/3937-Backbone-React.html)
30
-
31
-## Using facebook's React with require.js
32
-
33
-[Mario Mueller](http://blog.xenji.com/) wrote a menu component in React and was able to easily integrate it with require.js, EventEmitter2 and bower.
34
-
35
-> I recently stumbled upon facebook's React library, which is a JavaScript library for building reusable frontend components. Even if this lib is only at version 0.3.x it behaves very stable, it is fast and is fun to code. I'm a big fan of require.js, so I tried to use React within the require.js eco system. It was not as hard as expected and here are some examples and some thoughts about it.
36
->
37
-> [Read the full post...](http://blog.xenji.com/2013/06/facebooks-react-require-js.html)
38
-
39
-## Origins of React
40
-
41
-[Pete Hunt](http://www.petehunt.net/blog/) explained what differentiates React from other JavaScript libraries in [a previous blog post](/blog/2013/06/05/why-react.html). [Lee Byron](http://leebyron.com/) gives another perspective on Quora:
42
-
43
-> React isn't quite like any other popular JavaScript libraries, and it solves a very specific problem: complex UI rendering. It's also intended to be used along side many other popular libraries. For example, React works well with Backbone.js, amongst many others.
44
->
45
-> React was born out of frustrations with the common pattern of writing two-way data bindings in complex MVC apps. React is an implementation of one-way data bindings.
46
->
47
-> [Read the full post...](https://www.quora.com/React-JS-Library/How-is-Facebooks-React-JavaScript-library/answer/Lee-Byron?srid=3DcX)
docs/_posts/2013-06-19-community-roundup-2.md
deleted
-70
@@ -1,70 +0,0 @@
1
----
2
-title: "Community Round-up #2"
3
-author: [vjeux]
4
----
5
-
6
-Since the launch we have received a lot of feedback and are actively working on React 0.4. In the meantime, here are the highlights of this week.
7
-
8
-## Some quick thoughts on React
9
-
10
-[Andrew Greig](http://www.andrewgreig.com/) made a blog post that gives a high level description of what React is.
11
-
12
-> I have been using Facebooks recently released JavaScript framework called React.js for the last few days and have managed to obtain a rather high level understanding of how it works and formed a good perspective on how it fits in to the entire javascript framework ecosystem.
13
->
14
-> Basically, React is not an MVC framework. It is not a replacement for Backbone or Knockout or Angular, instead it is designed to work with existing frameworks and help extend their functionality.
15
->
16
-> It is designed for building big UIs. The type where you have lots of reusable components that are handling events and presenting and changing some backend data. In a traditional MVC app, React fulfils the role of the View. So you would still need to handle the Model and Controller on your own.
17
->
18
-> I found the best way to utilise React was to pair it with Backbone, with React replacing the Backbone View, or to write your own Model/Data object and have React communicate with that.
19
->
20
-> [Read the full post...](http://www.andrewgreig.com/637/)
21
-
22
-## React and Socket.IO Chat Application
23
-
24
-[Danial Khosravi](https://danialk.github.io/) made a real-time chat application that interacts with the back-end using Socket.IO.
25
-
26
-> A week ago I was playing with AngularJS and [this little chat application](https://github.com/btford/angular-socket-io-im) which uses socket.io and nodejs for realtime communication. Yesterday I saw a post about ReactJS in [EchoJS](http://www.echojs.com/) and started playing with this UI library. After playing a bit with React, I decided to write and chat application using React and I used Bran Ford's Backend for server side of this little app.
27
-> <figure><a href="https://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/"><img src="../img/blog/chatapp.png"></a></figure>
28
->
29
-> [Read the full post...](https://danialk.github.io/blog/2013/06/16/reactjs-and-socket-dot-io-chat-application/)
30
-
31
-## React and Other Frameworks
32
-
33
-[Pete Hunt](http://www.petehunt.net/blog/) wrote an answer on Quora comparing React and Angular directives. At the end, he explains how you can make an Angular directive that is in fact being rendered with React.
34
-
35
-> To set the record straight: React components are far more powerful than Angular templates; they should be compared with Angular's directives instead. So I took the first Google hit for "AngularJS directive tutorial" (AngularJS Directives Tutorial - Fundoo Solutions), rewrote it in React and compared them. [...]
36
->
37
-> We've designed React from the beginning to work well with other libraries. Angular is no exception. Let's take the original Angular example and use React to implement the fundoo-rating directive.
38
->
39
-> [Read the full post...](https://www.quora.com/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look)
40
-
41
-In the same vein, [Markov Twain](https://twitter.com/markov_twain/status/345702941845499906) re-implemented the examples on the front-page [with Ember](http://jsbin.com/azihiw/2/edit) and [Vlad Yazhbin](https://twitter.com/vla) re-implemented the tutorial [with Angular](http://jsfiddle.net/vla/Cdrse/).
42
-
43
-## Web Components: React & x-tags
44
-
45
-Mozilla and Google are actively working on Web Components. [Vjeux](http://blog.vjeux.com/) wrote a proof of concept that shows how to implement them using React.
46
-
47
-> Using [x-tags](http://www.x-tags.org/) from Mozilla, we can write custom tags within the DOM. This is a great opportunity to be able to write reusable components without being tied to a particular library. I wrote [x-react](https://github.com/vjeux/react-xtags/) to have them being rendered in React.
48
-> <figure><a href="http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html"><img src="../img/blog/xreact.png"></a></figure>
49
->
50
-> [Read the full post...](http://blog.vjeux.com/2013/javascript/custom-components-react-x-tags.html)
51
-
52
-## React TodoMVC Example
53
-
54
-[TodoMVC.com](http://todomvc.com/) is a website that collects various implementations of the same basic Todo app. [Pete Hunt](http://www.petehunt.net/blog/) wrote an idiomatic React version.
55
-
56
-> Developers these days are spoiled with choice when it comes to selecting an MV* framework for structuring and organizing their JavaScript web apps.
57
->
58
-> To help solve this problem, we created TodoMVC - a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today.
59
-> <figure><a href="http://todomvc.com/labs/architecture-examples/react/"><img src="../img/blog/todomvc.png"></a></figure>
60
->
61
-> [Read the source code...](https://github.com/tastejs/todomvc/tree/gh-pages/labs/architecture-examples/react)
62
-
63
-## JSX is not HTML
64
-
65
-Many of you pointed out differences between JSX and HTML. In order to clear up some confusion, we have added some documentation that covers the four main differences:
66
-
67
- - [Whitespace removal](/docs/jsx-is-not-html.html)
68
- - [HTML Entities](/docs/jsx-is-not-html.html)
69
- - [Comments](/docs/jsx-is-not-html.html)
70
- - [Custom HTML Attributes](/docs/jsx-is-not-html.html)
docs/_posts/2013-06-21-react-v0-3-3.md
deleted
-23
@@ -1,23 +0,0 @@
1
----
2
-title: "React v0.3.3"
3
-author: [zpao]
4
----
5
-
6
-We have a ton of great stuff coming in v0.4, but in the meantime we're releasing v0.3.3. This release addresses some small issues people were having and simplifies our tools to make them easier to use.
7
-
8
-
9
-## react-tools
10
-
11
-* 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`.
12
-* Upgraded our dependencies on Commoner and Recast so they use a different directory for their cache.
13
-* Freeze our esprima dependency.
14
-
15
-
16
-## React
17
-
18
-* Allow reusing the same DOM node to render different components. e.g. `React.renderComponent(<div/>, domNode); React.renderComponent(<span/>, domNode);` will work now.
19
-
20
-
21
-## JSXTransformer
22
-
23
-* Improved the in-browser transformer so that transformed scripts will execute in the expected scope. The allows components to be defined and used from separate files.
docs/_posts/2013-06-27-community-roundup-3.md
deleted
-90
@@ -1,90 +0,0 @@
1
----
2
-title: "Community Round-up #3"
3
-author: [vjeux]
4
----
5
-
6
-The highlight of this week is that an interaction-heavy app has been ported to React. React components are solving issues they had with nested views.
7
-
8
-## Moving From Backbone To React
9
-
10
-[Clay Allsopp](https://twitter.com/clayallsopp) successfully ported [Propeller](http://usepropeller.com/blog/posts/from-backbone-to-react/), a fairly big, interaction-heavy JavaScript app, to React.
11
-
12
-> [<img style="float: right; margin: 0 0 10px 10px;" src="../img/blog/propeller-logo.png" />](http://usepropeller.com/blog/posts/from-backbone-to-react/)Subviews involve a lot of easy-to-forget boilerplate that Backbone (by design) doesn't automate. Libraries like Backbone.Marionette offer more abstractions to make view nesting easier, but they're all limited by the fact that Backbone delegates how and went view-document attachment occurs to the application code.
13
->
14
-> React, on the other hand, manages the DOM and only exposes real nodes at select points in its API. The "elements" you code in React are actually objects which wrap DOM nodes, not the actual objects which get inserted into the DOM. Internally, React converts those abstractions into actual DOMElements and fills out the document accordingly. [...]
15
->
16
-> We moved about 20 different Backbone view classes to React over the past few weeks, including the live-preview pane that you see in our little iOS demo. Most importantly, it's allowed us to put energy into making each component work great on its own, instead of spending extra cycles to ensure they function in unison. For that reason, we think React is a more scalable way to build view-intensive apps than Backbone alone, and it doesn't require you to drop-everything-and-refactor like a move to Ember or Angular would demand.
17
->
18
-> [Read the full post...](http://usepropeller.com/blog/posts/from-backbone-to-react/)
19
-
20
-## Grunt Task for JSX
21
-
22
-[Eric Clemmons](https://ericclemmons.github.io/) wrote a task for [Grunt](http://gruntjs.com/) that applies the JSX transformation to your JavaScript files. It also works with [Browserify](http://browserify.org/) if you want all your files to be concatenated and minified together.
23
-
24
-> Grunt task for compiling Facebook React's .jsx templates into .js
25
->
26
-> ```javascript
27
-> grunt.initConfig({
28
-> react: {
29
-> app: {
30
-> options: { extension: 'js' },
31
-> files: { 'path/to/output/dir': 'path/to/jsx/templates/dir' }
32
-> ```
33
->
34
-> It also works great with `grunt-browserify`!
35
->
36
-> ```javascript
37
-> browserify: {
38
-> options: {
39
-> transform: [ require('grunt-react').browserify ]
40
-> },
41
-> app: {
42
-> src: 'path/to/source/main.js',
43
-> dest: 'path/to/target/output.js'
44
-> ```
45
->
46
-> [Check out the project ...](https://github.com/ericclemmons/grunt-react)
47
-
48
-## Backbone/Handlebars Nested Views
49
-
50
-[Joel Burget](http://joelburget.com/) wrote a blog post talking about the way we would write React-like components in Backbone and Handlebars.
51
-
52
-> The problem here is that we're trying to maniplate a tree, but there's a textual layer we have to go through. Our views are represented as a tree - the subviews are children of CommentCollectionView - and they end up as part of a tree in the DOM. But there's a Handlebars layer in the middle (which deals in flat strings), so the hierarchy must be destructed and rebuilt when we render.
53
->
54
-> What does it take to render a collection view? In the Backbone/Handlebars view of the world you have to render the template (with stubs), render each subview which replaces a stub, and keep a reference to each subview (or anything within the view that could change in the future).
55
->
56
-> So while our view is conceptually hierarchical, due to the fact that it has to go through a flat textual representation, we need to do a lot of extra work to reassemble that structure after rendering.
57
->
58
-> [Read the full post...](http://joelburget.com/react/)
59
-
60
-## JSRomandie Meetup
61
-
62
-[Renault John Lecoultre](https://twitter.com/renajohn/) from [BugBuster](http://www.bugbuster.com) did a React introduction talk at a JS meetup called [JS Romandie](https://twitter.com/jsromandie) last week.
63
-
64
-<script async class="speakerdeck-embed" data-id="888a9d50c01b01300df36658d0894ac1" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script>
65
-
66
-## CoffeeScript integration
67
-
68
-[Vjeux](http://blog.vjeux.com/) used the fact that JSX is just a syntactic sugar on-top of regular JS to rewrite the React front-page examples in CoffeeScript.
69
-
70
-> Multiple people asked what's the story about JSX and CoffeeScript. There is no JSX pre-processor for CoffeeScript and I'm not aware of anyone working on it. Fortunately, CoffeeScript is pretty expressive and we can play around the syntax to come up with something that is usable.
71
->
72
-> ```javascript
73
-> {div, h3, textarea} = React.DOM
74
-> (div {className: 'MarkdownEditor'}, [
75
-> (h3 {}, 'Input'),
76
-> (textarea {onKeyUp: @handleKeyUp, ref: 'textarea'},
77
-> @state.value
78
-> )
79
-> ])
80
-> ```
81
->
82
-> [Read the full post...](http://blog.vjeux.com/2013/javascript/react-coffeescript.html)
83
-
84
-## Tutorial in Plain JavaScript
85
-
86
-We've seen a lot of people comparing React with various frameworks. [Ricardo Tomasi](http://ricardo.cc/) decided to re-implement the tutorial without any framework, just plain JavaScript.
87
-
88
-> Facebook & Instagram launched the React framework and an accompanying tutorial. Developer Vlad Yazhbin decided to rewrite that using AngularJS. The end result is pretty neat, but if you're like me you will not actually appreciate the HTML speaking for itself and doing all the hard work. So let's see what that looks like in plain javascript.
89
->
90
-> [Read the full post...](http://ricardo.cc/2013/06/07/react-tutorial-rewritten-in-plain-javascript.html)
docs/_posts/2013-07-02-react-v0-4-autobind-by-default.md
deleted
-51
@@ -1,51 +0,0 @@
1
----
2
-title: "New in React v0.4: Autobind by Default"
3
-author: [zpao]
4
----
5
-
6
-React v0.4 is very close to completion. As we finish it off, we'd like to share with you some of the major changes we've made since v0.3. This is the first of several posts we'll be making over the next week.
7
-
8
-
9
-## What is React.autoBind?
10
-
11
-If you take a look at most of our current examples, you'll see us using `React.autoBind` for event handlers. This is used in place of `Function.prototype.bind`. Remember that in JS, [function calls are late-bound](https://bonsaiden.github.io/JavaScript-Garden/#function.this). That means that if you simply pass a function around, the `this` used inside won't necessarily be the `this` you expect. `Function.prototype.bind` creates a new, properly bound, function so that when called, `this` is exactly what you expect it to be.
12
-
13
-Before we launched React, we would write this:
14
-
15
-```js{4}
16
-React.createClass({
17
- onClick: function(event) {/* do something with this */},
18
- render: function() {
19
- return <button onClick={this.onClick.bind(this)} />;
20
- }
21
-});
22
-```
23
-
24
-We wrote `React.autoBind` as a way to cache the function creation and save on memory usage. Since `render` can get called multiple times, if you used `this.onClick.bind(this)` you would actually create a new function on each pass. With React v0.3 you were able to write this instead:
25
-
26
-```js{2,4}
27
-React.createClass({
28
- onClick: React.autoBind(function(event) {/* do something with this */}),
29
- render: function() {
30
- return <button onClick={this.onClick} />;
31
- }
32
-});
33
-```
34
-
35
-
36
-## What's Changing in v0.4?
37
-
38
-After using `React.autoBind` for a few weeks, we realized that there were very few times that we didn't want that behavior. So we made it the default! Now all methods defined within `React.createClass` will already be bound to the correct instance.
39
-
40
-Starting with v0.4 you can just write this:
41
-
42
-```js{2,4}
43
-React.createClass({
44
- onClick: function(event) {/* do something with this */},
45
- render: function() {
46
- return <button onClick={this.onClick} />;
47
- }
48
-});
49
-```
50
-
51
-For v0.4 we will simply be making `React.autoBind` a no-op — it will just return the function you pass to it. Most likely you won't have to change your code to account for this change, though we encourage you to update. We'll publish a migration guide documenting this and other changes that come along with React v0.4.
docs/_posts/2013-07-03-community-roundup-4.md
deleted
-58
@@ -1,58 +0,0 @@
1
----
2
-title: "Community Round-up #4"
3
-author: [vjeux]
4
----
5
-
6
-React reconciliation process appears to be very well suited to implement a text editor with a live preview as people at Khan Academy show us.
7
-
8
-## Khan Academy
9
-
10
-[Ben Kamens](http://bjk5.com/) explains how [Sophie Alpert](http://sophiebits.com/) and [Joel Burget](http://joelburget.com/) are promoting React inside of [Khan Academy](https://www.khanacademy.org/). They now have three projects in the works using React.
11
-
12
-> Recently two Khan Academy devs dropped into our team chat and said they were gonna use React to write a new feature. They even hinted that we may want to adopt it product-wide.
13
->
14
-> "The library is only a week old. It's a brand new way of thinking about things. We're the first to use it outside of Facebook. Heck, even the React devs were surprised to hear we're using this in production!!!"
15
->
16
-> [Read the full post...](http://bjk5.com/post/53742233351/getting-your-team-to-adopt-new-technology)
17
-
18
-The best part is the demo of how React reconciliation process makes live editing more user-friendly.
19
-
20
-> Our renderer, post-React, is on the left. A typical math editor's preview is on the right.
21
-
22
-[](http://bjk5.com/post/53742233351/getting-your-team-to-adopt-new-technology)
23
-
24
-## React Snippets
25
-
26
-Over the past several weeks, members of our team, [Pete Hunt](http://www.petehunt.net/) and [Paul O'Shannessy](http://zpao.com/), answered many questions that were asked in the [React group](https://groups.google.com/forum/#!forum/reactjs). They give a good overview of how to integrate React with other libraries and APIs through the use of [Mixins](/docs/reusable-components.html) and [Lifecycle Methods](/docs/working-with-the-browser.html).
27
-
28
-> [Listening Scroll Event](https://groups.google.com/forum/#!topic/reactjs/l6PnP8qbofk)
29
->
30
-> * [JSFiddle](http://jsfiddle.net/aabeL/1/): Basically I've given you two mixins. The first lets you react to global scroll events. The second is, IMO, much more useful: it gives you scroll start and scroll end events, which you can use with setState() to create components that react based on whether the user is scrolling or not.
31
->
32
-> [Fade-in Transition](https://groups.google.com/forum/#!topic/reactjs/RVAY_eQmdpo)
33
->
34
-> * [JSFiddle](http://jsfiddle.net/ufe8k/1/): Creating a new `<FadeInWhenAdded>` component and using jQuery `.fadeIn()` function on the DOM node.
35
-> * [JSFiddle](http://jsfiddle.net/R8f5L/5/): Using CSS transition instead.
36
->
37
-> [Socket.IO Integration](https://groups.google.com/forum/#!topic/reactjs/pyUZBRWcHB4)
38
->
39
-> * [Gist](https://gist.github.com/zpao/5686416): The big thing to notice is that my component is pretty dumb (it doesn't have to be but that's how I chose to model it). All it does is render itself based on the props that are passed in. renderOrUpdate is where the "magic" happens.
40
-> * [Gist](https://gist.github.com/petehunt/5687230): This example is doing everything -- including the IO -- inside of a single React component.
41
-> * [Gist](https://gist.github.com/petehunt/5687276): One pattern that we use at Instagram a lot is to employ separation of concerns and consolidate I/O and state into components higher in the hierarchy to keep the rest of the components mostly stateless and purely display.
42
->
43
-> [Sortable jQuery Plugin Integration](https://groups.google.com/forum/#!topic/reactjs/mHfBGI3Qwz4)
44
->
45
-> * [JSFiddle](http://jsfiddle.net/LQxy7/): Your React component simply render empty divs, and then in componentDidMount() you call React.renderComponent() on each of those divs to set up a new root React tree. Be sure to explicitly unmountAndReleaseReactRootNode() for each component in componentWillUnmount().
46
-
47
-## Introduction to React Screencast
48
-
49
-[Pete Hunt](http://www.petehunt.net/) recorded himself implementing a simple `<Blink>` tag in React.
50
-
51
-<figure><iframe src="https://player.vimeo.com/video/67248575" width="100%" height="340" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></figure>
52
-
53
-## Snake in React
54
-
55
-[Tom Occhino](http://tomocchino.com/) implemented Snake in 150 lines with React.
56
-
57
-> [Check the source on GitHub](https://github.com/tomocchino/react-snake/blob/master/src/snake.js)
58
-> <figure><a href="https://tomocchino.github.io/react-snake/"><img src="../img/blog/snake.png"></a></figure>
docs/_posts/2013-07-11-react-v0-4-prop-validation-and-default-values.md
deleted
-62
@@ -1,62 +0,0 @@
1
----
2
-title: "New in React v0.4: Prop Validation and Default Values"
3
-author: [zpao]
4
----
5
-
6
-Many of the questions we got following the public launch of React revolved around `props`, specifically that people wanted to do validation and to make sure their components had sensible defaults.
7
-
8
-
9
-## Validation
10
-
11
-Oftentimes you want to validate your `props` before you use them. Perhaps you want to ensure they are a specific type. Or maybe you want to restrict your prop to specific values. Or maybe you want to make a specific prop required. This was always possible — you could have written validations in your `render` or `componentWillReceiveProps` functions, but that gets clunky fast.
12
-
13
-React v0.4 will provide a nice easy way for you to use built-in validators, or to even write your own.
14
-
15
-```js
16
-React.createClass({
17
- propTypes: {
18
- // An optional string prop named "description".
19
- description: React.PropTypes.string,
20
-
21
- // A required enum prop named "category".
22
- category: React.PropTypes.oneOf(['News','Photos']).isRequired,
23
-
24
- // A prop named "dialog" that requires an instance of Dialog.
25
- dialog: React.PropTypes.instanceOf(Dialog).isRequired
26
- },
27
- ...
28
-});
29
-```
30
-
31
-
32
-## Default Values
33
-
34
-One common pattern we've seen with our React code is to do something like this:
35
-
36
-```js
37
-React.createClass({
38
- render: function() {
39
- var value = this.props.value || 'default value';
40
- return <div>{value}</div>;
41
- }
42
-});
43
-```
44
-
45
-Do this for a few `props` across a few components and now you have a lot of redundant code. Starting with React v0.4, you can provide default values in a declarative way:
46
-
47
-```js
48
-React.createClass({
49
- getDefaultProps: function() {
50
- return {
51
- value: 'default value'
52
- };
53
- }
54
- ...
55
-});
56
-```
57
-
58
-We will use the cached result of this function before each `render`. We also perform all validations before each `render` to ensure that you have all of the data you need in the right form before you try to use it.
59
-
60
-- - -
61
-
62
-Both of these features are entirely optional. We've found them to be increasingly valuable at Facebook as our applications grow and evolve, and we hope others find them useful as well.
docs/_posts/2013-07-17-react-v0-4-0.md
deleted
-39
@@ -1,39 +0,0 @@
1
----
2
-title: "React v0.4.0"
3
-author: [zpao]
4
----
5
-
6
-Over the past 2 months we've been taking feedback and working hard to make React even better. We fixed some bugs, made some under-the-hood improvements, and added several features that we think will improve the experience developing with React. Today we're proud to announce the availability of React v0.4!
7
-
8
-
9
-This release could not have happened without the support of our growing community. Since launch day, the community has contributed blog posts, questions to the [Google Group](https://groups.google.com/group/reactjs), and issues and pull requests on GitHub. We've had contributions ranging from documentation improvements to major changes to React's rendering. We've seen people integrate React into the tools they're using and the products they're building, and we're all very excited to see what our budding community builds next!
10
-
11
-React v0.4 has some big changes. We've also restructured the documentation to better communicate how to use React. We've summarized the changes below and linked to documentation where we think it will be especially useful.
12
-
13
-When you're ready, [go download it](/docs/installation.html)!
14
-
15
-
16
-### React
17
-
18
-* Switch from using `id` attribute to `data-reactid` to track DOM nodes. This allows you to integrate with other JS and CSS libraries more easily.
19
-* Support for more DOM elements and attributes (e.g., `<canvas>`)
20
-* Improved server-side rendering APIs. `React.renderComponentToString(<component>, callback)` allows you to use React on the server and generate markup which can be sent down to the browser.
21
-* `prop` improvements: validation and default values. [Read our blog post for details...](/blog/2013/07/11/react-v0-4-prop-validation-and-default-values.html)
22
-* Support for the `key` prop, which allows for finer control over reconciliation. [Read the docs for details...](/docs/multiple-components.html)
23
-* Removed `React.autoBind`. [Read our blog post for details...](/blog/2013/07/02/react-v0-4-autobind-by-default.html)
24
-* Improvements to forms. We've written wrappers around `<input>`, `<textarea>`, `<option>`, and `<select>` in order to standardize many inconsistencies in browser implementations. This includes support for `defaultValue`, and improved implementation of the `onChange` event, and circuit completion. [Read the docs for details...](/docs/forms.html)
25
-* We've implemented an improved synthetic event system that conforms to the W3C spec.
26
-* Updates to your component are batched now, which may result in a significantly faster re-render of components. `this.setState` now takes an optional callback as its second parameter. If you were using `onClick={this.setState.bind(this, state)}` previously, you'll want to make sure you add a third parameter so that the event is not treated as the callback.
27
-
28
-### JSX
29
-
30
-* Support for comment nodes `<div>{/* this is a comment and won't be rendered */}</div>`
31
-* Children are now transformed directly into arguments instead of being wrapped in an array
32
- E.g. `<div><Component1/><Component2/></div>` is transformed into `React.DOM.div(null, Component1(null), Component2(null))`.
33
- Previously this would be transformed into `React.DOM.div(null, [Component1(null), Component2(null)])`.
34
- If you were using React without JSX previously, your code should still work.
35
-
36
-### react-tools
37
-
38
-* Fixed a number of bugs when transforming directories
39
-* No longer re-write `require()`s to be relative unless specified
docs/_posts/2013-07-23-community-roundup-5.md
deleted
-98
@@ -1,98 +0,0 @@
1
----
2
-title: "Community Round-up #5"
3
-author: [vjeux]
4
----
5
-
6
-We launched the [React Facebook Page](https://www.facebook.com/react) along with the React v0.4 launch. 700 people already liked it to get updated on the project :)
7
-
8
-## Cross-browser onChange
9
-
10
-[Sophie Alpert](http://sophiebits.com/) from [Khan Academy](https://www.khanacademy.org/) worked on a cross-browser implementation of `onChange` event that landed in v0.4. She wrote a blog post explaining the various browser quirks she had to deal with.
11
-
12
-> First off, what is the input event? If you have an `<input>` element and want to receive events whenever the value changes, the most obvious thing to do is to listen to the change event. Unfortunately, change fires only after the text field is defocused, rather than on each keystroke. The next obvious choice is the keyup event, which is triggered whenever a key is released. Unfortunately, keyup doesn't catch input that doesn't involve the keyboard (e.g., pasting from the clipboard using the mouse) and only fires once if a key is held down, rather than once per inserted character.
13
->
14
-> Both keydown and keypress do fire repeatedly when a key is held down, but both fire immediately before the value changes, so to read the new value you have to defer the handler to the next event loop using `setTimeout(fn, 0)` or similar, which slows down your app. Of course, like keyup, neither keydown nor keypress fires for non-keyboard input events, and all three can fire in cases where the value doesn't change at all (such as when pressing the arrow keys).
15
->
16
-> [Read the full post...](http://sophiebits.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html)
17
-
18
-
19
-## React Samples
20
-
21
-Learning a new library is always easier when you have working examples you can play with. [jwh](https://github.com/jhw) put many of them on his [react-samples GitHub repo](https://github.com/jhw/react-samples).
22
-
23
-> Some simple examples with Facebook's React framework
24
->
25
-> * Bootstrap action bar, modal and table [#1](https://rawgithub.com/jhw/react-samples/master/html/actionbar.html),
26
-> [#2](https://rawgithub.com/jhw/react-samples/master/html/bootstrap_actionbar.html),
27
-> [#3](https://rawgithub.com/jhw/react-samples/master/html/bootstrap_modal.html),
28
-> [#4](https://rawgithub.com/jhw/react-samples/master/html/bootstrap_striped_table.html)
29
-> * Comments [#1](https://rawgithub.com/jhw/react-samples/master/html/comments1.html),
30
-> [#2](https://rawgithub.com/jhw/react-samples/master/html/comments2.html)
31
-> * Data Table [#1](https://rawgithub.com/jhw/react-samples/master/html/datatable.html),
32
-> [#2](https://rawgithub.com/jhw/react-samples/master/html/datatable2.html),
33
-> [#3](https://rawgithub.com/jhw/react-samples/master/html/datatable3.html),
34
-> [#4](https://rawgithub.com/jhw/react-samples/master/html/datatable4.html),
35
-> [#5](https://rawgithub.com/jhw/react-samples/master/html/datatable5.html)
36
-> * Filter Bar [#1](https://rawgithub.com/jhw/react-samples/master/html/filterbar.html),
37
-> [#2](https://rawgithub.com/jhw/react-samples/master/html/filterbar2.html),
38
-> [#3](https://rawgithub.com/jhw/react-samples/master/html/filterbar3.html),
39
-> [#4](https://rawgithub.com/jhw/react-samples/master/html/filterbar4.html),
40
-> [#5](https://rawgithub.com/jhw/react-samples/master/html/filterbar5.html)
41
-> * Fundoo Rating [#1](https://rawgithub.com/jhw/react-samples/master/html/fundoo.html)
42
-> * Line Char: [#1](https://rawgithub.com/jhw/react-samples/master/html/linechart.html),
43
-> [#2](https://rawgithub.com/jhw/react-samples/master/html/linechart2.html)
44
-> * Multi tabs [#1](https://rawgithub.com/jhw/react-samples/master/html/multitabs.html)
45
-> * Select [#1](https://rawgithub.com/jhw/react-samples/master/html/select.html)
46
-> * Simple Tabs [#1](https://rawgithub.com/jhw/react-samples/master/html/simpletabs.html),
47
-> [#2](https://rawgithub.com/jhw/react-samples/master/html/simpletabs2.html),
48
-> [#3](https://rawgithub.com/jhw/react-samples/master/html/simpletabs3.html),
49
-> [#4](https://rawgithub.com/jhw/react-samples/master/html/simpletabs4.html)
50
-> * Toggle [#1](https://rawgithub.com/jhw/react-samples/master/html/toggle.html)
51
-
52
-
53
-## React Chosen Wrapper
54
-
55
-[Cheng Lou](https://github.com/chenglou) wrote a wrapper for the [Chosen](https://harvesthq.github.io/chosen/) input library called [react-chosen](https://github.com/chenglou/react-chosen). It took just 25 lines to be able to use jQuery component as a React one.
56
-
57
-```javascript
58
-React.renderComponent(
59
- <Chosen noResultsText="No result" value="Harvest" onChange={doSomething}>
60
- <option value="Facebook">Facebook</option>
61
- <option value="Harvest">Harvest</option>
62
- </Chosen>
63
-, document.getElementById('example'));
64
-```
65
-
66
-
67
-## JSX and ES6 Template Strings
68
-
69
-[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.
70
-
71
-<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>
72
-
73
-
74
-## React Presentation
75
-
76
-[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.
77
-
78
-<figure><iframe width="650" height="400" src="//www.youtube-nocookie.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe></figure>
79
-
80
-
81
-## Docs
82
-
83
-[Pete Hunt](http://www.petehunt.net/) rewrote the entirety of the docs for v0.4. The goal was to add more explanation about why we built React and what the best practices are.
84
-
85
-> Guides
86
->
87
-> * [Why React?](/docs/why-react.html)
88
-> * [Displaying Data](/docs/displaying-data.html)
89
-> * [JSX in Depth](/docs/jsx-in-depth.html)
90
-> * [JSX Gotchas](/docs/jsx-gotchas.html)
91
-> * [Interactivity and Dynamic UIs](/docs/interactivity-and-dynamic-uis.html)
92
-> * [Multiple Components](/docs/multiple-components.html)
93
-> * [Reusable Components](/docs/reusable-components.html)
94
-> * [Forms](/docs/forms.html)
95
-> * [Working With the Browser](/docs/working-with-the-browser.html)
96
-> * [More About Refs](/docs/more-about-refs.html)
97
-> * [Tooling integration](/docs/tooling-integration.html)
98
-> * [Reference](/docs/top-level-api.html)
docs/_posts/2013-07-26-react-v0-4-1.md
deleted
-24
@@ -1,24 +0,0 @@
1
----
2
-title: "React v0.4.1"
3
-author: [zpao]
4
----
5
-
6
-React v0.4.1 is a small update, mostly containing correctness fixes. Some code has been restructured internally but those changes do not impact any of our public APIs.
7
-
8
-
9
-## React
10
-
11
-* `setState` callbacks are now executed in the scope of your component.
12
-* `click` events now work on Mobile Safari.
13
-* Prevent a potential error in event handling if `Object.prototype` is extended.
14
-* Don't set DOM attributes to the string `"undefined"` on update when previously defined.
15
-* Improved support for `<iframe>` attributes.
16
-* Added checksums to detect and correct cases where server-side rendering markup mismatches what React expects client-side.
17
-
18
-
19
-## JSXTransformer
20
-
21
-* Improved environment detection so it can be run in a non-browser environment.
22
-
23
-
24
-[Download it now!](/downloads.html)
docs/_posts/2013-07-30-use-react-and-jsx-in-ruby-on-rails.md
deleted
-53
@@ -1,53 +0,0 @@
1
----
2
-title: "Use React and JSX in Ruby on Rails"
3
-author: [zpao]
4
----
5
-
6
-Today we're releasing a gem to make it easier to use React and JSX in Ruby on Rails applications: [react-rails](https://github.com/facebook/react-rails).
7
-
8
-
9
-This gem has 2 primary purposes:
10
-
11
-1. To package `react.js` in a way that's easy to use and easy to update.
12
-2. To allow you to write JSX without an external build step to transform that into JS.
13
-
14
-
15
-## Packaging react.js
16
-
17
-To make `react.js` available for use client-side, simply add `react` to your manifest, and declare the variant you'd like to use in your environment. When you use `:production`, the minified and optimized `react.min.js` will be used instead of the development version. For example:
18
-
19
-```ruby
20
-# config/environments/development.rb
21
-
22
-MyApp::Application.configure do
23
- config.react.variant = :development
24
- # use :production in production.rb
25
-end
26
-```
27
-
28
-```js
29
-// app/assets/javascript/application.js
30
-
31
-//= require react
32
-```
33
-
34
-
35
-## Writing JSX
36
-
37
-When you name your file with `myfile.js.jsx`, `react-rails` will automatically try to transform that file. For the time being, we still require that you include the docblock at the beginning of the file. For example, this file will get transformed on request.
38
-
39
-```js
40
-/** @jsx React.DOM */
41
-React.renderComponent(<MyComponent/>, document.getElementById('example'))
42
-```
43
-
44
-
45
-## Asset Pipeline
46
-
47
-`react-rails` takes advantage of the [asset pipeline](http://guides.rubyonrails.org/asset_pipeline.html) that was introduced in Rails 3.1. A very important part of that pipeline is the `assets:precompile` Rake task. `react-rails` will ensure that your JSX files will be transformed into regular JS before all of your assets are minified and packaged.
48
-
49
-
50
-## Installation
51
-
52
-Installation follows the same process you're familiar with. You can install it globally with `gem install react-rails`, though we suggest you add the dependency to your `Gemfile` directly.
53
-
docs/_posts/2013-08-05-community-roundup-6.md
deleted
-79
@@ -1,79 +0,0 @@
1
----
2
-title: "Community Round-up #6"
3
-author: [vjeux]
4
----
5
-
6
-This is the first Community Round-up where none of the items are from Facebook/Instagram employees. It's great to see the adoption of React growing.
7
-
8
-## React Game Tutorial
9
-
10
-[Caleb Cassel](https://twitter.com/CalebCassel) wrote a [step-by-step tutorial](https://rawgithub.com/calebcassel/react-demo/master/part1.html) about making a small game. It covers JSX, State and Events, Embedded Components and Integration with Backbone.
11
-<figure><a href="https://rawgithub.com/calebcassel/react-demo/master/part1.html"><img src="../img/blog/dog-tutorial.png"></a></figure>
12
-
13
-
14
-## Reactify
15
-
16
-[Andrey Popp](http://andreypopp.com/) created a [Browserify](http://browserify.org/) helper to compile JSX files.
17
-
18
-> Browserify v2 transform for `text/jsx`. Basic usage is:
19
->
20
-> ```
21
-> % browserify -t reactify main.jsx
22
-> ```
23
->
24
-> `reactify` transform activates for files with either `.jsx` extension or `/** @jsx React.DOM */` pragma as a first line for any `.js` file.
25
->
26
-> [Check it out on GitHub...](https://github.com/andreypopp/reactify)
27
-
28
-
29
-
30
-## React Integration with Este
31
-
32
-[Daniel Steigerwald](http://daniel.steigerwald.cz/) is now using React within [Este](https://github.com/steida/este), which is a development stack for web apps in CoffeeScript that are statically typed using the Closure Library.
33
-
34
-```coffeescript
35
-este.demos.react.todoApp = este.react.create (`/** @lends {React.ReactComponent.prototype} */`)
36
- render: ->
37
- @div [
38
- este.demos.react.todoList 'items': @state['items']
39
- if @state['items'].length
40
- @p "#{@state['items'].length} items."
41
- @form 'onSubmit': @onFormSubmit, [
42
- @input
43
- 'onChange': @onChange
44
- 'value': @state['text']
45
- 'autoFocus': true
46
- 'ref': 'textInput'
47
- @button "Add ##{@state['items'].length + 1}"
48
- ]
49
- ]
50
-```
51
-
52
-[Check it out on GitHub...](https://github.com/steida/este-library/blob/master/este/demos/thirdparty/react/start.coffee)
53
-
54
-
55
-## React Stylus Boilerplate
56
-
57
-[Zaim Bakar](https://zaim.github.io/) shared his boilerplate to get started with Stylus CSS processor.
58
-
59
-> This is my boilerplate React project using Grunt as the build tool, and Stylus as my CSS preprocessor.
60
->
61
-> - Very minimal HTML boilerplate
62
-> - Uses Stylus, with nib included
63
-> - Uses two build targets:
64
-> - `grunt build` to compile JSX and Stylus into a development build
65
-> - `grunt dist` to minify and optimize the development build for production
66
->
67
-> [Check it out on GitHub...](https://github.com/zaim/react-stylus-boilerplate)
68
-
69
-
70
-## WebFUI
71
-
72
-[Conrad Barski](http://lisperati.com/), author of the popular book [Land of Lisp](http://landoflisp.com/), wants to use React for his ClojureScript library called [WebFUI](https://github.com/drcode/webfui).
73
-
74
-> I'm the author of "[Land of Lisp](http://landoflisp.com/)" and I love your framework. I built a somewhat similar framework a year ago [WebFUI](https://github.com/drcode/webfui) aimed at ClojureScript. My framework also uses global event delegates, a global "render" function, DOM reconciliation, etc just like react.js. (Of course these ideas all have been floating around the ether for ages, always great to see more people building on them.)
75
->
76
-> Your implementation is more robust, and so I think the next point release of webfui will simply delegate all the "hard work" to react.js and will only focus on the areas where it adds value (enabling purely functional UI programming in clojurescript, and some other stuff related to streamlining event handling)
77
-> <figure><a href="https://groups.google.com/forum/#!msg/reactjs/e3bYersyd64/qODfcuBR9LwJ"><img src="../img/blog/landoflisp.png"></a></figure>
78
->
79
-> [Read the full post...](https://groups.google.com/forum/#!msg/reactjs/e3bYersyd64/qODfcuBR9LwJ)
docs/_posts/2013-08-19-use-react-and-jsx-in-python-applications.md
deleted
-55
@@ -1,55 +0,0 @@
1
----
2
-title: "Use React and JSX in Python Applications"
3
-author: [kmeht]
4
----
5
-
6
-Today we're happy to announce the initial release of [PyReact](https://github.com/facebook/react-python), which makes it easier to use React and JSX in your Python applications. It's designed to provide an API to transform your JSX files into JavaScript, as well as provide access to the latest React source files.
7
-
8
-## Usage
9
-
10
-Transform your JSX files via the provided `jsx` module:
11
-
12
-```python
13
-from react import jsx
14
-
15
-# For multiple paths, use the JSXTransformer class.
16
-transformer = jsx.JSXTransformer()
17
-for jsx_path, js_path in my_paths:
18
- transformer.transform(jsx_path, js_path)
19
-
20
-# For a single file, you can use a shortcut method.
21
-jsx.transform('path/to/input/file.jsx', 'path/to/output/file.js')
22
-```
23
-
24
-For full paths to React files, use the `source` module:
25
-
26
-```python
27
-from react import source
28
-
29
-# path_for raises IOError if the file doesn't exist.
30
-react_js = source.path_for('react.min.js')
31
-```
32
-
33
-## Django
34
-
35
-PyReact includes a JSX compiler for [django-pipeline](https://github.com/cyberdelia/django-pipeline). Add it to your project's pipeline settings like this:
36
-
37
-```python
38
-PIPELINE_COMPILERS = (
39
- 'react.utils.pipeline.JSXCompiler',
40
-)
41
-```
42
-
43
-## Installation
44
-
45
-PyReact is hosted on PyPI, and can be installed with `pip`:
46
-
47
- $ pip install PyReact
48
-
49
-Alternatively, add it into your `requirements` file:
50
-
51
- PyReact==0.1.1
52
-
53
-**Dependencies**: PyReact uses [PyExecJS](https://github.com/doloopwhile/PyExecJS) to execute the bundled React code, which requires that a JS runtime environment is installed on your machine. We don't explicitly set a dependency on a runtime environment; Mac OS X comes bundled with one. If you're on a different platform, we recommend [PyV8](https://code.google.com/p/pyv8/).
54
-
55
-For the initial release, we've only tested on Python 2.7. Look out for support for Python 3 in the future, and if you see anything that can be improved, we welcome your [contributions](https://github.com/facebook/react-python/blob/master/CONTRIBUTING.md)!
docs/_posts/2013-08-26-community-roundup-7.md
deleted
-73
@@ -1,73 +0,0 @@
1
----
2
-title: "Community Round-up #7"
3
-author: [vjeux]
4
----
5
-
6
-It's been three months since we open sourced React and it is going well. Some stats so far:
7
-
8
-* 114 285 unique visitors on this website
9
-* [1933 stars](https://github.com/facebook/react/stargazers) and [210 forks](https://github.com/facebook/react/network/members)
10
-* [226 posts on Google Group](https://groups.google.com/forum/#!forum/reactjs)
11
-* [76 GitHub projects using React](https://gist.github.com/vjeux/6335762)
12
-* [30 contributors](https://github.com/facebook/react/graphs/contributors)
13
-* [15 blog posts](/blog/)
14
-* 2 early adopters: [Khan Academy](http://sophiebits.com/2013/06/09/using-react-to-speed-up-khan-academy.html) and [Propeller](http://usepropeller.com/blog/posts/from-backbone-to-react/)
15
-
16
-
17
-## Wolfenstein Rendering Engine Ported to React
18
-
19
-[Pete Hunt](http://www.petehunt.net/) ported the render code of the web version of Wolfenstein 3D to React. Check out [the demo](http://www.petehunt.net/wolfenstein3D-react/wolf3d.html) and [render.js](https://github.com/petehunt/wolfenstein3D-react/blob/master/js/renderer.js#L183) file for the implementation.
20
-<figure><a href="http://www.petehunt.net/wolfenstein3D-react/wolf3d.html"><img src="../img/blog/wolfenstein_react.png"></a></figure>
21
-
22
-
23
-## React & Meteor
24
-
25
-[Ben Newman](https://twitter.com/benjamn) made a [13-lines wrapper](https://github.com/benjamn/meteor-react/blob/master/lib/mixin.js) to use React and Meteor together. [Meteor](http://www.meteor.com/) handles the real-time data synchronization between client and server. React provides the declarative way to write the interface and only updates the parts of the UI that changed.
26
-
27
-> This repository defines a Meteor package that automatically integrates the React rendering framework on both the client and the server, to complement or replace the default Handlebars templating system.
28
->
29
-> The React core is officially agnostic about how you fetch and update your data, so it is far from obvious which approach is the best. This package provides one answer to that question (use Meteor!), and I hope you will find it a compelling combination.
30
->
31
->```javascript
32
->var MyComponent = React.createClass({
33
-> mixins: [MeteorMixin],
34
->
35
-> getMeteorState: function() {
36
-> return { foo: Session.get('foo') };
37
-> },
38
->
39
-> render: function() {
40
-> return <div>{this.state.foo}</div>;
41
-> }
42
->});
43
->```
44
->
45
-> Dependencies will be registered for any data accesses performed by getMeteorState so that the component can be automatically re-rendered whenever the data changes.
46
->
47
-> [Read more ...](https://github.com/benjamn/meteor-react)
48
-
49
-## React Page
50
-
51
-[Jordan Walke](https://github.com/jordwalke) implemented a complete React project creator called [react-page](https://github.com/facebook/react-page/). It supports both server-side and client-side rendering, source transform and packaging JSX files using CommonJS modules, and instant reload.
52
-
53
-> Easy Application Development with React JavaScript
54
-> <figure><a href="https://github.com/facebook/react-page/"><img src="../img/blog/react-page.png"></a></figure>
55
->
56
-> **Why Server Rendering?**
57
->
58
-> * Faster initial page speed:
59
-> * Markup displayed before downloading large JavaScript.
60
-> * Markup can be generated more quickly on a fast server than low power client devices.
61
-> * Faster Development and Prototyping:
62
-> * Instantly refresh your app without waiting for any watch scripts or bundlers.
63
-> * Easy deployment of static content pages/blogs: just archive using recursive wget.
64
-> * SEO benefits of indexability and perf.
65
->
66
-> **How Does Server Rendering Work?**
67
->
68
-> * `react-page` computes page markup on the server, sends it to the client so the user can see it quickly.
69
-> * The corresponding JavaScript is then packaged and sent.
70
-> * The browser runs that JavaScript, so that all of the event handlers, interactions and update code will run seamlessly on top of the server generated markup.
71
-> * From the developer's (and the user's) perspective, it's just as if the rendering occurred on the client, only faster.
72
->
73
-> [Try it out ...](https://github.com/facebook/react-page/)
docs/_posts/2013-09-24-community-roundup-8.md
deleted
-67
@@ -1,67 +0,0 @@
1
----
2
-title: "Community Round-up #8"
3
-author: [vjeux]
4
----
5
-
6
-A lot has happened in the month since our last update. Here are some of the more interesting things we've found. But first, we have a couple updates before we share links.
7
-
8
-First, we are organizing a [React Hackathon](http://reactjshack-a-thon.splashthat.com/) in Facebook's Seattle office on Saturday September 28. If you want to hack on React, meet some of the team or win some prizes, feel free to join us!
9
-
10
-We've also reached a point where there are too many questions for us to handle directly. We're encouraging people to ask questions on [StackOverflow](http://stackoverflow.com/questions/tagged/reactjs) using the tag [[reactjs]](http://stackoverflow.com/questions/tagged/reactjs). Many members of the team and community have subscribed to the tag, so feel free to ask questions there. We think these will be more discoverable than Google Groups archives or IRC logs.
11
-
12
-## JavaScript Jabber
13
-
14
-[Pete Hunt](http://www.petehunt.net/) and [Jordan Walke](https://github.com/jordwalke) were interviewed on [JavaScript Jabber](http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/) for an hour. They go over many aspects of React such as 60 FPS, Data binding, Performance, Diffing Algorithm, DOM Manipulation, Node.js support, server-side rendering, JSX, requestAnimationFrame and the community. This is a gold mine of information about React.
15
-
16
-> **PETE:** So React was designed all around that. Conceptually, how you build a React app is that every time your data changes, it's like hitting the refresh button in a server-rendered app. What we do is we conceptually throw out all of the markup and event handlers that you've registered and we reset the whole page and then we redraw the entire page. If you're writing a server-rendered app, handling updates is really easy because you hit the refresh button and you're pretty much guaranteed to get what you expect.
17
->
18
-> **MERRICK:** That's true. You don't get into these odd states.
19
->
20
-> **PETE:** Exactly, exactly. In order to implement that, we communicate it as a fake DOM. What we'll do is rather than throw out the actual browser html and event handlers, we have an internal representation of what the page looks like and then we generate a brand new representation of what we want the page to look like. Then we perform this really, really fast diffing algorithm between those two page representations, DOM representations. Then React will compute the minimum set of DOM mutations it needs to make to bring the page up to date.
21
->
22
-> Then to finally get to answer your question, that set of DOM mutations then goes into a queue and we can plug in arbitrary flushing strategies for that. For example, when we originally launched React in open source, every setState would immediately trigger a flush to the DOM. That wasn't part of the contract of setState, but that was just our strategy and it worked pretty well. Then this totally awesome open source contributor Sophie Alpert at Khan Academy built a new batching strategy which would basically queue up every single DOM update and state change that happened within an event tick and would execute them in bulk at the end of the event tick.
23
->
24
-> [Read the full conversation ...](http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/)
25
-
26
-
27
-## JSXTransformer Trick
28
-
29
-While this is not going to work for all the attributes since they are camelCased in React, this is a pretty cool trick.
30
-
31
-<div style="margin-left: 74px;"><blockquote class="twitter-tweet"><p>Turn any DOM element into a React.js function: JSXTransformer.transform("/** <a href="https://twitter.com/jsx">@jsx</a> React.DOM */" + element.innerHTML).code</p>— Ross Allen (@ssorallen) <a href="https://twitter.com/ssorallen/statuses/377105575441489920">September 9, 2013</a></blockquote></div>
32
-
33
-## Remarkable React
34
-
35
-[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.
36
-
37
-> So how does exactly React deal with it internally? Two crazy ideas - virtual DOM and synthetic events.
38
->
39
-> You define you components in React. It builds a virtual DOM in JavaScript land which is way more efficient. Then it updates the DOM. (And "virtual DOM" is a very big name for what is simply a JavaScript object with nested key-value pairs)
40
->
41
-> Data changes. React computes a diff (in JavaScript land, which is, of course, much more efficient) and updates the single table cell that needs to change. React replicates the state of the virtual DOM into the actual DOM only when and where it's necessary. And does it all at once, in most cases in a single tick of the `requestAnimationFrame()`.
42
->
43
-> What about event handlers? They are synthetic. React uses event delegation to listen way at the top of the React tree. So removing a node in the virtual DOM has no effect on the event handling.
44
->
45
-> The events are automatically cross-browser (they are React events). They are also much closer to W3C than any browser. That means that for example `e.target` works, no need to look for the event object or checking whether it's `e.target` or `e.srcElement` (IE). Bubbling and capturing phases also work cross browser. React also takes the liberty of making some small fixes, e.g. the event `<input onChange>` fires when you type, not when blur away from the input. And of course, event delegation is used as the most efficient way to handle events. You know that "thou shall use event delegation" is also commonly given advice for making web apps snappy.
46
->
47
-> The good thing about the virtual DOM is that it's all in JavaScript land. You build all your UI in JavaScript. Which means it can be rendered on the server side, so you initial view is fast (and any SEO concerns are addressed). Also, if there are especially heavy operations they can be threaded into WebWorkers, which otherwise have no DOM access.
48
->
49
-> [Read More ...](http://www.phpied.com/remarkable-react/)
50
-
51
-
52
-## Markdown in React
53
-
54
-[Sophie Alpert](http://sophiebits.com/) converted [marked](https://github.com/chjj/marked), a Markdown JavaScript implementation, in React: [marked-react](https://github.com/sophiebits/marked-react). Even without using JSX, the HTML generation is now a lot cleaner. It is also safer as forgetting a call to `escape` will not introduce an XSS vulnerability.
55
-<figure><a href="https://github.com/sophiebits/marked-react/commit/cb70c9df6542c7c34ede9efe16f9b6580692a457"><img src="../img/blog/markdown_refactor.png"></a></figure>
56
-
57
-
58
-## Unite from BugBusters
59
-
60
-[Renault John Lecoultre](https://twitter.com/renajohn) wrote [Unite](https://www.bugbuster.com/), an interactive tool for analyzing code dynamically using React. It integrates with CodeMirror.
61
-<figure><a href="https://unite.bugbuster.com/"><img src="../img/blog/unite.png"></a></figure>
62
-
63
-## #reactjs IRC Logs
64
-
65
-[Vjeux](http://blog.vjeux.com/) re-implemented the display part of the IRC logger in React. Just 130 lines are needed for a performant infinite scroll with timestamps and color-coded author names.
66
-
67
-[View the source on JSFiddle...](http://jsfiddle.net/vjeux/QL9tz)
docs/_posts/2013-10-16-react-v0.5.0.md
deleted
-51
@@ -1,51 +0,0 @@
1
----
2
-title: "React v0.5"
3
-author: [zpao]
4
----
5
-
6
-This release is the result of several months of hard work from members of the team and the community. While there are no groundbreaking changes in core, we've worked hard to improve performance and memory usage. We've also worked hard to make sure we are being consistent in our usage of DOM properties.
7
-
8
-The biggest change you'll notice as a developer is that we no longer support `class` in JSX as a way to provide CSS classes. Since this prop was being converted to `className` at the transform step, it caused some confusion when trying to access it in composite components. As a result we decided to make our DOM properties mirror their counterparts in the JS DOM API. There are [a few exceptions](https://github.com/facebook/react/blob/master/src/dom/DefaultDOMPropertyConfig.js#L156) where we deviate slightly in an attempt to be consistent internally.
9
-
10
-The other major change in v0.5 is that we've added an additional build - `react-with-addons` - which adds support for some extras that we've been working on including animations and two-way binding. [Read more about these addons in the docs](/docs/addons.html).
11
-
12
-## Thanks to Our Community
13
-
14
-We added *22 new people* to the list of authors since we launched React v0.4.1 nearly 3 months ago. With a total of 48 names in our `AUTHORS` file, that means we've nearly doubled the number of contributors in that time period. We've seen the number of people contributing to discussion on IRC, mailing lists, Stack Overflow, and GitHub continue rising. We've also had people tell us about talks they've given in their local community about React.
15
-
16
-It's been awesome to see the things that people are building with React, and we can't wait to see what you come up with next!
17
-
18
-
19
-## Changelog
20
-
21
-### React
22
-
23
-* Memory usage improvements - reduced allocations in core which will help with GC pauses
24
-* Performance improvements - in addition to speeding things up, we made some tweaks to stay out of slow path code in V8 and Nitro.
25
-* Standardized prop -> DOM attribute process. This previously resulting in additional type checking and overhead as well as confusing cases for users. Now we will always convert your value to a string before inserting it into the DOM.
26
-* Support for Selection events.
27
-* Support for [Composition events](https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent).
28
-* Support for additional DOM properties (`charSet`, `content`, `form`, `httpEquiv`, `rowSpan`, `autoCapitalize`).
29
-* Support for additional SVG properties (`rx`, `ry`).
30
-* Support for using `getInitialState` and `getDefaultProps` in mixins.
31
-* Support mounting into iframes.
32
-* Bug fixes for controlled form components.
33
-* Bug fixes for SVG element creation.
34
-* Added `React.version`.
35
-* Added `React.isValidClass` - Used to determine if a value is a valid component constructor.
36
-* Removed `React.autoBind` - This was deprecated in v0.4 and now properly removed.
37
-* Renamed `React.unmountAndReleaseReactRootNode` to `React.unmountComponentAtNode`.
38
-* Began laying down work for refined performance analysis.
39
-* Better support for server-side rendering - [react-page](https://github.com/facebook/react-page) has helped improve the stability for server-side rendering.
40
-* Made it possible to use React in environments enforcing a strict [Content Security Policy](https://developer.mozilla.org/en-US/docs/Security/CSP/Introducing_Content_Security_Policy). This also makes it possible to use React to build Chrome extensions.
41
-
42
-### React with Addons (New!)
43
-
44
-* Introduced a separate build with several "addons" which we think can help improve the React experience. We plan to deprecate this in the long-term, instead shipping each as standalone pieces. [Read more in the docs](/docs/addons.html).
45
-
46
-### JSX
47
-
48
-* No longer transform `class` to `className` as part of the transform! This is a breaking change - if you were using `class`, you *must* change this to `className` or your components will be visually broken.
49
-* Added warnings to the in-browser transformer to make it clear it is not intended for production use.
50
-* Improved compatibility for Windows
51
-* Improved support for maintaining line numbers when transforming.
docs/_posts/2013-10-29-react-v0-5-1.md
deleted
-24
@@ -1,24 +0,0 @@
1
----
2
-title: "React v0.5.1"
3
-author: [zpao]
4
----
5
-
6
-This release focuses on fixing some small bugs that have been uncovered over the past two weeks. I would like to thank everybody involved, specifically members of the community who fixed half of the issues found. Thanks to [Sophie Alpert][1], [Andrey Popp][2], and [Laurence Rowe][3] for their contributions!
7
-
8
-## Changelog
9
-
10
-### React
11
-
12
-* Fixed bug with `<input type="range">` and selection events.
13
-* Fixed bug with selection and focus.
14
-* Made it possible to unmount components from the document root.
15
-* Fixed bug for `disabled` attribute handling on non-`<input>` elements.
16
-
17
-### React with Addons
18
-
19
-* Fixed bug with transition and animation event detection.
20
-
21
-[1]: https://github.com/sophiebits
22
-[2]: https://github.com/andreypopp
23
-[3]: https://github.com/lrowe
24
-
docs/_posts/2013-10-3-community-roundup-9.md
deleted
-98
@@ -1,98 +0,0 @@
1
----
2
-title: "Community Round-up #9"
3
-author: [vjeux]
4
----
5
-
6
-We organized a React hackathon last week-end in the Facebook Seattle office. 50 people, grouped into 15 teams, came to hack for a day on React. It was a lot of fun and we'll probably organize more in the future.
7
-
8
-
9
-
10
-
11
-## React Hackathon Winner
12
-
13
-[Alex Swan](http://bold-it.com/) implemented [Qu.izti.me](http://qu.izti.me/), a multi-player quiz game. It is real-time via Web Socket and mobile friendly.
14
-
15
-> The game itself is pretty simple. People join the "room" by going to [http://qu.izti.me](http://qu.izti.me/) on their device. Large displays will show a leaderboard along with the game, and small displays (such as phones) will act as personal gamepads. Users will see questions and a choice of answers. The faster you answer, the more points you earn.
16
->
17
-> In my opinion, Socket.io and React go together like chocolate and peanut butter. The page was always an accurate representation of the game object.
18
-><figure><a href="http://bold-it.com/javascript/facebook-react-example/"><img src="../img/blog/quiztime.png"></a></figure>
19
->
20
-> [Read More...](http://bold-it.com/javascript/facebook-react-example/)
21
-
22
-## JSConf EU Talk: Rethinking Best Practices
23
-
24
-[Pete Hunt](http://www.petehunt.net/) presented React at JSConf EU. He covers three controversial design decisions of React:
25
-
26
-1. Build **components**, not templates
27
-2. Re-render the whole app on every update
28
-3. Virtual DOM
29
-
30
-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:
31
-
32
-<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>
33
-
34
-
35
-## Pump - Clojure bindings for React
36
-
37
-[Alexander Solovyov](http://solovyov.net/) has been working on React bindings for ClojureScript. This is really exciting as it is using "native" ClojureScript data structures.
38
-
39
-```ruby
40
-(ns your.app
41
- (:require-macros [pump.def-macros :refer [defr]])
42
- (:require [pump.core]))
43
-
44
-(defr Component
45
- :get-initial-state #(identity {:some-value ""})
46
-
47
- [component props state]
48
-
49
- [:div {:class-name "test"} "hello"])
50
-```
51
-
52
-[Check it out on GitHub...](https://github.com/piranha/pump)
53
-
54
-
55
-## JSXHint
56
-
57
-[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.
58
-
59
-> 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.
60
->
61
-> ```
62
-> npm install -g jsxhint
63
-> ```
64
->
65
-> [Check it out on GitHub...](https://github.com/CondeNast/JSXHint)
66
-
67
-
68
-## Turbo React
69
-
70
-[Ross Allen](https://twitter.com/ssorallen) working at [Mesosphere](http://mesosphere.io/) combined [Turbolinks](https://github.com/rails/turbolinks/), a library used by Ruby on Rails to speed up page transition, and React.
71
-
72
-> "Re-request this page" is just a link to the current page. When you click it, Turbolinks intercepts the GET request and fetchs the full page via XHR.
73
->
74
-> The panel is rendered with a random panel- class on each request, and the progress bar gets a random widthX class.
75
->
76
-> With Turbolinks alone, the entire <body> would be replaced, and transitions would not happen. In this little demo though, React adds and removes classes and text, and the attribute changes are animated with CSS transitions. The DOM is otherwise left intact.
77
-><figure><a href="https://turbo-react.herokuapp.com/"><img src="../img/blog/turboreact.png"></a></figure>
78
->
79
-> [Check out the demo...](https://turbo-react.herokuapp.com/)
80
-
81
-
82
-## Reactive Table
83
-
84
-[Stoyan Stefanov](http://www.phpied.com/) continues his series of blog posts about React. This one is an introduction tutorial on rendering a simple table with React.
85
-
86
-> React is all about components. So let's build one.
87
->
88
-> Let's call it Table (to avoid any confusion what the component is about).
89
->
90
-> ```javascript
91
-> var Table = React.createClass({
92
-> /*stuff goeth here*/
93
-> });
94
-> ```
95
->
96
-> 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.
97
->
98
-> [Read the full article...](http://www.phpied.com/reactive-table/)
docs/_posts/2013-11-06-community-roundup-10.md
deleted
-124
@@ -1,124 +0,0 @@
1
----
2
-title: "Community Round-up #10"
3
-author: [vjeux]
4
----
5
-
6
-This is the 10th round-up already and React has come quite far since it was open sourced. Almost all new web projects at Khan Academy, Facebook, and Instagram are being developed using React. React has been deployed in a variety of contexts: a Chrome extension, a Windows 8 application, mobile websites, and desktop websites supporting Internet Explorer 8! Language-wise, React is not only being used within JavaScript but also CoffeeScript and ClojureScript.
7
-
8
-The best part is that no drastic changes have been required to support all those use cases. Most of the efforts were targeted at polishing edge cases, performance improvements, and documentation.
9
-
10
-## Khan Academy - Officially moving to React
11
-
12
-[Joel Burget](http://joelburget.com/) announced at Hack Reactor that new front-end code at Khan Academy should be written in React!
13
-
14
-> How did we get the rest of the team to adopt React? Using interns as an attack vector! Most full-time devs had already been working on their existing projects for a while and weren't looking to try something new at the time, but our class of summer interns was just arriving. For whatever reason, a lot of them decided to try React for their projects. Then mentors became exposed through code reviews or otherwise touching the new code. In this way React knowledge diffused to almost the whole team over the summer.
15
->
16
-> Since the first React checkin on June 5, we've somehow managed to accumulate 23500 lines of jsx (React-flavored js) code. Which is terrifying in a way - that's a lot of code - but also really exciting that it was picked up so quickly.
17
->
18
-> We held three meetings about how we should proceed with React. At the first two we decided to continue experimenting with React and deferred a final decision on whether to adopt it. At the third we adopted the policy that new code should be written in React.
19
->
20
-> I'm excited that we were able to start nudging code quality forward. However, we still have a lot of work to do! One of the selling points of this transition is adopting a uniform frontend style. We're trying to upgrade all the code from (really old) pure jQuery and (regular old) Backbone views / Handlebars to shiny React. At the moment all we've done is introduce more fragmentation. We won't be gratuitously updating working code (if it ain't broke, don't fix it), but are seeking out parts of the codebase where we can shoot two birds with one stone by rewriting in React while fixing bugs or adding functionality.
21
->
22
-> [Read the full article](http://joelburget.com/backbone-to-react/)
23
-
24
-
25
-## React: Rethinking best practices
26
-
27
-[Pete Hunt](http://www.petehunt.net/)'s talk at JSConf EU 2013 is now available in video.
28
-
29
-<figure><iframe width="650" height="370" src="//www.youtube-nocookie.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe></figure>
30
-
31
-
32
-## Server-side React with PHP
33
-
34
-[Stoyan Stefanov](http://www.phpied.com/)'s series of articles on React has two new entries on how to execute React on the server to generate the initial page load.
35
-
36
-> This post is an initial hack to have React components render server-side in PHP.
37
->
38
-> - Problem: Build web UIs
39
-> - Solution: React
40
-> - Problem: UI built in JS is anti-SEO (assuming search engines are still noscript) and bad for perceived performance (blank page till JS arrives)
41
-> - Solution: [React page](https://github.com/facebook/react-page) to render the first view
42
-> - Problem: Can't host node.js apps / I have tons of PHP code
43
-> - Solution: Use PHP then!
44
->
45
-> [**Read part 1 ...**](http://www.phpied.com/server-side-react-with-php/)
46
->
47
-> [**Read part 2 ...**](http://www.phpied.com/server-side-react-with-php-part-2/)
48
->
49
-> Rendered markup on the server:
50
-> <figure><a href="http://www.phpied.com/server-side-react-with-php-part-2/"><img src="../img/blog/react-php.png"></a></figure>
51
-
52
-
53
-## TodoMVC Benchmarks
54
-
55
-Webkit has a [TodoMVC Benchmark](https://github.com/WebKit/webkit/tree/master/PerformanceTests/DoYouEvenBench) that compares different frameworks. They recently included React and here are the results (average of 10 runs in Chrome 30):
56
-
57
-- **AngularJS:** 4043ms
58
-- **AngularJSPerf:** 3227ms
59
-- **BackboneJS:** 1874ms
60
-- **EmberJS:** 6822ms
61
-- **jQuery:** 14628ms
62
-- **React:** 2864ms
63
-- **VanillaJS:** 5567ms
64
-
65
-[Try it yourself!](http://www.petehunt.net/react/tastejs/benchmark.html)
66
-
67
-Please don't take those numbers too seriously, they only reflect one very specific use case and are testing code that wasn't written with performance in mind.
68
-
69
-Even though React scores as one of the fastest frameworks in the benchmark, the React code is simple and idiomatic. The only performance tweak used is the following function:
70
-
71
-```javascript
72
-/**
73
- * This is a completely optional performance enhancement that you can implement
74
- * on any React component. If you were to delete this method the app would still
75
- * work correctly (and still be very performant!), we just use it as an example
76
- * of how little code it takes to get an order of magnitude performance improvement.
77
- */
78
-shouldComponentUpdate: function (nextProps, nextState) {
79
- return (
80
- nextProps.todo.id !== this.props.todo.id ||
81
- nextProps.todo !== this.props.todo ||
82
- nextProps.editing !== this.props.editing ||
83
- nextState.editText !== this.state.editText
84
- );
85
-},
86
-```
87
-
88
-By default, React "re-renders" all the components when anything changes. This is usually fast enough that you don't need to care. However, you can provide a function that can tell whether there will be any change based on the previous and next states and props. If it is faster than re-rendering the component, then you get a performance improvement.
89
-
90
-The fact that you can control when components are rendered is a very important characteristic of React as it gives you control over its performance. We are going to talk more about performance in the future, stay tuned.
91
-
92
-## Guess the filter
93
-
94
-[Connor McSheffrey](http://conr.me) implemented a small game using React. The goal is to guess which filter has been used to create the Instagram photo.
95
-<figure><a href="http://guessthefilter.com/"><img src="../img/blog/guess_filter.jpg"></a></figure>
96
-
97
-
98
-## React vs FruitMachine
99
-
100
-[Andrew Betts](http://trib.tv/), director of the [Financial Times Labs](http://labs.ft.com/), posted an article comparing [FruitMachine](https://github.com/ftlabs/fruitmachine) and React.
101
-
102
-> Eerily similar, no? Maybe Facebook was inspired by Fruit Machine (after all, we got there first), but more likely, it just shows that this is a pretty decent way to solve the problem, and great minds think alike. We're graduating to a third phase in the evolution of web best practice - from intermingling of markup, style and behaviour, through a phase in which those concerns became ever more separated and encapsulated, and finally to a model where we can do that separation at a component level. Developments like Web Components show the direction the web community is moving, and frameworks like React and Fruit Machine are in fact not a lot more than polyfills for that promised behaviour to come.
103
->
104
-> [Read the full article...](http://labs.ft.com/2013/10/client-side-layout-engines-react-vs-fruitmachine/)
105
-
106
-Even though we weren't inspired by FruitMachine (React has been used in production since before FruitMachine was open sourced), it's great to see similar technologies emerging and becoming popular.
107
-
108
-## React Brunch
109
-
110
-[Matthew McCray](http://elucidata.net/) implemented [react-brunch](https://npmjs.org/package/react-brunch), a JSX compilation step for [Brunch](http://brunch.io/).
111
-
112
-> Adds React support to brunch by automatically compiling `*.jsx` files.
113
->
114
-> You can configure react-brunch to automatically insert a react header (`/** @jsx React.DOM */`) into all `*.jsx` files. Disabled by default.
115
->
116
-> Install the plugin via npm with `npm install --save react-brunch`.
117
->
118
-> [Read more...](https://npmjs.org/package/react-brunch)
119
-
120
-## Random Tweet
121
-
122
-I'm going to start adding a tweet at the end of each round-up. We'll start with this one:
123
-
124
-<blockquote class="twitter-tweet"><p>This weekend <a href="https://twitter.com/search?q=%23angular&src=hash">#angular</a> died for me. Meet new king <a href="https://twitter.com/search?q=%23reactjs&src=hash">#reactjs</a></p>— Eldar Djafarov ッ (@edjafarov) <a href="https://twitter.com/edjafarov/statuses/397033796710961152">November 3, 2013</a></blockquote>
docs/_posts/2013-11-18-community-roundup-11.md
deleted
-91
@@ -1,91 +0,0 @@
1
----
2
-title: "Community Round-up #11"
3
-author: [vjeux]
4
----
5
-
6
-This round-up is the proof that React has taken off from its Facebook's root: it features three in-depth presentations of React done by external people. This is awesome, keep them coming!
7
-
8
-## Super VanJS 2013 Talk
9
-
10
-[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.
11
-
12
-<figure><iframe width="650" height="338" src="//www.youtube-nocookie.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe></figure>
13
-
14
-
15
-## React Tips
16
-
17
-[Connor McSheffrey](http://connormcsheffrey.com/) and [Cheng Lou](https://github.com/chenglou) added a new section to the documentation. It's a list of small tips that you will probably find useful while working on React. Since each article is very small and focused, we [encourage you to contribute](/tips/introduction.html)!
18
-
19
-- [Inline Styles](/tips/inline-styles.html)
20
-- [If-Else in JSX](/tips/if-else-in-JSX.html)
21
-- [Self-Closing Tag](/tips/self-closing-tag.html)
22
-- [Maximum Number of JSX Root Nodes](/tips/maximum-number-of-jsx-root-nodes.html)
23
-- [Shorthand for Specifying Pixel Values in style props](/tips/style-props-value-px.html)
24
-- [Type of the Children props](/tips/children-props-type.html)
25
-- [Value of null for Controlled Input](/tips/controlled-input-null-value.html)
26
-- [`componentWillReceiveProps` Not Triggered After Mounting](/tips/componentWillReceiveProps-not-triggered-after-mounting.html)
27
-- [Props in getInitialState Is an Anti-Pattern](/tips/props-in-getInitialState-as-anti-pattern.html)
28
-- [DOM Event Listeners in a Component](/tips/dom-event-listeners.html)
29
-- [Load Initial Data via AJAX](/tips/initial-ajax.html)
30
-- [False in JSX](/tips/false-in-jsx.html)
31
-
32
-
33
-## Intro to the React Framework
34
-
35
-[Pavan Podila](http://blog.pixelingene.com/) wrote an in-depth introduction to React on TutsPlus. This is definitively worth reading.
36
-
37
-> Within a component-tree, data should always flow down. A parent-component should set the props of a child-component to pass any data from the parent to the child. This is termed as the Owner-Owned pair. On the other hand user-events (mouse, keyboard, touches) will always bubble up from the child all the way to the root component, unless handled in between.
38
-<figure><a href="http://dev.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660"><img src="../img/blog/tutsplus.png"></a></figure>
39
->
40
-> [Read the full article ...](http://dev.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660)
41
-
42
-
43
-## 140-characters textarea
44
-
45
-[Brian Kim](https://github.com/brainkim) wrote a small textarea component that gradually turns red as you reach the 140-characters limit. Because he only changes the background color, React is smart enough not to mess with the text selection.
46
-
47
-<p data-height="178" data-theme-id="0" data-slug-hash="FECGb" data-user="brainkim" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/brainkim/pen/FECGb'>FECGb</a> by Brian Kim (<a href='http://codepen.io/brainkim'>@brainkim</a>) on <a href='http://codepen.io'>CodePen</a></p>
48
-<script async src="//codepen.io/assets/embed/ei.js"></script>
49
-
50
-
51
-## Genesis Skeleton
52
-
53
-[Eric Clemmons](https://ericclemmons.github.io/) is working on a "Modern, opinionated, full-stack starter kit for rapid, streamlined application development". The version 0.4.0 has just been released and has first-class support for React.
54
-<figure><a href="http://genesis-skeleton.com/"><img src="../img/blog/genesis_skeleton.png"></a>a></figure>
55
-
56
-
57
-## AgFlow Talk
58
-
59
-[Robert Zaremba](http://rz.scale-it.pl/) working on [AgFlow](http://www.agflow.com/) recently talked in Poland about React.
60
-
61
-> In a nutshell, I presented why we chose React among other available options (ember.js, angular, backbone ...) in AgFlow, where I’m leading an application development.
62
->
63
-> During the talk a wanted to highlight that React is not about implementing a Model, but a way to construct visible components with some state. React is simple. It is super simple, you can learn it in 1h. On the other hand what is model? Which functionality it should provide? React does one thing and does it the best (for me)!
64
->
65
-> [Read the full article...](http://rz.scale-it.pl/2013/10/20/frontend_components_in_react.html)
66
-
67
-<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>
68
-
69
-
70
-## JSX
71
-
72
-[Todd Kennedy](http://tck.io/) working at Condé Nast wrote [JSXHint](https://github.com/CondeNast/JSXHint) and explains in a blog post his perspective on JSX.
73
-
74
-> Lets start with the elephant in the room: JSX?
75
-> Is this some sort of template language? Specifically no. This might have been the first big stumbling block. What looks like to be a templating language is actually an in-line DSL that gets transpiled directly into JavaScript by the JSX transpiler.
76
->
77
-> Creating elements in memory is quick -- copying those elements into the DOM is where the slowness occurs. This is due to a variety of issues, most namely reflow/paint. Changing the items in the DOM causes the browser to re-paint the display, apply styles, etc. We want to keep those operations to an absolute minimum, especially if we're dealing with something that needs to update the DOM frequently.
78
->
79
-> [Read the full article...](http://tck.io/posts/jsxhint_and_react.html)
80
-
81
-
82
-## Photo Gallery
83
-
84
-[Maykel Loomans](http://miekd.com/), designer at Instagram, wrote a gallery for photos he shot using React.
85
-<figure><a href="http://photos.miekd.com/xoxo2013/"><img src="../img/blog/xoxo2013.png"></a>a></figure>
86
-
87
-
88
-## Random Tweet
89
-
90
-<img src="../img/blog/steve_reverse.gif" style="float: right;" />
91
-<div style="width: 320px;"><blockquote class="twitter-tweet"><p>I think this reversed gif of Steve Urkel best describes my changing emotions towards the React Lib <a href="http://t.co/JoX0XqSXX3">http://t.co/JoX0XqSXX3</a></p>— Ryan Seddon (@ryanseddon) <a href="https://twitter.com/ryanseddon/statuses/398572848802852864">November 7, 2013</a></blockquote></div>
docs/_posts/2013-12-18-react-v0.5.2-v0.4.2.md
deleted
-22
@@ -1,22 +0,0 @@
1
----
2
-title: "React v0.5.2, v0.4.2"
3
-author: [zpao]
4
----
5
-
6
-Today we're releasing an update to address a potential XSS vulnerability that can arise when using user data as a `key`. Typically "safe" data is used for a `key`, for example, an id from your database, or a unique hash. However there are cases where it may be reasonable to use user generated content. A carefully crafted piece of content could result in arbitrary JS execution. While we make a very concerted effort to ensure all text is escaped before inserting it into the DOM, we missed one case. Immediately following the discovery of this vulnerability, we performed an audit to ensure we this was the only such vulnerability.
7
-
8
-This only affects v0.5.x and v0.4.x. Versions in the 0.3.x family are unaffected.
9
-
10
-Updated versions are available for immediate download via npm, bower, and on our [download page][download].
11
-
12
-We take security very seriously at Facebook. For most of our products, users don't need to know that a security issue has been fixed. But with libraries like React, we need to make sure developers using React have access to fixes to keep their users safe.
13
-
14
-While we've encouraged responsible disclosure as part of [Facebook's whitehat bounty program][bounty] since we launched, we don't have a good process for notifying our users. Hopefully we don't need to use it, but moving forward we'll set up a little bit more process to ensure the safety of our users. Ember.js has [an excellent policy][ember] which we may use as our model.
15
-
16
-You can learn more about the vulnerability discussed here: [CVE-2013-7035][cve].
17
-
18
-[download]: /react/downloads.html
19
-[bounty]: https://www.facebook.com/whitehat/
20
-[ember]: http://emberjs.com/security/
21
-[cve]: https://groups.google.com/forum/#!topic/reactjs/OIqxlB2aGfU
22
-
docs/_posts/2013-12-19-react-v0.8.0.md
deleted
-47
@@ -1,47 +0,0 @@
1
----
2
-title: "React v0.8"
3
-author: [zpao]
4
----
5
-
6
-I'll start by answering the obvious question:
7
-
8
-> What happened to 0.6 and 0.7?
9
-
10
-It's become increasingly obvious since our launch in May that people want to use React on the server. With the server-side rendering abilities, that's a perfect fit. However using the same copy of React on the server and then packaging it up for the client is surprisingly a harder problem. People have been using our `react-tools` module which includes React, but when browserifying that ends up packaging all of `esprima` and some other dependencies that aren't needed on the client. So we wanted to make this whole experience better.
11
-
12
-We talked with [Jeff Barczewski][jeff] who was the owner of the `react` module on npm. He was kind enough to transition ownership to us and release his package under a different name: `autoflow`. I encourage you to [check it out][autoflow] if you're writing a lot of asynchronous code. In order to not break all of `react`'s current users of 0.7.x, we decided to bump our version to 0.8 and skip the issue entirely. We're also including a warning if you use our `react` module like you would use the previous package.
13
-
14
-In order to make the transition to 0.8 for our current users as painless as possible, we decided to make 0.8 primarily a bug fix release on top of 0.5. No public APIs were changed (even if they were already marked as deprecated). We haven't added any of the new features we have in master, though we did take the opportunity to pull in some improvements to internals.
15
-
16
-We hope that by releasing `react` on npm, we will enable a new set of uses that have been otherwise difficult. All feedback is welcome!
17
-
18
-
19
-## Changelog
20
-
21
-### React
22
-
23
-* Added support for more attributes:
24
- * `rows` & `cols` for `<textarea>`
25
- * `defer` & `async` for `<script>`
26
- * `loop` for `<audio>` & `<video>`
27
- * `autoCorrect` for form fields (a non-standard attribute only supported by mobile WebKit)
28
-* Improved error messages
29
-* Fixed Selection events in IE11
30
-* Added `onContextMenu` events
31
-
32
-### React with Addons
33
-
34
-* Fixed bugs with TransitionGroup when children were undefined
35
-* Added support for `onTransition`
36
-
37
-### react-tools
38
-
39
-* Upgraded `jstransform` and `esprima-fb`
40
-
41
-### JSXTransformer
42
-
43
-* Added support for use in IE8
44
-* Upgraded browserify, which reduced file size by ~65KB (16KB gzipped)
45
-
46
-[jeff]: https://github.com/jeffbski
47
-[autoflow]: https://github.com/jeffbski/autoflow
docs/_posts/2013-12-23-community-roundup-12.md
deleted
-102
@@ -1,102 +0,0 @@
1
----
2
-title: "Community Round-up #12"
3
-author: [vjeux]
4
----
5
-
6
-React got featured on the front-page of Hacker News thanks to the Om library. If you try it out for the first time, take a look at the [docs](/docs/getting-started.html) and do not hesitate to ask questions on the [Google Group](https://groups.google.com/group/reactjs), [IRC](irc://chat.freenode.net/reactjs) or [Stack Overflow](http://stackoverflow.com/questions/tagged/reactjs). We are trying our best to help you out!
7
-
8
-## The Future of JavaScript MVC
9
-
10
-[David Nolen](https://swannodette.github.io/) announced Om, a thin wrapper on-top of React in ClojureScript. It stands out by only using immutable data structures. This unlocks the ability to write a very efficient [shouldComponentUpdate](/docs/component-specs.html#updating-shouldcomponentupdate) and get huge performance improvements on some tasks.
11
-
12
-> We've known this for some time over here in the ClojureScript corner of the world - all of our collections are immutable and modeled directly on the original Clojure versions written in Java. Modern JavaScript engines have now been tuned to the point that it's no longer uncommon to see collection performance within 2.5X of the Java Virtual Machine.
13
->
14
-> Wait, wait, wait. What does the performance of persistent data structures have to do with the future of JavaScript MVCs?
15
->
16
-> A whole lot.
17
-> <figure><a href="https://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/"><img src="../img/blog/om-backbone.png"></a></figure>
18
->
19
-> [Read the full article...](https://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/)
20
-
21
-
22
-
23
-## Scroll Position with React
24
-
25
-Managing the scroll position when new content is inserted is usually very tricky to get right. [Vjeux](http://blog.vjeux.com/) discovered that [componentWillUpdate](/docs/component-specs.html#updating-componentwillupdate) and [componentDidUpdate](/docs/component-specs.html#updating-componentdidupdate) were triggered exactly at the right time to manage the scroll position.
26
-
27
-> We can check the scroll position before the component has updated with componentWillUpdate and scroll if necessary at componentDidUpdate
28
->
29
-> ```js
30
-> componentWillUpdate: function() {
31
-> var node = this.getDOMNode();
32
-> this.shouldScrollBottom =
33
-> (node.scrollTop + node.offsetHeight) === node.scrollHeight;
34
-> },
35
-> componentDidUpdate: function() {
36
-> if (this.shouldScrollBottom) {
37
-> var node = this.getDOMNode();
38
-> node.scrollTop = node.scrollHeight
39
-> }
40
-> },
41
-> ```
42
->
43
-> [Check out the blog article...](http://blog.vjeux.com/2013/javascript/scroll-position-with-react.html)
44
-
45
-
46
-## Lights Out
47
-
48
-React declarative approach is well suited to write games. [Cheng Lou](https://github.com/chenglou) wrote the famous Lights Out game in React. It's a good example of use of [TransitionGroup](/docs/animation.html) to implement animations.
49
-<figure><a href="https://chenglou.github.io/react-lights-out/"><img src="../img/blog/lights-out.png"></a></figure>
50
-
51
-[Try it out!](https://chenglou.github.io/react-lights-out/)
52
-
53
-
54
-## Reactive Table Bookmarklet
55
-
56
-[Stoyan Stefanov](http://www.phpied.com/) wrote a bookmarklet to process tables on the internet. It adds a little "pop" button that expands to a full-screen view with sorting, editing and export to csv and json.
57
-<figure><a href="http://www.phpied.com/reactivetable-bookmarklet/"><img src="../img/blog/reactive-bookmarklet.png"></a></figure>
58
-
59
-[Check out the blog post...](http://www.phpied.com/reactivetable-bookmarklet/)
60
-
61
-
62
-## MontageJS Tutorial in React
63
-
64
-[Ross Allen](https://twitter.com/ssorallen) implemented [MontageJS](http://montagejs.org/)'s [Reddit tutorial](http://montagejs.org/docs/tutorial-reddit-client-with-montagejs.html) in React. This is a good opportunity to compare the philosophies of the two libraries.
65
-
66
-[View the source on JSFiddle...](https://jsfiddle.net/ssorallen/fEsYt/)
67
-
68
-## Writing Good React Components
69
-
70
-[William Högman Rudenmalm](http://blog.whn.se/) wrote an article on how to write good React components. This is full of good advice.
71
-
72
-> The idea of dividing software into smaller parts or components is hardly new - It is the essance of good software. The same principles that apply to software in general apply to building React components. That doesn’t mean that writing good React components is just about applying general rules.
73
->
74
-> The web offers a unique set of challenges, which React offers interesting solutions to. First and foremost among these solutions is the what is called the Mock DOM. Rather than having user code interface with the DOM in a direct fashion, as is the case with most DOM manipulation libraries.
75
->
76
-> You build a model of how you want the DOM end up like. React then inserts this model into the DOM. This is very useful for updates because React simply compares the model or mock DOM against the actual DOM, and then only updates based on the difference between the two states.
77
->
78
-> [Read the full article ...](http://blog.whn.se/post/69621609605/writing-good-react-components)
79
-
80
-
81
-## Hoodie React TodoMVC
82
-
83
-[Sven Lito](http://svenlito.com/) integrated the React TodoMVC example within an [Hoodie](http://hood.ie/) web app environment. This should let you get started using Hoodie and React.
84
-
85
-```
86
-hoodie new todomvc -t "hoodiehq/hoodie-react-todomvc"
87
-```
88
-
89
-[Check out on GitHub...](https://github.com/hoodiehq/hoodie-react-todomvc)
90
-
91
-## JSX Compiler
92
-
93
-Ever wanted to have a quick way to see what a JSX tag would be converted to? [Tim Yung](http://www.yungsters.com/) made a page for it.
94
-<figure><a href="/react/jsx-compiler.html"><img src="../img/blog/jsx-compiler.png"></a></figure>
95
-
96
-[Try it out!](/jsx-compiler.html)
97
-
98
-
99
-
100
-## Random Tweet
101
-
102
-<center><blockquote class="twitter-tweet" lang="en"><p>.<a href="https://twitter.com/jordwalke">@jordwalke</a> lays down some truth <a href="http://t.co/AXAn0UlUe3">http://t.co/AXAn0UlUe3</a>, optimizing your JS application shouldn't force you to rewrite so much code <a href="https://twitter.com/search?q=%23reactjs&src=hash">#reactjs</a></p>— David Nolen (@swannodette) <a href="https://twitter.com/swannodette/statuses/413780079249215488">December 19, 2013</a></blockquote></center>
docs/_posts/2013-12-30-community-roundup-13.md
deleted
-117
@@ -1,117 +0,0 @@
1
----
2
-title: "Community Round-up #13"
3
-author: [vjeux]
4
----
5
-
6
-Happy holidays! This blog post is a little-late Christmas present for all the React users. Hopefully it will inspire you to write awesome web apps in 2014!
7
-
8
-
9
-## React Touch
10
-
11
-[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.
12
-
13
-<figure><iframe src="//player.vimeo.com/video/79659941" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></figure>
14
-
15
-[Try out the demos!](https://petehunt.github.io/react-touch/)
16
-
17
-
18
-## Introduction to React
19
-
20
-[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.
21
-
22
-<figure><iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe></figure>
23
-
24
-
25
-## JSX: E4X The Good Parts
26
-
27
-JSX is often compared to the now defunct E4X, [Vjeux](http://blog.vjeux.com/) went over all the E4X features and explained how JSX is different and hopefully doesn't repeat the same mistakes.
28
-
29
-> E4X (ECMAScript for XML) is a JavaScript syntax extension and a runtime to manipulate XML. It was promoted by Mozilla but failed to become mainstream and is now deprecated. JSX was inspired by E4X. In this article, I'm going to go over all the features of E4X and explain the design decisions behind JSX.
30
->
31
-> **Historical Context**
32
->
33
-> E4X has been created in 2002 by John Schneider. This was the golden age of XML where it was being used for everything: data, configuration files, code, interfaces (DOM) ... E4X was first implemented inside of Rhino, a JavaScript implementation from Mozilla written in Java.
34
->
35
-> [Continue reading ...](http://blog.vjeux.com/2013/javascript/jsx-e4x-the-good-parts.html)
36
-
37
-
38
-## React + Socket.io
39
-
40
-[Geert Pasteels](http://enome.be/nl) made a small experiment with Socket.io. He wrote a very small mixin that synchronizes React state with the server. Just include this mixin to your React component and it is now live!
41
-
42
-```javascript
43
-changeHandler: function (data) {
44
- if (!_.isEqual(data.state, this.state) && this.path === data.path) {
45
- this.setState(data.state);
46
- }
47
-},
48
-componentDidMount: function (root) {
49
- this.path = utils.nodePath(root);
50
- socket.on('component-change', this.changeHandler);
51
-},
52
-componentWillUpdate: function (props, state) {
53
- socket.emit('component-change', { path: this.path, state: state });
54
-},
55
-componentWillUnmount: function () {
56
- socket.removeListener('component-change', this.change);
57
-}
58
-```
59
-
60
-[Check it out on GitHub...](https://github.com/Enome/react.io)
61
-
62
-
63
-## cssobjectify
64
-
65
-[Andrey Popp](http://andreypopp.com/) implemented a source transform that takes a CSS file and converts it to JSON. This integrates pretty nicely with React.
66
-
67
-```javascript
68
-/* style.css */
69
-MyComponent {
70
- font-size: 12px;
71
- background-color: red;
72
-}
73
-
74
-/* myapp.js */
75
-var React = require('react-tools/build/modules/React');
76
-var Styles = require('./styles.css');
77
-
78
-var MyComponent = React.createClass({
79
- render: function() {
80
- return (
81
- <div style={Styles.MyComponent}>
82
- Hello, world!
83
- </div>
84
- )
85
- }
86
-});
87
-```
88
-
89
-[Check it out on GitHub...](https://github.com/andreypopp/cssobjectify)
90
-
91
-
92
-## ngReact
93
-
94
-[David Chang](http://davidandsuzi.com/) working at [HasOffer](http://www.hasoffers.com/) wanted to speed up his Angular app and replaced Angular primitives by React at different layers. When using React naively it is 67% faster, but when combining it with angular's transclusion it is 450% slower.
95
-
96
-> Rendering this takes 803ms for 10 iterations, hovering around 35 and 55ms for each data reload (that's 67% faster). You'll notice that the first load takes a little longer than successive loads, and the second load REALLY struggles - here, it's 433ms, which is more than half of the total time!
97
-> <figure><a href="http://davidandsuzi.com/ngreact-react-components-in-angular/"><img src="../img/blog/ngreact.png"></a></figure>
98
->
99
-> [Read the full article...](http://davidandsuzi.com/ngreact-react-components-in-angular/)
100
-
101
-
102
-## vim-jsx
103
-
104
-[Max Wang](https://github.com/mxw) made a vim syntax highlighting and indentation plugin for vim.
105
-
106
-> Syntax highlighting and indenting for JSX. JSX is a JavaScript syntax transformer which translates inline XML document fragments into JavaScript objects. It was developed by Facebook alongside React.
107
->
108
-> This bundle requires pangloss's [vim-javascript](https://github.com/pangloss/vim-javascript) syntax highlighting.
109
->
110
-> Vim support for inline XML in JS is remarkably similar to the same for PHP.
111
->
112
-> [View on GitHub...](https://github.com/mxw/vim-jsx)
113
-
114
-
115
-## Random Tweet
116
-
117
-<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>
docs/_posts/2014-01-02-react-chrome-developer-tools.md
deleted
-17
@@ -1,17 +0,0 @@
1
----
2
-title: "React Chrome Developer Tools"
3
-author: [sebmarkbage]
4
----
5
-
6
-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).
7
-
8
-<figure><iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/Cey7BS6dE0M" frameborder="0" allowfullscreen></iframe></figure>
9
-
10
-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.
11
-
12
-Selecting a Component in this tab allows you to view and edit its props and state in the panel on the right. In the breadcrumbs at the bottom, you can inspect the selected Component, the Component that created it, the Component that created that one, and so on.
13
-
14
-When you inspect a DOM element using the regular Elements tab, you can switch over to the React tab and the corresponding Component will be automatically selected. The Component will also be automatically selected if you have a breakpoint within its render phase. This allows you to step through the render tree and see how one Component affects another one.
15
-<figure><a href="https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi"><img src="../img/blog/react-dev-tools.jpg"></a></figure>
16
-
17
-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).
docs/_posts/2014-01-06-community-roundup-14.md
deleted
-90
@@ -1,90 +0,0 @@
1
----
2
-title: "Community Round-up #14"
3
-author: [vjeux]
4
----
5
-
6
-The theme of this first round-up of 2014 is integration. I've tried to assemble a list of articles and projects that use React in various environments.
7
-
8
-## React Baseline
9
-
10
-React is only one-piece of your web application stack. [Mark Lussier](https://github.com/intabulas) shared his baseline stack that uses React along with Grunt, Browserify, Bower, Zepto, Director and Sass. This should help you get started using React for a new project.
11
-
12
-> As I do more projects with ReactJS I started to extract a baseline to use when starting new projects. This is very opinionated and I change my opinion from time to time. This is by no ways perfect and in your opinion most likely wrong :).. which is why I love github
13
->
14
-> I encourage you to fork, and make it right and submit a pull request!
15
->
16
-> 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
17
->
18
-> [Check it out on GitHub...](https://github.com/intabulas/reactjs-baseline)
19
-
20
-
21
-## Animal Sounds
22
-
23
-[Josh Duck](http://joshduck.com/) used React in order to build a Windows 8 tablet app. This is a good example of a touch app written in React.
24
-[](http://apps.microsoft.com/windows/en-us/app/baby-play-animal-sounds/9280825c-2ed9-41c0-ba38-aa9a5b890bb9)
25
-
26
-[Download the app...](http://apps.microsoft.com/windows/en-us/app/baby-play-animal-sounds/9280825c-2ed9-41c0-ba38-aa9a5b890bb9)
27
-
28
-
29
-## React Rails Tutorial
30
-
31
-[Selem Delul](http://selem.im) bundled the [React Tutorial](/tutorial/tutorial.html) into a rails app. This is a good example on how to get started with a rails project.
32
-
33
-> ```sh
34
-> git clone https://github.com/necrodome/react-rails-tutorial
35
-> cd react-rails-tutorial
36
-> bundle install
37
-> rake db:migrate
38
-> rails s
39
-> ```
40
-> Then visit http://localhost:3000/app to see the React application that is explained in the React Tutorial. Try opening multiple tabs!
41
->
42
-> [View on GitHub...](https://github.com/necrodome/react-rails-tutorial)
43
-
44
-## Mixing with Backbone
45
-
46
-[Eldar Djafarov](http://eldar.djafarov.com/) implemented a mixin to link Backbone models to React state and a small abstraction to write two-way binding on-top.
47
-
48
-[View code on JSFiddle](http://jsfiddle.net/djkojb/qZf48/13/)
49
-
50
-[Check out the blog post...](http://eldar.djafarov.com/2013/11/reactjs-mixing-with-backbone/)
51
-
52
-
53
-## React Infinite Scroll
54
-
55
-[Guillaume Rivals](https://twitter.com/guillaumervls) implemented an InfiniteScroll component. This is a good example of a React component that has a simple yet powerful API.
56
-
57
-```javascript
58
-<InfiniteScroll
59
- pageStart={0}
60
- loadMore={loadFunc}
61
- hasMore={true || false}
62
- loader={<div className="loader">Loading ...</div>}>
63
- {items} // <-- This is the "stuff" you want to load
64
-</InfiniteScroll>
65
-```
66
-
67
-[Try it out on GitHub!](https://github.com/guillaumervls/react-infinite-scroll)
68
-
69
-
70
-## Web Components Style
71
-
72
-[Thomas Aylott](http://subtlegradient.com/) implemented an API that looks like Web Components but using React underneath.
73
-
74
-[View the source on JSFiddle...](http://jsfiddle.net/SubtleGradient/ue2Aa)
75
-
76
-## React vs Angular
77
-
78
-React is often compared with Angular. [Pete Hunt](http://skulbuny.com/2013/10/31/react-vs-angular/) wrote an opinionated post on the subject.
79
-
80
-> First of all I think it’s important to evaluate technologies on objective rather than subjective features. “It feels nicer” or “it’s cleaner” aren’t valid reasons: performance, modularity, community size and ease of testing / integration with other tools are.
81
->
82
-> I’ve done a lot of work benchmarking, building apps, and reading the code of Angular to try to come up with a reasonable comparison between their ways of doing things.
83
->
84
-> [Read the full post...](http://skulbuny.com/2013/10/31/react-vs-angular/)
85
-
86
-
87
-
88
-## Random Tweet
89
-
90
-<div><blockquote class="twitter-tweet" lang="en"><p>Really intrigued by React.js. I've looked at all JS frameworks, and excepting <a href="https://twitter.com/serenadejs">@serenadejs</a> this is the first one which makes sense to me.</p>— Jonas Nicklas (@jonicklas) <a href="https://twitter.com/jonicklas/statuses/412640708755869696">December 16, 2013</a></blockquote></div>
docs/_posts/2014-02-05-community-roundup-15.md
deleted
-125
@@ -1,125 +0,0 @@
1
----
2
-title: "Community Round-up #15"
3
-author: [jgebhardt]
4
----
5
-
6
-Interest in React seems to have surged ever since David Nolen ([@swannodette](https://twitter.com/swannodette))'s introduction of [Om](https://github.com/swannodette/om) in his post ["The Future of JavaScript MVC Frameworks"](https://swannodette.github.io/2013/12/17/the-future-of-javascript-mvcs/).
7
-
8
-In this React Community Round-up, we are taking a closer look at React from a functional programming perspective.
9
-
10
-## "React: Another Level of Indirection"
11
-To start things off, Eric Normand ([@ericnormand](https://twitter.com/ericnormand)) of [LispCast](http://lispcast.com) makes the case for [React from a general functional programming standpoint](http://www.lispcast.com/react-another-level-of-indirection) and explains how React's "Virtual DOM provides the last piece of the Web Frontend Puzzle for ClojureScript".
12
-
13
-> The Virtual DOM is an indirection mechanism that solves the difficult problem of DOM programming: how to deal with incremental changes to a stateful tree structure. By abstracting away the statefulness, the Virtual DOM turns the real DOM into an immediate mode GUI, which is perfect for functional programming.
14
->
15
-> [Read the full post...](http://www.lispcast.com/react-another-level-of-indirection)
16
-
17
-## Reagent: Minimalistic React for ClojureScript
18
-Dan Holmsand ([@holmsand](https://twitter.com/holmsand)) created [Reagent](https://holmsand.github.io/reagent/), a simplistic ClojureScript API to React.
19
-
20
-> It allows you to define efficient React components using nothing but plain ClojureScript functions and data, that describe your UI using a Hiccup-like syntax.
21
->
22
-> The goal of Reagent is to make it possible to define arbitrarily complex UIs using just a couple of basic concepts, and to be fast enough by default that you rarely have to care about performance.
23
->
24
-> [Check it out on GitHub...](https://holmsand.github.io/reagent/)
25
-
26
-
27
-## Functional DOM programming
28
-
29
-React's one-way data-binding naturally lends itself to a functional programming approach. Facebook's Pete Hunt ([@floydophone](https://twitter.com/floydophone)) explores how one would go about [writing web apps in a functional manner](https://medium.com/p/67d81637d43). Spoiler alert:
30
-
31
-> This is React. It’s not about templates, or data binding, or DOM manipulation. It’s about using functional programming with a virtual DOM representation to build ambitious, high-performance apps with JavaScript.
32
->
33
-> [Read the full post...](https://medium.com/p/67d81637d43)
34
-
35
-Pete also explains this in detail at his #MeteorDevShop talk (about 30 Minutes):
36
-
37
-<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/Lqcs6hPOcFw?start=2963" frameborder="0" allowfullscreen></iframe>
38
-
39
-
40
-
41
-## Kioo: Separating markup and logic
42
-[Creighton Kirkendall](https://github.com/ckirkendall) created [Kioo](https://github.com/ckirkendall/kioo), which adds Enlive-style templating to React. HTML templates are separated from the application logic. Kioo comes with separate examples for both Om and Reagent.
43
-
44
-A basic example from github:
45
-
46
-```html
47
-<!DOCTYPE html>
48
-<html lang="en">
49
- <body>
50
- <header>
51
- <h1>Header placeholder</h1>
52
- <ul id="navigation">
53
- <li class="nav-item"><a href="#">Placeholder</a></li>
54
- </ul>
55
- </header>
56
- <div class="content">place holder</div>
57
- </body>
58
-</html>
59
-```
60
-
61
-```clojure
62
-...
63
-
64
-(defn my-nav-item [[caption func]]
65
- (kioo/component "main.html" [:.nav-item]
66
- {[:a] (do-> (content caption)
67
- (set-attr :onClick func))}))
68
-
69
-(defn my-header [heading nav-elms]
70
- (kioo/component "main.html" [:header]
71
- {[:h1] (content heading)
72
- [:ul] (content (map my-nav-item nav-elms))}))
73
-
74
-(defn my-page [data]
75
- (kioo/component "main.html"
76
- {[:header] (substitute (my-header (:heading data)
77
- (:navigation data)))
78
- [:.content] (content (:content data))}))
79
-
80
-(def app-state (atom {:heading "main"
81
- :content "Hello World"
82
- :navigation [["home" #(js/alert %)]
83
- ["next" #(js/alert %)]]}))
84
-
85
-(om/root app-state my-page (.-body js/document))
86
-```
87
-
88
-## Om
89
-
90
-In an interview with David Nolen, Tom Coupland ([@tcoupland](https://twitter.com/tcoupland)) of InfoQ provides a nice summary of recent developments around Om ("[Om: Enhancing Facebook's React with Immutability](http://www.infoq.com/news/2014/01/om-react)").
91
-
92
-> David [Nolen]: I think people are starting to see the limitations of just JavaScript and jQuery and even more structured solutions like Backbone, Angular, Ember, etc. React is a fresh approach to the DOM problem that seems obvious in hindsight.
93
->
94
-> [Read the full interview...](http://www.infoq.com/news/2014/01/om-react)
95
-
96
-### A slice of React, ClojureScript and Om
97
-
98
-Fredrik Dyrkell ([@lexicallyscoped](https://twitter.com/lexicallyscoped)) rewrote part of the [React tutorial in both ClojureScript and Om](http://www.lexicallyscoped.com/2013/12/25/slice-of-reactjs-and-cljs.html), along with short, helpful explanations.
99
-
100
-> React has sparked a lot of interest in the Clojure community lately [...]. At the very core, React lets you build up your DOM representation in a functional fashion by composing pure functions and you have a simple building block for everything: React components.
101
->
102
-> [Read the full post...](http://www.lexicallyscoped.com/2013/12/25/slice-of-reactjs-and-cljs.html)
103
-
104
-In a separate post, Dyrkell breaks down [how to build a binary clock component](http://www.lexicallyscoped.com/2014/01/23/ClojureScript-react-om-binary-clock.html) in Om.
105
-
106
-[[Demo](http://www.lexicallyscoped.com/demo/binclock/)] [[Code](https://github.com/fredyr/binclock/blob/master/src/binclock/core.cljs)]
107
-
108
-### Time Travel: Implementing undo in Om
109
-David Nolen shows how to leverage immutable data structures to [add global undo](https://swannodette.github.io/2013/12/31/time-travel/) functionality to an app – using just 13 lines of ClojureScript.
110
-
111
-### A Step-by-Step Om Walkthrough
112
-
113
-[Josh Lehman](http://www.joshlehman.me) took the time to create an extensive [step-by-step walkthrough](http://www.joshlehman.me/rewriting-the-react-tutorial-in-om/) of the React tutorial in Om. The well-documented source is on [github](https://github.com/jalehman/omtut-starter).
114
-
115
-### Omkara
116
-
117
-[brendanyounger](https://github.com/brendanyounger) created [omkara](https://github.com/brendanyounger/omkara), a starting point for ClojureScript web apps based on Om/React. It aims to take advantage of server-side rendering and comes with a few tips on getting started with Om/React projects.
118
-
119
-### Om Experience Report
120
-Adam Solove ([@asolove](https://twitter.com/asolove/)) [dives a little deeper into Om, React and ClojureScript](http://adamsolove.com/js/clojure/2014/01/06/om-experience-report.html). He shares some helpful tips he gathered while building his [CartoCrayon](https://github.com/asolove/carto-crayon) prototype.
121
-
122
-## Not-so-random Tweet
123
-
124
-
125
-<div><blockquote class="twitter-tweet" lang="en"><p>[@swannodette](https://twitter.com/swannodette) No thank you! It's honestly a bit weird because Om is exactly what I didn't know I wanted for doing functional UI work.</p>— Adam Solove (@asolove) <a href="https://twitter.com/asolove/status/420294067637858304">January 6, 2014</a></blockquote></div>
docs/_posts/2014-02-15-community-roundup-16.md
deleted
-86
@@ -1,86 +0,0 @@
1
----
2
-title: "Community Round-up #16"
3
-author: [jgebhardt]
4
----
5
-
6
-There have been many posts recently covering the <i>why</i> and <i>how</i> of React. This week's community round-up includes a collection of recent articles to help you get started with React, along with a few posts that explain some of the inner workings.
7
-
8
-
9
-## React in a nutshell
10
-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):
11
-
12
-<iframe src="//slid.es/johnlynch/reactjs/embed" width="100%" height="420" scrolling="no" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
13
-
14
-
15
-
16
-## React's diff algorithm
17
-
18
-React core team member Christopher Chedeau ([@vjeux](https://twitter.com/vjeux)) explores the innards of React's tree diffing algorithm in this [extensive and well-illustrated post](http://calendar.perfplanet.com/2013/diff/). <figure>[](http://calendar.perfplanet.com/2013/diff/)</figure>
19
-
20
-While we're talking about tree diffing: Matt Esch ([@MatthewEsch](https://twitter.com/MatthewEsch)) created [this project](https://github.com/Matt-Esch/virtual-dom), which aims to implement the virtual DOM and a corresponding diff algorithm as separate modules.
21
-
22
-
23
-
24
-
25
-## Many, many new introductions to React!
26
-
27
-
28
-
29
-James Padosley wrote a short post on the basics (and merits) of React: [What is React?](http://james.padolsey.com/javascript/what-is-react/)
30
-
31
-> What I like most about React is that it doesn't impose heady design patterns and data-modelling abstractions on me. [...] Its opinions are so minimal and its abstractions so focused on the problem of the DOM, that you can merrily slap your design choices atop.
32
->
33
-> [Read the full post...](http://james.padolsey.com/javascript/what-is-react/)
34
-
35
-Taylor Lapeyre ([@taylorlapeyre](https://twitter.com/taylorlapeyre)) wrote another nice [introduction to React](http://words.taylorlapeyre.me/an-introduction-to-react).
36
-
37
-> React expects you to do the work of getting and pushing data from the server. This makes it very easy to implement React as a front end solution, since it simply expects you to hand it data. React does all the other work.
38
->
39
-> [Read the full post...](http://words.taylorlapeyre.me/an-introduction-to-react)
40
-
41
-
42
-[This "Deep explanation for newbies"](http://www.webdesignporto.com/react-js-in-pure-javascript-facebook-library/?utm_source=echojs&utm_medium=post&utm_campaign=echojs) by [@ProJavaScript](https://twitter.com/ProJavaScript) explains how to get started building a React game without using the optional JSX syntax.
43
-
44
-### React around the world
45
-
46
-It's great to see the React community expand internationally. [This site](http://habrahabr.ru/post/189230/) features a React introduction in Russian.
47
-
48
-### React tutorial series
49
-
50
-[Christopher Pitt](https://medium.com/@followchrisp) explains [React Components](https://medium.com/react-tutorials/828c397e3dc8) and [React Properties](https://medium.com/react-tutorials/ef11cd55caa0). The former includes a nice introduction to using JSX, while the latter focuses on adding interactivity and linking multiple components together. Also check out the [other posts in his React Tutorial series](https://medium.com/react-tutorials), e.g. on using [React + Backbone Model](https://medium.com/react-tutorials/8aaec65a546c) and [React + Backbone Router](https://medium.com/react-tutorials/c00be0cf1592).
51
-
52
-### Beginner tutorial: Implementing the board game Go
53
-
54
-[Chris LaRose](http://cjlarose.com/) walks through the steps of creating a Go app in React, showing how to separate application logic from the rendered components. Check out his [tutorial](http://cjlarose.com/2014/01/09/react-board-game-tutorial.html) or go straight to the [code](https://github.com/cjlarose/react-go).
55
-
56
-### Egghead.io video tutorials
57
-
58
-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)]
59
-
60
-### "React: Finally, a great server/client web stack"
61
-
62
-Eric Florenzano ([@ericflo](https://twitter.com/ericflo)) sheds some light on what makes React perfect for server rendering:
63
-
64
-> [...] the ideal solution would fully render the markup on the server, deliver it to the client so that it can be shown to the user instantly. Then it would asynchronously load some JavaScript that would attach to the rendered markup, and invisibly promote the page into a full app that can render its own markup. [...]
65
-
66
-> What I've discovered is that enough of the pieces have come together, that this futuristic-sounding web environment is actually surprisingly easy to do now with React.js.
67
-
68
-> [Read the full post...](http://eflorenzano.com/blog/2014/01/23/react-finally-server-client/)
69
-
70
-## Building a complex React component
71
-[Matt Harrison](http://matt-harrison.com/) walks through the process of [creating an SVG-based Resistance Calculator](http://matt-harrison.com/building-a-complex-web-component-with-facebooks-react-library/) using React. <figure>[](http://matt-harrison.com/building-a-complex-web-component-with-facebooks-react-library/)</figure>
72
-
73
-
74
-
75
-## Random Tweets
76
-
77
-<div><blockquote class="twitter-tweet" lang="en"><p>[#reactjs](https://twitter.com/search?q=%23reactjs&src=hash) has very simple API, but it's amazing how much work has been done under the hood to make it blazing fast.</p>— Anton Astashov (@anton_astashov) <a href="https://twitter.com/anton_astashov/status/417556491646693378">December 30, 2013</a></blockquote></div>
78
-
79
-<div><blockquote class="twitter-tweet" lang="en"><p>[#reactjs]((https://twitter.com/search?q=%23reactjs&src=hash) makes refactoring your HTML as easy & natural as refactoring your javascript [@react_js](https://twitter.com/react_js)</p>— Jared Forsyth (@jaredforsyth) <a href="https://twitter.com/jaredforsyth/status/420304083010854912">January 6, 2014</a></blockquote></div>
80
-
81
-<div><blockquote class="twitter-tweet" lang="en"><p>Played with react.js for an hour, so many things suddenly became stupidly simple.</p>— andrewingram (@andrewingram) <a href="https://twitter.com/andrewingram/status/422810480701620225">January 13, 2014</a></blockquote></div>
82
-
83
-<div><blockquote class="twitter-tweet" lang="en"><p>[@okonetchnikov](https://twitter.com/okonetchnikov) HOLY CRAP react is nice</p>— julik (@julikt) <a href="https://twitter.com/julikt/status/422843478792765440">January 13, 2014</a></blockquote></div>
84
-
85
-<div><blockquote class="twitter-tweet" lang="en"><p>brb rewriting everything with react
86
-</p>— Ben Smithett (@bensmithett) <a href="https://twitter.com/bensmithett/status/430671242186592256">February 4, 2014</a></blockquote></div>
docs/_posts/2014-02-16-react-v0.9-rc1.md
deleted
-132
@@ -1,132 +0,0 @@
1
----
2
-title: React v0.9 RC
3
-author: [sophiebits]
4
----
5
-
6
-We're almost ready to release React v0.9! We're posting a release candidate so that you can test your apps on it; we'd much prefer to find show-stopping bugs now rather than after we release.
7
-
8
-The release candidate is available for download from the CDN:
9
-
10
-* **React**
11
- Dev build with warnings: <https://fb.me/react-0.9.0-rc1.js>
12
- Minified build for production: <https://fb.me/react-0.9.0-rc1.min.js>
13
-* **React with Add-Ons**
14
- Dev build with warnings: <https://fb.me/react-with-addons-0.9.0-rc1.js>
15
- Minified build for production: <https://fb.me/react-with-addons-0.9.0-rc1.min.js>
16
-* **In-Browser JSX transformer**
17
- <https://fb.me/JSXTransformer-0.9.0-rc1.js>
18
-
19
-We've also published version `0.9.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
20
-
21
-Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry.
22
-
23
-## Upgrade Notes
24
-
25
-In addition to the changes to React core listed below, we've made a small change to the way JSX interprets whitespace to make things more consistent. With this release, space between two components on the same line will be preserved, while a newline separating a text node from a tag will be eliminated in the output. Consider the code:
26
-
27
-```html
28
-<div>
29
- Monkeys:
30
- {listOfMonkeys} {submitButton}
31
-</div>
32
-```
33
-
34
-In v0.8 and below, it was transformed to the following:
35
-
36
-```javascript
37
-React.DOM.div(null,
38
- " Monkeys: ",
39
- listOfMonkeys, submitButton
40
-)
41
-```
42
-
43
-In v0.9, it will be transformed to this JS instead:
44
-
45
-```javascript{2,3}
46
-React.DOM.div(null,
47
- "Monkeys:",
48
- listOfMonkeys, " ", submitButton
49
-)
50
-```
51
-
52
-We believe this new behavior is more helpful and eliminates cases where unwanted whitespace was previously added.
53
-
54
-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.
55
-
56
-## Changelog
57
-
58
-### React Core
59
-
60
-#### Breaking Changes
61
-
62
-- The lifecycle methods `componentDidMount` and `componentDidUpdate` no longer receive the root node as a parameter; use `this.getDOMNode()` instead
63
-- Whenever a prop is equal to `undefined`, the default value returned by `getDefaultProps` will now be used instead
64
-- `React.unmountAndReleaseReactRootNode` was previously deprecated and has now been removed
65
-- `React.renderComponentToString` is now synchronous and returns the generated HTML string
66
-- Full-page rendering (that is, rendering the `<html>` tag using React) is now supported only when starting with server-rendered markup
67
-- On mouse wheel events, `deltaY` is no longer negated
68
-- When prop types validation fails, a warning is logged instead of an error thrown (with the production build of React, the type checks are now skipped for performance)
69
-- On `input`, `select`, and `textarea` elements, `.getValue()` is no longer supported; use `.getDOMNode().value` instead
70
-- `this.context` on components is now reserved for internal use by React
71
-
72
-#### New Features
73
-
74
-- React now never rethrows errors, so stack traces are more accurate and Chrome's purple break-on-error stop sign now works properly
75
-- Added a new tool for profiling React components and identifying places where defining `shouldComponentUpdate` can give performance improvements
76
-- Added support for SVG tags `defs`, `linearGradient`, `polygon`, `radialGradient`, `stop`
77
-- Added support for more attributes:
78
- - `noValidate` and `formNoValidate` for forms
79
- - `property` for Open Graph `<meta>` tags
80
- - `sandbox`, `seamless`, and `srcDoc` for `<iframe>` tags
81
- - `scope` for screen readers
82
- - `span` for `<colgroup>` tags
83
-- Added support for defining `propTypes` in mixins
84
-- Added `any`, `arrayOf`, `component`, `oneOfType`, `renderable`, `shape` to `React.PropTypes`
85
-- Added support for `statics` on component spec for static component methods
86
-- On all events, `.currentTarget` is now properly set
87
-- On keyboard events, `.key` is now polyfilled in all browsers for special (non-printable) keys
88
-- On clipboard events, `.clipboardData` is now polyfilled in IE
89
-- On drag events, `.dataTransfer` is now present
90
-- Added support for `onMouseOver` and `onMouseOut` in addition to the existing `onMouseEnter` and `onMouseLeave` events
91
-- Added support for `onLoad` and `onError` on `<img>` elements
92
-- Added support for `onReset` on `<form>` elements
93
-- The `autoFocus` attribute is now polyfilled consistently on `input`, `select`, and `textarea`
94
-
95
-#### Bug Fixes
96
-
97
-- React no longer adds an `__owner__` property to each component's `props` object; passed-in props are now never mutated
98
-- When nesting top-level components (e.g., calling `React.renderComponent` within `componentDidMount`), events now properly bubble to the parent component
99
-- Fixed a case where nesting top-level components would throw an error when updating
100
-- Passing an invalid or misspelled propTypes type now throws an error
101
-- On mouse enter/leave events, `.target`, `.relatedTarget`, and `.type` are now set properly
102
-- On composition events, `.data` is now properly normalized in IE9 and IE10
103
-- CSS property values no longer have `px` appended for the unitless properties `columnCount`, `flex`, `flexGrow`, `flexShrink`, `lineClamp`, `order`, `widows`
104
-- Fixed a memory leak when unmounting children with a `componentWillUnmount` handler
105
-- Fixed a memory leak when `renderComponentToString` would store event handlers
106
-- Fixed an error that could be thrown when removing form elements during a click handler
107
-- `key` values containing `.` are now supported
108
-- Shortened `data-reactid` values for performance
109
-- Components now always remount when the `key` property changes
110
-- Event handlers are attached to `document` only when necessary, improving performance in some cases
111
-- Events no longer use `.returnValue` in modern browsers, eliminating a warning in Chrome
112
-- `scrollLeft` and `scrollTop` are no longer accessed on document.body, eliminating a warning in Chrome
113
-- General performance fixes, memory optimizations, improvements to warnings and error messages
114
-
115
-### React with Addons
116
-
117
-- `React.addons.TransitionGroup` was renamed to `React.addons.CSSTransitionGroup`
118
-- `React.addons.TransitionGroup` was added as a more general animation wrapper
119
-- `React.addons.cloneWithProps` was added for cloning components and modifying their props
120
-- Bug fix for adding back nodes during an exit transition for CSSTransitionGroup
121
-- Bug fix for changing `transitionLeave` in CSSTransitionGroup
122
-- Performance optimizations for CSSTransitionGroup
123
-- On checkbox `<input>` elements, `checkedLink` is now supported for two-way binding
124
-
125
-### JSX Compiler and react-tools Package
126
-
127
-- Whitespace normalization has changed; now space between two tags on the same line will be preserved, while newlines between two tags will be removed
128
-- The `react-tools` npm package no longer includes the React core libraries; use the `react` package instead.
129
-- `displayName` is now added in more cases, improving error messages and names in the React Dev Tools
130
-- Fixed an issue where an invalid token error was thrown after a JSX closing tag
131
-- `JSXTransformer` now uses source maps automatically in modern browsers
132
-- `JSXTransformer` error messages now include the filename and problematic line contents when a file fails to parse
docs/_posts/2014-02-20-react-v0.9.md
deleted
-144
@@ -1,144 +0,0 @@
1
----
2
-title: React v0.9
3
-author: [sophiebits]
4
----
5
-
6
-I'm excited to announce that today we're releasing React v0.9, which incorporates many bug fixes and several new features since the last release. This release contains almost four months of work, including over 800 commits from over 70 committers!
7
-
8
-Thanks to everyone who tested the release candidate; we were able to find and fix an error in the event handling code, we upgraded envify to make running browserify on React faster, and we added support for five new attributes.
9
-
10
-As always, the release is available for download from the CDN:
11
-
12
-* **React**
13
- Dev build with warnings: <https://fb.me/react-0.9.0.js>
14
- Minified build for production: <https://fb.me/react-0.9.0.min.js>
15
-* **React with Add-Ons**
16
- Dev build with warnings: <https://fb.me/react-with-addons-0.9.0.js>
17
- Minified build for production: <https://fb.me/react-with-addons-0.9.0.min.js>
18
-* **In-Browser JSX Transformer**
19
- <https://fb.me/JSXTransformer-0.9.0.js>
20
-
21
-We've also published version `0.9.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
22
-
23
-## What’s New?
24
-
25
-This version includes better support for normalizing event properties across all supported browsers so that you need to worry even less about cross-browser differences. We've also made many improvements to error messages and have refactored the core to never rethrow errors, so stack traces are more accurate and Chrome's purple break-on-error stop sign now works properly.
26
-
27
-We've also added to the add-ons build [React.addons.TestUtils](/docs/test-utils.html), a set of new utilities to help you write unit tests for React components. You can now simulate events on your components, and several helpers are provided to help make assertions about the rendered DOM tree.
28
-
29
-We've also made several other improvements and a few breaking changes; the full changelog is provided below.
30
-
31
-## JSX Whitespace
32
-
33
-In addition to the changes to React core listed below, we've made a small change to the way JSX interprets whitespace to make things more consistent. With this release, space between two components on the same line will be preserved, while a newline separating a text node from a tag will be eliminated in the output. Consider the code:
34
-
35
-```html
36
-<div>
37
- Monkeys:
38
- {listOfMonkeys} {submitButton}
39
-</div>
40
-```
41
-
42
-In v0.8 and below, it was transformed to the following:
43
-
44
-```javascript
45
-React.DOM.div(null,
46
- " Monkeys: ",
47
- listOfMonkeys, submitButton
48
-)
49
-```
50
-
51
-In v0.9, it will be transformed to this JS instead:
52
-
53
-```javascript{2,3}
54
-React.DOM.div(null,
55
- "Monkeys:",
56
- listOfMonkeys, " ", submitButton
57
-)
58
-```
59
-
60
-We believe this new behavior is more helpful and eliminates cases where unwanted whitespace was previously added.
61
-
62
-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.
63
-
64
-## Changelog
65
-
66
-### React Core
67
-
68
-#### Breaking Changes
69
-
70
-- The lifecycle methods `componentDidMount` and `componentDidUpdate` no longer receive the root node as a parameter; use `this.getDOMNode()` instead
71
-- Whenever a prop is equal to `undefined`, the default value returned by `getDefaultProps` will now be used instead
72
-- `React.unmountAndReleaseReactRootNode` was previously deprecated and has now been removed
73
-- `React.renderComponentToString` is now synchronous and returns the generated HTML string
74
-- Full-page rendering (that is, rendering the `<html>` tag using React) is now supported only when starting with server-rendered markup
75
-- On mouse wheel events, `deltaY` is no longer negated
76
-- When prop types validation fails, a warning is logged instead of an error thrown (with the production build of React, type checks are now skipped for performance)
77
-- On `input`, `select`, and `textarea` elements, `.getValue()` is no longer supported; use `.getDOMNode().value` instead
78
-- `this.context` on components is now reserved for internal use by React
79
-
80
-#### New Features
81
-
82
-- React now never rethrows errors, so stack traces are more accurate and Chrome's purple break-on-error stop sign now works properly
83
-- Added support for SVG tags `defs`, `linearGradient`, `polygon`, `radialGradient`, `stop`
84
-- Added support for more attributes:
85
- - `crossOrigin` for CORS requests
86
- - `download` and `hrefLang` for `<a>` tags
87
- - `mediaGroup` and `muted` for `<audio>` and `<video>` tags
88
- - `noValidate` and `formNoValidate` for forms
89
- - `property` for Open Graph `<meta>` tags
90
- - `sandbox`, `seamless`, and `srcDoc` for `<iframe>` tags
91
- - `scope` for screen readers
92
- - `span` for `<colgroup>` tags
93
-- Added support for defining `propTypes` in mixins
94
-- Added `any`, `arrayOf`, `component`, `oneOfType`, `renderable`, `shape` to `React.PropTypes`
95
-- Added support for `statics` on component spec for static component methods
96
-- On all events, `.currentTarget` is now properly set
97
-- On keyboard events, `.key` is now polyfilled in all browsers for special (non-printable) keys
98
-- On clipboard events, `.clipboardData` is now polyfilled in IE
99
-- On drag events, `.dataTransfer` is now present
100
-- Added support for `onMouseOver` and `onMouseOut` in addition to the existing `onMouseEnter` and `onMouseLeave` events
101
-- Added support for `onLoad` and `onError` on `<img>` elements
102
-- Added support for `onReset` on `<form>` elements
103
-- The `autoFocus` attribute is now polyfilled consistently on `input`, `select`, and `textarea`
104
-
105
-#### Bug Fixes
106
-
107
-- React no longer adds an `__owner__` property to each component's `props` object; passed-in props are now never mutated
108
-- When nesting top-level components (e.g., calling `React.renderComponent` within `componentDidMount`), events now properly bubble to the parent component
109
-- Fixed a case where nesting top-level components would throw an error when updating
110
-- Passing an invalid or misspelled propTypes type now throws an error
111
-- On mouse enter/leave events, `.target`, `.relatedTarget`, and `.type` are now set properly
112
-- On composition events, `.data` is now properly normalized in IE9 and IE10
113
-- CSS property values no longer have `px` appended for the unitless properties `columnCount`, `flex`, `flexGrow`, `flexShrink`, `lineClamp`, `order`, `widows`
114
-- Fixed a memory leak when unmounting children with a `componentWillUnmount` handler
115
-- Fixed a memory leak when `renderComponentToString` would store event handlers
116
-- Fixed an error that could be thrown when removing form elements during a click handler
117
-- Boolean attributes such as `disabled` are rendered without a value (previously `disabled="true"`, now simply `disabled`)
118
-- `key` values containing `.` are now supported
119
-- Shortened `data-reactid` values for performance
120
-- Components now always remount when the `key` property changes
121
-- Event handlers are attached to `document` only when necessary, improving performance in some cases
122
-- Events no longer use `.returnValue` in modern browsers, eliminating a warning in Chrome
123
-- `scrollLeft` and `scrollTop` are no longer accessed on document.body, eliminating a warning in Chrome
124
-- General performance fixes, memory optimizations, improvements to warnings and error messages
125
-
126
-### React with Addons
127
-
128
-- `React.addons.TestUtils` was added to help write unit tests
129
-- `React.addons.TransitionGroup` was renamed to `React.addons.CSSTransitionGroup`
130
-- `React.addons.TransitionGroup` was added as a more general animation wrapper
131
-- `React.addons.cloneWithProps` was added for cloning components and modifying their props
132
-- Bug fix for adding back nodes during an exit transition for CSSTransitionGroup
133
-- Bug fix for changing `transitionLeave` in CSSTransitionGroup
134
-- Performance optimizations for CSSTransitionGroup
135
-- On checkbox `<input>` elements, `checkedLink` is now supported for two-way binding
136
-
137
-### JSX Compiler and react-tools Package
138
-
139
-- Whitespace normalization has changed; now space between two tags on the same line will be preserved, while newlines between two tags will be removed
140
-- The `react-tools` npm package no longer includes the React core libraries; use the `react` package instead.
141
-- `displayName` is now added in more cases, improving error messages and names in the React Dev Tools
142
-- Fixed an issue where an invalid token error was thrown after a JSX closing tag
143
-- `JSXTransformer` now uses source maps automatically in modern browsers
144
-- `JSXTransformer` error messages now include the filename and problematic line contents when a file fails to parse
docs/_posts/2014-02-24-community-roundup-17.md
deleted
-94
@@ -1,94 +0,0 @@
1
----
2
-title: "Community Round-up #17"
3
-author: [jgebhardt]
4
----
5
-
6
-
7
-It's exciting to see the number of real-world React applications and components skyrocket over the past months! This community round-up features a few examples of inspiring React applications and components.
8
-
9
-## React in the Real World
10
-
11
-### Facebook Lookback video editor
12
-Large parts of Facebook's web frontend are already powered by React. The recently released Facebook [Lookback video and its corresponding editor](https://www.facebook.com/lookback/edit/) are great examples of a complex, real-world React app.
13
-
14
-### Russia's largest bank is now powered by React
15
-Sberbank, Russia's largest bank, recently switched large parts of their site to use React, as detailed in [this post by Vyacheslav Slinko](https://groups.google.com/forum/#!topic/reactjs/Kj6WATX0atg).
16
-
17
-### Relato
18
-[Relato](https://bripkens.github.io/relato/) by [Ben Ripkens](https://github.com/bripkens) shows Open Source Statistics based on npm data. It features a filterable and sortable table built in React. Check it out – it's super fast!
19
-
20
-### Makona Editor
21
-
22
- John Lynch ([@johnrlynch](https://twitter.com/johnrlynch)) created Makona, a block-style document editor for the web. Blocks of different content types comprise documents, authored using plain markup. At the switch of a toggle, block contents are then rendered on the page. While not quite a WYSIWYG editor, Makona uses plain textareas for input. This makes it compatible with a wider range of platforms than traditional rich text editors.
23
-[](https://johnthethird.github.io/makona-editor/)
24
-
25
-### Create Chrome extensions using React
26
-React is in no way limited to just web pages. Brandon Tilley ([@BinaryMuse](https://twitter.com/BinaryMuse)) just released a detailed walk-through of [how he built his Chrome extension "Fast Tab Switcher" using React](http://brandontilley.com/2014/02/24/creating-chrome-extensions-with-react.html).
27
-
28
-
29
-### Twitter Streaming Client
30
-
31
-Javier Aguirre ([@javaguirre](https://twitter.com/javaguirre)) put together a simple [twitter streaming client using node, socket.io and React](http://javaguirre.net/2014/02/11/twitter-streaming-api-with-node-socket-io-and-reactjs/).
32
-
33
-
34
-### Sproutsheet
35
-
36
-[Sproutsheet](http://sproutsheet.com/) is a gardening calendar. You can use it to track certain events that happen in the life of your plants. It's currently in beta and supports localStorage, and data/image import and export.
37
-
38
-### Instant Domain Search
39
-[Instant Domain Search](https://instantdomainsearch.com/) also uses React. It sure is instant!
40
-
41
-
42
-### SVG-based graphical node editor
43
-[NoFlo](http://noflojs.org/) and [Meemoo](http://meemoo.org/) developer [Forresto Oliphant](http://www.forresto.com/) built an awesome SVG-based [node editor](https://forresto.github.io/prototyping/react/) in React.
44
- [](https://forresto.github.io/prototyping/react/)
45
-
46
-
47
-### Ultimate Tic-Tac-Toe Game in React
48
-Rafał Cieślak ([@Ravicious](https://twitter.com/Ravicious)) wrote a [React version](https://ravicious.github.io/ultimate-ttt/) of [Ultimate Tic Tac Toe](http://mathwithbaddrawings.com/2013/06/16/ultimate-tic-tac-toe/). Find the source [here](https://github.com/ravicious/ultimate-ttt).
49
-
50
-
51
-
52
-### ReactJS Gallery
53
-
54
-[Emanuele Rampichini](https://github.com/lele85)'s [ReactJS Gallery](https://github.com/lele85/ReactGallery) is a cool demo app that shows fullscreen images from a folder on the server. If the folder content changes, the gallery app updates via websockets.
55
-
56
-Emanuele shared this awesome demo video with us:
57
-
58
-<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/jYcpaemt90M" frameborder="0" allowfullscreen></iframe>
59
-
60
-
61
-
62
-## React Components
63
-
64
-
65
-### Table Sorter
66
-[Table Sorter](https://bgerm.github.io/react-table-sorter-demo/) by [bgerm](https://github.com/bgerm) [[source](https://github.com/bgerm/react-table-sorter-demo)] is another helpful React component.
67
-
68
-### Static-search
69
-
70
-Dmitry Chestnykh [@dchest](https://twitter.com/dchest) wrote a [static search indexer](https://github.com/dchest/static-search) in Go, along with a [React-based web front-end](http://www.codingrobots.com/search/) that consumes search result via JSON.
71
-
72
-### Lorem Ipsum component
73
-
74
-[Martin Andert](https://github.com/martinandert) created [react-lorem-component](https://github.com/martinandert/react-lorem-component), a simple component for all your placeholding needs.
75
-
76
-### Input with placeholder shim
77
-[react-input-placeholder](https://github.com/enigma-io/react-input-placeholder) by [enigma-io](https://github.com/enigma-io) is a small wrapper around React.DOM.input that shims in placeholder functionality for browsers that don't natively support it.
78
-
79
-### diContainer
80
-
81
-[dicontainer](https://github.com/SpektrumFM/dicontainer) provides a dependency container that lets you inject Angular-style providers and services as simple React.js Mixins.
82
-
83
-
84
-## React server rendering
85
-
86
-Ever wonder how to pre-render React components on the server? [react-server-example](https://github.com/mhart/react-server-example) by Michael Hart ([@hichaelmart](https://twitter.com/hichaelmart)) walks through the necessary steps.
87
-
88
-Similarly, Alan deLevie ([@adelevie](https://twitter.com/adelevie)) created [react-client-server-starter](https://github.com/adelevie/react-client-server-starter), another detailed walk-through of how to server-render your app.
89
-
90
-
91
-
92
-## Random Tweet
93
-
94
-<div><blockquote class="twitter-tweet" lang="en"><p>Recent changes: web ui is being upgraded to [#reactjs](https://twitter.com/search?q=%23reactjs&src=hash), HEAD~4 at [https://camlistore.googlesource.com/camlistore/](https://camlistore.googlesource.com/camlistore/)</p>— Camlistore (@Camlistore) <a href="https://twitter.com/Camlistore/status/423925795820539904">January 16, 2014</a></blockquote></div>
docs/_posts/2014-03-14-community-roundup-18.md
deleted
-105
@@ -1,105 +0,0 @@
1
----
2
-title: "Community Round-up #18"
3
-author: [jgebhardt]
4
----
5
-
6
-In this Round-up, we are taking a few closer looks at React's interplay with different frameworks and architectures.
7
-
8
-## "Little framework BIG splash"
9
-
10
-Let's start with yet another refreshing introduction to React: Craig Savolainen ([@maedhr](https://twitter.com/maedhr)) walks through some first steps, demonstrating [how to build a Google Maps component](http://infinitemonkeys.influitive.com/little-framework-big-splash) using React.
11
-
12
-## Architecting your app with react
13
-
14
-Brandon Konkle ([@bkonkle](https://twitter.com/bkonkle))
15
-[Architecting your app with react](http://lincolnloop.com/blog/architecting-your-app-react-part-1/)
16
-We're looking forward to part 2!
17
-
18
-> React is not a full MVC framework, and this is actually one of its strengths. Many who adopt React choose to do so alongside their favorite MVC framework, like Backbone. React has no opinions about routing or syncing data, so you can easily use your favorite tools to handle those aspects of your frontend application. You'll often see React used to manage specific parts of an application's UI and not others. React really shines, however, when you fully embrace its strategies and make it the core of your application's interface.
19
->
20
-> [Read the full article...](http://lincolnloop.com/blog/architecting-your-app-react-part-1/)
21
-
22
-## React vs. async DOM manipulation
23
-
24
-Eliseu Monar ([@eliseumds](https://twitter.com/eliseumds))'s post "[ReactJS vs async concurrent rendering](http://eliseumds.tumblr.com/post/77843550010/vitalbox-pchr-reactjs-vs-async-concurrent-rendering)" is a great example of how React quite literally renders a whole array of common web development work(arounds) obsolete.
25
-
26
-
27
-
28
-## React, Scala and the Play Framework
29
-[Matthias Nehlsen](http://matthiasnehlsen.com/) wrote a detailed introductory piece on [React and the Play Framework](http://matthiasnehlsen.com/blog/2014/01/05/play-framework-and-facebooks-react-library/), including a helpful architectural diagram of a typical React app.
30
-
31
-Nehlsen's React frontend is the second implementation of his chat application's frontend, following an AngularJS version. Both implementations are functionally equivalent and offer some perspective on differences between the two frameworks.
32
-
33
-In [another article](http://matthiasnehlsen.com/blog/2014/01/24/scala-dot-js-and-reactjs/), he walks us through the process of using React with scala.js to implement app-wide undo functionality.
34
-
35
-Also check out his [talk](http://m.ustream.tv/recorded/42780242) at Ping Conference 2014, in which he walks through a lot of the previously content in great detail.
36
-
37
-## React and Backbone
38
-
39
-The folks over at [Venmo](https://venmo.com/) are using React in conjunction with Backbone.
40
-Thomas Boyt ([@thomasaboyt](https://twitter.com/thomasaboyt)) wrote [this detailed piece](http://www.thomasboyt.com/2013/12/17/using-reactjs-as-a-backbone-view.html) about why React and Backbone are "a fantastic pairing".
41
-
42
-## React vs. Ember
43
-
44
-Eric Berry ([@coderberry](https://twitter.com/coderberry)) developed Ember equivalents for some of the official React examples. Read his post for a side-by-side comparison of the respective implementations: ["Facebook React vs. Ember"](https://instructure.github.io/blog/2013/12/17/facebook-react-vs-ember/).
45
-
46
-
47
-## React and plain old HTML
48
-
49
-Daniel Lo Nigro ([@Daniel15](https://twitter.com/Daniel15)) created [React-Magic](https://github.com/reactjs/react-magic), which leverages React to ajaxify plain old html pages and even [allows CSS transitions between pageloads](http://stuff.dan.cx/facebook/react-hacks/magic/red.php).
50
-
51
-> React-Magic intercepts all navigation (link clicks and form posts) and loads the requested page via an AJAX request. React is then used to "diff" the old HTML with the new HTML, and only update the parts of the DOM that have been changed.
52
->
53
-> [Check out the project on GitHub...](https://github.com/reactjs/react-magic)
54
-
55
-On a related note, [Reactize](https://turbo-react.herokuapp.com/) by Ross Allen ([@ssorallen](https://twitter.com/ssorallen)) is a similarly awesome project: A wrapper for Rails' [Turbolinks](https://github.com/rails/turbolinks/), which seems to have inspired John Lynch ([@johnrlynch](https://twitter.com/johnrlynch)) to then create [a server-rendered version using the JSX transformer in Rails middleware](http://www.rigelgroupllc.com/blog/2014/01/12/react-jsx-transformer-in-rails-middleware/).
56
-
57
-## React and Object.observe
58
-Check out [François de Campredon](https://github.com/fdecampredon)'s implementation of [TodoMVC based on React and ES6's Object.observe](https://github.com/fdecampredon/react-observe-todomvc/).
59
-
60
-
61
-## React and Angular
62
-
63
-Ian Bicking ([@ianbicking](https://twitter.com/ianbicking)) of Mozilla Labs [explains why he "decided to go with React instead of Angular.js"](https://plus.google.com/+IanBicking/posts/Qj8R5SWAsfE).
64
-
65
-### ng-React Update
66
-
67
-[David Chang](https://github.com/davidchang) works through some performance improvements of his [ngReact](https://github.com/davidchang/ngReact) project. His post ["ng-React Update - React 0.9 and Angular Track By"](http://davidandsuzi.com/ngreact-update/) includes some helpful advice on boosting render performance for Angular components.
68
-
69
-> Angular gives you a ton of functionality out of the box - a full MV* framework - and I am a big fan, but I'll admit that you need to know how to twist the right knobs to get performance.
70
->
71
-> That said, React gives you a very strong view component out of the box with the performance baked right in. Try as I did, I couldn't actually get it any faster. So pretty impressive stuff.
72
->
73
->[Read the full post...](http://davidandsuzi.com/ngreact-update/)
74
-
75
-
76
-React was also recently mentioned at ng-conf, where the Angular team commented on React's concept of the virtual DOM:
77
-
78
-<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/srt3OBP2kGc?start=113" frameborder="0" allowfullscreen></iframe>
79
-
80
-## React and Web Components
81
-
82
-Jonathan Krause ([@jonykrause](https://twitter.com/jonykrause)) offers his thoughts regarding [parallels between React and Web Components](http://jonykrau.se/posts/the-value-of-react), highlighting the value of React's ability to render pages on the server practically for free.
83
-
84
-## Immutable React
85
-
86
-[Peter Hausel](http://pk11.kinja.com/) shows how to build a Wikipedia auto-complete demo based on immutable data structures (similar to [mori](https://npmjs.org/package/mori)), really taking advantage of the framework's one-way reactive data binding:
87
-
88
-> Its truly reactive design makes DOM updates finally sane and when combined with persistent data structures one can experience JavaScript development like it was never done before.
89
->
90
-> [Read the full post](http://tech.kinja.com/immutable-react-1495205675)
91
-
92
-
93
-## D3 and React
94
-
95
-[Ben Smith](http://10consulting.com/) built some great SVG-based charting components using a little less of D3 and a little more of React: [D3 and React - the future of charting components?](http://10consulting.com/2014/02/19/d3-plus-reactjs-for-charting/)
96
-
97
-## Om and React
98
-Josh Haberman ([@joshhaberman](https://twitter.com/JoshHaberman)) discusses performance differences between React, Om and traditional MVC frameworks in "[A closer look at OM vs React performance](http://blog.reverberate.org/2014/02/on-future-of-javascript-mvc-frameworks.html)".
99
-
100
-Speaking of Om: [Omchaya](https://github.com/sgrove/omchaya) by Sean Grove ([@sgrove](https://twitter.com/sgrove)) is a neat Cljs/Om example project.
101
-
102
-
103
-## Random Tweets
104
-
105
-<div><blockquote class="twitter-tweet" lang="en"><p>Worked for 2 hours on a [@react_js](https://twitter.com/react_js) app sans internet. Love that I could get stuff done with it without googling every question.</p>— John Shimek (@varikin) <a href="https://twitter.com/varikin/status/436606891657949185">February 20, 2014</a></blockquote></div>
docs/_posts/2014-03-19-react-v0.10-rc1.md
deleted
-71
@@ -1,71 +0,0 @@
1
----
2
-title: React v0.10 RC
3
-author: [zpao]
4
----
5
-
6
-[v0.9 has only been out for a month](/blog/2014/02/20/react-v0.9.html), but we’re getting ready to push out v0.10 already. Unlike v0.9 which took a long time, we don't have a long list of changes to talk about.
7
-
8
-The release candidate is available for download from the CDN:
9
-
10
-* **React**
11
- Dev build with warnings: <https://fb.me/react-0.10.0-rc1.js>
12
- Minified build for production: <https://fb.me/react-0.10.0-rc1.min.js>
13
-* **React with Add-Ons**
14
- Dev build with warnings: <https://fb.me/react-with-addons-0.10.0-rc1.js>
15
- Minified build for production: <https://fb.me/react-with-addons-0.10.0-rc1.min.js>
16
-* **In-Browser JSX transformer**
17
- <https://fb.me/JSXTransformer-0.10.0-rc1.js>
18
-
19
-We've also published version `0.10.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
20
-
21
-Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry.
22
-
23
-## Clone On Mount
24
-
25
-The main purpose of this release is to provide a smooth upgrade path as we evolve some of the implementation of core. In v0.9 we started warning in cases where you called methods on unmounted components. This is part of an effort to enforce the idea that the return value of a component (`React.DOM.div()`, `MyComponent()`) is in fact not a reference to the component instance React uses in the virtual DOM. The return value is instead a light-weight object that React knows how to use. Since the return value currently is a reference to the same object React uses internally, we need to make this transition in stages as many people have come to depend on this implementation detail.
26
-
27
-In 0.10, we’re adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think you’re making to a mounted component. We’ll forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on [this page](https://fb.me/react-warning-descriptors). Most of the time you can solve your pattern by using refs.
28
-
29
-Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:
30
-
31
-```js
32
-// This is a common pattern. However instance here really refers to a
33
-// "descriptor", not necessarily the mounted instance.
34
-var instance = <MyComponent/>;
35
-React.renderComponent(instance);
36
-// ...
37
-instance.setProps(...);
38
-
39
-// The change here is very simple. The return value of renderComponent will be
40
-// the mounted instance.
41
-var instance = React.renderComponent(<MyComponent/>)
42
-// ...
43
-instance.setProps(...);
44
-```
45
-
46
-These warnings and method forwarding are only enabled in the development build. The production builds continue to work as they did in v0.9. We strongly encourage you to use the development builds to catch these warnings and fix the call sites.
47
-
48
-The plan for v0.11 is that we will go fully to "descriptors". Method calls on the return value of `MyComponent()` will fail hard.
49
-
50
-## Changelog
51
-
52
-### React Core
53
-
54
-#### New Features
55
-* Added warnings to help migrate towards descriptors
56
-* Made it possible to server render without React-related markup (`data-reactid`, `data-react-checksum`). This DOM will not be mountable by React. [Read the docs for `React.renderComponentToStaticMarkup`](/docs/top-level-api.html#react.rendercomponenttostaticmarkup)
57
-* Added support for more attributes:
58
- * `srcSet` for `<img>` to specify images at different pixel ratios
59
- * `textAnchor` for SVG
60
-
61
-#### Bug Fixes
62
-* Ensure all void elements don’t insert a closing tag into the markup.
63
-* Ensure `className={false}` behaves consistently
64
-* Ensure `this.refs` is defined, even if no refs are specified.
65
-
66
-### Addons
67
-
68
-* `update` function to deal with immutable data. [Read the docs](/docs/update.html)
69
-
70
-### react-tools
71
-* Added an option argument to `transform` function. The only option supported is `harmony`, which behaves the same as `jsx --harmony` on the command line. This uses the ES6 transforms from [jstransform](https://github.com/facebook/jstransform).
docs/_posts/2014-03-21-react-v0.10.md
deleted
-72
@@ -1,72 +0,0 @@
1
----
2
-title: React v0.10
3
-author: [zpao]
4
----
5
-
6
-Hot on the heels of the [release candidate earlier this week](/blog/2014/03/19/react-v0.10-rc1.html), we're ready to call v0.10 done. The only major issue we discovered had to do with the `react-tools` package, which has been updated. We've copied over the changelog from the RC with some small clarifying changes.
7
-
8
-The release is available for download from the CDN:
9
-
10
-* **React**
11
- Dev build with warnings: <https://fb.me/react-0.10.0.js>
12
- Minified build for production: <https://fb.me/react-0.10.0.min.js>
13
-* **React with Add-Ons**
14
- Dev build with warnings: <https://fb.me/react-with-addons-0.10.0.js>
15
- Minified build for production: <https://fb.me/react-with-addons-0.10.0.min.js>
16
-* **In-Browser JSX transformer**
17
- <https://fb.me/JSXTransformer-0.10.0.js>
18
-
19
-We've also published version `0.10.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
20
-
21
-Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry.
22
-
23
-## Clone On Mount
24
-
25
-The main purpose of this release is to provide a smooth upgrade path as we evolve some of the implementation of core. In v0.9 we started warning in cases where you called methods on unmounted components. This is part of an effort to enforce the idea that the return value of a component (`React.DOM.div()`, `MyComponent()`) is in fact not a reference to the component instance React uses in the virtual DOM. The return value is instead a light-weight object that React knows how to use. Since the return value currently is a reference to the same object React uses internally, we need to make this transition in stages as many people have come to depend on this implementation detail.
26
-
27
-In 0.10, we’re adding more warnings to catch a similar set of patterns. When a component is mounted we clone it and use that object for our internal representation. This allows us to capture calls you think you’re making to a mounted component. We’ll forward them on to the right object, but also warn you that this is breaking. See “Access to the Mounted Instance” on [this page](https://fb.me/react-warning-descriptors). Most of the time you can solve your pattern by using refs.
28
-
29
-Storing a reference to your top level component is a pattern touched upon on that page, but another examples that demonstrates what we see a lot of:
30
-
31
-```js
32
-// This is a common pattern. However instance here really refers to a
33
-// "descriptor", not necessarily the mounted instance.
34
-var instance = <MyComponent/>;
35
-React.renderComponent(instance);
36
-// ...
37
-instance.setProps(...);
38
-
39
-// The change here is very simple. The return value of renderComponent will be
40
-// the mounted instance.
41
-var instance = React.renderComponent(<MyComponent/>)
42
-// ...
43
-instance.setProps(...);
44
-```
45
-
46
-These warnings and method forwarding are only enabled in the development build. The production builds continue to work as they did in v0.9. We strongly encourage you to use the development builds to catch these warnings and fix the call sites.
47
-
48
-The plan for v0.11 is that we will go fully to "descriptors". Method calls on the return value of `MyComponent()` will fail hard.
49
-
50
-## Changelog
51
-
52
-### React Core
53
-
54
-#### New Features
55
-* Added warnings to help migrate towards descriptors
56
-* Made it possible to server render without React-related markup (`data-reactid`, `data-react-checksum`). This DOM will not be mountable by React. [Read the docs for `React.renderComponentToStaticMarkup`](/docs/top-level-api.html#react.rendercomponenttostaticmarkup)
57
-* Added support for more attributes:
58
- * `srcSet` for `<img>` to specify images at different pixel ratios
59
- * `textAnchor` for SVG
60
-
61
-#### Bug Fixes
62
-* Ensure all void elements don’t insert a closing tag into the markup.
63
-* Ensure `className={false}` behaves consistently
64
-* Ensure `this.refs` is defined, even if no refs are specified.
65
-
66
-### Addons
67
-
68
-* `update` function to deal with immutable data. [Read the docs](/docs/update.html)
69
-
70
-### react-tools
71
-* Added an option argument to `transform` function. The only option supported is `harmony`, which behaves the same as `jsx --harmony` on the command line. This uses the ES6 transforms from [jstransform](https://github.com/facebook/jstransform).
72
-
docs/_posts/2014-03-28-the-road-to-1.0.md
deleted
-56
@@ -1,56 +0,0 @@
1
----
2
-title: The Road to 1.0
3
-author: [zpao]
4
----
5
-
6
-When we launched React last spring, we purposefully decided not to call it 1.0. It was production ready, but we had plans to evolve APIs and behavior as we saw how people were using React, both internally and externally. We've learned a lot over the past 9 months and we've thought a lot about what 1.0 will mean for React. A couple weeks ago, I outlined [several projects][projects] that we have planned to take us to 1.0 and beyond. Today I'm writing a bit more about them to give our users a better insight into our plans.
7
-
8
-Our primary goal with 1.0 is to clarify our messaging and converge on an API that is aligned with our goals. In order to do that, we want to clean up bad patterns we've seen in use and really help enable developers write good code.
9
-
10
-## Descriptors
11
-
12
-The first part of this is what we're calling "descriptors". I talked about this briefly in our [v0.10 announcements][v0.10]. The goal here is to separate our virtual DOM representation from our use of it. Simply, this means the return value of a component (e.g. `React.DOM.div()`, `MyComponent()`) will be a simple object containing the information React needs to render. Currently the object returned is actually linked to React's internal representation of the component and even directly to the DOM element. This has enabled some bad patterns that are quite contrary to how we want people to use React. That's our failure.
13
-
14
-We added some warnings in v0.9 to start migrating some of these bad patterns. With v0.10 we'll catch more. You'll see more on this soon as we expect to ship v0.11 with descriptors.
15
-
16
-## API Cleanup
17
-
18
-This is really connected to everything. We want to keep the API as simple as possible and help developers [fall into the pit of success][pitofsuccess]. Enabling bad patterns with bad APIs is not success.
19
-
20
-## ES6
21
-
22
-Before we even launched React publicly, members of the team were talking about how we could leverage ES6, namely classes, to improve the experience of creating React components. Calling `React.createClass(...)` isn't great. We don't quite have the right answer here yet, but we're close. We want to make sure we make this as simple as possible. It could look like this:
23
-
24
-```js
25
-class MyComponent extends React.Component {
26
- render() {
27
- ...
28
- }
29
-}
30
-```
31
-
32
-There are other features of ES6 we're already using in core. I'm sure we'll see more of that. The `jsx` executable we ship with `react-tools` already supports transforming many parts of ES6 into code that will run on older browsers.
33
-
34
-## Context
35
-
36
-While we haven't documented `context`, it exists in some form in React already. It exists as a way to pass values through a tree without having to use props at every single point. We've seen this need crop up time and time again, so we want to make this as easy as possible. Its use has performance tradeoffs, and there are known weaknesses in our implementation, so we want to make sure this is a solid feature.
37
-
38
-## Addons
39
-
40
-As you may know, we ship a separate build of React with some extra features we called "addons". While this has served us fine, it's not great for our users. It's made testing harder, but also results in more cache misses for people using a CDN. The problem we face is that many of these "addons" need access to parts of React that we don't expose publicly. Our goal is to ship each addon on its own and let each hook into React as needed. This would also allow others to write and distribute "addons".
41
-
42
-## Browser Support
43
-
44
-As much as we'd all like to stop supporting older browsers, it's not always possible. Facebook still supports IE8. While React won't support IE8 forever, our goal is to have 1.0 support IE8. Hopefully we can continue to abstract some of these rough parts.
45
-
46
-## Animations
47
-
48
-Finding a way to define animations in a declarative way is a hard problem. We've been exploring the space for a long time. We've introduced some half-measures to alleviate some use cases, but the larger problem remains. While we'd like to make this a part of 1.0, realistically we don't think we'll have a good solution in place.
49
-
50
-## Miscellaneous
51
-
52
-There are several other things I listed on [our projects page][projects] that we're tracking. Some of them are internals and have no obvious outward effect (improve tests, repo separation, updated test runner). I encourage you to take a look.
53
-
54
-[v0.10]: /react/blog/2014/03/21/react-v0.10.html
55
-[pitofsuccess]: http://blog.codinghorror.com/falling-into-the-pit-of-success/
56
-[projects]: https://github.com/facebook/react/wiki/Projects
docs/_posts/2014-04-04-reactnet.md
deleted
-37
@@ -1,37 +0,0 @@
1
----
2
-title: "Use React and JSX in ASP.NET MVC"
3
-author: [Daniel15]
4
----
5
-
6
-Today we're happy to announce the initial release of
7
-[ReactJS.NET](http://reactjs.net/), which makes it easier to use React and JSX
8
-in .NET applications, focusing specifically on ASP.NET MVC web applications.
9
-It has several purposes:
10
-
11
- - On-the-fly JSX to JavaScript compilation. Simply reference JSX files and they
12
- will be compiled and cached server-side.
13
-
14
- ```html
15
- <script src="@Url.Content("/Scripts/HelloWorld.jsx")"></script>
16
- ```
17
- - JSX to JavaScript compilation via popular minification/combination libraries
18
- (Cassette and ASP.NET Bundling and Minification). This is suggested for
19
- production websites.
20
- - Server-side component rendering to make your initial render super fast.
21
-
22
-Even though we are focusing on ASP.NET MVC, ReactJS.NET can also be used in
23
-Web Forms applications as well as non-web applications (for example, in build
24
-scripts). ReactJS.NET currently only works on Microsoft .NET but we are working
25
-on support for Linux and Mac OS X via Mono as well.
26
-
27
-Installation
28
-------------
29
-ReactJS.NET is packaged in NuGet. Simply run `Install-Package React.Mvc4` in the
30
-package manager console or search NuGet for "React" to install it.
31
-[See the documentation](http://reactjs.net/docs) for more information. The
32
-GitHub project contains
33
-[a sample website](https://github.com/reactjs/React.NET/tree/master/src/React.Sample.Mvc4)
34
-demonstrating all of the features.
35
-
36
-Let us know what you think, and feel free to send through any feedback and
37
-report bugs [on GitHub](https://github.com/reactjs/React.NET).
docs/_posts/2014-05-06-flux.md
deleted
-16
@@ -1,16 +0,0 @@
1
----
2
-title: "Flux: An Application Architecture for React"
3
-author: [fisherwebdev, jingc]
4
----
5
-
6
-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:
7
-
8
-<figure><iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/nYkdrAPrdcw?list=PLb0IAmt7-GS188xDYE-u1ShQmFFGbrk0v&start=621" frameborder="0" allowfullscreen></iframe></figure>
9
-
10
-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.
11
-
12
-In Flux, the Dispatcher is a singleton that directs the flow of data and ensures that updates do not cascade. As an application grows, the Dispatcher becomes more vital, as it can also manage dependencies between stores by invoking the registered callbacks in a specific order.
13
-
14
-When a user interacts with a React view, the view sends an action (usually represented as a JavaScript object with some fields) through the dispatcher, which notifies the various stores that hold the application's data and business logic. When the stores change state, they notify the views that something has updated. This works especially well with React's declarative model, which allows the stores to send updates without specifying how to transition views between states.
15
-
16
-Flux is more of a pattern than a formal framework, so you can start using Flux immediately without a lot of new code. An [example of this architecture](https://github.com/facebook/flux/tree/master/examples/flux-todomvc) is available, along with more [detailed documentation](https://facebook.github.io/flux/docs/overview.html) and a [tutorial](https://facebook.github.io/flux/docs/todo-list.html). Look for more examples to come in the future.
docs/_posts/2014-05-29-one-year-of-open-source-react.md
deleted
-14
@@ -1,14 +0,0 @@
1
----
2
-title: "One Year of Open-Source React"
3
-author: [chenglou]
4
----
5
-
6
-Today marks the one-year open-source anniversary of React.
7
-
8
-It’s been a crazy ride. 2.3k commits and 1.5k issues and pull requests later, we’re approaching version 1.0 and nearing 7k GitHub stars, with big names such as Khan Academy, New York Times, and Airbnb (and naturally, Facebook and Instagram) using React in production, and many more developers blogging their success stories with it. The [roadmap](/blog/2014/03/28/the-road-to-1.0.html) gives a glimpse into the future of the library; exciting stuff lies ahead!
9
-
10
-Every success has its story. React was born out of our frustration at existing solutions for building UIs. When it was first suggested at Facebook, few people thought that functionally re-rendering everything and diffing the results could ever perform well. However, support grew after we built the first implementation and people wrote their first components. When we open-sourced React, the initial reception was [similarly skeptical](https://www.reddit.com/r/programming/comments/1fak87/react_facebooks_latest_javascript_client_library/). It challenges many pre-established conventions and received mostly disapproving first-impressions, intermingled with positive ones that often were votes of confidence in Facebook’s engineering capabilities. On an open, competitive platform such as the web, it's been hard to convince people to try React. [JSX](/docs/jsx-in-depth.html), in particular, filtered out a huge chunk of potential early adopters.
11
-
12
-Fast forward one year, React has strongly [grown in popularity](https://news.ycombinator.com/item?id=7489959). Special acknowledgments go to Khan Academy, the ClojureScript community, and established frameworks such as Ember and Angular for contributing to and debating on our work. We'd also like to thank all the [individual contributors](https://github.com/facebook/react/graphs/contributors) who have taken the time to help out over the past year. React, as a library and as a new paradigm on the web, wouldn't have gained as much traction without them. In the future, we will continue to try to set an example of what's possible to achieve when we rethink about current “best practices”.
13
-
14
-Here’s to another year!
docs/_posts/2014-06-27-community-roundup-19.md
deleted
-54
@@ -1,54 +0,0 @@
1
----
2
-title: "Community Round-up #19"
3
-author: [chenglou]
4
----
5
-
6
-## React Meetups!
7
-Ever wanted to find developers who also share the same interest in React than you? Recently, there has been a React Meetup in [San Francisco](http://www.meetup.com/ReactJS-San-Francisco/) (courtesy of [Telmate](http://www.telmate.com)), and one in [London](http://www.meetup.com/London-React-User-Group/) (courtesy of [Stuart Harris](http://www.meetup.com/London-React-User-Group/members/105837542/), [Cain Ullah](http://www.meetup.com/London-React-User-Group/members/15509971/) and [Zoe Merchant](http://www.meetup.com/London-React-User-Group/members/137058242/)). These two events have been big successes; a second one in London is [already planned](http://www.meetup.com/London-React-User-Group/events/191406572/).
8
-
9
-If you don't live near San Francisco or London, why not start one in your community?
10
-
11
-## Complementary Tools
12
-In case you haven't seen it, we've consolidated the tooling solution around React on [this wiki page](https://github.com/facebook/react/wiki/Complementary-Tools). Some of the notable recent entries include:
13
-
14
-- [Ryan Florence](https://github.com/rpflorence) and [Michael Jackson](https://github.com/mjackson)'s [react-nested-router](https://github.com/rpflorence/react-nested-router), which is a translation of the Ember router API to React.
15
-
16
-- [Stephen J. Collings](https://github.com/stevoland)'s [react-bootstrap](https://github.com/react-bootstrap/react-bootstrap), which wraps the popular framework with a bit of React goodness. The [website](https://react-bootstrap.github.io/components.html) features live-editable demos.
17
-
18
-- [Andrey Popp](https://github.com/andreypopp)'s [react-quickstart](https://github.com/andreypopp/react-quickstart), which gives you a quick template for server-side rendering and routing, among other features.
19
-
20
-These are some of the links that often pop up on the #reactjs IRC channel. If you made something that you think deserves to be shown on the wiki, feel free to add it!
21
-
22
-## React in Interesting Places
23
-
24
-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:
25
-
26
-<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/KZjFVdU8VLI" frameborder="0" allowfullscreen></iframe>
27
-
28
-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.
29
-
30
-[](http://www.petehunt.net/wolfenstein3D-react/wolf3d.html)
31
-
32
-Give us a shoutout on IRC or [React Google Groups](https://groups.google.com/forum/#!forum/reactjs) if you've used React in some Interesting places.
33
-
34
-## Even More People Using React
35
-
36
-### Prismatic
37
-[Prismatic](http://getprismatic.com/home) recently shrank their codebase fivefold with the help of React and its popular ClojureScript wrapper, [Om](https://github.com/swannodette/om). They detailed their very positive experience [here](http://blog.getprismatic.com/om-sweet-om-high-functional-frontend-engineering-with-clojurescript-and-react/).
38
-
39
-> Finally, the state is normalized: each piece of information is represented in a single place. Since React ensures consistency between the DOM and the application data, the programmer can focus on ensuring that the state properly stays up to date in response to user input. If the application state is normalized, then this consistency is guaranteed by definition, completely avoiding the possibility of an entire class of common bugs.
40
-
41
-### Adobe Brackets
42
-[Kevin Dangoor](http://www.kevindangoor.com) works on [Brackets](http://brackets.io/?lang=en), the open-source code editor. After writing [his first impression on React](http://www.kevindangoor.com/2014/05/simplifying-code-with-react/), he followed up with another insightful [article](http://www.kevindangoor.com/2014/05/react-in-brackets/) on how to gradually make the code transition, how to preserve the editor's good parts, and how to tune Brackets' tooling around JSX.
43
-
44
-> We don’t need to switch to React everywhere, all at once. It’s not a framework that imposes anything on the application structure. [...] Easy, iterative adoption is definitely something in React’s favor for us.
45
-
46
-### Storehouse
47
-[Storehouse](https://www.storehouse.co) (Apple Design Award 2014)'s web presence is build with React. Here's [an example story](https://www.storehouse.co/stories/y2ad-mexico-city-clouds). Congratulations on the award!
48
-
49
-### Vim Awesome
50
-[Vim Awesome](http://vimawesome.com), an open-source Vim plugins directory built on React, was just launched. Be sure to [check out the source code](https://github.com/divad12/vim-awesome) if you're curious to see an example of how to build a small single-page React app.
51
-
52
-## Random Tweets
53
-
54
-<blockquote class="twitter-tweet" lang="en"><p>Spent 12 hours so far with <a href="https://twitter.com/hashtag/reactjs?src=hash">#reactjs</a>. Spent another 2 wondering why we've been doing JS frameworks wrong until now. React makes me happy.</p>— Paul Irwin (@paulirwin) <a href="https://twitter.com/paulirwin/statuses/481263947589242882">June 24, 2014</a></blockquote>
docs/_posts/2014-07-13-react-v0.11-rc1.md
deleted
-144
@@ -1,144 +0,0 @@
1
----
2
-title: React v0.11 RC
3
-author: [zpao]
4
----
5
-
6
-It's that time again… we're just about ready to ship a new React release! v0.11 includes a wide array of bug fixes and features. We highlighted some of the most important changes below, along with the full changelog.
7
-
8
-The release candidate is available for download from the CDN:
9
-
10
-* **React**
11
- Dev build with warnings: <https://fb.me/react-0.11.0-rc1.js>
12
- Minified build for production: <https://fb.me/react-0.11.0-rc1.min.js>
13
-* **React with Add-Ons**
14
- Dev build with warnings: <https://fb.me/react-with-addons-0.11.0-rc1.js>
15
- Minified build for production: <https://fb.me/react-with-addons-0.11.0-rc1.min.js>
16
-* **In-Browser JSX transformer**
17
- <https://fb.me/JSXTransformer-0.11.0-rc1.js>
18
-
19
-We've also published version `0.11.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
20
-
21
-Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry.
22
-
23
-
24
-## `getDefaultProps`
25
-
26
-Starting in React 0.11, `getDefaultProps()` is called only once when `React.createClass()` is called, instead of each time a component is rendered. This means that `getDefaultProps()` can no longer vary its return value based on `this.props` and any objects will be shared across all instances. This change improves performance and will make it possible in the future to do PropTypes checks earlier in the rendering process, allowing us to give better error messages.
27
-
28
-
29
-## Rendering to `null`
30
-
31
-Since React's release, people have been using work arounds to "render nothing". Usually this means returning an empty `<div/>` or `<span/>`. Some people even got clever and started returning `<noscript/>` to avoid extraneous DOM nodes. We finally provided a "blessed" solution that allows developers to write meaningful code. Returning `null` is an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a `<noscript>` element, though in the future we hope to not put anything in the document. In the mean time, `<noscript>` elements do not affect layout in any way, so you can feel safe using `null` today!
32
-
33
-```js
34
-// Before
35
-render: function() {
36
- if (!this.state.visible) {
37
- return <span/>;
38
- }
39
- // ...
40
-}
41
-
42
-// After
43
-render: function() {
44
- if (!this.state.visible) {
45
- return null;
46
- }
47
- // ...
48
-}
49
-```
50
-
51
-
52
-## JSX Namespacing
53
-
54
-Another feature request we've been hearing for a long time is the ability to have namespaces in JSX. Given that JSX is just JavaScript, we didn't want to use XML namespacing. Instead we opted for a standard JS approach: object property access. Instead of assigning variables to access components stored in an object (such as a component library), you can now use the component directly as `<Namespace.Component/>`.
55
-
56
-```js
57
-// Before
58
-var UI = require('UI');
59
-var UILayout = UI.Layout;
60
-var UIButton = UI.Button;
61
-var UILabel = UI.Label;
62
-
63
-render: function() {
64
- return <UILayout><UIButton /><UILabel>text</UILabel></UILayout>;
65
-}
66
-
67
-// After
68
-var UI = require('UI');
69
-
70
-render: function() {
71
- return <UI.Layout><UI.Button /><UI.Label>text</UI.Label></UI.Layout>;
72
-}
73
-```
74
-
75
-
76
-## Improved keyboard event normalization
77
-
78
-Keyboard events now contain a normalized `e.key` value according to the [DOM Level 3 Events spec](http://www.w3.org/TR/DOM-Level-3-Events/#keys-special), allowing you to write simpler key handling code that works in all browsers, such as:
79
-
80
-```js
81
-handleKeyDown: function(e) {
82
- if (e.key === 'Enter') {
83
- // Handle enter key
84
- } else if (e.key === ' ') {
85
- // Handle spacebar
86
- } else if (e.key === 'ArrowLeft') {
87
- // Handle left arrow
88
- }
89
-},
90
-```
91
-
92
-Keyboard and mouse events also now include a normalized `e.getModifierState()` that works consistently across browsers.
93
-
94
-## Changelog
95
-
96
-### React Core
97
-
98
-#### Breaking Changes
99
-* `getDefaultProps()` is now called once per class and shared across all instances
100
-
101
-#### New Features
102
-* Rendering to `null`
103
-* Keyboard events include normalized `e.key` and `e.getModifierState()` properties
104
-* New normalized `onBeforeInput` event
105
-* `React.Children.count` has been added as a helper for counting the number of children
106
-
107
-#### Bug Fixes
108
-
109
-* Re-renders are batched in more cases
110
-* Events: `e.view` properly normalized
111
-* Added Support for more HTML attributes (`coords`, `crossOrigin`, `download`, `hrefLang`, `mediaGroup`, `muted`, `scrolling`, `shape`, `srcSet`, `start`, `useMap`)
112
-* Improved SVG support
113
- * Changing `className` on a mounted SVG component now works correctly
114
- * Added support for elements `mask` and `tspan`
115
- * Added support for attributes `dx`, `dy`, `fillOpacity`, `fontFamily`, `fontSize`, `markerEnd`, `markerMid`, `markerStart`, `opacity`, `patternContentUnits`, `patternUnits`, `preserveAspectRatio`, `strokeDasharray`, `strokeOpacity`
116
-* CSS property names with vendor prefixes (`Webkit`, `ms`, `Moz`, `O`) are now handled properly
117
-* Duplicate keys no longer cause a hard error; now a warning is logged (and only one of the children with the same key is shown)
118
-* `img` event listeners are now unbound properly, preventing the error "Two valid but unequal nodes with the same `data-reactid`"
119
-* Added explicit warning when missing polyfills
120
-
121
-### React With Addons
122
-* PureRenderMixin
123
-* Perf: a new set of tools to help with performance analysis
124
-* Update: New `$apply` command to transform values
125
-* TransitionGroup bug fixes with null elements, Android
126
-
127
-### React NPM Module
128
-* Now includes the pre-built packages under `dist/`.
129
-* `envify` is properly listed as a dependency instead of a peer dependency
130
-
131
-### JSX
132
-* Added support for namespaces, eg `<Components.Checkbox />`
133
-* JSXTransformer
134
- * Enable the same `harmony` features available in the command line with `<script type="text/jsx;harmony=true">`
135
- * Scripts are downloaded in parallel for more speed. They are still executed in order (as you would expect with normal script tags)
136
- * Fixed a bug preventing sourcemaps from working in Firefox
137
-
138
-### React Tools Module
139
-* Improved readme with usage and API information
140
-* Improved ES6 transforms available with `--harmony` option
141
-* Added `--source-map-inline` option to the `jsx` executable
142
-* New `transformWithDetails` API which gives access to the raw sourcemap data
143
-
144
-
docs/_posts/2014-07-17-react-v0.11.md
deleted
-163
@@ -1,163 +0,0 @@
1
----
2
-title: React v0.11
3
-author: [zpao]
4
----
5
-
6
-**Update:** We missed a few important changes in our initial post and changelog. We've updated this post with details about [Descriptors](#descriptors) and [Prop Type Validation](#prop-type-validation).
7
-
8
-- - -
9
-
10
-We're really happy to announce the availability of React v0.11. There seems to be a lot of excitement already and we appreciate everybody who gave the release candidate a try over the weekend. We made a couple small changes in response to the feedback and issues filed. We enabled the destructuring assignment transform when using `jsx --harmony`, fixed a small regression with `statics`, and made sure we actually exposed the new API we said we were shipping: `React.Children.count`.
11
-
12
-
13
-This version has been cooking for a couple months now and includes a wide array of bug fixes and features. We highlighted some of the most important changes below, along with the full changelog.
14
-
15
-The release is available for download from the CDN:
16
-
17
-* **React**
18
- Dev build with warnings: <https://fb.me/react-0.11.0.js>
19
- Minified build for production: <https://fb.me/react-0.11.0.min.js>
20
-* **React with Add-Ons**
21
- Dev build with warnings: <https://fb.me/react-with-addons-0.11.0.js>
22
- Minified build for production: <https://fb.me/react-with-addons-0.11.0.min.js>
23
-* **In-Browser JSX transformer**
24
- <https://fb.me/JSXTransformer-0.11.0.js>
25
-
26
-We've also published version `0.11.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
27
-
28
-Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry.
29
-
30
-
31
-## `getDefaultProps`
32
-
33
-Starting in React 0.11, `getDefaultProps()` is called only once when `React.createClass()` is called, instead of each time a component is rendered. This means that `getDefaultProps()` can no longer vary its return value based on `this.props` and any objects will be shared across all instances. This change improves performance and will make it possible in the future to do PropTypes checks earlier in the rendering process, allowing us to give better error messages.
34
-
35
-
36
-## Rendering to `null`
37
-
38
-Since React's release, people have been using work arounds to "render nothing". Usually this means returning an empty `<div/>` or `<span/>`. Some people even got clever and started returning `<noscript/>` to avoid extraneous DOM nodes. We finally provided a "blessed" solution that allows developers to write meaningful code. Returning `null` is an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a `<noscript>` element, though in the future we hope to not put anything in the document. In the mean time, `<noscript>` elements do not affect layout in any way, so you can feel safe using `null` today!
39
-
40
-```js
41
-// Before
42
-render: function() {
43
- if (!this.state.visible) {
44
- return <span/>;
45
- }
46
- // ...
47
-}
48
-
49
-// After
50
-render: function() {
51
- if (!this.state.visible) {
52
- return null;
53
- }
54
- // ...
55
-}
56
-```
57
-
58
-
59
-## JSX Namespacing
60
-
61
-Another feature request we've been hearing for a long time is the ability to have namespaces in JSX. Given that JSX is just JavaScript, we didn't want to use XML namespacing. Instead we opted for a standard JS approach: object property access. Instead of assigning variables to access components stored in an object (such as a component library), you can now use the component directly as `<Namespace.Component/>`.
62
-
63
-```js
64
-// Before
65
-var UI = require('UI');
66
-var UILayout = UI.Layout;
67
-var UIButton = UI.Button;
68
-var UILabel = UI.Label;
69
-
70
-render: function() {
71
- return <UILayout><UIButton /><UILabel>text</UILabel></UILayout>;
72
-}
73
-
74
-// After
75
-var UI = require('UI');
76
-
77
-render: function() {
78
- return <UI.Layout><UI.Button /><UI.Label>text</UI.Label></UI.Layout>;
79
-}
80
-```
81
-
82
-
83
-## Improved keyboard event normalization
84
-
85
-Keyboard events now contain a normalized `e.key` value according to the [DOM Level 3 Events spec](http://www.w3.org/TR/DOM-Level-3-Events/#keys-special), allowing you to write simpler key handling code that works in all browsers, such as:
86
-
87
-```js
88
-handleKeyDown: function(e) {
89
- if (e.key === 'Enter') {
90
- // Handle enter key
91
- } else if (e.key === ' ') {
92
- // Handle spacebar
93
- } else if (e.key === 'ArrowLeft') {
94
- // Handle left arrow
95
- }
96
-},
97
-```
98
-
99
-Keyboard and mouse events also now include a normalized `e.getModifierState()` that works consistently across browsers.
100
-
101
-## Descriptors
102
-
103
-In our [v0.10 release notes](/blog/2014/03/21/react-v0.10.html#clone-on-mount), we called out that we were deprecating the existing behavior of the component function call (eg `component = MyComponent(props, ...children)` or `component = <MyComponent prop={...}/>`). Previously that would create an instance and React would modify that internally. You could store that reference and then call functions on it (eg `component.setProps(...)`). This no longer works. `component` in the above examples will be a descriptor and not an instance that can be operated on. The v0.10 release notes provide a complete example along with a migration path. The development builds also provided warnings if you called functions on descriptors.
104
-
105
-Along with this change to descriptors, `React.isValidComponent` and `React.PropTypes.component` now actually validate that the value is a descriptor. Overwhelmingly, these functions are used to validate the value of `MyComponent()`, which as mentioned is now a descriptor, not a component instance. We opted to reduce code churn and make the migration to 0.11 as easy as possible. However, we realize this is has caused some confusion and we're working to make sure we are consistent with our terminology.
106
-
107
-## Prop Type Validation
108
-
109
-Previously `React.PropTypes` validation worked by simply logging to the console. Internally, each validator was responsible for doing this itself. Additionally, you could write a custom validator and the expectation was that you would also simply `console.log` your error message. Very shortly into the 0.11 cycle we changed this so that our validators return (*not throw*) an `Error` object. We then log the `error.message` property in a central place in ReactCompositeComponent. Overall the result is the same, but this provides a clearer intent in validation. In addition, to better transition into our descriptor factory changes, we also currently run prop type validation twice in development builds. As a result, custom validators doing their own logging result in duplicate messages. To update, simply return an `Error` with your message instead.
110
-
111
-
112
-## Changelog
113
-
114
-### React Core
115
-
116
-#### Breaking Changes
117
-* `getDefaultProps()` is now called once per class and shared across all instances
118
-* `MyComponent()` now returns a descriptor, not an instance
119
-* `React.isValidComponent` and `React.PropTypes.component` validate *descriptors*, not component instances.
120
-* Custom `propType` validators should return an `Error` instead of logging directly
121
-
122
-#### New Features
123
-* Rendering to `null`
124
-* Keyboard events include normalized `e.key` and `e.getModifierState()` properties
125
-* New normalized `onBeforeInput` event
126
-* `React.Children.count` has been added as a helper for counting the number of children
127
-
128
-#### Bug Fixes
129
-
130
-* Re-renders are batched in more cases
131
-* Events: `e.view` properly normalized
132
-* Added Support for more HTML attributes (`coords`, `crossOrigin`, `download`, `hrefLang`, `mediaGroup`, `muted`, `scrolling`, `shape`, `srcSet`, `start`, `useMap`)
133
-* Improved SVG support
134
- * Changing `className` on a mounted SVG component now works correctly
135
- * Added support for elements `mask` and `tspan`
136
- * Added support for attributes `dx`, `dy`, `fillOpacity`, `fontFamily`, `fontSize`, `markerEnd`, `markerMid`, `markerStart`, `opacity`, `patternContentUnits`, `patternUnits`, `preserveAspectRatio`, `strokeDasharray`, `strokeOpacity`
137
-* CSS property names with vendor prefixes (`Webkit`, `ms`, `Moz`, `O`) are now handled properly
138
-* Duplicate keys no longer cause a hard error; now a warning is logged (and only one of the children with the same key is shown)
139
-* `img` event listeners are now unbound properly, preventing the error "Two valid but unequal nodes with the same `data-reactid`"
140
-* Added explicit warning when missing polyfills
141
-
142
-### React With Addons
143
-* PureRenderMixin: a mixin which helps optimize "pure" components
144
-* Perf: a new set of tools to help with performance analysis
145
-* Update: New `$apply` command to transform values
146
-* TransitionGroup bug fixes with null elements, Android
147
-
148
-### React NPM Module
149
-* Now includes the pre-built packages under `dist/`.
150
-* `envify` is properly listed as a dependency instead of a peer dependency
151
-
152
-### JSX
153
-* Added support for namespaces, eg `<Components.Checkbox />`
154
-* JSXTransformer
155
- * Enable the same `harmony` features available in the command line with `<script type="text/jsx;harmony=true">`
156
- * Scripts are downloaded in parallel for more speed. They are still executed in order (as you would expect with normal script tags)
157
- * Fixed a bug preventing sourcemaps from working in Firefox
158
-
159
-### React Tools Module
160
-* Improved readme with usage and API information
161
-* Improved ES6 transforms available with `--harmony` option
162
-* Added `--source-map-inline` option to the `jsx` executable
163
-* New `transformWithDetails` API which gives access to the raw sourcemap data
docs/_posts/2014-07-25-react-v0.11.1.md
deleted
-43
@@ -1,43 +0,0 @@
1
----
2
-title: React v0.11.1
3
-author: [zpao]
4
----
5
-
6
-Today we're releasing React v0.11.1 to address a few small issues. Thanks to everybody who has reported them as they've begun upgrading.
7
-
8
-The first of these is the most major and resulted in a regression with the use of `setState` inside `componentWillMount` when using React on the server. These `setState` calls are batched into the initial render. A change we made to our batching code resulted in this path hitting DOM specific code when run server-side, in turn throwing an error as `document` is not defined.
9
-
10
-There are several fixes we're including in v0.11.1 that are focused around the newly supported `event.getModifierState()` function. We made some adjustments to improve this cross-browser standardization.
11
-
12
-The final fix we're including is to better support a workaround for some IE8 behavior. The edge-case bug we're fixing was also present in v0.9 and v0.10, so while it wasn't a short-term regression, we wanted to make sure we support IE8 to the best of our abilities.
13
-
14
-We'd also like to call out a couple additional breaking changes that we failed to originally mention in the release notes for v0.11. We updated that blog post and the changelog, so we encourage you to go read about the changes around [Descriptors](/blog/2014/07/17/react-v0.11.html#descriptors) and [Prop Type Validation](/blog/2014/07/17/react-v0.11.html#prop-type-validation).
15
-
16
-The release is available for download from the CDN:
17
-
18
-* **React**
19
- Dev build with warnings: <https://fb.me/react-0.11.1.js>
20
- Minified build for production: <https://fb.me/react-0.11.1.min.js>
21
-* **React with Add-Ons**
22
- Dev build with warnings: <https://fb.me/react-with-addons-0.11.1.js>
23
- Minified build for production: <https://fb.me/react-with-addons-0.11.1.min.js>
24
-* **In-Browser JSX transformer**
25
- <https://fb.me/JSXTransformer-0.11.1.js>
26
-
27
-We've also published version `0.11.1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
28
-
29
-Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry.
30
-
31
-## Changelog
32
-
33
-### React Core
34
-
35
-#### Bug Fixes
36
-* `setState` can be called inside `componentWillMount` in non-DOM environments
37
-* `SyntheticMouseEvent.getEventModifierState` correctly renamed to `getModifierState`
38
-* `getModifierState` correctly returns a `boolean`
39
-* `getModifierState` is now correctly case sensitive
40
-* Empty Text node used in IE8 `innerHTML` workaround is now removed, fixing rerendering in certain cases
41
-
42
-### JSXTransformer
43
-* Fix duplicate variable declaration (caused issues in some browsers)
docs/_posts/2014-07-28-community-roundup-20.md
deleted
-114
@@ -1,114 +0,0 @@
1
----
2
-title: "Community Round-up #20"
3
-author: [LoukaN]
4
----
5
-
6
-It's an exciting time for React as there are now more commits from open source contributors than from Facebook engineers! Keep up the good work :)
7
-
8
-## Atom moves to React
9
-
10
-[Atom, GitHub's code editor, is now using React](http://blog.atom.io/2014/07/02/moving-atom-to-react.html) to build the editing experience. They made the move in order to improve performance. By default, React helped them eliminate unnecessary reflows, enabling them to focus on architecting the rendering pipeline in order to minimize repaints by using hardware acceleration. This is a testament to the fact that React's architecture is perfect for high performant applications.
11
-
12
-[<img src="../img/blog/gpu-cursor-move.gif" style="width: 100%;" />](http://blog.atom.io/2014/07/02/moving-atom-to-react.html)
13
-
14
-
15
-## Why Does React Scale?
16
-
17
-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).
18
-
19
-<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/D-ioDiacTm8" frameborder="0" allowfullscreen></iframe>
20
-
21
-
22
-## Live Editing
23
-
24
-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/)!
25
-
26
-<iframe src="//player.vimeo.com/video/100010922" width="100%" height="315" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
27
-
28
-
29
-## ReactIntl Mixin by Yahoo
30
-
31
-There are a couple of React-related projects that recently appeared on Yahoo's GitHub, the first one being an [internationalization mixin](https://github.com/yahoo/react-intl). It's great to see them getting excited about React and contributing back to the community.
32
-
33
-```javascript
34
-var MyComponent = React.createClass({
35
- mixins: [ReactIntlMixin],
36
- render: function() {
37
- return (
38
- <div>
39
- <p>{this.intlDate(1390518044403, { hour: 'numeric', minute: 'numeric' })}</p>
40
- <p>{this.intlNumber(400, { style: 'percent' })}</p>
41
- </div>
42
- );
43
- }
44
-});
45
-
46
-React.renderComponent(
47
- <MyComponent locales={['fr-FR']} />,
48
- document.getElementById('example')
49
-);
50
-```
51
-
52
-## Thinking and Learning React
53
-
54
-Josephine Hall, working at Icelab, used React to write a mobile-focused application. She wrote a blog post [“Thinking and Learning React.js”](http://icelab.com.au/articles/thinking-and-learning-reactjs/) to share her experience with elements they had to use. You'll learn about routing, event dispatch, touchable components, and basic animations.
55
-
56
-
57
-## London React Meetup
58
-
59
-If you missed the last [London React Meetup](http://www.meetup.com/London-React-User-Group/events/191406572/), the video is available, with lots of great content.
60
-
61
-- What's new in React 0.11 and how to improve performance by guaranteeing immutability
62
-- State handling in React with Morearty.JS
63
-- React on Rails - How to use React with Ruby on Rails to build isomorphic apps
64
-- Building an isomorphic, real-time to-do list with moped and node.js
65
-
66
-<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/CP3lvm5Ppqo" frameborder="0" allowfullscreen></iframe>
67
-
68
-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.
69
-
70
-
71
-## Using React and KendoUI Together
72
-
73
-One of the strengths of React is that it plays nicely with other libraries. Jim Cowart proved it by writing a tutorial that explains how to write [React component adapters for KendoUI](http://www.ifandelse.com/using-reactjs-and-kendoui-together/).
74
-
75
-<figure><a href="http://www.ifandelse.com/using-reactjs-and-kendoui-together/"><img src="../img/blog/kendoui.png" /></a></figure>
76
-
77
-
78
-## Acorn JSX
79
-
80
-Ingvar Stepanyan extended the Acorn JavaScript parser to support JSX. The result is a [JSX parser](https://github.com/RReverser/acorn-jsx) that's 1.5–2.0x faster than the official JSX implementation. It is an experiment and is not meant to be used for serious things, but it's always a good thing to get competition on performance!
81
-
82
-
83
-## ReactScriptLoader
84
-
85
-Yariv Sadan created [ReactScriptLoader](https://github.com/yariv/ReactScriptLoader) to make it easier to write components that require an external script.
86
-
87
-```javascript
88
-var Foo = React.createClass({
89
- mixins: [ReactScriptLoaderMixin],
90
- getScriptURL: function() {
91
- return 'http://d3js.org/d3.v3.min.js';
92
- },
93
- getInitialState: function() {
94
- return { scriptLoading: true, scriptLoadError: false };
95
- },
96
- onScriptLoaded: function() {
97
- this.setState({scriptLoading: false});
98
- },
99
- onScriptError: function() {
100
- this.setState({scriptLoading: false, scriptLoadError: true});
101
- },
102
- render: function() {
103
- var message =
104
- this.state.scriptLoading ? 'Loading script...' :
105
- this.state.scriptLoadError ? 'Loading failed' :
106
- 'Loading succeeded';
107
- return <span>{message}</span>;
108
- }
109
-});
110
-```
111
-
112
-## Random Tweet
113
-
114
-<blockquote class="twitter-tweet" data-conversation="none" lang="en"><p>“<a href="https://twitter.com/apphacker">@apphacker</a>: I take back the mean things I said about <a href="https://twitter.com/reactjs">@reactjs</a> I actually like it.” Summarizing the life of ReactJS in a single tweet.</p>— Jordan (@jordwalke) <a href="https://twitter.com/jordwalke/statuses/490747339607265280">July 20, 2014</a></blockquote>
docs/_posts/2014-07-30-flux-actions-and-the-dispatcher.md
deleted
-46
@@ -1,46 +0,0 @@
1
----
2
-title: "Flux: Actions and the Dispatcher"
3
-author: [fisherwebdev]
4
----
5
-
6
-Flux is the application architecture Facebook uses to build JavaScript applications. It's based on a unidirectional data flow. We've built everything from small widgets to huge applications with Flux, and it's handled everything we've thrown at it. Because we've found it to be a great way to structure our code, we're excited to share it with the open source community. [Jing Chen presented Flux](http://youtu.be/nYkdrAPrdcw?t=10m20s) at the F8 conference, and since that time we've seen a lot of interest in it. We've also published an [overview of Flux](https://facebook.github.io/flux/docs/overview.html) and a [TodoMVC example](https://github.com/facebook/flux/tree/master/examples/flux-todomvc/), with an accompanying [tutorial](https://facebook.github.io/flux/docs/todo-list.html).
7
-
8
-Flux is more of a pattern than a full-blown framework, and you can start using it without a lot of new code beyond React. Up until recently, however, we haven't released one crucial piece of our Flux software: the dispatcher. But along with the creation of the new [Flux code repository](https://github.com/facebook/flux) and [Flux website](https://facebook.github.io/flux/), we've now open sourced the same [dispatcher](https://facebook.github.io/flux/docs/dispatcher.html) we use in our production applications.
9
-
10
-
11
-Where the Dispatcher Fits in the Flux Data Flow
12
------------------------------------------------
13
-
14
-The dispatcher is a singleton, and operates as the central hub of data flow in a Flux application. It is essentially a registry of callbacks, and can invoke these callbacks in order. Each _store_ registers a callback with the dispatcher. When new data comes into the dispatcher, it then uses these callbacks to propagate that data to all of the stores. The process of invoking the callbacks is initiated through the dispatch() method, which takes a data payload object as its sole argument.
15
-
16
-
17
-Actions and ActionCreators
18
---------------------------
19
-
20
-When new data enters the system, whether through a person interacting with the application or through a web api call, that data is packaged into an _action_ — an object literal containing the new fields of data and a specific action type. We often create a library of helper methods called ActionCreators that not only create the action object, but also pass the action to the dispatcher.
21
-
22
-Different actions are identified by a type attribute. When all of the stores receive the action, they typically use this attribute to determine if and how they should respond to it. In a Flux application, both stores and views control themselves; they are not acted upon by external objects. Actions flow into the stores through the callbacks they define and register, not through setter methods.
23
-
24
-Letting the stores update themselves eliminates many entanglements typically found in MVC applications, where cascading updates between models can lead to unstable state and make accurate testing very difficult. The objects within a Flux application are highly decoupled, and adhere very strongly to the [Law of Demeter](https://en.wikipedia.org/wiki/Law_of_Demeter), the principle that each object within a system should know as little as possible about the other objects in the system. This results in software that is more maintainable, adaptable, testable, and easier for new engineering team members to understand.
25
-
26
-<img src="../img/blog/flux-diagram.png" style="width: 100%;" />
27
-
28
-
29
-Why We Need a Dispatcher
30
-------------------------
31
-
32
-As an application grows, dependencies across different stores are a near certainty. Store A will inevitably need Store B to update itself first, so that Store A can know how to update itself. We need the dispatcher to be able to invoke the callback for Store B, and finish that callback, before moving forward with Store A. To declaratively assert this dependency, a store needs to be able to say to the dispatcher, "I need to wait for Store B to finish processing this action." The dispatcher provides this functionality through its waitFor() method.
33
-
34
-The dispatch() method provides a simple, synchronous iteration through the callbacks, invoking each in turn. When waitFor() is encountered within one of the callbacks, execution of that callback stops and waitFor() provides us with a new iteration cycle over the dependencies. After the entire set of dependencies have been fulfilled, the original callback then continues to execute.
35
-
36
-Further, the waitFor() method may be used in different ways for different actions, within the same store's callback. In one case, Store A might need to wait for Store B. But in another case, it might need to wait for Store C. Using waitFor() within the code block that is specific to an action allows us to have fine-grained control of these dependencies.
37
-
38
-Problems arise, however, if we have circular dependencies. That is, if Store A needs to wait for Store B, and Store B needs to wait for Store A, we could wind up in an endless loop. The dispatcher now available in the Flux repo protects against this by throwing an informative error to alert the developer that this problem has occurred. The developer can then create a third store and resolve the circular dependency.
39
-
40
-
41
-Example Chat App
42
-----------------
43
-
44
-Along with the same dispatcher that Facebook uses in its production applications, we've also published a new example [chat app](https://github.com/facebook/flux/tree/master/examples/flux-chat), slightly more complicated than the simplistic TodoMVC, so that engineers can better understand how Flux solves problems like dependencies between stores and calls to a web API.
45
-
46
-We're hopeful that the new Flux repository will grow with time to include additional tools, boilerplate code and further examples. And we hope that Flux will prove as useful to you as it has to us. Enjoy!
docs/_posts/2014-08-03-community-roundup-21.md
deleted
-113
@@ -1,113 +0,0 @@
1
----
2
-title: "Community Round-up #21"
3
-author: [LoukaN]
4
----
5
-
6
-## React Router
7
-[Ryan Florence](http://ryanflorence.com/) and [Michael Jackson](https://twitter.com/mjackson) ported Ember's router to React in a project called [React Router](https://github.com/rackt/react-router). This is a very good example of both communities working together to make the web better!
8
-
9
-```javascript
10
-React.renderComponent((
11
- <Routes>
12
- <Route handler={App}>
13
- <Route name="about" handler={About}/>
14
- <Route name="users" handler={Users}>
15
- <Route name="user" path="/user/:userId" handler={User}/>
16
- </Route>
17
- </Route>
18
- </Routes>
19
-), document.getElementById('example'));
20
-```
21
-
22
-## Going Big with React
23
-
24
-Areeb Malik, from Facebook, talks about his experience using React. "On paper, all those JS frameworks look promising: clean implementations, quick code design, flawless execution. But what happens when you stress test JavaScript? What happens when you throw 6 megabytes of code at it? In this talk, we'll investigate how React performs in a high stress situation, and how it has helped our team build safe code on a massive scale"
25
-
26
-[](https://skillsmatter.com/skillscasts/5429-going-big-with-react)
27
-
28
-<!--
29
-<iframe allowfullscreen="" data-progress="true" frameborder="0" height="390" id="vimeo-player" mozallowfullscreen="" src="//player.vimeo.com/video/100245392?api=1&title=0" webkitallowfullscreen="" width="640"></iframe>
30
--->
31
-
32
-
33
-## What is React?
34
-
35
-[Craig McKeachie](http://www.funnyant.com/author/admin/) author of [JavaScript Framework Guide](http://www.funnyant.com/javascript-framework-guide/) wrote an excellent news named ["What is React.js? Another Template Library?](http://www.funnyant.com/reactjs-what-is-it/)
36
-
37
-- Is React a template library?
38
-- Is React similar to Web Components?
39
-- Are the Virtual DOM and Shadow DOM the same?
40
-- Can React be used with other JavaScript MVC frameworks?
41
-- Who uses React?
42
-- Is React a premature optimization if you aren’t Facebook or Instagram?
43
-- Can I work with designers?
44
-- Will React hurt my search engine optimizations (SEO)?
45
-- Is React a framework for building applications or a library with one feature?
46
-- Are components a better way to build an application?
47
-- Can I build something complex with React?
48
-
49
-
50
-## Referencing Dynamic Children
51
-
52
-While Matt Zabriskie was working on [react-tabs](https://www.npmjs.com/package/react-tabs) he discovered how to use React.Children.map and React.addons.cloneWithProps in order to [reference dynamic children](http://www.mattzabriskie.com/blog/react-referencing-dynamic-children).
53
-
54
-```javascript
55
-var App = React.createClass({
56
- render: function () {
57
- var children = React.Children.map(this.props.children, function(child, index) {
58
- return React.addons.cloneWithProps(child, {
59
- ref: 'child-' + index
60
- });
61
- });
62
- return <div>{children}</div>;
63
- }
64
-});
65
-```
66
-
67
-
68
-## JSX with Sweet.js using Readtables
69
-
70
-Have you ever wondered how JSX was implemented? James Long wrote a very instructive blog post that explains how to [compile JSX with Sweet.js using Readtables](http://jlongster.com/Compiling-JSX-with-Sweet.js-using-Readtables).
71
-
72
-[](http://jlongster.com/Compiling-JSX-with-Sweet.js-using-Readtables)
73
-
74
-
75
-## First Look: Getting Started with React
76
-
77
-[Kirill Buga](http://modernweb.com/authors/kirill-buga/) wrote an article on Modern Web explaining how [React is different from traditional MVC](http://modernweb.com/2014/07/23/getting-started-reactjs/) used by most JavaScript applications
78
-
79
-<figure><a href="http://modernweb.com/2014/07/23/getting-started-reactjs"><img src="../img/blog/first-look.png" /></a></figure>
80
-
81
-
82
-## React Draggable
83
-
84
-[Matt Zabriskie](https://github.com/mzabriskie) released a [project](https://github.com/mzabriskie/react-draggable) to make your react components draggable.
85
-
86
-[](https://mzabriskie.github.io/react-draggable/example/)
87
-
88
-
89
-## HTML Parser2 React
90
-
91
-[Jason Brown](https://browniefed.github.io/) adapted htmlparser2 to React: [htmlparser2-react](https://www.npmjs.com/package/htmlparser2-react). That allows you to convert raw HTML to the virtual DOM.
92
-This is not the intended way to use React but can be useful as last resort if you have an existing piece of HTML.
93
-
94
-```javascript
95
-var html = '<div data-id="1" class="hey this is a class" ' +
96
- 'style="width:100%;height: 100%;"><article id="this-article">' +
97
- '<p>hey this is a paragraph</p><div><ul><li>1</li><li>2</li>' +
98
- '<li>3</li></ul></div></article></div>';
99
-var parsedComponent = reactParser(html, React);
100
-```
101
-
102
-
103
-## Building UIs with React
104
-
105
-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!
106
-
107
-<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/lAn7GVoGlKU" frameborder="0" allowfullscreen></iframe>
108
-
109
-
110
-## Random Tweets
111
-
112
-<blockquote class="twitter-tweet" lang="en"><p>We shipped reddit's first production <a href="https://twitter.com/reactjs">@reactjs</a> code last week, our checkout process. <a href="https://t.co/KUInwsCmAF">https://t.co/KUInwsCmAF</a></p>— Brian Holt (@holtbt) <a href="https://twitter.com/holtbt/statuses/493852312604254208">July 28, 2014</a></blockquote>
113
-<blockquote class="twitter-tweet" lang="en"><p>.<a href="https://twitter.com/AirbnbNerds">@AirbnbNerds</a> just launched our first user-facing React.js feature to production! We love it so far. <a href="https://t.co/KtyudemcIW">https://t.co/KtyudemcIW</a> /<a href="https://twitter.com/floydophone">@floydophone</a></p>— spikebrehm (@spikebrehm) <a href="https://twitter.com/spikebrehm/statuses/491645223643013121">July 22, 2014</a></blockquote>
docs/_posts/2014-09-03-introducing-the-jsx-specification.md
deleted
-14
@@ -1,14 +0,0 @@
1
----
2
-title: "Introducing the JSX Specification"
3
-author: [sebmarkbage]
4
----
5
-
6
-At Facebook we've been using JSX for a long time. We originally introduced it to the world last year alongside React, but we actually used it in another form before that to create native DOM nodes. We've also seen some similar efforts grow out of our work in order to be used with other libraries and in interesting ways. At this point React JSX is just one of many implementations.
7
-
8
-In order to make it easier to implement new versions and to make sure that the syntax remains compatible, we're now formalizing the syntax of JSX in a stand-alone spec without any semantic meaning. It's completely stand-alone from React itself.
9
-
10
-Read the spec now at <https://facebook.github.io/jsx/>.
11
-
12
-This is not a proposal to be standardized in ECMAScript. It's just a reference document that transpiler writers and syntax highlighters can agree on. It's currently in a draft stage and will probably continue to be a living document.
13
-
14
-Feel free to [open an Issue](https://github.com/facebook/jsx/issues/new) or Pull Request if you find something wrong.
docs/_posts/2014-09-12-community-round-up-22.md
deleted
-114
@@ -1,114 +0,0 @@
1
----
2
-title: "Community Round-up #22"
3
-layout: post
4
-author: [LoukaN]
5
----
6
-
7
-This has been an exciting summer as four big companies: Yahoo, Mozilla, Airbnb and Reddit announced that they were using React!
8
-
9
-<table><tr><td>
10
-<blockquote width="300" class="twitter-tweet" data-cards="hidden" lang="en"><p>Our friends at <a href="https://twitter.com/Yahoo">@yahoo</a> talk about migrating Yahoo! Mail from YUI to ReactJS at the next <a href="https://twitter.com/hashtag/ReactJS?src=hash">#ReactJS</a> meetup! <a href="http://t.co/Cu2AaE0sVE">http://t.co/Cu2AaE0sVE</a></p>— Facebook Open Source (@fbOpenSource) <a href="https://twitter.com/fbOpenSource/status/510258065900572672">September 12, 2014</a></blockquote>
11
-</td><td valign="top">
12
-<blockquote width="300" class="twitter-tweet" lang="en"><p>I guess <a href="https://twitter.com/reactjs">@reactjs</a> is getting into Firefox :-) Thanks <a href="https://twitter.com/n1k0">@n1k0</a> ! <a href="https://t.co/kipfUS0hu4">https://t.co/kipfUS0hu4</a></p>— David Bruant (@DavidBruant) <a href="https://twitter.com/DavidBruant/status/484956929933213696">July 4, 2014</a></blockquote>
13
-</td></tr><tr><td>
14
-<blockquote width="300" class="twitter-tweet" lang="en"><p>.<a href="https://twitter.com/AirbnbNerds">@AirbnbNerds</a> just launched our first user-facing React.js feature to production! We love it so far. <a href="https://t.co/KtyudemcIW">https://t.co/KtyudemcIW</a> /<a href="https://twitter.com/floydophone">@floydophone</a></p>— spikebrehm (@spikebrehm) <a href="https://twitter.com/spikebrehm/statuses/491645223643013121">July 22, 2014</a></blockquote>
15
-</td><td>
16
-<blockquote width="300" class="twitter-tweet" lang="en"><p>We shipped reddit's first production <a href="https://twitter.com/reactjs">@reactjs</a> code last week, our checkout process. <a href="https://t.co/KUInwsCmAF">https://t.co/KUInwsCmAF</a></p>— Brian Holt (@holtbt) <a href="https://twitter.com/holtbt/statuses/493852312604254208">July 28, 2014</a></blockquote>
17
-</td></tr></table>
18
-
19
-## React's Architecture
20
-
21
-[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/).
22
-
23
-<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/eCf5CquV_Bw" frameborder="0" allowfullscreen></iframe>
24
-
25
-
26
-## v8 optimizations
27
-
28
-Jakob Kummerow landed [two optimizations to V8](http://www.chromium.org/developers/speed-hall-of-fame#TOC-2014-06-18) specifically targeted at optimizing React. That's really exciting to see browser vendors helping out on performance!
29
-
30
-
31
-## Reusable Components by Khan Academy
32
-
33
-[Khan Academy](https://www.khanacademy.org/) released [many high quality standalone components](https://khan.github.io/react-components/) they are using. This is a good opportunity to see what React code used in production look like.
34
-
35
-```javascript
36
-var TeX = require('react-components/js/tex.jsx');
37
-React.renderComponent(<TeX>\nabla \cdot E = 4 \pi \rho</TeX>, domNode);
38
-
39
-var translated = (
40
- <$_ first="Motoko" last="Kusanagi">
41
- Hello, %(first)s %(last)s!
42
- </$_>
43
-);
44
-```
45
-
46
-
47
-## React + Browserify + Gulp
48
-
49
-[Trường](http://truongtx.me/) wrote a little guide to help your [getting started using React, Browserify and Gulp](http://truongtx.me/2014/07/18/using-reactjs-with-browserify-and-gulp/).
50
-
51
-<figure><a href="http://truongtx.me/2014/07/18/using-reactjs-with-browserify-and-gulp/"><img src="../img/blog/react-browserify-gulp.jpg" /></a></figure>
52
-
53
-
54
-## React Style
55
-
56
-After React put HTML inside of JavaScript, Sander Spies takes the same approach with CSS: [IntegratedCSS](https://github.com/SanderSpies/react-style). It seems weird at first but this is the direction where React is heading.
57
-
58
-```javascript
59
-var Button = React.createClass({
60
- normalStyle: ReactStyle(function() {
61
- return { backgroundColor: vars.orange };
62
- }),
63
- activeStyle: ReactStyle(function() {
64
- if (this.state.active) {
65
- return { color: 'yellow', padding: '10px' };
66
- }
67
- }),
68
- render: function() {
69
- return (
70
- <div styles={[this.normalStyle(), this.activeStyle()]}>
71
- Hello, I'm styled
72
- </div>
73
- );
74
- }
75
-});
76
-```
77
-
78
-
79
-## Virtual DOM in Elm
80
-
81
-[Evan Czaplicki](http://evan.czaplicki.us) explains how Elm implements the idea of a Virtual DOM and a diffing algorithm. This is great to see React ideas spread to other languages.
82
-
83
-> Performance is a good hook, but the real benefit is that this approach leads to code that is easier to understand and maintain. In short, it becomes very simple to create reusable HTML widgets and abstract out common patterns. This is why people with larger code bases should be interested in virtual DOM approaches.
84
->
85
-> [Read the full article](http://elm-lang.org/blog/Blazing-Fast-Html.elm)
86
-
87
-
88
-## Components Tutorial
89
-
90
-If you are getting started with React, [Joe Maddalone](http://www.joemaddalone.com/) made a good tutorial on how to build your first component.
91
-
92
-<iframe width="650" height="200" src="//www.youtube-nocookie.com/embed/rFvZydtmsxM" frameborder="0" allowfullscreen></iframe>
93
-
94
-
95
-## Saving time & staying sane?
96
-
97
-When [Kent William Innholt](http://http://kentwilliam.com/) who works at [M>Path](http://mpath.com/) summed up his experience using React in an [article](http://kentwilliam.com/articles/saving-time-staying-sane-pros-cons-of-react-js).
98
-
99
-> We're building an ambitious new web app, where the UI complexity represents most of the app's complexity overall. It includes a tremendous amount of UI widgets as well as a lot rules on what-to-show-when. This is exactly the sort of situation React.js was built to simplify.
100
->
101
-> - **Big win**: Tighter coupling of markup and behavior
102
-> - **Jury's still out**: CSS lives outside React.js
103
-> - **Big win**: Cascading updates and functional thinking
104
-> - **Jury's still out**: Verbose propagation
105
->
106
-> [Read the article...](http://kentwilliam.com/articles/saving-time-staying-sane-pros-cons-of-react-js)
107
-
108
-
109
-## Weather
110
-
111
-To finish this round-up, Andrew Gleave made a page that displays the [Weather](https://github.com/andrewgleave/react-weather). It's great to see that React is also used for small prototypes.
112
-
113
-
114
-<figure><a href="https://github.com/andrewgleave/react-weather"><img src="../img/blog/weather.png" /></a></figure>
docs/_posts/2014-09-16-react-v0.11.2.md
deleted
-46
@@ -1,46 +0,0 @@
1
----
2
-title: React v0.11.2
3
-author: [zpao]
4
----
5
-
6
-Today we're releasing React v0.11.2 to add a few small features.
7
-
8
-We're adding support for two more DOM elements, `<dialog>` and `<picture>`, as well as the associated attributes needed to use these elements: `open`, `media`, and `sizes`. While not all browsers support these natively, some of our cutting edge users want to make use of them, so we're making them available to everybody.
9
-
10
-We're also doing some work to prepare for v0.12 and improve compatibility between the versions. To do this we are replacing `React.createDescriptor` with `React.createElement`. `createDescriptor` will continue to work with a warning and will be gone in v0.12. Chances are that this won't affect anybody.
11
-
12
-And lastly, on the heels of announcing Flow at [@Scale](http://atscaleconference.com/) yesterday, we're adding the ability to strip TypeScript-like type annotations as part of the `jsx` transform. To use, simply use the `--strip-types` flag on the command line, or set `stripTypes` in the `options` object when calling the API. We'll be talking about Flow more in the coming months. But for now, it's helpful to know that it is a flow-sensitive JavaScript type checker we will be open sourcing soon.
13
-
14
-The release is available for download from the CDN:
15
-
16
-* **React**
17
- Dev build with warnings: <https://fb.me/react-0.11.2.js>
18
- Minified build for production: <https://fb.me/react-0.11.2.min.js>
19
-* **React with Add-Ons**
20
- Dev build with warnings: <https://fb.me/react-with-addons-0.11.2.js>
21
- Minified build for production: <https://fb.me/react-with-addons-0.11.2.min.js>
22
-* **In-Browser JSX transformer**
23
- <https://fb.me/JSXTransformer-0.11.2.js>
24
-
25
-We've also published version `0.11.2` of the `react` and `react-tools` packages on npm and the `react` package on bower.
26
-
27
-Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry.
28
-
29
-### React Core
30
-
31
-#### New Features
32
-
33
-* Added support for `<dialog>` element and associated `open` attribute
34
-* Added support for `<picture>` element and associated `media` and `sizes` attributes
35
-* Added `React.createElement` API in preparation for React v0.12
36
- * `React.createDescriptor` has been deprecated as a result
37
-
38
-### JSX
39
-
40
-* `<picture>` is now parsed into `React.DOM.picture`
41
-
42
-### React Tools
43
-
44
-* Update `esprima` and `jstransform` for correctness fixes
45
-* The `jsx` executable now exposes a `--strip-types` flag which can be used to remove TypeScript-like type annotations
46
- * This option is also exposed to `require('react-tools').transform` as `stripTypes`
docs/_posts/2014-09-24-testing-flux-applications.md
deleted
-325
@@ -1,325 +0,0 @@
1
----
2
-title: "Testing Flux Applications"
3
-author: [fisherwebdev]
4
----
5
-
6
-**A more up-to-date version of this post is available as part of the [Flux documentation](https://facebook.github.io/flux/docs/testing-flux-applications.html).**
7
-
8
-[Flux](https://facebook.github.io/flux/) is the application architecture that Facebook uses to build web applications with [React](/). It's based on a unidirectional data flow. In previous blog posts and documentation articles, we've shown the [basic structure and data flow](https://facebook.github.io/flux/docs/overview.html), more closely examined the [dispatcher and action creators](/blog/2014/07/30/flux-actions-and-the-dispatcher.html), and shown how to put it all together with a [tutorial](https://facebook.github.io/flux/docs/todo-list.html). Now let's look at how to do formal unit testing of Flux applications with [Jest](https://facebook.github.io/jest/), Facebook's auto-mocking testing framework.
9
-
10
-
11
-Testing with Jest
12
------------------
13
-
14
-For a unit test to operate on a truly isolated _unit_ of the application, we need to mock every module except the one we are testing. Jest makes the mocking of other parts of a Flux application trivial. To illustrate testing with Jest, we'll return to our [example TodoMVC application](https://github.com/facebook/flux/tree/master/examples/flux-todomvc).
15
-
16
-The first steps toward working with Jest are as follows:
17
-
18
-1. Get the module dependencies for the application installed by running `npm install`.
19
-2. Create a directory `__tests__/` with a test file, in this case TodoStore-test.js
20
-3. Run `npm install jest-cli —save-dev`
21
-4. Add the following to your package.json
22
-
23
-```javascript
24
-{
25
- ...
26
- "scripts": {
27
- "test": "jest"
28
- }
29
- ...
30
-}
31
-```
32
-
33
-Now you're ready to run your tests from the command line with `npm test`.
34
-
35
-By default, all modules are mocked, so the only boilerplate we need in TodoStore-test.js is a declarative call to Jest's `dontMock()` method.
36
-
37
-```javascript
38
-jest.dontMock('TodoStore');
39
-```
40
-
41
-This tells Jest to let TodoStore be a real object with real, live methods. Jest will mock all other objects involved with the test.
42
-
43
-
44
-Testing Stores
45
---------------
46
-
47
-At Facebook, Flux stores often receive a great deal of formal unit test coverage, as this is where the application state and logic lives. Stores are arguably the most important place in a Flux application to provide coverage, but at first glance, it's not entirely obvious how to test them.
48
-
49
-By design, stores can't be modified from the outside. They have no setters. The only way new data can enter a store is through the callback it registers with the dispatcher.
50
-
51
-We therefore need to simulate the Flux data flow with this _one weird trick_.
52
-
53
-```javascript
54
-var mockRegister = MyDispatcher.register;
55
-var mockRegisterInfo = mockRegister.mock;
56
-var callsToRegister = mockRegisterInfo.calls;
57
-var firstCall = callsToRegister[0];
58
-var firstArgument = firstCall[0];
59
-var callback = firstArgument;
60
-```
61
-
62
-We now have the store's registered callback, the sole mechanism by which data can enter the store.
63
-
64
-For folks new to Jest, or mocks in general, it might not be entirely obvious what is happening in that code block, so let's look at each part of it a bit more closely. We start out by looking at the `register()` method of our application's dispatcher — the method that the store uses to register its callback with the dispatcher. The dispatcher has been thoroughly mocked automatically by Jest, so we can get a reference to the mocked version of the `register()` method just as we would normally refer to that method in our production code. But we can get additional information about that method with the `mock` _property_ of that method. We don't often think of methods having properties, but in Jest, this idea is vital. Every method of a mocked object has this property, and it allows us to examine how the method is being called during the test. A chronologically ordered list of calls to `register()` is available with the `calls` property of `mock`, and each of these calls has a list of the arguments that were used in each method call.
65
-
66
-So in this code, we are really saying, "Give me a reference to the first argument of the first call to MyDispatcher's `register()` method." That first argument is the store's callback, so now we have all we need to start testing. But first, we can save ourselves some semicolons and roll all of this into a single line:
67
-
68
-```javascript
69
-callback = MyDispatcher.register.mock.calls[0][0];
70
-```
71
-
72
-We can invoke that callback whenever we like, independent of our application's dispatcher or action creators. We will, in fact, fake the behavior of the dispatcher and action creators by invoking the callback with an action that we'll create directly in our test.
73
-
74
-```javascript
75
-var payload = {
76
- source: 'VIEW_ACTION',
77
- action: {
78
- actionType: TodoConstants.TODO_CREATE,
79
- text: 'foo'
80
- }
81
-};
82
-callback(payload);
83
-var all = TodoStore.getAll();
84
-var keys = Object.keys(all);
85
-expect(all[keys[0]].text).toEqual('foo');
86
-```
87
-
88
-Putting it All Together
89
-----------------------
90
-
91
-The example Flux TodoMVC application has been updated with an example test for the TodoStore, but let's look at an abbreviated version of the entire test. The most important things to notice in this test are how we keep a reference to the store's registered callback in the closure of the test, and how we recreate the store before every test so that we clear the state of the store entirely.
92
-
93
-```javascript
94
-jest.dontMock('../TodoStore');
95
-jest.dontMock('react/lib/merge');
96
-
97
-describe('TodoStore', function() {
98
-
99
- var TodoConstants = require('../../constants/TodoConstants');
100
-
101
- // mock actions inside dispatch payloads
102
- var actionTodoCreate = {
103
- source: 'VIEW_ACTION',
104
- action: {
105
- actionType: TodoConstants.TODO_CREATE,
106
- text: 'foo'
107
- }
108
- };
109
- var actionTodoDestroy = {
110
- source: 'VIEW_ACTION',
111
- action: {
112
- actionType: TodoConstants.TODO_DESTROY,
113
- id: 'replace me in test'
114
- }
115
- };
116
-
117
- var AppDispatcher;
118
- var TodoStore;
119
- var callback;
120
-
121
- beforeEach(function() {
122
- AppDispatcher = require('../../dispatcher/AppDispatcher');
123
- TodoStore = require('../TodoStore');
124
- callback = AppDispatcher.register.mock.calls[0][0];
125
- });
126
-
127
- it('registers a callback with the dispatcher', function() {
128
- expect(AppDispatcher.register.mock.calls.length).toBe(1);
129
- });
130
-
131
- it('initializes with no to-do items', function() {
132
- var all = TodoStore.getAll();
133
- expect(all).toEqual({});
134
- });
135
-
136
- it('creates a to-do item', function() {
137
- callback(actionTodoCreate);
138
- var all = TodoStore.getAll();
139
- var keys = Object.keys(all);
140
- expect(keys.length).toBe(1);
141
- expect(all[keys[0]].text).toEqual('foo');
142
- });
143
-
144
- it('destroys a to-do item', function() {
145
- callback(actionTodoCreate);
146
- var all = TodoStore.getAll();
147
- var keys = Object.keys(all);
148
- expect(keys.length).toBe(1);
149
- actionTodoDestroy.action.id = keys[0];
150
- callback(actionTodoDestroy);
151
- expect(all[keys[0]]).toBeUndefined();
152
- });
153
-
154
-});
155
-```
156
-
157
-You can take a look at all this code in the [TodoStore's tests on GitHub](https://github.com/facebook/flux/tree/master/examples/flux-todomvc/js/stores/__tests__/TodoStore-test.js) as well.
158
-
159
-
160
-Mocking Data Derived from Other Stores
161
---------------------------------------
162
-
163
-Sometimes our stores rely on data from other stores. Because all of our modules are mocked, we'll need to simulate the data that comes from the other store. We can do this by retrieving the mock function and adding a custom return value to it.
164
-
165
-```javascript
166
-var MyOtherStore = require('../MyOtherStore');
167
-MyOtherStore.getState.mockReturnValue({
168
- '123': {
169
- id: '123',
170
- text: 'foo'
171
- },
172
- '456': {
173
- id: '456',
174
- text: 'bar'
175
- }
176
-});
177
-```
178
-
179
-Now we have a collection of objects that will come back from MyOtherStore whenever we call MyOtherStore.getState() in our tests. Any application state can be simulated with a combination of these custom return values and the previously shown technique of working with the store's registered callback.
180
-
181
-A brief example of this technique is up on GitHub within the Flux Chat example's [UnreadThreadStore-test.js](https://github.com/facebook/flux/tree/master/examples/flux-chat/js/stores/__tests__/UnreadThreadStore-test.js).
182
-
183
-For more information about the `mock` property of mocked methods or Jest's ability to provide custom mock values, see Jest's documentation on [mock functions](https://facebook.github.io/jest/docs/mock-functions.html).
184
-
185
-
186
-Moving Logic from React to Stores
187
----------------------------------
188
-
189
-What often starts as a little piece of seemingly benign logic in our React components often presents a problem while creating unit tests. We want to be able to write tests that read like a specification for our application's behavior, and when application logic slips into our view layer, this becomes more difficult.
190
-
191
-For example, when a user has marked each of their to-do items as complete, the TodoMVC specification dictates that we should also change the status of the "Mark all as complete" checkbox automatically. To create that logic, we might be tempted to write code like this in our MainSection's `render()` method:
192
-
193
-```javascript
194
-var allTodos = this.props.allTodos;
195
-var allChecked = true;
196
-for (var id in allTodos) {
197
- if (!allTodos[id].complete) {
198
- allChecked = false;
199
- break;
200
- }
201
-}
202
-...
203
-
204
-return (
205
- <section id="main">
206
- <input
207
- id="toggle-all"
208
- type="checkbox"
209
- checked={allChecked ? 'checked' : ''}
210
- />
211
- ...
212
- </section>
213
-);
214
-```
215
-
216
-While this seems like an easy, normal thing to do, this is an example of application logic slipping into the views, and it can't be described in our spec-style TodoStore test. Let's take that logic and move it to the store. First, we'll create a public method on the store that will encapsulate that logic:
217
-
218
-```javascript
219
-areAllComplete: function() {
220
- for (var id in _todos) {
221
- if (!_todos[id].complete) {
222
- return false;
223
- }
224
- }
225
- return true;
226
-},
227
-```
228
-
229
-Now we have the application logic where it belongs, and we can write the following test:
230
-
231
-```javascript
232
-it('determines whether all to-do items are complete', function() {
233
- var i = 0;
234
- for (; i < 3; i++) {
235
- callback(mockTodoCreate);
236
- }
237
- expect(TodoStore.areAllComplete()).toBe(false);
238
-
239
- var all = TodoStore.getAll();
240
- for (key in all) {
241
- callback({
242
- source: 'VIEW_ACTION',
243
- action: {
244
- actionType: TodoConstants.TODO_COMPLETE,
245
- id: key
246
- }
247
- });
248
- }
249
- expect(TodoStore.areAllComplete()).toBe(true);
250
-
251
- callback({
252
- source: 'VIEW_ACTION',
253
- action: {
254
- actionType: TodoConstants.TODO_UNDO_COMPLETE,
255
- id: key
256
- }
257
- });
258
- expect(TodoStore.areAllComplete()).toBe(false);
259
-});
260
-```
261
-
262
-Finally, we revise our view layer. We'll call for that data in the controller-view, TodoApp.js, and pass it down to the MainSection component.
263
-
264
-```javascript
265
-function getTodoState() {
266
- return {
267
- allTodos: TodoStore.getAll(),
268
- areAllComplete: TodoStore.areAllComplete()
269
- };
270
-}
271
-
272
-var TodoApp = React.createClass({
273
-...
274
-
275
- /**
276
- * @return {object}
277
- */
278
- render: function() {
279
- return (
280
- ...
281
- <MainSection
282
- allTodos={this.state.allTodos}
283
- areAllComplete={this.state.areAllComplete}
284
- />
285
- ...
286
- );
287
- },
288
-
289
- /**
290
- * Event handler for 'change' events coming from the TodoStore
291
- */
292
- _onChange: function() {
293
- this.setState(getTodoState());
294
- }
295
-
296
-});
297
-```
298
-
299
-And then we'll utilize that property for the rendering of the checkbox.
300
-
301
-```javascript
302
-render: function() {
303
- ...
304
-
305
- return (
306
- <section id="main">
307
- <input
308
- id="toggle-all"
309
- type="checkbox"
310
- checked={this.props.areAllComplete ? 'checked' : ''}
311
- />
312
- ...
313
- </section>
314
- );
315
-},
316
-```
317
-
318
-To learn how to test React components themselves, check out the [Jest tutorial for React](https://facebook.github.io/jest/docs/tutorial-react.html) and the [ReactTestUtils documentation](/docs/test-utils.html).
319
-
320
-
321
-Further Reading
322
----------------
323
-
324
-- [Mocks Aren't Stubs](http://martinfowler.com/articles/mocksArentStubs.html) by Martin Fowler
325
-- [Jest API Reference](https://facebook.github.io/jest/docs/api.html)
docs/_posts/2014-10-14-introducing-react-elements.md
deleted
-222
@@ -1,222 +0,0 @@
1
----
2
-title: "Introducing React Elements"
3
-author: [sebmarkbage]
4
-redirect_from: "blog/2014/10/14/introducting-react-elements.html"
5
----
6
-
7
-The upcoming React 0.12 tweaks some APIs to get us close to the final 1.0 API. This release is all about setting us up for making the `ReactElement` type really FAST, [jest unit testing](https://facebook.github.io/jest/) easier, making classes simpler (in preparation for ES6 classes) and better integration with third-party languages!
8
-
9
-If you currently use JSX everywhere, you don't really have to do anything to get these benefits! The updated transformer will do it for you.
10
-
11
-If you can't or don't want to use JSX, then please insert some hints for us. Add a `React.createFactory` call around your imported class when you require it:
12
-
13
-```javascript
14
-var MyComponent = React.createFactory(require('MyComponent'));
15
-```
16
-
17
-Everything is backwards compatible for now, and as always React will provide you with descriptive console messaging to help you upgrade.
18
-
19
-`ReactElement` is the primary API of React. Making it faster has shown to give us several times faster renders on common benchmarks. The API tweaks in this release helps us get there.
20
-
21
-Continue reading if you want all the nitty gritty details...
22
-
23
-
24
-## New Terminology
25
-
26
-We wanted to make it easier for new users to see the parallel with the DOM (and why React is different). To align our terminology we now use the term `ReactElement` instead of _descriptor_. Likewise, we use the term `ReactNode` instead of _renderable_.
27
-
28
-[See the full React terminology guide.](https://gist.github.com/sebmarkbage/fcb1b6ab493b0c77d589)
29
-
30
-## Creating a ReactElement
31
-
32
-We now expose an external API for programmatically creating a `ReactElement` object.
33
-
34
-```javascript
35
-var reactElement = React.createElement(type, props, children);
36
-```
37
-
38
-The `type` argument is either a string (HTML tag) or a class. It's a description of what tag/class is going to be rendered and what props it will contain. You can also create factory functions for specific types. This basically just provides the type argument for you:
39
-
40
-```javascript
41
-var div = React.createFactory('div');
42
-var reactDivElement = div(props, children);
43
-```
44
-
45
-
46
-## Deprecated: Auto-generated Factories
47
-
48
-Imagine if `React.createClass` was just a plain JavaScript class. If you call a class as a plain function you would call the component's constructor to create a Component instance, not a `ReactElement`:
49
-
50
-```javascript
51
-new MyComponent(); // Component, not ReactElement
52
-```
53
-
54
-React 0.11 gave you a factory function for free when you called `React.createClass`. This wrapped your internal class and then returned a `ReactElement` factory function for you.
55
-
56
-```javascript
57
-var MyComponent = React.createFactory(
58
- class {
59
- render() {
60
- ...
61
- }
62
- }
63
-);
64
-```
65
-
66
-In future versions of React, we want to be able to support pure classes without any special React dependencies. To prepare for that we're [deprecating the auto-generated factory](https://gist.github.com/sebmarkbage/d7bce729f38730399d28).
67
-
68
-This is the biggest change to 0.12. Don't worry though. This functionality continues to work the same for this release, it just warns you if you're using a deprecated API. That way you can upgrade piece-by-piece instead of everything at once.
69
-
70
-
71
-## Upgrading to 0.12
72
-
73
-### React With JSX
74
-
75
-If you use the React specific [JSX](https://facebook.github.io/jsx/) transform, the upgrade path is simple. Just make sure you have React in scope.
76
-
77
-```javascript
78
-// If you use node/browserify modules make sure
79
-// that you require React into scope.
80
-var React = require('react');
81
-```
82
-
83
-React's JSX will create the `ReactElement` for you. You can continue to use JSX with regular classes:
84
-
85
-```javascript
86
-var MyComponent = React.createClass(...);
87
-
88
-var MyOtherComponent = React.createClass({
89
- render: function() {
90
- return <MyComponent prop="value" />;
91
- }
92
-});
93
-```
94
-
95
-*NOTE: React's JSX will not call arbitrary functions in future releases. This restriction is introduced so that it's easier to reason about the output of JSX by both the reader of your code and optimizing compilers. The JSX syntax is not tied to React. Just the transpiler. You can still use [the JSX spec](https://facebook.github.io/jsx/) with a different transpiler for custom purposes.*
96
-
97
-### React Without JSX
98
-
99
-If you don't use JSX and just call components as functions, you will need to explicitly create a factory before calling it:
100
-
101
-```javascript
102
-var MyComponentClass = React.createClass(...);
103
-
104
-var MyComponent = React.createFactory(MyComponentClass); // New step
105
-
106
-var MyOtherComponent = React.createClass({
107
- render: function() {
108
- return MyComponent({ prop: 'value' });
109
- }
110
-});
111
-```
112
-
113
-If you're using a module system, the recommended solution is to export the class and create the factory on the requiring side.
114
-
115
-Your class creation is done just like before:
116
-
117
-```javascript
118
-// MyComponent.js
119
-var React = require('react');
120
-var MyComponent = React.createClass(...);
121
-module.exports = MyComponent;
122
-```
123
-
124
-The other side uses `React.createFactory` after `require`ing the component class:
125
-
126
-```javascript
127
-// MyOtherComponent.js
128
-var React = require('react');
129
-// All you have to do to upgrade is wrap your requires like this:
130
-var MyComponent = React.createFactory(require('MyComponent'));
131
-
132
-var MyOtherComponent = React.createClass({
133
- render: function() {
134
- return MyComponent({ prop: 'value' });
135
- }
136
-});
137
-
138
-module.exports = MyOtherComponent;
139
-```
140
-
141
-You ONLY have to do this for custom classes. React still has built-in factories for common HTML elements.
142
-
143
-```javascript
144
-var MyDOMComponent = React.createClass({
145
- render: function() {
146
- return React.DOM.div({ className: 'foo' }); // still ok
147
- }
148
-});
149
-```
150
-
151
-We realize that this is noisy. At least it's on the top of the file (out of sight, out of mind). This a tradeoff we had to make to get [the other benefits](https://gist.github.com/sebmarkbage/d7bce729f38730399d28) that this model unlocks.
152
-
153
-### Anti-Pattern: Exporting Factories
154
-
155
-If you have an isolated project that only you use, then you could create a helper that creates both the class and the factory at once:
156
-
157
-```javascript
158
-// Anti-pattern - Please, don't use
159
-function createClass(spec) {
160
- return React.createFactory(React.createClass(spec));
161
-}
162
-```
163
-
164
-This makes your components incompatible with jest testing, consumers using JSX, third-party languages that implement their own optimized `ReactElement` creation, etc.
165
-
166
-It also encourages you to put more logic into these helper functions. Something that another language, a compiler or a reader of your code couldn't reason about.
167
-
168
-To fit into the React ecosystem we recommend that you always export pure classes from your shared modules and let the consumer decide the best strategy for generating `ReactElement`s.
169
-
170
-
171
-## Third-party Languages
172
-
173
-The signature of a `ReactElement` is something like this:
174
-
175
-```javascript
176
-{
177
- type : string | class,
178
- props : { children, className, etc. },
179
- key : string | boolean | number | null,
180
- ref : string | null
181
-}
182
-```
183
-
184
-Languages with static typing that don't need validation (e.g. [Om in ClojureScript](https://github.com/swannodette/om)), and production level compilers will be able to generate these objects inline instead of going through the validation step. This optimization will allow significant performance improvements in React.
185
-
186
-
187
-## Your Thoughts and Ideas
188
-
189
-We'd love to hear your feedback on this API and your preferred style. A plausible alternative could be to directly inline objects instead of creating factory functions:
190
-
191
-```javascript
192
-// MyOtherComponent.js
193
-var React = require('react');
194
-var MyComponent = require('MyComponent');
195
-
196
-var MyOtherComponent = React.createClass({
197
- render: function() {
198
- return { type: MyComponent, props: { prop: 'value' } };
199
- }
200
-});
201
-
202
-module.exports = MyOtherComponent;
203
-```
204
-
205
-This moves the noise down into the render method though. It also doesn't provide a hook for dynamic validation/type checking so you'll need some other way to verify that it's safe.
206
-
207
-*NOTE: This won't work in this version of React because it's conflicting with other legacy APIs that we're deprecating. (We temporarily add a `element._isReactElement = true` marker on the object.)*
208
-
209
-
210
-## The Next Step: ES6 Classes
211
-
212
-After 0.12 we'll begin work on moving to ES6 classes. We will still support `React.createClass` as a backwards compatible API. If you use an ES6 transpiler you will be able to declare your components like this:
213
-
214
-```javascript
215
-export class MyComponent {
216
- render() {
217
- ...
218
- }
219
-};
220
-```
221
-
222
-This upcoming release is a stepping stone to make it as easy as this. Thanks for your support.
docs/_posts/2014-10-16-react-v0.12-rc1.md
deleted
-150
@@ -1,150 +0,0 @@
1
----
2
-title: "React v0.12 RC"
3
-author: [sebmarkbage]
4
----
5
-
6
-We are finally ready to share the work we've been doing over the past couple months. A lot has gone into this and we want to make sure we iron out any potential issues before we make this final. So, we're shipping a Release Candidate for React v0.12 today. If you get a chance, please give it a try and report any issues you find! A full changelog will accompany the final release but we've highlighted the interesting and breaking changes below.
7
-
8
-
9
-The release candidate is available for download:
10
-
11
-* **React**
12
- Dev build with warnings: <https://fb.me/react-0.12.0-rc1.js>
13
- Minified build for production: <https://fb.me/react-0.12.0-rc1.min.js>
14
-* **React with Add-Ons**
15
- Dev build with warnings: <https://fb.me/react-with-addons-0.12.0-rc1.js>
16
- Minified build for production: <https://fb.me/react-with-addons-0.12.0-rc1.min.js>
17
-* **In-Browser JSX transformer**
18
- <https://fb.me/JSXTransformer-0.12.0-rc1.js>
19
-
20
-We've also published version `0.12.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
21
-
22
-
23
-## React Elements
24
-
25
-The biggest conceptual change we made in v0.12 is the move to React Elements. [We talked about this topic in depth earlier this week](/blog/2014/10/14/introducting-react-elements.html). If you haven't already, you should read up on the exciting changes in there!
26
-
27
-
28
-## JSX Changes
29
-
30
-Earlier this year we decided to write [a specification for JSX](https://facebook.github.io/jsx/). This has allowed us to make some changes focused on the React specific JSX and still allow others to innovate in the same space.
31
-
32
-
33
-### The `@jsx` Pragma is Gone!
34
-
35
-We have wanted to do this since before we even open sourced React. No more `/** @jsx React.DOM */`!. The React specific JSX transform assumes you have `React` in scope (which had to be true before anyway).
36
-
37
-`JSXTransformer` and `react-tools` have both been updated to account for this.
38
-
39
-
40
-### JSX for Function Calls is No Longer Supported
41
-
42
-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](/blog/2014/10/14/introducting-react-elements.html).
43
-
44
-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.
45
-
46
-
47
-### JSX Lower-case Convention
48
-
49
-We used to have a whitelist of HTML tags that got special treatment in JSX. However as new HTML tags got added to the spec, or we added support for more SVG tags, we had to go update our whitelist. Additionally, there was ambiguity about the behavior. There was always the chance that something new added to the tag list would result in breaking your code. For example:
50
-
51
-```javascript
52
-return <component />;
53
-```
54
-
55
-Is `component` an existing HTML tag? What if it becomes one?
56
-
57
-To address this, we decided on a convention: __All JSX tags that start with a lower-case letter or contain a dash are treated as HTML.__
58
-
59
-This means that you no longer have to wait for us to upgrade JSX to use new tags. This also introduces the possibility to consume custom elements (Web Components) - although custom attributes are not yet fully supported.
60
-
61
-Currently we still use the whitelist as a sanity check. The transform will fail when it encounters an unknown tag. This allows you to update your code without hitting errors in production.
62
-
63
-In addition, the HTML tags are converted to strings instead of using `React.DOM` directly. `<div/>` becomes `React.createElement('div')` instead of `React.DOM.div()`.
64
-
65
-
66
-### JSX Spread Attributes
67
-
68
-Previously there wasn't a way to for you to pass a dynamic or unknown set of properties through JSX. This is now possible using the spread `...` operator.
69
-
70
-```javascript
71
-var myProps = { a: 1, b: 2 };
72
-return <MyComponent {...myProps} />;
73
-```
74
-
75
-This merges the properties of the object onto the props of `MyComponent`.
76
-
77
-[Read More About Spread Attributes](https://gist.github.com/sebmarkbage/07bbe37bc42b6d4aef81)
78
-
79
-If you used to use plain function calls to pass arbitrary props objects...
80
-
81
-```javascript
82
-return MyComponent(myProps);
83
-```
84
-
85
-You can now switch to using Spread Attributes instead:
86
-
87
-```javascript
88
-return <MyComponent {...myProps} />;
89
-```
90
-
91
-
92
-## Breaking Change: `key` and `ref` Removed From `this.props`
93
-
94
-The props `key` and `ref` were already reserved property names. This turned out to be difficult to explicitly statically type since any object can accept these extra props. It also screws up JIT optimizations of React internals in modern VMs.
95
-
96
-These are concepts that React manages from outside the Component before it even gets created so it shouldn't be part of the props.
97
-
98
-We made this distinction clearer by moving them off the props object and onto the `ReactElement` itself. This means that you need to rename:
99
-
100
-`someElement.props.key` -> `someElement.key`
101
-
102
-You can no longer access `this.props.ref` and `this.props.key` from inside the Component instance itself. So you need to use a different name for those props.
103
-
104
-You do NOT need to change the way to define `key` and `ref`, only if you need to read it. E.g. `<div key="my-key" />` and `div({ key: 'my-key' })` still works.
105
-
106
-
107
-## Breaking Change: Default Props Resolution
108
-
109
-This is a subtle difference but `defaultProps` are now resolved at `ReactElement` creation time instead of when it's mounted. This is means that we can avoid allocating an extra object for the resolved props.
110
-
111
-You will primarily see this breaking if you're also using `transferPropsTo`.
112
-
113
-
114
-## Deprecated: transferPropsTo
115
-
116
-`transferPropsTo` is deprecated in v0.12 and will be removed in v0.13. This helper function was a bit magical. It auto-merged a certain whitelist of properties and excluded others. It was also transferring too many properties. This meant that we have to keep a whitelist of valid HTML attributes in the React runtime. It also means that we can't catch typos on props.
117
-
118
-Our suggested solution is to use the Spread Attributes.
119
-
120
-```javascript
121
-return <div {...this.props} />;
122
-```
123
-
124
-Or, just if you're not using JSX:
125
-
126
-```javascript
127
-return div(this.props);
128
-```
129
-
130
-Although to avoid passing too many props down, you'll probably want to use something like ES7 rest properties. [Read more about upgrading from transferPropsTo](https://gist.github.com/sebmarkbage/a6e220b7097eb3c79ab7).
131
-
132
-
133
-## Deprecated: Returning `false` in Event Handlers
134
-
135
-It used to be possible to return `false` from event handlers to preventDefault. We did this because this works in most browsers. This is a confusing API and we might want to use the return value for something else. Therefore, this is deprecated. Use `event.preventDefault()` instead.
136
-
137
-
138
-## Renamed APIs
139
-
140
-As part of the [new React terminology](https://gist.github.com/sebmarkbage/fcb1b6ab493b0c77d589) we aliased some existing APIs to use the new naming convention:
141
-
142
-- `React.renderComponent` -> `React.render`
143
-- `React.renderComponentToString` -> `React.renderToString`
144
-- `React.renderComponentToStaticMarkup` -> `React.renderToStaticMarkup`
145
-- `React.isValidComponent` -> `React.isValidElement`
146
-- `React.PropTypes.component` -> `React.PropTypes.element`
147
-- `React.PropTypes.renderable` -> `React.PropTypes.node`
148
-
149
-The older APIs will log a warning but work the same. They will be removed in v0.13.
150
-
docs/_posts/2014-10-17-community-roundup-23.md
deleted
-151
@@ -1,151 +0,0 @@
1
----
2
-title: "Community Round-up #23"
3
-layout: post
4
-author: [LoukaN]
5
----
6
-
7
-This round-up is a special edition on [Flux](https://facebook.github.io/flux/). If you expect to see diagrams showing arrows that all point in the same direction, you won't be disappointed!
8
-
9
-## React And Flux at ForwardJS
10
-
11
-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.
12
-
13
-<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe>
14
-
15
-# Yahoo
16
-
17
-Yahoo is converting Yahoo Mail to React and Flux and in the process, they open sourced several components. This will help you get an isomorphic application up and running.
18
-
19
-- [Flux Router Component](https://github.com/yahoo/flux-router-component)
20
-- [Dispatchr](https://github.com/yahoo/dispatchr)
21
-- [Fetchr](https://github.com/yahoo/fetchr)
22
-- [Flux Examples](https://github.com/yahoo/flux-examples)
23
-
24
-
25
-## Reflux
26
-
27
-[Mikael Brassman](https://spoike.ghost.io/) wrote [Reflux](https://github.com/spoike/refluxjs), a library that implements Flux concepts. Note that it diverges significantly from the way we use Flux at Facebook. He explains [the reasons why in a blog post](https://spoike.ghost.io/deconstructing-reactjss-flux/).
28
-
29
-<center>
30
-<a href="https://spoike.ghost.io/deconstructing-reactjss-flux/"><img src="../img/blog/reflux-flux.png" width="400" /></a>
31
-</center>
32
-
33
-
34
-## React and Flux Interview
35
-
36
-[Ian Obermiller](http://ianobermiller.com/), engineer at Facebook, [made a lengthy interview](http://ianobermiller.com/blog/2014/09/15/react-and-flux-interview/) on the experience of using React and Flux in order to build probably the biggest React application ever written so far.
37
-
38
-> I’ve actually said this many times to my team too, I love React. It’s really great for making these complex applications. One thing that really surprised me with it is that React combined with a sane module system like CommonJS, and making sure that you actually modulize your stuff properly has scaled really well to a team of almost 10 developers working on hundreds of files and tens of thousands of lines of code.
39
->
40
-> Really, a fairly large code base... stuff just works. You don’t have to worry about mutating, and the state of the DOM just really makes stuff easy. Just conceptually it’s easier just to think about here’s what I have, here’s my data, here’s how it renders, I don’t care about anything else. For most cases that is really simplifying and makes it really fast to do stuff.
41
->
42
-> [Read the full interview...](http://ianobermiller.com/blog/2014/09/15/react-and-flux-interview/)
43
-
44
-
45
-## Adobe's Brackets Project Tree
46
-
47
-[Kevin Dangoor](http://www.kevindangoor.com/) is converting the project tree of [Adobe's Bracket text editor](http://brackets.io/) to React and Flux. He wrote about his experience [using Flux](http://www.kevindangoor.com/2014/09/intro-to-the-new-brackets-project-tree/).
48
-
49
-<center>
50
-<a href="http://www.kevindangoor.com/2014/09/intro-to-the-new-brackets-project-tree/"><img src="../img/blog/flux-diagram.png" width="400" /></a>
51
-</center>
52
-
53
-
54
-## Async Requests with Flux Revisited
55
-
56
-[Reto Schläpfer](http://www.code-experience.com/the-code-experience/) came back to a Flux project he hasn't worked on for a month and [saw many ways to improve the way he implemented Flux](http://www.code-experience.com/async-requests-with-react-js-and-flux-revisited/). He summarized his learnings in a blog post.
57
-
58
-> The smarter way is to call the Web Api directly from an Action Creator and then make the Api dispatch an event with the request result as a payload. The Store(s) can choose to listen on those request actions and change their state accordingly.
59
->
60
-> Before I show some updated code snippets, let me explain why this is superior:
61
->
62
-> - There should be only one channel for all state changes: The Dispatcher. This makes debugging easy because it just requires a single console.log in the dispatcher to observe every single state change trigger.
63
->
64
-> - Asynchronously executed callbacks should not leak into Stores. The consequences of it are just too hard to fully foresee. This leads to elusive bugs. Stores should only execute synchronous code. Otherwise they are too hard to understand.
65
->
66
-> - Avoiding actions firing other actions makes your app simple. We use the newest Dispatcher implementation from Facebook that does not allow a new dispatch while dispatching. It forces you to do things right.
67
->
68
-> [Read the full article...](http://www.code-experience.com/async-requests-with-react-js-and-flux-revisited/)
69
-
70
-
71
-## Undo-Redo with Immutable Data Structures
72
-
73
-[Ameya Karve](https://github.com/ameyakarve) explained how to use [Mori](https://github.com/swannodette/mori), a library that provides immutable data structures, in order to [implement undo-redo](http://ameyakarve.com/jekyll/update/2014/02/06/Undo-React-Flux-Mori.html). This usually very challenging feature only takes a few lines of code with Flux!
74
-
75
-```javascript
76
-undo: function() {
77
- this.redoStates = Mori.conj(this.redoStates, Mori.first(this.undoStates));
78
- this.undoStates = Mori.drop(1, this.undoStates);
79
- this.todosState = Mori.first(this.undoStates);
80
- this.canUndo = Mori.count(this.undoStates) > 1;
81
- this.canRedo = true;
82
- if (Mori.count(this.undoStates) > 1) {
83
- this.todos = JSON.parse(this.todosState);
84
- } else {
85
- this.todos = [];
86
- }
87
- this.emit('change');
88
-},
89
-```
90
-
91
-
92
-## Flux in practice
93
-
94
-[Gary Chambers](https://twitter.com/garychambers108) wrote a [guide to get started with Flux](https://medium.com/@garychambers108/flux-in-practice-ec08daa9041a). This is a very practical introduction to Flux.
95
-
96
-> So, what does it actually mean to write an application in the Flux way? At that moment of inspiration, when faced with an empty text editor, how should you begin? This post follows the process of building a Flux-compliant application from scratch.
97
->
98
-> [Read the full guide...](https://medium.com/@garychambers108/flux-in-practice-ec08daa9041a)
99
-
100
-
101
-## Components, React and Flux
102
-
103
-[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.
104
-
105
-<iframe src="//slides.com/danabramov/components-react-flux-wip/embed" width="100%" height="315" scrolling="no" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
106
-
107
-
108
-## React and Flux
109
-
110
-[Christian Alfoni](https://github.com/christianalfoni) wrote an article where [he compares Backbone, Angular and Flux](https://christianalfoni.github.io/javascript/2014/08/20/react-js-and-flux.html) on a simple example that's representative of a real project he worked on.
111
-
112
-> Wow, that was a bit more code! Well, try to think of it like this. In the above examples, if we were to do any changes to the application we would probably have to move things around. In the FLUX example we have considered that from the start.
113
->
114
-> Any changes to the application is adding, not moving things around. If you need a new store, just add it and make components dependant of it. If you need more views, create a component and use it inside any other component without affecting their current "parent controller or models".
115
->
116
-> [Read the full article...](https://christianalfoni.github.io/javascript/2014/08/20/react-js-and-flux.html)
117
-
118
-
119
-
120
-## Flux: Step by Step approach
121
-
122
-[Nicola Paolucci](https://github.com/durdn) from Atlassian wrote a great guide to help your getting understand [Flux step by step](https://blogs.atlassian.com/2014/08/flux-architecture-step-by-step/).
123
-
124
-<center>
125
-<a href="https://blogs.atlassian.com/2014/08/flux-architecture-step-by-step/"><img src="../img/blog/flux-chart.png" width="400" /></a>
126
-</center>
127
-
128
-
129
-## DeLorean: Back to the future!
130
-
131
-[DeLorean](https://github.com/deloreanjs/delorean) is a tiny Flux pattern implementation developed by [Fatih Kadir Akin](https://github.com/f).
132
-
133
-> - Unidirectional data flow, it makes your app logic simpler than MVC
134
-> - Automatically listens to data changes and keeps your data updated
135
-> - Makes data more consistent across your whole application
136
-> - It's framework agnostic, completely. There's no view framework dependency
137
-> - Very small, just 4K gzipped
138
-> - Built-in React.js integration, easy to use with Flight.js and Ractive.js and probably all others
139
-> - Improve your UI/data consistency using rollbacks
140
-
141
-
142
-## Facebook's iOS Infrastructure
143
-
144
-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.
145
-
146
-<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/XhXC4SKOGfQ" frameborder="0" allowfullscreen></iframe>
147
-
148
-
149
-## Random Tweet
150
-
151
-<blockquote class="twitter-tweet" lang="en"><p>If you build your app with flux, you can swap out React for a canvas or svg view layer and keep 85% of your code. (or the thing after React)</p>— Ryan Florence (@ryanflorence) <a href="https://twitter.com/ryanflorence/status/507309645372076034">September 3, 2014</a></blockquote>
docs/_posts/2014-10-27-react-js-conf.md
deleted
-15
@@ -1,15 +0,0 @@
1
----
2
-title: React.js Conf
3
-author: [vjeux]
4
----
5
-
6
-Every few weeks someone asks us when we are going to organize a conference for React. Our answer has always been "some day". In the mean time, people have been talking about React at other JavaScript conferences around the world. But now the time has finally come for us to have a conference of our own.
7
-
8
-**We're happy to announce [React.js Conf](http://conf.reactjs.com/)! It will take place January 28-29, 2015 on Facebook's campus in Menlo Park, California.**
9
-
10
-Before we open registration, [we're looking for great talks](http://conf.reactjs.com/call-for-presenters.html). We want to see how you pushed application development forward! If you ever talked to a meet-up, pitched React to your co-workers, or done something awesome and want to talk about it, let us know!
11
-
12
-Here are some areas of research we want to explore during the conference if you need some inspiration: server-side rendering, data fetching, language features (eg es6, clojure), immutability, rendering targets (eg svg, canvas), real-time updates...
13
-
14
-We look forward to seeing many of you in person in just a few short months!
15
-
docs/_posts/2014-10-28-react-v0.12.md
deleted
-127
@@ -1,127 +0,0 @@
1
----
2
-title: React v0.12
3
-author: [zpao]
4
----
5
-
6
-We're happy to announce the availability of React v0.12! After over a week of baking as the release candidate, we uncovered and fixed a few small issues. Thanks to all of you who upgraded and gave us feedback!
7
-
8
-We have talked a lot about some of the bigger changes in this release. [We introduced new terminology](/blog/2014/10/14/introducing-react-elements.html) and changed APIs to clean up and simplify some of the concepts of React. [We also made several changes to JSX](/blog/2014/10/16/react-v0.12-rc1.html) and deprecated a few functions. We won't go into depth about these changes again but we encourage you to read up on these changes in the linked posts. We'll summarize these changes and discuss some of the other changes and how they may impact you below. As always, a full changelog is also included below.
9
-
10
-
11
-The release is available for download:
12
-
13
-* **React**
14
- Dev build with warnings: <https://fb.me/react-0.12.0.js>
15
- Minified build for production: <https://fb.me/react-0.12.0.min.js>
16
-* **React with Add-Ons**
17
- Dev build with warnings: <https://fb.me/react-with-addons-0.12.0.js>
18
- Minified build for production: <https://fb.me/react-with-addons-0.12.0.min.js>
19
-* **In-Browser JSX transformer**
20
- <https://fb.me/JSXTransformer-0.12.0.js>
21
-
22
-We've also published version `0.12.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
23
-
24
-## New Terminology & Updated APIs
25
-
26
-v0.12 is bringing about some new terminology. [We introduced](/blog/2014/10/14/introducing-react-elements.html) this 2 weeks ago and we've also documented it in [a new section of the documentation](/docs/glossary.html). As a part of this, we also corrected many of our top-level APIs to align with the terminology. `Component` has been removed from all of our `React.render*` methods. While at one point the argument you passed to these functions was called a Component, it no longer is. You are passing ReactElements. To align with `render` methods in your component classes, we decided to keep the top-level functions short and sweet. `React.renderComponent` is now `React.render`.
27
-
28
-We also corrected some other misnomers. `React.isValidComponent` actually determines if the argument is a ReactElement, so it has been renamed to `React.isValidElement`. In the same vein, `React.PropTypes.component` is now `React.PropTypes.element` and `React.PropTypes.renderable` is now `React.PropTypes.node`.
29
-
30
-The old methods will still work but will warn upon first use. They will be removed in v0.13.
31
-
32
-## JSX Changes
33
-
34
-[We talked more in depth about these before](/blog/2014/10/16/react-v0.12-rc1.html#jsx-changes), so here are the highlights.
35
-
36
-* No more `/** @jsx React.DOM */`!
37
-* We no longer transform to a straight function call. `<Component/>` now becomes `React.createElement(Component)`
38
-* DOM components don't make use of `React.DOM`, instead we pass the tag name directly. `<div/>` becomes `React.createElement('div')`
39
-* We introduced spread attributes as a quick way to transfer props.
40
-
41
-## DevTools Improvements, No More `__internals`
42
-
43
-For months we've gotten complaints about the React DevTools message. It shouldn't have logged the up-sell message when you were already using the DevTools. Unfortunately this was because the way we implemented these tools resulted in the DevTools knowing about React, but not the reverse. We finally gave this some attention and enabled React to know if the DevTools are installed. We released an update to the devtools several weeks ago making this possible. Extensions in Chrome should auto-update so you probably already have the update installed!
44
-
45
-As a result of this update, we no longer need to expose several internal modules to the world. If you were taking advantage of this implementation detail, your code will break. `React.__internals` is no more.
46
-
47
-## License Change - BSD
48
-
49
-We updated the license on React to the BSD 3-Clause license with an explicit patent grant. Previously we used the Apache 2 license. These licenses are very similar and our extra patent grant is equivalent to the grant provided in the Apache license. You can still use React with the confidence that we have granted the use of any patents covering it. This brings us in line with the same licensing we use across the majority of our open source projects at Facebook.
50
-
51
-You can read the full text of the [LICENSE](https://github.com/facebook/react/blob/master/LICENSE) and [`PATENTS`](https://github.com/facebook/react/blob/master/PATENTS) files on GitHub.
52
-
53
-- - -
54
-
55
-## Changelog
56
-
57
-### React Core
58
-
59
-#### Breaking Changes
60
-
61
-* `key` and `ref` moved off props object, now accessible on the element directly
62
-* React is now BSD licensed with accompanying Patents grant
63
-* Default prop resolution has moved to Element creation time instead of mount time, making them effectively static
64
-* `React.__internals` is removed - it was exposed for DevTools which no longer needs access
65
-* Composite Component functions can no longer be called directly - they must be wrapped with `React.createFactory` first. This is handled for you when using JSX.
66
-
67
-#### New Features
68
-
69
-* Spread operator (`{...}`) introduced to deprecate `this.transferPropsTo`
70
-* Added support for more HTML attributes: `acceptCharset`, `classID`, `manifest`
71
-
72
-#### Deprecations
73
-
74
-* `React.renderComponent` --> `React.render`
75
-* `React.renderComponentToString` --> `React.renderToString`
76
-* `React.renderComponentToStaticMarkup` --> `React.renderToStaticMarkup`
77
-* `React.isValidComponent` --> `React.isValidElement`
78
-* `React.PropTypes.component` --> `React.PropTypes.element`
79
-* `React.PropTypes.renderable` --> `React.PropTypes.node`
80
-* **DEPRECATED** `React.isValidClass`
81
-* **DEPRECATED** `instance.transferPropsTo`
82
-* **DEPRECATED** Returning `false` from event handlers to preventDefault
83
-* **DEPRECATED** Convenience Constructor usage as function, instead wrap with `React.createFactory`
84
-* **DEPRECATED** use of `key={null}` to assign implicit keys
85
-
86
-#### Bug Fixes
87
-
88
-* Better handling of events and updates in nested results, fixing value restoration in "layered" controlled components
89
-* Correctly treat `event.getModifierState` as case sensitive
90
-* Improved normalization of `event.charCode`
91
-* Better error stacks when involving autobound methods
92
-* Removed DevTools message when the DevTools are installed
93
-* Correctly detect required language features across browsers
94
-* Fixed support for some HTML attributes:
95
- * `list` updates correctly now
96
- * `scrollLeft`, `scrollTop` removed, these should not be specified as props
97
-* Improved error messages
98
-
99
-### React With Addons
100
-
101
-#### New Features
102
-
103
-* `React.addons.batchedUpdates` added to API for hooking into update cycle
104
-
105
-#### Breaking Changes
106
-
107
-* `React.addons.update` uses `assign` instead of `copyProperties` which does `hasOwnProperty` checks. Properties on prototypes will no longer be updated correctly.
108
-
109
-#### Bug Fixes
110
-
111
-* Fixed some issues with CSS Transitions
112
-
113
-### JSX
114
-
115
-#### Breaking Changes
116
-
117
-* Enforced convention: lower case tag names are always treated as HTML tags, upper case tag names are always treated as composite components
118
-* JSX no longer transforms to simple function calls
119
-
120
-#### New Features
121
-
122
-* `@jsx React.DOM` no longer required
123
-* spread (`{...}`) operator introduced to allow easier use of props
124
-
125
-#### Bug Fixes
126
-
127
-* JSXTransformer: Make sourcemaps an option when using APIs directly (eg, for react-rails)
docs/_posts/2014-11-24-react-js-conf-updates.md
deleted
-39
@@ -1,39 +0,0 @@
1
----
2
-title: React.js Conf Updates
3
-author: [vjeux]
4
----
5
-
6
-Yesterday was the [React.js Conf](http://conf.reactjs.com/index.html) call for presenters submission deadline. We were
7
-surprised to have received a total of **one hundred talk proposals** and were
8
-amazed that 600 people requested to be notified when ticket go on sale. This is incredible!
9
-
10
-When we organized the conference, we decided to start small since this is the
11
-first React.js conference. Also, we weren't sure what level of demand to expect,
12
-so we planned for a single-track, two-day conference on Facebook's campus. The
13
-largest room available would accommodate 18 speaking slots and 200 attendees.
14
-The spacial configuration makes it difficult to add a second track and changing
15
-venues only two months in advance would be too difficult, so we are deciding to
16
-stick with the originally planned format and venue on Facebook's campus.
17
-
18
-Unfortunately, this means that we can only accept a small number of the awesome
19
-conference talk proposals. In order to make sure attendees get a fair shot at
20
-registering, we're going to sell tickets in three separate first-come,
21
-first-serve phases. **Tickets will cost $200 regardless of which phase they are
22
-purchased from and all proceeds will go to charity**.
23
-
24
-- Friday November 28th 2014 — Noon PST: First wave of tickets
25
-- Friday December 5th 2014 — Noon PST: Second wave of tickets
26
-- Friday December 12th 2014 — Noon PST: Third and last wave of tickets
27
-
28
-We really do wish that everyone could attend React.js Conf, but in order to
29
-ensure a quality experience for those who attend, we feel it will be best to
30
-limit the size of the conference to what was originally planned for. This means
31
-that not everyone who wants to attend will be able to, and many talks that
32
-would be excellent contributions to the conference will have to be postponed
33
-until the next conference. All the talks will be recorded and put online shortly after.
34
-
35
-We hope to see many of you at React.js Conf this January.
36
-
37
-Sincerely,
38
-
39
-React Core Team
docs/_posts/2014-11-25-community-roundup-24.md
deleted
-97
@@ -1,97 +0,0 @@
1
----
2
-title: "Community Round-up #24"
3
-layout: post
4
-author: [steveluscher]
5
----
6
-
7
-## Keep it Simple
8
-
9
-Pedro Nauck ([pedronauck](https://github.com/pedronauck)) delivered an impeccably illustrated deck at Brazil's _Front in Floripa_ conference. Watch him talk about how to keep delivering value as your app scales, by keeping your development process simple.
10
-
11
-<script async class="speakerdeck-embed" data-id="44129b9054c901328b89221e99b278fe" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script>
12
-
13
-Murilo Pereira ([mpereira](https://github.com/mpereira)) tussles with the topic of complexity in this blog post about [coping with scaling up](http://www.techsonian.net/2014/09/from-backbone-to-react-our-experience-scaling-a-web-application/), where he describes how his team used React to make possible the “nearly impossible.”
14
-
15
-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.
16
-
17
-<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/rI0GQc__0SM" frameborder="0" allowfullscreen></iframe>
18
-
19
-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.
20
-
21
-<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/m2fuO2wl_3c" frameborder="0" allowfullscreen></iframe>
22
-
23
-## All About Isomorphism
24
-
25
-Michael Ridgway ([mridgway](https://github.com/mridgway)) shows us how Yahoo! (who recently [moved Yahoo! Mail to React](http://www.slideshare.net/rmsguhan/react-meetup-mailonreact)) renders their React+Flux application, server-side.
26
-
27
-<script async class="speakerdeck-embed" data-id="87ecaa3048750132f42542ffc18c6fcf" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
28
-
29
-Péter Márton ([hekike](https://github.com/hekike)) helps us brew a cold one (literally) using an application that's server-client [isomorphic and indexable](http://blog.risingstack.com/from-angularjs-to-react-the-isomorphic-way/). Demo and sample code included – cold ones sold separately.
30
-
31
-And, lest you think that client-server isomorphism exists in pursuit of crawalable, indexable HTML alone, watch as Nate Hunzaker ([nhunzaker](https://github.com/nhunzaker)) [server renders data visualizations as SVG](http://viget.com/extend/visualization-is-for-sharing-using-react-for-portable-data-visualization) with React.
32
-
33
-## React Router Mows the Lawn
34
-
35
-Ryan Florence ([rpflorence](https://github.com/rpflorence])) and Michael Jackson ([mjackson](https://github.com/mjackson)) unveiled a new API for [React Router](https://github.com/rackt/react-router) that solves some of its user's problems by eliminating the problems themselves. Read all about what React Router learned from its community of users, and how they've [rolled your ideas into their latest release](https://github.com/rackt/react-router/wiki/Announcements).
36
-
37
-## React in Practice
38
-
39
-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
40
-
41
-<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/uZgAq1CZ1N8" frameborder="0" allowfullscreen></iframe>
42
-
43
-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.
44
-
45
-We enjoyed a cinematic/narrative experience with this React-powered, interactive story by British author William Boyd. Dive into “[The Vanishing Game](https://thevanishinggame.wellstoried.com)” and see for yourself.
46
-
47
-## Be Kind, Rewind
48
-
49
-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.
50
-
51
-<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/5yHFTN-_mOo" frameborder="0" allowfullscreen></iframe>
52
-
53
-## Community Components
54
-
55
-Tom Chen ([tomchentw](https://github.com/tomchentw)) brings us a [react-google-maps](https://tomchentw.github.io/react-google-maps/) component, and a way to syntax highlight source code using Prism and the [react-prism](https://tomchentw.github.io/react-prism/) component, for good measure.
56
-
57
-Jed Watson ([jedwatson](https://github.com/JedWatson)) helps you manage touch, tap, and press events using the [react-tappable](https://github.com/JedWatson/react-tappable) component.
58
-
59
-To find these, and more community-built components, consult the [React Components](http://react-components.com/) and [React Rocks](http://react.rocks) component directories. React Rocks recently exceeded one-hundred listed components and counting. See one missing? Add the keyword `react-component` to your `package.json` to get listed on React Components, and [submit a link to React Rocks](https://docs.google.com/forms/d/1TpnwJmLcmmGj-_TI68upu_bKBViYeiKx7Aj9uKmV6wY/viewform).
60
-
61
-## Waiter, There's a CSS In My JavaScript
62
-
63
-The internet is abuzz with talk of styling React components using JavaScript instead of CSS. Christopher Chedeau ([vjeux](https://github.com/vjeux)) talks about some of the [fundamental style management challenges](https://speakerdeck.com/vjeux/react-css-in-js) we grapple with, at Facebook scale. A number of implementations of JavaScript centric style management solutions have appeared in the wild, including the React-focused [react-style](https://github.com/js-next/react-style).
64
-
65
-## Test Isolation
66
-
67
-Yahoo! shows us how they make use of `iframe` elements to [unit test React components in isolation](http://yahooeng.tumblr.com/post/102274727496/to-testutil-or-not-to-testutil).
68
-
69
-## You've Got The Hang of Flux, Now Let's Flow
70
-
71
-Facebook Open Source released [Flow](https://code.facebook.com/posts/1505962329687926/flow-a-new-static-type-checker-for-javascript/) this month – a static type checker for JavaScript. Naturally, Flow supports JSX, and you can use it to [type check React applications](https://code.facebook.com/posts/1505962329687926/flow-a-new-static-type-checker-for-javascript/#compatibility). There's never been a better reason to start making use of `propTypes` in your component specifications!
72
-
73
-## Countdown to React.js Conf 2014
74
-
75
-We're counting down the days until [React.js Conf](http://conf.reactjs.com) at Facebook's headquarters in Menlo Park, California, on January 28th & 29th, 2015. Thank you, to everyone who responded to the Call for Presenters. Mark the dates; tickets go on sale in three waves: at noon PST on November 28th, December 5th, and December 12th, 2014.
76
-
77
-## React Meetups Around the World
78
-
79
-<blockquote class="twitter-tweet" lang="en"><p>React JS meetup having pretty good turn up rate today <a href="https://twitter.com/hashtag/londonreact?src=hash">#londonreact</a> <a href="http://t.co/c360dlVVAe">pic.twitter.com/c360dlVVAe</a></p>— Alexander Savin (@karismafilms) <a href="https://twitter.com/karismafilms/status/535152580377468928">November 19, 2014</a></blockquote>
80
-
81
-<div class="skinny-row">
82
- <div class="skinny-col">
83
- <blockquote class="twitter-tweet" lang="en"><p>60+ attendees at the second React.js Utah meetup. <a href="https://twitter.com/ryanflorence">@ryanflorence</a> doing a great job, even without the internet. <a href="http://t.co/fV59AQTOyu">pic.twitter.com/fV59AQTOyu</a></p>— ReactJS Utah (@reactjsutah) <a href="https://twitter.com/reactjsutah/status/527259410020573184">October 29, 2014</a></blockquote>
84
- </div>
85
- <div class="skinny-col">
86
- <blockquote class="twitter-tweet" lang="en"><p><a href="https://twitter.com/hashtag/ReactJS?src=hash">#ReactJS</a> meetup at <a href="https://twitter.com/Yahoo">@Yahoo</a> ! History of <a href="https://twitter.com/yahoomail">@yahoomail</a> and why we chose react and NodeJS <a href="http://t.co/Nm4EdTv45G">pic.twitter.com/Nm4EdTv45G</a></p>— rmsguhan (@rmsguhan) <a href="https://twitter.com/rmsguhan/status/515370950427029504">September 26, 2014</a></blockquote>
87
- </div>
88
-</div>
89
-
90
-<div class="skinny-row">
91
- <div class="skinny-col">
92
- <blockquote class="twitter-tweet" data-cards="hidden" lang="en"><p>The very first ReactJS meetup in NYC tonight, I'll be speaking about the big ideas behind Om <a href="http://t.co/dvPrFqE9eP">http://t.co/dvPrFqE9eP</a></p>— David Nolen (@swannodette) <a href="https://twitter.com/swannodette/status/532190993463128064">November 11, 2014</a></blockquote>
93
- </div>
94
- <div class="skinny-col">
95
- <blockquote class="twitter-tweet" lang="en"><p>If anyone in Sydney is curious about <a href="https://twitter.com/reactjs">@reactjs</a>, I'm presenting at <a href="https://twitter.com/sydjs">@sydjs</a> tonight on how to use it and why it is the future. <a href="https://twitter.com/hashtag/javascript?src=hash">#javascript</a></p>— Jed Watson (@JedWatson) <a href="https://twitter.com/JedWatson/status/534943557568565248">November 19, 2014</a></blockquote>
96
- </div>
97
-</div>
docs/_posts/2014-12-18-react-v0.12.2.md
deleted
-37
@@ -1,37 +0,0 @@
1
----
2
-title: React v0.12.2
3
-author: [zpao]
4
----
5
-
6
-We just shipped React v0.12.2, bringing the 0.12 branch up to date with a few small fixes that landed in master over the past 2 months.
7
-
8
-You may have noticed that we did not do an announcement for v0.12.1. That release was snuck out in anticipation of [Flow](http://flowtype.org/), with only transform-related changes. Namely we added a flag to the `jsx` executable which allowed you to safely transform Flow-based code to vanilla JS. If you didn't update for that release, you can safely skip it and move directly to v0.12.2.
9
-
10
-The release is available for download from the CDN:
11
-
12
-* **React**
13
- Dev build with warnings: <https://fb.me/react-0.12.2.js>
14
- Minified build for production: <https://fb.me/react-0.12.2.min.js>
15
-* **React with Add-Ons**
16
- Dev build with warnings: <https://fb.me/react-with-addons-0.12.2.js>
17
- Minified build for production: <https://fb.me/react-with-addons-0.12.2.min.js>
18
-* **In-Browser JSX transformer**
19
- <https://fb.me/JSXTransformer-0.12.2.js>
20
-
21
-We've also published version `0.12.2` of the `react` and `react-tools` packages on npm and the `react` package on bower. `0.12.1` is also available in the same locations if need those.
22
-
23
-Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry.
24
-
25
-## Changelog
26
-
27
-### React Core
28
-
29
-* Added support for more HTML attributes: `formAction`, `formEncType`, `formMethod`, `formTarget`, `marginHeight`, `marginWidth`
30
-* Added `strokeOpacity` to the list of unitless CSS properties
31
-* Removed trailing commas (allows npm module to be bundled and used in IE8)
32
-* Fixed bug resulting in error when passing `undefined` to `React.createElement` - now there is a useful warning
33
-
34
-### React Tools
35
-
36
-* JSX-related transforms now always use double quotes for props and `displayName`
37
-
docs/_posts/2014-12-19-react-js-conf-diversity-scholarship.md
deleted
-37
@@ -1,37 +0,0 @@
1
----
2
-title: React.js Conf Diversity Scholarship
3
-author: [zpao]
4
----
5
-
6
-Today I'm really happy to announce the React.js Conf Diversity Scholarship! We believe that a diverse set of viewpoints and opinions is really important to build a thriving community. In an ideal world, every part of the tech community would be made up of people from all walks of life. However the reality is that we must be proactive and make an effort to make sure everybody has a voice. As conference organizers we worked closely with the Diversity Team here at Facebook to set aside 10 tickets and provide a scholarship. 10 tickets may not be many in the grand scheme but we really believe that this will have a positive impact on the discussions we have at the conference.
7
-
8
-I'm really excited about this and I hope you are too! The full announcement is below:
9
-
10
-- - -
11
-
12
-The Diversity Team at Facebook is excited to announce that we are now accepting applications for the React.js Conf scholarship!
13
-
14
-Beginning today, those studying or working in computer science or a related field can apply for an all-expense paid scholarship to attend the React.js Conf at Facebook’s Headquarters in Menlo Park, CA on January 28 & 29, 2015. React opens a world of new possibilities such as server-side rendering, real-time updates, different rendering targets like SVG and canvas. Join us at React.js Conf to shape the future of client-side applications! For more information about the React.js conference, please see the [website](http://conf.reactjs.com/) and [previous](/blog/2014/10/27/react-js-conf.html) [updates](/blog/2014/11/24/react-js-conf-updates.html) on our blog.
15
-
16
-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.
17
-Facebook will make determinations on scholarship recipients in its sole discretion. Facebook complies with all equal opportunity laws.
18
-
19
-To apply for the scholarship, please visit the Application Page: <https://www.surveymonkey.com/s/XVJGK6R>
20
-
21
-## Award Includes
22
-
23
-* Paid registration fee for the React.js Conf January 28 & 29th at Facebook’s Headquarters in Menlo Park, CA
24
-* Paid travel and lodging expenses
25
-* Additional $200 meal stipend
26
-
27
-## Important Dates
28
-
29
-* Monday, January 5, 2015: Applications for the React.js Conf Scholarship must be submitted in full
30
-* Friday, January 9, 2015: Award recipients will be notified by email of their acceptance
31
-* Wednesday & Thursday, January 28 & 29, 2015: React.js Conf
32
-
33
-## Eligibility
34
-
35
-* Must currently be studying or working in Computer Science or a related field
36
-* International applicants are welcome, but you will be responsible for securing your own visa to attend the conference
37
-* You must be available to attend the full duration of React.js conf on January 28 and 29 at Facebook Headquarters in Menlo Park
docs/_posts/2015-01-27-react-v0.13.0-beta-1.md
deleted
-165
@@ -1,165 +0,0 @@
1
----
2
-title: React v0.13.0 Beta 1
3
-author: [sebmarkbage]
4
----
5
-
6
-React 0.13 has a lot of nice features but there is one particular feature that I'm really excited about. I couldn't wait for React.js Conf to start tomorrow morning.
7
-
8
-Maybe you're like me and staying up late excited about the conference, or maybe you weren't one of the lucky ones to get a ticket. Either way I figured I'd give you all something to play with until then.
9
-
10
-We just published a beta version of React v0.13.0 to [npm](https://www.npmjs.com/package/react)! You can install it with `npm install react@0.13.0-beta.1`. Since this is a pre-release, we don't have proper release notes ready.
11
-
12
-So what is that one feature I'm so excited about that I just couldn't wait to share?
13
-
14
-
15
-## Plain JavaScript Classes!!
16
-
17
-JavaScript originally didn't have a built-in class system. Every popular framework built their own, and so did we. This means that you have a learn slightly different semantics for each framework.
18
-
19
-We figured that we're not in the business of designing a class system. We just want to use whatever is the idiomatic JavaScript way of creating classes.
20
-
21
-In React 0.13.0 you no longer need to use `React.createClass` to create React components. If you have a transpiler you can use ES6 classes today. You can use the transpiler we ship with `react-tools` by making use of the harmony option: `jsx --harmony`.
22
-
23
-
24
-### ES6 Classes
25
-
26
-```javascript
27
-class HelloMessage extends React.Component {
28
- render() {
29
- return <div>Hello {this.props.name}</div>;
30
- }
31
-}
32
-
33
-React.render(<HelloMessage name="Sebastian" />, mountNode);
34
-```
35
-
36
-The API is mostly what you would expect, with the exception of `getInitialState`. We figured that the idiomatic way to specify class state is to just use a simple instance property. Likewise `getDefaultProps` and `propTypes` are really just properties on the constructor.
37
-
38
-```javascript
39
-export class Counter extends React.Component {
40
- constructor(props) {
41
- super(props);
42
- this.state = {count: props.initialCount};
43
- }
44
- tick() {
45
- this.setState({count: this.state.count + 1});
46
- }
47
- render() {
48
- return (
49
- <div onClick={this.tick.bind(this)}>
50
- Clicks: {this.state.count}
51
- </div>
52
- );
53
- }
54
-}
55
-Counter.propTypes = { initialCount: React.PropTypes.number };
56
-Counter.defaultProps = { initialCount: 0 };
57
-```
58
-
59
-### ES7+ Property Initializers
60
-
61
-Wait, assigning to properties seems like a very imperative way of defining classes! You're right, however, we designed it this way because it's idiomatic. We fully expect a more declarative syntax for property initialization to arrive in future version of JavaScript. It might look something like this:
62
-
63
-```javascript
64
-// Future Version
65
-export class Counter extends React.Component {
66
- static propTypes = { initialCount: React.PropTypes.number };
67
- static defaultProps = { initialCount: 0 };
68
- state = { count: this.props.initialCount };
69
- tick() {
70
- this.setState({ count: this.state.count + 1 });
71
- }
72
- render() {
73
- return (
74
- <div onClick={this.tick.bind(this)}>
75
- Clicks: {this.state.count}
76
- </div>
77
- );
78
- }
79
-}
80
-```
81
-
82
-This was inspired by TypeScript's property initializers.
83
-
84
-### Autobinding
85
-
86
-`React.createClass` has a built-in magic feature that bound all methods to `this` automatically for you. This can be a little confusing for JavaScript developers that are not used to this feature in other classes, or it can be confusing when they move from React to other classes.
87
-
88
-Therefore we decided not to have this built-in into React's class model. You can still explicitly prebind methods in your constructor if you want.
89
-
90
-```javascript
91
-class Counter extends React.Component {
92
- constructor() {
93
- super();
94
- this.tick = this.tick.bind(this);
95
- }
96
- tick() {
97
- ...
98
- }
99
- ...
100
-}
101
-```
102
-
103
-However, when we have the future property initializers, there is a neat trick that you can use to accomplish this syntactically:
104
-
105
-```javascript
106
-class Counter extends React.Component {
107
- tick = () => {
108
- ...
109
- }
110
- ...
111
-}
112
-```
113
-
114
-### Mixins
115
-
116
-Unfortunately, we will not launch any mixin support for ES6 classes in React. That would defeat the purpose of only using idiomatic JavaScript concepts.
117
-
118
-There is no standard and universal way to define mixins in JavaScript. In fact, several features to support mixins were dropped from ES6 today. There are a lot of libraries with different semantics. We think that there should be one way of defining mixins that you can use for any JavaScript class. React just making another doesn't help that effort.
119
-
120
-Therefore, we will keep working with the larger JS community to create a standard for mixins. We will also start designing a new compositional API that will help make common tasks easier to do without mixins. E.g. first-class subscriptions to any kind of Flux store.
121
-
122
-Luckily, if you want to keep using mixins, you can just keep using `React.createClass`.
123
-
124
-> **Note:**
125
->
126
-> The classic `React.createClass` style of creating classes will continue to work just fine.
127
-
128
-## Other Languages!
129
-
130
-Since these classes are just plain old JavaScript classes, you can use other languages that compile to JavaScript classes, such as TypeScript.
131
-
132
-You can also use CoffeeScript classes:
133
-
134
-```coffeescript
135
-div = React.createFactory 'div'
136
-
137
-class Counter extends React.Component
138
- @propTypes = initialCount: React.PropTypes.number
139
- @defaultProps = initialCount: 0
140
-
141
- constructor: (props) ->
142
- super props
143
- @state = count: props.initialCount
144
-
145
- tick: =>
146
- @setState count: @state.count + 1
147
-
148
- render: ->
149
- div onClick: @tick,
150
- 'Clicks: '
151
- @state.count
152
-```
153
-
154
-You can even use the old ES3 module pattern if you want:
155
-
156
-```javascript
157
-function MyComponent(initialProps) {
158
- return {
159
- state: { value: initialProps.initialValue },
160
- render: function() {
161
- return <span className={this.state.value} />
162
- }
163
- };
164
-}
165
-```
docs/_posts/2015-02-18-react-conf-roundup-2015.md
deleted
-268
@@ -1,268 +0,0 @@
1
----
2
-title: React.js Conf Round-up 2015
3
-layout: post
4
-author: [steveluscher]
5
----
6
-
7
-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.
8
-
9
-## The talks
10
-
11
-<div class="skinny-row">
12
- <div class="skinny-col">
13
- <h3 style="margin-top:0"><a class="anchor" name="talk-keynote"></a>Keynote <a class="hash-link" href="#talk-keynote">#</a></h3>
14
- <p>
15
- <strong>Tom Occhino</strong> opened with a history of how React came to be, before announcing Facebook’s answer to a long-looming what-if question: what if we could use React to target something other than the DOM?
16
- </p>
17
- </div>
18
- <div class="skinny-col">
19
- <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/KVZ-P-ZI6W4" frameborder="0" allowfullscreen></iframe>
20
- </div>
21
-</div>
22
-
23
-<div class="skinny-row">
24
- <div class="skinny-col">
25
- <h3 style="margin-top:0"><a class="anchor" name="talk-tweak"></a>Tweaking in real time <a class="hash-link" href="#talk-tweak">#</a></h3>
26
- <p>
27
- <strong>Brenton Simpson</strong> showed us how eBay brings Bret Victor’s feedback loop to your favorite editor using webpack, react-hot-loader, and <a href="https://github.com/appsforartists/ambidex">Ambidex</a>.
28
- </p>
29
- </div>
30
- <div class="skinny-col">
31
- <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/yaymfLj5tjA" frameborder="0" allowfullscreen></iframe>
32
- </div>
33
-</div>
34
-
35
-<div class="skinny-row">
36
- <div class="skinny-col">
37
- <h3 style="margin-top:0"><a class="anchor" name="talk-ast"></a>Abstract Syntax Trees <a class="hash-link" href="#talk-ast">#</a></h3>
38
- <p>
39
- <strong>Gurdas Nijor</strong> showed us how we can leverage some conventions of React to perform source code transformations that unlock an inspirational set of use cases.
40
- </p>
41
- </div>
42
- <div class="skinny-col">
43
- <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/OZGgVxFxSIs" frameborder="0" allowfullscreen></iframe>
44
- </div>
45
-</div>
46
-
47
-<div class="skinny-row">
48
- <div class="skinny-col">
49
- <h3 style="margin-top:0"><a class="anchor" name="talk-relay-graphql"></a>Relay and GraphQL <a class="hash-link" href="#talk-relay-graphql">#</a></h3>
50
- <p>
51
- <strong>Daniel Schafer</strong> and <strong>Jing Chen</strong> showed us how Facebook approaches data fetching with React, giving us an early peek at the forthcoming duo of Relay and GraphQL.
52
- </p>
53
- </div>
54
- <div class="skinny-col">
55
- <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/9sc8Pyc51uU" frameborder="0" allowfullscreen></iframe>
56
- </div>
57
-</div>
58
-
59
-<div class="skinny-row">
60
- <div class="skinny-col">
61
- <h3 style="margin-top:0"><a class="anchor" name="talk-channels"></a>Channels <a class="hash-link" href="#talk-channels">#</a></h3>
62
- <p>
63
- <strong>James Long</strong> explores what might happen if we introduce channels, a new style of coordinating actions, to React.
64
- </p>
65
- </div>
66
- <div class="skinny-col">
67
- <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/W2DgDNQZOwo" frameborder="0" allowfullscreen></iframe>
68
- </div>
69
-</div>
70
-
71
-<div class="skinny-row">
72
- <div class="skinny-col">
73
- <h3 style="margin-top:0"><a class="anchor" name="talk-router"></a>React Router <a class="hash-link" href="#talk-router">#</a></h3>
74
- <p>
75
- <strong>Michael Jackson</strong> reminded us that URLs should be part of our design process, and showed us how <a href="https://github.com/rackt/react-router">react-router</a> can help to manage the transitions between them.
76
- </p>
77
- </div>
78
- <div class="skinny-col">
79
- <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/XZfvW1a8Xac" frameborder="0" allowfullscreen></iframe>
80
- </div>
81
-</div>
82
-
83
-<div class="skinny-row">
84
- <div class="skinny-col">
85
- <h3 style="margin-top:0"><a class="anchor" name="talk-full-stack-flux"></a>Full-stack Flux <a class="hash-link" href="#talk-full-stack-flux">#</a></h3>
86
- <p>
87
- <strong>Pete Hunt</strong> showed us how a Flux approach can help us scale actions and questions on the backend in addition to the frontend.
88
- </p>
89
- </div>
90
- <div class="skinny-col">
91
- <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/KtmjkCuV-EU" frameborder="0" allowfullscreen></iframe>
92
- </div>
93
-</div>
94
-
95
-<div class="skinny-row">
96
- <div class="skinny-col">
97
- <h3 style="margin-top:0"><a class="anchor" name="talk-performance"></a>High-performance <a class="hash-link" href="#talk-performance">#</a></h3>
98
- <p>
99
- <strong>Jason Bonta</strong> showed us how complex user interfaces can get, and how his team keeps them performant as they scale. He also had the pleasure of open-sourcing his team’s work on <a href="https://facebook.github.io/fixed-data-table/">FixedDataTable</a>.
100
- </p>
101
- </div>
102
- <div class="skinny-col">
103
- <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/KYzlpRvWZ6c" frameborder="0" allowfullscreen></iframe>
104
- </div>
105
-</div>
106
-
107
-<div class="skinny-row">
108
- <div class="skinny-col">
109
- <h3 style="margin-top:0"><a class="anchor" name="talk-intl"></a>FormatJS and react-intl <a class="hash-link" href="#talk-intl">#</a></h3>
110
- <p>
111
- <strong>Eric Ferraiuolo</strong> showed how you can bring your app to a worldwide audience using a series of polyfills and emerging ECMAScript APIs.
112
- </p>
113
- </div>
114
- <div class="skinny-col">
115
- <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/Sla-DkvmIHY" frameborder="0" allowfullscreen></iframe>
116
- </div>
117
-</div>
118
-
119
-<div class="skinny-row">
120
- <div class="skinny-col">
121
- <h3 style="margin-top:0"><a class="anchor" name="talk-hype"></a>Hype! <a class="hash-link" href="#talk-hype">#</a></h3>
122
- <p>
123
- <strong>Ryan Florence</strong> showed us how easy it is to transition from a career selling life insurance, to a burgeoning one as a software developer. All you have to do is to learn how to say “yes.”
124
- </p>
125
- </div>
126
- <div class="skinny-col">
127
- <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/z5e7kWSHWTg" frameborder="0" allowfullscreen></iframe>
128
- </div>
129
-</div>
130
-
131
-<div class="skinny-row">
132
- <div class="skinny-col">
133
- <h3 style="margin-top:0"><a class="anchor" name="talk-native"></a>React Native <a class="hash-link" href="#talk-native">#</a></h3>
134
- <p>
135
- <strong>Christopher Chedeau</strong> showed us how to bring the developer experience of working with React on the web to native app development, using React Native.
136
- </p>
137
- </div>
138
- <div class="skinny-col">
139
- <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/7rDsRXj9-cU" frameborder="0" allowfullscreen></iframe>
140
- </div>
141
-</div>
142
-
143
-<div class="skinny-row">
144
- <div class="skinny-col">
145
- <h3 style="margin-top:0"><a class="anchor" name="talk-components"></a>Components <a class="hash-link" href="#talk-components">#</a></h3>
146
- <p>
147
- <strong>Andrew Rota</strong> explained how React and Web Components can work together, and how to avoid some common pitfalls.
148
- </p>
149
- </div>
150
- <div class="skinny-col">
151
- <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/g0TD0efcwVg" frameborder="0" allowfullscreen></iframe>
152
- </div>
153
-</div>
154
-
155
-<div class="skinny-row">
156
- <div class="skinny-col">
157
- <h3 style="margin-top:0"><a class="anchor" name="talk-immutable"></a>Immutability <a class="hash-link" href="#talk-immutable">#</a></h3>
158
- <p>
159
- <strong>Lee Byron</strong> led a master-class on persistent immutable data structures, showing us the world of possibility that they can unlock for your software, and perhaps JavaScript in general.
160
- </p>
161
- </div>
162
- <div class="skinny-col">
163
- <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/I7IdS-PbEgI" frameborder="0" allowfullscreen></iframe>
164
- </div>
165
-</div>
166
-
167
-<div class="skinny-row">
168
- <div class="skinny-col">
169
- <h3 style="margin-top:0"><a class="anchor" name="talk-gibbon"></a>Beyond the DOM <a class="hash-link" href="#talk-gibbon">#</a></h3>
170
- <p>
171
- <strong>Jafar Husain</strong> told us a story about how Netflix was able to push React into places where the DOM could not go.
172
- </div>
173
- <div class="skinny-col">
174
- <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/eNC0mRYGWgc" frameborder="0" allowfullscreen></iframe>
175
- </div>
176
-</div>
177
-
178
-<div class="skinny-row">
179
- <div class="skinny-col">
180
- <h3 style="margin-top:0"><a class="anchor" name="talk-visualization"></a>Data Visualization <a class="hash-link" href="#talk-visualization">#</a></h3>
181
- <p>
182
- <strong>Zach Nation</strong> showed us how we can produce visualizations from over 45 million data points without breaking a sweat.
183
- </div>
184
- <div class="skinny-col">
185
- <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/2ii1lEkIv1s" frameborder="0" allowfullscreen></iframe>
186
- </div>
187
-</div>
188
-
189
-<div class="skinny-row">
190
- <div class="skinny-col">
191
- <h3 style="margin-top:0"><a class="anchor" name="talk-refracted"></a>React Refracted <a class="hash-link" href="#talk-refracted">#</a></h3>
192
- <p>
193
- <strong>David Nolen</strong> gave us a view of React from a non-JavaScript perspective, challenging some common intuition along the way.
194
- </div>
195
- <div class="skinny-col">
196
- <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/5hGHdETNteE" frameborder="0" allowfullscreen></iframe>
197
- </div>
198
-</div>
199
-
200
-<div class="skinny-row">
201
- <div class="skinny-col">
202
- <h3 style="margin-top:0"><a class="anchor" name="talk-flux-panel"></a>Flux Panel <a class="hash-link" href="#talk-flux-panel">#</a></h3>
203
- <p>
204
- <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>.
205
- </div>
206
- <div class="skinny-col">
207
- <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/LTj4O7WJJ98" frameborder="0" allowfullscreen></iframe>
208
- </div>
209
-</div>
210
-
211
-<div class="skinny-row">
212
- <div class="skinny-col">
213
- <h3 style="margin-top:0"><a class="anchor" name="talk-communication"></a>Component communication <a class="hash-link" href="#talk-communication">#</a></h3>
214
- <p>
215
- <strong>Bonnie Eisenman</strong> led us through the ‘adapter’ approach to inter-component communication taken by her team at Codecademy.
216
- </div>
217
- <div class="skinny-col">
218
- <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/ZM6wXoFTY3o" frameborder="0" allowfullscreen></iframe>
219
- </div>
220
-</div>
221
-
222
-<div class="skinny-row">
223
- <div class="skinny-col">
224
- <h3 style="margin-top:0"><a class="anchor" name="talk-typescript"></a>Flow and TypeScript <a class="hash-link" href="#talk-typescript">#</a></h3>
225
- <p>
226
- <strong>James Brantly</strong> demonstrated how we can reap the benefits of static typing using both Flow and TypeScript.
227
- </div>
228
- <div class="skinny-col">
229
- <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/9PTa9-PPVAc" frameborder="0" allowfullscreen></iframe>
230
- </div>
231
-</div>
232
-
233
-<div class="skinny-row">
234
- <div class="skinny-col">
235
- <h3 style="margin-top:0"><a class="anchor" name="talk-qa"></a>Core Team Q&A <a class="hash-link" href="#talk-qa">#</a></h3>
236
- <p>
237
- <strong>Tom Occhino</strong>, <strong>Sophie 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.
238
- </div>
239
- <div class="skinny-col">
240
- <iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/EPpkboSKvPI" frameborder="0" allowfullscreen></iframe>
241
- </div>
242
-</div>
243
-
244
-## Reactions
245
-
246
-The conference is over, but the conversation has just begun.
247
-
248
-**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).
249
-
250
-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.
251
-
252
-<div class="skinny-row">
253
- <div class="skinny-col">
254
- <blockquote class="twitter-tweet" lang="en"><p>Notes from <a href="https://twitter.com/dlschafer">@dlschafer</a> and <a href="https://twitter.com/jingc">@jingc</a>'s <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a> talk "Data fetching for React applications at Facebook" <a href="http://t.co/IUZUbDCDMQ">pic.twitter.com/IUZUbDCDMQ</a></p>— Michael Chan (@chantastic) <a href="https://twitter.com/chantastic/status/560538533161472000">January 28, 2015</a></blockquote>
255
- <blockquote class="twitter-tweet" lang="en"><p>This is just magical (in the good way)… GraphQL + Relay is amazing. <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a></p>— Chris Williams (@voodootikigod) <a href="https://twitter.com/voodootikigod/status/560533225395589120">January 28, 2015</a></blockquote>
256
- <blockquote class="twitter-tweet" lang="en"><p>These… these are my people. :) <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a></p>— Thomas Beirne (@Beirnet) <a href="https://twitter.com/Beirnet/status/560317879501848576">January 28, 2015</a></blockquote>
257
- </div>
258
- <div class="skinny-col">
259
- <blockquote class="twitter-tweet" lang="en"><p>Humbled by the React team and community. Found <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a> very mindful, practical and just real.</p>— xnoɹǝʃ uɐıɹq (@brianleroux) <a href="https://twitter.com/brianleroux/status/560972130112655360">January 30, 2015</a></blockquote>
260
- <blockquote class="twitter-tweet" lang="en"><p>I say with confidence as a former UIKit author: [React's model for the UI layer is vastly better than UIKit's. React Native is a *huge* deal.</p>— Andy Matuschak (@andy_matuschak) <a href="https://twitter.com/andy_matuschak/status/560511204867575808">January 28, 2015</a></blockquote>]
261
- <blockquote class="twitter-tweet" lang="en"><p><a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a> was incredible. Amazing project stewardship and community. Boring prediction, React Native sends adoption vertical in 2015.</p>— David Nolen (@swannodette) <a href="https://twitter.com/swannodette/status/561232290273980416">January 30, 2015</a></blockquote>
262
- <blockquote class="twitter-tweet" lang="en"><p>I really love the community shout outs by <a href="https://twitter.com/Vjeux">@vjeux</a> between talks at <a href="https://twitter.com/hashtag/reactjsconf?src=hash">#reactjsconf</a>!</p>— Andrew Rota (@AndrewRota) <a href="https://twitter.com/AndrewRota/status/560927339522297856">January 29, 2015</a></blockquote>
263
- </div>
264
-</div>
265
-
266
-**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.
267
-
268
-<iframe width="650" height="171" src="https://www.youtube-nocookie.com/embed/FC5FbmsH4fw" frameborder="0" allowfullscreen></iframe>
docs/_posts/2015-02-20-introducing-relay-and-graphql.md
deleted
-63
@@ -1,63 +0,0 @@
1
----
2
-title: "Introducing Relay and GraphQL"
3
-layout: post
4
-author: [wincent]
5
----
6
-
7
-## Data fetching for React applications
8
-
9
-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.
10
-
11
-<iframe width="650" height="315" src="https://www.youtube-nocookie.com/embed/9sc8Pyc51uU" frameborder="0" allowfullscreen></iframe>
12
-
13
-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.
14
-
15
-<script async class="speakerdeck-embed" data-id="7af7c2f33bf9451a892dcd91de55b7c2" data-ratio="1.29456384323641" src="//speakerdeck.com/assets/embed.js"></script>
16
-
17
-## What is Relay?
18
-
19
-Relay is a new framework from Facebook that provides data-fetching functionality for React applications. It was announced at React.js Conf (January 2015).
20
-
21
-Each component specifies its own data dependencies declaratively using a query language called GraphQL. The data is made available to the component via properties on `this.props`.
22
-
23
-Developers compose these React components naturally, and Relay takes care of composing the data queries into efficient batches, providing each component with exactly the data that it requested (and no more), updating those components when the data changes, and maintaining a client-side store (cache) of all data.
24
-
25
-## What is GraphQL?
26
-
27
-GraphQL is a data querying language designed to describe the complex, nested data dependencies of modern applications. It's been in production use in Facebook's native apps for several years.
28
-
29
-On the server, we configure the GraphQL system to map queries to underlying data-fetching code. This configuration layer allows GraphQL to work with arbitrary underlying storage mechanisms. Relay uses GraphQL as its query language, but it is not tied to a specific implementation of GraphQL.
30
-
31
-## The value proposition
32
-
33
-Relay was born out of our experiences building large applications at Facebook. Our overarching goal is to enable developers to create correct, high-performance applications in a straightforward and obvious way. The design enables even large teams to make changes with a high degree of isolation and confidence. Fetching data is hard, dealing with ever-changing data is hard, and performance is hard. Relay aims to reduce these problems to simple ones, moving the tricky bits into the framework and freeing you to concentrate on building your application.
34
-
35
-By co-locating the queries with the view code, the developer can reason about what a component is doing by looking at it in isolation; it's not necessary to consider the context where the component was rendered in order to understand it. Components can be moved anywhere in a render hierarchy without having to apply a cascade of modifications to parent components or to the server code which prepares the data payload.
36
-
37
-Co-location leads developers to fall into the "pit of success", because they get exactly the data they asked for and the data they asked for is explicitly defined right next to where it is used. This means that performance becomes the default (it becomes much harder to accidentally over-fetch), and components are more robust (under-fetching is also less likely for the same reason, so components won't try to render missing data and blow up at runtime).
38
-
39
-Relay provides a predictable environment for developers by maintaining an invariant: a component won't be rendered until all the data it requested is available. Additionally, queries are defined statically (ie. we can extract queries from a component tree before rendering) and the GraphQL schema provides an authoritative description of what queries are valid, so we can validate queries early and fail fast when the developer makes a mistake.
40
-
41
-Only the fields of an object that a component explicitly asks for will be accessible to that component, even if other fields are known and cached in the store (because another component requested them). This makes it impossible for implicit data dependency bugs to exist latently in the system.
42
-
43
-By handling all data-fetching via a single abstraction, we're able to handle a bunch of things that would otherwise have to be dealt with repeatedly and pervasively across the application:
44
-
45
-- **Performance:** All queries flow through the framework code, where things that would otherwise be inefficient, repeated query patterns get automatically collapsed and batched into efficient, minimal queries. Likewise, the framework knows which data have been previously requested, or for which requests are currently "in flight", so queries can be automatically de-duplicated and the minimal queries can be produced.
46
-- **Subscriptions:** All data flows into a single store, and all reads from the store are via the framework. This means the framework knows which components care about which data and which should be re-rendered when data changes; components never have to set up individual subscriptions.
47
-- **Common patterns:** We can make common patterns easy. Pagination is the example that [Jing](https://twitter.com/jingc) gave at the conference: if you have 10 records initially, getting the next page just means declaring you want 15 records in total, and the framework automatically constructs the minimal query to grab the delta between what you have and what you need, requests it, and re-renders your view when the data become available.
48
-- **Simplified server implementation:** Rather than having a proliferation of end-points (per action, per route), a single GraphQL endpoint can serve as a facade for any number of underlying resources.
49
-- **Uniform mutations:** There is one consistent pattern for performing mutations (writes), and it is conceptually baked into the data querying model itself. You can think of a mutation as a query with side-effects: you provide some parameters that describe the change to be made (eg. attaching a comment to a record) and a query that specifies the data you'll need to update your view of the world after the mutation completes (eg. the comment count on the record), and the data flows through the system using the normal flow. We can do an immediate "optimistic" update on the client (ie. update the view under the assumption that the write will succeed), and finally commit it, retry it or roll it back in the event of an error when the server payload comes back.
50
-
51
-## How does it relate to Flux?
52
-
53
-In some ways Relay is inspired by Flux, but the mental model is much simpler. Instead of multiple stores, there is one central store that caches all GraphQL data. Instead of explicit subscriptions, the framework itself can track which data each component requests, and which components should be updated whenever the data change. Instead of actions, modifications take the form of mutations.
54
-
55
-At Facebook, we have apps built entirely using Flux, entirely using Relay, or with both. One pattern we see emerging is letting Relay manage the bulk of the data flow for an application, but using Flux stores on the side to handle a subset of application state.
56
-
57
-## Open source plans
58
-
59
-We're working very hard right now on getting both GraphQL (a spec, and a reference implementation) and Relay ready for public release (no specific dates yet, but we are super excited about getting these out there).
60
-
61
-In the meantime, we'll be providing more and more information in the form of blog posts (and in [other channels](https://gist.github.com/wincent/598fa75e22bdfa44cf47)). As we get closer to the open source release, you can expect more concrete details, syntax and API descriptions and more.
62
-
63
-Watch this space!
docs/_posts/2015-02-24-react-v0.13-rc1.md
deleted
-78
@@ -1,78 +0,0 @@
1
----
2
-title: "React v0.13 RC"
3
-author: [zpao]
4
-date: 2015-02-24 14:00
5
----
6
-
7
-Over the weekend we pushed out our first (and hopefully only) release candidate for React v0.13!
8
-
9
-We've talked a little bit about the changes that are coming. The splashiest of these changes is support for ES6 Classes. You can read more about this in [our beta announcement](/blog/2015/01/27/react-v0.13.0-beta-1.html). We're really excited about this! Sebastian also posted earlier this morning about [some of the other changes coming focused around ReactElement](/blog/2015/02/24/streamlining-react-elements.html). The changes we've been working on there will hopefully enable lots of improvements to performance and developer experience.
10
-
11
-
12
-The release candidate is available for download:
13
-
14
-* **React**
15
- Dev build with warnings: <https://fb.me/react-0.13.0-rc1.js>
16
- Minified build for production: <https://fb.me/react-0.13.0-rc1.min.js>
17
-* **React with Add-Ons**
18
- Dev build with warnings: <https://fb.me/react-with-addons-0.13.0-rc1.js>
19
- Minified build for production: <https://fb.me/react-with-addons-0.13.0-rc1.min.js>
20
-* **In-Browser JSX transformer**
21
- <https://fb.me/JSXTransformer-0.13.0-rc1.js>
22
-
23
-We've also published version `0.13.0-rc1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
24
-
25
-- - -
26
-
27
-## Changelog
28
-
29
-### React Core
30
-
31
-#### Breaking Changes
32
-
33
-* Mutating `props` after an element is created is deprecated and will cause warnings in development mode; future versions of React will incorporate performance optimizations assuming that props aren't mutated
34
-* Static methods (defined in `statics`) are no longer autobound to the component class
35
-* `ref` resolution order has changed slightly such that a ref to a component is available immediately after its `componentDidMount` method is called; this change should be observable only if your component calls a parent component's callback within your `componentDidMount`, which is an anti-pattern and should be avoided regardless
36
-* Calls to `setState` in life-cycle methods are now always batched and therefore asynchronous. Previously the first call on the first mount was synchronous.
37
-* `setState` and `forceUpdate` on an unmounted component now warns instead of throwing. That avoids a possible race condition with Promises.
38
-* Access to most internal properties has been completely removed, including `this._pendingState` and `this._rootNodeID`.
39
-
40
-#### New Features
41
-
42
-* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](/blog/2015/01/27/react-v0.13.0-beta-1.html) for details
43
-* 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.
44
-* 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`)
45
-* `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.
46
-* Support for iterators and immutable-js sequences as children
47
-
48
-#### Deprecations
49
-
50
-* `ComponentClass.type` is deprecated. Just use `ComponentClass` (usually as `element.type === ComponentClass`)
51
-* Some methods that are available on `createClass`-based components are removed or deprecated from ES6 classes (for example, `getDOMNode`, `setProps`, `replaceState`).
52
-
53
-
54
-### React with Add-Ons
55
-
56
-#### Deprecations
57
-
58
-* `React.addons.classSet` is now deprecated. This functionality can be replaced with several freely available modules. [classnames](https://www.npmjs.com/package/classnames) is one such module.
59
-
60
-
61
-### React Tools
62
-
63
-#### Breaking Changes
64
-
65
-* When transforming ES6 syntax, `class` methods are no longer enumerable by default, which requires `Object.defineProperty`; if you support browsers such as IE8, you can pass `--target es3` to mirror the old behavior
66
-
67
-#### New Features
68
-
69
-* `--target` option is available on the jsx command, allowing users to specify and ECMAScript version to target.
70
- * `es5` is the default.
71
- * `es3` restored the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg `this.static` will become `this['static']` for IE8 compatibility).
72
-* The transform for the call spread operator has also been enabled.
73
-
74
-
75
-### JSX
76
-
77
-#### Breaking Changes
78
-* A change was made to how some JSX was parsed, specifically around the use of `>` or `}` when inside an element. Previously it would be treated as a string but now it will be treated as a parse error. We will be releasing a standalone executable to find and fix potential issues in your JSX code.
docs/_posts/2015-02-24-streamlining-react-elements.md
deleted
-230
@@ -1,230 +0,0 @@
1
----
2
-title: "Streamlining React Elements"
3
-author: [sebmarkbage]
4
-date: 2015-02-24 11:00
5
----
6
-
7
-React v0.13 is right around the corner and so we wanted to discuss some upcoming changes to ReactElement. In particular, we added several warnings to some esoteric use cases of ReactElement. There are no runtime behavior changes for ReactElement - we're adding these warnings in the hope that we can change some behavior in v0.14 if the changes are valuable to the community.
8
-
9
-If you use React in an idiomatic way, chances are, you’ll never see any of these warnings. In that case, you can skip this blog post. You can just enjoy the benefits! These changes will unlock simplified semantics, better error messages, stack traces and compiler optimizations!
10
-
11
-## Immutable Props
12
-
13
-In React 0.12, the props object was mutable. It allows you to do patterns like this:
14
-
15
-```js
16
-var element = <Foo bar={false} />;
17
-if (shouldUseFoo) {
18
- element.props.foo = 10;
19
- element.props.bar = true;
20
-}
21
-```
22
-
23
-The problem is that we don’t have a convenient way to tell when you’re done mutating.
24
-
25
-### Problem: Mutating Props You Don’t Own
26
-
27
-If you mutate something, you destroy the original value. Therefore, there is nothing to diff against. Imagine something like this:
28
-
29
-```js
30
-var element = this.props.child;
31
-element.props.count = this.state.count;
32
-return element;
33
-```
34
-
35
-You take a ReactElement through `props.child` and mutate its property before rendering it. If this component's state updates, this render function won't actually get a new ReactElement in `props.child`. It will be the same one. You're mutating the same props.
36
-
37
-You could imagine that this would work. However, this disables the ability for any component to use `shouldComponentUpdate`. It looks like the component never changed because the previous value is always the same as the next one. Since the DOM layer does diffing, this pattern doesn't even work in this case. The change will never propagate down to the DOM except the first time.
38
-
39
-Additionally, if this element is reused in other places or used to switch back and forth between two modes, then you have all kinds of weird race conditions.
40
-
41
-It has always been broken to mutate the props of something passed into you. The problem is that we can’t warn you about this special case if you accidentally do this.
42
-
43
-### Problem: Too Late Validation
44
-
45
-In React 0.12, we do PropType validation very deep inside React during mounting. This means that by the time you get an error, the debugger stack is long gone. This makes it difficult to find complex issues during debugging. We have to do this since it is fairly common for extra props to be added between the call to React.createElement and the mount time. So the type is incomplete until then.
46
-
47
-The static analysis in Flow is also impaired by this. There is no convenient place in the code where Flow can determine that the props are finalized.
48
-
49
-### Solution: Immutable Props
50
-
51
-Therefore, we would like to be able to freeze the element.props object so that it is immediately immutable at the JSX callsite (or createElement). In React 0.13 we will start warning you if you mutate `element.props` after this point.
52
-
53
-You can generally refactor these pattern to simply use two different JSX calls:
54
-
55
-```js
56
-if (shouldUseFoo) {
57
- return <Foo foo={10} bar={true} />;
58
-} else {
59
- return <Foo bar={false} />;
60
-}
61
-```
62
-
63
-However, if you really need to dynamically build up your props you can just use a temporary object and spread it into JSX:
64
-
65
-```js
66
-var props = { bar: false };
67
-if (shouldUseFoo) {
68
- props.foo = 10;
69
- props.bar = true;
70
-}
71
-return <Foo {...props} />;
72
-```
73
-
74
-It is still OK to do deep mutations of objects. E.g:
75
-
76
-```js
77
-return <Foo nestedObject={this.state.myModel} />;
78
-```
79
-
80
-In this case it's still ok to mutate the myModel object in state. We recommend that you use fully immutable models. E.g. by using immutable-js. However, we realize that mutable models are still convenient in many cases. Therefore we're only considering shallow freezing the props object that belongs to the ReactElement itself. Not nested objects.
81
-
82
-### Solution: Early PropType Warnings
83
-
84
-We will also start warning you for PropTypes at the JSX or createElement callsite. This will help debugging as you’ll have the stack trace right there. Similarly, Flow also validates PropTypes at this callsite.
85
-
86
-Note: There are valid patterns that clones a ReactElement and adds additional props to it. In that case these additional props needs to be optional.
87
-
88
-```js
89
-var element1 = <Foo />; // extra prop is optional
90
-var element2 = React.addons.cloneWithProps(element1, { extra: 'prop' });
91
-```
92
-
93
-## Owner
94
-
95
-In React each child has both a "parent" and an “owner”. The owner is the component that created a ReactElement. I.e. the render method which contains the JSX or createElement callsite.
96
-
97
-```js
98
-class Foo {
99
- render() {
100
- return <div><span /></div>;
101
- }
102
-}
103
-```
104
-
105
-In this example, the owner of the `span` is `Foo` but the parent is the `div`.
106
-
107
-There is also an undocumented feature called "context" that also relies on the concept of an “owner” to pass hidden props down the tree.
108
-
109
-### Problem: The Semantics are Opaque and Confusing
110
-
111
-The problem is that these are hidden artifacts attached to the ReactElement. In fact, you probably didn’t even know about it. It silently changes semantics. Take this for example:
112
-
113
-```js
114
-var foo = <input className="foo" />;
115
-class Component {
116
- render() {
117
- return bar ? <input className="bar" /> : foo;
118
- }
119
-}
120
-```
121
-
122
-These two inputs have different owners, therefore React will not keep its state when the conditional switches. There is nothing in the code to indicate that. Similarly, if you use `React.addons.cloneWithProps`, the owner changes.
123
-
124
-### Problem: Timing Matters
125
-
126
-The owner is tracked by the currently executing stack. This means that the semantics of a ReactElement varies depending on when it is executed. Take this example:
127
-
128
-```js
129
-class A {
130
- render() {
131
- return <B renderer={text => <span>{text}</span>} />;
132
- }
133
-}
134
-class B {
135
- render() {
136
- return this.props.renderer('foo');
137
- }
138
-}
139
-```
140
-
141
-The owner of the `span` is actually `B`, not `A` because of the timing of the callback. This all adds complexity and suffers from similar problems as mutation.
142
-
143
-### Problem: It Couples JSX to React
144
-
145
-Have you wondered why JSX depends on React? Couldn’t the transpiler have that built-in to its runtime? The reason you need to have `React.createElement` in scope is because we depend on internal state of React to capture the current "owner". Without this, you wouldn’t need to have React in scope.
146
-
147
-### Solution: Make Context Parent-Based Instead of Owner-Based
148
-
149
-The first thing we’re doing is warning you if you’re using the "owner" feature in a way that relies on it propagating through owners. Instead, we’re planning on propagating it through parents to its children. In almost all cases, this shouldn’t matter. In fact, parent-based contexts is simply a superset.
150
-
151
-### Solution: Remove the Semantic Implications of Owner
152
-
153
-It turns out that there are very few cases where owners are actually important part of state-semantics. As a precaution, we’ll warn you if it turns out that the owner is important to determine state. In almost every case this shouldn’t matter. Unless you’re doing some weird optimizations, you shouldn’t see this warning.
154
-
155
-### Pending: Change the refs Semantics
156
-
157
-Refs are still based on "owner". We haven’t fully solved this special case just yet.
158
-
159
-In 0.13 we introduced a new callback-refs API that doesn’t suffer from these problems but we’ll keep on a nice declarative alternative to the current semantics for refs. As always, we won’t deprecate something until we’re sure that you’ll have a nice upgrade path.
160
-
161
-## Keyed Objects as Maps
162
-
163
-In React 0.12, and earlier, you could use keyed objects to provide an external key to an element or a set. This pattern isn’t actually widely used. It shouldn’t be an issue for most of you.
164
-
165
-```js
166
-<div>{ {a: <span />, b: <span />} }</div>
167
-```
168
-
169
-### Problem: Relies on Enumeration Order
170
-
171
-The problem with this pattern is that it relies on enumeration order of objects. This is technically unspecified, even though implementations now agree to use insertion order. Except for the special case when numeric keys are used.
172
-
173
-### Problem: Using Objects as Maps is Bad
174
-
175
-It is generally accepted that using objects as maps screw up type systems, VM optimizations, compilers etc. It is much better to use a dedicated data structure like ES6 Maps.
176
-
177
-More importantly, this can have important security implications. For example this has a potential security problem:
178
-
179
-```js
180
-var children = {};
181
-items.forEach(item => children[item.title] = <span />);
182
-return <div>{children}</div>;
183
-```
184
-
185
-Imagine if `item.title === '__proto__'` for example.
186
-
187
-### Problem: Can’t be Differentiated from Arbitrary Objects
188
-
189
-Since these objects can have any keys with almost any value, we can’t differentiate them from a mistake. If you put some random object, we will try our best to traverse it and render it, instead of failing with a helpful warning. In fact, this is one of the few places where you can accidentally get an infinite loop in React.
190
-
191
-To differentiate ReactElements from one of these objects, we have to tag them with `_isReactElement`. This is another issue preventing us from inlining ReactElements as simple object literals.
192
-
193
-### Solution: Just use an Array and key={…}
194
-
195
-Most of the time you can just use an array with keyed ReactElements.
196
-
197
-```js
198
-var children = items.map(item => <span key={item.title} />);
199
-<div>{children}</div>
200
-```
201
-
202
-### Solution: React.addons.createFragment
203
-
204
-However, this is not always possible if you’re trying to add a prefix key to an unknown set (e.g. this.props.children). It is also not always the easiest upgrade path. Therefore, we are adding a helper to `React.addons` called `createFragment()`. This accepts a keyed object and returns an opaque type.
205
-
206
-```js
207
-<div>{React.addons.createFragment({ a: <div />, b: this.props.children })}</div>
208
-```
209
-
210
-The exact signature of this kind of fragment will be determined later. It will likely be some kind of immutable sequence.
211
-
212
-Note: This will still not be valid as the direct return value of `render()`. Unfortunately, they still need to be wrapped in a `<div />` or some other element.
213
-
214
-## Compiler Optimizations: Unlocked!
215
-
216
-These changes also unlock several possible compiler optimizations for static content in React 0.14. These optimizations were previously only available to template-based frameworks. They will now also be possible for React code! Both for JSX and `React.createElement/Factory`*!
217
-
218
-See these GitHub Issues for a deep dive into compiler optimizations:
219
-
220
-- [Reuse Constant Value Types](https://github.com/facebook/react/issues/3226)
221
-- [Tagging ReactElements](https://github.com/facebook/react/issues/3227)
222
-- [Inline ReactElements](https://github.com/facebook/react/issues/3228)
223
-
224
-\* If you use the recommended pattern of explicit React.createFactory calls on the consumer side - since they are easily statically analyzed.
225
-
226
-## Rationale
227
-
228
-I thought that these changes were particularly important because the mere existence of these patterns means that even components that DON’T use these patterns have to pay the price. There are other problematic patterns such as mutating state, but they’re at least localized to a component subtree so they don’t harm the ecosystem.
229
-
230
-As always, we’d love to hear your feedback and if you have any trouble upgrading, please let us know.
docs/_posts/2015-03-03-react-v0.13-rc2.md
deleted
-58
@@ -1,58 +0,0 @@
1
----
2
-title: "React v0.13 RC2"
3
-author: [sebmarkbage]
4
----
5
-
6
-Thanks to everybody who has already been testing the release candidate. We've received some good feedback and as a result we're going to do a second release candidate. The changes are minimal. We haven't changed the behavior of any APIs we exposed in the previous release candidate. Here's a summary of the changes:
7
-
8
-* Introduced a new API (`React.cloneElement`, see below for details).
9
-* Fixed a bug related to validating `propTypes` when using the new `React.addons.createFragment` API.
10
-* Improved a couple warning messages.
11
-* Upgraded jstransform and esprima.
12
-
13
-The release candidate is available for download:
14
-
15
-* **React**
16
- Dev build with warnings: <https://fb.me/react-0.13.0-rc2.js>
17
- Minified build for production: <https://fb.me/react-0.13.0-rc2.min.js>
18
-* **React with Add-Ons**
19
- Dev build with warnings: <https://fb.me/react-with-addons-0.13.0-rc2.js>
20
- Minified build for production: <https://fb.me/react-with-addons-0.13.0-rc2.min.js>
21
-* **In-Browser JSX transformer**
22
- <https://fb.me/JSXTransformer-0.13.0-rc2.js>
23
-
24
-We've also published version `0.13.0-rc2` of the `react` and `react-tools` packages on npm and the `react` package on bower.
25
-
26
-- - -
27
-
28
-## React.cloneElement
29
-
30
-In React v0.13 RC2 we will introduce a new API, similar to `React.addons.cloneWithProps`, with this signature:
31
-
32
-```js
33
-React.cloneElement(element, props, ...children);
34
-```
35
-
36
-Unlike `cloneWithProps`, this new function does not have any magic built-in behavior for merging `style` and `className` for the same reason we don't have that feature from `transferPropsTo`. Nobody is sure what exactly the complete list of magic things are, which makes it difficult to reason about the code and difficult to reuse when `style` has a different signature (e.g. in the upcoming React Native).
37
-
38
-`React.cloneElement` is *almost* equivalent to:
39
-
40
-```js
41
-<element.type {...element.props} {...props}>{children}</element.type>
42
-```
43
-
44
-However, unlike JSX and `cloneWithProps`, it also preserves `ref`s. This means that if you get a child with a `ref` on it, you won't accidentally steal it from your ancestor. You will get the same `ref` attached to your new element.
45
-
46
-One common pattern is to map over your children and add a new prop. There were many issues reported about `cloneWithProps` losing the ref, making it harder to reason about your code. Now following the same pattern with `cloneElement` will work as expected. For example:
47
-
48
-```js
49
-var newChildren = React.Children.map(this.props.children, function(child) {
50
- return React.cloneElement(child, { foo: true })
51
-});
52
-```
53
-
54
-> Note: `React.cloneElement(child, { ref: 'newRef' })` *DOES* override the `ref` so it is still not possible for two parents to have a ref to the same child, unless you use callback-refs.
55
-
56
-This was a critical feature to get into React 0.13 since props are now immutable. The upgrade path is often to clone the element, but by doing so you might lose the `ref`. Therefore, we needed a nicer upgrade path here. As we were upgrading callsites at Facebook we realized that we needed this method. We got the same feedback from the community. Therefore we decided to make another RC before the final release to make sure we get this in.
57
-
58
-We plan to eventually deprecate `React.addons.cloneWithProps`. We're not doing it yet, but this is a good opportunity to start thinking about your own uses and consider using `React.cloneElement` instead. We'll be sure to ship a release with deprecation notices before we actually remove it so no immediate action is necessary.
docs/_posts/2015-03-04-community-roundup-25.md
deleted
-63
@@ -1,63 +0,0 @@
1
----
2
-title: "Community Round-up #25"
3
-layout: post
4
-author: [matthewjohnston4]
5
----
6
-
7
-## React 101
8
-
9
-Interest in React has been exploding recently, so it's a good time to explore some great recent tutorials and videos that cover getting started.
10
-
11
-[Ryan Clark](https://github.com/rynclark) provides a [great overview of the basics of React](http://ryanclark.me/getting-started-with-react/) with the goal of building a really simple dropdown nav.
12
-
13
-[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:
14
-
15
-<iframe width="650" height="300" src="//www.youtube-nocookie.com/embed/Pd6Ub7Ju2RM" frameborder="0" allowfullscreen></iframe>
16
-
17
-[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.
18
-
19
-Black Mutt Media [takes us through their usage of React](http://blackmuttmedia.com/blog/react-tmdb-api/) and Ruby to build an autocomplete field, and some of the pitfalls they encountered along the way.
20
-
21
-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.
22
-
23
-<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>
24
-
25
-## Community Additions
26
-
27
-[Formidable Labs](https://github.com/FormidableLabs) have been busy, as they've also[ just launched Radium](http://projects.formidablelabs.com/radium/), a React component that provides you with the ability to use inline styles instead of CSS. They're also [looking for some help](http://projects.formidablelabs.com/radium-bootstrap/) contributing to a Radium Bootstrap implementation.
28
-
29
-[Reactiflux.com](http://reactiflux.com/) is a new Slack community based around (you guessed it!) React, and Flux.
30
-
31
-[React Week](http://reactweek.com/) is a week-long learning workshop, happening next week, for React, Flux, and other related technologies, run by [Ryan Florence](https://github.com/ryanflorence).
32
-
33
-[Babel-sublime](https://github.com/babel/babel-sublime) is a new package which provides Sublime with language definitions for ES6 JavaScript with React JSX syntax extensions.
34
-
35
-[react-meteor](https://github.com/reactjs/react-meteor), a package that replaces the default templating system of the Meteor platform with React, recently received a big update.
36
-
37
-## Rebuilding with React
38
-
39
-[Rich Manalang](https://github.com/rmanalan) from Atlassian [explains why](https://developer.atlassian.com/blog/2015/02/rebuilding-hipchat-with-react/) they rebuilt their HipChat web client from scratch using React, and how they're already using it to rebuild their native desktop clients.
40
-
41
-[Andrew Hillel](https://twitter.com/andyhillel) of the BBC gives [an excellent and thorough breakdown](http://www.bbc.co.uk/blogs/internet/entries/47a96d23-ae04-444e-808f-678e6809765d) of the stack they used to rebuild their homepage, with React as an integral part of the front-end.
42
-
43
-A team from New Zealand called [Atomic](https://atomic.io/) is [building web and mobile prototyping and design tools](http://thenextweb.com/creativity/2015/02/19/meet-atomic-missing-tool-interface-design-thats-entirely-browser/) entirely in-browser, and as co-founder [Darryl Gray](https://twitter.com/darrylgray) says, “React.js “totally changed” the fact that browser performance often wasn’t good enough for complex tools like this.”.
44
-
45
-[Polarr](https://github.com/Polarrco) have rebuilt [their browser-based photo editor](http://polarrist.tumblr.com/post/111290422225/polarr-photo-editor-2-0-alpha-is-here) with React.
46
-
47
-<center><a href="http://polarrist.tumblr.com/post/111290422225/polarr-photo-editor-2-0-alpha-is-here"><img src="../img/blog/polarr.jpg"></a></center>
48
-
49
-## It's F8!
50
-
51
-F8 2015 is just around the corner, and you can [sign up for the video streams](https://www.fbf8.com/stream.html) in advance because we're sure to be covering all things React.
52
-
53
-## Meetups
54
-
55
-<table><tr><td width="50%" valign="top">
56
-<blockquote class="twitter-tweet" lang="en"><p>Our <a href="https://twitter.com/reactjs">@reactjs</a> meetup is in full effect <a href="https://twitter.com/hashtag/ReactJS?src=hash">#ReactJS</a> btw bathroom code is 6012 lol <a href="http://t.co/7iUpvmm3zz">pic.twitter.com/7iUpvmm3zz</a></p>— littleBits (@littleBits) <a href="https://twitter.com/littleBits/status/570373833028472832">February 25, 2015</a></blockquote>
57
-</td><td width="50%" valign="top">
58
-<blockquote class="twitter-tweet" lang="en"><p><a href="https://twitter.com/yrezgui">@yrezgui</a> captivating us with <a href="https://twitter.com/reactjs">@reactjs</a> at <a href="https://twitter.com/DevRocketUK">@DevRocketUK</a>. Thanks to the amazing sponsors <a href="https://twitter.com/makersacademy">@makersacademy</a> and <a href="https://twitter.com/couchbase">@couchbase</a>. <a href="http://t.co/xwA773omky">pic.twitter.com/xwA773omky</a></p>— James Nocentini (@jamiltz) <a href="https://twitter.com/jamiltz/status/570306188577001473">February 24, 2015</a></blockquote>
59
-</td></tr><tr><td width="50%" valign="top">
60
-<blockquote class="twitter-tweet" lang="en"><p>Listening to a bunch of very clever geekoids at the <a href="https://twitter.com/reactjs">@reactjs</a> seminar. Nice! <a href="http://t.co/0TeTOJOerO">pic.twitter.com/0TeTOJOerO</a></p>— Nick Middleweek (@nmiddleweek) <a href="https://twitter.com/nmiddleweek/status/568183658395394049">February 18, 2015</a></blockquote>
61
-</td><td width="50%" valign="top">
62
-<blockquote class="twitter-tweet" lang="en"><p>Watching the <a href="https://twitter.com/FrontendMasters">@FrontendMasters</a> ReactJS workshop! <a href="http://t.co/YraYIK97Lu">pic.twitter.com/YraYIK97Lu</a></p>— ReactJS News (@ReactJSNews) <a href="https://twitter.com/ReactJSNews/status/566269552112041985">February 13, 2015</a></blockquote>
63
-</td></tr></table>
docs/_posts/2015-03-10-react-v0.13.md
deleted
-90
@@ -1,90 +0,0 @@
1
----
2
-title: "React v0.13"
3
-author: [sophiebits]
4
----
5
-
6
-Today, we're happy to release React v0.13!
7
-
8
-The most notable new feature is [support for ES6 classes](/blog/2015/01/27/react-v0.13.0-beta-1.html), which allows developers to have more flexibility when writing components. Our eventual goal is for ES6 classes to replace `React.createClass` completely, but until we have a replacement for current mixin use cases and support for class property initializers in the language, we don't plan to deprecate `React.createClass`.
9
-
10
-At EmberConf and ng-conf last week, we were excited to see that Ember and Angular have been working on speed improvements and now both have performance comparable to React. We've always thought that performance isn't the most important reason to choose React, but we're still planning more optimizations to **make React even faster**.
11
-
12
-Our planned optimizations require that ReactElement objects are immutable, which has always been a best practice when writing idiomatic React code. In this release, we've added runtime warnings that fire when props are changed or added between the time an element is created and when it's rendered. When migrating your code, you may want to use new `React.cloneElement` API (which is similar to `React.addons.cloneWithProps` but preserves `key` and `ref` and does not merge `style` or `className` automatically). For more information about our planned optimizations, see GitHub issues
13
-[#3226](https://github.com/facebook/react/issues/3226),
14
-[#3227](https://github.com/facebook/react/issues/3227),
15
-[#3228](https://github.com/facebook/react/issues/3228).
16
-
17
-The release is now available for download:
18
-
19
-* **React**
20
- Dev build with warnings: <https://fb.me/react-0.13.0.js>
21
- Minified build for production: <https://fb.me/react-0.13.0.min.js>
22
-* **React with Add-Ons**
23
- Dev build with warnings: <https://fb.me/react-with-addons-0.13.0.js>
24
- Minified build for production: <https://fb.me/react-with-addons-0.13.0.min.js>
25
-* **In-Browser JSX transformer**
26
- <https://fb.me/JSXTransformer-0.13.0.js>
27
-
28
-We've also published version `0.13.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
29
-
30
-- - -
31
-
32
-## Changelog
33
-
34
-### React Core
35
-
36
-#### Breaking Changes
37
-
38
-* Deprecated patterns that warned in 0.12 no longer work: most prominently, calling component classes without using JSX or React.createElement and using non-component functions with JSX or createElement
39
-* Mutating `props` after an element is created is deprecated and will cause warnings in development mode; future versions of React will incorporate performance optimizations assuming that props aren't mutated
40
-* Static methods (defined in `statics`) are no longer autobound to the component class
41
-* `ref` resolution order has changed slightly such that a ref to a component is available immediately after its `componentDidMount` method is called; this change should be observable only if your component calls a parent component's callback within your `componentDidMount`, which is an anti-pattern and should be avoided regardless
42
-* Calls to `setState` in life-cycle methods are now always batched and therefore asynchronous. Previously the first call on the first mount was synchronous.
43
-* `setState` and `forceUpdate` on an unmounted component now warns instead of throwing. That avoids a possible race condition with Promises.
44
-* Access to most internal properties has been completely removed, including `this._pendingState` and `this._rootNodeID`.
45
-
46
-#### New Features
47
-
48
-* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](/blog/2015/01/27/react-v0.13.0-beta-1.html) for details.
49
-* 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.
50
-* Added a new top-level API `React.cloneElement(el, props)` for making copies of React elements – see the [v0.13 RC2 notes](/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement) for more details.
51
-* 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`).
52
-* `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.
53
-* Support for iterators and immutable-js sequences as children.
54
-
55
-#### Deprecations
56
-
57
-* `ComponentClass.type` is deprecated. Just use `ComponentClass` (usually as `element.type === ComponentClass`).
58
-* Some methods that are available on `createClass`-based components are removed or deprecated from ES6 classes (`getDOMNode`, `replaceState`, `isMounted`, `setProps`, `replaceProps`).
59
-
60
-
61
-### React with Add-Ons
62
-
63
-#### New Features
64
-
65
-* [`React.addons.createFragment` was added](/docs/create-fragment.html) for adding keys to entire sets of children.
66
-
67
-#### Deprecations
68
-
69
-* `React.addons.classSet` is now deprecated. This functionality can be replaced with several freely available modules. [classnames](https://www.npmjs.com/package/classnames) is one such module.
70
-* Calls to `React.addons.cloneWithProps` can be migrated to use `React.cloneElement` instead – make sure to merge `style` and `className` manually if desired.
71
-
72
-
73
-### React Tools
74
-
75
-#### Breaking Changes
76
-
77
-* When transforming ES6 syntax, `class` methods are no longer enumerable by default, which requires `Object.defineProperty`; if you support browsers such as IE8, you can pass `--target es3` to mirror the old behavior
78
-
79
-#### New Features
80
-
81
-* `--target` option is available on the jsx command, allowing users to specify and ECMAScript version to target.
82
- * `es5` is the default.
83
- * `es3` restores the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg `this.static` will become `this['static']` for IE8 compatibility).
84
-* The transform for the call spread operator has also been enabled.
85
-
86
-
87
-### JSX
88
-
89
-#### Breaking Changes
90
-* A change was made to how some JSX was parsed, specifically around the use of `>` or `}` when inside an element. Previously it would be treated as a string but now it will be treated as a parse error. The [`jsx_orphaned_brackets_transformer`](https://www.npmjs.com/package/jsx_orphaned_brackets_transformer) package on npm can be used to find and fix potential issues in your JSX code.
docs/_posts/2015-03-16-react-v0.13.1.md
deleted
-47
@@ -1,47 +0,0 @@
1
----
2
-title: "React v0.13.1"
3
-author: [zpao]
4
----
5
-
6
-It's been less than a week since we shipped v0.13.0 but it's time to do another quick release. We just released v0.13.1 which contains bugfixes for a number of small issues.
7
-
8
-Thanks all of you who have been upgrading your applications and taking the time to report issues. And a huge thank you to those of you who submitted pull requests for the issues you found! 2 of the 6 fixes that went out today came from people who aren't on the core team!
9
-
10
-The release is now available for download:
11
-
12
-* **React**
13
- Dev build with warnings: <https://fb.me/react-0.13.1.js>
14
- Minified build for production: <https://fb.me/react-0.13.1.min.js>
15
-* **React with Add-Ons**
16
- Dev build with warnings: <https://fb.me/react-with-addons-0.13.1.js>
17
- Minified build for production: <https://fb.me/react-with-addons-0.13.1.min.js>
18
-* **In-Browser JSX transformer**
19
- <https://fb.me/JSXTransformer-0.13.1.js>
20
-
21
-We've also published version `0.13.1` of the `react` and `react-tools` packages on npm and the `react` package on bower.
22
-
23
-- - -
24
-
25
-## Changelog
26
-
27
-### React Core
28
-
29
-#### Bug Fixes
30
-
31
-* Don't throw when rendering empty `<select>` elements
32
-* Ensure updating `style` works when transitioning from `null`
33
-
34
-### React with Add-Ons
35
-
36
-#### Bug Fixes
37
-
38
-* TestUtils: Don't warn about `getDOMNode` for ES6 classes
39
-* TestUtils: Ensure wrapped full page components (`<html>`, `<head>`, `<body>`) are treated as DOM components
40
-* Perf: Stop double-counting DOM components
41
-
42
-### React Tools
43
-
44
-#### Bug Fixes
45
-
46
-* Fix option parsing for `--non-strict-es6module`
47
-
docs/_posts/2015-03-19-building-the-facebook-news-feed-with-relay.md
deleted
-220
@@ -1,220 +0,0 @@
1
----
2
-title: "Building The Facebook News Feed With Relay"
3
-author: [josephsavona]
4
----
5
-
6
-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](/blog/2015/02/20/introducing-relay-and-graphql.html) or watching [the conference talk](https://www.youtube-nocookie.com/v/9sc8Pyc51uU).
7
-
8
-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.
9
-
10
-<br/>
11
-
12
-## The Relay Architecture
13
-
14
-The diagram below shows the main parts of the Relay architecture on the client and the server:
15
-
16
-<img src="../img/blog/relay-components/relay-architecture.png" alt="Relay Architecture" width="650" />
17
-
18
-The main pieces are as follows:
19
-
20
-- Relay Components: React components annotated with declarative data descriptions.
21
-- Actions: Descriptions of how data should change in response to user actions.
22
-- Relay Store: A client-side data store that is fully managed by the framework.
23
-- Server: An HTTP server with GraphQL endpoints (one for reads, one for writes) that respond to GraphQL queries.
24
-
25
-This post will focus on **Relay components** that describe encapsulated units of UI and their data dependencies. These components form the majority of a Relay application.
26
-
27
-<br/>
28
-
29
-## A Relay Application
30
-
31
-To see how components work and can be composed, let's implement a basic version of the Facebook News Feed in Relay. Our application will have two components: a `<NewsFeed>` that renders a list of `<Story>` items. We'll introduce the plain React version of each component first and then convert it to a Relay component. The goal is something like the following:
32
-
33
-<img src="../img/blog/relay-components/sample-newsfeed.png" alt="Sample News Feed" width="360" />
34
-
35
-<br/>
36
-
37
-## The `<Story>` Begins
38
-
39
-The first step is a React `<Story>` component that accepts a `story` prop with the story's text and author information. Note that all examples uses ES6 syntax and elide presentation details to focus on the pattern of data access.
40
-
41
-```javascript
42
-// Story.react.js
43
-export default class Story extends React.Component {
44
- render() {
45
- var story = this.props.story;
46
- return (
47
- <View>
48
- <Image uri={story.author.profilePicture.uri} />
49
- <Text>{story.author.name}</Text>
50
- <Text>{story.text}</Text>
51
- </View>
52
- );
53
- }
54
-}
55
-```
56
-
57
-<br/>
58
-
59
-## What's the `<Story>`?
60
-
61
-Relay automates the process of fetching data for components by wrapping existing React components in Relay containers (themselves React components):
62
-
63
-```javascript
64
-// Story.react.js
65
-class Story extends React.Component { ... }
66
-
67
-export default Relay.createContainer(Story, {
68
- fragments: {
69
- story: /* TODO */
70
- }
71
-});
72
-```
73
-
74
-Before adding the GraphQL fragment, let's look at the component hierarchy this creates:
75
-
76
-<img src="../img/blog/relay-components/relay-containers.png" width="397" alt="React Container Data Flow" />
77
-
78
-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`:
79
-
80
-```javascript
81
-// Story.react.js
82
-class Story extends React.Component { ... }
83
-
84
-export default Relay.createContainer(Story, {
85
- fragments: {
86
- story: () => Relay.QL`
87
- fragment on Story {
88
- author {
89
- name
90
- profilePicture {
91
- uri
92
- }
93
- }
94
- text
95
- }
96
- `,
97
- },
98
-});
99
-```
100
-
101
-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.
102
-
103
-<br/>
104
-
105
-## `<Story>`s on Demand
106
-
107
-We can render a Relay component by providing Relay with the component (`<Story>`) and the ID of the data (a story ID). Given this information, Relay will first fetch the results of the query and then `render()` the component. The value of `props.story` will be a plain JavaScript object such as the following:
108
-
109
-```javascript
110
-{
111
- author: {
112
- name: "Greg",
113
- profilePicture: {
114
- uri: "https://…"
115
- }
116
- },
117
- text: "The first Relay blog post is up…"
118
-}
119
-```
120
-
121
-Relay guarantees that all data required to render a component will be available before it is rendered. This means that `<Story>` does not need to handle a loading state; the `story` is *guaranteed* to be available before `render()` is called. We have found that this invariant simplifies our application code *and* improves the user experience. Of course, Relay also has options to delay the fetching of some parts of our queries.
122
-
123
-The diagram below shows how Relay containers make data available to our React components:
124
-
125
-<img src="../img/blog/relay-components/relay-containers-data-flow.png" width="650" alt="Relay Container Data Flow" />
126
-
127
-<br/>
128
-
129
-## `<NewsFeed>` Worthy
130
-
131
-Now that the `<Story>` is over we can continue with the `<NewsFeed>` component. Again, we'll start with a React version:
132
-
133
-```javascript
134
-// NewsFeed.react.js
135
-class NewsFeed extends React.Component {
136
- render() {
137
- var stories = this.props.viewer.stories; // `viewer` is the active user
138
- return (
139
- <View>
140
- {stories.map(story => <Story story={story} />)}
141
- <Button onClick={() => this.loadMore()}>Load More</Button>
142
- </View>
143
- );
144
- }
145
-
146
- loadMore() {
147
- // TODO: fetch more stories
148
- }
149
-}
150
-
151
-module.exports = NewsFeed;
152
-```
153
-
154
-<br/>
155
-
156
-## All the News Fit to be Relayed
157
-
158
-`<NewsFeed>` has two new requirements: it composes `<Story>` and requests more data at runtime.
159
-
160
-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)`):
161
-
162
-```javascript
163
-// NewsFeed.react.js
164
-class NewsFeed extends React.Component { ... }
165
-
166
-export default Relay.createContainer(NewsFeed, {
167
- initialVariables: {
168
- count: 3 /* default to 3 stories */
169
- },
170
- fragments: {
171
- viewer: () => Relay.QL`
172
- fragment on Viewer {
173
- stories(first: $count) { /* fetch viewer's stories */
174
- edges { /* traverse the graph */
175
- node {
176
- ${Story.getFragment('story')} /* compose child fragment */
177
- }
178
- }
179
- }
180
- }
181
- `,
182
- },
183
-});
184
-```
185
-
186
-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.
187
-
188
-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:
189
-
190
-```javascript
191
-// NewsFeed.react.js
192
-class NewsFeed extends React.Component {
193
- render() { ... }
194
-
195
- loadMore() {
196
- // read current params
197
- var count = this.props.relay.variables.count;
198
- // update params
199
- this.props.relay.setVariables({
200
- count: count + 5,
201
- });
202
- }
203
-}
204
-```
205
-
206
-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`.
207
-
208
-<br/>
209
-
210
-## In Conclusion
211
-
212
-These two components form a solid core for our application. With the use of Relay containers and GraphQL queries, we've enabled the following benefits:
213
-
214
-- Automatic and efficient pre-fetching of data for an entire view hierarchy in a single network request.
215
-- Trivial pagination with automatic optimizations to fetch only the additional items.
216
-- View composition and reusability, so that `<Story>` can be used on its own or within `<NewsFeed>`, without any changes to either component.
217
-- Automatic subscriptions, so that components will re-render if their data changes. Unaffected components will not re-render unnecessarily.
218
-- Exactly *zero* lines of imperative data fetching logic. Relay takes full advantage of React's declarative component model.
219
-
220
-But Relay has many more tricks up its sleeve. For example, it's built from the start to handle reads and writes, allowing for features like optimistic client updates with transactional rollback. Relay can also defer fetching select parts of queries, and it uses a local data store to avoid fetching the same data twice. These are all powerful features that we hope to explore in future posts.
docs/_posts/2015-03-26-introducing-react-native.md
deleted
-16
@@ -1,16 +0,0 @@
1
----
2
-title: "Introducing React Native"
3
-author: [sophiebits]
4
----
5
-
6
-In January at React.js Conf, we announced React Native, a new framework for building native apps using React. We're happy to announce that we're open-sourcing React Native and you can start building your apps with it today.
7
-
8
-For more details, see [Tom Occhino's post on the Facebook Engineering blog](https://code.facebook.com/posts/1014532261909640/react-native-bringing-modern-web-techniques-to-mobile/):
9
-
10
-> *What we really want is the user experience of the native mobile platforms, combined with the developer experience we have when building with React on the web.*
11
->
12
-> *With a bit of work, we can make it so the exact same React that's on GitHub can power truly native mobile applications. The only difference in the mobile environment is that instead of running React in the browser and rendering to divs and spans, we run it an embedded instance of JavaScriptCore inside our apps and render to higher-level platform-specific components.*
13
->
14
-> *It's worth noting that we're not chasing “write once, run anywhere.” Different platforms have different looks, feels, and capabilities, and as such, we should still be developing discrete apps for each platform, but the same set of engineers should be able to build applications for whatever platform they choose, without needing to learn a fundamentally different set of technologies for each. We call this approach “learn once, write anywhere.”*
15
-
16
-To learn more, visit the [React Native website](https://facebook.github.io/react-native/).
docs/_posts/2015-03-30-community-roundup-26.md
deleted
-84
@@ -1,84 +0,0 @@
1
----
2
-title: "Community Round-up #26"
3
-layout: post
4
-author: [vjeux]
5
----
6
-
7
-We open sourced React Native last week and the community reception blew away all our expectations! So many of you tried it, made cool stuff with it, raised many issues and even submitted pull requests to fix them! The entire team wants to say thank you!
8
-
9
-<blockquote class="twitter-tweet" lang="en"><p><a href="https://twitter.com/hashtag/reactnative?src=hash">#reactnative</a> is like when you get a new expansion pack, and everybody is running around clueless about which NPC to talk to for the quests</p>— Ryan Florence (@ryanflorence) <a href="https://twitter.com/ryanflorence/status/581810423554543616">March 28, 2015</a></blockquote>
10
-
11
-
12
-## When is React Native Android coming?
13
-
14
-**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.
15
-
16
-<iframe width="650" height="315" src="https://www.youtube-nocookie.com/embed/X6YbAKiLCLU?start=2220" frameborder="0" allowfullscreen></iframe>
17
-
18
-
19
-## Ray Wenderlich - Property Finder
20
-
21
-If you are getting started with React Native, you should absolutely [use this tutorial](http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript) from Colin Eberhardt. It goes through all the steps to make a reasonably complete app.
22
-
23
-[](http://www.raywenderlich.com/99473/introducing-react-native-building-apps-javascript)
24
-
25
-Colin also [blogged about his experience using React Native](http://blog.scottlogic.com/2015/03/26/react-native-retrospective.html) for a few weeks and gives his thoughts on why you would or wouldn't use it.
26
-
27
-
28
-## The Changelog
29
-
30
-Spencer Ahrens and I had the great pleasure to talk about React Native on [The Changelog](https://thechangelog.com/149/) podcast. It was really fun to chat for an hour, I hope that you'll enjoy listening to it. :)
31
-
32
-<audio src="http://fdlyr.co/d/changelog/cdn.5by5.tv/audio/broadcasts/changelog/2015/changelog-149.mp3" controls="controls" style="width: 100%"></audio>
33
-
34
-
35
-## Hacker News
36
-
37
-Less than 24 hours after React Native was open sourced, Simarpreet Singh built an [Hacker News reader app from scratch](https://github.com/iSimar/HackerNews-React-Native). It's unbelievable how fast he was able to pull it off!
38
-
39
-[](https://github.com/iSimar/HackerNews-React-Native)
40
-
41
-
42
-## Parse + React
43
-
44
-There's a huge ecosystem of JavaScript modules on npm and React Native was designed to work well with the ones that don't have DOM dependencies. Parse is a great example; you can `npm install parse` on your React Native project and it'll work as is. :) We still have [a](https://github.com/facebook/react-native/issues/406) [few](https://github.com/facebook/react-native/issues/370) [issues](https://github.com/facebook/react-native/issues/316) to solve; please create an issue if your favorite library doesn't work out of the box.
45
-
46
-[](http://blog.parse.com/2015/03/25/parse-and-react-shared-chemistry/)
47
-
48
-
49
-## tcomb-form-native
50
-
51
-Giulio Canti is the author of the [tcomb-form library](https://github.com/gcanti/tcomb-form) for React. He already [ported it to React Native](https://github.com/gcanti/tcomb-form-native) and it looks great!
52
-
53
-[](https://github.com/gcanti/tcomb-form-native)
54
-
55
-
56
-## Facebook Login with React Native
57
-
58
-One of the reason we built React Native is to be able to use all the libraries in the native ecosystem. Brent Vatne leads the way and explains [how to use Facebook Login with React Native](http://brentvatne.ca/facebook-login-with-react-native/).
59
-
60
-
61
-## Modus Create
62
-
63
-Jay Garcia spent a lot of time during the beta working on a NES music player with React Native. He wrote a blog post to share his experience and explains some code snippets.
64
-
65
-[](http://moduscreate.com/react-native-has-landed/)
66
-
67
-
68
-## React Native with Babel and webpack
69
-
70
-React Native ships with a custom packager and custom ES6 transforms instead of using what the open source community settled on such as webpack and Babel. The main reason for this is performance – we couldn't get those tools to have sub-second reload time on a large codebase.
71
-
72
-Roman Liutikov found a way to [use webpack and Babel to run on React Native](https://github.com/roman01la/react-native-babel)! In the future, we want to work with those projects to provide cleaner extension mechanisms.
73
-
74
-
75
-## A Dynamic, Crazy, Native Mobile Future—Powered by JavaScript
76
-
77
-Clay Allsopp wrote a post about [all the crazy things you could do with a JavaScript engine that renders native views](https://medium.com/@clayallsopp/a-dynamic-crazy-native-mobile-future-powered-by-javascript-70f2d56b1987). What about native embeds, seamless native browser, native search engine or even app generation...
78
-
79
-
80
-## Random Tweet
81
-
82
-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!
83
-
84
-<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>
docs/_posts/2015-04-17-react-native-v0.4.md
deleted
-25
@@ -1,25 +0,0 @@
1
----
2
-title: "React Native v0.4"
3
-layout: post
4
-author: [vjeux]
5
----
6
-
7
-It's been three weeks since we open sourced React Native and there's been some insane amount of activity already: over 12.5k stars, 1000 commits, 500 issues, 380 pull requests, and 100 contributors, plus [35 plugins](http://react.parts/native-ios) and [1 app in the app store](http://herman.asia/building-a-flashcard-app-with-react-native)! We were expecting some buzz around the project but this is way beyond anything we imagined. Thank you!
8
-
9
-I'd especially like to thank community members Brent Vatne and James Ide who have both already contributed meaningfully to the project and have been extremely helpful on IRC and with issues and pull requests
10
-
11
-## Changelog
12
-
13
-The main focus of the past few weeks has been to make React Native the best possible experience for people outside of Facebook. Here's a high level summary of what's happened since we open sourced:
14
-
15
-* **Error messages and documentation**: We want React Native to be the absolute best developer experience for building mobile apps. We've added a lot of warnings, improved the documentation, and fixed many bugs. If you encounter anything, and I really mean anything, that is not expected or clear, please create an issue - we want to hear about it and fix it.
16
-* **NPM modules compatibility**: There are a lot of libraries on NPM that do not depend on node/browser internals that would be really useful in React Native, such as superagent, underscore, parse, and many others. The packager is now a lot more faithful to node/browserify/webpack dependency resolution. If your favorite library doesn't work out of the box, please open up an issue.
17
-* **Infrastructure**: We are refactoring the internals of React Native to make it easier to plug in to existing iOS codebases, as well as improve performance by removing redundant views and shadow views, supporting multiple root views and manually registering classes to reduce startup time.
18
-* **Components**: The API for a lot of UI components and APIs, especially the ones we're not using heavily inside of Facebook, has dramatically improved thanks to many of your pull requests.
19
-* **Tests**: We ported JavaScript tests, iOS Snapshot tests, and End to End tests to Travis CI. We have broken GitHub master a couple of times (whoops!) when syncing and we hope that with this growing suite of tests it's going to become harder and harder to do so.
20
-* **Patent Grant**: Many of you had concerns and questions around the PATENTS file. We pushed [a new version of the grant](https://code.facebook.com/posts/1639473982937255/updating-our-open-source-patent-grant/).
21
-* **Per commit history**: In order to synchronize from Facebook to GitHub, we used to do one giant commit every few days. We improved our tooling and now have per commit history that maintains author information (both internal and external from pull requests), and we retroactively applied this to historical diffs to provide proper attribution.
22
-
23
-## Where are we going?
24
-
25
-In addition to supporting pull requests, issues, and general improvements, we're also working hard on our internal React Native integrations and on React Native for Android.
docs/_posts/2015-04-18-react-v0.13.2.md
deleted
-51
@@ -1,51 +0,0 @@
1
----
2
-title: "React v0.13.2"
3
-author: [zpao]
4
----
5
-
6
-Yesterday the [React Native team shipped v0.4](/blog/2015/04/17/react-native-v0.4.html). Those of us working on the web team just a few feet away couldn't just be shown up like that so we're shipping v0.13.2 today as well! This is a bug fix release to address a few things while we continue to work towards v0.14.
7
-
8
-The release is now available for download:
9
-
10
-* **React**
11
- Dev build with warnings: <https://fb.me/react-0.13.2.js>
12
- Minified build for production: <https://fb.me/react-0.13.2.min.js>
13
-* **React with Add-Ons**
14
- Dev build with warnings: <https://fb.me/react-with-addons-0.13.2.js>
15
- Minified build for production: <https://fb.me/react-with-addons-0.13.2.min.js>
16
-* **In-Browser JSX transformer**
17
- <https://fb.me/JSXTransformer-0.13.2.js>
18
-
19
-We've also published version `0.13.2` of the `react` and `react-tools` packages on npm and the `react` package on bower.
20
-
21
-- - -
22
-
23
-## Changelog
24
-
25
-### React Core
26
-
27
-#### New Features
28
-
29
-* Added `strokeDashoffset`, `flexPositive`, `flexNegative` to the list of unitless CSS properties
30
-* Added support for more DOM properties:
31
- * `scoped` - for `<style>` elements
32
- * `high`, `low`, `optimum` - for `<meter>` elements
33
- * `unselectable` - IE-specific property to prevent user selection
34
-
35
-#### Bug Fixes
36
-
37
-* Fixed a case where re-rendering after rendering null didn't properly pass context
38
-* Fixed a case where re-rendering after rendering with `style={null}` didn't properly update `style`
39
-* Update `uglify` dependency to prevent a bug in IE8
40
-* Improved warnings
41
-
42
-### React with Add-Ons
43
-
44
-#### Bug Fixes
45
-
46
-* Immutabilty Helpers: Ensure it supports `hasOwnProperty` as an object key
47
-
48
-### React Tools
49
-
50
-* Improve documentation for new options
51
-
docs/_posts/2015-05-01-graphql-introduction.md
deleted
-107
@@ -1,107 +0,0 @@
1
----
2
-title: "GraphQL Introduction"
3
-author: [schrockn]
4
----
5
-
6
-At the React.js conference in late January 2015, we revealed our next major technology in the React family: [Relay](http://facebook.github.io/react/blog/2015/02/20/introducing-relay-and-graphql.html).
7
-
8
-Relay is a new way of structuring client applications that co-locates data-fetching requirements and React components. Instead of placing data fetching logic in some other part of the client application – or embedding this logic in a custom endpoint on the server – we instead co-locate a *declarative* data-fetching specification alongside the React component. The language of this declarative specification is GraphQL.
9
-
10
-GraphQL was not invented to enable Relay. In fact, GraphQL predates Relay by nearly three years. It was invented during the move from Facebook's HTML5-driven mobile applications to purely native applications. It is a query language for graph data that powers the lion's share of interactions in the Facebook Android and iOS applications. Any user of the native iOS or Android app in the last two years has used an app powered by GraphQL.
11
-
12
-We plan to open-source a reference implementation of a GraphQL server and publish a language specification in the coming months. Our goal is to evolve GraphQL to adapt to a wide range of backends, so that projects and companies can use this technology to access their own data. We believe that this is a compelling way to structure servers and to provide powerful abstractions, frameworks and tools – including, but not exclusively, Relay – for product developers.
13
-
14
-
15
-## What is GraphQL?
16
-
17
-A GraphQL query is a string interpreted by a server that returns data in a specified format. Here is an example query:
18
-
19
-```js
20
-{
21
- user(id: 3500401) {
22
- id,
23
- name,
24
- isViewerFriend,
25
- profilePicture(size: 50) {
26
- uri,
27
- width,
28
- height
29
- }
30
- }
31
-}
32
-```
33
-
34
-(Note: this syntax is slightly different from previous GraphQL examples. We've recently been making improvements to the language.)
35
-
36
-And here is the response to that query.
37
-
38
-```json
39
-{
40
- "user" : {
41
- "id": 3500401,
42
- "name": "Jing Chen",
43
- "isViewerFriend": true,
44
- "profilePicture": {
45
- "uri": "http://someurl.cdn/pic.jpg",
46
- "width": 50,
47
- "height": 50
48
- }
49
- }
50
-}
51
-```
52
-
53
-We will dig into the syntax and semantics of GraphQL in a later post, but even a simple example shows many of its design principles:
54
-
55
-* **Hierarchical:** Most product development today involves the creation and manipulation of view hierarchies. To achieve congruence with the structure of these applications, a GraphQL query itself is a hierarchical set of fields. The query is shaped just like the data it returns. It is a natural way for product engineers to describe data requirements.
56
-* **Product-centric:** GraphQL is unapologetically driven by the requirements of views and the front-end engineers that write them. We start with their way of thinking and requirements and build the language and runtime necessary to enable that.
57
-* **Client-specified queries:** In GraphQL, the specification for queries are encoded in the *client* rather than the *server*. These queries are specified at field-level granularity. In the vast majority of applications written without GraphQL, the server determines the data returned in its various scripted endpoints. A GraphQL query, on the other hand, returns exactly what a client asks for and no more.
58
-* **Backwards Compatible:** In a world of deployed native mobile applications with no forced upgrades, backwards compatibility is a challenge. Facebook, for example, releases apps on a two week fixed cycle and pledges to maintain those apps for *at least* two years. This means there are at a *minimum* 52 versions of our clients per platform querying our servers at any given time. Client-specified queries simplifies managing our backwards compatibility guarantees.
59
-* **Structured, Arbitrary Code:** Query languages with field-level granularity have typically queried storage engines directly, such as SQL. GraphQL instead imposes a structure onto a server, and exposes fields that are backed by *arbitrary code*. This allows for both server-side flexibility and a uniform, powerful API across the entire surface area of an application.
60
-* **Application-Layer Protocol:** GraphQL is an application-layer protocol and does not require a particular transport. It is a string that is parsed and interpreted by a server.
61
-* **Strongly-typed:** GraphQL is strongly-typed. Given a query, tooling can ensure that the query is both syntactically correct and valid within the GraphQL type system before execution, i.e. at development time, and the server can make certain guarantees about the shape and nature of the response. This makes it easier to build high quality client tools.
62
-* **Introspective:** GraphQL is introspective. Clients and tools can query the type system using the GraphQL syntax itself. This is a powerful platform for building tools and client software, such as automatic parsing of incoming data into strongly-typed interfaces. It is especially useful in statically typed languages such as Swift, Objective-C and Java, as it obviates the need for repetitive and error-prone code to shuffle raw, untyped JSON into strongly-typed business objects.
63
-
64
-
65
-## Why invent something new?
66
-
67
-Obviously GraphQL is not the first system to manage client-server interactions. In today's world there are two dominant architectural styles for client-server interaction: REST and *ad hoc* endpoints.
68
-
69
-
70
-### REST
71
-
72
-REST, an acronym for Representational State Transfer, is an architectural style rather than a formal protocol. There is actually much debate about what exactly REST is and is not. We wish to avoid such debates. We are interested in the typical attributes of systems that *self-identify* as REST, rather than systems which are formally REST.
73
-
74
-Objects in a typical REST system are addressable by URI and interacted with using verbs in the HTTP protocol. An HTTP GET to a particular URI fetches an object and returns a server-specified set of fields. An HTTP PUT edits an object; an HTTP DELETE deletes an object; and so on.
75
-
76
-We believe there are a number of weakness in typical REST systems, ones that are particularly problematic in mobile applications:
77
-
78
-* Fetching complicated object graphs require multiple round trips between the client and server to render single views. For mobile applications operating in variable network conditions, these multiple roundtrips are highly undesirable.
79
-* Invariably fields and additional data are added to REST endpoints as the system requirements change. However, old clients also receive this additional data as well, because the data fetching specification is encoded on the server rather than the client. As result, these payloads tend to grow over time for all clients. When this becomes a problem for a system, one solution is to overlay a versioning system onto the REST endpoints. Versioning also complicates a server, and results in code duplication, spaghetti code, or a sophisticated, hand-rolled infrastructure to manage it. Another solution to limit over-fetching is to provide multiple views – such as “compact” vs “full” – of the same REST endpoint, however this coarse granularity often does not offer adequate flexibility.
80
-* REST endpoints are usually weakly-typed and lack machine-readable metadata. While there is much debate about the merits of strong- versus weak-typing in distributed systems, we believe in strong typing because of the correctness guarantees and tooling opportunities it provides. Developers deal with systems that lack this metadata by inspecting frequently out-of-date documentation and then writing code against the documentation.
81
-* Many of these attributes are linked to the fact that “REST is intended for long-lived network-based applications that span multiple organizations” [according to its inventor](http://roy.gbiv.com/untangled/2008/rest-apis-must-be-hypertext-driven). This is not a requirement for APIs that serve a client app built within the same organization.
82
-
83
-Nearly all externally facing REST APIs we know of trend or end up in these non-ideal states, as well as nearly all *internal* REST APIs. The consequences of opaqueness and over-fetching are more severe in internal APIs since their velocity of change and level of usage is almost always higher.
84
-
85
-Because of multiple round-trips and over-fetching, applications built in the REST style inevitably end up building *ad hoc* endpoints that are superficially in the REST style. These actually couple the data to a particular view which explicitly violates one of REST's major goals. Most REST systems of any complexity end up as a continuum of endpoints that span from “traditional” REST to *ad hoc* endpoints.
86
-
87
-
88
-### Ad Hoc Endpoints
89
-
90
-Many applications have no formalized client-server contract. Product developers access server capabilities through *ad hoc* endpoints and write custom code to fetch the data they need. Servers define procedures, and they return data. This approach has the virtue of simplicity, but can often become untenable as systems age.
91
-
92
-* These systems typically define a custom endpoint per view. For systems with a wide surface area this can quickly grow into a maintenance nightmare of orphaned endpoints, inconsistent tooling, and massive server code duplication. Disciplined engineering organizations can mitigate these issues with great engineering practices, high quality abstractions, and custom tooling. However, given our experience we believe that custom endpoints tend to lead to entropic server codebases.
93
-* Much like REST, the payloads of custom endpoints grow monotonically (even with mitigation from versioning systems) as the server evolves. Deployed clients cannot break, and, with rapid release cycles and backwards compatibility guarantees, distributed applications will have large numbers of extant versions. Under these constraints it is difficult to remove data from a custom endpoint.
94
-* Custom endpoints tend to – for a client developer – create a clunky, multi-language, multi-environment development process. No matter if the data has been accessed before in a different view, they are required to first change the custom endpoint, then deploy that code to a server accessible from a mobile device, and only then change the client to utilize that data. In GraphQL – unless the data in the view is completely new to the entire system – a product developer adds a field to a GraphQL query and the work on the client continues unabated.
95
-* Much like REST, most systems with custom endpoints do not have a formalized type system, which eliminates the possibility for the tools and guarantees that introspective type systems can provide. Some custom-endpoint-driven systems do use a strongly typed serialization scheme, such as Protocol Buffers, Thrift, or XML. Those do allow for direct parsing of responses into typed classes and eliminating boilerplate shuffling from JSON into handwritten classes. These systems are as not as expressive and flexible as GraphQL, and the other downsides of *ad hoc* endpoints remain.
96
-
97
-We believe that GraphQL represents a novel way of structuring the client-server contract. Servers publish a type system specific to their application, and GraphQL provides a unified language to query data within the constraints of that type system. That language allows product developers to express data requirements in a form natural to them: a declarative and hierarchal one.
98
-
99
-This is a liberating platform for product developers. With GraphQL, no more contending with *ad hoc* endpoints or object retrieval with multiple roundtrips to access server data; instead an elegant, hierarchical, declarative query dispatched to a single endpoint. No more frequent jumps between client and server development environments to do experimentation or to change or create views of existing data; instead experiments are done and new views built within a native, client development environment exclusively. No more shuffling unstructured data from *ad hoc* endpoints into business objects; instead a powerful, introspective type system that serves as a platform for tool building.
100
-
101
-Product developers are free to focus on their client software and requirements while rarely leaving their development environment; they can more confidently support shipped clients as a system evolves; and they are using a protocol designed to operate well within the constraints of mobile applications. Product developers can query for exactly what they want, in the way they think about it, across their entire application's data model.
102
-
103
-
104
-## What's next?
105
-
106
-Over the coming months, we will share more technical details about GraphQL, including additional language features, tools that support it, and how it is built and used at Facebook. These posts will culminate in a formal specification of GraphQL to guide implementors across various languages and platforms. We also plan on releasing a reference implementation in the summer, in order to provide a basis for custom deployments and a platform for experimentation. We're incredibly excited to share this system and work with the open source community to improve it.
107
-
docs/_posts/2015-05-08-react-v0.13.3.md
deleted
-42
@@ -1,42 +0,0 @@
1
----
2
-title: "React v0.13.3"
3
-author: [zpao]
4
----
5
-
6
-Today we're sharing another patch release in the v0.13 branch. There are only a few small changes, with a couple to address some issues that arose around that undocumented feature so many of you are already using: `context`. We also improved developer ergonomics just a little bit, making some warnings better.
7
-
8
-The release is now available for download:
9
-
10
-* **React**
11
- Dev build with warnings: <https://fb.me/react-0.13.3.js>
12
- Minified build for production: <https://fb.me/react-0.13.3.min.js>
13
-* **React with Add-Ons**
14
- Dev build with warnings: <https://fb.me/react-with-addons-0.13.3.js>
15
- Minified build for production: <https://fb.me/react-with-addons-0.13.3.min.js>
16
-* **In-Browser JSX transformer**
17
- <https://fb.me/JSXTransformer-0.13.3.js>
18
-
19
-We've also published version `0.13.3` of the `react` and `react-tools` packages on npm and the `react` package on bower.
20
-
21
-- - -
22
-
23
-## Changelog
24
-
25
-### React Core
26
-
27
-#### New Features
28
-
29
-* Added `clipPath` element and attribute for SVG
30
-* Improved warnings for deprecated methods in plain JS classes
31
-
32
-#### Bug Fixes
33
-
34
-* Loosened `dangerouslySetInnerHTML` restrictions so `{__html: undefined}` will no longer throw
35
-* Fixed extraneous context warning with non-pure `getChildContext`
36
-* Ensure `replaceState(obj)` retains prototype of `obj`
37
-
38
-### React with Add-ons
39
-
40
-### Bug Fixes
41
-
42
-* Test Utils: Ensure that shallow rendering works when components define `contextTypes`
docs/_posts/2015-05-22-react-native-release-process.md
deleted
-22
@@ -1,22 +0,0 @@
1
----
2
-title: "React Native Release Process"
3
-author: [vjeux]
4
----
5
-
6
-The React Native release process have been a bit chaotic since we open sourced. It was unclear when new code was released, there was no changelog, we bumped the minor and patch version inconsistently and we often had to submit updates right after a release to fix a bad bug. In order to *move fast with stable infra*, we are introducing a real release process with a two-week release schedule.
7
-
8
-To explain how it works, let me walk you through an example. Today, Friday, we took the current state of master and put it on the 0.5-stable branch. We [published 0.5.0-rc](https://github.com/facebook/react-native/releases/tag/v0.5.0-rc), an RC (Release Candidate) when we cut the branch. For two weeks, we're going to let it stabilize and only cherry-pick critical bug fixes from master.
9
-
10
-Friday in two weeks, we're going to publish the 0.5.0 release, create the 0.6-stable branch and publish 0.6.0-rc as well.
11
-
12
-The release process is synchronized with Facebook's mobile release process. This means that everything in the open source release is also being shipped as part of all the Facebook apps that use React Native!
13
-
14
-You now have three ways to get React Native. You should chose the one you want based on the amount of risk you tolerate:
15
-
16
-- **master**: You have updates as soon as they are committed. This is if you want to live on the bleeding edge or want to submit pull requests.
17
-- **rc**: If you don't want to update every day and deal with many instabilities but want to have recent updates, this is your best shot.
18
-- **release**: This is the most stable version we offer. The trade-off is that it contains commits that are up to a month old.
19
-
20
-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.
21
-
22
-<iframe width="650" height="300" src="https://www.youtube.com/embed/mOyoTUETmSM" frameborder="0" allowfullscreen></iframe>
docs/_posts/2015-06-12-deprecating-jstransform-and-react-tools.md
deleted
-29
@@ -1,29 +0,0 @@
1
----
2
-title: "Deprecating JSTransform and react-tools"
3
-author: [zpao]
4
----
5
-
6
-Today we're announcing the deprecation of react-tools and JSTransform.
7
-
8
-As many people have noticed already, React and React Native have both switched their respective build systems to make use of [Babel](http://babeljs.io/). This replaced [JSTransform](https://github.com/facebook/jstransform), the source transformation tool that we wrote at Facebook. JSTransform has been really good for us over the past several years, however as the JavaScript language continues to evolve, the architecture we used has begun to show its age. We've faced maintenance issues and lagged behind implementing new language features. Last year, Babel (previously 6to5) exploded onto the scene, implementing new features at an amazing pace. Since then it has evolved a solid plugin API, and implemented some of our non-standard language features (JSX and Flow type annotations).
9
-
10
-react-tools has always been a very thin wrapper around JSTransform. It has served as a great tool for the community to get up and running, but at this point we're ready to [let it go](https://www.youtube.com/watch?v=moSFlvxnbgk). We won't ship a new version for v0.14.
11
-
12
-## Migrating to Babel
13
-
14
-Many people in the React and broader JavaScript community have already adopted Babel. It has [integrations with a number of tools](http://babeljs.io/docs/setup/). Depending on your tool, you'll want to read up on the instructions.
15
-
16
-We've been working with the Babel team as we started making use of it and we're confident that it will be the right tool to use with React.
17
-
18
-## Other Deprecations
19
-
20
-### esprima-fb
21
-
22
-As a result of no longer maintaining JSTransform, we no longer have a need to maintain our Esprima fork ([esprima-fb](https://github.com/facebook/esprima/)). The upstream Esprima and other esprima-based forks, like Espree, have been doing an excellent job of supporting new language features recently. If you have a need of an esprima-based parser, we encourage you to look into using one of those.
23
-
24
-Alternatively, if you need to parse JSX, take a look at [acorn](https://github.com/marijnh/acorn) parser in combination with [acorn-jsx](https://github.com/RReverser/acorn-jsx) plugin which is used inside of Babel and thus always supports the latest syntax.
25
-
26
-### JSXTransformer
27
-JSXTransformer is another tool we built specifically for consuming JSX in the browser. It was always intended as a quick way to prototype code before setting up a build process. It would look for `<script>` tags with `type="text/jsx"` and then transform and run. This ran the same code that react-tools ran on the server. Babel ships with [a nearly identical tool](https://babeljs.io/docs/usage/browser/), which has already been integrated into [JS Bin](https://jsbin.com/).
28
-
29
-We'll be deprecating JSXTransformer, however the current version will still be available from various CDNs and Bower.
docs/_posts/2015-07-03-react-v0.14-beta-1.md
deleted
-75
@@ -1,75 +0,0 @@
1
----
2
-title: React v0.14 Beta 1
3
-author: [sophiebits]
4
----
5
-
6
-This week, many people in the React community are at [ReactEurope](https://www.react-europe.org/) in the beautiful (and very warm) city of Paris, the second React conference that's been held to date. At our last conference, we released the first beta of React 0.13, and we figured we'd do the same today with our first beta of React 0.14, giving you something to play with if you're not at the conference or you're looking for something to do on the way home.
7
-
8
-With React 0.14, we're continuing to let React mature and to make minor changes as the APIs continue to settle down. I'll talk only about the two largest changes in this blog post; when we publish the final release we'll be sure to update all of our documentation and include a full changelog.
9
-
10
-You can install the new beta with `npm install react@0.14.0-beta1` and `npm install react-dom@0.14.0-beta1`. As mentioned in [Deprecating react-tools](https://reactjs.org/blog/2015/06/12/deprecating-jstransform-and-react-tools.html), we're no longer updating the react-tools package so this release doesn't include a new version of it. Please try the new version out and let us know what you think, and please do file issues on our GitHub repo if you run into any problems.
11
-
12
-## Two Packages
13
-
14
-As we look at packages like [react-native](https://github.com/facebook/react-native), [react-art](https://github.com/reactjs/react-art), [react-canvas](https://github.com/Flipboard/react-canvas), and [react-three](https://github.com/Izzimach/react-three), it's become clear that the beauty and essence of React has nothing to do with browsers or the DOM.
15
-
16
-We think the true foundations of React are simply ideas of components and elements: being able to describe what you want to render in a declarative way. These are the pieces shared by all of these different packages. The parts of React specific to certain rendering targets aren't usually what we think of when we think of React. As one example, DOM diffing currently enables us to build React for the browser and make it fast enough to be useful, but if the DOM didn't have a stateful, imperative API, we might not need diffing at all.
17
-
18
-To make this more clear and to make it easier to build more environments that React can render to, we're splitting the main `react` package into two: `react` and `react-dom`.
19
-
20
-The `react` package contains `React.createElement`, `React.createClass` and `React.Component`, `React.PropTypes`, `React.Children`, and the other helpers related to elements and component classes. We think of these as the [_isomorphic_](http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/) or [_universal_](https://medium.com/@mjackson/universal-javascript-4761051b7ae9) helpers that you need to build components.
21
-
22
-The `react-dom` package contains `ReactDOM.render`, `ReactDOM.unmountComponentAtNode`, and `ReactDOM.findDOMNode`, and in `react-dom/server` we have server-side rendering support with `ReactDOMServer.renderToString` and `ReactDOMServer.renderToStaticMarkup`.
23
-
24
-```js
25
-var React = require('react');
26
-var ReactDOM = require('react-dom');
27
-
28
-var MyComponent = React.createClass({
29
- render: function() {
30
- return <div>Hello World</div>;
31
- }
32
-});
33
-
34
-ReactDOM.render(<MyComponent />, node);
35
-```
36
-
37
-We anticipate that most components will need to depend only on the `react` package, which is lightweight and doesn't include any of the actual rendering logic. To start, we expect people to render DOM-based components with our `react-dom` package, but there's nothing stopping someone from diving deep on performance and writing a `awesome-faster-react-dom` package which can render *the exact same DOM-based components*. By decoupling the component definitions from the rendering, this becomes possible.
38
-
39
-More importantly, this paves the way to writing components that can be shared between the web version of React and React Native. This isn't yet easily possible, but we intend to make this easy in a future version so you can share React code between your website and native apps.
40
-
41
-The addons have moved to separate packages as well: `react-addons-clone-with-props`, `react-addons-create-fragment`, `react-addons-css-transition-group`, `react-addons-linked-state-mixin`, `react-addons-pure-render-mixin`, `react-addons-shallow-compare`, `react-addons-transition-group`, and `react-addons-update`, plus `ReactDOM.unstable_batchedUpdates` in `react-dom`.
42
-
43
-For now, please use the same version of `react` and `react-dom` in your apps to avoid versioning problems -- but we plan to remove this requirement later. (This release includes the old methods in the `react` package with a deprecation warning, but they'll be removed completely in 0.15.)
44
-
45
-## DOM node refs
46
-
47
-The other big change we're making in this release is exposing refs to DOM components as the DOM node itself. That means: we looked at what you can do with a `ref` to a DOM component and realized that the only useful thing you can do with it is call `this.refs.giraffe.getDOMNode()` to get the underlying DOM node. In this release, `this.refs.giraffe` _is_ the actual DOM node.
48
-
49
-Refs to custom component classes work exactly as before.
50
-
51
-```js
52
-var Zoo = React.createClass({
53
- render: function() {
54
- return (
55
- <div>
56
- Giraffe's name: <input ref="giraffe" />
57
- </div>
58
- );
59
- },
60
-
61
- showName: function() {
62
- // Previously:
63
- // var input = this.refs.giraffe.getDOMNode();
64
- var input = this.refs.giraffe;
65
-
66
- alert(input.value);
67
- }
68
-});
69
-```
70
-
71
-This change also applies to the return result of `ReactDOM.render` when passing a DOM node as the top component. As with refs, this change does not affect custom components (eg. `<MyFancyMenu>` or `<MyContextProvider>`), which remain unaffected by this change.
72
-
73
-Along with this change, we're also replacing `component.getDOMNode()` with `ReactDOM.findDOMNode(component)`. The `findDOMNode` method drills down to find which DOM node was rendered by a component, but it returns its argument when passed a DOM node so it's safe to call on a DOM component too. We introduced this function quietly in the last release, but now we're deprecating `.getDOMNode()` completely: it should be easy to change all existing calls in your code to be `ReactDOM.findDOMNode`. We also have an [automated codemod script](https://www.npmjs.com/package/react-codemod) to help you with this transition. Note that the `findDOMNode` calls are unnecessary when you already have a DOM component ref (as in the example above), so you can (and should) skip them in most cases going forward.
74
-
75
-We hope you're as excited about this release as we are! Let us know what you think of it.
docs/_posts/2015-08-03-new-react-devtools-beta.md
deleted
-91
@@ -1,91 +0,0 @@
1
----
2
-title: "New React Devtools Beta"
3
-author: [jaredly]
4
----
5
-
6
-We've made an entirely new version of the devtools, and we want you to try it
7
-out!
8
-
9
-
10
-
11
-## Why entirely new?
12
-
13
-Perhaps the biggest reason was to create a defined API for dealing with
14
-internals, so that other tools could benefit as well and not have to depend on
15
-implementation details. This gives us more freedom to refactor things
16
-internally without worrying about breaking tooling.
17
-
18
-The current version of the devtools is a fork of Blink's "Elements" pane, and
19
-is imperative, mutation-driven, and tightly integrated with Chrome-specific
20
-APIs. The new devtools are much less coupled to Chrome, and easier to reason
21
-about thanks to React.
22
-
23
-## What are the benefits?
24
-
25
-- 100% React
26
-- Firefox compatible
27
-- React Native compatible
28
-- more extensible & hackable
29
-
30
-## Are there any new features?
31
-
32
-Yeah!
33
-
34
-### The Tree View
35
-
36
-
37
-
38
-- Much richer view of your props, including the contents of objects and arrays
39
-- Custom components are emphasized, native components are de-emphasized
40
-- Stateful components have a red collapser
41
-- Improved keyboard navigation (hjkl or arrow keys)
42
-- Selected component is available in the console as `$r`
43
-- Props that change highlight in green
44
-- Right-click menu
45
-
46
- - Scroll node into view
47
- - Show the source for a component in the "Sources" pane
48
- - Show the element in the "Elements" pane
49
-
50
-### Searching
51
-
52
-Select the search bar (or press "/"), and start searching for a component by
53
-name.
54
-
55
-
56
-
57
-### The Side Pane
58
-
59
-- Now shows the `context` for a component
60
-- Right-click to store a prop/state value as a global variable
61
-
62
-
63
-
64
-## How do I install it?
65
-
66
-First, disable the Chrome web store version, or it will break things. Then
67
-[download the .crx](https://github.com/facebook/react-devtools/releases) and
68
-drag it into your `chrome://extensions` page. If it's not working to drag it
69
-from the downloads bar, try opening your downloads folder and drag it from
70
-there.
71
-
72
-Once we've determined that there aren't any major regressions, we'll update
73
-the official web store version, and everyone will be automatically upgraded.
74
-
75
-### Also Firefox!
76
-
77
-We also have an initial version of the devtools for Firefox, which you can
78
-download from the same [release page](https://github.com/facebook/react-devtools/releases).
79
-
80
-## Feedback welcome
81
-
82
-Let us know what issues you run into
83
-[on GitHub](https://github.com/facebook/react-devtools/issues), and check out
84
-[the README](https://github.com/facebook/react-devtools/tree/devtools-next)
85
-for more info.
86
-
87
-## Update
88
-*August 12, 2015*
89
-
90
-A second beta is out, with a number of bugfixes. It is also listed on the
91
-[releases page](https://github.com/facebook/react-devtools/releases).
docs/_posts/2015-08-11-relay-technical-preview.md
deleted
-35
@@ -1,35 +0,0 @@
1
----
2
-title: "Relay Technical Preview"
3
-author: [josephsavona]
4
----
5
-
6
-# Relay
7
-
8
-Today we're excited to share an update on Relay - the technical preview is now open-source and [available on GitHub](http://github.com/facebook/relay).
9
-
10
-## Why Relay
11
-
12
-While React simplified the process of developing complex user-interfaces, it left open the question of how to interact with data on the server. It turns out that this was a significant source of friction for our developers; fragile coupling between client and server caused data-related bugs and made iteration harder. Furthermore, developers were forced to constantly re-implement complex async logic instead of focusing on their apps. Relay addresses these concerns by borrowing important lessons from React: it provides *declarative, component-oriented data fetching for React applications*.
13
-
14
-Declarative data-fetching means that Relay applications specify *what* data they need, not *how* to fetch that data. Just as React uses a description of the desired UI to manage view updates, Relay uses a data description in the form of GraphQL queries. Given these descriptions, Relay coalesces queries into batches for efficiency, manages error-prone asynchronous logic, caches data for performance, and automatically updates views as data changes.
15
-
16
-Relay is also component-oriented, extending the notion of a React component to include a description of what data is necessary to render it. This colocation allows developers to reason locally about their application and eliminates bugs such as under- or over-fetching data.
17
-
18
-Relay is in use at Facebook in production apps, and we're using it more and more because *Relay lets developers focus on their products and move fast*. It's working for us and we'd like to share it with the community.
19
-
20
-## What's Included
21
-
22
-We're open-sourcing a technical preview of Relay - the core framework that we use internally, with some modifications for use outside Facebook. As this is the first release, it's good to keep in mind that there may be some incomplete or missing features. We'll continue to develop Relay and are working closely with the GraphQL community to ensure that Relay tracks updates during GraphQL's RFC period. But we couldn't wait any longer to get this in your hands, and we're looking forward to your feedback and contributions.
23
-
24
-Relay is available on [GitHub](http://github.com/facebook/relay) and [npm](https://www.npmjs.com/package/react-relay).
25
-
26
-## What's Next
27
-
28
-The team is super excited to be releasing Relay - and just as excited about what's next. Here are some of the things we'll be focusing on:
29
-
30
-- Offline support. This will allow applications to fulfill queries and enqueue updates without connectivity.
31
-- Real-time updates. In collaboration with the GraphQL community, we're working to define a specification for subscriptions and provide support for them in Relay.
32
-- A generic Relay. Just as the power of React was never about the virtual DOM, Relay is much more than a GraphQL client. We're working to extend Relay to provide a unified interface for interacting not only with server data, but also in-memory and native device data (and, even better, a mix of all three).
33
-- Finally, it's all too easy as developers to focus on those people with the newest devices and fastest internet connections. We're working to make it easier to build applications that are robust in the face of slow or intermittent connectivity.
34
-
35
-Thanks!
docs/_posts/2015-08-13-reacteurope-roundup.md
deleted
-62
@@ -1,62 +0,0 @@
1
----
2
-title: "ReactEurope Round-up"
3
-layout: post
4
-author: [matthewjohnston4]
5
----
6
-
7
-Last month, the first React.js European conference took place in the city of Paris, at ReactEurope. Attendees were treated to a range of talks covering React, React Native, Flux, Relay, and GraphQL. Big thanks to everyone involved with organizing the conference, to all the attendees, and everyone who gave their time to speak - it wouldn't have been possible without the help and support of the React community.
8
-
9
-[Christopher Chedeau](https://github.com/vjeux) gave the opening keynote to the conference:
10
-
11
-<iframe width="650" height="366" src="//www.youtube.com/embed/PAA9O4E1IM4" frameborder="0" allowfullscreen></iframe>
12
-
13
-[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:
14
-
15
-<iframe width="650" height="366" src="//www.youtube.com/embed/xDlfrcM6YBk" frameborder="0" allowfullscreen></iframe>
16
-
17
-[Lee Byron](https://github.com/leebyron) explores GraphQL, its core principles, how it works, and what makes it a powerful tool:
18
-
19
-<iframe width="650" height="366" src="//www.youtube.com/embed/WQLzZf34FJ8" frameborder="0" allowfullscreen></iframe>
20
-
21
-[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:
22
-
23
-<iframe width="650" height="366" src="//www.youtube.com/embed/IrgHurBjQbg" frameborder="0" allowfullscreen></iframe>
24
-
25
-[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?
26
-
27
-<iframe width="650" height="366" src="//www.youtube.com/embed/gY48GW87Feo" frameborder="0" allowfullscreen></iframe>
28
-
29
-[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:
30
-
31
-<iframe width="650" height="366" src="//www.youtube.com/embed/Zemce4Y1Y-A" frameborder="0" allowfullscreen></iframe>
32
-
33
-[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:
34
-
35
-<iframe width="650" height="366" src="//www.youtube.com/embed/OFuDvqZmUrE" frameborder="0" allowfullscreen></iframe>
36
-
37
-[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:
38
-
39
-<iframe width="650" height="366" src="//www.youtube.com/embed/1tavDv5hXpo" frameborder="0" allowfullscreen></iframe>
40
-
41
-And there was a Q&A session with the whole team covering a range of React topics:
42
-
43
-<iframe width="650" height="366" src="//www.youtube.com/embed/CRJZBZ_-6hQ" frameborder="0" allowfullscreen></iframe>
44
-
45
-And there were lots of great talks from the React community:
46
-
47
-* [Michael Chan](https://www.youtube.com/watch?v=ERB1TJBn32c&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD&index=2) looks at how to solve problems like CSS theming and media queries with contexts and plain old JavaScript. He also looks at the role of container-components and when it's better to "just use CSS.".
48
-* [Elie Rotenberg](https://www.youtube.com/watch?v=JSjhhUvB9DY&index=3&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD) talks about Flux over the Wire, building isomorphic, real-time React apps using a novel interpretation of Flux.
49
-* [Ryan Florence](https://www.youtube.com/watch?v=BF58ZJ1ZQxY&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD&index=6) says “Your front and back ends are already successfully in production but you don't have to miss out on the productivity that React brings. Forget the rewrites, this is brownfield!”.
50
-* [Dan Abramov](https://www.youtube.com/watch?v=xsSnOQynTHs&index=7&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD) demonstrates how React can be used together with webpack Hot Module Replacement to create a live editing environment with time travel that supercharges your debugging experience and transforms the way you work on real apps every day.
51
-* [Mikhail Davydov](https://www.youtube.com/watch?v=ee_U2t-8L48&index=10&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD) shows you how to ask the browser layout engine for help, how to avoid slavery of DSL, and build declarative Text UI using only web-technologies like HTML, JS, CSS and React.
52
-* [Kevin Robinson](https://www.youtube.com/watch?v=EOz4D_714R8&list=PLCC436JpVnK3HvUSAHpt-LRJkIK8pQG6R&index=3) shares how user experience choices are a primary influence on how Twitter design the data layer, especially for teams developing new products with full-stack capabilities.
53
-* [Jed Watson](https://www.youtube.com/watch?v=ctwmd5L1U_Q&list=PLCC436JpVnK3HvUSAHpt-LRJkIK8pQG6R&index=4) shares what Thinkmill have learned about React and mobile app development, and how they've approached the unique challenges of mobile web apps - with tools that are useful to all developers building touch interfaces with React, as well as a walkthrough of their development process and framework.
54
-* [Michael Jackson](https://www.youtube.com/watch?v=Q6Kczrgw6ic&list=PLCC436JpVnK3HvUSAHpt-LRJkIK8pQG6R&index=5) discusses how your users can benefit from the many tools that React Router provides including server-side rendering, real URLs on native devices, and much, much more.
55
-* [Michael Ridgway](https://www.youtube.com/watch?v=MrozpFEBEBE&index=7&list=PLCC436JpVnK3HvUSAHpt-LRJkIK8pQG6R) walks you through an isomorphic Flux architecture to give you the holy grail of frontend development.
56
-* [Aria Buckles](https://www.youtube.com/watch?v=2Qu-Ulrsfl8&index=8&list=PLCC436JpVnK3HvUSAHpt-LRJkIK8pQG6R) covers Khan Academy's techniques and patterns to make dealing with large pure components simpler, as well as current open questions.
57
-* [Evan Morikawa and Ben Gotow](https://www.youtube.com/watch?v=Uu4Yz2HmCgE&index=9&list=PLCC436JpVnK3HvUSAHpt-LRJkIK8pQG6R) talk about specific features of React & Flux, React CSS, programming design patterns, and custom libraries, which can turn a static application into a dynamic platform that an ecosystem of developers can build on top of.
58
-* [Zalando](https://www.youtube.com/watch?v=3EQhkquvVmY&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD&index=9), [Rangle.io](https://www.youtube.com/watch?v=nAWKR1bBDsU&index=12&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD), [Automattic](https://www.youtube.com/watch?v=hjhyrBbDp6U&index=13&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD), [Thinkmill](https://www.youtube.com/watch?v=ApoCktYaRxk&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD&index=14), and [Red Badger](https://www.youtube.com/watch?v=hdKidiwR8DM&list=PLCC436JpVnK0Phxld2dD4tM4xPMxJCiRD&index=15) provided lots of insight into how larger companies are using React.
59
-
60
-There was also a [great series of Lightning talks](https://www.youtube.com/playlist?list=PLCC436JpVnK3xnOZ727t0vd3nbb5ZqCyo) from [Joshua Sierles](https://github.com/jsierles), [Ovidiu Cherecheș](https://github.com/skidding), [Mike Grabowski](https://github.com/grabbou), [Dave Brotherstone](https://github.com/bruderstein), [Sunil Pai](https://github.com/threepointone), [Andreas Savvides](https://github.com/AnSavvides), and [Petr Bela](https://github.com/petrbela).
61
-
62
-You can view the full list of talks on [the ReactEurope YouTube channel](https://www.youtube.com/channel/UCorlLn2oZfgOJ-FUcF2eZ1A).
docs/_posts/2015-09-02-new-react-developer-tools.md
deleted
-27
@@ -1,27 +0,0 @@
1
----
2
-title: "New React Developer Tools"
3
-layout: post
4
-author: [sophiebits]
5
----
6
-
7
-A month ago, we [posted a beta](/blog/2015/08/03/new-react-devtools-beta.html) of the new React developer tools. Today, we're releasing the first stable version of the new devtools. We're calling it version 0.14, but it's a full rewrite so we think of it more like a 2.0 release.
8
-
9
-
10
-
11
-It contains a handful of new features, including:
12
-
13
-* Built entirely with React, making it easier to develop and extend
14
-* Firefox support
15
-* Selected component instance is available as `$r` from the console
16
-* More detail is shown in props in the component tree
17
-* Right-click any node and choose "Show Source" to jump to the `render` method in the Sources panel
18
-* Right-click any props or state value to make it available as `$tmp` from the console
19
-* Full React Native support
20
-
21
-## Installation
22
-
23
-Download the new devtools from the [Chrome Web Store](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) and on [Mozilla Add-ons](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) for Firefox. If you're developing using React, we highly recommend installing these devtools.
24
-
25
-If you already have the Chrome extension installed, it should autoupdate within the next week. You can also head to `chrome://extensions` and click "Update extensions now" if you'd like to get the new version today. If you installed the devtools beta, please remove it and switch back to the version from the store to make sure you always get the latest updates and bug fixes.
26
-
27
-If you run into any issues, please post them on our [react-devtools GitHub repo](https://github.com/facebook/react-devtools).
docs/_posts/2015-09-10-react-v0.14-rc1.md
deleted
-179
@@ -1,179 +0,0 @@
1
----
2
-title: "React v0.14 Release Candidate"
3
-author: [sophiebits]
4
----
5
-
6
-We’re happy to announce our first release candidate for React 0.14! We gave you a [sneak peek in July](/blog/2015/07/03/react-v0.14-beta-1.html) at the upcoming changes but we’ve now stabilized the release more and we’d love for you to try it out before we release the final version.
7
-
8
-Let us know if you run into any problems by filing issues on our [GitHub repo](https://github.com/facebook/react).
9
-
10
-## Installation
11
-
12
-We recommend using React from `npm` and using a tool like browserify or webpack to build your code into a single package:
13
-
14
-* `npm install --save react@0.14.0-rc1`
15
-* `npm install --save react-dom@0.14.0-rc1`
16
-
17
-Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, set the `NODE_ENV` environment variable to `production` to use the production build of React which does not include the development warnings and runs significantly faster.
18
-
19
-If you can’t use `npm` yet, we also provide pre-built browser builds for your convenience:
20
-
21
-* **React**
22
- Dev build with warnings: <https://fb.me/react-0.14.0-rc1.js>
23
- Minified build for production: <https://fb.me/react-0.14.0-rc1.min.js>
24
-* **React with Add-Ons**
25
- Dev build with warnings: <https://fb.me/react-with-addons-0.14.0-rc1.js>
26
- Minified build for production: <https://fb.me/react-with-addons-0.14.0-rc1.min.js>
27
-* **React DOM** (include React in the page before React DOM)
28
- Dev build with warnings: <https://fb.me/react-dom-0.14.0-rc1.js>
29
- Minified build for production: <https://fb.me/react-dom-0.14.0-rc1.min.js>
30
-
31
-These builds are also available in the `react` package on bower.
32
-
33
-## Changelog
34
-
35
-### Major changes
36
-
37
-- #### Two Packages: React and React DOM
38
-
39
- As we look at packages like [react-native](https://github.com/facebook/react-native), [react-art](https://github.com/reactjs/react-art), [react-canvas](https://github.com/Flipboard/react-canvas), and [react-three](https://github.com/Izzimach/react-three), it has become clear that the beauty and essence of React has nothing to do with browsers or the DOM.
40
-
41
- To make this more clear and to make it easier to build more environments that React can render to, we’re splitting the main `react` package into two: `react` and `react-dom`. **This paves the way to writing components that can be shared between the web version of React and React Native.** We don’t expect all the code in an app to be shared, but we want to be able to share the components that do behave the same across platforms.
42
-
43
- The `react` package contains `React.createElement`, `.createClass`, `.Component`, `.PropTypes`, `.Children`, and the other helpers related to elements and component classes. We think of these as the [_isomorphic_](http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/) or [_universal_](https://medium.com/@mjackson/universal-javascript-4761051b7ae9) helpers that you need to build components.
44
-
45
- The `react-dom` package has `ReactDOM.render`, `.unmountComponentAtNode`, and `.findDOMNode`. In `react-dom/server` we have server-side rendering support with `ReactDOMServer.renderToString` and `.renderToStaticMarkup`.
46
-
47
- ```js
48
- var React = require('react');
49
- var ReactDOM = require('react-dom');
50
-
51
- var MyComponent = React.createClass({
52
- render: function() {
53
- return <div>Hello World</div>;
54
- }
55
- });
56
-
57
- ReactDOM.render(<MyComponent />, node);
58
- ```
59
-
60
- We’ve published the [automated codemod script](https://github.com/reactjs/react-codemod/blob/master/README.md) we used at Facebook to help you with this transition.
61
-
62
- The add-ons have moved to separate packages as well: `react-addons-clone-with-props`, `react-addons-create-fragment`, `react-addons-css-transition-group`, `react-addons-linked-state-mixin`, `react-addons-perf`, `react-addons-pure-render-mixin`, `react-addons-shallow-compare`, `react-addons-test-utils`, `react-addons-transition-group`, and `react-addons-update`, plus `ReactDOM.unstable_batchedUpdates` in `react-dom`.
63
-
64
- For now, please use matching versions of `react` and `react-dom` in your apps to avoid versioning problems.
65
-
66
-- #### DOM node refs
67
-
68
- The other big change we’re making in this release is exposing refs to DOM components as the DOM node itself. That means: we looked at what you can do with a `ref` to a React DOM component and realized that the only useful thing you can do with it is call `this.refs.giraffe.getDOMNode()` to get the underlying DOM node. In this release, `this.refs.giraffe` _is_ the actual DOM node. **Note that refs to custom (user-defined) components work exactly as before; only the built-in DOM components are affected by this change.**
69
-
70
- ```js
71
- var Zoo = React.createClass({
72
- render: function() {
73
- return <div>Giraffe name: <input ref="giraffe" /></div>;
74
- },
75
- showName: function() {
76
- // Previously: var input = this.refs.giraffe.getDOMNode();
77
- var input = this.refs.giraffe;
78
- alert(input.value);
79
- }
80
- });
81
- ```
82
-
83
- This change also applies to the return result of `ReactDOM.render` when passing a DOM node as the top component. As with refs, this change does not affect custom components. With these changes, we’re deprecating `.getDOMNode()` and replacing it with `ReactDOM.findDOMNode` (see below).
84
-
85
-- #### Stateless function components
86
-
87
- In idiomatic React code, most of the components you write will be stateless, simply composing other components. We’re introducing a new, simpler syntax for these components where you can take `props` as an argument and return the element you want to render:
88
-
89
- ```js
90
- // Using an ES2015 (ES6) arrow function:
91
- var Aquarium = (props) => {
92
- var fish = getFish(props.species);
93
- return <Tank>{fish}</Tank>;
94
- };
95
-
96
- // Or with destructuring and an implicit return, simply:
97
- var Aquarium = ({species}) => (
98
- <Tank>
99
- {getFish(species)}
100
- </Tank>
101
- );
102
-
103
- // Then use: <Aquarium species="rainbowfish" />
104
- ```
105
-
106
- This pattern is designed to encourage the creation of these simple components that should comprise large portions of your apps. In the future, we’ll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations.
107
-
108
-- #### Deprecation of react-tools
109
-
110
- The `react-tools` package and `JSXTransformer.js` browser file [have been deprecated](/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.
111
-
112
-- #### Compiler optimizations
113
-
114
- React now supports two compiler optimizations that can be enabled in Babel 5.8.23 and newer. Both of these transforms **should be enabled only in production** (e.g., just before minifying your code) because although they improve runtime performance, they make warning messages more cryptic and skip important checks that happen in development mode, including propTypes.
115
-
116
- **Inlining React elements:** The `optimisation.react.inlineElements` transform converts JSX elements to object literals like `{type: 'div', props: ...}` instead of calls to `React.createElement`.
117
-
118
- **Constant hoisting for React elements:** The `optimisation.react.constantElements` transform hoists element creation to the top level for subtrees that are fully static, which reduces calls to `React.createElement` and the resulting allocations. More importantly, it tells React that the subtree hasn’t changed so React can completely skip it when reconciling.
119
-
120
-
121
-### Breaking changes
122
-
123
-As always, we have a few breaking changes in this release. Whenever we make large changes, we warn for at least one release so you have time to update your code. The Facebook codebase has over 15,000 React components, so on the React team, we always try to minimize the pain of breaking changes.
124
-
125
-These three breaking changes had a warning in 0.13, so you shouldn’t have to do anything if your code is already free of warnings:
126
-
127
-- The `props` object is now frozen, so mutating props after creating a component element is no longer supported. In most cases, [`React.cloneElement`](/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.
128
-- Plain objects are no longer supported as React children; arrays should be used instead. You can use the [`createFragment`](/docs/create-fragment.html) helper to migrate, which now returns an array.
129
-- Add-Ons: `classSet` has been removed. Use [classnames](https://github.com/JedWatson/classnames) instead.
130
-
131
-And these two changes did not warn in 0.13 but should be easy to find and clean up:
132
-
133
-- `React.initializeTouchEvents` is no longer necessary and has been removed completely. Touch events now work automatically.
134
-- 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.
135
-
136
-### New deprecations, introduced with a warning
137
-
138
-- Due to the DOM node refs change mentioned above, `this.getDOMNode()` is now deprecated and `ReactDOM.findDOMNode(this)` can be used instead. Note that in most cases, calling `findDOMNode` is now unnecessary – see the example above in the “DOM node refs” section.
139
-
140
- If you have a large codebase, you can use our [automated codemod script](https://github.com/facebook/react/blob/master/packages/react-codemod/README.md) to change your code automatically.
141
-
142
-- `setProps` and `replaceProps` are now deprecated. Instead, call ReactDOM.render again at the top level with the new props.
143
-- ES6 component classes must now extend `React.Component` in order to enable stateless function components. The [ES3 module pattern](/blog/2015/01/27/react-v0.13.0-beta-1.html#other-languages) will continue to work.
144
-- Reusing and mutating a `style` object between renders has been deprecated. This mirrors our change to freeze the `props` object.
145
-- Add-Ons: `cloneWithProps` is now deprecated. Use [`React.cloneElement`](/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).
146
-- 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}`.
147
-
148
-### Notable enhancements
149
-
150
-- Added `React.Children.toArray` which takes a nested children object and returns a flat array with keys assigned to each child. This helper makes it easier to manipulate collections of children in your `render` methods, especially if you want to reorder or slice `this.props.children` before passing it down. In addition, `React.Children.map` now returns plain arrays too.
151
-- React uses `console.error` instead of `console.warn` for warnings so that browsers show a full stack trace in the console. (Our warnings appear when you use patterns that will break in future releases and for code that is likely to behave unexpectedly, so we do consider our warnings to be “must-fix” errors.)
152
-- Previously, including untrusted objects as React children [could result in an XSS security vulnerability](http://danlec.com/blog/xss-via-a-spoofed-react-element). This problem should be avoided by properly validating input at the application layer and by never passing untrusted objects around your application code. As an additional layer of protection, [React now tags elements](https://github.com/facebook/react/pull/4832) with a specific [ES2015 (ES6) `Symbol`] (http://www.2ality.com/2014/12/es6-symbols.html) in browsers that support it, in order to ensure that React never considers untrusted JSON to be a valid element. If this extra security protection is important to you, you should add a `Symbol` polyfill for older browsers, such as the one included by [Babel’s polyfill](http://babeljs.io/docs/usage/polyfill/).
153
-- When possible, React DOM now generates XHTML-compatible markup.
154
-- React DOM now supports these standard HTML attributes: `capture`, `challenge`, `inputMode`, `is`, `keyParams`, `keyType`, `minLength`, `summary`, `wrap`. It also now supports these non-standard attributes: `autoSave`, `results`, `security`.
155
-- React DOM now supports these SVG attributes, which render into namespaced attributes: `xlinkActuate`, `xlinkArcrole`, `xlinkHref`, `xlinkRole`, `xlinkShow`, `xlinkTitle`, `xlinkType`, `xmlBase`, `xmlLang`, `xmlSpace`.
156
-- The `image` SVG tag is now supported by React DOM.
157
-- In React DOM, arbitrary attributes are supported on custom elements (those with a hyphen in the tag name or an `is="..."` attribute).
158
-- React DOM now supports these media events on `audio` and `video` tags: `onAbort`, `onCanPlay`, `onCanPlayThrough`, `onDurationChange`, `onEmptied`, `onEncrypted`, `onEnded`, `onError`, `onLoadedData`, `onLoadedMetadata`, `onLoadStart`, `onPause`, `onPlay`, `onPlaying`, `onProgress`, `onRateChange`, `onSeeked`, `onSeeking`, `onStalled`, `onSuspend`, `onTimeUpdate`, `onVolumeChange`, `onWaiting`.
159
-- Many small performance improvements have been made.
160
-- Many warnings show more context than before.
161
-- Add-Ons: A [`shallowCompare`](https://github.com/facebook/react/pull/3355) add-on has been added as a migration path for `PureRenderMixin` in ES6 classes.
162
-- Add-Ons: `CSSTransitionGroup` can now use [custom class names](https://github.com/facebook/react/blob/48942b85/docs/docs/10.1-animation.md#custom-classes) instead of appending `-enter-active` or similar to the transition name.
163
-
164
-### New helpful warnings
165
-
166
-- React DOM now warns you when nesting HTML elements invalidly, which helps you avoid surprising errors during updates.
167
-- Passing `document.body` directly as the container to `ReactDOM.render` now gives a warning as doing so can cause problems with browser extensions that modify the DOM.
168
-- Using multiple instances of React together is not supported, so we now warn when we detect this case to help you avoid running into the resulting problems.
169
-
170
-### Notable bug fixes
171
-
172
-- Click events are handled by React DOM more reliably in mobile browsers, particularly in Mobile Safari.
173
-- SVG elements are created with the correct namespace in more cases.
174
-- React DOM now renders `<option>` elements with multiple text children properly and renders `<select>` elements on the server with the correct option selected.
175
-- When two separate copies of React add nodes to the same document (including when a browser extension uses React), React DOM tries harder not to throw exceptions during event handling.
176
-- Using non-lowercase HTML tag names in React DOM (e.g., `React.createElement('DIV')`) no longer causes problems, though we continue to recommend lowercase for consistency with the JSX tag name convention (lowercase names refer to built-in components, capitalized names refer to custom components).
177
-- React DOM understands that these CSS properties are unitless and does not append “px” to their values: `animationIterationCount`, `boxOrdinalGroup`, `flexOrder`, `tabSize`, `stopOpacity`.
178
-- Add-Ons: When using the test utils, `Simulate.mouseEnter` and `Simulate.mouseLeave` now work.
179
-- Add-Ons: ReactTransitionGroup now correctly handles multiple nodes being removed simultaneously.
docs/_posts/2015-09-14-community-roundup-27.md
deleted
-80
@@ -1,80 +0,0 @@
1
----
2
-title: "Community Round-up #27 – Relay Edition"
3
-layout: post
4
-author: [steveluscher]
5
----
6
-
7
-In the weeks following the [open-source release](/blog/2015/08/11/relay-technical-preview.html) of the Relay technical preview, the community has been abuzz with activity. We are honored to have been able to enjoy a steady stream of ideas and contributions from such a talented group of individuals. Let's take a look at some of the things we've achieved, together!
8
-
9
-## Teaching servers to speak GraphQL
10
-
11
-Every great Relay app starts by finding a GraphQL server to talk to. The community has spent the past few weeks teaching GraphQL to a few backend systems.
12
-
13
-Bryan Goldstein ([brysgo](https://github.com/brysgo)) has built a tool to help you define a GraphQL schema that wraps a set of [Bookshelf.JS](http://bookshelfjs.org/) models. Check out [graphql-bookshelf](https://github.com/brysgo/graphql-bookshelf).
14
-
15
-RisingStack ([risingstack](https://github.com/risingstack)) created a GraphQL ORM called [graffiti](https://github.com/RisingStack/graffiti) that you can plug into [mongoose](http://mongoosejs.com/) and serve using Express, Hapi, or Koa.
16
-
17
-David Mongeau-Petitpas ([dmongeau](https://github.com/dmongeau)) is working on a way to vend your Laravel models through a GraphQL endpoint, [laravel-graphql](https://github.com/Folkloreatelier/laravel-graphql).
18
-
19
-Gerald Monaco ([devknoll](https://github.com/devknoll)) created [graphql-schema](https://github.com/devknoll/graphql-schema) to allow the creation of JavaScript GraphQL schemas using a fluent/chainable interface.
20
-
21
-Jason Dusek ([solidsnack](https://github.com/solidsnack)) dove deep into PostgreSQL to teach it how to respond to GraphQL query strings as though they were SQL queries. Check out [GraphpostgresQL](https://github.com/solidsnack/GraphpostgresQL).
22
-
23
-Espen Hovlandsdal ([rexxars](https://github.com/rexxars)) built a [sql-to-graphql](https://github.com/vaffel/sql-to-graphql) tool that can perform introspection on the tables of a MySQL or PostgreSQL database, and produce a queryable HTTP GraphQL endpoint out of it.
24
-
25
-Mick Hansen ([mickhansen](https://github.com/mickhansen)) offers a set of [schema-building helpers](https://github.com/mickhansen/graphql-sequelize) for use with the [Sequelize ORM](http://docs.sequelizejs.com/en/latest/) for MySQL, PostgreSQL, SQLite, and MSSQL.
26
-
27
-## GraphQL beyond JavaScript
28
-
29
-Robert Mosolgo ([rmosolgo](https://github.com/rmosolgo)) brought the full set of schema-building and query execution tools to Ruby, in the form of [graphql-ruby](https://github.com/rmosolgo/graphql-ruby) and [graphql-relay-ruby](https://github.com/rmosolgo/graphql-relay-ruby). Check out his [Rails-based demo](https://github.com/rmosolgo/graphql-ruby-demo).
30
-
31
-Andreas Marek ([andimarek](https://github.com/andimarek)) has brewed up a Java implementation of GraphQL, [graphql-java](https://github.com/andimarek/graphql-java).
32
-
33
-[vladar](https://github.com/vladar) is hard at work on a PHP port of the GraphQL reference implementation, [graphql-php](https://github.com/webonyx/graphql-php).
34
-
35
-Taeho Kim ([dittos](https://github.com/dittos)) is bringing GraphQL to Python, with [graphql-py](https://github.com/dittos/graphql-py).
36
-
37
-Oleg Ilyenko ([OlegIlyenko](https://github.com/OlegIlyenko)) made a beautiful and [delicious-looking website](http://sangria-graphql.org/) for a Scala implementation of GraphQL, [sangria](https://github.com/sangria-graphql/sangria).
38
-
39
-Joe McBride ([joemcbride](https://github.com/joemcbride)) has an up-and-running example of GraphQL for .NET, [graphql-dotnet](https://github.com/joemcbride/graphql-dotnet).
40
-
41
-## Show me, don't tell me
42
-
43
-Interact with this [visual tour of Relay's architecture](http://sgwilym.github.io/relay-visual-learners/) by Sam Gwilym ([sgwilym](https://github.com/sgwilym)).
44
-
45
-<a href="http://sgwilym.github.io/relay-visual-learners/">
46
- <img src="../img/blog/relay-visual-architecture-tour.png" alt="Relay for visual learners" style="max-width:100%">
47
-</a>
48
-
49
-Sam has already launched a product that leverages Relay's data-fetching, optimistic responses, pagination, and mutations – all atop a Ruby GraphQL server: [new.comique.co](http://new.comique.co/)
50
-
51
-## Skeletons in the closet
52
-
53
-Joseph Rollins ([fortruce](https://github.com/fortruce)) created a hot-reloading, auto schema-regenerating, [Relay skeleton](https://github.com/fortruce/relay-skeleton) that you can use to get up and running quickly.
54
-
55
-Michael Hart ([mhart](https://mhart)) built a [simple-relay-starter](https://github.com/mhart/simple-relay-starter) kit using Browserify.
56
-
57
-## Routing around
58
-
59
-Jimmy Jia ([taion](https://github.com/taion)) and Gerald Monaco ([devknoll](https://github.com/devknoll)) have been helping lost URLs find their way to Relay apps through their work on [react-router-relay](https://github.com/relay-tools/react-router-relay). Check out Christoph Nakazawa's ([cpojer](https://github.com/cpojer)) [blog post](https://medium.com/@cpojer/relay-and-routing-36b5439bad9) on the topic. Jimmy completed the Relay TodoMVC example with routing, which you can check out at [taion/relay-todomvc](https://github.com/taion/relay-todomvc).
60
-
61
-Chen Hung-Tu ([transedward](https://github.com/transedward)) built a chat app atop the above mentioned router, with threaded conversations and pagination. Check it out at [transedward/relay-chat](https://github.com/transedward/relay-chat).
62
-
63
-## In your words
64
-
65
-<div class="skinny-row">
66
- <div class="skinny-col">
67
- <blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">Relay making good on its promise to be the "React.js of data fetching". Rebuilding small app with it. Spectacular how fast/easy building is.</p>— Kyle Mathews (@kylemathews) <a href="https://twitter.com/kylemathews/status/640289107122368513">September 5, 2015</a></blockquote>
68
-
69
- <blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/hashtag/RainySundayHackathon?src=hash">#RainySundayHackathon</a> exploring <a href="https://twitter.com/hashtag/GraphQL?src=hash">#GraphQL</a> <a href="https://twitter.com/hashtag/RelayJS?src=hash">#RelayJS</a> <a href="http://t.co/Mm3HlqMejJ">pic.twitter.com/Mm3HlqMejJ</a></p>— Bastian Kistner (@passionkind) <a href="https://twitter.com/passionkind/status/632846601447411712">August 16, 2015</a></blockquote>
70
-
71
- <blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">Friday. Time to GraphQL a MySQL database. <a href="https://twitter.com/hashtag/graphql?src=hash">#graphql</a> <a href="https://twitter.com/hashtag/relayjs?src=hash">#relayjs</a> <a href="https://twitter.com/hashtag/reactjs?src=hash">#reactjs</a> <a href="https://twitter.com/hashtag/webapp?src=hash">#webapp</a></p>— xador (@xadorfr) <a href="https://twitter.com/xadorfr/status/632108552765751296">August 14, 2015</a></blockquote>
72
- </div>
73
- <div class="skinny-col">
74
- <blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">Started a new <a href="https://twitter.com/hashtag/RelayJS?src=hash">#RelayJS</a> and <a href="https://twitter.com/hashtag/GraphQL?src=hash">#GraphQL</a> meet up group! <a href="http://t.co/Vt6Cv4nNH4">http://t.co/Vt6Cv4nNH4</a> If you're in the Bay Area, I'd love to have you join! <a href="https://twitter.com/hashtag/ReactJS?src=hash">#ReactJS</a></p>— Gerald Monaco (@devknoll) <a href="https://twitter.com/devknoll/status/636723716123000832">August 27, 2015</a></blockquote>
75
-
76
- <blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">.<a href="https://twitter.com/reactjs">@reactjs</a> <a href="https://twitter.com/laneykuenzel">@laneykuenzel</a> <a href="https://twitter.com/BhuwanKhattar">@BhuwanKhattar</a> these <a href="https://twitter.com/hashtag/relayjs?src=hash">#relayjs</a> mutations. they're mind-blowingly awesome. they make so much damn sense. thank you!</p>— Jimmy Jia (@jimmy_jia) <a href="https://twitter.com/jimmy_jia/status/634204563709526016">August 20, 2015</a></blockquote>
77
-
78
- <blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">REST is dead, long live REST! <a href="https://twitter.com/hashtag/graphql?src=hash">#graphql</a> <a href="https://twitter.com/hashtag/relayjs?src=hash">#relayjs</a></p>— Syrus Akbary (@syrusakbary) <a href="https://twitter.com/syrusakbary/status/631531666113060864">August 12, 2015</a></blockquote>
79
- </div>
80
-</div>
docs/_posts/2015-10-01-react-render-and-top-level-api.md
deleted
-133
@@ -1,133 +0,0 @@
1
----
2
-title: "ReactDOM.render and the Top Level React API"
3
-author: ["jimfb", "sebmarkbage"]
4
----
5
-
6
-
7
-When you're in React's world you are just building components that fit into other components. Everything is a component. Unfortunately not everything around you is built using React. At the root of your tree you still have to write some plumbing code to connect the outer world into React.
8
-
9
-The primary API for rendering into the DOM looks like this:
10
-
11
-```js
12
-ReactDOM.render(reactElement, domContainerNode)
13
-```
14
-
15
-To update the properties of an existing component, you call render again with a new element.
16
-
17
-If you are rendering React components within a single-page app, you may need to plug into the app's view lifecycle to ensure your app will invoke unmountComponentAtNode at the appropriate time. React will not automatically clean up a tree. You need to manually call:
18
-
19
-```js
20
-ReactDOM.unmountComponentAtNode(domContainerNode)
21
-```
22
-
23
-This is important and often forgotten. Forgetting to call `unmountComponentAtNode` will cause your app to leak memory. There is no way for us to automatically detect when it is appropriate to do this work. Every system is different.
24
-
25
-It is not unique to the DOM. If you want to insert a React Native view in the middle of an existing iOS app you will hit similar issues.
26
-
27
-## Helpers
28
-
29
-If you have multiple React roots, or a single root that gets deleted over time, we recommend that you always create your own wrapper API. These will all look slightly different depending on what your outer system looks like. For example, at Facebook we have a system that automatically ties into our page transition router to automatically call `unmountComponentAtNode`.
30
-
31
-Rather than calling `ReactDOM.render()` directly everywhere, consider writing/using a library that will manage mounting and unmounting within your application.
32
-
33
-In your environment you may want to always configure internationalization, routers, user data etc. If you have many different React roots it can be a pain to set up configuration nodes all over the place. By creating your own wrapper you can unify that configuration into one place.
34
-
35
-## Object Oriented Updates
36
-
37
-If you call `ReactDOM.render` a second time to update properties, all your props are completely replaced.
38
-
39
-```js
40
-ReactDOM.render(<App locale="en-US" userID={1} />, container);
41
-// props.userID == 1
42
-// props.locale == "en-US"
43
-ReactDOM.render(<App userID={2} />, container);
44
-// props.userID == 2
45
-// props.locale == undefined ??!?
46
-```
47
-
48
-In object-oriented programming, all state lives on each object instance and you apply changes incrementally by mutating that state, one piece at a time. If you are using React within an app that expects an object oriented API (for instance, if you are building a custom web component using React), it might be surprising/confusing to a user that setting a single property would wipe out all the other properties on your component.
49
-
50
-We used to have a helper function called `setProps` which allowed you to update only a few properties at a time. Unfortunately this API lived on a component instance, required React to keep this state internally and wasn't very natural anyway. Therefore, we're deprecating it and suggest that you build it into your own wrapper instead.
51
-
52
-Here's some boilerplate to get you started. It is a 0.14 migration path for codebases using `setProps` and `replaceProps`.
53
-
54
-```js
55
-class ReactComponentRenderer {
56
- constructor(klass, container) {
57
- this.klass = klass;
58
- this.container = container;
59
- this.props = {};
60
- this.component = null;
61
- }
62
-
63
- replaceProps(props, callback) {
64
- this.props = {};
65
- this.setProps(props, callback);
66
- }
67
-
68
- setProps(partialProps, callback) {
69
- if (this.klass == null) {
70
- console.warn(
71
- 'setProps(...): Can only update a mounted or ' +
72
- 'mounting component. This usually means you called setProps() on ' +
73
- 'an unmounted component. This is a no-op.'
74
- );
75
- return;
76
- }
77
- Object.assign(this.props, partialProps);
78
- var element = React.createElement(this.klass, this.props);
79
- this.component = ReactDOM.render(element, this.container, callback);
80
- }
81
-
82
- unmount() {
83
- ReactDOM.unmountComponentAtNode(this.container);
84
- this.klass = null;
85
- }
86
-}
87
-```
88
-
89
-Object-oriented APIs don't look like that though. They use setters and methods. I think we can do better. If you know more about the component API that you're rendering, you can create a more natural object-oriented API around your React component.
90
-
91
-```js
92
-class ReactVideoPlayer {
93
- constructor(url, container) {
94
- this._container = container;
95
- this._url = url;
96
- this._isPlaying = false;
97
- this._render();
98
- }
99
-
100
- _render() {
101
- ReactDOM.render(
102
- <VideoPlayer url={this._url} playing={this._isPlaying} />,
103
- this._container
104
- );
105
- }
106
-
107
- get url() {
108
- return this._url;
109
- }
110
-
111
- set url(value) {
112
- this._url = value;
113
- this._render();
114
- }
115
-
116
- play() {
117
- this._isPlaying = true;
118
- this._render();
119
- }
120
-
121
- pause() {
122
- this._isPlaying = false;
123
- this._render();
124
- }
125
-
126
- destroy() {
127
- ReactDOM.unmountComponentAtNode(this._container);
128
- }
129
-}
130
-```
131
-
132
-This example shows how to provide an imperative API on top of a declarative one. Similarly, the reverse can be done, and a declarative wrapper can be used when exposing a Web Component as a React component.
133
-
docs/_posts/2015-10-07-react-v0.14.md
deleted
-203
@@ -1,203 +0,0 @@
1
----
2
-title: "React v0.14"
3
-author: [sophiebits]
4
----
5
-
6
-We’re happy to announce the release of React 0.14 today! This release has a few major changes, primarily designed to simplify the code you write every day and to better support environments like React Native.
7
-
8
-If you tried the release candidate, thank you – your support is invaluable and we've fixed a few bugs that you reported.
9
-
10
-As with all of our releases, we consider this version to be stable enough to use in production and recommend that you upgrade in order to take advantage of our latest improvements.
11
-
12
-## Upgrade Guide
13
-
14
-Like always, we have a few breaking changes in this release. We know changes can be painful (the Facebook codebase has over 15,000 React components), so we always try to make changes gradually in order to minimize the pain.
15
-
16
-If your code is free of warnings when running under React 0.13, upgrading should be easy. We have two new small breaking changes that didn't give a warning in 0.13 (see below). Every new change in 0.14, including the major changes below, is introduced with a runtime warning and will work as before until 0.15, so you don't have to worry about your app breaking with this upgrade.
17
-
18
-For the two major changes which require significant code changes, we've included [codemod scripts](https://github.com/reactjs/react-codemod/blob/master/README.md) to help you upgrade your code automatically.
19
-
20
-See the changelog below for more details.
21
-
22
-## Installation
23
-
24
-We recommend using React from `npm` and using a tool like browserify or webpack to build your code into a single bundle. To install the two packages:
25
-
26
-* `npm install --save react react-dom`
27
-
28
-Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, set the `NODE_ENV` environment variable to `production` to use the production build of React which does not include the development warnings and runs significantly faster.
29
-
30
-If you can’t use `npm` yet, we provide pre-built browser builds for your convenience, which are also available in the `react` package on bower.
31
-
32
-* **React**
33
- Dev build with warnings: <https://fb.me/react-0.14.0.js>
34
- Minified build for production: <https://fb.me/react-0.14.0.min.js>
35
-* **React with Add-Ons**
36
- Dev build with warnings: <https://fb.me/react-with-addons-0.14.0.js>
37
- Minified build for production: <https://fb.me/react-with-addons-0.14.0.min.js>
38
-* **React DOM** (include React in the page before React DOM)
39
- Dev build with warnings: <https://fb.me/react-dom-0.14.0.js>
40
- Minified build for production: <https://fb.me/react-dom-0.14.0.min.js>
41
-
42
-## Changelog
43
-
44
-### Major changes
45
-
46
-- #### Two Packages: React and React DOM
47
-
48
- As we look at packages like [react-native](https://github.com/facebook/react-native), [react-art](https://github.com/reactjs/react-art), [react-canvas](https://github.com/Flipboard/react-canvas), and [react-three](https://github.com/Izzimach/react-three), it has become clear that the beauty and essence of React has nothing to do with browsers or the DOM.
49
-
50
- To make this more clear and to make it easier to build more environments that React can render to, we’re splitting the main `react` package into two: `react` and `react-dom`. **This paves the way to writing components that can be shared between the web version of React and React Native.** We don’t expect all the code in an app to be shared, but we want to be able to share the components that do behave the same across platforms.
51
-
52
- The `react` package contains `React.createElement`, `.createClass`, `.Component`, `.PropTypes`, `.Children`, and the other helpers related to elements and component classes. We think of these as the [_isomorphic_](http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/) or [_universal_](https://medium.com/@mjackson/universal-javascript-4761051b7ae9) helpers that you need to build components.
53
-
54
- The `react-dom` package has `ReactDOM.render`, `.unmountComponentAtNode`, and `.findDOMNode`. In `react-dom/server` we have server-side rendering support with `ReactDOMServer.renderToString` and `.renderToStaticMarkup`.
55
-
56
- ```js
57
- var React = require('react');
58
- var ReactDOM = require('react-dom');
59
-
60
- var MyComponent = React.createClass({
61
- render: function() {
62
- return <div>Hello World</div>;
63
- }
64
- });
65
-
66
- ReactDOM.render(<MyComponent />, node);
67
- ```
68
-
69
- The old names will continue to work with a warning until 0.15 is released, and we’ve published the [automated codemod script](https://github.com/reactjs/react-codemod/blob/master/README.md) we used at Facebook to help you with this transition.
70
-
71
- The add-ons have moved to separate packages as well:
72
- - `react-addons-clone-with-props`
73
- - `react-addons-create-fragment`
74
- - `react-addons-css-transition-group`
75
- - `react-addons-linked-state-mixin`
76
- - `react-addons-perf`
77
- - `react-addons-pure-render-mixin`
78
- - `react-addons-shallow-compare`
79
- - `react-addons-test-utils`
80
- - `react-addons-transition-group`
81
- - `react-addons-update`
82
- - `ReactDOM.unstable_batchedUpdates` in `react-dom`.
83
-
84
- For now, please use matching versions of `react` and `react-dom` (and the add-ons, if you use them) in your apps to avoid versioning problems.
85
-
86
-- #### DOM node refs
87
-
88
- The other big change we’re making in this release is exposing refs to DOM components as the DOM node itself. That means: we looked at what you can do with a `ref` to a React DOM component and realized that the only useful thing you can do with it is call `this.refs.giraffe.getDOMNode()` to get the underlying DOM node. Starting with this release, `this.refs.giraffe` _is_ the actual DOM node. **Note that refs to custom (user-defined) components work exactly as before; only the built-in DOM components are affected by this change.**
89
-
90
- ```js
91
- var Zoo = React.createClass({
92
- render: function() {
93
- return <div>Giraffe name: <input ref="giraffe" /></div>;
94
- },
95
- showName: function() {
96
- // Previously: var input = this.refs.giraffe.getDOMNode();
97
- var input = this.refs.giraffe;
98
- alert(input.value);
99
- }
100
- });
101
- ```
102
-
103
- This change also applies to the return result of `ReactDOM.render` when passing a DOM node as the top component. As with refs, this change does not affect custom components.
104
-
105
- With this change, we’re deprecating `.getDOMNode()` and replacing it with `ReactDOM.findDOMNode` (see below). If your components are currently using `.getDOMNode()`, they will continue to work with a warning until 0.15.
106
-
107
-- #### Stateless functional components
108
-
109
- In idiomatic React code, most of the components you write will be stateless, simply composing other components. We’re introducing a new, simpler syntax for these components where you can take `props` as an argument and return the element you want to render:
110
-
111
- ```js
112
- // A functional component using an ES2015 (ES6) arrow function:
113
- var Aquarium = (props) => {
114
- var fish = getFish(props.species);
115
- return <Tank>{fish}</Tank>;
116
- };
117
-
118
- // Or with destructuring and an implicit return, simply:
119
- var Aquarium = ({species}) => (
120
- <Tank>
121
- {getFish(species)}
122
- </Tank>
123
- );
124
-
125
- // Then use: <Aquarium species="rainbowfish" />
126
- ```
127
-
128
- These components behave just like a React class with only a `render` method defined. Since no component instance is created for a functional component, any `ref` added to one will evaluate to `null`. Functional components do not have lifecycle methods, but you can set `.propTypes` and `.defaultProps` as properties on the function.
129
-
130
- This pattern is designed to encourage the creation of these simple components that should comprise large portions of your apps. In the future, we’ll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations.
131
-
132
-- #### Deprecation of react-tools
133
-
134
- The `react-tools` package and `JSXTransformer.js` browser file [have been deprecated](/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.
135
-
136
-- #### Compiler optimizations
137
-
138
- React now supports two compiler optimizations that can be enabled in Babel 5.8.24 and newer. Both of these transforms **should be enabled only in production** (e.g., just before minifying your code) because although they improve runtime performance, they make warning messages more cryptic and skip important checks that happen in development mode, including propTypes.
139
-
140
- **Inlining React elements:** The `optimisation.react.inlineElements` transform converts JSX elements to object literals like `{type: 'div', props: ...}` instead of calls to `React.createElement`.
141
-
142
- **Constant hoisting for React elements:** The `optimisation.react.constantElements` transform hoists element creation to the top level for subtrees that are fully static, which reduces calls to `React.createElement` and the resulting allocations. More importantly, it tells React that the subtree hasn’t changed so React can completely skip it when reconciling.
143
-
144
-
145
-### Breaking changes
146
-
147
-In almost all cases, we change our APIs gradually and warn for at least one release to give you time to clean up your code. These two breaking changes did not have a warning in 0.13 but should be easy to find and clean up:
148
-
149
-- `React.initializeTouchEvents` is no longer necessary and has been removed completely. Touch events now work automatically.
150
-- 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.
151
-
152
-These three breaking changes had a warning in 0.13, so you shouldn’t have to do anything if your code is already free of warnings:
153
-
154
-- The `props` object is now frozen, so mutating props after creating a component element is no longer supported. In most cases, [`React.cloneElement`](/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.
155
-- Plain objects are no longer supported as React children; arrays should be used instead. You can use the [`createFragment`](/docs/create-fragment.html) helper to migrate, which now returns an array.
156
-- Add-Ons: `classSet` has been removed. Use [classnames](https://github.com/JedWatson/classnames) instead.
157
-
158
-### New deprecations, introduced with a warning
159
-
160
-Each of these changes will continue to work as before with a new warning until the release of 0.15 so you can upgrade your code gradually.
161
-
162
-- Due to the DOM node refs change mentioned above, `this.getDOMNode()` is now deprecated and `ReactDOM.findDOMNode(this)` can be used instead. Note that in most cases, calling `findDOMNode` is now unnecessary – see the example above in the “DOM node refs” section.
163
-
164
- With each returned DOM node, we've added a `getDOMNode` method for backwards compatibility that will work with a warning until 0.15. If you have a large codebase, you can use our [automated codemod script](https://github.com/reactjs/react-codemod/blob/master/README.md) to change your code automatically.
165
-
166
-- `setProps` and `replaceProps` are now deprecated. Instead, call ReactDOM.render again at the top level with the new props.
167
-- ES6 component classes must now extend `React.Component` in order to enable stateless function components. The [ES3 module pattern](/blog/2015/01/27/react-v0.13.0-beta-1.html#other-languages) will continue to work.
168
-- Reusing and mutating a `style` object between renders has been deprecated. This mirrors our change to freeze the `props` object.
169
-- Add-Ons: `cloneWithProps` is now deprecated. Use [`React.cloneElement`](/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).
170
-- 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}`.
171
-
172
-### Notable enhancements
173
-
174
-- Added `React.Children.toArray` which takes a nested children object and returns a flat array with keys assigned to each child. This helper makes it easier to manipulate collections of children in your `render` methods, especially if you want to reorder or slice `this.props.children` before passing it down. In addition, `React.Children.map` now returns plain arrays too.
175
-- React uses `console.error` instead of `console.warn` for warnings so that browsers show a full stack trace in the console. (Our warnings appear when you use patterns that will break in future releases and for code that is likely to behave unexpectedly, so we do consider our warnings to be “must-fix” errors.)
176
-- Previously, including untrusted objects as React children [could result in an XSS security vulnerability](http://danlec.com/blog/xss-via-a-spoofed-react-element). This problem should be avoided by properly validating input at the application layer and by never passing untrusted objects around your application code. As an additional layer of protection, [React now tags elements](https://github.com/facebook/react/pull/4832) with a specific [ES2015 (ES6) `Symbol`] (http://www.2ality.com/2014/12/es6-symbols.html) in browsers that support it, in order to ensure that React never considers untrusted JSON to be a valid element. If this extra security protection is important to you, you should add a `Symbol` polyfill for older browsers, such as the one included by [Babel’s polyfill](http://babeljs.io/docs/usage/polyfill/).
177
-- When possible, React DOM now generates XHTML-compatible markup.
178
-- React DOM now supports these standard HTML attributes: `capture`, `challenge`, `inputMode`, `is`, `keyParams`, `keyType`, `minLength`, `summary`, `wrap`. It also now supports these non-standard attributes: `autoSave`, `results`, `security`.
179
-- React DOM now supports these SVG attributes, which render into namespaced attributes: `xlinkActuate`, `xlinkArcrole`, `xlinkHref`, `xlinkRole`, `xlinkShow`, `xlinkTitle`, `xlinkType`, `xmlBase`, `xmlLang`, `xmlSpace`.
180
-- The `image` SVG tag is now supported by React DOM.
181
-- In React DOM, arbitrary attributes are supported on custom elements (those with a hyphen in the tag name or an `is="..."` attribute).
182
-- React DOM now supports these media events on `audio` and `video` tags: `onAbort`, `onCanPlay`, `onCanPlayThrough`, `onDurationChange`, `onEmptied`, `onEncrypted`, `onEnded`, `onError`, `onLoadedData`, `onLoadedMetadata`, `onLoadStart`, `onPause`, `onPlay`, `onPlaying`, `onProgress`, `onRateChange`, `onSeeked`, `onSeeking`, `onStalled`, `onSuspend`, `onTimeUpdate`, `onVolumeChange`, `onWaiting`.
183
-- Many small performance improvements have been made.
184
-- Many warnings show more context than before.
185
-- Add-Ons: A [`shallowCompare`](https://github.com/facebook/react/pull/3355) add-on has been added as a migration path for `PureRenderMixin` in ES6 classes.
186
-- Add-Ons: `CSSTransitionGroup` can now use [custom class names](https://github.com/facebook/react/blob/48942b85/docs/docs/10.1-animation.md#custom-classes) instead of appending `-enter-active` or similar to the transition name.
187
-
188
-### New helpful warnings
189
-
190
-- React DOM now warns you when nesting HTML elements invalidly, which helps you avoid surprising errors during updates.
191
-- Passing `document.body` directly as the container to `ReactDOM.render` now gives a warning as doing so can cause problems with browser extensions that modify the DOM.
192
-- Using multiple instances of React together is not supported, so we now warn when we detect this case to help you avoid running into the resulting problems.
193
-
194
-### Notable bug fixes
195
-
196
-- Click events are handled by React DOM more reliably in mobile browsers, particularly in Mobile Safari.
197
-- SVG elements are created with the correct namespace in more cases.
198
-- React DOM now renders `<option>` elements with multiple text children properly and renders `<select>` elements on the server with the correct option selected.
199
-- When two separate copies of React add nodes to the same document (including when a browser extension uses React), React DOM tries harder not to throw exceptions during event handling.
200
-- Using non-lowercase HTML tag names in React DOM (e.g., `React.createElement('DIV')`) no longer causes problems, though we continue to recommend lowercase for consistency with the JSX tag name convention (lowercase names refer to built-in components, capitalized names refer to custom components).
201
-- React DOM understands that these CSS properties are unitless and does not append “px” to their values: `animationIterationCount`, `boxOrdinalGroup`, `flexOrder`, `tabSize`, `stopOpacity`.
202
-- Add-Ons: When using the test utils, `Simulate.mouseEnter` and `Simulate.mouseLeave` now work.
203
-- Add-Ons: ReactTransitionGroup now correctly handles multiple nodes being removed simultaneously.
docs/_posts/2015-10-19-reactiflux-is-moving-to-discord.md
deleted
-86
@@ -1,86 +0,0 @@
1
----
2
-title: "Reactiflux is moving to Discord"
3
-author: [benigeri]
4
----
5
-
6
-TL;DR: Slack decided that Reactiflux had too many members and disabled new invites. Reactiflux is moving to Discord. Join us: [http://join.reactiflux.com](http://join.reactiflux.com/)
7
-
8
-## What happened with Slack?
9
-
10
-A few weeks ago, Reactiflux reached 7,500 members on Slack. Shortly after, Slack decided we were too big and disabled invites. There was no way for new users to join. Many of us were sad and upset. We loved Slack. Our community was built around it.
11
-
12
-We reached out to Slack several times, but their decision was firm. Our large community caused performance issues. Slack wants to focus on building a great product for teams, not necessarily large open communities. Losing focus and building for too many use cases always leads to product bloat, and eventually a decrease in quality.
13
-
14
-## So… why Discord?
15
-
16
-After a [long and thorough debate](https://github.com/reactiflux/volunteers/issues/25), Discord quickly emerged as the most promising service. After just a few days, 400 members had joined the Discord server, and many already loved it.
17
-
18
-### Easiest to join
19
-
20
-Discord is the easiest platform to join. New users can immediately join our conversations without having to create an account. All they need to do is provide a name. No permission granting, no password, no email confirmation.
21
-
22
-This is critically useful for us, and will make Reactiflux even more open and accessible.
23
-
24
-### Great apps
25
-
26
-Out of all of the services we’ve tried, Discord’s apps are by far the most polished. They are well designed, easy to use, and surprisingly fast. In addition to the web app, they have mobile apps on both iOS and Android as well as desktop apps for OS X and Windows, with Linux support coming soon.
27
-
28
-Their desktop apps are built with React and Electron, and their iOS app is built with React Native.
29
-
30
-### Moderation tools
31
-
32
-So far, we’ve been fortunate not to have to deal with spammers and trolls. As our community continues to grow, that might change. Unsurprisingly, Discord is the only app we’ve seen with legitimate moderation tools. It was built for gaming communities, after all.
33
-
34
-### Great multiple Server support
35
-
36
-Your Discord account works with every Discord server, which is the equivalent of a Slack team. You don’t need to create a new account every time you join a new team. You can join new servers in one click, and it’s very easy to switch between them. Discord messages also work across servers, so your personal conversations are not scoped to a single server.
37
-
38
-Instead of having one huge, crowded Reactiflux server, we can branch off closely related channels into sub-servers. Communities will start overlapping, and it will be easy to interact with non-Reactiflux channels.
39
-
40
-### It’s hosted
41
-
42
-Self-hosted apps require maintenance. We’re all busy, and we can barely find the time to keep our landing page up to date and running smoothly. More than anything, we need a stable platform, and we don’t have the resources to guarantee that right now.
43
-
44
-It’s a much safer bet to offload the hosting to Discord, who is already keeping the lights on for all their users.
45
-
46
-### We like the team
47
-
48
-And they seem to like us back. They are excited for us to join them, and they’ve been very responsive to our feedback and suggestions.
49
-
50
-They implemented code syntax highlighting just a few days after we told them we needed it.
51
-
52
-Discord’s team has already built a solid suite of apps, and they have shown us how much they care about their users. We’re excited to see how they will continue to improve their product.
53
-
54
-## And what’s the catch?
55
-
56
-Choosing the best chat service is subjective. There are a million reasons why Discord *might be* a terrible idea. Here are the ones that we’re most worried about:
57
-
58
-### Difficult channel management
59
-
60
-Channel management seems to be the biggest issue. There is no way to opt out of channels; you can only mute them. And you can only mute channels one by one. There is no way to star channels, and channels can only be sorted on the server level. Each user will see the list of channels in the same order.
61
-
62
-As the number of channels grow, it will be challenging to keep things in order. Branching off sub-servers will help, and we will keep an easily accessible directory of channels across our main server and all of the sub-servers.
63
-
64
-We can build simple tools to make channel lookup easier, and the Discord team is working on improvements that should make this more manageable.
65
-
66
-### No Search
67
-
68
-Lack of search is clearly a bummer, but Discord is working on it. Search is coming!
69
-
70
-### Firewall
71
-
72
-A couple of users aren’t able to access Discord at work since other corporate filters classify it as a gaming application. This sucks, but it seems to be a rare case. So far, it seems only to affect 0.6% of our current community (3/500).
73
-
74
-We hope that these users can get Discord's domains whitelisted, and we’ll try to find a solution if this is a widespread issue. The Discord team is aware of the issue as well.
75
-
76
-## Is Discord going to disappear tomorrow?
77
-
78
-Probably not tomorrow. They have 14 people [full time](https://discordapp.com/company), and they’ve raised money from some of the best investors in Silicon Valley, including [Benchmark](http://www.benchmark.com/) and [Accel](http://www.accel.com/companies/).
79
-
80
-By focusing on gaming communities, Discord has differentiated itself from the many other communication apps. Discord is well received and has a rapidly growing user base. They plan to keep their basic offerings free for unlimited users and hope to make money with premium offerings (themes, add-ons, content, and more).
81
-
82
-## Join us!
83
-
84
-More than 500 of us have already migrated to the new Reactiflux. Join us, we're one click away: [http://join.reactiflux.com](http://join.reactiflux.com/)
85
-
86
-*Note: Jordan Hawker’s thorough [research](http://jhawk.co/team-chat-comparison) made our decision a lot easier.*
docs/_posts/2015-10-28-react-v0.14.1.md
deleted
-40
@@ -1,40 +0,0 @@
1
----
2
-title: "React v0.14.1"
3
-author: [zpao]
4
----
5
-
6
-After a couple weeks of having more people use v0.14, we're ready to ship a patch release addressing a few issues. Thanks to everybody who has reported issues and written patches!
7
-
8
-The release is now available for download:
9
-
10
-* **React**
11
- Dev build with warnings: <https://fb.me/react-0.14.1.js>
12
- Minified build for production: <https://fb.me/react-0.14.1.min.js>
13
-* **React with Add-Ons**
14
- Dev build with warnings: <https://fb.me/react-with-addons-0.14.1.js>
15
- Minified build for production: <https://fb.me/react-with-addons-0.14.1.min.js>
16
-* **React DOM** (include React in the page before React DOM)
17
- Dev build with warnings: <https://fb.me/react-dom-0.14.1.js>
18
- Minified build for production: <https://fb.me/react-dom-0.14.1.min.js>
19
-
20
-We've also published version `0.14.1` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower.
21
-
22
-- - -
23
-
24
-## Changelog
25
-
26
-### React DOM
27
-- Fixed bug where events wouldn't fire in old browsers when using React in development mode
28
-- Fixed bug preventing use of `dangerouslySetInnerHTML` with Closure Compiler Advanced mode
29
-- Added support for `srcLang`, `default`, and `kind` attributes for `<track>` elements
30
-- Added support for `color` attribute
31
-- Ensured legacy `.props` access on DOM nodes is updated on re-renders
32
-
33
-### React TestUtils Add-on
34
-- Fixed `scryRenderedDOMComponentsWithClass` so it works with SVG
35
-
36
-### React CSSTransitionGroup Add-on
37
-- Fix bug preventing `0` to be used as a timeout value
38
-
39
-### React on Bower
40
-- Added `react-dom.js` to `main` to improve compatibility with tooling
docs/_posts/2015-11-02-react-v0.14.2.md
deleted
-31
@@ -1,31 +0,0 @@
1
----
2
-title: "React v0.14.2"
3
-author: [zpao]
4
----
5
-
6
-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.
7
-
8
-The release is now available for download:
9
-
10
-* **React**
11
- Dev build with warnings: <https://fb.me/react-0.14.2.js>
12
- Minified build for production: <https://fb.me/react-0.14.2.min.js>
13
-* **React with Add-Ons**
14
- Dev build with warnings: <https://fb.me/react-with-addons-0.14.2.js>
15
- Minified build for production: <https://fb.me/react-with-addons-0.14.2.min.js>
16
-* **React DOM** (include React in the page before React DOM)
17
- Dev build with warnings: <https://fb.me/react-dom-0.14.2.js>
18
- Minified build for production: <https://fb.me/react-dom-0.14.2.min.js>
19
-
20
-We've also published version `0.14.2` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower.
21
-
22
-- - -
23
-
24
-## Changelog
25
-
26
-### React DOM
27
-- Fixed bug with development build preventing events from firing in some versions of Internet Explorer & Edge
28
-- Fixed bug with development build when using es5-sham in older versions of Internet Explorer
29
-- Added support for `integrity` attribute
30
-- Fixed bug resulting in `children` prop being coerced to a string for custom elements, which was not the desired behavior.
31
-- Moved `react` from `dependencies` to `peerDependencies` to match expectations and align with `react-addons-*` packages
docs/_posts/2015-11-18-react-v0.14.3.md
deleted
-40
@@ -1,40 +0,0 @@
1
----
2
-title: "React v0.14.3"
3
-author: [zpao]
4
----
5
-
6
-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.
7
-
8
-The release is now available for download:
9
-
10
-* **React**
11
- Dev build with warnings: <https://fb.me/react-0.14.3.js>
12
- Minified build for production: <https://fb.me/react-0.14.3.min.js>
13
-* **React with Add-Ons**
14
- Dev build with warnings: <https://fb.me/react-with-addons-0.14.3.js>
15
- Minified build for production: <https://fb.me/react-with-addons-0.14.3.min.js>
16
-* **React DOM** (include React in the page before React DOM)
17
- Dev build with warnings: <https://fb.me/react-dom-0.14.3.js>
18
- Minified build for production: <https://fb.me/react-dom-0.14.3.min.js>
19
-* **React DOM Server** (include React in the page before React DOM Server)
20
- Dev build with warnings: <https://fb.me/react-dom-server-0.14.3.js>
21
- Minified build for production: <https://fb.me/react-dom-server-0.14.3.min.js>
22
-
23
-We've also published version `0.14.3` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower.
24
-
25
-- - -
26
-
27
-## Changelog
28
-
29
-### React DOM
30
-- Added support for `nonce` attribute for `<script>` and `<style>` elements
31
-- Added support for `reversed` attribute for `<ol>` elements
32
-
33
-### React TestUtils Add-on
34
-- Fixed bug with shallow rendering and function refs
35
-
36
-### React CSSTransitionGroup Add-on
37
-- Fixed bug resulting in timeouts firing incorrectly when mounting and unmounting rapidly
38
-
39
-### React on Bower
40
-- Added `react-dom-server.js` to expose `renderToString` and `renderToStaticMarkup` for usage in the browser
docs/_posts/2015-12-04-react-js-conf-2016-diversity-scholarship.md
deleted
-45
@@ -1,45 +0,0 @@
1
----
2
-title: React.js Conf 2016 Diversity Scholarship
3
-author: [zpao]
4
----
5
-
6
-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.
7
-
8
-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.
9
-
10
-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.
11
-
12
-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.
13
-
14
-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.
15
-
16
-
17
-- - -
18
-
19
-Facebook is excited to announce that we are now accepting applications for the React.js Conf Diversity Scholarship!
20
-
21
-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.
22
-
23
-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/).
24
-
25
-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.
26
-
27
-To apply for the scholarship, please visit the application page: **<http://goo.gl/forms/PEmKj8oUp4>**
28
-
29
-## Award Includes
30
-
31
-* Paid registration fee for the React.js Conf February 22 & 23 in downtown San Francisco, CA
32
-* Paid lodging expenses for February 21, 22, 23
33
-
34
-## Important Dates
35
-
36
-* Sunday December 13th 2015 - 11:59 PST: Applications for the React.js Conf Scholarship must be submitted in full
37
-* Wednesday, December 16th, 2015: Award recipients will be notified by email of their acceptance
38
-* Monday & Tuesday, February 22 & 23, 2016: React.js Conf
39
-
40
-## Eligibility
41
-
42
-* Must currently be studying or working in Computer Science or a related field
43
-* International applicants are welcome, but you will be responsible for securing your own visa to attend the conference
44
-* You must be able to provide your own transportation to San Francisco
45
-* You must be available to attend the full duration of React.js Conf on February 22 & 23 in San Francisco, CA
docs/_posts/2015-12-16-ismounted-antipattern.md
deleted
-79
@@ -1,79 +0,0 @@
1
----
2
-title: "isMounted is an Antipattern"
3
-author: [jimfb]
4
----
5
-
6
-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.
7
-
8
-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!
9
-
10
-To avoid the error message, people often add lines like this:
11
-
12
-```js
13
-if (this.isMounted()) { // This is bad.
14
- this.setState({...});
15
-}
16
-```
17
-
18
-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!)
19
-
20
-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.
21
-
22
-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.
23
-
24
-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.
25
-
26
-For instance, if you are using a Flux store in your component, you must unsubscribe in `componentWillUnmount`:
27
-
28
-```javascript{9}
29
-class MyComponent extends React.Component {
30
- componentDidMount() {
31
- mydatastore.subscribe(this);
32
- }
33
- render() {
34
- ...
35
- }
36
- componentWillUnmount() {
37
- mydatastore.unsubscribe(this);
38
- }
39
-}
40
-```
41
-
42
-If you use ES6 promises, you may need to wrap your promise in order to make it cancelable.
43
-
44
-```js
45
-const cancelablePromise = makeCancelable(
46
- new Promise(r => component.setState({...}}))
47
-);
48
-
49
-cancelablePromise
50
- .promise
51
- .then(() => console.log('resolved'))
52
- .catch((reason) => console.log('isCanceled', reason.isCanceled));
53
-
54
-cancelablePromise.cancel(); // Cancel the promise
55
-```
56
-
57
-Where `makeCancelable` was originally [defined by @istarkov](https://github.com/facebook/react/issues/5465#issuecomment-157888325) as:
58
-
59
-```js
60
-const makeCancelable = (promise) => {
61
- let hasCanceled_ = false;
62
-
63
- const wrappedPromise = new Promise((resolve, reject) => {
64
- promise.then(
65
- val => hasCanceled_ ? reject({isCanceled: true}) : resolve(val),
66
- error => hasCanceled_ ? reject({isCanceled: true}) : reject(error)
67
- );
68
- });
69
-
70
- return {
71
- promise: wrappedPromise,
72
- cancel() {
73
- hasCanceled_ = true;
74
- },
75
- };
76
-};
77
-```
78
-
79
-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!
docs/_posts/2015-12-18-react-components-elements-and-instances.md
deleted
-383
@@ -1,383 +0,0 @@
1
----
2
-title: "React Components, Elements, and Instances"
3
-author: [gaearon]
4
----
5
-
6
-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?
7
-
8
-## Managing the Instances
9
-
10
-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*?
11
-
12
-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.
13
-
14
-```js
15
-class Form extends TraditionalObjectOrientedView {
16
- render() {
17
- // Read some data passed to the view
18
- const { isSubmitted, buttonText } = this.attrs;
19
-
20
- if (!isSubmitted && !this.button) {
21
- // Form is not yet submitted. Create the button!
22
- this.button = new Button({
23
- children: buttonText,
24
- color: 'blue'
25
- });
26
- this.el.appendChild(this.button.el);
27
- }
28
-
29
- if (this.button) {
30
- // The button is visible. Update its text!
31
- this.button.attrs.children = buttonText;
32
- this.button.render();
33
- }
34
-
35
- if (isSubmitted && this.button) {
36
- // Form was submitted. Destroy the button!
37
- this.el.removeChild(this.button.el);
38
- this.button.destroy();
39
- }
40
-
41
- if (isSubmitted && !this.message) {
42
- // Form was submitted. Show the success message!
43
- this.message = new Message({ text: 'Success!' });
44
- this.el.appendChild(this.message.el);
45
- }
46
- }
47
-}
48
-```
49
-
50
-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.
51
-
52
-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.
53
-
54
-So how is React different?
55
-
56
-## Elements Describe the Tree
57
-
58
-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.
59
-
60
-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].
61
-
62
-### DOM Elements
63
-
64
-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:
65
-
66
-```js
67
-{
68
- type: 'button',
69
- props: {
70
- className: 'button button-blue',
71
- children: {
72
- type: 'b',
73
- props: {
74
- children: 'OK!'
75
- }
76
- }
77
- }
78
-}
79
-```
80
-
81
-This element is just a way to represent the following HTML as a plain object:
82
-
83
-```html
84
-<button class='button button-blue'>
85
- <b>
86
- OK!
87
- </b>
88
-</button>
89
-```
90
-
91
-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.
92
-
93
-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.
94
-
95
-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!
96
-
97
-### Component Elements
98
-
99
-However, the `type` of an element can also be a function or a class corresponding to a React component:
100
-
101
-```js
102
-{
103
- type: Button,
104
- props: {
105
- color: 'blue',
106
- children: 'OK!'
107
- }
108
-}
109
-```
110
-
111
-This is the core idea of React.
112
-
113
-**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.**
114
-
115
-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:
116
-
117
-```js
118
-const DangerButton = ({ children }) => ({
119
- type: Button,
120
- props: {
121
- color: 'red',
122
- children: children
123
- }
124
-});
125
-```
126
-
127
-You can mix and match DOM and component elements in a single element tree:
128
-
129
-```js
130
-const DeleteAccount = () => ({
131
- type: 'div',
132
- props: {
133
- children: [{
134
- type: 'p',
135
- props: {
136
- children: 'Are you sure?'
137
- }
138
- }, {
139
- type: DangerButton,
140
- props: {
141
- children: 'Yep'
142
- }
143
- }, {
144
- type: Button,
145
- props: {
146
- color: 'blue',
147
- children: 'Cancel'
148
- }
149
- }]
150
-});
151
-```
152
-
153
-Or, if you prefer JSX:
154
-
155
-```js
156
-const DeleteAccount = () => (
157
- <div>
158
- <p>Are you sure?</p>
159
- <DangerButton>Yep</DangerButton>
160
- <Button color='blue'>Cancel</Button>
161
- </div>
162
-);
163
-```
164
-
165
-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:
166
-
167
-* `Button` is a DOM `<button>` with specific properties.
168
-* `DangerButton` is a `Button` with specific properties.
169
-* `DeleteAccount` contains a `Button` and a `DangerButton` inside a `<div>`.
170
-
171
-### Components Encapsulate Element Trees
172
-
173
-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`.
174
-
175
-When it sees this element:
176
-
177
-```js
178
-{
179
- type: Button,
180
- props: {
181
- color: 'blue',
182
- children: 'OK!'
183
- }
184
-}
185
-```
186
-
187
-React will ask `Button` what it renders to. The `Button` will return this element:
188
-
189
-```js
190
-{
191
- type: 'button',
192
- props: {
193
- className: 'button button-blue',
194
- children: {
195
- type: 'b',
196
- props: {
197
- children: 'OK!'
198
- }
199
- }
200
- }
201
-}
202
-```
203
-
204
-React will repeat this process until it knows the underlying DOM tag elements for every component on the page.
205
-
206
-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.
207
-
208
-Remember the `Form` example above? It can be written in React as follows[^1]:
209
-
210
-```js
211
-const Form = ({ isSubmitted, buttonText }) => {
212
- if (isSubmitted) {
213
- // Form submitted! Return a message element.
214
- return {
215
- type: Message,
216
- props: {
217
- text: 'Success!'
218
- }
219
- };
220
- }
221
-
222
- // Form is still visible! Return a button element.
223
- return {
224
- type: Button,
225
- props: {
226
- children: buttonText,
227
- color: 'blue'
228
- }
229
- };
230
-};
231
-```
232
-
233
-That’s it! For a React component, props are the input, and an element tree is the output.
234
-
235
-**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.**
236
-
237
-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.
238
-
239
-### Components Can Be Classes or Functions
240
-
241
-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:
242
-
243
-```js
244
-// 1) As a function of props
245
-const Button = ({ children, color }) => ({
246
- type: 'button',
247
- props: {
248
- className: 'button button-' + color,
249
- children: {
250
- type: 'b',
251
- props: {
252
- children: children
253
- }
254
- }
255
- }
256
-});
257
-
258
-// 2) Using the React.createClass() factory
259
-const Button = React.createClass({
260
- render() {
261
- const { children, color } = this.props;
262
- return {
263
- type: 'button',
264
- props: {
265
- className: 'button button-' + color,
266
- children: {
267
- type: 'b',
268
- props: {
269
- children: children
270
- }
271
- }
272
- }
273
- };
274
- }
275
-});
276
-
277
-// 3) As an ES6 class descending from React.Component
278
-class Button extends React.Component {
279
- render() {
280
- const { children, color } = this.props;
281
- return {
282
- type: 'button',
283
- props: {
284
- className: 'button button-' + color,
285
- children: {
286
- type: 'b',
287
- props: {
288
- children: children
289
- }
290
- }
291
- }
292
- };
293
- }
294
-}
295
-```
296
-
297
-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.
298
-
299
-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.
300
-
301
-**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.**
302
-
303
-### Top-Down Reconciliation
304
-
305
-When you call:
306
-
307
-```js
308
-ReactDOM.render({
309
- type: Form,
310
- props: {
311
- isSubmitted: false,
312
- buttonText: 'OK!'
313
- }
314
-}, document.getElementById('root'));
315
-```
316
-
317
-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:
318
-
319
-```js
320
-// React: You told me this...
321
-{
322
- type: Form,
323
- props: {
324
- isSubmitted: false,
325
- buttonText: 'OK!'
326
- }
327
-}
328
-
329
-// React: ...And Form told me this...
330
-{
331
- type: Button,
332
- props: {
333
- children: 'OK!',
334
- color: 'blue'
335
- }
336
-}
337
-
338
-// React: ...and Button told me this! I guess I'm done.
339
-{
340
- type: 'button',
341
- props: {
342
- className: 'button button-blue',
343
- children: {
344
- type: 'b',
345
- props: {
346
- children: 'OK!'
347
- }
348
- }
349
- }
350
-}
351
-```
352
-
353
-This is a part of the process that React calls [reconciliation](/docs/reconciliation.html) which starts when you call [`ReactDOM.render()`](/docs/top-level-api.html#reactdom.render) or [`setState()`](/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).
354
-
355
-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](/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.
356
-
357
-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.
358
-
359
-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](/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.
360
-
361
-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.
362
-
363
-## Summary
364
-
365
-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.
366
-
367
-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.
368
-
369
-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.
370
-
371
-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](/docs/component-api.html).
372
-
373
-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.
374
-
375
-Finally, to create elements, use [`React.createElement()`](/docs/top-level-api.html#react.createelement), [JSX](/docs/jsx-in-depth.html), or an [element factory helper](/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.
376
-
377
-## Further Reading
378
-
379
-* [Introducing React Elements](/blog/2014/10/14/introducing-react-elements.html)
380
-* [Streamlining React Elements](/blog/2015/02/24/streamlining-react-elements.html)
381
-* [React (Virtual) DOM Terminology](/docs/glossary.html)
382
-
383
-[^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.
docs/_posts/2015-12-29-react-v0.14.4.md
deleted
-37
@@ -1,37 +0,0 @@
1
----
2
-title: "React v0.14.4"
3
-author: [sophiebits]
4
----
5
-
6
-Happy December! We have a minor point release today. It has just a few small bug fixes.
7
-
8
-The release is now available for download:
9
-
10
-* **React**
11
- Dev build with warnings: <https://fb.me/react-0.14.4.js>
12
- Minified build for production: <https://fb.me/react-0.14.4.min.js>
13
-* **React with Add-Ons**
14
- Dev build with warnings: <https://fb.me/react-with-addons-0.14.4.js>
15
- Minified build for production: <https://fb.me/react-with-addons-0.14.4.min.js>
16
-* **React DOM** (include React in the page before React DOM)
17
- Dev build with warnings: <https://fb.me/react-dom-0.14.4.js>
18
- Minified build for production: <https://fb.me/react-dom-0.14.4.min.js>
19
-* **React DOM Server** (include React in the page before React DOM Server)
20
- Dev build with warnings: <https://fb.me/react-dom-server-0.14.4.js>
21
- Minified build for production: <https://fb.me/react-dom-server-0.14.4.min.js>
22
-
23
-We've also published version `0.14.4` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower.
24
-
25
-- - -
26
-
27
-## Changelog
28
-
29
-### React
30
-- Minor internal changes for better compatibility with React Native
31
-
32
-### React DOM
33
-- The `autoCapitalize` and `autoCorrect` props are now set as attributes in the DOM instead of properties to improve cross-browser compatibility
34
-- Fixed bug with controlled `<select>` elements not handling updates properly
35
-
36
-### React Perf Add-on
37
-- Some DOM operation names have been updated for clarity in the output of `.printDOM()`
docs/_posts/2016-01-08-A-implies-B-does-not-imply-B-implies-A.md
deleted
-60
@@ -1,60 +0,0 @@
1
----
2
-title: "(A => B) !=> (B => A)"
3
-author: [jimfb]
4
----
5
-
6
-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.
7
-
8
-The guiding principle is one of my favorites from formal logic/mathematics:
9
- > A implies B does not imply B implies A
10
-
11
-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.
12
-
13
-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:
14
-
15
-
16
-```js
17
-class Component extends React.Component {
18
- componentWillReceiveProps(nextProps) {
19
- console.log('componentWillReceiveProps', nextProps.data.bar);
20
- }
21
- render() {
22
- return <div>Bar {this.props.data.bar}!</div>;
23
- }
24
-}
25
-
26
-var container = document.getElementById('container');
27
-
28
-var mydata = {bar: 'drinks'};
29
-ReactDOM.render(<Component data={mydata} />, container);
30
-ReactDOM.render(<Component data={mydata} />, container);
31
-ReactDOM.render(<Component data={mydata} />, container);
32
-```
33
-
34
-
35
-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).
36
-
37
-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:
38
-
39
-```js
40
-var mydata = {bar: 'drinks'};
41
-ReactDOM.render(<Component data={mydata} />, container);
42
-mydata.bar = 'food'
43
-ReactDOM.render(<Component data={mydata} />, container);
44
-mydata.bar = 'noise'
45
-ReactDOM.render(<Component data={mydata} />, container);
46
-```
47
-
48
-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).
49
-
50
-You might think that React could just use smarter checks for equality, but there are some issues with this idea:
51
-
52
- * 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).
53
- * 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.
54
- * 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.
55
-
56
-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.
57
-
58
-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.
59
-
60
-
docs/_posts/2016-01-12-discontinuing-ie8-support.md
deleted
-10
@@ -1,10 +0,0 @@
1
----
2
-title: "Discontinuing IE 8 Support in React DOM"
3
-author: [sophiebits]
4
----
5
-
6
-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.
7
-
8
-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.)
9
-
10
-React DOM will continue to support IE 9 and above for the foreseeable future.
docs/_posts/2016-02-19-new-versioning-scheme.md
deleted
-60
@@ -1,60 +0,0 @@
1
----
2
-title: "New Versioning Scheme"
3
-author: [sebmarkbage]
4
----
5
-
6
-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**
7
-
8
-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.
9
-
10
-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.
11
-
12
-## Bring Everyone Along
13
-
14
-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.
15
-
16
-<img src="../img/blog/versioning-1.png" width="403">
17
-
18
-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.
19
-
20
-<img src="../img/blog/versioning-poll.png" width="596">
21
-
22
-## Introducing Minor Releases
23
-
24
-Ideally everyone could just depend on the latest version of React all the time.
25
-
26
-<img src="../img/blog/versioning-2.png" width="463">
27
-
28
-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.
29
-
30
-<img src="../img/blog/versioning-3.png" width="503">
31
-
32
-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.
33
-
34
-## What Happened to 1.0.0?
35
-
36
-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.
37
-
38
-## Breaking Changes
39
-
40
-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.
41
-
42
-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.
43
-
44
-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.
45
-
46
-## Avoiding The Major Cliff
47
-
48
-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.
49
-
50
-<img src="../img/blog/versioning-4.png" width="498">
51
-
52
-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.
53
-
54
-<img src="../img/blog/versioning-5.png" width="493">
55
-
56
-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.
57
-
58
-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.
59
-
60
-<img src="../img/blog/versioning-6.png" width="493">
docs/_posts/2016-03-07-react-v15-rc1.md
deleted
-94
@@ -1,94 +0,0 @@
1
----
2
-title: "React v15.0 Release Candidate"
3
-author: [zpao]
4
----
5
-
6
-Sorry for the small delay in releasing this. As we said, we've been busy binge-watching House of Cards. That scene in the last episode where Francis and Claire Underwood <abbr title="You didn't think we would actually spoil anything did you?">████████████████████████████████████</abbr>. WOW!
7
-
8
-But now we're ready, so without further ado, we're shipping a release candidate for React v15 now. As a reminder, [we're switching to major versions](/blog/2016/02/19/new-versioning-scheme.html) to indicate that we have been using React in production for a long time. This 15.0 release follows our previous 0.14 version and we'll continue to follow semver like we've been doing since 2013. It's also worth noting that [we no longer actively support Internet Explorer 8](/blog/2016/01/12/discontinuing-ie8-support.html). We believe React will work in its current form there but we will not be prioritizing any efforts to fix new issues that only affect IE8.
9
-
10
-Please try it out before we publish the final release. Let us know if you run into any problems by filing issues on our [GitHub repo](https://github.com/facebook/react).
11
-
12
-## Upgrade Guide
13
-
14
-Like always, we have a few breaking changes in this release. We know changes can be painful (the Facebook codebase has over 15,000 React components), so we always try to make changes gradually in order to minimize the pain.
15
-
16
-If your code is free of warnings when running under React 0.14, upgrading should be easy. The bulk of changes in this release are actually behind the scenes, impacting the way that React interacts with the DOM. The other substantial change is that React now supports the full range of SVG elements and attributes. Beyond that we have a large number of incremental improvements and additional warnings aimed to aid developers. We've also laid some groundwork in the core to bring you some new capabilities in future releases.
17
-
18
-See the changelog below for more details.
19
-
20
-## Installation
21
-
22
-We recommend using React from `npm` and using a tool like browserify or webpack to build your code into a single bundle. To install the two packages:
23
-
24
-* `npm install --save react@15.0.0-rc.1 react-dom@15.0.0-rc.1`
25
-
26
-Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, set the `NODE_ENV` environment variable to `production` to use the production build of React which does not include the development warnings and runs significantly faster.
27
-
28
-If you can’t use `npm` yet, we provide pre-built browser builds for your convenience, which are also available in the `react` package on bower.
29
-
30
-* **React**
31
- Dev build with warnings: <https://fb.me/react-15.0.0-rc.1.js>
32
- Minified build for production: <https://fb.me/react-15.0.0-rc.1.min.js>
33
-* **React with Add-Ons**
34
- Dev build with warnings: <https://fb.me/react-with-addons-15.0.0-rc.1.js>
35
- Minified build for production: <https://fb.me/react-with-addons-15.0.0-rc.1.min.js>
36
-* **React DOM** (include React in the page before React DOM)
37
- Dev build with warnings: <https://fb.me/react-dom-15.0.0-rc.1.js>
38
- Minified build for production: <https://fb.me/react-dom-15.0.0-rc.1.min.js>
39
-
40
-## Changelog
41
-
42
-### Major changes
43
-
44
-- #### `document.createElement` is in and `data-reactid` is out
45
-
46
- There were a number of large changes to our interactions with the DOM. One of the most noticeable changes is that we no longer set the `data-reactid` attribute for each DOM node. While this will make it much more difficult to know if a website is using React, the advantage is that the DOM is much more lightweight. This change was made possible by us switching to use `document.createElement` on initial render. Previously we would generate a large string of HTML and then set `node.innerHTML`. At the time, this was decided to be faster than using `document.createElement` for the majority of cases and browsers that we supported. Browsers have continued to improve and so overwhelmingly this is no longer true. By using `createElement` we can make other parts of React faster. The ids were used to map back from events to the original React component, meaning we had to do a bunch of work on every event, even though we cached this data heavily. As we've all experienced, caching and in particularly invalidating caches, can be error prone and we saw many hard to reproduce issues over the years as a result. Now we can build up a direct mapping at render time since we already have a handle on the node.
47
-
48
-- #### No more extra `<span>`s
49
-
50
- Another big change with our DOM interaction is how we render text blocks. Previously you may have noticed that React rendered a lot of extra `<span>`s. Eg, in our most basic example on the home page we render `<div>Hello {this.props.name}</div>`, resulting in markup that contained 2 `<span>`s. Now we'll render plain text nodes interspersed with comment nodes that are used for demarcation. This gives us the same ability to update individual pieces of text, without creating extra nested nodes. Very few people have depended on the actual markup generated here so it's likely you are not impacted. However if you were targeting these `<span>`s in your CSS, you will need to adjust accordingly. You can always render them explicitly in your components.
51
-
52
-- #### Rendering `null` now uses comment nodes
53
-
54
- We've also made use of these comment nodes to change what `null` renders to. Rendering to `null` was a feature we added in React v0.11 and was implemented by rendering `<noscript>` elements. By rendering to comment nodes now, there's a chance some of your CSS will be targeting the wrong thing, specifically if you are making use of `:nth-child` selectors. This, along with the other changes mentioned above, have always been considered implementation details of how React targets the DOM. We believe they are safe changes to make without going through a release with warnings detailing the subtle differences as they are details that should not be depended upon. Additionally, we have seen that these changes have improved React performance for many typical applications.
55
-
56
-- #### Improved SVG support
57
-
58
- All SVG tags and attributes are now fully supported. (Uncommon SVG tags are not present on the `React.DOM` element helper, but JSX and `React.createElement` work on all tag names.) All SVG attributes match their original capitalization and hyphenation as defined in the specification (ex: `gradientTransform` must be camel-cased but `clip-path` should be hyphenated).
59
-
60
-
61
-
62
-### Breaking changes
63
-
64
-It's worth calling out the DOM structure changes above again, in particular the change from `<span>`s. In the course of updating the Facebook codebase, we found a very small amount of code that was depending on the markup that React generated. Some of these cases were integration tests like WebDriver which were doing very specific XPath queries to target nodes. Others were simply tests using `ReactDOM.renderToStaticMarkup` and comparing markup. Again, there were a very small number of changes that had to be made, but we don't want anybody to be blindsided. We encourage everybody to run their test suites when upgrading and consider alternative approaches when possible. One approach that will work for some cases is to explicitly use `<span>`s in your `render` method.
65
-
66
-These deprecations were introduced in v0.14 with a warning and the APIs are now removed.
67
-
68
-- Deprecated APIs removed from `React`, specifically `findDOMNode`, `render`, `renderToString`, `renderToStaticMarkup`, and `unmountComponentAtNode`.
69
-- Deprecated APIs removed from `React.addons`, specifically `batchedUpdates` and `cloneWithProps`.
70
-- Deprecated APIs removed from component instances, specifically `setProps`, `replaceProps`, and `getDOMNode`.
71
-
72
-### New deprecations, introduced with a warning
73
-
74
-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.
75
-
76
-- `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).
77
-
78
-
79
-### New helpful warnings
80
-
81
-- If you use a minified copy of the _development_ build, React DOM kindly encourages you to use the faster production build instead.
82
-- 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.)
83
-- 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.
84
-- Elements will now warn when attempting to read `ref` and `key` from the props.
85
-- React DOM now attempts to warn for mistyped event handlers on DOM elements (ex: `onclick` which should be `onClick`)
86
-
87
-### Notable bug fixes
88
-
89
-- Fixed multiple small memory leaks
90
-- Input events are handled more reliably in IE 10 and IE 11; spurious events no longer fire when using a placeholder.
91
-- React DOM now supports the `cite` and `profile` HTML attributes.
92
-- React DOM now supports the `onAnimationStart`, `onAnimationEnd`, `onAnimationIteration`, `onTransitionEnd`, and `onInvalid` events. Support for `onLoad` has been added to `object` elements.
93
-- `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.
94
-- 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.
docs/_posts/2016-03-16-react-v15-rc2.md
deleted
-32
@@ -1,32 +0,0 @@
1
----
2
-title: "React v15.0 Release Candidate 2"
3
-author: [zpao]
4
----
5
-
6
-Today we're releasing a second release candidate for version 15. Primarily this is to address 2 issues, but we also picked up a few small changes from new contributors, including some improvements to some of our new warnings.
7
-
8
-The most pressing change that was made is to fix a bug in our new code that removes `<span>`s, as discussed in the original RC1 post. Specifically we have some code that takes a different path in IE11 and Edge due to the speed of some DOM operations. There was a bug in this code which didn't break out of the optimization for `DocumentFragment`s, resulting in text not appearing at all. Thanks to the several people who [reported this](https://github.com/facebook/react/issues/6246).
9
-
10
-The other change is to our SVG code. In RC1 we had made the decision to pass through all attributes directly. This led to [some confusion with `class` vs `className`](https://github.com/facebook/react/issues/6211) and ultimately led us to reconsider our position on the approach. Passing through all attributes meant that we would have two different patterns for using React where things like hyphenated attributes would work for SVG but not HTML. In the future, we *might* change our approach to the problem for HTML as well but in the meantime, maintaining consistency is important. So we reverted the changes that allowed the attributes to be passed through and instead expanded the SVG property list to include all attributes that are in the spec. We believe we have everything now but definitely [let us know](https://github.com/facebook/react/issues/1657#issuecomment-197031403) if we missed anything. It was and still is our intent to support the full range of SVG tags and attributes in this release.
11
-
12
-Thanks again to everybody who has tried the RC1 and reported issues. It has been extremely important and we wouldn't be able to do this without your help!
13
-
14
-## Installation
15
-
16
-We recommend using React from `npm` and using a tool like browserify or webpack to build your code into a single bundle. To install the two packages:
17
-
18
-* `npm install --save react@15.0.0-rc.2 react-dom@15.0.0-rc.2`
19
-
20
-Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, set the `NODE_ENV` environment variable to `production` to use the production build of React which does not include the development warnings and runs significantly faster.
21
-
22
-If you can’t use `npm` yet, we provide pre-built browser builds for your convenience, which are also available in the `react` package on bower.
23
-
24
-* **React**
25
- Dev build with warnings: <https://fb.me/react-15.0.0-rc.2.js>
26
- Minified build for production: <https://fb.me/react-15.0.0-rc.2.min.js>
27
-* **React with Add-Ons**
28
- Dev build with warnings: <https://fb.me/react-with-addons-15.0.0-rc.2.js>
29
- Minified build for production: <https://fb.me/react-with-addons-15.0.0-rc.2.min.js>
30
-* **React DOM** (include React in the page before React DOM)
31
- Dev build with warnings: <https://fb.me/react-dom-15.0.0-rc.2.js>
32
- Minified build for production: <https://fb.me/react-dom-15.0.0-rc.2.min.js>
docs/_posts/2016-03-29-react-v0.14.8.md
deleted
-32
@@ -1,32 +0,0 @@
1
----
2
-title: "React v0.14.8"
3
-author: [gaearon]
4
----
5
-
6
-We have already released two release candidates for React 15, and the final version is coming soon.
7
-
8
-However [Ian Christian Myers](https://github.com/iancmyers) discovered a memory leak related to server rendering in React 0.14 and [contributed a fix](https://github.com/facebook/react/pull/6060). While this memory leak has already been fixed in a different way in the React 15 release candidates, we decided to cut another 0.14 release that contains just this fix.
9
-
10
-The release is now available for download:
11
-
12
-* **React**
13
- Dev build with warnings: <https://fb.me/react-0.14.8.js>
14
- Minified build for production: <https://fb.me/react-0.14.8.min.js>
15
-* **React with Add-Ons**
16
- Dev build with warnings: <https://fb.me/react-with-addons-0.14.8.js>
17
- Minified build for production: <https://fb.me/react-with-addons-0.14.8.min.js>
18
-* **React DOM** (include React in the page before React DOM)
19
- Dev build with warnings: <https://fb.me/react-dom-0.14.8.js>
20
- Minified build for production: <https://fb.me/react-dom-0.14.8.min.js>
21
-* **React DOM Server** (include React in the page before React DOM Server)
22
- Dev build with warnings: <https://fb.me/react-dom-server-0.14.8.js>
23
- Minified build for production: <https://fb.me/react-dom-server-0.14.8.min.js>
24
-
25
-We've also published version `0.14.8` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower.
26
-
27
-- - -
28
-
29
-## Changelog
30
-
31
-### React
32
-- Fixed memory leak when rendering on the server
docs/_posts/2016-04-07-react-v15.md
deleted
-259
@@ -1,259 +0,0 @@
1
----
2
-title: "React v15.0"
3
-author: [gaearon]
4
----
5
-
6
-We would like to thank the React community for reporting issues and regressions in the release candidates on our [issue tracker](https://github.com/facebook/react/issues/). Over the last few weeks we fixed those issues, and now, after two release candidates, we are excited to finally release the stable version of React 15.
7
-
8
-As a reminder, [we’re switching to major versions](/blog/2016/02/19/new-versioning-scheme.html) to indicate that we have been using React in production for a long time. This 15.0 release follows our previous 0.14 version and we’ll continue to follow semver like we’ve been doing since 2013. It’s also worth noting that [we no longer actively support Internet Explorer 8](/blog/2016/01/12/discontinuing-ie8-support.html). We believe React will work in its current form there but we will not be prioritizing any efforts to fix new issues that only affect IE8.
9
-
10
-React 15 brings significant improvements to how we interact with the DOM:
11
-
12
-* We are now using `document.createElement` instead of setting `innerHTML` when mounting components. This allows us to get rid of the `data-reactid` attribute on every node and make the DOM lighter. Using `document.createElement` is also faster in modern browsers and fixes a number of edge cases related to SVG elements and running multiple copies of React on the same page.
13
-
14
-* Historically our support for SVG has been incomplete, and many tags and attributes were missing. We heard you, and in React 15 we [added support for all the SVG attributes that are recognized by today’s browsers](https://github.com/facebook/react/pull/6243). If we missed any of the attributes you’d like to use, please [let us know](https://github.com/facebook/react/issues/1657). As a bonus, thanks to using `document.createElement`, we no longer need to maintain a list of SVG tags, so any SVG tags that were previously unsupported should work just fine in React 15.
15
-
16
-* We received some amazing contributions from the community in this release, and we would like to highlight [this pull request](https://github.com/facebook/react/pull/5753) by [Michael Wiencek](https://github.com/mwiencek) in particular. Thanks to Michael’s work, React 15 no longer emits extra `<span>` nodes around the text, making the DOM output much cleaner. This was a longstanding annoyance for React users so it’s exciting to accept this as an outside contribution.
17
-
18
-While this isn’t directly related to the release, we understand that in order to receive more community contributions like Michael’s, we need to communicate our goals and priorities more openly, and review pull requests more decisively. As a first step towards this, we started publishing [React core team weekly meeting notes](https://github.com/reactjs/core-notes) again. We also intend to introduce an RFC process inspired by [Ember RFCs](https://github.com/emberjs/rfcs) so external contributors can have more insight and influence in the future development of React. We will keep you updated about this on our blog.
19
-
20
-We are also experimenting with a new changelog format in this post. Every change now links to the corresponding pull request and mentions the author. Let us know whether you find this useful!
21
-
22
-## Upgrade Guide
23
-
24
-As usual with major releases, React 15 will remove support for some of the patterns deprecated nine months ago in React 0.14. We know changes can be painful (the Facebook codebase has over 20,000 React components, and that’s not even counting React Native), so we always try to make changes gradually in order to minimize the pain.
25
-
26
-If your code is free of warnings when running under React 0.14, upgrading should be easy. The bulk of changes in this release are actually behind the scenes, impacting the way that React interacts with the DOM. The other substantial change is that React now supports the full range of SVG elements and attributes. Beyond that we have a large number of incremental improvements and additional warnings aimed to aid developers. We’ve also laid some groundwork in the core to bring you some new capabilities in future releases.
27
-
28
-See the changelog below for more details.
29
-
30
-## Installation
31
-
32
-We recommend using React from `npm` and using a tool like browserify or webpack to build your code into a single bundle. To install the two packages:
33
-
34
-* `npm install --save react react-dom`
35
-
36
-Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, set the `NODE_ENV` environment variable to `production` to use the production build of React which does not include the development warnings and runs significantly faster.
37
-
38
-If you can’t use `npm` yet, we provide pre-built browser builds for your convenience, which are also available in the `react` package on bower.
39
-
40
-* **React**
41
- Dev build with warnings: <https://fb.me/react-15.0.0.js>
42
- Minified build for production: <https://fb.me/react-15.0.0.min.js>
43
-* **React with Add-Ons**
44
- Dev build with warnings: <https://fb.me/react-with-addons-15.0.0.js>
45
- Minified build for production: <https://fb.me/react-with-addons-15.0.0.min.js>
46
-* **React DOM** (include React in the page before React DOM)
47
- Dev build with warnings: <https://fb.me/react-dom-15.0.0.js>
48
- Minified build for production: <https://fb.me/react-dom-15.0.0.min.js>
49
-
50
-## Changelog
51
-
52
-### Major changes
53
-
54
-- #### `document.createElement` is in and `data-reactid` is out
55
-
56
- There were a number of large changes to our interactions with the DOM. One of the most noticeable changes is that we no longer set the `data-reactid` attribute for each DOM node. While this will make it more difficult to know if a website is using React, the advantage is that the DOM is much more lightweight. This change was made possible by us switching to use `document.createElement` on initial render. Previously we would generate a large string of HTML and then set `node.innerHTML`. At the time, this was decided to be faster than using `document.createElement` for the majority of cases and browsers that we supported. Browsers have continued to improve and so overwhelmingly this is no longer true. By using `createElement` we can make other parts of React faster. The ids were used to map back from events to the original React component, meaning we had to do a bunch of work on every event, even though we cached this data heavily. As we’ve all experienced, caching and in particularly invalidating caches, can be error prone and we saw many hard to reproduce issues over the years as a result. Now we can build up a direct mapping at render time since we already have a handle on the node.
57
-
58
- **Note:** `data-reactid` is still present for server-rendered content, however it is much smaller than before and is simply an auto-incrementing counter.
59
-
60
- <small>[@sophiebits](https://github.com/sophiebits) in [#5205](https://github.com/facebook/react/pull/5205)</small>
61
-
62
-- #### No more extra `<span>`s
63
-
64
- Another big change with our DOM interaction is how we render text blocks. Previously you may have noticed that React rendered a lot of extra `<span>`s. For example, in our most basic example on the home page we render `<div>Hello {this.props.name}</div>`, resulting in markup that contained 2 `<span>`s. Now we’ll render plain text nodes interspersed with comment nodes that are used for demarcation. This gives us the same ability to update individual pieces of text, without creating extra nested nodes. Very few people have depended on the actual markup generated here so it’s likely you are not impacted. However if you were targeting these `<span>`s in your CSS, you will need to adjust accordingly. You can always render them explicitly in your components.
65
-
66
- <small>[@mwiencek](https://github.com/mwiencek) in [#5753](https://github.com/facebook/react/pull/5753)</small>
67
-
68
-- #### Rendering `null` now uses comment nodes
69
-
70
- We’ve also made use of these comment nodes to change what `null` renders to. Rendering to `null` was a feature we added in React 0.11 and was implemented by rendering `<noscript>` elements. By rendering to comment nodes now, there’s a chance some of your CSS will be targeting the wrong thing, specifically if you are making use of `:nth-child` selectors. React’s use of the `<noscript>` tag has always been considered an implementation detail of how React targets the DOM. We believe they are safe changes to make without going through a release with warnings detailing the subtle differences as they are details that should not be depended upon. Additionally, we have seen that these changes have improved React performance for many typical applications.
71
-
72
- <small>[@sophiebits](https://github.com/sophiebits) in [#5451](https://github.com/facebook/react/pull/5451)</small>
73
-
74
-- #### Functional components can now return `null` too
75
-
76
- We added support for [defining stateless components as functions](/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.
77
-
78
- <small>[@jimfb](https://github.com/jimfb) in [#5884](https://github.com/facebook/react/pull/5884)</small>
79
-
80
-- #### Improved SVG support
81
-
82
- 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).
83
-
84
- <small>[@zpao](https://github.com/zpao) in [#6243](https://github.com/facebook/react/pull/6243)</small>
85
-
86
-### Breaking changes
87
-
88
-- #### No more extra `<span>`s
89
-
90
- It’s worth calling out the DOM structure changes above again, in particular the change from `<span>`s. In the course of updating the Facebook codebase, we found a very small amount of code that was depending on the markup that React generated. Some of these cases were integration tests like WebDriver which were doing very specific XPath queries to target nodes. Others were simply tests using `ReactDOM.renderToStaticMarkup` and comparing markup. Again, there were a very small number of changes that had to be made, but we don’t want anybody to be blindsided. We encourage everybody to run their test suites when upgrading and consider alternative approaches when possible. One approach that will work for some cases is to explicitly use `<span>`s in your `render` method.
91
-
92
- <small>[@mwiencek](https://github.com/mwiencek) in [#5753](https://github.com/facebook/react/pull/5753)</small>
93
-
94
-- #### `React.cloneElement()` now resolves `defaultProps`
95
-
96
- We fixed a bug in `React.cloneElement()` that some components may rely on. If some of the `props` received by `cloneElement()` are `undefined`, it used to return an element with `undefined` values for those props. In React 15, we’re changing it to be consistent with `createElement()`. Now any `undefined` props passed to `cloneElement()` are resolved to the corresponding component’s `defaultProps`. Only one of our 20,000 React components was negatively affected by this so we feel comfortable releasing this change without keeping the old behavior for another release cycle.
97
-
98
- <small>[@truongduy134](https://github.com/truongduy134) in [#5997](https://github.com/facebook/react/pull/5997)</small>
99
-
100
-- #### `ReactPerf.getLastMeasurements()` is opaque
101
-
102
- 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.
103
-
104
- <small>[@gaearon](https://github.com/gaearon) in [#6286](https://github.com/facebook/react/pull/6286)</small>
105
-
106
-- #### Removed deprecations
107
-
108
- These deprecations were introduced nine months ago in v0.14 with a warning and are removed:
109
-
110
- - 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`.
111
- <small>[@jimfb](https://github.com/jimfb) in [#5832](https://github.com/facebook/react/pull/5832)</small>
112
-
113
- - Deprecated addons are removed: `batchedUpdates` and `cloneWithProps`.
114
- <small>[@jimfb](https://github.com/jimfb) in [#5859](https://github.com/facebook/react/pull/5859), [@zpao](https://github.com/zpao) in [#6016](https://github.com/facebook/react/pull/6016)</small>
115
-
116
- - Deprecated component instance methods are removed: `setProps`, `replaceProps`, and `getDOMNode`.
117
- <small>[@jimfb](https://github.com/jimfb) in [#5570](https://github.com/facebook/react/pull/5570)</small>
118
-
119
- - 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.
120
- <small>[@gaearon](https://github.com/gaearon) in [#6285](https://github.com/facebook/react/pull/6285)</small>
121
-
122
- - Passing `children` to void elements like `<input>` was deprecated, and now throws an error.
123
- <small>[@jonhester](https://github.com/jonhester) in [#3372](https://github.com/facebook/react/pull/3372)</small>
124
-
125
- - React-specific properties on DOM `refs` (e.g. `this.refs.div.props`) were deprecated, and are removed now.
126
- <small>[@jimfb](https://github.com/jimfb) in [#5495](https://github.com/facebook/react/pull/5495)</small>
127
-
128
-### New deprecations, introduced with a warning
129
-
130
-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.
131
-
132
-- `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).
133
-<small>[@jimfb](https://github.com/jimfb) in [#6127](https://github.com/facebook/react/pull/6127)</small>
134
-
135
-- 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.
136
-<small>[@antoaravinth](https://github.com/antoaravinth) in [#5048](https://github.com/facebook/react/pull/5048)</small>
137
-
138
-- `ReactPerf.printDOM()` was renamed to `ReactPerf.printOperations()`, and `ReactPerf.getMeasurementsSummaryMap()` was renamed to `ReactPerf.getWasted()`.
139
-<small>[@gaearon](https://github.com/gaearon) in [#6287](https://github.com/facebook/react/pull/6287)</small>
140
-
141
-### New helpful warnings
142
-
143
-- If you use a minified copy of the _development_ build, React DOM kindly encourages you to use the faster production build instead.
144
-<small>[@sophiebits](https://github.com/sophiebits) in [#5083](https://github.com/facebook/react/pull/5083)</small>
145
-
146
-- 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.
147
-<small>[@pluma](https://github.com/pluma) in [#5140](https://github.com/facebook/react/pull/5140)</small>
148
-
149
-- 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.
150
-<small>[@kentcdodds](https://github.com/kentcdodds) in [#5940](https://github.com/facebook/react/pull/5940) and [@koba04](https://github.com/koba04) in [#5947](https://github.com/facebook/react/pull/5947)</small>
151
-
152
-- Elements will now warn when attempting to read `ref` and `key` from the props.
153
-<small>[@prometheansacrifice](https://github.com/prometheansacrifice) in [#5744](https://github.com/facebook/react/pull/5744)</small>
154
-
155
-- React will now warn if you pass a different `props` object to `super()` in the constructor.
156
-<small>[@prometheansacrifice](https://github.com/prometheansacrifice) in [#5346](https://github.com/facebook/react/pull/5346)</small>
157
-
158
-- React will now warn if you call `setState()` inside `getChildContext()`.
159
-<small>[@raineroviir](https://github.com/raineroviir) in [#6121](https://github.com/facebook/react/pull/6121)</small>
160
-
161
-- React DOM now attempts to warn for mistyped event handlers on DOM elements, such as `onclick` which should be `onClick`.
162
-<small>[@ali](https://github.com/ali) in [#5361](https://github.com/facebook/react/pull/5361)</small>
163
-
164
-- React DOM now warns about `NaN` values in `style`.
165
-<small>[@jontewks](https://github.com/jontewks) in [#5811](https://github.com/facebook/react/pull/5811)</small>
166
-
167
-- React DOM now warns if you specify both `value` and `defaultValue` for an input.
168
-<small>[@mgmcdermott](https://github.com/mgmcdermott) in [#5823](https://github.com/facebook/react/pull/5823)</small>
169
-
170
-- React DOM now warns if an input switches between being controlled and uncontrolled.
171
-<small>[@TheBlasfem](https://github.com/TheBlasfem) in [#5864](https://github.com/facebook/react/pull/5864)</small>
172
-
173
-- React DOM now warns if you specify `onFocusIn` or `onFocusOut` handlers as they are unnecessary in React.
174
-<small>[@jontewks](https://github.com/jontewks) in [#6296](https://github.com/facebook/react/pull/6296)</small>
175
-
176
-- 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()`.
177
-<small>[@conorhastings](https://github.com/conorhastings) in [#5193](https://github.com/facebook/react/pull/5193) and [@gaearon](https://github.com/gaearon) in [#6310](https://github.com/facebook/react/pull/6310)</small>
178
-
179
-- Add-Ons: `TestUtils.Simulate()` now prints a helpful message if you attempt to use it with shallow rendering.
180
-<small>[@conorhastings](https://github.com/conorhastings) in [#5358](https://github.com/facebook/react/pull/5358)</small>
181
-
182
-- PropTypes: `arrayOf()` and `objectOf()` provide better error messages for invalid arguments.
183
-<small>[@chicoxyzzy](https://github.com/chicoxyzzy) in [#5390](https://github.com/facebook/react/pull/5390)</small>
184
-
185
-### Notable bug fixes
186
-
187
-- Fixed multiple small memory leaks.
188
-<small>[@sophiebits](https://github.com/sophiebits) in [#4983](https://github.com/facebook/react/pull/4983) and [@victor-homyakov](https://github.com/victor-homyakov) in [#6309](https://github.com/facebook/react/pull/6309)</small>
189
-
190
-- Input events are handled more reliably in IE 10 and IE 11; spurious events no longer fire when using a placeholder.
191
-<small>[@jquense](https://github.com/jquense) in [#4051](https://github.com/facebook/react/pull/4051)</small>
192
-
193
-- The `componentWillReceiveProps()` lifecycle method is now consistently called when `context` changes.
194
-<small>[@milesj](https://github.com/milesj) in [#5787](https://github.com/facebook/react/pull/5787)</small>
195
-
196
-- `React.cloneElement()` doesn’t append slash to an existing `key` when used inside `React.Children.map()`.
197
-<small>[@ianobermiller](https://github.com/ianobermiller) in [#5892](https://github.com/facebook/react/pull/5892)</small>
198
-
199
-- React DOM now supports the `cite` and `profile` HTML attributes.
200
-<small>[@AprilArcus](https://github.com/AprilArcus) in [#6094](https://github.com/facebook/react/pull/6094) and [@saiichihashimoto](https://github.com/saiichihashimoto) in [#6032](https://github.com/facebook/react/pull/6032)</small>
201
-
202
-- React DOM now supports `cssFloat`, `gridRow` and `gridColumn` CSS properties.
203
-<small>[@stevenvachon](https://github.com/stevenvachon) in [#6133](https://github.com/facebook/react/pull/6133) and [@mnordick](https://github.com/mnordick) in [#4779](https://github.com/facebook/react/pull/4779)</small>
204
-
205
-- React DOM now correctly handles `borderImageOutset`, `borderImageWidth`, `borderImageSlice`, `floodOpacity`, `strokeDasharray`, and `strokeMiterlimit` as unitless CSS properties.
206
-<small>[@rofrischmann](https://github.com/rofrischmann) in [#6210](https://github.com/facebook/react/pull/6210) and [#6270](https://github.com/facebook/react/pull/6270)</small>
207
-
208
-- React DOM now supports the `onAnimationStart`, `onAnimationEnd`, `onAnimationIteration`, `onTransitionEnd`, and `onInvalid` events. Support for `onLoad` has been added to `object` elements.
209
-<small>[@tomduncalf](https://github.com/tomduncalf) in [#5187](https://github.com/facebook/react/pull/5187), [@milesj](https://github.com/milesj) in [#6005](https://github.com/facebook/react/pull/6005), and [@ara4n](https://github.com/ara4n) in [#5781](https://github.com/facebook/react/pull/5781)</small>
210
-
211
-- 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.
212
-<small>[@syranide](https://github.com/syranide) in [#1510](https://github.com/facebook/react/pull/1510)</small>
213
-
214
-- React DOM does not mistakingly coerce `children` to strings for Web Components.
215
-<small>[@jimfb](https://github.com/jimfb) in [#5093](https://github.com/facebook/react/pull/5093)</small>
216
-
217
-- React DOM now correctly normalizes SVG `<use>` events.
218
-<small>[@edmellum](https://github.com/edmellum) in [#5720](https://github.com/facebook/react/pull/5720)</small>
219
-
220
-- React DOM does not throw if a `<select>` is unmounted while its `onChange` handler is executing.
221
-<small>[@sambev](https://github.com/sambev) in [#6028](https://github.com/facebook/react/pull/6028)</small>
222
-
223
-- React DOM does not throw in Windows 8 apps.
224
-<small>[@Andrew8xx8](https://github.com/Andrew8xx8) in [#6063](https://github.com/facebook/react/pull/6063)</small>
225
-
226
-- React DOM does not throw when asynchronously unmounting a child with a `ref`.
227
-<small>[@yiminghe](https://github.com/yiminghe) in [#6095](https://github.com/facebook/react/pull/6095)</small>
228
-
229
-- React DOM no longer forces synchronous layout because of scroll position tracking.
230
-<small>[@syranide](https://github.com/syranide) in [#2271](https://github.com/facebook/react/pull/2271)</small>
231
-
232
-- `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.
233
-<small>[@chicoxyzzy](https://github.com/chicoxyzzy) in [#6132](https://github.com/facebook/react/pull/6132)</small>
234
-
235
-- Add-Ons: ReactPerf no longer instruments adding or removing an event listener because they don’t really touch the DOM due to event delegation.
236
-<small>[@antoaravinth](https://github.com/antoaravinth) in [#5209](https://github.com/facebook/react/pull/5209)</small>
237
-
238
-### Other improvements
239
-
240
-- React now uses `loose-envify` instead of `envify` so it installs fewer transitive dependencies.
241
-<small>[@qerub](https://github.com/qerub) in [#6303](https://github.com/facebook/react/pull/6303)</small>
242
-
243
-- Shallow renderer now exposes `getMountedInstance()`.
244
-<small>[@glenjamin](https://github.com/glenjamin) in [#4918](https://github.com/facebook/react/pull/4918)</small>
245
-
246
-- Shallow renderer now returns the rendered output from `render()`.
247
-<small>[@simonewebdesign](https://github.com/simonewebdesign) in [#5411](https://github.com/facebook/react/pull/5411)</small>
248
-
249
-- 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.
250
-<small>[@dgreensp](https://github.com/dgreensp) in [#4959](https://github.com/facebook/react/pull/4959)</small>
251
-
252
-- React DOM now allows `data-` attributes with names that start with numbers.
253
-<small>[@nLight](https://github.com/nLight) in [#5216](https://github.com/facebook/react/pull/5216)</small>
254
-
255
-- 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.
256
-<small>[@mxstbr](https://github.com/mxstbr) in [#6112](https://github.com/facebook/react/pull/6112)</small>
257
-
258
-- React improves the performance for `createClass()` on complex specs.
259
-<small>[@sophiebits](https://github.com/sophiebits) in [#5550](https://github.com/facebook/react/pull/5550)</small>
docs/_posts/2016-04-08-react-v15.0.1.md
deleted
-34
@@ -1,34 +0,0 @@
1
----
2
-title: "React v15.0.1"
3
-author: [zpao]
4
----
5
-
6
-Yesterday afternoon we shipped v15.0.0 and quickly got some feedback about a couple of issues. We apologize for these problems and we've been working since then to make sure we get fixes into your hands as quickly as possible.
7
-
8
-The first of these issues is related to the removal of an undocumented API. This API was added to enable [JSX Spread Attributes](/docs/jsx-spread.html) in our JS compile tools (react-tools, JSXTransformer) before `Object.assign` was standard. When we stopped supporting these tools last year, we kept the API there to catch the longer tail of people using those tools. Meanwhile we moved to using Babel and encouraged others to do the same. Babel will typically compile the spread use to an `_extends` helper, which will use `Object.assign`. We did not properly research other compilation tools before deciding to remove the API in v15. Specifically, TypeScript and coffee-react are two popular packages using `React.__spread`, as well as reactify which still makes use react-tools. In order to make sure that code compiled with these tools is not broken, we will be restoring the `React.__spread` API and adding a warning. It will be removed in the future so if you maintain a project making using of it, we encourage you to compile to `Object.assign` directly or a similar helper function.
9
-
10
-The second issue resulted in cursor position being lost in controlled inputs. We merged a pull request earlier this week to fix a separate regression from v0.14. Our goal was to target `<option>` elements but we ended up targeting all interactions with `value` properties. Unfortunately we didn't test it as thoroughly as we thought. We backed out the offending change and fixed the issue in different way which doesn't have the same problem.
11
-
12
-We apologize if you installed 15.0.0 and have encountered these issues yourselves.
13
-
14
-As usual, you can get install the `react` package via npm or download a browser bundle.
15
-
16
-* **React**
17
- Dev build with warnings: <https://fb.me/react-15.0.1.js>
18
- Minified build for production: <https://fb.me/react-15.0.1.min.js>
19
-* **React with Add-Ons**
20
- Dev build with warnings: <https://fb.me/react-with-addons-15.0.1.js>
21
- Minified build for production: <https://fb.me/react-with-addons-15.0.1.min.js>
22
-* **React DOM** (include React in the page before React DOM)
23
- Dev build with warnings: <https://fb.me/react-dom-15.0.1.js>
24
- Minified build for production: <https://fb.me/react-dom-15.0.1.min.js>
25
-
26
-## Changelog
27
-
28
-### React
29
-- Restore `React.__spread` API to unbreak code compiled with some tools making use of this undocumented API. It is now officially deprecated.
30
- <small>[@zpao](https://github.com/zpao) in [#6444](https://github.com/facebook/react/pull/6444)</small>
31
-
32
-### ReactDOM
33
-- Fixed issue resulting in loss of cursor position in controlled inputs.
34
- <small>[@sophiebits](https://github.com/sophiebits) in [#6449](https://github.com/facebook/react/pull/6449)</small>
docs/_posts/2016-07-11-introducing-reacts-error-code-system.md
deleted
-18
@@ -1,18 +0,0 @@
1
----
2
-title: "Introducing React's Error Code System"
3
-author: [keyanzhang]
4
----
5
-
6
-Building a better developer experience has been one of the things that React deeply cares about, and a crucial part of it is to detect anti-patterns/potential errors early and provide helpful error messages when things (may) go wrong. However, most of these only exist in development mode; in production, we avoid having extra expensive assertions and sending down full error messages in order to reduce the number of bytes sent over the wire.
7
-
8
-Prior to this release, we stripped out error messages at build-time and this is why you might have seen this message in production:
9
-
10
-> Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.
11
-
12
-In order to make debugging in production easier, we're introducing an Error Code System in [15.2.0](https://github.com/facebook/react/releases/tag/v15.2.0). We developed a [gulp script](https://github.com/facebook/react/blob/master/scripts/error-codes/gulp-extract-errors.js) that collects all of our `invariant` error messages and folds them to a [JSON file](https://github.com/facebook/react/blob/master/scripts/error-codes/codes.json), and at build-time Babel uses the JSON to [rewrite](https://github.com/facebook/react/blob/master/scripts/error-codes/replace-invariant-error-codes.js) our `invariant` calls in production to reference the corresponding error IDs. Now when things go wrong in production, the error that React throws will contain a URL with an error ID and relevant information. The URL will point you to a page in our documentation where the original error message gets reassembled.
13
-
14
-While we hope you don't see errors often, you can see how it works [here](/docs/error-decoder.html?invariant=109&args[]=Foo). This is what the same error from above will look like:
15
-
16
-> Minified React error #109; visit https://reactjs.org/docs/error-decoder.html?invariant=109&args[]=Foo for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
17
-
18
-We do this so that the developer experience is as good as possible, while also keeping the production bundle size as small as possible. This feature shouldn't require any changes on your side — use the `min.js` files in production or bundle your application code with `process.env.NODE_ENV === 'production'` and you should be good to go!
docs/_posts/2016-07-13-mixins-considered-harmful.md
deleted
-614
@@ -1,614 +0,0 @@
1
----
2
-title: "Mixins Considered Harmful"
3
-author: [gaearon]
4
----
5
-
6
-“How do I share the code between several components?” is one of the first questions that people ask when they learn React. Our answer has always been to use component composition for code reuse. You can define a component and use it in several other components.
7
-
8
-It is not always obvious how a certain pattern can be solved with composition. React is influenced by functional programming but it came into the field that was dominated by object-oriented libraries. It was hard for engineers both inside and outside of Facebook to give up on the patterns they were used to.
9
-
10
-To ease the initial adoption and learning, we included certain escape hatches into React. The mixin system was one of those escape hatches, and its goal was to give you a way to reuse code between components when you aren’t sure how to solve the same problem with composition.
11
-
12
-Three years passed since React was released. The landscape has changed. Multiple view libraries now adopt a component model similar to React. Using composition over inheritance to build declarative user interfaces is no longer a novelty. We are also more confident in the React component model, and we have seen many creative uses of it both internally and in the community.
13
-
14
-In this post, we will consider the problems commonly caused by mixins. Then we will suggest several alternative patterns for the same use cases. We have found those patterns to scale better with the complexity of the codebase than mixins.
15
-
16
-## Why Mixins are Broken
17
-
18
-At Facebook, React usage has grown from a few components to thousands of them. This gives us a window into how people use React. Thanks to declarative rendering and top-down data flow, many teams were able to fix a bunch of bugs while shipping new features as they adopted React.
19
-
20
-However it’s inevitable that some of our code using React gradually became incomprehensible. Occasionally, the React team would see groups of components in different projects that people were afraid to touch. These components were too easy to break accidentally, were confusing to new developers, and eventually became just as confusing to the people who wrote them in the first place. Much of this confusion was caused by mixins. At the time, I wasn’t working at Facebook but I came to the [same conclusions](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750) after writing my fair share of terrible mixins.
21
-
22
-This doesn’t mean that mixins themselves are bad. People successfully employ them in different languages and paradigms, including some functional languages. At Facebook, we extensively use traits in Hack which are fairly similar to mixins. Nevertheless, we think that mixins are unnecessary and problematic in React codebases. Here’s why.
23
-
24
-### Mixins introduce implicit dependencies
25
-
26
-Sometimes a component relies on a certain method defined in the mixin, such as `getClassName()`. Sometimes it’s the other way around, and mixin calls a method like `renderHeader()` on the component. JavaScript is a dynamic language so it’s hard to enforce or document these dependencies.
27
-
28
-Mixins break the common and usually safe assumption that you can rename a state key or a method by searching for its occurrences in the component file. You might write a stateful component and then your coworker might add a mixin that reads this state. In a few months, you might want to move that state up to the parent component so it can be shared with a sibling. Will you remember to update the mixin to read a prop instead? What if, by now, other components also use this mixin?
29
-
30
-These implicit dependencies make it hard for new team members to contribute to a codebase. A component’s `render()` method might reference some method that isn’t defined on the class. Is it safe to remove? Perhaps it’s defined in one of the mixins. But which one of them? You need to scroll up to the mixin list, open each of those files, and look for this method. Worse, mixins can specify their own mixins, so the search can be deep.
31
-
32
-Often, mixins come to depend on other mixins, and removing one of them breaks the other. In these situations it is very tricky to tell how the data flows in and out of mixins, and what their dependency graph looks like. Unlike components, mixins don’t form a hierarchy: they are flattened and operate in the same namespace.
33
-
34
-### Mixins cause name clashes
35
-
36
-There is no guarantee that two particular mixins can be used together. For example, if `FluxListenerMixin` defines `handleChange()` and `WindowSizeMixin` defines `handleChange()`, you can’t use them together. You also can’t define a method with this name on your own component.
37
-
38
-It’s not a big deal if you control the mixin code. When you have a conflict, you can rename that method on one of the mixins. However it’s tricky because some components or other mixins may already be calling this method directly, and you need to find and fix those calls as well.
39
-
40
-If you have a name conflict with a mixin from a third party package, you can’t just rename a method on it. Instead, you have to use awkward method names on your component to avoid clashes.
41
-
42
-The situation is no better for mixin authors. Even adding a new method to a mixin is always a potentially breaking change because a method with the same name might already exist on some of the components using it, either directly or through another mixin. Once written, mixins are hard to remove or change. Bad ideas don’t get refactored away because refactoring is too risky.
43
-
44
-### Mixins cause snowballing complexity
45
-
46
-Even when mixins start out simple, they tend to become complex over time. The example below is based on a real scenario I’ve seen play out in a codebase.
47
-
48
-A component needs some state to track mouse hover. To keep this logic reusable, you might extract `handleMouseEnter()`, `handleMouseLeave()` and `isHovering()` into a `HoverMixin`. Next, somebody needs to implement a tooltip. They don’t want to duplicate the logic in `HoverMixin` so they create a `TooltipMixin` that uses `HoverMixin`. `TooltipMixin` reads `isHovering()` provided by `HoverMixin` in its `componentDidUpdate()` and either shows or hides the tooltip.
49
-
50
-A few months later, somebody wants to make the tooltip direction configurable. In an effort to avoid code duplication, they add support for a new optional method called `getTooltipOptions()` to `TooltipMixin`. By this time, components that show popovers also use `HoverMixin`. However popovers need a different hover delay. To solve this, somebody adds support for an optional `getHoverOptions()` method and implements it in `TooltipMixin`. Those mixins are now tightly coupled.
51
-
52
-This is fine while there are no new requirements. However this solution doesn’t scale well. What if you want to support displaying multiple tooltips in a single component? You can’t define the same mixin twice in a component. What if the tooltips need to be displayed automatically in a guided tour instead of on hover? Good luck decoupling `TooltipMixin` from `HoverMixin`. What if you need to support the case where the hover area and the tooltip anchor are located in different components? You can’t easily hoist the state used by mixin up into the parent component. Unlike components, mixins don’t lend themselves naturally to such changes.
53
-
54
-Every new requirement makes the mixins harder to understand. Components using the same mixin become increasingly coupled with time. Any new capability gets added to all of the components using that mixin. There is no way to split a “simpler” part of the mixin without either duplicating the code or introducing more dependencies and indirection between mixins. Gradually, the encapsulation boundaries erode, and since it’s hard to change or remove the existing mixins, they keep getting more abstract until nobody understands how they work.
55
-
56
-These are the same problems we faced building apps before React. We found that they are solved by declarative rendering, top-down data flow, and encapsulated components. At Facebook, we have been migrating our code to use alternative patterns to mixins, and we are generally happy with the results. You can read about those patterns below.
57
-
58
-## Migrating from Mixins
59
-
60
-Let’s make it clear that mixins are not technically deprecated. If you use `React.createClass()`, you may keep using them. We only say that they didn’t work well for us, and so we won’t recommend using them in the future.
61
-
62
-Every section below corresponds to a mixin usage pattern that we found in the Facebook codebase. For each of them, we describe the problem and a solution that we think works better than mixins. The examples are written in ES5 but once you don’t need mixins, you can switch to ES6 classes if you’d like.
63
-
64
-We hope that you find this list helpful. Please let us know if we missed important use cases so we can either amend the list or be proven wrong!
65
-
66
-### Performance Optimizations
67
-
68
-One of the most commonly used mixins is [`PureRenderMixin`](/docs/pure-render-mixin.html). You might be using it in some components to [prevent unnecessary re-renders](/docs/advanced-performance.html#shouldcomponentupdate-in-action) when the props and state are shallowly equal to the previous props and state:
69
-
70
-```javascript
71
-var PureRenderMixin = require('react-addons-pure-render-mixin');
72
-
73
-var Button = React.createClass({
74
- mixins: [PureRenderMixin],
75
-
76
- // ...
77
-
78
-});
79
-```
80
-
81
-#### Solution
82
-
83
-To express the same without mixins, you can use the [`shallowCompare`](/docs/shallow-compare.html) function directly instead:
84
-
85
-```js
86
-var shallowCompare = require('react-addons-shallow-compare');
87
-
88
-var Button = React.createClass({
89
- shouldComponentUpdate: function(nextProps, nextState) {
90
- return shallowCompare(this, nextProps, nextState);
91
- },
92
-
93
- // ...
94
-
95
-});
96
-```
97
-
98
-If you use a custom mixin implementing a `shouldComponentUpdate` function with different algorithm, we suggest exporting just that single function from a module and calling it directly from your components.
99
-
100
-We understand that more typing can be annoying. For the most common case, we plan to [introduce a new base class](https://github.com/facebook/react/pull/7195) called `React.PureComponent` in the next minor release. It uses the same shallow comparison as `PureRenderMixin` does today.
101
-
102
-### Subscriptions and Side Effects
103
-
104
-The second most common type of mixins that we encountered are mixins that subscribe a React component to a third-party data source. Whether this data source is a Flux Store, an Rx Observable, or something else, the pattern is very similar: the subscription is created in `componentDidMount`, destroyed in `componentWillUnmount`, and the change handler calls `this.setState()`.
105
-
106
-```javascript
107
-var SubscriptionMixin = {
108
- getInitialState: function() {
109
- return {
110
- comments: DataSource.getComments()
111
- };
112
- },
113
-
114
- componentDidMount: function() {
115
- DataSource.addChangeListener(this.handleChange);
116
- },
117
-
118
- componentWillUnmount: function() {
119
- DataSource.removeChangeListener(this.handleChange);
120
- },
121
-
122
- handleChange: function() {
123
- this.setState({
124
- comments: DataSource.getComments()
125
- });
126
- }
127
-};
128
-
129
-var CommentList = React.createClass({
130
- mixins: [SubscriptionMixin],
131
-
132
- render: function() {
133
- // Reading comments from state managed by mixin.
134
- var comments = this.state.comments;
135
- return (
136
- <div>
137
- {comments.map(function(comment) {
138
- return <Comment comment={comment} key={comment.id} />
139
- })}
140
- </div>
141
- )
142
- }
143
-});
144
-
145
-module.exports = CommentList;
146
-```
147
-
148
-#### Solution
149
-
150
-If there is just one component subscribed to this data source, it is fine to embed the subscription logic right into the component. Avoid premature abstractions.
151
-
152
-If several components used this mixin to subscribe to a data source, a nice way to avoid repetition is to use a pattern called [“higher-order components”](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750). It can sound intimidating so we will take a closer look at how this pattern naturally emerges from the component model.
153
-
154
-#### Higher-Order Components Explained
155
-
156
-Let’s forget about React for a second. Consider these two functions that add and multiply numbers, logging the results as they do that:
157
-
158
-```js
159
-function addAndLog(x, y) {
160
- var result = x + y;
161
- console.log('result:', result);
162
- return result;
163
-}
164
-
165
-function multiplyAndLog(x, y) {
166
- var result = x * y;
167
- console.log('result:', result);
168
- return result;
169
-}
170
-```
171
-
172
-These two functions are not very useful but they help us demonstrate a pattern that we can later apply to components.
173
-
174
-Let’s say that we want to extract the logging logic out of these functions without changing their signatures. How can we do this? An elegant solution is to write a [higher-order function](https://en.wikipedia.org/wiki/Higher-order_function), that is, a function that takes a function as an argument and returns a function.
175
-
176
-Again, it sounds more intimidating than it really is:
177
-
178
-```js
179
-function withLogging(wrappedFunction) {
180
- // Return a function with the same API...
181
- return function(x, y) {
182
- // ... that calls the original function
183
- var result = wrappedFunction(x, y);
184
- // ... but also logs its result!
185
- console.log('result:', result);
186
- return result;
187
- };
188
-}
189
-```
190
-
191
-The `withLogging` higher-order function lets us write `add` and `multiply` without the logging statements, and later wrap them to get `addAndLog` and `multiplyAndLog` with exactly the same signatures as before:
192
-
193
-```js
194
-function add(x, y) {
195
- return x + y;
196
-}
197
-
198
-function multiply(x, y) {
199
- return x * y;
200
-}
201
-
202
-function withLogging(wrappedFunction) {
203
- return function(x, y) {
204
- var result = wrappedFunction(x, y);
205
- console.log('result:', result);
206
- return result;
207
- };
208
-}
209
-
210
-// Equivalent to writing addAndLog by hand:
211
-var addAndLog = withLogging(add);
212
-
213
-// Equivalent to writing multiplyAndLog by hand:
214
-var multiplyAndLog = withLogging(multiply);
215
-```
216
-
217
-Higher-order components are a very similar pattern, but applied to components in React. We will apply this transformation from mixins in two steps.
218
-
219
-As a first step, we will split our `CommentList` component in two, a child and a parent. The child will be only concerned with rendering the comments. The parent will set up the subscription and pass the up-to-date data to the child via props.
220
-
221
-```js
222
-// This is a child component.
223
-// It only renders the comments it receives as props.
224
-var CommentList = React.createClass({
225
- render: function() {
226
- // Note: now reading from props rather than state.
227
- var comments = this.props.comments;
228
- return (
229
- <div>
230
- {comments.map(function(comment) {
231
- return <Comment comment={comment} key={comment.id} />
232
- })}
233
- </div>
234
- )
235
- }
236
-});
237
-
238
-// This is a parent component.
239
-// It subscribes to the data source and renders <CommentList />.
240
-var CommentListWithSubscription = React.createClass({
241
- getInitialState: function() {
242
- return {
243
- comments: DataSource.getComments()
244
- };
245
- },
246
-
247
- componentDidMount: function() {
248
- DataSource.addChangeListener(this.handleChange);
249
- },
250
-
251
- componentWillUnmount: function() {
252
- DataSource.removeChangeListener(this.handleChange);
253
- },
254
-
255
- handleChange: function() {
256
- this.setState({
257
- comments: DataSource.getComments()
258
- });
259
- },
260
-
261
- render: function() {
262
- // We pass the current state as props to CommentList.
263
- return <CommentList comments={this.state.comments} />;
264
- }
265
-});
266
-
267
-module.exports = CommentListWithSubscription;
268
-```
269
-
270
-There is just one final step left to do.
271
-
272
-Remember how we made `withLogging()` take a function and return another function wrapping it? We can apply a similar pattern to React components.
273
-
274
-We will write a new function called `withSubscription(WrappedComponent)`. Its argument could be any React component. We will pass `CommentList` as `WrappedComponent`, but we could also apply `withSubscription()` to any other component in our codebase.
275
-
276
-This function would return another component. The returned component would manage the subscription and render `<WrappedComponent />` with the current data.
277
-
278
-We call this pattern a “higher-order component”.
279
-
280
-The composition happens at React rendering level rather than with a direct function call. This is why it doesn’t matter whether the wrapped component is defined with `createClass()`, as an ES6 class or a function. If `WrappedComponent` is a React component, the component created by `withSubscription()` can render it.
281
-
282
-```js
283
-// This function takes a component...
284
-function withSubscription(WrappedComponent) {
285
- // ...and returns another component...
286
- return React.createClass({
287
- getInitialState: function() {
288
- return {
289
- comments: DataSource.getComments()
290
- };
291
- },
292
-
293
- componentDidMount: function() {
294
- // ... that takes care of the subscription...
295
- DataSource.addChangeListener(this.handleChange);
296
- },
297
-
298
- componentWillUnmount: function() {
299
- DataSource.removeChangeListener(this.handleChange);
300
- },
301
-
302
- handleChange: function() {
303
- this.setState({
304
- comments: DataSource.getComments()
305
- });
306
- },
307
-
308
- render: function() {
309
- // ... and renders the wrapped component with the fresh data!
310
- return <WrappedComponent comments={this.state.comments} />;
311
- }
312
- });
313
-}
314
-```
315
-
316
-Now we can declare `CommentListWithSubscription` by applying `withSubscription` to `CommentList`:
317
-
318
-```js
319
-var CommentList = React.createClass({
320
- render: function() {
321
- var comments = this.props.comments;
322
- return (
323
- <div>
324
- {comments.map(function(comment) {
325
- return <Comment comment={comment} key={comment.id} />
326
- })}
327
- </div>
328
- )
329
- }
330
-});
331
-
332
-// withSubscription() returns a new component that
333
-// is subscribed to the data source and renders
334
-// <CommentList /> with up-to-date data.
335
-var CommentListWithSubscription = withSubscription(CommentList);
336
-
337
-// The rest of the app is interested in the subscribed component
338
-// so we export it instead of the original unwrapped CommentList.
339
-module.exports = CommentListWithSubscription;
340
-```
341
-
342
-#### Solution, Revisited
343
-
344
-Now that we understand higher-order components better, let’s take another look at the complete solution that doesn’t involve mixins. There are a few minor changes that are annotated with inline comments:
345
-
346
-```js
347
-function withSubscription(WrappedComponent) {
348
- return React.createClass({
349
- getInitialState: function() {
350
- return {
351
- comments: DataSource.getComments()
352
- };
353
- },
354
-
355
- componentDidMount: function() {
356
- DataSource.addChangeListener(this.handleChange);
357
- },
358
-
359
- componentWillUnmount: function() {
360
- DataSource.removeChangeListener(this.handleChange);
361
- },
362
-
363
- handleChange: function() {
364
- this.setState({
365
- comments: DataSource.getComments()
366
- });
367
- },
368
-
369
- render: function() {
370
- // Use JSX spread syntax to pass all props and state down automatically.
371
- return <WrappedComponent {...this.props} {...this.state} />;
372
- }
373
- });
374
-}
375
-
376
-// Optional change: convert CommentList to a functional component
377
-// because it doesn't use lifecycle hooks or state.
378
-function CommentList(props) {
379
- var comments = props.comments;
380
- return (
381
- <div>
382
- {comments.map(function(comment) {
383
- return <Comment comment={comment} key={comment.id} />
384
- })}
385
- </div>
386
- )
387
-}
388
-
389
-// Instead of declaring CommentListWithSubscription,
390
-// we export the wrapped component right away.
391
-module.exports = withSubscription(CommentList);
392
-```
393
-
394
-Higher-order components are a powerful pattern. You can pass additional arguments to them if you want to further customize their behavior. After all, they are not even a feature of React. They are just functions that receive components and return components that wrap them.
395
-
396
-Like any solution, higher-order components have their own pitfalls. For example, if you heavily use [refs](/docs/more-about-refs.html), you might notice that wrapping something into a higher-order component changes the ref to point to the wrapping component. In practice we discourage using refs for component communication so we don’t think it’s a big issue. In the future, we might consider adding [ref forwarding](https://github.com/facebook/react/issues/4213) to React to solve this annoyance.
397
-
398
-### Rendering Logic
399
-
400
-The next most common use case for mixins that we discovered in our codebase is sharing rendering logic between components.
401
-
402
-Here is a typical example of this pattern:
403
-
404
-```js
405
-var RowMixin = {
406
- // Called by components from render()
407
- renderHeader: function() {
408
- return (
409
- <div className='row-header'>
410
- <h1>
411
- {this.getHeaderText() /* Defined by components */}
412
- </h1>
413
- </div>
414
- );
415
- }
416
-};
417
-
418
-var UserRow = React.createClass({
419
- mixins: [RowMixin],
420
-
421
- // Called by RowMixin.renderHeader()
422
- getHeaderText: function() {
423
- return this.props.user.fullName;
424
- },
425
-
426
- render: function() {
427
- return (
428
- <div>
429
- {this.renderHeader() /* Defined by RowMixin */}
430
- <h2>{this.props.user.biography}</h2>
431
- </div>
432
- )
433
- }
434
-});
435
-```
436
-
437
-Multiple components may be sharing `RowMixin` to render the header, and each of them would need to define `getHeaderText()`.
438
-
439
-#### Solution
440
-
441
-If you see rendering logic inside a mixin, it’s time to extract a component!
442
-
443
-Instead of `RowMixin`, we will define a `<RowHeader>` component. We will also replace the convention of defining a `getHeaderText()` method with the standard mechanism of top-data flow in React: passing props.
444
-
445
-Finally, since neither of those components currently need lifecycle hooks or state, we can declare them as simple functions:
446
-
447
-```js
448
-function RowHeader(props) {
449
- return (
450
- <div className='row-header'>
451
- <h1>{props.text}</h1>
452
- </div>
453
- );
454
-}
455
-
456
-function UserRow(props) {
457
- return (
458
- <div>
459
- <RowHeader text={props.user.fullName} />
460
- <h2>{props.user.biography}</h2>
461
- </div>
462
- );
463
-}
464
-```
465
-
466
-Props keep component dependencies explicit, easy to replace, and enforceable with tools like [Flow](https://flowtype.org/) and [TypeScript](https://www.typescriptlang.org/).
467
-
468
-> **Note:**
469
->
470
-> Defining components as functions is not required. There is also nothing wrong with using lifecycle hooks and state—they are first-class React features. We use functional components in this example because they are easier to read and we didn’t need those extra features, but classes would work just as fine.
471
-
472
-### Context
473
-
474
-Another group of mixins we discovered were helpers for providing and consuming [React context](/docs/context.html). Context is an experimental unstable feature, has [certain issues](https://github.com/facebook/react/issues/2517), and will likely change its API in the future. We don’t recommend using it unless you’re confident there is no other way of solving your problem.
475
-
476
-Nevertheless, if you already use context today, you might have been hiding its usage with mixins like this:
477
-
478
-```js
479
-var RouterMixin = {
480
- contextTypes: {
481
- router: React.PropTypes.object.isRequired
482
- },
483
-
484
- // The mixin provides a method so that components
485
- // don't have to use the context API directly.
486
- push: function(path) {
487
- this.context.router.push(path)
488
- }
489
-};
490
-
491
-var Link = React.createClass({
492
- mixins: [RouterMixin],
493
-
494
- handleClick: function(e) {
495
- e.stopPropagation();
496
-
497
- // This method is defined in RouterMixin.
498
- this.push(this.props.to);
499
- },
500
-
501
- render: function() {
502
- return (
503
- <a onClick={this.handleClick}>
504
- {this.props.children}
505
- </a>
506
- );
507
- }
508
-});
509
-
510
-module.exports = Link;
511
-```
512
-
513
-#### Solution
514
-
515
-We agree that hiding context usage from consuming components is a good idea until the context API stabilizes. However, we recommend using higher-order components instead of mixins for this.
516
-
517
-Let the wrapping component grab something from the context, and pass it down with props to the wrapped component:
518
-
519
-```js
520
-function withRouter(WrappedComponent) {
521
- return React.createClass({
522
- contextTypes: {
523
- router: React.PropTypes.object.isRequired
524
- },
525
-
526
- render: function() {
527
- // The wrapper component reads something from the context
528
- // and passes it down as a prop to the wrapped component.
529
- var router = this.context.router;
530
- return <WrappedComponent {...this.props} router={router} />;
531
- }
532
- });
533
-};
534
-
535
-var Link = React.createClass({
536
- handleClick: function(e) {
537
- e.stopPropagation();
538
-
539
- // The wrapped component uses props instead of context.
540
- this.props.router.push(this.props.to);
541
- },
542
-
543
- render: function() {
544
- return (
545
- <a onClick={this.handleClick}>
546
- {this.props.children}
547
- </a>
548
- );
549
- }
550
-});
551
-
552
-// Don't forget to wrap the component!
553
-module.exports = withRouter(Link);
554
-```
555
-
556
-If you’re using a third party library that only provides a mixin, we encourage you to file an issue with them linking to this post so that they can provide a higher-order component instead. In the meantime, you can create a higher-order component around it yourself in exactly the same way.
557
-
558
-### Utility Methods
559
-
560
-Sometimes, mixins are used solely to share utility functions between components:
561
-
562
-```js
563
-var ColorMixin = {
564
- getLuminance(color) {
565
- var c = parseInt(color, 16);
566
- var r = (c & 0xFF0000) >> 16;
567
- var g = (c & 0x00FF00) >> 8;
568
- var b = (c & 0x0000FF);
569
- return (0.299 * r + 0.587 * g + 0.114 * b);
570
- }
571
-};
572
-
573
-var Button = React.createClass({
574
- mixins: [ColorMixin],
575
-
576
- render: function() {
577
- var theme = this.getLuminance(this.props.color) > 160 ? 'dark' : 'light';
578
- return (
579
- <div className={theme}>
580
- {this.props.children}
581
- </div>
582
- )
583
- }
584
-});
585
-```
586
-
587
-#### Solution
588
-
589
-Put utility functions into regular JavaScript modules and import them. This also makes it easier to test them or use them outside of your components:
590
-
591
-```js
592
-var getLuminance = require('../utils/getLuminance');
593
-
594
-var Button = React.createClass({
595
- render: function() {
596
- var theme = getLuminance(this.props.color) > 160 ? 'dark' : 'light';
597
- return (
598
- <div className={theme}>
599
- {this.props.children}
600
- </div>
601
- )
602
- }
603
-});
604
-```
605
-
606
-### Other Use Cases
607
-
608
-Sometimes people use mixins to selectively add logging to lifecycle hooks in some components. In the future, we intend to provide an [official DevTools API](https://github.com/facebook/react/issues/5306) that would let you implement something similar without touching the components. However it’s still very much a work in progress. If you heavily depend on logging mixins for debugging, you might want to keep using those mixins for a little longer.
609
-
610
-If you can’t accomplish something with a component, a higher-order component, or a utility module, it could be mean that React should provide this out of the box. [File an issue](https://github.com/facebook/react/issues/new) to tell us about your use case for mixins, and we’ll help you consider alternatives or perhaps implement your feature request.
611
-
612
-Mixins are not deprecated in the traditional sense. You can keep using them with `React.createClass()`, as we won’t be changing it further. Eventually, as ES6 classes gain more adoption and their usability problems in React are solved, we might split `React.createClass()` into a separate package because most people wouldn’t need it. Even in that case, your old mixins would keep working.
613
-
614
-We believe that the alternatives above are better for the vast majority of cases, and we invite you to try writing React apps without using mixins.
docs/_posts/2016-07-22-create-apps-with-no-configuration.md
deleted
-164
@@ -1,164 +0,0 @@
1
----
2
-title: "Create Apps with No Configuration"
3
-author: [gaearon]
4
----
5
-
6
-**[Create React App](https://github.com/facebookincubator/create-react-app)** is a new officially supported way to create single-page React applications. It offers a modern build setup with no configuration.
7
-
8
-## Getting Started
9
-
10
-### Installation
11
-
12
-First, install the global package:
13
-
14
-```sh
15
-npm install -g create-react-app
16
-```
17
-
18
-Node.js 4.x or higher is required.
19
-
20
-### Creating an App
21
-
22
-Now you can use it to create a new app:
23
-
24
-```sh
25
-create-react-app hello-world
26
-```
27
-
28
-This will take a while as npm installs the transitive dependencies, but once it’s done, you will see a list of commands you can run in the created folder:
29
-
30
-
31
-
32
-### Starting the Server
33
-
34
-Run `npm start` to launch the development server. The browser will open automatically with the created app’s URL.
35
-
36
-
37
-
38
-Create React App uses both webpack and Babel under the hood.
39
-The console output is tuned to be minimal to help you focus on the problems:
40
-
41
-
42
-
43
-ESLint is also integrated so lint warnings are displayed right in the console:
44
-
45
-
46
-
47
-We only picked a small subset of lint rules that often lead to bugs.
48
-
49
-### Building for Production
50
-
51
-To build an optimized bundle, run `npm run build`:
52
-
53
-
54
-
55
-It is minified, correctly envified, and the assets include content hashes for caching.
56
-
57
-### One Dependency
58
-
59
-Your `package.json` contains only a single build dependency and a few scripts:
60
-
61
-```js
62
-{
63
- "name": "hello-world",
64
- "dependencies": {
65
- "react": "^15.2.1",
66
- "react-dom": "^15.2.1"
67
- },
68
- "devDependencies": {
69
- "react-scripts": "0.1.0"
70
- },
71
- "scripts": {
72
- "start": "react-scripts start",
73
- "build": "react-scripts build",
74
- "eject": "react-scripts eject"
75
- }
76
-}
77
-```
78
-
79
-We take care of updating Babel, ESLint, and webpack to stable compatible versions so you can update a single dependency to get them all.
80
-
81
-### Zero Configuration
82
-
83
-It is worth repeating: there are no configuration files or complicated folder structures. The tool only generates the files you need to build your app.
84
-
85
-```
86
-hello-world/
87
- README.md
88
- index.html
89
- favicon.ico
90
- node_modules/
91
- package.json
92
- src/
93
- App.css
94
- App.js
95
- index.css
96
- index.js
97
- logo.svg
98
-```
99
-
100
-All the build settings are preconfigured and can’t be changed. Some features, such as testing, are currently missing. This is an intentional limitation, and we recognize it might not work for everybody. And this brings us to the last point.
101
-
102
-### No Lock-In
103
-
104
-We first saw this feature in [Enclave](https://github.com/eanplatter/enclave), and we loved it. We talked to [Ean](https://twitter.com/EanPlatter), and he was excited to collaborate with us. He already sent a few pull requests!
105
-
106
-“Ejecting” lets you leave the comfort of Create React App setup at any time. You run a single command, and all the build dependencies, configs, and scripts are moved right into your project. At this point you can customize everything you want, but effectively you are forking our configuration and going your own way. If you’re experienced with build tooling and prefer to fine-tune everything to your taste, this lets you use Create React App as a boilerplate generator.
107
-
108
-We expect that at early stages, many people will “eject” for one reason or another, but as we learn from them, we will make the default setup more and more compelling while still providing no configuration.
109
-
110
-## Try It Out!
111
-
112
-You can find [**Create React App**](https://github.com/facebookincubator/create-react-app) with additional instructions on GitHub.
113
-
114
-This is an experiment, and only time will tell if it becomes a popular way of creating and building React apps, or fades into obscurity.
115
-
116
-We welcome you to participate in this experiment. Help us build the React tooling that more people can use. We are always [open to feedback](https://github.com/facebookincubator/create-react-app/issues/11).
117
-
118
-## The Backstory
119
-
120
-React was one of the first libraries to embrace transpiling JavaScript. As a result, even though you can [learn React without any tooling](https://github.com/facebook/react/blob/3fd582643ef3d222a00a0c756292c15b88f9f83c/examples/basic-jsx/index.html), the React ecosystem has commonly become associated with an overwhelming explosion of tools.
121
-
122
-Eric Clemmons called this phenomenon the “[JavaScript Fatigue](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4)”:
123
-
124
->Ultimately, the problem is that by choosing React (and inherently JSX), you’ve unwittingly opted into a confusing nest of build tools, boilerplate, linters, & time-sinks to deal with before you ever get to create anything.
125
-
126
-It is tempting to write code in ES2015 and JSX. It is sensible to use a bundler to keep the codebase modular, and a linter to catch the common mistakes. It is nice to have a development server with fast rebuilds, and a command to produce optimized bundles for production.
127
-
128
-Combining these tools requires some experience with each of them. Even so, it is far too easy to get dragged into fighting small incompatibilities, unsatisfied peerDependencies, and illegible configuration files.
129
-
130
-Many of those tools are plugin platforms and don’t directly acknowledge each other’s existence. They leave it up to the users to wire them together. The tools mature and change independently, and tutorials quickly get out of date.
131
-
132
-<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Marc was almost ready to implement his "hello world" React app <a href="https://t.co/ptdg4yteF1">pic.twitter.com/ptdg4yteF1</a></p>— Thomas Fuchs (@thomasfuchs) <a href="https://twitter.com/thomasfuchs/status/708675139253174273">March 12, 2016</a></blockquote>
133
-
134
-This doesn’t mean those tools aren’t great. To many of us, they have become indispensable, and we very much appreciate the effort of their maintainers. They already have too much on their plates to worry about the state of the React ecosystem.
135
-
136
-Still, we knew it was frustrating to spend days setting up a project when all you wanted was to learn React. We wanted to fix this.
137
-
138
-## Could We Fix This?
139
-
140
-We found ourselves in an unusual dilemma.
141
-
142
-So far, [our strategy](/contributing/design-principles.html#dogfooding) has been to only release the code that we are using at Facebook. This helped us ensure that every project is battle-tested and has clearly defined scope and priorities.
143
-
144
-However, tooling at Facebook is different than at many smaller companies. Linting, transpilation, and packaging are all handled by powerful remote development servers, and product engineers don’t need to configure them. While we wish we could give a dedicated server to every user of React, even Facebook cannot scale that well!
145
-
146
-The React community is very important to us. We knew that we couldn’t fix the problem within the limits of our open source philosophy. This is why we decided to make an exception, and to ship something that we didn’t use ourselves, but that we thought would be useful to the community.
147
-
148
-## The Quest for a React <abbr title="Command Line Interface">CLI</abbr>
149
-
150
-Having just attended [EmberCamp](http://embercamp.com/) a week ago, I was excited about [Ember CLI](https://ember-cli.com/). Ember users have a great “getting started” experience thanks to a curated set of tools united under a single command-line interface. I have heard similar feedback about [Elm Reactor](https://github.com/elm-lang/elm-reactor).
151
-
152
-Providing a cohesive curated experience is valuable by itself, even if the user could in theory assemble those parts themselves. Kathy Sierra [explains it best](http://seriouspony.com/blog/2013/7/24/your-app-makes-me-fat):
153
-
154
->If your UX asks the user to make *choices*, for example, even if those choices are both clear and useful, the act of *deciding* is a cognitive drain. And not just *while* they’re deciding... even *after* we choose, an unconscious cognitive background thread is slowly consuming/leaking resources, “Was *that* the right choice?”
155
-
156
-I never tried to write a command-line tool for React apps, and neither has [Christopher](https://twitter.com/vjeux). We were chatting on Messenger about this idea, and we decided to work together on it for a week as a hackathon project.
157
-
158
-We knew that such projects traditionally haven’t been very successful in the React ecosystem. Christopher told me that multiple “React CLI” projects have started and failed at Facebook. The community tools with similar goals also exist, but so far they have not yet gained enough traction.
159
-
160
-Still, we decided it was worth another shot. Christopher and I created a very rough proof of concept on the weekend, and [Kevin](https://twitter.com/lacker) soon joined us.
161
-
162
-We invited some of the community members to collaborate with us, and we have spent this week working on this tool. We hope that you’ll enjoy using it! [Let us know what you think.](https://github.com/facebookincubator/create-react-app/issues/11)
163
-
164
-We would like to express our gratitude to [Max Stoiber](https://twitter.com/mxstbr), [Jonny Buchanan](https://twitter.com/jbscript), [Ean Platter](https://twitter.com/eanplatter), [Tyler McGinnis](https://github.com/tylermcginnis), [Kent C. Dodds](https://github.com/kentcdodds), and [Eric Clemmons](https://twitter.com/ericclemmons) for their early feedback, ideas, and contributions.
docs/_posts/2016-08-05-relay-state-of-the-state.md
deleted
-81
@@ -1,81 +0,0 @@
1
----
2
-title: "Relay: State of the State"
3
-author: [josephsavona]
4
----
5
-
6
-This month marks a year since we released Relay and we'd like to share an update on the project and what's next.
7
-
8
-## A Year In Review
9
-
10
-A year after launch, we're incredibly excited to see an active community forming around Relay and that companies such as Twitter are [using Relay in production](https://fabric.io/blog/building-fabric-mission-control-with-graphql-and-relay):
11
-
12
-> For a project like mission control, GraphQL and Relay were a near-perfect solution, and the cost of building it any other way justified the investment.
13
->
14
-> -- <cite>Fin Hopkins</cite>
15
-
16
-This kind of positive feedback is really encouraging (I'll admit to re-reading that post far too many times), and great motivation for us to keep going and make Relay even better.
17
-
18
-With the community's help we've already come a long way since the technical preview. Here are some highlights:
19
-
20
-- In March we added support for server-side rendering and for creating multiple instances of Relay on a single page. This was a coordinated effort over the course of several months by community members [Denis Nedelyaev](https://github.com/denvned) and [Gerald Monaco](https://github.com/devknoll) (now at Facebook).
21
-- Also in March we added support for React Native. While we use Relay and React Native together internally, they didn't quite work together in open-source out of the box. We owe a big thanks to [Adam Miskiewicz](https://github.com/skevy), [Tom Burns](https://github.com/boourns), [Gaëtan Renaudeau](https://github.com/gre), [David Aurelio](https://github.com/davidaurelio), [Martín Bigio](https://github.com/martinbigio), [Paul O’Shannessy](https://github.com/zpao), [Sophie Alpert](https://github.com/sophiebits), and many others who helped track down and resolve issues. Finally, thanks to [Steven Luscher](https://github.com/steveluscher) for coordinating this effort and building the first Relay/ReactNative example app.
22
-
23
-We've also seen some great open-source projects spring up around Relay:
24
-
25
-- [Denis Nedelyaev](https://github.com/denvned) created [isomorphic-relay](https://github.com/denvned/isomorphic-relay/), a package that helps developers build server-rendered Relay apps where data is prepared on the server and then used to bootstrap the app on the client.
26
-- [Jimmy Jia](https://github.com/taion) created [react-router-relay](https://github.com/relay-tools/react-router-relay) to integrate Relay data-fetching into React Router.
27
-- [Pavel Chertorogov](https://github.com/nodkz) released [relay-network-layer](https://github.com/nodkz/react-relay-network-layer), which adds features such as batching query requests, middleware, authentication, logging, and more.
28
-
29
-This is just a small sampling of the community's contributions. So far we've merged over 300 PRs - about 25% of our commits - from over 80 of you. These PRs have improved everything from the website and docs down the very core of the framework. We're humbled by these outstanding contributions and excited to keep working with each of you!
30
-
31
-# Retrospective & Roadmap
32
-
33
-Earlier this year we paused to reflect on the state of the project. What was working well? What could be improved? What features should we add, and what could we remove? A few themes emerged: performance on mobile, developer experience, and empowering the community.
34
-
35
-## Mobile Perf
36
-
37
-First, Relay was built to serve the needs of product developers at Facebook. In 2016, that means helping developers to build apps that work well on [mobile devices connecting on slower networks](https://newsroom.fb.com/news/2015/10/news-feed-fyi-building-for-all-connectivity/). For example, people in developing markets commonly use [2011 year-class phones](https://code.facebook.com/posts/307478339448736/year-class-a-classification-system-for-android/) and connect via [2G class networks](https://code.facebook.com/posts/952628711437136/classes-performance-and-network-segmentation-on-android/). These scenarios present their own challenges.
38
-
39
-Therefore, one of our primary goals this year is to optimize Relay for performance on low-end mobile devices *first*, knowing that this can translate to improved performance on high-end devices as well. In addition to standard approaches such as benchmarking, profiling, and optimizations, we're also working on big-picture changes.
40
-
41
-For example, in today's Relay, here's what happens when an app is opened. First, React Native starts initializing the JavaScript context (loading and parsing your code and then running it). When this finishes, the app executes and Relay sees that you need data. It constructs and prints the query, uploads the query text to the server, processes the response, and renders your app. (Note that this process applies on the web, except that the code has to be *downloaded* instead of loaded from the device.)
42
-
43
-Ideally, though, we could begin fetching data as soon as the native code had loaded - in parallel with the JS context initialization. By the time your JS code was ready to run, the data-fetching would already be under way. To do this we would need a way to determine *statically* - at build time - what query an application would send.
44
-
45
-The key is that GraphQL is already static - we just need to fully embrace this fact. More on this later.
46
-
47
-## Developer Experience
48
-
49
-Next, we've paid attention to the community's feedback and know that, to put it simply, Relay could be "easier" to use (and "simpler" too). This isn't entirely surprising to us - Relay was originally designed as a routing library and gradually morphed into a data-fetching library. Concepts like Relay "routes", for example, no longer serve as critical a role and are just one more concept that developers have to learn about. Another example is mutations: while writes *are* inherently more complex than reads, our API doesn't make the simple things simple enough.
50
-
51
-Alongside our focus on mobile performance, we've also kept the developer experience in mind as we evolve Relay core.
52
-
53
-## Empowering the Community
54
-
55
-Finally, we want to make it easier for people in the community to develop useful libraries that work with Relay. By comparison, React's small surface area - components - allows developers to build cool things like routing, higher-order components, or reusable text editors. For Relay, this would mean having the framework provide core primitives that users can build upon. We want it to be possible for the community to integrate Relay with view libraries other than React, or to build real-time subscriptions as a complementary library.
56
-
57
-# What's Next
58
-
59
-These were big goals, and also a bit scary; we knew that incremental improvements would only allow us to move so fast. So in April we started a project to build a new implementation of Relay core targeting low-end mobile devices from the start.
60
-
61
-As you can guess since we're writing this, the experiment was a success. The result is a new core that retains the best parts of Relay today - colocated components & data-dependencies, automatic data/view consistency, declarative data-fetching - while improving performance on mobile devices and addressing several common areas of confusion.
62
-
63
-We're currently focused on shipping the first applications using the new core: ironing out bugs, refining the API changes and developer experience, and adding any missing features. We're excited to bring these changes to open source, and will do so once we've proven them in production. We'll go into more detail in some upcoming talks - links below - but for now here's an overview:
64
-
65
-- **Static Queries**: By adding a couple of Relay-specific directives, we've been able to retain the expressivity of current Relay queries using static syntax (concretely: you know what query an app will execute just by looking at the source text, without having to run that code). For starters this will allow Relay apps to start fetching data in parallel with JavaScript initialization. But it also unlocks other possibilities: knowing the query ahead of time means that we can generate optimized code for handling query responses, for example, or for reading query data from an offline cache.
66
-- **Expressive Mutations**: We'll continue to support a higher-level mutation API for common cases, but will also provide a lower-level API that allows "raw" data access where necessary. If you need to order a list of cached elements, for example, there will be a way to `sort()` it.
67
-- **Route-less Relay**: Routes will be gone in open source. Instead of a route with multiple query definitions, you'll just provide a single query with as many root fields as you want.
68
-- **Cache Eviction/Garbage Collection**: The API and architecture is designed from the start to allow removing cached data that is no longer referenced by a mounted view.
69
-
70
-Stepping back, we recognize that any API changes will require an investment on your part. To make the transition easier, though, *we will continue to support the current API for the foreseeable future* (we're still using it too). And as much as possible we will open-source the tools that we use to migrate our own code. Ideas that we're exploring include codemods, an interoperability layer for the old/new APIs, and tutorials & guides to ease migration.
71
-
72
-Ultimately, we're making these changes because we believe they make Relay better all around: simpler for developers building apps and faster for the people using them.
73
-
74
-# Conclusion
75
-
76
-If you made it this far, congrats and thanks for reading! We'll be sharing more information about these changes in some upcoming talks:
77
-
78
-- [Greg Hurrell](https://github.com/wincent) will presenting a Relay "Deep Dive" at the [Silicon Valley ReactJS Meetup](http://www.meetup.com/Silicon-Valley-ReactJS-Meetup/events/232236845/) on August 17th.
79
-- I ([@josephsavona](https://github.com/josephsavona)) will be speaking about Relay at [React Rally](http://www.reactrally.com) on August 25th.
80
-
81
-We can't wait to share the new code with you and are working as fast as we can to do so!
docs/_posts/2016-09-28-our-first-50000-stars.md
deleted
-229
@@ -1,229 +0,0 @@
1
----
2
-title: "Our First 50,000 Stars"
3
-author: [vjeux]
4
----
5
-
6
-Just three and a half years ago we open sourced a little JavaScript library called React. The journey since that day has been incredibly exciting.
7
-
8
-## Commemorative T-Shirt
9
-
10
-In order to celebrate 50,000 GitHub stars, [Maggie Appleton](http://www.maggieappleton.com/) from [egghead.io](http://egghead.io/) has designed us a special T-shirt, which will be available for purchase from Teespring **only for a week** through Thursday, October 6. Maggie also wrote [a blog post](https://www.behance.net/gallery/43269677/Reacts-50000-Stars-Shirt) showing all the different concepts she came up with before settling on the final design.
11
-
12
-<a target="_blank" href="https://teespring.com/react-50000-stars"><img src="../img/blog/react-50k-tshirt.jpg" width="650" height="340" alt="React 50k Tshirt" /></a>
13
-
14
-The T-shirts are super soft using American Apparel's tri-blend fabric; we also have kids and toddler T-shirts and baby onesies available.
15
-
16
-* [Adult T-shirts (straight-cut and fitted)](https://teespring.com/react-50000-stars)
17
-* [Kids T-shirts](https://teespring.com/react-50000-stars-kids)
18
-* [Toddler T-Shirts](https://teespring.com/react-50000-stars-toddler)
19
-* [Baby Onesies](https://teespring.com/react-50000-stars-baby)
20
-
21
-Proceeds from the shirts will be donated to [CODE2040](http://www.code2040.org/), a nonprofit that creates access, awareness, and opportunities in technology for underrepresented minorities with a specific focus on Black and Latinx talent.
22
-
23
-## Archeology
24
-
25
-We've spent a lot of time trying to explain the concepts behind React and the problems it attempts to solve, but we haven't talked much about how React evolved before being open sourced. This milestone seemed like as good a time as any to dig through the earliest commits and share some of the more important moments and fun facts.
26
-
27
-The story begins in our ads org, where we were building incredibly sophisticated client side web apps using an internal MVC framework called [BoltJS](http://web.archive.org/web/20130608154901/http://shaneosullivan.github.io/boltjs/intro.html). Here's a sample of what some Bolt code looked like:
28
-
29
-```js
30
-var CarView = require('javelin/core').createClass({
31
- name: 'CarView',
32
- extend: require('container').Container,
33
- properties: {
34
- wheels: 4,
35
- },
36
- declare: function() {
37
- return {
38
- childViews: [
39
- { content: 'I have ' },
40
- { ref: 'wheelView' },
41
- { content: ' wheels' }
42
- ]
43
- };
44
- },
45
- setWheels: function(wheels) {
46
- this.findRef('wheelView').setContent(wheels);
47
- },
48
- getWheels: function() {
49
- return this.findRef('wheelView').getContent();
50
- },
51
-});
52
-
53
-var car = new CarView();
54
-car.setWheels(3);
55
-car.placeIn(document.body);
56
-//<div>
57
-// <div>I have </div>
58
-// <div>3</div>
59
-// <div> wheels</div>
60
-//</div>
61
-```
62
-
63
-Bolt introduced a number of APIs and features that would eventually make their way into React including `render`, `createClass`, and `refs`. Bolt introduced the concept of `refs` as a way to create references to nodes that can be used imperatively. This was relevant for legacy interoperability and incremental adoption, and while React would eventually strive to be a lot more functional, `refs` proved to be a very useful way to break out of the functional paradigm when the need arose.
64
-
65
-But as our applications grew more and more sophisticated, our Bolt codebases got pretty complicated. Recognizing some of the framework's shortcomings, [Jordan Walke](https://twitter.com/jordwalke) started experimenting with a side-project called [FaxJS](https://github.com/jordwalke/FaxJs). His goal was to solve many of the same problems as Bolt, but in a very different way. This is actually where most of React's fundamentals were born, including props, state, re-evaluating large portions of the tree to “diff” the UI, server-side rendering, and a basic concept of components.
66
-
67
-```js
68
-TestProject.PersonDisplayer = {
69
- structure : function() {
70
- return Div({
71
- classSet: { personDisplayerContainer: true },
72
- titleDiv: Div({
73
- classSet: { personNameTitle: true },
74
- content: this.props.name
75
- }),
76
- nestedAgeDiv: Div({
77
- content: 'Interests: ' + this.props.interests
78
- })
79
- });
80
- }
81
-};
82
-```
83
-
84
-## FBolt is Born
85
-
86
-Through his FaxJS experiment, Jordan became convinced that functional APIs — which discouraged mutation — offered a better, more scalable way to build user interfaces. He imported his library into Facebook's codebase in March of 2012 and renamed it “FBolt”, signifying an extension of Bolt where components are written in a functional programming style. Or maybe “FBolt” was a nod to FaxJS – he didn't tell us! ;)
87
-
88
-The interoperability between FBolt and Bolt allowed us to experiment with replacing just one component at a time with more functional component APIs. We could test the waters of this new functional paradigm, without having to go all in. We started with the components that were clearly best expressed functionally and then we would later continue to push the boundaries of what we could express as functions.
89
-
90
-Realizing that FBolt wouldn't be a great name for the library when used on its own, Jordan Walke and [Tom Occhino](https://twitter.com/tomocchino) decided on a new name: “React.” After Tom sent out the diff to rename everything to React, Jordan commented:
91
-
92
-
93
-> Jordan Walke:
94
-I might add for the sake of discussion, that many systems advertise some kind of reactivity, but they usually require that you set up some kind of point-to-point listeners and won't work on structured data. This API reacts to any state or property changes, and works with data of any form (as deeply structured as the graph itself) so I think the name is fitting.
95
-
96
-
97
-Most of Tom's other commits at the time were on the first version of [GraphiQL](https://github.com/graphql/graphiql), a project which was recently open sourced.
98
-
99
-## Adding JSX
100
-
101
-Since about 2010 Facebook has been using an extension of PHP called [XHP](https://www.facebook.com/notes/facebook-engineering/xhp-a-new-way-to-write-php/294003943919/), which enables engineers to create UIs using XML literals right inside their PHP code. It was first introduced to help prevent XSS holes but ended up being an excellent way to structure applications with custom components.
102
-
103
-```js
104
-final class :a:post extends :x:element {
105
- attribute :a;
106
- protected function render(): XHPRoot {
107
- $anchor = <a>{$this->getChildren()}</a>;
108
- $form = (
109
- <form
110
- method="post"
111
- action={$this->:href}
112
- target={$this->:target}
113
- class="postLink"
114
- >{$anchor}</form>
115
- );
116
- $this->transferAllAttributes($anchor);
117
- return $form;
118
- }
119
-}
120
-```
121
-
122
-Before Jordan's work had even made its way into the Facebook codebase, Adam Hupp implemented an XHP-like concept for JavaScript, written in Haskell. This system enabled you to write the following inside a JavaScript file:
123
-
124
-```js
125
-function :example:hello(attrib, children) {
126
- return (
127
- <div class="special">
128
- <h1>Hello, World!</h1>
129
- {children}
130
- </div>
131
- );
132
-}
133
-```
134
-
135
-It would compile the above into the following normal ES3-compatible JavaScript:
136
-
137
-```js
138
-function jsx_example_hello(attrib, children) {
139
- return (
140
- S.create("div", {"class": "special"}, [
141
- S.create("h1", {}, ["Hello, World!"]),
142
- children
143
- ]
144
- );
145
-}
146
-```
147
-
148
-In this prototype, `S.create` would immediately create and return a DOM node. Most of the conversations on this prototype revolved around the performance characteristics of `innerHTML` versus creating DOM nodes directly. At the time, it would have been less than ideal to push developers universally in the direction of creating DOM nodes directly since it did not perform as well, especially in Firefox and IE. Facebook's then-CTO [Bret Taylor](https://twitter.com/btaylor) chimed in on the discussion at the time in favor of `innerHTML` over `document.createElement`:
149
-
150
-
151
-> Bret Taylor:
152
-If you are not convinced about innerHTML, here is a small microbenchmark. It is about the same in Chrome. innerHTML is about 30% faster in the latest version of Firefox (much more in previous versions), and about 90% faster in IE8.
153
-
154
-
155
-This work was eventually abandoned but was revived after React made its way into the codebase. Jordan sidelined the previous performance discussions by introducing the concept of a “Virtual DOM,” though its eventual name didn't exist yet.
156
-
157
-
158
-> Jordan Walke:
159
-> For the first step, I propose that we do the easiest, yet most general transformation possible. My suggestion is to simply map xml expressions to function call expressions.
160
->
161
-> - `<x></x>` becomes `x( )`
162
-> - `<x height=12></x>` becomes `x( {height:12} )`
163
-> - `<x> <y> </y> </x>` becomes `x({ childList: [y( )] })`
164
->
165
-> At this point, JSX doesn't need to know about React - it's just a convenient way to write function calls. Coincidentally, React's primary abstraction is the function. Okay maybe it's not so coincidental ;)
166
-
167
-
168
-Adam made a very insightful comment, which is now the default way we write lists in React with JSX.
169
-
170
-
171
-> Adam Hupp:
172
-> I think we should just treat arrays of elements as a frag. This is useful for constructs like:
173
->
174
-> ```js
175
-> <ul>{foo.map(function(i) { return <li>{i.data}</li>; })}</ul>
176
-> ```
177
->
178
-> In this case the ul(..) will get a childList with a single child, which is itself a list.
179
-
180
-
181
-React didn't end up using Adam's implementation directly. Instead, we created JSX by forking [js-xml-literal](https://github.com/laverdet/js-xml-literal), a side project by XHP creator Marcel Laverdet. JSX took its name from js-xml-literal, which Jordan modified to just be syntactic sugar for deeply nested function calls.
182
-
183
-## API Churn
184
-
185
-During the first year of React, internal adoption was growing quickly but there was quite a lot of churn in the component APIs and naming conventions:
186
-
187
-* `project` was renamed to `declare` then to `structure` and finally to `render`.
188
-* `Componentize` was renamed to `createComponent` and finally to `createClass`.
189
-
190
-As the project was about to be open sourced, [Lee Byron](https://twitter.com/leeb) sat down with Jordan Walke, Tom Occhino and Sebastian Markbåge in order to refactor, reimplement, and rename one of React's most beloved features – the lifecycle API. Lee [came up with a well-designed API](https://gist.github.com/vjeux/f2b015d230cc1ab18ed1df30550495ed) that is still in place today.
191
-
192
-* Concepts
193
- * component - a ReactComponent instance
194
- * state - internal state to a component
195
- * props - external state to a component
196
- * markup - the stringy HTML-ish stuff components generate
197
- * DOM - the document and elements within the document
198
-* Actions
199
- * mount - to put a component into a DOM
200
- * initialize - to prepare a component for rendering
201
- * update - a transition of state (and props) resulting a render.
202
- * render - a side-effect-free process to get the representation (markup) of a component.
203
- * validate - make assertions about something created and provided
204
- * destroy - opposite of initialize
205
-* Operands
206
- * create - make a new thing
207
- * get - get an existing thing
208
- * set - merge into existing
209
- * replace - replace existing
210
- * receive - respond to new data
211
- * force - skip checks to do action
212
-* Notifications
213
- * shouldObjectAction
214
- * objectWillAction
215
- * objectDidAction
216
-
217
-## Instagram
218
-
219
-In 2012, Instagram got acquired by Facebook. [Pete Hunt](https://twitter.com/floydophone), who was working on Facebook photos and videos at the time, joined their newly formed web team. He wanted to build their website completely in React, which was in stark contrast with the incremental adoption model that had been used at Facebook.
220
-
221
-To make this happen, React had to be decoupled from Facebook's infrastructure, since Instagram didn't use any of it. This project acted as a forcing function to do the work needed to open source React. In the process, Pete also discovered and promoted a little project called webpack. He also implemented the `renderToString` primitive which was needed to do server-side rendering.
222
-
223
-As we started to prepare for the open source launch, [Maykel Loomans](https://twitter.com/miekd), a designer on Instagram, made a mock of what the website could look like. The header ended up defining the visual identity of React: its logo and the electric blue color!
224
-
225
-<center><a target="_blank" href="../img/blog/react-50k-mock-full.jpg"><img src="../img/blog/react-50k-mock.jpg" width="400" height="410" alt="React website mock" /></a></center>
226
-
227
-In its earliest days, React benefited tremendously from feedback, ideas, and technical contributions of early adopters and collaborators all over the company. While it might look like an overnight success in hindsight, the story of React is actually a great example of how new ideas often need to go through several rounds of refinement, iteration, and course correction over a long period of time before reaching their full potential.
228
-
229
-React's approach to building user interfaces with functional programming principles has changed the way we do things in just a few short years. It goes without saying, but React would be nothing without the amazing open source community that's built up around it!
docs/_posts/2016-11-16-react-v15.4.0.md
deleted
-174
@@ -1,174 +0,0 @@
1
----
2
-title: "React v15.4.0"
3
-author: [gaearon]
4
----
5
-
6
-Today we are releasing React 15.4.0.
7
-
8
-We didn't announce the [previous](https://github.com/facebook/react/blob/master/CHANGELOG.md#1510-may-20-2016) [minor](https://github.com/facebook/react/blob/master/CHANGELOG.md#1520-july-1-2016) [releases](https://github.com/facebook/react/blob/master/CHANGELOG.md#1530-july-29-2016) on the blog because most of the changes were bug fixes. However, 15.4.0 is a special release, and we would like to highlight a few notable changes in it.
9
-
10
-### Separating React and React DOM
11
-
12
-[More than a year ago](/blog/2015/09/10/react-v0.14-rc1.html#two-packages-react-and-react-dom), we started separating React and React DOM into separate packages. We deprecated `React.render()` in favor of `ReactDOM.render()` in React 0.14, and removed DOM-specific APIs from `React` completely in React 15. However, the React DOM implementation still [secretly lived inside the React package](https://www.reddit.com/r/javascript/comments/3m6wyu/found_this_line_in_the_react_codebase_made_me/cvcyo4a/).
13
-
14
-In React 15.4.0, we are finally moving React DOM implementation to the React DOM package. The React package will now contain only the renderer-agnostic code such as `React.Component` and `React.createElement()`.
15
-
16
-This solves a few long-standing issues, such as [errors](https://github.com/facebook/react/issues/7386) when you import React DOM in the same file as the [snapshot testing](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html) renderer.
17
-
18
-**If you only use the official and documented React APIs you won't need to change anything in your application.**
19
-
20
-However, there is a possibility that you imported private APIs from `react/lib/*`, or that a package you rely on might use them. We would like to remind you that this was never supported, and that your apps should not rely on internal APIs. The React internals will keep changing as we work to make React better.
21
-
22
-Another thing to watch out for is that React DOM Server is now about the same size as React DOM since it contains its own copy of the React reconciler. We don't recommend using React DOM Server on the client in most cases.
23
-
24
-### Profiling Components with Chrome Timeline
25
-
26
-You can now visualize React components in the Chrome Timeline. This lets you see which components exactly get mounted, updated, and unmounted, how much time they take relative to each other.
27
-
28
-<img src="../img/blog/react-perf-chrome-timeline.png" width="651" height="228" alt="React components in Chrome timeline" />
29
-
30
-To use it:
31
-
32
-1. Load your app with `?react_perf` in the query string (for example, `http://localhost:3000/?react_perf`).
33
-
34
-2. Open the Chrome DevTools **Timeline** tab and press **Record**.
35
-
36
-3. Perform the actions you want to profile. Don't record more than 20 seconds or Chrome might hang.
37
-
38
-4. Stop recording.
39
-
40
-5. React events will be grouped under the **User Timing** label.
41
-
42
-Note that the numbers are relative so components will render faster in production. Still, this should help you realize when unrelated UI gets updated by mistake, and how deep and how often your UI updates occur.
43
-
44
-Currently Chrome, Edge, and IE are the only browsers supporting this feature, but we use the standard [User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API) so we expect more browsers to add support for it.
45
-
46
-### Mocking Refs for Snapshot Testing
47
-
48
-If you're using Jest [snapshot testing](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html), you might have had [issues](https://github.com/facebook/react/issues/7371) with components that rely on refs. With React 15.4.0, we introduce a way to provide mock refs to the test renderer. For example, consider this component using a ref in `componentDidMount`:
49
-
50
-```js{5,11}
51
-import React from 'react';
52
-
53
-export default class MyInput extends React.Component {
54
- componentDidMount() {
55
- this.input.focus();
56
- }
57
-
58
- render() {
59
- return (
60
- <input
61
- ref={node => this.input = node}
62
- />
63
- );
64
- }
65
-}
66
-```
67
-
68
-With snapshot renderer, `this.input` will be `null` because there is no DOM. React 15.4.0 lets us avoid such crashes by passing a custom `createNodeMock` function to the snapshot renderer in an `options` argument:
69
-
70
-```js{5-12,16}
71
-import React from 'react';
72
-import MyInput from './MyInput';
73
-import renderer from 'react-test-renderer';
74
-
75
-function createNodeMock(element) {
76
- if (element.type === 'input') {
77
- return {
78
- focus() {},
79
- };
80
- }
81
- return null;
82
-}
83
-
84
-it('renders correctly', () => {
85
- const options = {createNodeMock};
86
- const tree = renderer.create(<MyInput />, options);
87
- expect(tree).toMatchSnapshot();
88
-});
89
-```
90
-
91
-We would like to thank [Brandon Dail](https://github.com/Aweary) for implementing this feature.
92
-
93
-You can learn more about snapshot testing in [this Jest blog post](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html).
94
-
95
----
96
-
97
-## Installation
98
-
99
-We recommend using [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/) for managing front-end dependencies. If you're new to package managers, the [Yarn documentation](https://yarnpkg.com/en/docs/getting-started) is a good place to get started.
100
-
101
-To install React with Yarn, run:
102
-
103
-```bash
104
-yarn add react@15.4.0 react-dom@15.4.0
105
-```
106
-
107
-To install React with npm, run:
108
-
109
-```bash
110
-npm install --save react@15.4.0 react-dom@15.4.0
111
-```
112
-
113
-We recommend using a bundler like [webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/) so you can write modular code and bundle it together into small packages to optimize load time.
114
-
115
-Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, make sure to [compile it in production mode](/docs/installation.html#development-and-production-versions).
116
-
117
-In case you don't use a bundler, we also provide pre-built bundles in the npm packages which you can [include as script tags](/docs/installation.html#using-a-cdn) on your page:
118
-
119
-* **React**
120
- Dev build with warnings: [react/dist/react.js](https://unpkg.com/react@15.4.0/dist/react.js)
121
- Minified build for production: [react/dist/react.min.js](https://unpkg.com/react@15.4.0/dist/react.min.js)
122
-* **React with Add-Ons**
123
- Dev build with warnings: [react/dist/react-with-addons.js](https://unpkg.com/react@15.4.0/dist/react-with-addons.js)
124
- Minified build for production: [react/dist/react-with-addons.min.js](https://unpkg.com/react@15.4.0/dist/react-with-addons.min.js)
125
-* **React DOM** (include React in the page before React DOM)
126
- Dev build with warnings: [react-dom/dist/react-dom.js](https://unpkg.com/react-dom@15.4.0/dist/react-dom.js)
127
- Minified build for production: [react-dom/dist/react-dom.min.js](https://unpkg.com/react-dom@15.4.0/dist/react-dom.min.js)
128
-* **React DOM Server** (include React in the page before React DOM Server)
129
- Dev build with warnings: [react-dom/dist/react-dom-server.js](https://unpkg.com/react-dom@15.4.0/dist/react-dom-server.js)
130
- Minified build for production: [react-dom/dist/react-dom-server.min.js](https://unpkg.com/react-dom@15.4.0/dist/react-dom-server.min.js)
131
-
132
-We've also published version `15.4.0` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower.
133
-
134
-- - -
135
-
136
-## Changelog
137
-
138
-### React
139
-* React package and browser build no longer "secretly" includes React DOM.
140
- <small>([@sebmarkbage](https://github.com/sebmarkbage) in [#7164](https://github.com/facebook/react/pull/7164) and [#7168](https://github.com/facebook/react/pull/7168))</small>
141
-* Required PropTypes now fail with specific messages for null and undefined.
142
- <small>([@chenglou](https://github.com/chenglou) in [#7291](https://github.com/facebook/react/pull/7291))</small>
143
-* Improved development performance by freezing children instead of copying.
144
- <small>([@keyanzhang](https://github.com/keyanzhang) in [#7455](https://github.com/facebook/react/pull/7455))</small>
145
-
146
-### React DOM
147
-* Fixed occasional test failures when React DOM is used together with shallow renderer.
148
- <small>([@goatslacker](https://github.com/goatslacker) in [#8097](https://github.com/facebook/react/pull/8097))</small>
149
-* Added a warning for invalid `aria-` attributes.
150
- <small>([@jessebeach](https://github.com/jessebeach) in [#7744](https://github.com/facebook/react/pull/7744))</small>
151
-* Added a warning for using `autofocus` rather than `autoFocus`.
152
- <small>([@hkal](https://github.com/hkal) in [#7694](https://github.com/facebook/react/pull/7694))</small>
153
-* Removed an unnecessary warning about polyfilling `String.prototype.split`.
154
- <small>([@nhunzaker](https://github.com/nhunzaker) in [#7629](https://github.com/facebook/react/pull/7629))</small>
155
-* Clarified the warning about not calling PropTypes manually.
156
- <small>([@jedwards1211](https://github.com/jedwards1211) in [#7777](https://github.com/facebook/react/pull/7777))</small>
157
-* The unstable `batchedUpdates` API now passes the wrapped function's return value through.
158
- <small>([@bgnorlov](https://github.com/bgnorlov) in [#7444](https://github.com/facebook/react/pull/7444))</small>
159
-* Fixed a bug with updating text in IE 8.
160
- <small>([@mnpenner](https://github.com/mnpenner) in [#7832](https://github.com/facebook/react/pull/7832))</small>
161
-
162
-### React Perf
163
-* When ReactPerf is started, you can now view the relative time spent in components as a chart in Chrome Timeline.
164
- <small>([@gaearon](https://github.com/gaearon) in [#7549](https://github.com/facebook/react/pull/7549))</small>
165
-
166
-### React Test Utils
167
-* If you call `Simulate.click()` on a `<input disabled onClick={foo} />` then `foo` will get called whereas it didn't before.
168
- <small>([@nhunzaker](https://github.com/nhunzaker) in [#7642](https://github.com/facebook/react/pull/7642))</small>
169
-
170
-### React Test Renderer
171
-* Due to packaging changes, it no longer crashes when imported together with React DOM in the same file.
172
- <small>([@sebmarkbage](https://github.com/sebmarkbage) in [#7164](https://github.com/facebook/react/pull/7164) and [#7168](https://github.com/facebook/react/pull/7168))</small>
173
-* `ReactTestRenderer.create()` now accepts `{createNodeMock: element => mock}` as an optional argument so you can mock refs with snapshot testing.
174
- <small>([@Aweary](https://github.com/Aweary) in [#7649](https://github.com/facebook/react/pull/7649) and [#8261](https://github.com/facebook/react/pull/8261))</small>
docs/_posts/2017-04-07-react-v15.5.0.md
deleted
-227
@@ -1,227 +0,0 @@
1
----
2
-title: "React v15.5.0"
3
-author: [acdlite]
4
----
5
-
6
-It's been exactly one year since the last breaking change to React. Our next major release, React 16, will include some exciting improvements, including a [complete rewrite](https://www.youtube.com/watch?v=ZCuYPiUIONs) of React's internals. [We take stability seriously](/contributing/design-principles.html#stability), and are committed to bringing those improvements to all of our users with minimal effort.
7
-
8
-To that end, today we're releasing React 15.5.0.
9
-
10
-### New Deprecation Warnings
11
-
12
-The biggest change is that we've extracted `React.PropTypes` and `React.createClass` into their own packages. Both are still accessible via the main `React` object, but using either will log a one-time deprecation warning to the console when in development mode. This will enable future code size optimizations.
13
-
14
-These warnings will not affect the behavior of your application. However, we realize they may cause some frustration, particularly if you use a testing framework that treats `console.error` as a failure.
15
-
16
-**Adding new warnings is not something we do lightly.** Warnings in React are not mere suggestions — they are integral to our strategy of keeping as many people as possible on the latest version of React. We never add warnings without providing an incremental path forward.
17
-
18
-So while the warnings may cause frustration in the short-term, we believe **prodding developers to migrate their codebases now prevents greater frustration in the future**. Proactively fixing warnings ensures you are prepared for the next major release. If your app produces zero warnings in 15.5, it should continue to work in 16 without any changes.
19
-
20
-For each of these new deprecations, we've provided a codemod to automatically migrate your code. They are available as part of the [react-codemod](https://github.com/reactjs/react-codemod) project.
21
-
22
-### Migrating from React.PropTypes
23
-
24
-Prop types are a feature for runtime validation of props during development. We've extracted the built-in prop types to a separate package to reflect the fact that not everybody uses them.
25
-
26
-In 15.5, instead of accessing `PropTypes` from the main `React` object, install the `prop-types` package and import them from there:
27
-
28
-```js{11,16,25}
29
-// Before (15.4 and below)
30
-import React from 'react';
31
-
32
-class Component extends React.Component {
33
- render() {
34
- return <div>{this.props.text}</div>;
35
- }
36
-}
37
-
38
-Component.propTypes = {
39
- text: React.PropTypes.string.isRequired,
40
-}
41
-
42
-// After (15.5)
43
-import React from 'react';
44
-import PropTypes from 'prop-types';
45
-
46
-class Component extends React.Component {
47
- render() {
48
- return <div>{this.props.text}</div>;
49
- }
50
-}
51
-
52
-Component.propTypes = {
53
- text: PropTypes.string.isRequired,
54
-};
55
-```
56
-
57
-The [codemod](https://github.com/reactjs/react-codemod#react-proptypes-to-prop-types) for this change performs this conversion automatically. Basic usage:
58
-
59
-```bash
60
-jscodeshift -t react-codemod/transforms/React-PropTypes-to-prop-types.js <path>
61
-```
62
-
63
-
64
-The `propTypes`, `contextTypes`, and `childContextTypes` APIs will work exactly as before. The only change is that the built-in validators now live in a separate package.
65
-
66
-You may also consider using [Flow](https://flow.org/) to statically type check your JavaScript code, including [React components](https://flow.org/en/docs/frameworks/react/#setup-flow-with-react-a-classtoc-idtoc-setup-flow-with-react-hreftoc-setup-flow-with-reacta).
67
-
68
-### Migrating from React.createClass
69
-
70
-When React was initially released, there was no idiomatic way to create classes in JavaScript, so we provided our own: `React.createClass`.
71
-
72
-Later, classes were added to the language as part of ES2015, so we added the ability to create React components using JavaScript classes. **Along with functional components, JavaScript classes are now the [preferred way to create components in React](/docs/components-and-props.html#functional-and-class-components).**
73
-
74
-For your existing `createClass` components, we recommend that you migrate them to JavaScript classes. However, if you have components that rely on mixins, converting to classes may not be immediately feasible. If so, `create-react-class` is available on npm as a drop-in replacement:
75
-
76
-```js{4,13,15}
77
-// Before (15.4 and below)
78
-var React = require('react');
79
-
80
-var Component = React.createClass({
81
- mixins: [MixinA],
82
- render() {
83
- return <Child />;
84
- }
85
-});
86
-
87
-// After (15.5)
88
-var React = require('react');
89
-var createReactClass = require('create-react-class');
90
-
91
-var Component = createReactClass({
92
- mixins: [MixinA],
93
- render() {
94
- return <Child />;
95
- }
96
-});
97
-```
98
-
99
-Your components will continue to work the same as they did before.
100
-
101
-The [codemod](https://github.com/reactjs/react-codemod#explanation-of-the-new-es2015-class-transform-with-property-initializers) for this change attempts to convert a `createClass` component to a JavaScript class, with a fallback to `create-react-class` if necessary. It has converted thousands of components internally at Facebook.
102
-
103
-Basic usage:
104
-
105
-```bash
106
-jscodeshift -t react-codemod/transforms/class.js path/to/components
107
-```
108
-
109
-### Discontinuing support for React Addons
110
-
111
-We're discontinuing active maintenance of React Addons packages. In truth, most of these packages haven't been actively maintained in a long time. They will continue to work indefinitely, but we recommend migrating away as soon as you can to prevent future breakages.
112
-
113
-- **react-addons-create-fragment** – React 16 will have first-class support for fragments, at which point this package won't be necessary. We recommend using arrays of keyed elements instead.
114
-- **react-addons-css-transition-group** - Use [react-transition-group/CSSTransitionGroup](https://github.com/reactjs/react-transition-group) instead. Version 1.1.1 provides a drop-in replacement.
115
-- **react-addons-linked-state-mixin** - Explicitly set the `value` and `onChange` handler instead.
116
-- **react-addons-pure-render-mixin** - Use [`React.PureComponent`](/docs/react-api.html#react.purecomponent) instead.
117
-- **react-addons-shallow-compare** - Use [`React.PureComponent`](/docs/react-api.html#react.purecomponent) instead.
118
-- **react-addons-transition-group** - Use [react-transition-group/TransitionGroup](https://github.com/reactjs/react-transition-group) instead. Version 1.1.1 provides a drop-in replacement.
119
-- **react-addons-update** - Use [immutability-helper](https://github.com/kolodny/immutability-helper) instead, a drop-in replacement.
120
-- **react-linked-input** - Explicitly set the `value` and `onChange` handler instead.
121
-
122
-We're also discontinuing support for the `react-with-addons` UMD build. It will be removed in React 16.
123
-
124
-### React Test Utils
125
-
126
-Currently, the React Test Utils live inside `react-addons-test-utils`. As of 15.5, we're deprecating that package and moving them to `react-dom/test-utils` instead:
127
-
128
-```js
129
-// Before (15.4 and below)
130
-import TestUtils from 'react-addons-test-utils';
131
-
132
-// After (15.5)
133
-import TestUtils from 'react-dom/test-utils';
134
-```
135
-
136
-This reflects the fact that what we call the Test Utils are really a set of APIs that wrap the DOM renderer.
137
-
138
-The exception is shallow rendering, which is not DOM-specific. The shallow renderer has been moved to `react-test-renderer/shallow`.
139
-
140
-```js{2,5}
141
-// Before (15.4 and below)
142
-import { createRenderer } from 'react-addons-test-utils';
143
-
144
-// After (15.5)
145
-import { createRenderer } from 'react-test-renderer/shallow';
146
-```
147
-
148
----
149
-
150
-## Acknowledgements
151
-
152
-A special thank you to these folks for transferring ownership of npm package names:
153
-
154
-- [Jason Miller](https://github.com/developit)
155
-- [Aaron Ackerman](https://github.com/aackerman)
156
-- [Vinicius Marson](https://github.com/viniciusmarson)
157
-
158
----
159
-
160
-## Installation
161
-
162
-We recommend using [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/) for managing front-end dependencies. If you're new to package managers, the [Yarn documentation](https://yarnpkg.com/en/docs/getting-started) is a good place to get started.
163
-
164
-To install React with Yarn, run:
165
-
166
-```bash
167
-yarn add react@^15.5.0 react-dom@^15.5.0
168
-```
169
-
170
-To install React with npm, run:
171
-
172
-```bash
173
-npm install --save react@^15.5.0 react-dom@^15.5.0
174
-```
175
-
176
-We recommend using a bundler like [webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/) so you can write modular code and bundle it together into small packages to optimize load time.
177
-
178
-Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, make sure to [compile it in production mode](/docs/installation.html#development-and-production-versions).
179
-
180
-In case you don't use a bundler, we also provide pre-built bundles in the npm packages which you can [include as script tags](/docs/installation.html#using-a-cdn) on your page:
181
-
182
-* **React**
183
- Dev build with warnings: [react/dist/react.js](https://unpkg.com/react@15.5.0/dist/react.js)
184
- Minified build for production: [react/dist/react.min.js](https://unpkg.com/react@15.5.0/dist/react.min.js)
185
-* **React with Add-Ons**
186
- Dev build with warnings: [react/dist/react-with-addons.js](https://unpkg.com/react@15.5.0/dist/react-with-addons.js)
187
- Minified build for production: [react/dist/react-with-addons.min.js](https://unpkg.com/react@15.5.0/dist/react-with-addons.min.js)
188
-* **React DOM** (include React in the page before React DOM)
189
- Dev build with warnings: [react-dom/dist/react-dom.js](https://unpkg.com/react-dom@15.5.0/dist/react-dom.js)
190
- Minified build for production: [react-dom/dist/react-dom.min.js](https://unpkg.com/react-dom@15.5.0/dist/react-dom.min.js)
191
-* **React DOM Server** (include React in the page before React DOM Server)
192
- Dev build with warnings: [react-dom/dist/react-dom-server.js](https://unpkg.com/react-dom@15.5.0/dist/react-dom-server.js)
193
- Minified build for production: [react-dom/dist/react-dom-server.min.js](https://unpkg.com/react-dom@15.5.0/dist/react-dom-server.min.js)
194
-
195
-We've also published version `15.5.0` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower.
196
-
197
----
198
-
199
-## Changelog
200
-
201
-## 15.5.0 (April 7, 2017)
202
-
203
-### React
204
-
205
-* Added a deprecation warning for `React.createClass`. Points users to create-react-class instead. ([@acdlite](https://github.com/acdlite) in [d9a4fa4](https://github.com/facebook/react/commit/d9a4fa4f51c6da895e1655f32255cf72c0fe620e))
206
-* Added a deprecation warning for `React.PropTypes`. Points users to prop-types instead. ([@acdlite](https://github.com/acdlite) in [043845c](https://github.com/facebook/react/commit/043845ce75ea0812286bbbd9d34994bb7e01eb28))
207
-* Fixed an issue when using `ReactDOM` together with `ReactDOMServer`. ([@wacii](https://github.com/wacii) in [#9005](https://github.com/facebook/react/pull/9005))
208
-* Fixed issue with Closure Compiler. ([@anmonteiro](https://github.com/anmonteiro) in [#8895](https://github.com/facebook/react/pull/8895))
209
-* Another fix for Closure Compiler. ([@Shastel](https://github.com/Shastel) in [#8882](https://github.com/facebook/react/pull/8882))
210
-* Added component stack info to invalid element type warning. ([@n3tr](https://github.com/n3tr) in [#8495](https://github.com/facebook/react/pull/8495))
211
-
212
-### React DOM
213
-
214
-* Fixed Chrome bug when backspacing in number inputs. ([@nhunzaker](https://github.com/nhunzaker) in [#7359](https://github.com/facebook/react/pull/7359))
215
-* Added `react-dom/test-utils`, which exports the React Test Utils. ([@bvaughn](https://github.com/bvaughn))
216
-
217
-### React Test Renderer
218
-
219
-* Fixed bug where `componentWillUnmount` was not called for children. ([@gre](https://github.com/gre) in [#8512](https://github.com/facebook/react/pull/8512))
220
-* Added `react-test-renderer/shallow`, which exports the shallow renderer. ([@bvaughn](https://github.com/bvaughn))
221
-
222
-### React Addons
223
-
224
-* Last release for addons; they will no longer be actively maintained.
225
-* Removed `peerDependencies` so that addons continue to work indefinitely. ([@acdlite](https://github.com/acdlite) and [@bvaughn](https://github.com/bvaughn) in [8a06cd7](https://github.com/facebook/react/commit/8a06cd7a786822fce229197cac8125a551e8abfa) and [67a8db3](https://github.com/facebook/react/commit/67a8db3650d724a51e70be130e9008806402678a))
226
-* Updated to remove references to `React.createClass` and `React.PropTypes` ([@acdlite](https://github.com/acdlite) in [12a96b9](https://github.com/facebook/react/commit/12a96b94823d6b6de6b1ac13bd576864abd50175))
227
-* `react-addons-test-utils` is deprecated. Use `react-dom/test-utils` and `react-test-renderer/shallow` instead. ([@bvaughn](https://github.com/bvaughn))
docs/_posts/2017-05-18-whats-new-in-create-react-app.md
deleted
-107
@@ -1,107 +0,0 @@
1
----
2
-title: "What's New in Create React App"
3
-author: [gaearon]
4
----
5
-
6
-Less than a year ago, we introduced [Create React App](/blog/2016/07/22/create-apps-with-no-configuration.html) as an officially supported way to create apps with zero configuration. The project has since enjoyed tremendous growth, with over 950 commits by more than 250 contributors.
7
-
8
-Today, we are excited to announce that many features that have been in the pipeline for the last few months are finally released.
9
-
10
-As usual with Create React App, **you can enjoy these improvements in your existing non-ejected apps by updating a single dependency** and following our [migration instructions](https://github.com/facebookincubator/create-react-app/releases/tag/v1.0.0).
11
-
12
-Newly created apps will get these improvements automatically.
13
-
14
-### webpack 2
15
-
16
->*This change was contributed by [@Timer](https://github.com/Timer) in [#1291](https://github.com/facebookincubator/create-react-app/pull/1291).*
17
-
18
-We have upgraded to webpack 2 which has been [officially released](https://medium.com/webpack/webpack-2-and-beyond-40520af9067f) a few months ago. It is a big upgrade with many bugfixes and general improvements. We have been testing it for a while, and now consider it stable enough to recommend it to everyone.
19
-
20
-While the Webpack configuration format has changed, Create React App users who didn't eject don't need to worry about it as we have updated the configuration on our side.
21
-
22
-If you had to eject your app for one reason or another, Webpack provides a [configuration migration guide](https://webpack.js.org/guides/migrating/) that you can follow to update your apps. Note that with each release of Create React App, we are working to support more use cases out of the box so that you don't have to eject in the future.
23
-
24
-The biggest notable webpack 2 feature is the ability to write and import [ES6 modules](http://2ality.com/2014/09/es6-modules-final.html) directly without compiling them to CommonJS. This shouldn’t affect how you write code since you likely already use `import` and `export` statements, but it will help catch more mistakes like missing named exports at compile time:
25
-
26
-
27
-
28
-In the future, as the ecosystem around ES6 modules matures, you can expect more improvements to your app's bundle size thanks to [tree shaking](https://webpack.js.org/guides/tree-shaking/).
29
-
30
-### Runtime Error Overlay
31
-
32
->*This change was contributed by [@Timer](https://github.com/Timer) and [@nicinabox](https://github.com/nicinabox) in [#1101](https://github.com/facebookincubator/create-react-app/pull/1101), [@bvaughn](https://github.com/bvaughn) in [#2201](https://github.com/facebookincubator/create-react-app/pull/2201).*
33
-
34
-Have you ever made a mistake in code and only realized it after the console is flooded with cryptic errors? Or worse, have you ever shipped an app with crashes in production because you accidentally missed an error in development?
35
-
36
-To address these issues, we are introducing an overlay that pops up whenever there is an uncaught error in your application. It only appears in development, and you can dismiss it by pressing Escape.
37
-
38
-A GIF is worth a thousand words:
39
-
40
-
41
-
42
-(Yes, it integrates with your editor!)
43
-
44
-In the future, we plan to teach the runtime error overlay to understand more about your React app. For example, after React 16 we plan to show React component stacks in addition to the JavaScript stacks when an error is thrown.
45
-
46
-
47
-### Progressive Web Apps by Default
48
-
49
->*This change was contributed by [@jeffposnick](https://github.com/jeffposnick) in [#1728](https://github.com/facebookincubator/create-react-app/pull/1728).*
50
-
51
-Newly created projects are built as [Progressive Web Apps](https://developers.google.com/web/progressive-web-apps/) by default. This means that they employ [service workers](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers) with an [offline-first caching strategy](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-falling-back-to-network) to minimize the time it takes to serve the app to the users who visit it again. You can opt out of this behavior, but we recommend it both for new and existing apps, especially if you target mobile devices.
52
-
53
-
54
-
55
-New apps automatically have these features, but you can easily convert an existing project to a Progressive Web App by following [our migration guide](https://github.com/facebookincubator/create-react-app/releases/tag/v1.0.0).
56
-
57
-We will be adding [more documentation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#making-a-progressive-web-app) on this topic in the coming weeks. Please feel free to [ask any questions](https://github.com/facebookincubator/create-react-app/issues/new) on the issue tracker!
58
-
59
-
60
-### Jest 20
61
-
62
->*This change was contributed by [@rogeliog](https://github.com/rogeliog) in [#1614](https://github.com/facebookincubator/create-react-app/pull/1614) and [@gaearon](https://github.com/gaearon) in [#2171](https://github.com/facebookincubator/create-react-app/pull/2171).*
63
-
64
-We are now using the latest version of Jest that includes numerous bugfixes and improvements. You can read more about the changes in [Jest 19](https://facebook.github.io/jest/blog/2017/02/21/jest-19-immersive-watch-mode-test-platform-improvements.html) and [Jest 20](http://facebook.github.io/jest/blog/2017/05/06/jest-20-delightful-testing-multi-project-runner.html) blog posts.
65
-
66
-Highlights include a new [immersive watch mode](https://facebook.github.io/jest/blog/2017/02/21/jest-19-immersive-watch-mode-test-platform-improvements.html#immersive-watch-mode), [a better snapshot format](https://facebook.github.io/jest/blog/2017/02/21/jest-19-immersive-watch-mode-test-platform-improvements.html#snapshot-updates), [improvements to printing skipped tests](https://facebook.github.io/jest/blog/2017/02/21/jest-19-immersive-watch-mode-test-platform-improvements.html#improved-printing-of-skipped-tests), and [new testing APIs](https://facebook.github.io/jest/blog/2017/05/06/jest-20-delightful-testing-multi-project-runner.html#new-improved-testing-apis).
67
-
68
-
69
-
70
-Additionally, Create React App now support configuring a few Jest options related to coverage reporting.
71
-
72
-### Code Splitting with Dynamic import()
73
-
74
->*This change was contributed by [@Timer](https://github.com/Timer) in [#1538](https://github.com/facebookincubator/create-react-app/pull/1538) and [@tharakawj](https://github.com/tharakawj) in [#1801](https://github.com/facebookincubator/create-react-app/pull/1801).*
75
-
76
-It is important to keep the initial JavaScript payload of web apps down to the minimum, and [load the rest of the code on demand](https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-2-page-load-performance-33b932d97cf2). Although Create React App supported [code splitting](https://webpack.js.org/guides/code-splitting-async/) using `require.ensure()` since the first release, it used a webpack-specific syntax that did not work in Jest or other environments.
77
-
78
-In this release, we are adding support for the [dynamic `import()` proposal](http://2ality.com/2017/01/import-operator.html#loading-code-on-demand) which aligns with the future web standards. Unlike `require.ensure()`, it doesn't break Jest tests, and should eventually become a part of JavaScript. We encourage you to use `import()` to delay loading the code for non-critical component subtrees until you need to render them.
79
-
80
-
81
-
82
-### Better Console Output
83
-
84
->*This change was contributed by [@gaearon](https://github.com/gaearon) in [#2120](https://github.com/facebookincubator/create-react-app/pull/2120), [#2125](https://github.com/facebookincubator/create-react-app/pull/2125), and [#2161](https://github.com/facebookincubator/create-react-app/pull/2161).*
85
-
86
-We have improved the console output across the board.
87
-
88
-For example, when you start the development server, we now display the LAN address in additional to the localhost address so that you can quickly access the app from a mobile device on the same network:
89
-
90
-
91
-
92
-When lint errors are reported, we no longer show the warnings so that you can concentrate on more critical issues. Errors and warnings in the production build output are better formatted, and the build error overlay font size now matches the browser font size more closely.
93
-
94
-### But Wait... There's More!
95
-
96
-You can only fit so much in a blog post, but there are other long-requested features in this release, such as [environment-specific and local `.env` files](https://github.com/facebookincubator/create-react-app/pull/1344), [a lint rule against confusingly named globals](https://github.com/facebookincubator/create-react-app/pull/2130), [support for multiple proxies in development](https://github.com/facebookincubator/create-react-app/pull/1790), [a customizable browser launch script](https://github.com/facebookincubator/create-react-app/pull/1590), and many bugfixes.
97
-
98
-You can read the full changelog and the migration guide in the [v1.0.0 release notes](https://github.com/facebookincubator/create-react-app/releases/tag/v1.0.0).
99
-
100
-### Acknowledgements
101
-
102
-This release is a result of months of work from many people in the React community. It is focused on improving both developer and end user experience, as we believe they are complementary and go hand in hand.
103
-
104
-We are grateful to [everyone who has offered their contributions](https://github.com/facebookincubator/create-react-app/graphs/contributors), whether in code, documentation, or by helping other people. We would like to specifically thank [Joe Haddad](https://github.com/timer) for his invaluable help maintaining the project.
105
-
106
-We are excited to bring these improvements to everybody using Create React App, and we are looking forward to more of your feedback and contributions.
107
-
docs/_posts/2017-06-13-react-v15.6.0.md
deleted
-95
@@ -1,95 +0,0 @@
1
----
2
-title: "React v15.6.0"
3
-author: [flarnie]
4
----
5
-
6
-Today we are releasing React 15.6.0. As we prepare for React 16.0, we have been fixing and cleaning up many things. This release continues to pave the way.
7
-
8
-## Improving Inputs
9
-
10
-In React 15.6.0 the `onChange` event for inputs is a little bit more reliable and handles more edge cases, including the following:
11
-
12
-* not firing when radio button is clicked but not changed ([issue 1471](https://github.com/facebook/react/issues/1471))
13
-* changing an input of type `range` with the arrow keys ([issue 554](https://github.com/facebook/react/issues/554))
14
-* pasting text into a text area in IE11 ([issue 7211](https://github.com/facebook/react/issues/7211))
15
-* auto-fill in IE11 ([issue 6614](https://github.com/facebook/react/issues/6614))
16
-* clearing input with 'x' button or right-click 'delete' in IE11 ([issue 6822](https://github.com/facebook/react/issues/6822))
17
-* not firing when characters are present in the input on render in IE11 ([issue 2185](https://github.com/facebook/react/issues/2185))
18
-
19
-Thanks to [Jason Quense](https://github.com/jquense) and everyone who helped out on those issues and PRs.
20
-
21
-## Less Noisy Deprecation Warnings
22
-
23
-We are also including a couple of new warnings for upcoming deprecations. These should not affect most users, and for more details see the changelog below.
24
-
25
-After the last release, we got valuable community feedback that deprecation warnings were causing noise and failing tests. **In React 15.6, we have downgraded deprecation warnings to use `console.warn` instead of `console.error`.** Our other warnings will still use `console.error` because they surface urgent issues which could lead to bugs. Unlike our other warnings, deprecation warnings can be fixed over time and won't cause problems in your app if shipped. We believe that downgrading the urgency of deprecation warnings will make your next update easier. Thanks to everyone who was involved in the discussion of this change.
26
-
27
----
28
-
29
-## Installation
30
-
31
-We recommend using [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/) for managing front-end dependencies. If you're new to package managers, the [Yarn documentation](https://yarnpkg.com/en/docs/getting-started) is a good place to get started.
32
-
33
-To install React with Yarn, run:
34
-
35
-```bash
36
-yarn add react@^15.6.0 react-dom@^15.6.0
37
-```
38
-
39
-To install React with npm, run:
40
-
41
-```bash
42
-npm install --save react@^15.6.0 react-dom@^15.6.0
43
-```
44
-
45
-We recommend using a bundler like [webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/) so you can write modular code and bundle it together into small packages to optimize load time.
46
-
47
-Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, make sure to [use the production build](/docs/optimizing-performance.html#use-the-production-build).
48
-
49
-In case you don't use a bundler, we also provide pre-built bundles in the npm packages which you can [include as script tags](/docs/installation.html#using-a-cdn) on your page:
50
-
51
-* **React**<br/>
52
- Dev build with warnings: [react/dist/react.js](https://unpkg.com/react@15.6.0/dist/react.js)<br/>
53
- Minified build for production: [react/dist/react.min.js](https://unpkg.com/react@15.6.0/dist/react.min.js)<br/>
54
-* **React with Add-Ons**<br/>
55
- Dev build with warnings: [react/dist/react-with-addons.js](https://unpkg.com/react@15.6.0/dist/react-with-addons.js)<br/>
56
- Minified build for production: [react/dist/react-with-addons.min.js](https://unpkg.com/react@15.5.0/dist/react-with-addons.min.js)<br/>
57
-* **React DOM** (include React in the page before React DOM)<br/>
58
- Dev build with warnings: [react-dom/dist/react-dom.js](https://unpkg.com/react-dom@15.6.0/dist/react-dom.js)<br/>
59
- Minified build for production: [react-dom/dist/react-dom.min.js](https://unpkg.com/react-dom@15.6.0/dist/react-dom.min.js)<br/>
60
-* **React DOM Server** (include React in the page before React DOM Server)<br/>
61
- Dev build with warnings: [react-dom/dist/react-dom-server.js](https://unpkg.com/react-dom@15.6.0/dist/react-dom-server.js)<br/>
62
- Minified build for production: [react-dom/dist/react-dom-server.min.js](https://unpkg.com/react-dom@15.6.0/dist/react-dom-server.min.js)<br/>
63
-
64
-We've also published version `15.6.0` of `react` and `react-dom` on npm, and the `react` package on bower.
65
-
66
----
67
-
68
-## Changelog
69
-
70
-## 15.6.0 (June 13, 2017)
71
-
72
-### React
73
-
74
-* Downgrade deprecation warnings to use `console.warn` instead of `console.error`. ([@flarnie](https://github.com/flarnie) in [#9753](https://github.com/facebook/react/pull/9753))
75
-* Add a deprecation warning for `React.createClass`. Points users to `create-react-class` instead. ([@flarnie](https://github.com/flarnie) in [#9771](https://github.com/facebook/react/pull/9771))
76
-* Add deprecation warnings and separate module for `React.DOM` factory helpers. ([@nhunzaker](https://github.com/nhunzaker) in [#8356](https://github.com/facebook/react/pull/8356))
77
-* Warn for deprecation of `React.createMixin` helper, which was never used. ([@aweary](https://github.com/aweary) in [#8853](https://github.com/facebook/react/pull/8853))
78
-
79
-### React DOM
80
-
81
-* Add support for CSS variables in `style` attribute. ([@aweary](https://github.com/aweary) in [#9302](https://github.com/facebook/react/pull/9302))
82
-* Add support for CSS Grid style properties. ([@ericsakmar](https://github.com/ericsakmar) in [#9185](https://github.com/facebook/react/pull/9185))
83
-* Fix bug where inputs mutated value on type conversion. ([@nhunzaker](https://github.com/mhunzaker) in [#9806](https://github.com/facebook/react/pull/9806))
84
-* Fix issues with `onChange` not firing properly for some inputs. ([@jquense](https://github.com/jquense) in [#8575](https://github.com/facebook/react/pull/8575))
85
-* Fix bug where controlled number input mistakenly allowed period. ([@nhunzaker](https://github.com/nhunzaker) in [#9584](https://github.com/facebook/react/pull/9584))
86
-* Fix bug where performance entries were being cleared. ([@chrisui](https://github.com/chrisui) in [#9451](https://github.com/facebook/react/pull/9451))
87
-
88
-### React Addons
89
-
90
-* Fix AMD support for addons depending on `react`. ([@flarnie](https://github.com/flarnie) in [#9919](https://github.com/facebook/react/issues/9919))
91
-* Fix `isMounted()` to return `true` in `componentWillUnmount`. ([@mridgway](https://github.com/mridgway) in [#9638](https://github.com/facebook/react/issues/9638))
92
-* Fix `react-addons-update` to not depend on native `Object.assign`. ([@gaearon](https://github.com/gaearon) in [#9937](https://github.com/facebook/react/pull/9937))
93
-* Remove broken Google Closure Compiler annotation from `create-react-class`. ([@gaearon](https://github.com/gaearon) in [#9933](https://github.com/facebook/react/pull/9933))
94
-* Remove unnecessary dependency from `react-linked-input`. ([@gaearon](https://github.com/gaearon) in [#9766](https://github.com/facebook/react/pull/9766))
95
-* Point `react-addons-(css-)transition-group` to the new package. ([@gaearon](https://github.com/gaearon) in [#9937](https://github.com/facebook/react/pull/9937))
docs/_posts/2017-07-26-error-handling-in-react-16.md
deleted
-114
@@ -1,114 +0,0 @@
1
----
2
-title: "Error Handling in React 16"
3
-author: [gaearon]
4
----
5
-
6
-As React 16 release is getting closer, we would like to announce a few changes to how React handles JavaScript errors inside components. These changes are included in React 16 beta versions, and will be a part of React 16.
7
-
8
-**By the way, [we just released the first beta of React 16 for you to try!](https://github.com/facebook/react/issues/10294)**
9
-
10
-## Behavior in React 15 and Earlier
11
-
12
-In the past, JavaScript errors inside components used to corrupt React’s internal state and cause it to [emit](https://github.com/facebook/react/issues/4026) [cryptic](https://github.com/facebook/react/issues/6895) [errors](https://github.com/facebook/react/issues/8579) on next renders. These errors were always caused by an earlier error in the application code, but React did not provide a way to handle them gracefully in components, and could not recover from them.
13
-
14
-## Introducing Error Boundaries
15
-
16
-A JavaScript error in a part of the UI shouldn’t break the whole app. To solve this problem for React users, React 16 introduces a new concept of an “error boundary”.
17
-
18
-Error boundaries are React components that **catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI** instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.
19
-
20
-A class component becomes an error boundary if it defines a new lifecycle method called `componentDidCatch(error, info)`:
21
-
22
-```js{7-12,15-18}
23
-class ErrorBoundary extends React.Component {
24
- constructor(props) {
25
- super(props);
26
- this.state = { hasError: false };
27
- }
28
-
29
- componentDidCatch(error, info) {
30
- // Display fallback UI
31
- this.setState({ hasError: true });
32
- // You can also log the error to an error reporting service
33
- logErrorToMyService(error, info);
34
- }
35
-
36
- render() {
37
- if (this.state.hasError) {
38
- // You can render any custom fallback UI
39
- return <h1>Something went wrong.</h1>;
40
- }
41
- return this.props.children;
42
- }
43
-}
44
-```
45
-
46
-Then you can use it as a regular component:
47
-
48
-```js
49
-<ErrorBoundary>
50
- <MyWidget />
51
-</ErrorBoundary>
52
-```
53
-
54
-The `componentDidCatch()` method works like a JavaScript `catch {}` block, but for components. Only class components can be error boundaries. In practice, most of the time you’ll want to declare an error boundary component once and use it throughout your application.
55
-
56
-Note that **error boundaries only catch errors in the components below them in the tree**. An error boundary can’t catch an error within itself. If an error boundary fails trying to render the error message, the error will propagate to the closest error boundary above it. This, too, is similar to how `catch {}` block works in JavaScript.
57
-
58
-## Live Demo
59
-
60
-Check out [this example of declaring and using an error boundary](https://codepen.io/gaearon/pen/wqvxGa?editors=0010) with [React 16 beta](https://github.com/facebook/react/issues/10294).
61
-
62
-## Where to Place Error Boundaries
63
-
64
-The granularity of error boundaries is up to you. You may wrap top-level route components to display a “Something went wrong” message to the user, just like server-side frameworks often handle crashes. You may also wrap individual widgets in an error boundary to protect them from crashing the rest of the application.
65
-
66
-## New Behavior for Uncaught Errors
67
-
68
-This change has an important implication. **As of React 16, errors that were not caught by any error boundary will result in unmounting of the whole React component tree.**
69
-
70
-We debated this decision, but in our experience it is worse to leave corrupted UI in place than to completely remove it. For example, in a product like Messenger leaving the broken UI visible could lead to somebody sending a message to the wrong person. Similarly, it is worse for a payments app to display a wrong amount than to render nothing.
71
-
72
-This change means that as you migrate to React 16, you will likely uncover existing crashes in your application that have been unnoticed before. Adding error boundaries lets you provide better user experience when something goes wrong.
73
-
74
-For example, Facebook Messenger wraps content of the sidebar, the info panel, the conversation log, and the message input into separate error boundaries. If some component in one of these UI areas crashes, the rest of them remain interactive.
75
-
76
-We also encourage you to use JS error reporting services (or build your own) so that you can learn about unhandled exceptions as they happen in production, and fix them.
77
-
78
-## Component Stack Traces
79
-
80
-React 16 prints all errors that occurred during rendering to the console in development, even if the application accidentally swallows them. In addition to the error message and the JavaScript stack, it also provides component stack traces. Now you can see where exactly in the component tree the failure has happened:
81
-
82
-<img src="../img/blog/error-boundaries-stack-trace.png" alt="Component stack traces in error message" style="width: 100%;">
83
-
84
-You can also see the filenames and line numbers in the component stack trace. This works by default in [Create React App](https://github.com/facebookincubator/create-react-app) projects:
85
-
86
-<img src="../img/blog/error-boundaries-stack-trace-line-numbers.png" alt="Component stack traces with line numbers in error message" style="width: 100%;">
87
-
88
-If you don’t use Create React App, you can add [this plugin](https://www.npmjs.com/package/babel-plugin-transform-react-jsx-source) manually to your Babel configuration. Note that it’s intended only for development and **must be disabled in production**.
89
-
90
-## Why Not Use `try` / `catch`?
91
-
92
-`try` / `catch` is great but it only works for imperative code:
93
-
94
-```js
95
-try {
96
- showButton();
97
-} catch (error) {
98
- // ...
99
-}
100
-```
101
-
102
-However, React components are declarative and specify *what* should be rendered:
103
-
104
-```js
105
-<Button />
106
-```
107
-
108
-Error boundaries preserve the declarative nature of React, and behave as you would expect. For example, even if an error occurs in a `componentDidUpdate` hook caused by a `setState` somewhere deep in the tree, it will still correctly propagate to the closest error boundary.
109
-
110
-## Naming Changes from React 15
111
-
112
-React 15 included a very limited support for error boundaries under a different method name: `unstable_handleError`. This method no longer works, and you will need to change it to `componentDidCatch` in your code starting from the first 16 beta release.
113
-
114
-For this change, we’ve provided [a codemod](https://github.com/reactjs/react-codemod#error-boundaries) to automatically migrate your code.
docs/_posts/2017-09-08-dom-attributes-in-react-16.md
deleted
-187
@@ -1,187 +0,0 @@
1
----
2
-title: "DOM Attributes in React 16"
3
-author: [gaearon]
4
----
5
-
6
-In the past, React used to ignore unknown DOM attributes. If you wrote JSX with an attribute that React doesn't recognize, React would just skip it. For example, this:
7
-
8
-```js
9
-// Your code:
10
-<div mycustomattribute="something" />
11
-```
12
-
13
-would render an empty div to the DOM with React 15:
14
-
15
-```js
16
-// React 15 output:
17
-<div />
18
-```
19
-
20
-In React 16, we are making a change. Now, any unknown attributes will end up in the DOM:
21
-
22
-```js
23
-// React 16 output:
24
-<div mycustomattribute="something" />
25
-```
26
-
27
-## Why Are We Changing This?
28
-
29
-React has always provided a JavaScript-centric API to the DOM. Since React components often take both custom and DOM-related props, it makes sense for React to use the `camelCase` convention just like the DOM APIs:
30
-
31
-```js
32
-<div tabIndex="-1" />
33
-```
34
-
35
-This has not changed. However, the way we enforced it in the past forced us to maintain a whitelist of all valid React DOM attributes in the bundle:
36
-
37
-```js
38
-// ...
39
-summary: 'summary',
40
-tabIndex: 'tabindex'
41
-target: 'target',
42
-title: 'title',
43
-// ...
44
-```
45
-
46
-This had two downsides:
47
-
48
-* You could not [pass a custom attribute](https://github.com/facebook/react/issues/140). This is useful for supplying browser-specific non-standard attributes, trying new DOM APIs, and integrating with opinionated third-party libraries.
49
-
50
-* The attribute list kept growing over time, but most React canonical attribute names are already valid in the DOM. Removing most of the whitelist helped us reduce the bundle size a little bit.
51
-
52
-With the new approach, both of these problems are solved. With React 16, you can now pass custom attributes to all HTML and SVG elements, and React doesn't have to include the whole attribute whitelist in the production version.
53
-
54
-**Note that you should still use the canonical React naming for known attributes:**
55
-
56
-```js
57
-// Yes, please
58
-<div tabIndex="-1" />
59
-
60
-// Warning: Invalid DOM property `tabindex`. Did you mean `tabIndex`?
61
-<div tabindex="-1" />
62
-```
63
-
64
-In other words, the way you use DOM components in React hasn't changed, but now you have some new capabilities.
65
-
66
-## Should I Keep Data in Custom Attributes?
67
-
68
-No. We don't encourage you to keep data in DOM attributes. Even if you have to, `data-` attributes are probably a better approach, but in most cases data should be kept in React component state or external stores.
69
-
70
-However, the new feature is handy if you need to use a non-standard or a new DOM attribute, or if you need to integrate with a third-party library that relies on such attributes.
71
-
72
-## Data and ARIA Attributes
73
-
74
-Just like before, React lets you pass `data-` and `aria-` attributes freely:
75
-
76
-```js
77
-<div data-foo="42" />
78
-<button aria-label="Close" onClick={onClose} />
79
-```
80
-
81
-This has not changed.
82
-
83
-[Accessibility](/docs/accessibility.html) is very important, so even though React 16 passes any attributes through, it still validates that `aria-` props have correct names in development mode, just like React 15 did.
84
-
85
-## Migration Path
86
-
87
-We have included [a warning about unknown attributes](/warnings/unknown-prop.html) since [React 15.2.0](https://github.com/facebook/react/releases/tag/v15.2.0) which came out more than a year ago. The vast majority of third-party libraries have already updated their code. If your app doesn't produce warnings with React 15.2.0 or higher, this change should not require modifications in your application code.
88
-
89
-If you still accidentally forward non-DOM props to DOM components, with React 16 you will start seeing those attributes in the DOM, for example:
90
-
91
-```js
92
-<div myData='[Object object]' />
93
-```
94
-
95
-This is somewhat safe (the browser will just ignore them) but we recommend to fix these cases when you see them. One potential hazard is if you pass an object that implements a custom `toString()` or `valueOf()` method that throws. Another possible issue is that legacy HTML attributes like `align` and `valign` will now be passed to the DOM. They used to be stripped out because React didn't support them.
96
-
97
-To avoid these problems, we suggest to fix the warnings you see in React 15 before upgrading to React 16.
98
-
99
-## Changes in Detail
100
-
101
-We've made a few other changes to make the behavior more predictable and help ensure you're not making mistakes. We don't anticipate that these changes are likely to break real-world applications.
102
-
103
-**These changes only affect DOM components like `<div>`, not your own components.**
104
-
105
-Below is a detailed list of them.
106
-
107
-* **Unknown attributes with string, number, and object values:**
108
-
109
- ```js
110
- <div mycustomattribute="value" />
111
- <div mycustomattribute={42} />
112
- <div mycustomattribute={myObject} />
113
- ```
114
-
115
- React 15: Warns and ignores them.
116
- React 16: Converts values to strings and passes them through.
117
-
118
- *Note: attributes starting with `on` are not passed through as an exception because this could become a potential security hole.*
119
-
120
-* **Known attributes with a different canonical React name:**
121
-
122
- ```js
123
- <div tabindex="-1" />
124
- <div class="hi" />
125
- ```
126
-
127
- React 15: Warns and ignores them.
128
- React 16: Warns but converts values to strings and passes them through.
129
-
130
- *Note: always use the canonical React naming for all supported attributes.*
131
-
132
-* **Non-boolean attributes with boolean values:**
133
-
134
- ```js
135
- <div className={false} />
136
- ```
137
-
138
- React 15: Converts booleans to strings and passes them through.
139
- React 16: Warns and ignores them.
140
-
141
-* **Non-event attributes with function values:**
142
-
143
- ```js
144
- <div className={function() {}} />
145
- ```
146
-
147
- React 15: Converts functions to strings and passes them through.
148
- React 16: Warns and ignores them.
149
-
150
-* **Attributes with Symbol values:**
151
-
152
- ```js
153
- <div className={Symbol('foo')} />
154
- ```
155
-
156
- React 15: Crashes.
157
- React 16: Warns and ignores them.
158
-
159
-* **Attributes with `NaN` values:**
160
-
161
- ```js
162
- <div tabIndex={0 / 0} />
163
- ```
164
-
165
- React 15: Converts `NaN`s to strings and passes them through.
166
- React 16: Warns and ignores them.
167
-
168
-While testing this release, we have also [created an automatically generated table](https://github.com/facebook/react/blob/master/fixtures/attribute-behavior/AttributeTableSnapshot.md) for all known attributes to track potential regressions.
169
-
170
-## Try It!
171
-
172
-You can try the change in [this CodePen](https://codepen.io/gaearon/pen/gxNVdP?editors=0010).
173
-It uses React 16 RC, and you can [help us by testing the RC in your project!](https://github.com/facebook/react/issues/10294)
174
-
175
-## Thanks
176
-
177
-This effort was largely driven by [Nathan Hunzaker](https://github.com/nhunzaker) who has been a [prolific outside contributor to React](https://github.com/facebook/react/pulls?q=is:pr+author:nhunzaker+is:closed).
178
-
179
-You can find his work on this issue in several PRs over the course of last year: [#6459](https://github.com/facebook/react/pull/6459), [#7311](https://github.com/facebook/react/pull/7311), [#10229](https://github.com/facebook/react/pull/10229), [#10397](https://github.com/facebook/react/pull/10397), [#10385](https://github.com/facebook/react/pull/10385), and [#10470](https://github.com/facebook/react/pull/10470).
180
-
181
-Major changes in a popular project can take a lot of time and research. Nathan demonstrated perseverance and commitment to getting this change through, and we are very thankful to him for this and other efforts.
182
-
183
-We would also like to thank [Brandon Dail](https://github.com/aweary) and [Jason Quense](https://github.com/jquense) for their invaluable help maintaining React this year.
184
-
185
-## Future Work
186
-
187
-We are not changing how [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements) work in React 16, but there are [existing discussions](https://github.com/facebook/react/issues/7249) about setting properties instead of attributes, and we might revisit this in React 17. Feel free to chime in if you'd like to help!
docs/_posts/2017-09-25-react-v15.6.2.md
deleted
-64
@@ -1,64 +0,0 @@
1
----
2
-title: "React v15.6.2"
3
-author: [nhunzaker]
4
----
5
-
6
-Today we're sending out React 15.6.2. In 15.6.1, we shipped a few fixes for change events and inputs that had some unintended consequences. Those regressions have been ironed out, and we've also included a few more fixes to improve the stability of React across all browsers.
7
-
8
-Additionally, 15.6.2 adds support for the [`controlList`](https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist) attribute, and CSS columns are no longer appended with a `px` suffix.
9
-
10
-## Installation
11
-
12
-We recommend using [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/) for managing front-end dependencies. If you're new to package managers, the [Yarn documentation](https://yarnpkg.com/en/docs/getting-started) is a good place to get started.
13
-
14
-To install React with Yarn, run:
15
-
16
-```bash
17
-yarn add react@^15.6.2 react-dom@^15.6.2
18
-```
19
-
20
-To install React with npm, run:
21
-
22
-```bash
23
-npm install --save react@^15.6.2 react-dom@^15.6.2
24
-```
25
-
26
-We recommend using a bundler like [webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/) so you can write modular code and bundle it together into small packages to optimize load time.
27
-
28
-Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, make sure to [use the production build](/docs/optimizing-performance.html#use-the-production-build).
29
-
30
-In case you don't use a bundler, we also provide pre-built bundles in the npm packages which you can [include as script tags](/docs/installation.html#using-a-cdn) on your page:
31
-
32
-* **React**<br/>
33
- Dev build with warnings: [react/dist/react.js](https://unpkg.com/react@15.6.2/dist/react.js)<br/>
34
- Minified build for production: [react/dist/react.min.js](https://unpkg.com/react@15.6.2/dist/react.min.js)<br/>
35
-* **React with Add-Ons**<br/>
36
- Dev build with warnings: [react/dist/react-with-addons.js](https://unpkg.com/react@15.6.2/dist/react-with-addons.js)<br/>
37
- Minified build for production: [react/dist/react-with-addons.min.js](https://unpkg.com/react@15.5.0/dist/react-with-addons.min.js)<br/>
38
-* **React DOM** (include React in the page before React DOM)<br/>
39
- Dev build with warnings: [react-dom/dist/react-dom.js](https://unpkg.com/react-dom@15.6.2/dist/react-dom.js)<br/>
40
- Minified build for production: [react-dom/dist/react-dom.min.js](https://unpkg.com/react-dom@15.6.2/dist/react-dom.min.js)<br/>
41
-* **React DOM Server** (include React in the page before React DOM Server)<br/>
42
- Dev build with warnings: [react-dom/dist/react-dom-server.js](https://unpkg.com/react-dom@15.6.2/dist/react-dom-server.js)<br/>
43
- Minified build for production: [react-dom/dist/react-dom-server.min.js](https://unpkg.com/react-dom@15.6.2/dist/react-dom-server.min.js)<br/>
44
-
45
-We've also published version `15.6.2` of `react` and `react-dom` on npm, and the `react` package on bower.
46
-
47
----
48
-
49
-## Changelog
50
-
51
-## 15.6.2 (September 25, 2017)
52
-
53
-### All Packages
54
-* Switch from BSD + Patents to MIT license
55
-
56
-### React DOM
57
-
58
-* Fix a bug where modifying `document.documentMode` would trigger IE detection in other browsers, breaking change events. ([@aweary](https://github.com/aweary) in [#10032](https://github.com/facebook/react/pull/10032))
59
-* CSS Columns are treated as unitless numbers. ([@aweary](https://github.com/aweary) in [#10115](https://github.com/facebook/react/pull/10115))
60
-* Fix bug in QtWebKit when wrapping synthetic events in proxies. ([@walrusfruitcake](https://github.com/walrusfruitcake) in [#10115](https://github.com/facebook/react/pull/10011))
61
-* Prevent event handlers from receiving extra argument in development. ([@aweary](https://github.com/aweary) in [#10115](https://github.com/facebook/react/pull/8363))
62
-* Fix cases where `onChange` would not fire with `defaultChecked` on radio inputs. ([@jquense](https://github.com/jquense) in [#10156](https://github.com/facebook/react/pull/10156))
63
-* Add support for `controlList` attribute to DOM property whitelist ([@nhunzaker](https://github.com/nhunzaker) in [#9940](https://github.com/facebook/react/pull/9940))
64
-* Fix a bug where creating an element with a ref in a constructor did not throw an error in development. ([@iansu](https://github.com/iansu) in [#10025](https://github.com/facebook/react/pull/10025))
\ No newline at end of file
docs/_posts/2017-09-26-react-v16.0.md
deleted
-209
@@ -1,209 +0,0 @@
1
----
2
-title: "React v16.0"
3
-author: [acdlite]
4
----
5
-
6
-We're excited to announce the release of React v16.0! Among the changes are some long-standing feature requests, including [**fragments**](#new-render-return-types-fragments-and-strings), [**error boundaries**](#better-error-handling), [**portals**](#portals), support for [**custom DOM attributes**](#support-for-custom-dom-attributes), improved [**server-side rendering**](#better-server-side-rendering), and [**reduced file size**](#reduced-file-size).
7
-
8
-### New render return types: fragments and strings
9
-
10
-You can now return an array of elements from a component's `render` method. Like with other arrays, you'll need to add a key to each element to avoid the key warning:
11
-
12
-```js
13
-render() {
14
- // No need to wrap list items in an extra element!
15
- return [
16
- // Don't forget the keys :)
17
- <li key="A">First item</li>,
18
- <li key="B">Second item</li>,
19
- <li key="C">Third item</li>,
20
- ];
21
-}
22
-```
23
-
24
-In the future, we'll likely add a special fragment syntax to JSX that doesn't require keys.
25
-
26
-We've added support for returning strings, too:
27
-
28
-```js
29
-render() {
30
- return 'Look ma, no spans!';
31
-}
32
-```
33
-
34
-[See the full list of supported return types](/docs/react-component.html#render).
35
-
36
-### Better error handling
37
-
38
-Previously, runtime errors during rendering could put React in a broken state, producing cryptic error messages and requiring a page refresh to recover. To address this problem, React 16 uses a more resilient error-handling strategy. By default, if an error is thrown inside a component's render or lifecycle methods, the whole component tree is unmounted from the root. This prevents the display of corrupted data. However, it's probably not the ideal user experience.
39
-
40
-Instead of unmounting the whole app every time there's an error, you can use error boundaries. Error boundaries are special components that capture errors inside their subtree and display a fallback UI in its place. Think of error boundaries like try-catch statements, but for React components.
41
-
42
-For more details, check out our [previous post on error handling in React 16](/blog/2017/07/26/error-handling-in-react-16.html).
43
-
44
-
45
-### Portals
46
-
47
-Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
48
-
49
-```js
50
-render() {
51
- // React does *not* create a new div. It renders the children into `domNode`.
52
- // `domNode` is any valid DOM node, regardless of its location in the DOM.
53
- return ReactDOM.createPortal(
54
- this.props.children,
55
- domNode,
56
- );
57
-}
58
-```
59
-
60
-See a full example in the [documentation for portals](/docs/portals.html).
61
-
62
-### Better server-side rendering
63
-
64
-React 16 includes a completely rewritten server renderer. It's really fast. It supports **streaming**, so you can start sending bytes to the client faster. And thanks to a [new packaging strategy](#reduced-file-size) that compiles away `process.env` checks (Believe it or not, reading `process.env` in Node is really slow!), you no longer need to bundle React to get good server-rendering performance.
65
-
66
-Core team member Sasha Aickin wrote a [great article describing React 16's SSR improvements](https://medium.com/@aickin/whats-new-with-server-side-rendering-in-react-16-9b0d78585d67). According to Sasha's synthetic benchmarks, server rendering in React 16 is roughly **three times faster** than React 15. "When comparing against React 15 with `process.env` compiled out, there’s about a 2.4x improvement in Node 4, about a 3x performance improvement in Node 6, and a full 3.8x improvement in the new Node 8.4 release. And if you compare against React 15 without compilation, React 16 has a full order of magnitude gain in SSR in the latest version of Node!" (As Sasha points out, please be aware that these numbers are based on synthetic benchmarks and may not reflect real-world performance.)
67
-
68
-In addition, React 16 is better at hydrating server-rendered HTML once it reaches the client. It no longer requires the initial render to exactly match the result from the server. Instead, it will attempt to reuse as much of the existing DOM as possible. No more checksums! In general, we don't recommend that you render different content on the client versus the server, but it can be useful in some cases (e.g. timestamps).
69
-
70
-See the [documentation for `ReactDOMServer`](/docs/react-dom-server.html) for more details.
71
-
72
-### Support for custom DOM attributes
73
-
74
-Instead of ignoring unrecognized HTML and SVG attributes, React will now [pass them through to the DOM](https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html). This has the added benefit of allowing us to get rid of most of React's attribute whitelist, resulting in reduced file sizes.
75
-
76
-### Reduced file size
77
-
78
-Despite all these additions, React 16 is actually **smaller** compared to 15.6.1!
79
-
80
-* `react` is 5.3 kb (2.2 kb gzipped), down from 20.7 kb (6.9 kb gzipped).
81
-* `react-dom` is 103.7 kb (32.6 kb gzipped), down from 141 kb (42.9 kb gzipped).
82
-* `react` + `react-dom` is 109 kb (34.8 kb gzipped), down from 161.7 kb (49.8 kb gzipped).
83
-
84
-That amounts to a combined **32% size decrease compared to the previous version (30% post-gzip)**.
85
-
86
-The size difference is partly attributable to a change in packaging. React now uses [Rollup](https://rollupjs.org/) to create flat bundles for each of its different target formats, resulting in both size and runtime performance wins. The flat bundle format also means that React's impact on bundle size is roughly consistent regardless of how you ship your app, whether it's with Webpack, Browserify, the pre-built UMD bundles, or any other system.
87
-
88
-### MIT licensed
89
-
90
-[In case you missed it](https://code.facebook.com/posts/300798627056246/relicensing-react-jest-flow-and-immutable-js/), React 16 is available under the MIT license. We've also published React 15.6.2 under MIT, for those who are unable to upgrade immediately.
91
-
92
-### New core architecture
93
-
94
-React 16 is the first version of React built on top of a new core architecture, codenamed "Fiber." You can read all about this project over on [Facebook's engineering blog](https://code.facebook.com/posts/1716776591680069/react-16-a-look-inside-an-api-compatible-rewrite-of-our-frontend-ui-library/). (Spoiler: we rewrote React!)
95
-
96
-Fiber is responsible for most of the new features in React 16, like error boundaries and fragments. Over the next few releases, you can expect more new features as we begin to unlock the full potential of React.
97
-
98
-Perhaps the most exciting area we're working on is **async rendering**—a strategy for cooperatively scheduling rendering work by periodically yielding execution to the browser. The upshot is that, with async rendering, apps are more responsive because React avoids blocking the main thread.
99
-
100
-This demo provides an early peek at the types of problems async rendering can solve:
101
-
102
-<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Ever wonder what "async rendering" means? Here's a demo of how to coordinate an async React tree with non-React work <a href="https://t.co/3snoahB3uV">https://t.co/3snoahB3uV</a> <a href="https://t.co/egQ988gBjR">pic.twitter.com/egQ988gBjR</a></p>— Andrew Clark (@acdlite) <a href="https://twitter.com/acdlite/status/909926793536094209">September 18, 2017</a></blockquote>
103
-
104
-*Tip: Pay attention to the spinning black square.*
105
-
106
-We think async rendering is a big deal, and represents the future of React. To make migration to v16.0 as smooth as possible, we're not enabling any async features yet, but we're excited to start rolling them out in the coming months. Stay tuned!
107
-
108
-## Installation
109
-
110
-React v16.0.0 is available on the npm registry.
111
-
112
-To install React 16 with Yarn, run:
113
-
114
-```bash
115
-yarn add react@^16.0.0 react-dom@^16.0.0
116
-```
117
-
118
-To install React 16 with npm, run:
119
-
120
-```bash
121
-npm install --save react@^16.0.0 react-dom@^16.0.0
122
-```
123
-
124
-We also provide UMD builds of React via a CDN:
125
-
126
-```html
127
-<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
128
-<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
129
-```
130
-
131
-Refer to the documentation for [detailed installation instructions](/docs/installation.html).
132
-
133
-## Upgrading
134
-
135
-Although React 16 includes significant internal changes, in terms of upgrading, you can think of this like any other major React release. We've been serving React 16 to Facebook and Messenger.com users since earlier this year, and we released several beta and release candidate versions to flush out additional issues. With minor exceptions, **if your app runs in 15.6 without any warnings, it should work in 16.**
136
-
137
-### New deprecations
138
-
139
-Hydrating a server-rendered container now has an explicit API. If you're reviving server-rendered HTML, use [`ReactDOM.hydrate`](/docs/react-dom.html#hydrate) instead of `ReactDOM.render`. Keep using `ReactDOM.render` if you're just doing client-side rendering.
140
-
141
-### React Addons
142
-
143
-As previously announced, we've [discontinued support for React Addons](/blog/2017/04/07/react-v15.5.0.html#discontinuing-support-for-react-addons). We expect the latest version of each addon (except `react-addons-perf`; see below) to work for the foreseeable future, but we won't publish additional updates.
144
-
145
-Refer to the previous announcement for [suggestions on how to migrate](/blog/2017/04/07/react-v15.5.0.html#discontinuing-support-for-react-addons).
146
-
147
-`react-addons-perf` no longer works at all in React 16. It's likely that we'll release a new version of this tool in the future. In the meantime, you can [use your browser's performance tools to profile React components](/docs/optimizing-performance.html#profiling-components-with-the-chrome-performance-tab).
148
-
149
-### Breaking changes
150
-
151
-React 16 includes a number of small breaking changes. These only affect uncommon use cases and we don't expect them to break most apps.
152
-
153
-* React 15 had limited, undocumented support for error boundaries using `unstable_handleError`. This method has been renamed to `componentDidCatch`. You can use a codemod to [automatically migrate to the new API](https://github.com/reactjs/react-codemod#error-boundaries).
154
-* `ReactDOM.render` and `ReactDOM.unstable_renderIntoContainer` now return null if called from inside a lifecycle method. To work around this, you can use [portals](https://github.com/facebook/react/issues/10309#issuecomment-318433235) or [refs](https://github.com/facebook/react/issues/10309#issuecomment-318434635).
155
-* `setState`:
156
- * Calling `setState` with null no longer triggers an update. This allows you to decide in an updater function if you want to re-render.
157
- * Calling `setState` directly in render always causes an update. This was not previously the case. Regardless, you should not be calling setState from render.
158
- * `setState` callbacks (second argument) now fire immediately after `componentDidMount` / `componentDidUpdate` instead of after all components have rendered.
159
-* When replacing `<A />` with `<B />`, `B.componentWillMount` now always happens before `A.componentWillUnmount`. Previously, `A.componentWillUnmount` could fire first in some cases.
160
-* Previously, changing the ref to a component would always detach the ref before that component's render is called. Now, we change the ref later, when applying the changes to the DOM.
161
-* It is not safe to re-render into a container that was modified by something other than React. This worked previously in some cases but was never supported. We now emit a warning in this case. Instead you should clean up your component trees using `ReactDOM.unmountComponentAtNode`. [See this example.](https://github.com/facebook/react/issues/10294#issuecomment-318820987)
162
-* `componentDidUpdate` lifecycle no longer receives `prevContext` param. (See [#8631](https://github.com/facebook/react/issues/8631))
163
-* Shallow renderer no longer calls `componentDidUpdate` because DOM refs are not available. This also makes it consistent with `componentDidMount` (which does not get called in previous versions either).
164
-* Shallow renderer does not implement `unstable_batchedUpdates` anymore.
165
-* `ReactDOM.unstable_batchedUpdates` now only takes one extra argument after the callback.
166
-
167
-### Packaging
168
-
169
-* There is no `react/lib/*` and `react-dom/lib/*` anymore. Even in CommonJS environments, React and ReactDOM are precompiled to single files (“flat bundles”). If you previously relied on undocumented React internals, and they don’t work anymore, let us know about your specific case in a new issue, and we’ll try to figure out a migration strategy for you.
170
-* There is no `react-with-addons.js` build anymore. All compatible addons are published separately on npm, and have single-file browser versions if you need them.
171
-* The deprecations introduced in 15.x have been removed from the core package. `React.createClass` is now available as `create-react-class`, `React.PropTypes` as `prop-types`, `React.DOM` as `react-dom-factories`, `react-addons-test-utils` as `react-dom/test-utils`, and shallow renderer as `react-test-renderer/shallow`. See [15.5.0](https://reactjs.org/blog/2017/04/07/react-v15.5.0.html) and [15.6.0](https://reactjs.org/blog/2017/06/13/react-v15.6.0.html) blog posts for instructions on migrating code and automated codemods.
172
-* The names and paths to the single-file browser builds have changed to emphasize the difference between development and production builds. For example:
173
- * `react/dist/react.js` → `react/umd/react.development.js`
174
- * `react/dist/react.min.js` → `react/umd/react.production.min.js`
175
- * `react-dom/dist/react-dom.js` → `react-dom/umd/react-dom.development.js`
176
- * `react-dom/dist/react-dom.min`.js → `react-dom/umd/react-dom.production.min.js`
177
-
178
-## JavaScript Environment Requirements
179
-
180
-React 16 depends on the collection types [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set). If you support older browsers and devices which may not yet provide these natively (e.g. IE < 11), consider including a global polyfill in your bundled application, such as [core-js](https://github.com/zloirock/core-js) or [babel-polyfill](https://babeljs.io/docs/usage/polyfill/).
181
-
182
-A polyfilled environment for React 16 using core-js to support older browsers might look like:
183
-
184
-```js
185
-import 'core-js/es6/map';
186
-import 'core-js/es6/set';
187
-
188
-import React from 'react';
189
-import ReactDOM from 'react-dom';
190
-
191
-ReactDOM.render(
192
- <h1>Hello, world!</h1>,
193
- document.getElementById('root')
194
-);
195
-```
196
-
197
-React also depends on `requestAnimationFrame` (even in test environments). A simple shim for test environments would be:
198
-
199
-```js
200
-global.requestAnimationFrame = function(callback) {
201
- setTimeout(callback, 0);
202
-};
203
-```
204
-
205
-## Acknowledgments
206
-
207
-As always, this release would not have been possible without our open source contributors. Thanks to everyone who filed bugs, opened PRs, responded to issues, wrote documentation, and more!
208
-
209
-Special thanks to our core contributors, especially for their heroic efforts over the past few weeks during the prerelease cycle: [Brandon Dail](https://twitter.com/aweary), [Jason Quense](https://twitter.com/monasticpanic), [Nathan Hunzaker](https://twitter.com/natehunzaker), and [Sasha Aickin](https://twitter.com/xander76).
docs/acknowledgements.md
deleted
-25
@@ -1,25 +0,0 @@
1
----
2
-id: acknowledgements
3
-title: Acknowledgements
4
-layout: single
5
-permalink: acknowledgements.html
6
----
7
-
8
-We'd like to thank all of our contributors:
9
-
10
-<div class="three-column">
11
- {% for author_col in site.data.acknowledgements %}
12
- <ul>
13
- {% for author in author_col %}
14
- <li>{{ author }}</li>
15
- {% endfor %}
16
- </ul>
17
- {% endfor %}
18
-</div>
19
-
20
-In addition, we're grateful to
21
- - [Jeff Barczewski](https://github.com/jeffbski) for allowing us to use the [react](https://www.npmjs.com/package/react) package name on npm.
22
- - [Christopher Aue](http://christopheraue.net/) for letting us use the [reactjs.com](http://reactjs.com/) domain name and the [@reactjs](https://twitter.com/reactjs) username on Twitter.
23
- - [ProjectMoon](https://github.com/ProjectMoon) for letting us use the [flux](https://www.npmjs.com/package/flux) package name on npm.
24
- - Shane Anderson for allowing us to use the [react](https://github.com/react) org on GitHub.
25
- - [Dmitri Voronianski](https://github.com/voronianski) for letting us use the [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) color scheme on this website.
docs/blog/all.html
deleted
-20
@@ -1,20 +0,0 @@
1
----
2
-title: Blog
3
-layout: default
4
-sectionid: blog
5
-id: all-posts
6
----
7
-
8
-<section class="content wrap documentationContent nosidebar">
9
- <div class="inner-content">
10
- <h1>All Posts</h1>
11
- {% for page in site.posts %}
12
- <p><strong><a href="/react{{ page.url }}">{{ page.title }}</a></strong> on {{ page.date | date: "%B %e, %Y" }} by
13
- {% for author in page.authors %}
14
- {{ author.name }}
15
- {% if forloop.last == false %} and {% endif %}
16
- {% endfor %}
17
- </p>
18
- {% endfor %}
19
- </div>
20
-</section>
docs/blog/index.html
deleted
-29
@@ -1,29 +0,0 @@
1
----
2
-title: Blog
3
-layout: default
4
-sectionid: blog
5
----
6
-
7
-<section class="content wrap blogContent">
8
- {% include nav_blog.html %}
9
- <div class="inner-content">
10
- {% for page in paginator.posts %}
11
- <div class="post-list-item">
12
- {% include blog_post.html page=page content=page.content%}
13
- </div>
14
- {% endfor %}
15
-
16
- <div class="pagination">
17
- {% if paginator.previous_page %}
18
- <a href="/react{{ paginator.previous_page_path }}" class="previous">
19
- « Previous Page
20
- </a>
21
- {% endif %}
22
- {% if paginator.next_page %}
23
- <a href="/react{{ paginator.next_page_path }}" class="next">
24
- Next Page »
25
- </a>
26
- {% endif %}
27
- </div>
28
- </div>
29
-</section>
docs/circle.yml
deleted
-5
@@ -1,5 +0,0 @@
1
----
2
-general:
3
- branches:
4
- ignore:
5
- - gh-pages
docs/community/complementary-tools.it-IT.md
deleted
-5
@@ -1,5 +0,0 @@
1
----
2
-permalink: docs/complementary-tools-it-IT.html
3
-layout: redirect
4
-dest_url: https://github.com/facebook/react/wiki/Complementary-Tools
5
----
docs/community/complementary-tools.ko-KR.md
deleted
-5
@@ -1,5 +0,0 @@
1
----
2
-permalink: docs/complementary-tools-ko-KR.html
3
-layout: redirect
4
-dest_url: https://github.com/facebook/react/wiki/Complementary-Tools
5
----
docs/community/complementary-tools.md
deleted
-5
@@ -1,5 +0,0 @@
1
----
2
-permalink: docs/complementary-tools.html
3
-layout: redirect
4
-dest_url: https://github.com/facebook/react/wiki/Complementary-Tools
5
----
docs/community/complementary-tools.zh-CN.md
deleted
-5
@@ -1,5 +0,0 @@
1
----
2
-permalink: docs/complementary-tools-zh-CN.html
3
-layout: redirect
4
-dest_url: https://github.com/facebook/react/wiki/Complementary-Tools
5
----
docs/community/conferences.it-IT.md
deleted
-19
@@ -1,19 +0,0 @@
1
----
2
-id: conferences-it-IT
3
-title: Conferenze
4
-permalink: docs/conferences-it-IT.html
5
-prev: thinking-in-react-it-IT.html
6
-next: videos-it-IT.html
7
----
8
-
9
-### React.js Conf 2015
10
-28 e 29 Gennaio
11
-
12
-[Sito web](http://conf.reactjs.com/) - [Agenda](http://conf.reactjs.com/schedule.html) - [Video](https://www.youtube-nocookie.com/playlist?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr)
13
-
14
-<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/KVZ-P-ZI6W4?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe>
15
-
16
-### ReactEurope 2015
17
-2 e 3 Luglio
18
-
19
-[Sito web](http://www.react-europe.org/) - [Agenda](http://www.react-europe.org/#schedule)
docs/community/conferences.ko-KR.md
deleted
-19
@@ -1,19 +0,0 @@
1
----
2
-id: conferences-ko-KR
3
-title: 컨퍼런스들
4
-permalink: docs/conferences-ko-KR.html
5
-prev: thinking-in-react-ko-KR.html
6
-next: videos-ko-KR.html
7
----
8
-
9
-### React.js Conf 2015
10
-1월 28일 & 29일
11
-
12
-[웹사이트](http://conf.reactjs.com/) - [스케줄](http://conf.reactjs.com/schedule.html) - [비디오들](https://www.youtube-nocookie.com/playlist?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr)
13
-
14
-<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/KVZ-P-ZI6W4?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe>
15
-
16
-### ReactEurope 2015
17
-7월 2일 & 3일
18
-
19
-[웹사이트](http://www.react-europe.org/) - [스케줄](http://www.react-europe.org/#schedule)
docs/community/conferences.md
deleted
-179
@@ -1,179 +0,0 @@
1
----
2
-id: conferences
3
-title: Conferences
4
-layout: community
5
-sectionid: community
6
-permalink: community/conferences.html
7
-redirect_from: "docs/conferences.html"
8
----
9
-
10
-## Upcoming Conferences
11
-
12
-### ReactJS Day 2017
13
-October 6 in Verona, Italy
14
-
15
-[Website](http://2017.reactjsday.it) - [Twitter](https://twitter.com/reactjsday)
16
-
17
-### React Conf Brasil 2017
18
-October 7 in Sao Paulo, Brazil
19
-
20
-[Website](http://reactconfbr.com.br) - [Twitter](https://twitter.com/reactconfbr) - [Facebook](https://www.facebook.com/reactconf/)
21
-
22
-### State.js Conference 2017
23
-October 13 in Stockholm, Sweden
24
-
25
-[Website](https://statejs.com/)
26
-
27
-### React Summit 2017
28
-October 21 in Lagos, Nigeria
29
-
30
-[Website](https://reactsummit2017.splashthat.com/) - [Twitter](https://twitter.com/DevCircleLagos/) - [Facebook](https://www.facebook.com/groups/DevCLagos/)
31
-
32
-### ReactiveConf 2017
33
-October 25–27, Bratislava, Slovakia
34
-
35
-[Website](https://reactiveconf.com)
36
-
37
-### React Seoul 2017
38
-November 4 in Seoul, South Korea
39
-
40
-[Website](http://seoul.reactjs.kr/en)
41
-
42
-### React Day Berlin
43
-December 2, Berlin, Germany
44
-
45
-[Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/)
46
-
47
-### AgentConf 2018
48
-January 25-28 in Dornbirn, Austria
49
-
50
-[Website](http://agent.sh/)
51
-
52
-### React Amsterdam 2018
53
-April 13 in Amsterdam, The Netherlands
54
-
55
-[Website](https://react.amsterdam) - [Twitter](https://twitter.com/reactamsterdam) - [Facebook](https://www.facebook.com/reactamsterdam)
56
-
57
-### ReactEurope 2018
58
-May 17-18 in Paris, France
59
-
60
-[Website](https://www.react-europe.org) - [Twitter](https://twitter.com/ReactEurope) - [Facebook](https://www.facebook.com/ReactEurope)
61
-
62
-## Past Conferences
63
-
64
-### React.js Conf 2015
65
-January 28 & 29 in Facebook HQ, CA
66
-
67
-[Website](http://conf2015.reactjs.org/) - [Schedule](http://conf2015.reactjs.org/schedule.html) - [Videos](https://www.youtube.com/playlist?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr)
68
-
69
-<iframe title="React.js Conf 2015 Keynote" width="650" height="315" src="//www.youtube-nocookie.com/embed/KVZ-P-ZI6W4?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe>
70
-
71
-### ReactEurope 2015
72
-July 2 & 3 in Paris, France
73
-
74
-[Website](http://www.react-europe.org/) - [Schedule](http://www.react-europe.org/#schedule) - [Videos](https://www.youtube.com/channel/UCorlLn2oZfgOJ-FUcF2eZ1A/playlists)
75
-
76
-### Reactive 2015
77
-November 2-4 in Bratislava, Slovakia
78
-
79
-[Website](https://reactive2015.com/) - [Schedule](https://reactive2015.com/schedule_speakers.html#schedule)
80
-
81
-### React.js Conf 2016
82
-February 22 & 23 in San Francisco, CA
83
-
84
-[Website](http://conf.reactjs.com/) - [Schedule](http://conf.reactjs.com/schedule.html) - [Videos](https://www.youtube.com/playlist?list=PLb0IAmt7-GS0M8Q95RIc2lOM6nc77q1IY)
85
-
86
-### React Amsterdam 2016
87
-April 16 in Amsterdam, The Netherlands
88
-
89
-[Website](https://react.amsterdam/2016) - [Videos](https://youtu.be/sXDZBxbRRag?list=PLNBNS7NRGKMG3uLrm5fgY02hJ87Wzb4IU)
90
-
91
-### ReactEurope 2016
92
-June 2 & 3 in Paris, France
93
-
94
-[Website](http://www.react-europe.org/) - [Schedule](http://www.react-europe.org/#schedule) - [Videos](https://www.youtube.com/channel/UCorlLn2oZfgOJ-FUcF2eZ1A/playlists)
95
-
96
-### ReactRally 2016
97
-August 25-26 in Salt Lake City, UT
98
-
99
-[Website](http://www.reactrally.com/) - [Schedule](http://www.reactrally.com/#/schedule) - [Videos](https://www.youtube.com/playlist?list=PLUD4kD-wL_zYSfU3tIYsb4WqfFQzO_EjQ)
100
-
101
-### ReactNext 2016
102
-September 15 in Tel Aviv, Israel
103
-
104
-[Website](http://react-next.com/) - [Schedule](http://react-next.com/#schedule) - [Videos](https://www.youtube.com/channel/UC3BT8hh3yTTYxbLQy_wbk2w)
105
-
106
-### ReactNL 2016
107
-October 13 in Amsterdam, The Netherlands - [Schedule](http://reactnl.org/#program)
108
-
109
-[Website](http://reactnl.org/)
110
-
111
-### Reactive 2016
112
-October 26-28 in Bratislava, Slovakia
113
-
114
-[Website](https://reactiveconf.com/)
115
-
116
-### React Remote Conf 2016
117
-October 26-28 online
118
-
119
-[Website](https://allremoteconfs.com/react-2016) - [Schedule](https://allremoteconfs.com/react-2016#schedule)
120
-
121
-### Agent Conference 2017
122
-January 20-21 in Dornbirn, Austria
123
-
124
-[Website](http://agent.sh/)
125
-
126
-### React Conf 2017
127
-March 13-14 in Santa Clara, CA
128
-
129
-[Website](http://conf.reactjs.org/)
130
-
131
-### React London 2017
132
-March 28th at the [QEII Centre, London](http://qeiicentre.london/)
133
-
134
-[Website](http://react.london/)
135
-
136
-### React Amsterdam 2017
137
-April 21st in Amsterdam, The Netherlands
138
-
139
-[Website](https://react.amsterdam) - [Twitter](https://twitter.com/reactamsterdam)
140
-
141
-### ReactEurope 2017
142
-May 18th & 19th in Paris, France
143
-
144
-[Website](http://www.react-europe.org/) - [Schedule](http://www.react-europe.org/#schedule) - [Videos](https://www.youtube.com/channel/UCorlLn2oZfgOJ-FUcF2eZ1A/playlists)
145
-
146
-### Chain React 2017
147
-July 10-11 in Portland, Oregon USA
148
-
149
-[Website](https://infinite.red/ChainReactConf) - [Twitter](https://twitter.com/chainreactconf)
150
-
151
-### React Rally
152
-August 24-25 in Salt Lake City, Utah USA
153
-
154
-[Website](http://www.reactrally.com) - [Twitter](https://twitter.com/reactrally)
155
-
156
-### React Native EU 2017
157
-September 6-7 in Wroclaw, Poland
158
-
159
-[Website](http://react-native.eu/)
160
-
161
-### ReactNext 2017
162
-September 8-10 in Tel Aviv, Israel
163
-
164
-[Website](http://react-next.com/) - [Twitter](https://twitter.com/ReactNext)
165
-
166
-### ReactFoo 2017
167
-September 14 in Bangalore, India
168
-
169
-[Website](https://reactfoo.in/2017/)
170
-
171
-### React Boston 2017
172
-September 23-24 in Boston, Massachusetts USA
173
-
174
-[Website](http://www.reactboston.com/) - [Twitter](https://twitter.com/ReactBoston)
175
-
176
-### React Alicante 2017
177
-September 28-30 in Alicante, Spain
178
-
179
-[Website](http://reactalicante.es) - [Twitter](https://twitter.com/ReactAlicante)
docs/community/conferences.zh-CN.md
deleted
-29
@@ -1,29 +0,0 @@
1
----
2
-id: conferences-zh-CN
3
-title: 会议
4
-permalink: docs/conferences-zh-CN.html
5
-prev: thinking-in-react-zh-CN.html
6
-next: videos-zh-CN.html
7
----
8
-
9
-### React.js Conf 2015
10
-一月 28 & 29
11
-
12
-[Website](http://conf.reactjs.com/) - [Schedule](http://conf.reactjs.com/schedule.html) - [Videos](https://www.youtube-nocookie.com/playlist?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr)
13
-
14
-<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/KVZ-P-ZI6W4?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe>
15
-
16
-### ReactEurope 2015
17
-七月 2 & 3
18
-
19
-[Website](http://www.react-europe.org/) - [Schedule](http://www.react-europe.org/#schedule)
20
-
21
-### Reactive 2015
22
-十一月 2-4
23
-
24
-[Website](https://reactive2015.com/) - [Schedule](https://reactive2015.com/schedule_speakers.html#schedule)
25
-
26
-### ReactEurope 2016
27
-六月 2 & 3
28
-
29
-[Website](http://www.react-europe.org/) - [Schedule](http://www.react-europe.org/#schedule)
docs/community/examples.it-IT.md
deleted
-5
@@ -1,5 +0,0 @@
1
----
2
-permalink: docs/examples-it-IT.html
3
-layout: redirect
4
-dest_url: https://github.com/facebook/react/wiki/Examples
5
----
docs/community/examples.ko-KR.md
deleted
-5
@@ -1,5 +0,0 @@
1
----
2
-permalink: docs/examples-ko-KR.html
3
-layout: redirect
4
-dest_url: https://github.com/facebook/react/wiki/Examples
5
----
docs/community/examples.md
deleted
-5
@@ -1,5 +0,0 @@
1
----
2
-permalink: docs/examples.html
3
-layout: redirect
4
-dest_url: https://github.com/facebook/react/wiki/Examples
5
----
docs/community/examples.zh-CN.md
deleted
-5
@@ -1,5 +0,0 @@
1
----
2
-permalink: docs/examples-zh-CN.html
3
-layout: redirect
4
-dest_url: https://github.com/facebook/react/wiki/Examples
5
----
docs/community/support.md
deleted
-44
@@ -1,44 +0,0 @@
1
----
2
-id: support
3
-title: Where To Get Support
4
-layout: community
5
-sectionid: community
6
-permalink: community/support.html
7
-redirect_from: "support.html"
8
----
9
-
10
-**React** is worked on full-time by Facebook's product infrastructure and Instagram's user interface engineering teams. They're often around and available for questions.
11
-
12
-## Stack Overflow
13
-
14
-Many members of the community use Stack Overflow to ask questions. Read through the [existing questions](http://stackoverflow.com/questions/tagged/reactjs) tagged with **reactjs** or [ask your own](http://stackoverflow.com/questions/ask?tags=reactjs)!
15
-
16
-## Discussion Forum
17
-
18
-For longer-form conversations about React, we've set up a [discussion forum at **discuss.reactjs.org**](https://discuss.reactjs.org/). This forum is a great place for discussion about best practices and application architecture as well as the future of React. If you have an answerable code-level question, please post it to Stack Overflow instead.
19
-
20
-In the forum there's also a category for job posts and a category for discussion of our weekly meeting notes.
21
-
22
-## React Community on Hashnode
23
-
24
-[Hashnode's React node](https://hashnode.com/n/reactjs) is a great place to stay up-to-date with React discussion, news and stories.
25
-
26
-## Reactiflux Chat
27
-
28
-If you need an answer right away, check out the [Reactiflux Discord](https://discord.gg/0ZcbPKXt5bZjGY5n) community. There are usually a number of React experts there who can help out or point you to somewhere you might want to look.
29
-
30
-## Freenode IRC
31
-
32
-Some developers also hang out in [#reactjs on Freenode](http://irc.lc/freenode/reactjs).
33
-
34
->Note:
35
->
36
->Our IRC channel is called **#reactjs**. It is *not* called **#react** or **#reactos**.
37
->
38
->The **#reactos** channel belongs to an unrelated [ReactOS](https://reactos.org/) operating system project. The **#react** channel is not affiliated with us either. To discuss the React JavaScript library on its official IRC channel, please make sure that you post in **#reactjs**.
39
-
40
-## Facebook and Twitter
41
-
42
-For the latest news about React, [like us on Facebook](https://facebook.com/react) and [follow **@reactjs** on Twitter](https://twitter.com/reactjs). In addition, you can use the [#reactjs](https://twitter.com/hashtag/reactjs) hashtag to see what others are saying or add to the conversation.
43
-
44
-<div><a class="twitter-timeline" data-dnt="true" data-chrome="nofooter noheader transparent" href="https://twitter.com/search?q=%23reactjs" data-widget-id="342522405270470656"></a></div>
docs/community/videos.it-IT.md
deleted
-173
@@ -1,173 +0,0 @@
1
----
2
-id: videos-it-IT
3
-title: Video
4
-permalink: docs/videos-it-IT.html
5
-prev: conferences-it-IT.html
6
-next: complementary-tools-it-IT.html
7
----
8
-
9
-### Riconsiderare le best practice - JSConf.eu
10
-
11
-<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe>
12
-
13
-"A Facebook e Instagram, con React stiamo provando a spingerci oltre i limiti di ciò che è possibile realizzare sul web. Il mio talk comincerà con una breve introduzione al framework, e poi approfondirà tre argomenti controversi: Gettare via la nozione dei template e costruire le viste con JavaScript, effettuare il “ri-rendering” dell'intera applicazione quando i dati cambiano, e un'implementazione leggera del DOM e degli eventi." -- [Pete Hunt](http://www.petehunt.net/)
14
-
15
-* * *
16
-
17
-### Pensare in react - tagtree.tv
18
-
19
-Un video di [tagtree.tv](http://tagtree.tv/) che espone i principi di [Pensare in React](/docs/thinking-in-react.html) mentre costruisci una semplice applicazione
20
-<figure><a href="http://tagtree.tv/thinking-in-react"><img src="../img/docs/thinking-in-react-tagtree.png"></a></figure>
21
-
22
-* * *
23
-
24
-### I Segreti del DOM Virtuale - MtnWest JS
25
-
26
-<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/h3KksH8gfcQ" frameborder="0" allowfullscreen></iframe>
27
-
28
-"In questo talk discuterò perché abbiamo costruito un DOM virtuale, i vantaggi rispetto ad altri sistemi, e la sua rilevanza per il futuro della tecnologia dei browser." -- [Pete Hunt](http://www.petehunt.net/)
29
-
30
-* * *
31
-
32
-### Pensare in grande con React
33
-
34
-"Sulla carta, tutti questi framework JS sembrano promettenti: implementazioni pulite, design veloce del codice, esecuzione perfetta. Ma che succede quando metti JavaScript sotto stress? Che succede se gli dài in pasto 6 megabyte di codice? In questo talk investigheremo come si comporta React in situazioni di stress elevato, e come ha aiutato il nostro team a costruire codice sicuro ad una scala enorme."
35
-<figure><a href="https://skillsmatter.com/skillscasts/5429-going-big-with-react#video"><img src="https://i.vimeocdn.com/video/481670116_650.jpg"></a></figure>
36
-
37
-* * *
38
-
39
-### CodeWinds
40
-
41
-[Pete Hunt](http://www.petehunt.net/) ha parlato con [Jeff Barczewski](http://jeff.barczewski.com/) a proposito di React nell'Episodio 4 di CodeWinds.
42
-<figure><a href="http://codewinds.com/4"><img src="../img/docs/codewinds-004.png"></a></figure>
43
-
44
-<table width="100%"><tr><td>
45
-02:08 - Cos'è React e perché usarlo?<br />
46
-03:08 - La relazione simbiotica di ClojureScript e React<br />
47
-04:54 - La storia di React e il perché è stato creato<br />
48
-09:43 - Aggiornare una pagina web con React senza usare data binding<br />
49
-13:11 - Usare il DOM virtuale per cambiare il DOM del browser<br />
50
-13:57 - Programmare con React, rendering in HTML, canvas, ed altro<br />
51
-16:45 - Lavorare con i designer. Paragone con Ember ed AngularJS<br />
52
-21:45 - Il Compilatore JSX che unisce HTML e il javascript di React<br />
53
-23:50 - Autobuilding JSX e strumenti nel browser per React<br />
54
-24:50 - Trucchi e suggerimenti per lavorare con React, primi passi<br />
55
-</td><td>
56
-27:17 - Rendering HTML lato server con Node.js. Rendering backend<br />
57
-29:20 - React evoluto tramite sopravvivenza del più adatto a Facebook<br />
58
-30:15 - Idee per avere lo stato sul server e il client, usando web sockets.<br />
59
-32:05 - React-multiutente - stato mutevole distribuito usando Firebase<br />
60
-33:03 - Miglior debug con React usando le transizioni di stato, ripetere eventi<br />
61
-34:08 - Differenze con i Web Components<br />
62
-34:25 - Compagnie rilevanti che usano React<br />
63
-35:16 - Si può creare un plugin backend di React per generare PDF?<br />
64
-36:30 - Futuro di React, cosa viene dopo?<br />
65
-39:38 - Contribuire e ricevere aiuto<br />
66
-</td></tr></table>
67
-
68
-[Leggi le note dell'episodio](http://codewinds.com/4)
69
-
70
-* * *
71
-
72
-### JavaScript Jabber
73
-
74
-[Pete Hunt](http://www.petehunt.net/) e [Jordan Walke](https://github.com/jordwalke) hanno parlato di React in JavaScript Jabber 73.
75
-<figure><a href="http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/#content"><img src="../img/docs/javascript-jabber.png"></a></figure>
76
-
77
-<table width="100%"><tr><td>
78
-01:34 – Introduzione di Pete Hunt<br />
79
-02:45 – Introduzione di Jordan Walke<br />
80
-04:15 – React<br />
81
-06:38 – 60 Frame Al Secondo<br />
82
-09:34 – Data Binding<br />
83
-12:31 – Performance<br />
84
-17:39 – Algoritmo di Differenza<br />
85
-19:36 – Manipolazione del DOM
86
-</td><td>
87
-23:06 – Supporto per node.js<br />
88
-24:03 – rendr<br />
89
-26:02 – JSX<br />
90
-30:31 – requestAnimationFrame<br />
91
-34:15 – React e le Applicazioni<br />
92
-38:12 – Utenti React Khan Academy<br />
93
-39:53 – Farlo funzionare
94
-</td></tr></table>
95
-
96
-[Leggi la trascrizione completa](http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/)
97
-
98
-* * *
99
-
100
-### Introduzione a React.js - Facebook Seattle
101
-
102
-<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe>
103
-
104
-Di [Tom Occhino](http://tomocchino.com/) e [Jordan Walke](https://github.com/jordwalke)
105
-
106
-* * *
107
-
108
-### Backbone + React + Middleman Screencast
109
-<iframe width="650" height="488" src="https://www.youtube-nocookie.com/embed/iul1fWHVU6A" frameborder="0" allowfullscreen></iframe>
110
-
111
-Backbone è una grande maniera di interfacciare una API REST con React. Questo screencast mostra come integrare i due usando [Backbone-React-Component](https://github.com/magalhas/backbone-react-component). Middleman è il framework utilizzato in questo esempio, ma può essere facilmente sostituito con altri framework. Si può trovare un template supportato per questo esempio [qui](https://github.com/jbhatab/middleman-backbone-react-template). -- [Open Minded Innovations](http://www.openmindedinnovations.com/)
112
-
113
-* * *
114
-
115
-### Sviluppare Interfacce Utente Con React - Super VanJS
116
-
117
-<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe>
118
-
119
-Di [Steven Luscher](https://github.com/steveluscher)
120
-
121
-* * *
122
-
123
-### Introduzione a React - LAWebSpeed meetup
124
-
125
-<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe>
126
-
127
-Di [Stoyan Stefanov](http://www.phpied.com/)
128
-
129
-* * *
130
-
131
-### React, o come rendere la vita più semplice - FrontEnd Dev Conf '14
132
-
133
-<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/YJNUK0EA_Jo" frameborder="0" allowfullscreen></iframe>
134
-
135
-**In Russo** di [Alexander Solovyov](http://solovyov.net/)
136
-
137
-* * *
138
-
139
-### "Programmazione funzionale del DOM" - Meteor DevShop 11
140
-
141
-<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/qqVbr_LaCIo" frameborder="0" allowfullscreen></iframe>
142
-
143
-* * *
144
-
145
-### "Ripensare lo Sviluppo di Applicazioni Web a Facebook" - Facebook F8 Conference 2014
146
-
147
-<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/nYkdrAPrdcw" frameborder="0" allowfullscreen></iframe>
148
-
149
-* * *
150
-
151
-### React e Flux: Costruire Applicazioni con un Flusso Dati Unidirezionale - Forward JS 2014
152
-
153
-<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe>
154
-
155
-Gli ingegneri di Facebook [Bill Fisher](https://twitter.com/fisherwebdev) e [Jing Chen](https://twitter.com/jingc) parlano di Flux e React, e di come usare un'architettura dell'applicazione con un flusso di dati unidirezionale rende gran parte del loro codice più pulito.
156
-
157
-* * *
158
-
159
-### Rendering Lato Server di Applicazioni Isomorfiche a SoundCloud
160
-
161
-<iframe src="https://player.vimeo.com/video/108488724" width="100%" height="365" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
162
-
163
-[Andres Suarez](https://github.com/zertosh) ci accompagna alla scoperta di come [SoundCloud](https://developers.soundcloud.com/blog/) usa React e Flux per il rendering lato server.
164
-
165
-[Slide e codice d'esempio](https://github.com/zertosh/ssr-demo-kit)
166
-
167
-* * *
168
-
169
-### Introduzione a React Native (+Playlist) - React.js Conf 2015
170
-
171
-<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/KVZ-P-ZI6W4?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe>
172
-
173
-[Tom Occhino](https://twitter.com/tomocchino) ripercorre il passato e il presente di React nel 2015, e ci mostra dove è diretto nell'immediato futuro.
docs/community/videos.ko-KR.md
deleted
-174
@@ -1,174 +0,0 @@
1
----
2
-id: videos-ko-KR
3
-title: 비디오들
4
-permalink: docs/videos-ko-KR.html
5
-prev: conferences-ko-KR.html
6
-next: complementary-tools-ko-KR.html
7
----
8
-
9
-### Rethinking best practices - JSConf.eu
10
-
11
-<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe>
12
-
13
-"페이스북과 인스타그램에서, 우리는 React 를 이용해 웹에서 벌어질 수 있는 한계를 뛰어넘으려 노력하고 있습니다. 저는 프레임워크에 대한 짤막한 소개로 시작해서, 논쟁이 벌어질 수 있는 다음의 세가지 주제로 넘어갈겁니다. 템플릿의 개념을 버리고 JavaScript 를 이용해 View 를 구축하기, 자료가 변할때 전체 어플리케이션을 다시 그리기(“re-rendering”), 그리고 DOM과 events의 경량화된 구현 입니다." -- [Pete Hunt](http://www.petehunt.net/)
14
-
15
-* * *
16
-
17
-### Thinking in react - tagtree.tv
18
-
19
-[tagtree.tv](http://tagtree.tv/)의 비디오는 간단한 어플리케이션을 구성하면서 [Thinking in React](/docs/thinking-in-react-ko-KR.html)의 원리들을 전달합니다.
20
-<figure><a href="http://tagtree.tv/thinking-in-react"><img src="../img/docs/thinking-in-react-tagtree.png"></a></figure>
21
-
22
-* * *
23
-
24
-### Secrets of the Virtual DOM - MtnWest JS
25
-
26
-<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/h3KksH8gfcQ" frameborder="0" allowfullscreen></iframe>
27
-
28
-"이번에는 왜 우리가 virtual DOM을 만들었는지, 이것이 다른 시스템들과는 어떻게 다른지, 그리고 브라우져 기술들의 미래와 어떻게 관련이 있는지에 대해서 이야기 해 볼 겁니다." -- [Pete Hunt](http://www.petehunt.net/)
29
-
30
-* * *
31
-
32
-### Going big with React
33
-
34
-"이 발표에서, 이 모든 JS 프레임워크가 다음을 약속하는것처럼 보입니다: 깨끗한 구현들, 빠른 코드 디자인, 완전한 수행. 그런데 당신이 JavaScript 스트레스 테스트를 할때, 어떤 일이 발생합니까? 혹은 6MB의 코드를 던지면 무슨일이 발생합니까? 이번에는 높은 스트레스 환경에서 React가 어떻게 작동하는지, 그리고 이것이 우리 팀이 방대한 크기의 코드를 안전하게 구성하는데 어떻게 도움이 되어줄지를 조사해 볼겁니다."
35
-[](https://skillsmatter.com/skillscasts/5429-going-big-with-react#video)
36
-
37
-* * *
38
-
39
-### CodeWinds
40
-
41
-CodeWinds Episode 4 에서 [Pete Hunt](http://www.petehunt.net/)와 [Jeff Barczewski](http://jeff.barczewski.com/)가 React에 대해서 이야기 합니다.
42
-
43
-<figure><a href="http://codewinds.com/4"><img src="../img/docs/codewinds-004.png"></a></figure>
44
-
45
-<table width="100%"><tr><td>
46
-02:08 - What is React and why use it?<br />
47
-03:08 - The symbiotic relationship of ClojureScript and React<br />
48
-04:54 - The history of React and why it was created<br />
49
-09:43 - Updating web page with React without using data binding<br />
50
-13:11 - Using the virtual DOM to change the browser DOM<br />
51
-13:57 - Programming with React, render targets HTML, canvas, other<br />
52
-16:45 - Working with designers. Contrasted with Ember and AngularJS<br />
53
-21:45 - JSX Compiler bridging HTML and React javascript<br />
54
-23:50 - Autobuilding JSX and in browser tools for React<br />
55
-24:50 - Tips and tricks to working with React, getting started<br />
56
-</td><td>
57
-27:17 - Rendering HTML on the server with Node.js. Rendering backends<br />
58
-29:20 - React evolved through survival of the fittest at Facebook<br />
59
-30:15 - Ideas for having state on server and client, using web sockets.<br />
60
-32:05 - React-multiuser - distributed shared mutable state using Firebase<br />
61
-33:03 - Better debugging with React using the state transitions, replaying events<br />
62
-34:08 - Differences from Web Components<br />
63
-34:25 - Notable companies using React<br />
64
-35:16 - Could a React backend plugin be created to target PDF?<br />
65
-36:30 - Future of React, what's next?<br />
66
-39:38 - Contributing and getting help<br />
67
-</td></tr></table>
68
-
69
-[방송 자료 읽어보기](http://codewinds.com/4)
70
-
71
-* * *
72
-
73
-### JavaScript Jabber
74
-
75
-JavaScript Jabber 73에서 [Pete Hunt](http://www.petehunt.net/)와 [Jordan Walke](https://github.com/jordwalke)가 React에 대해서 이야기했습니다.
76
-
77
-<figure><a href="http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/#content"><img src="../img/docs/javascript-jabber.png"></a></figure>
78
-
79
-<table width="100%"><tr><td>
80
-01:34 – Pete Hunt Introduction<br />
81
-02:45 – Jordan Walke Introduction<br />
82
-04:15 – React<br />
83
-06:38 – 60 Frames Per Second<br />
84
-09:34 – Data Binding<br />
85
-12:31 – Performance<br />
86
-17:39 – Diffing Algorithm<br />
87
-19:36 – DOM Manipulation
88
-</td><td>
89
-23:06 – Supporting node.js<br />
90
-24:03 – rendr<br />
91
-26:02 – JSX<br />
92
-30:31 – requestAnimationFrame<br />
93
-34:15 – React and Applications<br />
94
-38:12 – React Users Khan Academy<br />
95
-39:53 – Making it work
96
-</td></tr></table>
97
-
98
-[전체 기록 읽어보기](http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/)
99
-
100
-* * *
101
-
102
-### Introduction to React.js - Facebook Seattle
103
-
104
-<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe>
105
-
106
-By [Tom Occhino](http://tomocchino.com/), [Jordan Walke](https://github.com/jordwalke)
107
-
108
-* * *
109
-
110
-### Backbone + React + Middleman Screencast
111
-<iframe width="650" height="488" src="https://www.youtube-nocookie.com/embed/iul1fWHVU6A" frameborder="0" allowfullscreen></iframe>
112
-
113
-Backbone은 React로 REST API를 제공하기 위한 아주 좋은 방법입니다. 이 화면중개는 [Backbone-React-Component](https://github.com/magalhas/backbone-react-component)을 이용해서 어떻게 이 두가지를 연동하는지 보여줍니다. Middleman은 이 예제에서 사용되는 프레임워크이지만, 쉽게 다른 프레임워크로 대체하실 수 있습니다. 지원되는 템플릿은 [이곳](https://github.com/jbhatab/middleman-backbone-react-template)에서 찾으실 수 있습니다. -- [열린 마음의 혁명들](http://www.openmindedinnovations.com/)
114
-
115
-* * *
116
-
117
-### Developing User Interfaces With React - Super VanJS
118
-
119
-<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe>
120
-
121
-By [Steven Luscher](https://github.com/steveluscher)
122
-
123
-* * *
124
-
125
-### Introduction to React - LAWebSpeed meetup
126
-
127
-<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe>
128
-
129
-by [Stoyan Stefanov](http://www.phpied.com/)
130
-
131
-* * *
132
-
133
-### React, or how to make life simpler - FrontEnd Dev Conf '14
134
-
135
-<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/YJNUK0EA_Jo" frameborder="0" allowfullscreen></iframe>
136
-
137
-**러시아어** by [Alexander Solovyov](http://solovyov.net/)
138
-
139
-* * *
140
-
141
-### "Functional DOM programming" - Meteor DevShop 11
142
-
143
-<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/qqVbr_LaCIo" frameborder="0" allowfullscreen></iframe>
144
-
145
-* * *
146
-
147
-### "Rethinking Web App Development at Facebook" - Facebook F8 Conference 2014
148
-
149
-<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/nYkdrAPrdcw" frameborder="0" allowfullscreen></iframe>
150
-
151
-* * *
152
-
153
-### React and Flux: Building Applications with a Unidirectional Data Flow - Forward JS 2014
154
-
155
-<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe>
156
-
157
-Facebook 개발자 [Bill Fisher](https://twitter.com/fisherwebdev)와 [Jing Chen](https://twitter.com/jingc)가 Flux 와 React 에 대해서 이야기합니다. 그리고 어떻게 단일 방향의 자료흐름을 사용하는 어플리케이션 구조가 방대한 코드를 정리하는지에 대해서 이야기합니다."
158
-
159
-* * *
160
-
161
-### Server-Side Rendering of Isomorphic Apps at SoundCloud
162
-
163
-<iframe src="https://player.vimeo.com/video/108488724" width="100%" height="365" frameborder="0" allowfullscreen></iframe>
164
-
165
-Server-side rendering을 위해 [SoundCloud](https://developers.soundcloud.com/blog/)가 React 와 Flux를 사용하는지 by [Andres Suarez](https://github.com/zertosh)
166
-[발표 자료와 예제 코드](https://github.com/zertosh/ssr-demo-kit)
167
-
168
-* * *
169
-
170
-### Introducing React Native (+Playlist) - React.js Conf 2015
171
-
172
-<iframe width="650" height="366" src="https://www.youtube-nocookie.com/v/KVZ-P-ZI6W4&index=1&list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe>
173
-
174
-2015년에 [Tom Occhino](https://twitter.com/tomocchino)님이 React의 과거와 현재를 리뷰하고 나아갈 방향을 제시했습니다.
docs/community/videos.md
deleted
-174
@@ -1,174 +0,0 @@
1
----
2
-id: videos
3
-title: Videos
4
-layout: community
5
-sectionid: community
6
-permalink: community/videos.html
7
-redirect_from: "docs/videos.html"
8
----
9
-
10
-### Introduction to React
11
-
12
-[Tom Occhino](http://tomocchino.com/) and [Jordan Walke](https://github.com/jordwalke) introduce React at Facebook Seattle.
13
-
14
-<iframe title="Tom Occhino and Jordan Walke introduce React at Facebook Seattle" width="650" height="366" src="https://www.youtube-nocookie.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe>
15
-
16
-### Introducing React Native
17
-
18
-[Tom Occhino](https://twitter.com/tomocchino) reviews the past and present of React in 2015, and teases where it's going next.
19
-
20
-<iframe title="React.js Conf 2015 Keynote - Introducing React Native" width="650" height="366" src="https://www.youtube-nocookie.com/embed/KVZ-P-ZI6W4?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe>
21
-
22
-### Rethinking Web App Development at Facebook
23
-
24
-Delivering reliable, high-performance web experiences at Facebook's scale has required us to challenge some long-held assumptions about software development. Watch this Facebook F8 2014 talk to learn how we abandoned the traditional MVC paradigm in favor of a more functional application architecture.
25
-
26
-<iframe title="Hacker Way: Rethinking Web App Development at Facebook" width="650" height="366" src="https://www.youtube-nocookie.com/embed/nYkdrAPrdcw" frameborder="0" allowfullscreen></iframe>
27
-
28
-### Secrets of the Virtual DOM
29
-
30
-[Pete Hunt](http://www.petehunt.net/) at Mountain West JavaScript 2014 discusses why a virtual DOM was built for React, how it compares to other systems, and its relevance to the future of browser technologies.
31
-
32
-<iframe title="Mountain West JavaScript 2014 - Be Predictable, Not Correct. by Pete Hunt" width="650" height="366" src="https://www.youtube-nocookie.com/embed/h3KksH8gfcQ" frameborder="0" allowfullscreen></iframe>
33
-
34
-### Rethinking Best Practices
35
-
36
-[Pete Hunt](http://www.petehunt.net/)'s talk at JSConf EU 2013 covers three topics: throwing out the notion of templates and building views with JavaScript, “re-rendering” your entire application when your data changes, and a lightweight implementation of the DOM and events.
37
-
38
-<iframe title="Pete Hunt: React: Rethinking Best Practices - JSConf EU 2013" width="650" height="366" src="https://www.youtube-nocookie.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe>
39
-
40
-
41
-### High performance functional DOM programming
42
-
43
-Tech Talk by [Pete Hunt](http://www.petehunt.net/) at Meteor DevShop 11.
44
-
45
-<iframe title="Pete Hunt: High performance functional programming with React and Meteor" width="650" height="366" src="https://www.youtube-nocookie.com/embed/qqVbr_LaCIo" frameborder="0" allowfullscreen></iframe>
46
-
47
-
48
-### Developing User Interfaces With React
49
-
50
-[Steven Luscher](https://github.com/steveluscher) at Super VanJS 2013.
51
-
52
-<iframe title="SuperVanJS 2013: Steven Luscher - Developing User Interfaces with Facebook's React" width="650" height="366" src="https://www.youtube-nocookie.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe>
53
-
54
-
55
-### Introduction to React
56
-
57
-[Stoyan Stefanov](http://www.phpied.com/) at LAWebSpeed meetup.
58
-
59
-<iframe title="Joe Dev on Tech - Stoyan Stefanov - Introduction to React" width="650" height="366" src="https://www.youtube-nocookie.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe>
60
-
61
-### Going big with React
62
-
63
-Areeb Malik investigates how React performs in a high stress situation, and how it helped his team build safe code on a massive scale.
64
-
65
-[](https://skillsmatter.com/skillscasts/5429-going-big-with-react#video)
66
-
67
-### Backbone + React + Middleman Screencast
68
-
69
-This screencast shows how to integrate Backbone with React using [Backbone-React-Component](https://github.com/magalhas/backbone-react-component).
70
-
71
-<iframe title="Backbone React Component with Middleman" width="650" height="488" src="https://www.youtube-nocookie.com/embed/iul1fWHVU6A" frameborder="0" allowfullscreen></iframe>
72
-
73
-### React, or how to make life simpler
74
-
75
-Tech talk by [Alexander Solovyov](http://solovyov.net/) at FrontEnd Dev Conf '14 (Russian).
76
-
77
-<iframe title="Tech talk by Alexander Solovyov at FrontEnd Dev Conf ‘14 (Russian)." width="650" height="366" src="https://www.youtube-nocookie.com/embed/YJNUK0EA_Jo" frameborder="0" allowfullscreen></iframe>
78
-
79
-
80
-### React and Flux: Building Applications with a Unidirectional Data Flow
81
-
82
-Facebook engineers [Bill Fisher](https://twitter.com/fisherwebdev) and [Jing Chen](https://twitter.com/jingc) talk about Flux and React at Forward JS 2014, and how using an application architecture with a unidirectional data flow cleans up a lot of their code.
83
-
84
-<iframe title="React and Flux: Building Applications with a Unidirectional Data Flow" width="650" height="366" src="https://www.youtube-nocookie.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe>
85
-
86
-> [Slides and sample code](https://github.com/zertosh/ssr-demo-kit)
87
-
88
-### CodeWinds Podcast
89
-
90
-[Pete Hunt](http://www.petehunt.net/) talked with [Jeff Barczewski](http://jeff.barczewski.com/) about React in [CodeWinds Episode 4](http://codewinds.com/podcast/004.html).
91
-<figure><a aria-label="link to play Codewinds Podcast episode 4" href="http://codewinds.com/4"><img src="../img/docs/codewinds-004.png"></a></figure>
92
-
93
-<table width="100%">
94
-<tr>
95
-<th>02:08</th><td>What is React and why use it?</td>
96
-<th>27:17</th><td>Rendering HTML on the server with Node.js. Rendering backends</td>
97
-</tr>
98
-<tr>
99
-<th>03:08</th><td>The symbiotic relationship of ClojureScript and React</td>
100
-<th>29:20</th><td>React evolved through survival of the fittest at Facebook</td>
101
-</tr>
102
-<tr>
103
-<th>04:54</th><td>The history of React and why it was created</td>
104
-<th>30:15</th><td>Ideas for having state on server and client, using web sockets.</td>
105
-</tr>
106
-<tr>
107
-<th>09:43</th><td>Updating web page with React without using data binding</td>
108
-<th>32:05</th><td>React-multiuser - distributed shared mutable state using Firebase</td>
109
-</tr>
110
-<tr>
111
-<th>13:11</th><td>Using the virtual DOM to change the browser DOM</td>
112
-<th>33:03</th><td>Better debugging with React using the state transitions, replaying events</td>
113
-</tr>
114
-<tr>
115
-<th>13:57</th><td>Programming with React, render targets HTML, canvas, other</td>
116
-<th>34:08</th><td>Differences from Web Components</td>
117
-</tr>
118
-<tr>
119
-<th>16:45</th><td>Working with designers. Contrasted with Ember and AngularJS</td>
120
-<th>34:25</th><td>Notable companies using React</td>
121
-</tr>
122
-<tr>
123
-<th>21:45</th><td>JSX Compiler bridging HTML and React javascript</td>
124
-<th>35:16</th><td>Could a React backend plugin be created to target PDF?</td>
125
-</tr>
126
-<tr>
127
-<th>23:50</th><td>Autobuilding JSX and in browser tools for React</td>
128
-<th>36:30</th><td>Future of React, what's next?</td>
129
-</tr>
130
-<tr>
131
-<th>24:50</th><td>Tips and tricks to working with React, getting started</td>
132
-<th>39:38</th><td>Contributing and getting help</td>
133
-</tr>
134
-</table>
135
-
136
-### JavaScript Jabber Podcast
137
-
138
-[Pete Hunt](http://www.petehunt.net/) and [Jordan Walke](https://github.com/jordwalke) talked about React in [JavaScript Jabber 73](https://devchat.tv/js-jabber/073-jsj-react-with-pete-hunt-and-jordan-walke).
139
-<figure><a aria-label="link to play JavaScript Jabber Podcast episode 73" href="http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/#content"><img src="../img/docs/javascript-jabber.png"></a></figure>
140
-
141
-<table width="100%">
142
- <tr>
143
- <th>01:34</th><td>Pete Hunt Introduction</td>
144
- <th>23:06</th><td>Supporting Node.js</td>
145
- </tr>
146
- <tr>
147
- <th>02:45</th><td>Jordan Walke Introduction</td>
148
- <th>24:03</th><td>rendr</td>
149
- </tr>
150
- <tr>
151
- <th>04:15</th><td>React</td>
152
- <th>26:02</th><td>JSX</td>
153
- </tr>
154
- <tr>
155
- <th>06:38</th><td>60 Frames Per Second</td>
156
- <th>30:31</th><td>requestAnimationFrame</td>
157
- </tr>
158
- <tr>
159
- <th>09:34</th><td>Data Binding</td>
160
- <th>34:15</th><td>React and Applications</td>
161
- </tr>
162
- <tr>
163
- <th>12:31</th><td>Performance</td>
164
- <th>38:12</th><td>React Users Khan Academy</td>
165
- </tr>
166
- <tr>
167
- <th>17:39</th><td>Diffing Algorithm</td>
168
- <th>39:53</th><td>Making it work</td>
169
- </tr>
170
- <tr>
171
- <th>19:36</th><td>DOM Manipulation</td>
172
- <th></th><td></td>
173
- </tr>
174
-</table>
docs/community/videos.zh-CN.md
deleted
-173
@@ -1,173 +0,0 @@
1
----
2
-id: videos-zh-CN
3
-title: 视频
4
-permalink: docs/videos-zh-CN.html
5
-prev: conferences-zh-CN.html
6
-next: complementary-tools-zh-CN.html
7
----
8
-
9
-### Rethinking best practices - JSConf.eu
10
-
11
-<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe>
12
-
13
-"在 Facebook 和 Instagram, 我们正在努力挑战React在web上能达到的极限。我的讲话会从对框架的简单介绍开始，然后深入三个有争议的话题：扔掉模板的概念并用JavaScript构建views, 当数据改变 “re-rendering” 你的整个应用，以及一个DOM和events的轻量级实现。" -- [Pete Hunt](http://www.petehunt.net/)
14
-
15
-* * *
16
-
17
-### Thinking in react - tagtree.tv
18
-
19
-一个 [tagtree.tv](http://tagtree.tv/) 传达 [Thinking in React](/docs/thinking-in-react.html) 原则的视频 在构建一个简单app时。
20
-<figure><a href="http://tagtree.tv/thinking-in-react"><img src="../img/docs/thinking-in-react-tagtree.png"></a></figure>
21
-
22
-* * *
23
-
24
-### Secrets of the Virtual DOM - MtnWest JS
25
-
26
-<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/h3KksH8gfcQ" frameborder="0" allowfullscreen></iframe>
27
-
28
-"在这次讲座里，我会讨论为什么我们构建了一个虚拟 DOM，它比起其他系统如何，以及它与未来浏览器技术的关系。" -- [Pete Hunt](http://www.petehunt.net/)
29
-
30
-* * *
31
-
32
-### Going big with React
33
-
34
-"理论上，所有的JS框架都大有可为：干净的实现,快速的代码设计,完美的执行。但是当你压力测试时Javascript会怎样？当你丢进6MB的代码时会怎样？在这次演讲中，我们会探究React在高压环境下如何表现，以及它如何帮助我们的团队在大规模时构建安全代码。 "
35
-<figure><a href="https://skillsmatter.com/skillscasts/5429-going-big-with-react#video"><img src="https://i.vimeocdn.com/video/481670116_650.jpg"></a></figure>
36
-
37
-* * *
38
-
39
-### CodeWinds
40
-
41
-[Pete Hunt](http://www.petehunt.net/) 与 [Jeff Barczewski](http://jeff.barczewski.com/) 在 CodeWinds Episode 4 上关于 React 的谈话.
42
-<figure><a href="http://codewinds.com/4"><img src="../img/docs/codewinds-004.png"></a></figure>
43
-
44
-<table width="100%"><tr><td>
45
-02:08 - 什么是React，为什么我们用它?<br />
46
-03:08 - ClojureScript 和 React 的共生关系<br />
47
-04:54 - React 的历史以及为什么它被创造<br />
48
-09:43 - 用React更新Web页面，而不绑定数据<br />
49
-13:11 - 用虚拟DOM来改变浏览器DOM<br />
50
-13:57 - 用React编程，绘制目标HTML，canvas和其他<br />
51
-16:45 - 和设计师一起工作，对比于Ember 和 AngularJS<br />
52
-21:45 - JSX编译器桥接HTML和 React javascript<br />
53
-23:50 - React的自动绑定JSX以及浏览器内工具<br />
54
-24:50 - 用React工作的提示和技巧，入门<br />
55
-</td><td>
56
-27:17 - 在服务器端用Node.js渲染HTML。后端渲染<br />
57
-29:20 - React在Facebook通过优胜劣汰进化<br />
58
-30:15 - 用web sockets，在服务器端和客户端持有状态的想法持有<br />
59
-32:05 - 多用户React - 用 Firebase 分布式共享可变状态<br />
60
-33:03 - 用状态转换，事件重放来更好的调式React<br />
61
-34:08 - 来自Web组件的不同之处<br />
62
-34:25 - 使用React的著名公司<br />
63
-35:16 - 一个React的后端插件可以用来创建PDF吗?<br />
64
-36:30 - React的未来，下一步是什么?<br />
65
-39:38 - 贡献和获得帮助<br />
66
-</td></tr></table>
67
-
68
-[Read the episode notes](http://codewinds.com/4)
69
-
70
-* * *
71
-
72
-### JavaScript Jabber
73
-
74
-[Pete Hunt](http://www.petehunt.net/) 和 [Jordan Walke](https://github.com/jordwalke) 在 JavaScript Jabber 73 上关于React的谈话.
75
-<figure><a href="http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/#content"><img src="../img/docs/javascript-jabber.png"></a></figure>
76
-
77
-<table width="100%"><tr><td>
78
-01:34 – Pete Hunt 介绍<br />
79
-02:45 – Jordan Walke 介绍<br />
80
-04:15 – React<br />
81
-06:38 – 60 帧每秒<br />
82
-09:34 – 数据绑定<br />
83
-12:31 – 性能<br />
84
-17:39 – Diffing 算法<br />
85
-19:36 – DOM 操纵
86
-</td><td>
87
-23:06 – 支持 node.js<br />
88
-24:03 – rendr<br />
89
-26:02 – JSX<br />
90
-30:31 – requestAnimationFrame<br />
91
-34:15 – React 和应用<br />
92
-38:12 – React 用户 Khan Academy<br />
93
-39:53 – 使其工作
94
-</td></tr></table>
95
-
96
-[Read the full transcript](http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/)
97
-
98
-* * *
99
-
100
-### Introduction to React.js - Facebook Seattle
101
-
102
-<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe>
103
-
104
-由 [Tom Occhino](http://tomocchino.com/) 和 [Jordan Walke](https://github.com/jordwalke)
105
-
106
-* * *
107
-
108
-### Backbone + React + Middleman Screencast
109
-<iframe width="650" height="488" src="https://www.youtube-nocookie.com/embed/iul1fWHVU6A" frameborder="0" allowfullscreen></iframe>
110
-
111
-Backbone 是一个在用React实现 REST API 接口的极好方法。这个屏博展示了用 [Backbone-React-Component](https://github.com/magalhas/backbone-react-component)如何整合两者. Middleman 是在本例中使用的框架但很容易被替换成其他框架。对此可支持的template可以在[这里](https://github.com/jbhatab/middleman-backbone-react-template) 找到. -- [Open Minded Innovations](http://www.openmindedinnovations.com/)
112
-
113
-* * *
114
-
115
-### Developing User Interfaces With React - Super VanJS
116
-
117
-<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe>
118
-
119
-来自 [Steven Luscher](https://github.com/steveluscher)
120
-
121
-* * *
122
-
123
-### Introduction to React - LAWebSpeed meetup
124
-
125
-<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe>
126
-
127
-来自 [Stoyan Stefanov](http://www.phpied.com/)
128
-
129
-* * *
130
-
131
-### React, or how to make life simpler - FrontEnd Dev Conf '14
132
-
133
-<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/YJNUK0EA_Jo" frameborder="0" allowfullscreen></iframe>
134
-
135
-**俄语** by [Alexander Solovyov](http://solovyov.net/)
136
-
137
-* * *
138
-
139
-### "Functional DOM programming" - Meteor DevShop 11
140
-
141
-<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/qqVbr_LaCIo" frameborder="0" allowfullscreen></iframe>
142
-
143
-* * *
144
-
145
-### "Rethinking Web App Development at Facebook" - Facebook F8 Conference 2014
146
-
147
-<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/nYkdrAPrdcw" frameborder="0" allowfullscreen></iframe>
148
-
149
-* * *
150
-
151
-### React and Flux: Building Applications with a Unidirectional Data Flow - Forward JS 2014
152
-
153
-<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe>
154
-
155
-Facebook 工程师 [Bill Fisher](https://twitter.com/fisherwebdev) 和 [Jing Chen](https://twitter.com/jingc) 谈论 Flux 和 React, 以及如何使用单向数据流的程序架构清理他们的代码 .
156
-
157
-* * *
158
-
159
-### Server-Side Rendering of Isomorphic Apps at SoundCloud
160
-
161
-<iframe src="https://player.vimeo.com/video/108488724" width="100%" height="365" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
162
-
163
-来自 [Andres Suarez](https://github.com/zertosh) 的演练，关于 [SoundCloud](https://developers.soundcloud.com/blog/) 如何使用 React 和 Flux 在服务器端渲染.
164
-
165
-[幻灯片和示例代码](https://github.com/zertosh/ssr-demo-kit)
166
-
167
-* * *
168
-
169
-### Introducing React Native (+Playlist) - React.js Conf 2015
170
-
171
-<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/KVZ-P-ZI6W4?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe>
172
-
173
-[Tom Occhino](https://twitter.com/tomocchino) 回顾了React的过去和现在，在2015年。梳理了下一步要做什么。
docs/contributing/codebase-overview.md
deleted
-404
@@ -1,404 +0,0 @@
1
----
2
-id: codebase-overview
3
-title: Codebase Overview
4
-layout: contributing
5
-permalink: contributing/codebase-overview.html
6
-prev: how-to-contribute.html
7
-next: implementation-notes.html
8
----
9
-
10
-This section will give you an overview of the React codebase organization, its conventions, and the implementation.
11
-
12
-If you want to [contribute to React](/contributing/how-to-contribute.html) we hope that this guide will help you feel more comfortable making changes.
13
-
14
-We don't necessarily recommend any of these conventions in React apps. Many of them exist for historical reasons and might change with time.
15
-
16
-### Custom Module System
17
-
18
-At Facebook, internally we use a custom module system called "Haste". It is similar to [CommonJS](https://nodejs.org/docs/latest/api/modules.html) and also uses `require()` but has a few important differences that often confuse outside contributors.
19
-
20
-In CommonJS, when you import a module, you need to specify its relative path:
21
-
22
-```js
23
-// Importing from the same folder:
24
-var setInnerHTML = require('./setInnerHTML');
25
-
26
-// Importing from a different folder:
27
-var setInnerHTML = require('../utils/setInnerHTML');
28
-
29
-// Importing from a deeply nested folder:
30
-var setInnerHTML = require('../client/utils/setInnerHTML');
31
-```
32
-
33
-However, with Haste **all filenames are globally unique.** In the React codebase, you can import any module from any other module by its name alone:
34
-
35
-```js
36
-var setInnerHTML = require('setInnerHTML');
37
-```
38
-
39
-Haste was originally developed for giant apps like Facebook. It's easy to move files to different folders and import them without worrying about relative paths. The fuzzy file search in any editor always takes you to the correct place thanks to globally unique names.
40
-
41
-React itself was extracted from Facebook's codebase and uses Haste for historical reasons. In the future, we will probably [migrate React to use CommonJS or ES Modules](https://github.com/facebook/react/issues/6336) to be more aligned with the community. However, this requires changes in Facebook's internal infrastructure so it is unlikely to happen very soon.
42
-
43
-**Haste will make more sense to you if you remember a few rules:**
44
-
45
-* All filenames in the React source code are unique. This is why they're sometimes verbose.
46
-* When you add a new file, make sure you include a [license header](https://github.com/facebook/react/blob/87724bd87506325fcaf2648c70fc1f43411a87be/src/renderers/dom/client/utils/setInnerHTML.js#L1-L10). You can copy it from any existing file. A license header always includes [a line like this](https://github.com/facebook/react/blob/87724bd87506325fcaf2648c70fc1f43411a87be/src/renderers/dom/client/utils/setInnerHTML.js#L9). Change it to match the name of the file you created.
47
-* Don’t use relative paths when importing. Instead of `require('./setInnerHTML')`, write `require('setInnerHTML')`.
48
-
49
-When we compile React for npm, a script copies all the modules into [a single flat directory called `lib`](https://unpkg.com/react@15/lib/) and prepends all `require()` paths with `./`. This way Node, Browserify, webpack, and other tools can understand React build output without being aware of Haste.
50
-
51
-**If you're reading React source on GitHub and want to jump to a file, press "t".**
52
-
53
-This is a GitHub shortcut for searching the current repo for fuzzy filename matches. Start typing the name of the file you are looking for, and it will show up as the first match.
54
-
55
-### External Dependencies
56
-
57
-React has almost no external dependencies. Usually, a `require()` points to a file in React's own codebase. However, there are a few relatively rare exceptions.
58
-
59
-If you see a `require()` that does not correspond to a file in the React repository, you can look in a special repository called [fbjs](https://github.com/facebook/fbjs). For example, `require('warning')` will resolve to the [`warning` module from fbjs](https://github.com/facebook/fbjs/blob/df9047fec0bbd1e64635ae369c045975777cba7c/packages/fbjs/src/__forks__/warning.js).
60
-
61
-The [fbjs repository](https://github.com/facebook/fbjs) exists because React shares some small utilities with libraries like [Relay](https://github.com/facebook/relay), and we keep them in sync. We don't depend on equivalent small modules in the Node ecosystem because we want Facebook engineers to be able to make changes to them whenever necessary. None of the utilities inside fbjs are considered to be public API, and they are only intended for use by Facebook projects such as React.
62
-
63
-### Top-Level Folders
64
-
65
-After cloning the [React repository](https://github.com/facebook/react), you will see a few top-level folders in it:
66
-
67
-* [`src`](https://github.com/facebook/react/tree/master/src) is the source code of React. **If your change is related to the code, `src` is where you'll spend most of your time.**
68
-* [`docs`](https://github.com/facebook/react/tree/master/docs) is the React documentation website. When you change APIs, make sure to update the relevant Markdown files.
69
-* [`fixtures`](https://github.com/facebook/react/tree/master/fixtures) contains a few small React test applications for contributors.
70
-* [`packages`](https://github.com/facebook/react/tree/master/packages) contains metadata (such as `package.json`) for all packages in the React repository. Nevertheless, their source code is still located inside [`src`](https://github.com/facebook/react/tree/master/src).
71
-* `build` is the build output of React. It is not in the repository but it will appear in your React clone after you [build it](/contributing/how-to-contribute.html#development-workflow) for the first time.
72
-
73
-There are a few other top-level folders but they are mostly used for the tooling and you likely won't ever encounter them when contributing.
74
-
75
-### Colocated Tests
76
-
77
-We don't have a top-level directory for unit tests. Instead, we put them into a directory called `__tests__` relative to the files that they test.
78
-
79
-For example, a test for [`setInnerHTML.js`](https://github.com/facebook/react/blob/87724bd87506325fcaf2648c70fc1f43411a87be/src/renderers/dom/client/utils/setInnerHTML.js) is located in [`__tests__/setInnerHTML-test.js`](https://github.com/facebook/react/blob/87724bd87506325fcaf2648c70fc1f43411a87be/src/renderers/dom/client/utils/__tests__/setInnerHTML-test.js) right next to it.
80
-
81
-### Shared Code
82
-
83
-Even though Haste allows us to import any module from anywhere in the repository, we follow a convention to avoid cyclic dependencies and other unpleasant surprises. By convention, a file may only import files in the same folder or in subfolders below.
84
-
85
-For example, files inside [`src/renderers/dom/stack/client`](https://github.com/facebook/react/blob/f53854424b33692907234fe7a1f80b888fd80751/src/renderers/dom/stack/client) may import other files in the same folder or any folder below.
86
-
87
-However they can't import modules from [`src/renderers/dom/stack/server`](https://github.com/facebook/react/blob/f53854424b33692907234fe7a1f80b888fd80751/src/renderers/dom/stack/server) because it is not a child directory of [`src/renderers/dom/stack/client`](https://github.com/facebook/react/blob/f53854424b33692907234fe7a1f80b888fd80751/src/renderers/dom/stack/client).
88
-
89
-There is an exception to this rule. Sometimes we *do* need to share functionality between two groups of modules. In this case, we hoist the shared module up to a folder called `shared` inside the closest common ancestor folder of the modules that need to rely on it.
90
-
91
-For example, code shared between [`src/renderers/dom/stack/client`](https://github.com/facebook/react/blob/f53854424b33692907234fe7a1f80b888fd80751/src/renderers/dom/stack/client) and [`src/renderers/dom/stack/server`](https://github.com/facebook/react/blob/f53854424b33692907234fe7a1f80b888fd80751/src/renderers/dom/stack/server) lives in [`src/renderers/dom/shared`](https://github.com/facebook/react/blob/f53854424b33692907234fe7a1f80b888fd80751/src/renderers/dom/shared).
92
-
93
-By the same logic, if [`src/renderers/dom/stack/client`](https://github.com/facebook/react/blob/f53854424b33692907234fe7a1f80b888fd80751/src/renderers/dom/stack/client) needs to share a utility with something in [`src/renderers/native`](https://github.com/facebook/react/blob/f53854424b33692907234fe7a1f80b888fd80751/src/renderers/native), this utility would be in [`src/renderers/shared`](https://github.com/facebook/react/blob/f53854424b33692907234fe7a1f80b888fd80751/src/renderers/shared).
94
-
95
-This convention is not enforced but we check for it during a pull request review.
96
-
97
-### Warnings and Invariants
98
-
99
-The React codebase uses the `warning` module to display warnings:
100
-
101
-```js
102
-var warning = require('warning');
103
-
104
-warning(
105
- 2 + 2 === 4,
106
- 'Math is not working today.'
107
-);
108
-```
109
-
110
-**The warning is shown when the `warning` condition is `false`.**
111
-
112
-One way to think about it is that the condition should reflect the normal situation rather than the exceptional one.
113
-
114
-It is a good idea to avoid spamming the console with duplicate warnings:
115
-
116
-```js
117
-var warning = require('warning');
118
-
119
-var didWarnAboutMath = false;
120
-if (!didWarnAboutMath) {
121
- warning(
122
- 2 + 2 === 4,
123
- 'Math is not working today.'
124
- );
125
- didWarnAboutMath = true;
126
-}
127
-```
128
-
129
-Warnings are only enabled in development. In production, they are completely stripped out. If you need to forbid some code path from executing, use `invariant` module instead:
130
-
131
-```js
132
-var invariant = require('invariant');
133
-
134
-invariant(
135
- 2 + 2 === 4,
136
- 'You shall not pass!'
137
-);
138
-```
139
-
140
-**The invariant is thrown when the `invariant` condition is `false`.**
141
-
142
-"Invariant" is just a way of saying "this condition always holds true". You can think about it as making an assertion.
143
-
144
-It is important to keep development and production behavior similar, so `invariant` throws both in development and in production. The error messages are automatically replaced with error codes in production to avoid negatively affecting the byte size.
145
-
146
-### Development and Production
147
-
148
-You can use `__DEV__` pseudo-global variable in the codebase to guard development-only blocks of code.
149
-
150
-It is inlined during the compile step, and turns into `process.env.NODE_ENV !== 'production'` checks in the CommonJS builds.
151
-
152
-For standalone builds, it becomes `true` in the unminified build, and gets completely stripped out with the `if` blocks it guards in the minified build.
153
-
154
-```js
155
-if (__DEV__) {
156
- // This code will only run in development.
157
-}
158
-```
159
-
160
-### JSDoc
161
-
162
-Some of the internal and public methods are annotated with [JSDoc annotations](http://usejsdoc.org/):
163
-
164
-```js
165
-/**
166
- * Updates this component by updating the text content.
167
- *
168
- * @param {ReactText} nextText The next text content
169
- * @param {ReactReconcileTransaction} transaction
170
- * @internal
171
- */
172
-receiveComponent: function(nextText, transaction) {
173
- // ...
174
-},
175
-```
176
-
177
-We try to keep existing annotations up-to-date but we don't enforce them. We don't use JSDoc in the newly written code, and instead use Flow to document and enforce types.
178
-
179
-### Flow
180
-
181
-We recently started introducing [Flow](https://flowtype.org/) checks to the codebase. Files marked with the `@flow` annotation in the license header comment are being typechecked.
182
-
183
-We accept pull requests [adding Flow annotations to existing code](https://github.com/facebook/react/pull/7600/files). Flow annotations look like this:
184
-
185
-```js
186
-ReactRef.detachRefs = function(
187
- instance: ReactInstance,
188
- element: ReactElement | string | number | null | false,
189
-): void {
190
- // ...
191
-}
192
-```
193
-
194
-When possible, new code should use Flow annotations.
195
-You can run `npm run flow` locally to check your code with Flow.
196
-
197
-### Classes and Mixins
198
-
199
-React was originally written in ES5. We have since enabled ES6 features with [Babel](http://babeljs.io/), including classes. However, most of React code is still written in ES5.
200
-
201
-In particular, you might see the following pattern quite often:
202
-
203
-```js
204
-// Constructor
205
-function ReactDOMComponent(element) {
206
- this._currentElement = element;
207
-}
208
-
209
-// Methods
210
-ReactDOMComponent.Mixin = {
211
- mountComponent: function() {
212
- // ...
213
- }
214
-};
215
-
216
-// Put methods on the prototype
217
-Object.assign(
218
- ReactDOMComponent.prototype,
219
- ReactDOMComponent.Mixin
220
-);
221
-
222
-module.exports = ReactDOMComponent;
223
-```
224
-
225
-The `Mixin` in this code has no relation to React `mixins` feature. It is just a way of grouping a few methods under an object. Those methods may later get attached to some other class. We use this pattern in a few places although we try to avoid it in the new code.
226
-
227
-The equivalent code in ES6 would look like this:
228
-
229
-```js
230
-class ReactDOMComponent {
231
- constructor(element) {
232
- this._currentElement = element;
233
- }
234
-
235
- mountComponent() {
236
- // ...
237
- }
238
-}
239
-
240
-module.exports = ReactDOMComponent;
241
-```
242
-
243
-Sometimes we [convert old code to ES6 classes](https://github.com/facebook/react/pull/7647/files). However, this is not very important to us because there is an [ongoing effort](#fiber-reconciler) to replace the React reconciler implementation with a less object-oriented approach which wouldn't use classes at all.
244
-
245
-### Dynamic Injection
246
-
247
-React uses dynamic injection in some modules. While it is always explicit, it is still unfortunate because it hinders understanding of the code. The main reason it exists is because React originally only supported DOM as a target. React Native started as a React fork. We had to add dynamic injection to let React Native override some behaviors.
248
-
249
-You may see modules declaring their dynamic dependencies like this:
250
-
251
-```js
252
-// Dynamically injected
253
-var textComponentClass = null;
254
-
255
-// Relies on dynamically injected value
256
-function createInstanceForText(text) {
257
- return new textComponentClass(text);
258
-}
259
-
260
-var ReactHostComponent = {
261
- createInstanceForText,
262
-
263
- // Provides an opportunity for dynamic injection
264
- injection: {
265
- injectTextComponentClass: function(componentClass) {
266
- textComponentClass = componentClass;
267
- },
268
- },
269
-};
270
-
271
-module.exports = ReactHostComponent;
272
-```
273
-
274
-The `injection` field is not handled specially in any way. But by convention, it means that this module wants to have some (presumably platform-specific) dependencies injected into it at runtime.
275
-
276
-In React DOM, [`ReactDefaultInjection`](https://github.com/facebook/react/blob/4f345e021a6bd9105f09f3aee6d8762eaa9db3ec/src/renderers/dom/shared/ReactDefaultInjection.js) injects a DOM-specific implementation:
277
-
278
-```js
279
-ReactHostComponent.injection.injectTextComponentClass(ReactDOMTextComponent);
280
-```
281
-
282
-In React Native, [`ReactNativeDefaultInjection`](https://github.com/facebook/react/blob/4f345e021a6bd9105f09f3aee6d8762eaa9db3ec/src/renderers/native/ReactNativeDefaultInjection.js) injects its own implementation:
283
-
284
-```js
285
-ReactHostComponent.injection.injectTextComponentClass(ReactNativeTextComponent);
286
-```
287
-
288
-There are multiple injection points in the codebase. In the future, we intend to get rid of the dynamic injection mechanism and wire up all the pieces statically during the build.
289
-
290
-### Multiple Packages
291
-
292
-React is a [monorepo](http://danluu.com/monorepo/). Its repository contains multiple separate packages so that their changes can be coordinated together, and documentation and issues live in one place.
293
-
294
-The npm metadata such as `package.json` files is located in the [`packages`](https://github.com/facebook/react/tree/master/packages) top-level folder. However, there is almost no real code in it.
295
-
296
-For example, [`packages/react/react.js`](https://github.com/facebook/react/blob/87724bd87506325fcaf2648c70fc1f43411a87be/packages/react/react.js) re-exports [`src/isomorphic/React.js`](https://github.com/facebook/react/blob/87724bd87506325fcaf2648c70fc1f43411a87be/src/isomorphic/React.js), the real npm entry point. Other packages mostly repeat this pattern. All the important code lives in [`src`](https://github.com/facebook/react/tree/master/src).
297
-
298
-While the code is separated in the source tree, the exact package boundaries are slightly different for npm packages and standalone browser builds.
299
-
300
-### React Core
301
-
302
-The "core" of React includes all the [top-level `React` APIs](/docs/top-level-api.html#react), for example:
303
-
304
-* `React.createElement()`
305
-* `React.Component`
306
-* `React.Children`
307
-
308
-**React core only includes the APIs necessary to define components.** It does not include the [reconciliation](/docs/reconciliation.html) algorithm or any platform-specific code. It is used both by React DOM and React Native components.
309
-
310
-The code for React core is located in [`src/isomorphic`](https://github.com/facebook/react/tree/master/src/isomorphic) in the source tree. It is available on npm as the [`react`](https://www.npmjs.com/package/react) package. The corresponding standalone browser build is called `react.js`, and it exports a global called `React`.
311
-
312
->**Note:**
313
->
314
->Until very recently, `react` npm package and `react.js` standalone build contained all React code (including React DOM) rather than just the core. This was done for backward compatibility and historical reasons. Since React 15.4.0, the core is better separated in the build output.
315
->
316
->There is also an additional standalone browser build called `react-with-addons.js` which we will consider separately further below.
317
-
318
-### Renderers
319
-
320
-React was originally created for the DOM but it was later adapted to also support native platforms with [React Native](http://facebook.github.io/react-native/). This introduced the concept of "renderers" to React internals.
321
-
322
-**Renderers manage how a React tree turns into the underlying platform calls.**
323
-
324
-Renderers are located in [`src/renderers`](https://github.com/facebook/react/tree/master/src/renderers/):
325
-
326
-* [React DOM Renderer](https://github.com/facebook/react/tree/master/src/renderers/dom) renders React components to the DOM. It implements [top-level `ReactDOM` APIs](/docs/top-level-api.html#reactdom) and is available as [`react-dom`](https://www.npmjs.com/package/react-dom) npm package. It can also be used as standalone browser bundle called `react-dom.js` that exports a `ReactDOM` global.
327
-* [React Native Renderer](https://github.com/facebook/react/tree/master/src/renderers/native) renders React components to native views. It is used internally by React Native via [`react-native-renderer`](https://www.npmjs.com/package/react-native-renderer) npm package. In the future a copy of it may get checked into the React Native [repository](https://github.com/facebook/react-native) so that React Native can update React at its own pace.
328
-* [React Test Renderer](https://github.com/facebook/react/tree/master/src/renderers/testing) renders React components to JSON trees. It is used by the [Snapshot Testing](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html) feature of [Jest](https://facebook.github.io/jest) and is available as [react-test-renderer](https://www.npmjs.com/package/react-test-renderer) npm package.
329
-
330
-The only other officially supported renderer is [`react-art`](https://github.com/reactjs/react-art). To avoid accidentally breaking it as we make changes to React, we checked it in as [`src/renderers/art`](https://github.com/facebook/react/tree/master/src/renderers/art) and run its test suite. Nevertheless, its [GitHub repository](https://github.com/reactjs/react-art) still acts as the source of truth.
331
-
332
-While it is [technically possible](https://github.com/iamdustan/tiny-react-renderer) to create custom React renderers, this is currently not officially supported. There is no stable public contract for custom renderers yet which is another reason why we keep them all in a single place.
333
-
334
->**Note:**
335
->
336
->Technically the [`native`](https://github.com/facebook/react/tree/master/src/renderers/native) renderer is a very thin layer that teaches React to interact with React Native implementation. The real platform-specific code managing the native views lives in the [React Native repository](https://github.com/facebook/react-native) together with its components.
337
-
338
-### Reconcilers
339
-
340
-Even vastly different renderers like React DOM and React Native need to share a lot of logic. In particular, the [reconciliation](/docs/reconciliation.html) algorithm should be as similar as possible so that declarative rendering, custom components, state, lifecycle methods, and refs work consistently across platforms.
341
-
342
-To solve this, different renderers share some code between them. We call this part of React a "reconciler". When an update such as `setState()` is scheduled, the reconciler calls `render()` on components in the tree and mounts, updates, or unmounts them.
343
-
344
-Reconcilers are not packaged separately because they currently have no public API. Instead, they are exclusively used by renderers such as React DOM and React Native.
345
-
346
-### Stack Reconciler
347
-
348
-The "stack" reconciler is the one powering all React production code today. It is located in [`src/renderers/shared/stack/reconciler`](https://github.com/facebook/react/tree/master/src/renderers/shared/stack) and is used by both React DOM and React Native.
349
-
350
-It is written in an [object-oriented way](https://en.wikipedia.org/wiki/Composite_pattern) and maintains a separate tree of "internal instances" for all React components. The internal instances exist both for user-defined ("composite") and platform-specific ("host") components. The internal instances are inaccessible directly to the user, and their tree is never exposed.
351
-
352
-When a component mounts, updates, or unmounts, the stack reconciler calls a method on that internal instance. The methods are called `mountComponent(element)`, `receiveComponent(nextElement)`, and `unmountComponent(element)`.
353
-
354
-#### Host Components
355
-
356
-Platform-specific ("host") components, such as `<div>` or a `<View>`, run platform-specific code. For example, React DOM instructs the stack reconciler to use [`ReactDOMComponent`](https://github.com/facebook/react/blob/87724bd87506325fcaf2648c70fc1f43411a87be/src/renderers/dom/shared/ReactDOMComponent.js) to handle [mounting](https://github.com/facebook/react/blob/87724bd87506325fcaf2648c70fc1f43411a87be/src/renderers/dom/shared/ReactDOMComponent.js#L517), [updates](https://github.com/facebook/react/blob/87724bd87506325fcaf2648c70fc1f43411a87be/src/renderers/dom/shared/ReactDOMComponent.js#L865), and [unmounting](https://github.com/facebook/react/blob/87724bd87506325fcaf2648c70fc1f43411a87be/src/renderers/dom/shared/ReactDOMComponent.js#L1140) of DOM components.
357
-
358
-Regardless of the platform, both `<div>` and `<View>` handle managing multiple children in a similar way. For convenience, the stack reconciler provides a helper called [`ReactMultiChild`](https://github.com/facebook/react/blob/87724bd87506325fcaf2648c70fc1f43411a87be/src/renderers/shared/stack/reconciler/ReactMultiChild.js) that both DOM and Native renderers [use](https://github.com/facebook/react/blob/87724bd87506325fcaf2648c70fc1f43411a87be/src/renderers/dom/shared/ReactDOMComponent.js#L1203).
359
-
360
-#### Composite Components
361
-
362
-User-defined ("composite") components should behave the same way with all renderers. This is why the stack reconciler provides a shared implementation in [`ReactCompositeComponent`](https://github.com/facebook/react/blob/87724bd87506325fcaf2648c70fc1f43411a87be/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js). It is always the same regardless of the renderer.
363
-
364
-Composite components also implement [mounting](https://github.com/facebook/react/blob/87724bd87506325fcaf2648c70fc1f43411a87be/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js#L181), [updating](https://github.com/facebook/react/blob/87724bd87506325fcaf2648c70fc1f43411a87be/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js#L703), and [unmounting](https://github.com/facebook/react/blob/87724bd87506325fcaf2648c70fc1f43411a87be/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js#L524). However, unlike host components, `ReactCompositeComponent` needs to behave differently depending on the user's code. This is why it calls methods, such as `render()` and `componentDidMount()`, on the user-supplied class.
365
-
366
-During an update, `ReactCompositeComponent` checks whether the `render()` output has a different `type` or `key` than the last time. If neither `type` nor `key` has changed, it delegates the update to the existing child internal instance. Otherwise, it unmounts the old child instance and mounts a new one. This is described in the [reconciliation algorithm](/docs/reconciliation.html).
367
-
368
-#### Recursion
369
-
370
-During an update, the stack reconciler "drills down" through composite components, runs their `render()` methods, and decides whether to update or replace their single child instance. It executes platform-specific code as it passes through the host components like `<div>` and `<View>`. Host components may have multiple children which are also processed recursively.
371
-
372
-It is important to understand that the stack reconciler always processes the component tree synchronously in a single pass. While individual tree branches may [bail out of reconciliation](/docs/advanced-performance.html#avoiding-reconciling-the-dom), the stack reconciler can't pause, and so it is suboptimal when the updates are deep and the available CPU time is limited.
373
-
374
-#### Learn More
375
-
376
-**The [next section](/contributing/implementation-notes.html) describes the current implementation in more details.**
377
-
378
-### Fiber Reconciler
379
-
380
-The "fiber" reconciler is a new effort aiming to resolve the problems inherent in the stack reconciler and fix a few long-standing issues.
381
-
382
-It is a complete rewrite of the reconciler and is currently [in active development](https://github.com/facebook/react/pulls?utf8=✓&q=is:pr+is:open+fiber).
383
-
384
-Its main goals are:
385
-
386
-* Ability to split interruptible work in chunks.
387
-* Ability to prioritize, rebase and reuse work in progress.
388
-* Ability to yield back and forth between parents and children to support layout in React.
389
-* Ability to return multiple elements from `render()`.
390
-* Better support for error boundaries.
391
-
392
-You can read more about it in [React Fiber Architecture](https://github.com/acdlite/react-fiber-architecture). At this moment, it is still very experimental, and far from feature parity with the stack reconciler.
393
-
394
-Its source code is located in [`src/renderers/shared/fiber`](https://github.com/facebook/react/tree/master/src/renderers/shared/fiber).
395
-
396
-### Event System
397
-
398
-React implements a synthetic event system which is agnostic of the renderers and works both with React DOM and React Native. Its source code is located in [`src/renderers/shared/shared/event`](https://github.com/facebook/react/tree/master/src/renderers/shared/shared/event).
399
-
400
-There is a [video with a deep code dive into it](https://www.youtube.com/watch?v=dRo_egw7tBc) (66 mins).
401
-
402
-### What Next?
403
-
404
-Read the [next section](/contributing/implementation-notes.html) to learn about the current implementation of reconciler in more detail.
docs/contributing/design-principles.md
deleted
-161
@@ -1,161 +0,0 @@
1
----
2
-id: design-principles
3
-title: Design Principles
4
-layout: contributing
5
-permalink: contributing/design-principles.html
6
-prev: implementation-notes.html
7
----
8
-
9
-We wrote this document so that you have a better idea of how we decide what React does and what React doesn't do, and what our development philosophy is like. While we are excited to see community contributions, we are not likely to choose a path that violates one or more of these principles.
10
-
11
->**Note:**
12
->
13
->This document assumes a strong understanding of React. It describes the design principles of *React itself*, not React components or applications.
14
->
15
->For an introduction to React, check out [Thinking in React](/docs/thinking-in-react.html) instead.
16
-
17
-### Composition
18
-
19
-The key feature of React is composition of components. Components written by different people should work well together. It is important to us that you can add functionality to a component without causing rippling changes throughout the codebase.
20
-
21
-For example, it should be possible to introduce some local state into a component without changing any of the components using it. Similarly, it should be possible to add some initialization and teardown code to any component when necessary.
22
-
23
-There is nothing "bad" about using state or lifecycle hooks in components. Like any powerful feature, they should be used in moderation, but we have no intention to remove them. On the contrary, we think they are integral parts of what makes React useful. We might enable [more functional patterns](https://github.com/reactjs/react-future/tree/master/07%20-%20Returning%20State) in the future, but both local state and lifecycle hooks will be a part of that model.
24
-
25
-Components are often described as "just functions" but in our view they need to be more than that to be useful. In React, components describe any composable behavior, and this includes rendering, lifecycle, and state. Some external libraries like [Relay](http://facebook.github.io/relay/) augment components with other responsibilities such as describing data dependencies. It is possible that those ideas might make it back into React too in some form.
26
-
27
-### Common Abstraction
28
-
29
-In general we [resist adding features](https://www.youtube.com/watch?v=4anAwXYqLG8) that can be implemented in userland. We don't want to bloat your apps with useless library code. However, there are exceptions to this.
30
-
31
-For example, if React didn't provide support for local state or lifecycle hooks, people would create custom abstractions for them. When there are multiple abstractions competing, React can't enforce or take advantage of the properties of either of them. It has to work with the lowest common denominator.
32
-
33
-This is why sometimes we add features to React itself. If we notice that many components implement a certain feature in incompatible or inefficient ways, we might prefer to bake it into React. We don't do it lightly. When we do it, it's because we are confident that raising the abstraction level benefits the whole ecosystem. State, lifecycle hooks, cross-browser event normalization are good examples of this.
34
-
35
-We always discuss such improvement proposals with the community. You can find some of those discussions by the ["big picture"](https://github.com/facebook/react/issues?q=is:open+is:issue+label:"big+picture") label on the React issue tracker.
36
-
37
-### Escape Hatches
38
-
39
-React is pragmatic. It is driven by the needs of the products written at Facebook. While it is influenced by some paradigms that are not yet fully mainstream such as functional programming, staying accessible to a wide range of developers with different skills and experience levels is an explicit goal of the project.
40
-
41
-If we want to deprecate a pattern that we don't like, it is our responsibility to consider all existing use cases for it and [educate the community about the alternatives](/blog/2016/07/13/mixins-considered-harmful.html) before we deprecate it. If some pattern that is useful for building apps is hard to express in a declarative way, we will [provide an imperative API](/docs/more-about-refs.html) for it. If we can't figure out a perfect API for something that we found necessary in many apps, we will [provide a temporary subpar working API](/docs/context.html) as long as it is possible to get rid of it later and it leaves the door open for future improvements.
42
-
43
-### Stability
44
-
45
-We value API stability. At Facebook, we have more than 20 thousand components using React. Many other companies, including [Twitter](https://twitter.com/) and [Airbnb](https://www.airbnb.com/), are also heavy users of React. This is why we are usually reluctant to change public APIs or behavior.
46
-
47
-However we think stability in the sense of "nothing changes" is overrated. It quickly turns into stagnation. Instead, we prefer the stability in the sense of "It is heavily used in production, and when something changes, there is a clear (and preferably automated) migration path."
48
-
49
-When we deprecate a pattern, we study its internal usage at Facebook and add deprecation warnings. They let us assess the impact of the change. Sometimes we back out if we see that it is too early, and we need to think more strategically about getting the codebases to the point where they are ready for this change.
50
-
51
-If we are confident that the change is not too disruptive and the migration strategy is viable for all use cases, we release the deprecation warning to the open source community. We are closely in touch with many users of React outside of Facebook, and we monitor popular open source projects and guide them in fixing those deprecations.
52
-
53
-Given the sheer size of the Facebook React codebase, successful internal migration is often a good indicator that other companies won't have problems either. Nevertheless sometimes people point out additional use cases we haven't thought of, and we add escape hatches for them or rethink our approach.
54
-
55
-We don't deprecate anything without a good reason. We recognize that sometimes deprecations warnings cause frustration but we add them because deprecations clean up the road for the improvements and new features that we and many people in the community consider valuable.
56
-
57
-For example, we added a [warning about unknown DOM props](/warnings/unknown-prop.html) in React 15.2.0. Many projects were affected by this. However fixing this warning is important so that we can introduce the support for [custom attributes](https://github.com/facebook/react/issues/140) to React. There is a reason like this behind every deprecation that we add.
58
-
59
-When we add a deprecation warning, we keep it for the rest of the current major version, and [change the behavior in the next major version](/blog/2016/02/19/new-versioning-scheme.html). If there is a lot of repetitive manual work involved, we release a [codemod](https://www.youtube.com/watch?v=d0pOgY8__JM) script that automates most of the change. Codemods enable us to move forward without stagnation in a massive codebase, and we encourage you to use them as well.
60
-
61
-You can find the codemods that we released in the [react-codemod](https://github.com/reactjs/react-codemod) repository.
62
-
63
-### Interoperability
64
-
65
-We place high value in interoperability with existing systems and gradual adoption. Facebook has a massive non-React codebase. Its website uses a mix of a server-side component system called XHP, internal UI libraries that came before React, and React itself. It is important to us that any product team can [start using React for a small feature](https://www.youtube.com/watch?v=BF58ZJ1ZQxY) rather than rewrite their code to bet on it.
66
-
67
-This is why React provides escape hatches to work with mutable models, and tries to work well together with other UI libraries. You can wrap an existing imperative UI into a declarative component, and vice versa. This is crucial for gradual adoption.
68
-
69
-### Scheduling
70
-
71
-Even when your components are described as functions, when you use React you don't call them directly. Every component returns a [description of what needs to be rendered](/blog/2015/12/18/react-components-elements-and-instances.html#elements-describe-the-tree), and that description may include both user-written components like `<LikeButton>` and platform-specific components like `<div>`. It is up to React to "unroll" `<LikeButton>` at some point in the future and actually apply changes to the UI tree according to the render results of the components recursively.
72
-
73
-This is a subtle distinction but a powerful one. Since you don't call that component function but let React call it, it means React has the power to delay calling it if necessary. In its current implementation React walks the tree recursively and calls render functions of the whole updated tree during a single tick. However in the future it might start [delaying some updates to avoid dropping frames](https://github.com/facebook/react/issues/6170).
74
-
75
-This is a common theme in React design. Some popular libraries implement the "push" approach where computations are performed when the new data is available. React, however, sticks to the "pull" approach where computations can be delayed until necessary.
76
-
77
-React is not a generic data processing library. It is a library for building user interfaces. We think that it is uniquely positioned in an app to know which computations are relevant right now and which are not.
78
-
79
-If something is offscreen, we can delay any logic related to it. If data is arriving faster than the frame rate, we can coalesce and batch updates. We can prioritize work coming from user interactions (such as an animation caused by a button click) over less important background work (such as rendering new content just loaded from the network) to avoid dropping frames.
80
-
81
-To be clear, we are not taking advantage of this right now. However the freedom to do something like this is why we prefer to have control over scheduling, and why `setState()` is asynchronous. Conceptually, we think of it as "scheduling an update".
82
-
83
-The control over scheduling would be harder for us to gain if we let the user directly compose views with a "push" based paradigm common in some variations of [Functional Reactive Programming](https://en.wikipedia.org/wiki/Functional_reactive_programming). We want to own the "glue" code.
84
-
85
-It is a key goal for React that the amount of the user code that executes before yielding back into React is minimal. This ensures that React retains the capability to schedule and split work in chunks according to what it knows about the UI.
86
-
87
-There is an internal joke in the team that React should have been called "Schedule" because React does not want to be fully "reactive".
88
-
89
-### Developer Experience
90
-
91
-Providing a good developer experience is important to us.
92
-
93
-For example, we maintain [React DevTools](https://github.com/facebook/react-devtools) which let you inspect the React component tree in Chrome and Firefox. We have heard that it brings a big productivity boost both to the Facebook engineers and to the community.
94
-
95
-We also try to go an extra mile to provide helpful developer warnings. For example, React warns you in development if you nest tags in a way that the browser doesn't understand, or if you make a common typo in the API. Developer warnings and the related checks are the main reason why the development version of React is slower than the production version.
96
-
97
-The usage patterns that we see internally at Facebook help us understand what the common mistakes are, and how to prevent them early. When we add new features, we try to anticipate the common mistakes and warn about them.
98
-
99
-We are always looking out for ways to improve the developer experience. We love to hear your suggestions and accept your contributions to make it even better.
100
-
101
-### Debugging
102
-
103
-When something goes wrong, it is important that you have breadcrumbs to trace the mistake to its source in the codebase. In React, props and state are those breadcrumbs.
104
-
105
-If you see something wrong on the screen, you can open React DevTools, find the component responsible for rendering, and then see if the props and state are correct. If they are, you know that the problem is in the component’s `render()` function, or some function that is called by `render()`. The problem is isolated.
106
-
107
-If the state is wrong, you know that the problem is caused by one of the `setState()` calls in this file. This, too, is relatively simple to locate and fix because usually there are only a few `setState()` calls in a single file.
108
-
109
-If the props are wrong, you can traverse the tree up in the inspector, looking for the component that first "poisoned the well" by passing bad props down.
110
-
111
-This ability to trace any UI to the data that produced it in the form of current props and state is very important to React. It is an explicit design goal that state is not "trapped" in closures and combinators, and is available to React directly.
112
-
113
-While the UI is dynamic, we believe that synchronous `render()` functions of props and state turn debugging from guesswork into a boring but finite procedure. We would like to preserve this constraint in React even though it makes some use cases, like complex animations, harder.
114
-
115
-### Configuration
116
-
117
-We find global runtime configuration options to be problematic.
118
-
119
-For example, it is occasionally requested that we implement a function like `React.configure(options)` or `React.register(component)`. However this poses multiple problems, and we are not aware of good solutions to them.
120
-
121
-What if somebody calls such a function from a third-party component library? What if one React app embeds another React app, and their desired configurations are incompatible? How can a third-party component specify that it requires a particular configuration? We think that global configuration doesn't work well with composition. Since composition is central to React, we don't provide global configuration in code.
122
-
123
-We do, however, provide some global configuration on the build level. For example, we provide separate development and production builds. We may also [add a profiling build](https://github.com/facebook/react/issues/6627) in the future, and we are open to considering other build flags.
124
-
125
-### Beyond the DOM
126
-
127
-We see the value of React in the way it allows us to write components that have fewer bugs and compose together well. DOM is the original rendering target for React but [React Native](http://facebook.github.io/react-native/) is just as important both to Facebook and the community.
128
-
129
-Being renderer-agnostic is an important design constraint of React. It adds some overhead in the internal representations. On the other hand, any improvements to the core translate across platforms.
130
-
131
-Having a single programming model lets us form engineering teams around products instead of platforms. So far the tradeoff has been worth it for us.
132
-
133
-### Implementation
134
-
135
-We try to provide elegant APIs where possible. We are much less concerned with the implementation being elegant. The real world is far from perfect, and to a reasonable extent we prefer to put the ugly code into the library if it means the user does not have to write it. When we evaluate new code, we are looking for an implementation that is correct, performant and affords a good developer experience. Elegance is secondary.
136
-
137
-We prefer boring code to clever code. Code is disposable and often changes. So it is important that it [doesn't introduce new internal abstractions unless absolutely necessary](https://youtu.be/4anAwXYqLG8?t=13m9s). Verbose code that is easy to move around, change and remove is preferred to elegant code that is prematurely abstracted and hard to change.
138
-
139
-### Optimized for Tooling
140
-
141
-Some commonly used APIs have verbose names. For example, we use `componentDidMount()` instead of `didMount()` or `onMount()`. This is [intentional](https://github.com/reactjs/react-future/issues/40#issuecomment-142442124). The goal is to make the points of interaction with the library highly visible.
142
-
143
-In a massive codebase like Facebook, being able to search for uses of specific APIs is very important. We value distinct verbose names, and especially for the features that should be used sparingly. For example, `dangerouslySetInnerHTML` is hard to miss in a code review.
144
-
145
-Optimizing for search is also important because of our reliance on [codemods](https://www.youtube.com/watch?v=d0pOgY8__JM) to make breaking changes. We want it to be easy and safe to apply vast automated changes across the codebase, and unique verbose names help us achieve this. Similarly, distinctive names make it easy to write custom [lint rules](https://github.com/yannickcr/eslint-plugin-react) about using React without worrying about potential false positives.
146
-
147
-[JSX](/docs/displaying-data.html#jsx-syntax) plays a similar role. While it is not required with React, we use it extensively at Facebook both for aesthetic and pragmatic reasons.
148
-
149
-In our codebase, JSX provides an unambiguous hint to the tools that they are dealing with a React element tree. This makes it possible to add build-time optimizations such as [hoisting constant elements](http://babeljs.io/docs/plugins/transform-react-constant-elements/), safely lint and codemod internal component usage, and [include JSX source location](https://github.com/facebook/react/pull/6771) into the warnings.
150
-
151
-### Dogfooding
152
-
153
-We try our best to address the problems raised by the community. However we are likely to prioritize the issues that people are *also* experiencing internally at Facebook. Perhaps counter-intuitively, we think this is the main reason why the community can bet on React.
154
-
155
-Heavy internal usage gives us the confidence that React won't disappear tomorrow. React was created at Facebook to solve its problems. It brings tangible business value to the company and is used in many of its products. [Dogfooding](https://en.wikipedia.org/wiki/Eating_your_own_dog_food) it means that our vision stays sharp and we have a focused direction going forward.
156
-
157
-This doesn't mean that we ignore the issues raised by the community. For example, we added support for [web components](/docs/webcomponents.html) and [SVG](https://github.com/facebook/react/pull/6243) to React even though we don't rely on either of them internally. We are actively [listening to your pain points](https://github.com/facebook/react/issues/2686) and [address them](/blog/2016/07/11/introducing-reacts-error-code-system.html) to the best of our ability. The community is what makes React special to us, and we are honored to contribute back.
158
-
159
-After releasing many open source projects at Facebook, we have learned that trying to make everyone happy at the same time produced projects with poor focus that didn't grow well. Instead, we found that picking a small audience and focusing on making them happy brings a positive net effect. That's exactly what we did with React, and so far solving the problems encountered by Facebook product teams has translated well to the open source community.
160
-
161
-The downside of this approach is that sometimes we fail to give enough focus to the things that Facebook teams don't have to deal with, such as the "getting started" experience. We are acutely aware of this, and we are thinking of how to improve in a way that would benefit everyone in the community without making the same mistakes we did with open source projects before.
docs/contributing/how-to-contribute.md
deleted
-163
@@ -1,163 +0,0 @@
1
----
2
-id: how-to-contribute
3
-title: How to Contribute
4
-layout: contributing
5
-permalink: contributing/how-to-contribute.html
6
-next: codebase-overview.html
7
-redirect_from: "tips/introduction.html"
8
----
9
-
10
-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.
11
-
12
-### [Code of Conduct](https://code.facebook.com/codeofconduct)
13
-
14
-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.
15
-
16
-### Open Development
17
-
18
-All work on React happens directly on [GitHub](https://github.com/facebook/react). Both core team members and external contributors send pull requests which go through the same review process.
19
-
20
-### Branch Organization
21
-
22
-We will do our best to keep the [`master` branch](https://github.com/facebook/react/tree/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 recommend that you use [the latest stable version of React](/downloads.html).
23
-
24
-If you send a pull request, please do it against the `master` branch. We maintain stable branches for major versions separately but we don't accept pull requests to them directly. Instead, we cherry-pick non-breaking changes from master to the latest stable major version.
25
-
26
-### Semantic Versioning
27
-
28
-React follows [semantic versioning](http://semver.org/). We release patch versions for bugfixes, minor versions for new features, and major versions for any breaking changes. When we make breaking changes, we also introduce deprecation warnings in a minor version so that our users learn about the upcoming changes and migrate their code in advance.
29
-
30
-We tag every pull request with a label marking whether the change should go in the next [patch](https://github.com/facebook/react/pulls?q=is:open+is:pr+label:semver-patch), [minor](https://github.com/facebook/react/pulls?q=is:open+is:pr+label:semver-minor), or a [major](https://github.com/facebook/react/pulls?q=is:open+is:pr+label:semver-major) version. We release new patch versions every few weeks, minor versions every few months, and major versions one or two times a year.
31
-
32
-Every significant change is documented in the [changelog file](https://github.com/facebook/react/blob/master/CHANGELOG.md).
33
-
34
-### Bugs
35
-
36
-#### Where to Find Known Issues
37
-
38
-We are using [GitHub Issues](https://github.com/facebook/react/issues) for our public bugs. We 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.
39
-
40
-#### Reporting New Issues
41
-
42
-The best way to get your bug fixed is to provide a reduced test case. This [JSFiddle template](https://jsfiddle.net/84v837e9/) is a great starting point.
43
-
44
-#### Security Bugs
45
-
46
-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.
47
-
48
-### How to Get in Touch
49
-
50
-* IRC: [#reactjs on freenode](https://webchat.freenode.net/?channels=reactjs)
51
-* Discussion forum: [discuss.reactjs.org](https://discuss.reactjs.org/)
52
-
53
-There is also [an active community of React users on the Discord chat platform](http://www.reactiflux.com/) in case you need help with React.
54
-
55
-### Proposing a Change
56
-
57
-If you intend to change the public API, or make any non-trivial changes to the implementation, we recommend [filing an issue](https://github.com/facebook/react/issues/new). This lets us reach an agreement on your proposal before you put significant effort into it.
58
-
59
-If you're only fixing a bug, it's fine to submit a pull request right away but we still recommend to file an issue detailing what you're fixing. This is helpful in case we don't accept that specific fix but want to keep track of the issue.
60
-
61
-### Your First Pull Request
62
-
63
-Working on your first Pull Request? You can learn how from this free video series:
64
-
65
-**[How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)**
66
-
67
-To help you get your feet wet and get you familiar with our contribution process, we have a list of **[beginner friendly issues](https://github.com/facebook/react/issues?q=is:open+is:issue+label:"Difficulty:+beginner")** that contain bugs which are fairly easy to fix. This is a great place to get started.
68
-
69
-If you decide to fix an issue, please be sure to check the comment thread in case somebody is already working on a fix. If nobody is working on it at the moment, please leave a comment stating that you intend to work on it so other people don't accidentally duplicate your effort.
70
-
71
-If somebody claims an issue but doesn't follow up for more than two weeks, it's fine to take over it but you should still leave a comment.
72
-
73
-### Sending a Pull Request
74
-
75
-The core team is monitoring for pull requests. We will review your pull request and either merge it, request changes to it, or close it with an explanation. For API changes we may need to fix our internal uses at Facebook.com, which could cause some delay. We'll do our best to provide updates and feedback throughout the process.
76
-
77
-**Before submitting a pull request,** please make sure the following is done:
78
-
79
-1. Fork [the repository](https://github.com/facebook/react) and create your branch from `master`.
80
-2. If you've added code that should be tested, add tests!
81
-3. If you've changed APIs, update the documentation.
82
-4. Ensure the test suite passes (`npm test`).
83
-5. Format your code with [prettier](https://github.com/prettier/prettier) (`npm run prettier`).
84
-6. Make sure your code lints (`npm run lint`).
85
-7. Run the [Flow](https://flowtype.org/) typechecks (`npm run flow`).
86
-8. If you haven't already, complete the CLA.
87
-
88
-### Contributor License Agreement (CLA)
89
-
90
-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.
91
-
92
-**[Complete your CLA here.](https://code.facebook.com/cla)**
93
-
94
-### Contribution Prerequisites
95
-
96
-* You have `node` installed at v4.0.0+ and `npm` at v2.0.0+.
97
-* You have `gcc` installed or are comfortable installing a compiler if needed. Some of our `npm` dependencies may require a compilation step. On OS X, the Xcode Command Line Tools will cover this. On Ubuntu, `apt-get install build-essential` will install the required packages. Similar commands should work on other Linux distros. Windows will require some additional steps, see the [`node-gyp` installation instructions](https://github.com/nodejs/node-gyp#installation) for details.
98
-* You are familiar with `npm` and know whether or not you need to use `sudo` when installing packages globally.
99
-* You are familiar with `git`.
100
-
101
-### Development Workflow
102
-
103
-After cloning React, run `npm install` to fetch its dependencies.
104
-Then, you can run several commands:
105
-
106
-* `npm run lint` checks the code style.
107
-* `npm test` runs the complete test suite.
108
-* `npm test -- --watch` runs an interactive test watcher.
109
-* `npm test <pattern>` runs tests with matching filenames.
110
-* `npm run flow` runs the [Flow](https://flowtype.org/) typechecks.
111
-* `npm run build` creates a `build` folder with all the packages.
112
-
113
-We recommend running `npm test` (or its variations above) to make sure you don't introduce any regressions as you work on your change. However it can be handy to try your build of React in a real project.
114
-
115
-First, run `npm run build`. This will produce pre-built bundles in `build` folder, as well as prepare npm packages inside `build/packages`.
116
-
117
-The easiest way to try your changes is to run `npm run build` and then open `fixtures/packaging/babel-standalone/dev.html`. This file already uses `react.js` from the `build` folder so it will pick up your changes.
118
-
119
-If you want to try your changes in your existing React project, you may copy `build/umd/react.development.js`, `build/umd/react-dom.development.js`, or any other build products into your app and use them instead of the stable version. If your project uses React from npm, you may delete `react` and `react-dom` in its dependencies and use `npm link` to point them to your local `build` folder:
120
-
121
-```sh
122
-cd your_project
123
-npm link ~/path_to_your_react_clone/build/packages/react
124
-npm link ~/path_to_your_react_clone/build/packages/react-dom
125
-```
126
-
127
-Every time you run `npm run build` in the React folder, the updated versions will appear in your project's `node_modules`. You can then rebuild your project to try your changes.
128
-
129
-We still require that your pull request contains unit tests for any new functionality. This way we can ensure that we don't break your code in the future.
130
-
131
-### Style Guide
132
-
133
-Our linter will catch most styling issues that may exist in your code.
134
-You can check the status of your code styling by simply running `npm run lint`.
135
-
136
-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.
137
-
138
-### Code Conventions
139
-
140
-* Use semicolons `;`
141
-* Commas last `,`
142
-* 2 spaces for indentation (no tabs)
143
-* Prefer `'` over `"`
144
-* `'use strict';`
145
-* 120 character line length (**except documentation**)
146
-* Write "attractive" code
147
-* Do not use the optional parameters of `setTimeout` and `setInterval`
148
-
149
-### Introductory Video
150
-
151
-You may be interested in watching [this short video](https://www.youtube.com/watch?v=wUpPsEcGsg8) (26 mins) which gives an introduction on how to contribute to React.
152
-
153
-### Meeting Notes
154
-
155
-React team meets once a week to discuss the development of React, future plans, and priorities. You can find the meeting notes in a [dedicated repository](https://github.com/reactjs/core-notes/).
156
-
157
-### License
158
-
159
-By contributing to React, you agree that your contributions will be licensed under its MIT license.
160
-
161
-### What Next?
162
-
163
-Read the [next section](/contributing/codebase-overview.html) to learn how the codebase is organized.
docs/contributing/implementation-notes.md
deleted
-896
@@ -1,896 +0,0 @@
1
----
2
-id: implementation-notes
3
-title: Implementation Notes
4
-layout: contributing
5
-permalink: contributing/implementation-notes.html
6
-prev: codebase-overview.html
7
-next: design-principles.html
8
----
9
-
10
-This section is a collection of implementation notes for the [stack reconciler](/contributing/codebase-overview.html#stack-reconciler).
11
-
12
-It is very technical and assumes a strong understanding of React public API as well as how it's divided into core, renderers, and the reconciler. If you're not very familiar with the React codebase, read [the codebase overview](/contributing/codebase-overview.html) first.
13
-
14
-It also assumes an understanding of the [differences between React components, their instances, and elements](/blog/2015/12/18/react-components-elements-and-instances.html).
15
-
16
-The stack reconciler is powering all the React production code today. It is located in [`src/renderers/shared/stack/reconciler`](https://github.com/facebook/react/tree/master/src/renderers/shared/stack) and is used by both React DOM and React Native.
17
-
18
-### Video: Building React from Scratch
19
-
20
-[Paul O'Shannessy](https://twitter.com/zpao) gave a talk about [building React from scratch](https://www.youtube.com/watch?v=_MAD4Oly9yg) that largely inspired this document.
21
-
22
-Both this document and his talk are simplifications of the real codebase so you might get a better understanding by getting familiar with both of them.
23
-
24
-### Overview
25
-
26
-The reconciler itself doesn't have a public API. [Renderers](/contributing/codebase-overview.html#stack-renderers) like React DOM and React Native use it to efficiently update the user interface according to the React components written by the user.
27
-
28
-### Mounting as a Recursive Process
29
-
30
-Let's consider the first time you mount a component:
31
-
32
-```js
33
-ReactDOM.render(<App />, rootEl);
34
-```
35
-
36
-React DOM will pass `<App />` along to the reconciler. Remember that `<App />` is a React element, that is, a description of *what* to render. You can think about it as a plain object:
37
-
38
-```js
39
-console.log(<App />);
40
-// { type: App, props: {} }
41
-```
42
-
43
-The reconciler will check if `App` is a class or a function.
44
-
45
-If `App` is a function, the reconciler will call `App(props)` to get the rendered element.
46
-
47
-If `App` is a class, the reconciler will instantiate an `App` with `new App(props)`, call the `componentWillMount()` lifecycle method, and then will call the `render()` method to get the rendered element.
48
-
49
-Either way, the reconciler will learn the element `App` "rendered to".
50
-
51
-This process is recursive. `App` may render to a `<Greeting />`, `Greeting` may render to a `<Button />`, and so on. The reconciler will "drill down" through user-defined components recursively as it learns what each component renders to.
52
-
53
-You can imagine this process as a pseudocode:
54
-
55
-```js
56
-function isClass(type) {
57
- // React.Component subclasses have this flag
58
- return (
59
- Boolean(type.prototype) &&
60
- Boolean(type.prototype.isReactComponent)
61
- );
62
-}
63
-
64
-// This function takes a React element (e.g. <App />)
65
-// and returns a DOM or Native node representing the mounted tree.
66
-function mount(element) {
67
- var type = element.type;
68
- var props = element.props;
69
-
70
- // We will determine the rendered element
71
- // by either running the type as function
72
- // or creating an instance and calling render().
73
- var renderedElement;
74
- if (isClass(type)) {
75
- // Component class
76
- var publicInstance = new type(props);
77
- // Set the props
78
- publicInstance.props = props;
79
- // Call the lifecycle if necessary
80
- if (publicInstance.componentWillMount) {
81
- publicInstance.componentWillMount();
82
- }
83
- // Get the rendered element by calling render()
84
- renderedElement = publicInstance.render();
85
- } else {
86
- // Component function
87
- renderedElement = type(props);
88
- }
89
-
90
- // This process is recursive because a component may
91
- // return an element with a type of another component.
92
- return mount(renderedElement);
93
-
94
- // Note: this implementation is incomplete and recurses infinitely!
95
- // It only handles elements like <App /> or <Button />.
96
- // It doesn't handle elements like <div /> or <p /> yet.
97
-}
98
-
99
-var rootEl = document.getElementById('root');
100
-var node = mount(<App />);
101
-rootEl.appendChild(node);
102
-```
103
-
104
->**Note:**
105
->
106
->This really *is* a pseudo-code. It isn't similar to the real implementation. It will also cause a stack overflow because we haven't discussed when to stop the recursion.
107
-
108
-Let's recap a few key ideas in the example above:
109
-
110
-* React elements are plain objects representing the component type (e.g. `App`) and the props.
111
-* User-defined components (e.g. `App`) can be classes or functions but they all "render to" elements.
112
-* "Mounting" is a recursive process that creates a DOM or Native tree given the top-level React element (e.g. `<App />`).
113
-
114
-### Mounting Host Elements
115
-
116
-This process would be useless if we didn't render something to the screen as a result.
117
-
118
-In addition to user-defined ("composite") components, React elements may also represent platform-specific ("host") components. For example, `Button` might return a `<div />` from its render method.
119
-
120
-If element's `type` property is a string, we are dealing with a host element:
121
-
122
-```js
123
-console.log(<div />);
124
-// { type: 'div', props: {} }
125
-```
126
-
127
-There is no user-defined code associated with host elements.
128
-
129
-When the reconciler encounters a host element, it lets the renderer take care of mounting it. For example, React DOM would create a DOM node.
130
-
131
-If the host element has children, the reconciler recursively mounts them following the same algorithm as above. It doesn't matter whether children are host (like `<div><hr /></div>`), composite (like `<div><Button /></div>`), or both.
132
-
133
-The DOM nodes produced by the child components will be appended to the parent DOM node, and recursively, the complete DOM structure will be assembled.
134
-
135
->**Note:**
136
->
137
->The reconciler itself is not tied to the DOM. The exact result of mounting (sometimes called "mount image" in the source code) depends on the renderer, and can be a DOM node (React DOM), a string (React DOM Server), or a number representing a native view (React Native).
138
-
139
-If we were to extend the code to handle host elements, it would look like this:
140
-
141
-```js
142
-function isClass(type) {
143
- // React.Component subclasses have this flag
144
- return (
145
- Boolean(type.prototype) &&
146
- Boolean(type.prototype.isReactComponent)
147
- );
148
-}
149
-
150
-// This function only handles elements with a composite type.
151
-// For example, it handles <App /> and <Button />, but not a <div />.
152
-function mountComposite(element) {
153
- var type = element.type;
154
- var props = element.props;
155
-
156
- var renderedElement;
157
- if (isClass(type)) {
158
- // Component class
159
- var publicInstance = new type(props);
160
- // Set the props
161
- publicInstance.props = props;
162
- // Call the lifecycle if necessary
163
- if (publicInstance.componentWillMount) {
164
- publicInstance.componentWillMount();
165
- }
166
- renderedElement = publicInstance.render();
167
- } else if (typeof type === 'function') {
168
- // Component function
169
- renderedElement = type(props);
170
- }
171
-
172
- // This is recursive but we'll eventually reach the bottom of recursion when
173
- // the element is host (e.g. <div />) rather than composite (e.g. <App />):
174
- return mount(renderedElement);
175
-}
176
-
177
-// This function only handles elements with a host type.
178
-// For example, it handles <div /> and <p /> but not an <App />.
179
-function mountHost(element) {
180
- var type = element.type;
181
- var props = element.props;
182
- var children = props.children || [];
183
- if (!Array.isArray(children)) {
184
- children = [children];
185
- }
186
- children = children.filter(Boolean);
187
-
188
- // This block of code shouldn't be in the reconciler.
189
- // Different renderers might initialize nodes differently.
190
- // For example, React Native would create iOS or Android views.
191
- var node = document.createElement(type);
192
- Object.keys(props).forEach(propName => {
193
- if (propName !== 'children') {
194
- node.setAttribute(propName, props[propName]);
195
- }
196
- });
197
-
198
- // Mount the children
199
- children.forEach(childElement => {
200
- // Children may be host (e.g. <div />) or composite (e.g. <Button />).
201
- // We will also mount them recursively:
202
- var childNode = mount(childElement);
203
-
204
- // This line of code is also renderer-specific.
205
- // It would be different depending on the renderer:
206
- node.appendChild(childNode);
207
- });
208
-
209
- // Return the DOM node as mount result.
210
- // This is where the recursion ends.
211
- return node;
212
-}
213
-
214
-function mount(element) {
215
- var type = element.type;
216
- if (typeof type === 'function') {
217
- // User-defined components
218
- return mountComposite(element);
219
- } else if (typeof type === 'string') {
220
- // Platform-specific components
221
- return mountHost(element);
222
- }
223
-}
224
-
225
-var rootEl = document.getElementById('root');
226
-var node = mount(<App />);
227
-rootEl.appendChild(node);
228
-```
229
-
230
-This is working but still far from how the reconciler is really implemented. The key missing ingredient is support for updates.
231
-
232
-### Introducing Internal Instances
233
-
234
-The key feature of React is that you can re-render everything, and it won't recreate the DOM or reset the state:
235
-
236
-```js
237
-ReactDOM.render(<App />, rootEl);
238
-// Should reuse the existing DOM:
239
-ReactDOM.render(<App />, rootEl);
240
-```
241
-
242
-However, our implementation above only knows how to mount the initial tree. It can't perform updates on it because it doesn't store all the necessary information, such as all the `publicInstance`s, or which DOM `node`s correspond to which components.
243
-
244
-The stack reconciler codebase solves this by making the `mount()` function a method and putting it on a class. There are drawbacks to this approach, and we are going in the opposite direction in the [ongoing rewrite of the reconciler](/contributing/codebase-overview.html#fiber-reconciler). Nevertheless this is how it works now.
245
-
246
-Instead of separate `mountHost` and `mountComposite` functions, we will create two classes: `DOMComponent` and `CompositeComponent`.
247
-
248
-Both classes have a constructor accepting the `element`, as well as a `mount()` method returning the mounted node. We will replace a top-level `mount()` function with a factory that instantiates the correct class:
249
-
250
-```js
251
-function instantiateComponent(element) {
252
- var type = element.type;
253
- if (typeof type === 'function') {
254
- // User-defined components
255
- return new CompositeComponent(element);
256
- } else if (typeof type === 'string') {
257
- // Platform-specific components
258
- return new DOMComponent(element);
259
- }
260
-}
261
-```
262
-
263
-First, let's consider the implementation of `CompositeComponent`:
264
-
265
-```js
266
-class CompositeComponent {
267
- constructor(element) {
268
- this.currentElement = element;
269
- this.renderedComponent = null;
270
- this.publicInstance = null;
271
- }
272
-
273
- getPublicInstance() {
274
- // For composite components, expose the class instance.
275
- return this.publicInstance;
276
- }
277
-
278
- mount() {
279
- var element = this.currentElement;
280
- var type = element.type;
281
- var props = element.props;
282
-
283
- var publicInstance;
284
- var renderedElement;
285
- if (isClass(type)) {
286
- // Component class
287
- publicInstance = new type(props);
288
- // Set the props
289
- publicInstance.props = props;
290
- // Call the lifecycle if necessary
291
- if (publicInstance.componentWillMount) {
292
- publicInstance.componentWillMount();
293
- }
294
- renderedElement = publicInstance.render();
295
- } else if (typeof type === 'function') {
296
- // Component function
297
- publicInstance = null;
298
- renderedElement = type(props);
299
- }
300
-
301
- // Save the public instance
302
- this.publicInstance = publicInstance;
303
-
304
- // Instantiate the child internal instance according to the element.
305
- // It would be a DOMComponent for <div /> or <p />,
306
- // and a CompositeComponent for <App /> or <Button />:
307
- var renderedComponent = instantiateComponent(renderedElement);
308
- this.renderedComponent = renderedComponent;
309
-
310
- // Mount the rendered output
311
- return renderedComponent.mount();
312
- }
313
-}
314
-```
315
-
316
-This is not much different from our previous `mountComposite()` implementation, but now we can save some information, such as `this.currentElement`, `this.renderedComponent`, and `this.publicInstance`, for use during updates.
317
-
318
-Note that an instance of `CompositeComponent` is not the same thing as an instance of the user-supplied `element.type`. `CompositeComponent` is an implementation detail of our reconciler, and is never exposed to the user. The user-defined class is the one we read from `element.type`, and `CompositeComponent` creates an instance of it.
319
-
320
-To avoid the confusion, we will call instances of `CompositeComponent` and `DOMComponent` "internal instances". They exist so we can associate some long-lived data with them. Only the renderer and the reconciler are aware that they exist.
321
-
322
-In contrast, we call an instance of the user-defined class a "public instance". The public instance is what you see as `this` in the `render()` and other methods of your custom components.
323
-
324
-The `mountHost()` function, refactored to be a `mount()` method on `DOMComponent` class, also looks familiar:
325
-
326
-```js
327
-class DOMComponent {
328
- constructor(element) {
329
- this.currentElement = element;
330
- this.renderedChildren = [];
331
- this.node = null;
332
- }
333
-
334
- getPublicInstance() {
335
- // For DOM components, only expose the DOM node.
336
- return this.node;
337
- }
338
-
339
- mount() {
340
- var element = this.currentElement;
341
- var type = element.type;
342
- var props = element.props;
343
- var children = props.children || [];
344
- if (!Array.isArray(children)) {
345
- children = [children];
346
- }
347
-
348
- // Create and save the node
349
- var node = document.createElement(type);
350
- this.node = node;
351
-
352
- // Set the attributes
353
- Object.keys(props).forEach(propName => {
354
- if (propName !== 'children') {
355
- node.setAttribute(propName, props[propName]);
356
- }
357
- });
358
-
359
- // Create and save the contained children.
360
- // Each of them can be a DOMComponent or a CompositeComponent,
361
- // depending on whether the element type is a string or a function.
362
- var renderedChildren = children.map(instantiateComponent);
363
- this.renderedChildren = renderedChildren;
364
-
365
- // Collect DOM nodes they return on mount
366
- var childNodes = renderedChildren.map(child => child.mount());
367
- childNodes.forEach(childNode => node.appendChild(childNode));
368
-
369
- // Return the DOM node as mount result
370
- return node;
371
- }
372
-}
373
-```
374
-
375
-The main difference after refactoring from `mountHost()` is that we now keep `this.node` and `this.renderedChildren` associated with the internal DOM component instance. We will also use them for applying non-destructive updates in the future.
376
-
377
-As a result, each internal instance, composite or host, now points to its child internal instances. To help visualize this, if a functional `<App>` component renders a `<Button>` class component, and `Button` class renders a `<div>`, the internal instance tree would look like this:
378
-
379
-```js
380
-[object CompositeComponent] {
381
- currentElement: <App />,
382
- publicInstance: null,
383
- renderedComponent: [object CompositeComponent] {
384
- currentElement: <Button />,
385
- publicInstance: [object Button],
386
- renderedComponent: [object DOMComponent] {
387
- currentElement: <div />,
388
- node: [object HTMLDivElement],
389
- renderedChildren: []
390
- }
391
- }
392
-}
393
-```
394
-
395
-In the DOM you would only see the `<div>`. However the internal instance tree contains both composite and host internal instances.
396
-
397
-The composite internal instances need to store:
398
-
399
-* The current element.
400
-* The public instance if element type is a class.
401
-* The single rendered internal instance. It can be either a `DOMComponent` or a `CompositeComponent`.
402
-
403
-The host internal instances need to store:
404
-
405
-* The current element.
406
-* The DOM node.
407
-* All the child internal instances. Each of them can be either a `DOMComponent` or a `CompositeComponent`.
408
-
409
-If you're struggling to imagine how an internal instance tree is structured in more complex applications, [React DevTools](https://github.com/facebook/react-devtools) can give you a close approximation, as it highlights host instances with grey, and composite instances with purple:
410
-
411
- <img src="../img/docs/implementation-notes-tree.png" width="500" style="max-width: 100%" alt="React DevTools tree" />
412
-
413
-To complete this refactoring, we will introduce a function that mounts a complete tree into a container node, just like `ReactDOM.render()`. It returns a public instance, also like `ReactDOM.render()`:
414
-
415
-```js
416
-function mountTree(element, containerNode) {
417
- // Create the top-level internal instance
418
- var rootComponent = instantiateComponent(element);
419
-
420
- // Mount the top-level component into the container
421
- var node = rootComponent.mount();
422
- containerNode.appendChild(node);
423
-
424
- // Return the public instance it provides
425
- var publicInstance = rootComponent.getPublicInstance();
426
- return publicInstance;
427
-}
428
-
429
-var rootEl = document.getElementById('root');
430
-mountTree(<App />, rootEl);
431
-```
432
-
433
-### Unmounting
434
-
435
-Now that we have internal instances that hold onto their children and the DOM nodes, we can implement unmounting. For a composite component, unmounting calls a lifecycle hook and recurses.
436
-
437
-```js
438
-class CompositeComponent {
439
-
440
- // ...
441
-
442
- unmount() {
443
- // Call the lifecycle hook if necessary
444
- var publicInstance = this.publicInstance;
445
- if (publicInstance) {
446
- if (publicInstance.componentWillUnmount) {
447
- publicInstance.componentWillUnmount();
448
- }
449
- }
450
-
451
- // Unmount the single rendered component
452
- var renderedComponent = this.renderedComponent;
453
- renderedComponent.unmount();
454
- }
455
-}
456
-```
457
-
458
-For `DOMComponent`, unmounting tells each child to unmount:
459
-
460
-```js
461
-class DOMComponent {
462
-
463
- // ...
464
-
465
- unmount() {
466
- // Unmount all the children
467
- var renderedChildren = this.renderedChildren;
468
- renderedChildren.forEach(child => child.unmount());
469
- }
470
-}
471
-```
472
-
473
-In practice, unmounting DOM components also removes the event listeners and clears some caches, but we will skip those details.
474
-
475
-We can now add a new top-level function called `unmountTree(containerNode)` that is similar to `ReactDOM.unmountComponentAtNode()`:
476
-
477
-```js
478
-function unmountTree(containerNode) {
479
- // Read the internal instance from a DOM node:
480
- // (This doesn't work yet, we will need to change mountTree() to store it.)
481
- var node = containerNode.firstChild;
482
- var rootComponent = node._internalInstance;
483
-
484
- // Unmount the tree and clear the container
485
- rootComponent.unmount();
486
- containerNode.innerHTML = '';
487
-}
488
-```
489
-
490
-In order for this to work, we need to read an internal root instance from a DOM node. We will modify `mountTree()` to add the `_internalInstance` property to the root DOM node. We will also teach `mountTree()` to destroy any existing tree so it can be called multiple times:
491
-
492
-```js
493
-function mountTree(element, containerNode) {
494
- // Destroy any existing tree
495
- if (containerNode.firstChild) {
496
- unmountTree(containerNode);
497
- }
498
-
499
- // Create the top-level internal instance
500
- var rootComponent = instantiateComponent(element);
501
-
502
- // Mount the top-level component into the container
503
- var node = rootComponent.mount();
504
- containerNode.appendChild(node);
505
-
506
- // Save a reference to the internal instance
507
- node._internalInstance = rootComponent;
508
-
509
- // Return the public instance it provides
510
- var publicInstance = rootComponent.getPublicInstance();
511
- return publicInstance;
512
-}
513
-```
514
-
515
-Now, running `unmountTree()`, or running `mountTree()` repeatedly, removes the old tree and runs the `componentWillUnmount()` lifecycle hook on components.
516
-
517
-### Updating
518
-
519
-In the previous section, we implemented unmounting. However React wouldn't be very useful if each prop change unmounted and mounted the whole tree. The goal of the reconciler is to reuse existing instances where possible to preserve the DOM and the state:
520
-
521
-```js
522
-var rootEl = document.getElementById('root');
523
-
524
-mountTree(<App />, rootEl);
525
-// Should reuse the existing DOM:
526
-mountTree(<App />, rootEl);
527
-```
528
-
529
-We will extend our internal instance contract with one more method. In addition to `mount()` and `unmount()`, both `DOMComponent` and `CompositeComponent` will implement a new method called `receive(nextElement)`:
530
-
531
-```js
532
-class CompositeComponent {
533
- // ...
534
-
535
- receive(nextElement) {
536
- // ...
537
- }
538
-}
539
-
540
-class DOMComponent {
541
- // ...
542
-
543
- receive(nextElement) {
544
- // ...
545
- }
546
-}
547
-```
548
-
549
-Its job is to do whatever is necessary to bring the component (and any of its children) up to date with the description provided by the `nextElement`.
550
-
551
-This is the part that is often described as "virtual DOM diffing" although what really happens is that we walk the internal tree recursively and let each internal instance receive an update.
552
-
553
-### Updating Composite Components
554
-
555
-When a composite component receives a new element, we run the `componentWillUpdate()` lifecycle hook.
556
-
557
-Then we re-render the component with the new props, and get the next rendered element:
558
-
559
-```js
560
-class CompositeComponent {
561
-
562
- // ...
563
-
564
- receive(nextElement) {
565
- var prevProps = this.currentElement.props;
566
- var publicInstance = this.publicInstance;
567
- var prevRenderedComponent = this.renderedComponent;
568
- var prevRenderedElement = prevRenderedComponent.currentElement;
569
-
570
- // Update *own* element
571
- this.currentElement = nextElement;
572
- var type = nextElement.type;
573
- var nextProps = nextElement.props;
574
-
575
- // Figure out what the next render() output is
576
- var nextRenderedElement;
577
- if (isClass(type)) {
578
- // Component class
579
- // Call the lifecycle if necessary
580
- if (publicInstance.componentWillUpdate) {
581
- publicInstance.componentWillUpdate(nextProps);
582
- }
583
- // Update the props
584
- publicInstance.props = nextProps;
585
- // Re-render
586
- nextRenderedElement = publicInstance.render();
587
- } else if (typeof type === 'function') {
588
- // Component function
589
- nextRenderedElement = type(nextProps);
590
- }
591
-
592
- // ...
593
-```
594
-
595
-Next, we can look at the rendered element's `type`. If the `type` has not changed since the last render, the component below can also be updated in place.
596
-
597
-For example, if it returned `<Button color="red" />` the first time, and `<Button color="blue" />` the second time, we can just tell the corresponding internal instance to `receive()` the next element:
598
-
599
-```js
600
- // ...
601
-
602
- // If the rendered element type has not changed,
603
- // reuse the existing component instance and exit.
604
- if (prevRenderedElement.type === nextRenderedElement.type) {
605
- prevRenderedComponent.receive(nextRenderedElement);
606
- return;
607
- }
608
-
609
- // ...
610
-```
611
-
612
-However, if the next rendered element has a different `type` than the previously rendered element, we can't update the internal instance. A `<button>` can't "become" an `<input>`.
613
-
614
-Instead, we have to unmount the existing internal instance and mount the new one corresponding to the rendered element type. For example, this is what happens when a component that previously rendered a `<button />` renders an `<input />`:
615
-
616
-```js
617
- // ...
618
-
619
- // If we reached this point, we need to unmount the previously
620
- // mounted component, mount the new one, and swap their nodes.
621
-
622
- // Find the old node because it will need to be replaced
623
- var prevNode = prevRenderedComponent.getHostNode();
624
-
625
- // Unmount the old child and mount a new child
626
- prevRenderedComponent.unmount();
627
- var nextRenderedComponent = instantiateComponent(nextRenderedElement);
628
- var nextNode = nextRenderedComponent.mount();
629
-
630
- // Replace the reference to the child
631
- this.renderedComponent = nextRenderedComponent;
632
-
633
- // Replace the old node with the new one
634
- // Note: this is renderer-specific code and
635
- // ideally should live outside of CompositeComponent:
636
- prevNode.parentNode.replaceChild(nextNode, prevNode);
637
- }
638
-}
639
-```
640
-
641
-To sum this up, when a composite component receives a new element, it may either delegate the update to its rendered internal instance, or unmount it and mount a new one in its place.
642
-
643
-There is another condition under which a component will re-mount rather than receive an element, and that is when the element's `key` has changed. We don't discuss `key` handling in this document because it adds more complexity to an already complex tutorial.
644
-
645
-Note that we needed to add a method called `getHostNode()` to the internal instance contract so that it's possible to locate the platform-specific node and replace it during the update. Its implementation is straightforward for both classes:
646
-
647
-```js
648
-class CompositeComponent {
649
- // ...
650
-
651
- getHostNode() {
652
- // Ask the rendered component to provide it.
653
- // This will recursively drill down any composites.
654
- return this.renderedComponent.getHostNode();
655
- }
656
-}
657
-
658
-class DOMComponent {
659
- // ...
660
-
661
- getHostNode() {
662
- return this.node;
663
- }
664
-}
665
-```
666
-
667
-### Updating Host Components
668
-
669
-Host component implementations, such as `DOMComponent`, update differently. When they receive an element, they need to update the underlying platform-specific view. In case of React DOM, this means updating the DOM attributes:
670
-
671
-```js
672
-class DOMComponent {
673
- // ...
674
-
675
- receive(nextElement) {
676
- var node = this.node;
677
- var prevElement = this.currentElement;
678
- var prevProps = prevElement.props;
679
- var nextProps = nextElement.props;
680
- this.currentElement = nextElement;
681
-
682
- // Remove old attributes.
683
- Object.keys(prevProps).forEach(propName => {
684
- if (propName !== 'children' && !nextProps.hasOwnProperty(propName)) {
685
- node.removeAttribute(propName);
686
- }
687
- });
688
- // Set next attributes.
689
- Object.keys(nextProps).forEach(propName => {
690
- if (propName !== 'children') {
691
- node.setAttribute(propName, nextProps[propName]);
692
- }
693
- });
694
-
695
- // ...
696
-```
697
-
698
-Then, host components need to update their children. Unlike composite components, they might contain more than a single child.
699
-
700
-In this simplified example, we use an array of internal instances and iterate over it, either updating or replacing the internal instances depending on whether the received `type` matches their previous `type`. The real reconciler also takes element's `key` in the account and track moves in addition to insertions and deletions, but we will omit this logic.
701
-
702
-We collect DOM operations on children in a list so we can execute them in batch:
703
-
704
-```js
705
- // ...
706
-
707
- // These are arrays of React elements:
708
- var prevChildren = prevProps.children || [];
709
- if (!Array.isArray(prevChildren)) {
710
- prevChildren = [prevChildren];
711
- }
712
- var nextChildren = nextProps.children || [];
713
- if (!Array.isArray(nextChildren)) {
714
- nextChildren = [nextChildren];
715
- }
716
- // These are arrays of internal instances:
717
- var prevRenderedChildren = this.renderedChildren;
718
- var nextRenderedChildren = [];
719
-
720
- // As we iterate over children, we will add operations to the array.
721
- var operationQueue = [];
722
-
723
- // Note: the section below is extremely simplified!
724
- // It doesn't handle reorders, children with holes, or keys.
725
- // It only exists to illustrate the overall flow, not the specifics.
726
-
727
- for (var i = 0; i < nextChildren.length; i++) {
728
- // Try to get an existing internal instance for this child
729
- var prevChild = prevRenderedChildren[i];
730
-
731
- // If there is no internal instance under this index,
732
- // a child has been appended to the end. Create a new
733
- // internal instance, mount it, and use its node.
734
- if (!prevChild) {
735
- var nextChild = instantiateComponent(nextChildren[i]);
736
- var node = nextChild.mount();
737
-
738
- // Record that we need to append a node
739
- operationQueue.push({type: 'ADD', node});
740
- nextRenderedChildren.push(nextChild);
741
- continue;
742
- }
743
-
744
- // We can only update the instance if its element's type matches.
745
- // For example, <Button size="small" /> can be updated to
746
- // <Button size="large" /> but not to an <App />.
747
- var canUpdate = prevChildren[i].type === nextChildren[i].type;
748
-
749
- // If we can't update an existing instance, we have to unmount it
750
- // and mount a new one instead of it.
751
- if (!canUpdate) {
752
- var prevNode = prevChild.node;
753
- prevChild.unmount();
754
-
755
- var nextChild = instantiateComponent(nextChildren[i]);
756
- var nextNode = nextChild.mount();
757
-
758
- // Record that we need to swap the nodes
759
- operationQueue.push({type: 'REPLACE', prevNode, nextNode});
760
- nextRenderedChildren.push(nextChild);
761
- continue;
762
- }
763
-
764
- // If we can update an existing internal instance,
765
- // just let it receive the next element and handle its own update.
766
- prevChild.receive(nextChildren[i]);
767
- nextRenderedChildren.push(prevChild);
768
- }
769
-
770
- // Finally, unmount any children that don't exist:
771
- for (var j = nextChildren.length; j < prevChildren.length; j++) {
772
- var prevChild = prevRenderedChildren[j];
773
- var node = prevChild.node;
774
- prevChild.unmount();
775
-
776
- // Record that we need to remove the node
777
- operationQueue.push({type: 'REMOVE', node});
778
- }
779
-
780
- // Point the list of rendered children to the updated version.
781
- this.renderedChildren = nextRenderedChildren;
782
-
783
- // ...
784
-```
785
-
786
-As the last step, we execute the DOM operations. Again, the real reconciler code is more complex because it also handles moves:
787
-
788
-```js
789
- // ...
790
-
791
- // Process the operation queue.
792
- while (operationQueue.length > 0) {
793
- var operation = operationQueue.shift();
794
- switch (operation.type) {
795
- case 'ADD':
796
- this.node.appendChild(operation.node);
797
- break;
798
- case 'REPLACE':
799
- this.node.replaceChild(operation.nextNode, operation.prevNode);
800
- break;
801
- case 'REMOVE':
802
- this.node.removeChild(operation.node);
803
- break;
804
- }
805
- }
806
- }
807
-}
808
-```
809
-
810
-And that is it for updating host components.
811
-
812
-### Top-Level Updates
813
-
814
-Now that both `CompositeComponent` and `DOMComponent` implement the `receive(nextElement)` method, we can change the top-level `mountTree()` function to use it when the element `type` is the same as it was the last time:
815
-
816
-```js
817
-function mountTree(element, containerNode) {
818
- // Check for an existing tree
819
- if (containerNode.firstChild) {
820
- var prevNode = containerNode.firstChild;
821
- var prevRootComponent = prevNode._internalInstance;
822
- var prevElement = prevRootComponent.currentElement;
823
-
824
- // If we can, reuse the existing root component
825
- if (prevElement.type === element.type) {
826
- prevRootComponent.receive(element);
827
- return;
828
- }
829
-
830
- // Otherwise, unmount the existing tree
831
- unmountTree(containerNode);
832
- }
833
-
834
- // ...
835
-
836
-}
837
-```
838
-
839
-Now calling `mountTree()` two times with the same type isn't destructive:
840
-
841
-```js
842
-var rootEl = document.getElementById('root');
843
-
844
-mountTree(<App />, rootEl);
845
-// Reuses the existing DOM:
846
-mountTree(<App />, rootEl);
847
-```
848
-
849
-These are the basics of how React works internally.
850
-
851
-### What We Left Out
852
-
853
-This document is simplified compared to the real codebase. There are a few important aspects we didn't address:
854
-
855
-* Components can render `null`, and the reconciler can handle "empty slots" in arrays and rendered output.
856
-
857
-* The reconciler also reads `key` from the elements, and uses it to establish which internal instance corresponds to which element in an array. A bulk of complexity in the actual React implementation is related to that.
858
-
859
-* In addition to composite and host internal instance classes, there are also classes for "text" and "empty" components. They represent text nodes and the "empty slots" you get by rendering `null`.
860
-
861
-* Renderers use [injection](/contributing/codebase-overview.html#dynamic-injection) to pass the host internal class to the reconciler. For example, React DOM tells the reconciler to use `ReactDOMComponent` as the host internal instance implementation.
862
-
863
-* The logic for updating the list of children is extracted into a mixin called `ReactMultiChild` which is used by the host internal instance class implementations both in React DOM and React Native.
864
-
865
-* The reconciler also implements support for `setState()` in composite components. Multiple updates inside event handlers get batched into a single update.
866
-
867
-* The reconciler also takes care of attaching and detaching refs to composite components and host nodes.
868
-
869
-* Lifecycle hooks that are called after the DOM is ready, such as `componentDidMount()` and `componentDidUpdate()`, get collected into "callback queues" and are executed in a single batch.
870
-
871
-* React puts information about the current update into an internal object called "transaction". Transactions are useful for keeping track of the queue of pending lifecycle hooks, the current DOM nesting for the warnings, and anything else that is "global" to a specific update. Transactions also ensure React "cleans everything up" after updates. For example, the transaction class provided by React DOM restores the input selection after any update.
872
-
873
-### Jumping into the Code
874
-
875
-* [`ReactMount`](https://github.com/facebook/react/blob/83381c1673d14cd16cf747e34c945291e5518a86/src/renderers/dom/client/ReactMount.js) is where the code like `mountTree()` and `unmountTree()` from this tutorial lives. It takes care of mounting and unmounting top-level components. [`ReactNativeMount`](https://github.com/facebook/react/blob/83381c1673d14cd16cf747e34c945291e5518a86/src/renderers/native/ReactNativeMount.js) is its React Native analog.
876
-* [`ReactDOMComponent`](https://github.com/facebook/react/blob/83381c1673d14cd16cf747e34c945291e5518a86/src/renderers/dom/shared/ReactDOMComponent.js) is the equivalent of `DOMComponent` in this tutorial. It implements the host component class for React DOM renderer. [`ReactNativeBaseComponent`](https://github.com/facebook/react/blob/83381c1673d14cd16cf747e34c945291e5518a86/src/renderers/native/ReactNativeBaseComponent.js) is its React Native analog.
877
-* [`ReactCompositeComponent`](https://github.com/facebook/react/blob/83381c1673d14cd16cf747e34c945291e5518a86/src/renderers/shared/stack/reconciler/ReactCompositeComponent.js) is the equivalent of `CompositeComponent` in this tutorial. It handles calling user-defined components and maintaining their state.
878
-* [`instantiateReactComponent`](https://github.com/facebook/react/blob/83381c1673d14cd16cf747e34c945291e5518a86/src/renderers/shared/stack/reconciler/instantiateReactComponent.js) contains the switch that picks the right internal instance class to construct for an element. It is equivalent to `instantiateComponent()` in this tutorial.
879
-
880
-* [`ReactReconciler`](https://github.com/facebook/react/blob/83381c1673d14cd16cf747e34c945291e5518a86/src/renderers/shared/stack/reconciler/ReactReconciler.js) is a wrapper with `mountComponent()`, `receiveComponent()`, and `unmountComponent()` methods. It calls the underlying implementations on the internal instances, but also includes some code around them that is shared by all internal instance implementations.
881
-
882
-* [`ReactChildReconciler`](https://github.com/facebook/react/blob/83381c1673d14cd16cf747e34c945291e5518a86/src/renderers/shared/stack/reconciler/ReactChildReconciler.js) implements the logic for mounting, updating, and unmounting children according to the `key` of their elements.
883
-
884
-* [`ReactMultiChild`](https://github.com/facebook/react/blob/83381c1673d14cd16cf747e34c945291e5518a86/src/renderers/shared/stack/reconciler/ReactMultiChild.js) implements processing the operation queue for child insertions, deletions, and moves independently of the renderer.
885
-
886
-* `mount()`, `receive()`, and `unmount()` are really called `mountComponent()`, `receiveComponent()`, and `unmountComponent()` in React codebase for legacy reasons, but they receive elements.
887
-
888
-* Properties on the internal instances start with an underscore, e.g. `_currentElement`. They are considered to be read-only public fields throughout the codebase.
889
-
890
-### Future Directions
891
-
892
-Stack reconciler has inherent limitations such as being synchronous and unable to interrupt the work or split it in chunks. There is a work in progress on the [new Fiber reconciler](/contributing/codebase-overview.html#fiber-reconciler) with a [completely different architecture](https://github.com/acdlite/react-fiber-architecture). In the future, we intend to replace stack reconciler with it, but at the moment it is far from feature parity.
893
-
894
-### Next Steps
895
-
896
-Read the [next section](/contributing/design-principles.html) to learn about the guiding principles we use for React development.
docs/crowdin.yaml
deleted
-101
@@ -1,101 +0,0 @@
1
-project_identifier_env: CROWDIN_REACT_PROJECT_ID
2
-api_key_env: CROWDIN_REACT_API_KEY
3
-base_path: "./"
4
-preserve_hierarchy: true
5
-
6
-files:
7
- -
8
- source: '/docs/*.md'
9
- translation: '/docs/i18n/%locale%/%original_file_name%'
10
- languages_mapping: &anchor
11
- locale:
12
- 'af': 'af'
13
- 'ar': 'ar'
14
- 'bs-BA': 'bs-BA'
15
- 'ca': 'ca'
16
- 'cs': 'cs'
17
- 'da': 'da'
18
- 'de': 'de'
19
- 'el': 'el'
20
- 'es-ES': 'es-ES'
21
- 'fa': 'fa-IR'
22
- 'fi': 'fi'
23
- 'fr': 'fr'
24
- 'he': 'he'
25
- 'hu': 'hu'
26
- 'id': 'id-ID'
27
- 'it': 'it'
28
- 'ja': 'ja'
29
- 'ko': 'ko'
30
- 'mr': 'mr-IN'
31
- 'nl': 'nl'
32
- 'no': 'no-NO'
33
- 'pl': 'pl'
34
- 'pt-BR': 'pt-BR'
35
- 'pt-PT': 'pt-PT'
36
- 'ro': 'ro'
37
- 'ru': 'ru'
38
- 'sk': 'sk-SK'
39
- 'sr': 'sr'
40
- 'sv-SE': 'sv-SE'
41
- 'tr': 'tr'
42
- 'uk': 'uk'
43
- 'vi': 'vi'
44
- 'zh-CN': 'zh-Hans'
45
- 'zh-TW': 'zh-Hant'
46
- -
47
- source: '/tutorial/*.md'
48
- translation: '/tutorial/%locale%/%original_file_name%'
49
- languages_mapping: *anchor
50
- -
51
- source: '/community/*.md'
52
- translation: '/community/%locale%/%original_file_name%'
53
- ignore:
54
- - '/community/complementary-tools.it-IT.md'
55
- - '/community/complementary-tools.ko-KR.md'
56
- - '/community/complementary-tools.zh-CN.md'
57
- - '/community/conferences.it-IT.md'
58
- - '/community/conferences.ko-KR.md'
59
- - '/community/conferences.zh-CN.md'
60
- - '/community/examples.it-IT.md'
61
- - '/community/examples.ko-KR.md'
62
- - '/community/examples.zh-CN.md'
63
- - '/community/videos.it-IT.md'
64
- - '/community/videos.ko-KR.md'
65
- - '/community/videos.zh-CN.md'
66
- languages_mapping: *anchor
67
- -
68
- source: '/contributing/*.md'
69
- translation: '/contributing/%locale%/%original_file_name%'
70
- languages_mapping: *anchor
71
- -
72
- source: '/_data/*.yml'
73
- translation: '/_data/%locale%/%original_file_name%'
74
- languages_mapping: *anchor
75
- ignore:
76
- - '/_data/acknowledgements.yml'
77
- - '/_data/authors.md'
78
- -
79
- source: '/warnings/*.md'
80
- translation: '/warnings/%locale%/%original_file_name%'
81
- languages_mapping: *anchor
82
- -
83
- source: '/index.md'
84
- translation: '/%locale%/index.md'
85
- languages_mapping: *anchor
86
- -
87
- source: '/README.md'
88
- translation: '/%locale%/README.md'
89
- languages_mapping: *anchor
90
- -
91
- source: '/acknowledgements.md'
92
- translation: '/%locale%/acknowledgements.md'
93
- languages_mapping: *anchor
94
- -
95
- source: '/404.md'
96
- translation: '/%locale%/404.md'
97
- languages_mapping: *anchor
98
- -
99
- source: '/jsx-compiler.md'
100
- translation: '/%locale%/jsx-compiler.md'
101
- languages_mapping: *anchor
\ No newline at end of file
docs/css/codemirror.css
deleted
-340
@@ -1,340 +0,0 @@
1
-/* BASICS */
2
-
3
-.CodeMirror {
4
- /* Set height, width, borders, and global font properties here */
5
- font-family: monospace;
6
-}
7
-.CodeMirror-scroll {
8
- /* Set scrolling behavior here */
9
- overflow: auto;
10
-}
11
-
12
-/* PADDING */
13
-
14
-.CodeMirror-lines {
15
- padding: 14px 0; /* Vertical padding around content */
16
-}
17
-.CodeMirror pre {
18
- padding: 0 14px; /* Horizontal padding of content */
19
-}
20
-
21
-.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
22
- background-color: white; /* The little square between H and V scrollbars */
23
-}
24
-
25
-/* GUTTER */
26
-
27
-.CodeMirror-gutters {
28
- border-right: 1px solid #ddd;
29
- background-color: #f7f7f7;
30
- white-space: nowrap;
31
-}
32
-.CodeMirror-linenumbers {}
33
-.CodeMirror-linenumber {
34
- padding: 0 3px 0 5px;
35
- min-width: 20px;
36
- text-align: right;
37
- color: #999;
38
- white-space: nowrap;
39
-}
40
-
41
-.CodeMirror-guttermarker { color: black; }
42
-.CodeMirror-guttermarker-subtle { color: #999; }
43
-
44
-/* CURSOR */
45
-
46
-.CodeMirror-cursor {
47
- border-left: 1px solid black;
48
- border-right: none;
49
- width: 0;
50
-}
51
-/* Shown when moving in bi-directional text */
52
-.CodeMirror div.CodeMirror-secondarycursor {
53
- border-left: 1px solid silver;
54
-}
55
-.cm-fat-cursor .CodeMirror-cursor {
56
- width: auto;
57
- border: 0 !important;
58
- background: #7e7;
59
-}
60
-.cm-fat-cursor div.CodeMirror-cursors {
61
- z-index: 1;
62
-}
63
-
64
-.cm-animate-fat-cursor {
65
- width: auto;
66
- border: 0;
67
- -webkit-animation: blink 1.06s steps(1) infinite;
68
- -moz-animation: blink 1.06s steps(1) infinite;
69
- animation: blink 1.06s steps(1) infinite;
70
- background-color: #7e7;
71
-}
72
-@-moz-keyframes blink {
73
- 0% {}
74
- 50% { background-color: transparent; }
75
- 100% {}
76
-}
77
-@-webkit-keyframes blink {
78
- 0% {}
79
- 50% { background-color: transparent; }
80
- 100% {}
81
-}
82
-@keyframes blink {
83
- 0% {}
84
- 50% { background-color: transparent; }
85
- 100% {}
86
-}
87
-
88
-/* Can style cursor different in overwrite (non-insert) mode */
89
-.CodeMirror-overwrite .CodeMirror-cursor {}
90
-
91
-.cm-tab { display: inline-block; text-decoration: inherit; }
92
-
93
-.CodeMirror-ruler {
94
- border-left: 1px solid #ccc;
95
- position: absolute;
96
-}
97
-
98
-/* DEFAULT THEME */
99
-
100
-.cm-s-default .cm-header {color: blue;}
101
-.cm-s-default .cm-quote {color: #090;}
102
-.cm-negative {color: #d44;}
103
-.cm-positive {color: #292;}
104
-.cm-header, .cm-strong {font-weight: bold;}
105
-.cm-em {font-style: italic;}
106
-.cm-link {text-decoration: underline;}
107
-.cm-strikethrough {text-decoration: line-through;}
108
-
109
-.cm-s-default .cm-keyword {color: #708;}
110
-.cm-s-default .cm-atom {color: #219;}
111
-.cm-s-default .cm-number {color: #164;}
112
-.cm-s-default .cm-def {color: #00f;}
113
-.cm-s-default .cm-variable,
114
-.cm-s-default .cm-punctuation,
115
-.cm-s-default .cm-property,
116
-.cm-s-default .cm-operator {}
117
-.cm-s-default .cm-variable-2 {color: #05a;}
118
-.cm-s-default .cm-variable-3 {color: #085;}
119
-.cm-s-default .cm-comment {color: #a50;}
120
-.cm-s-default .cm-string {color: #a11;}
121
-.cm-s-default .cm-string-2 {color: #f50;}
122
-.cm-s-default .cm-meta {color: #555;}
123
-.cm-s-default .cm-qualifier {color: #555;}
124
-.cm-s-default .cm-builtin {color: #30a;}
125
-.cm-s-default .cm-bracket {color: #997;}
126
-.cm-s-default .cm-tag {color: #170;}
127
-.cm-s-default .cm-attribute {color: #00c;}
128
-.cm-s-default .cm-hr {color: #999;}
129
-.cm-s-default .cm-link {color: #00c;}
130
-
131
-.cm-s-default .cm-error {color: #f00;}
132
-.cm-invalidchar {color: #f00;}
133
-
134
-.CodeMirror-composing { border-bottom: 2px solid; }
135
-
136
-/* Default styles for common addons */
137
-
138
-div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
139
-div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
140
-.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
141
-.CodeMirror-activeline-background {background: #e8f2ff;}
142
-
143
-/* STOP */
144
-
145
-/* The rest of this file contains styles related to the mechanics of
146
- the editor. You probably shouldn't touch them. */
147
-
148
-.CodeMirror {
149
- position: relative;
150
- overflow: hidden;
151
- background: white;
152
-}
153
-
154
-.CodeMirror-scroll {
155
- overflow: scroll !important; /* Things will break if this is overridden */
156
- /* 30px is the magic margin used to hide the element's real scrollbars */
157
- /* See overflow: hidden in .CodeMirror */
158
- margin-bottom: -30px; margin-right: -30px;
159
- padding-bottom: 30px;
160
- height: 100%;
161
- outline: none; /* Prevent dragging from highlighting the element */
162
- position: relative;
163
-}
164
-.CodeMirror-sizer {
165
- position: relative;
166
- border-right: 30px solid transparent;
167
-}
168
-
169
-/* The fake, visible scrollbars. Used to force redraw during scrolling
170
- before actual scrolling happens, thus preventing shaking and
171
- flickering artifacts. */
172
-.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
173
- position: absolute;
174
- z-index: 6;
175
- display: none;
176
-}
177
-.CodeMirror-vscrollbar {
178
- right: 0; top: 0;
179
- overflow-x: hidden;
180
- overflow-y: scroll;
181
-}
182
-.CodeMirror-hscrollbar {
183
- bottom: 0; left: 0;
184
- overflow-y: hidden;
185
- overflow-x: scroll;
186
-}
187
-.CodeMirror-scrollbar-filler {
188
- right: 0; bottom: 0;
189
-}
190
-.CodeMirror-gutter-filler {
191
- left: 0; bottom: 0;
192
-}
193
-
194
-.CodeMirror-gutters {
195
- position: absolute; left: 0; top: 0;
196
- min-height: 100%;
197
- z-index: 3;
198
-}
199
-.CodeMirror-gutter {
200
- white-space: normal;
201
- height: 100%;
202
- display: inline-block;
203
- vertical-align: top;
204
- margin-bottom: -30px;
205
- /* Hack to make IE7 behave */
206
- *zoom:1;
207
- *display:inline;
208
-}
209
-.CodeMirror-gutter-wrapper {
210
- position: absolute;
211
- z-index: 4;
212
- background: none !important;
213
- border: none !important;
214
-}
215
-.CodeMirror-gutter-background {
216
- position: absolute;
217
- top: 0; bottom: 0;
218
- z-index: 4;
219
-}
220
-.CodeMirror-gutter-elt {
221
- position: absolute;
222
- cursor: default;
223
- z-index: 4;
224
-}
225
-.CodeMirror-gutter-wrapper {
226
- -webkit-user-select: none;
227
- -moz-user-select: none;
228
- user-select: none;
229
-}
230
-
231
-.CodeMirror-lines {
232
- cursor: text;
233
- min-height: 1px; /* prevents collapsing before first draw */
234
-}
235
-.CodeMirror pre {
236
- /* Reset some styles that the rest of the page might have set */
237
- -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
238
- border-width: 0;
239
- background: transparent;
240
- font-family: inherit;
241
- font-size: inherit;
242
- margin: 0;
243
- white-space: pre;
244
- word-wrap: normal;
245
- line-height: inherit;
246
- color: inherit;
247
- z-index: 2;
248
- position: relative;
249
- overflow: visible;
250
- -webkit-tap-highlight-color: transparent;
251
- -webkit-font-variant-ligatures: none;
252
- font-variant-ligatures: none;
253
-}
254
-.CodeMirror-wrap pre {
255
- word-wrap: break-word;
256
- white-space: pre-wrap;
257
- word-break: normal;
258
-}
259
-
260
-.CodeMirror-linebackground {
261
- position: absolute;
262
- left: 0; right: 0; top: 0; bottom: 0;
263
- z-index: 0;
264
-}
265
-
266
-.CodeMirror-linewidget {
267
- position: relative;
268
- z-index: 2;
269
- overflow: auto;
270
-}
271
-
272
-.CodeMirror-widget {}
273
-
274
-.CodeMirror-code {
275
- outline: none;
276
-}
277
-
278
-/* Force content-box sizing for the elements where we expect it */
279
-.CodeMirror-scroll,
280
-.CodeMirror-sizer,
281
-.CodeMirror-gutter,
282
-.CodeMirror-gutters,
283
-.CodeMirror-linenumber {
284
- -moz-box-sizing: content-box;
285
- box-sizing: content-box;
286
-}
287
-
288
-.CodeMirror-measure {
289
- position: absolute;
290
- width: 100%;
291
- height: 0;
292
- overflow: hidden;
293
- visibility: hidden;
294
-}
295
-
296
-.CodeMirror-cursor { position: absolute; }
297
-.CodeMirror-measure pre { position: static; }
298
-
299
-div.CodeMirror-cursors {
300
- visibility: hidden;
301
- position: relative;
302
- z-index: 3;
303
-}
304
-div.CodeMirror-dragcursors {
305
- visibility: visible;
306
-}
307
-
308
-.CodeMirror-focused div.CodeMirror-cursors {
309
- visibility: visible;
310
-}
311
-
312
-.CodeMirror-selected { background: #d9d9d9; }
313
-.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
314
-.CodeMirror-crosshair { cursor: crosshair; }
315
-.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
316
-.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
317
-
318
-.cm-searching {
319
- background: #ffa;
320
- background: rgba(255, 255, 0, .4);
321
-}
322
-
323
-/* IE7 hack to prevent it from returning funny offsetTops on the spans */
324
-.CodeMirror span { *vertical-align: text-bottom; }
325
-
326
-/* Used to force a border model for a node */
327
-.cm-force-border { padding-right: .1px; }
328
-
329
-@media print {
330
- /* Hide the cursor when printing */
331
- .CodeMirror div.CodeMirror-cursors {
332
- visibility: hidden;
333
- }
334
-}
335
-
336
-/* See issue #2901 */
337
-.cm-tab-wrap-hack:after { content: ''; }
338
-
339
-/* Help users use markselection to safely style text background */
340
-span.CodeMirror-selectedtext { background: none; }
docs/css/main.css
deleted
-165
@@ -1,165 +0,0 @@
1
-/*****************************************************************************/
2
-/*
3
-/* Common
4
-/*
5
-/*****************************************************************************/
6
-
7
-/* Global Reset */
8
-* {
9
- margin: 0;
10
- padding: 0;
11
-}
12
-
13
-html, body { height: 100%; }
14
-
15
-body {
16
- background-color: #FFF;
17
- font: 13.34px Helvetica, Arial, sans-serif;
18
- font-size: small;
19
- text-align: center;
20
-}
21
-
22
-h1, h2, h3, h4, h5, h6 {
23
- font-size: 100%; }
24
-
25
-h1 { margin-bottom: 1em; }
26
-p { margin: 1em 0; }
27
-
28
-a { color: #00a; }
29
-a:hover { color: #000; }
30
-a:visited { color: #a0a; }
31
-
32
-table {
33
- font-size: inherit;
34
- font: 100%;
35
-}
36
-
37
-/*****************************************************************************/
38
-/*
39
-/* Home
40
-/*
41
-/*****************************************************************************/
42
-ul.posts {
43
- list-style-type: none;
44
- margin-bottom: 2em;
45
-}
46
-
47
-ul.posts li {
48
- line-height: 1.75em;
49
-}
50
-
51
-ul.posts span {
52
- color: #aaa;
53
- font-family: Monaco, "Courier New", monospace;
54
- font-size: 80%;
55
-}
56
-
57
-/*****************************************************************************/
58
-/*
59
-/* Site
60
-/*
61
-/*****************************************************************************/
62
-
63
-.site {
64
- font-size: 115%;
65
- text-align: justify;
66
- width: 42em;
67
- margin: 3em auto 2em;
68
- line-height: 1.5em;
69
-}
70
-
71
-.site .header a {
72
- font-weight: bold;
73
- text-decoration: none;
74
-}
75
-
76
-.site .header h1.title {
77
- display: inline-block;
78
- margin-bottom: 2em;
79
-}
80
-
81
-.site .header h1.title a {
82
- color: #a00;
83
-}
84
-
85
-.site .header h1.title a:hover {
86
- color: #000;
87
-}
88
-
89
-.site .header a.extra {
90
- color: #aaa;
91
- margin-left: 1em;
92
-}
93
-
94
-.site .header a.extra:hover {
95
- color: #000;
96
-}
97
-
98
-.site .meta {
99
- color: #aaa;
100
-}
101
-
102
-.site .footer {
103
- font-size: 80%;
104
- color: #666;
105
- border-top: 4px solid #eee;
106
- margin-top: 2em;
107
- overflow: hidden;
108
-}
109
-
110
-.site .footer .contact {
111
- float: left;
112
- margin-right: 3em;
113
-}
114
-
115
-.site .footer .contact a {
116
- color: #8085C1;
117
-}
118
-
119
-.site .footer .rss {
120
- margin-top: 1.1em;
121
- margin-right: -.2em;
122
- float: right;
123
-}
124
-
125
-.site .footer .rss img {
126
- border: 0;
127
-}
128
-
129
-/*****************************************************************************/
130
-/*
131
-/* Posts
132
-/*
133
-/*****************************************************************************/
134
-
135
-/* standard */
136
-#post pre {
137
- border: 1px solid #ddd;
138
- background-color: #eef;
139
- padding: 0 .4em;
140
-}
141
-
142
-#post ul, #post ol {
143
- margin-left: 1.35em;
144
-}
145
-
146
-#post code {
147
- border: 1px solid #ddd;
148
- background-color: #eef;
149
- padding: 0 .2em;
150
-}
151
-
152
-#post pre code {
153
- border: none;
154
-}
155
-
156
-/* terminal */
157
-#post pre.terminal {
158
- border: 1px solid #000;
159
- background-color: #333;
160
- color: #FFF;
161
-}
162
-
163
-#post pre.terminal code {
164
- background-color: #333;
165
-}
\ No newline at end of file
docs/css/react.scss
deleted
-1262
@@ -1,1262 +0,0 @@
1
----
2
----
3
-@import 'bourbon/bourbon';
4
-@import '_variables';
5
-@import '_typography';
6
-@import '_solarized';
7
-
8
-@mixin code-typography {
9
- font-family: 'source-code-pro', Menlo, Consolas, 'Courier New', monospace;
10
- line-height: 1.5;
11
- font-size: 13px;
12
- -webkit-text-size-adjust: none;
13
-}
14
-
15
-$skinnyContentWidth: 650px;
16
-$contentWidth: 920px;
17
-$contentPadding: 20px;
18
-$columnWidth: 280px;
19
-$columnGutter: 40px;
20
-$twoColumnWidth: 2 * $columnWidth + $columnGutter;
21
-$navHeight: 50px;
22
-
23
-// Breakpoints
24
-$bp-large: 960px;
25
-$bp-medium: 640px;
26
-$bp-small: 480px;
27
-
28
-@mixin bp-small {
29
- @media (max-width: $bp-small) {
30
- @content;
31
- }
32
-}
33
-
34
-@mixin bp-medium {
35
- @media (max-width: $bp-medium) {
36
- @content;
37
- }
38
-}
39
-
40
-@mixin bp-large {
41
- @media (max-width: $bp-large) {
42
- @content;
43
- }
44
-}
45
-
46
-// basic reset
47
-* {
48
- @include box-sizing(border-box);
49
- border: none;
50
- margin: 0;
51
- padding: 0;
52
-}
53
-
54
-html {
55
- background: $pageBg;
56
-}
57
-
58
-
59
-
60
-.left {
61
- float: left;
62
-}
63
-
64
-.right {
65
- float: right;
66
-}
67
-
68
-
69
-.container {
70
- padding-top: $navHeight;
71
- width: 100%;
72
-}
73
-
74
-.wrap {
75
- max-width: $contentWidth + (2 * $contentPadding);
76
- margin-left: auto;
77
- margin-right: auto;
78
- padding-left: 20px;
79
- padding-right: 20px;
80
-
81
- @include bp-large {
82
- padding-left: 10px;
83
- padding-right: 10px;
84
- }
85
-}
86
-
87
-.skinnyWrap {
88
- width: $skinnyContentWidth + (2 * $contentPadding);
89
- margin-left: auto;
90
- margin-right: auto;
91
- padding-left: 20px;
92
- padding-right: 20px;
93
-}
94
-
95
-hr {
96
- height: 0;
97
- border-top: 1px solid #ccc;
98
- border-bottom: 1px solid #eee;
99
-}
100
-
101
-ul,
102
-li {
103
- margin-left: 20px;
104
-}
105
-
106
-li + li {
107
- margin-top: 10px;
108
-}
109
-
110
-// Make header navigation linkable and on the screen. Used in documentation and
111
-// blog posts.
112
-h1, h2, h3, h4, h5, h6 {
113
- .anchor {
114
- margin-top: -$navHeight;
115
- position: absolute;
116
- }
117
-
118
- &:hover .hash-link {
119
- display: inline;
120
- }
121
-}
122
-.hash-link {
123
- color: $mediumTextColor;
124
- display: none;
125
- padding-left: 8px;
126
-}
127
-
128
-// Main Nav
129
-
130
-.nav-main {
131
- @include clearfix;
132
- background: $darkestColor;
133
- color: $lightTextColor;
134
- position: fixed;
135
- top: 0;
136
- height: $navHeight;
137
- box-shadow: 0 0 5px rgba(0, 0, 0, .5);
138
- width: 100%;
139
- z-index: 100;
140
-
141
- @include bp-large {
142
- height: auto;
143
- }
144
-
145
- a {
146
- color: $lightColor;
147
- text-decoration: none;
148
- }
149
-
150
- .nav-site {
151
- display: inline-flex;
152
- display: -ms-flexbox;
153
- flex: 1;
154
- -ms-flex: 1;
155
-
156
- li {
157
- margin: 0;
158
- }
159
-
160
- li > a {
161
- box-sizing: content-box;
162
- padding: 0 10px;
163
- line-height: $navHeight;
164
- display: inline-block;
165
- height: $navHeight;
166
- color: #ddd;
167
- white-space: nowrap;
168
-
169
- @include bp-large {
170
- display: flex;
171
- display: -ms-flex;
172
- justify-content: center;
173
- align-items: center;
174
- padding: 0 5px;
175
- line-height: inherit;
176
- }
177
-
178
- &:hover {
179
- color: #fff;
180
- }
181
-
182
- &.active {
183
- position: relative;
184
- color: $lightTextColor;
185
- background: #333;
186
-
187
- &:after {
188
- content: "";
189
- position: absolute;
190
- bottom: 0;
191
- left: 0;
192
- right: 0;
193
- border-bottom: 3px solid $primary;
194
- }
195
-
196
- @include bp-large {
197
- background: inherit;
198
- }
199
- }
200
- }
201
-
202
- .nav-site-item {
203
- &--hidden-sm {
204
- @include bp-large {
205
- display: none;
206
- }
207
- }
208
- }
209
-
210
- .nav-site-search {
211
- @include bp-large {
212
- position: absolute;
213
- z-index: 1;
214
- right: 0;
215
- top: 0;
216
- margin: 0 10px;
217
-
218
- &:focus {
219
- width: 170px;
220
- }
221
- }
222
- }
223
- }
224
-
225
- .nav-site-internal {
226
- margin: 0 0 0 20px;
227
-
228
- @include bp-large {
229
- margin: 0;
230
- }
231
- }
232
-
233
- .nav-site-external {
234
- float: right;
235
- margin: 0;
236
-
237
- @include bp-large {
238
- position: absolute;
239
- top: 0;
240
- right: 55px;
241
- float: none;
242
- }
243
- }
244
-
245
- .nav-home {
246
- color: #00d8ff;
247
- font-size: 24px;
248
- line-height: $navHeight;
249
- height: $navHeight;
250
- display: inline-block;
251
-
252
- @include bp-large {
253
- font-size: 20px;
254
- }
255
- }
256
-
257
- .nav-logo {
258
- vertical-align: middle;
259
- display: inline-block;
260
-
261
- @include bp-large {
262
- height: 30px;
263
- width: auto;
264
- }
265
- }
266
-
267
- ul {
268
- display: inline-block;
269
- vertical-align: top;
270
- }
271
-
272
- li {
273
- display: inline;
274
- }
275
-}
276
-
277
-.nav-lists {
278
- display: inline-block;
279
- vertical-align: top;
280
- width: calc(100% - 120px);
281
-
282
- @include bp-large {
283
- display: flex;
284
- display: -ms-flex;
285
- width: calc(100% + 20px);
286
- margin: 0 -10px;
287
- font-size: 0.9em;
288
-
289
- li {
290
- display: flex;
291
- display: -ms-flex;
292
- -ms-flex: 1 0 auto;
293
- align-items: center;
294
-
295
- a {
296
- -ms-flex: 1;
297
- text-align: center;
298
- line-height: 1.2;
299
- }
300
- }
301
- }
302
-}
303
-
304
-// Hero!
305
-
306
-.hero {
307
- min-height: 300px;
308
- // background: $darkColor url(../img/header.png) no-repeat center;
309
- background: $darkColor;
310
- padding-top: 50px;
311
- color: $lightColor;
312
- font-weight: 300;
313
-
314
- .text {
315
- font-size: 64px;
316
- text-align: center;
317
- }
318
-
319
- .minitext {
320
- font-size: 16px;
321
- text-align: center;
322
- text-transform: uppercase;
323
- }
324
-
325
- strong {
326
- color: $blueColor;
327
- font-weight: 400;
328
- }
329
-}
330
-
331
-.buttons-unit {
332
- display: flex;
333
- display: flex;
334
- justify-content: center;
335
- flex-wrap: wrap;
336
- margin-top: 60px;
337
- text-align: center;
338
- font-size: 1em;
339
-
340
- a {
341
- color: $blueColor;
342
- }
343
-
344
- .button {
345
- font-size: 24px;
346
- background: $primary;
347
- color: $lightTextColor;
348
-
349
- &:active {
350
- background: darken($primary, 5%);
351
- }
352
-
353
- @include bp-large {
354
- margin: 5px;
355
- font-size: 1em;
356
- }
357
- }
358
-}
359
-
360
-// Downloads
361
-
362
-.buttons-unit.downloads {
363
- margin: 30px 0;
364
-}
365
-
366
-// Docs Nav
367
-
368
-.nav-docs {
369
- color: $darkColor;
370
- font-size: 14px;
371
- // position: fixed;
372
- float: left;
373
- width: 210px;
374
-
375
- @include bp-medium {
376
- width: 100%;
377
- padding-bottom: 40px;
378
- }
379
-
380
- ul {
381
- list-style: none;
382
- margin: 0;
383
- }
384
- ul ul {
385
- margin: 0 0 6px 20px;
386
- }
387
- li {
388
- line-height: 16px;
389
- margin: 0 0 6px;
390
- }
391
- h3 {
392
- text-transform: uppercase;
393
- font-size: 14px;
394
- }
395
- a {
396
- color: $mediumestColor;
397
- display: block;
398
-
399
- &:hover {
400
- text-decoration: none;
401
- color: $primary;
402
- }
403
-
404
- &.active {
405
- color: $primary;
406
- }
407
-
408
- &.external {
409
- &:after {
410
- content: "";
411
- display: inline-block;
412
- width: 10px;
413
- height: 10px;
414
- padding-left: 5px;
415
- @include retina-image('../img/external', 10px 10px);
416
- background-position: 100% 0;
417
- background-repeat: no-repeat;
418
- font-size: 10px;
419
- line-height: 1em;
420
- opacity: 0.5;
421
- }
422
- }
423
- }
424
-
425
- .nav-docs-section {
426
- border-bottom: 1px solid #ccc;
427
- border-top: 1px solid #eee;
428
- padding: 12px 0;
429
-
430
- &:first-child {
431
- padding-top: 0;
432
- border-top: 0;
433
- }
434
-
435
- &:last-child {
436
- padding-bottom: 0;
437
- border-bottom: 0;
438
- }
439
-
440
- > ul {
441
- @include bp-medium {
442
- columns: 2
443
- }
444
-
445
- @include bp-small {
446
- columns: 1;
447
- }
448
-
449
- li {
450
- margin: 0;
451
-
452
- a {
453
- padding: 0;
454
- line-height: 1.6;
455
- }
456
- }
457
- }
458
- }
459
-
460
-}
461
-
462
-.nav-blog {
463
- li {
464
- margin-bottom: 5px;
465
- }
466
-}
467
-
468
-// Home Page specifics
469
-
470
-.home-section {
471
- margin: 50px 0;
472
-}
473
-
474
-.home-divider {
475
- border-top-color: #bbb;
476
- margin: 0 auto;
477
- width: 100%;
478
- max-width: 400px;
479
-}
480
-
481
-.skinny-row {
482
- @include clearfix;
483
-}
484
-
485
-.skinny-col {
486
- float: left;
487
- margin-left: $columnGutter;
488
- width: ($skinnyContentWidth - $columnGutter) / 2;
489
- &:first-child {
490
- margin-left: 0;
491
- }
492
-}
493
-
494
-.marketing-row {
495
- @include clearfix;
496
- margin: 50px 0;
497
-}
498
-
499
-.marketing-col {
500
- float: left;
501
- margin-left: 40px;
502
- width: $columnWidth;
503
-
504
- @include bp-large {
505
- margin: 0;
506
- width: 100%;
507
- }
508
-
509
- h3 {
510
- color: $darkColor;
511
- font-size: 24px;
512
- line-height: 28px;
513
- font-weight: normal;
514
- }
515
- p {
516
- font-size: 16px;
517
- }
518
-}
519
-
520
-.marketing-col:first-child {
521
- margin-left: 0;
522
-}
523
-
524
-#examples h3, .home-presentation h3 {
525
- color: $darkColor;
526
- font-size: 24px;
527
- font-weight: normal;
528
- margin-bottom: 5px;
529
-}
530
-
531
-#examples {
532
- p {
533
- margin: 0 0 25px 0;
534
- max-width: $twoColumnWidth;
535
- }
536
-
537
- .example {
538
- margin-top: 60px;
539
- }
540
-
541
- #todoExample {
542
- font-size: 14px;
543
- ul {
544
- list-style-type: square;
545
- margin: 0 0 10px 0;
546
- }
547
- input {
548
- border: 1px solid #ccc;
549
- font: 14px proxima-nova, $helvetica;
550
- padding: 3px;
551
- width: 150px;
552
- }
553
- button {
554
- font: 14px proxima-nova, $helvetica;
555
- margin-left: 5px;
556
- padding: 4px 10px;
557
- }
558
- }
559
-
560
- #markdownExample {
561
- textarea {
562
- border: 1px solid #ccc;
563
- font: 14px proxima-nova, $helvetica;
564
- margin-bottom: 10px;
565
- padding: 5px;
566
- }
567
- }
568
-}
569
-
570
-.home-bottom-section {
571
- margin-bottom: 100px;
572
-}
573
-
574
-.docs-nextprev {
575
- @include clearfix;
576
-}
577
-
578
-/* JSX Compiler */
579
-
580
-.jsxCompiler {
581
- margin: 0 auto;
582
- padding-top: 20px;
583
- width: 1220px;
584
-
585
- label.compiler-option {
586
- display: block;
587
- margin-top: 5px;
588
- }
589
-
590
- #jsxCompiler {
591
- margin-top: 20px;
592
- }
593
-
594
- .playgroundPreview {
595
- padding: 0;
596
- width: 600px;
597
- word-wrap: break-word;
598
-
599
- pre {
600
- @include code-typography;
601
- }
602
- }
603
-
604
- .playgroundError {
605
- // The compiler view kills padding in order to render the CodeMirror code
606
- // more nicely. For the error view, put a padding back
607
- padding: 15px 20px;
608
- }
609
-}
610
-
611
-.docs-prev {
612
- float: left;
613
-}
614
-
615
-.docs-next {
616
- float: right;
617
-}
618
-
619
-section.black content {
620
- padding-bottom: 18px;
621
-}
622
-
623
-/**
624
- * Blog
625
- */
626
-
627
-.blogContent {
628
- @include clearfix;
629
-
630
- padding-top: 20px;
631
- padding-bottom: 80px;
632
- @include bp-medium {
633
- padding-bottom: 0;
634
- }
635
-
636
- blockquote {
637
- padding: 5px 15px;
638
- margin: 20px 0;
639
- background-color: #f8f5ec;
640
- border-left: 5px solid #f7ebc6;
641
- }
642
-
643
- h2 > code {
644
- font-size: inherit;
645
- line-height: inherit;
646
- color: #555;
647
- background-color: rgba(0,0,0,0.04);
648
- }
649
-}
650
-
651
-/**
652
- * Docs
653
- */
654
-
655
-.documentationContent {
656
- @include clearfix;
657
-
658
- .subHeader {
659
- font-size: 24px;
660
- }
661
-
662
-
663
- // H2s form documentation topic dividers. Extra space helps.
664
- h2 {
665
- margin-top: 30px;
666
- }
667
-
668
- padding-top: 20px;
669
- padding-bottom: 80px;
670
- @include bp-medium {
671
- padding-bottom: 0;
672
- }
673
-
674
- // Make a notice box out of blockquotes in the documentation:
675
- blockquote {
676
- padding: 15px 30px 15px 15px;
677
- margin: 20px 0;
678
- background-color: rgba(248, 245, 236, 0.5);
679
- border-left: 5px solid rgba(191, 87, 73, 0.2);
680
- h4 {
681
- margin-top: 0;
682
- }
683
- p {
684
- margin-bottom: 0;
685
- }
686
- // Treat first child as the title - promote to H4.
687
- p:first-child {
688
- font-weight: bold;
689
- font-size: 17.5px;
690
- line-height: 20px;
691
- margin-top: 0;
692
- text-rendering: optimizelegibility;
693
- }
694
- }
695
-}
696
-
697
-.docs-prevnext {
698
- padding-top: 40px;
699
- padding-bottom: 40px;
700
-}
701
-
702
-/* Button */
703
-
704
-.button {
705
- @include background(linear-gradient($buttonGreyTop, $buttonGreyBottom));
706
- // border: 1px solid $darkestColor;
707
- border-radius: 4px;
708
- padding: 8px 16px;
709
- font-size: 18px;
710
- font-weight: 400;
711
- margin: 0 12px;
712
- // word-spacing: -2px;
713
- // letter-spacing: 1px;
714
- display: inline-block;
715
- color: $lightTextColor;
716
- text-decoration: none;
717
- text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
718
- box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
719
- text-decoration: none;
720
-
721
- &:hover {
722
- text-decoration: none;
723
- }
724
-
725
- &:active {
726
- box-shadow: none;
727
- }
728
-}
729
-
730
-.hero {
731
- .button {
732
- box-shadow: 1px 3px 3px rgba(0, 0, 0, .3);
733
- }
734
-}
735
-
736
-.button.blue {
737
- @include background(linear-gradient($buttonBlueTop, $buttonBlueBottom));
738
-}
739
-
740
-
741
-/* Row */
742
-
743
-.row {
744
- padding-bottom: 4px;
745
-}
746
-
747
-.row .span4 {
748
- width: 33.33%;
749
- display: table-cell;
750
-}
751
-
752
-.row .span8 {
753
- width: 66.66%;
754
- display: table-cell;
755
-}
756
-
757
-.row .span6 {
758
- width: 50%;
759
- display: table-cell;
760
-}
761
-
762
-
763
-/* Content */
764
-
765
-p {
766
- margin: 10px 0;
767
-}
768
-
769
-.highlight {
770
- padding: 10px;
771
- margin-bottom: 20px;
772
-}
773
-
774
-figure {
775
- text-align: center;
776
-}
777
-
778
-.inner-content {
779
- float: right;
780
- width: 100%;
781
- max-width: $skinnyContentWidth;
782
-
783
- @include bp-large {
784
- width: calc(100% - 240px);
785
- max-width: 100%;
786
- }
787
-
788
- @include bp-medium {
789
- width: 100%;
790
- }
791
-}
792
-
793
-.nosidebar .inner-content {
794
- float: none;
795
- margin: 0 auto;
796
-}
797
-
798
-h1 {
799
- // Contains .edit-page-link
800
- @include clearfix;
801
-}
802
-
803
-.edit-page-link {
804
- float: right;
805
- font-size: 16px;
806
- font-weight: normal;
807
- line-height: 20px;
808
- margin-top: 17px;
809
-
810
- @include bp-medium {
811
- float: left;
812
- width: 100%;
813
- }
814
-}
815
-
816
-/**
817
- * Community
818
- */
819
-
820
-.communityContent {
821
- @include clearfix;
822
-
823
- h3 {
824
- margin-top: 30px;
825
- }
826
-
827
- padding-top: 20px;
828
-
829
- blockquote {
830
- padding: 5px 15px;
831
- margin: 20px 0;
832
- background-color: #f8f5ec;
833
- border-left: 5px solid #f7ebc6;
834
- }
835
-
836
- th {
837
- padding-right: 6px;
838
- text-align: right;
839
- vertical-align: top;
840
- font-weight: normal;
841
- @include code-typography;
842
- }
843
-
844
- td {
845
- vertical-align: top;
846
- text-align: left;
847
- }
848
-}
849
-
850
-
851
-/* Blog */
852
-
853
-.post-list-item + .post-list-item {
854
- margin-top: 60px;
855
-}
856
-
857
-/* CodeMirror */
858
-
859
-div.CodeMirror pre, div.CodeMirror-linenumber, code {
860
- @include code-typography;
861
-}
862
-
863
-div.CodeMirror-linenumber {
864
- text-align: right;
865
-}
866
-
867
-.CodeMirror, div.CodeMirror-gutters, div.highlight {
868
- border: none;
869
-}
870
-
871
-/* hide the cursor. Mostly used when code's in plain JS */
872
-.CodeMirror-readonly div.CodeMirror-cursor {
873
- visibility: hidden;
874
-}
875
-
876
-small code,
877
-li code,
878
-p code {
879
- color: #555;
880
- background-color: rgba(0, 0, 0, .04);
881
- padding: 1px 3px;
882
-}
883
-
884
-small a code,
885
-li a code,
886
-p a code {
887
- color: inherit;
888
-}
889
-
890
-.cm-s-default span.cm-string-2 {
891
- color: inherit;
892
-}
893
-
894
-.playground {
895
- @include clearfix;
896
-}
897
-
898
-.playground-tab {
899
- border-bottom: none !important;
900
- border-radius: 3px 3px 0 0;
901
- padding: 6px 8px;
902
- font-size: 12px;
903
- font-weight: bold;
904
- color: #c2c0bc;
905
- background-color: #f1ede4;
906
- display: inline-block;
907
- cursor: pointer;
908
-}
909
-
910
-.playgroundCode,
911
-.playground-tab,
912
-.playgroundPreview {
913
- border: 1px solid rgba(16,16,16,0.1);
914
-}
915
-
916
-.playground-tab-active {
917
- color: $darkestColor;
918
-}
919
-
920
-.playgroundCode {
921
- border-radius: 0 3px 3px 3px;
922
- float: left;
923
- overflow: hidden;
924
- width: 100%;
925
- max-width: $twoColumnWidth;
926
-}
927
-
928
-.playgroundPreview {
929
- background-color: white;
930
- border-radius: 3px;
931
- float: right;
932
- padding: 15px 20px;
933
- width: $columnWidth;
934
- word-wrap: break-word;
935
-}
936
-
937
-.playgroundError {
938
- color: darken($primary, 5%);
939
- font-size: 15px;
940
-}
941
-
942
-.MarkdownEditor textarea {
943
- width: 100%;
944
- height: 100px
945
-}
946
-
947
-.MarkdownEditor .content {
948
- white-space: pre-wrap;
949
- word-break: break-word;
950
-}
951
-
952
-.hll {
953
- background-color: #f7ebc6;
954
- border-left: 5px solid #f7d87c;
955
- display: block;
956
- margin-left: -14px;
957
- margin-right: -14px;
958
- padding-left: 9px;
959
-}
960
-
961
-/* CodeMirror doesn't support <jsx> syntax. Instead of highlighting it
962
- as error, just ignore it */
963
-.highlight .javascript .err {
964
- background-color: transparent;
965
- color: inherit;
966
-}
967
-
968
-.highlight {
969
- position: relative;
970
- margin-bottom: 14px;
971
- padding: 30px 14px 14px;
972
- border: none;
973
- border-radius: 0;
974
- overflow: auto;
975
-}
976
-
977
-
978
-.highlight pre {
979
- padding: 0;
980
- margin-top: 0;
981
- margin-bottom: 0;
982
- background-color: transparent;
983
- border: 0;
984
- float: left;
985
- min-width: 100%;
986
-}
987
-
988
-.highlight pre code {
989
- /* Respect line-height defined in <code> styles above */
990
- display: block;
991
-
992
- /* Cancel out styles for `li code` in case we have a <pre> within an <li>. */
993
- background: none;
994
- padding: 0;
995
-}
996
-
997
-.highlight pre .lineno {
998
- display: inline-block;
999
- width: 22px;
1000
- padding-right: 5px;
1001
- margin-right: 10px;
1002
- color: #bebec5;
1003
- text-align: right;
1004
-}
1005
-
1006
-/* Echo out a label for the example */
1007
-
1008
-.highlight:after {
1009
- position: absolute;
1010
- top: 0;
1011
- right: 0;
1012
- left: 0;
1013
- padding: 3px 7px;
1014
- font-size: 12px;
1015
- font-weight: bold;
1016
- color: #c2c0bc;
1017
- background-color: #f1ede4;
1018
- content: "Code";
1019
-}
1020
-
1021
-.downloadCenter {
1022
- text-align: center;
1023
- margin-top: 20px;
1024
- margin-bottom: 25px;
1025
-}
1026
-
1027
-.downloadSection:hover {
1028
- text-decoration: none !important;
1029
-}
1030
-
1031
-@include bp-large {
1032
- .nav-main {
1033
- position: relative;
1034
- }
1035
- .container {
1036
- padding-top: 0;
1037
- }
1038
-}
1039
-
1040
-.post {
1041
- margin-bottom: 30px;
1042
-}
1043
-
1044
-.post img {
1045
- max-width: 100%;
1046
- height: auto;
1047
-}
1048
-
1049
-.pagination {
1050
- margin-bottom: 30px;
1051
-
1052
- /* Trick to get the wrapper to expand to fit floating elements */
1053
- width: 100%;
1054
- overflow: hidden;
1055
-
1056
- .next {
1057
- float: right;
1058
- }
1059
-}
1060
-
1061
-// Twitter embeds. Need to !important because they inline margin on the iframe.
1062
-div[data-twttr-id] iframe {
1063
- margin: 10px auto !important;
1064
- width: 100% !important;
1065
-}
1066
-
1067
-.fb_iframe_widget {
1068
- max-width: 100%;
1069
-
1070
- * {
1071
- max-width: 100%;
1072
- }
1073
-}
1074
-
1075
-#twitter-widget-0 {
1076
- @include bp-large {
1077
- display: none !important; // Need !important because they inline display on the iframe.
1078
- }
1079
-}
1080
-
1081
-/* Acknowledgements */
1082
-
1083
-.three-column {
1084
- @include clearfix;
1085
-}
1086
-
1087
-.three-column > ul {
1088
- float: left;
1089
- margin-left: 30px;
1090
- width: 190px;
1091
-}
1092
-
1093
-.three-column > ul:first-child {
1094
- margin-left: 20px;
1095
-}
1096
-
1097
-
1098
-/* Algolia Doc Search */
1099
-
1100
-input#algolia-doc-search {
1101
- background: transparent url('/react/img/search.png') no-repeat 10px center;
1102
- background-size: 16px 16px;
1103
-
1104
- position: relative;
1105
- vertical-align: top;
1106
- margin-left: 10px;
1107
- padding: 0 10px;
1108
- padding-left: 35px;
1109
- height: 30px;
1110
- margin-top: 10px;
1111
- font-size: 16px;
1112
- line-height: 20px;
1113
- background-color: #333;
1114
- border-radius: 4px;
1115
- color: white;
1116
- outline: none;
1117
- width: 170px;
1118
-
1119
- transition: width .2s ease;
1120
-
1121
- &:focus {
1122
- width: 240px;
1123
- }
1124
-
1125
- @include bp-large {
1126
- background-color: transparent;
1127
- width: 0;
1128
- cursor: pointer;
1129
-
1130
- &:focus {
1131
- width: 200px;
1132
- background-color: #333;
1133
- }
1134
- }
1135
-}
1136
-
1137
-.algolia-autocomplete .aa-dropdown-menu {
1138
- margin-left: -110px;
1139
- margin-top: -4px;
1140
-}
1141
-
1142
-.algolia-autocomplete {
1143
- vertical-align: top;
1144
- height: 53px;
1145
-}
1146
-
1147
-.algolia-docsearch-suggestion {
1148
- border-bottom-color: #c05b4d;
1149
-}
1150
-
1151
-.algolia-docsearch-suggestion--category-header {
1152
- background-color: #cc7a6f;
1153
-}
1154
-
1155
-.algolia-docsearch-suggestion--highlight {
1156
- color: #c05b4d;
1157
-}
1158
-
1159
-.algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight {
1160
- background-color: #c05b4d;
1161
-}
1162
-
1163
-.aa-cursor .algolia-docsearch-suggestion--content {
1164
- color: #c05b4d;
1165
-}
1166
-
1167
-.aa-cursor .algolia-docsearch-suggestion {
1168
- background: #f1f3f5;
1169
-}
1170
-
1171
-/**
1172
- * Footer
1173
- */
1174
-
1175
-footer.nav-footer {
1176
- box-sizing: border-box;
1177
- border: none;
1178
- font-weight: 300;
1179
- color: #202020;
1180
- font-size: 15px;
1181
- line-height: 24px;
1182
- background: #2D2D2D;
1183
- box-shadow: inset 0 10px 10px -5px #0d1116;
1184
- padding-top: 2em;
1185
- padding-bottom: 2em;
1186
- -webkit-font-smoothing: antialiased;
1187
- -moz-osx-font-smoothing: grayscale;
1188
-}
1189
-footer .sitemap {
1190
- display: flex;
1191
- display: -ms-flexbox;
1192
- justify-content: space-between;
1193
- max-width: 1080px;
1194
- margin: 0 auto 3em;
1195
-}
1196
-footer .sitemap div {
1197
- flex: 1;
1198
- -ms-flex: 1;
1199
-}
1200
-footer .sitemap .nav-home {
1201
- display: table;
1202
- margin: -12px 20px 0 0;
1203
- padding: 10px;
1204
- width: 60px;
1205
- height: 60px;
1206
- transition: opacity 0.15s ease-in-out;
1207
- background: url("../img/logo_small_gray.png") no-repeat content-box;
1208
-}
1209
-footer .sitemap .nav-home:hover,
1210
-footer .sitemap .nav-home:focus {
1211
- background-image: url("../img/logo_small.png");
1212
-}
1213
-@media screen and (max-width: 740px) {
1214
- footer .sitemap {
1215
- display: none;
1216
- }
1217
-}
1218
-
1219
-footer .sitemap a {
1220
- color: white;
1221
- display: table;
1222
- margin: 2px -10px;
1223
- padding: 3px 10px;
1224
-}
1225
-footer .sitemap a:hover,
1226
-footer .sitemap a:focus {
1227
- color: #61dafb;
1228
- text-decoration: none;
1229
-}
1230
-footer .sitemap h6 > a:hover,
1231
-footer .sitemap h6 > a:focus {
1232
- color: #61dafb;
1233
- text-decoration: none;
1234
-}
1235
-footer .sitemap h5,
1236
-footer .sitemap h6 {
1237
- margin: 0 0 10px;
1238
-}
1239
-footer .sitemap h5,
1240
-footer .sitemap h6,
1241
-footer .sitemap h5 > a,
1242
-footer .sitemap h6 > a {
1243
- color: white;
1244
-}
1245
-footer .sitemap h5 > a,
1246
-footer .sitemap h6 > a {
1247
- margin: 0 -10px;
1248
-}
1249
-footer .fbOpenSource {
1250
- display: block;
1251
- margin: 1em auto;
1252
- opacity: 0.4;
1253
- transition: opacity 0.15s ease-in-out;
1254
- width: 170px;
1255
-}
1256
-footer .fbOpenSource:hover {
1257
- opacity: 1.0;
1258
-}
1259
-footer .copyright {
1260
- color: rgba(255, 255, 255, 0.4);
1261
- text-align: center;
1262
-}
docs/css/syntax.css
deleted
-409
@@ -1,409 +0,0 @@
1
-.highlight pre code {
2
- color: #637c84;
3
-}
4
-
5
-.highlight {
6
- color: #333333;
7
- background: #f8f5ec;
8
-}
9
-
10
-.highlight .c {
11
- color: #93a1a1;
12
-}
13
-
14
-
15
-.highlight .g {
16
- color: #637c84;
17
-}
18
-
19
-/* Generic */
20
-
21
-.highlight .k {
22
- color: #859900;
23
-}
24
-
25
-/* Keyword */
26
-
27
-.highlight .l {
28
- color: #637c84;
29
-}
30
-
31
-/* Literal */
32
-
33
-.highlight .n {
34
- color: #637c84;
35
-}
36
-
37
-/* Name */
38
-
39
-.highlight .o {
40
- color: #859900;
41
-}
42
-
43
-/* Operator */
44
-
45
-.highlight .x {
46
- color: #cc7a6f;
47
-}
48
-
49
-/* Other */
50
-
51
-.highlight .p {
52
- color: #637c84;
53
-}
54
-
55
-/* Punctuation */
56
-
57
-.highlight .cm {
58
- color: #93a1a1;
59
-}
60
-
61
-/* Comment.Multiline */
62
-
63
-.highlight .cp {
64
- color: #859900;
65
-}
66
-
67
-/* Comment.Preproc */
68
-
69
-.highlight .c1 {
70
- color: #93a1a1;
71
-}
72
-
73
-/* Comment.Single */
74
-
75
-.highlight .cs {
76
- color: #859900;
77
-}
78
-
79
-/* Comment.Special */
80
-
81
-.highlight .gd {
82
- color: #36958e;
83
-}
84
-
85
-/* Generic.Deleted */
86
-
87
-.highlight .ge {
88
- font-style: italic;
89
- color: #637c84;
90
-}
91
-
92
-/* Generic.Emph */
93
-
94
-.highlight .gr {
95
- color: #dc322f;
96
-}
97
-
98
-/* Generic.Error */
99
-
100
-.highlight .gh {
101
- color: #cc7a6f;
102
-}
103
-
104
-/* Generic.Heading */
105
-
106
-.highlight .gi {
107
- color: #859900;
108
-}
109
-
110
-/* Generic.Inserted */
111
-
112
-.highlight .go {
113
- color: #637c84;
114
-}
115
-
116
-/* Generic.Output */
117
-
118
-.highlight .gp {
119
- color: #637c84;
120
-}
121
-
122
-/* Generic.Prompt */
123
-
124
-.highlight .gs {
125
- font-weight: bold;
126
- color: #637c84;
127
-}
128
-
129
-/* Generic.Strong */
130
-
131
-.highlight .gu {
132
- color: #cc7a6f;
133
-}
134
-
135
-/* Generic.Subheading */
136
-
137
-.highlight .gt {
138
- color: #637c84;
139
-}
140
-
141
-/* Generic.Traceback */
142
-
143
-.highlight .kc {
144
- color: #cc7a6f;
145
-}
146
-
147
-/* Keyword.Constant */
148
-
149
-.highlight .kd {
150
- color: #268bd2;
151
-}
152
-
153
-/* Keyword.Declaration */
154
-
155
-.highlight .kn {
156
- color: #859900;
157
-}
158
-
159
-/* Keyword.Namespace */
160
-
161
-.highlight .kp {
162
- color: #859900;
163
-}
164
-
165
-/* Keyword.Pseudo */
166
-
167
-.highlight .kr {
168
- color: #268bd2;
169
-}
170
-
171
-/* Keyword.Reserved */
172
-
173
-.highlight .kt {
174
- color: #dc322f;
175
-}
176
-
177
-/* Keyword.Type */
178
-
179
-.highlight .ld {
180
- color: #637c84;
181
-}
182
-
183
-/* Literal.Date */
184
-
185
-.highlight .m {
186
- color: #36958e;
187
-}
188
-
189
-/* Literal.Number */
190
-
191
-.highlight .s {
192
- color: #36958e;
193
-}
194
-
195
-/* Literal.String */
196
-
197
-.highlight .na {
198
- color: #637c84;
199
-}
200
-
201
-/* Name.Attribute */
202
-
203
-.highlight .nb {
204
- color: #b58900;
205
-}
206
-
207
-/* Name.Builtin */
208
-
209
-.highlight .nc {
210
- color: #268bd2;
211
-}
212
-
213
-/* Name.Class */
214
-
215
-.highlight .no {
216
- color: #cc7a6f;
217
-}
218
-
219
-/* Name.Constant */
220
-
221
-.highlight .nd {
222
- color: #268bd2;
223
-}
224
-
225
-/* Name.Decorator */
226
-
227
-.highlight .ni {
228
- color: #cc7a6f;
229
-}
230
-
231
-/* Name.Entity */
232
-
233
-.highlight .ne {
234
- color: #cc7a6f;
235
-}
236
-
237
-/* Name.Exception */
238
-
239
-.highlight .nf {
240
- color: #268bd2;
241
-}
242
-
243
-/* Name.Function */
244
-
245
-.highlight .nl {
246
- color: #637c84;
247
-}
248
-
249
-/* Name.Label */
250
-
251
-.highlight .nn {
252
- color: #637c84;
253
-}
254
-
255
-/* Name.Namespace */
256
-
257
-.highlight .nx {
258
- color: #637c84;
259
-}
260
-
261
-/* Name.Other */
262
-
263
-.highlight .py {
264
- color: #637c84;
265
-}
266
-
267
-/* Name.Property */
268
-
269
-.highlight .nt {
270
- color: #268bd2;
271
-}
272
-
273
-/* Name.Tag */
274
-
275
-.highlight .nv {
276
- color: #268bd2;
277
-}
278
-
279
-/* Name.Variable */
280
-
281
-.highlight .ow {
282
- color: #859900;
283
-}
284
-
285
-/* Operator.Word */
286
-
287
-.highlight .w {
288
- color: #637c84;
289
-}
290
-
291
-/* Text.Whitespace */
292
-
293
-.highlight .mf {
294
- color: #36958e;
295
-}
296
-
297
-/* Literal.Number.Float */
298
-
299
-.highlight .mh {
300
- color: #36958e;
301
-}
302
-
303
-/* Literal.Number.Hex */
304
-
305
-.highlight .mi {
306
- color: #36958e;
307
-}
308
-
309
-/* Literal.Number.Integer */
310
-
311
-.highlight .mo {
312
- color: #36958e;
313
-}
314
-
315
-/* Literal.Number.Oct */
316
-
317
-.highlight .sb {
318
- color: #93a1a1;
319
-}
320
-
321
-/* Literal.String.Backtick */
322
-
323
-.highlight .sc {
324
- color: #36958e;
325
-}
326
-
327
-/* Literal.String.Char */
328
-
329
-.highlight .sd {
330
- color: #637c84;
331
-}
332
-
333
-/* Literal.String.Doc */
334
-
335
-.highlight .s2 {
336
- color: #36958e;
337
-}
338
-
339
-/* Literal.String.Double */
340
-
341
-.highlight .se {
342
- color: #cc7a6f;
343
-}
344
-
345
-/* Literal.String.Escape */
346
-
347
-.highlight .sh {
348
- color: #637c84;
349
-}
350
-
351
-/* Literal.String.Heredoc */
352
-
353
-.highlight .si {
354
- color: #36958e;
355
-}
356
-
357
-/* Literal.String.Interpol */
358
-
359
-.highlight .sx {
360
- color: #36958e;
361
-}
362
-
363
-/* Literal.String.Other */
364
-
365
-.highlight .sr {
366
- color: #dc322f;
367
-}
368
-
369
-/* Literal.String.Regex */
370
-
371
-.highlight .s1 {
372
- color: #36958e;
373
-}
374
-
375
-/* Literal.String.Single */
376
-
377
-.highlight .ss {
378
- color: #36958e;
379
-}
380
-
381
-/* Literal.String.Symbol */
382
-
383
-.highlight .bp {
384
- color: #268bd2;
385
-}
386
-
387
-/* Name.Builtin.Pseudo */
388
-
389
-.highlight .vc {
390
- color: #268bd2;
391
-}
392
-
393
-/* Name.Variable.Class */
394
-
395
-.highlight .vg {
396
- color: #268bd2;
397
-}
398
-
399
-/* Name.Variable.Global */
400
-
401
-.highlight .vi {
402
- color: #268bd2;
403
-}
404
-
405
-/* Name.Variable.Instance */
406
-
407
-.highlight .il {
408
- color: #36958e;
409
-}
docs/docs/accessibility.md
deleted
-278
@@ -1,278 +0,0 @@
1
----
2
-id: accessibility
3
-title: Accessibility
4
-permalink: docs/accessibility.html
5
-redirect_from:
6
- - "docs/index.html"
7
----
8
-
9
-## Why Accessibility?
10
-
11
-Web accessibility (also referred to as [**a11y**](https://en.wiktionary.org/wiki/a11y)) is the design and creation of websites that can be used by everyone. Accessibility support is necessary to allow assistive technology to interpret web pages.
12
-
13
-React fully supports building accessible websites, often by using standard HTML techniques.
14
-
15
-## Standards and Guidelines
16
-
17
-### WCAG
18
-
19
-The [Web Content Accessibility Guidelines](https://www.w3.org/WAI/intro/wcag) provides guidelines for creating accessible web sites.
20
-
21
-The following WCAG checklists provide an overview:
22
-
23
-- [WCAG checklist from Wuhcag](https://www.wuhcag.com/wcag-checklist/)
24
-- [WCAG checklist from WebAIM](http://webaim.org/standards/wcag/checklist)
25
-- [Checklist from The A11Y Project](http://a11yproject.com/checklist.html)
26
-
27
-### WAI-ARIA
28
-
29
-The [Web Accessibility Initiative - Accessible Rich Internet Applications](https://www.w3.org/WAI/intro/aria) document contains techniques for building fully accessible JavaScript widgets.
30
-
31
-Note that all `aria-*` HTML attributes are fully supported in JSX. Whereas most DOM properties and attributes in React are camelCased, these attributes should be lowercased:
32
-
33
-```javascript{3,4}
34
-<input
35
- type="text"
36
- aria-label={labelText}
37
- aria-required="true"
38
- onChange={onchangeHandler}
39
- value={inputValue}
40
- name="name"
41
-/>
42
-```
43
-
44
-## Accessible Forms
45
-
46
-### Labeling
47
-Every HTML form control, such as `<input>` and `<textarea>`, needs to be labeled accessibly. We need to provide descriptive labels that are also exposed to screen readers.
48
-
49
-The following resources show us how to do this:
50
-
51
-- [The W3C shows us how to label elements](https://www.w3.org/WAI/tutorials/forms/labels/)
52
-- [WebAIM shows us how to label elements](http://webaim.org/techniques/forms/controls)
53
-- [The Paciello Group explains accessible names](https://www.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/)
54
-
55
-Although these standard HTML practices can be directly used in React, note that the `for` attribute is written as `htmlFor` in JSX:
56
-
57
-```javascript{1}
58
-<label htmlFor="namedInput">Name:</label>
59
-<input id="namedInput" type="text" name="name"/>
60
-```
61
-
62
-### Notifying the user of errors
63
-
64
-Error situations need to be understood by all users. The following link shows us how to expose error texts to screen readers as well:
65
-
66
-- [The W3C demonstrates user notifications](https://www.w3.org/WAI/tutorials/forms/notifications/)
67
-- [WebAIM looks at form validation](http://webaim.org/techniques/formvalidation/)
68
-
69
-## Focus Control
70
-
71
-Ensure that your web application can be fully operated with the keyboard only:
72
-
73
-- [WebAIM talks about keyboard accessibility](http://webaim.org/techniques/keyboard/)
74
-
75
-### Keyboard focus and focus outline
76
-
77
-Keyboard focus refers to the current element in the DOM that is selected to accept input from the keyboard. We see it everywhere as a focus outline similar to that shown in the following image:
78
-
79
-<img src="../img/docs/keyboard-focus.png" alt="Blue keyboard focus outline around a selected link." />
80
-
81
-Only ever use CSS that removes this outline, for example by setting `outline: 0`, if you are replacing it with another focus outline implementation.
82
-
83
-### Mechanisms to skip to desired content
84
-
85
-Provide a mechanism to allow users to skip past navigation sections in your application as this assists and speeds up keyboard navigation.
86
-
87
-Skiplinks or Skip Navigation Links are hidden navigation links that only become visible when keyboard users interact with the page. They are very easy to implement with
88
-internal page anchors and some styling:
89
-
90
-- [WebAIM - Skip Navigation Links](http://webaim.org/techniques/skipnav/)
91
-
92
-Also use landmark elements and roles, such as `<main>` and `<aside>`, to demarcate page regions as assistive technology allow the user to quickly navigate to these sections.
93
-
94
-Read more about the use of these elements to enhance accessibility here:
95
-
96
-- [Deque University - HTML 5 and ARIA Landmarks](https://dequeuniversity.com/assets/html/jquery-summit/html5/slides/landmarks.html)
97
-
98
-### Programmatically managing focus
99
-
100
-Our React applications continuously modify the HTML DOM during runtime, sometimes leading to keyboard focus being lost or set to an unexpected element. In order to repair this,
101
-we need to programmatically nudge the keyboard focus in the right direction. For example, by resetting keyboard focus to a button that opened a modal window after that modal window is closed.
102
-
103
-The Mozilla Developer Network takes a look at this and describes how we can build [keyboard-navigable JavaScript widgets](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets).
104
-
105
-To set focus in React, we can use [Refs to Components](refs-and-the-dom.html).
106
-
107
-Using this, we first create a ref to an element in the JSX of a component class:
108
-
109
-```javascript{2-3,7}
110
-render() {
111
- // Use the `ref` callback to store a reference to the text input DOM
112
- // element in an instance field (for example, this.textInput).
113
- return (
114
- <input
115
- type="text"
116
- ref={(input) => { this.textInput = input; }} />
117
- );
118
-}
119
-```
120
-
121
-Then we can focus it elsewhere in our component when needed:
122
-
123
- ```javascript
124
- focus() {
125
- // Explicitly focus the text input using the raw DOM API
126
- this.textInput.focus();
127
- }
128
- ```
129
-
130
-A great focus management example is the [react-aria-modal](https://github.com/davidtheclark/react-aria-modal). This is a relatively rare example of a fully accessible modal window. Not only does it set initial focus on
131
-the cancel button (preventing the keyboard user from accidentally activating the success action) and trap keyboard focus inside the modal, it also resets focus back to the element that
132
-initially triggered the modal.
133
-
134
->Note:
135
->
136
->While this is a very important accessibility feature, it is also a technique that should be used judiciously. Use it to repair the keyboard focus flow when it is disturbed, not to try and anticipate how
137
->users want to use applications.
138
-
139
-## More Complex Widgets
140
-
141
-A more complex user experience should not mean a less accessible one. Whereas accessibility is most easily achieved by coding as close to HTML as possible,
142
-even the most complex widget can be coded accessibly.
143
-
144
-Here we require knowledge of [ARIA Roles](https://www.w3.org/TR/wai-aria/roles) as well as [ARIA States and Properties](https://www.w3.org/TR/wai-aria/states_and_properties).
145
-These are toolboxes filled with HTML attributes that are fully supported in JSX and enable us to construct fully accessible, highly functional React components.
146
-
147
-Each type of widget has a specific design pattern and is expected to function in a certain way by users and user agents alike:
148
-
149
-- [WAI-ARIA Authoring Practices - Design Patterns and Widgets](https://www.w3.org/TR/wai-aria-practices/#aria_ex)
150
-- [Heydon Pickering - ARIA Examples](http://heydonworks.com/practical_aria_examples/)
151
-- [Inclusive Components](https://inclusive-components.design/)
152
-
153
-## Other Points for Consideration
154
-
155
-### Setting the language
156
-
157
-Indicate the human language of page texts as screen reader software uses this to select the correct voice settings:
158
-
159
-- [WebAIM - Document Language](http://webaim.org/techniques/screenreader/#language)
160
-
161
-### Setting the document title
162
-
163
-Set the document `<title>` to correctly describe the current page content as this ensures that the user remains aware of the current page context:
164
-
165
-- [WCAG - Understanding the Document Title Requirement](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html)
166
-
167
-We can set this in React using the [React Document Title Component](https://github.com/gaearon/react-document-title).
168
-
169
-### Color contrast
170
-
171
-Ensure that all readable text on your website has sufficient color contrast to remain maximally readable by users with low vision:
172
-
173
-- [WCAG - Understanding the Color Contrast Requirement](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
174
-- [Everything About Color Contrast And Why You Should Rethink It](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/)
175
-- [A11yProject - What is Color Contrast](http://a11yproject.com/posts/what-is-color-contrast/)
176
-
177
-It can be tedious to manually calculate the proper color combinations for all cases in your website so instead, you can [calculate an entire accessible color palette with Colorable](http://jxnblk.com/colorable/).
178
-
179
-Both the aXe and WAVE tools mentioned below also include color contrast tests and will report on contrast errors.
180
-
181
-If you want to extend your contrast testing abilities you can use these tools:
182
-
183
-- [WebAIM - Color Contrast Checker](http://webaim.org/resources/contrastchecker/)
184
-- [The Paciello Group - Color Contrast Analyzer](https://www.paciellogroup.com/resources/contrastanalyser/)
185
-
186
-## Development and Testing Tools
187
-
188
-There are a number of tools we can use to assist in the creation of accessible web applications.
189
-
190
-### The keyboard
191
-
192
-By far the easiest and also one of the most important checks is to test if your entire website can be reached and used with the keyboard alone. Do this by:
193
-
194
-1. Plugging out your mouse.
195
-1. Using `Tab` and `Shift+Tab` to browse.
196
-1. Using `Enter` to activate elements.
197
-1. Where required, using your keyboard arrow keys to interact with some elements, such as menus and dropdowns.
198
-
199
-### Development assistance
200
-
201
-We can check some accessibility features directly in our JSX code. Often intellisense checks are already provided in JSX aware IDE's for the ARIA roles, states and properties. We also
202
-have access to the following tool:
203
-
204
-#### eslint-plugin-jsx-a11y
205
-
206
-The [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) plugin for ESLint provides AST linting feedback regarding accessibility issues in your JSX. Many
207
-IDE's allow you to integrate these findings directly into code analysis and source code windows.
208
-
209
-[Create React App](https://github.com/facebookincubator/create-react-app) has this plugin with a subset of rules activated. If you want to enable even more accessibility rules,
210
-you can create an `.eslintrc` file in the root of your project with this content:
211
-
212
- ```json
213
- {
214
- "extends": ["react-app", "plugin:jsx-a11y/recommended"],
215
- "plugins": ["jsx-a11y"]
216
- }
217
- ```
218
-
219
-### Testing accessibility in the browser
220
-
221
-A number of tools exist that can run accessibility audits on web pages in your browser. Please use them in combination with other accessibility checks mentioned here as they can only
222
-test the technical accessibility of your HTML.
223
-
224
-#### aXe, aXe-core and react-axe
225
-
226
-Deque Systems offers [aXe-core](https://www.deque.com/products/axe-core/) for automated and end-to-end accessibility tests of your applications. This module includes integrations for Selenium.
227
-
228
-[The Accessibility Engine](https://www.deque.com/products/axe/) or aXe, is an accessibility inspector browser extension built on `aXe-core`.
229
-
230
-You can also use the [react-axe](https://github.com/dylanb/react-axe) module to report these accessibility findings directly to the console while developing and debugging.
231
-
232
-#### WebAIM WAVE
233
-
234
-The [Web Accessibility Evaluation Tool](http://wave.webaim.org/extension/) is another accessibility browser extension.
235
-
236
-#### Accessibility inspectors and the Accessibility Tree
237
-
238
-[The Accessibility Tree](https://www.paciellogroup.com/blog/2015/01/the-browser-accessibility-tree/) is a subset of the DOM tree that contains accessible objects for every DOM element that should be exposed
239
-to assistive technology, such as screen readers.
240
-
241
-In some browsers we can easily view the accessibility information for each element in the accessibility tree:
242
-
243
-- [Activate the Accessibility Inspector in Chrome](https://gist.github.com/marcysutton/0a42f815878c159517a55e6652e3b23a)
244
-- [Using the Accessibility Inspector in OS X Safari](https://developer.apple.com/library/content/documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXTestingApps.html)
245
-
246
-### Screen readers
247
-
248
-Testing with a screen reader should form part of your accessibility tests.
249
-
250
-Please note that browser / screen reader combinations matter. It is recommended that you test your application in the browser best suited to your screen reader of choice.
251
-
252
-#### NVDA in Firefox
253
-
254
-[NonVisual Desktop Access](https://www.nvaccess.org/) or NVDA is an open source Windows screen reader that is widely used.
255
-
256
-Refer to the following guides on how to best use NVDA:
257
-
258
-- [WebAIM - Using NVDA to Evaluate Web Accessibility](http://webaim.org/articles/nvda/)
259
-- [Deque - NVDA Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts)
260
-
261
-#### VoiceOver in Safari
262
-
263
-VoiceOver is an integrated screen reader on Apple devices.
264
-
265
-Refer to the following guides on how activate and use VoiceOver:
266
-
267
-- [WebAIM - Using VoiceOver to Evaluate Web Accessibility](http://webaim.org/articles/voiceover/)
268
-- [Deque - VoiceOver for OSX Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts)
269
-- [Deque - VoiceOver for iOS Shortcuts](https://dequeuniversity.com/screenreaders/voiceover-ios-shortcuts)
270
-
271
-#### JAWS in Internet Explorer
272
-
273
-[Job Access With Speech](http://www.freedomscientific.com/Products/Blindness/JAWS) or JAWS, is a prolifically used screen reader on Windows.
274
-
275
-Refer to the following guides on how to best use JAWS:
276
-
277
-- [WebAIM - Using JAWS to Evaluate Web Accessibility](http://webaim.org/articles/jaws/)
278
-- [Deque - JAWS Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/jaws-keyboard-shortcuts)
docs/docs/addons-animation.md
deleted
-349
@@ -1,349 +0,0 @@
1
----
2
-id: animation
3
-title: Animation Add-Ons
4
-permalink: docs/animation.html
5
-layout: docs
6
-category: Add-Ons
7
-redirect_from:
8
- - "docs/animation-ja-JP.html"
9
- - "docs/animation-ko-KR.html"
10
- - "docs/animation-zh-CN.html"
11
----
12
-
13
-> Note:
14
->
15
-> `ReactTransitionGroup` and `ReactCSSTransitionGroup` have been moved to the [`react-transition-group`](https://github.com/reactjs/react-transition-group/tree/v1-stable) package that is maintained by the community. Its 1.x branch is completely API-compatible with the existing addons. Please file bugs and feature requests in the [new repository](https://github.com/reactjs/react-transition-group/tree/v1-stable).
16
-
17
-The [`ReactTransitionGroup`](#low-level-api-reacttransitiongroup) add-on component is a low-level API for animation, and [`ReactCSSTransitionGroup`](#high-level-api-reactcsstransitiongroup) is an add-on component for easily implementing basic CSS animations and transitions.
18
-
19
-## High-level API: ReactCSSTransitionGroup
20
-
21
-`ReactCSSTransitionGroup` is a high-level API based on [`ReactTransitionGroup`](#low-level-api-reacttransitiongroup) and is an easy way to perform CSS transitions and animations when a React component enters or leaves the DOM. It's inspired by the excellent [ng-animate](https://docs.angularjs.org/api/ngAnimate) library.
22
-
23
-**Importing**
24
-
25
-```javascript
26
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; // ES6
27
-var ReactCSSTransitionGroup = require('react-addons-css-transition-group'); // ES5 with npm
28
-```
29
-
30
-```javascript{31-36}
31
-class TodoList extends React.Component {
32
- constructor(props) {
33
- super(props);
34
- this.state = {items: ['hello', 'world', 'click', 'me']};
35
- this.handleAdd = this.handleAdd.bind(this);
36
- }
37
-
38
- handleAdd() {
39
- const newItems = this.state.items.concat([
40
- prompt('Enter some text')
41
- ]);
42
- this.setState({items: newItems});
43
- }
44
-
45
- handleRemove(i) {
46
- let newItems = this.state.items.slice();
47
- newItems.splice(i, 1);
48
- this.setState({items: newItems});
49
- }
50
-
51
- render() {
52
- const items = this.state.items.map((item, i) => (
53
- <div key={item} onClick={() => this.handleRemove(i)}>
54
- {item}
55
- </div>
56
- ));
57
-
58
- return (
59
- <div>
60
- <button onClick={this.handleAdd}>Add Item</button>
61
- <ReactCSSTransitionGroup
62
- transitionName="example"
63
- transitionEnterTimeout={500}
64
- transitionLeaveTimeout={300}>
65
- {items}
66
- </ReactCSSTransitionGroup>
67
- </div>
68
- );
69
- }
70
-}
71
-```
72
-
73
-> Note:
74
->
75
-> You must provide [the `key` attribute](/docs/multiple-components.html#dynamic-children) for all children of `ReactCSSTransitionGroup`, even when only rendering a single item. This is how React will determine which children have entered, left, or stayed.
76
-
77
-In this component, when a new item is added to `ReactCSSTransitionGroup` it will get the `example-enter` CSS class and the `example-enter-active` CSS class added in the next tick. This is a convention based on the `transitionName` prop.
78
-
79
-You can use these classes to trigger a CSS animation or transition. For example, try adding this CSS and adding a new list item:
80
-
81
-```css
82
-.example-enter {
83
- opacity: 0.01;
84
-}
85
-
86
-.example-enter.example-enter-active {
87
- opacity: 1;
88
- transition: opacity 500ms ease-in;
89
-}
90
-
91
-.example-leave {
92
- opacity: 1;
93
-}
94
-
95
-.example-leave.example-leave-active {
96
- opacity: 0.01;
97
- transition: opacity 300ms ease-in;
98
-}
99
-```
100
-
101
-You'll notice that animation durations need to be specified in both the CSS and the render method; this tells React when to remove the animation classes from the element and -- if it's leaving -- when to remove the element from the DOM.
102
-
103
-### Animate Initial Mounting
104
-
105
-`ReactCSSTransitionGroup` provides the optional prop `transitionAppear`, to add an extra transition phase at the initial mount of the component. There is generally no transition phase at the initial mount as the default value of `transitionAppear` is `false`. The following is an example which passes the prop `transitionAppear` with the value `true`.
106
-
107
-```javascript{5-6}
108
-render() {
109
- return (
110
- <ReactCSSTransitionGroup
111
- transitionName="example"
112
- transitionAppear={true}
113
- transitionAppearTimeout={500}
114
- transitionEnter={false}
115
- transitionLeave={false}>
116
- <h1>Fading at Initial Mount</h1>
117
- </ReactCSSTransitionGroup>
118
- );
119
-}
120
-```
121
-
122
-During the initial mount `ReactCSSTransitionGroup` will get the `example-appear` CSS class and the `example-appear-active` CSS class added in the next tick.
123
-
124
-```css
125
-.example-appear {
126
- opacity: 0.01;
127
-}
128
-
129
-.example-appear.example-appear-active {
130
- opacity: 1;
131
- transition: opacity .5s ease-in;
132
-}
133
-```
134
-
135
-At the initial mount, all children of the `ReactCSSTransitionGroup` will `appear` but not `enter`. However, all children later added to an existing `ReactCSSTransitionGroup` will `enter` but not `appear`.
136
-
137
-> Note:
138
->
139
-> The prop `transitionAppear` was added to `ReactCSSTransitionGroup` in version `0.13`. To maintain backwards compatibility, the default value is set to `false`.
140
->
141
-> However, the default values of `transitionEnter` and `transitionLeave` are `true` so you must specify `transitionEnterTimeout` and `transitionLeaveTimeout` by default. If you don't need either enter or leave animations, pass `transitionEnter={false}` or `transitionLeave={false}`.
142
-
143
-### Custom Classes
144
-
145
-It is also possible to use custom class names for each of the steps in your transitions. Instead of passing a string into transitionName you can pass an object containing either the `enter` and `leave` class names, or an object containing the `enter`, `enter-active`, `leave-active`, and `leave` class names. If only the enter and leave classes are provided, the enter-active and leave-active classes will be determined by appending '-active' to the end of the class name. Here are two examples using custom classes:
146
-
147
-```javascript
148
-// ...
149
-<ReactCSSTransitionGroup
150
- transitionName={ {
151
- enter: 'enter',
152
- enterActive: 'enterActive',
153
- leave: 'leave',
154
- leaveActive: 'leaveActive',
155
- appear: 'appear',
156
- appearActive: 'appearActive'
157
- } }>
158
- {item}
159
-</ReactCSSTransitionGroup>
160
-
161
-<ReactCSSTransitionGroup
162
- transitionName={ {
163
- enter: 'enter',
164
- leave: 'leave',
165
- appear: 'appear'
166
- } }>
167
- {item2}
168
-</ReactCSSTransitionGroup>
169
-// ...
170
-```
171
-
172
-### Animation Group Must Be Mounted To Work
173
-
174
-In order for it to apply transitions to its children, the `ReactCSSTransitionGroup` must already be mounted in the DOM or the prop `transitionAppear` must be set to `true`.
175
-
176
-The example below would **not** work, because the `ReactCSSTransitionGroup` is being mounted along with the new item, instead of the new item being mounted within it. Compare this to the [Getting Started](#getting-started) section above to see the difference.
177
-
178
-```javascript{4,6,13}
179
-render() {
180
- const items = this.state.items.map((item, i) => (
181
- <div key={item} onClick={() => this.handleRemove(i)}>
182
- <ReactCSSTransitionGroup transitionName="example">
183
- {item}
184
- </ReactCSSTransitionGroup>
185
- </div>
186
- ));
187
-
188
- return (
189
- <div>
190
- <button onClick={this.handleAdd}>Add Item</button>
191
- {items}
192
- </div>
193
- );
194
-}
195
-```
196
-
197
-### Animating One or Zero Items
198
-
199
-In the example above, we rendered a list of items into `ReactCSSTransitionGroup`. However, the children of `ReactCSSTransitionGroup` can also be one or zero items. This makes it possible to animate a single element entering or leaving. Similarly, you can animate a new element replacing the current element. For example, we can implement a simple image carousel like this:
200
-
201
-```javascript{10}
202
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
203
-
204
-function ImageCarousel(props) {
205
- return (
206
- <div>
207
- <ReactCSSTransitionGroup
208
- transitionName="carousel"
209
- transitionEnterTimeout={300}
210
- transitionLeaveTimeout={300}>
211
- <img src={props.imageSrc} key={props.imageSrc} />
212
- </ReactCSSTransitionGroup>
213
- </div>
214
- );
215
-}
216
-```
217
-
218
-### Disabling Animations
219
-
220
-You can disable animating `enter` or `leave` animations if you want. For example, sometimes you may want an `enter` animation and no `leave` animation, but `ReactCSSTransitionGroup` waits for an animation to complete before removing your DOM node. You can add `transitionEnter={false}` or `transitionLeave={false}` props to `ReactCSSTransitionGroup` to disable these animations.
221
-
222
-> Note:
223
->
224
-> When using `ReactCSSTransitionGroup`, there's no way for your components to be notified when a transition has ended or to perform any more complex logic around animation. If you want more fine-grained control, you can use the lower-level `ReactTransitionGroup` API which provides the hooks you need to do custom transitions.
225
-
226
-* * *
227
-
228
-## Low-level API: ReactTransitionGroup
229
-
230
-**Importing**
231
-
232
-```javascript
233
-import ReactTransitionGroup from 'react-addons-transition-group' // ES6
234
-var ReactTransitionGroup = require('react-addons-transition-group') // ES5 with npm
235
-```
236
-
237
-`ReactTransitionGroup` is the basis for animations. When children are declaratively added or removed from it (as in the [example above](#getting-started)), special lifecycle hooks are called on them.
238
-
239
- - [`componentWillAppear()`](#componentwillappear)
240
- - [`componentDidAppear()`](#componentdidappear)
241
- - [`componentWillEnter()`](#componentwillenter)
242
- - [`componentDidEnter()`](#componentdidenter)
243
- - [`componentWillLeave()`](#componentwillleave)
244
- - [`componentDidLeave()`](#componentdidleave)
245
-
246
-#### Rendering a Different Component
247
-
248
-`ReactTransitionGroup` renders as a `span` by default. You can change this behavior by providing a `component` prop. For example, here's how you would render a `<ul>`:
249
-
250
-```javascript{1}
251
-<ReactTransitionGroup component="ul">
252
- {/* ... */}
253
-</ReactTransitionGroup>
254
-```
255
-
256
-Any additional, user-defined, properties will become properties of the rendered component. For example, here's how you would render a `<ul>` with CSS class:
257
-
258
-```javascript{1}
259
-<ReactTransitionGroup component="ul" className="animated-list">
260
- {/* ... */}
261
-</ReactTransitionGroup>
262
-```
263
-
264
-Every DOM component that React can render is available for use. However, `component` does not need to be a DOM component. It can be any React component you want; even ones you've written yourself! Just write `component={List}` and your component will receive `this.props.children`.
265
-
266
-#### Rendering a Single Child
267
-
268
-People often use `ReactTransitionGroup` to animate mounting and unmounting of a single child such as a collapsible panel. Normally `ReactTransitionGroup` wraps all its children in a `span` (or a custom `component` as described above). This is because any React component has to return a single root element, and `ReactTransitionGroup` is no exception to this rule.
269
-
270
-However if you only need to render a single child inside `ReactTransitionGroup`, you can completely avoid wrapping it in a `<span>` or any other DOM component. To do this, create a custom component that renders the first child passed to it directly:
271
-
272
-```javascript
273
-function FirstChild(props) {
274
- const childrenArray = React.Children.toArray(props.children);
275
- return childrenArray[0] || null;
276
-}
277
-```
278
-
279
-Now you can specify `FirstChild` as the `component` prop in `<ReactTransitionGroup>` props and avoid any wrappers in the result DOM:
280
-
281
-```javascript
282
-<ReactTransitionGroup component={FirstChild}>
283
- {someCondition ? <MyComponent /> : null}
284
-</ReactTransitionGroup>
285
-```
286
-
287
-This only works when you are animating a single child in and out, such as a collapsible panel. This approach wouldn't work when animating multiple children or replacing the single child with another child, such as an image carousel. For an image carousel, while the current image is animating out, another image will animate in, so `<ReactTransitionGroup>` needs to give them a common DOM parent. You can't avoid the wrapper for multiple children, but you can customize the wrapper with the `component` prop as described above.
288
-
289
-* * *
290
-
291
-## Reference
292
-
293
-### `componentWillAppear()`
294
-
295
-```javascript
296
-componentWillAppear(callback)
297
-```
298
-
299
-This is called at the same time as `componentDidMount()` for components that are initially mounted in a `TransitionGroup`. It will block other animations from occurring until `callback` is called. It is only called on the initial render of a `TransitionGroup`.
300
-
301
-* * *
302
-
303
-### `componentDidAppear()`
304
-
305
-```javascript
306
-componentDidAppear()
307
-```
308
-
309
-This is called after the `callback` function that was passed to `componentWillAppear` is called.
310
-
311
-* * *
312
-
313
-### `componentWillEnter()`
314
-
315
-```javascript
316
-componentWillEnter(callback)
317
-```
318
-
319
-This is called at the same time as `componentDidMount()` for components added to an existing `TransitionGroup`. It will block other animations from occurring until `callback` is called. It will not be called on the initial render of a `TransitionGroup`.
320
-
321
-* * *
322
-
323
-### `componentDidEnter()`
324
-
325
-```javascript
326
-componentDidEnter()
327
-```
328
-
329
-This is called after the `callback` function that was passed to [`componentWillEnter()`](#componentwillenter) is called.
330
-
331
-* * *
332
-
333
-### `componentWillLeave()`
334
-
335
-```javascript
336
-componentWillLeave(callback)
337
-```
338
-
339
-This is called when the child has been removed from the `ReactTransitionGroup`. Though the child has been removed, `ReactTransitionGroup` will keep it in the DOM until `callback` is called.
340
-
341
-* * *
342
-
343
-### `componentDidLeave()`
344
-
345
-```javascript
346
-componentDidLeave()
347
-```
348
-
349
-This is called when the `willLeave` `callback` is called (at the same time as `componentWillUnmount()`).
docs/docs/addons-create-fragment.md
deleted
-64
@@ -1,64 +0,0 @@
1
----
2
-id: create-fragment
3
-title: Keyed Fragments
4
-permalink: docs/create-fragment.html
5
-layout: docs
6
-category: Add-Ons
7
----
8
-
9
-**Importing**
10
-
11
-```javascript
12
-import createFragment from 'react-addons-create-fragment'; // ES6
13
-var createFragment = require('react-addons-create-fragment'); // ES5 with npm
14
-```
15
-
16
-## Overview
17
-
18
-In most cases, you can use the `key` prop to specify keys on the elements you're returning from `render`. However, this breaks down in one situation: if you have two sets of children that you need to reorder, there's no way to put a key on each set without adding a wrapper element.
19
-
20
-That is, if you have a component such as:
21
-
22
-```js
23
-function Swapper(props) {
24
- let children;
25
- if (props.swapped) {
26
- children = [props.rightChildren, props.leftChildren];
27
- } else {
28
- children = [props.leftChildren, props.rightChildren];
29
- }
30
- return <div>{children}</div>;
31
-}
32
-```
33
-
34
-The children will unmount and remount as you change the `swapped` prop because there aren't any keys marked on the two sets of children.
35
-
36
-To solve this problem, you can use the `createFragment` add-on to give keys to the sets of children.
37
-
38
-#### `Array<ReactNode> createFragment(object children)`
39
-
40
-Instead of creating arrays, we write:
41
-
42
-```javascript
43
-import createFragment from 'react-addons-create-fragment';
44
-
45
-function Swapper(props) {
46
- let children;
47
- if (props.swapped) {
48
- children = createFragment({
49
- right: props.rightChildren,
50
- left: props.leftChildren
51
- });
52
- } else {
53
- children = createFragment({
54
- left: props.leftChildren,
55
- right: props.rightChildren
56
- });
57
- }
58
- return <div>{children}</div>;
59
-}
60
-```
61
-
62
-The keys of the passed object (that is, `left` and `right`) are used as keys for the entire set of children, and the order of the object's keys is used to determine the order of the rendered children. With this change, the two sets of children will be properly reordered in the DOM without unmounting.
63
-
64
-The return value of `createFragment` should be treated as an opaque object; you can use the [`React.Children`](/docs/react-api.html#react.children) helpers to loop through a fragment but should not access it directly. Note also that we're relying on the JavaScript engine preserving object enumeration order here, which is not guaranteed by the spec but is implemented by all major browsers and VMs for objects with non-numeric keys.
docs/docs/addons-perf.md
deleted
-148
@@ -1,148 +0,0 @@
1
----
2
-id: perf
3
-title: Performance Tools
4
-permalink: docs/perf.html
5
-layout: docs
6
-category: Add-Ons
7
----
8
-
9
-> Note:
10
->
11
-> As of React 16, `react-addons-perf` is not supported. Please use [your browser's profiling tools](/docs/optimizing-performance.html#profiling-components-with-the-chrome-performance-tab) to get insight into which components re-render.
12
-
13
-**Importing**
14
-
15
-```javascript
16
-import Perf from 'react-addons-perf'; // ES6
17
-var Perf = require('react-addons-perf'); // ES5 with npm
18
-```
19
-
20
-
21
-## Overview
22
-
23
-React is usually quite fast out of the box. However, in situations where you need to squeeze every ounce of performance out of your app, it provides a [shouldComponentUpdate()](/docs/react-component.html#shouldcomponentupdate) hook where you can add optimization hints to React's diff algorithm.
24
-
25
-In addition to giving you an overview of your app's overall performance, `Perf` is a profiling tool that tells you exactly where you need to put these hooks.
26
-
27
-See these articles for an introduction to React performance tooling:
28
-
29
- - ["How to Benchmark React Components"](https://medium.com/code-life/how-to-benchmark-react-components-the-quick-and-dirty-guide-f595baf1014c)
30
- - ["Performance Engineering with React"](http://benchling.engineering/performance-engineering-with-react/)
31
- - ["A Deep Dive into React Perf Debugging"](http://benchling.engineering/deep-dive-react-perf-debugging/)
32
-
33
-### Development vs. Production Builds
34
-
35
-If you're benchmarking or seeing performance problems in your React apps, make sure you're testing with the [minified production build](/downloads.html). The development build includes extra warnings that are helpful when building your apps, but it is slower due to the extra bookkeeping it does.
36
-
37
-However, the perf tools described on this page only work when using the development build of React. Therefore, the profiler only serves to indicate the _relatively_ expensive parts of your app.
38
-
39
-### Using Perf
40
-
41
-The `Perf` object can be used with React in development mode only. You should not include this bundle when building your app for production.
42
-
43
-#### Getting Measurements
44
-
45
- - [`start()`](#start)
46
- - [`stop()`](#stop)
47
- - [`getLastMeasurements()`](#getlastmeasurements)
48
-
49
-#### Printing Results
50
-
51
-The following methods use the measurements returned by [`Perf.getLastMeasurements()`](#getlastmeasurements) to pretty-print the result.
52
-
53
- - [`printInclusive()`](#printinclusive)
54
- - [`printExclusive()`](#printexclusive)
55
- - [`printWasted()`](#printwasted)
56
- - [`printOperations()`](#printoperations)
57
- - [`printDOM()`](#printdom)
58
-
59
-* * *
60
-
61
-## Reference
62
-
63
-### `start()`
64
-### `stop()`
65
-
66
-```javascript
67
-Perf.start()
68
-// ...
69
-Perf.stop()
70
-```
71
-
72
-Start/stop the measurement. The React operations in-between are recorded for analyses below. Operations that took an insignificant amount of time are ignored.
73
-
74
-After stopping, you will need [`Perf.getLastMeasurements()`](#getlastmeasurements) to get the measurements.
75
-
76
-* * *
77
-
78
-### `getLastMeasurements()`
79
-
80
-```javascript
81
-Perf.getLastMeasurements()
82
-```
83
-
84
-Get the opaque data structure describing measurements from the last start-stop session. You can save it and pass it to the other print methods in [`Perf`](#printing-results) to analyze past measurements.
85
-
86
-> Note
87
->
88
-> Don't rely on the exact format of the return value because it may change in minor releases. We will update the documentation if the return value format becomes a supported part of the public API.
89
-
90
-* * *
91
-
92
-### `printInclusive()`
93
-
94
-```javascript
95
-Perf.printInclusive(measurements)
96
-```
97
-
98
-Prints the overall time taken. When no arguments are passed, `printInclusive` defaults to all the measurements from the last recording. This prints a nicely formatted table in the console, like so:
99
-
100
-
101
-
102
-* * *
103
-
104
-### `printExclusive()`
105
-
106
-```javascript
107
-Perf.printExclusive(measurements)
108
-```
109
-
110
-"Exclusive" times don't include the times taken to mount the components: processing props, calling `componentWillMount` and `componentDidMount`, etc.
111
-
112
-
113
-
114
-* * *
115
-
116
-### `printWasted()`
117
-
118
-```javascript
119
-Perf.printWasted(measurements)
120
-```
121
-
122
-**The most useful part of the profiler**.
123
-
124
-"Wasted" time is spent on components that didn't actually render anything, e.g. the render stayed the same, so the DOM wasn't touched.
125
-
126
-
127
-
128
-* * *
129
-
130
-### `printOperations()`
131
-
132
-```javascript
133
-Perf.printOperations(measurements)
134
-```
135
-
136
-Prints the underlying DOM manipulations, e.g. "set innerHTML" and "remove".
137
-
138
-
139
-
140
-* * *
141
-
142
-### `printDOM()`
143
-
144
-```javascript
145
-Perf.printDOM(measurements)
146
-```
147
-
148
-This method has been renamed to [`printOperations()`](#printoperations). Currently `printDOM()` still exists as an alias but it prints a deprecation warning and will eventually be removed.
docs/docs/addons-pure-render-mixin.md
deleted
-44
@@ -1,44 +0,0 @@
1
----
2
-id: pure-render-mixin
3
-title: PureRenderMixin
4
-permalink: docs/pure-render-mixin.html
5
-layout: docs
6
-category: Add-Ons
7
----
8
-
9
-> Note:
10
->
11
-> `PureRenderMixin` is a legacy add-on. Use [`React.PureComponent`](/docs/react-api.html#react.purecomponent) instead.
12
-
13
-**Importing**
14
-
15
-```javascript
16
-import PureRenderMixin from 'react-addons-pure-render-mixin'; // ES6
17
-var PureRenderMixin = require('react-addons-pure-render-mixin'); // ES5 with npm
18
-```
19
-
20
-## Overview
21
-
22
-If your React component's render function renders the same result given the same props and state, you can use this mixin for a performance boost in some cases.
23
-
24
-Example:
25
-
26
-```js
27
-const createReactClass = require('create-react-class');
28
-
29
-createReactClass({
30
- mixins: [PureRenderMixin],
31
-
32
- render: function() {
33
- return <div className={this.props.className}>foo</div>;
34
- }
35
-});
36
-```
37
-
38
-Under the hood, the mixin implements [shouldComponentUpdate](/docs/component-specs.html#updating-shouldcomponentupdate), in which it compares the current props and state with the next ones and returns `false` if the equalities pass.
39
-
40
-> Note:
41
->
42
-> This only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences. Only mix into components which have simple props and state, or use `forceUpdate()` when you know deep data structures have changed. Or, consider using [immutable objects](https://facebook.github.io/immutable-js/) to facilitate fast comparisons of nested data.
43
->
44
-> Furthermore, `shouldComponentUpdate` skips updates for the whole component subtree. Make sure all the children components are also "pure".
docs/docs/addons-shallow-compare.md
deleted
-44
@@ -1,44 +0,0 @@
1
----
2
-id: shallow-compare
3
-title: Shallow Compare
4
-permalink: docs/shallow-compare.html
5
-layout: docs
6
-category: Reference
7
----
8
-
9
-> Note:
10
->
11
-> `shallowCompare` is a legacy add-on. Use [`React.PureComponent`](/docs/react-api.html#react.purecomponent) instead.
12
-
13
-**Importing**
14
-
15
-```javascript
16
-import shallowCompare from 'react-addons-shallow-compare'; // ES6
17
-var shallowCompare = require('react-addons-shallow-compare'); // ES5 with npm
18
-```
19
-
20
-## Overview
21
-
22
-Before [`React.PureComponent`](/docs/react-api.html#react.purecomponent) was introduced, `shallowCompare` was commonly used to achieve the same functionality as [`PureRenderMixin`](pure-render-mixin.html) while using ES6 classes with React.
23
-
24
-If your React component's render function is "pure" (in other words, it renders the same result given the same props and state), you can use this helper function for a performance boost in some cases.
25
-
26
-Example:
27
-
28
-```js
29
-export class SampleComponent extends React.Component {
30
- shouldComponentUpdate(nextProps, nextState) {
31
- return shallowCompare(this, nextProps, nextState);
32
- }
33
-
34
- render() {
35
- return <div className={this.props.className}>foo</div>;
36
- }
37
-}
38
-```
39
-
40
-`shallowCompare` performs a shallow equality check on the current `props` and `nextProps` objects as well as the current `state` and `nextState` objects.
41
-It does this by iterating on the keys of the objects being compared and returning true when the values of a key in each object are not strictly equal.
42
-
43
-`shallowCompare` returns `true` if the shallow comparison for props or state fails and therefore the component should update.
44
-`shallowCompare` returns `false` if the shallow comparison for props and state both pass and therefore the component does not need to update.
docs/docs/addons-shallow-renderer.md
deleted
-68
@@ -1,68 +0,0 @@
1
----
2
-id: shallow-renderer
3
-title: Shallow Renderer
4
-permalink: docs/shallow-renderer.html
5
-layout: docs
6
-category: Reference
7
----
8
-
9
-**Importing**
10
-
11
-```javascript
12
-import ShallowRenderer from 'react-test-renderer/shallow'; // ES6
13
-var ShallowRenderer = require('react-test-renderer/shallow'); // ES5 with npm
14
-```
15
-
16
-## Overview
17
-
18
-When writing unit tests for React, shallow rendering can be helpful. Shallow rendering lets you render a component "one level deep" and assert facts about what its render method returns, without worrying about the behavior of child components, which are not instantiated or rendered. This does not require a DOM.
19
-
20
-For example, if you have the following component:
21
-
22
-```javascript
23
-function MyComponent() {
24
- return (
25
- <div>
26
- <span className="heading">Title</span>
27
- <Subcomponent foo="bar" />
28
- </div>
29
- );
30
-}
31
-```
32
-
33
-Then you can assert:
34
-
35
-```javascript
36
-import ShallowRenderer from 'react-test-renderer/shallow';
37
-
38
-// in your test:
39
-const renderer = new ShallowRenderer();
40
-renderer.render(<MyComponent />);
41
-const result = renderer.getRenderOutput();
42
-
43
-expect(result.type).toBe('div');
44
-expect(result.props.children).toEqual([
45
- <span className="heading">Title</span>,
46
- <Subcomponent foo="bar" />
47
-]);
48
-```
49
-
50
-Shallow testing currently has some limitations, namely not supporting refs.
51
-
52
-> Note:
53
->
54
-> We also recommend checking out Enzyme's [Shallow Rendering API](http://airbnb.io/enzyme/docs/api/shallow.html). It provides a nicer higher-level API over the same functionality.
55
-
56
-## Reference
57
-
58
-### `shallowRenderer.render()`
59
-
60
-You can think of the shallowRenderer as a "place" to render the component you're testing, and from which you can extract the component's output.
61
-
62
-`shallowRenderer.render()` is similar to [`ReactDOM.render()`](/docs/react-dom.html#render) but it doesn't require DOM and only renders a single level deep. This means you can test components isolated from how their children are implemented.
63
-
64
-### `shallowRenderer.getRenderOutput()`
65
-
66
-After `shallowRenderer.render()` has been called, you can use `shallowRenderer.getRenderOutput()` to get the shallowly rendered output.
67
-
68
-You can then begin to assert facts about the output.
docs/docs/addons-test-utils.md
deleted
-263
@@ -1,263 +0,0 @@
1
----
2
-id: test-utils
3
-title: Test Utilities
4
-permalink: docs/test-utils.html
5
-layout: docs
6
-category: Reference
7
----
8
-
9
-**Importing**
10
-
11
-```javascript
12
-import ReactTestUtils from 'react-dom/test-utils'; // ES6
13
-var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm
14
-```
15
-
16
-## Overview
17
-
18
-`ReactTestUtils` makes it easy to test React components in the testing framework of your choice. At Facebook we use [Jest](https://facebook.github.io/jest/) for painless JavaScript testing. Learn how to get started with Jest through the Jest website's [React Tutorial](http://facebook.github.io/jest/docs/tutorial-react.html#content).
19
-
20
-> Note:
21
->
22
-> Airbnb has released a testing utility called Enzyme, which makes it easy to assert, manipulate, and traverse your React Components' output. If you're deciding on a unit testing utility to use together with Jest, or any other test runner, it's worth checking out: [http://airbnb.io/enzyme/](http://airbnb.io/enzyme/)
23
-
24
- - [`Simulate`](#simulate)
25
- - [`renderIntoDocument()`](#renderintodocument)
26
- - [`mockComponent()`](#mockcomponent)
27
- - [`isElement()`](#iselement)
28
- - [`isElementOfType()`](#iselementoftype)
29
- - [`isDOMComponent()`](#isdomcomponent)
30
- - [`isCompositeComponent()`](#iscompositecomponent)
31
- - [`isCompositeComponentWithType()`](#iscompositecomponentwithtype)
32
- - [`findAllInRenderedTree()`](#findallinrenderedtree)
33
- - [`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass)
34
- - [`findRenderedDOMComponentWithClass()`](#findrendereddomcomponentwithclass)
35
- - [`scryRenderedDOMComponentsWithTag()`](#scryrendereddomcomponentswithtag)
36
- - [`findRenderedDOMComponentWithTag()`](#findrendereddomcomponentwithtag)
37
- - [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype)
38
- - [`findRenderedComponentWithType()`](#findrenderedcomponentwithtype)
39
-
40
-## Reference
41
-
42
-## Shallow Rendering
43
-
44
-When writing unit tests for React, shallow rendering can be helpful. Shallow rendering lets you render a component "one level deep" and assert facts about what its render method returns, without worrying about the behavior of child components, which are not instantiated or rendered. This does not require a DOM.
45
-
46
-> Note:
47
->
48
-> The shallow renderer has moved to `react-test-renderer/shallow`.<br>
49
-> [Learn more about shallow rendering on its reference page.](/docs/shallow-renderer.html)
50
-
51
-## Other Utilities
52
-
53
-### `Simulate`
54
-
55
-```javascript
56
-Simulate.{eventName}(
57
- element,
58
- [eventData]
59
-)
60
-```
61
-
62
-Simulate an event dispatch on a DOM node with optional `eventData` event data.
63
-
64
-`Simulate` has a method for [every event that React understands](/docs/events.html#supported-events).
65
-
66
-**Clicking an element**
67
-
68
-```javascript
69
-// <button ref="button">...</button>
70
-const node = this.refs.button;
71
-ReactTestUtils.Simulate.click(node);
72
-```
73
-
74
-**Changing the value of an input field and then pressing ENTER.**
75
-
76
-```javascript
77
-// <input ref="input" />
78
-const node = this.refs.input;
79
-node.value = 'giraffe';
80
-ReactTestUtils.Simulate.change(node);
81
-ReactTestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13});
82
-```
83
-
84
-> Note
85
->
86
-> You will have to provide any event property that you're using in your component (e.g. keyCode, which, etc...) as React is not creating any of these for you.
87
-
88
-* * *
89
-
90
-### `renderIntoDocument()`
91
-
92
-```javascript
93
-renderIntoDocument(element)
94
-```
95
-
96
-Render a React element into a detached DOM node in the document. **This function requires a DOM.**
97
-
98
-> Note:
99
->
100
-> You will need to have `window`, `window.document` and `window.document.createElement` globally available **before** you import `React`. Otherwise React will think it can't access the DOM and methods like `setState` won't work.
101
-
102
-* * *
103
-
104
-### `mockComponent()`
105
-
106
-```javascript
107
-mockComponent(
108
- componentClass,
109
- [mockTagName]
110
-)
111
-```
112
-
113
-Pass a mocked component module to this method to augment it with useful methods that allow it to be used as a dummy React component. Instead of rendering as usual, the component will become a simple `<div>` (or other tag if `mockTagName` is provided) containing any provided children.
114
-
115
-* * *
116
-
117
-### `isElement()`
118
-
119
-```javascript
120
-isElement(element)
121
-```
122
-
123
-Returns `true` if `element` is any React element.
124
-
125
-* * *
126
-
127
-### `isElementOfType()`
128
-
129
-```javascript
130
-isElementOfType(
131
- element,
132
- componentClass
133
-)
134
-```
135
-
136
-Returns `true` if `element` is a React element whose type is of a React `componentClass`.
137
-
138
-* * *
139
-
140
-### `isDOMComponent()`
141
-
142
-```javascript
143
-isDOMComponent(instance)
144
-```
145
-
146
-Returns `true` if `instance` is a DOM component (such as a `<div>` or `<span>`).
147
-
148
-* * *
149
-
150
-### `isCompositeComponent()`
151
-
152
-```javascript
153
-isCompositeComponent(instance)
154
-```
155
-
156
-Returns `true` if `instance` is a user-defined component, such as a class or a function.
157
-
158
-* * *
159
-
160
-### `isCompositeComponentWithType()`
161
-
162
-```javascript
163
-isCompositeComponentWithType(
164
- instance,
165
- componentClass
166
-)
167
-```
168
-
169
-Returns `true` if `instance` is a component whose type is of a React `componentClass`.
170
-
171
-* * *
172
-
173
-### `findAllInRenderedTree()`
174
-
175
-```javascript
176
-findAllInRenderedTree(
177
- tree,
178
- test
179
-)
180
-```
181
-
182
-Traverse all components in `tree` and accumulate all components where `test(component)` is `true`. This is not that useful on its own, but it's used as a primitive for other test utils.
183
-
184
-* * *
185
-
186
-### `scryRenderedDOMComponentsWithClass()`
187
-
188
-```javascript
189
-scryRenderedDOMComponentsWithClass(
190
- tree,
191
- className
192
-)
193
-```
194
-
195
-Finds all DOM elements of components in the rendered tree that are DOM components with the class name matching `className`.
196
-
197
-* * *
198
-
199
-### `findRenderedDOMComponentWithClass()`
200
-
201
-```javascript
202
-findRenderedDOMComponentWithClass(
203
- tree,
204
- className
205
-)
206
-```
207
-
208
-Like [`scryRenderedDOMComponentsWithClass()`](#scryrendereddomcomponentswithclass) but expects there to be one result, and returns that one result, or throws exception if there is any other number of matches besides one.
209
-
210
-* * *
211
-
212
-### `scryRenderedDOMComponentsWithTag()`
213
-
214
-```javascript
215
-scryRenderedDOMComponentsWithTag(
216
- tree,
217
- tagName
218
-)
219
-```
220
-
221
-Finds all DOM elements of components in the rendered tree that are DOM components with the tag name matching `tagName`.
222
-
223
-* * *
224
-
225
-### `findRenderedDOMComponentWithTag()`
226
-
227
-```javascript
228
-findRenderedDOMComponentWithTag(
229
- tree,
230
- tagName
231
-)
232
-```
233
-
234
-Like [`scryRenderedDOMComponentsWithTag()`](#scryrendereddomcomponentswithtag) but expects there to be one result, and returns that one result, or throws exception if there is any other number of matches besides one.
235
-
236
-* * *
237
-
238
-### `scryRenderedComponentsWithType()`
239
-
240
-```javascript
241
-scryRenderedComponentsWithType(
242
- tree,
243
- componentClass
244
-)
245
-```
246
-
247
-Finds all instances of components with type equal to `componentClass`.
248
-
249
-* * *
250
-
251
-### `findRenderedComponentWithType()`
252
-
253
-```javascript
254
-findRenderedComponentWithType(
255
- tree,
256
- componentClass
257
-)
258
-```
259
-
260
-Same as [`scryRenderedComponentsWithType()`](#scryrenderedcomponentswithtype) but expects there to be one result and returns that one result, or throws exception if there is any other number of matches besides one.
261
-
262
-* * *
263
-
docs/docs/addons-two-way-binding-helpers.md
deleted
-131
@@ -1,131 +0,0 @@
1
----
2
-id: two-way-binding-helpers
3
-title: Two-way Binding Helpers
4
-permalink: docs/two-way-binding-helpers.html
5
-layout: docs
6
-category: Add-Ons
7
----
8
-
9
-> Note:
10
->
11
-> `LinkedStateMixin` is deprecated as of React v15. The recommendation is to explicitly set the value and change handler, instead of using `LinkedStateMixin`.
12
-
13
-**Importing**
14
-
15
-```javascript
16
-import LinkedStateMixin from 'react-addons-linked-state-mixin'; // ES6
17
-var LinkedStateMixin = require('react-addons-linked-state-mixin'); // ES5 with npm
18
-```
19
-
20
-## Overview
21
-
22
-`LinkedStateMixin` is an easy way to express two-way binding with React.
23
-
24
-In React, data flows one way: from owner to child. We think that this makes your app's code easier to understand. You can think of it as "one-way data binding."
25
-
26
-However, there are lots of applications that require you to read some data and flow it back into your program. For example, when developing forms, you'll often want to update some React `state` when you receive user input. Or perhaps you want to perform layout in JavaScript and react to changes in some DOM element size.
27
-
28
-In React, you would implement this by listening to a "change" event, read from your data source (usually the DOM) and call `setState()` on one of your components. "Closing the data flow loop" explicitly leads to more understandable and easier-to-maintain programs. See [our forms documentation](/docs/forms.html) for more information.
29
-
30
-Two-way binding -- implicitly enforcing that some value in the DOM is always consistent with some React `state` -- is concise and supports a wide variety of applications. We've provided `LinkedStateMixin`: syntactic sugar for setting up the common data flow loop pattern described above, or "linking" some data source to React `state`.
31
-
32
-> Note:
33
->
34
-> `LinkedStateMixin` is just a thin wrapper and convention around the `onChange`/`setState()` pattern. It doesn't fundamentally change how data flows in your React application.
35
-
36
-## LinkedStateMixin: Before and After
37
-
38
-Here's a simple form example without using `LinkedStateMixin`:
39
-
40
-```javascript
41
-var createReactClass = require('create-react-class');
42
-
43
-var NoLink = createReactClass({
44
- getInitialState: function() {
45
- return {message: 'Hello!'};
46
- },
47
- handleChange: function(event) {
48
- this.setState({message: event.target.value});
49
- },
50
- render: function() {
51
- var message = this.state.message;
52
- return <input type="text" value={message} onChange={this.handleChange} />;
53
- }
54
-});
55
-```
56
-
57
-This works really well and it's very clear how data is flowing, however, with a lot of form fields it could get a bit verbose. Let's use `LinkedStateMixin` to save us some typing:
58
-
59
-```javascript{4,9}
60
-var createReactClass = require('create-react-class');
61
-
62
-var WithLink = createReactClass({
63
- mixins: [LinkedStateMixin],
64
- getInitialState: function() {
65
- return {message: 'Hello!'};
66
- },
67
- render: function() {
68
- return <input type="text" valueLink={this.linkState('message')} />;
69
- }
70
-});
71
-```
72
-
73
-`LinkedStateMixin` adds a method to your React component called `linkState()`. `linkState()` returns a `valueLink` object which contains the current value of the React state and a callback to change it.
74
-
75
-`valueLink` objects can be passed up and down the tree as props, so it's easy (and explicit) to set up two-way binding between a component deep in the hierarchy and state that lives higher in the hierarchy.
76
-
77
-Note that checkboxes have a special behavior regarding their `value` attribute, which is the value that will be sent on form submit if the checkbox is checked (defaults to `on`). The `value` attribute is not updated when the checkbox is checked or unchecked. For checkboxes, you should use `checkedLink` instead of `valueLink`:
78
-```
79
-<input type="checkbox" checkedLink={this.linkState('booleanValue')} />
80
-```
81
-
82
-## Under the Hood
83
-
84
-There are two sides to `LinkedStateMixin`: the place where you create the `valueLink` instance and the place where you use it. To prove how simple `LinkedStateMixin` is, let's rewrite each side separately to be more explicit.
85
-
86
-### valueLink Without LinkedStateMixin
87
-
88
-```javascript{7-9,11-14}
89
-var createReactClass = require('create-react-class');
90
-
91
-var WithoutMixin = createReactClass({
92
- getInitialState: function() {
93
- return {message: 'Hello!'};
94
- },
95
- handleChange: function(newValue) {
96
- this.setState({message: newValue});
97
- },
98
- render: function() {
99
- var valueLink = {
100
- value: this.state.message,
101
- requestChange: this.handleChange
102
- };
103
- return <input type="text" valueLink={valueLink} />;
104
- }
105
-});
106
-```
107
-
108
-As you can see, `valueLink` objects are very simple objects that just have a `value` and `requestChange` prop. And `LinkedStateMixin` is similarly simple: it just populates those fields with a value from `this.state` and a callback that calls `this.setState()`.
109
-
110
-### LinkedStateMixin Without valueLink
111
-
112
-```javascript
113
-var LinkedStateMixin = require('react-addons-linked-state-mixin');
114
-var createReactClass = require('create-react-class');
115
-
116
-var WithoutLink = createReactClass({
117
- mixins: [LinkedStateMixin],
118
- getInitialState: function() {
119
- return {message: 'Hello!'};
120
- },
121
- render: function() {
122
- var valueLink = this.linkState('message');
123
- var handleChange = function(e) {
124
- valueLink.requestChange(e.target.value);
125
- };
126
- return <input type="text" value={valueLink.value} onChange={handleChange} />;
127
- }
128
-});
129
-```
130
-
131
-The `valueLink` prop is also quite simple. It simply handles the `onChange` event and calls `this.props.valueLink.requestChange()` and also uses `this.props.valueLink.value` instead of `this.props.value`. That's it!
docs/docs/addons-update.md
deleted
-117
@@ -1,117 +0,0 @@
1
----
2
-id: update
3
-title: Immutability Helpers
4
-permalink: docs/update.html
5
-layout: docs
6
-category: Add-Ons
7
----
8
-
9
-> Note:
10
->
11
-> `update` is a legacy add-on. Use [`immutability-helper`](https://github.com/kolodny/immutability-helper) instead.
12
-
13
-**Importing**
14
-
15
-```javascript
16
-import update from 'react-addons-update'; // ES6
17
-var update = require('react-addons-update'); // ES5 with npm
18
-```
19
-
20
-## Overview
21
-
22
-React lets you use whatever style of data management you want, including mutation. However, if you can use immutable data in performance-critical parts of your application it's easy to implement a fast [`shouldComponentUpdate()`](/docs/react-component.html#shouldcomponentupdate) method to significantly speed up your app.
23
-
24
-Dealing with immutable data in JavaScript is more difficult than in languages designed for it, like [Clojure](http://clojure.org/). However, we've provided a simple immutability helper, `update()`, that makes dealing with this type of data much easier, *without* fundamentally changing how your data is represented. You can also take a look at Facebook's [Immutable-js](https://facebook.github.io/immutable-js/docs/) and the [Advanced Performance](/docs/advanced-performance.html) section for more detail on Immutable-js.
25
-
26
-### The Main Idea
27
-
28
-If you mutate data like this:
29
-
30
-```js
31
-myData.x.y.z = 7;
32
-// or...
33
-myData.a.b.push(9);
34
-```
35
-
36
-You have no way of determining which data has changed since the previous copy has been overwritten. Instead, you need to create a new copy of `myData` and change only the parts of it that need to be changed. Then you can compare the old copy of `myData` with the new one in `shouldComponentUpdate()` using triple-equals:
37
-
38
-```js
39
-const newData = deepCopy(myData);
40
-newData.x.y.z = 7;
41
-newData.a.b.push(9);
42
-```
43
-
44
-Unfortunately, deep copies are expensive, and sometimes impossible. You can alleviate this by only copying objects that need to be changed and by reusing the objects that haven't changed. Unfortunately, in today's JavaScript this can be cumbersome:
45
-
46
-```js
47
-const newData = extend(myData, {
48
- x: extend(myData.x, {
49
- y: extend(myData.x.y, {z: 7}),
50
- }),
51
- a: extend(myData.a, {b: myData.a.b.concat(9)})
52
-});
53
-```
54
-
55
-While this is fairly performant (since it only makes a shallow copy of `log n` objects and reuses the rest), it's a big pain to write. Look at all the repetition! This is not only annoying, but also provides a large surface area for bugs.
56
-
57
-## `update()`
58
-
59
-`update()` provides simple syntactic sugar around this pattern to make writing this code easier. This code becomes:
60
-
61
-```js
62
-import update from 'react-addons-update';
63
-
64
-const newData = update(myData, {
65
- x: {y: {z: {$set: 7}}},
66
- a: {b: {$push: [9]}}
67
-});
68
-```
69
-
70
-While the syntax takes a little getting used to (though it's inspired by [MongoDB's query language](http://docs.mongodb.org/manual/core/crud-introduction/#query)) there's no redundancy, it's statically analyzable and it's not much more typing than the mutative version.
71
-
72
-The `$`-prefixed keys are called *commands*. The data structure they are "mutating" is called the *target*.
73
-
74
-## Available Commands
75
-
76
- * `{$push: array}` `push()` all the items in `array` on the target.
77
- * `{$unshift: array}` `unshift()` all the items in `array` on the target.
78
- * `{$splice: array of arrays}` for each item in `arrays` call `splice()` on the target with the parameters provided by the item.
79
- * `{$set: any}` replace the target entirely.
80
- * `{$merge: object}` merge the keys of `object` with the target.
81
- * `{$apply: function}` passes in the current value to the function and updates it with the new returned value.
82
-
83
-## Examples
84
-
85
-### Simple push
86
-
87
-```js
88
-const initialArray = [1, 2, 3];
89
-const newArray = update(initialArray, {$push: [4]}); // => [1, 2, 3, 4]
90
-```
91
-`initialArray` is still `[1, 2, 3]`.
92
-
93
-### Nested collections
94
-
95
-```js
96
-const collection = [1, 2, {a: [12, 17, 15]}];
97
-const newCollection = update(collection, {2: {a: {$splice: [[1, 1, 13, 14]]}}});
98
-// => [1, 2, {a: [12, 13, 14, 15]}]
99
-```
100
-This accesses `collection`'s index `2`, key `a`, and does a splice of one item starting from index `1` (to remove `17`) while inserting `13` and `14`.
101
-
102
-### Updating a value based on its current one
103
-
104
-```js
105
-const obj = {a: 5, b: 3};
106
-const newObj = update(obj, {b: {$apply: function(x) {return x * 2;}}});
107
-// => {a: 5, b: 6}
108
-// This is equivalent, but gets verbose for deeply nested collections:
109
-const newObj2 = update(obj, {b: {$set: obj.b * 2}});
110
-```
111
-
112
-### (Shallow) Merge
113
-
114
-```js
115
-const obj = {a: 5, b: 3};
116
-const newObj = update(obj, {$merge: {b: 6, c: 7}}); // => {a: 5, b: 6, c: 7}
117
-```
docs/docs/addons.md
deleted
-49
@@ -1,49 +0,0 @@
1
----
2
-id: addons
3
-title: Add-Ons
4
-permalink: docs/addons.html
5
----
6
-
7
-> Note:
8
->
9
-> `React.addons` entry point is deprecated as of React v15.5. The add-ons have moved to separate modules, and some of them have been deprecated.
10
-
11
-The React add-ons are a collection of useful utility modules for building React apps. **These should be considered experimental** and tend to change more often than the core.
12
-
13
-- [`createFragment`](create-fragment.html), to create a set of externally-keyed children.
14
-
15
-The add-ons below are in the development (unminified) version of React only:
16
-
17
-- [`Perf`](perf.html), a performance profiling tool for finding optimization opportunities.
18
-- [`ReactTestUtils`](test-utils.html), simple helpers for writing test cases.
19
-
20
-### Legacy Add-ons
21
-
22
-The add-ons below are considered legacy and their use is discouraged. They will keep working in observable future, but there is no further development.
23
-
24
-- [`PureRenderMixin`](pure-render-mixin.html). Use [`React.PureComponent`](/docs/react-api.html#react.purecomponent) instead.
25
-- [`shallowCompare`](shallow-compare.html), a helper function that performs a shallow comparison for props and state in a component to decide if a component should update.
26
-- [`update`](update.html). Use [`kolodny/immutability-helper`](https://github.com/kolodny/immutability-helper) instead.
27
-- [`ReactDOMFactories`](dom-factories.html), pre-configured DOM factories to make React easier to use without JSX.
28
-
29
-### Deprecated Add-ons
30
-
31
-- [`LinkedStateMixin`](two-way-binding-helpers.html) has been deprecated.
32
-- [`TransitionGroup` and `CSSTransitionGroup`](animation.html) have been deprecated in favor of [their drop-in replacements](https://github.com/reactjs/react-transition-group/tree/v1-stable).
33
-
34
-## Using React with Add-ons
35
-
36
-You can install the add-ons individually from npm (e.g. `npm install react-addons-create-fragment`) and import them:
37
-
38
-```javascript
39
-import createFragment from 'react-addons-create-fragment'; // ES6
40
-var createFragment = require('react-addons-create-fragment'); // ES5 with npm
41
-```
42
-
43
-When using a CDN, you can use `react-with-addons.js` instead of `react.js`:
44
-
45
-```html
46
-<script src="https://unpkg.com/react@15/dist/react-with-addons.js"></script>
47
-```
48
-
49
-The add-ons will be available via the `React.addons` global (e.g. `React.addons.TestUtils`).
docs/docs/components-and-props.md
deleted
-266
@@ -1,266 +0,0 @@
1
----
2
-id: components-and-props
3
-title: Components and Props
4
-permalink: docs/components-and-props.html
5
-redirect_from:
6
- - "docs/reusable-components.html"
7
- - "docs/reusable-components-zh-CN.html"
8
- - "docs/transferring-props.html"
9
- - "docs/transferring-props-it-IT.html"
10
- - "docs/transferring-props-ja-JP.html"
11
- - "docs/transferring-props-ko-KR.html"
12
- - "docs/transferring-props-zh-CN.html"
13
- - "tips/props-in-getInitialState-as-anti-pattern.html"
14
- - "tips/communicate-between-components.html"
15
-prev: rendering-elements.html
16
-next: state-and-lifecycle.html
17
----
18
-
19
-Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
20
-
21
-Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.
22
-
23
-## Functional and Class Components
24
-
25
-The simplest way to define a component is to write a JavaScript function:
26
-
27
-```js
28
-function Welcome(props) {
29
- return <h1>Hello, {props.name}</h1>;
30
-}
31
-```
32
-
33
-This function is a valid React component because it accepts a single "props" object argument with data and returns a React element. We call such components "functional" because they are literally JavaScript functions.
34
-
35
-You can also use an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) to define a component:
36
-
37
-```js
38
-class Welcome extends React.Component {
39
- render() {
40
- return <h1>Hello, {this.props.name}</h1>;
41
- }
42
-}
43
-```
44
-
45
-The above two components are equivalent from React's point of view.
46
-
47
-Classes have some additional features that we will discuss in the [next sections](/docs/state-and-lifecycle.html). Until then, we will use functional components for their conciseness.
48
-
49
-## Rendering a Component
50
-
51
-Previously, we only encountered React elements that represent DOM tags:
52
-
53
-```js
54
-const element = <div />;
55
-```
56
-
57
-However, elements can also represent user-defined components:
58
-
59
-```js
60
-const element = <Welcome name="Sara" />;
61
-```
62
-
63
-When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object. We call this object "props".
64
-
65
-For example, this code renders "Hello, Sara" on the page:
66
-
67
-```js{1,5}
68
-function Welcome(props) {
69
- return <h1>Hello, {props.name}</h1>;
70
-}
71
-
72
-const element = <Welcome name="Sara" />;
73
-ReactDOM.render(
74
- element,
75
- document.getElementById('root')
76
-);
77
-```
78
-
79
-[Try it on CodePen.](http://codepen.io/gaearon/pen/YGYmEG?editors=0010)
80
-
81
-Let's recap what happens in this example:
82
-
83
-1. We call `ReactDOM.render()` with the `<Welcome name="Sara" />` element.
84
-2. React calls the `Welcome` component with `{name: 'Sara'}` as the props.
85
-3. Our `Welcome` component returns a `<h1>Hello, Sara</h1>` element as the result.
86
-4. React DOM efficiently updates the DOM to match `<h1>Hello, Sara</h1>`.
87
-
88
->**Caveat:**
89
->
90
->Always start component names with a capital letter.
91
->
92
->For example, `<div />` represents a DOM tag, but `<Welcome />` represents a component and requires `Welcome` to be in scope.
93
-
94
-## Composing Components
95
-
96
-Components can refer to other components in their output. This lets us use the same component abstraction for any level of detail. A button, a form, a dialog, a screen: in React apps, all those are commonly expressed as components.
97
-
98
-For example, we can create an `App` component that renders `Welcome` many times:
99
-
100
-```js{8-10}
101
-function Welcome(props) {
102
- return <h1>Hello, {props.name}</h1>;
103
-}
104
-
105
-function App() {
106
- return (
107
- <div>
108
- <Welcome name="Sara" />
109
- <Welcome name="Cahal" />
110
- <Welcome name="Edite" />
111
- </div>
112
- );
113
-}
114
-
115
-ReactDOM.render(
116
- <App />,
117
- document.getElementById('root')
118
-);
119
-```
120
-
121
-[Try it on CodePen.](http://codepen.io/gaearon/pen/KgQKPr?editors=0010)
122
-
123
-Typically, new React apps have a single `App` component at the very top. However, if you integrate React into an existing app, you might start bottom-up with a small component like `Button` and gradually work your way to the top of the view hierarchy.
124
-
125
->**Caveat:**
126
->
127
->Components must return a single root element. This is why we added a `<div>` to contain all the `<Welcome />` elements.
128
-
129
-## Extracting Components
130
-
131
-Don't be afraid to split components into smaller components.
132
-
133
-For example, consider this `Comment` component:
134
-
135
-```js
136
-function Comment(props) {
137
- return (
138
- <div className="Comment">
139
- <div className="UserInfo">
140
- <img className="Avatar"
141
- src={props.author.avatarUrl}
142
- alt={props.author.name}
143
- />
144
- <div className="UserInfo-name">
145
- {props.author.name}
146
- </div>
147
- </div>
148
- <div className="Comment-text">
149
- {props.text}
150
- </div>
151
- <div className="Comment-date">
152
- {formatDate(props.date)}
153
- </div>
154
- </div>
155
- );
156
-}
157
-```
158
-
159
-[Try it on CodePen.](http://codepen.io/gaearon/pen/VKQwEo?editors=0010)
160
-
161
-It accepts `author` (an object), `text` (a string), and `date` (a date) as props, and describes a comment on a social media website.
162
-
163
-This component can be tricky to change because of all the nesting, and it is also hard to reuse individual parts of it. Let's extract a few components from it.
164
-
165
-First, we will extract `Avatar`:
166
-
167
-```js{3-6}
168
-function Avatar(props) {
169
- return (
170
- <img className="Avatar"
171
- src={props.user.avatarUrl}
172
- alt={props.user.name}
173
- />
174
- );
175
-}
176
-```
177
-
178
-The `Avatar` doesn't need to know that it is being rendered inside a `Comment`. This is why we have given its prop a more generic name: `user` rather than `author`.
179
-
180
-We recommend naming props from the component's own point of view rather than the context in which it is being used.
181
-
182
-We can now simplify `Comment` a tiny bit:
183
-
184
-```js{5}
185
-function Comment(props) {
186
- return (
187
- <div className="Comment">
188
- <div className="UserInfo">
189
- <Avatar user={props.author} />
190
- <div className="UserInfo-name">
191
- {props.author.name}
192
- </div>
193
- </div>
194
- <div className="Comment-text">
195
- {props.text}
196
- </div>
197
- <div className="Comment-date">
198
- {formatDate(props.date)}
199
- </div>
200
- </div>
201
- );
202
-}
203
-```
204
-
205
-Next, we will extract a `UserInfo` component that renders an `Avatar` next to user's name:
206
-
207
-```js{3-8}
208
-function UserInfo(props) {
209
- return (
210
- <div className="UserInfo">
211
- <Avatar user={props.user} />
212
- <div className="UserInfo-name">
213
- {props.user.name}
214
- </div>
215
- </div>
216
- );
217
-}
218
-```
219
-
220
-This lets us simplify `Comment` even further:
221
-
222
-```js{4}
223
-function Comment(props) {
224
- return (
225
- <div className="Comment">
226
- <UserInfo user={props.author} />
227
- <div className="Comment-text">
228
- {props.text}
229
- </div>
230
- <div className="Comment-date">
231
- {formatDate(props.date)}
232
- </div>
233
- </div>
234
- );
235
-}
236
-```
237
-
238
-[Try it on CodePen.](http://codepen.io/gaearon/pen/rrJNJY?editors=0010)
239
-
240
-Extracting components might seem like grunt work at first, but having a palette of reusable components pays off in larger apps. A good rule of thumb is that if a part of your UI is used several times (`Button`, `Panel`, `Avatar`), or is complex enough on its own (`App`, `FeedStory`, `Comment`), it is a good candidate to be a reusable component.
241
-
242
-## Props are Read-Only
243
-
244
-Whether you declare a component [as a function or a class](#functional-and-class-components), it must never modify its own props. Consider this `sum` function:
245
-
246
-```js
247
-function sum(a, b) {
248
- return a + b;
249
-}
250
-```
251
-
252
-Such functions are called ["pure"](https://en.wikipedia.org/wiki/Pure_function) because they do not attempt to change their inputs, and always return the same result for the same inputs.
253
-
254
-In contrast, this function is impure because it changes its own input:
255
-
256
-```js
257
-function withdraw(account, amount) {
258
- account.total -= amount;
259
-}
260
-```
261
-
262
-React is pretty flexible but it has a single strict rule:
263
-
264
-**All React components must act like pure functions with respect to their props.**
265
-
266
-Of course, application UIs are dynamic and change over time. In the [next section](/docs/state-and-lifecycle.html), we will introduce a new concept of "state". State allows React components to change their output over time in response to user actions, network responses, and anything else, without violating this rule.
docs/docs/composition-vs-inheritance.md
deleted
-171
@@ -1,171 +0,0 @@
1
----
2
-id: composition-vs-inheritance
3
-title: Composition vs Inheritance
4
-permalink: docs/composition-vs-inheritance.html
5
-redirect_from: "docs/multiple-components.html"
6
-prev: lifting-state-up.html
7
-next: thinking-in-react.html
8
----
9
-
10
-React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components.
11
-
12
-In this section, we will consider a few problems where developers new to React often reach for inheritance, and show how we can solve them with composition.
13
-
14
-## Containment
15
-
16
-Some components don't know their children ahead of time. This is especially common for components like `Sidebar` or `Dialog` that represent generic "boxes".
17
-
18
-We recommend that such components use the special `children` prop to pass children elements directly into their output:
19
-
20
-```js{4}
21
-function FancyBorder(props) {
22
- return (
23
- <div className={'FancyBorder FancyBorder-' + props.color}>
24
- {props.children}
25
- </div>
26
- );
27
-}
28
-```
29
-
30
-This lets other components pass arbitrary children to them by nesting the JSX:
31
-
32
-```js{4-9}
33
-function WelcomeDialog() {
34
- return (
35
- <FancyBorder color="blue">
36
- <h1 className="Dialog-title">
37
- Welcome
38
- </h1>
39
- <p className="Dialog-message">
40
- Thank you for visiting our spacecraft!
41
- </p>
42
- </FancyBorder>
43
- );
44
-}
45
-```
46
-
47
-[Try it on CodePen.](https://codepen.io/gaearon/pen/ozqNOV?editors=0010)
48
-
49
-Anything inside the `<FancyBorder>` JSX tag gets passed into the `FancyBorder` component as a `children` prop. Since `FancyBorder` renders `{props.children}` inside a `<div>`, the passed elements appear in the final output.
50
-
51
-While this is less common, sometimes you might need multiple "holes" in a component. In such cases you may come up with your own convention instead of using `children`:
52
-
53
-```js{5,8,18,21}
54
-function SplitPane(props) {
55
- return (
56
- <div className="SplitPane">
57
- <div className="SplitPane-left">
58
- {props.left}
59
- </div>
60
- <div className="SplitPane-right">
61
- {props.right}
62
- </div>
63
- </div>
64
- );
65
-}
66
-
67
-function App() {
68
- return (
69
- <SplitPane
70
- left={
71
- <Contacts />
72
- }
73
- right={
74
- <Chat />
75
- } />
76
- );
77
-}
78
-```
79
-
80
-[Try it on CodePen.](https://codepen.io/gaearon/pen/gwZOJp?editors=0010)
81
-
82
-React elements like `<Contacts />` and `<Chat />` are just objects, so you can pass them as props like any other data.
83
-
84
-## Specialization
85
-
86
-Sometimes we think about components as being "special cases" of other components. For example, we might say that a `WelcomeDialog` is a special case of `Dialog`.
87
-
88
-In React, this is also achieved by composition, where a more "specific" component renders a more "generic" one and configures it with props:
89
-
90
-```js{5,8,16-18}
91
-function Dialog(props) {
92
- return (
93
- <FancyBorder color="blue">
94
- <h1 className="Dialog-title">
95
- {props.title}
96
- </h1>
97
- <p className="Dialog-message">
98
- {props.message}
99
- </p>
100
- </FancyBorder>
101
- );
102
-}
103
-
104
-function WelcomeDialog() {
105
- return (
106
- <Dialog
107
- title="Welcome"
108
- message="Thank you for visiting our spacecraft!" />
109
- );
110
-}
111
-```
112
-
113
-[Try it on CodePen.](https://codepen.io/gaearon/pen/kkEaOZ?editors=0010)
114
-
115
-Composition works equally well for components defined as classes:
116
-
117
-```js{10,27-31}
118
-function Dialog(props) {
119
- return (
120
- <FancyBorder color="blue">
121
- <h1 className="Dialog-title">
122
- {props.title}
123
- </h1>
124
- <p className="Dialog-message">
125
- {props.message}
126
- </p>
127
- {props.children}
128
- </FancyBorder>
129
- );
130
-}
131
-
132
-class SignUpDialog extends React.Component {
133
- constructor(props) {
134
- super(props);
135
- this.handleChange = this.handleChange.bind(this);
136
- this.handleSignUp = this.handleSignUp.bind(this);
137
- this.state = {login: ''};
138
- }
139
-
140
- render() {
141
- return (
142
- <Dialog title="Mars Exploration Program"
143
- message="How should we refer to you?">
144
- <input value={this.state.login}
145
- onChange={this.handleChange} />
146
- <button onClick={this.handleSignUp}>
147
- Sign Me Up!
148
- </button>
149
- </Dialog>
150
- );
151
- }
152
-
153
- handleChange(e) {
154
- this.setState({login: e.target.value});
155
- }
156
-
157
- handleSignUp() {
158
- alert(`Welcome aboard, ${this.state.login}!`);
159
- }
160
-}
161
-```
162
-
163
-[Try it on CodePen.](https://codepen.io/gaearon/pen/gwZbYa?editors=0010)
164
-
165
-## So What About Inheritance?
166
-
167
-At Facebook, we use React in thousands of components, and we haven't found any use cases where we would recommend creating component inheritance hierarchies.
168
-
169
-Props and composition give you all the flexibility you need to customize a component's look and behavior in an explicit and safe way. Remember that components may accept arbitrary props, including primitive values, React elements, or functions.
170
-
171
-If you want to reuse non-UI functionality between components, we suggest extracting it into a separate JavaScript module. The components may import it and use that function, object, or a class, without extending it.
docs/docs/conditional-rendering.md
deleted
-242
@@ -1,242 +0,0 @@
1
----
2
-id: conditional-rendering
3
-title: Conditional Rendering
4
-permalink: docs/conditional-rendering.html
5
-prev: handling-events.html
6
-next: lists-and-keys.html
7
-redirect_from: "tips/false-in-jsx.html"
8
----
9
-
10
-In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application.
11
-
12
-Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) or the [conditional operator](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) to create elements representing the current state, and let React update the UI to match them.
13
-
14
-Consider these two components:
15
-
16
-```js
17
-function UserGreeting(props) {
18
- return <h1>Welcome back!</h1>;
19
-}
20
-
21
-function GuestGreeting(props) {
22
- return <h1>Please sign up.</h1>;
23
-}
24
-```
25
-
26
-We'll create a `Greeting` component that displays either of these components depending on whether a user is logged in:
27
-
28
-```javascript{3-7,11,12}
29
-function Greeting(props) {
30
- const isLoggedIn = props.isLoggedIn;
31
- if (isLoggedIn) {
32
- return <UserGreeting />;
33
- }
34
- return <GuestGreeting />;
35
-}
36
-
37
-ReactDOM.render(
38
- // Try changing to isLoggedIn={true}:
39
- <Greeting isLoggedIn={false} />,
40
- document.getElementById('root')
41
-);
42
-```
43
-
44
-[Try it on CodePen.](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011)
45
-
46
-This example renders a different greeting depending on the value of `isLoggedIn` prop.
47
-
48
-### Element Variables
49
-
50
-You can use variables to store elements. This can help you conditionally render a part of the component while the rest of the output doesn't change.
51
-
52
-Consider these two new components representing Logout and Login buttons:
53
-
54
-```js
55
-function LoginButton(props) {
56
- return (
57
- <button onClick={props.onClick}>
58
- Login
59
- </button>
60
- );
61
-}
62
-
63
-function LogoutButton(props) {
64
- return (
65
- <button onClick={props.onClick}>
66
- Logout
67
- </button>
68
- );
69
-}
70
-```
71
-
72
-In the example below, we will create a [stateful component](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) called `LoginControl`.
73
-
74
-It will render either `<LoginButton />` or `<LogoutButton />` depending on its current state. It will also render a `<Greeting />` from the previous example:
75
-
76
-```javascript{20-25,29,30}
77
-class LoginControl extends React.Component {
78
- constructor(props) {
79
- super(props);
80
- this.handleLoginClick = this.handleLoginClick.bind(this);
81
- this.handleLogoutClick = this.handleLogoutClick.bind(this);
82
- this.state = {isLoggedIn: false};
83
- }
84
-
85
- handleLoginClick() {
86
- this.setState({isLoggedIn: true});
87
- }
88
-
89
- handleLogoutClick() {
90
- this.setState({isLoggedIn: false});
91
- }
92
-
93
- render() {
94
- const isLoggedIn = this.state.isLoggedIn;
95
-
96
- let button = null;
97
- if (isLoggedIn) {
98
- button = <LogoutButton onClick={this.handleLogoutClick} />;
99
- } else {
100
- button = <LoginButton onClick={this.handleLoginClick} />;
101
- }
102
-
103
- return (
104
- <div>
105
- <Greeting isLoggedIn={isLoggedIn} />
106
- {button}
107
- </div>
108
- );
109
- }
110
-}
111
-
112
-ReactDOM.render(
113
- <LoginControl />,
114
- document.getElementById('root')
115
-);
116
-```
117
-
118
-[Try it on CodePen.](https://codepen.io/gaearon/pen/QKzAgB?editors=0010)
119
-
120
-While declaring a variable and using an `if` statement is a fine way to conditionally render a component, sometimes you might want to use a shorter syntax. There are a few ways to inline conditions in JSX, explained below.
121
-
122
-### Inline If with Logical && Operator
123
-
124
-You may [embed any expressions in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) by wrapping them in curly braces. This includes the JavaScript logical `&&` operator. It can be handy for conditionally including an element:
125
-
126
-```js{6-10}
127
-function Mailbox(props) {
128
- const unreadMessages = props.unreadMessages;
129
- return (
130
- <div>
131
- <h1>Hello!</h1>
132
- {unreadMessages.length > 0 &&
133
- <h2>
134
- You have {unreadMessages.length} unread messages.
135
- </h2>
136
- }
137
- </div>
138
- );
139
-}
140
-
141
-const messages = ['React', 'Re: React', 'Re:Re: React'];
142
-ReactDOM.render(
143
- <Mailbox unreadMessages={messages} />,
144
- document.getElementById('root')
145
-);
146
-```
147
-
148
-[Try it on CodePen.](https://codepen.io/gaearon/pen/ozJddz?editors=0010)
149
-
150
-It works because in JavaScript, `true && expression` always evaluates to `expression`, and `false && expression` always evaluates to `false`.
151
-
152
-Therefore, if the condition is `true`, the element right after `&&` will appear in the output. If it is `false`, React will ignore and skip it.
153
-
154
-### Inline If-Else with Conditional Operator
155
-
156
-Another method for conditionally rendering elements inline is to use the JavaScript conditional operator [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator).
157
-
158
-In the example below, we use it to conditionally render a small block of text.
159
-
160
-```javascript{5}
161
-render() {
162
- const isLoggedIn = this.state.isLoggedIn;
163
- return (
164
- <div>
165
- The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
166
- </div>
167
- );
168
-}
169
-```
170
-
171
-It can also be used for larger expressions although it is less obvious what's going on:
172
-
173
-```js{5,7,9}
174
-render() {
175
- const isLoggedIn = this.state.isLoggedIn;
176
- return (
177
- <div>
178
- {isLoggedIn ? (
179
- <LogoutButton onClick={this.handleLogoutClick} />
180
- ) : (
181
- <LoginButton onClick={this.handleLoginClick} />
182
- )}
183
- </div>
184
- );
185
-}
186
-```
187
-
188
-Just like in JavaScript, it is up to you to choose an appropriate style based on what you and your team consider more readable. Also remember that whenever conditions become too complex, it might be a good time to [extract a component](/docs/components-and-props.html#extracting-components).
189
-
190
-### Preventing Component from Rendering
191
-
192
-In rare cases you might want a component to hide itself even though it was rendered by another component. To do this return `null` instead of its render output.
193
-
194
-In the example below, the `<WarningBanner />` is rendered depending on the value of the prop called `warn`. If the value of the prop is `false`, then the component does not render:
195
-
196
-```javascript{2-4,29}
197
-function WarningBanner(props) {
198
- if (!props.warn) {
199
- return null;
200
- }
201
-
202
- return (
203
- <div className="warning">
204
- Warning!
205
- </div>
206
- );
207
-}
208
-
209
-class Page extends React.Component {
210
- constructor(props) {
211
- super(props);
212
- this.state = {showWarning: true}
213
- this.handleToggleClick = this.handleToggleClick.bind(this);
214
- }
215
-
216
- handleToggleClick() {
217
- this.setState(prevState => ({
218
- showWarning: !prevState.showWarning
219
- }));
220
- }
221
-
222
- render() {
223
- return (
224
- <div>
225
- <WarningBanner warn={this.state.showWarning} />
226
- <button onClick={this.handleToggleClick}>
227
- {this.state.showWarning ? 'Hide' : 'Show'}
228
- </button>
229
- </div>
230
- );
231
- }
232
-}
233
-
234
-ReactDOM.render(
235
- <Page />,
236
- document.getElementById('root')
237
-);
238
-```
239
-
240
-[Try it on CodePen.](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010)
241
-
242
-Returning `null` from a component's `render` method does not affect the firing of the component's lifecycle methods. For instance, `componentWillUpdate` and `componentDidUpdate` will still be called.
docs/docs/context.md
deleted
-219
@@ -1,219 +0,0 @@
1
----
2
-id: context
3
-title: Context
4
-permalink: docs/context.html
5
----
6
-
7
-> Note:
8
->
9
-> `React.PropTypes` has moved into a different package since React v15.5. Please use [the `prop-types` library instead](https://www.npmjs.com/package/prop-types) to define `contextTypes`.
10
->
11
->We provide [a codemod script](/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes) to automate the conversion.
12
-
13
-With React, it's easy to track the flow of data through your React components. When you look at a component, you can see which props are being passed, which makes your apps easy to reason about.
14
-
15
-In some cases, you want to pass data through the component tree without having to pass the props down manually at every level.
16
-You can do this directly in React with the powerful "context" API.
17
-
18
-
19
-## Why Not To Use Context
20
-
21
-The vast majority of applications do not need to use context.
22
-
23
-If you want your application to be stable, don't use context. It is an experimental API and it is likely to break in future releases of React.
24
-
25
-If you aren't familiar with state management libraries like [Redux](https://github.com/reactjs/redux) or [MobX](https://github.com/mobxjs/mobx), don't use context. For many practical applications, these libraries and their React bindings are a good choice for managing state that is relevant to many components. It is far more likely that Redux is the right solution to your problem than that context is the right solution.
26
-
27
-If you aren't an experienced React developer, don't use context. There is usually a better way to implement functionality just using props and state.
28
-
29
-If you insist on using context despite these warnings, try to isolate your use of context to a small area and avoid using the context API directly when possible so that it's easier to upgrade when the API changes.
30
-
31
-## How To Use Context
32
-
33
-Suppose you have a structure like:
34
-
35
-```javascript
36
-class Button extends React.Component {
37
- render() {
38
- return (
39
- <button style={{background: this.props.color}}>
40
- {this.props.children}
41
- </button>
42
- );
43
- }
44
-}
45
-
46
-class Message extends React.Component {
47
- render() {
48
- return (
49
- <div>
50
- {this.props.text} <Button color={this.props.color}>Delete</Button>
51
- </div>
52
- );
53
- }
54
-}
55
-
56
-class MessageList extends React.Component {
57
- render() {
58
- const color = "purple";
59
- const children = this.props.messages.map((message) =>
60
- <Message text={message.text} color={color} />
61
- );
62
- return <div>{children}</div>;
63
- }
64
-}
65
-```
66
-
67
-In this example, we manually thread through a `color` prop in order to style the `Button` and `Message` components appropriately. Using context, we can pass this through the tree automatically:
68
-
69
-```javascript{6,13-15,21,28-30,40-42}
70
-import PropTypes from 'prop-types';
71
-
72
-class Button extends React.Component {
73
- render() {
74
- return (
75
- <button style={{background: this.context.color}}>
76
- {this.props.children}
77
- </button>
78
- );
79
- }
80
-}
81
-
82
-Button.contextTypes = {
83
- color: PropTypes.string
84
-};
85
-
86
-class Message extends React.Component {
87
- render() {
88
- return (
89
- <div>
90
- {this.props.text} <Button>Delete</Button>
91
- </div>
92
- );
93
- }
94
-}
95
-
96
-class MessageList extends React.Component {
97
- getChildContext() {
98
- return {color: "purple"};
99
- }
100
-
101
- render() {
102
- const children = this.props.messages.map((message) =>
103
- <Message text={message.text} />
104
- );
105
- return <div>{children}</div>;
106
- }
107
-}
108
-
109
-MessageList.childContextTypes = {
110
- color: PropTypes.string
111
-};
112
-```
113
-
114
-By adding `childContextTypes` and `getChildContext` to `MessageList` (the context provider), React passes the information down automatically and any component in the subtree (in this case, `Button`) can access it by defining `contextTypes`.
115
-
116
-If `contextTypes` is not defined, then `context` will be an empty object.
117
-
118
-## Parent-Child Coupling
119
-
120
-Context can also let you build an API where parents and children communicate. For example, one library that works this way is [React Router V4](https://reacttraining.com/react-router):
121
-
122
-```javascript
123
-import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
124
-
125
-const BasicExample = () => (
126
- <Router>
127
- <div>
128
- <ul>
129
- <li><Link to="/">Home</Link></li>
130
- <li><Link to="/about">About</Link></li>
131
- <li><Link to="/topics">Topics</Link></li>
132
- </ul>
133
-
134
- <hr />
135
-
136
- <Route exact path="/" component={Home} />
137
- <Route path="/about" component={About} />
138
- <Route path="/topics" component={Topics} />
139
- </div>
140
- </Router>
141
-);
142
-```
143
-
144
-By passing down some information from the `Router` component, each `Link` and `Route` can communicate back to the containing `Router`.
145
-
146
-Before you build components with an API similar to this, consider if there are cleaner alternatives. For example, you can pass entire React component as props if you'd like to.
147
-
148
-## Referencing Context in Lifecycle Methods
149
-
150
-If `contextTypes` is defined within a component, the following [lifecycle methods](/docs/react-component.html#the-component-lifecycle) will receive an additional parameter, the `context` object:
151
-
152
-- [`constructor(props, context)`](/docs/react-component.html#constructor)
153
-- [`componentWillReceiveProps(nextProps, nextContext)`](/docs/react-component.html#componentwillreceiveprops)
154
-- [`shouldComponentUpdate(nextProps, nextState, nextContext)`](/docs/react-component.html#shouldcomponentupdate)
155
-- [`componentWillUpdate(nextProps, nextState, nextContext)`](/docs/react-component.html#componentwillupdate)
156
-
157
-> Note:
158
->
159
-> As of React 16, `componentDidUpdate` no longer receives `prevContext`.
160
-
161
-## Referencing Context in Stateless Functional Components
162
-
163
-Stateless functional components are also able to reference `context` if `contextTypes` is defined as a property of the function. The following code shows a `Button` component written as a stateless functional component.
164
-
165
-```javascript
166
-import PropTypes from 'prop-types';
167
-
168
-const Button = ({children}, context) =>
169
- <button style={{background: context.color}}>
170
- {children}
171
- </button>;
172
-
173
-Button.contextTypes = {color: PropTypes.string};
174
-```
175
-
176
-## Updating Context
177
-
178
-Don't do it.
179
-
180
-React has an API to update context, but it is fundamentally broken and you should not use it.
181
-
182
-The `getChildContext` function will be called when the state or props changes. In order to update data in the context, trigger a local state update with `this.setState`. This will trigger a new context and changes will be received by the children.
183
-
184
-```javascript
185
-import PropTypes from 'prop-types';
186
-
187
-class MediaQuery extends React.Component {
188
- constructor(props) {
189
- super(props);
190
- this.state = {type:'desktop'};
191
- }
192
-
193
- getChildContext() {
194
- return {type: this.state.type};
195
- }
196
-
197
- componentDidMount() {
198
- const checkMediaQuery = () => {
199
- const type = window.matchMedia("(min-width: 1025px)").matches ? 'desktop' : 'mobile';
200
- if (type !== this.state.type) {
201
- this.setState({type});
202
- }
203
- };
204
-
205
- window.addEventListener('resize', checkMediaQuery);
206
- checkMediaQuery();
207
- }
208
-
209
- render() {
210
- return this.props.children;
211
- }
212
-}
213
-
214
-MediaQuery.childContextTypes = {
215
- type: PropTypes.string
216
-};
217
-```
218
-
219
-The problem is, if a context value provided by component changes, descendants that use that value won't update if an intermediate parent returns `false` from `shouldComponentUpdate`. This is totally out of control of the components using context, so there's basically no way to reliably update the context. [This blog post](https://medium.com/@mweststrate/how-to-safely-use-react-context-b7e343eff076) has a good explanation of why this is a problem and how you might get around it.
docs/docs/cross-origin-errors.md
deleted
-33
@@ -1,33 +0,0 @@
1
----
2
-id: cross-origin-errors
3
-title: Cross-origin Errors
4
-permalink: docs/cross-origin-errors.html
5
----
6
-
7
-> Note:
8
->
9
-> The following section applies only to the development mode of React. Error handling in production mode is done with regular try/catch statements.
10
-
11
-In [development mode](https://reactjs.org/docs/optimizing-performance.html), React uses a global `error` event handler to preserve the "pause on exceptions" behavior of browser DevTools. It also logs errors to the developer console.
12
-
13
-If an error is thrown from a [different origin](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) the browser will mask its details and React will not be able to log the original error message. This is a security precaution taken by browsers to avoid leaking sensitive information.
14
-
15
-You can simplify the development/debugging process by ensuring that errors are thrown with a same-origin policy. Below are some common causes of cross-origin errors and ways to address them.
16
-
17
-### CDN
18
-
19
-When loading React (or other libraries that might throw errors) from a CDN, add the [`crossorigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) attribute to your `<script>` tags:
20
-
21
-```html
22
-<script crossorigin src="..."></script>
23
-```
24
-
25
-Also ensure the CDN responds with the `Access-Control-Allow-Origin: *` HTTP header:
26
-
27
-
28
-
29
-### Webpack
30
-
31
-Some JavaScript bundlers may wrap the application code with `eval` statements in development. (For example Webpack will do this if [`devtool`](https://webpack.js.org/configuration/devtool/) is set to any value containing the word "eval".) This may cause errors to be treated as cross-origin.
32
-
33
-If you use Webpack, we recommend using the `cheap-module-source-map` setting in development to avoid this problem.
\ No newline at end of file
docs/docs/error-decoder.md
deleted
-13
@@ -1,13 +0,0 @@
1
----
2
-id: error-decoder
3
-title: Error Decoder
4
-permalink: docs/error-decoder.html
5
----
6
-
7
-In the minified production build of React, we avoid sending down full error messages in order to reduce the number of bytes sent over the wire.
8
-
9
-We highly recommend using the development build locally when debugging your app since it tracks additional debug info and provides helpful warnings about potential problems in your apps, but if you encounter an exception while using the production build, this page will reassemble the original text of the error.
10
-
11
-<script src="/react/js/errorMap.js"></script>
12
-<div class="error-decoder-container"></div>
13
-<script src="/react/js/ErrorDecoderComponent.js"></script>
docs/docs/forms.md
deleted
-269
@@ -1,269 +0,0 @@
1
----
2
-id: forms
3
-title: Forms
4
-permalink: docs/forms.html
5
-prev: lists-and-keys.html
6
-next: lifting-state-up.html
7
-redirect_from:
8
- - "tips/controlled-input-null-value.html"
9
- - "docs/forms-zh-CN.html"
10
----
11
-
12
-HTML form elements work a little bit differently from other DOM elements in React, because form elements naturally keep some internal state. For example, this form in plain HTML accepts a single name:
13
-
14
-```html
15
-<form>
16
- <label>
17
- Name:
18
- <input type="text" name="name" />
19
- </label>
20
- <input type="submit" value="Submit" />
21
-</form>
22
-```
23
-
24
-This form has the default HTML form behavior of browsing to a new page when the user submits the form. If you want this behavior in React, it just works. But in most cases, it's convenient to have a JavaScript function that handles the submission of the form and has access to the data that the user entered into the form. The standard way to achieve this is with a technique called "controlled components".
25
-
26
-## Controlled Components
27
-
28
-In HTML, form elements such as `<input>`, `<textarea>`, and `<select>` typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with [`setState()`](/docs/react-component.html#setstate).
29
-
30
-We can combine the two by making the React state be the "single source of truth". Then the React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a "controlled component".
31
-
32
-For example, if we want to make the previous example log the name when it is submitted, we can write the form as a controlled component:
33
-
34
-```javascript{4,10-12,24}
35
-class NameForm extends React.Component {
36
- constructor(props) {
37
- super(props);
38
- this.state = {value: ''};
39
-
40
- this.handleChange = this.handleChange.bind(this);
41
- this.handleSubmit = this.handleSubmit.bind(this);
42
- }
43
-
44
- handleChange(event) {
45
- this.setState({value: event.target.value});
46
- }
47
-
48
- handleSubmit(event) {
49
- alert('A name was submitted: ' + this.state.value);
50
- event.preventDefault();
51
- }
52
-
53
- render() {
54
- return (
55
- <form onSubmit={this.handleSubmit}>
56
- <label>
57
- Name:
58
- <input type="text" value={this.state.value} onChange={this.handleChange} />
59
- </label>
60
- <input type="submit" value="Submit" />
61
- </form>
62
- );
63
- }
64
-}
65
-```
66
-
67
-[Try it on CodePen.](https://codepen.io/gaearon/pen/VmmPgp?editors=0010)
68
-
69
-Since the `value` attribute is set on our form element, the displayed value will always be `this.state.value`, making the React state the source of truth. Since `handleChange` runs on every keystroke to update the React state, the displayed value will update as the user types.
70
-
71
-With a controlled component, every state mutation will have an associated handler function. This makes it straightforward to modify or validate user input. For example, if we wanted to enforce that names are written with all uppercase letters, we could write `handleChange` as:
72
-
73
-```javascript{2}
74
-handleChange(event) {
75
- this.setState({value: event.target.value.toUpperCase()});
76
-}
77
-```
78
-
79
-## The textarea Tag
80
-
81
-In HTML, a `<textarea>` element defines its text by its children:
82
-
83
-```html
84
-<textarea>
85
- Hello there, this is some text in a text area
86
-</textarea>
87
-```
88
-
89
-In React, a `<textarea>` uses a `value` attribute instead. This way, a form using a `<textarea>` can be written very similarly to a form that uses a single-line input:
90
-
91
-```javascript{4-6,12-14,26}
92
-class EssayForm extends React.Component {
93
- constructor(props) {
94
- super(props);
95
- this.state = {
96
- value: 'Please write an essay about your favorite DOM element.'
97
- };
98
-
99
- this.handleChange = this.handleChange.bind(this);
100
- this.handleSubmit = this.handleSubmit.bind(this);
101
- }
102
-
103
- handleChange(event) {
104
- this.setState({value: event.target.value});
105
- }
106
-
107
- handleSubmit(event) {
108
- alert('An essay was submitted: ' + this.state.value);
109
- event.preventDefault();
110
- }
111
-
112
- render() {
113
- return (
114
- <form onSubmit={this.handleSubmit}>
115
- <label>
116
- Name:
117
- <textarea value={this.state.value} onChange={this.handleChange} />
118
- </label>
119
- <input type="submit" value="Submit" />
120
- </form>
121
- );
122
- }
123
-}
124
-```
125
-
126
-Notice that `this.state.value` is initialized in the constructor, so that the text area starts off with some text in it.
127
-
128
-## The select Tag
129
-
130
-In HTML, `<select>` creates a drop-down list. For example, this HTML creates a drop-down list of flavors:
131
-
132
-```html
133
-<select>
134
- <option value="grapefruit">Grapefruit</option>
135
- <option value="lime">Lime</option>
136
- <option selected value="coconut">Coconut</option>
137
- <option value="mango">Mango</option>
138
-</select>
139
-```
140
-
141
-Note that the Coconut option is initially selected, because of the `selected` attribute. React, instead of using this `selected` attribute, uses a `value` attribute on the root `select` tag. This is more convenient in a controlled component because you only need to update it in one place. For example:
142
-
143
-```javascript{4,10-12,24}
144
-class FlavorForm extends React.Component {
145
- constructor(props) {
146
- super(props);
147
- this.state = {value: 'coconut'};
148
-
149
- this.handleChange = this.handleChange.bind(this);
150
- this.handleSubmit = this.handleSubmit.bind(this);
151
- }
152
-
153
- handleChange(event) {
154
- this.setState({value: event.target.value});
155
- }
156
-
157
- handleSubmit(event) {
158
- alert('Your favorite flavor is: ' + this.state.value);
159
- event.preventDefault();
160
- }
161
-
162
- render() {
163
- return (
164
- <form onSubmit={this.handleSubmit}>
165
- <label>
166
- Pick your favorite La Croix flavor:
167
- <select value={this.state.value} onChange={this.handleChange}>
168
- <option value="grapefruit">Grapefruit</option>
169
- <option value="lime">Lime</option>
170
- <option value="coconut">Coconut</option>
171
- <option value="mango">Mango</option>
172
- </select>
173
- </label>
174
- <input type="submit" value="Submit" />
175
- </form>
176
- );
177
- }
178
-}
179
-```
180
-
181
-[Try it on CodePen.](https://codepen.io/gaearon/pen/JbbEzX?editors=0010)
182
-
183
-Overall, this makes it so that `<input type="text">`, `<textarea>`, and `<select>` all work very similarly - they all accept a `value` attribute that you can use to implement a controlled component.
184
-
185
-> Note
186
->
187
-> You can pass an array into the `value` attribute, allowing you to select multiple options in a `select` tag:
188
->
189
->```js
190
-><select multiple={true} value={['B', 'C']}>
191
->```
192
-
193
-## Handling Multiple Inputs
194
-
195
-When you need to handle multiple controlled `input` elements, you can add a `name` attribute to each element and let the handler function choose what to do based on the value of `event.target.name`.
196
-
197
-For example:
198
-
199
-```javascript{15,18,28,37}
200
-class Reservation extends React.Component {
201
- constructor(props) {
202
- super(props);
203
- this.state = {
204
- isGoing: true,
205
- numberOfGuests: 2
206
- };
207
-
208
- this.handleInputChange = this.handleInputChange.bind(this);
209
- }
210
-
211
- handleInputChange(event) {
212
- const target = event.target;
213
- const value = target.type === 'checkbox' ? target.checked : target.value;
214
- const name = target.name;
215
-
216
- this.setState({
217
- [name]: value
218
- });
219
- }
220
-
221
- render() {
222
- return (
223
- <form>
224
- <label>
225
- Is going:
226
- <input
227
- name="isGoing"
228
- type="checkbox"
229
- checked={this.state.isGoing}
230
- onChange={this.handleInputChange} />
231
- </label>
232
- <br />
233
- <label>
234
- Number of guests:
235
- <input
236
- name="numberOfGuests"
237
- type="number"
238
- value={this.state.numberOfGuests}
239
- onChange={this.handleInputChange} />
240
- </label>
241
- </form>
242
- );
243
- }
244
-}
245
-```
246
-
247
-[Try it on CodePen.](https://codepen.io/gaearon/pen/wgedvV?editors=0010)
248
-
249
-Note how we used the ES6 [computed property name](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names) syntax to update the state key corresponding to the given input name:
250
-
251
-```js{2}
252
-this.setState({
253
- [name]: value
254
-});
255
-```
256
-
257
-It is equivalent to this ES5 code:
258
-
259
-```js{2}
260
-var partialState = {};
261
-partialState[name] = value;
262
-this.setState(partialState);
263
-```
264
-
265
-Also, since `setState()` automatically [merges a partial state into the current state](/docs/state-and-lifecycle.html#state-updates-are-merged), we only needed to call it with the changed parts.
266
-
267
-## Alternatives to Controlled Components
268
-
269
-It can sometimes be tedious to use controlled components, because you need to write an event handler for every way your data can change and pipe all of the input state through a React component. This can become particularly annoying when you are converting a preexisting codebase to React, or integrating a React application with a non-React library. In these situations, you might want to check out [uncontrolled components](/docs/uncontrolled-components.html), an alternative technique for implementing input forms.
docs/docs/handling-events.md
deleted
-141
@@ -1,141 +0,0 @@
1
----
2
-id: handling-events
3
-title: Handling Events
4
-permalink: docs/handling-events.html
5
-prev: state-and-lifecycle.html
6
-next: conditional-rendering.html
7
-redirect_from:
8
- - "docs/events-ko-KR.html"
9
----
10
-
11
-Handling events with React elements is very similar to handling events on DOM elements. There are some syntactic differences:
12
-
13
-* React events are named using camelCase, rather than lowercase.
14
-* With JSX you pass a function as the event handler, rather than a string.
15
-
16
-For example, the HTML:
17
-
18
-```html
19
-<button onclick="activateLasers()">
20
- Activate Lasers
21
-</button>
22
-```
23
-
24
-is slightly different in React:
25
-
26
-```js{1}
27
-<button onClick={activateLasers}>
28
- Activate Lasers
29
-</button>
30
-```
31
-
32
-Another difference is that you cannot return `false` to prevent default behavior in React. You must call `preventDefault` explicitly. For example, with plain HTML, to prevent the default link behavior of opening a new page, you can write:
33
-
34
-```html
35
-<a href="#" onclick="console.log('The link was clicked.'); return false">
36
- Click me
37
-</a>
38
-```
39
-
40
-In React, this could instead be:
41
-
42
-```js{2-5,8}
43
-function ActionLink() {
44
- function handleClick(e) {
45
- e.preventDefault();
46
- console.log('The link was clicked.');
47
- }
48
-
49
- return (
50
- <a href="#" onClick={handleClick}>
51
- Click me
52
- </a>
53
- );
54
-}
55
-```
56
-
57
-Here, `e` is a synthetic event. React defines these synthetic events according to the [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/), so you don't need to worry about cross-browser compatibility. See the [`SyntheticEvent`](/docs/events.html) reference guide to learn more.
58
-
59
-When using React you should generally not need to call `addEventListener` to add listeners to a DOM element after it is created. Instead, just provide a listener when the element is initially rendered.
60
-
61
-When you define a component using an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes), a common pattern is for an event handler to be a method on the class. For example, this `Toggle` component renders a button that lets the user toggle between "ON" and "OFF" states:
62
-
63
-```js{6,7,10-14,18}
64
-class Toggle extends React.Component {
65
- constructor(props) {
66
- super(props);
67
- this.state = {isToggleOn: true};
68
-
69
- // This binding is necessary to make `this` work in the callback
70
- this.handleClick = this.handleClick.bind(this);
71
- }
72
-
73
- handleClick() {
74
- this.setState(prevState => ({
75
- isToggleOn: !prevState.isToggleOn
76
- }));
77
- }
78
-
79
- render() {
80
- return (
81
- <button onClick={this.handleClick}>
82
- {this.state.isToggleOn ? 'ON' : 'OFF'}
83
- </button>
84
- );
85
- }
86
-}
87
-
88
-ReactDOM.render(
89
- <Toggle />,
90
- document.getElementById('root')
91
-);
92
-```
93
-
94
-[Try it on CodePen.](http://codepen.io/gaearon/pen/xEmzGg?editors=0010)
95
-
96
-You have to be careful about the meaning of `this` in JSX callbacks. In JavaScript, class methods are not [bound](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind) by default. If you forget to bind `this.handleClick` and pass it to `onClick`, `this` will be `undefined` when the function is actually called.
97
-
98
-This is not React-specific behavior; it is a part of [how functions work in JavaScript](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). Generally, if you refer to a method without `()` after it, such as `onClick={this.handleClick}`, you should bind that method.
99
-
100
-If calling `bind` annoys you, there are two ways you can get around this. If you are using the experimental [public class fields syntax](https://babeljs.io/docs/plugins/transform-class-properties/), you can use class fields to correctly bind callbacks:
101
-
102
-```js{2-6}
103
-class LoggingButton extends React.Component {
104
- // This syntax ensures `this` is bound within handleClick.
105
- // Warning: this is *experimental* syntax.
106
- handleClick = () => {
107
- console.log('this is:', this);
108
- }
109
-
110
- render() {
111
- return (
112
- <button onClick={this.handleClick}>
113
- Click me
114
- </button>
115
- );
116
- }
117
-}
118
-```
119
-
120
-This syntax is enabled by default in [Create React App](https://github.com/facebookincubator/create-react-app).
121
-
122
-If you aren't using class fields syntax, you can use an [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) in the callback:
123
-
124
-```js{7-9}
125
-class LoggingButton extends React.Component {
126
- handleClick() {
127
- console.log('this is:', this);
128
- }
129
-
130
- render() {
131
- // This syntax ensures `this` is bound within handleClick
132
- return (
133
- <button onClick={(e) => this.handleClick(e)}>
134
- Click me
135
- </button>
136
- );
137
- }
138
-}
139
-```
140
-
141
-The problem with this syntax is that a different callback is created each time the `LoggingButton` renders. In most cases, this is fine. However, if this callback is passed as a prop to lower components, those components might do an extra re-rendering. We generally recommend binding in the constructor or using the class fields syntax, to avoid this sort of performance problem.
docs/docs/hello-world.md
deleted
-33
@@ -1,33 +0,0 @@
1
----
2
-id: hello-world
3
-title: Hello World
4
-permalink: docs/hello-world.html
5
-prev: installation.html
6
-next: introducing-jsx.html
7
-redirect_from:
8
- - "docs/index.html"
9
- - "docs/getting-started.html"
10
- - "docs/getting-started-ko-KR.html"
11
- - "docs/getting-started-zh-CN.html"
12
----
13
-
14
-The easiest way to get started with React is to use [this Hello World example code on CodePen](http://codepen.io/gaearon/pen/ZpvBNJ?editors=0010). You don't need to install anything; you can just open it in another tab and follow along as we go through examples. If you'd rather use a local development environment, check out the [Installation](/docs/installation.html) page.
15
-
16
-The smallest React example looks like this:
17
-
18
-```js
19
-ReactDOM.render(
20
- <h1>Hello, world!</h1>,
21
- document.getElementById('root')
22
-);
23
-```
24
-
25
-It renders a header saying "Hello, world!" on the page.
26
-
27
-The next few sections will gradually introduce you to using React. We will examine the building blocks of React apps: elements and components. Once you master them, you can create complex apps from small reusable pieces.
28
-
29
-## A Note on JavaScript
30
-
31
-React is a JavaScript library, and so it assumes you have a basic understanding of the JavaScript language. If you don't feel very confident, we recommend [refreshing your JavaScript knowledge](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) so you can follow along more easily.
32
-
33
-We also use some of the ES6 syntax in the examples. We try to use it sparingly because it's still relatively new, but we encourage you to get familiar with [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [template literals](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), and [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) statements. You can use <a href="http://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact&experimental=false&loose=false&spec=false&code=const%20element%20%3D%20%3Ch1%3EHello%2C%20world!%3C%2Fh1%3E%3B%0Aconst%20container%20%3D%20document.getElementById('root')%3B%0AReactDOM.render(element%2C%20container)%3B%0A">Babel REPL</a> to check what ES6 code compiles to.
docs/docs/higher-order-components.md
deleted
-423
@@ -1,423 +0,0 @@
1
----
2
-id: higher-order-components
3
-title: Higher-Order Components
4
-permalink: docs/higher-order-components.html
5
----
6
-
7
-A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React's compositional nature.
8
-
9
-Concretely, **a higher-order component is a function that takes a component and returns a new component.**
10
-
11
-```js
12
-const EnhancedComponent = higherOrderComponent(WrappedComponent);
13
-```
14
-
15
-Whereas a component transforms props into UI, a higher-order component transforms a component into another component.
16
-
17
-HOCs are common in third-party React libraries, such as Redux's [`connect`](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) and Relay's [`createContainer`](https://facebook.github.io/relay/docs/api-reference-relay.html#createcontainer-static-method).
18
-
19
-In this document, we'll discuss why higher-order components are useful, and how to write your own.
20
-
21
-## Use HOCs For Cross-Cutting Concerns
22
-
23
-> **Note**
24
->
25
-> We previously recommended mixins as a way to handle cross-cutting concerns. We've since realized that mixins create more trouble than they are worth. [Read more](/blog/2016/07/13/mixins-considered-harmful.html) about why we've moved away from mixins and how you can transition your existing components.
26
-
27
-Components are the primary unit of code reuse in React. However, you'll find that some patterns aren't a straightforward fit for traditional components.
28
-
29
-For example, say you have a `CommentList` component that subscribes to an external data source to render a list of comments:
30
-
31
-```js
32
-class CommentList extends React.Component {
33
- constructor() {
34
- super();
35
- this.handleChange = this.handleChange.bind(this);
36
- this.state = {
37
- // "DataSource" is some global data source
38
- comments: DataSource.getComments()
39
- };
40
- }
41
-
42
- componentDidMount() {
43
- // Subscribe to changes
44
- DataSource.addChangeListener(this.handleChange);
45
- }
46
-
47
- componentWillUnmount() {
48
- // Clean up listener
49
- DataSource.removeChangeListener(this.handleChange);
50
- }
51
-
52
- handleChange() {
53
- // Update component state whenever the data source changes
54
- this.setState({
55
- comments: DataSource.getComments()
56
- });
57
- }
58
-
59
- render() {
60
- return (
61
- <div>
62
- {this.state.comments.map((comment) => (
63
- <Comment comment={comment} key={comment.id} />
64
- ))}
65
- </div>
66
- );
67
- }
68
-}
69
-```
70
-
71
-Later, you write a component for subscribing to a single blog post, which follows a similar pattern:
72
-
73
-```js
74
-class BlogPost extends React.Component {
75
- constructor(props) {
76
- super(props);
77
- this.handleChange = this.handleChange.bind(this);
78
- this.state = {
79
- blogPost: DataSource.getBlogPost(props.id)
80
- };
81
- }
82
-
83
- componentDidMount() {
84
- DataSource.addChangeListener(this.handleChange);
85
- }
86
-
87
- componentWillUnmount() {
88
- DataSource.removeChangeListener(this.handleChange);
89
- }
90
-
91
- handleChange() {
92
- this.setState({
93
- blogPost: DataSource.getBlogPost(this.props.id)
94
- });
95
- }
96
-
97
- render() {
98
- return <TextBlock text={this.state.blogPost} />;
99
- }
100
-}
101
-```
102
-
103
-`CommentList` and `BlogPost` aren't identical — they call different methods on `DataSource`, and they render different output. But much of their implementation is the same:
104
-
105
-- On mount, add a change listener to `DataSource`.
106
-- Inside the listener, call `setState` whenever the data source changes.
107
-- On unmount, remove the change listener.
108
-
109
-You can imagine that in a large app, this same pattern of subscribing to `DataSource` and calling `setState` will occur over and over again. We want an abstraction that allows us to define this logic in a single place and share them across many components. This is where higher-order components excel.
110
-
111
-We can write a function that creates components, like `CommentList` and `BlogPost`, that subscribe to `DataSource`. The function will accept as one of its arguments a child component that receives the subscribed data as a prop. Let's call the function `withSubscription`:
112
-
113
-```js
114
-const CommentListWithSubscription = withSubscription(
115
- CommentList,
116
- (DataSource) => DataSource.getComments()
117
-);
118
-
119
-const BlogPostWithSubscription = withSubscription(
120
- BlogPost,
121
- (DataSource, props) => DataSource.getBlogPost(props.id)
122
-);
123
-```
124
-
125
-The first parameter is the wrapped component. The second parameter retrieves the data we're interested in, given a `DataSource` and the current props.
126
-
127
-When `CommentListWithSubscription` and `BlogPostWithSubscription` are rendered, `CommentList` and `BlogPost` will be passed a `data` prop with the most current data retrieved from `DataSource`:
128
-
129
-```js
130
-// This function takes a component...
131
-function withSubscription(WrappedComponent, selectData) {
132
- // ...and returns another component...
133
- return class extends React.Component {
134
- constructor(props) {
135
- super(props);
136
- this.handleChange = this.handleChange.bind(this);
137
- this.state = {
138
- data: selectData(DataSource, props)
139
- };
140
- }
141
-
142
- componentDidMount() {
143
- // ... that takes care of the subscription...
144
- DataSource.addChangeListener(this.handleChange);
145
- }
146
-
147
- componentWillUnmount() {
148
- DataSource.removeChangeListener(this.handleChange);
149
- }
150
-
151
- handleChange() {
152
- this.setState({
153
- data: selectData(DataSource, this.props)
154
- });
155
- }
156
-
157
- render() {
158
- // ... and renders the wrapped component with the fresh data!
159
- // Notice that we pass through any additional props
160
- return <WrappedComponent data={this.state.data} {...this.props} />;
161
- }
162
- };
163
-}
164
-```
165
-
166
-Note that an HOC doesn't modify the input component, nor does it use inheritance to copy its behavior. Rather, an HOC *composes* the original component by *wrapping* it in a container component. An HOC is a pure function with zero side-effects.
167
-
168
-And that's it! The wrapped component receives all the props of the container, along with a new prop, `data`, which it uses to render its output. The HOC isn't concerned with how or why the data is used, and the wrapped component isn't concerned with where the data came from.
169
-
170
-Because `withSubscription` is a normal function, you can add as many or as few arguments as you like. For example, you may want to make the name of the `data` prop configurable, to further isolate the HOC from the wrapped component. Or you could accept an argument that configures `shouldComponentUpdate`, or one that configures the data source. These are all possible because the HOC has full control over how the component is defined.
171
-
172
-Like components, the contract between `withSubscription` and the wrapped component is entirely props-based. This makes it easy to swap one HOC for a different one, as long as they provide the same props to the wrapped component. This may be useful if you change data-fetching libraries, for example.
173
-
174
-## Don't Mutate the Original Component. Use Composition.
175
-
176
-Resist the temptation to modify a component's prototype (or otherwise mutate it) inside an HOC.
177
-
178
-```js
179
-function logProps(InputComponent) {
180
- InputComponent.prototype.componentWillReceiveProps = function(nextProps) {
181
- console.log('Current props: ', this.props);
182
- console.log('Next props: ', nextProps);
183
- };
184
- // The fact that we're returning the original input is a hint that it has
185
- // been mutated.
186
- return InputComponent;
187
-}
188
-
189
-// EnhancedComponent will log whenever props are received
190
-const EnhancedComponent = logProps(InputComponent);
191
-```
192
-
193
-There are a few problems with this. One is that the input component cannot be reused separately from the enhanced component. More crucially, if you apply another HOC to `EnhancedComponent` that *also* mutates `componentWillReceiveProps`, the first HOC's functionality will be overridden! This HOC also won't work with function components, which do not have lifecycle methods.
194
-
195
-Mutating HOCs are a leaky abstraction—the consumer must know how they are implemented in order to avoid conflicts with other HOCs.
196
-
197
-Instead of mutation, HOCs should use composition, by wrapping the input component in a container component:
198
-
199
-```js
200
-function logProps(WrappedComponent) {
201
- return class extends React.Component {
202
- componentWillReceiveProps(nextProps) {
203
- console.log('Current props: ', this.props);
204
- console.log('Next props: ', nextProps);
205
- }
206
- render() {
207
- // Wraps the input component in a container, without mutating it. Good!
208
- return <WrappedComponent {...this.props} />;
209
- }
210
- }
211
-}
212
-```
213
-
214
-This HOC has the same functionality as the mutating version while avoiding the potential for clashes. It works equally well with class and functional components. And because it's a pure function, it's composable with other HOCs, or even with itself.
215
-
216
-You may have noticed similarities between HOCs and a pattern called **container components**. Container components are part of a strategy of separating responsibility between high-level and low-level concerns. Containers manage things like subscriptions and state, and pass props to components that handle things like rendering UI. HOCs use containers as part of their implementation. You can think of HOCs as parameterized container component definitions.
217
-
218
-## Convention: Pass Unrelated Props Through to the Wrapped Component
219
-
220
-HOCs add features to a component. They shouldn't drastically alter its contract. It's expected that the component returned from an HOC has a similar interface to the wrapped component.
221
-
222
-HOCs should pass through props that are unrelated to its specific concern. Most HOCs contain a render method that looks something like this:
223
-
224
-```js
225
-render() {
226
- // Filter out extra props that are specific to this HOC and shouldn't be
227
- // passed through
228
- const { extraProp, ...passThroughProps } = this.props;
229
-
230
- // Inject props into the wrapped component. These are usually state values or
231
- // instance methods.
232
- const injectedProp = someStateOrInstanceMethod;
233
-
234
- // Pass props to wrapped component
235
- return (
236
- <WrappedComponent
237
- injectedProp={injectedProp}
238
- {...passThroughProps}
239
- />
240
- );
241
-}
242
-```
243
-
244
-This convention helps ensure that HOCs are as flexible and reusable as possible.
245
-
246
-## Convention: Maximizing Composability
247
-
248
-Not all HOCs look the same. Sometimes they accept only a single argument, the wrapped component:
249
-
250
-```js
251
-const NavbarWithRouter = withRouter(Navbar);
252
-```
253
-
254
-Usually, HOCs accept additional arguments. In this example from Relay, a config object is used to specify a component's data dependencies:
255
-
256
-```js
257
-const CommentWithRelay = Relay.createContainer(Comment, config);
258
-```
259
-
260
-The most common signature for HOCs looks like this:
261
-
262
-```js
263
-// React Redux's `connect`
264
-const ConnectedComment = connect(commentSelector, commentActions)(CommentList);
265
-```
266
-
267
-*What?!* If you break it apart, it's easier to see what's going on.
268
-
269
-```js
270
-// connect is a function that returns another function
271
-const enhance = connect(commentListSelector, commentListActions);
272
-// The returned function is an HOC, which returns a component that is connected
273
-// to the Redux store
274
-const ConnectedComment = enhance(CommentList);
275
-```
276
-In other words, `connect` is a higher-order function that returns a higher-order component!
277
-
278
-This form may seem confusing or unnecessary, but it has a useful property. Single-argument HOCs like the one returned by the `connect` function have the signature `Component => Component`. Functions whose output type is the same as its input type are really easy to compose together.
279
-
280
-```js
281
-// Instead of doing this...
282
-const EnhancedComponent = withRouter(connect(commentSelector)(WrappedComponent))
283
-
284
-// ... you can use a function composition utility
285
-// compose(f, g, h) is the same as (...args) => f(g(h(...args)))
286
-const enhance = compose(
287
- // These are both single-argument HOCs
288
- withRouter,
289
- connect(commentSelector)
290
-)
291
-const EnhancedComponent = enhance(WrappedComponent)
292
-```
293
-
294
-(This same property also allows `connect` and other enhancer-style HOCs to be used as decorators, an experimental JavaScript proposal.)
295
-
296
-The `compose` utility function is provided by many third-party libraries including lodash (as [`lodash.flowRight`](https://lodash.com/docs/#flowRight)), [Redux](http://redux.js.org/docs/api/compose.html), and [Ramda](http://ramdajs.com/docs/#compose).
297
-
298
-## Convention: Wrap the Display Name for Easy Debugging
299
-
300
-The container components created by HOCs show up in the [React Developer Tools](https://github.com/facebook/react-devtools) like any other component. To ease debugging, choose a display name that communicates that it's the result of an HOC.
301
-
302
-The most common technique is to wrap the display name of the wrapped component. So if your higher-order component is named `withSubscription`, and the wrapped component's display name is `CommentList`, use the display name `WithSubscription(CommentList)`:
303
-
304
-```js
305
-function withSubscription(WrappedComponent) {
306
- class WithSubscription extends React.Component {/* ... */}
307
- WithSubscription.displayName = `WithSubscription(${getDisplayName(WrappedComponent)})`;
308
- return WithSubscription;
309
-}
310
-
311
-function getDisplayName(WrappedComponent) {
312
- return WrappedComponent.displayName || WrappedComponent.name || 'Component';
313
-}
314
-```
315
-
316
-
317
-## Caveats
318
-
319
-Higher-order components come with a few caveats that aren't immediately obvious if you're new to React.
320
-
321
-### Don't Use HOCs Inside the render Method
322
-
323
-React's diffing algorithm (called reconciliation) uses component identity to determine whether it should update the existing subtree or throw it away and mount a new one. If the component returned from `render` is identical (`===`) to the component from the previous render, React recursively updates the subtree by diffing it with the new one. If they're not equal, the previous subtree is unmounted completely.
324
-
325
-Normally, you shouldn't need to think about this. But it matters for HOCs because it means you can't apply an HOC to a component within the render method of a component:
326
-
327
-```js
328
-render() {
329
- // A new version of EnhancedComponent is created on every render
330
- // EnhancedComponent1 !== EnhancedComponent2
331
- const EnhancedComponent = enhance(MyComponent);
332
- // That causes the entire subtree to unmount/remount each time!
333
- return <EnhancedComponent />;
334
-}
335
-```
336
-
337
-The problem here isn't just about performance — remounting a component causes the state of that component and all of its children to be lost.
338
-
339
-Instead, apply HOCs outside the component definition so that the resulting component is created only once. Then, its identity will be consistent across renders. This is usually what you want, anyway.
340
-
341
-In those rare cases where you need to apply an HOC dynamically, you can also do it inside a component's lifecycle methods or its constructor.
342
-
343
-### Static Methods Must Be Copied Over
344
-
345
-Sometimes it's useful to define a static method on a React component. For example, Relay containers expose a static method `getFragment` to facilitate the composition of GraphQL fragments.
346
-
347
-When you apply an HOC to a component, though, the original component is wrapped with a container component. That means the new component does not have any of the static methods of the original component.
348
-
349
-```js
350
-// Define a static method
351
-WrappedComponent.staticMethod = function() {/*...*/}
352
-// Now apply an HOC
353
-const EnhancedComponent = enhance(WrappedComponent);
354
-
355
-// The enhanced component has no static method
356
-typeof EnhancedComponent.staticMethod === 'undefined' // true
357
-```
358
-
359
-To solve this, you could copy the methods onto the container before returning it:
360
-
361
-```js
362
-function enhance(WrappedComponent) {
363
- class Enhance extends React.Component {/*...*/}
364
- // Must know exactly which method(s) to copy :(
365
- Enhance.staticMethod = WrappedComponent.staticMethod;
366
- return Enhance;
367
-}
368
-```
369
-
370
-However, this requires you to know exactly which methods need to be copied. You can use [hoist-non-react-statics](https://github.com/mridgway/hoist-non-react-statics) to automatically copy all non-React static methods:
371
-
372
-```js
373
-import hoistNonReactStatic from 'hoist-non-react-statics';
374
-function enhance(WrappedComponent) {
375
- class Enhance extends React.Component {/*...*/}
376
- hoistNonReactStatic(Enhance, WrappedComponent);
377
- return Enhance;
378
-}
379
-```
380
-
381
-Another possible solution is to export the static method separately from the component itself.
382
-
383
-```js
384
-// Instead of...
385
-MyComponent.someFunction = someFunction;
386
-export default MyComponent;
387
-
388
-// ...export the method separately...
389
-export { someFunction };
390
-
391
-// ...and in the consuming module, import both
392
-import MyComponent, { someFunction } from './MyComponent.js';
393
-```
394
-
395
-### Refs Aren't Passed Through
396
-
397
-While the convention for higher-order components is to pass through all props to the wrapped component, it's not possible to pass through refs. That's because `ref` is not really a prop — like `key`, it's handled specially by React. If you add a ref to an element whose component is the result of an HOC, the ref refers to an instance of the outermost container component, not the wrapped component.
398
-
399
-If you find yourself facing this problem, the ideal solution is to figure out how to avoid using `ref` at all. Occasionally, users who are new to the React paradigm rely on refs in situations where a prop would work better.
400
-
401
-That said, there are times when refs are a necessary escape hatch — React wouldn't support them otherwise. Focusing an input field is an example where you may want imperative control of a component. In that case, one solution is to pass a ref callback as a normal prop, by giving it a different name:
402
-
403
-```js
404
-function Field({ inputRef, ...rest }) {
405
- return <input ref={inputRef} {...rest} />;
406
-}
407
-
408
-// Wrap Field in a higher-order component
409
-const EnhancedField = enhance(Field);
410
-
411
-// Inside a class component's render method...
412
-<EnhancedField
413
- inputRef={(inputEl) => {
414
- // This callback gets passed through as a regular prop
415
- this.inputEl = inputEl
416
- }}
417
-/>
418
-
419
-// Now you can call imperative methods
420
-this.inputEl.focus();
421
-```
422
-
423
-This is not a perfect solution by any means. We prefer that refs remain a library concern, rather than require you to manually handle them. We are exploring ways to solve this problem so that using an HOC is unobservable.
docs/docs/installation.md
deleted
-158
@@ -1,158 +0,0 @@
1
----
2
-id: installation
3
-title: Installation
4
-permalink: docs/installation.html
5
-redirect_from:
6
- - "download.html"
7
- - "downloads.html"
8
- - "docs/tooling-integration.html"
9
- - "docs/package-management.html"
10
- - "docs/language-tooling.html"
11
- - "docs/environments.html"
12
-next: hello-world.html
13
----
14
-
15
-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.
16
-
17
-Here are a couple of ways to get started:
18
-
19
-* [Try React](#trying-out-react)
20
-* [Create a New App](#creating-a-new-application)
21
-* [Add React to an Existing App](#adding-react-to-an-existing-application)
22
-
23
-## Trying Out React
24
-
25
-If you're just interested in playing around with React, you can use CodePen. Try starting from [this Hello World example code](http://codepen.io/gaearon/pen/rrpgNB?editors=0010). You don't need to install anything; you can just modify the code and see if it works.
26
-
27
-If you prefer to use your own text editor, you can also <a href="https://raw.githubusercontent.com/facebook/react/master/docs/downloads/single-file-example.html" download="hello.html">download this HTML file</a>, edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so don't use it in production.
28
-
29
-If you want to use it for a full application, there are two popular ways to get started with React: using Create React App, or adding it to an existing application.
30
-
31
-## Creating a New Application
32
-
33
-[Create React App](http://github.com/facebookincubator/create-react-app) is the best way to start building a new React single page application. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.
34
-
35
-```bash
36
-npm install -g create-react-app
37
-create-react-app my-app
38
-
39
-cd my-app
40
-npm start
41
-```
42
-
43
-Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. It uses build tools like Babel and webpack under the hood, but works with zero configuration.
44
-
45
-When you're ready to deploy to production, running `npm run build` will create an optimized build of your app in the `build` folder. You can learn more about Create React App [from its README](https://github.com/facebookincubator/create-react-app#create-react-app-) and the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#table-of-contents).
46
-
47
-## Adding React to an Existing Application
48
-
49
-You don't need to rewrite your app to start using React.
50
-
51
-We recommend adding React to a small part of your application, such as an individual widget, so you can see if it works well for your use case.
52
-
53
-While React [can be used](/docs/react-without-es6.html) without a build pipeline, we recommend setting it up so you can be more productive. A modern build pipeline typically consists of:
54
-
55
-* A **package manager**, such as [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/). It lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.
56
-* A **bundler**, such as [webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/). It lets you write modular code and bundle it together into small packages to optimize load time.
57
-* A **compiler** such as [Babel](http://babeljs.io/). It lets you write modern JavaScript code that still works in older browsers.
58
-
59
-### Installing React
60
-
61
->**Note:**
62
->
63
->Once installed, we strongly recommend setting up a [production build process](/docs/optimizing-performance.html#use-the-production-build) to ensure you're using the fast version of React in production.
64
-
65
-We recommend using [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/) for managing front-end dependencies. If you're new to package managers, the [Yarn documentation](https://yarnpkg.com/en/docs/getting-started) is a good place to get started.
66
-
67
-To install React with Yarn, run:
68
-
69
-```bash
70
-yarn init
71
-yarn add react react-dom
72
-```
73
-
74
-To install React with npm, run:
75
-
76
-```bash
77
-npm init
78
-npm install --save react react-dom
79
-```
80
-
81
-Both Yarn and npm download packages from the [npm registry](http://npmjs.com/).
82
-
83
-### Enabling ES6 and JSX
84
-
85
-We recommend using React with [Babel](http://babeljs.io/) to let you use ES6 and JSX in your JavaScript code. ES6 is a set of modern JavaScript features that make development easier, and JSX is an extension to the JavaScript language that works nicely with React.
86
-
87
-The [Babel setup instructions](https://babeljs.io/docs/setup/) explain how to configure Babel in many different build environments. Make sure you install [`babel-preset-react`](http://babeljs.io/docs/plugins/preset-react/#basic-setup-with-the-cli-) and [`babel-preset-es2015`](http://babeljs.io/docs/plugins/preset-es2015/#basic-setup-with-the-cli-) and enable them in your [`.babelrc` configuration](http://babeljs.io/docs/usage/babelrc/), and you're good to go.
88
-
89
-### Hello World with ES6 and JSX
90
-
91
-We recommend using a bundler like [webpack](https://webpack.js.org/) or [Browserify](http://browserify.org/) so you can write modular code and bundle it together into small packages to optimize load time.
92
-
93
-The smallest React example looks like this:
94
-
95
-```js
96
-import React from 'react';
97
-import ReactDOM from 'react-dom';
98
-
99
-ReactDOM.render(
100
- <h1>Hello, world!</h1>,
101
- document.getElementById('root')
102
-);
103
-```
104
-
105
-This code renders into a DOM element with the id of `root` so you need `<div id="root"></div>` somewhere in your HTML file.
106
-
107
-Similarly, you can render a React component inside a DOM element somewhere inside your existing app written with any other JavaScript UI library.
108
-
109
-[Learn more about integrating React with existing code.](/docs/integrating-with-other-libraries.html#integrating-with-other-view-libraries)
110
-
111
-### Development and Production Versions
112
-
113
-By default, React includes many helpful warnings. These warnings are very useful in development.
114
-
115
-**However, they make the development version of React larger and slower so you should use the production version when you deploy the app.**
116
-
117
-Learn [how to tell if your website is serving the right version of React](/docs/optimizing-performance.html#use-the-production-build), and how to configure the production build process most efficiently:
118
-
119
-* [Creating a Production Build with Create React App](/docs/optimizing-performance.html#create-react-app)
120
-* [Creating a Production Build with Single-File Builds](/docs/optimizing-performance.html#single-file-builds)
121
-* [Creating a Production Build with Brunch](/docs/optimizing-performance.html#brunch)
122
-* [Creating a Production Build with Browserify](/docs/optimizing-performance.html#browserify)
123
-* [Creating a Production Build with Rollup](/docs/optimizing-performance.html#rollup)
124
-* [Creating a Production Build with webpack](/docs/optimizing-performance.html#webpack)
125
-
126
-### Using a CDN
127
-
128
-If you don't want to use npm to manage client packages, the `react` and `react-dom` npm packages also provide single-file distributions in `umd` folders, which are hosted on a CDN:
129
-
130
-```html
131
-<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
132
-<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
133
-```
134
-
135
-The versions above are only meant for development, and are not suitable for production. Minified and optimized production versions of React are available at:
136
-
137
-```html
138
-<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
139
-<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
140
-```
141
-
142
-To load a specific version of `react` and `react-dom`, replace `16` with the version number.
143
-
144
-If you use Bower, React is available via the `react` package.
145
-
146
-#### Why the `crossorigin` Attribute?
147
-
148
-If you serve React from a CDN, we recommend to keep the [`crossorigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) attribute set:
149
-
150
-```html
151
-<script crossorigin src="..."></script>
152
-```
153
-
154
-We also recommend to verify that the CDN you are using sets the `Access-Control-Allow-Origin: *` HTTP header:
155
-
156
-
157
-
158
-This enables a better [error handling experience](/blog/2017/07/26/error-handling-in-react-16.html) in React 16 and later.
docs/docs/integrating-with-other-libraries.md
deleted
-439
@@ -1,439 +0,0 @@
1
----
2
-id: integrating-with-other-libraries
3
-title: Integrating with Other Libraries
4
-permalink: docs/integrating-with-other-libraries.html
5
----
6
-
7
-React can be used in any web application. It can be embedded in other applications and, with a little care, other applications can be embedded in React. This guide will examine some of the more common use cases, focusing on integration with [jQuery](https://jquery.com/) and [Backbone](http://backbonejs.org/), but the same ideas can be applied to integrating components with any existing code.
8
-
9
-## Integrating with DOM Manipulation Plugins
10
-
11
-React is unaware of changes made to the DOM outside of React. It determines updates based on its own internal representation, and if the same DOM nodes are manipulated by another library, React gets confused and has no way to recover.
12
-
13
-This does not mean it is impossible or even necessarily difficult to combine React with other ways of affecting the DOM, you just have to be mindful of what each are doing.
14
-
15
-The easiest way to avoid conflicts is to prevent the React component from updating. You can do this by rendering elements that React has no reason to update, like an empty `<div />`.
16
-
17
-### How to Approach the Problem
18
-
19
-To demonstrate this, let's sketch out a wrapper for a generic jQuery plugin.
20
-
21
-We will attach a [ref](/docs/refs-and-the-dom.html) to the root DOM element. Inside `componentDidMount`, we will get a reference to it so we can pass it to the jQuery plugin.
22
-
23
-To prevent React from touching the DOM after mounting, we will return an empty `<div />` from the `render()` method. The `<div />` element has no properties or children, so React has no reason to update it, leaving the jQuery plugin free to manage that part of the DOM:
24
-
25
-```js{3,4,8,12}
26
-class SomePlugin extends React.Component {
27
- componentDidMount() {
28
- this.$el = $(this.el);
29
- this.$el.somePlugin();
30
- }
31
-
32
- componentWillUnmount() {
33
- this.$el.somePlugin('destroy');
34
- }
35
-
36
- render() {
37
- return <div ref={el => this.el = el} />;
38
- }
39
-}
40
-```
41
-
42
-Note that we defined both `componentDidMount` and `componentWillUnmount` [lifecycle hooks](/docs/react-component.html#the-component-lifecycle). Many jQuery plugins attach event listeners to the DOM so it's important to detach them in `componentWillUnmount`. If the plugin does not provide a method for cleanup, you will probably have to provide your own, remembering to remove any event listeners the plugin registered to prevent memory leaks.
43
-
44
-### Integrating with jQuery Chosen Plugin
45
-
46
-For a more concrete example of these concepts, let's write a minimal wrapper for the plugin [Chosen](https://harvesthq.github.io/chosen/), which augments `<select>` inputs.
47
-
48
->**Note:**
49
->
50
->Just because it's possible, doesn't mean that it's the best approach for React apps. We encourage you to use React components when you can. React components are easier to reuse in React applications, and often provide more control over their behavior and appearance.
51
-
52
-First, let's look at what Chosen does to the DOM.
53
-
54
-If you call it on a `<select>` DOM node, it reads the attributes off of the original DOM node, hides it with an inline style, and then appends a separate DOM node with its own visual representation right after the `<select>`. Then it fires jQuery events to notify us about the changes.
55
-
56
-Let's say that this is the API we're striving for with our `<Chosen>` wrapper React component:
57
-
58
-```js
59
-function Example() {
60
- return (
61
- <Chosen onChange={value => console.log(value)}>
62
- <option>vanilla</option>
63
- <option>chocolate</option>
64
- <option>strawberry</option>
65
- </Chosen>
66
- );
67
-}
68
-```
69
-
70
-We will implement it as an [uncontrolled component](/docs/uncontrolled-components.html) for simplicity.
71
-
72
-First, we will create an empty component with a `render()` method where we return `<select>` wrapped in a `<div>`:
73
-
74
-```js{4,5}
75
-class Chosen extends React.Component {
76
- render() {
77
- return (
78
- <div>
79
- <select className="Chosen-select" ref={el => this.el = el}>
80
- {this.props.children}
81
- </select>
82
- </div>
83
- );
84
- }
85
-}
86
-```
87
-
88
-Notice how we wrapped `<select>` in an extra `<div>`. This is necessary because Chosen will append another DOM element right after the `<select>` node we passed to it. However, as far as React is concerned, `<div>` always only has a single child. This is how we ensure that React updates won't conflict with the extra DOM node appended by Chosen. It is important that if you modify the DOM outside of React flow, you must ensure React doesn't have a reason to touch those DOM nodes.
89
-
90
-Next, we will implement the lifecycle hooks. We need to initialize Chosen with the ref to the `<select>` node in `componentDidMount`, and tear it down in `componentWillUnmount`:
91
-
92
-```js{2,3,7}
93
-componentDidMount() {
94
- this.$el = $(this.el);
95
- this.$el.chosen();
96
-}
97
-
98
-componentWillUnmount() {
99
- this.$el.chosen('destroy');
100
-}
101
-```
102
-
103
-[Try it on CodePen.](http://codepen.io/gaearon/pen/qmqeQx?editors=0010)
104
-
105
-Note that React assigns no special meaning to the `this.el` field. It only works because we have previously assigned this field from a `ref` in the `render()` method:
106
-
107
-```js
108
-<select className="Chosen-select" ref={el => this.el = el}>
109
-```
110
-
111
-This is enough to get our component to render, but we also want to be notified about the value changes. To do this, we will subscribe to the jQuery `change` event on the `<select>` managed by Chosen.
112
-
113
-We won't pass `this.props.onChange` directly to Chosen because component's props might change over time, and that includes event handlers. Instead, we will declare a `handleChange()` method that calls `this.props.onChange`, and subscribe it to the jQuery `change` event:
114
-
115
-```js{5,6,10,14-16}
116
-componentDidMount() {
117
- this.$el = $(this.el);
118
- this.$el.chosen();
119
-
120
- this.handleChange = this.handleChange.bind(this);
121
- this.$el.on('change', this.handleChange);
122
-}
123
-
124
-componentWillUnmount() {
125
- this.$el.off('change', this.handleChange);
126
- this.$el.chosen('destroy');
127
-}
128
-
129
-handleChange(e) {
130
- this.props.onChange(e.target.value);
131
-}
132
-```
133
-
134
-[Try it on CodePen.](http://codepen.io/gaearon/pen/bWgbeE?editors=0010)
135
-
136
-Finally, there is one more thing left to do. In React, props can change over time. For example, the `<Chosen>` component can get different children if parent component's state changes. This means that at integration points it is important that we manually update the DOM in response to prop updates, since we no longer let React manage the DOM for us.
137
-
138
-Chosen's documentation suggests that we can use jQuery `trigger()` API to notify it about changes to the original DOM element. We will let React take care of updating `this.props.children` inside `<select>`, but we will also add a `componentDidUpdate()` lifecycle hook that notifies Chosen about changes in the children list:
139
-
140
-```js{2,3}
141
-componentDidUpdate(prevProps) {
142
- if (prevProps.children !== this.props.children) {
143
- this.$el.trigger("chosen:updated");
144
- }
145
-}
146
-```
147
-
148
-This way, Chosen will know to update its DOM element when the `<select>` children managed by React change.
149
-
150
-The complete implementation of the `Chosen` component looks like this:
151
-
152
-```js
153
-class Chosen extends React.Component {
154
- componentDidMount() {
155
- this.$el = $(this.el);
156
- this.$el.chosen();
157
-
158
- this.handleChange = this.handleChange.bind(this);
159
- this.$el.on('change', this.handleChange);
160
- }
161
-
162
- componentDidUpdate(prevProps) {
163
- if (prevProps.children !== this.props.children) {
164
- this.$el.trigger("chosen:updated");
165
- }
166
- }
167
-
168
- componentWillUnmount() {
169
- this.$el.off('change', this.handleChange);
170
- this.$el.chosen('destroy');
171
- }
172
-
173
- handleChange(e) {
174
- this.props.onChange(e.target.value);
175
- }
176
-
177
- render() {
178
- return (
179
- <div>
180
- <select className="Chosen-select" ref={el => this.el = el}>
181
- {this.props.children}
182
- </select>
183
- </div>
184
- );
185
- }
186
-}
187
-```
188
-
189
-[Try it on CodePen.](http://codepen.io/gaearon/pen/xdgKOz?editors=0010)
190
-
191
-## Integrating with Other View Libraries
192
-
193
-React can be embedded into other applications thanks to the flexibility of [`ReactDOM.render()`](/docs/react-dom.html#render).
194
-
195
-Although React is commonly used at startup to load a single root React component into the DOM, `ReactDOM.render()` can also be called multiple times for independent parts of the UI which can be as small as a button, or as large as an app.
196
-
197
-In fact, this is exactly how React is used at Facebook. This lets us write applications in React piece by piece, and combine it with our existing server-generated templates and other client-side code.
198
-
199
-### Replacing String-Based Rendering with React
200
-
201
-A common pattern in older web applications is to describe chunks of the DOM as a string and insert it into the DOM like so: `$el.html(htmlString)`. These points in a codebase are perfect for introducing React. Just rewrite the string based rendering as a React component.
202
-
203
-So the following jQuery implementation...
204
-
205
-```js
206
-$('#container').html('<button id="btn">Say Hello</button>');
207
-$('#btn').click(function() {
208
- alert('Hello!');
209
-});
210
-```
211
-
212
-...could be rewritten using a React component:
213
-
214
-```js
215
-function Button() {
216
- return <button id="btn">Say Hello</button>;
217
-}
218
-
219
-ReactDOM.render(
220
- <Button />,
221
- document.getElementById('container'),
222
- function() {
223
- $('#btn').click(function() {
224
- alert('Hello!');
225
- });
226
- }
227
-);
228
-```
229
-
230
-From here you could start moving more logic into the component and begin adopting more common React practices. For example, in components it is best not to rely on IDs because the same component can be rendered multiple times. Instead, we will use the [React event system](/docs/handling-events.html) and register the click handler directly on the React `<button>` element:
231
-
232
-```js{2,6,9}
233
-function Button(props) {
234
- return <button onClick={props.onClick}>Say Hello</button>;
235
-}
236
-
237
-function HelloButton() {
238
- function handleClick() {
239
- alert('Hello!');
240
- }
241
- return <Button onClick={handleClick} />;
242
-}
243
-
244
-ReactDOM.render(
245
- <HelloButton />,
246
- document.getElementById('container')
247
-);
248
-```
249
-
250
-[Try it on CodePen.](http://codepen.io/gaearon/pen/RVKbvW?editors=1010)
251
-
252
-You can have as many such isolated components as you like, and use `ReactDOM.render()` to render them to different DOM containers. Gradually, as you convert more of your app to React, you will be able to combine them into larger components, and move some of the `ReactDOM.render()` calls up the hierarchy.
253
-
254
-### Embedding React in a Backbone View
255
-
256
-[Backbone](http://backbonejs.org/) views typically use HTML strings, or string-producing template functions, to create the content for their DOM elements. This process, too, can be replaced with rendering a React component.
257
-
258
-Below, we will create a Backbone view called `ParagraphView`. It will override Backbone's `render()` function to render a React `<Paragraph>` component into the DOM element provided by Backbone (`this.el`). Here, too, we are using [`ReactDOM.render()`](/docs/react-dom.html#render):
259
-
260
-```js{1,5,8,12}
261
-function Paragraph(props) {
262
- return <p>{props.text}</p>;
263
-}
264
-
265
-const ParagraphView = Backbone.View.extend({
266
- render() {
267
- const text = this.model.get('text');
268
- ReactDOM.render(<Paragraph text={text} />, this.el);
269
- return this;
270
- },
271
- remove() {
272
- ReactDOM.unmountComponentAtNode(this.el);
273
- Backbone.View.prototype.remove.call(this);
274
- }
275
-});
276
-```
277
-
278
-[Try it on CodePen.](http://codepen.io/gaearon/pen/gWgOYL?editors=0010)
279
-
280
-It is important that we also call `ReactDOM.unmountComponentAtNode()` in the `remove` method so that React unregisters event handlers and other resources associated with the component tree when it is detached.
281
-
282
-When a component is removed *from within* a React tree, the cleanup is performed automatically, but because we are removing the entire tree by hand, we must call it this method.
283
-
284
-## Integrating with Model Layers
285
-
286
-While it is generally recommended to use unidirectional data flow such as [React state](/docs/lifting-state-up.html), [Flux](http://facebook.github.io/flux/), or [Redux](http://redux.js.org/), React components can use a model layer from other frameworks and libraries.
287
-
288
-### Using Backbone Models in React Components
289
-
290
-The simplest way to consume [Backbone](http://backbonejs.org/) models and collections from a React component is to listen to the various change events and manually force an update.
291
-
292
-Components responsible for rendering models would listen to `'change'` events, while components responsible for rendering collections would listen for `'add'` and `'remove'` events. In both cases, call [`this.forceUpdate()`](/docs/react-component.html#forceupdate) to rerender the component with the new data.
293
-
294
-In the example below, the `List` component renders a Backbone collection, using the `Item` component to render individual items.
295
-
296
-```js{1,7-9,12,16,24,30-32,35,39,46}
297
-class Item extends React.Component {
298
- constructor(props) {
299
- super(props);
300
- this.handleChange = this.handleChange.bind(this);
301
- }
302
-
303
- handleChange() {
304
- this.forceUpdate();
305
- }
306
-
307
- componentDidMount() {
308
- this.props.model.on('change', this.handleChange);
309
- }
310
-
311
- componentWillUnmount() {
312
- this.props.model.off('change', this.handleChange);
313
- }
314
-
315
- render() {
316
- return <li>{this.props.model.get('text')}</li>;
317
- }
318
-}
319
-
320
-class List extends React.Component {
321
- constructor(props) {
322
- super(props);
323
- this.handleChange = this.handleChange.bind(this);
324
- }
325
-
326
- handleChange() {
327
- this.forceUpdate();
328
- }
329
-
330
- componentDidMount() {
331
- this.props.collection.on('add', 'remove', this.handleChange);
332
- }
333
-
334
- componentWillUnmount() {
335
- this.props.collection.off('add', 'remove', this.handleChange);
336
- }
337
-
338
- render() {
339
- return (
340
- <ul>
341
- {this.props.collection.map(model => (
342
- <Item key={model.cid} model={model} />
343
- ))}
344
- </ul>
345
- );
346
- }
347
-}
348
-```
349
-
350
-[Try it on CodePen.](http://codepen.io/gaearon/pen/GmrREm?editors=0010)
351
-
352
-### Extracting Data from Backbone Models
353
-
354
-The approach above requires your React components to be aware of the Backbone models and collections. If you later plan to migrate to another data management solution, you might want to concentrate the knowledge about Backbone in as few parts of the code as possible.
355
-
356
-One solution to this is to extract the model's attributes as plain data whenever it changes, and keep this logic in a single place. The following is [a higher-order component](/docs/higher-order-components.html) that extracts all attributes of a Backbone model into state, passing the data to the wrapped component.
357
-
358
-This way, only the higher-order component needs to know about Backbone model internals, and most components in the app can stay agnostic of Backbone.
359
-
360
-In the example below, we will make a copy of the model's attributes to form the initial state. We subscribe to the `change` event (and unsubscribe on unmounting), and when it happens, we update the state with the model's current attributes. Finally, we make sure that if the `model` prop itself changes, we don't forget to unsubscribe from the old model, and subscribe to the new one.
361
-
362
-Note that this example is not meant to be exhaustive with regards to working with Backbone, but it should give you an idea for how to approach this in a generic way:
363
-
364
-```js{1,5,10,14,16,17,22,26,32}
365
-function connectToBackboneModel(WrappedComponent) {
366
- return class BackboneComponent extends React.Component {
367
- constructor(props) {
368
- super(props);
369
- this.state = Object.assign({}, props.model.attributes);
370
- this.handleChange = this.handleChange.bind(this);
371
- }
372
-
373
- componentDidMount() {
374
- this.props.model.on('change', this.handleChange);
375
- }
376
-
377
- componentWillReceiveProps(nextProps) {
378
- this.setState(Object.assign({}, nextProps.model.attributes));
379
- if (nextProps.model !== this.props.model) {
380
- this.props.model.off('change', this.handleChange);
381
- nextProps.model.on('change', this.handleChange);
382
- }
383
- }
384
-
385
- componentWillUnmount() {
386
- this.props.model.off('change', this.handleChange);
387
- }
388
-
389
- handleChange(model) {
390
- this.setState(model.changedAttributes());
391
- }
392
-
393
- render() {
394
- const propsExceptModel = Object.assign({}, this.props);
395
- delete propsExceptModel.model;
396
- return <WrappedComponent {...propsExceptModel} {...this.state} />;
397
- }
398
- }
399
-}
400
-```
401
-
402
-To demonstrate how to use it, we will connect a `NameInput` React component to a Backbone model, and update its `firstName` attribute every time the input changes:
403
-
404
-```js{4,6,11,15,19-21}
405
-function NameInput(props) {
406
- return (
407
- <p>
408
- <input value={props.firstName} onChange={props.handleChange} />
409
- <br />
410
- My name is {props.firstName}.
411
- </p>
412
- );
413
-}
414
-
415
-const BackboneNameInput = connectToBackboneModel(NameInput);
416
-
417
-function Example(props) {
418
- function handleChange(e) {
419
- model.set('firstName', e.target.value);
420
- }
421
-
422
- return (
423
- <BackboneNameInput
424
- model={props.model}
425
- handleChange={handleChange}
426
- />
427
- );
428
-}
429
-
430
-const model = new Backbone.Model({ firstName: 'Frodo' });
431
-ReactDOM.render(
432
- <Example model={model} />,
433
- document.getElementById('root')
434
-);
435
-```
436
-
437
-[Try it on CodePen.](http://codepen.io/gaearon/pen/PmWwwa?editors=0010)
438
-
439
-This technique is not limited to Backbone. You can use React with any model library by subscribing to its changes in the lifecycle hooks and, optionally, copying the data into the local React state.
docs/docs/introducing-jsx.md
deleted
-162
@@ -1,162 +0,0 @@
1
----
2
-id: introducing-jsx
3
-title: Introducing JSX
4
-permalink: docs/introducing-jsx.html
5
-prev: hello-world.html
6
-next: rendering-elements.html
7
----
8
-
9
-Consider this variable declaration:
10
-
11
-```js
12
-const element = <h1>Hello, world!</h1>;
13
-```
14
-
15
-This funny tag syntax is neither a string nor HTML.
16
-
17
-It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.
18
-
19
-JSX produces React "elements". We will explore rendering them to the DOM in the [next section](/docs/rendering-elements.html). Below, you can find the basics of JSX necessary to get you started.
20
-
21
-### Embedding Expressions in JSX
22
-
23
-You can embed any [JavaScript expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions) in JSX by wrapping it in curly braces.
24
-
25
-For example, `2 + 2`, `user.firstName`, and `formatName(user)` are all valid expressions:
26
-
27
-```js{12}
28
-function formatName(user) {
29
- return user.firstName + ' ' + user.lastName;
30
-}
31
-
32
-const user = {
33
- firstName: 'Harper',
34
- lastName: 'Perez'
35
-};
36
-
37
-const element = (
38
- <h1>
39
- Hello, {formatName(user)}!
40
- </h1>
41
-);
42
-
43
-ReactDOM.render(
44
- element,
45
- document.getElementById('root')
46
-);
47
-```
48
-
49
-[Try it on CodePen.](http://codepen.io/gaearon/pen/PGEjdG?editors=0010)
50
-
51
-We split JSX over multiple lines for readability. While it isn't required, when doing this, we also recommend wrapping it in parentheses to avoid the pitfalls of [automatic semicolon insertion](http://stackoverflow.com/q/2846283).
52
-
53
-### JSX is an Expression Too
54
-
55
-After compilation, JSX expressions become regular JavaScript objects.
56
-
57
-This means that you can use JSX inside of `if` statements and `for` loops, assign it to variables, accept it as arguments, and return it from functions:
58
-
59
-```js{3,5}
60
-function getGreeting(user) {
61
- if (user) {
62
- return <h1>Hello, {formatName(user)}!</h1>;
63
- }
64
- return <h1>Hello, Stranger.</h1>;
65
-}
66
-```
67
-
68
-### Specifying Attributes with JSX
69
-
70
-You may use quotes to specify string literals as attributes:
71
-
72
-```js
73
-const element = <div tabIndex="0"></div>;
74
-```
75
-
76
-You may also use curly braces to embed a JavaScript expression in an attribute:
77
-
78
-```js
79
-const element = <img src={user.avatarUrl}></img>;
80
-```
81
-
82
-Don't put quotes around curly braces when embedding a JavaScript expression in an attribute. You should either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute.
83
-
84
->**Caveat:**
85
->
86
->Since JSX is closer to JavaScript than HTML, React DOM uses `camelCase` property naming convention instead of HTML attribute names.
87
->
88
->For example, `class` becomes [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) in JSX, and `tabindex` becomes [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex).
89
-
90
-### Specifying Children with JSX
91
-
92
-If a tag is empty, you may close it immediately with `/>`, like XML:
93
-
94
-```js
95
-const element = <img src={user.avatarUrl} />;
96
-```
97
-
98
-JSX tags may contain children:
99
-
100
-```js
101
-const element = (
102
- <div>
103
- <h1>Hello!</h1>
104
- <h2>Good to see you here.</h2>
105
- </div>
106
-);
107
-```
108
-
109
-### JSX Prevents Injection Attacks
110
-
111
-It is safe to embed user input in JSX:
112
-
113
-```js
114
-const title = response.potentiallyMaliciousInput;
115
-// This is safe:
116
-const element = <h1>{title}</h1>;
117
-```
118
-
119
-By default, React DOM [escapes](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that's not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent [XSS (cross-site-scripting)](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks.
120
-
121
-### JSX Represents Objects
122
-
123
-Babel compiles JSX down to `React.createElement()` calls.
124
-
125
-These two examples are identical:
126
-
127
-```js
128
-const element = (
129
- <h1 className="greeting">
130
- Hello, world!
131
- </h1>
132
-);
133
-```
134
-
135
-```js
136
-const element = React.createElement(
137
- 'h1',
138
- {className: 'greeting'},
139
- 'Hello, world!'
140
-);
141
-```
142
-
143
-`React.createElement()` performs a few checks to help you write bug-free code but essentially it creates an object like this:
144
-
145
-```js
146
-// Note: this structure is simplified
147
-const element = {
148
- type: 'h1',
149
- props: {
150
- className: 'greeting',
151
- children: 'Hello, world'
152
- }
153
-};
154
-```
155
-
156
-These objects are called "React elements". You can think of them as descriptions of what you want to see on the screen. React reads these objects and uses them to construct the DOM and keep it up to date.
157
-
158
-We will explore rendering React elements to the DOM in the next section.
159
-
160
->**Tip:**
161
->
162
->We recommend using the ["Babel" language definition](http://babeljs.io/docs/editors) for your editor of choice so that both ES6 and JSX code is properly highlighted. This website uses the [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) color scheme which is compatible with it.
docs/docs/jsx-in-depth.md
deleted
-426
@@ -1,426 +0,0 @@
1
----
2
-id: jsx-in-depth
3
-title: JSX In Depth
4
-permalink: docs/jsx-in-depth.html
5
-redirect_from:
6
- - "docs/jsx-spread.html"
7
- - "docs/jsx-gotchas.html"
8
- - "tips/if-else-in-JSX.html"
9
- - "tips/self-closing-tag.html"
10
- - "tips/maximum-number-of-jsx-root-nodes.html"
11
- - "tips/children-props-type.html"
12
- - "docs/jsx-in-depth-zh-CN.html"
13
- - "docs/jsx-in-depth-ko-KR.html"
14
----
15
-
16
-Fundamentally, JSX just provides syntactic sugar for the `React.createElement(component, props, ...children)` function. The JSX code:
17
-
18
-```js
19
-<MyButton color="blue" shadowSize={2}>
20
- Click Me
21
-</MyButton>
22
-```
23
-
24
-compiles into:
25
-
26
-```js
27
-React.createElement(
28
- MyButton,
29
- {color: 'blue', shadowSize: 2},
30
- 'Click Me'
31
-)
32
-```
33
-
34
-You can also use the self-closing form of the tag if there are no children. So:
35
-
36
-```js
37
-<div className="sidebar" />
38
-```
39
-
40
-compiles into:
41
-
42
-```js
43
-React.createElement(
44
- 'div',
45
- {className: 'sidebar'},
46
- null
47
-)
48
-```
49
-
50
-If you want to test out how some specific JSX is converted into JavaScript, you can try out [the online Babel compiler](https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-0&code=function%20hello()%20%7B%0A%20%20return%20%3Cdiv%3EHello%20world!%3C%2Fdiv%3E%3B%0A%7D).
51
-
52
-## Specifying The React Element Type
53
-
54
-The first part of a JSX tag determines the type of the React element.
55
-
56
-Capitalized types indicate that the JSX tag is referring to a React component. These tags get compiled into a direct reference to the named variable, so if you use the JSX `<Foo />` expression, `Foo` must be in scope.
57
-
58
-### React Must Be in Scope
59
-
60
-Since JSX compiles into calls to `React.createElement`, the `React` library must also always be in scope from your JSX code.
61
-
62
-For example, both of the imports are necessary in this code, even though `React` and `CustomButton` are not directly referenced from JavaScript:
63
-
64
-```js{1,2,5}
65
-import React from 'react';
66
-import CustomButton from './CustomButton';
67
-
68
-function WarningButton() {
69
- // return React.createElement(CustomButton, {color: 'red'}, null);
70
- return <CustomButton color="red" />;
71
-}
72
-```
73
-
74
-If you don't use a JavaScript bundler and loaded React from a `<script>` tag, it is already in scope as the `React` global.
75
-
76
-### Using Dot Notation for JSX Type
77
-
78
-You can also refer to a React component using dot-notation from within JSX. This is convenient if you have a single module that exports many React components. For example, if `MyComponents.DatePicker` is a component, you can use it directly from JSX with:
79
-
80
-```js{10}
81
-import React from 'react';
82
-
83
-const MyComponents = {
84
- DatePicker: function DatePicker(props) {
85
- return <div>Imagine a {props.color} datepicker here.</div>;
86
- }
87
-}
88
-
89
-function BlueDatePicker() {
90
- return <MyComponents.DatePicker color="blue" />;
91
-}
92
-```
93
-
94
-### User-Defined Components Must Be Capitalized
95
-
96
-When an element type starts with a lowercase letter, it refers to a built-in component like `<div>` or `<span>` and results in a string `'div'` or `'span'` passed to `React.createElement`. Types that start with a capital letter like `<Foo />` compile to `React.createElement(Foo)` and correspond to a component defined or imported in your JavaScript file.
97
-
98
-We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.
99
-
100
-For example, this code will not run as expected:
101
-
102
-```js{3,4,10,11}
103
-import React from 'react';
104
-
105
-// Wrong! This is a component and should have been capitalized:
106
-function hello(props) {
107
- // Correct! This use of <div> is legitimate because div is a valid HTML tag:
108
- return <div>Hello {props.toWhat}</div>;
109
-}
110
-
111
-function HelloWorld() {
112
- // Wrong! React thinks <hello /> is an HTML tag because it's not capitalized:
113
- return <hello toWhat="World" />;
114
-}
115
-```
116
-
117
-To fix this, we will rename `hello` to `Hello` and use `<Hello />` when referring to it:
118
-
119
-```js{3,4,10,11}
120
-import React from 'react';
121
-
122
-// Correct! This is a component and should be capitalized:
123
-function Hello(props) {
124
- // Correct! This use of <div> is legitimate because div is a valid HTML tag:
125
- return <div>Hello {props.toWhat}</div>;
126
-}
127
-
128
-function HelloWorld() {
129
- // Correct! React knows <Hello /> is a component because it's capitalized.
130
- return <Hello toWhat="World" />;
131
-}
132
-```
133
-
134
-### Choosing the Type at Runtime
135
-
136
-You cannot use a general expression as the React element type. If you do want to use a general expression to indicate the type of the element, just assign it to a capitalized variable first. This often comes up when you want to render a different component based on a prop:
137
-
138
-```js{10,11}
139
-import React from 'react';
140
-import { PhotoStory, VideoStory } from './stories';
141
-
142
-const components = {
143
- photo: PhotoStory,
144
- video: VideoStory
145
-};
146
-
147
-function Story(props) {
148
- // Wrong! JSX type can't be an expression.
149
- return <components[props.storyType] story={props.story} />;
150
-}
151
-```
152
-
153
-To fix this, we will assign the type to a capitalized variable first:
154
-
155
-```js{10-12}
156
-import React from 'react';
157
-import { PhotoStory, VideoStory } from './stories';
158
-
159
-const components = {
160
- photo: PhotoStory,
161
- video: VideoStory
162
-};
163
-
164
-function Story(props) {
165
- // Correct! JSX type can be a capitalized variable.
166
- const SpecificStory = components[props.storyType];
167
- return <SpecificStory story={props.story} />;
168
-}
169
-```
170
-
171
-## Props in JSX
172
-
173
-There are several different ways to specify props in JSX.
174
-
175
-### JavaScript Expressions as Props
176
-
177
-You can pass any JavaScript expression as a prop, by surrounding it with `{}`. For example, in this JSX:
178
-
179
-```js
180
-<MyComponent foo={1 + 2 + 3 + 4} />
181
-```
182
-
183
-For `MyComponent`, the value of `props.foo` will be `10` because the expression `1 + 2 + 3 + 4` gets evaluated.
184
-
185
-`if` statements and `for` loops are not expressions in JavaScript, so they can't be used in JSX directly. Instead, you can put these in the surrounding code. For example:
186
-
187
-```js{3-7}
188
-function NumberDescriber(props) {
189
- let description;
190
- if (props.number % 2 == 0) {
191
- description = <strong>even</strong>;
192
- } else {
193
- description = <i>odd</i>;
194
- }
195
- return <div>{props.number} is an {description} number</div>;
196
-}
197
-```
198
-
199
-You can learn more about [conditional rendering](/docs/conditional-rendering.html) and [loops](/docs/lists-and-keys.html) in the corresponding sections.
200
-
201
-### String Literals
202
-
203
-You can pass a string literal as a prop. These two JSX expressions are equivalent:
204
-
205
-```js
206
-<MyComponent message="hello world" />
207
-
208
-<MyComponent message={'hello world'} />
209
-```
210
-
211
-When you pass a string literal, its value is HTML-unescaped. So these two JSX expressions are equivalent:
212
-
213
-```js
214
-<MyComponent message="<3" />
215
-
216
-<MyComponent message={'<3'} />
217
-```
218
-
219
-This behavior is usually not relevant. It's only mentioned here for completeness.
220
-
221
-### Props Default to "True"
222
-
223
-If you pass no value for a prop, it defaults to `true`. These two JSX expressions are equivalent:
224
-
225
-```js
226
-<MyTextBox autocomplete />
227
-
228
-<MyTextBox autocomplete={true} />
229
-```
230
-
231
-In general, we don't recommend using this because it can be confused with the [ES6 object shorthand](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015) `{foo}` which is short for `{foo: foo}` rather than `{foo: true}`. This behavior is just there so that it matches the behavior of HTML.
232
-
233
-### Spread Attributes
234
-
235
-If you already have `props` as an object, and you want to pass it in JSX, you can use `...` as a "spread" operator to pass the whole props object. These two components are equivalent:
236
-
237
-```js{7}
238
-function App1() {
239
- return <Greeting firstName="Ben" lastName="Hector" />;
240
-}
241
-
242
-function App2() {
243
- const props = {firstName: 'Ben', lastName: 'Hector'};
244
- return <Greeting {...props} />;
245
-}
246
-```
247
-
248
-Spread attributes can be useful when you are building generic containers. However, they can also make your code messy by making it easy to pass a lot of irrelevant props to components that don't care about them. We recommend that you use this syntax sparingly.
249
-
250
-## Children in JSX
251
-
252
-In JSX expressions that contain both an opening tag and a closing tag, the content between those tags is passed as a special prop: `props.children`. There are several different ways to pass children:
253
-
254
-### String Literals
255
-
256
-You can put a string between the opening and closing tags and `props.children` will just be that string. This is useful for many of the built-in HTML elements. For example:
257
-
258
-```js
259
-<MyComponent>Hello world!</MyComponent>
260
-```
261
-
262
-This is valid JSX, and `props.children` in `MyComponent` will simply be the string `"Hello world!"`. HTML is unescaped, so you can generally write JSX just like you would write HTML in this way:
263
-
264
-```html
265
-<div>This is valid HTML & JSX at the same time.</div>
266
-```
267
-
268
-JSX removes whitespace at the beginning and ending of a line. It also removes blank lines. New lines adjacent to tags are removed; new lines that occur in the middle of string literals are condensed into a single space. So these all render to the same thing:
269
-
270
-```js
271
-<div>Hello World</div>
272
-
273
-<div>
274
- Hello World
275
-</div>
276
-
277
-<div>
278
- Hello
279
- World
280
-</div>
281
-
282
-<div>
283
-
284
- Hello World
285
-</div>
286
-```
287
-
288
-### JSX Children
289
-
290
-You can provide more JSX elements as the children. This is useful for displaying nested components:
291
-
292
-```js
293
-<MyContainer>
294
- <MyFirstComponent />
295
- <MySecondComponent />
296
-</MyContainer>
297
-```
298
-
299
-You can mix together different types of children, so you can use string literals together with JSX children. This is another way in which JSX is like HTML, so that this is both valid JSX and valid HTML:
300
-
301
-```html
302
-<div>
303
- Here is a list:
304
- <ul>
305
- <li>Item 1</li>
306
- <li>Item 2</li>
307
- </ul>
308
-</div>
309
-```
310
-
311
-A React component can't return multiple React elements, but a single JSX expression can have multiple children, so if you want a component to render multiple things you can wrap it in a `div` like this.
312
-
313
-### JavaScript Expressions as Children
314
-
315
-You can pass any JavaScript expression as children, by enclosing it within `{}`. For example, these expressions are equivalent:
316
-
317
-```js
318
-<MyComponent>foo</MyComponent>
319
-
320
-<MyComponent>{'foo'}</MyComponent>
321
-```
322
-
323
-This is often useful for rendering a list of JSX expressions of arbitrary length. For example, this renders an HTML list:
324
-
325
-```js{2,9}
326
-function Item(props) {
327
- return <li>{props.message}</li>;
328
-}
329
-
330
-function TodoList() {
331
- const todos = ['finish doc', 'submit pr', 'nag dan to review'];
332
- return (
333
- <ul>
334
- {todos.map((message) => <Item key={message} message={message} />)}
335
- </ul>
336
- );
337
-}
338
-```
339
-
340
-JavaScript expressions can be mixed with other types of children. This is often useful in lieu of string templates:
341
-
342
-```js{2}
343
-function Hello(props) {
344
- return <div>Hello {props.addressee}!</div>;
345
-}
346
-```
347
-
348
-### Functions as Children
349
-
350
-Normally, JavaScript expressions inserted in JSX will evaluate to a string, a React element, or a list of those things. However, `props.children` works just like any other prop in that it can pass any sort of data, not just the sorts that React knows how to render. For example, if you have a custom component, you could have it take a callback as `props.children`:
351
-
352
-```js{4,13}
353
-// Calls the children callback numTimes to produce a repeated component
354
-function Repeat(props) {
355
- let items = [];
356
- for (let i = 0; i < props.numTimes; i++) {
357
- items.push(props.children(i));
358
- }
359
- return <div>{items}</div>;
360
-}
361
-
362
-function ListOfTenThings() {
363
- return (
364
- <Repeat numTimes={10}>
365
- {(index) => <div key={index}>This is item {index} in the list</div>}
366
- </Repeat>
367
- );
368
-}
369
-```
370
-
371
-Children passed to a custom component can be anything, as long as that component transforms them into something React can understand before rendering. This usage is not common, but it works if you want to stretch what JSX is capable of.
372
-
373
-### Booleans, Null, and Undefined Are Ignored
374
-
375
-`false`, `null`, `undefined`, and `true` are valid children. They simply don't render. These JSX expressions will all render to the same thing:
376
-
377
-```js
378
-<div />
379
-
380
-<div></div>
381
-
382
-<div>{false}</div>
383
-
384
-<div>{null}</div>
385
-
386
-<div>{undefined}</div>
387
-
388
-<div>{true}</div>
389
-```
390
-
391
-This can be useful to conditionally render React elements. This JSX only renders a `<Header />` if `showHeader` is `true`:
392
-
393
-```js{2}
394
-<div>
395
- {showHeader && <Header />}
396
- <Content />
397
-</div>
398
-```
399
-
400
-One caveat is that some ["falsy" values](https://developer.mozilla.org/en-US/docs/Glossary/Falsy), such as the `0` number, are still rendered by React. For example, this code will not behave as you might expect because `0` will be printed when `props.messages` is an empty array:
401
-
402
-```js{2}
403
-<div>
404
- {props.messages.length &&
405
- <MessageList messages={props.messages} />
406
- }
407
-</div>
408
-```
409
-
410
-To fix this, make sure that the expression before `&&` is always boolean:
411
-
412
-```js{2}
413
-<div>
414
- {props.messages.length > 0 &&
415
- <MessageList messages={props.messages} />
416
- }
417
-</div>
418
-```
419
-
420
-Conversely, if you want a value like `false`, `true`, `null`, or `undefined` to appear in the output, you have to [convert it to a string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion) first:
421
-
422
-```js{2}
423
-<div>
424
- My JavaScript variable is {String(myVariable)}.
425
-</div>
426
-```
docs/docs/lifting-state-up.md
deleted
-325
@@ -1,325 +0,0 @@
1
----
2
-id: lifting-state-up
3
-title: Lifting State Up
4
-permalink: docs/lifting-state-up.html
5
-prev: forms.html
6
-next: composition-vs-inheritance.html
7
-redirect_from:
8
- - "docs/flux-overview.html"
9
- - "docs/flux-todo-list.html"
10
----
11
-
12
-Often, several components need to reflect the same changing data. We recommend lifting the shared state up to their closest common ancestor. Let's see how this works in action.
13
-
14
-In this section, we will create a temperature calculator that calculates whether the water would boil at a given temperature.
15
-
16
-We will start with a component called `BoilingVerdict`. It accepts the `celsius` temperature as a prop, and prints whether it is enough to boil the water:
17
-
18
-```js{3,5}
19
-function BoilingVerdict(props) {
20
- if (props.celsius >= 100) {
21
- return <p>The water would boil.</p>;
22
- }
23
- return <p>The water would not boil.</p>;
24
-}
25
-```
26
-
27
-Next, we will create a component called `Calculator`. It renders an `<input>` that lets you enter the temperature, and keeps its value in `this.state.temperature`.
28
-
29
-Additionally, it renders the `BoilingVerdict` for the current input value.
30
-
31
-```js{5,9,13,17-21}
32
-class Calculator extends React.Component {
33
- constructor(props) {
34
- super(props);
35
- this.handleChange = this.handleChange.bind(this);
36
- this.state = {temperature: ''};
37
- }
38
-
39
- handleChange(e) {
40
- this.setState({temperature: e.target.value});
41
- }
42
-
43
- render() {
44
- const temperature = this.state.temperature;
45
- return (
46
- <fieldset>
47
- <legend>Enter temperature in Celsius:</legend>
48
- <input
49
- value={temperature}
50
- onChange={this.handleChange} />
51
- <BoilingVerdict
52
- celsius={parseFloat(temperature)} />
53
- </fieldset>
54
- );
55
- }
56
-}
57
-```
58
-
59
-[Try it on CodePen.](https://codepen.io/gaearon/pen/ZXeOBm?editors=0010)
60
-
61
-## Adding a Second Input
62
-
63
-Our new requirement is that, in addition to a Celsius input, we provide a Fahrenheit input, and they are kept in sync.
64
-
65
-We can start by extracting a `TemperatureInput` component from `Calculator`. We will add a new `scale` prop to it that can either be `"c"` or `"f"`:
66
-
67
-```js{1-4,19,22}
68
-const scaleNames = {
69
- c: 'Celsius',
70
- f: 'Fahrenheit'
71
-};
72
-
73
-class TemperatureInput extends React.Component {
74
- constructor(props) {
75
- super(props);
76
- this.handleChange = this.handleChange.bind(this);
77
- this.state = {temperature: ''};
78
- }
79
-
80
- handleChange(e) {
81
- this.setState({temperature: e.target.value});
82
- }
83
-
84
- render() {
85
- const temperature = this.state.temperature;
86
- const scale = this.props.scale;
87
- return (
88
- <fieldset>
89
- <legend>Enter temperature in {scaleNames[scale]}:</legend>
90
- <input value={temperature}
91
- onChange={this.handleChange} />
92
- </fieldset>
93
- );
94
- }
95
-}
96
-```
97
-
98
-We can now change the `Calculator` to render two separate temperature inputs:
99
-
100
-```js{5,6}
101
-class Calculator extends React.Component {
102
- render() {
103
- return (
104
- <div>
105
- <TemperatureInput scale="c" />
106
- <TemperatureInput scale="f" />
107
- </div>
108
- );
109
- }
110
-}
111
-```
112
-
113
-[Try it on CodePen.](https://codepen.io/gaearon/pen/jGBryx?editors=0010)
114
-
115
-We have two inputs now, but when you enter the temperature in one of them, the other doesn't update. This contradicts our requirement: we want to keep them in sync.
116
-
117
-We also can't display the `BoilingVerdict` from `Calculator`. The `Calculator` doesn't know the current temperature because it is hidden inside the `TemperatureInput`.
118
-
119
-## Writing Conversion Functions
120
-
121
-First, we will write two functions to convert from Celsius to Fahrenheit and back:
122
-
123
-```js
124
-function toCelsius(fahrenheit) {
125
- return (fahrenheit - 32) * 5 / 9;
126
-}
127
-
128
-function toFahrenheit(celsius) {
129
- return (celsius * 9 / 5) + 32;
130
-}
131
-```
132
-
133
-These two functions convert numbers. We will write another function that takes a string `temperature` and a converter function as arguments and returns a string. We will use it to calculate the value of one input based on the other input.
134
-
135
-It returns an empty string on an invalid `temperature`, and it keeps the output rounded to the third decimal place:
136
-
137
-```js
138
-function tryConvert(temperature, convert) {
139
- const input = parseFloat(temperature);
140
- if (Number.isNaN(input)) {
141
- return '';
142
- }
143
- const output = convert(input);
144
- const rounded = Math.round(output * 1000) / 1000;
145
- return rounded.toString();
146
-}
147
-```
148
-
149
-For example, `tryConvert('abc', toCelsius)` returns an empty string, and `tryConvert('10.22', toFahrenheit)` returns `'50.396'`.
150
-
151
-## Lifting State Up
152
-
153
-Currently, both `TemperatureInput` components independently keep their values in the local state:
154
-
155
-```js{5,9,13}
156
-class TemperatureInput extends React.Component {
157
- constructor(props) {
158
- super(props);
159
- this.handleChange = this.handleChange.bind(this);
160
- this.state = {temperature: ''};
161
- }
162
-
163
- handleChange(e) {
164
- this.setState({temperature: e.target.value});
165
- }
166
-
167
- render() {
168
- const temperature = this.state.temperature;
169
-```
170
-
171
-However, we want these two inputs to be in sync with each other. When we update the Celsius input, the Fahrenheit input should reflect the converted temperature, and vice versa.
172
-
173
-In React, sharing state is accomplished by moving it up to the closest common ancestor of the components that need it. This is called "lifting state up". We will remove the local state from the `TemperatureInput` and move it into the `Calculator` instead.
174
-
175
-If the `Calculator` owns the shared state, it becomes the "source of truth" for the current temperature in both inputs. It can instruct them both to have values that are consistent with each other. Since the props of both `TemperatureInput` components are coming from the same parent `Calculator` component, the two inputs will always be in sync.
176
-
177
-Let's see how this works step by step.
178
-
179
-First, we will replace `this.state.temperature` with `this.props.temperature` in the `TemperatureInput` component. For now, let's pretend `this.props.temperature` already exists, although we will need to pass it from the `Calculator` in the future:
180
-
181
-```js{3}
182
- render() {
183
- // Before: const temperature = this.state.temperature;
184
- const temperature = this.props.temperature;
185
-```
186
-
187
-We know that [props are read-only](/docs/components-and-props.html#props-are-read-only). When the `temperature` was in the local state, the `TemperatureInput` could just call `this.setState()` to change it. However, now that the `temperature` is coming from the parent as a prop, the `TemperatureInput` has no control over it.
188
-
189
-In React, this is usually solved by making a component "controlled". Just like the DOM `<input>` accepts both a `value` and an `onChange` prop, so can the custom `TemperatureInput` accept both `temperature` and `onTemperatureChange` props from its parent `Calculator`.
190
-
191
-Now, when the `TemperatureInput` wants to update its temperature, it calls `this.props.onTemperatureChange`:
192
-
193
-```js{3}
194
- handleChange(e) {
195
- // Before: this.setState({temperature: e.target.value});
196
- this.props.onTemperatureChange(e.target.value);
197
-```
198
-
199
->Note:
200
->
201
->There is no special meaning to either `temperature` or `onTemperatureChange` prop names in custom components. We could have called them anything else, like name them `value` and `onChange` which is a common convention.
202
-
203
-The `onTemperatureChange` prop will be provided together with the `temperature` prop by the parent `Calculator` component. It will handle the change by modifying its own local state, thus re-rendering both inputs with the new values. We will look at the new `Calculator` implementation very soon.
204
-
205
-Before diving into the changes in the `Calculator`, let's recap our changes to the `TemperatureInput` component. We have removed the local state from it, and instead of reading `this.state.temperature`, we now read `this.props.temperature`. Instead of calling `this.setState()` when we want to make a change, we now call `this.props.onTemperatureChange()`, which will be provided by the `Calculator`:
206
-
207
-```js{8,12}
208
-class TemperatureInput extends React.Component {
209
- constructor(props) {
210
- super(props);
211
- this.handleChange = this.handleChange.bind(this);
212
- }
213
-
214
- handleChange(e) {
215
- this.props.onTemperatureChange(e.target.value);
216
- }
217
-
218
- render() {
219
- const temperature = this.props.temperature;
220
- const scale = this.props.scale;
221
- return (
222
- <fieldset>
223
- <legend>Enter temperature in {scaleNames[scale]}:</legend>
224
- <input value={temperature}
225
- onChange={this.handleChange} />
226
- </fieldset>
227
- );
228
- }
229
-}
230
-```
231
-
232
-Now let's turn to the `Calculator` component.
233
-
234
-We will store the current input's `temperature` and `scale` in its local state. This is the state we "lifted up" from the inputs, and it will serve as the "source of truth" for both of them. It is the minimal representation of all the data we need to know in order to render both inputs.
235
-
236
-For example, if we enter 37 into the Celsius input, the state of the `Calculator` component will be:
237
-
238
-```js
239
-{
240
- temperature: '37',
241
- scale: 'c'
242
-}
243
-```
244
-
245
-If we later edit the Fahrenheit field to be 212, the state of the `Calculator` will be:
246
-
247
-```js
248
-{
249
- temperature: '212',
250
- scale: 'f'
251
-}
252
-```
253
-
254
-We could have stored the value of both inputs but it turns out to be unnecessary. It is enough to store the value of the most recently changed input, and the scale that it represents. We can then infer the value of the other input based on the current `temperature` and `scale` alone.
255
-
256
-The inputs stay in sync because their values are computed from the same state:
257
-
258
-```js{6,10,14,18-21,27-28,31-32,34}
259
-class Calculator extends React.Component {
260
- constructor(props) {
261
- super(props);
262
- this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
263
- this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
264
- this.state = {temperature: '', scale: 'c'};
265
- }
266
-
267
- handleCelsiusChange(temperature) {
268
- this.setState({scale: 'c', temperature});
269
- }
270
-
271
- handleFahrenheitChange(temperature) {
272
- this.setState({scale: 'f', temperature});
273
- }
274
-
275
- render() {
276
- const scale = this.state.scale;
277
- const temperature = this.state.temperature;
278
- const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
279
- const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;
280
-
281
- return (
282
- <div>
283
- <TemperatureInput
284
- scale="c"
285
- temperature={celsius}
286
- onTemperatureChange={this.handleCelsiusChange} />
287
- <TemperatureInput
288
- scale="f"
289
- temperature={fahrenheit}
290
- onTemperatureChange={this.handleFahrenheitChange} />
291
- <BoilingVerdict
292
- celsius={parseFloat(celsius)} />
293
- </div>
294
- );
295
- }
296
-}
297
-```
298
-
299
-[Try it on CodePen.](https://codepen.io/gaearon/pen/WZpxpz?editors=0010)
300
-
301
-Now, no matter which input you edit, `this.state.temperature` and `this.state.scale` in the `Calculator` get updated. One of the inputs gets the value as is, so any user input is preserved, and the other input value is always recalculated based on it.
302
-
303
-Let's recap what happens when you edit an input:
304
-
305
-* React calls the function specified as `onChange` on the DOM `<input>`. In our case, this is the `handleChange` method in `TemperatureInput` component.
306
-* The `handleChange` method in the `TemperatureInput` component calls `this.props.onTemperatureChange()` with the new desired value. Its props, including `onTemperatureChange`, were provided by its parent component, the `Calculator`.
307
-* When it previously rendered, the `Calculator` has specified that `onTemperatureChange` of the Celsius `TemperatureInput` is the `Calculator`'s `handleCelsiusChange` method, and `onTemperatureChange` of the Fahrenheit `TemperatureInput` is the `Calculator`'s `handleFahrenheitChange` method. So either of these two `Calculator` methods gets called depending on which input we edited.
308
-* Inside these methods, the `Calculator` component asks React to re-render itself by calling `this.setState()` with the new input value and the current scale of the input we just edited.
309
-* React calls the `Calculator` component's `render` method to learn what the UI should look like. The values of both inputs are recomputed based on the current temperature and the active scale. The temperature conversion is performed here.
310
-* React calls the `render` methods of the individual `TemperatureInput` components with their new props specified by the `Calculator`. It learns what their UI should look like.
311
-* React DOM updates the DOM to match the desired input values. The input we just edited receives its current value, and the other input is updated to the temperature after conversion.
312
-
313
-Every update goes through the same steps so the inputs stay in sync.
314
-
315
-## Lessons Learned
316
-
317
-There should be a single "source of truth" for any data that changes in a React application. Usually, the state is first added to the component that needs it for rendering. Then, if other components also need it, you can lift it up to their closest common ancestor. Instead of trying to sync the state between different components, you should rely on the [top-down data flow](/docs/state-and-lifecycle.html#the-data-flows-down).
318
-
319
-Lifting state involves writing more "boilerplate" code than two-way binding approaches, but as a benefit, it takes less work to find and isolate bugs. Since any state "lives" in some component and that component alone can change it, the surface area for bugs is greatly reduced. Additionally, you can implement any custom logic to reject or transform user input.
320
-
321
-If something can be derived from either props or state, it probably shouldn't be in the state. For example, instead of storing both `celsiusValue` and `fahrenheitValue`, we store just the last edited `temperature` and its `scale`. The value of the other input can always be calculated from them in the `render()` method. This lets us clear or apply rounding to the other field without losing any precision in the user input.
322
-
323
-When you see something wrong in the UI, you can use [React Developer Tools](https://github.com/facebook/react-devtools) to inspect the props and move up the tree until you find the component responsible for updating the state. This lets you trace the bugs to their source:
324
-
325
-<img src="../img/docs/react-devtools-state.gif" alt="Monitoring State in React DevTools" width="100%">
docs/docs/lists-and-keys.md
deleted
-299
@@ -1,299 +0,0 @@
1
----
2
-id: lists-and-keys
3
-title: Lists and Keys
4
-permalink: docs/lists-and-keys.html
5
-prev: conditional-rendering.html
6
-next: forms.html
7
----
8
-
9
-First, let's review how you transform lists in JavaScript.
10
-
11
-Given the code below, we use the [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) function to take an array of `numbers` and double their values. We assign the new array returned by `map()` to the variable `doubled` and log it:
12
-
13
-```javascript{2}
14
-const numbers = [1, 2, 3, 4, 5];
15
-const doubled = numbers.map((number) => number * 2);
16
-console.log(doubled);
17
-```
18
-
19
-This code logs `[2, 4, 6, 8, 10]` to the console.
20
-
21
-In React, transforming arrays into lists of [elements](/docs/rendering-elements.html) is nearly identical.
22
-
23
-### Rendering Multiple Components
24
-
25
-You can build collections of elements and [include them in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) using curly braces `{}`.
26
-
27
-Below, we loop through the `numbers` array using the JavaScript [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) function. We return an `<li>` element for each item. Finally, we assign the resulting array of elements to `listItems`:
28
-
29
-```javascript{2-4}
30
-const numbers = [1, 2, 3, 4, 5];
31
-const listItems = numbers.map((number) =>
32
- <li>{number}</li>
33
-);
34
-```
35
-
36
-We include the entire `listItems` array inside a `<ul>` element, and [render it to the DOM](/docs/rendering-elements.html#rendering-an-element-into-the-dom):
37
-
38
-```javascript{2}
39
-ReactDOM.render(
40
- <ul>{listItems}</ul>,
41
- document.getElementById('root')
42
-);
43
-```
44
-
45
-[Try it on CodePen.](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)
46
-
47
-This code displays a bullet list of numbers between 1 and 5.
48
-
49
-### Basic List Component
50
-
51
-Usually you would render lists inside a [component](/docs/components-and-props.html).
52
-
53
-We can refactor the previous example into a component that accepts an array of `numbers` and outputs an unordered list of elements.
54
-
55
-```javascript{3-5,7,13}
56
-function NumberList(props) {
57
- const numbers = props.numbers;
58
- const listItems = numbers.map((number) =>
59
- <li>{number}</li>
60
- );
61
- return (
62
- <ul>{listItems}</ul>
63
- );
64
-}
65
-
66
-const numbers = [1, 2, 3, 4, 5];
67
-ReactDOM.render(
68
- <NumberList numbers={numbers} />,
69
- document.getElementById('root')
70
-);
71
-```
72
-
73
-When you run this code, you'll be given a warning that a key should be provided for list items. A "key" is a special string attribute you need to include when creating lists of elements. We'll discuss why it's important in the next section.
74
-
75
-Let's assign a `key` to our list items inside `numbers.map()` and fix the missing key issue.
76
-
77
-```javascript{4}
78
-function NumberList(props) {
79
- const numbers = props.numbers;
80
- const listItems = numbers.map((number) =>
81
- <li key={number.toString()}>
82
- {number}
83
- </li>
84
- );
85
- return (
86
- <ul>{listItems}</ul>
87
- );
88
-}
89
-
90
-const numbers = [1, 2, 3, 4, 5];
91
-ReactDOM.render(
92
- <NumberList numbers={numbers} />,
93
- document.getElementById('root')
94
-);
95
-```
96
-
97
-[Try it on CodePen.](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)
98
-
99
-## Keys
100
-
101
-Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity:
102
-
103
-```js{3}
104
-const numbers = [1, 2, 3, 4, 5];
105
-const listItems = numbers.map((number) =>
106
- <li key={number.toString()}>
107
- {number}
108
- </li>
109
-);
110
-```
111
-
112
-The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys:
113
-
114
-```js{2}
115
-const todoItems = todos.map((todo) =>
116
- <li key={todo.id}>
117
- {todo.text}
118
- </li>
119
-);
120
-```
121
-
122
-When you don't have stable IDs for rendered items, you may use the item index as a key as a last resort:
123
-
124
-```js{2,3}
125
-const todoItems = todos.map((todo, index) =>
126
- // Only do this if items have no stable IDs
127
- <li key={index}>
128
- {todo.text}
129
- </li>
130
-);
131
-```
132
-
133
-We don't recommend using indexes for keys if the items can reorder, as that would be slow. You may read an [in-depth explanation about why keys are necessary](/docs/reconciliation.html#recursing-on-children) if you're interested.
134
-
135
-### Extracting Components with Keys
136
-
137
-Keys only make sense in the context of the surrounding array.
138
-
139
-For example, if you [extract](/docs/components-and-props.html#extracting-components) a `ListItem` component, you should keep the key on the `<ListItem />` elements in the array rather than on the root `<li>` element in the `ListItem` itself.
140
-
141
-**Example: Incorrect Key Usage**
142
-
143
-```javascript{4,5,14,15}
144
-function ListItem(props) {
145
- const value = props.value;
146
- return (
147
- // Wrong! There is no need to specify the key here:
148
- <li key={value.toString()}>
149
- {value}
150
- </li>
151
- );
152
-}
153
-
154
-function NumberList(props) {
155
- const numbers = props.numbers;
156
- const listItems = numbers.map((number) =>
157
- // Wrong! The key should have been specified here:
158
- <ListItem value={number} />
159
- );
160
- return (
161
- <ul>
162
- {listItems}
163
- </ul>
164
- );
165
-}
166
-
167
-const numbers = [1, 2, 3, 4, 5];
168
-ReactDOM.render(
169
- <NumberList numbers={numbers} />,
170
- document.getElementById('root')
171
-);
172
-```
173
-
174
-**Example: Correct Key Usage**
175
-
176
-```javascript{2,3,9,10}
177
-function ListItem(props) {
178
- // Correct! There is no need to specify the key here:
179
- return <li>{props.value}</li>;
180
-}
181
-
182
-function NumberList(props) {
183
- const numbers = props.numbers;
184
- const listItems = numbers.map((number) =>
185
- // Correct! Key should be specified inside the array.
186
- <ListItem key={number.toString()}
187
- value={number} />
188
- );
189
- return (
190
- <ul>
191
- {listItems}
192
- </ul>
193
- );
194
-}
195
-
196
-const numbers = [1, 2, 3, 4, 5];
197
-ReactDOM.render(
198
- <NumberList numbers={numbers} />,
199
- document.getElementById('root')
200
-);
201
-```
202
-
203
-[Try it on CodePen.](https://codepen.io/gaearon/pen/ZXeOGM?editors=0010)
204
-
205
-A good rule of thumb is that elements inside the `map()` call need keys.
206
-
207
-### Keys Must Only Be Unique Among Siblings
208
-
209
-Keys used within arrays should be unique among their siblings. However they don't need to be globally unique. We can use the same keys when we produce two different arrays:
210
-
211
-```js{2,5,11,12,19,21}
212
-function Blog(props) {
213
- const sidebar = (
214
- <ul>
215
- {props.posts.map((post) =>
216
- <li key={post.id}>
217
- {post.title}
218
- </li>
219
- )}
220
- </ul>
221
- );
222
- const content = props.posts.map((post) =>
223
- <div key={post.id}>
224
- <h3>{post.title}</h3>
225
- <p>{post.content}</p>
226
- </div>
227
- );
228
- return (
229
- <div>
230
- {sidebar}
231
- <hr />
232
- {content}
233
- </div>
234
- );
235
-}
236
-
237
-const posts = [
238
- {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
239
- {id: 2, title: 'Installation', content: 'You can install React from npm.'}
240
-];
241
-ReactDOM.render(
242
- <Blog posts={posts} />,
243
- document.getElementById('root')
244
-);
245
-```
246
-
247
-[Try it on CodePen.](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)
248
-
249
-Keys serve as a hint to React but they don't get passed to your components. If you need the same value in your component, pass it explicitly as a prop with a different name:
250
-
251
-```js{3,4}
252
-const content = posts.map((post) =>
253
- <Post
254
- key={post.id}
255
- id={post.id}
256
- title={post.title} />
257
-);
258
-```
259
-
260
-With the example above, the `Post` component can read `props.id`, but not `props.key`.
261
-
262
-### Embedding map() in JSX
263
-
264
-In the examples above we declared a separate `listItems` variable and included it in JSX:
265
-
266
-```js{3-6}
267
-function NumberList(props) {
268
- const numbers = props.numbers;
269
- const listItems = numbers.map((number) =>
270
- <ListItem key={number.toString()}
271
- value={number} />
272
- );
273
- return (
274
- <ul>
275
- {listItems}
276
- </ul>
277
- );
278
-}
279
-```
280
-
281
-JSX allows [embedding any expressions](/docs/introducing-jsx.html#embedding-expressions-in-jsx) in curly braces so we could inline the `map()` result:
282
-
283
-```js{5-8}
284
-function NumberList(props) {
285
- const numbers = props.numbers;
286
- return (
287
- <ul>
288
- {numbers.map((number) =>
289
- <ListItem key={number.toString()}
290
- value={number} />
291
- )}
292
- </ul>
293
- );
294
-}
295
-```
296
-
297
-[Try it on CodePen.](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)
298
-
299
-Sometimes this results in clearer code, but this style can also be abused. Like in JavaScript, it is up to you to decide whether it is worth extracting a variable for readability. Keep in mind that if the `map()` body is too nested, it might be a good time to [extract a component](/docs/components-and-props.html#extracting-components).
docs/docs/optimizing-performance.md
deleted
-390
@@ -1,390 +0,0 @@
1
----
2
-id: optimizing-performance
3
-title: Optimizing Performance
4
-permalink: docs/optimizing-performance.html
5
-redirect_from: "docs/advanced-performance.html"
6
----
7
-
8
-Internally, React uses several clever techniques to minimize the number of costly DOM operations required to update the UI. For many applications, using React will lead to a fast user interface without doing much work to specifically optimize for performance. Nevertheless, there are several ways you can speed up your React application.
9
-
10
-## Use the Production Build
11
-
12
-If you're benchmarking or experiencing performance problems in your React apps, make sure you're testing with the minified production build.
13
-
14
-By default, React includes many helpful warnings. These warnings are very useful in development. However, they make React larger and slower so you should make sure to use the production version when you deploy the app.
15
-
16
-If you aren't sure whether your build process is set up correctly, you can check it by installing [React Developer Tools for Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi). If you visit a site with React in production mode, the icon will have a dark background:
17
-
18
-<img src="../img/docs/devtools-prod.png" style="max-width:100%" alt="React DevTools on a website with production version of React">
19
-
20
-If you visit a site with React in development mode, the icon will have a red background:
21
-
22
-<img src="../img/docs/devtools-dev.png" style="max-width:100%" alt="React DevTools on a website with development version of React">
23
-
24
-It is expected that you use the development mode when working on your app, and the production mode when deploying your app to the users.
25
-
26
-You can find instructions for building your app for production below.
27
-
28
-### Create React App
29
-
30
-If your project is built with [Create React App](https://github.com/facebookincubator/create-react-app), run:
31
-
32
-```
33
-npm run build
34
-```
35
-
36
-This will create a production build of your app in the `build/` folder of your project.
37
-
38
-Remember that this is only necessary before deploying to production. For normal development, use `npm start`.
39
-
40
-### Single-File Builds
41
-
42
-We offer production-ready versions of React and React DOM as single files:
43
-
44
-```html
45
-<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
46
-<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
47
-```
48
-
49
-Remember that only React files ending with `.production.min.js` are suitable for production.
50
-
51
-### Brunch
52
-
53
-For the most efficient Brunch production build, install the [`uglify-js-brunch`](https://github.com/brunch/uglify-js-brunch) plugin:
54
-
55
-```
56
-# If you use npm
57
-npm install --save-dev uglify-js-brunch
58
-
59
-# If you use Yarn
60
-yarn add --dev uglify-js-brunch
61
-```
62
-
63
-Then, to create a production build, add the `-p` flag to the `build` command:
64
-
65
-```
66
-brunch build -p
67
-```
68
-
69
-Remember that you only need to do this for production builds. You shouldn't pass `-p` flag or apply this plugin in development because it will hide useful React warnings, and make the builds much slower.
70
-
71
-### Browserify
72
-
73
-For the most efficient Browserify production build, install a few plugins:
74
-
75
-```
76
-# If you use npm
77
-npm install --save-dev envify uglify-js uglifyify
78
-
79
-# If you use Yarn
80
-yarn add --dev envify uglify-js uglifyify
81
-```
82
-
83
-To create a production build, make sure that you add these transforms **(the order matters)**:
84
-
85
-* The [`envify`](https://github.com/hughsk/envify) transform ensures the right build environment is set. Make it global (`-g`).
86
-* The [`uglifyify`](https://github.com/hughsk/uglifyify) transform removes development imports. Make it global too (`-g`).
87
-* Finally, the resulting bundle is piped to [`uglify-js`](https://github.com/mishoo/UglifyJS2) for mangling ([read why](https://github.com/hughsk/uglifyify#motivationusage)).
88
-
89
-For example:
90
-
91
-```
92
-browserify ./index.js \
93
- -g [ envify --NODE_ENV production ] \
94
- -g uglifyify \
95
- | uglifyjs --compress --mangle > ./bundle.js
96
-```
97
-
98
->**Note:**
99
->
100
->The package name is `uglify-js`, but the binary it provides is called `uglifyjs`.<br>
101
->This is not a typo.
102
-
103
-Remember that you only need to do this for production builds. You shouldn't apply these plugins in development because they will hide useful React warnings, and make the builds much slower.
104
-
105
-### Rollup
106
-
107
-For the most efficient Rollup production build, install a few plugins:
108
-
109
-```
110
-# If you use npm
111
-npm install --save-dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-uglify
112
-
113
-# If you use Yarn
114
-yarn add --dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-uglify
115
-```
116
-
117
-To create a production build, make sure that you add these plugins **(the order matters)**:
118
-
119
-* The [`replace`](https://github.com/rollup/rollup-plugin-replace) plugin ensures the right build environment is set.
120
-* The [`commonjs`](https://github.com/rollup/rollup-plugin-commonjs) plugin provides support for CommonJS in Rollup.
121
-* The [`uglify`](https://github.com/TrySound/rollup-plugin-uglify) plugin compresses and mangles the final bundle.
122
-
123
-```js
124
-plugins: [
125
- // ...
126
- require('rollup-plugin-replace')({
127
- 'process.env.NODE_ENV': JSON.stringify('production')
128
- }),
129
- require('rollup-plugin-commonjs')(),
130
- require('rollup-plugin-uglify')(),
131
- // ...
132
-]
133
-```
134
-
135
-For a complete setup example [see this gist](https://gist.github.com/Rich-Harris/cb14f4bc0670c47d00d191565be36bf0).
136
-
137
-Remember that you only need to do this for production builds. You shouldn't apply the `uglify` plugin or the `replace` plugin with `'production'` value in development because they will hide useful React warnings, and make the builds much slower.
138
-
139
-### webpack
140
-
141
->**Note:**
142
->
143
->If you're using Create React App, please follow [the instructions above](#create-react-app).<br>
144
->This section is only relevant if you configure webpack directly.
145
-
146
-For the most efficient webpack production build, make sure to include these plugins in your production configuration:
147
-
148
-```js
149
-new webpack.DefinePlugin({
150
- 'process.env': {
151
- NODE_ENV: JSON.stringify('production')
152
- }
153
-}),
154
-new webpack.optimize.UglifyJsPlugin()
155
-```
156
-
157
-You can learn more about this in [webpack documentation](https://webpack.js.org/guides/production-build/).
158
-
159
-Remember that you only need to do this for production builds. You shouldn't apply `UglifyJsPlugin` or `DefinePlugin` with `'production'` value in development because they will hide useful React warnings, and make the builds much slower.
160
-
161
-## Profiling Components with the Chrome Performance Tab
162
-
163
-In the **development** mode, you can visualize how components mount, update, and unmount, using the performance tools in supported browsers. For example:
164
-
165
-<center><img src="../img/blog/react-perf-chrome-timeline.png" style="max-width:100%" alt="React components in Chrome timeline" /></center>
166
-
167
-To do this in Chrome:
168
-
169
-1. Load your app with `?react_perf` in the query string (for example, `http://localhost:3000/?react_perf`).
170
-
171
-2. Open the Chrome DevTools **[Performance](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool)** tab and press **Record**.
172
-
173
-3. Perform the actions you want to profile. Don't record more than 20 seconds or Chrome might hang.
174
-
175
-4. Stop recording.
176
-
177
-5. React events will be grouped under the **User Timing** label.
178
-
179
-Note that **the numbers are relative so components will render faster in production**. Still, this should help you realize when unrelated UI gets updated by mistake, and how deep and how often your UI updates occur.
180
-
181
-Currently Chrome, Edge, and IE are the only browsers supporting this feature, but we use the standard [User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API) so we expect more browsers to add support for it.
182
-
183
-
184
-## Avoid Reconciliation
185
-
186
-React builds and maintains an internal representation of the rendered UI. It includes the React elements you return from your components. This representation lets React avoid creating DOM nodes and accessing existing ones beyond necessity, as that can be slower than operations on JavaScript objects. Sometimes it is referred to as a "virtual DOM", but it works the same way on React Native.
187
-
188
-When a component's props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM.
189
-
190
-In some cases, your component can speed all of this up by overriding the lifecycle function `shouldComponentUpdate`, which is triggered before the re-rendering process starts. The default implementation of this function returns `true`, leaving React to perform the update:
191
-
192
-```javascript
193
-shouldComponentUpdate(nextProps, nextState) {
194
- return true;
195
-}
196
-```
197
-
198
-If you know that in some situations your component doesn't need to update, you can return `false` from `shouldComponentUpdate` instead, to skip the whole rendering process, including calling `render()` on this component and below.
199
-
200
-## shouldComponentUpdate In Action
201
-
202
-Here's a subtree of components. For each one, `SCU` indicates what `shouldComponentUpdate` returned, and `vDOMEq` indicates whether the rendered React elements were equivalent. Finally, the circle's color indicates whether the component had to be reconciled or not.
203
-
204
-<figure><img src="../img/docs/should-component-update.png" style="max-width:100%" /></figure>
205
-
206
-Since `shouldComponentUpdate` returned `false` for the subtree rooted at C2, React did not attempt to render C2, and thus didn't even have to invoke `shouldComponentUpdate` on C4 and C5.
207
-
208
-For C1 and C3, `shouldComponentUpdate` returned `true`, so React had to go down to the leaves and check them. For C6 `shouldComponentUpdate` returned `true`, and since the rendered elements weren't equivalent React had to update the DOM.
209
-
210
-The last interesting case is C8. React had to render this component, but since the React elements it returned were equal to the previously rendered ones, it didn't have to update the DOM.
211
-
212
-Note that React only had to do DOM mutations for C6, which was inevitable. For C8, it bailed out by comparing the rendered React elements, and for C2's subtree and C7, it didn't even have to compare the elements as we bailed out on `shouldComponentUpdate`, and `render` was not called.
213
-
214
-## Examples
215
-
216
-If the only way your component ever changes is when the `props.color` or the `state.count` variable changes, you could have `shouldComponentUpdate` check that:
217
-
218
-```javascript
219
-class CounterButton extends React.Component {
220
- constructor(props) {
221
- super(props);
222
- this.state = {count: 1};
223
- }
224
-
225
- shouldComponentUpdate(nextProps, nextState) {
226
- if (this.props.color !== nextProps.color) {
227
- return true;
228
- }
229
- if (this.state.count !== nextState.count) {
230
- return true;
231
- }
232
- return false;
233
- }
234
-
235
- render() {
236
- return (
237
- <button
238
- color={this.props.color}
239
- onClick={() => this.setState(state => ({count: state.count + 1}))}>
240
- Count: {this.state.count}
241
- </button>
242
- );
243
- }
244
-}
245
-```
246
-
247
-In this code, `shouldComponentUpdate` is just checking if there is any change in `props.color` or `state.count`. If those values don't change, the component doesn't update. If your component got more complex, you could use a similar pattern of doing a "shallow comparison" between all the fields of `props` and `state` to determine if the component should update. This pattern is common enough that React provides a helper to use this logic - just inherit from `React.PureComponent`. So this code is a simpler way to achieve the same thing:
248
-
249
-```js
250
-class CounterButton extends React.PureComponent {
251
- constructor(props) {
252
- super(props);
253
- this.state = {count: 1};
254
- }
255
-
256
- render() {
257
- return (
258
- <button
259
- color={this.props.color}
260
- onClick={() => this.setState(state => ({count: state.count + 1}))}>
261
- Count: {this.state.count}
262
- </button>
263
- );
264
- }
265
-}
266
-```
267
-
268
-Most of the time, you can use `React.PureComponent` instead of writing your own `shouldComponentUpdate`. It only does a shallow comparison, so you can't use it if the props or state may have been mutated in a way that a shallow comparison would miss.
269
-
270
-This can be a problem with more complex data structures. For example, let's say you want a `ListOfWords` component to render a comma-separated list of words, with a parent `WordAdder` component that lets you click a button to add a word to the list. This code does *not* work correctly:
271
-
272
-```javascript
273
-class ListOfWords extends React.PureComponent {
274
- render() {
275
- return <div>{this.props.words.join(',')}</div>;
276
- }
277
-}
278
-
279
-class WordAdder extends React.Component {
280
- constructor(props) {
281
- super(props);
282
- this.state = {
283
- words: ['marklar']
284
- };
285
- this.handleClick = this.handleClick.bind(this);
286
- }
287
-
288
- handleClick() {
289
- // This section is bad style and causes a bug
290
- const words = this.state.words;
291
- words.push('marklar');
292
- this.setState({words: words});
293
- }
294
-
295
- render() {
296
- return (
297
- <div>
298
- <button onClick={this.handleClick} />
299
- <ListOfWords words={this.state.words} />
300
- </div>
301
- );
302
- }
303
-}
304
-```
305
-
306
-The problem is that `PureComponent` will do a simple comparison between the old and new values of `this.props.words`. Since this code mutates the `words` array in the `handleClick` method of `WordAdder`, the old and new values of `this.props.words` will compare as equal, even though the actual words in the array have changed. The `ListOfWords` will thus not update even though it has new words that should be rendered.
307
-
308
-## The Power Of Not Mutating Data
309
-
310
-The simplest way to avoid this problem is to avoid mutating values that you are using as props or state. For example, the `handleClick` method above could be rewritten using `concat` as:
311
-
312
-```javascript
313
-handleClick() {
314
- this.setState(prevState => ({
315
- words: prevState.words.concat(['marklar'])
316
- }));
317
-}
318
-```
319
-
320
-ES6 supports a [spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator) for arrays which can make this easier. If you're using Create React App, this syntax is available by default.
321
-
322
-```js
323
-handleClick() {
324
- this.setState(prevState => ({
325
- words: [...prevState.words, 'marklar'],
326
- }));
327
-};
328
-```
329
-
330
-You can also rewrite code that mutates objects to avoid mutation, in a similar way. For example, let's say we have an object named `colormap` and we want to write a function that changes `colormap.right` to be `'blue'`. We could write:
331
-
332
-```js
333
-function updateColorMap(colormap) {
334
- colormap.right = 'blue';
335
-}
336
-```
337
-
338
-To write this without mutating the original object, we can use [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) method:
339
-
340
-```js
341
-function updateColorMap(colormap) {
342
- return Object.assign({}, colormap, {right: 'blue'});
343
-}
344
-```
345
-
346
-`updateColorMap` now returns a new object, rather than mutating the old one. `Object.assign` is in ES6 and requires a polyfill.
347
-
348
-There is a JavaScript proposal to add [object spread properties](https://github.com/sebmarkbage/ecmascript-rest-spread) to make it easier to update objects without mutation as well:
349
-
350
-```js
351
-function updateColorMap(colormap) {
352
- return {...colormap, right: 'blue'};
353
-}
354
-```
355
-
356
-If you're using Create React App, both `Object.assign` and the object spread syntax are available by default.
357
-
358
-## Using Immutable Data Structures
359
-
360
-[Immutable.js](https://github.com/facebook/immutable-js) is another way to solve this problem. It provides immutable, persistent collections that work via structural sharing:
361
-
362
-* *Immutable*: once created, a collection cannot be altered at another point in time.
363
-* *Persistent*: new collections can be created from a previous collection and a mutation such as set. The original collection is still valid after the new collection is created.
364
-* *Structural Sharing*: new collections are created using as much of the same structure as the original collection as possible, reducing copying to a minimum to improve performance.
365
-
366
-Immutability makes tracking changes cheap. A change will always result in a new object so we only need to check if the reference to the object has changed. For example, in this regular JavaScript code:
367
-
368
-```javascript
369
-const x = { foo: 'bar' };
370
-const y = x;
371
-y.foo = 'baz';
372
-x === y; // true
373
-```
374
-
375
-Although `y` was edited, since it's a reference to the same object as `x`, this comparison returns `true`. You can write similar code with immutable.js:
376
-
377
-```javascript
378
-const SomeRecord = Immutable.Record({ foo: null });
379
-const x = new SomeRecord({ foo: 'bar' });
380
-const y = x.set('foo', 'baz');
381
-const z = x.set('foo', 'bar');
382
-x === y; // false
383
-x === z; // true
384
-```
385
-
386
-In this case, since a new reference is returned when mutating `x`, we can use a reference equality check `(x === y)` to verify that the new value stored in `y` is different than the original value stored in `x`.
387
-
388
-Two other libraries that can help use immutable data are [seamless-immutable](https://github.com/rtfeldman/seamless-immutable) and [immutability-helper](https://github.com/kolodny/immutability-helper).
389
-
390
-Immutable data structures provide you with a cheap way to track changes on objects, which is all we need to implement `shouldComponentUpdate`. This can often provide you with a nice performance boost.
docs/docs/portals.md
deleted
-144
@@ -1,144 +0,0 @@
1
----
2
-id: portals
3
-title: Portals
4
-permalink: docs/portals.html
5
----
6
-
7
-Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
8
-
9
-```js
10
-ReactDOM.createPortal(child, container)
11
-```
12
-
13
-The first argument (`child`) is any [renderable React child](/docs/react-component.html#render), such as an element, string, or fragment. The second argument (`container`) is a DOM element.
14
-
15
-## Usage
16
-
17
-Normally, when you return an element from a component's render method, it's mounted into the DOM as a child of the nearest parent node:
18
-
19
-```js{4,6}
20
-render() {
21
- // React mounts a new div and renders the children into it
22
- return (
23
- <div>
24
- {this.props.children}
25
- </div>
26
- );
27
-}
28
-```
29
-
30
-However, sometimes it's useful to insert a child into a different location in the DOM:
31
-
32
-```js{6}
33
-render() {
34
- // React does *not* create a new div. It renders the children into `domNode`.
35
- // `domNode` is any valid DOM node, regardless of its location in the DOM.
36
- return ReactDOM.createPortal(
37
- this.props.children,
38
- domNode,
39
- );
40
-}
41
-```
42
-
43
-A typical use case for portals is when a parent component has an `overflow: hidden` or `z-index` style, but you need the child to visually "break out" of its container. For example, dialogs, hovercards, and tooltips.
44
-
45
-> Note:
46
->
47
-> It is important to remember, when working with portals, you'll need to make sure to follow the proper accessibility guidelines.
48
-
49
-[Try it on CodePen.](https://codepen.io/gaearon/pen/yzMaBd)
50
-
51
-## Event Bubbling Through Portals
52
-
53
-Even though a portal can be anywhere in the DOM tree, it behaves like a normal React child in every other way. Features like context work exactly the same regardless of whether the child is a portal, as the portal still exists in the *React tree* regardless of position in the *DOM tree*.
54
-
55
-This includes event bubbling. An event fired from inside a portal will propagate to ancestors in the containing *React tree*, even if those elements are not ancestors in the *DOM tree*. Assuming the following HTML structure:
56
-
57
-```html
58
-<html>
59
- <body>
60
- <div id="app-root"></div>
61
- <div id="modal-root"></div>
62
- </body>
63
-</html>
64
-```
65
-
66
-A `Parent` component in `#app-root` would be able to catch an uncaught, bubbling event from the sibling node `#modal-root`.
67
-
68
-```js{20-23,34-41,45,53-55,62-63,66}
69
-// These two containers are siblings in the DOM
70
-const appRoot = document.getElementById('app-root');
71
-const modalRoot = document.getElementById('modal-root');
72
-
73
-class Modal extends React.Component {
74
- constructor(props) {
75
- super(props);
76
- this.el = document.createElement('div');
77
- }
78
-
79
- componentDidMount() {
80
- modalRoot.appendChild(this.el);
81
- }
82
-
83
- componentWillUnmount() {
84
- modalRoot.removeChild(this.el);
85
- }
86
-
87
- render() {
88
- return ReactDOM.createPortal(
89
- this.props.children,
90
- this.el,
91
- );
92
- }
93
-}
94
-
95
-class Parent extends React.Component {
96
- constructor(props) {
97
- super(props);
98
- this.state = {clicks: 0};
99
- this.handleClick = this.handleClick.bind(this);
100
- }
101
-
102
- handleClick() {
103
- // This will fire when the button in Child is clicked,
104
- // updating Parent's state, even though button
105
- // is not direct descendant in the DOM.
106
- this.setState(prevState => ({
107
- clicks: prevState.clicks + 1
108
- }));
109
- }
110
-
111
- render() {
112
- return (
113
- <div onClick={this.handleClick}>
114
- <p>Number of clicks: {this.state.clicks}</p>
115
- <p>
116
- Open up the browser DevTools
117
- to observe that the button
118
- is not a child of the div
119
- with the onClick handler.
120
- </p>
121
- <Modal>
122
- <Child />
123
- </Modal>
124
- </div>
125
- );
126
- }
127
-}
128
-
129
-function Child() {
130
- // The click event on this button will bubble up to parent,
131
- // because there is no 'onClick' attribute defined
132
- return (
133
- <div className="modal">
134
- <button>Click</button>
135
- </div>
136
- );
137
-}
138
-
139
-ReactDOM.render(<Parent />, appRoot);
140
-```
141
-
142
-[Try it on CodePen.](https://codepen.io/gaearon/pen/jGBWpE)
143
-
144
-Catching an event bubbling up from a portal in a parent component allows the development of more flexible abstractions that are not inherently reliant on portals. For example, if you render a `<Modal />` component, the parent can capture its events regardless of whether it's implemented using portals.
docs/docs/react-without-es6.md
deleted
-225
@@ -1,225 +0,0 @@
1
----
2
-id: react-without-es6
3
-title: React Without ES6
4
-permalink: docs/react-without-es6.html
5
----
6
-
7
-Normally you would define a React component as a plain JavaScript class:
8
-
9
-```javascript
10
-class Greeting extends React.Component {
11
- render() {
12
- return <h1>Hello, {this.props.name}</h1>;
13
- }
14
-}
15
-```
16
-
17
-If you don't use ES6 yet, you may use the `create-react-class` module instead:
18
-
19
-
20
-```javascript
21
-var createReactClass = require('create-react-class');
22
-var Greeting = createReactClass({
23
- render: function() {
24
- return <h1>Hello, {this.props.name}</h1>;
25
- }
26
-});
27
-```
28
-
29
-The API of ES6 classes is similar to `createReactClass()` with a few exceptions.
30
-
31
-## Declaring Default Props
32
-
33
-With functions and ES6 classes `defaultProps` is defined as a property on the component itself:
34
-
35
-```javascript
36
-class Greeting extends React.Component {
37
- // ...
38
-}
39
-
40
-Greeting.defaultProps = {
41
- name: 'Mary'
42
-};
43
-```
44
-
45
-With `createReactClass()`, you need to define `getDefaultProps()` as a function on the passed object:
46
-
47
-```javascript
48
-var Greeting = createReactClass({
49
- getDefaultProps: function() {
50
- return {
51
- name: 'Mary'
52
- };
53
- },
54
-
55
- // ...
56
-
57
-});
58
-```
59
-
60
-## Setting the Initial State
61
-
62
-In ES6 classes, you can define the initial state by assigning `this.state` in the constructor:
63
-
64
-```javascript
65
-class Counter extends React.Component {
66
- constructor(props) {
67
- super(props);
68
- this.state = {count: props.initialCount};
69
- }
70
- // ...
71
-}
72
-```
73
-
74
-With `createReactClass()`, you have to provide a separate `getInitialState` method that returns the initial state:
75
-
76
-```javascript
77
-var Counter = createReactClass({
78
- getInitialState: function() {
79
- return {count: this.props.initialCount};
80
- },
81
- // ...
82
-});
83
-```
84
-
85
-## Autobinding
86
-
87
-In React components declared as ES6 classes, methods follow the same semantics as regular ES6 classes. This means that they don't automatically bind `this` to the instance. You'll have to explicitly use `.bind(this)` in the constructor:
88
-
89
-```javascript
90
-class SayHello extends React.Component {
91
- constructor(props) {
92
- super(props);
93
- this.state = {message: 'Hello!'};
94
- // This line is important!
95
- this.handleClick = this.handleClick.bind(this);
96
- }
97
-
98
- handleClick() {
99
- alert(this.state.message);
100
- }
101
-
102
- render() {
103
- // Because `this.handleClick` is bound, we can use it as an event handler.
104
- return (
105
- <button onClick={this.handleClick}>
106
- Say hello
107
- </button>
108
- );
109
- }
110
-}
111
-```
112
-
113
-With `createReactClass()`, this is not necessary because it binds all methods:
114
-
115
-```javascript
116
-var SayHello = createReactClass({
117
- getInitialState: function() {
118
- return {message: 'Hello!'};
119
- },
120
-
121
- handleClick: function() {
122
- alert(this.state.message);
123
- },
124
-
125
- render: function() {
126
- return (
127
- <button onClick={this.handleClick}>
128
- Say hello
129
- </button>
130
- );
131
- }
132
-});
133
-```
134
-
135
-This means writing ES6 classes comes with a little more boilerplate code for event handlers, but the upside is slightly better performance in large applications.
136
-
137
-If the boilerplate code is too unattractive to you, you may enable the **experimental** [Class Properties](https://babeljs.io/docs/plugins/transform-class-properties/) syntax proposal with Babel:
138
-
139
-
140
-```javascript
141
-class SayHello extends React.Component {
142
- constructor(props) {
143
- super(props);
144
- this.state = {message: 'Hello!'};
145
- }
146
- // WARNING: this syntax is experimental!
147
- // Using an arrow here binds the method:
148
- handleClick = () => {
149
- alert(this.state.message);
150
- }
151
-
152
- render() {
153
- return (
154
- <button onClick={this.handleClick}>
155
- Say hello
156
- </button>
157
- );
158
- }
159
-}
160
-```
161
-
162
-Please note that the syntax above is **experimental** and the syntax may change, or the proposal might not make it into the language.
163
-
164
-If you'd rather play it safe, you have a few options:
165
-
166
-* Bind methods in the constructor.
167
-* Use arrow functions, e.g. `onClick={(e) => this.handleClick(e)}`.
168
-* Keep using `createReactClass`.
169
-
170
-## Mixins
171
-
172
->**Note:**
173
->
174
->ES6 launched without any mixin support. Therefore, there is no support for mixins when you use React with ES6 classes.
175
->
176
->**We also found numerous issues in codebases using mixins, [and don't recommend using them in the new code](/blog/2016/07/13/mixins-considered-harmful.html).**
177
->
178
->This section exists only for the reference.
179
-
180
-Sometimes very different components may share some common functionality. These are sometimes called [cross-cutting concerns](https://en.wikipedia.org/wiki/Cross-cutting_concern). [`createReactClass`](/docs/top-level-api.html#react.createclass) lets you use a legacy `mixins` system for that.
181
-
182
-One common use case is a component wanting to update itself on a time interval. It's easy to use `setInterval()`, but it's important to cancel your interval when you don't need it anymore to save memory. React provides [lifecycle methods](/docs/working-with-the-browser.html#component-lifecycle) that let you know when a component is about to be created or destroyed. Let's create a simple mixin that uses these methods to provide an easy `setInterval()` function that will automatically get cleaned up when your component is destroyed.
183
-
184
-```javascript
185
-var SetIntervalMixin = {
186
- componentWillMount: function() {
187
- this.intervals = [];
188
- },
189
- setInterval: function() {
190
- this.intervals.push(setInterval.apply(null, arguments));
191
- },
192
- componentWillUnmount: function() {
193
- this.intervals.forEach(clearInterval);
194
- }
195
-};
196
-
197
-var createReactClass = require('create-react-class');
198
-
199
-var TickTock = createReactClass({
200
- mixins: [SetIntervalMixin], // Use the mixin
201
- getInitialState: function() {
202
- return {seconds: 0};
203
- },
204
- componentDidMount: function() {
205
- this.setInterval(this.tick, 1000); // Call a method on the mixin
206
- },
207
- tick: function() {
208
- this.setState({seconds: this.state.seconds + 1});
209
- },
210
- render: function() {
211
- return (
212
- <p>
213
- React has been running for {this.state.seconds} seconds.
214
- </p>
215
- );
216
- }
217
-});
218
-
219
-ReactDOM.render(
220
- <TickTock />,
221
- document.getElementById('example')
222
-);
223
-```
224
-
225
-If a component is using multiple mixins and several mixins define the same lifecycle method (i.e. several mixins want to do some cleanup when the component is destroyed), all of the lifecycle methods are guaranteed to be called. Methods defined on mixins run in the order mixins were listed, followed by a method call on the component.
docs/docs/react-without-jsx.md
deleted
-59
@@ -1,59 +0,0 @@
1
----
2
-id: react-without-jsx
3
-title: React Without JSX
4
-permalink: docs/react-without-jsx.html
5
----
6
-
7
-JSX is not a requirement for using React. Using React without JSX is especially convenient when you don't want to set up compilation in your build environment.
8
-
9
-Each JSX element is just syntactic sugar for calling `React.createElement(component, props, ...children)`. So, anything you can do with JSX can also be done with just plain JavaScript.
10
-
11
-For example, this code written with JSX:
12
-
13
-```js
14
-class Hello extends React.Component {
15
- render() {
16
- return <div>Hello {this.props.toWhat}</div>;
17
- }
18
-}
19
-
20
-ReactDOM.render(
21
- <Hello toWhat="World" />,
22
- document.getElementById('root')
23
-);
24
-```
25
-
26
-can be compiled to this code that does not use JSX:
27
-
28
-```js
29
-class Hello extends React.Component {
30
- render() {
31
- return React.createElement('div', null, `Hello ${this.props.toWhat}`);
32
- }
33
-}
34
-
35
-ReactDOM.render(
36
- React.createElement(Hello, {toWhat: 'World'}, null),
37
- document.getElementById('root')
38
-);
39
-```
40
-
41
-If you're curious to see more examples of how JSX is converted to JavaScript, you can try out [the online Babel compiler](https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-0&code=function%20hello()%20%7B%0A%20%20return%20%3Cdiv%3EHello%20world!%3C%2Fdiv%3E%3B%0A%7D).
42
-
43
-The component can either be provided as a string, or as a subclass of `React.Component`, or a plain function for stateless components.
44
-
45
-If you get tired of typing `React.createElement` so much, one common pattern is to assign a shorthand:
46
-
47
-```js
48
-const e = React.createElement;
49
-
50
-ReactDOM.render(
51
- e('div', null, 'Hello World'),
52
- document.getElementById('root')
53
-);
54
-```
55
-
56
-If you use this shorthand form for `React.createElement`, it can be almost as convenient to use React without JSX.
57
-
58
-Alternatively, you can refer to community projects such as [`react-hyperscript`](https://github.com/mlmorg/react-hyperscript) and [`hyperscript-helpers`](https://github.com/ohanhi/hyperscript-helpers) which offer a terser syntax.
59
-
docs/docs/reconciliation.md
deleted
-153
@@ -1,153 +0,0 @@
1
----
2
-id: reconciliation
3
-title: Reconciliation
4
-permalink: docs/reconciliation.html
5
----
6
-
7
-React provides a declarative API so that you don't have to worry about exactly what changes on every update. This makes writing applications a lot easier, but it might not be obvious how this is implemented within React. This article explains the choices we made in React's "diffing" algorithm so that component updates are predictable while being fast enough for high-performance apps.
8
-
9
-## Motivation
10
-
11
-When you use React, at a single point in time you can think of the `render()` function as creating a tree of React elements. On the next state or props update, that `render()` function will return a different tree of React elements. React then needs to figure out how to efficiently update the UI to match the most recent tree.
12
-
13
-There are some generic solutions to this algorithmic problem of generating the minimum number of operations to transform one tree into another. However, the [state of the art algorithms](http://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf) have a complexity in the order of O(n<sup>3</sup>) where n is the number of elements in the tree.
14
-
15
-If we used this in React, displaying 1000 elements would require in the order of one billion comparisons. This is far too expensive. Instead, React implements a heuristic O(n) algorithm based on two assumptions:
16
-
17
-1. Two elements of different types will produce different trees.
18
-2. The developer can hint at which child elements may be stable across different renders with a `key` prop.
19
-
20
-In practice, these assumptions are valid for almost all practical use cases.
21
-
22
-## The Diffing Algorithm
23
-
24
-When diffing two trees, React first compares the two root elements. The behavior is different depending on the types of the root elements.
25
-
26
-### Elements Of Different Types
27
-
28
-Whenever the root elements have different types, React will tear down the old tree and build the new tree from scratch. Going from `<a>` to `<img>`, or from `<Article>` to `<Comment>`, or from `<Button>` to `<div>` - any of those will lead to a full rebuild.
29
-
30
-When tearing down a tree, old DOM nodes are destroyed. Component instances receive `componentWillUnmount()`. When building up a new tree, new DOM nodes are inserted into the DOM. Component instances receive `componentWillMount()` and then `componentDidMount()`. Any state associated with the old tree is lost.
31
-
32
-Any components below the root will also get unmounted and have their state destroyed. For example, when diffing:
33
-
34
-```xml
35
-<div>
36
- <Counter />
37
-</div>
38
-
39
-<span>
40
- <Counter />
41
-</span>
42
-```
43
-
44
-This will destroy the old `Counter` and remount a new one.
45
-
46
-### DOM Elements Of The Same Type
47
-
48
-When comparing two React DOM elements of the same type, React looks at the attributes of both, keeps the same underlying DOM node, and only updates the changed attributes. For example:
49
-
50
-```xml
51
-<div className="before" title="stuff" />
52
-
53
-<div className="after" title="stuff" />
54
-```
55
-
56
-By comparing these two elements, React knows to only modify the `className` on the underlying DOM node.
57
-
58
-When updating `style`, React also knows to update only the properties that changed. For example:
59
-
60
-```xml
61
-<div style={{color: 'red', fontWeight: 'bold'}} />
62
-
63
-<div style={{color: 'green', fontWeight: 'bold'}} />
64
-```
65
-
66
-When converting between these two elements, React knows to only modify the `color` style, not the `fontWeight`.
67
-
68
-After handling the DOM node, React then recurses on the children.
69
-
70
-### Component Elements Of The Same Type
71
-
72
-When a component updates, the instance stays the same, so that state is maintained across renders. React updates the props of the underlying component instance to match the new element, and calls `componentWillReceiveProps()` and `componentWillUpdate()` on the underlying instance.
73
-
74
-Next, the `render()` method is called and the diff algorithm recurses on the previous result and the new result.
75
-
76
-### Recursing On Children
77
-
78
-By default, when recursing on the children of a DOM node, React just iterates over both lists of children at the same time and generates a mutation whenever there's a difference.
79
-
80
-For example, when adding an element at the end of the children, converting between these two trees works well:
81
-
82
-```xml
83
-<ul>
84
- <li>first</li>
85
- <li>second</li>
86
-</ul>
87
-
88
-<ul>
89
- <li>first</li>
90
- <li>second</li>
91
- <li>third</li>
92
-</ul>
93
-```
94
-
95
-React will match the two `<li>first</li>` trees, match the two `<li>second</li>` trees, and then insert the `<li>third</li>` tree.
96
-
97
-If you implement it naively, inserting an element at the beginning has worse performance. For example, converting between these two trees works poorly:
98
-
99
-```xml
100
-<ul>
101
- <li>Duke</li>
102
- <li>Villanova</li>
103
-</ul>
104
-
105
-<ul>
106
- <li>Connecticut</li>
107
- <li>Duke</li>
108
- <li>Villanova</li>
109
-</ul>
110
-```
111
-
112
-React will mutate every child instead of realizing it can keep the `<li>Duke</li>` and `<li>Villanova</li>` subtrees intact. This inefficiency can be a problem.
113
-
114
-### Keys
115
-
116
-In order to solve this issue, React supports a `key` attribute. When children have keys, React uses the key to match children in the original tree with children in the subsequent tree. For example, adding a `key` to our inefficient example above can make the tree conversion efficient:
117
-
118
-```xml
119
-<ul>
120
- <li key="2015">Duke</li>
121
- <li key="2016">Villanova</li>
122
-</ul>
123
-
124
-<ul>
125
- <li key="2014">Connecticut</li>
126
- <li key="2015">Duke</li>
127
- <li key="2016">Villanova</li>
128
-</ul>
129
-```
130
-
131
-Now React knows that the element with key `'2014'` is the new one, and the elements with the keys `'2015'` and `'2016'` have just moved.
132
-
133
-In practice, finding a key is usually not hard. The element you are going to display may already have a unique ID, so the key can just come from your data:
134
-
135
-```js
136
-<li key={item.id}>{item.name}</li>
137
-```
138
-
139
-When that's not the case, you can add a new ID property to your model or hash some parts of the content to generate a key. The key only has to be unique among its siblings, not globally unique.
140
-
141
-As a last resort, you can pass item's index in the array as a key. This can work well if the items are never reordered, but reorders will be slow.
142
-
143
-## Tradeoffs
144
-
145
-It is important to remember that the reconciliation algorithm is an implementation detail. React could rerender the whole app on every action; the end result would be the same. We are regularly refining the heuristics in order to make common use cases faster.
146
-
147
-In the current implementation, you can express the fact that a subtree has been moved amongst its siblings, but you cannot tell that it has moved somewhere else. The algorithm will rerender that full subtree.
148
-
149
-Because React relies on heuristics, if the assumptions behind them are not met, performance will suffer.
150
-
151
-1. The algorithm will not try to match subtrees of different component types. If you see yourself alternating between two component types with very similar output, you may want to make it the same type. In practice, we haven't found this to be an issue.
152
-
153
-2. Keys should be stable, predictable, and unique. Unstable keys (like those produced by `Math.random()`) will cause many component instances and DOM nodes to be unnecessarily recreated, which can cause performance degradation and lost state in child components.
docs/docs/reference-dom-elements.md
deleted
-170
@@ -1,170 +0,0 @@
1
----
2
-id: dom-elements
3
-title: DOM Elements
4
-layout: docs
5
-category: Reference
6
-permalink: docs/dom-elements.html
7
-redirect_from:
8
- - "docs/tags-and-attributes.html"
9
- - "docs/dom-differences.html"
10
- - "docs/special-non-dom-attributes.html"
11
- - "docs/class-name-manipulation.html"
12
- - "tips/inline-styles.html"
13
- - "tips/style-props-value-px.html"
14
- - "tips/dangerously-set-inner-html.html"
15
----
16
-
17
-React implements a browser-independent DOM system for performance and cross-browser compatibility. We took the opportunity to clean up a few rough edges in browser DOM implementations.
18
-
19
-In React, all DOM properties and attributes (including event handlers) should be camelCased. For example, the HTML attribute `tabindex` corresponds to the attribute `tabIndex` in React. The exception is `aria-*` and `data-*` attributes, which should be lowercased. For example, you can keep `aria-label` as `aria-label`.
20
-
21
-## Differences In Attributes
22
-
23
-There are a number of attributes that work differently between React and HTML:
24
-
25
-### checked
26
-
27
-The `checked` attribute is supported by `<input>` components of type `checkbox` or `radio`. You can use it to set whether the component is checked. This is useful for building controlled components. `defaultChecked` is the uncontrolled equivalent, which sets whether the component is checked when it is first mounted.
28
-
29
-### className
30
-
31
-To specify a CSS class, use the `className` attribute. This applies to all regular DOM and SVG elements like `<div>`, `<a>`, and others.
32
-
33
-If you use React with Web Components (which is uncommon), use the `class` attribute instead.
34
-
35
-### dangerouslySetInnerHTML
36
-
37
-`dangerouslySetInnerHTML` is React's replacement for using `innerHTML` in the browser DOM. In general, setting HTML from code is risky because it's easy to inadvertently expose your users to a [cross-site scripting (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting) attack. So, you can set HTML directly from React, but you have to type out `dangerouslySetInnerHTML` and pass an object with a `__html` key, to remind yourself that it's dangerous. For example:
38
-
39
-```js
40
-function createMarkup() {
41
- return {__html: 'First · Second'};
42
-}
43
-
44
-function MyComponent() {
45
- return <div dangerouslySetInnerHTML={createMarkup()} />;
46
-}
47
-```
48
-
49
-### htmlFor
50
-
51
-Since `for` is a reserved word in JavaScript, React elements use `htmlFor` instead.
52
-
53
-### onChange
54
-
55
-The `onChange` event behaves as you would expect it to: whenever a form field is changed, this event is fired. We intentionally do not use the existing browser behavior because `onChange` is a misnomer for its behavior and React relies on this event to handle user input in real time.
56
-
57
-### selected
58
-
59
-The `selected` attribute is supported by `<option>` components. You can use it to set whether the component is selected. This is useful for building controlled components.
60
-
61
-### style
62
-
63
-The `style` attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM `style` JavaScript property, is more efficient, and prevents XSS security holes. For example:
64
-
65
-```js
66
-const divStyle = {
67
- color: 'blue',
68
- backgroundImage: 'url(' + imgUrl + ')',
69
-};
70
-
71
-function HelloWorldComponent() {
72
- return <div style={divStyle}>Hello World!</div>;
73
-}
74
-```
75
-
76
-Note that styles are not autoprefixed. To support older browsers, you need to supply corresponding style properties:
77
-
78
-```js
79
-const divStyle = {
80
- WebkitTransition: 'all', // note the capital 'W' here
81
- msTransition: 'all' // 'ms' is the only lowercase vendor prefix
82
-};
83
-
84
-function ComponentWithTransition() {
85
- return <div style={divStyle}>This should work cross-browser</div>;
86
-}
87
-```
88
-
89
-Style keys are camelCased in order to be consistent with accessing the properties on DOM nodes from JS (e.g. `node.style.backgroundImage`). Vendor prefixes [other than `ms`](http://www.andismith.com/blog/2012/02/modernizr-prefixed/) should begin with a capital letter. This is why `WebkitTransition` has an uppercase "W".
90
-
91
-### suppressContentEditableWarning
92
-
93
-Normally, there is a warning when an element with children is also marked as `contentEditable`, because it won't work. This attribute suppresses that warning. Don't use this unless you are building a library like [Draft.js](https://facebook.github.io/draft-js/) that manages `contentEditable` manually.
94
-
95
-### value
96
-
97
-The `value` attribute is supported by `<input>` and `<textarea>` components. You can use it to set the value of the component. This is useful for building controlled components. `defaultValue` is the uncontrolled equivalent, which sets the value of the component when it is first mounted.
98
-
99
-## All Supported HTML Attributes
100
-
101
-As of React 16, any standard [or custom](/blog/2017/09/08/dom-attributes-in-react-16.html) DOM attributes are fully supported.
102
-
103
-React has always provided a JavaScript-centric API to the DOM. Since React components often take both custom and DOM-related props, React uses the `camelCase` convention just like the DOM APIs:
104
-
105
-```js
106
-<div tabIndex="-1" /> // Just like node.tabIndex DOM API
107
-<div className="Button" /> // Just like node.className DOM API
108
-<input readOnly={true} /> // Just like node.readOnly DOM API
109
-```
110
-
111
-These props work similarly to the corresponding HTML attributes, with the exception of the special cases documented above.
112
-
113
-Some of the DOM attributes supported by React include:
114
-
115
-```
116
-accept acceptCharset accessKey action allowFullScreen allowTransparency alt
117
-async autoComplete autoFocus autoPlay capture cellPadding cellSpacing challenge
118
-charSet checked cite classID className colSpan cols content contentEditable
119
-contextMenu controls controlsList coords crossOrigin data dateTime default defer
120
-dir disabled download draggable encType form formAction formEncType formMethod
121
-formNoValidate formTarget frameBorder headers height hidden high href hrefLang
122
-htmlFor httpEquiv icon id inputMode integrity is keyParams keyType kind label
123
-lang list loop low manifest marginHeight marginWidth max maxLength media
124
-mediaGroup method min minLength multiple muted name noValidate nonce open
125
-optimum pattern placeholder poster preload profile radioGroup readOnly rel
126
-required reversed role rowSpan rows sandbox scope scoped scrolling seamless
127
-selected shape size sizes span spellCheck src srcDoc srcLang srcSet start step
128
-style summary tabIndex target title type useMap value width wmode wrap
129
-```
130
-
131
-Similarly, all SVG attributes are fully supported:
132
-
133
-```
134
-accentHeight accumulate additive alignmentBaseline allowReorder alphabetic
135
-amplitude arabicForm ascent attributeName attributeType autoReverse azimuth
136
-baseFrequency baseProfile baselineShift bbox begin bias by calcMode capHeight
137
-clip clipPath clipPathUnits clipRule colorInterpolation
138
-colorInterpolationFilters colorProfile colorRendering contentScriptType
139
-contentStyleType cursor cx cy d decelerate descent diffuseConstant direction
140
-display divisor dominantBaseline dur dx dy edgeMode elevation enableBackground
141
-end exponent externalResourcesRequired fill fillOpacity fillRule filter
142
-filterRes filterUnits floodColor floodOpacity focusable fontFamily fontSize
143
-fontSizeAdjust fontStretch fontStyle fontVariant fontWeight format from fx fy
144
-g1 g2 glyphName glyphOrientationHorizontal glyphOrientationVertical glyphRef
145
-gradientTransform gradientUnits hanging horizAdvX horizOriginX ideographic
146
-imageRendering in in2 intercept k k1 k2 k3 k4 kernelMatrix kernelUnitLength
147
-kerning keyPoints keySplines keyTimes lengthAdjust letterSpacing lightingColor
148
-limitingConeAngle local markerEnd markerHeight markerMid markerStart
149
-markerUnits markerWidth mask maskContentUnits maskUnits mathematical mode
150
-numOctaves offset opacity operator order orient orientation origin overflow
151
-overlinePosition overlineThickness paintOrder panose1 pathLength
152
-patternContentUnits patternTransform patternUnits pointerEvents points
153
-pointsAtX pointsAtY pointsAtZ preserveAlpha preserveAspectRatio primitiveUnits
154
-r radius refX refY renderingIntent repeatCount repeatDur requiredExtensions
155
-requiredFeatures restart result rotate rx ry scale seed shapeRendering slope
156
-spacing specularConstant specularExponent speed spreadMethod startOffset
157
-stdDeviation stemh stemv stitchTiles stopColor stopOpacity
158
-strikethroughPosition strikethroughThickness string stroke strokeDasharray
159
-strokeDashoffset strokeLinecap strokeLinejoin strokeMiterlimit strokeOpacity
160
-strokeWidth surfaceScale systemLanguage tableValues targetX targetY textAnchor
161
-textDecoration textLength textRendering to transform u1 u2 underlinePosition
162
-underlineThickness unicode unicodeBidi unicodeRange unitsPerEm vAlphabetic
163
-vHanging vIdeographic vMathematical values vectorEffect version vertAdvY
164
-vertOriginX vertOriginY viewBox viewTarget visibility widths wordSpacing
165
-writingMode x x1 x2 xChannelSelector xHeight xlinkActuate xlinkArcrole
166
-xlinkHref xlinkRole xlinkShow xlinkTitle xlinkType xmlns xmlnsXlink xmlBase
167
-xmlLang xmlSpace y y1 y2 yChannelSelector z zoomAndPan
168
-```
169
-
170
-You may also use custom attributes as long as they're fully lowercase.
docs/docs/reference-events.md
deleted
-352
@@ -1,352 +0,0 @@
1
----
2
-id: events
3
-title: SyntheticEvent
4
-permalink: docs/events.html
5
-layout: docs
6
-category: Reference
7
----
8
-
9
-This reference guide documents the `SyntheticEvent` wrapper that forms part of React's Event System. See the [Handling Events](/docs/handling-events.html) guide to learn more.
10
-
11
-## Overview
12
-
13
-Your event handlers will be passed instances of `SyntheticEvent`, a cross-browser wrapper around the browser's native event. It has the same interface as the browser's native event, including `stopPropagation()` and `preventDefault()`, except the events work identically across all browsers.
14
-
15
-If you find that you need the underlying browser event for some reason, simply use the `nativeEvent` attribute to get it. Every `SyntheticEvent` object has the following attributes:
16
-
17
-```javascript
18
-boolean bubbles
19
-boolean cancelable
20
-DOMEventTarget currentTarget
21
-boolean defaultPrevented
22
-number eventPhase
23
-boolean isTrusted
24
-DOMEvent nativeEvent
25
-void preventDefault()
26
-boolean isDefaultPrevented()
27
-void stopPropagation()
28
-boolean isPropagationStopped()
29
-DOMEventTarget target
30
-number timeStamp
31
-string type
32
-```
33
-
34
-> Note:
35
->
36
-> As of v0.14, returning `false` from an event handler will no longer stop event propagation. Instead, `e.stopPropagation()` or `e.preventDefault()` should be triggered manually, as appropriate.
37
-
38
-### Event Pooling
39
-
40
-The `SyntheticEvent` is pooled. This means that the `SyntheticEvent` object will be reused and all properties will be nullified after the event callback has been invoked.
41
-This is for performance reasons.
42
-As such, you cannot access the event in an asynchronous way.
43
-
44
-```javascript
45
-function onClick(event) {
46
- console.log(event); // => nullified object.
47
- console.log(event.type); // => "click"
48
- const eventType = event.type; // => "click"
49
-
50
- setTimeout(function() {
51
- console.log(event.type); // => null
52
- console.log(eventType); // => "click"
53
- }, 0);
54
-
55
- // Won't work. this.state.clickEvent will only contain null values.
56
- this.setState({clickEvent: event});
57
-
58
- // You can still export event properties.
59
- this.setState({eventType: event.type});
60
-}
61
-```
62
-
63
-> Note:
64
->
65
-> If you want to access the event properties in an asynchronous way, you should call `event.persist()` on the event, which will remove the synthetic event from the pool and allow references to the event to be retained by user code.
66
-
67
-## Supported Events
68
-
69
-React normalizes events so that they have consistent properties across different browsers.
70
-
71
-The event handlers below are triggered by an event in the bubbling phase. To register an event handler for the capture phase, append `Capture` to the event name; for example, instead of using `onClick`, you would use `onClickCapture` to handle the click event in the capture phase.
72
-
73
-- [Clipboard Events](#clipboard-events)
74
-- [Composition Events](#composition-events)
75
-- [Keyboard Events](#keyboard-events)
76
-- [Focus Events](#focus-events)
77
-- [Form Events](#form-events)
78
-- [Mouse Events](#mouse-events)
79
-- [Selection Events](#selection-events)
80
-- [Touch Events](#touch-events)
81
-- [UI Events](#ui-events)
82
-- [Wheel Events](#wheel-events)
83
-- [Media Events](#media-events)
84
-- [Image Events](#image-events)
85
-- [Animation Events](#animation-events)
86
-- [Transition Events](#transition-events)
87
-- [Other Events](#other-events)
88
-
89
-* * *
90
-
91
-## Reference
92
-
93
-### Clipboard Events
94
-
95
-Event names:
96
-
97
-```
98
-onCopy onCut onPaste
99
-```
100
-
101
-Properties:
102
-
103
-```javascript
104
-DOMDataTransfer clipboardData
105
-```
106
-
107
-* * *
108
-
109
-### Composition Events
110
-
111
-Event names:
112
-
113
-```
114
-onCompositionEnd onCompositionStart onCompositionUpdate
115
-```
116
-
117
-Properties:
118
-
119
-```javascript
120
-string data
121
-
122
-```
123
-
124
-* * *
125
-
126
-### Keyboard Events
127
-
128
-Event names:
129
-
130
-```
131
-onKeyDown onKeyPress onKeyUp
132
-```
133
-
134
-Properties:
135
-
136
-```javascript
137
-boolean altKey
138
-number charCode
139
-boolean ctrlKey
140
-boolean getModifierState(key)
141
-string key
142
-number keyCode
143
-string locale
144
-number location
145
-boolean metaKey
146
-boolean repeat
147
-boolean shiftKey
148
-number which
149
-```
150
-
151
-The `key` property can take any of the values documented in the [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#named-key-attribute-values).
152
-
153
-* * *
154
-
155
-### Focus Events
156
-
157
-Event names:
158
-
159
-```
160
-onFocus onBlur
161
-```
162
-
163
-These focus events work on all elements in the React DOM, not just form elements.
164
-
165
-Properties:
166
-
167
-```javascript
168
-DOMEventTarget relatedTarget
169
-```
170
-
171
-* * *
172
-
173
-### Form Events
174
-
175
-Event names:
176
-
177
-```
178
-onChange onInput onInvalid onSubmit
179
-```
180
-
181
-For more information about the onChange event, see [Forms](/docs/forms.html).
182
-
183
-* * *
184
-
185
-### Mouse Events
186
-
187
-Event names:
188
-
189
-```
190
-onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit
191
-onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
192
-onMouseMove onMouseOut onMouseOver onMouseUp
193
-```
194
-
195
-The `onMouseEnter` and `onMouseLeave` events propagate from the element being left to the one being entered instead of ordinary bubbling and do not have a capture phase.
196
-
197
-Properties:
198
-
199
-```javascript
200
-boolean altKey
201
-number button
202
-number buttons
203
-number clientX
204
-number clientY
205
-boolean ctrlKey
206
-boolean getModifierState(key)
207
-boolean metaKey
208
-number pageX
209
-number pageY
210
-DOMEventTarget relatedTarget
211
-number screenX
212
-number screenY
213
-boolean shiftKey
214
-```
215
-
216
-* * *
217
-
218
-### Selection Events
219
-
220
-Event names:
221
-
222
-```
223
-onSelect
224
-```
225
-
226
-* * *
227
-
228
-### Touch Events
229
-
230
-Event names:
231
-
232
-```
233
-onTouchCancel onTouchEnd onTouchMove onTouchStart
234
-```
235
-
236
-Properties:
237
-
238
-```javascript
239
-boolean altKey
240
-DOMTouchList changedTouches
241
-boolean ctrlKey
242
-boolean getModifierState(key)
243
-boolean metaKey
244
-boolean shiftKey
245
-DOMTouchList targetTouches
246
-DOMTouchList touches
247
-```
248
-
249
-* * *
250
-
251
-### UI Events
252
-
253
-Event names:
254
-
255
-```
256
-onScroll
257
-```
258
-
259
-Properties:
260
-
261
-```javascript
262
-number detail
263
-DOMAbstractView view
264
-```
265
-
266
-* * *
267
-
268
-### Wheel Events
269
-
270
-Event names:
271
-
272
-```
273
-onWheel
274
-```
275
-
276
-Properties:
277
-
278
-```javascript
279
-number deltaMode
280
-number deltaX
281
-number deltaY
282
-number deltaZ
283
-```
284
-
285
-* * *
286
-
287
-### Media Events
288
-
289
-Event names:
290
-
291
-```
292
-onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted
293
-onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay
294
-onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend
295
-onTimeUpdate onVolumeChange onWaiting
296
-```
297
-
298
-* * *
299
-
300
-### Image Events
301
-
302
-Event names:
303
-
304
-```
305
-onLoad onError
306
-```
307
-
308
-* * *
309
-
310
-### Animation Events
311
-
312
-Event names:
313
-
314
-```
315
-onAnimationStart onAnimationEnd onAnimationIteration
316
-```
317
-
318
-Properties:
319
-
320
-```javascript
321
-string animationName
322
-string pseudoElement
323
-float elapsedTime
324
-```
325
-
326
-* * *
327
-
328
-### Transition Events
329
-
330
-Event names:
331
-
332
-```
333
-onTransitionEnd
334
-```
335
-
336
-Properties:
337
-
338
-```javascript
339
-string propertyName
340
-string pseudoElement
341
-float elapsedTime
342
-```
343
-
344
-* * *
345
-
346
-### Other Events
347
-
348
-Event names:
349
-
350
-```
351
-onToggle
352
-```
docs/docs/reference-javascript-environment-requirements.md
deleted
-32
@@ -1,32 +0,0 @@
1
----
2
-id: javascript-environment-requirements
3
-title: JavaScript Environment Requirements
4
-layout: docs
5
-category: Reference
6
-permalink: docs/javascript-environment-requirements.html
7
----
8
-
9
-React 16 depends on the collection types [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set). If you support older browsers and devices which may not yet provide these natively (e.g. IE < 11), consider including a global polyfill in your bundled application, such as [core-js](https://github.com/zloirock/core-js) or [babel-polyfill](https://babeljs.io/docs/usage/polyfill/).
10
-
11
-A polyfilled environment for React 16 using core-js to support older browsers might look like:
12
-
13
-```js
14
-import 'core-js/es6/map';
15
-import 'core-js/es6/set';
16
-
17
-import React from 'react';
18
-import ReactDOM from 'react-dom';
19
-
20
-ReactDOM.render(
21
- <h1>Hello, world!</h1>,
22
- document.getElementById('root')
23
-);
24
-```
25
-
26
-React also depends on `requestAnimationFrame` (even in test environments). A simple shim for testing environments would be:
27
-
28
-```js
29
-global.requestAnimationFrame = function(callback) {
30
- setTimeout(callback, 0);
31
-};
32
-```
\ No newline at end of file
docs/docs/reference-pure-render-mixin.md
deleted
-51
@@ -1,51 +0,0 @@
1
----
2
-id: pure-render-mixin
3
-title: PureRenderMixin
4
-layout: docs
5
-category: Reference
6
-permalink: docs/pure-render-mixin.html
7
----
8
-
9
-> Note
10
-
11
-> The `PureRenderMixin` mixin predates `React.PureComponent`. This reference doc is provided for legacy purposes, and you should consider using [`React.PureComponent`](/docs/react-api.html#react.purecomponent) instead.
12
-
13
-If your React component's render function renders the same result given the same props and state, you can use this mixin for a performance boost in some cases.
14
-
15
-Example:
16
-
17
-```js
18
-var PureRenderMixin = require('react-addons-pure-render-mixin');
19
-var createReactClass = require('create-react-class');
20
-createReactClass({
21
- mixins: [PureRenderMixin],
22
-
23
- render: function() {
24
- return <div className={this.props.className}>foo</div>;
25
- }
26
-});
27
-```
28
-
29
-Example using ES6 class syntax:
30
-
31
-```js
32
-import PureRenderMixin from 'react-addons-pure-render-mixin';
33
-class FooComponent extends React.Component {
34
- constructor(props) {
35
- super(props);
36
- this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
37
- }
38
-
39
- render() {
40
- return <div className={this.props.className}>foo</div>;
41
- }
42
-}
43
-```
44
-
45
-Under the hood, the mixin implements [shouldComponentUpdate](/docs/component-specs.html#updating-shouldcomponentupdate), in which it compares the current props and state with the next ones and returns `false` if the equalities pass.
46
-
47
-> Note:
48
->
49
-> This only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences. Only mix into components which have simple props and state, or use `forceUpdate()` when you know deep data structures have changed. Or, consider using [immutable objects](https://facebook.github.io/immutable-js/) to facilitate fast comparisons of nested data.
50
->
51
-> Furthermore, `shouldComponentUpdate` skips updates for the whole component subtree. Make sure all the children components are also "pure".
docs/docs/reference-react-component.md
deleted
-390
@@ -1,390 +0,0 @@
1
----
2
-id: react-component
3
-title: React.Component
4
-layout: docs
5
-category: Reference
6
-permalink: docs/react-component.html
7
-redirect_from:
8
- - "docs/component-api.html"
9
- - "docs/component-specs.html"
10
- - "docs/component-specs-ko-KR.html"
11
- - "docs/component-specs-zh-CN.html"
12
- - "tips/componentWillReceiveProps-not-triggered-after-mounting.html"
13
- - "tips/dom-event-listeners.html"
14
- - "tips/initial-ajax.html"
15
- - "tips/use-react-with-other-libraries.html"
16
----
17
-
18
-[Components](/docs/components-and-props.html) let you split the UI into independent, reusable pieces, and think about each piece in isolation. `React.Component` is provided by [`React`](/docs/react-api.html).
19
-
20
-## Overview
21
-
22
-`React.Component` is an abstract base class, so it rarely makes sense to refer to `React.Component` directly. Instead, you will typically subclass it, and define at least a [`render()`](#render) method.
23
-
24
-Normally you would define a React component as a plain [JavaScript class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes):
25
-
26
-```javascript
27
-class Greeting extends React.Component {
28
- render() {
29
- return <h1>Hello, {this.props.name}</h1>;
30
- }
31
-}
32
-```
33
-
34
-If you don't use ES6 yet, you may use the [`create-react-class`](/docs/react-api.html#createclass) module instead. Take a look at [Using React without ES6](/docs/react-without-es6.html) to learn more.
35
-
36
-### The Component Lifecycle
37
-
38
-Each component has several "lifecycle methods" that you can override to run code at particular times in the process. Methods prefixed with **`will`** are called right before something happens, and methods prefixed with **`did`** are called right after something happens.
39
-
40
-#### Mounting
41
-
42
-These methods are called when an instance of a component is being created and inserted into the DOM:
43
-
44
-- [`constructor()`](#constructor)
45
-- [`componentWillMount()`](#componentwillmount)
46
-- [`render()`](#render)
47
-- [`componentDidMount()`](#componentdidmount)
48
-
49
-#### Updating
50
-
51
-An update can be caused by changes to props or state. These methods are called when a component is being re-rendered:
52
-
53
-- [`componentWillReceiveProps()`](#componentwillreceiveprops)
54
-- [`shouldComponentUpdate()`](#shouldcomponentupdate)
55
-- [`componentWillUpdate()`](#componentwillupdate)
56
-- [`render()`](#render)
57
-- [`componentDidUpdate()`](#componentdidupdate)
58
-
59
-#### Unmounting
60
-
61
-This method is called when a component is being removed from the DOM:
62
-
63
-- [`componentWillUnmount()`](#componentwillunmount)
64
-
65
-### Other APIs
66
-
67
-Each component also provides some other APIs:
68
-
69
- - [`setState()`](#setstate)
70
- - [`forceUpdate()`](#forceupdate)
71
-
72
-### Class Properties
73
-
74
- - [`defaultProps`](#defaultprops)
75
- - [`displayName`](#displayname)
76
-
77
-### Instance Properties
78
-
79
- - [`props`](#props)
80
- - [`state`](#state)
81
-
82
-* * *
83
-
84
-## Reference
85
-
86
-### `render()`
87
-
88
-```javascript
89
-render()
90
-```
91
-
92
-The `render()` method is required.
93
-
94
-When called, it should examine `this.props` and `this.state` and return one of the following types:
95
-
96
-- **React elements.** Typically created via JSX. An element can either be a representation of a native DOM component (`<div />`), or a user-defined composite component (`<MyComponent />`).
97
-- **String and numbers.** These are rendered as text nodes in the DOM.
98
-- **Portals**. Created with [`ReactDOM.createPortal`](/docs/portals.html).
99
-- `null`. Renders nothing.
100
-- **Booleans**. Render nothing. (Mostly exists to support `return test && <Child />` pattern, where `test` is boolean.)
101
-
102
-When returning `null` or `false`, `ReactDOM.findDOMNode(this)` will return `null`.
103
-
104
-The `render()` function should be pure, meaning that it does not modify component state, it returns the same result each time it's invoked, and it does not directly interact with the browser. If you need to interact with the browser, perform your work in `componentDidMount()` or the other lifecycle methods instead. Keeping `render()` pure makes components easier to think about.
105
-
106
-> Note
107
->
108
-> `render()` will not be invoked if [`shouldComponentUpdate()`](#shouldcomponentupdate) returns false.
109
-
110
-#### Fragments
111
-
112
-You can also return multiple items from `render()` using an array:
113
-
114
-```javascript
115
-render() {
116
- return [
117
- <li key="A">First item</li>,
118
- <li key="B">Second item</li>,
119
- <li key="C">Third item</li>,
120
- ];
121
-}
122
-```
123
-
124
-> Note:
125
->
126
-> Don't forget to [add keys](/docs/lists-and-keys.html#keys) to elements in a fragment to avoid the key warning.
127
-
128
-* * *
129
-
130
-### `constructor()`
131
-
132
-```javascript
133
-constructor(props)
134
-```
135
-
136
-The constructor for a React component is called before it is mounted. When implementing the constructor for a `React.Component` subclass, you should call `super(props)` before any other statement. Otherwise, `this.props` will be undefined in the constructor, which can lead to bugs.
137
-
138
-The constructor is the right place to initialize state. If you don't initialize state and you don't bind methods, you don't need to implement a constructor for your React component.
139
-
140
-It's okay to initialize state based on props. This effectively "forks" the props and sets the state with the initial props. Here's an example of a valid `React.Component` subclass constructor:
141
-
142
-```js
143
-constructor(props) {
144
- super(props);
145
- this.state = {
146
- color: props.initialColor
147
- };
148
-}
149
-```
150
-
151
-Beware of this pattern, as state won't be up-to-date with any props update. Instead of syncing props to state, you often want to [lift the state up](/docs/lifting-state-up.html).
152
-
153
-If you "fork" props by using them for state, you might also want to implement [`componentWillReceiveProps(nextProps)`](#componentwillreceiveprops) to keep the state up-to-date with them. But lifting state up is often easier and less bug-prone.
154
-
155
-* * *
156
-
157
-### `componentWillMount()`
158
-
159
-```javascript
160
-componentWillMount()
161
-```
162
-
163
-`componentWillMount()` is invoked immediately before mounting occurs. It is called before `render()`, therefore setting state synchronously in this method will not trigger a re-rendering. Avoid introducing any side-effects or subscriptions in this method.
164
-
165
-This is the only lifecycle hook called on server rendering. Generally, we recommend using the `constructor()` instead.
166
-
167
-* * *
168
-
169
-### `componentDidMount()`
170
-
171
-```javascript
172
-componentDidMount()
173
-```
174
-
175
-`componentDidMount()` is invoked immediately after a component is mounted. Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request. Setting state in this method will trigger a re-rendering.
176
-
177
-* * *
178
-
179
-### `componentWillReceiveProps()`
180
-
181
-```javascript
182
-componentWillReceiveProps(nextProps)
183
-```
184
-
185
-`componentWillReceiveProps()` is invoked before a mounted component receives new props. If you need to update the state in response to prop changes (for example, to reset it), you may compare `this.props` and `nextProps` and perform state transitions using `this.setState()` in this method.
186
-
187
-Note that React may call this method even if the props have not changed, so make sure to compare the current and next values if you only want to handle changes. This may occur when the parent component causes your component to re-render.
188
-
189
-React doesn't call `componentWillReceiveProps` with initial props during [mounting](#mounting). It only calls this method if some of component's props may update. Calling `this.setState` generally doesn't trigger `componentWillReceiveProps`.
190
-
191
-* * *
192
-
193
-### `shouldComponentUpdate()`
194
-
195
-```javascript
196
-shouldComponentUpdate(nextProps, nextState)
197
-```
198
-
199
-Use `shouldComponentUpdate()` to let React know if a component's output is not affected by the current change in state or props. The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior.
200
-
201
-`shouldComponentUpdate()` is invoked before rendering when new props or state are being received. Defaults to `true`. This method is not called for the initial render or when `forceUpdate()` is used.
202
-
203
-Returning `false` does not prevent child components from re-rendering when *their* state changes.
204
-
205
-Currently, if `shouldComponentUpdate()` returns `false`, then [`componentWillUpdate()`](#componentwillupdate), [`render()`](#render), and [`componentDidUpdate()`](#componentdidupdate) will not be invoked. Note that in the future React may treat `shouldComponentUpdate()` as a hint rather than a strict directive, and returning `false` may still result in a re-rendering of the component.
206
-
207
-If you determine a specific component is slow after profiling, you may change it to inherit from [`React.PureComponent`](/docs/react-api.html#react.purecomponent) which implements `shouldComponentUpdate()` with a shallow prop and state comparison. If you are confident you want to write it by hand, you may compare `this.props` with `nextProps` and `this.state` with `nextState` and return `false` to tell React the update can be skipped.
208
-
209
-* * *
210
-
211
-### `componentWillUpdate()`
212
-
213
-```javascript
214
-componentWillUpdate(nextProps, nextState)
215
-```
216
-
217
-`componentWillUpdate()` is invoked immediately before rendering when new props or state are being received. Use this as an opportunity to perform preparation before an update occurs. This method is not called for the initial render.
218
-
219
-Note that you cannot call `this.setState()` here. If you need to update state in response to a prop change, use `componentWillReceiveProps()` instead.
220
-
221
-> Note
222
->
223
-> `componentWillUpdate()` will not be invoked if [`shouldComponentUpdate()`](#shouldcomponentupdate) returns false.
224
-
225
-* * *
226
-
227
-### `componentDidUpdate()`
228
-
229
-```javascript
230
-componentDidUpdate(prevProps, prevState)
231
-```
232
-
233
-`componentDidUpdate()` is invoked immediately after updating occurs. This method is not called for the initial render.
234
-
235
-Use this as an opportunity to operate on the DOM when the component has been updated. This is also a good place to do network requests as long as you compare the current props to previous props (e.g. a network request may not be necessary if the props have not changed).
236
-
237
-> Note
238
->
239
-> `componentDidUpdate()` will not be invoked if [`shouldComponentUpdate()`](#shouldcomponentupdate) returns false.
240
-
241
-* * *
242
-
243
-### `componentWillUnmount()`
244
-
245
-```javascript
246
-componentWillUnmount()
247
-```
248
-
249
-`componentWillUnmount()` is invoked immediately before a component is unmounted and destroyed. Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any DOM elements that were created in `componentDidMount`
250
-
251
-* * *
252
-
253
-### `setState()`
254
-
255
-```javascript
256
-setState(updater, [callback])
257
-```
258
-
259
-`setState()` enqueues changes to the component state and tells React that this component and its children need to be re-rendered with the updated state. This is the primary method you use to update the user interface in response to event handlers and server responses.
260
-
261
-Think of `setState()` as a *request* rather than an immediate command to update the component. For better perceived performance, React may delay it, and then update several components in a single pass. React does not guarantee that the state changes are applied immediately.
262
-
263
-`setState()` does not always immediately update the component. It may batch or defer the update until later. This makes reading `this.state` right after calling `setState()` a potential pitfall. Instead, use `componentDidUpdate` or a `setState` callback (`setState(updater, callback)`), either of which are guaranteed to fire after the update has been applied. If you need to set the state based on the previous state, read about the `updater` argument below.
264
-
265
-`setState()` will always lead to a re-render unless `shouldComponentUpdate()` returns `false`. If mutable objects are being used and conditional rendering logic cannot be implemented in `shouldComponentUpdate()`, calling `setState()` only when the new state differs from the previous state will avoid unnecessary re-renders.
266
-
267
-The first argument is an `updater` function with the signature:
268
-
269
-```javascript
270
-(prevState, props) => stateChange
271
-```
272
-
273
-`prevState` is a reference to the previous state. It should not be directly mutated. Instead, changes should be represented by building a new object based on the input from `prevState` and `props`. For instance, suppose we wanted to increment a value in state by `props.step`:
274
-
275
-```javascript
276
-this.setState((prevState, props) => {
277
- return {counter: prevState.counter + props.step};
278
-});
279
-```
280
-
281
-Both `prevState` and `props` received by the updater function are guaranteed to be up-to-date. The output of the updater is shallowly merged with `prevState`.
282
-
283
-The second parameter to `setState()` is an optional callback function that will be executed once `setState` is completed and the component is re-rendered. Generally we recommend using `componentDidUpdate()` for such logic instead.
284
-
285
-You may optionally pass an object as the first argument to `setState()` instead of a function:
286
-
287
-```javascript
288
-setState(stateChange, [callback])
289
-```
290
-
291
-This performs a shallow merge of `stateChange` into the new state, e.g., to adjust a shopping cart item quantity:
292
-
293
-```javascript
294
-this.setState({quantity: 2})
295
-```
296
-
297
-This form of `setState()` is also asynchronous, and multiple calls during the same cycle may be batched together. For example, if you attempt to increment an item quantity more than once in the same cycle, that will result in the equivalent of:
298
-
299
-```javaScript
300
-Object.assign(
301
- previousState,
302
- {quantity: state.quantity + 1},
303
- {quantity: state.quantity + 1},
304
- ...
305
-)
306
-```
307
-
308
-Subsequent calls will override values from previous calls in the same cycle, so the quantity will only be incremented once. If the next state depends on the previous state, we recommend using the updater function form, instead:
309
-
310
-```js
311
-this.setState((prevState) => {
312
- return {counter: prevState.quantity + 1};
313
-});
314
-```
315
-
316
-For more detail, see the [State and Lifecycle guide](/docs/state-and-lifecycle.html).
317
-
318
-* * *
319
-
320
-### `forceUpdate()`
321
-
322
-```javascript
323
-component.forceUpdate(callback)
324
-```
325
-
326
-By default, when your component's state or props change, your component will re-render. If your `render()` method depends on some other data, you can tell React that the component needs re-rendering by calling `forceUpdate()`.
327
-
328
-Calling `forceUpdate()` will cause `render()` to be called on the component, skipping `shouldComponentUpdate()`. This will trigger the normal lifecycle methods for child components, including the `shouldComponentUpdate()` method of each child. React will still only update the DOM if the markup changes.
329
-
330
-Normally you should try to avoid all uses of `forceUpdate()` and only read from `this.props` and `this.state` in `render()`.
331
-
332
-* * *
333
-
334
-## Class Properties
335
-
336
-### `defaultProps`
337
-
338
-`defaultProps` can be defined as a property on the component class itself, to set the default props for the class. This is used for undefined props, but not for null props. For example:
339
-
340
-```js
341
-class CustomButton extends React.Component {
342
- // ...
343
-}
344
-
345
-CustomButton.defaultProps = {
346
- color: 'blue'
347
-};
348
-```
349
-
350
-If `props.color` is not provided, it will be set by default to `'blue'`:
351
-
352
-```js
353
- render() {
354
- return <CustomButton /> ; // props.color will be set to blue
355
- }
356
-```
357
-
358
-If `props.color` is set to null, it will remain null:
359
-
360
-```js
361
- render() {
362
- return <CustomButton color={null} /> ; // props.color will remain null
363
- }
364
-```
365
-
366
-* * *
367
-
368
-### `displayName`
369
-
370
-The `displayName` string is used in debugging messages. Usually, you don't need to set it explicitly because it's inferred from the name of the function or class that defines the component. You might want to set it explicitly if you want to display a different name for debugging purposes or when you create a higher-order component, see [Wrap the Display Name for Easy Debugging](/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging) for details.
371
-
372
-* * *
373
-
374
-## Instance Properties
375
-
376
-### `props`
377
-
378
-`this.props` contains the props that were defined by the caller of this component. See [Components and Props](/docs/components-and-props.html) for an introduction to props.
379
-
380
-In particular, `this.props.children` is a special prop, typically defined by the child tags in the JSX expression rather than in the tag itself.
381
-
382
-### `state`
383
-
384
-The state contains data specific to this component that may change over time. The state is user-defined, and it should be a plain JavaScript object.
385
-
386
-If you don't use it in `render()`, it shouldn't be in the state. For example, you can put timer IDs directly on the instance.
387
-
388
-See [State and Lifecycle](/docs/state-and-lifecycle.html) for more information about the state.
389
-
390
-Never mutate `this.state` directly, as calling `setState()` afterwards may replace the mutation you made. Treat `this.state` as if it were immutable.
docs/docs/reference-react-dom-server.md
deleted
-84
@@ -1,84 +0,0 @@
1
----
2
-id: react-dom-server
3
-title: ReactDOMServer
4
-layout: docs
5
-category: Reference
6
-permalink: docs/react-dom-server.html
7
----
8
-
9
-The `ReactDOMServer` object enables you to render components to static markup. Typically, it's used on a Node server:
10
-
11
-```js
12
-// ES modules
13
-import ReactDOMServer from 'react-dom/server';
14
-// CommonJS
15
-var ReactDOMServer = require('react-dom/server');
16
-```
17
-
18
-## Overview
19
-
20
-The following methods can be used in both the server and browser environments:
21
-
22
-- [`renderToString()`](#rendertostring)
23
-- [`renderToStaticMarkup()`](#rendertostaticmarkup)
24
-
25
-These additional methods depend on a package (`stream`) that is **only available on the server**, and won't work in the browser.
26
-
27
-- [`renderToNodeStream()`](#rendertonodestream)
28
-- [`renderToStaticNodeStream()`](#rendertostaticnodestream)
29
-
30
-* * *
31
-
32
-## Reference
33
-
34
-### `renderToString()`
35
-
36
-```javascript
37
-ReactDOMServer.renderToString(element)
38
-```
39
-
40
-Render a React element to its initial HTML. React will return an HTML string. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.
41
-
42
-If you call [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.
43
-
44
-* * *
45
-
46
-### `renderToStaticMarkup()`
47
-
48
-```javascript
49
-ReactDOMServer.renderToStaticMarkup(element)
50
-```
51
-
52
-Similar to [`renderToString`](#rendertostring), except this doesn't create extra DOM attributes such as `data-reactid`, that React uses internally. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save lots of bytes.
53
-
54
-* * *
55
-
56
-### `renderToNodeStream()`
57
-
58
-```javascript
59
-ReactDOMNodeStream.renderToNodeStream(element)
60
-```
61
-
62
-Render a React element to its initial HTML. Returns a [Readable stream](https://nodejs.org/api/stream.html#stream_readable_streams) that outputs an HTML string. The HTML output by this stream is exactly equal to what [`ReactDOMServer.renderToString`](#rendertostring) would return.
63
-
64
-> Note:
65
->
66
-> Server-only. This API is not available in the browser.
67
->
68
-> The stream returned from this method will return a byte stream encoded in utf-8. If you need a stream in another encoding, take a look a project like [iconv-lite](https://www.npmjs.com/package/iconv-lite), which provides transform streams for transcoding text.
69
-
70
-* * *
71
-
72
-### `renderToStaticNodeStream()`
73
-
74
-```javascript
75
-ReactDOMNodeStream.renderToStaticNodeStream(element)
76
-```
77
-
78
-Similar to [`renderToNodeStream`](#rendertonodestream), except this doesn't create extra DOM attributes such as `data-reactid`, that React uses internally. The HTML output by this stream is exactly equal to what [`ReactDOMServer.renderToStaticMarkup`](#rendertostaticmarkup) would return.
79
-
80
-> Note:
81
->
82
-> Server-only. This API is not available in the browser.
83
->
84
-> The stream returned from this method will return a byte stream encoded in utf-8. If you need a stream in another encoding, take a look a project like [iconv-lite](https://www.npmjs.com/package/iconv-lite), which provides transform streams for transcoding text.
docs/docs/reference-react-dom.md
deleted
-110
@@ -1,110 +0,0 @@
1
----
2
-id: react-dom
3
-title: ReactDOM
4
-layout: docs
5
-category: Reference
6
-permalink: docs/react-dom.html
7
----
8
-
9
-If you load React from a `<script>` tag, these top-level APIs are available on the `ReactDOM` global. If you use ES6 with npm, you can write `import ReactDOM from 'react-dom'`. If you use ES5 with npm, you can write `var ReactDOM = require('react-dom')`.
10
-
11
-## Overview
12
-
13
-The `react-dom` package provides DOM-specific methods that can be used at the top level of your app and as an escape hatch to get outside of the React model if you need to. Most of your components should not need to use this module.
14
-
15
-- [`render()`](#render)
16
-- [`hydrate()`](#hydrate)
17
-- [`unmountComponentAtNode()`](#unmountcomponentatnode)
18
-- [`findDOMNode()`](#finddomnode)
19
-- [`createPortal()`](#createportal)
20
-
21
-### Browser Support
22
-
23
-React supports all popular browsers, including Internet Explorer 9 and above.
24
-
25
-> Note
26
->
27
-> We don't support older browsers that don't support ES5 methods, but you may find that your apps do work in older browsers if polyfills such as [es5-shim and es5-sham](https://github.com/es-shims/es5-shim) are included in the page. You're on your own if you choose to take this path.
28
-
29
-* * *
30
-
31
-## Reference
32
-
33
-### `render()`
34
-
35
-```javascript
36
-ReactDOM.render(
37
- element,
38
- container,
39
- [callback]
40
-)
41
-```
42
-
43
-Render a React element into the DOM in the supplied `container` and return a [reference](/docs/more-about-refs.html) to the component (or returns `null` for [stateless components](/docs/components-and-props.html#functional-and-class-components)).
44
-
45
-If the React element was previously rendered into `container`, this will perform an update on it and only mutate the DOM as necessary to reflect the latest React element.
46
-
47
-If the optional callback is provided, it will be executed after the component is rendered or updated.
48
-
49
-> Note:
50
->
51
-> `ReactDOM.render()` controls the contents of the container node you pass in. Any existing DOM elements inside are replaced when first called. Later calls use React’s DOM diffing algorithm for efficient updates.
52
->
53
-> `ReactDOM.render()` does not modify the container node (only modifies the children of the container). It may be possible to insert a component to an existing DOM node without overwriting the existing children.
54
->
55
-> `ReactDOM.render()` currently returns a reference to the root `ReactComponent` instance. However, using this return value is legacy
56
-> and should be avoided because future versions of React may render components asynchronously in some cases. If you need a reference to the root `ReactComponent` instance, the preferred solution is to attach a
57
-> [callback ref](/docs/more-about-refs.html#the-ref-callback-attribute) to the root element.
58
->
59
-> Using `ReactDOM.render()` to hydrate a server-rendered container is deprecated and will be removed in React 17. Use [`hydrate()`](#hydrate) instead.
60
-
61
-* * *
62
-
63
-### `hydrate()`
64
-
65
-```javascript
66
-ReactDOM.hydrate(
67
- element,
68
- container,
69
- [callback]
70
-)
71
-```
72
-
73
-Same as [`render()`](#render), but is used to hydrate a container whose HTML contents were rendered by [`ReactDOMServer`](/docs/react-dom-server.html). React will attach event listeners while preserving as much of the existing DOM as possible. For best results, you should try to render the same content on the server as on the client, with as few differences as possible.
74
-
75
-* * *
76
-
77
-### `unmountComponentAtNode()`
78
-
79
-```javascript
80
-ReactDOM.unmountComponentAtNode(container)
81
-```
82
-
83
-Remove a mounted React component from the DOM and clean up its event handlers and state. If no component was mounted in the container, calling this function does nothing. Returns `true` if a component was unmounted and `false` if there was no component to unmount.
84
-
85
-* * *
86
-
87
-### `findDOMNode()`
88
-
89
-```javascript
90
-ReactDOM.findDOMNode(component)
91
-```
92
-If this component has been mounted into the DOM, this returns the corresponding native browser DOM element. This method is useful for reading values out of the DOM, such as form field values and performing DOM measurements. **In most cases, you can attach a ref to the DOM node and avoid using `findDOMNode` at all.** When `render` returns `null` or `false`, `findDOMNode` returns `null`.
93
-
94
-> Note:
95
->
96
-> `findDOMNode` is an escape hatch used to access the underlying DOM node. In most cases, use of this escape hatch is discouraged because it pierces the component abstraction.
97
->
98
-> `findDOMNode` only works on mounted components (that is, components that have been placed in the DOM). If you try to call this on a component that has not been mounted yet (like calling `findDOMNode()` in `render()` on a component that has yet to be created) an exception will be thrown.
99
->
100
-> `findDOMNode` cannot be used on functional components.
101
-
102
-* * *
103
-
104
-### `createPortal()`
105
-
106
-```javascript
107
-ReactDOM.createPortal(child, container)
108
-```
109
-
110
-Creates a portal. Portals provide a way to [render children into a DOM node that exists outside the hierarchy of the DOM component](/docs/portals.html).
docs/docs/reference-react.md
deleted
-191
@@ -1,191 +0,0 @@
1
----
2
-id: react-api
3
-title: React Top-Level API
4
-layout: docs
5
-category: Reference
6
-permalink: docs/react-api.html
7
-redirect_from:
8
- - "docs/reference.html"
9
- - "docs/clone-with-props.html"
10
- - "docs/top-level-api.html"
11
- - "docs/top-level-api-ja-JP.html"
12
- - "docs/top-level-api-ko-KR.html"
13
- - "docs/top-level-api-zh-CN.html"
14
- - "docs/glossary.html"
15
----
16
-
17
-`React` is the entry point to the React library. If you load React from a `<script>` tag, these top-level APIs are available on the `React` global. If you use ES6 with npm, you can write `import React from 'react'`. If you use ES5 with npm, you can write `var React = require('react')`.
18
-
19
-## Overview
20
-
21
-### Components
22
-
23
-React components let you split the UI into independent, reusable pieces, and think about each piece in isolation. React components can be defined by subclassing `React.Component` or `React.PureComponent`.
24
-
25
- - [`React.Component`](#reactcomponent)
26
- - [`React.PureComponent`](#reactpurecomponent)
27
-
28
-If you don't use ES6 classes, you may use the `create-react-class` module instead. See [Using React without ES6](/docs/react-without-es6.html) for more information.
29
-
30
-### Creating React Elements
31
-
32
-We recommend [using JSX](/docs/introducing-jsx.html) to describe what your UI should look like. Each JSX element is just syntactic sugar for calling [`React.createElement()`](#createelement). You will not typically invoke the following methods directly if you are using JSX.
33
-
34
-- [`createElement()`](#createelement)
35
-- [`createFactory()`](#createfactory)
36
-
37
-See [Using React without JSX](/docs/react-without-jsx.html) for more information.
38
-
39
-### Transforming Elements
40
-
41
-`React` also provides some other APIs:
42
-
43
-- [`cloneElement()`](#cloneelement)
44
-- [`isValidElement()`](#isvalidelement)
45
-- [`React.Children`](#reactchildren)
46
-
47
-* * *
48
-
49
-## Reference
50
-
51
-### `React.Component`
52
-
53
-`React.Component` is the base class for React components when they are defined using [ES6 classes](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes).
54
-
55
-```javascript
56
-class Greeting extends React.Component {
57
- render() {
58
- return <h1>Hello, {this.props.name}</h1>;
59
- }
60
-}
61
-```
62
-
63
-See the [React.Component API Reference](/docs/react-component.html) for a list of methods and properties related to the base `React.Component` class.
64
-
65
-* * *
66
-
67
-### `React.PureComponent`
68
-
69
-`React.PureComponent` is exactly like [`React.Component`](#reactcomponent) but implements [`shouldComponentUpdate()`](/docs/react-component.html#shouldcomponentupdate) with a shallow prop and state comparison.
70
-
71
-If your React component's `render()` function renders the same result given the same props and state, you can use `React.PureComponent` for a performance boost in some cases.
72
-
73
-> Note
74
->
75
-> `React.PureComponent`'s `shouldComponentUpdate()` only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences. Only extend `PureComponent` when you expect to have simple props and state, or use [`forceUpdate()`](/docs/react-component.html#forceupdate) when you know deep data structures have changed. Or, consider using [immutable objects](https://facebook.github.io/immutable-js/) to facilitate fast comparisons of nested data.
76
->
77
-> Furthermore, `React.PureComponent`'s `shouldComponentUpdate()` skips prop updates for the whole component subtree. Make sure all the children components are also "pure".
78
-
79
-* * *
80
-
81
-### `createElement()`
82
-
83
-```javascript
84
-React.createElement(
85
- type,
86
- [props],
87
- [...children]
88
-)
89
-```
90
-
91
-Create and return a new [React element](/docs/rendering-elements.html) of the given type. The type argument can be either a tag name string (such as `'div'` or `'span'`), or a [React component](/docs/components-and-props.html) type (a class or a function).
92
-
93
-Code written with [JSX](/docs/introducing-jsx.html) will be converted to use `React.createElement()`. You will not typically invoke `React.createElement()` directly if you are using JSX. See [React Without JSX](/docs/react-without-jsx.html) to learn more.
94
-
95
-* * *
96
-
97
-### `cloneElement()`
98
-
99
-```
100
-React.cloneElement(
101
- element,
102
- [props],
103
- [...children]
104
-)
105
-```
106
-
107
-Clone and return a new React element using `element` as the starting point. The resulting element will have the original element's props with the new props merged in shallowly. New children will replace existing children. `key` and `ref` from the original element will be preserved.
108
-
109
-`React.cloneElement()` is almost equivalent to:
110
-
111
-```js
112
-<element.type {...element.props} {...props}>{children}</element.type>
113
-```
114
-
115
-However, it also preserves `ref`s. This means that if you get a child with a `ref` on it, you won't accidentally steal it from your ancestor. You will get the same `ref` attached to your new element.
116
-
117
-This API was introduced as a replacement of the deprecated `React.addons.cloneWithProps()`.
118
-
119
-* * *
120
-
121
-### `createFactory()`
122
-
123
-```javascript
124
-React.createFactory(type)
125
-```
126
-
127
-Return a function that produces React elements of a given type. Like [`React.createElement()`](#createElement), the type argument can be either a tag name string (such as `'div'` or `'span'`), or a [React component](/docs/components-and-props.html) type (a class or a function).
128
-
129
-This helper is considered legacy, and we encourage you to either use JSX or use `React.createElement()` directly instead.
130
-
131
-You will not typically invoke `React.createFactory()` directly if you are using JSX. See [React Without JSX](/docs/react-without-jsx.html) to learn more.
132
-
133
-* * *
134
-
135
-### `isValidElement()`
136
-
137
-```javascript
138
-React.isValidElement(object)
139
-```
140
-
141
-Verifies the object is a React element. Returns `true` or `false`.
142
-
143
-* * *
144
-
145
-### `React.Children`
146
-
147
-`React.Children` provides utilities for dealing with the `this.props.children` opaque data structure.
148
-
149
-#### `React.Children.map`
150
-
151
-```javascript
152
-React.Children.map(children, function[(thisArg)])
153
-```
154
-
155
-Invokes a function on every immediate child contained within `children` with `this` set to `thisArg`. If `children` is a keyed fragment or array it will be traversed: the function will never be passed the container objects. If children is `null` or `undefined`, returns `null` or `undefined` rather than an array.
156
-
157
-#### `React.Children.forEach`
158
-
159
-```javascript
160
-React.Children.forEach(children, function[(thisArg)])
161
-```
162
-
163
-Like [`React.Children.map()`](#reactchildrenmap) but does not return an array.
164
-
165
-#### `React.Children.count`
166
-
167
-```javascript
168
-React.Children.count(children)
169
-```
170
-
171
-Returns the total number of components in `children`, equal to the number of times that a callback passed to `map` or `forEach` would be invoked.
172
-
173
-#### `React.Children.only`
174
-
175
-```javascript
176
-React.Children.only(children)
177
-```
178
-
179
-Returns the only child in `children`. Throws otherwise.
180
-
181
-#### `React.Children.toArray`
182
-
183
-```javascript
184
-React.Children.toArray(children)
185
-```
186
-
187
-Returns the `children` opaque data structure as a flat array with keys assigned to each child. Useful if you want to manipulate collections of children in your render methods, especially if you want to reorder or slice `this.props.children` before passing it down.
188
-
189
-> Note:
190
->
191
-> `React.Children.toArray()` changes keys to preserve the semantics of nested arrays when flattening lists of children. That is, `toArray` prefixes each key in the returned array so that each element's key is scoped to the input array containing it.
docs/docs/reference-test-renderer.md
deleted
-283
@@ -1,283 +0,0 @@
1
----
2
-id: test-renderer
3
-title: Test Renderer
4
-permalink: docs/test-renderer.html
5
-layout: docs
6
-category: Reference
7
----
8
-
9
-**Importing**
10
-
11
-```javascript
12
-import TestRenderer from 'react-test-renderer'; // ES6
13
-const TestRenderer = require('react-test-renderer'); // ES5 with npm
14
-```
15
-
16
-## Overview
17
-
18
-This package provides a React renderer that can be used to render React components to pure JavaScript objects, without depending on the DOM or a native mobile environment.
19
-
20
-Essentially, this package makes it easy to grab a snapshot of the platform view hierarchy (similar to a DOM tree) rendered by a React DOM or React Native component without using a browser or [jsdom](https://github.com/tmpvar/jsdom).
21
-
22
-Example:
23
-
24
-```javascript
25
-import TestRenderer from 'react-test-renderer';
26
-
27
-function Link(props) {
28
- return <a href={props.page}>{props.children}</a>;
29
-}
30
-
31
-const testRenderer = TestRenderer.create(
32
- <Link page="https://www.facebook.com/">Facebook</Link>
33
-);
34
-
35
-console.log(testRenderer.toJSON());
36
-// { type: 'a',
37
-// props: { href: 'https://www.facebook.com/' },
38
-// children: [ 'Facebook' ] }
39
-```
40
-
41
-You can use Jest's snapshot testing feature to automatically save a copy of the JSON tree to a file and check in your tests that it hasn't changed: [Learn more about it](http://facebook.github.io/jest/blog/2016/07/27/jest-14.html).
42
-
43
-You can also traverse the output to find specific nodes and make assertions about them.
44
-
45
-```javascript
46
-import TestRenderer from 'react-test-renderer';
47
-
48
-function MyComponent() {
49
- return (
50
- <div>
51
- <SubComponent foo="bar" />
52
- <p className="my">Hello</p>
53
- </div>
54
- )
55
-}
56
-
57
-function SubComponent() {
58
- return (
59
- <p className="sub">Sub</p>
60
- );
61
-}
62
-
63
-const testRenderer = TestRenderer.create(<MyComponent />);
64
-const testInstance = testRenderer.root;
65
-
66
-expect(testInstance.findByType(SubComponent).props.foo).toBe('bar');
67
-expect(testInstance.findByProps({className: "sub"}).children).toEqual(['Sub']);
68
-```
69
-
70
-### TestRenderer
71
-
72
-* [`TestRenderer.create()`](#testrenderercreate)
73
-
74
-### TestRenderer instance
75
-
76
-* [`testRenderer.toJSON()`](#testrenderertojson)
77
-* [`testRenderer.toTree()`](#testrenderertotree)
78
-* [`testRenderer.update()`](#testrendererupdate)
79
-* [`testRenderer.unmount()`](#testrendererunmount)
80
-* [`testRenderer.getInstance()`](#testrenderergetinstance)
81
-* [`testRenderer.root`](#testrendererroot)
82
-
83
-### TestInstance
84
-
85
-* [`testInstance.find()`](#testinstancefind)
86
-* [`testInstance.findByType()`](#testinstancefindbytype)
87
-* [`testInstance.findByProps()`](#testinstancefindbyprops)
88
-* [`testInstance.findAll()`](#testinstancefindall)
89
-* [`testInstance.findAllByType()`](#testinstancefindallbytype)
90
-* [`testInstance.findAllByProps()`](#testinstancefindallbyprops)
91
-* [`testInstance.instance`](#testinstanceinstance)
92
-* [`testInstance.type`](#testinstancetype)
93
-* [`testInstance.props`](#testinstanceprops)
94
-* [`testInstance.parent`](#testinstanceparent)
95
-* [`testInstance.children`](#testinstancechildren)
96
-
97
-## Reference
98
-
99
-### `TestRenderer.create()`
100
-
101
-```javascript
102
-TestRenderer.create(element, options);
103
-```
104
-
105
-Create a `TestRenderer` instance with the passed React element. It doesn't use the real DOM, but it still fully renders the component tree into memory so you can make assertions about it. The returned instance has the following methods and properties.
106
-
107
-### `testRenderer.toJSON()`
108
-
109
-```javascript
110
-testRenderer.toJSON()
111
-```
112
-
113
-Return an object representing the rendered tree. This tree only contains the platform-specific nodes like `<div>` or `<View>` and their props, but doesn't contain any user-written components. This is handy for [snapshot testing](http://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest).
114
-
115
-### `testRenderer.toTree()`
116
-
117
-```javascript
118
-testRenderer.toTree()
119
-```
120
-
121
-Return an object representing the rendered tree. Unlike `toJSON()`, the representation is more detailed than the one provided by `toJSON()`, and includes the user-written components. You probably don't need this method unless you're writing your own assertion library on top of the test rendererer.
122
-
123
-### `testRenderer.update()`
124
-
125
-```javascript
126
-testRenderer.update(element)
127
-```
128
-
129
-Re-render the in-memory tree with a new root element. This simulates a React update at the root. If the new element has the same type and key as the previous element, the tree will be updated; otherwise, it will re-mount a new tree.
130
-
131
-### `testRenderer.unmount()`
132
-
133
-```javascript
134
-testRenderer.unmount()
135
-```
136
-
137
-Unmount the in-memory tree, triggering the appropriate lifecycle events.
138
-
139
-### `testRenderer.getInstance()`
140
-
141
-```javascript
142
-testRenderer.getInstance()
143
-```
144
-
145
-Return the instance corresponding to the root element, if available. This will not work if the root element is a functional component because they don't have instances.
146
-
147
-### `testRenderer.root`
148
-
149
-```javascript
150
-testRenderer.root
151
-```
152
-
153
-Returns the root "test instance" object that is useful for making assertions about specific nodes in the tree. You can use it to find other "test instances" deeper below.
154
-
155
-### `testInstance.find()`
156
-
157
-```javascript
158
-testInstance.find(test)
159
-```
160
-
161
-Find the first descendant test instance for which `test(testInstance)` returns `true`.
162
-
163
-### `testInstance.findByType()`
164
-
165
-```javascript
166
-testInstance.findByType(type)
167
-```
168
-
169
-Find the first descendant test instance with the provided `type`.
170
-
171
-### `testInstance.findByProps()`
172
-
173
-```javascript
174
-testInstance.findByProps(props)
175
-```
176
-
177
-Find the first descendant test instance with the provided `props`.
178
-
179
-### `testInstance.findAll()`
180
-
181
-```javascript
182
-testInstance.findAll(test)
183
-```
184
-
185
-Find all descendant test instances for which `test(testInstance)` returns `true`.
186
-
187
-### `testInstance.findAllByType()`
188
-
189
-```javascript
190
-testInstance.findAllByType(type)
191
-```
192
-
193
-Find all descendant test instances with the provided `type`.
194
-
195
-### `testInstance.findAllByProps()`
196
-
197
-```javascript
198
-testInstance.findAllByProps(props)
199
-```
200
-
201
-Find all descendant test instances with the provided `props`.
202
-
203
-### `testInstance.instance`
204
-
205
-```javascript
206
-testInstance.instance
207
-```
208
-
209
-The component instance corresponding to this test instance. It is only available for class components, as functional components don't have instances. It matches the `this` value inside the given component.
210
-
211
-### `testInstance.type`
212
-
213
-```javascript
214
-testInstance.type
215
-```
216
-
217
-The component type corresponding to this test instance. For example, a `<Button />` component has a type of `Button`.
218
-
219
-### `testInstance.props`
220
-
221
-```javascript
222
-testInstance.props
223
-```
224
-
225
-The props corresponding to this test instance. For example, a `<Button size="small />` component has `{size: 'small'}` as props.
226
-
227
-### `testInstance.parent`
228
-
229
-```javascript
230
-testInstance.parent
231
-```
232
-
233
-The parent test instance of this test instance.
234
-
235
-### `testInstance.children`
236
-
237
-```javascript
238
-testInstance.children
239
-```
240
-
241
-The children test instances of this test instance.
242
-
243
-## Ideas
244
-
245
-You can pass `createNodeMock` function to `TestRenderer.create` as the option, which allows for custom mock refs.
246
-`createNodeMock` accepts the current element and should return a mock ref object.
247
-This is useful when you test a component rely on refs.
248
-
249
-```javascript
250
-import TestRenderer from 'react-test-renderer';
251
-
252
-class MyComponent extends React.Component {
253
- constructor(props) {
254
- super(props);
255
- this.input = null;
256
- }
257
- componentDidMount() {
258
- this.input.focus();
259
- }
260
- render() {
261
- return <input type="text" ref={el => this.input = el} />
262
- }
263
-}
264
-
265
-let focused = false;
266
-TestRenderer.create(
267
- <MyComponent />,
268
- {
269
- createNodeMock: (element) => {
270
- if (element.type === 'input') {
271
- // mock a focus function
272
- return {
273
- focus: () => {
274
- focused = true;
275
- }
276
- };
277
- }
278
- return null;
279
- }
280
- }
281
-);
282
-expect(focused).toBe(true);
283
-```
docs/docs/refs-and-the-dom.md
deleted
-225
@@ -1,225 +0,0 @@
1
----
2
-id: refs-and-the-dom
3
-title: Refs and the DOM
4
-redirect_from:
5
- - "docs/working-with-the-browser.html"
6
- - "docs/more-about-refs.html"
7
- - "docs/more-about-refs-ko-KR.html"
8
- - "docs/more-about-refs-zh-CN.html"
9
- - "tips/expose-component-functions.html"
10
- - "tips/children-undefined.html"
11
-permalink: docs/refs-and-the-dom.html
12
----
13
-
14
-In the typical React dataflow, [props](/docs/components-and-props.html) are the only way that parent components interact with their children. To modify a child, you re-render it with new props. However, there are a few cases where you need to imperatively modify a child outside of the typical dataflow. The child to be modified could be an instance of a React component, or it could be a DOM element. For both of these cases, React provides an escape hatch.
15
-
16
-### When to Use Refs
17
-
18
-There are a few good use cases for refs:
19
-
20
-* Managing focus, text selection, or media playback.
21
-* Triggering imperative animations.
22
-* Integrating with third-party DOM libraries.
23
-
24
-Avoid using refs for anything that can be done declaratively.
25
-
26
-For example, instead of exposing `open()` and `close()` methods on a `Dialog` component, pass an `isOpen` prop to it.
27
-
28
-### Don't Overuse Refs
29
-
30
-Your first inclination may be to use refs to "make things happen" in your app. If this is the case, take a moment and think more critically about where state should be owned in the component hierarchy. Often, it becomes clear that the proper place to "own" that state is at a higher level in the hierarchy. See the [Lifting State Up](/docs/lifting-state-up.html) guide for examples of this.
31
-
32
-### Adding a Ref to a DOM Element
33
-
34
-React supports a special attribute that you can attach to any component. The `ref` attribute takes a callback function, and the callback will be executed immediately after the component is mounted or unmounted.
35
-
36
-When the `ref` attribute is used on an HTML element, the `ref` callback receives the underlying DOM element as its argument. For example, this code uses the `ref` callback to store a reference to a DOM node:
37
-
38
-```javascript{8,9,19}
39
-class CustomTextInput extends React.Component {
40
- constructor(props) {
41
- super(props);
42
- this.focusTextInput = this.focusTextInput.bind(this);
43
- }
44
-
45
- focusTextInput() {
46
- // Explicitly focus the text input using the raw DOM API
47
- this.textInput.focus();
48
- }
49
-
50
- render() {
51
- // Use the `ref` callback to store a reference to the text input DOM
52
- // element in an instance field (for example, this.textInput).
53
- return (
54
- <div>
55
- <input
56
- type="text"
57
- ref={(input) => { this.textInput = input; }} />
58
- <input
59
- type="button"
60
- value="Focus the text input"
61
- onClick={this.focusTextInput}
62
- />
63
- </div>
64
- );
65
- }
66
-}
67
-```
68
-
69
-React will call the `ref` callback with the DOM element when the component mounts, and call it with `null` when it unmounts.
70
-
71
-Using the `ref` callback just to set a property on the class is a common pattern for accessing DOM elements. The preferred way is to set the property in the `ref` callback like in the above example. There is even a shorter way to write it: `ref={input => this.textInput = input}`.
72
-
73
-### Adding a Ref to a Class Component
74
-
75
-When the `ref` attribute is used on a custom component declared as a class, the `ref` callback receives the mounted instance of the component as its argument. For example, if we wanted to wrap the `CustomTextInput` above to simulate it being clicked immediately after mounting:
76
-
77
-```javascript{3,9}
78
-class AutoFocusTextInput extends React.Component {
79
- componentDidMount() {
80
- this.textInput.focusTextInput();
81
- }
82
-
83
- render() {
84
- return (
85
- <CustomTextInput
86
- ref={(input) => { this.textInput = input; }} />
87
- );
88
- }
89
-}
90
-```
91
-
92
-Note that this only works if `CustomTextInput` is declared as a class:
93
-
94
-```js{1}
95
-class CustomTextInput extends React.Component {
96
- // ...
97
-}
98
-```
99
-
100
-### Refs and Functional Components
101
-
102
-**You may not use the `ref` attribute on functional components** because they don't have instances:
103
-
104
-```javascript{1,7}
105
-function MyFunctionalComponent() {
106
- return <input />;
107
-}
108
-
109
-class Parent extends React.Component {
110
- render() {
111
- // This will *not* work!
112
- return (
113
- <MyFunctionalComponent
114
- ref={(input) => { this.textInput = input; }} />
115
- );
116
- }
117
-}
118
-```
119
-
120
-You should convert the component to a class if you need a ref to it, just like you do when you need lifecycle methods or state.
121
-
122
-You can, however, **use the `ref` attribute inside a functional component** as long as you refer to a DOM element or a class component:
123
-
124
-```javascript{2,3,6,13}
125
-function CustomTextInput(props) {
126
- // textInput must be declared here so the ref callback can refer to it
127
- let textInput = null;
128
-
129
- function handleClick() {
130
- textInput.focus();
131
- }
132
-
133
- return (
134
- <div>
135
- <input
136
- type="text"
137
- ref={(input) => { textInput = input; }} />
138
- <input
139
- type="button"
140
- value="Focus the text input"
141
- onClick={handleClick}
142
- />
143
- </div>
144
- );
145
-}
146
-```
147
-
148
-### Exposing DOM Refs to Parent Components
149
-
150
-In rare cases, you might want to have access to a child's DOM node from a parent component. This is generally not recommended because it breaks component encapsulation, but it can occasionally be useful for triggering focus or measuring the size or position of a child DOM node.
151
-
152
-While you could [add a ref to the child component](#adding-a-ref-to-a-class-component), this is not an ideal solution, as you would only get a component instance rather than a DOM node. Additionally, this wouldn't work with functional components.
153
-
154
-Instead, in such cases we recommend exposing a special prop on the child. The child would take a function prop with an arbitrary name (e.g. `inputRef`) and attach it to the DOM node as a `ref` attribute. This lets the parent pass its ref callback to the child's DOM node through the component in the middle.
155
-
156
-This works both for classes and for functional components.
157
-
158
-```javascript{4,13}
159
-function CustomTextInput(props) {
160
- return (
161
- <div>
162
- <input ref={props.inputRef} />
163
- </div>
164
- );
165
-}
166
-
167
-class Parent extends React.Component {
168
- render() {
169
- return (
170
- <CustomTextInput
171
- inputRef={el => this.inputElement = el}
172
- />
173
- );
174
- }
175
-}
176
-```
177
-
178
-In the example above, `Parent` passes its ref callback as an `inputRef` prop to the `CustomTextInput`, and the `CustomTextInput` passes the same function as a special `ref` attribute to the `<input>`. As a result, `this.inputElement` in `Parent` will be set to the DOM node corresponding to the `<input>` element in the `CustomTextInput`.
179
-
180
-Note that the name of the `inputRef` prop in the above example has no special meaning, as it is a regular component prop. However, using the `ref` attribute on the `<input>` itself is important, as it tells React to attach a ref to its DOM node.
181
-
182
-This works even though `CustomTextInput` is a functional component. Unlike the special `ref` attribute which can [only be specified for DOM elements and for class components](#refs-and-functional-components), there are no restrictions on regular component props like `inputRef`.
183
-
184
-Another benefit of this pattern is that it works several components deep. For example, imagine `Parent` didn't need that DOM node, but a component that rendered `Parent` (let's call it `Grandparent`) needed access to it. Then we could let the `Grandparent` specify the `inputRef` prop to the `Parent`, and let `Parent` "forward" it to the `CustomTextInput`:
185
-
186
-```javascript{4,12,22}
187
-function CustomTextInput(props) {
188
- return (
189
- <div>
190
- <input ref={props.inputRef} />
191
- </div>
192
- );
193
-}
194
-
195
-function Parent(props) {
196
- return (
197
- <div>
198
- My input: <CustomTextInput inputRef={props.inputRef} />
199
- </div>
200
- );
201
-}
202
-
203
-
204
-class Grandparent extends React.Component {
205
- render() {
206
- return (
207
- <Parent
208
- inputRef={el => this.inputElement = el}
209
- />
210
- );
211
- }
212
-}
213
-```
214
-
215
-Here, the ref callback is first specified by `Grandparent`. It is passed to the `Parent` as a regular prop called `inputRef`, and the `Parent` passes it to the `CustomTextInput` as a prop too. Finally, the `CustomTextInput` reads the `inputRef` prop and attaches the passed function as a `ref` attribute to the `<input>`. As a result, `this.inputElement` in `Grandparent` will be set to the DOM node corresponding to the `<input>` element in the `CustomTextInput`.
216
-
217
-All things considered, we advise against exposing DOM nodes whenever possible, but this can be a useful escape hatch. Note that this approach requires you to add some code to the child component. If you have absolutely no control over the child component implementation, your last option is to use [`findDOMNode()`](/docs/react-dom.html#finddomnode), but it is discouraged.
218
-
219
-### Legacy API: String Refs
220
-
221
-If you worked with React before, you might be familiar with an older API where the `ref` attribute is a string, like `"textInput"`, and the DOM node is accessed as `this.refs.textInput`. We advise against it because string refs have [some issues](https://github.com/facebook/react/pull/8333#issuecomment-271648615), are considered legacy, and **are likely to be removed in one of the future releases**. If you're currently using `this.refs.textInput` to access refs, we recommend the callback pattern instead.
222
-
223
-### Caveats
224
-
225
-If the `ref` callback is defined as an inline function, it will get called twice during updates, first with `null` and then again with the DOM element. This is because a new instance of the function is created with each render, so React needs to clear the old ref and set up the new one. You can avoid this by defining the `ref` callback as a bound method on the class, but note that it shouldn't matter in most cases.
docs/docs/rendering-elements.md
deleted
-95
@@ -1,95 +0,0 @@
1
----
2
-id: rendering-elements
3
-title: Rendering Elements
4
-permalink: docs/rendering-elements.html
5
-redirect_from: "docs/displaying-data.html"
6
-prev: introducing-jsx.html
7
-next: components-and-props.html
8
----
9
-
10
-Elements are the smallest building blocks of React apps.
11
-
12
-An element describes what you want to see on the screen:
13
-
14
-```js
15
-const element = <h1>Hello, world</h1>;
16
-```
17
-
18
-Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements.
19
-
20
->**Note:**
21
->
22
->One might confuse elements with a more widely known concept of "components". We will introduce components in the [next section](/docs/components-and-props.html). Elements are what components are "made of", and we encourage you to read this section before jumping ahead.
23
-
24
-## Rendering an Element into the DOM
25
-
26
-Let's say there is a `<div>` somewhere in your HTML file:
27
-
28
-```html
29
-<div id="root"></div>
30
-```
31
-
32
-We call this a "root" DOM node because everything inside it will be managed by React DOM.
33
-
34
-Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like.
35
-
36
-To render a React element into a root DOM node, pass both to `ReactDOM.render()`:
37
-
38
-```js
39
-const element = <h1>Hello, world</h1>;
40
-ReactDOM.render(
41
- element,
42
- document.getElementById('root')
43
-);
44
-```
45
-
46
-[Try it on CodePen.](http://codepen.io/gaearon/pen/rrpgNB?editors=1010)
47
-
48
-It displays "Hello, world" on the page.
49
-
50
-## Updating the Rendered Element
51
-
52
-React elements are [immutable](https://en.wikipedia.org/wiki/Immutable_object). Once you create an element, you can't change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time.
53
-
54
-With our knowledge so far, the only way to update the UI is to create a new element, and pass it to `ReactDOM.render()`.
55
-
56
-Consider this ticking clock example:
57
-
58
-```js{8-11}
59
-function tick() {
60
- const element = (
61
- <div>
62
- <h1>Hello, world!</h1>
63
- <h2>It is {new Date().toLocaleTimeString()}.</h2>
64
- </div>
65
- );
66
- ReactDOM.render(
67
- element,
68
- document.getElementById('root')
69
- );
70
-}
71
-
72
-setInterval(tick, 1000);
73
-```
74
-
75
-[Try it on CodePen.](http://codepen.io/gaearon/pen/gwoJZk?editors=0010)
76
-
77
-It calls `ReactDOM.render()` every second from a [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback.
78
-
79
->**Note:**
80
->
81
->In practice, most React apps only call `ReactDOM.render()` once. In the next sections we will learn how such code gets encapsulated into [stateful components](/docs/state-and-lifecycle.html).
82
->
83
->We recommend that you don't skip topics because they build on each other.
84
-
85
-## React Only Updates What's Necessary
86
-
87
-React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.
88
-
89
-You can verify by inspecting the [last example](http://codepen.io/gaearon/pen/gwoJZk?editors=0010) with the browser tools:
90
-
91
-
92
-
93
-Even though we create an element describing the whole UI tree on every tick, only the text node whose contents has changed gets updated by React DOM.
94
-
95
-In our experience, thinking about how the UI should look at any given moment rather than how to change it over time eliminates a whole class of bugs.
docs/docs/state-and-lifecycle.md
deleted
-472
@@ -1,472 +0,0 @@
1
----
2
-id: state-and-lifecycle
3
-title: State and Lifecycle
4
-permalink: docs/state-and-lifecycle.html
5
-redirect_from: "docs/interactivity-and-dynamic-uis.html"
6
-prev: components-and-props.html
7
-next: handling-events.html
8
----
9
-
10
-Consider the ticking clock example from [one of the previous sections](/docs/rendering-elements.html#updating-the-rendered-element).
11
-
12
-So far we have only learned one way to update the UI.
13
-
14
-We call `ReactDOM.render()` to change the rendered output:
15
-
16
-```js{8-11}
17
-function tick() {
18
- const element = (
19
- <div>
20
- <h1>Hello, world!</h1>
21
- <h2>It is {new Date().toLocaleTimeString()}.</h2>
22
- </div>
23
- );
24
- ReactDOM.render(
25
- element,
26
- document.getElementById('root')
27
- );
28
-}
29
-
30
-setInterval(tick, 1000);
31
-```
32
-
33
-[Try it on CodePen.](http://codepen.io/gaearon/pen/gwoJZk?editors=0010)
34
-
35
-In this section, we will learn how to make the `Clock` component truly reusable and encapsulated. It will set up its own timer and update itself every second.
36
-
37
-We can start by encapsulating how the clock looks:
38
-
39
-```js{3-6,12}
40
-function Clock(props) {
41
- return (
42
- <div>
43
- <h1>Hello, world!</h1>
44
- <h2>It is {props.date.toLocaleTimeString()}.</h2>
45
- </div>
46
- );
47
-}
48
-
49
-function tick() {
50
- ReactDOM.render(
51
- <Clock date={new Date()} />,
52
- document.getElementById('root')
53
- );
54
-}
55
-
56
-setInterval(tick, 1000);
57
-```
58
-
59
-[Try it on CodePen.](http://codepen.io/gaearon/pen/dpdoYR?editors=0010)
60
-
61
-However, it misses a crucial requirement: the fact that the `Clock` sets up a timer and updates the UI every second should be an implementation detail of the `Clock`.
62
-
63
-Ideally we want to write this once and have the `Clock` update itself:
64
-
65
-```js{2}
66
-ReactDOM.render(
67
- <Clock />,
68
- document.getElementById('root')
69
-);
70
-```
71
-
72
-To implement this, we need to add "state" to the `Clock` component.
73
-
74
-State is similar to props, but it is private and fully controlled by the component.
75
-
76
-We [mentioned before](/docs/components-and-props.html#functional-and-class-components) that components defined as classes have some additional features. Local state is exactly that: a feature available only to classes.
77
-
78
-## Converting a Function to a Class
79
-
80
-You can convert a functional component like `Clock` to a class in five steps:
81
-
82
-1. Create an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) with the same name that extends `React.Component`.
83
-
84
-2. Add a single empty method to it called `render()`.
85
-
86
-3. Move the body of the function into the `render()` method.
87
-
88
-4. Replace `props` with `this.props` in the `render()` body.
89
-
90
-5. Delete the remaining empty function declaration.
91
-
92
-```js
93
-class Clock extends React.Component {
94
- render() {
95
- return (
96
- <div>
97
- <h1>Hello, world!</h1>
98
- <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
99
- </div>
100
- );
101
- }
102
-}
103
-```
104
-
105
-[Try it on CodePen.](http://codepen.io/gaearon/pen/zKRGpo?editors=0010)
106
-
107
-`Clock` is now defined as a class rather than a function.
108
-
109
-This lets us use additional features such as local state and lifecycle hooks.
110
-
111
-## Adding Local State to a Class
112
-
113
-We will move the `date` from props to state in three steps:
114
-
115
-1) Replace `this.props.date` with `this.state.date` in the `render()` method:
116
-
117
-```js{6}
118
-class Clock extends React.Component {
119
- render() {
120
- return (
121
- <div>
122
- <h1>Hello, world!</h1>
123
- <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
124
- </div>
125
- );
126
- }
127
-}
128
-```
129
-
130
-2) Add a [class constructor](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes#Constructor) that assigns the initial `this.state`:
131
-
132
-```js{4}
133
-class Clock extends React.Component {
134
- constructor(props) {
135
- super(props);
136
- this.state = {date: new Date()};
137
- }
138
-
139
- render() {
140
- return (
141
- <div>
142
- <h1>Hello, world!</h1>
143
- <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
144
- </div>
145
- );
146
- }
147
-}
148
-```
149
-
150
-Note how we pass `props` to the base constructor:
151
-
152
-```js{2}
153
- constructor(props) {
154
- super(props);
155
- this.state = {date: new Date()};
156
- }
157
-```
158
-
159
-Class components should always call the base constructor with `props`.
160
-
161
-3) Remove the `date` prop from the `<Clock />` element:
162
-
163
-```js{2}
164
-ReactDOM.render(
165
- <Clock />,
166
- document.getElementById('root')
167
-);
168
-```
169
-
170
-We will later add the timer code back to the component itself.
171
-
172
-The result looks like this:
173
-
174
-```js{2-5,11,18}
175
-class Clock extends React.Component {
176
- constructor(props) {
177
- super(props);
178
- this.state = {date: new Date()};
179
- }
180
-
181
- render() {
182
- return (
183
- <div>
184
- <h1>Hello, world!</h1>
185
- <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
186
- </div>
187
- );
188
- }
189
-}
190
-
191
-ReactDOM.render(
192
- <Clock />,
193
- document.getElementById('root')
194
-);
195
-```
196
-
197
-[Try it on CodePen.](http://codepen.io/gaearon/pen/KgQpJd?editors=0010)
198
-
199
-Next, we'll make the `Clock` set up its own timer and update itself every second.
200
-
201
-## Adding Lifecycle Methods to a Class
202
-
203
-In applications with many components, it's very important to free up resources taken by the components when they are destroyed.
204
-
205
-We want to [set up a timer](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) whenever the `Clock` is rendered to the DOM for the first time. This is called "mounting" in React.
206
-
207
-We also want to [clear that timer](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval) whenever the DOM produced by the `Clock` is removed. This is called "unmounting" in React.
208
-
209
-We can declare special methods on the component class to run some code when a component mounts and unmounts:
210
-
211
-```js{7-9,11-13}
212
-class Clock extends React.Component {
213
- constructor(props) {
214
- super(props);
215
- this.state = {date: new Date()};
216
- }
217
-
218
- componentDidMount() {
219
-
220
- }
221
-
222
- componentWillUnmount() {
223
-
224
- }
225
-
226
- render() {
227
- return (
228
- <div>
229
- <h1>Hello, world!</h1>
230
- <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
231
- </div>
232
- );
233
- }
234
-}
235
-```
236
-
237
-These methods are called "lifecycle hooks".
238
-
239
-The `componentDidMount()` hook runs after the component output has been rendered to the DOM. This is a good place to set up a timer:
240
-
241
-```js{2-5}
242
- componentDidMount() {
243
- this.timerID = setInterval(
244
- () => this.tick(),
245
- 1000
246
- );
247
- }
248
-```
249
-
250
-Note how we save the timer ID right on `this`.
251
-
252
-While `this.props` is set up by React itself and `this.state` has a special meaning, you are free to add additional fields to the class manually if you need to store something that is not used for the visual output.
253
-
254
-If you don't use something in `render()`, it shouldn't be in the state.
255
-
256
-We will tear down the timer in the `componentWillUnmount()` lifecycle hook:
257
-
258
-```js{2}
259
- componentWillUnmount() {
260
- clearInterval(this.timerID);
261
- }
262
-```
263
-
264
-Finally, we will implement a method called `tick()` that the `Clock` component will run every second.
265
-
266
-It will use `this.setState()` to schedule updates to the component local state:
267
-
268
-```js{18-22}
269
-class Clock extends React.Component {
270
- constructor(props) {
271
- super(props);
272
- this.state = {date: new Date()};
273
- }
274
-
275
- componentDidMount() {
276
- this.timerID = setInterval(
277
- () => this.tick(),
278
- 1000
279
- );
280
- }
281
-
282
- componentWillUnmount() {
283
- clearInterval(this.timerID);
284
- }
285
-
286
- tick() {
287
- this.setState({
288
- date: new Date()
289
- });
290
- }
291
-
292
- render() {
293
- return (
294
- <div>
295
- <h1>Hello, world!</h1>
296
- <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
297
- </div>
298
- );
299
- }
300
-}
301
-
302
-ReactDOM.render(
303
- <Clock />,
304
- document.getElementById('root')
305
-);
306
-```
307
-
308
-[Try it on CodePen.](http://codepen.io/gaearon/pen/amqdNA?editors=0010)
309
-
310
-Now the clock ticks every second.
311
-
312
-Let's quickly recap what's going on and the order in which the methods are called:
313
-
314
-1) When `<Clock />` is passed to `ReactDOM.render()`, React calls the constructor of the `Clock` component. Since `Clock` needs to display the current time, it initializes `this.state` with an object including the current time. We will later update this state.
315
-
316
-2) React then calls the `Clock` component's `render()` method. This is how React learns what should be displayed on the screen. React then updates the DOM to match the `Clock`'s render output.
317
-
318
-3) When the `Clock` output is inserted in the DOM, React calls the `componentDidMount()` lifecycle hook. Inside it, the `Clock` component asks the browser to set up a timer to call the component's `tick()` method once a second.
319
-
320
-4) Every second the browser calls the `tick()` method. Inside it, the `Clock` component schedules a UI update by calling `setState()` with an object containing the current time. Thanks to the `setState()` call, React knows the state has changed, and calls `render()` method again to learn what should be on the screen. This time, `this.state.date` in the `render()` method will be different, and so the render output will include the updated time. React updates the DOM accordingly.
321
-
322
-5) If the `Clock` component is ever removed from the DOM, React calls the `componentWillUnmount()` lifecycle hook so the timer is stopped.
323
-
324
-## Using State Correctly
325
-
326
-There are three things you should know about `setState()`.
327
-
328
-### Do Not Modify State Directly
329
-
330
-For example, this will not re-render a component:
331
-
332
-```js
333
-// Wrong
334
-this.state.comment = 'Hello';
335
-```
336
-
337
-Instead, use `setState()`:
338
-
339
-```js
340
-// Correct
341
-this.setState({comment: 'Hello'});
342
-```
343
-
344
-The only place where you can assign `this.state` is the constructor.
345
-
346
-### State Updates May Be Asynchronous
347
-
348
-React may batch multiple `setState()` calls into a single update for performance.
349
-
350
-Because `this.props` and `this.state` may be updated asynchronously, you should not rely on their values for calculating the next state.
351
-
352
-For example, this code may fail to update the counter:
353
-
354
-```js
355
-// Wrong
356
-this.setState({
357
- counter: this.state.counter + this.props.increment,
358
-});
359
-```
360
-
361
-To fix it, use a second form of `setState()` that accepts a function rather than an object. That function will receive the previous state as the first argument, and the props at the time the update is applied as the second argument:
362
-
363
-```js
364
-// Correct
365
-this.setState((prevState, props) => ({
366
- counter: prevState.counter + props.increment
367
-}));
368
-```
369
-
370
-We used an [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) above, but it also works with regular functions:
371
-
372
-```js
373
-// Correct
374
-this.setState(function(prevState, props) {
375
- return {
376
- counter: prevState.counter + props.increment
377
- };
378
-});
379
-```
380
-
381
-### State Updates are Merged
382
-
383
-When you call `setState()`, React merges the object you provide into the current state.
384
-
385
-For example, your state may contain several independent variables:
386
-
387
-```js{4,5}
388
- constructor(props) {
389
- super(props);
390
- this.state = {
391
- posts: [],
392
- comments: []
393
- };
394
- }
395
-```
396
-
397
-Then you can update them independently with separate `setState()` calls:
398
-
399
-```js{4,10}
400
- componentDidMount() {
401
- fetchPosts().then(response => {
402
- this.setState({
403
- posts: response.posts
404
- });
405
- });
406
-
407
- fetchComments().then(response => {
408
- this.setState({
409
- comments: response.comments
410
- });
411
- });
412
- }
413
-```
414
-
415
-The merging is shallow, so `this.setState({comments})` leaves `this.state.posts` intact, but completely replaces `this.state.comments`.
416
-
417
-## The Data Flows Down
418
-
419
-Neither parent nor child components can know if a certain component is stateful or stateless, and they shouldn't care whether it is defined as a function or a class.
420
-
421
-This is why state is often called local or encapsulated. It is not accessible to any component other than the one that owns and sets it.
422
-
423
-A component may choose to pass its state down as props to its child components:
424
-
425
-```js
426
-<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
427
-```
428
-
429
-This also works for user-defined components:
430
-
431
-```js
432
-<FormattedDate date={this.state.date} />
433
-```
434
-
435
-The `FormattedDate` component would receive the `date` in its props and wouldn't know whether it came from the `Clock`'s state, from the `Clock`'s props, or was typed by hand:
436
-
437
-```js
438
-function FormattedDate(props) {
439
- return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
440
-}
441
-```
442
-
443
-[Try it on CodePen.](http://codepen.io/gaearon/pen/zKRqNB?editors=0010)
444
-
445
-This is commonly called a "top-down" or "unidirectional" data flow. Any state is always owned by some specific component, and any data or UI derived from that state can only affect components "below" them in the tree.
446
-
447
-If you imagine a component tree as a waterfall of props, each component's state is like an additional water source that joins it at an arbitrary point but also flows down.
448
-
449
-To show that all components are truly isolated, we can create an `App` component that renders three `<Clock>`s:
450
-
451
-```js{4-6}
452
-function App() {
453
- return (
454
- <div>
455
- <Clock />
456
- <Clock />
457
- <Clock />
458
- </div>
459
- );
460
-}
461
-
462
-ReactDOM.render(
463
- <App />,
464
- document.getElementById('root')
465
-);
466
-```
467
-
468
-[Try it on CodePen.](http://codepen.io/gaearon/pen/vXdGmd?editors=0010)
469
-
470
-Each `Clock` sets up its own timer and updates independently.
471
-
472
-In React apps, whether a component is stateful or stateless is considered an implementation detail of the component that may change over time. You can use stateless components inside stateful components, and vice versa.
docs/docs/thinking-in-react.md
deleted
-150
@@ -1,150 +0,0 @@
1
----
2
-id: thinking-in-react
3
-title: Thinking in React
4
-permalink: docs/thinking-in-react.html
5
-redirect_from:
6
- - 'blog/2013/11/05/thinking-in-react.html'
7
- - 'docs/thinking-in-react-zh-CN.html'
8
-prev: composition-vs-inheritance.html
9
----
10
-
11
-React is, in our opinion, the premier way to build big, fast Web apps with JavaScript. It has scaled very well for us at Facebook and Instagram.
12
-
13
-One of the many great parts of React is how it makes you think about apps as you build them. In this document, we'll walk you through the thought process of building a searchable product data table using React.
14
-
15
-## Start With A Mock
16
-
17
-Imagine that we already have a JSON API and a mock from our designer. The mock looks like this:
18
-
19
-
20
-
21
-Our JSON API returns some data that looks like this:
22
-
23
-```
24
-[
25
- {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
26
- {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
27
- {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
28
- {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
29
- {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
30
- {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
31
-];
32
-```
33
-
34
-## Step 1: Break The UI Into A Component Hierarchy
35
-
36
-The first thing you'll want to do is to draw boxes around every component (and subcomponent) in the mock and give them all names. If you're working with a designer, they may have already done this, so go talk to them! Their Photoshop layer names may end up being the names of your React components!
37
-
38
-But how do you know what should be its own component? Just use the same techniques for deciding if you should create a new function or object. One such technique is the [single responsibility principle](https://en.wikipedia.org/wiki/Single_responsibility_principle), that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents.
39
-
40
-Since you're often displaying a JSON data model to a user, you'll find that if your model was built correctly, your UI (and therefore your component structure) will map nicely. That's because UI and data models tend to adhere to the same *information architecture*, which means the work of separating your UI into components is often trivial. Just break it up into components that represent exactly one piece of your data model.
41
-
42
-
43
-
44
-You'll see here that we have five components in our simple app. We've italicized the data each component represents.
45
-
46
- 1. **`FilterableProductTable` (orange):** contains the entirety of the example
47
- 2. **`SearchBar` (blue):** receives all *user input*
48
- 3. **`ProductTable` (green):** displays and filters the *data collection* based on *user input*
49
- 4. **`ProductCategoryRow` (turquoise):** displays a heading for each *category*
50
- 5. **`ProductRow` (red):** displays a row for each *product*
51
-
52
-If you look at `ProductTable`, you'll see that the table header (containing the "Name" and "Price" labels) isn't its own component. This is a matter of preference, and there's an argument to be made either way. For this example, we left it as part of `ProductTable` because it is part of rendering the *data collection* which is `ProductTable`'s responsibility. However, if this header grows to be complex (i.e. if we were to add affordances for sorting), it would certainly make sense to make this its own `ProductTableHeader` component.
53
-
54
-Now that we've identified the components in our mock, let's arrange them into a hierarchy. This is easy. Components that appear within another component in the mock should appear as a child in the hierarchy:
55
-
56
- * `FilterableProductTable`
57
- * `SearchBar`
58
- * `ProductTable`
59
- * `ProductCategoryRow`
60
- * `ProductRow`
61
-
62
-## Step 2: Build A Static Version in React
63
-
64
-<p data-height="600" data-theme-id="0" data-slug-hash="BwWzwm" data-default-tab="js" data-user="lacker" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/gaearon/pen/BwWzwm">Thinking In React: Step 2</a> on <a href="http://codepen.io">CodePen</a>.</p>
65
-<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
66
-
67
-Now that you have your component hierarchy, it's time to implement your app. The easiest way is to build a version that takes your data model and renders the UI but has no interactivity. It's best to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing. We'll see why.
68
-
69
-To build a static version of your app that renders your data model, you'll want to build components that reuse other components and pass data using *props*. *props* are a way of passing data from parent to child. If you're familiar with the concept of *state*, **don't use state at all** to build this static version. State is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app, you don't need it.
70
-
71
-You can build top-down or bottom-up. That is, you can either start with building the components higher up in the hierarchy (i.e. starting with `FilterableProductTable`) or with the ones lower in it (`ProductRow`). In simpler examples, it's usually easier to go top-down, and on larger projects, it's easier to go bottom-up and write tests as you build.
72
-
73
-At the end of this step, you'll have a library of reusable components that render your data model. The components will only have `render()` methods since this is a static version of your app. The component at the top of the hierarchy (`FilterableProductTable`) will take your data model as a prop. If you make a change to your underlying data model and call `ReactDOM.render()` again, the UI will be updated. It's easy to see how your UI is updated and where to make changes since there's nothing complicated going on. React's **one-way data flow** (also called *one-way binding*) keeps everything modular and fast.
74
-
75
-Simply refer to the [React docs](/docs/) if you need help executing this step.
76
-
77
-### A Brief Interlude: Props vs State
78
-
79
-There are two types of "model" data in React: props and state. It's important to understand the distinction between the two; skim [the official React docs](/docs/interactivity-and-dynamic-uis.html) if you aren't sure what the difference is.
80
-
81
-## Step 3: Identify The Minimal (but complete) Representation Of UI State
82
-
83
-To make your UI interactive, you need to be able to trigger changes to your underlying data model. React makes this easy with **state**.
84
-
85
-To build your app correctly, you first need to think of the minimal set of mutable state that your app needs. The key here is DRY: *Don't Repeat Yourself*. Figure out the absolute minimal representation of the state your application needs and compute everything else you need on-demand. For example, if you're building a TODO list, just keep an array of the TODO items around; don't keep a separate state variable for the count. Instead, when you want to render the TODO count, simply take the length of the TODO items array.
86
-
87
-Think of all of the pieces of data in our example application. We have:
88
-
89
- * The original list of products
90
- * The search text the user has entered
91
- * The value of the checkbox
92
- * The filtered list of products
93
-
94
-Let's go through each one and figure out which one is state. Simply ask three questions about each piece of data:
95
-
96
- 1. Is it passed in from a parent via props? If so, it probably isn't state.
97
- 2. Does it remain unchanged over time? If so, it probably isn't state.
98
- 3. Can you compute it based on any other state or props in your component? If so, it isn't state.
99
-
100
-The original list of products is passed in as props, so that's not state. The search text and the checkbox seem to be state since they change over time and can't be computed from anything. And finally, the filtered list of products isn't state because it can be computed by combining the original list of products with the search text and value of the checkbox.
101
-
102
-So finally, our state is:
103
-
104
- * The search text the user has entered
105
- * The value of the checkbox
106
-
107
-## Step 4: Identify Where Your State Should Live
108
-
109
-<p data-height="600" data-theme-id="0" data-slug-hash="qPrNQZ" data-default-tab="js" data-user="lacker" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/gaearon/pen/qPrNQZ">Thinking In React: Step 4</a> on <a href="http://codepen.io">CodePen</a>.</p>
110
-<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
111
-
112
-OK, so we've identified what the minimal set of app state is. Next, we need to identify which component mutates, or *owns*, this state.
113
-
114
-Remember: React is all about one-way data flow down the component hierarchy. It may not be immediately clear which component should own what state. **This is often the most challenging part for newcomers to understand,** so follow these steps to figure it out:
115
-
116
-For each piece of state in your application:
117
-
118
- * Identify every component that renders something based on that state.
119
- * Find a common owner component (a single component above all the components that need the state in the hierarchy).
120
- * Either the common owner or another component higher up in the hierarchy should own the state.
121
- * If you can't find a component where it makes sense to own the state, create a new component simply for holding the state and add it somewhere in the hierarchy above the common owner component.
122
-
123
-Let's run through this strategy for our application:
124
-
125
- * `ProductTable` needs to filter the product list based on state and `SearchBar` needs to display the search text and checked state.
126
- * The common owner component is `FilterableProductTable`.
127
- * It conceptually makes sense for the filter text and checked value to live in `FilterableProductTable`
128
-
129
-Cool, so we've decided that our state lives in `FilterableProductTable`. First, add an instance property `this.state = {filterText: '', inStockOnly: false}` to `FilterableProductTable`'s `constructor` to reflect the initial state of your application. Then, pass `filterText` and `inStockOnly` to `ProductTable` and `SearchBar` as a prop. Finally, use these props to filter the rows in `ProductTable` and set the values of the form fields in `SearchBar`.
130
-
131
-You can start seeing how your application will behave: set `filterText` to `"ball"` and refresh your app. You'll see that the data table is updated correctly.
132
-
133
-## Step 5: Add Inverse Data Flow
134
-
135
-<p data-height="600" data-theme-id="0" data-slug-hash="LzWZvb" data-default-tab="js,result" data-user="rohan10" data-embed-version="2" data-pen-title="Thinking In React: Step 5" class="codepen">See the Pen <a href="https://codepen.io/gaearon/pen/LzWZvb">Thinking In React: Step 5</a> on <a href="http://codepen.io">CodePen</a>.</p>
136
-<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
137
-
138
-So far, we've built an app that renders correctly as a function of props and state flowing down the hierarchy. Now it's time to support data flowing the other way: the form components deep in the hierarchy need to update the state in `FilterableProductTable`.
139
-
140
-React makes this data flow explicit to make it easy to understand how your program works, but it does require a little more typing than traditional two-way data binding.
141
-
142
-If you try to type or check the box in the current version of the example, you'll see that React ignores your input. This is intentional, as we've set the `value` prop of the `input` to always be equal to the `state` passed in from `FilterableProductTable`.
143
-
144
-Let's think about what we want to happen. We want to make sure that whenever the user changes the form, we update the state to reflect the user input. Since components should only update their own state, `FilterableProductTable` will pass callbacks to `SearchBar` that will fire whenever the state should be updated. We can use the `onChange` event on the inputs to be notified of it. The callbacks passed by `FilterableProductTable` will call `setState()`, and the app will be updated.
145
-
146
-Though this sounds complex, it's really just a few lines of code. And it's really explicit how your data is flowing throughout the app.
147
-
148
-## And That's It
149
-
150
-Hopefully, this gives you an idea of how to think about building components and applications with React. While it may be a little more typing than you're used to, remember that code is read far more than it's written, and it's extremely easy to read this modular, explicit code. As you start to build large libraries of components, you'll appreciate this explicitness and modularity, and with code reuse, your lines of code will start to shrink. :)
docs/docs/typechecking-with-proptypes.md
deleted
-171
@@ -1,171 +0,0 @@
1
----
2
-id: typechecking-with-proptypes
3
-title: Typechecking With PropTypes
4
-permalink: docs/typechecking-with-proptypes.html
5
-redirect_from:
6
- - "docs/react-api.html#typechecking-with-proptypes"
7
----
8
-
9
-> Note:
10
->
11
-> `React.PropTypes` has moved into a different package since React v15.5. Please use [the `prop-types` library instead](https://www.npmjs.com/package/prop-types).
12
->
13
->We provide [a codemod script](/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes) to automate the conversion.
14
-
15
-As your app grows, you can catch a lot of bugs with typechecking. For some applications, you can use JavaScript extensions like [Flow](https://flowtype.org/) or [TypeScript](https://www.typescriptlang.org/) to typecheck your whole application. But even if you don't use those, React has some built-in typechecking abilities. To run typechecking on the props for a component, you can assign the special `propTypes` property:
16
-
17
-```javascript
18
-import PropTypes from 'prop-types';
19
-
20
-class Greeting extends React.Component {
21
- render() {
22
- return (
23
- <h1>Hello, {this.props.name}</h1>
24
- );
25
- }
26
-}
27
-
28
-Greeting.propTypes = {
29
- name: PropTypes.string
30
-};
31
-```
32
-
33
-`PropTypes` exports a range of validators that can be used to make sure the data you receive is valid. In this example, we're using `PropTypes.string`. When an invalid value is provided for a prop, a warning will be shown in the JavaScript console. For performance reasons, `propTypes` is only checked in development mode.
34
-
35
-### PropTypes
36
-
37
-Here is an example documenting the different validators provided:
38
-
39
-```javascript
40
-import PropTypes from 'prop-types';
41
-
42
-MyComponent.propTypes = {
43
- // You can declare that a prop is a specific JS primitive. By default, these
44
- // are all optional.
45
- optionalArray: PropTypes.array,
46
- optionalBool: PropTypes.bool,
47
- optionalFunc: PropTypes.func,
48
- optionalNumber: PropTypes.number,
49
- optionalObject: PropTypes.object,
50
- optionalString: PropTypes.string,
51
- optionalSymbol: PropTypes.symbol,
52
-
53
- // Anything that can be rendered: numbers, strings, elements or an array
54
- // (or fragment) containing these types.
55
- optionalNode: PropTypes.node,
56
-
57
- // A React element.
58
- optionalElement: PropTypes.element,
59
-
60
- // You can also declare that a prop is an instance of a class. This uses
61
- // JS's instanceof operator.
62
- optionalMessage: PropTypes.instanceOf(Message),
63
-
64
- // You can ensure that your prop is limited to specific values by treating
65
- // it as an enum.
66
- optionalEnum: PropTypes.oneOf(['News', 'Photos']),
67
-
68
- // An object that could be one of many types
69
- optionalUnion: PropTypes.oneOfType([
70
- PropTypes.string,
71
- PropTypes.number,
72
- PropTypes.instanceOf(Message)
73
- ]),
74
-
75
- // An array of a certain type
76
- optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
77
-
78
- // An object with property values of a certain type
79
- optionalObjectOf: PropTypes.objectOf(PropTypes.number),
80
-
81
- // An object taking on a particular shape
82
- optionalObjectWithShape: PropTypes.shape({
83
- color: PropTypes.string,
84
- fontSize: PropTypes.number
85
- }),
86
-
87
- // You can chain any of the above with `isRequired` to make sure a warning
88
- // is shown if the prop isn't provided.
89
- requiredFunc: PropTypes.func.isRequired,
90
-
91
- // A value of any data type
92
- requiredAny: PropTypes.any.isRequired,
93
-
94
- // You can also specify a custom validator. It should return an Error
95
- // object if the validation fails. Don't `console.warn` or throw, as this
96
- // won't work inside `oneOfType`.
97
- customProp: function(props, propName, componentName) {
98
- if (!/matchme/.test(props[propName])) {
99
- return new Error(
100
- 'Invalid prop `' + propName + '` supplied to' +
101
- ' `' + componentName + '`. Validation failed.'
102
- );
103
- }
104
- },
105
-
106
- // You can also supply a custom validator to `arrayOf` and `objectOf`.
107
- // It should return an Error object if the validation fails. The validator
108
- // will be called for each key in the array or object. The first two
109
- // arguments of the validator are the array or object itself, and the
110
- // current item's key.
111
- customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
112
- if (!/matchme/.test(propValue[key])) {
113
- return new Error(
114
- 'Invalid prop `' + propFullName + '` supplied to' +
115
- ' `' + componentName + '`. Validation failed.'
116
- );
117
- }
118
- })
119
-};
120
-```
121
-
122
-### Requiring Single Child
123
-
124
-With `PropTypes.element` you can specify that only a single child can be passed to a component as children.
125
-
126
-```javascript
127
-import PropTypes from 'prop-types';
128
-
129
-class MyComponent extends React.Component {
130
- render() {
131
- // This must be exactly one element or it will warn.
132
- const children = this.props.children;
133
- return (
134
- <div>
135
- {children}
136
- </div>
137
- );
138
- }
139
-}
140
-
141
-MyComponent.propTypes = {
142
- children: PropTypes.element.isRequired
143
-};
144
-```
145
-
146
-### Default Prop Values
147
-
148
-You can define default values for your `props` by assigning to the special `defaultProps` property:
149
-
150
-```javascript
151
-class Greeting extends React.Component {
152
- render() {
153
- return (
154
- <h1>Hello, {this.props.name}</h1>
155
- );
156
- }
157
-}
158
-
159
-// Specifies the default values for props:
160
-Greeting.defaultProps = {
161
- name: 'Stranger'
162
-};
163
-
164
-// Renders "Hello, Stranger":
165
-ReactDOM.render(
166
- <Greeting />,
167
- document.getElementById('example')
168
-);
169
-```
170
-
171
-The `defaultProps` will be used to ensure that `this.props.name` will have a value if it was not specified by the parent component. The `propTypes` typechecking happens after `defaultProps` are resolved, so typechecking will also apply to the `defaultProps`.
docs/docs/uncontrolled-components.md
deleted
-66
@@ -1,66 +0,0 @@
1
----
2
-id: uncontrolled-components
3
-title: Uncontrolled Components
4
-permalink: docs/uncontrolled-components.html
5
----
6
-
7
-In most cases, we recommend using [controlled components](/docs/forms.html) to implement forms. In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself.
8
-
9
-To write an uncontrolled component, instead of writing an event handler for every state update, you can [use a ref](/docs/refs-and-the-dom.html) to get form values from the DOM.
10
-
11
-For example, this code accepts a single name in an uncontrolled component:
12
-
13
-```javascript{8,17}
14
-class NameForm extends React.Component {
15
- constructor(props) {
16
- super(props);
17
- this.handleSubmit = this.handleSubmit.bind(this);
18
- }
19
-
20
- handleSubmit(event) {
21
- alert('A name was submitted: ' + this.input.value);
22
- event.preventDefault();
23
- }
24
-
25
- render() {
26
- return (
27
- <form onSubmit={this.handleSubmit}>
28
- <label>
29
- Name:
30
- <input type="text" ref={(input) => this.input = input} />
31
- </label>
32
- <input type="submit" value="Submit" />
33
- </form>
34
- );
35
- }
36
-}
37
-```
38
-
39
-[Try it on CodePen.](https://codepen.io/gaearon/pen/WooRWa?editors=0010)
40
-
41
-Since an uncontrolled component keeps the source of truth in the DOM, it is sometimes easier to integrate React and non-React code when using uncontrolled components. It can also be slightly less code if you want to be quick and dirty. Otherwise, you should usually use controlled components.
42
-
43
-If it's still not clear which type of component you should use for a particular situation, you might find [this article on controlled versus uncontrolled inputs](http://goshakkk.name/controlled-vs-uncontrolled-inputs-react/) to be helpful.
44
-
45
-### Default Values
46
-
47
-In the React rendering lifecycle, the `value` attribute on form elements will override the value in the DOM. With an uncontrolled component, you often want React to specify the initial value, but leave subsequent updates uncontrolled. To handle this case, you can specify a `defaultValue` attribute instead of `value`.
48
-
49
-```javascript{7}
50
-render() {
51
- return (
52
- <form onSubmit={this.handleSubmit}>
53
- <label>
54
- Name:
55
- <input
56
- defaultValue="Bob"
57
- type="text"
58
- ref={(input) => this.input = input} />
59
- </label>
60
- <input type="submit" value="Submit" />
61
- </form>
62
- );
63
-}
64
-```
65
-
66
-Likewise, `<input type="checkbox">` and `<input type="radio">` support `defaultChecked`, and `<select>` and `<textarea>` supports `defaultValue`.
docs/docs/web-components.md
deleted
-62
@@ -1,62 +0,0 @@
1
----
2
-id: web-components
3
-title: Web Components
4
-permalink: docs/web-components.html
5
-redirect_from: "docs/webcomponents.html"
6
----
7
-
8
-React and [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) are built to solve different problems. Web Components provide strong encapsulation for reusable components, while React provides a declarative library that keeps the DOM in sync with your data. The two goals are complementary. As a developer, you are free to use React in your Web Components, or to use Web Components in React, or both.
9
-
10
-Most people who use React don't use Web Components, but you may want to, especially if you are using third-party UI components that are written using Web Components.
11
-
12
-## Using Web Components in React
13
-
14
-```javascript
15
-class HelloMessage extends React.Component {
16
- render() {
17
- return <div>Hello <x-search>{this.props.name}</x-search>!</div>;
18
- }
19
-}
20
-```
21
-
22
-> Note:
23
->
24
-> Web Components often expose an imperative API. For instance, a `video` Web Component might expose `play()` and `pause()` functions. To access the imperative APIs of a Web Component, you will need to use a ref to interact with the DOM node directly. If you are using third-party Web Components, the best solution is to write a React component that behaves as a wrapper for your Web Component.
25
->
26
-> Events emitted by a Web Component may not properly propagate through a React render tree.
27
-> You will need to manually attach event handlers to handle these events within your React components.
28
-
29
-One common confusion is that Web Components use "class" instead of "className".
30
-
31
-```javascript
32
-function BrickFlipbox() {
33
- return (
34
- <brick-flipbox class="demo">
35
- <div>front</div>
36
- <div>back</div>
37
- </brick-flipbox>
38
- );
39
-}
40
-```
41
-
42
-## Using React in your Web Components
43
-
44
-Similarly, you can call `ReactDOM.render()` from inside a web component:
45
-
46
-```javascript
47
-class XSearch extends HTMLElement {
48
- connectedCallback() {
49
- const mountPoint = document.createElement('span');
50
- this.attachShadow({ mode: 'open' }).appendChild(mountPoint);
51
-
52
- const name = this.getAttribute('name');
53
- const url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
54
- ReactDOM.render(<a href={url}>{name}</a>, mountPoint);
55
- }
56
-}
57
-customElements.define('x-search', XSearch);
58
-```
59
-
60
->Note:
61
->
62
->This code will **not** work if compiled with Babel [due to an intentional limitation in the specification](https://github.com/w3c/webcomponents/issues/587). It will only work if you use the `class` syntax directly in the browser without compiling the code first.
docs/downloads/react-0.10.0-rc1.zip
Binary files a/docs/downloads/react-0.10.0-rc1.zip and /dev/null differ
docs/downloads/react-0.10.0.zip
Binary files a/docs/downloads/react-0.10.0.zip and /dev/null differ
docs/downloads/react-0.11.0-rc1.zip
Binary files a/docs/downloads/react-0.11.0-rc1.zip and /dev/null differ
docs/downloads/react-0.11.0.zip
Binary files a/docs/downloads/react-0.11.0.zip and /dev/null differ
docs/downloads/react-0.11.1.zip
Binary files a/docs/downloads/react-0.11.1.zip and /dev/null differ
docs/downloads/react-0.11.2.zip
Binary files a/docs/downloads/react-0.11.2.zip and /dev/null differ
docs/downloads/react-0.12.0-rc1.zip
Binary files a/docs/downloads/react-0.12.0-rc1.zip and /dev/null differ
docs/downloads/react-0.12.0.zip
Binary files a/docs/downloads/react-0.12.0.zip and /dev/null differ
docs/downloads/react-0.12.1.zip
Binary files a/docs/downloads/react-0.12.1.zip and /dev/null differ
docs/downloads/react-0.12.2.zip
Binary files a/docs/downloads/react-0.12.2.zip and /dev/null differ
docs/downloads/react-0.13.0-rc1.zip
Binary files a/docs/downloads/react-0.13.0-rc1.zip and /dev/null differ
docs/downloads/react-0.13.0-rc2.zip
Binary files a/docs/downloads/react-0.13.0-rc2.zip and /dev/null differ
docs/downloads/react-0.13.0.zip
Binary files a/docs/downloads/react-0.13.0.zip and /dev/null differ
docs/downloads/react-0.13.1.zip
Binary files a/docs/downloads/react-0.13.1.zip and /dev/null differ
docs/downloads/react-0.13.2.zip
Binary files a/docs/downloads/react-0.13.2.zip and /dev/null differ
docs/downloads/react-0.13.3.zip
Binary files a/docs/downloads/react-0.13.3.zip and /dev/null differ
docs/downloads/react-0.14.0.zip
Binary files a/docs/downloads/react-0.14.0.zip and /dev/null differ
docs/downloads/react-0.14.1.zip
Binary files a/docs/downloads/react-0.14.1.zip and /dev/null differ
docs/downloads/react-0.14.2.zip
Binary files a/docs/downloads/react-0.14.2.zip and /dev/null differ
docs/downloads/react-0.14.3.zip
Binary files a/docs/downloads/react-0.14.3.zip and /dev/null differ
docs/downloads/react-0.14.4.zip
Binary files a/docs/downloads/react-0.14.4.zip and /dev/null differ
docs/downloads/react-0.14.5.zip
Binary files a/docs/downloads/react-0.14.5.zip and /dev/null differ
docs/downloads/react-0.14.6.zip
Binary files a/docs/downloads/react-0.14.6.zip and /dev/null differ
docs/downloads/react-0.14.7.zip
Binary files a/docs/downloads/react-0.14.7.zip and /dev/null differ
docs/downloads/react-0.14.8.zip
Binary files a/docs/downloads/react-0.14.8.zip and /dev/null differ
docs/downloads/react-0.3.0.zip
Binary files a/docs/downloads/react-0.3.0.zip and /dev/null differ
docs/downloads/react-0.3.1.zip
Binary files a/docs/downloads/react-0.3.1.zip and /dev/null differ
docs/downloads/react-0.3.2.zip
Binary files a/docs/downloads/react-0.3.2.zip and /dev/null differ
docs/downloads/react-0.3.3.zip
Binary files a/docs/downloads/react-0.3.3.zip and /dev/null differ
docs/downloads/react-0.4.0.zip
Binary files a/docs/downloads/react-0.4.0.zip and /dev/null differ
docs/downloads/react-0.4.1.zip
Binary files a/docs/downloads/react-0.4.1.zip and /dev/null differ
docs/downloads/react-0.4.2.zip
Binary files a/docs/downloads/react-0.4.2.zip and /dev/null differ
docs/downloads/react-0.5.0.zip
Binary files a/docs/downloads/react-0.5.0.zip and /dev/null differ
docs/downloads/react-0.5.1.zip
Binary files a/docs/downloads/react-0.5.1.zip and /dev/null differ
docs/downloads/react-0.5.2.zip
Binary files a/docs/downloads/react-0.5.2.zip and /dev/null differ
docs/downloads/react-0.8.0.zip
Binary files a/docs/downloads/react-0.8.0.zip and /dev/null differ
docs/downloads/react-0.9.0-rc1.zip
Binary files a/docs/downloads/react-0.9.0-rc1.zip and /dev/null differ
docs/downloads/react-15.0.0-rc.1.zip
Binary files a/docs/downloads/react-15.0.0-rc.1.zip and /dev/null differ
docs/downloads/react-15.0.0-rc.2.zip
Binary files a/docs/downloads/react-15.0.0-rc.2.zip and /dev/null differ
docs/downloads/react-15.0.0.zip
Binary files a/docs/downloads/react-15.0.0.zip and /dev/null differ
docs/downloads/react-15.0.1.zip
Binary files a/docs/downloads/react-15.0.1.zip and /dev/null differ
docs/downloads/react-15.0.2.zip
Binary files a/docs/downloads/react-15.0.2.zip and /dev/null differ
docs/downloads/react-15.1.0.zip
Binary files a/docs/downloads/react-15.1.0.zip and /dev/null differ
docs/downloads/react-15.2.0.zip
Binary files a/docs/downloads/react-15.2.0.zip and /dev/null differ
docs/downloads/react-15.2.1.zip
Binary files a/docs/downloads/react-15.2.1.zip and /dev/null differ
docs/downloads/react-15.3.0.zip
Binary files a/docs/downloads/react-15.3.0.zip and /dev/null differ
docs/downloads/react-15.3.1.zip
Binary files a/docs/downloads/react-15.3.1.zip and /dev/null differ
docs/downloads/react-15.3.2.zip
Binary files a/docs/downloads/react-15.3.2.zip and /dev/null differ
docs/downloads/react-15.4.0-rc.3.zip
Binary files a/docs/downloads/react-15.4.0-rc.3.zip and /dev/null differ
docs/downloads/react-15.4.0.zip
Binary files a/docs/downloads/react-15.4.0.zip and /dev/null differ
docs/downloads/single-file-example.html
deleted
-21
@@ -1,21 +0,0 @@
1
-<!DOCTYPE html>
2
-<html>
3
- <head>
4
- <meta charset="UTF-8" />
5
- <title>Hello World</title>
6
- <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
7
- <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
8
- <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
9
- </head>
10
- <body>
11
- <div id="root"></div>
12
- <script type="text/babel">
13
-
14
- ReactDOM.render(
15
- <h1>Hello, world!</h1>,
16
- document.getElementById('root')
17
- );
18
-
19
- </script>
20
- </body>
21
-</html>
docs/favicon.ico
Binary files a/docs/favicon.ico and /dev/null differ
docs/feed.xml
deleted
-20
@@ -1,20 +0,0 @@
1
----
2
----
3
-<?xml version="1.0" encoding="UTF-8"?>
4
-<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
5
- <channel>
6
- <title>{{ site.name }}</title>
7
- <description>{{ site.description }}</description>
8
- <link>{{ site.url }}{{ site.baseurl }}</link>
9
- <atom:link href="{{ site.url }}{{ site.baseurl }}/feed.xml" rel="self" type="application/rss+xml" />
10
- {% for post in site.posts limit:10 %}
11
- <item>
12
- <title>{{ post.title | xml_escape }}</title>
13
- <description>{{ post.content | xml_escape }}</description>
14
- <pubDate>{{ post.date | date_to_xmlschema }}</pubDate>
15
- <link>{{ site.url }}{{ site.baseurl }}{{ post.url }}</link>
16
- <guid isPermaLink="true">{{ site.url }}{{ site.baseurl }}{{ post.url }}</guid>
17
- </item>
18
- {% endfor %}
19
- </channel>
20
-</rss>
docs/html-jsx.html
deleted
-5
@@ -1,5 +0,0 @@
1
----
2
-permalink: html-jsx.html
3
-layout: redirect
4
-dest_url: http://magic.reactjs.net/htmltojsx.htm
5
----
docs/img/blog/animal-sounds.jpg
Binary files a/docs/img/blog/animal-sounds.jpg and /dev/null differ
docs/img/blog/chatapp.png
Binary files a/docs/img/blog/chatapp.png and /dev/null differ
docs/img/blog/cra-better-output.png
Binary files a/docs/img/blog/cra-better-output.png and /dev/null differ
docs/img/blog/cra-dynamic-import.gif
Binary files a/docs/img/blog/cra-dynamic-import.gif and /dev/null differ
docs/img/blog/cra-jest-search.gif
Binary files a/docs/img/blog/cra-jest-search.gif and /dev/null differ
docs/img/blog/cra-pwa.png
Binary files a/docs/img/blog/cra-pwa.png and /dev/null differ
docs/img/blog/cra-runtime-error.gif
Binary files a/docs/img/blog/cra-runtime-error.gif and /dev/null differ
docs/img/blog/cra-update-exports.gif
Binary files a/docs/img/blog/cra-update-exports.gif and /dev/null differ
docs/img/blog/create-apps-with-no-configuration/compiled-successfully.png
Binary files a/docs/img/blog/create-apps-with-no-configuration/compiled-successfully.png and /dev/null differ
docs/img/blog/create-apps-with-no-configuration/compiled-with-warnings.png
Binary files a/docs/img/blog/create-apps-with-no-configuration/compiled-with-warnings.png and /dev/null differ
docs/img/blog/create-apps-with-no-configuration/created-folder.png
Binary files a/docs/img/blog/create-apps-with-no-configuration/created-folder.png and /dev/null differ
docs/img/blog/create-apps-with-no-configuration/failed-to-compile.png
Binary files a/docs/img/blog/create-apps-with-no-configuration/failed-to-compile.png and /dev/null differ
docs/img/blog/create-apps-with-no-configuration/npm-run-build.png
Binary files a/docs/img/blog/create-apps-with-no-configuration/npm-run-build.png and /dev/null differ
docs/img/blog/devtools-full.gif
Binary files a/docs/img/blog/devtools-full.gif and /dev/null differ
docs/img/blog/devtools-search.gif
Binary files a/docs/img/blog/devtools-search.gif and /dev/null differ
docs/img/blog/devtools-side-pane.gif
Binary files a/docs/img/blog/devtools-side-pane.gif and /dev/null differ
docs/img/blog/devtools-tree-view.png
Binary files a/docs/img/blog/devtools-tree-view.png and /dev/null differ
docs/img/blog/dog-tutorial.png
Binary files a/docs/img/blog/dog-tutorial.png and /dev/null differ
docs/img/blog/error-boundaries-stack-trace-line-numbers.png
Binary files a/docs/img/blog/error-boundaries-stack-trace-line-numbers.png and /dev/null differ
docs/img/blog/error-boundaries-stack-trace.png
Binary files a/docs/img/blog/error-boundaries-stack-trace.png and /dev/null differ
docs/img/blog/first-look.png
Binary files a/docs/img/blog/first-look.png and /dev/null differ
docs/img/blog/flux-chart.png
Binary files a/docs/img/blog/flux-chart.png and /dev/null differ
docs/img/blog/flux-diagram.png
Binary files a/docs/img/blog/flux-diagram.png and /dev/null differ
docs/img/blog/genesis_skeleton.png
Binary files a/docs/img/blog/genesis_skeleton.png and /dev/null differ
docs/img/blog/gpu-cursor-move.gif
Binary files a/docs/img/blog/gpu-cursor-move.gif and /dev/null differ
docs/img/blog/guess_filter.jpg
Binary files a/docs/img/blog/guess_filter.jpg and /dev/null differ
docs/img/blog/hacker-news-react-native.png
Binary files a/docs/img/blog/hacker-news-react-native.png and /dev/null differ
docs/img/blog/jsx-compiler.png
Binary files a/docs/img/blog/jsx-compiler.png and /dev/null differ
docs/img/blog/kendoui.png
Binary files a/docs/img/blog/kendoui.png and /dev/null differ
docs/img/blog/khan-academy-editor.png
Binary files a/docs/img/blog/khan-academy-editor.png and /dev/null differ
docs/img/blog/landoflisp.png
Binary files a/docs/img/blog/landoflisp.png and /dev/null differ
docs/img/blog/lights-out.png
Binary files a/docs/img/blog/lights-out.png and /dev/null differ
docs/img/blog/makona-editor.png
Binary files a/docs/img/blog/makona-editor.png and /dev/null differ
docs/img/blog/markdown_refactor.png
Binary files a/docs/img/blog/markdown_refactor.png and /dev/null differ
docs/img/blog/modus-create.gif
Binary files a/docs/img/blog/modus-create.gif and /dev/null differ
docs/img/blog/monkeys.gif
Binary files a/docs/img/blog/monkeys.gif and /dev/null differ
docs/img/blog/ngreact.png
Binary files a/docs/img/blog/ngreact.png and /dev/null differ
docs/img/blog/om-backbone.png
Binary files a/docs/img/blog/om-backbone.png and /dev/null differ
docs/img/blog/parse-react.jpg
Binary files a/docs/img/blog/parse-react.jpg and /dev/null differ
docs/img/blog/polarr.jpg
Binary files a/docs/img/blog/polarr.jpg and /dev/null differ
docs/img/blog/propeller-logo.png
Binary files a/docs/img/blog/propeller-logo.png and /dev/null differ
docs/img/blog/property-finder.png
Binary files a/docs/img/blog/property-finder.png and /dev/null differ
docs/img/blog/quiztime.png
Binary files a/docs/img/blog/quiztime.png and /dev/null differ
docs/img/blog/react-50k-mock-full.jpg
Binary files a/docs/img/blog/react-50k-mock-full.jpg and /dev/null differ
docs/img/blog/react-50k-mock.jpg
Binary files a/docs/img/blog/react-50k-mock.jpg and /dev/null differ
docs/img/blog/react-50k-tshirt.jpg
Binary files a/docs/img/blog/react-50k-tshirt.jpg and /dev/null differ
docs/img/blog/react-browserify-gulp.jpg
Binary files a/docs/img/blog/react-browserify-gulp.jpg and /dev/null differ
docs/img/blog/react-dev-tools.jpg
Binary files a/docs/img/blog/react-dev-tools.jpg and /dev/null differ
docs/img/blog/react-diff-tree.png
Binary files a/docs/img/blog/react-diff-tree.png and /dev/null differ
docs/img/blog/react-draggable.png
Binary files a/docs/img/blog/react-draggable.png and /dev/null differ
docs/img/blog/react-hackathon.jpg
Binary files a/docs/img/blog/react-hackathon.jpg and /dev/null differ
docs/img/blog/react-page.png
Binary files a/docs/img/blog/react-page.png and /dev/null differ
docs/img/blog/react-perf-chrome-timeline.png
Binary files a/docs/img/blog/react-perf-chrome-timeline.png and /dev/null differ
docs/img/blog/react-php.png
Binary files a/docs/img/blog/react-php.png and /dev/null differ
docs/img/blog/react-svg-fbp.png
Binary files a/docs/img/blog/react-svg-fbp.png and /dev/null differ
docs/img/blog/reactive-bookmarklet.png
Binary files a/docs/img/blog/reactive-bookmarklet.png and /dev/null differ
docs/img/blog/reflux-flux.png
Binary files a/docs/img/blog/reflux-flux.png and /dev/null differ
docs/img/blog/relay-components/relay-architecture.png
Binary files a/docs/img/blog/relay-components/relay-architecture.png and /dev/null differ
docs/img/blog/relay-components/relay-containers-data-flow.png
Binary files a/docs/img/blog/relay-components/relay-containers-data-flow.png and /dev/null differ
docs/img/blog/relay-components/relay-containers.png
Binary files a/docs/img/blog/relay-components/relay-containers.png and /dev/null differ
docs/img/blog/relay-components/sample-newsfeed.png
Binary files a/docs/img/blog/relay-components/sample-newsfeed.png and /dev/null differ
docs/img/blog/relay-visual-architecture-tour.png
Binary files a/docs/img/blog/relay-visual-architecture-tour.png and /dev/null differ
docs/img/blog/resistance-calculator.png
Binary files a/docs/img/blog/resistance-calculator.png and /dev/null differ
docs/img/blog/skills-matter.png
Binary files a/docs/img/blog/skills-matter.png and /dev/null differ
docs/img/blog/snake.png
Binary files a/docs/img/blog/snake.png and /dev/null differ
docs/img/blog/steve_reverse.gif
Binary files a/docs/img/blog/steve_reverse.gif and /dev/null differ
docs/img/blog/sweet-jsx.png
Binary files a/docs/img/blog/sweet-jsx.png and /dev/null differ
docs/img/blog/tcomb-react-native.png
Binary files a/docs/img/blog/tcomb-react-native.png and /dev/null differ
docs/img/blog/thinking-in-react-components.png
Binary files a/docs/img/blog/thinking-in-react-components.png and /dev/null differ
docs/img/blog/thinking-in-react-mock.png
Binary files a/docs/img/blog/thinking-in-react-mock.png and /dev/null differ
docs/img/blog/todomvc.png
Binary files a/docs/img/blog/todomvc.png and /dev/null differ
docs/img/blog/turboreact.png
Binary files a/docs/img/blog/turboreact.png and /dev/null differ
docs/img/blog/tutsplus.png
Binary files a/docs/img/blog/tutsplus.png and /dev/null differ
docs/img/blog/unite.png
Binary files a/docs/img/blog/unite.png and /dev/null differ
docs/img/blog/versioning-1.png
Binary files a/docs/img/blog/versioning-1.png and /dev/null differ
docs/img/blog/versioning-2.png
Binary files a/docs/img/blog/versioning-2.png and /dev/null differ
docs/img/blog/versioning-3.png
Binary files a/docs/img/blog/versioning-3.png and /dev/null differ
docs/img/blog/versioning-4.png
Binary files a/docs/img/blog/versioning-4.png and /dev/null differ
docs/img/blog/versioning-5.png
Binary files a/docs/img/blog/versioning-5.png and /dev/null differ
docs/img/blog/versioning-6.png
Binary files a/docs/img/blog/versioning-6.png and /dev/null differ
docs/img/blog/versioning-poll.png
Binary files a/docs/img/blog/versioning-poll.png and /dev/null differ
docs/img/blog/weather.png
Binary files a/docs/img/blog/weather.png and /dev/null differ
docs/img/blog/wolfenstein_react.png
Binary files a/docs/img/blog/wolfenstein_react.png and /dev/null differ
docs/img/blog/xoxo2013.png
Binary files a/docs/img/blog/xoxo2013.png and /dev/null differ
docs/img/blog/xreact.png
Binary files a/docs/img/blog/xreact.png and /dev/null differ
docs/img/docs/cdn-cors-header.png
Binary files a/docs/img/docs/cdn-cors-header.png and /dev/null differ
docs/img/docs/codewinds-004.png
Binary files a/docs/img/docs/codewinds-004.png and /dev/null differ
docs/img/docs/devtools-dev.png
Binary files a/docs/img/docs/devtools-dev.png and /dev/null differ
docs/img/docs/devtools-prod.png
Binary files a/docs/img/docs/devtools-prod.png and /dev/null differ
docs/img/docs/granular-dom-updates.gif
Binary files a/docs/img/docs/granular-dom-updates.gif and /dev/null differ
docs/img/docs/implementation-notes-tree.png
Binary files a/docs/img/docs/implementation-notes-tree.png and /dev/null differ
docs/img/docs/javascript-jabber.png
Binary files a/docs/img/docs/javascript-jabber.png and /dev/null differ
docs/img/docs/keyboard-focus.png
Binary files a/docs/img/docs/keyboard-focus.png and /dev/null differ
docs/img/docs/perf-dom.png
Binary files a/docs/img/docs/perf-dom.png and /dev/null differ
docs/img/docs/perf-exclusive.png
Binary files a/docs/img/docs/perf-exclusive.png and /dev/null differ
docs/img/docs/perf-inclusive.png
Binary files a/docs/img/docs/perf-inclusive.png and /dev/null differ
docs/img/docs/perf-wasted.png
Binary files a/docs/img/docs/perf-wasted.png and /dev/null differ
docs/img/docs/react-devtools-state.gif
Binary files a/docs/img/docs/react-devtools-state.gif and /dev/null differ
docs/img/docs/should-component-update.png
Binary files a/docs/img/docs/should-component-update.png and /dev/null differ
docs/img/docs/thinking-in-react-tagtree.png
Binary files a/docs/img/docs/thinking-in-react-tagtree.png and /dev/null differ
docs/img/external.png
Binary files a/docs/img/external.png and /dev/null differ
docs/img/external_2x.png
Binary files a/docs/img/external_2x.png and /dev/null differ
docs/img/logo.svg
deleted
-21
@@ -1,21 +0,0 @@
1
-<?xml version="1.0" encoding="utf-8"?>
2
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3
-<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
4
- width="600px" height="600px" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve">
5
-<rect fill="#222222" width="600" height="600"/>
6
-<circle fill="#00D8FF" cx="299.529" cy="299.628" r="50.167"/>
7
-<path fill="none" stroke="#00D8FF" stroke-width="24" stroke-miterlimit="10" d="M299.529,197.628
8
- c67.356,0,129.928,9.665,177.107,25.907c56.844,19.569,91.794,49.233,91.794,76.093c0,27.991-37.041,59.503-98.083,79.728
9
- c-46.151,15.291-106.879,23.272-170.818,23.272c-65.554,0-127.63-7.492-174.29-23.441c-59.046-20.182-94.611-52.103-94.611-79.559
10
- c0-26.642,33.37-56.076,89.415-75.616C167.398,207.503,231.515,197.628,299.529,197.628z"/>
11
-<path fill="none" stroke="#00D8FF" stroke-width="24" stroke-miterlimit="10" d="M210.736,248.922
12
- c33.649-58.348,73.281-107.724,110.92-140.48c45.35-39.466,88.507-54.923,111.775-41.505
13
- c24.248,13.983,33.042,61.814,20.067,124.796c-9.81,47.618-33.234,104.212-65.176,159.601
14
- c-32.749,56.788-70.25,106.819-107.377,139.272c-46.981,41.068-92.4,55.929-116.185,42.213
15
- c-23.079-13.31-31.906-56.921-20.834-115.233C153.281,368.316,176.758,307.841,210.736,248.922z"/>
16
-<path fill="none" stroke="#00D8FF" stroke-width="24" stroke-miterlimit="10" d="M210.821,351.482
17
- c-33.746-58.292-56.731-117.287-66.312-166.255c-11.544-58.999-3.382-104.109,19.864-117.566
18
- c24.224-14.024,70.055,2.244,118.14,44.94c36.356,32.28,73.688,80.837,105.723,136.173c32.844,56.733,57.461,114.209,67.036,162.582
19
- c12.117,61.213,2.309,107.984-21.453,121.74c-23.057,13.348-65.249-0.784-110.239-39.499
20
- C285.567,460.886,244.898,410.344,210.821,351.482z"/>
21
-</svg>
docs/img/logo_og.png
Binary files a/docs/img/logo_og.png and /dev/null differ
docs/img/logo_small.png
Binary files a/docs/img/logo_small.png and /dev/null differ
docs/img/logo_small_2x.png
Binary files a/docs/img/logo_small_2x.png and /dev/null differ
docs/img/logo_small_gray.png
Binary files a/docs/img/logo_small_gray.png and /dev/null differ
docs/img/logo_small_gray_2x.png
Binary files a/docs/img/logo_small_gray_2x.png and /dev/null differ
docs/img/noise.png
Binary files a/docs/img/noise.png and /dev/null differ
docs/img/oss_logo.png
Binary files a/docs/img/oss_logo.png and /dev/null differ
docs/img/search.png
Binary files a/docs/img/search.png and /dev/null differ
docs/img/tutorial/devtools.png
Binary files a/docs/img/tutorial/devtools.png and /dev/null differ
docs/img/tutorial/tictac-empty.png
Binary files a/docs/img/tutorial/tictac-empty.png and /dev/null differ
docs/img/tutorial/tictac-numbers.png
Binary files a/docs/img/tutorial/tictac-numbers.png and /dev/null differ
docs/index.md
deleted
-76
@@ -1,76 +0,0 @@
1
----
2
-layout: hero
3
-title: A JavaScript library for building user interfaces
4
-id: home
5
----
6
-
7
-<section class="light home-section">
8
- <div class="marketing-row">
9
- <div class="marketing-col">
10
- <h3>Declarative</h3>
11
- <p>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.</p>
12
- <p>Declarative views make your code more predictable and easier to debug.</p>
13
- </div>
14
- <div class="marketing-col">
15
- <h3>Component-Based</h3>
16
- <p>Build encapsulated components that manage their own state, then compose them to make complex UIs.</p>
17
- <p>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.</p>
18
- </div>
19
- <div class="marketing-col">
20
- <h3>Learn Once, Write Anywhere</h3>
21
- <p>We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.</p>
22
- <p>React can also render on the server using Node and power mobile apps using <a href="https://facebook.github.io/react-native/">React Native</a>.</p>
23
- </div>
24
- </div>
25
-</section>
26
-<hr class="home-divider" />
27
-<section class="home-section">
28
- <div id="examples">
29
- <div class="example">
30
- <h3>A Simple Component</h3>
31
- <p>
32
- React components implement a `render()` method that takes input data and
33
- returns what to display. This example uses an XML-like syntax called
34
- JSX. Input data that is passed into the component can be accessed by
35
- `render()` via `this.props`.
36
- </p>
37
- <p>
38
- <strong>JSX is optional and not required to use React.</strong>
39
- Try the
40
- <a href="http://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&code_lz=MYGwhgzhAEASCmIQHsCy8pgOb2vAHgC7wB2AJjAErxjCEB0AwsgLYAOyJph0A3gFABIAE6ky8YQAoAlHyEj4hAK7CS0ADxkAlgDcAfAiTI-hABZaI9NsORtLJMC3gBfdQHpt-gNxDn_P_zUtIQAIgDyqPSi5BKS6oYo6Jg40A5OALwARCHwOlokmdBuegA00CzISiSEAHLI4tJeQA&debug=false&circleciRepo=&evaluate=false&lineWrap=false&presets=react&prettier=true&targets=&version=6.26.0">Babel REPL</a>
41
- to see the raw JavaScript code produced by the JSX compilation step.
42
- </p>
43
- <div id="helloExample"></div>
44
- </div>
45
- <div class="example">
46
- <h3>A Stateful Component</h3>
47
- <p>
48
- In addition to taking input data (accessed via `this.props`), a
49
- component can maintain internal state data (accessed via `this.state`).
50
- When a component's state data changes, the rendered markup will be
51
- updated by re-invoking `render()`.
52
- </p>
53
- <div id="timerExample"></div>
54
- </div>
55
- <div class="example">
56
- <h3>An Application</h3>
57
- <p>
58
- Using `props` and `state`, we can put together a small Todo application.
59
- This example uses `state` to track the current list of items as well as
60
- the text that the user has entered. Although event handlers appear to be
61
- rendered inline, they will be collected and implemented using event
62
- delegation.
63
- </p>
64
- <div id="todoExample"></div>
65
- </div>
66
- <div class="example">
67
- <h3>A Component Using External Plugins</h3>
68
- <p>
69
- React is flexible and provides hooks that allow you to interface with
70
- other libraries and frameworks. This example uses <strong>remarkable</strong>, an
71
- external Markdown library, to convert the textarea's value in real time.
72
- </p>
73
- <div id="markdownExample"></div>
74
- </div>
75
- </div>
76
-</section>
docs/js/jsfiddle-integration-babel.js
deleted
-10
@@ -1,10 +0,0 @@
1
-(function() {
2
- var tag = document.querySelector(
3
- 'script[type="application/javascript;version=1.7"]'
4
- );
5
- if (!tag || tag.textContent.indexOf('window.onload=function(){') !== -1) {
6
- alert('Bad JSFiddle configuration, please fork the original React JSFiddle');
7
- }
8
- tag.setAttribute('type', 'text/babel');
9
- tag.textContent = tag.textContent.replace(/^\/\/<!\[CDATA\[/, '');
10
-})();
docs/jsx-compiler.md
deleted
-10
@@ -1,10 +0,0 @@
1
----
2
-layout: single
3
-title: JSX Compiler Service
4
-permalink: jsx-compiler.html
5
-id: jsx-compiler
6
----
7
-
8
-**_This tool has been removed as JSXTransformer has been deprecated._**
9
-
10
-We recommend using another tool such as [the Babel REPL](https://babeljs.io/repl/).
docs/tutorial/tutorial.md
deleted
-1099
@@ -1,1099 +0,0 @@
1
----
2
-id: tutorial
3
-title: "Tutorial: Intro To React"
4
-layout: tutorial
5
-sectionid: tutorial
6
-permalink: /tutorial/tutorial.html
7
-redirect_from:
8
- - "docs/tutorial.html"
9
- - "docs/why-react.html"
10
- - "docs/tutorial-ja-JP.html"
11
- - "docs/tutorial-ko-KR.html"
12
- - "docs/tutorial-zh-CN.html"
13
----
14
-
15
-## Before We Start
16
-
17
-### What We're Building
18
-
19
-Today, we're going to build an interactive tic-tac-toe game.
20
-
21
-If you like, you can check out the final result here: [Final Result](https://codepen.io/gaearon/pen/gWWZgR?editors=0010). Don't worry if the code doesn't make sense to you yet, or if it uses an unfamiliar syntax. We will be learning how to build this game step by step throughout this tutorial.
22
-
23
-Try playing the game. You can also click on a button in the move list to go "back in time" and see what the board looked like just after that move was made.
24
-
25
-Once you get a little familiar with the game, feel free to close that tab, as we'll start from a simpler template in the next sections.
26
-
27
-### Prerequisites
28
-
29
-We'll assume some familiarity with HTML and JavaScript but you should be able to follow along even if you haven't used them before.
30
-
31
-If you need a refresher on JavaScript, we recommend reading [this guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript). Note that we're also using some features from ES6, a recent version of JavaScript. In this tutorial, we're using [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), and [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) statements. You can use <a href="http://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact&experimental=false&loose=false&spec=false&code=const%20element%20%3D%20%3Ch1%3EHello%2C%20world!%3C%2Fh1%3E%3B%0Aconst%20container%20%3D%20document.getElementById('root')%3B%0AReactDOM.render(element%2C%20container)%3B%0A">Babel REPL</a> to check what ES6 code compiles to.
32
-
33
-### How to Follow Along
34
-
35
-There are two ways to complete this tutorial: you could either write the code right in the browser, or you could set up a local development environment on your machine. You can choose either option depending on what you feel comfortable with.
36
-
37
-#### If You Prefer to Write Code in the Browser
38
-
39
-This is the quickest way to get started!
40
-
41
-First, open this [starter code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010) in a new tab. It should display an empty tic-tac-toe field. We will be editing that code during this tutorial.
42
-
43
-You can now skip the next section about setting up a local development environment and head straight to the [overview](#overview).
44
-
45
-#### If You Prefer to Write Code in Your Editor
46
-
47
-Alternatively, you can set up a project on your computer.
48
-
49
-Note: **this is completely optional and not required for this tutorial!**
50
-
51
-This is more work, but lets you work from the comfort of your editor.
52
-
53
-If you want to do it, here are the steps to follow:
54
-
55
-1. Make sure you have a recent version of [Node.js](https://nodejs.org/en/) installed.
56
-2. Follow the [installation instructions](/docs/installation.html#creating-a-new-application) to create a new project.
57
-3. Delete all files in the `src/` folder of the new project.
58
-4. Add a file named `index.css` in the `src/` folder with [this CSS code](https://codepen.io/gaearon/pen/oWWQNa?editors=0100).
59
-5. Add a file named `index.js` in the `src/` folder with [this JS code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010).
60
-6. Add these three lines to the top of `index.js` in the `src/` folder:
61
-
62
- ```js
63
- import React from 'react';
64
- import ReactDOM from 'react-dom';
65
- import './index.css';
66
- ```
67
-
68
-Now if you run `npm start` in the project folder and open `http://localhost:3000` in the browser, you should see an empty tic-tac-toe field.
69
-
70
-We recommend following [these instructions](http://babeljs.io/docs/editors) to configure syntax highlighting for your editor.
71
-
72
-### Help, I'm Stuck!
73
-
74
-If you get stuck, check out the [community support resources](https://reactjs.org/community/support.html). In particular, [Reactiflux chat](/community/support.html#reactiflux-chat) is a great way to get quick help. If you don't get a good answer anywhere, please file an issue, and we'll help you out.
75
-
76
-With this out of the way, let's get started!
77
-
78
-## Overview
79
-
80
-### What is React?
81
-
82
-React is a declarative, efficient, and flexible JavaScript library for building user interfaces.
83
-
84
-React has a few different kinds of components, but we'll start with `React.Component` subclasses:
85
-
86
-```javascript
87
-class ShoppingList extends React.Component {
88
- render() {
89
- return (
90
- <div className="shopping-list">
91
- <h1>Shopping List for {this.props.name}</h1>
92
- <ul>
93
- <li>Instagram</li>
94
- <li>WhatsApp</li>
95
- <li>Oculus</li>
96
- </ul>
97
- </div>
98
- );
99
- }
100
-}
101
-
102
-// Example usage: <ShoppingList name="Mark" />
103
-```
104
-
105
-We'll get to the funny XML-like tags in a second. Your components tell React what you want to render – then React will efficiently update and render just the right components when your data changes.
106
-
107
-Here, ShoppingList is a **React component class**, or **React component type**. A component takes in parameters, called `props`, and returns a hierarchy of views to display via the `render` method.
108
-
109
-The `render` method returns a *description* of what you want to render, and then React takes that description and renders it to the screen. In particular, `render` returns a **React element**, which is a lightweight description of what to render. Most React developers use a special syntax called JSX which makes it easier to write these structures. The `<div />` syntax is transformed at build time to `React.createElement('div')`. The example above is equivalent to:
110
-
111
-```javascript
112
-return React.createElement('div', {className: 'shopping-list'},
113
- React.createElement('h1', /* ... h1 children ... */),
114
- React.createElement('ul', /* ... ul children ... */)
115
-);
116
-```
117
-
118
-[See full expanded version.](https://babeljs.io/repl/#?babili=false&evaluate=false&lineWrap=false&presets=react&targets=&browsers=&builtIns=false&debug=false&experimental=false&loose=false&spec=false&playground=true&code=%3Cdiv%20className%3D%22shopping-list%22%3E%0A%20%20%3Ch1%3EShopping%20List%20for%20%7Bprops.name%7D%3C%2Fh1%3E%0A%20%20%3Cul%3E%0A%20%20%20%20%3Cli%3EInstagram%3C%2Fli%3E%0A%20%20%20%20%3Cli%3EWhatsApp%3C%2Fli%3E%0A%20%20%20%20%3Cli%3EOculus%3C%2Fli%3E%0A%20%20%3C%2Ful%3E%0A%3C%2Fdiv%3E)
119
-
120
-If you're curious, `createElement()` is described in more detail in the [API reference](/docs/react-api.html#createelement), but we won't be using it directly in this tutorial. Instead, we will keep using JSX.
121
-
122
-You can put any JavaScript expression within braces inside JSX. Each React element is a real JavaScript object that you can store in a variable or pass around your program.
123
-
124
-The `ShoppingList` component only renders built-in DOM components, but you can compose custom React components just as easily, by writing `<ShoppingList />`. Each component is encapsulated so it can operate independently, which allows you to build complex UIs out of simple components.
125
-
126
-### Getting Started
127
-
128
-Start with this example: [Starter Code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010).
129
-
130
-It contains the shell of what we're building today. We've provided the styles so you only need to worry about the JavaScript.
131
-
132
-In particular, we have three components:
133
-
134
-* Square
135
-* Board
136
-* Game
137
-
138
-The Square component renders a single `<button>`, the Board renders 9 squares, and the Game component renders a board with some placeholders that we'll fill in later. None of the components are interactive at this point.
139
-
140
-### Passing Data Through Props
141
-
142
-Just to get our feet wet, let's try passing some data from the Board component to the Square component.
143
-
144
-In Board's `renderSquare` method, change the code to pass a `value` prop to the Square:
145
-
146
-```js{3}
147
-class Board extends React.Component {
148
- renderSquare(i) {
149
- return <Square value={i} />;
150
- }
151
-```
152
-
153
-Then change Square's `render` method to show that value by replacing `{/* TODO */}` with `{this.props.value}`:
154
-
155
-```js{5}
156
-class Square extends React.Component {
157
- render() {
158
- return (
159
- <button className="square">
160
- {this.props.value}
161
- </button>
162
- );
163
- }
164
-}
165
-```
166
-
167
-Before:
168
-
169
-
170
-
171
-After: You should see a number in each square in the rendered output.
172
-
173
-
174
-
175
-[View the current code.](https://codepen.io/gaearon/pen/aWWQOG?editors=0010)
176
-
177
-### An Interactive Component
178
-
179
-Let's make the Square component fill in an "X" when you click it. Try changing the button tag returned in the `render()` function of the Square like this:
180
-
181
-```javascript{4}
182
-class Square extends React.Component {
183
- render() {
184
- return (
185
- <button className="square" onClick={() => alert('click')}>
186
- {this.props.value}
187
- </button>
188
- );
189
- }
190
-}
191
-```
192
-
193
-If you click on a square now, you should get an alert in your browser.
194
-
195
-This uses the new JavaScript [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) syntax. Note that we're passing a function as the `onClick` prop. Doing `onClick={alert('click')}` would alert immediately instead of when the button is clicked.
196
-
197
-React components can have state by setting `this.state` in the constructor, which should be considered private to the component. Let's store the current value of the square in state, and change it when the square is clicked.
198
-
199
-First, add a constructor to the class to initialize the state:
200
-
201
-```javascript{2-7}
202
-class Square extends React.Component {
203
- constructor() {
204
- super();
205
- this.state = {
206
- value: null,
207
- };
208
- }
209
-
210
- render() {
211
- return (
212
- <button className="square" onClick={() => alert('click')}>
213
- {this.props.value}
214
- </button>
215
- );
216
- }
217
-}
218
-```
219
-
220
-In [JavaScript classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), you need to explicitly call `super();` when defining the constructor of a subclass.
221
-
222
-Now change the Square `render` method to display the value from the current state, and to toggle it on click:
223
-
224
-* Replace `this.props.value` with `this.state.value` inside the `<button>` tag.
225
-* Replace the `() => alert()` event handler with `() => this.setState({value: 'X'})`.
226
-
227
-Now the `<button>` tag looks like this:
228
-
229
-```javascript{10-12}
230
-class Square extends React.Component {
231
- constructor() {
232
- super();
233
- this.state = {
234
- value: null,
235
- };
236
- }
237
-
238
- render() {
239
- return (
240
- <button className="square" onClick={() => this.setState({value: 'X'})}>
241
- {this.state.value}
242
- </button>
243
- );
244
- }
245
-}
246
-```
247
-
248
-Whenever `this.setState` is called, an update to the component is scheduled, causing React to merge in the passed state update and rerender the component along with its descendants. When the component rerenders, `this.state.value` will be `'X'` so you'll see an X in the grid.
249
-
250
-If you click on any square, an X should show up in it.
251
-
252
-[View the current code.](https://codepen.io/gaearon/pen/VbbVLg?editors=0010)
253
-
254
-### Developer Tools
255
-
256
-The React Devtools extension for [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) and [Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) lets you inspect a React component tree in your browser devtools.
257
-
258
-<img src="../img/tutorial/devtools.png" alt="React Devtools" style="max-width: 100%">
259
-
260
-It lets you inspect the props and state of any of the components in your tree.
261
-
262
-After installing it, you can right-click any element on the page, click "Inspect" to open the developer tools, and the React tab will appear as the last tab to the right.
263
-
264
-**However, note there are a few extra steps to get it working with CodePen:**
265
-
266
-1. Log in or register and confirm your email (required to prevent spam).
267
-2. Click the "Fork" button.
268
-3. Click "Change View" and then choose "Debug mode".
269
-4. In the new tab that opens, the devtools should now have a React tab.
270
-
271
-## Lifting State Up
272
-
273
-We now have the basic building blocks for a tic-tac-toe game. But right now, the state is encapsulated in each Square component. To make a fully-working game, we now need to check if one player has won the game, and alternate placing X and O in the squares. To check if someone has won, we'll need to have the value of all 9 squares in one place, rather than split up across the Square components.
274
-
275
-You might think that Board should just inquire what the current state of each Square is. Although it is technically possible to do this in React, it is discouraged because it tends to make code difficult to understand, more brittle, and harder to refactor.
276
-
277
-Instead, the best solution here is to store this state in the Board component instead of in each Square – and the Board component can tell each Square what to display, like how we made each square display its index earlier.
278
-
279
-**When you want to aggregate data from multiple children or to have two child components communicate with each other, move the state upwards so that it lives in the parent component. The parent can then pass the state back down to the children via props, so that the child components are always in sync with each other and with the parent.**
280
-
281
-Pulling state upwards like this is common when refactoring React components, so let's take this opportunity to try it out. Add a constructor to the Board and set its initial state to contain an array with 9 nulls, corresponding to the 9 squares:
282
-
283
-```javascript{2-7}
284
-class Board extends React.Component {
285
- constructor() {
286
- super();
287
- this.state = {
288
- squares: Array(9).fill(null),
289
- };
290
- }
291
-
292
- renderSquare(i) {
293
- return <Square value={i} />;
294
- }
295
-
296
- render() {
297
- const status = 'Next player: X';
298
-
299
- return (
300
- <div>
301
- <div className="status">{status}</div>
302
- <div className="board-row">
303
- {this.renderSquare(0)}
304
- {this.renderSquare(1)}
305
- {this.renderSquare(2)}
306
- </div>
307
- <div className="board-row">
308
- {this.renderSquare(3)}
309
- {this.renderSquare(4)}
310
- {this.renderSquare(5)}
311
- </div>
312
- <div className="board-row">
313
- {this.renderSquare(6)}
314
- {this.renderSquare(7)}
315
- {this.renderSquare(8)}
316
- </div>
317
- </div>
318
- );
319
- }
320
-}
321
-```
322
-
323
-We'll fill it in later so that a board looks something like
324
-
325
-```javascript
326
-[
327
- 'O', null, 'X',
328
- 'X', 'X', 'O',
329
- 'O', null, null,
330
-]
331
-```
332
-
333
-Board's `renderSquare` method currently looks like this:
334
-
335
-```javascript
336
- renderSquare(i) {
337
- return <Square value={i} />;
338
- }
339
-```
340
-
341
-Modify it to pass a `value` prop to Square.
342
-
343
-```javascript{2}
344
- renderSquare(i) {
345
- return <Square value={this.state.squares[i]} />;
346
- }
347
-```
348
-
349
-[View the current code.](https://codepen.io/gaearon/pen/gWWQPY?editors=0010)
350
-
351
-Now we need to change what happens when a square is clicked. The Board component now stores which squares are filled, which means we need some way for Square to update the state of Board. Since component state is considered private, we can't update Board's state directly from Square.
352
-
353
-The usual pattern here is pass down a function from Board to Square that gets called when the square is clicked. Change `renderSquare` in Board again so that it reads:
354
-
355
-```javascript{5}
356
- renderSquare(i) {
357
- return (
358
- <Square
359
- value={this.state.squares[i]}
360
- onClick={() => this.handleClick(i)}
361
- />
362
- );
363
- }
364
-```
365
-
366
-We split the returned element into multiple lines for readability, and added parens around it so that JavaScript doesn't insert a semicolon after `return` and break our code.
367
-
368
-Now we're passing down two props from Board to Square: `value` and `onClick`. The latter is a function that Square can call. Let's make the following changes to Square:
369
-
370
-* Replace `this.state.value` with `this.props.value` in Square's `render`.
371
-* Replace `this.setState()` with `this.props.onClick()` in Square's `render`.
372
-* Delete `constructor` definition from Square because it doesn't have state anymore.
373
-
374
-After these changes, the whole Square component looks like this:
375
-
376
-```javascript{1,2,4,5}
377
-class Square extends React.Component {
378
- render() {
379
- return (
380
- <button className="square" onClick={() => this.props.onClick()}>
381
- {this.props.value}
382
- </button>
383
- );
384
- }
385
-}
386
-```
387
-
388
-Now when the square is clicked, it calls the `onClick` function that was passed by Board. Let's recap what happens here:
389
-
390
-1. The `onClick` prop on the built-in DOM `<button>` component tells React to set up a click event listener.
391
-2. When the button is clicked, React will call the `onClick` event handler defined in Square's `render()` method.
392
-3. This event handler calls `this.props.onClick()`. Square's props were specified by the Board.
393
-4. Board passed `onClick={() => this.handleClick(i)}` to Square, so, when called, it runs `this.handleClick(i)` on the Board.
394
-5. We have not defined the `handleClick()` method on the Board yet, so the code crashes.
395
-
396
-Note that DOM `<button>` element's `onClick` attribute has a special meaning to React, but we could have named Square's `onClick` prop or Board's `handleClick` method differently. It is, however, conventional in React apps to use `on*` names for the attributes and `handle*` for the handler methods.
397
-
398
-Try clicking a square – you should get an error because we haven't defined `handleClick` yet. Add it to the Board class.
399
-
400
-```javascript{9-13}
401
-class Board extends React.Component {
402
- constructor() {
403
- super();
404
- this.state = {
405
- squares: Array(9).fill(null),
406
- };
407
- }
408
-
409
- handleClick(i) {
410
- const squares = this.state.squares.slice();
411
- squares[i] = 'X';
412
- this.setState({squares: squares});
413
- }
414
-
415
- renderSquare(i) {
416
- return (
417
- <Square
418
- value={this.state.squares[i]}
419
- onClick={() => this.handleClick(i)}
420
- />
421
- );
422
- }
423
-
424
- render() {
425
- const status = 'Next player: X';
426
-
427
- return (
428
- <div>
429
- <div className="status">{status}</div>
430
- <div className="board-row">
431
- {this.renderSquare(0)}
432
- {this.renderSquare(1)}
433
- {this.renderSquare(2)}
434
- </div>
435
- <div className="board-row">
436
- {this.renderSquare(3)}
437
- {this.renderSquare(4)}
438
- {this.renderSquare(5)}
439
- </div>
440
- <div className="board-row">
441
- {this.renderSquare(6)}
442
- {this.renderSquare(7)}
443
- {this.renderSquare(8)}
444
- </div>
445
- </div>
446
- );
447
- }
448
-}
449
-```
450
-
451
-[View the current code.](https://codepen.io/gaearon/pen/ybbQJX?editors=0010)
452
-
453
-We call `.slice()` to copy the `squares` array instead of mutating the existing array. Jump ahead a [section](/tutorial/tutorial.html#why-immutability-is-important) to learn why immutability is important.
454
-
455
-Now you should be able to click in squares to fill them again, but the state is stored in the Board component instead of in each Square, which lets us continue building the game. Note how whenever Board's state changes, the Square components rerender automatically.
456
-
457
-Square no longer keeps its own state; it receives its value from its parent Board and informs its parent when it's clicked. We call components like this **controlled components**.
458
-
459
-### Why Immutability Is Important
460
-
461
-In the previous code example, we suggest using the `.slice()` operator to copy the `squares` array prior to making changes and to prevent mutating the existing array. Let's talk about what this means and why it is an important concept to learn.
462
-
463
-There are generally two ways for changing data. The first method is to *mutate* the data by directly changing the values of a variable. The second method is to replace the data with a new copy of the object that also includes desired changes.
464
-
465
-#### Data change with mutation
466
-```javascript
467
-var player = {score: 1, name: 'Jeff'};
468
-player.score = 2;
469
-// Now player is {score: 2, name: 'Jeff'}
470
-```
471
-
472
-#### Data change without mutation
473
-```javascript
474
-var player = {score: 1, name: 'Jeff'};
475
-
476
-var newPlayer = Object.assign({}, player, {score: 2});
477
-// Now player is unchanged, but newPlayer is {score: 2, name: 'Jeff'}
478
-
479
-// Or if you are using object spread syntax proposal, you can write:
480
-// var newPlayer = {...player, score: 2};
481
-```
482
-
483
-The end result is the same but by not mutating (or changing the underlying data) directly we now have an added benefit that can help us increase component and overall application performance.
484
-
485
-#### Easier Undo/Redo and Time Travel
486
-
487
-Immutability also makes some complex features much easier to implement. For example, further in this tutorial we will implement time travel between different stages of the game. Avoiding data mutations lets us keep a reference to older versions of the data, and switch between them if we need to.
488
-
489
-#### Tracking Changes
490
-
491
-Determining if a mutated object has changed is complex because changes are made directly to the object. This then requires comparing the current object to a previous copy, traversing the entire object tree, and comparing each variable and value. This process can become increasingly complex.
492
-
493
-Determining how an immutable object has changed is considerably easier. If the object being referenced is different from before, then the object has changed. That's it.
494
-
495
-#### Determining When to Re-render in React
496
-
497
-The biggest benefit of immutability in React comes when you build simple _pure components_. Since immutable data can more easily determine if changes have been made it also helps to determine when a component requires being re-rendered.
498
-
499
-To learn more about `shouldComponentUpdate()` and how you can build *pure components* take a look at [Optimizing Performance](/docs/optimizing-performance.html#examples).
500
-
501
-### Functional Components
502
-
503
-We've removed the constructor, and in fact, React supports a simpler syntax called **functional components** for component types like Square that only consist of a `render` method. Rather than define a class extending `React.Component`, simply write a function that takes props and returns what should be rendered.
504
-
505
-Replace the whole Square class with this function:
506
-
507
-```javascript
508
-function Square(props) {
509
- return (
510
- <button className="square" onClick={props.onClick}>
511
- {props.value}
512
- </button>
513
- );
514
-}
515
-```
516
-
517
-You'll need to change `this.props` to `props` both times it appears. Many components in your apps will be able to be written as functional components: these components tend to be easier to write and React will optimize them more in the future.
518
-
519
-While we're cleaning up the code, we also changed `onClick={() => props.onClick()}` to just `onClick={props.onClick}`, as passing the function down is enough for our example. Note that `onClick={props.onClick()}` would not work because it would call `props.onClick` immediately instead of passing it down.
520
-
521
-[View the current code.](https://codepen.io/gaearon/pen/QvvJOv?editors=0010)
522
-
523
-### Taking Turns
524
-
525
-An obvious defect in our game is that only X can play. Let's fix that.
526
-
527
-Let's default the first move to be by 'X'. Modify our starting state in our Board constructor.
528
-
529
-```javascript{6}
530
-class Board extends React.Component {
531
- constructor() {
532
- super();
533
- this.state = {
534
- squares: Array(9).fill(null),
535
- xIsNext: true,
536
- };
537
- }
538
-```
539
-
540
-Each time we move we shall toggle `xIsNext` by flipping the boolean value and saving the state. Now update Board's `handleClick` function to flip the value of `xIsNext`.
541
-
542
-```javascript{3,6}
543
- handleClick(i) {
544
- const squares = this.state.squares.slice();
545
- squares[i] = this.state.xIsNext ? 'X' : 'O';
546
- this.setState({
547
- squares: squares,
548
- xIsNext: !this.state.xIsNext,
549
- });
550
- }
551
-```
552
-
553
-Now X and O take turns. Next, change the "status" text in Board's `render` so that it also displays who is next.
554
-
555
-```javascript{2}
556
- render() {
557
- const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
558
-
559
- return (
560
- // the rest has not changed
561
-```
562
-
563
-After these changes you should have this Board component:
564
-
565
-```javascript{6,11-16,29}
566
-class Board extends React.Component {
567
- constructor() {
568
- super();
569
- this.state = {
570
- squares: Array(9).fill(null),
571
- xIsNext: true,
572
- };
573
- }
574
-
575
- handleClick(i) {
576
- const squares = this.state.squares.slice();
577
- squares[i] = this.state.xIsNext ? 'X' : 'O';
578
- this.setState({
579
- squares: squares,
580
- xIsNext: !this.state.xIsNext,
581
- });
582
- }
583
-
584
- renderSquare(i) {
585
- return (
586
- <Square
587
- value={this.state.squares[i]}
588
- onClick={() => this.handleClick(i)}
589
- />
590
- );
591
- }
592
-
593
- render() {
594
- const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
595
-
596
- return (
597
- <div>
598
- <div className="status">{status}</div>
599
- <div className="board-row">
600
- {this.renderSquare(0)}
601
- {this.renderSquare(1)}
602
- {this.renderSquare(2)}
603
- </div>
604
- <div className="board-row">
605
- {this.renderSquare(3)}
606
- {this.renderSquare(4)}
607
- {this.renderSquare(5)}
608
- </div>
609
- <div className="board-row">
610
- {this.renderSquare(6)}
611
- {this.renderSquare(7)}
612
- {this.renderSquare(8)}
613
- </div>
614
- </div>
615
- );
616
- }
617
-}
618
-```
619
-
620
-[View the current code.](https://codepen.io/gaearon/pen/KmmrBy?editors=0010)
621
-
622
-### Declaring a Winner
623
-
624
-Let's show when a game is won. Add this helper function to the end of the file:
625
-
626
-```javascript
627
-function calculateWinner(squares) {
628
- const lines = [
629
- [0, 1, 2],
630
- [3, 4, 5],
631
- [6, 7, 8],
632
- [0, 3, 6],
633
- [1, 4, 7],
634
- [2, 5, 8],
635
- [0, 4, 8],
636
- [2, 4, 6],
637
- ];
638
- for (let i = 0; i < lines.length; i++) {
639
- const [a, b, c] = lines[i];
640
- if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
641
- return squares[a];
642
- }
643
- }
644
- return null;
645
-}
646
-```
647
-
648
-You can call it in Board's `render` function to check if anyone has won the game and make the status text show "Winner: [X/O]" when someone wins.
649
-
650
-Replace the `status` declaration in Board's `render` with this code:
651
-
652
-```javascript{2-8}
653
- render() {
654
- const winner = calculateWinner(this.state.squares);
655
- let status;
656
- if (winner) {
657
- status = 'Winner: ' + winner;
658
- } else {
659
- status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
660
- }
661
-
662
- return (
663
- // the rest has not changed
664
-```
665
-
666
-You can now change `handleClick` in Board to return early and ignore the click if someone has already won the game or if a square is already filled:
667
-
668
-```javascript{3-5}
669
- handleClick(i) {
670
- const squares = this.state.squares.slice();
671
- if (calculateWinner(squares) || squares[i]) {
672
- return;
673
- }
674
- squares[i] = this.state.xIsNext ? 'X' : 'O';
675
- this.setState({
676
- squares: squares,
677
- xIsNext: !this.state.xIsNext,
678
- });
679
- }
680
-```
681
-
682
-Congratulations! You now have a working tic-tac-toe game. And now you know the basics of React. So *you're* probably the real winner here.
683
-
684
-[View the current code.](https://codepen.io/gaearon/pen/LyyXgK?editors=0010)
685
-
686
-## Storing a History
687
-
688
-Let's make it possible to revisit old states of the board so we can see what it looked like after any of the previous moves. We're already creating a new `squares` array each time a move is made, which means we can easily store the past board states simultaneously.
689
-
690
-Let's plan to store an object like this in state:
691
-
692
-```javascript
693
-history = [
694
- {
695
- squares: [
696
- null, null, null,
697
- null, null, null,
698
- null, null, null,
699
- ]
700
- },
701
- {
702
- squares: [
703
- null, null, null,
704
- null, 'X', null,
705
- null, null, null,
706
- ]
707
- },
708
- // ...
709
-]
710
-```
711
-
712
-We'll want the top-level Game component to be responsible for displaying the list of moves. So just as we pulled the state up before from Square into Board, let's now pull it up again from Board into Game – so that we have all the information we need at the top level.
713
-
714
-First, set up the initial state for Game by adding a constructor to it:
715
-
716
-```javascript{2-10}
717
-class Game extends React.Component {
718
- constructor() {
719
- super();
720
- this.state = {
721
- history: [{
722
- squares: Array(9).fill(null),
723
- }],
724
- xIsNext: true,
725
- };
726
- }
727
-
728
- render() {
729
- return (
730
- <div className="game">
731
- <div className="game-board">
732
- <Board />
733
- </div>
734
- <div className="game-info">
735
- <div>{/* status */}</div>
736
- <ol>{/* TODO */}</ol>
737
- </div>
738
- </div>
739
- );
740
- }
741
-}
742
-```
743
-
744
-Then change Board so that it takes `squares` via props and has its own `onClick` prop specified by Game, like the transformation we made for Square earlier. You can pass the location of each square into the click handler so that we still know which square was clicked. Here is a list of steps you need to do:
745
-
746
-* Delete the `constructor` in Board.
747
-* Replace `this.state.squares[i]` with `this.props.squares[i]` in Board's `renderSquare`.
748
-* Replace `this.handleClick(i)` with `this.props.onClick(i)` in Board's `renderSquare`.
749
-
750
-Now the whole Board component looks like this:
751
-
752
-```javascript{17,18}
753
-class Board extends React.Component {
754
- handleClick(i) {
755
- const squares = this.state.squares.slice();
756
- if (calculateWinner(squares) || squares[i]) {
757
- return;
758
- }
759
- squares[i] = this.state.xIsNext ? 'X' : 'O';
760
- this.setState({
761
- squares: squares,
762
- xIsNext: !this.state.xIsNext,
763
- });
764
- }
765
-
766
- renderSquare(i) {
767
- return (
768
- <Square
769
- value={this.props.squares[i]}
770
- onClick={() => this.props.onClick(i)}
771
- />
772
- );
773
- }
774
-
775
- render() {
776
- const winner = calculateWinner(this.state.squares);
777
- let status;
778
- if (winner) {
779
- status = 'Winner: ' + winner;
780
- } else {
781
- status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
782
- }
783
-
784
- return (
785
- <div>
786
- <div className="status">{status}</div>
787
- <div className="board-row">
788
- {this.renderSquare(0)}
789
- {this.renderSquare(1)}
790
- {this.renderSquare(2)}
791
- </div>
792
- <div className="board-row">
793
- {this.renderSquare(3)}
794
- {this.renderSquare(4)}
795
- {this.renderSquare(5)}
796
- </div>
797
- <div className="board-row">
798
- {this.renderSquare(6)}
799
- {this.renderSquare(7)}
800
- {this.renderSquare(8)}
801
- </div>
802
- </div>
803
- );
804
- }
805
-}
806
-```
807
-
808
-Game's `render` should look at the most recent history entry and can take over calculating the game status:
809
-
810
-```javascript{2-11,16-19,22}
811
- render() {
812
- const history = this.state.history;
813
- const current = history[history.length - 1];
814
- const winner = calculateWinner(current.squares);
815
-
816
- let status;
817
- if (winner) {
818
- status = 'Winner: ' + winner;
819
- } else {
820
- status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
821
- }
822
-
823
- return (
824
- <div className="game">
825
- <div className="game-board">
826
- <Board
827
- squares={current.squares}
828
- onClick={(i) => this.handleClick(i)}
829
- />
830
- </div>
831
- <div className="game-info">
832
- <div>{status}</div>
833
- <ol>{/* TODO */}</ol>
834
- </div>
835
- </div>
836
- );
837
- }
838
-```
839
-
840
-Since Game is now rendering the status, we can delete `<div className="status">{status}</div>` and the code calculating the status from the Board's `render` function:
841
-
842
-```js{1-4}
843
- render() {
844
- return (
845
- <div>
846
- <div className="board-row">
847
- {this.renderSquare(0)}
848
- {this.renderSquare(1)}
849
- {this.renderSquare(2)}
850
- </div>
851
- <div className="board-row">
852
- {this.renderSquare(3)}
853
- {this.renderSquare(4)}
854
- {this.renderSquare(5)}
855
- </div>
856
- <div className="board-row">
857
- {this.renderSquare(6)}
858
- {this.renderSquare(7)}
859
- {this.renderSquare(8)}
860
- </div>
861
- </div>
862
- );
863
- }
864
-```
865
-
866
-Next, we need to move the `handleClick` method implementation from Board to Game. You can cut it from the Board class, and paste it into the Game class.
867
-
868
-We also need to change it a little, since Game state is structured differently. Game's `handleClick` can push a new entry onto the stack by concatenating the new history entry to make a new history array.
869
-
870
-```javascript{2-4,10-12}
871
- handleClick(i) {
872
- const history = this.state.history;
873
- const current = history[history.length - 1];
874
- const squares = current.squares.slice();
875
- if (calculateWinner(squares) || squares[i]) {
876
- return;
877
- }
878
- squares[i] = this.state.xIsNext ? 'X' : 'O';
879
- this.setState({
880
- history: history.concat([{
881
- squares: squares,
882
- }]),
883
- xIsNext: !this.state.xIsNext,
884
- });
885
- }
886
-```
887
-
888
-At this point, Board only needs `renderSquare` and `render`; the state initialization and click handler should both live in Game.
889
-
890
-[View the current code.](https://codepen.io/gaearon/pen/EmmOqJ?editors=0010)
891
-
892
-### Showing the Moves
893
-
894
-Let's show the previous moves made in the game so far. We learned earlier that React elements are first-class JS objects and we can store them or pass them around. To render multiple items in React, we pass an array of React elements. The most common way to build that array is to map over your array of data. Let's do that in the `render` method of Game:
895
-
896
-```javascript{6-15,34}
897
- render() {
898
- const history = this.state.history;
899
- const current = history[history.length - 1];
900
- const winner = calculateWinner(current.squares);
901
-
902
- const moves = history.map((step, move) => {
903
- const desc = move ?
904
- 'Go to move #' + move :
905
- 'Go to game start';
906
- return (
907
- <li>
908
- <button onClick={() => this.jumpTo(move)}>{desc}</button>
909
- </li>
910
- );
911
- });
912
-
913
- let status;
914
- if (winner) {
915
- status = 'Winner: ' + winner;
916
- } else {
917
- status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
918
- }
919
-
920
- return (
921
- <div className="game">
922
- <div className="game-board">
923
- <Board
924
- squares={current.squares}
925
- onClick={(i) => this.handleClick(i)}
926
- />
927
- </div>
928
- <div className="game-info">
929
- <div>{status}</div>
930
- <ol>{moves}</ol>
931
- </div>
932
- </div>
933
- );
934
- }
935
-```
936
-
937
-[View the current code.](https://codepen.io/gaearon/pen/EmmGEa?editors=0010)
938
-
939
-For each step in the history, we create a list item `<li>` with a button `<button>` inside it that has a click handler which we'll implement shortly. With this code, you should see a list of the moves that have been made in the game, along with a warning that says:
940
-
941
-> Warning:
942
-> Each child in an array or iterator should have a unique "key" prop. Check the render method of "Game".
943
-
944
-Let's talk about what that warning means.
945
-
946
-### Keys
947
-
948
-When you render a list of items, React always stores some info about each item in the list. If you render a component that has state, that state needs to be stored – and regardless of how you implement your components, React stores a reference to the backing native views.
949
-
950
-When you update that list, React needs to determine what has changed. You could've added, removed, rearranged, or updated items in the list.
951
-
952
-Imagine transitioning from
953
-
954
-```html
955
-<li>Alexa: 7 tasks left</li>
956
-<li>Ben: 5 tasks left</li>
957
-```
958
-
959
-to
960
-
961
-```html
962
-<li>Ben: 9 tasks left</li>
963
-<li>Claudia: 8 tasks left</li>
964
-<li>Alexa: 5 tasks left</li>
965
-```
966
-
967
-To a human eye, it looks likely that Alexa and Ben swapped places and Claudia was added – but React is just a computer program and doesn't know what you intended it to do. As a result, React asks you to specify a *key* property on each element in a list, a string to differentiate each component from its siblings. In this case, `alexa`, `ben`, `claudia` might be sensible keys; if the items correspond to objects in a database, the database ID is usually a good choice:
968
-
969
-```html
970
-<li key={user.id}>{user.name}: {user.taskCount} tasks left</li>
971
-```
972
-
973
-`key` is a special property that's reserved by React (along with `ref`, a more advanced feature). When an element is created, React pulls off the `key` property and stores the key directly on the returned element. Even though it may look like it is part of props, it cannot be referenced with `this.props.key`. React uses the key automatically while deciding which children to update; there is no way for a component to inquire about its own key.
974
-
975
-When a list is rerendered, React takes each element in the new version and looks for one with a matching key in the previous list. When a key is added to the set, a component is created; when a key is removed, a component is destroyed. Keys tell React about the identity of each component, so that it can maintain the state across rerenders. If you change the key of a component, it will be completely destroyed and recreated with a new state.
976
-
977
-**It's strongly recommended that you assign proper keys whenever you build dynamic lists.** If you don't have an appropriate key handy, you may want to consider restructuring your data so that you do.
978
-
979
-If you don't specify any key, React will warn you and fall back to using the array index as a key – which is not the correct choice if you ever reorder elements in the list or add/remove items anywhere but the bottom of the list. Explicitly passing `key={i}` silences the warning but has the same problem so isn't recommended in most cases.
980
-
981
-Component keys don't need to be globally unique, only unique relative to the immediate siblings.
982
-
983
-
984
-### Implementing Time Travel
985
-
986
-For our move list, we already have a unique ID for each step: the number of the move when it happened. In the Game's `render` method, add the key as `<li key={move}>` and the key warning should disappear:
987
-
988
-```js{6}
989
- const moves = history.map((step, move) => {
990
- const desc = move ?
991
- 'Go to move #' + move :
992
- 'Go to game start';
993
- return (
994
- <li key={move}>
995
- <button onClick={() => this.jumpTo(move)}>{desc}</button>
996
- </li>
997
- );
998
- });
999
-```
1000
-
1001
-[View the current code.](https://codepen.io/gaearon/pen/PmmXRE?editors=0010)
1002
-
1003
-Clicking any of the move buttons throws an error because `jumpTo` is undefined. Let's add a new key to Game's state to indicate which step we're currently viewing.
1004
-
1005
-First, add `stepNumber: 0` to the initial state in Game's `constructor`:
1006
-
1007
-```js{8}
1008
-class Game extends React.Component {
1009
- constructor() {
1010
- super();
1011
- this.state = {
1012
- history: [{
1013
- squares: Array(9).fill(null),
1014
- }],
1015
- stepNumber: 0,
1016
- xIsNext: true,
1017
- };
1018
- }
1019
-```
1020
-
1021
-Next, we'll define the `jumpTo` method in Game to update that state. We also want to update `xIsNext`. We set `xIsNext` to true if the index of the move number is an even number.
1022
-
1023
-Add a method called `jumpTo` to the Game class:
1024
-
1025
-```javascript{5-10}
1026
- handleClick(i) {
1027
- // this method has not changed
1028
- }
1029
-
1030
- jumpTo(step) {
1031
- this.setState({
1032
- stepNumber: step,
1033
- xIsNext: (step % 2) === 0,
1034
- });
1035
- }
1036
-
1037
- render() {
1038
- // this method has not changed
1039
- }
1040
-```
1041
-
1042
-Then update `stepNumber` when a new move is made by adding `stepNumber: history.length` to the state update in Game's `handleClick`. We'll also update `handleClick` to be aware of `stepNumber` when reading the current board state so that you can go back in time then click in the board to create a new entry.:
1043
-
1044
-```javascript{2,13}
1045
- handleClick(i) {
1046
- const history = this.state.history.slice(0, this.state.stepNumber + 1);
1047
- const current = history[history.length - 1];
1048
- const squares = current.squares.slice();
1049
- if (calculateWinner(squares) || squares[i]) {
1050
- return;
1051
- }
1052
- squares[i] = this.state.xIsNext ? 'X' : 'O';
1053
- this.setState({
1054
- history: history.concat([{
1055
- squares: squares
1056
- }]),
1057
- stepNumber: history.length,
1058
- xIsNext: !this.state.xIsNext,
1059
- });
1060
- }
1061
-```
1062
-
1063
-Now you can modify Game's `render` to read from that step in the history:
1064
-
1065
-```javascript{3}
1066
- render() {
1067
- const history = this.state.history;
1068
- const current = history[this.state.stepNumber];
1069
- const winner = calculateWinner(current.squares);
1070
-
1071
- // the rest has not changed
1072
-```
1073
-
1074
-[View the current code.](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)
1075
-
1076
-If you click any move button now, the board should immediately update to show what the game looked like at that time.
1077
-
1078
-### Wrapping Up
1079
-
1080
-Now, you've made a tic-tac-toe game that:
1081
-
1082
-* lets you play tic-tac-toe,
1083
-* indicates when one player has won the game,
1084
-* stores the history of moves during the game,
1085
-* allows players to jump back in time to see older versions of the game board.
1086
-
1087
-Nice work! We hope you now feel like you have a decent grasp on how React works.
1088
-
1089
-Check out the final result here: [Final Result](https://codepen.io/gaearon/pen/gWWZgR?editors=0010).
1090
-
1091
-If you have extra time or want to practice your new skills, here are some ideas for improvements you could make, listed in order of increasing difficulty:
1092
-
1093
-1. Display the move locations in the format "(1, 3)" instead of "6".
1094
-2. Bold the currently-selected item in the move list.
1095
-3. Rewrite Board to use two loops to make the squares instead of hardcoding them.
1096
-4. Add a toggle button that lets you sort the moves in either ascending or descending order.
1097
-5. When someone wins, highlight the three squares that caused the win.
1098
-
1099
-Throughout this tutorial, we have touched on a number of React concepts including elements, components, props, and state. For a more in-depth explanation for each of these topics, check out [the rest of the documentation](/docs/hello-world.html). To learn more about defining components, check out the [`React.Component` API reference](/docs/react-component.html).
docs/warnings/dont-call-proptypes.md
deleted
-100
@@ -1,100 +0,0 @@
1
----
2
-title: Don't Call PropTypes Warning
3
-layout: single
4
-permalink: warnings/dont-call-proptypes.html
5
----
6
-
7
-> Note:
8
->
9
-> `React.PropTypes` has moved into a different package since React v15.5. Please use [the `prop-types` library instead](https://www.npmjs.com/package/prop-types).
10
->
11
->We provide [a codemod script](/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes) to automate the conversion.
12
-
13
-In a future major release of React, the code that implements PropType validation functions will be stripped in production. Once this happens, any code that calls these functions manually (that isn't stripped in production) will throw an error.
14
-
15
-### Declaring PropTypes is still fine
16
-
17
-The normal usage of PropTypes is still supported:
18
-
19
-```javascript
20
-Button.propTypes = {
21
- highlighted: PropTypes.bool
22
-};
23
-```
24
-
25
-Nothing changes here.
26
-
27
-### Don’t call PropTypes directly
28
-
29
-Using PropTypes in any other way than annotating React components with them is no longer supported:
30
-
31
-```javascript
32
-var apiShape = PropTypes.shape({
33
- body: PropTypes.object,
34
- statusCode: PropTypes.number.isRequired
35
-}).isRequired;
36
-
37
-// Not supported!
38
-var error = apiShape(json, 'response');
39
-```
40
-
41
-If you depend on using PropTypes like this, we encourage you to use or create a fork of PropTypes (such as [these](https://github.com/aackerman/PropTypes) [two](https://github.com/developit/proptypes) packages).
42
-
43
-If you don't fix the warning, this code will crash in production with React 16.
44
-
45
-### If you don't call PropTypes directly but still get the warning
46
-
47
-Inspect the stack trace produced by the warning. You will find the component definition responsible for the PropTypes direct call. Most likely, the issue is due to third-party PropTypes that wrap React’s PropTypes, for example:
48
-
49
-```js
50
-Button.propTypes = {
51
- highlighted: ThirdPartyPropTypes.deprecated(
52
- PropTypes.bool,
53
- 'Use `active` prop instead'
54
- )
55
-}
56
-```
57
-
58
-In this case, `ThirdPartyPropTypes.deprecated` is a wrapper calling `PropTypes.bool`. This pattern by itself is fine, but triggers a false positive because React thinks you are calling PropTypes directly. The next section explains how to fix this problem for a library implementing something like `ThirdPartyPropTypes`. If it's not a library you wrote, you can file an issue against it.
59
-
60
-### Fixing the false positive in third party PropTypes
61
-
62
-If you are an author of a third party PropTypes library and you let consumers wrap existing React PropTypes, they might start seeing this warning coming from your library. This happens because React doesn't see a "secret" last argument that [it passes](https://github.com/facebook/react/pull/7132) to detect manual PropTypes calls.
63
-
64
-Here is how to fix it. We will use `deprecated` from [react-bootstrap/react-prop-types](https://github.com/react-bootstrap/react-prop-types/blob/0d1cd3a49a93e513325e3258b28a82ce7d38e690/src/deprecated.js) as an example. The current implementation only passes down the `props`, `propName`, and `componentName` arguments:
65
-
66
-```javascript
67
-export default function deprecated(propType, explanation) {
68
- return function validate(props, propName, componentName) {
69
- if (props[propName] != null) {
70
- const message = `"${propName}" property of "${componentName}" has been deprecated.\n${explanation}`;
71
- if (!warned[message]) {
72
- warning(false, message);
73
- warned[message] = true;
74
- }
75
- }
76
-
77
- return propType(props, propName, componentName);
78
- };
79
-}
80
-```
81
-
82
-In order to fix the false positive, make sure you pass **all** arguments down to the wrapped PropType. This is easy to do with the ES6 `...rest` notation:
83
-
84
-```javascript
85
-export default function deprecated(propType, explanation) {
86
- return function validate(props, propName, componentName, ...rest) { // Note ...rest here
87
- if (props[propName] != null) {
88
- const message = `"${propName}" property of "${componentName}" has been deprecated.\n${explanation}`;
89
- if (!warned[message]) {
90
- warning(false, message);
91
- warned[message] = true;
92
- }
93
- }
94
-
95
- return propType(props, propName, componentName, ...rest); // and here
96
- };
97
-}
98
-```
99
-
100
-This will silence the warning.
docs/warnings/invalid-aria-prop.md
deleted
-11
@@ -1,11 +0,0 @@
1
----
2
-title: Invalid ARIA Prop Warning
3
-layout: single
4
-permalink: warnings/invalid-aria-prop.html
5
----
6
-
7
-The invalid-aria-prop warning will fire if you attempt to render a DOM element with an aria-* prop that does not exist in the Web Accessibility Initiative (WAI) Accessible Rich Internet Application (ARIA) [specification](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties).
8
-
9
-1. If you feel that you are using a valid prop, check the spelling carefully. `aria-labelledby` and `aria-activedescendant` are often misspelled.
10
-
11
-2. React does not yet recognize the attribute you specified. This will likely be fixed in a future version of React. However, React currently strips all unknown attributes, so specifying them in your React app will not cause them to be rendered
\ No newline at end of file
docs/warnings/legacy-factories.md
deleted
-59
@@ -1,59 +0,0 @@
1
----
2
-title: React Element Factories and JSX Warning
3
-layout: single
4
-permalink: warnings/legacy-factories.html
5
----
6
-
7
-You probably came here because your code is calling your component as a plain function call. This is now deprecated:
8
-
9
-```javascript
10
-var MyComponent = require('MyComponent');
11
-
12
-function render() {
13
- return MyComponent({ foo: 'bar' }); // WARNING
14
-}
15
-```
16
-
17
-## JSX
18
-
19
-React components can no longer be called directly like this. Instead [you can use JSX](/docs/jsx-in-depth.html).
20
-
21
-```javascript
22
-var React = require('react');
23
-var MyComponent = require('MyComponent');
24
-
25
-function render() {
26
- return <MyComponent foo="bar" />;
27
-}
28
-```
29
-
30
-## Without JSX
31
-
32
-If you don't want to, or can't use JSX, then you'll need to wrap your component in a factory before calling it:
33
-
34
-```javascript
35
-var React = require('react');
36
-var MyComponent = React.createFactory(require('MyComponent'));
37
-
38
-function render() {
39
- return MyComponent({ foo: 'bar' });
40
-}
41
-```
42
-
43
-This is an easy upgrade path if you have a lot of existing function calls.
44
-
45
-## Dynamic components without JSX
46
-
47
-If you get a component class from a dynamic source, then it might be unnecessary to create a factory that you immediately invoke. Instead you can just create your element inline:
48
-
49
-```javascript
50
-var React = require('react');
51
-
52
-function render(MyComponent) {
53
- return React.createElement(MyComponent, { foo: 'bar' });
54
-}
55
-```
56
-
57
-## In Depth
58
-
59
-[Read more about WHY we're making this change.](https://gist.github.com/sebmarkbage/d7bce729f38730399d28)
docs/warnings/refs-must-have-owner.md
deleted
-33
@@ -1,33 +0,0 @@
1
----
2
-title: Refs Must Have Owner Warning
3
-layout: single
4
-permalink: warnings/refs-must-have-owner.html
5
----
6
-
7
-You are probably here because you got one of the following error messages:
8
-
9
-*React 16.0.0+*
10
-> Warning:
11
->
12
-> Element ref was specified as a string (myRefName) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner).
13
-
14
-*earlier versions of React*
15
-> Warning:
16
->
17
-> addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded.
18
-
19
-This usually means one of two things:
20
-
21
-- You are trying to add a `ref` to an element that is being created outside of a component's render() function.
22
-- You have multiple (conflicting) copies of React loaded (eg. due to a misconfigured NPM dependency)
23
-
24
-
25
-## Invalid Refs
26
-
27
-Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `render` method). Try rendering this component inside of a new top-level component which will hold the ref.
28
-
29
-## Multiple copies of React
30
-
31
-Bower does a good job of deduplicating dependencies, but NPM does not. If you aren't doing anything (fancy) with refs, there is a good chance that the problem is not with your refs, but rather an issue with having multiple copies of React loaded into your project. Sometimes, when you pull in a third-party module via npm, you will get a duplicate copy of the dependency library, and this can create problems.
32
-
33
-If you are using npm... `npm ls` or `npm ls react` might help illuminate.
docs/warnings/special-props.md
deleted
-9
@@ -1,9 +0,0 @@
1
----
2
-title: Special Props Warning
3
-layout: single
4
-permalink: warnings/special-props.html
5
----
6
-
7
-Most props on a JSX element are passed on to the component, however, there are two special props (`ref` and `key`) which are used by React, and are thus not forwarded to the component.
8
-
9
-For instance, attempting to access `this.props.key` from a component (eg. the render function) is not defined. If you need to access the same value within the child component, you should pass it as a different prop (ex: `<ListItemWrapper key={result.id} id={result.id} />`). While this may seem redundant, it's important to separate app logic from reconciling hints.
docs/warnings/unknown-prop.md
deleted
-63
@@ -1,63 +0,0 @@
1
----
2
-title: Unknown Prop Warning
3
-layout: single
4
-permalink: warnings/unknown-prop.html
5
----
6
-The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.
7
-
8
-There are a couple of likely reasons this warning could be appearing:
9
-
10
-1. Are you using `{...this.props}` or `cloneElement(element, this.props)`? Your component is transferring its own props directly to a child element (eg. https://reactjs.org/docs/transferring-props.html). When transferring props to a child component, you should ensure that you are not accidentally forwarding props that were intended to be interpreted by the parent component.
11
-
12
-2. You are using a non-standard DOM attribute on a native DOM node, perhaps to represent custom data. If you are trying to attach custom data to a standard DOM element, consider using a custom data attribute as described [on MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes).
13
-
14
-3. React does not yet recognize the attribute you specified. This will likely be fixed in a future version of React. However, React currently strips all unknown attributes, so specifying them in your React app will not cause them to be rendered.
15
-
16
-4. You are using a React component without an upper case. React interprets it as a DOM tag because [React JSX transform uses the upper vs. lower case convention to distinguish between user-defined components and DOM tags](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized).
17
-
18
----
19
-
20
-To fix this, composite components should "consume" any prop that is intended for the composite component and not intended for the child component. Example:
21
-
22
-**Bad:** Unexpected `layout` prop is forwarded to the `div` tag.
23
-
24
-```js
25
-function MyDiv(props) {
26
- if (props.layout === 'horizontal') {
27
- // BAD! Because you know for sure "layout" is not a prop that <div> understands.
28
- return <div {...props} style={getHorizontalStyle()} />
29
- } else {
30
- // BAD! Because you know for sure "layout" is not a prop that <div> understands.
31
- return <div {...props} style={getVerticalStyle()} />
32
- }
33
-}
34
-```
35
-
36
-**Good:** The spread operator can be used to pull variables off props, and put the remaining props into a variable.
37
-
38
-```js
39
-function MyDiv(props) {
40
- const { layout, ...rest } = props
41
- if (layout === 'horizontal') {
42
- return <div {...rest} style={getHorizontalStyle()} />
43
- } else {
44
- return <div {...rest} style={getVerticalStyle()} />
45
- }
46
-}
47
-```
48
-
49
-**Good:** You can also assign the props to a new object and delete the keys that you're using from the new object. Be sure not to delete the props from the original `this.props` object, since that object should be considered immutable.
50
-
51
-```js
52
-function MyDiv(props) {
53
-
54
- const divProps = Object.assign({}, props);
55
- delete divProps.layout;
56
-
57
- if (props.layout === 'horizontal') {
58
- return <div {...divProps} style={getHorizontalStyle()} />
59
- } else {
60
- return <div {...divProps} style={getVerticalStyle()} />
61
- }
62
-}
63
-```
package.json
-1
@@ -98,7 +98,6 @@
98
},
99
"scripts": {
100
"build": "npm run version-check && node scripts/rollup/build.js",
101
- "build:docs": "cd www && yarn install && yarn build",
101
"linc": "git diff --name-only --diff-filter=ACMRTUB `git merge-base HEAD master` | grep '\\.js$' | xargs eslint --",
102
"lint": "node ./scripts/tasks/eslint.js",
103
"postinstall": "node node_modules/fbjs-scripts/node/check-dev-engines.js package.json",
scripts/circleci/build_gh_pages.sh
deleted
-33
@@ -1,33 +0,0 @@
1
-#!/bin/bash
2
-
3
-set -e
4
-
5
-if [ "$CIRCLE_BRANCH" = "$REACT_WEBSITE_BRANCH" ]; then
6
-
7
- GH_PAGES_DIR=`pwd`/../react-gh-pages
8
-
9
- # check if directory exists (restored from cache)
10
- if [ -d $GH_PAGES_DIR ]; then
11
- pushd $GH_PAGES_DIR
12
- git pull origin gh-pages
13
- popd
14
- else
15
- git clone --branch gh-pages --depth=1 \
16
- https://reactjs-bot@github.com/facebook/react.git \
17
- $GH_PAGES_DIR
18
- fi
19
-
20
- pushd docs
21
- bundle exec rake release
22
- cd $GH_PAGES_DIR
23
- git status
24
- git --no-pager diff
25
- if ! git diff-index --quiet HEAD --; then
26
- git add -A .
27
- git commit -m "Rebuild website"
28
- git push origin gh-pages
29
- fi
30
- popd
31
-else
32
- echo "Not building website"
33
-fi
scripts/circleci/check_license.sh
+1
-3
@@ -3,9 +3,7 @@
3
set -e
4
5
# Make sure we don't introduce accidental references to PATENTS.
6
-EXPECTED='docs/_posts/2014-10-28-react-v0.12.md
7
-docs/_posts/2015-04-17-react-native-v0.4.md
8
-scripts/circleci/check_license.sh'
6
+EXPECTED='scripts/circleci/check_license.sh'
7
ACTUAL=$(git grep -l PATENTS)
8
9
if [ "$EXPECTED" != "$ACTUAL" ]; then
www/.babelrc
deleted
-4
@@ -1,4 +0,0 @@
1
-{
2
- "presets": ['react', 'es2015', 'stage-1'],
3
- "plugins": ['add-module-exports']
4
-}
www/.gitignore
deleted
-6
@@ -1,6 +0,0 @@
1
-node_modules/
2
-public
3
-.gatsby-context.js
4
-.DS_Store
5
-.intermediate-representation/
6
-.cache/
www/.travis.yml
deleted
-39
@@ -1,39 +0,0 @@
1
-# back to language cpp to try to bypass osx node failure
2
-language: cpp
3
-sudo: false
4
-env:
5
- - export NODE_VERSION="0.10"
6
- - export NODE_VERSION="0.12"
7
- - export NODE_VERSION="4"
8
- - export NODE_VERSION="5"
9
-os:
10
- - linux
11
- - osx
12
-# pre-install to bring in the correct version of node via nvm
13
-before_install:
14
- - git submodule update --init --recursive
15
- - git clone https://github.com/creationix/nvm.git ./.nvm
16
- - source ./.nvm/nvm.sh
17
- - nvm install $NODE_VERSION
18
- - nvm use $NODE_VERSION
19
- - npm config set python `which python`
20
- - if [ $TRAVIS_OS_NAME == "linux" ]; then
21
- export CC="gcc-4.8";
22
- export CXX="g++-4.8";
23
- export LINK="gcc-4.8";
24
- export LINKXX="g++-4.8";
25
- fi
26
- - gcc --version
27
- - g++ --version
28
-# node 4 depends on gcc 4.8
29
-addons:
30
- apt:
31
- sources:
32
- - ubuntu-toolchain-r-test
33
- packages:
34
- - g++-4.8
35
- - gcc-4.8
36
-# script needed to test, because defaults don't work on osx
37
-script:
38
- - npm install
39
- - npm run lint
www/README.md
deleted
-55
@@ -1,55 +0,0 @@
1
-# React — documentation site
2
-
3
-## Getting started
4
-
5
-### Prerequisites
6
-
7
-1. Git
8
-1. Node: install version 7.6 or greater
9
-1. Yarn: `npm i -g yarn` to install it globally via NPM
10
-1. A clone of the [React repo](https://github.com/facebook/react) on your local machine
11
-1. A fork of the repo (for any contributions)
12
-
13
-### Installation
14
-
15
-1. `cd react` to go into the project root
16
-1. `yarn` to install the main NPM dependencies
17
-1. `cd www` to go into the website project
18
-1. `yarn` to install the website's NPM dependencies
19
-
20
-### Running locally
21
-
22
-1. `yarn dev` to start the hot-reloading development server powered by Gatsby
23
-1. `open http://localhost:8000` to open the site in your favourite browser
24
-
25
-## Contributing
26
-
27
-### Create a branch
28
-
29
-1. `git checkout master` from any folder in your local react repository
30
-1. `git pull origin master` to ensure you have the latest main code
31
-1. `git checkout -b wwwTheNameOfMyChange` (replacing `TheNameOfMyChange` with a suitable name) to create a branch
32
-
33
-### Make the change
34
-
35
-1. Follow the "Running locally" instructions
36
-1. Save the files and check in the browser
37
- 1. Any React components in `src/components` or `src/templates` will hot-reload
38
- 1. If working with plugins, you may need to remove the `.cache` directory and restart the server
39
-
40
-### Test the change
41
-
42
-1. If possible, test any visual changes in all latest versions of common browsers, on both desktop and mobile.
43
-1. Run `yarn prettier-all && yarn lint` from the project root (outside of `www`)
44
-
45
-### Push it
46
-
47
-1. `git add -A && git commit -m "My message"` (replacing `My message` with a commit message, such as `Fixed header logo on Android`) to stage and commit your changes
48
-1. `git push yourname wwwTheNameOfMyChange`
49
-1. Go to the [React repo](https://github.com/facebook/react) and you should see recently pushed branches.
50
-1. ... follow GitHub's instructions...
51
-1. If possible, include any screenshots of visual changes. A Netlify build will also be automatically created once you make your PR, so other people can see your change.
52
-
53
-## Troubleshooting
54
-
55
-- `yarn reset` to clear the local cache
www/gatsby-config.js
deleted
-142
@@ -1,142 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-module.exports = {
13
- siteMetadata: {
14
- title: 'React: A JavaScript library for building user interfaces',
15
- siteUrl: 'https://reactjs.org',
16
- rssFeedTitle: 'React',
17
- rssFeedDescription: 'A JavaScript library for building user interfaces',
18
- },
19
- mapping: {
20
- 'MarkdownRemark.frontmatter.author': 'AuthorYaml',
21
- },
22
- plugins: [
23
- 'gatsby-transformer-authors-yaml',
24
- 'gatsby-plugin-netlify',
25
- 'gatsby-plugin-glamor',
26
- 'gatsby-plugin-react-next',
27
- 'gatsby-plugin-twitter',
28
- {
29
- resolve: 'gatsby-plugin-nprogress',
30
- options: {
31
- color: '#61dafb',
32
- },
33
- },
34
- {
35
- resolve: 'gatsby-source-filesystem',
36
- options: {
37
- path: `${__dirname}/src/pages`,
38
- name: 'pages',
39
- },
40
- },
41
- {
42
- /* Docs, Tutorial, Community, and Blog section content comes from here. */
43
- resolve: 'gatsby-source-filesystem',
44
- options: {
45
- name: 'packages',
46
- path: `${__dirname}/../docs/`,
47
- },
48
- },
49
- {
50
- resolve: 'gatsby-transformer-remark',
51
- options: {
52
- plugins: [
53
- 'gatsby-remark-responsive-iframe',
54
- {
55
- resolve: 'gatsby-remark-images',
56
- options: {
57
- maxWidth: 840,
58
- },
59
- },
60
- 'gatsby-remark-autolink-headers',
61
- 'gatsby-remark-use-jsx',
62
- {
63
- resolve: 'gatsby-remark-prismjs',
64
- options: {
65
- classPrefix: 'gatsby-code-',
66
- },
67
- },
68
- 'gatsby-remark-copy-linked-files',
69
- 'gatsby-remark-smartypants',
70
- ],
71
- },
72
- },
73
- 'gatsby-transformer-sharp',
74
- 'gatsby-plugin-sharp',
75
- {
76
- resolve: 'gatsby-plugin-google-analytics',
77
- options: {
78
- trackingId: 'UA-41298772-1',
79
- },
80
- },
81
- {
82
- resolve: 'gatsby-plugin-feed',
83
- options: {
84
- query: `
85
- {
86
- site {
87
- siteMetadata {
88
- title: rssFeedTitle
89
- description: rssFeedDescription
90
- siteUrl
91
- site_url: siteUrl
92
- }
93
- }
94
- }`,
95
- feeds: [
96
- {
97
- serialize: ({query: {site, allMarkdownRemark}}) => {
98
- return allMarkdownRemark.edges.map(edge => {
99
- return Object.assign(
100
- {},
101
- {
102
- title: edge.node.frontmatter.title,
103
- description: edge.node.html,
104
- date: require('moment')(edge.node.fields.date).format(
105
- 'MMMM DD, YYYY, h:mm A',
106
- ),
107
- url: site.siteMetadata.siteUrl + edge.node.fields.slug,
108
- guid: site.siteMetadata.siteUrl + edge.node.fields.slug,
109
- },
110
- );
111
- });
112
- },
113
- query: `
114
- {
115
- allMarkdownRemark
116
- (limit: 10,
117
- filter: {id: {regex: "/_posts/"}},
118
- sort: {fields: [fields___date],
119
- order: DESC}) {
120
- edges {
121
- node {
122
- fields {
123
- date
124
- slug
125
- }
126
- frontmatter {
127
- title
128
- }
129
- html
130
- }
131
- }
132
- }
133
- }
134
- `,
135
- output: '/feed.xml',
136
- },
137
- ],
138
- },
139
- },
140
- 'gatsby-plugin-react-helmet',
141
- ],
142
-};
www/gatsby-node.js
deleted
-243
@@ -1,243 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-const {resolve} = require('path');
13
-const webpack = require('webpack');
14
-
15
-exports.modifyWebpackConfig = ({config, stage}) => {
16
- // See https://github.com/FormidableLabs/react-live/issues/5
17
- config.plugin('ignore', () => new webpack.IgnorePlugin(/^(xor|props)$/));
18
-
19
- config.merge({
20
- resolve: {
21
- root: resolve(__dirname, './src'),
22
- extensions: ['', '.js', '.jsx', '.json'],
23
- },
24
- });
25
- return config;
26
-};
27
-
28
-exports.createPages = async ({graphql, boundActionCreators}) => {
29
- const {createPage, createRedirect} = boundActionCreators;
30
-
31
- const blogTemplate = resolve('./src/templates/blog.js');
32
- const communityTemplate = resolve('./src/templates/community.js');
33
- const docsTemplate = resolve('./src/templates/docs.js');
34
- const tutorialTemplate = resolve('./src/templates/tutorial.js');
35
- const homeTemplate = resolve('./src/templates/home.js');
36
-
37
- const allMarkdown = await graphql(
38
- `
39
- {
40
- allMarkdownRemark(limit: 1000) {
41
- edges {
42
- node {
43
- fields {
44
- redirect
45
- slug
46
- }
47
- }
48
- }
49
- }
50
- }
51
- `,
52
- );
53
-
54
- if (allMarkdown.errors) {
55
- console.error(allMarkdown.errors);
56
-
57
- throw Error(allMarkdown.errors);
58
- }
59
-
60
- allMarkdown.data.allMarkdownRemark.edges.forEach(edge => {
61
- const slug = edge.node.fields.slug;
62
-
63
- if (slug === '/index.html') {
64
- createPage({
65
- path: '/',
66
- component: homeTemplate,
67
- context: {
68
- slug,
69
- },
70
- });
71
- } else if (slug === 'docs/error-decoder.html') {
72
- // No-op so far as markdown templates go.
73
- // Error codes are managed by a page (which gets created automatically).
74
- } else if (
75
- slug.includes('blog/') ||
76
- slug.includes('community/') ||
77
- slug.includes('contributing/') ||
78
- slug.includes('docs/') ||
79
- slug.includes('tutorial/') ||
80
- slug.includes('warnings/')
81
- ) {
82
- let template;
83
- if (slug.includes('blog/')) {
84
- template = blogTemplate;
85
- } else if (slug.includes('community/')) {
86
- template = communityTemplate;
87
- } else if (
88
- slug.includes('contributing/') ||
89
- slug.includes('docs/') ||
90
- slug.includes('warnings/')
91
- ) {
92
- template = docsTemplate;
93
- } else if (slug.includes('tutorial/')) {
94
- template = tutorialTemplate;
95
- }
96
-
97
- const createArticlePage = path =>
98
- createPage({
99
- path: path,
100
- component: template,
101
- context: {
102
- slug,
103
- },
104
- });
105
-
106
- // Register primary URL.
107
- createArticlePage(slug);
108
-
109
- // Register redirects as well if the markdown specifies them.
110
- if (edge.node.fields.redirect) {
111
- let redirect = JSON.parse(edge.node.fields.redirect);
112
- if (!Array.isArray(redirect)) {
113
- redirect = [redirect];
114
- }
115
-
116
- redirect.forEach(fromPath =>
117
- createRedirect({
118
- fromPath: `/${fromPath}`,
119
- redirectInBrowser: true,
120
- toPath: `/${slug}`,
121
- }),
122
- );
123
- }
124
- }
125
- });
126
-
127
- const newestBlogEntry = await graphql(
128
- `
129
- {
130
- allMarkdownRemark(
131
- limit: 1,
132
- filter: { id: { regex: "/_posts/" } }
133
- sort: { fields: [fields___date], order: DESC }
134
- ) {
135
- edges {
136
- node {
137
- fields {
138
- slug
139
- }
140
- }
141
- }
142
- }
143
- }
144
- `,
145
- );
146
- const newestBlogNode = newestBlogEntry.data.allMarkdownRemark.edges[0].node;
147
-
148
- // Blog landing page should always show the most recent blog entry.
149
- createRedirect({
150
- fromPath: '/blog/',
151
- redirectInBrowser: true,
152
- toPath: newestBlogNode.fields.slug,
153
- });
154
-};
155
-
156
-// Parse date information out of blog post filename.
157
-const BLOG_POST_FILENAME_REGEX = /([0-9]+)\-([0-9]+)\-([0-9]+)\-(.+)\.md$/;
158
-
159
-// Add custom fields to MarkdownRemark nodes.
160
-exports.onCreateNode = ({node, boundActionCreators, getNode}) => {
161
- const {createNodeField} = boundActionCreators;
162
-
163
- switch (node.internal.type) {
164
- case 'MarkdownRemark':
165
- const {permalink, redirect_from} = node.frontmatter;
166
- const {relativePath} = getNode(node.parent);
167
-
168
- let slug = permalink;
169
-
170
- if (!slug) {
171
- if (relativePath.includes('_posts')) {
172
- // Blog posts don't have embedded permalinks.
173
- // Their slugs follow a pattern: /blog/<year>/<month>/<day>/<slug>.html
174
- // The date portion comes from the file name: <date>-<title>.md
175
- const match = BLOG_POST_FILENAME_REGEX.exec(relativePath);
176
- const year = match[1];
177
- const month = match[2];
178
- const day = match[3];
179
- const filename = match[4];
180
-
181
- slug = `/blog/${year}/${month}/${day}/${filename}.html`;
182
-
183
- const date = new Date(year, month - 1, day);
184
-
185
- // Blog posts are sorted by date and display the date in their header.
186
- createNodeField({
187
- node,
188
- name: 'date',
189
- value: date.toJSON(),
190
- });
191
- }
192
- }
193
-
194
- if (!slug) {
195
- slug = `/${relativePath.replace('.md', '.html')}`;
196
-
197
- // This should (probably) only happen for the index.md,
198
- // But let's log it in case it happens for other files also.
199
- console.warn(
200
- `Warning: No slug found for "${relativePath}". Falling back to default "${slug}".`,
201
- );
202
- }
203
-
204
- // Used to generate URL to view this content.
205
- createNodeField({
206
- node,
207
- name: 'slug',
208
- value: slug,
209
- });
210
-
211
- // Used to generate a GitHub edit link.
212
- createNodeField({
213
- node,
214
- name: 'path',
215
- value: relativePath,
216
- });
217
-
218
- // Used by createPages() above to register redirects.
219
- createNodeField({
220
- node,
221
- name: 'redirect',
222
- value: redirect_from ? JSON.stringify(redirect_from) : '',
223
- });
224
- return;
225
- }
226
-};
227
-
228
-exports.onCreatePage = async ({page, boundActionCreators}) => {
229
- const {createPage} = boundActionCreators;
230
-
231
- return new Promise(resolvePromise => {
232
- // page.matchPath is a special key that's used for matching pages only on the client.
233
- // Explicitly wire up all error code wildcard matches to redirect to the error code page.
234
- if (page.path.includes('docs/error-decoder.html')) {
235
- page.matchPath = 'docs/error-decoder:path?';
236
- page.context.slug = 'docs/error-decoder.html';
237
-
238
- createPage(page);
239
- }
240
-
241
- resolvePromise();
242
- });
243
-};
www/package.json
deleted
-70
@@ -1,70 +0,0 @@
1
-{
2
- "name": "react-website",
3
- "description": "React website",
4
- "version": "0.0.1",
5
- "bugs": {
6
- "url": "https://github.com/facebook/react"
7
- },
8
- "resolutions": {
9
- "gatsby/graphql": "0.10.5",
10
- "gatsby/react": "16.0.0",
11
- "gatsby/react-dom": "16.0.0"
12
- },
13
- "dependencies": {
14
- "@gaearon/react-live": "1.7.1-with-safari-fix",
15
- "array-from": "^2.1.1",
16
- "gatsby": "^1.9.9",
17
- "gatsby-link": "^1.6.9",
18
- "gatsby-plugin-feed": "^1.3.9",
19
- "gatsby-plugin-glamor": "^1.6.4",
20
- "gatsby-plugin-google-analytics": "^1.0.4",
21
- "gatsby-plugin-manifest": "^1.0.4",
22
- "gatsby-plugin-netlify": "^1.0.4",
23
- "gatsby-plugin-nprogress": "^1.0.7",
24
- "gatsby-plugin-react-helmet": "^1.0.3",
25
- "gatsby-plugin-react-next": "^1.0.3",
26
- "gatsby-plugin-sharp": "^1.6.2",
27
- "gatsby-plugin-twitter": "^1.0.10",
28
- "gatsby-remark-autolink-headers": "^1.4.4",
29
- "gatsby-remark-copy-linked-files": "^1.5.2",
30
- "gatsby-remark-images": "^1.5.11",
31
- "gatsby-remark-prismjs": "^1.2.1",
32
- "gatsby-remark-responsive-iframe": "^1.4.3",
33
- "gatsby-remark-smartypants": "^1.4.3",
34
- "gatsby-source-filesystem": "^1.4.4",
35
- "gatsby-transformer-remark": "^1.7.2",
36
- "gatsby-transformer-sharp": "^1.6.1",
37
- "glamor": "^2.20.40",
38
- "hex2rgba": "^0.0.1",
39
- "remarkable": "^1.7.1",
40
- "slugify": "^1.2.1",
41
- "string.prototype.includes": "^1.0.0",
42
- "string.prototype.repeat": "^0.2.0",
43
- "unist-util-visit": "^1.1.3"
44
- },
45
- "devDependencies": {
46
- "gh-pages": "^1.0.0",
47
- "rimraf": "^2.6.1"
48
- },
49
- "engines": {
50
- "node": ">=7.6.0"
51
- },
52
- "homepage": "https://reactjs.org/",
53
- "keywords": [
54
- "gatsby"
55
- ],
56
- "license": "MIT",
57
- "main": "n/a",
58
- "repository": {
59
- "type": "git",
60
- "url": "git+https://github.com/facebook/react.git"
61
- },
62
- "scripts": {
63
- "dev": "gatsby develop -H 0.0.0.0",
64
- "lint": "./node_modules/.bin/eslint --ext .js,.jsx --ignore-pattern public .",
65
- "test": "echo \"Error: no test specified\" && exit 1",
66
- "build": "gatsby build",
67
- "deploy": "gatsby build --prefix-links && gh-pages -d public",
68
- "reset": "rimraf ./.cache"
69
- }
70
-}
www/plugins/gatsby-remark-use-jsx/index.js
deleted
-22
@@ -1,22 +0,0 @@
1
-const visit = require('unist-util-visit');
2
-
3
-// Always treat JS blocks as JSX.
4
-// TODO: maybe we can just change it in Markdown in the future?
5
-module.exports = ({markdownAST}) => {
6
- visit(markdownAST, `code`, node => {
7
- if (typeof node.lang !== 'string') {
8
- return;
9
- }
10
- if (node.lang.indexOf('jsx') === 0) {
11
- // Already JSX (with optional line range).
12
- return;
13
- }
14
- // Turn JS into JSX, preserving the optional line range.
15
- if (node.lang.indexOf('js') === 0) {
16
- node.lang = 'jsx' + node.lang.substring('js'.length);
17
- }
18
- if (node.lang.indexOf('javascript') === 0) {
19
- node.lang = 'jsx' + node.lang.substring('javascript'.length);
20
- }
21
- });
22
-};
www/plugins/gatsby-remark-use-jsx/package.json
deleted
-4
@@ -1,4 +0,0 @@
1
-{
2
- "name": "gatsby-remark-use-jsx",
3
- "version": "0.0.1"
4
-}
\ No newline at end of file
www/plugins/gatsby-transformer-authors-yaml/gatsby-node.js
deleted
-33
@@ -1,33 +0,0 @@
1
-const readFileSync = require('fs').readFileSync;
2
-const resolve = require('path').resolve;
3
-const safeLoad = require('js-yaml').safeLoad;
4
-
5
-// TODO It would be nice to replace this plugin with gatsby-transformer-yaml
6
-// That plugin errors on some of the YML files in the docs folder though,
7
-// And doesn't currently support any options to whitelist/blacklist files.
8
-
9
-// Reads authors.yml data into GraphQL.
10
-// This is auto-linked by gatsby-config.js to blog posts.
11
-exports.sourceNodes = ({graphql, boundActionCreators}) => {
12
- const {createNode} = boundActionCreators;
13
-
14
- const path = resolve(__dirname, '../../../docs/_data/authors.yml');
15
- const file = readFileSync(path, 'utf8');
16
- const authors = safeLoad(file);
17
-
18
- // authors.yml structure is {[username: string]: {name: string, url: string}}
19
- Object.keys(authors).forEach(username => {
20
- const author = authors[username];
21
-
22
- createNode({
23
- id: username,
24
- children: [],
25
- parent: 'AUTHORS',
26
- internal: {
27
- type: 'AuthorYaml',
28
- contentDigest: JSON.stringify(author),
29
- },
30
- frontmatter: author,
31
- });
32
- });
33
-};
www/plugins/gatsby-transformer-authors-yaml/package.json
deleted
-4
@@ -1,4 +0,0 @@
1
-{
2
- "name": "gatsby-transformer-authors-yaml",
3
- "version": "0.0.1"
4
-}
\ No newline at end of file
www/src/components/CodeEditor/CodeEditor.js
deleted
-279
@@ -1,279 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import React, {Component} from 'react';
13
-import ReactDOM from 'react-dom';
14
-import Remarkable from 'remarkable';
15
-// TODO: switch back to the upstream version of react-live
16
-// once https://github.com/FormidableLabs/react-live/issues/37 is fixed.
17
-import {LiveProvider, LiveEditor} from '@gaearon/react-live';
18
-import {colors, media} from 'theme';
19
-import MetaTitle from 'templates/components/MetaTitle';
20
-
21
-const compile = code =>
22
- Babel.transform(code, {presets: ['es2015', 'react']}).code; // eslint-disable-line no-undef
23
-
24
-class CodeEditor extends Component {
25
- constructor(props, context) {
26
- super(props, context);
27
-
28
- this.state = this._updateState(props.code);
29
- }
30
-
31
- componentDidMount() {
32
- // Initial render() will always be a no-op,
33
- // Because the mountNode ref won't exist yet.
34
- this._render();
35
- }
36
-
37
- componentDidUpdate(prevProps, prevState) {
38
- if (prevState.compiled !== this.state.compiled) {
39
- this._render();
40
- }
41
- }
42
-
43
- render() {
44
- const {children, code} = this.props;
45
- const {error} = this.state;
46
-
47
- return (
48
- <LiveProvider code={code} mountStylesheet={false}>
49
- <div
50
- css={{
51
- [media.greaterThan('xlarge')]: {
52
- display: 'flex',
53
- flexDirection: 'row',
54
- },
55
-
56
- [media.lessThan('large')]: {
57
- display: 'block',
58
- },
59
- }}>
60
- {children &&
61
- <div
62
- css={{
63
- flex: '0 0 33%',
64
-
65
- [media.lessThan('xlarge')]: {
66
- marginBottom: 20,
67
- },
68
-
69
- '& h3': {
70
- color: colors.dark,
71
- maxWidth: '11em',
72
- paddingTop: 0,
73
- },
74
-
75
- '& p': {
76
- marginTop: 15,
77
- marginRight: 40,
78
- lineHeight: 1.7,
79
-
80
- [media.greaterThan('xlarge')]: {
81
- marginTop: 25,
82
- },
83
- },
84
- }}>
85
- {children}
86
- </div>}
87
-
88
- <div
89
- css={{
90
- [media.greaterThan('medium')]: {
91
- flex: '0 0 67%',
92
- display: 'flex',
93
- alignItems: 'stretch',
94
- flexDirection: 'row',
95
- },
96
-
97
- [media.lessThan('small')]: {
98
- display: 'block',
99
- },
100
- }}>
101
- <div
102
- css={{
103
- flex: '0 0 70%',
104
- overflow: 'hidden',
105
- borderRadius: '10px 0 0 10px',
106
-
107
- [media.lessThan('small')]: {
108
- borderRadius: '10px 10px 0 0',
109
- },
110
- }}>
111
- <div
112
- css={{
113
- padding: '0px 10px',
114
- background: colors.darker,
115
- color: colors.white,
116
- }}>
117
- <MetaTitle onDark={true}>Live JSX Editor</MetaTitle>
118
- </div>
119
- <div
120
- css={{
121
- height: '100%',
122
- width: '100%',
123
- borderRadius: '0',
124
- marginTop: '0 !important',
125
- marginLeft: '0 !important',
126
- paddingLeft: '0 !important',
127
- marginRight: '0 !important',
128
- paddingRight: '0 !important',
129
-
130
- '& pre.prism-code[contenteditable]': {
131
- maxHeight: '280px !important',
132
- outline: 0,
133
- },
134
- }}
135
- className="gatsby-highlight">
136
- <LiveEditor onChange={this._onChange} ignoreTabKey={true} />
137
- </div>
138
- </div>
139
- {error &&
140
- <div
141
- css={{
142
- flex: '0 0 30%',
143
- overflow: 'hidden',
144
- border: `1px solid ${colors.error}`,
145
- borderRadius: '0 10px 10px 0',
146
- fontSize: 12,
147
- lineHeight: 1.5,
148
-
149
- [media.lessThan('small')]: {
150
- borderRadius: '0 0 10px 10px',
151
- },
152
- }}>
153
- <div
154
- css={{
155
- padding: '0px 10px',
156
- background: colors.error,
157
- color: colors.white,
158
- }}>
159
- <MetaTitle
160
- cssProps={{
161
- color: colors.white,
162
- }}>
163
- Error
164
- </MetaTitle>
165
- </div>
166
- <pre
167
- css={{
168
- whiteSpace: 'pre-wrap',
169
- wordBreak: 'break-word',
170
- color: colors.error,
171
- padding: 10,
172
- }}>
173
- {error.message}
174
- </pre>
175
- </div>}
176
- {!error &&
177
- <div
178
- css={{
179
- flex: '0 0 30%',
180
- overflow: 'hidden',
181
- border: `1px solid ${colors.divider}`,
182
- borderRadius: '0 10px 10px 0',
183
-
184
- [media.lessThan('small')]: {
185
- borderRadius: '0 0 10px 10px',
186
- },
187
- }}>
188
- <div
189
- css={{
190
- padding: '0 10px',
191
- backgroundColor: colors.divider,
192
- }}>
193
- <MetaTitle>Result</MetaTitle>
194
- </div>
195
- <div
196
- css={{
197
- padding: 10,
198
-
199
- '& input': {
200
- width: '100%',
201
- display: 'block',
202
- border: '1px solid #ccc', // TODO
203
- padding: 5,
204
- },
205
-
206
- '& button': {
207
- marginTop: 10,
208
- padding: '5px 10px',
209
- },
210
-
211
- '& textarea': {
212
- width: '100%',
213
- marginTop: 10,
214
- height: 60,
215
- padding: 5,
216
- },
217
- }}
218
- ref={this._setMountRef}
219
- />
220
- </div>}
221
- </div>
222
- </div>
223
- </LiveProvider>
224
- );
225
- }
226
-
227
- _render() {
228
- if (!this._mountNode) {
229
- return;
230
- }
231
-
232
- const {compiled} = this.state;
233
-
234
- try {
235
- // Example code requires React, ReactDOM, and Remarkable to be within scope.
236
- // It also requires a "mountNode" variable for ReactDOM.render()
237
- // eslint-disable-next-line no-new-func
238
- new Function('React', 'ReactDOM', 'Remarkable', 'mountNode', compiled)(
239
- React,
240
- ReactDOM,
241
- Remarkable,
242
- this._mountNode,
243
- );
244
- } catch (error) {
245
- console.error(error);
246
-
247
- this.setState({
248
- compiled: null,
249
- error,
250
- });
251
- }
252
- }
253
-
254
- _setMountRef = ref => {
255
- this._mountNode = ref;
256
- };
257
-
258
- _updateState(code) {
259
- try {
260
- return {
261
- compiled: compile(code),
262
- error: null,
263
- };
264
- } catch (error) {
265
- console.error(error);
266
-
267
- return {
268
- compiled: null,
269
- error,
270
- };
271
- }
272
- }
273
-
274
- _onChange = code => {
275
- this.setState(this._updateState(code));
276
- };
277
-}
278
-
279
-export default CodeEditor;
www/src/components/CodeEditor/index.js
deleted
-14
@@ -1,14 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import CodeEditor from './CodeEditor';
13
-
14
-export default CodeEditor;
www/src/components/Container/Container.js
deleted
-40
@@ -1,40 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import React from 'react';
13
-
14
-import {media} from 'theme';
15
-
16
-/**
17
- * This component wraps page content sections (eg header, footer, main).
18
- * It provides consistent margin and max width behavior.
19
- */
20
-const Container = ({children}) => (
21
- <div
22
- css={{
23
- paddingLeft: 20,
24
- paddingRight: 20,
25
- marginLeft: 'auto',
26
- marginRight: 'auto',
27
-
28
- [media.greaterThan('medium')]: {
29
- width: '90%',
30
- },
31
-
32
- [media.size('xxlarge')]: {
33
- maxWidth: 1260,
34
- },
35
- }}>
36
- {children}
37
- </div>
38
-);
39
-
40
-export default Container;
www/src/components/Container/index.js
deleted
-14
@@ -1,14 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import Container from './Container';
13
-
14
-export default Container;
www/src/components/ErrorDecoder/ErrorDecoder.js
deleted
-114
@@ -1,114 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import React, {Component} from 'react';
13
-
14
-const errorCodes = require('../../../../scripts/error-codes/codes.json');
15
-
16
-function replaceArgs(msg, argList) {
17
- let argIdx = 0;
18
- return msg.replace(/%s/g, function() {
19
- const arg = argList[argIdx++];
20
- return arg === undefined ? '[missing argument]' : arg;
21
- });
22
-}
23
-
24
-function urlify(str) {
25
- const urlRegex = /(https:\/\/fb\.me\/[a-z\-]+)/g;
26
-
27
- const segments = str.split(urlRegex);
28
-
29
- for (let i = 0; i < segments.length; i++) {
30
- if (i % 2 === 1) {
31
- segments[i] = (
32
- <a key={i} target="_blank" rel="noopener" href={segments[i]}>
33
- {segments[i]}
34
- </a>
35
- );
36
- }
37
- }
38
-
39
- return segments;
40
-}
41
-
42
-// ?invariant=123&args[]=foo&args[]=bar
43
-function parseQueryString(location) {
44
- const rawQueryString = location.search.substring(1);
45
- if (!rawQueryString) {
46
- return null;
47
- }
48
-
49
- let code = '';
50
- let args = [];
51
-
52
- const queries = rawQueryString.split('&');
53
- for (let i = 0; i < queries.length; i++) {
54
- const query = decodeURIComponent(queries[i]);
55
- if (query.indexOf('invariant=') === 0) {
56
- code = query.slice(10);
57
- } else if (query.indexOf('args[]=') === 0) {
58
- args.push(query.slice(7));
59
- }
60
- }
61
-
62
- return [code, args];
63
-}
64
-
65
-function ErrorResult(props) {
66
- const code = props.code;
67
- const errorMsg = props.msg;
68
-
69
- if (!code) {
70
- return (
71
- <p>
72
- When you encounter an error,
73
- you'll receive a link to this page for that specific error and we'll show you the full error text.
74
- </p>
75
- );
76
- }
77
-
78
- return (
79
- <div>
80
- <p>The full text of the error you just encountered is:</p>
81
- <code>{urlify(errorMsg)}</code>
82
- </div>
83
- );
84
-}
85
-
86
-class ErrorDecoder extends Component {
87
- constructor(...args) {
88
- super(...args);
89
-
90
- this.state = {
91
- code: null,
92
- errorMsg: '',
93
- };
94
- }
95
-
96
- componentWillMount() {
97
- const parseResult = parseQueryString(this.props.location);
98
- if (parseResult != null) {
99
- const [code, args] = parseResult;
100
- if (errorCodes[code]) {
101
- this.setState({
102
- code: code,
103
- errorMsg: replaceArgs(errorCodes[code], args),
104
- });
105
- }
106
- }
107
- }
108
-
109
- render() {
110
- return <ErrorResult code={this.state.code} msg={this.state.errorMsg} />;
111
- }
112
-}
113
-
114
-export default ErrorDecoder;
www/src/components/ErrorDecoder/index.js
deleted
-14
@@ -1,14 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import ErrorDecoder from './ErrorDecoder';
13
-
14
-export default ErrorDecoder;
www/src/components/Flex/Flex.js
deleted
-45
@@ -1,45 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import {createElement} from 'glamor/react';
13
-
14
-/**
15
- * Convenience component for declaring a flexbox layout.
16
- */
17
-const Flex = ({
18
- basis = 'auto',
19
- children,
20
- direction = 'row',
21
- grow = 0,
22
- halign = 'flex-start',
23
- shrink = 1,
24
- type = 'div',
25
- valign = 'flex-start',
26
- ...rest
27
-}) =>
28
- createElement(
29
- type,
30
- {
31
- css: {
32
- display: 'flex',
33
- flexDirection: direction,
34
- flexGrow: grow,
35
- flexShrink: shrink,
36
- flexBasis: basis,
37
- justifyContent: direction === 'row' ? halign : valign,
38
- alignItems: direction === 'row' ? valign : halign,
39
- },
40
- ...rest,
41
- },
42
- children,
43
- );
44
-
45
-export default Flex;
www/src/components/Flex/index.js
deleted
-14
@@ -1,14 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import Flex from './Flex';
13
-
14
-export default Flex;
www/src/components/Header/Header.js
deleted
-26
@@ -1,26 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import React from 'react';
13
-import {colors, fonts} from 'theme';
14
-
15
-const Header = ({children}) => (
16
- <h1
17
- css={{
18
- color: colors.dark,
19
- marginRight: '5%',
20
- ...fonts.header,
21
- }}>
22
- {children}
23
- </h1>
24
-);
25
-
26
-export default Header;
www/src/components/Header/index.js
deleted
-14
@@ -1,14 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import Header from './Header';
13
-
14
-export default Header;
www/src/components/LayoutFooter/ExternalFooterLink.js
deleted
-39
@@ -1,39 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import React from 'react';
13
-import {colors} from 'theme';
14
-import ExternalLinkSvg from 'templates/components/ExternalLinkSvg';
15
-
16
-const ExternalFooterLink = ({children, href, target, rel}) => (
17
- <a
18
- css={{
19
- lineHeight: 2,
20
- ':hover': {
21
- color: colors.brand,
22
- },
23
- }}
24
- href={href}
25
- target={target}
26
- rel={rel}>
27
- {children}
28
- <ExternalLinkSvg
29
- cssProps={{
30
- verticalAlign: -2,
31
- display: 'inline-block',
32
- marginLeft: 5,
33
- color: colors.subtle,
34
- }}
35
- />
36
- </a>
37
-);
38
-
39
-export default ExternalFooterLink;
www/src/components/LayoutFooter/Footer.js
deleted
-193
@@ -1,193 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import Container from 'components/Container';
13
-import ExternalFooterLink from './ExternalFooterLink';
14
-import FooterLink from './FooterLink';
15
-import FooterNav from './FooterNav';
16
-import MetaTitle from 'templates/components/MetaTitle';
17
-import React from 'react';
18
-import {colors, media} from 'theme';
19
-
20
-import ossLogoPng from 'images/oss_logo.png';
21
-
22
-const Footer = ({layoutHasSidebar = false}) => (
23
- <footer
24
- css={{
25
- backgroundColor: colors.darker,
26
- color: colors.white,
27
- paddingTop: 10,
28
- paddingBottom: 50,
29
-
30
- [media.size('sidebarFixed')]: {
31
- paddingTop: 40,
32
- },
33
- }}>
34
- <Container>
35
- <div
36
- css={{
37
- display: 'flex',
38
- flexDirection: 'row',
39
- flexWrap: 'wrap',
40
-
41
- [media.between('small', 'medium')]: {
42
- paddingRight: layoutHasSidebar ? 240 : null,
43
- },
44
-
45
- [media.between('large', 'largerSidebar')]: {
46
- paddingRight: layoutHasSidebar ? 280 : null,
47
- },
48
- [media.between('largerSidebar', 'sidebarFixed', true)]: {
49
- paddingRight: layoutHasSidebar ? 380 : null,
50
- },
51
- }}>
52
- <div
53
- css={{
54
- flexWrap: 'wrap',
55
- display: 'flex',
56
-
57
- [media.lessThan('large')]: {
58
- width: '100%',
59
- },
60
- [media.greaterThan('xlarge')]: {
61
- width: 'calc(100% / 3 * 2)',
62
- paddingLeft: 40,
63
- },
64
- }}>
65
- <FooterNav layoutHasSidebar={layoutHasSidebar}>
66
- <MetaTitle onDark={true}>Docs</MetaTitle>
67
- <FooterLink to="/docs/hello-world.html">Quick Start</FooterLink>
68
- <FooterLink to="/docs/thinking-in-react.html">
69
- Thinking in React
70
- </FooterLink>
71
- <FooterLink to="/tutorial/tutorial.html">Tutorial</FooterLink>
72
- <FooterLink to="/docs/jsx-in-depth.html">
73
- Advanced Guides
74
- </FooterLink>
75
- </FooterNav>
76
- <FooterNav layoutHasSidebar={layoutHasSidebar}>
77
- <MetaTitle onDark={true}>Community</MetaTitle>
78
- <ExternalFooterLink
79
- href="http://stackoverflow.com/questions/tagged/reactjs"
80
- target="_blank"
81
- rel="noopener">
82
- Stack Overflow
83
- </ExternalFooterLink>
84
- <ExternalFooterLink
85
- href="https://discuss.reactjs.org"
86
- target="_blank"
87
- rel="noopener">
88
- Discussion Forum
89
- </ExternalFooterLink>
90
- <ExternalFooterLink
91
- href="https://discord.gg/0ZcbPKXt5bZjGY5n"
92
- target="_blank"
93
- rel="noopener">
94
- Reactiflux Chat
95
- </ExternalFooterLink>
96
- <ExternalFooterLink
97
- href="https://www.facebook.com/react"
98
- target="_blank"
99
- rel="noopener">
100
- Facebook
101
- </ExternalFooterLink>
102
- <ExternalFooterLink
103
- href="https://twitter.com/reactjs"
104
- target="_blank"
105
- rel="noopener">
106
- Twitter
107
- </ExternalFooterLink>
108
- </FooterNav>
109
- <FooterNav layoutHasSidebar={layoutHasSidebar}>
110
- <MetaTitle onDark={true}>Resources</MetaTitle>
111
- <FooterLink to="/community/conferences.html">
112
- Conferences
113
- </FooterLink>
114
- <FooterLink to="/community/videos.html">Videos</FooterLink>
115
- <ExternalFooterLink
116
- href="https://github.com/facebook/react/wiki/Examples"
117
- target="_blank"
118
- rel="noopener">
119
- Examples
120
- </ExternalFooterLink>
121
- <ExternalFooterLink
122
- href="https://github.com/facebook/react/wiki/Complementary-Tools"
123
- target="_blank"
124
- rel="noopener">
125
- Complementary Tools
126
- </ExternalFooterLink>
127
- </FooterNav>
128
- <FooterNav layoutHasSidebar={layoutHasSidebar}>
129
- <MetaTitle onDark={true}>More</MetaTitle>
130
- <FooterLink to="/blog/">Blog</FooterLink>
131
- <ExternalFooterLink
132
- href="https://github.com/facebook/react"
133
- target="_blank"
134
- rel="noopener">
135
- GitHub
136
- </ExternalFooterLink>
137
- <ExternalFooterLink
138
- href="http://facebook.github.io/react-native/"
139
- target="_blank"
140
- rel="noopener">
141
- React Native
142
- </ExternalFooterLink>
143
- <FooterLink to="/acknowledgements.html">
144
- Acknowledgements
145
- </FooterLink>
146
- </FooterNav>
147
- </div>
148
- <section
149
- css={{
150
- paddingTop: 40,
151
- display: 'block !important', // Override 'Installation' <style> specifics
152
-
153
- [media.greaterThan('xlarge')]: {
154
- width: 'calc(100% / 3)',
155
- order: -1,
156
- },
157
- [media.greaterThan('large')]: {
158
- order: -1,
159
- width: layoutHasSidebar ? null : 'calc(100% / 3)',
160
- },
161
- [media.lessThan('large')]: {
162
- textAlign: 'center',
163
- width: '100%',
164
- paddingTop: 40,
165
- },
166
- }}>
167
- <a
168
- href="https://code.facebook.com/projects/"
169
- target="_blank"
170
- rel="noopener">
171
- <img
172
- alt="Facebook Open Source"
173
- css={{
174
- maxWidth: 160,
175
- height: 'auto',
176
- }}
177
- src={ossLogoPng}
178
- />
179
- </a>
180
- <p
181
- css={{
182
- color: colors.subtleOnDark,
183
- paddingTop: 15,
184
- }}>
185
- Copyright © 2017 Facebook Inc.
186
- </p>
187
- </section>
188
- </div>
189
- </Container>
190
- </footer>
191
-);
192
-
193
-export default Footer;
www/src/components/LayoutFooter/FooterLink.js
deleted
-30
@@ -1,30 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import Link from 'gatsby-link';
13
-import React from 'react';
14
-import {colors} from 'theme';
15
-
16
-const FooterLink = ({children, target, to}) => (
17
- <Link
18
- css={{
19
- lineHeight: 2,
20
- ':hover': {
21
- color: colors.brand,
22
- },
23
- }}
24
- to={to}
25
- target={target}>
26
- {children}
27
- </Link>
28
-);
29
-
30
-export default FooterLink;
www/src/components/LayoutFooter/FooterNav.js
deleted
-39
@@ -1,39 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import React from 'react';
13
-import {media} from 'theme';
14
-
15
-const FooterNav = ({children, title, layoutHasSidebar = false}) => (
16
- <div
17
- css={{
18
- display: 'flex',
19
- flexDirection: 'column',
20
- alignItems: 'flex-start',
21
- width: '50%',
22
- paddingTop: 40,
23
-
24
- [media.size('sidebarFixed')]: {
25
- paddingTop: 0,
26
- width: '25%',
27
- },
28
- }}>
29
- <div
30
- css={{
31
- display: 'inline-flex',
32
- flexDirection: 'column',
33
- }}>
34
- {children}
35
- </div>
36
- </div>
37
-);
38
-
39
-export default FooterNav;
www/src/components/LayoutFooter/index.js
deleted
-14
@@ -1,14 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import Footer from './Footer';
13
-
14
-export default Footer;
www/src/components/LayoutHeader/Header.js
deleted
-253
@@ -1,253 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import Container from 'components/Container';
13
-import HeaderLink from './HeaderLink';
14
-import Link from 'gatsby-link';
15
-import React from 'react';
16
-import {colors, fonts, media} from 'theme';
17
-import ExternalLinkSvg from 'templates/components/ExternalLinkSvg';
18
-
19
-import logoSvg from 'icons/logo.svg';
20
-
21
-// Note this version may point to an alpha/beta/next release.
22
-// This is how the previous Jekyll site determined version though.
23
-const {version} = require('../../../../package.json');
24
-
25
-const Header = ({location}) => (
26
- <header
27
- css={{
28
- backgroundColor: colors.darker,
29
- color: colors.white,
30
- position: 'fixed',
31
- zIndex: 1,
32
- width: '100%',
33
- top: 0,
34
- left: 0,
35
- }}>
36
- <Container>
37
- <div
38
- css={{
39
- display: 'flex',
40
- flexDirection: 'row',
41
- alignItems: 'center',
42
- height: 60,
43
- [media.between('small', 'large')]: {
44
- height: 50,
45
- },
46
- [media.lessThan('small')]: {
47
- height: 40,
48
- },
49
- }}>
50
- <Link
51
- css={{
52
- display: 'flex',
53
- marginRight: 10,
54
- height: '100%',
55
- alignItems: 'center',
56
-
57
- [media.greaterThan('small')]: {
58
- width: 'calc(100% / 6)',
59
- },
60
- [media.lessThan('small')]: {
61
- flex: '0 0 auto',
62
- },
63
- }}
64
- to="/">
65
- <img src={logoSvg} alt="" height="20" />
66
- <span
67
- css={{
68
- color: colors.brand,
69
- marginLeft: 10,
70
- fontWeight: 700,
71
- fontSize: 20,
72
- lineHeight: '20px',
73
- [media.lessThan('large')]: {
74
- fontSize: 16,
75
- marginTop: 1,
76
- },
77
- [media.lessThan('small')]: {
78
- // Visually hidden
79
- position: 'absolute',
80
- overflow: 'hidden',
81
- clip: 'rect(0 0 0 0)',
82
- height: 1,
83
- width: 1,
84
- margin: -1,
85
- padding: 0,
86
- border: 0,
87
- },
88
- }}>
89
- React
90
- </span>
91
- </Link>
92
-
93
- <nav
94
- css={{
95
- display: 'flex',
96
- flexDirection: 'row',
97
- alignItems: 'stretch',
98
- overflowX: 'auto',
99
- overflowY: 'hidden',
100
- WebkitOverflowScrolling: 'touch',
101
- height: '100%',
102
- width: '60%',
103
- [media.size('xsmall')]: {
104
- flexGrow: '1',
105
- width: 'auto',
106
- },
107
- [media.greaterThan('xlarge')]: {
108
- width: null,
109
- },
110
- [media.lessThan('small')]: {
111
- maskImage: 'linear-gradient(to right, transparent, black 20px, black 90%, transparent)',
112
- },
113
- }}>
114
- <HeaderLink
115
- isActive={location.pathname.includes('/docs/')}
116
- title="Docs"
117
- to="/docs/hello-world.html"
118
- />
119
- <HeaderLink
120
- isActive={location.pathname.includes('/tutorial/')}
121
- title="Tutorial"
122
- to="/tutorial/tutorial.html"
123
- />
124
- <HeaderLink
125
- isActive={location.pathname.includes('/community/')}
126
- title="Community"
127
- to="/community/support.html"
128
- />
129
- <HeaderLink
130
- isActive={location.pathname.includes('/blog')}
131
- title="Blog"
132
- to="/blog/"
133
- />
134
- </nav>
135
-
136
- <form
137
- css={{
138
- display: 'flex',
139
- flex: '0 0 auto',
140
- flexDirection: 'row',
141
- alignItems: 'center',
142
- paddingLeft: '0.5rem',
143
- paddingRight: '0.5rem',
144
-
145
- [media.lessThan('small')]: {
146
- justifyContent: 'flex-end',
147
- },
148
- [media.lessThan('large')]: {
149
- marginRight: 10,
150
- },
151
- [media.between('small', 'medium')]: {
152
- width: 'calc(100% / 3)',
153
- },
154
- [media.between('medium', 'xlarge')]: {
155
- width: 'calc(100% / 6)',
156
- },
157
- [media.greaterThan('small')]: {
158
- minWidth: 120,
159
- },
160
- }}>
161
- <input
162
- css={{
163
- appearance: 'none',
164
- background: 'transparent',
165
- border: 0,
166
- color: colors.white,
167
- fontSize: 18,
168
- fontWeight: 300,
169
- fontFamily: 'inherit',
170
- position: 'relative',
171
- paddingLeft: '24px',
172
- backgroundImage: 'url(/search.svg)',
173
- backgroundSize: '16px 16px',
174
- backgroundRepeat: 'no-repeat',
175
- backgroundPositionY: 'center',
176
- backgroundPositionX: 'left',
177
-
178
- [media.lessThan('large')]: {
179
- fontSize: 16,
180
- },
181
- [media.greaterThan('small')]: {
182
- width: '100%',
183
- },
184
- [media.lessThan('small')]: {
185
- width: '16px',
186
- transition: 'width 0.2s ease, padding 0.2s ease',
187
- paddingLeft: '16px',
188
-
189
- ':focus': {
190
- paddingLeft: '24px',
191
- width: '8rem',
192
- outline: 'none',
193
- },
194
- },
195
- }}
196
- id="algolia-doc-search"
197
- type="search"
198
- placeholder="Search docs"
199
- aria-label="Search docs"
200
- />
201
- </form>
202
-
203
- <div
204
- css={{
205
- [media.lessThan('medium')]: {
206
- display: 'none',
207
- },
208
- [media.greaterThan('large')]: {
209
- width: 'calc(100% / 6)',
210
- },
211
- }}>
212
- <a
213
- css={{
214
- padding: '5px 10px',
215
- backgroundColor: colors.lighter,
216
- borderRadius: 15,
217
- whiteSpace: 'nowrap',
218
- ...fonts.small,
219
- }}
220
- href="https://github.com/facebook/react/releases"
221
- target="_blank"
222
- rel="noopener">
223
- v{version}
224
- </a>
225
- <a
226
- css={{
227
- padding: '5px 10px',
228
- marginLeft: 10,
229
- whiteSpace: 'nowrap',
230
- ...fonts.small,
231
- ':hover': {
232
- color: colors.brand,
233
- },
234
- }}
235
- href="https://github.com/facebook/react/"
236
- target="_blank"
237
- rel="noopener">
238
- GitHub
239
- <ExternalLinkSvg
240
- cssProps={{
241
- marginLeft: 5,
242
- verticalAlign: -2,
243
- color: colors.subtle,
244
- }}
245
- />
246
- </a>
247
- </div>
248
- </div>
249
- </Container>
250
- </header>
251
-);
252
-
253
-export default Header;
www/src/components/LayoutHeader/HeaderLink.js
deleted
-74
@@ -1,74 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import Link from 'gatsby-link';
13
-import React from 'react';
14
-import {colors, media} from 'theme';
15
-
16
-const HeaderLink = ({isActive, title, to}) => (
17
- <Link css={[style, isActive && activeStyle]} to={to}>
18
- {title}
19
- {isActive && <span css={activeAfterStyle} />}
20
- </Link>
21
-);
22
-
23
-const style = {
24
- display: 'flex',
25
- flexDirection: 'row',
26
- alignItems: 'center',
27
- color: colors.white,
28
- transition: 'color 0.2s ease-out',
29
- paddingLeft: 15,
30
- paddingRight: 15,
31
- fontWeight: 300,
32
-
33
- [media.size('xsmall')]: {
34
- paddingLeft: 8,
35
- paddingRight: 8,
36
- },
37
-
38
- [media.between('small', 'medium')]: {
39
- paddingLeft: 10,
40
- paddingRight: 10,
41
- },
42
-
43
- [media.greaterThan('xlarge')]: {
44
- paddingLeft: 20,
45
- paddingRight: 20,
46
- fontSize: 18,
47
-
48
- ':hover': {
49
- color: colors.brand,
50
- },
51
- },
52
-};
53
-
54
-const activeStyle = {
55
- color: colors.brand,
56
-
57
- [media.greaterThan('small')]: {
58
- position: 'relative',
59
- },
60
-};
61
-
62
-const activeAfterStyle = {
63
- [media.greaterThan('small')]: {
64
- position: 'absolute',
65
- bottom: -1,
66
- height: 4,
67
- background: colors.brand,
68
- left: 0,
69
- right: 0,
70
- zIndex: 1,
71
- },
72
-};
73
-
74
-export default HeaderLink;
www/src/components/LayoutHeader/SearchSvg.js
deleted
-33
@@ -1,33 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import React from 'react';
13
-
14
-const SearchSvg = () => (
15
- <svg
16
- alt="Search"
17
- height="16"
18
- xmlns="http://www.w3.org/2000/svg"
19
- viewBox="0 0 16 16">
20
- <title>Search</title>
21
- <path
22
- d={`
23
- M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,
24
- 0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,
25
- 0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,
26
- 4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z
27
- `}
28
- fill="currentColor"
29
- />
30
- </svg>
31
-);
32
-
33
-export default SearchSvg;
www/src/components/LayoutHeader/index.js
deleted
-14
@@ -1,14 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import Header from './Header';
13
-
14
-export default Header;
www/src/components/MarkdownHeader/MarkdownHeader.js
deleted
-43
@@ -1,43 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import Flex from 'components/Flex';
13
-import PropTypes from 'prop-types';
14
-import React from 'react';
15
-import {colors, fonts, media} from 'theme';
16
-
17
-const MarkdownHeader = ({title}) => (
18
- <Flex type="header" halign="space-between" valign="baseline">
19
- <h1
20
- css={{
21
- color: colors.dark,
22
- marginBottom: 0,
23
- marginTop: 40,
24
- ...fonts.header,
25
-
26
- [media.size('medium')]: {
27
- marginTop: 60,
28
- },
29
-
30
- [media.greaterThan('large')]: {
31
- marginTop: 80,
32
- },
33
- }}>
34
- {title}
35
- </h1>
36
- </Flex>
37
-);
38
-
39
-MarkdownHeader.propTypes = {
40
- title: PropTypes.string.isRequired,
41
-};
42
-
43
-export default MarkdownHeader;
www/src/components/MarkdownHeader/index.js
deleted
-14
@@ -1,14 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import MarkdownHeader from './MarkdownHeader';
13
-
14
-export default MarkdownHeader;
www/src/components/MarkdownPage/MarkdownPage.js
deleted
-134
@@ -1,134 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import Container from 'components/Container';
13
-import Flex from 'components/Flex';
14
-import MarkdownHeader from 'components/MarkdownHeader';
15
-import NavigationFooter from 'templates/components/NavigationFooter';
16
-import PropTypes from 'prop-types';
17
-import React from 'react';
18
-import StickyResponsiveSidebar from 'components/StickyResponsiveSidebar';
19
-import TitleAndMetaTags from 'components/TitleAndMetaTags';
20
-import findSectionForPath from 'utils/findSectionForPath';
21
-import toCommaSeparatedList from 'utils/toCommaSeparatedList';
22
-import {sharedStyles} from 'theme';
23
-import createOgUrl from 'utils/createOgUrl';
24
-
25
-const MarkdownPage = ({
26
- authors,
27
- createLink,
28
- date,
29
- ogDescription,
30
- location,
31
- markdownRemark,
32
- sectionList,
33
- titlePostfix = '',
34
-}) => {
35
- const hasAuthors = authors.length > 0;
36
- const titlePrefix = markdownRemark.frontmatter.title || '';
37
-
38
- return (
39
- <Flex
40
- direction="column"
41
- grow="1"
42
- shrink="0"
43
- halign="stretch"
44
- css={{
45
- width: '100%',
46
- flex: '1 0 auto',
47
- position: 'relative',
48
- zIndex: 0,
49
- }}>
50
- <TitleAndMetaTags
51
- ogDescription={ogDescription}
52
- ogUrl={createOgUrl(markdownRemark.fields.slug)}
53
- title={`${titlePrefix}${titlePostfix}`}
54
- />
55
- <div css={{flex: '1 0 auto'}}>
56
- <Container>
57
- <div css={sharedStyles.articleLayout.container}>
58
- <Flex type="article" direction="column" grow="1" halign="stretch">
59
- <MarkdownHeader title={titlePrefix} />
60
-
61
- {(date || hasAuthors) &&
62
- <div css={{marginTop: 15}}>
63
- {date}{' '}
64
- {hasAuthors &&
65
- <span>
66
- by {toCommaSeparatedList(authors, author => (
67
- <a
68
- css={sharedStyles.link}
69
- href={author.frontmatter.url}
70
- key={author.frontmatter.name}>
71
- {author.frontmatter.name}
72
- </a>
73
- ))}
74
- </span>}
75
- </div>}
76
-
77
- <div css={sharedStyles.articleLayout.content}>
78
- <div
79
- css={[sharedStyles.markdown]}
80
- dangerouslySetInnerHTML={{__html: markdownRemark.html}}
81
- />
82
-
83
- {markdownRemark.fields.path &&
84
- <div css={{marginTop: 80}}>
85
- <a
86
- css={sharedStyles.articleLayout.editLink}
87
- href={`https://github.com/facebook/react/tree/master/docs/${markdownRemark.fields.path}`}>
88
- Edit this page
89
- </a>
90
- </div>}
91
- </div>
92
- </Flex>
93
-
94
- <div css={sharedStyles.articleLayout.sidebar}>
95
- <StickyResponsiveSidebar
96
- createLink={createLink}
97
- defaultActiveSection={findSectionForPath(
98
- location.pathname,
99
- sectionList,
100
- )}
101
- location={location}
102
- sectionList={sectionList}
103
- />
104
- </div>
105
- </div>
106
- </Container>
107
- </div>
108
-
109
- {/* TODO Read prev/next from index map, not this way */}
110
- {(markdownRemark.frontmatter.next || markdownRemark.frontmatter.prev) &&
111
- <NavigationFooter
112
- location={location}
113
- next={markdownRemark.frontmatter.next}
114
- prev={markdownRemark.frontmatter.prev}
115
- />}
116
- </Flex>
117
- );
118
-};
119
-
120
-MarkdownPage.defaultProps = {
121
- authors: [],
122
-};
123
-
124
-// TODO Better types
125
-MarkdownPage.propTypes = {
126
- authors: PropTypes.array.isRequired,
127
- createLink: PropTypes.func.isRequired,
128
- date: PropTypes.string,
129
- location: PropTypes.object.isRequired,
130
- markdownRemark: PropTypes.object.isRequired,
131
- sectionList: PropTypes.array.isRequired,
132
-};
133
-
134
-export default MarkdownPage;
www/src/components/MarkdownPage/index.js
deleted
-14
@@ -1,14 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import MarkdownPage from './MarkdownPage';
13
-
14
-export default MarkdownPage;
www/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js
deleted
-199
@@ -1,199 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import Container from 'components/Container';
13
-import {Component, React} from 'react';
14
-import Sidebar from 'templates/components/Sidebar';
15
-import {colors, media} from 'theme';
16
-import ChevronSvg from 'templates/components/ChevronSvg';
17
-
18
-class StickyResponsiveSidebar extends Component {
19
- constructor(props, context) {
20
- super(props, context);
21
-
22
- this.state = {
23
- open: false,
24
- };
25
- this._openNavMenu = this._openNavMenu.bind(this);
26
- this._closeNavMenu = this._closeNavMenu.bind(this);
27
- }
28
-
29
- _openNavMenu() {
30
- this.setState({open: !this.state.open});
31
- }
32
-
33
- _closeNavMenu() {
34
- this.setState({open: false});
35
- }
36
-
37
- render() {
38
- const {open} = this.state;
39
- const smallScreenSidebarStyles = {
40
- top: 0,
41
- left: 0,
42
- bottom: 0,
43
- right: 0,
44
- position: 'fixed',
45
- backgroundColor: colors.white,
46
- zIndex: 2,
47
- height: '100vh',
48
- overflowY: 'auto',
49
- WebkitOverflowScrolling: 'touch',
50
- pointerEvents: open ? 'auto' : 'none',
51
- };
52
-
53
- const smallScreenBottomBarStyles = {
54
- display: 'inline-block',
55
- };
56
-
57
- const iconOffset = open ? 8 : -4;
58
- const menuOpacity = open ? 1 : 0;
59
- const menuOffset = open ? 0 : 40;
60
-
61
- // TODO: role and aria props for 'close' button?
62
- return (
63
- <div>
64
- <div
65
- style={{
66
- opacity: menuOpacity,
67
- transition: 'opacity 0.5s ease',
68
- }}
69
- css={{
70
- [media.lessThan('small')]: smallScreenSidebarStyles,
71
-
72
- [media.greaterThan('medium')]: {
73
- marginRight: -999,
74
- paddingRight: 999,
75
- backgroundColor: '#f7f7f7',
76
- },
77
-
78
- [media.between('medium', 'sidebarFixed', true)]: {
79
- position: 'fixed',
80
- zIndex: 2,
81
- height: '100%',
82
- },
83
-
84
- [media.greaterThan('small')]: {
85
- position: 'fixed',
86
- zIndex: 2,
87
- height: 'calc(100vh - 60px)',
88
- overflowY: 'auto',
89
- WebkitOverflowScrolling: 'touch',
90
- marginRight: -999,
91
- paddingRight: 999,
92
- backgroundColor: '#f7f7f7',
93
- opacity: '1 !important',
94
- },
95
-
96
- [media.size('small')]: {
97
- height: 'calc(100vh - 40px)',
98
- },
99
-
100
- [media.between('medium', 'large')]: {
101
- height: 'calc(100vh - 50px)',
102
- },
103
-
104
- [media.greaterThan('sidebarFixed')]: {
105
- borderLeft: '1px solid #ececec',
106
- },
107
- }}>
108
- <div
109
- style={{
110
- transform: `translate(0px, ${menuOffset}px)`,
111
- transition: 'transform 0.5s ease',
112
- }}
113
- css={{
114
- marginTop: 60,
115
-
116
- [media.size('xsmall')]: {
117
- marginTop: 40,
118
- },
119
-
120
- [media.between('small', 'medium')]: {
121
- marginTop: 0,
122
- },
123
-
124
- [media.between('medium', 'large')]: {
125
- marginTop: 50,
126
- },
127
-
128
- [media.greaterThan('small')]: {
129
- tranform: 'none !important',
130
- },
131
- }}>
132
- <Sidebar closeParentMenu={this._closeNavMenu} {...this.props} />
133
- </div>
134
- </div>
135
- <div
136
- css={{
137
- backgroundColor: colors.darker,
138
- bottom: 44, // iOS Safari's inert "bottom 44px"
139
- color: colors.brand,
140
- display: 'none', // gets overriden at small screen sizes
141
- cursor: 'pointer',
142
- position: 'fixed',
143
- right: 20,
144
- zIndex: 3,
145
- borderRadius: '50%',
146
- border: '1px solid rgba(255, 255, 255, 0.1)',
147
- boxShadow: '0 0 20px rgba(0, 0, 0, 0.3)',
148
- [media.lessThan('small')]: smallScreenBottomBarStyles,
149
- }}
150
- onClick={this._openNavMenu}>
151
- <Container>
152
- <div
153
- css={{
154
- display: 'flex',
155
- flexDirection: 'row',
156
- alignItems: 'center',
157
- height: 60,
158
- [media.between('medium', 'large')]: {
159
- height: 50,
160
- },
161
- [media.lessThan('small')]: {
162
- height: 60,
163
- overflow: 'hidden',
164
- alignItems: 'flex-start',
165
- },
166
- }}>
167
- <div
168
- css={{
169
- width: 20,
170
- height: 20,
171
- alignSelf: 'center',
172
- display: 'flex',
173
- flexDirection: 'column',
174
- color: colors.brand,
175
- }}>
176
- <ChevronSvg
177
- size={15}
178
- cssProps={{
179
- transform: `translate(2px, ${iconOffset}px) rotate(180deg)`,
180
- transition: 'transform 0.2s ease',
181
- }}
182
- />
183
- <ChevronSvg
184
- size={15}
185
- cssProps={{
186
- transform: `translate(2px, ${0 - iconOffset}px)`,
187
- transition: 'transform 0.2s ease',
188
- }}
189
- />
190
- </div>
191
- </div>
192
- </Container>
193
- </div>
194
- </div>
195
- );
196
- }
197
-}
198
-
199
-export default StickyResponsiveSidebar;
www/src/components/StickyResponsiveSidebar/index.js
deleted
-14
@@ -1,14 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import StickyResponsiveSidebar from './StickyResponsiveSidebar';
13
-
14
-export default StickyResponsiveSidebar;
www/src/components/TitleAndMetaTags/TitleAndMetaTags.js
deleted
-33
@@ -1,33 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import Helmet from 'react-helmet';
13
-import React from 'react';
14
-
15
-const defaultDescription = 'A JavaScript library for building user interfaces';
16
-
17
-const TitleAndMetaTags = ({title, ogDescription, ogUrl}) => {
18
- return (
19
- <Helmet title={title}>
20
- <meta property="og:title" content={title} />
21
- <meta property="og:type" content="website" />
22
- {ogUrl && <meta property="og:url" content={ogUrl} />}
23
- <meta property="og:image" content="/logo-og.png" />
24
- <meta
25
- property="og:description"
26
- content={ogDescription || defaultDescription}
27
- />
28
- <meta property="fb:app_id" content="623268441017527" />
29
- </Helmet>
30
- );
31
-};
32
-
33
-export default TitleAndMetaTags;
www/src/components/TitleAndMetaTags/index.js
deleted
-14
@@ -1,14 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import TitleAndMetaTags from './TitleAndMetaTags';
13
-
14
-export default TitleAndMetaTags;
www/src/css/algolia.css
deleted
-453
@@ -1,453 +0,0 @@
1
-/* Styles forked from Algolia */
2
-
3
-.searchbox {
4
- display: inline-block;
5
- position: relative;
6
- width: 200px;
7
- height: 32px !important;
8
- white-space: nowrap;
9
- box-sizing: border-box;
10
- visibility: visible !important;
11
-}
12
-
13
-.searchbox .algolia-autocomplete {
14
- display: block;
15
- width: 100%;
16
- height: 100%;
17
-}
18
-
19
-.searchbox__wrapper {
20
- width: 100%;
21
- height: 100%;
22
- z-index: 999;
23
- position: relative;
24
-}
25
-
26
-.searchbox__input {
27
- display: inline-block;
28
- box-sizing: border-box;
29
- -webkit-transition: box-shadow .4s ease, background .4s ease;
30
- transition: box-shadow .4s ease, background .4s ease;
31
- border: 0;
32
- border-radius: 16px;
33
- box-shadow: inset 0 0 0 1px #CCCCCC;
34
- background: #FFFFFF !important;
35
- padding: 0;
36
- padding-right: 26px;
37
- padding-left: 32px;
38
- width: 100%;
39
- height: 100%;
40
- vertical-align: middle;
41
- white-space: normal;
42
- font-size: 12px;
43
- -webkit-appearance: none;
44
- -moz-appearance: none;
45
- appearance: none;
46
-}
47
-
48
-.searchbox__input::-webkit-search-decoration, .searchbox__input::-webkit-search-cancel-button, .searchbox__input::-webkit-search-results-button, .searchbox__input::-webkit-search-results-decoration {
49
- display: none;
50
-}
51
-
52
-.searchbox__input:hover {
53
- box-shadow: inset 0 0 0 1px #b3b3b3;
54
-}
55
-
56
-.searchbox__input:focus, .searchbox__input:active {
57
- outline: 0;
58
- box-shadow: inset 0 0 0 1px #AAAAAA;
59
- background: #FFFFFF;
60
-}
61
-
62
-.searchbox__input::-webkit-input-placeholder {
63
- color: #AAAAAA;
64
-}
65
-
66
-.searchbox__input::-moz-placeholder {
67
- color: #AAAAAA;
68
-}
69
-
70
-.searchbox__input:-ms-input-placeholder {
71
- color: #AAAAAA;
72
-}
73
-
74
-.searchbox__input::placeholder {
75
- color: #AAAAAA;
76
-}
77
-
78
-.searchbox__submit {
79
- position: absolute;
80
- top: 0;
81
- margin: 0;
82
- border: 0;
83
- border-radius: 16px 0 0 16px;
84
- background-color: rgba(69, 142, 225, 0);
85
- padding: 0;
86
- width: 32px;
87
- height: 100%;
88
- vertical-align: middle;
89
- text-align: center;
90
- font-size: inherit;
91
- -webkit-user-select: none;
92
- -moz-user-select: none;
93
- -ms-user-select: none;
94
- user-select: none;
95
- right: inherit;
96
- left: 0;
97
-}
98
-
99
-.searchbox__submit::before {
100
- display: inline-block;
101
- margin-right: -4px;
102
- height: 100%;
103
- vertical-align: middle;
104
- content: '';
105
-}
106
-
107
-.searchbox__submit:hover, .searchbox__submit:active {
108
- cursor: pointer;
109
-}
110
-
111
-.searchbox__submit:focus {
112
- outline: 0;
113
-}
114
-
115
-.searchbox__submit svg {
116
- width: 14px;
117
- height: 14px;
118
- vertical-align: middle;
119
- fill: #6D7E96;
120
-}
121
-
122
-.searchbox__reset {
123
- display: block;
124
- position: absolute;
125
- top: 8px;
126
- right: 8px;
127
- margin: 0;
128
- border: 0;
129
- background: none;
130
- cursor: pointer;
131
- padding: 0;
132
- font-size: inherit;
133
- -webkit-user-select: none;
134
- -moz-user-select: none;
135
- -ms-user-select: none;
136
- user-select: none;
137
- fill: rgba(0, 0, 0, 0.5);
138
-}
139
-
140
-.searchbox__reset.hide {
141
- display: none;
142
-}
143
-
144
-.searchbox__reset:focus {
145
- outline: 0;
146
-}
147
-
148
-.searchbox__reset svg {
149
- display: block;
150
- margin: 4px;
151
- width: 8px;
152
- height: 8px;
153
-}
154
-
155
-.searchbox__input:valid ~ .searchbox__reset {
156
- display: block;
157
- -webkit-animation-name: sbx-reset-in;
158
- animation-name: sbx-reset-in;
159
- -webkit-animation-duration: .15s;
160
- animation-duration: .15s;
161
-}
162
-
163
-@-webkit-keyframes sbx-reset-in {
164
- 0% {
165
- -webkit-transform: translate3d(-20%, 0, 0);
166
- transform: translate3d(-20%, 0, 0);
167
- opacity: 0;
168
- }
169
- 100% {
170
- -webkit-transform: none;
171
- transform: none;
172
- opacity: 1;
173
- }
174
-}
175
-
176
-@keyframes sbx-reset-in {
177
- 0% {
178
- -webkit-transform: translate3d(-20%, 0, 0);
179
- transform: translate3d(-20%, 0, 0);
180
- opacity: 0;
181
- }
182
- 100% {
183
- -webkit-transform: none;
184
- transform: none;
185
- opacity: 1;
186
- }
187
-}
188
-
189
-
190
-.algolia-autocomplete .ds-dropdown-menu:before {
191
- display: block;
192
- position: absolute;
193
- content: '';
194
- width: 14px;
195
- height: 14px;
196
- background: #373940;
197
- z-index: 1000;
198
- top: -7px;
199
- border-top: 1px solid #373940;
200
- border-right: 1px solid #373940;
201
- -webkit-transform: rotate(-45deg);
202
- transform: rotate(-45deg);
203
- border-radius: 2px;
204
-}
205
-
206
-.algolia-autocomplete .ds-dropdown-menu {
207
- box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
208
-}
209
-
210
-@media (min-width: 601px) {
211
- .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu {
212
- right: 0 !important;
213
- left: inherit !important;
214
- }
215
-
216
- .algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu:before {
217
- right: 48px;
218
- }
219
-
220
- .algolia-autocomplete .ds-dropdown-menu {
221
- position: relative;
222
- top: -6px;
223
- border-radius: 4px;
224
- margin: 6px 0 0;
225
- padding: 0;
226
- text-align: left;
227
- height: auto;
228
- position: relative;
229
- background: transparent;
230
- border: none;
231
- z-index: 999;
232
- max-width: 600px;
233
- min-width: 500px;
234
- }
235
-}
236
-
237
-@media (max-width: 600px) {
238
- .algolia-autocomplete .ds-dropdown-menu {
239
- z-index: 100;
240
- position: fixed !important;
241
- top: 40px !important;
242
- left: auto !important;
243
- right: 1rem !important;
244
- width: 600px;
245
- max-width: calc(100% - 2rem);
246
- max-height: calc(100% - 5rem);
247
- display: block;
248
- }
249
-
250
- .algolia-autocomplete .ds-dropdown-menu:before {
251
- right: 6rem;
252
- }
253
-}
254
-
255
-.algolia-autocomplete .ds-dropdown-menu .ds-suggestions {
256
- position: relative;
257
- z-index: 1000;
258
-}
259
-
260
-.algolia-autocomplete .ds-dropdown-menu .ds-suggestion {
261
- cursor: pointer;
262
-}
263
-
264
-.algolia-autocomplete .ds-dropdown-menu [class^="ds-dataset-"] {
265
- position: relative;
266
- background: #fff;
267
- border-radius: 4px;
268
- overflow: auto;
269
- padding: 0;
270
-}
271
-
272
-.algolia-autocomplete .ds-dropdown-menu * {
273
- box-sizing: border-box;
274
-}
275
-
276
-.algolia-autocomplete .algolia-docsearch-suggestion {
277
- position: relative;
278
- padding: 0;
279
- overflow: hidden;
280
-}
281
-
282
-.algolia-autocomplete .ds-cursor .algolia-docsearch-suggestion--wrapper {
283
- background: #f1f1f1;
284
- box-shadow: inset -2px 0 0 #61dafb;
285
-}
286
-
287
-.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
288
- background: #ffe564;
289
- padding: 0.1em 0.05em;
290
-}
291
-
292
-.algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl0 .algolia-docsearch-suggestion--highlight,
293
-.algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl1 .algolia-docsearch-suggestion--highlight {
294
- color: inherit;
295
- background: inherit;
296
-}
297
-
298
-.algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
299
- padding: 0 0 1px;
300
- background: inherit;
301
- box-shadow: inset 0 -2px 0 0 rgba(69, 142, 225, 0.8);
302
- color: inherit;
303
-}
304
-
305
-.algolia-autocomplete .algolia-docsearch-suggestion--content {
306
- display: block;
307
- float: right;
308
- width: 70%;
309
- position: relative;
310
- padding: 5.33333px 0 5.33333px 10.66667px;
311
- cursor: pointer;
312
-}
313
-
314
-.algolia-autocomplete .algolia-docsearch-suggestion--content:before {
315
- content: '';
316
- position: absolute;
317
- display: block;
318
- top: 0;
319
- height: 100%;
320
- width: 1px;
321
- background: #ececec;
322
- left: -1px;
323
-}
324
-
325
-.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
326
- position: relative;
327
- display: none;
328
- font-size: 14px;
329
- letter-spacing: 0.08em;
330
- font-weight: 700;
331
- background-color: #373940;
332
- text-transform: uppercase;
333
- color: #fff;
334
- margin: 0;
335
- padding: 5px 8px;
336
-}
337
-
338
-.algolia-autocomplete .algolia-docsearch-suggestion--wrapper {
339
- width: 100%;
340
- float: left;
341
- padding: 8px 0 0 0;
342
-}
343
-
344
-.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
345
- float: left;
346
- width: 30%;
347
- display: none;
348
- padding-left: 0;
349
- text-align: right;
350
- position: relative;
351
- padding: 5.33333px 10.66667px;
352
- color: #777;
353
- font-size: 0.9em;
354
- word-wrap: break-word;
355
-}
356
-
357
-.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column:before {
358
- content: '';
359
- position: absolute;
360
- display: block;
361
- top: 0;
362
- height: 100%;
363
- width: 1px;
364
- background: #ececec;
365
- right: 0;
366
-}
367
-
368
-.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column .algolia-docsearch-suggestion--highlight {
369
- background-color: inherit;
370
- color: inherit;
371
-}
372
-
373
-.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-inline {
374
- display: none;
375
-}
376
-
377
-.algolia-autocomplete .algolia-docsearch-suggestion--title {
378
- margin-bottom: 4px;
379
- color: #02060C;
380
- font-size: 0.9em;
381
- font-weight: bold;
382
-}
383
-
384
-.algolia-autocomplete .algolia-docsearch-suggestion--text {
385
- display: block;
386
- line-height: 1.2em;
387
- font-size: 0.85em;
388
- color: #63676D;
389
- padding-right: 2px;
390
-}
391
-
392
-.algolia-autocomplete .algolia-docsearch-suggestion--no-results {
393
- width: 100%;
394
- padding: 8px 0;
395
- text-align: center;
396
- font-size: 1.2em;
397
- background-color: #373940;
398
- margin-top: -8px;
399
-}
400
-
401
-.algolia-autocomplete .algolia-docsearch-suggestion--no-results .algolia-docsearch-suggestion--text {
402
- color: #ffffff;
403
- margin-top: 4px;
404
-}
405
-
406
-.algolia-autocomplete .algolia-docsearch-suggestion--no-results::before {
407
- display: none;
408
-}
409
-
410
-.algolia-autocomplete .algolia-docsearch-suggestion code {
411
- padding: 1px 5px;
412
- font-size: 90%;
413
- border: none;
414
- color: #222222;
415
- background-color: #EBEBEB;
416
- border-radius: 3px;
417
- font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
418
-}
419
-
420
-.algolia-autocomplete .algolia-docsearch-suggestion code .algolia-docsearch-suggestion--highlight {
421
- background: none;
422
-}
423
-
424
-.algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__main .algolia-docsearch-suggestion--category-header {
425
- display: block;
426
-}
427
-
428
-.algolia-autocomplete .algolia-docsearch-suggestion.algolia-docsearch-suggestion__secondary .algolia-docsearch-suggestion--subcategory-column {
429
- display: block;
430
-}
431
-
432
-
433
-.algolia-autocomplete .algolia-docsearch-footer {
434
- width: 110px;
435
- height: 30px;
436
- z-index: 2000;
437
- float: right;
438
- font-size: 0;
439
- line-height: 0;
440
-}
441
-
442
-.algolia-autocomplete .algolia-docsearch-footer--logo {
443
- background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130 18"><defs><linearGradient id="a" x1="-36.87%" x2="129.43%" y1="134.94%" y2="-27.7%"><stop stop-color="#00AEFF" offset="0%"/><stop stop-color="#3369E7" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path fill="url(#a)" d="M59.4.02h13.3a2.37 2.37 0 0 1 2.38 2.37V15.6a2.37 2.37 0 0 1-2.38 2.36H59.4a2.37 2.37 0 0 1-2.38-2.36V2.38A2.37 2.37 0 0 1 59.4.02z"/><path fill="#FFF" d="M66.26 4.56c-2.82 0-5.1 2.27-5.1 5.08 0 2.8 2.28 5.07 5.1 5.07 2.8 0 5.1-2.26 5.1-5.07 0-2.8-2.28-5.07-5.1-5.07zm0 8.65c-2 0-3.6-1.6-3.6-3.56 0-1.97 1.6-3.58 3.6-3.58 1.98 0 3.6 1.6 3.6 3.58a3.58 3.58 0 0 1-3.6 3.57zm0-6.4v2.66c0 .07.08.13.15.1l2.4-1.24c.04-.02.06-.1.03-.14a2.96 2.96 0 0 0-2.46-1.5c-.06 0-.1.05-.1.1zm-3.33-1.96l-.3-.3a.78.78 0 0 0-1.12 0l-.36.36a.77.77 0 0 0 0 1.1l.3.3c.05.05.13.04.17 0 .2-.25.4-.5.6-.7.23-.23.46-.43.7-.6.07-.04.07-.1.03-.16zm5-.8V3.4a.78.78 0 0 0-.78-.78h-1.83a.78.78 0 0 0-.78.78v.63c0 .07.06.12.14.1a5.74 5.74 0 0 1 1.58-.22c.52 0 1.04.07 1.54.2a.1.1 0 0 0 .13-.1z"/><path fill="#182359" d="M102.16 13.76c0 1.46-.37 2.52-1.12 3.2-.75.67-1.9 1-3.44 1-.56 0-1.74-.1-2.67-.3l.34-1.7c.78.17 1.82.2 2.36.2.86 0 1.48-.16 1.84-.5.37-.36.55-.88.55-1.57v-.35a6.37 6.37 0 0 1-.84.3 4.15 4.15 0 0 1-1.2.17 4.5 4.5 0 0 1-1.6-.28 3.38 3.38 0 0 1-1.26-.82 3.74 3.74 0 0 1-.8-1.35c-.2-.54-.3-1.5-.3-2.2 0-.67.1-1.5.3-2.06a3.92 3.92 0 0 1 .9-1.43 4.12 4.12 0 0 1 1.45-.92 5.3 5.3 0 0 1 1.94-.37c.7 0 1.35.1 1.97.2a15.86 15.86 0 0 1 1.6.33v8.46zm-5.95-4.2c0 .9.2 1.88.6 2.3.4.4.9.62 1.53.62.34 0 .66-.05.96-.15a2.75 2.75 0 0 0 .73-.33V6.7a8.53 8.53 0 0 0-1.42-.17c-.76-.02-1.36.3-1.77.8-.4.5-.62 1.4-.62 2.23zm16.13 0c0 .72-.1 1.26-.32 1.85a4.4 4.4 0 0 1-.9 1.53c-.38.42-.85.75-1.4.98-.54.24-1.4.37-1.8.37-.43 0-1.27-.13-1.8-.36a4.1 4.1 0 0 1-1.4-.97 4.5 4.5 0 0 1-.92-1.52 5.04 5.04 0 0 1-.33-1.84c0-.72.1-1.4.32-2 .22-.6.53-1.1.92-1.5.4-.43.86-.75 1.4-.98a4.55 4.55 0 0 1 1.78-.34 4.7 4.7 0 0 1 1.8.34c.54.23 1 .55 1.4.97.38.42.68.92.9 1.5.23.6.35 1.3.35 2zm-2.2 0c0-.92-.2-1.7-.6-2.22-.38-.54-.94-.8-1.64-.8-.72 0-1.27.26-1.67.8-.4.54-.58 1.3-.58 2.22 0 .93.2 1.56.6 2.1.38.54.94.8 1.64.8s1.25-.26 1.65-.8c.4-.55.6-1.17.6-2.1zm6.97 4.7c-3.5.02-3.5-2.8-3.5-3.27L113.57.92l2.15-.34v10c0 .25 0 1.87 1.37 1.88v1.8zm3.77 0h-2.15v-9.2l2.15-.33v9.54zM119.8 3.74c.7 0 1.3-.58 1.3-1.3 0-.7-.58-1.3-1.3-1.3-.73 0-1.3.6-1.3 1.3 0 .72.58 1.3 1.3 1.3zm6.43 1c.7 0 1.3.1 1.78.27.5.18.88.42 1.17.73.28.3.5.74.6 1.18.13.46.2.95.2 1.5v5.47a25.24 25.24 0 0 1-1.5.25c-.67.1-1.42.15-2.25.15a6.83 6.83 0 0 1-1.52-.16 3.2 3.2 0 0 1-1.18-.5 2.46 2.46 0 0 1-.76-.9c-.18-.37-.27-.9-.27-1.44 0-.52.1-.85.3-1.2.2-.37.48-.67.83-.9a3.6 3.6 0 0 1 1.23-.5 7.07 7.07 0 0 1 2.2-.1l.83.16v-.35c0-.25-.03-.48-.1-.7a1.5 1.5 0 0 0-.3-.58c-.15-.18-.34-.3-.58-.4a2.54 2.54 0 0 0-.92-.17c-.5 0-.94.06-1.35.13-.4.08-.75.16-1 .25l-.27-1.74c.27-.1.67-.18 1.2-.28a9.34 9.34 0 0 1 1.65-.14zm.18 7.74c.66 0 1.15-.04 1.5-.1V10.2a5.1 5.1 0 0 0-2-.1c-.23.03-.45.1-.64.2a1.17 1.17 0 0 0-.47.38c-.13.17-.18.26-.18.52 0 .5.17.8.5.98.32.2.74.3 1.3.3zM84.1 4.8c.72 0 1.3.08 1.8.26.48.17.87.42 1.15.73.3.3.5.72.6 1.17.14.45.2.94.2 1.47v5.48a25.24 25.24 0 0 1-1.5.26c-.67.1-1.42.14-2.25.14a6.83 6.83 0 0 1-1.52-.16 3.2 3.2 0 0 1-1.18-.5 2.46 2.46 0 0 1-.76-.9c-.18-.38-.27-.9-.27-1.44 0-.53.1-.86.3-1.22.2-.36.5-.65.84-.88a3.6 3.6 0 0 1 1.24-.5 7.07 7.07 0 0 1 2.2-.1c.26.03.54.08.84.15v-.35c0-.24-.03-.48-.1-.7a1.5 1.5 0 0 0-.3-.58c-.15-.17-.34-.3-.58-.4a2.54 2.54 0 0 0-.9-.15c-.5 0-.96.05-1.37.12-.4.07-.75.15-1 .24l-.26-1.75c.27-.08.67-.17 1.18-.26a8.9 8.9 0 0 1 1.66-.15zm.2 7.73c.65 0 1.14-.04 1.48-.1v-2.17a5.1 5.1 0 0 0-1.98-.1c-.24.03-.46.1-.65.18a1.17 1.17 0 0 0-.47.4c-.12.17-.17.26-.17.52 0 .5.18.8.5.98.32.2.75.3 1.3.3zm8.68 1.74c-3.5 0-3.5-2.82-3.5-3.28L89.45.92 91.6.6v10c0 .25 0 1.87 1.38 1.88v1.8z"/><path fill="#1D3657" d="M5.03 11.03c0 .7-.26 1.24-.76 1.64-.5.4-1.2.6-2.1.6-.88 0-1.6-.14-2.17-.42v-1.2c.36.16.74.3 1.14.38.4.1.78.15 1.13.15.5 0 .88-.1 1.12-.3a.94.94 0 0 0 .35-.77.98.98 0 0 0-.33-.74c-.22-.2-.68-.44-1.37-.72-.72-.3-1.22-.62-1.52-1C.23 8.27.1 7.82.1 7.3c0-.65.22-1.17.7-1.55.46-.37 1.08-.56 1.86-.56.76 0 1.5.16 2.25.48l-.4 1.05c-.7-.3-1.32-.44-1.87-.44-.4 0-.73.08-.94.26a.9.9 0 0 0-.33.72c0 .2.04.38.12.52.08.15.22.3.42.4.2.14.55.3 1.06.52.58.24 1 .47 1.27.67.27.2.47.44.6.7.12.26.18.57.18.92zM9 13.27c-.92 0-1.64-.27-2.16-.8-.52-.55-.78-1.3-.78-2.24 0-.97.24-1.73.72-2.3.5-.54 1.15-.82 2-.82.78 0 1.4.25 1.85.72.46.48.7 1.14.7 1.97v.67H7.35c0 .58.17 1.02.46 1.33.3.3.7.47 1.24.47.36 0 .68-.04.98-.1a5.1 5.1 0 0 0 .98-.33v1.02a3.87 3.87 0 0 1-.94.32 5.72 5.72 0 0 1-1.08.1zm-.22-5.2c-.4 0-.73.12-.97.38s-.37.62-.42 1.1h2.7c0-.48-.13-.85-.36-1.1-.23-.26-.54-.38-.94-.38zm7.7 5.1l-.26-.84h-.05c-.28.36-.57.6-.86.74-.28.13-.65.2-1.1.2-.6 0-1.05-.16-1.38-.48-.32-.32-.5-.77-.5-1.34 0-.62.24-1.08.7-1.4.45-.3 1.14-.47 2.07-.5l1.02-.03V9.2c0-.37-.1-.65-.27-.84-.17-.2-.45-.28-.82-.28-.3 0-.6.04-.88.13a6.68 6.68 0 0 0-.8.33l-.4-.9a4.4 4.4 0 0 1 1.05-.4 4.86 4.86 0 0 1 1.08-.12c.76 0 1.33.18 1.7.5.4.33.6.85.6 1.56v4h-.9zm-1.9-.87c.47 0 .83-.13 1.1-.38.3-.26.43-.62.43-1.08v-.52l-.76.03c-.6.03-1.02.13-1.3.3s-.4.45-.4.82c0 .26.08.47.24.6.16.16.4.23.7.23zm7.57-5.2c.25 0 .46.03.62.06l-.12 1.18a2.38 2.38 0 0 0-.56-.06c-.5 0-.92.16-1.24.5-.3.32-.47.75-.47 1.27v3.1h-1.27V7.23h1l.16 1.05h.05c.2-.36.45-.64.77-.85a1.83 1.83 0 0 1 1.02-.3zm4.12 6.17c-.9 0-1.58-.27-2.05-.8-.47-.52-.7-1.27-.7-2.25 0-1 .24-1.77.73-2.3.5-.54 1.2-.8 2.12-.8.63 0 1.2.1 1.7.34l-.4 1c-.52-.2-.96-.3-1.3-.3-1.04 0-1.55.68-1.55 2.05 0 .67.13 1.17.38 1.5.26.34.64.5 1.13.5a3.23 3.23 0 0 0 1.6-.4v1.1a2.53 2.53 0 0 1-.73.28 4.36 4.36 0 0 1-.93.08zm8.28-.1h-1.27V9.5c0-.45-.1-.8-.28-1.02-.18-.23-.47-.34-.88-.34-.53 0-.9.16-1.16.48-.25.3-.38.85-.38 1.6v2.94h-1.26V4.8h1.26v2.12c0 .34-.02.7-.06 1.1h.08a1.76 1.76 0 0 1 .72-.67c.3-.16.66-.24 1.07-.24 1.43 0 2.15.74 2.15 2.2v3.86zM42.2 7.1c.74 0 1.32.28 1.73.82.4.53.62 1.3.62 2.26 0 .97-.2 1.73-.63 2.27-.42.54-1 .82-1.75.82s-1.33-.27-1.75-.8h-.08l-.23.7h-.94V4.8h1.26v2l-.02.64-.03.56h.05c.4-.6 1-.9 1.78-.9zm-.33 1.04c-.5 0-.88.15-1.1.45-.22.3-.34.8-.35 1.5v.08c0 .72.12 1.24.35 1.57.23.32.6.48 1.12.48.44 0 .78-.17 1-.53.24-.35.36-.87.36-1.53 0-1.35-.47-2.03-1.4-2.03zm3.24-.92h1.4l1.2 3.37c.18.47.3.92.36 1.34h.04l.18-.72 1.37-4H51l-2.53 6.73c-.46 1.23-1.23 1.85-2.3 1.85-.3 0-.56-.03-.83-.1v-1c.2.05.4.08.65.08.6 0 1.03-.36 1.28-1.06l.22-.56-2.4-5.94z"/></g></svg>');
444
- background-repeat: no-repeat;
445
- background-position: center;
446
- background-size: 100%;
447
- overflow: hidden;
448
- text-indent: -9000px;
449
- width: 100%;
450
- height: 100%;
451
- display: block;
452
- margin-left: -5px;
453
-}
www/src/css/reset.css
deleted
-42
@@ -1,42 +0,0 @@
1
-html {
2
- box-sizing: border-box;
3
- font-family: -apple-system, BlinkMacSystemFont,
4
- "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
5
- "Fira Sans", "Droid Sans", "Helvetica Neue",
6
- sans-serif;
7
- font-weight: 400;
8
- font-style: normal;
9
- -webkit-font-smoothing: antialiased;
10
-}
11
-
12
-body {
13
- overflow-x: hidden;
14
- position: relative;
15
-}
16
-
17
-* {
18
- margin: 0;
19
- padding: 0;
20
-}
21
-
22
-*, *::before, *::after {
23
- box-sizing: inherit;
24
-}
25
-
26
-a {
27
- color: inherit;
28
- text-decoration: none;
29
-}
30
-
31
-ul, ol {
32
- list-style: none;
33
-}
34
-
35
-img {
36
- display: inline-block;
37
- vertical-align: top;
38
-}
39
-
40
-pre, code {
41
- font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
42
-}
www/src/html.js
deleted
-66
@@ -1,66 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import React, {Component} from 'react';
13
-
14
-let stylesStr;
15
-if (process.env.NODE_ENV === `production`) {
16
- try {
17
- stylesStr = require(`!raw-loader!../public/styles.css`);
18
- } catch (e) {
19
- console.log(e);
20
- }
21
-}
22
-
23
-const JS_NPM_URLS = [
24
- '//unpkg.com/docsearch.js@2.4.1/dist/cdn/docsearch.min.js',
25
- '//unpkg.com/babel-standalone@6.26.0/babel.min.js',
26
-];
27
-
28
-export default class HTML extends Component {
29
- render() {
30
- let css;
31
- if (process.env.NODE_ENV === 'production') {
32
- css = (
33
- <style
34
- id="gatsby-inlined-css"
35
- dangerouslySetInnerHTML={{__html: stylesStr}}
36
- />
37
- );
38
- }
39
-
40
- const js = JS_NPM_URLS.map(url => <script key={url} src={url} />);
41
-
42
- return (
43
- <html lang="en">
44
- <head>
45
- <meta charSet="utf-8" />
46
- <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
47
- <meta
48
- name="viewport"
49
- content="width=device-width, initial-scale=1.0"
50
- />
51
- <link rel="icon" href="/favicon.ico" />
52
- {this.props.headComponents}
53
- {js}
54
- {css}
55
- </head>
56
- <body>
57
- <div
58
- id="___gatsby"
59
- dangerouslySetInnerHTML={{__html: this.props.body}}
60
- />
61
- {this.props.postBodyComponents}
62
- </body>
63
- </html>
64
- );
65
- }
66
-}
www/src/icons/logo.svg
deleted
-1
@@ -1 +0,0 @@
1
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 20.46348"><title>logo</title><path d="M18.9107,6.63257h0q-.36721-.126-.74042-.2333.06187-.25141.11441-.505c.56045-2.72064.194-4.91237-1.05739-5.63386-1.1998-.692-3.1621.02952-5.14394,1.75414q-.29293.2555-.57267.52554-.18727-.17951-.3811-.352C9.05257.3439,6.97066-.43316,5.72058.29046,4.52191.98436,4.16686,3.04489,4.67144,5.62322q.0753.383.17.76179c-.29458.08367-.57908.17284-.85127.26771C1.55514,7.50165,0,8.83225,0,10.21231c0,1.42546,1.66935,2.8552,4.20575,3.722q.3085.10494.62193.19442-.10179.408-.18068.82114c-.48106,2.53354-.10535,4.54521,1.09017,5.23484,1.23481.712,3.30725-.01985,5.32533-1.78387q.23926-.20917.47994-.44238.3029.29225.62173.56727c1.95477,1.68207,3.88531,2.36132,5.07982,1.66986,1.23369-.71416,1.63454-2.87525,1.114-5.50459q-.05955-.30124-.13792-.61481.21834-.06443.42772-.13355C21.28454,13.06915,23,11.65681,23,10.21232,23,8.82726,21.39478,7.48771,18.9107,6.63257ZM12.7284,2.75581C14.42646,1.278,16.01346.69457,16.73657,1.1116h0c.77014.44421,1.06971,2.2354.5858,4.58441q-.04758.22953-.10342.45724a23.53752,23.53752,0,0,0-3.07527-.48584A23.08128,23.08128,0,0,0,12.1995,3.24094Q12.45788,2.99184,12.7284,2.75581ZM6.79111,11.39124q.312.60265.65207,1.19013.34692.59911.7221,1.18117a20.92168,20.92168,0,0,1-2.11967-.3408C6.24867,12.766,6.49887,12.08443,6.79111,11.39124ZM6.79,9.08041c-.28613-.67863-.53093-1.34586-.73085-1.99019.65624-.14688,1.356-.26689,2.08516-.358q-.36611.571-.7051,1.15877Q7.10076,8.478,6.79,9.08041Zm.52228,1.15552q.45411-.94517.9783-1.8542v.0002q.52369-.90857,1.11521-1.77542c.684-.05171,1.38536-.07879,2.09432-.07879.71212,0,1.41437.02728,2.09819.0794q.58514.86487,1.10818,1.76941.52565.90635.99153,1.84545-.46083.94817-.98828,1.86173h-.0001q-.52261.90786-1.1034,1.7803c-.6824.04876-1.3876.0739-2.10623.0739-.71568,0-1.41193-.02229-2.08241-.06575q-.59555-.86995-1.12406-1.78305Q7.76789,11.18148,7.31227,10.23593Zm8.24853,2.33862q.347-.60182.667-1.21863h0a20.86671,20.86671,0,0,1,.77238,2.02327,20.85164,20.85164,0,0,1-2.14552.36573Q15.21935,13.16682,15.5608,12.57455Zm.65767-3.49343q-.31883-.605-.66163-1.19684h0q-.33727-.58258-.6994-1.15022c.7339.09263,1.437.21579,2.09717.36654A20.95909,20.95909,0,0,1,16.21847,9.08112ZM11.511,3.94359a21.01288,21.01288,0,0,1,1.3535,1.63393q-1.35843-.06419-2.7184-.00061C10.593,4.98765,11.0507,4.44022,11.511,3.94359ZM6.21284,1.14081c.76953-.44543,2.47095.18973,4.26428,1.782.11461.10179.22974.20836.34507.3186A23.54542,23.54542,0,0,0,8.86294,5.66608a24.008,24.008,0,0,0-3.06916.477q-.088-.35228-.15808-.70866v.0001C5.20339,3.22536,5.49044,1.559,6.21284,1.14081ZM5.09132,13.18233q-.286-.08187-.56778-.17773A8.32371,8.32371,0,0,1,1.841,11.57955a2.03072,2.03072,0,0,1-.85849-1.36724c0-.83742,1.24865-1.90571,3.33117-2.63178q.39208-.1361.79162-.24908a23.56455,23.56455,0,0,0,1.121,2.90478A23.92247,23.92247,0,0,0,5.09132,13.18233ZM10.41594,17.661a8.32161,8.32161,0,0,1-2.57467,1.61184h-.0001a2.03042,2.03042,0,0,1-1.61306.06067c-.72556-.41836-1.02706-2.03376-.61573-4.20035q.07337-.38407.168-.76363a23.10444,23.10444,0,0,0,3.0995.44869,23.90954,23.90954,0,0,0,1.97431,2.43929Q10.64,17.46459,10.41594,17.661Zm1.12223-1.11053c-.46569-.50253-.93015-1.05831-1.38383-1.65612q.66051.026,1.34566.02606.70326,0,1.38841-.03084A20.89425,20.89425,0,0,1,11.53817,16.55045Zm5.96651,1.367a2.03039,2.03039,0,0,1-.753,1.4278c-.72485.41958-2.275-.12581-3.94659-1.56431q-.2875-.24735-.57837-.52727a23.08914,23.08914,0,0,0,1.9279-2.448,22.93647,22.93647,0,0,0,3.11507-.48014q.07024.284.12449.55638h0A8.32,8.32,0,0,1,17.50468,17.91749Zm.83417-4.90739h-.0001c-.12571.04163-.25478.08184-.38629.12082a23.06121,23.06121,0,0,0-1.16468-2.91373,23.05112,23.05112,0,0,0,1.11938-2.87128c.23524.0682.46365.14.68372.21579,2.12842.73258,3.42665,1.81593,3.42665,2.65061C22.01753,11.10145,20.61538,12.25574,18.33885,13.0101Z" fill="#61dafb"/><path d="M11.5,8.1585a2.05386,2.05386,0,1,1-2.05381,2.05381A2.05381,2.05381,0,0,1,11.5,8.1585" fill="#61dafb"/></svg>
\ No newline at end of file
www/src/images/oss_logo.png
Binary files a/www/src/images/oss_logo.png and /dev/null differ
www/src/layouts/index.js
deleted
-85
@@ -1,85 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-// Polyfills for IE
13
-import 'array-from';
14
-import 'string.prototype.includes';
15
-import 'string.prototype.repeat';
16
-
17
-import React, {Component} from 'react';
18
-import Flex from 'components/Flex';
19
-import Footer from 'components/LayoutFooter';
20
-import Header from 'components/LayoutHeader';
21
-import {media} from 'theme';
22
-
23
-// Import global styles
24
-import '../prism-styles';
25
-import 'glamor/reset';
26
-import 'css/reset.css';
27
-import 'css/algolia.css';
28
-
29
-class Template extends Component {
30
- componentDidMount() {
31
- // Initialize Algolia search.
32
- // TODO Is this expensive? Should it be deferred until a user is about to search?
33
- // eslint-disable-next-line no-undef
34
- docsearch({
35
- apiKey: '36221914cce388c46d0420343e0bb32e',
36
- indexName: 'react',
37
- inputSelector: '#algolia-doc-search',
38
- });
39
- }
40
-
41
- render() {
42
- const {children, location} = this.props;
43
-
44
- // TODO - is there a better way to check if we need we have a sidebar?
45
- let layoutHasSidebar = false;
46
- if (
47
- location.pathname.match(
48
- /^\/(docs|tutorial|community|blog|contributing|warnings)/,
49
- )
50
- ) {
51
- layoutHasSidebar = true;
52
- }
53
-
54
- return (
55
- <div
56
- css={{
57
- display: 'flex',
58
- flexDirection: 'column',
59
- minHeight: 'calc(100vh - 40px)',
60
- }}>
61
- <Header location={location} />
62
- <Flex
63
- direction="column"
64
- shrink="0"
65
- grow="1"
66
- valign="stretch"
67
- css={{
68
- flex: '1 0 auto',
69
- marginTop: 60,
70
- [media.between('medium', 'large')]: {
71
- marginTop: 50,
72
- },
73
- [media.lessThan('medium')]: {
74
- marginTop: 40,
75
- },
76
- }}>
77
- {children()}
78
- </Flex>
79
- <Footer layoutHasSidebar={layoutHasSidebar} />
80
- </div>
81
- );
82
- }
83
-}
84
-
85
-export default Template;
www/src/pages/404.js
deleted
-36
@@ -1,36 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import Container from 'components/Container';
13
-import Header from 'components/Header';
14
-import React from 'react';
15
-import {sharedStyles} from 'theme';
16
-
17
-const PageNotFound = () => (
18
- <Container>
19
- <div css={sharedStyles.articleLayout.container}>
20
- <div css={sharedStyles.articleLayout.content}>
21
- <Header>Page Not Found</Header>
22
- <div css={sharedStyles.markdown}>
23
- <p>
24
- We couldn't find what you were looking for.
25
- </p>
26
- <p>
27
- Please contact the owner of the site that linked you
28
- to the original URL and let them know their link is broken.
29
- </p>
30
- </div>
31
- </div>
32
- </div>
33
- </Container>
34
-);
35
-
36
-export default PageNotFound;
www/src/pages/acknowledgements.html.js
deleted
-102
@@ -1,102 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import Container from 'components/Container';
13
-import Header from 'components/Header';
14
-import React from 'react';
15
-import {sharedStyles} from 'theme';
16
-
17
-import names from '../../../docs/_data/acknowledgements.yml';
18
-
19
-const Acknowlegements = ({data, location}) => (
20
- <Container>
21
- <div css={sharedStyles.articleLayout.container}>
22
- <div css={sharedStyles.articleLayout.content}>
23
- <Header>Acknowledgements</Header>
24
-
25
- <div css={sharedStyles.markdown}>
26
- <p>We'd like to thank all of our contributors:</p>
27
-
28
- <ul
29
- css={{
30
- display: 'flex',
31
- flexWrap: 'wrap',
32
- }}>
33
- {names.map((name, index) => (
34
- <li
35
- css={{
36
- flex: '1 0 200px',
37
- }}
38
- key={index}>
39
- {name}
40
- </li>
41
- ))}
42
- </ul>
43
-
44
- <p>In addition, we're grateful to</p>
45
- <ul>
46
- <li>
47
- <a href="https://github.com/jeffbski">Jeff Barczewski</a>
48
- {' '}
49
- for allowing us to use the
50
- {' '}
51
- <a href="https://www.npmjs.com/package/react">react</a>
52
- {' '}
53
- package name on npm.
54
- </li>
55
- <li>
56
- <a href="http://christopheraue.net/">Christopher Aue</a>
57
- {' '}
58
- for letting us use the
59
- {' '}
60
- <a href="http://reactjs.com/">reactjs.com</a>
61
- {' '}
62
- domain name and the
63
- {' '}
64
- <a href="https://twitter.com/reactjs">@reactjs</a>
65
- {' '}
66
- username on Twitter.
67
- </li>
68
- <li>
69
- <a href="https://github.com/ProjectMoon">ProjectMoon</a>
70
- {' '}
71
- for letting us use the
72
- {' '}
73
- <a href="https://www.npmjs.com/package/flux">flux</a>
74
- {' '}
75
- package name on npm.
76
- </li>
77
- <li>
78
- Shane Anderson for allowing us to use the
79
- {' '}
80
- <a href="https://github.com/react">react</a>
81
- {' '}
82
- org on GitHub.
83
- </li>
84
- <li>
85
- <a href="https://github.com/voronianski">Dmitri Voronianski</a>
86
- {' '}
87
- for letting us use the
88
- {' '}
89
- <a href="https://labs.voronianski.com/oceanic-next-color-scheme/">
90
- Oceanic Next
91
- </a>
92
- {' '}
93
- color scheme on this website.
94
- </li>
95
- </ul>
96
- </div>
97
- </div>
98
- </div>
99
- </Container>
100
-);
101
-
102
-export default Acknowlegements;
www/src/pages/blog/all.html.js
deleted
-120
@@ -1,120 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import Link from 'gatsby-link';
13
-import Container from 'components/Container';
14
-import Header from 'components/Header';
15
-import React from 'react';
16
-import {colors, media, sharedStyles} from 'theme';
17
-import toCommaSeparatedList from 'utils/toCommaSeparatedList';
18
-import MetaTitle from 'templates/components/MetaTitle';
19
-
20
-const AllBlogPosts = ({data}) => (
21
- <Container>
22
- <div css={sharedStyles.articleLayout.container}>
23
- <div css={sharedStyles.articleLayout.content}>
24
- <Header>All Posts</Header>
25
- <ul
26
- css={{
27
- display: 'flex',
28
- flexWrap: 'wrap',
29
- marginLeft: -40,
30
- }}>
31
- {data.allMarkdownRemark.edges.map(({node}) => (
32
- <li
33
- css={{
34
- paddingLeft: 40,
35
- paddingTop: 40,
36
- borderTop: '1px dotted #ececec',
37
- paddingBottom: 40,
38
- width: '100%',
39
-
40
- [media.size('medium')]: {
41
- width: '50%',
42
- },
43
-
44
- [media.greaterThan('large')]: {
45
- width: '33.33%',
46
- },
47
- }}
48
- key={node.fields.slug}>
49
- <h2
50
- css={{
51
- fontSize: 24,
52
- color: colors.dark,
53
- lineHeight: 1.3,
54
- fontWeight: 700,
55
- }}>
56
- <Link
57
- css={{
58
- borderBottom: '1px solid #ececec',
59
- ':hover': {
60
- borderBottomColor: colors.black,
61
- },
62
- }}
63
- key={node.fields.slug}
64
- to={node.fields.slug}>
65
- {node.frontmatter.title}
66
- </Link>
67
- </h2>
68
- <MetaTitle>
69
- {node.fields.date}
70
- </MetaTitle>
71
- <div
72
- css={{
73
- color: colors.subtle,
74
- marginTop: -5,
75
- }}>
76
- by
77
- {' '}
78
- {toCommaSeparatedList(node.frontmatter.author, author => (
79
- <span key={author.frontmatter.name}>
80
- {author.frontmatter.name}
81
- </span>
82
- ))}
83
- </div>
84
- </li>
85
- ))}
86
- </ul>
87
- </div>
88
- </div>
89
- </Container>
90
-);
91
-
92
-// eslint-disable-next-line no-undef
93
-export const pageQuery = graphql`
94
- query AllBlogPostsPageQuery {
95
- allMarkdownRemark(
96
- filter: { id: { regex: "/_posts/" } }
97
- sort: { fields: [fields___date], order: DESC }
98
- ) {
99
- edges {
100
- node {
101
- frontmatter {
102
- title
103
- author {
104
- frontmatter {
105
- name
106
- url
107
- }
108
- }
109
- }
110
- fields {
111
- date(formatString: "MMMM DD, YYYY")
112
- slug
113
- }
114
- }
115
- }
116
- }
117
- }
118
-`;
119
-
120
-export default AllBlogPosts;
www/src/pages/docs/error-decoder.html.js
deleted
-110
@@ -1,110 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import Container from 'components/Container';
13
-import ErrorDecoder from 'components/ErrorDecoder';
14
-import Flex from 'components/Flex';
15
-import hex2rgba from 'hex2rgba';
16
-import MarkdownHeader from 'components/MarkdownHeader';
17
-import React from 'react';
18
-import StickyResponsiveSidebar from 'components/StickyResponsiveSidebar';
19
-import {colors, sharedStyles} from 'theme';
20
-import {createLinkDocs} from 'utils/createLink';
21
-import findSectionForPath from 'utils/findSectionForPath';
22
-import {sectionListDocs} from 'utils/sectionList';
23
-
24
-const ErrorPage = ({data, location}) => (
25
- <Flex
26
- direction="column"
27
- grow="1"
28
- shrink="0"
29
- halign="stretch"
30
- css={{
31
- width: '100%',
32
- flex: '1 0 auto',
33
- position: 'relative',
34
- zIndex: 0,
35
- }}>
36
- <Container>
37
- <div css={sharedStyles.articleLayout.container}>
38
-
39
- <Flex
40
- type="article"
41
- direction="column"
42
- grow="1"
43
- halign="stretch"
44
- css={{
45
- minHeight: 'calc(100vh - 40px)',
46
- }}>
47
- <MarkdownHeader
48
- path={data.markdownRemark.fields.path}
49
- title={data.markdownRemark.frontmatter.title}
50
- />
51
-
52
- <div css={sharedStyles.articleLayout.content}>
53
- <div
54
- css={sharedStyles.markdown}
55
- dangerouslySetInnerHTML={{__html: data.markdownRemark.html}}
56
- />
57
- <div
58
- css={[
59
- sharedStyles.markdown,
60
- {
61
- marginTop: 30,
62
- '& code': {
63
- display: 'block',
64
- marginTop: 30,
65
- padding: '1rem',
66
- borderRadius: '0.5rem',
67
- backgroundColor: hex2rgba(colors.error, 0.1),
68
- color: colors.error,
69
- },
70
- },
71
- ]}>
72
- <ErrorDecoder location={location} />
73
- </div>
74
- </div>
75
- </Flex>
76
-
77
- <div css={sharedStyles.articleLayout.sidebar}>
78
- <StickyResponsiveSidebar
79
- createLink={createLinkDocs}
80
- defaultActiveSection={findSectionForPath(
81
- location.pathname,
82
- sectionListDocs,
83
- )}
84
- location={location}
85
- sectionList={sectionListDocs}
86
- title={data.markdownRemark.frontmatter.title}
87
- />
88
- </div>
89
-
90
- </div>
91
- </Container>
92
- </Flex>
93
-);
94
-
95
-// eslint-disable-next-line no-undef
96
-export const pageQuery = graphql`
97
- query ErrorPageMarkdown($slug: String!) {
98
- markdownRemark(fields: { slug: { eq: $slug } }) {
99
- html
100
- fields {
101
- path
102
- }
103
- frontmatter {
104
- title
105
- }
106
- }
107
- }
108
-`;
109
-
110
-export default ErrorPage;
www/src/pages/favicon.ico
Binary files a/www/src/pages/favicon.ico and /dev/null differ
www/src/pages/robots.txt
deleted
-2
@@ -1,2 +0,0 @@
1
-User-agent: *
2
-Disallow:
www/src/prism-styles.js
deleted
-171
@@ -1,171 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import {css} from 'glamor';
13
-import {colors} from 'theme';
14
-
15
-const prismColors = {
16
- char: '#D8DEE9',
17
- comment: '#999999',
18
- keyword: '#c5a5c5',
19
- lineHighlight: '#14161a',
20
- primitive: '#5a9bcf',
21
- string: '#8dc891',
22
- variable: '#d7deea',
23
- boolean: '#ff8b50',
24
- punctuation: '#5FB3B3',
25
- tag: '#fc929e',
26
- function: '#79b6f2',
27
- className: '#FAC863',
28
- method: '#6699CC',
29
- operator: '#fc929e',
30
-};
31
-
32
-css.global('.gatsby-highlight', {
33
- background: colors.dark,
34
- color: colors.white,
35
- borderRadius: 10,
36
- overflow: 'auto',
37
- tabSize: '1.5em',
38
-});
39
-
40
-css.global(
41
- `
42
-.gatsby-highlight code[class*="gatsby-code-"],
43
-.gatsby-highlight pre[class*="gatsby-code-"],
44
-.gatsby-highlight pre.prism-code`,
45
- {
46
- height: 'auto !important',
47
- margin: '1rem',
48
- fontSize: 14,
49
- lineHeight: '20px',
50
- whiteSpace: 'pre-wrap',
51
- wordBreak: 'break-word',
52
- },
53
-);
54
-
55
-css.global('.gatsby-highlight + .gatsby-highlight', {
56
- marginTop: 20,
57
-});
58
-
59
-css.global('.gatsby-highlight-code-line', {
60
- backgroundColor: prismColors.lineHighlight,
61
- display: 'block',
62
- margin: '-0.125rem calc(-1rem - 15px)',
63
- padding: '0.125rem calc(1rem + 15px)',
64
-});
65
-
66
-css.global('.token.attr-name', {
67
- color: prismColors.keyword,
68
-});
69
-
70
-css.global(
71
- `
72
-.token.comment,
73
-.token.block-comment,
74
-.token.prolog,
75
-.token.doctype,
76
-.token.cdata`,
77
- {
78
- color: prismColors.comment,
79
- },
80
-);
81
-
82
-css.global(
83
- `
84
-.token.property,
85
-.token.number,
86
-.token.function-name,
87
-.token.constant,
88
-.token.symbol,
89
-.token.deleted`,
90
- {
91
- color: prismColors.primitive,
92
- },
93
-);
94
-
95
-css.global(`.token.boolean`, {
96
- color: prismColors.boolean,
97
-});
98
-
99
-css.global(`.token.tag`, {
100
- color: prismColors.tag,
101
-});
102
-
103
-css.global(`.token.string`, {
104
- color: prismColors.string,
105
-});
106
-
107
-css.global(`.token.punctuation`, {
108
- color: prismColors.punctuation,
109
-});
110
-
111
-css.global(
112
- `
113
-.token.selector,
114
-.token.char,
115
-.token.builtin,
116
-.token.inserted`,
117
- {
118
- color: prismColors.char,
119
- },
120
-);
121
-
122
-css.global(`.token.function`, {
123
- color: prismColors.function,
124
-});
125
-
126
-css.global(
127
- `
128
-.token.operator,
129
-.token.entity,
130
-.token.url,
131
-.token.variable`,
132
- {
133
- color: prismColors.variable,
134
- },
135
-);
136
-
137
-css.global('.token.attr-value', {
138
- color: prismColors.string,
139
-});
140
-
141
-css.global('.token.keyword', {
142
- color: prismColors.keyword,
143
-});
144
-
145
-css.global(
146
- `
147
-.token.atrule,
148
-.token.class-name`,
149
- {
150
- color: prismColors.className,
151
- },
152
-);
153
-
154
-css.global('.token.important', {
155
- fontWeight: 400,
156
-});
157
-
158
-css.global('.token.bold', {
159
- fontWeight: 700,
160
-});
161
-css.global('.token.italic', {
162
- fontStyle: 'italic',
163
-});
164
-
165
-css.global('.token.entity', {
166
- cursor: 'help',
167
-});
168
-
169
-css.global('.namespace', {
170
- opacity: 0.7,
171
-});
www/src/site-constants.js
deleted
-21
@@ -1,21 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
- * @flow
9
-*/
10
-
11
-'use strict';
12
-
13
-/**
14
- * Variables shared by multiple components.
15
- */
16
-
17
-export default {
18
- // NOTE: We can't just use `location.toString()` because when we are rendering
19
- // the SSR part in node.js we won't have a proper location.
20
- urlRoot: 'https://reactjs.org',
21
-};
www/src/templates/blog.js
deleted
-91
@@ -1,91 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import PropTypes from 'prop-types';
13
-import React from 'react';
14
-import MarkdownPage from 'components/MarkdownPage';
15
-import {createLinkBlog} from 'utils/createLink';
16
-
17
-const toSectionList = allMarkdownRemark => [
18
- {
19
- title: 'Recent Posts',
20
- items: allMarkdownRemark.edges
21
- .map(({node}) => ({
22
- id: node.fields.slug,
23
- title: node.frontmatter.title,
24
- }))
25
- .concat({
26
- id: '/blog/all.html',
27
- title: 'All posts ...',
28
- }),
29
- },
30
-];
31
-
32
-const Blog = ({data, location}) => (
33
- <MarkdownPage
34
- authors={data.markdownRemark.frontmatter.author}
35
- createLink={createLinkBlog}
36
- date={data.markdownRemark.fields.date}
37
- location={location}
38
- ogDescription={data.markdownRemark.excerpt}
39
- markdownRemark={data.markdownRemark}
40
- sectionList={toSectionList(data.allMarkdownRemark)}
41
- titlePostfix=" - React Blog"
42
- />
43
-);
44
-
45
-Blog.propTypes = {
46
- data: PropTypes.object.isRequired,
47
-};
48
-
49
-// eslint-disable-next-line no-undef
50
-export const pageQuery = graphql`
51
- query TemplateBlogMarkdown($slug: String!) {
52
- markdownRemark(fields: { slug: { eq: $slug } }) {
53
- html
54
- excerpt(pruneLength: 500)
55
- frontmatter {
56
- title
57
- next
58
- prev
59
- author {
60
- frontmatter {
61
- name
62
- url
63
- }
64
- }
65
- }
66
- fields {
67
- date(formatString: "MMMM DD, YYYY")
68
- path
69
- slug
70
- }
71
- }
72
- allMarkdownRemark(
73
- limit: 10,
74
- filter: { id: { regex: "/_posts/" } }
75
- sort: { fields: [fields___date], order: DESC }
76
- ) {
77
- edges {
78
- node {
79
- frontmatter {
80
- title
81
- }
82
- fields {
83
- slug
84
- }
85
- }
86
- }
87
- }
88
- }
89
-`;
90
-
91
-export default Blog;
www/src/templates/community.js
deleted
-50
@@ -1,50 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import MarkdownPage from 'components/MarkdownPage';
13
-import PropTypes from 'prop-types';
14
-import React from 'react';
15
-import {createLinkCommunity} from 'utils/createLink';
16
-import {sectionListCommunity} from 'utils/sectionList';
17
-
18
-const Community = ({data, location}) => (
19
- <MarkdownPage
20
- createLink={createLinkCommunity}
21
- location={location}
22
- markdownRemark={data.markdownRemark}
23
- sectionList={sectionListCommunity}
24
- titlePostfix=" - React"
25
- />
26
-);
27
-
28
-Community.propTypes = {
29
- data: PropTypes.object.isRequired,
30
-};
31
-
32
-// eslint-disable-next-line no-undef
33
-export const pageQuery = graphql`
34
- query TemplateCommunityMarkdown($slug: String!) {
35
- markdownRemark(fields: { slug: { eq: $slug } }) {
36
- html
37
- frontmatter {
38
- title
39
- next
40
- prev
41
- }
42
- fields {
43
- path
44
- slug
45
- }
46
- }
47
- }
48
-`;
49
-
50
-export default Community;
www/src/templates/components/ButtonLink/ButtonLink.js
deleted
-87
@@ -1,87 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import Link from 'gatsby-link';
13
-import React from 'react';
14
-import {colors, media} from 'theme';
15
-
16
-const ArrowSvg = ({cssProps = {}}) => (
17
- <svg
18
- css={cssProps}
19
- height="12"
20
- xmlns="http://www.w3.org/2000/svg"
21
- viewBox="0 0 4.53657 8.69699">
22
- <path
23
- d={`
24
- M.18254,8.697a.18149.18149,0,0,1-.12886-.31034L4.09723,4.34126.05369.29954a.18149.18149,
25
- 0,0,1,.2559-.2559L4.4838,4.21785a.18149.18149,0,0,1,0,.2559L.30958,8.648A.18149.18149,
26
- 0,0,1,.18254,8.697Z
27
- `}
28
- fill="currentColor"
29
- />
30
- </svg>
31
-);
32
-
33
-const ButtonLink = ({children, type, ...rest}) => {
34
- let typeStyle;
35
- switch (type) {
36
- case 'primary':
37
- typeStyle = primaryStyle;
38
- break;
39
- case 'secondary':
40
- typeStyle = secondaryStyle;
41
- break;
42
- }
43
-
44
- return (
45
- <Link {...rest} css={[style, typeStyle]}>
46
- {children}
47
- {type === 'secondary' && <ArrowSvg cssProps={{marginLeft: 10}} />}
48
- </Link>
49
- );
50
-};
51
-
52
-const style = {
53
- display: 'inline-block',
54
- fontSize: 16,
55
-
56
- [media.greaterThan('xlarge')]: {
57
- fontSize: 20,
58
- },
59
-};
60
-
61
-const primaryStyle = {
62
- backgroundColor: colors.brand,
63
- color: colors.black,
64
- padding: '10px 25px',
65
- whiteSpace: 'nowrap',
66
- transition: 'background-color 0.2s ease-out',
67
-
68
- [media.greaterThan('xlarge')]: {
69
- paddingTop: 15,
70
- paddingBottom: 15,
71
- },
72
-
73
- ':hover': {
74
- backgroundColor: colors.white,
75
- },
76
-};
77
-
78
-const secondaryStyle = {
79
- color: colors.brand,
80
- transition: 'color 0.2s ease-out',
81
-
82
- ':hover': {
83
- color: colors.white,
84
- },
85
-};
86
-
87
-export default ButtonLink;
www/src/templates/components/ButtonLink/index.js
deleted
-14
@@ -1,14 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import ButtonLink from './ButtonLink';
13
-
14
-export default ButtonLink;
www/src/templates/components/ChevronSvg/index.js
deleted
-41
@@ -1,41 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import React from 'react';
13
-
14
-const ChevronSvg = ({size = 10, cssProps = {}}) => (
15
- <svg
16
- css={cssProps}
17
- viewBox="0 0 926.23699 573.74994"
18
- version="1.1"
19
- x="0px"
20
- y="0px"
21
- width={size}
22
- height={size}>
23
- <g transform="translate(904.92214,-879.1482)">
24
- <path
25
- d={`
26
- m -673.67664,1221.6502 -231.2455,-231.24803 55.6165,
27
- -55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894,
28
- 0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892,
29
- -174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696,
30
- -174.68583 0.6895,0 26.281,25.03215 56.8701,
31
- 55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864
32
- -231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688,
33
- -104.0616 -231.873,-231.248 z
34
- `}
35
- fill="currentColor"
36
- />
37
- </g>
38
- </svg>
39
-);
40
-
41
-export default ChevronSvg;
www/src/templates/components/ExternalLinkSvg/index.js
deleted
-39
@@ -1,39 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import React from 'react';
13
-
14
-const ExternalLinkSvg = ({cssProps = {}}) => (
15
- <svg
16
- x="0px"
17
- y="0px"
18
- viewBox="0 0 100 100"
19
- width={15}
20
- height={15}
21
- css={cssProps}>
22
- <path
23
- fill="currentColor"
24
- d={`
25
- M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,
26
- 0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z
27
- `}
28
- />
29
- <polygon
30
- fill="currentColor"
31
- points={`
32
- 45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,
33
- 14.9 62.8,22.9 71.5,22.9
34
- `}
35
- />
36
- </svg>
37
-);
38
-
39
-export default ExternalLinkSvg;
www/src/templates/components/MetaTitle/index.js
deleted
-38
@@ -1,38 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import React from 'react';
13
-import {colors} from 'theme';
14
-
15
-const MetaTitle = ({
16
- children,
17
- title,
18
- cssProps = {},
19
- onClick,
20
- onDark = false,
21
-}) => (
22
- <div
23
- onClick={onClick}
24
- css={{
25
- color: onDark ? colors.subtleOnDark : colors.subtle,
26
- cursor: onClick ? 'pointer' : null,
27
- fontSize: 14,
28
- fontWeight: 700,
29
- lineHeight: 3,
30
- textTransform: 'uppercase',
31
- letterSpacing: '0.08em',
32
- ...cssProps,
33
- }}>
34
- {children}
35
- </div>
36
-);
37
-
38
-export default MetaTitle;
www/src/templates/components/NavigationFooter/NavigationFooter.js
deleted
-134
@@ -1,134 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import Container from 'components/Container';
13
-import Flex from 'components/Flex';
14
-import Link from 'gatsby-link';
15
-import PropTypes from 'prop-types';
16
-import React from 'react';
17
-import {colors, fonts, media} from 'theme';
18
-
19
-const NavigationFooter = ({next, prev, location}) => {
20
- return (
21
- <div
22
- css={{
23
- background: colors.dark,
24
- color: colors.white,
25
- paddingTop: 50,
26
- paddingBottom: 50,
27
- }}>
28
- <Container>
29
- <Flex
30
- type="ul"
31
- halign="space-between"
32
- css={{
33
- [media.between('small', 'medium')]: {
34
- paddingRight: 240,
35
- },
36
-
37
- [media.between('large', 'largerSidebar')]: {
38
- paddingRight: 280,
39
- },
40
-
41
- [media.between('largerSidebar', 'sidebarFixed', true)]: {
42
- paddingRight: 380,
43
- },
44
- }}>
45
- <Flex basis="50%" type="li">
46
- {prev &&
47
- <div>
48
- <SecondaryLabel>Previous article</SecondaryLabel>
49
- <div
50
- css={{
51
- paddingTop: 10,
52
- }}>
53
- <PrimaryLink location={location} to={prev}>
54
- {linkToTitle(prev)}
55
- </PrimaryLink>
56
- </div>
57
- </div>}
58
- </Flex>
59
- {next &&
60
- <Flex
61
- halign="flex-end"
62
- basis="50%"
63
- type="li"
64
- css={{
65
- textAlign: 'right',
66
- }}>
67
- <div>
68
- <SecondaryLabel>Next article</SecondaryLabel>
69
- <div
70
- css={{
71
- paddingTop: 10,
72
- }}>
73
- <PrimaryLink location={location} to={next}>
74
- {linkToTitle(next)}
75
- </PrimaryLink>
76
- </div>
77
- </div>
78
- </Flex>}
79
- </Flex>
80
- </Container>
81
- </div>
82
- );
83
-};
84
-
85
-NavigationFooter.propTypes = {
86
- next: PropTypes.string,
87
- prev: PropTypes.string,
88
-};
89
-
90
-export default NavigationFooter;
91
-
92
-const linkToTitle = link => link.replace(/-/g, ' ').replace('.html', '');
93
-
94
-const PrimaryLink = ({children, to, location}) => {
95
- // quick fix
96
- // TODO: replace this with better method of getting correct full url
97
- const updatedUrl =
98
- (location && location.pathname.replace(/\/[^/]+\.html/, '/' + to)) || to;
99
- return (
100
- <Link
101
- css={{
102
- display: 'inline',
103
- textTransform: 'capitalize',
104
- borderColor: colors.subtle,
105
- transition: 'border-color 0.2s ease',
106
- fontSize: 30,
107
- borderBottomWidth: 1,
108
- borderBottomStyle: 'solid',
109
-
110
- [media.lessThan('large')]: {
111
- fontSize: 24,
112
- },
113
- [media.size('xsmall')]: {
114
- fontSize: 16,
115
- },
116
- ':hover': {
117
- borderColor: colors.white,
118
- },
119
- }}
120
- to={updatedUrl}>
121
- {children}
122
- </Link>
123
- );
124
-};
125
-
126
-const SecondaryLabel = ({children}) => (
127
- <div
128
- css={{
129
- color: colors.brand,
130
- ...fonts.small,
131
- }}>
132
- {children}
133
- </div>
134
-);
www/src/templates/components/NavigationFooter/index.js
deleted
-14
@@ -1,14 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import NavigationFooter from './NavigationFooter';
13
-
14
-export default NavigationFooter;
www/src/templates/components/Sidebar/Section.js
deleted
-95
@@ -1,95 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
- */
9
-
10
-'use strict';
11
-
12
-import React from 'react';
13
-import {colors, media} from 'theme';
14
-import MetaTitle from '../MetaTitle';
15
-import ChevronSvg from '../ChevronSvg';
16
-
17
-// TODO Update isActive link as document scrolls past anchor tags
18
-// Maybe used 'hashchange' along with 'scroll' to set/update active links
19
-
20
-const Section = ({
21
- createLink,
22
- isActive,
23
- location,
24
- onLinkClick,
25
- onSectionTitleClick,
26
- section,
27
-}) => (
28
- <div>
29
- <MetaTitle
30
- onClick={onSectionTitleClick}
31
- cssProps={{
32
- marginTop: 10,
33
-
34
- [media.greaterThan('small')]: {
35
- color: isActive ? colors.text : colors.subtle,
36
-
37
- ':hover': {
38
- color: colors.text,
39
- },
40
- },
41
- }}>
42
- {section.title}
43
- <ChevronSvg
44
- cssProps={{
45
- marginLeft: 7,
46
- transform: isActive ? 'rotateX(180deg)' : 'rotateX(0deg)',
47
- transition: 'transform 0.2s ease',
48
-
49
- [media.lessThan('small')]: {
50
- display: 'none',
51
- },
52
- }}
53
- />
54
- </MetaTitle>
55
- <ul
56
- css={{
57
- marginBottom: 10,
58
-
59
- [media.greaterThan('small')]: {
60
- display: isActive ? 'block' : 'none',
61
- },
62
- }}>
63
- {section.items.map(item => (
64
- <li
65
- key={item.id}
66
- css={{
67
- marginTop: 5,
68
- }}>
69
- {createLink({
70
- item,
71
- location,
72
- onLinkClick,
73
- section,
74
- })}
75
-
76
- {item.subitems &&
77
- <ul css={{marginLeft: 20}}>
78
- {item.subitems.map(subitem => (
79
- <li key={subitem.id}>
80
- {createLink({
81
- item: subitem,
82
- location,
83
- onLinkClick,
84
- section,
85
- })}
86
- </li>
87
- ))}
88
- </ul>}
89
- </li>
90
- ))}
91
- </ul>
92
- </div>
93
-);
94
-
95
-export default Section;
www/src/templates/components/Sidebar/Sidebar.js
deleted
-70
@@ -1,70 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
- */
9
-
10
-'use strict';
11
-
12
-import React, {Component} from 'react';
13
-import Flex from 'components/Flex';
14
-import Section from './Section';
15
-import {media} from 'theme';
16
-
17
-class Sidebar extends Component {
18
- constructor(props, context) {
19
- super(props, context);
20
-
21
- this.state = {
22
- activeSection: props.defaultActiveSection,
23
- };
24
- }
25
-
26
- render() {
27
- const {closeParentMenu, createLink, location, sectionList} = this.props;
28
- const {activeSection} = this.state;
29
-
30
- return (
31
- <Flex
32
- type="nav"
33
- direction="column"
34
- halign="stretch"
35
- css={{
36
- width: '100%',
37
- paddingLeft: 20,
38
- position: 'relative',
39
-
40
- [media.greaterThan('largerSidebar')]: {
41
- paddingLeft: 40,
42
- },
43
-
44
- [media.lessThan('small')]: {
45
- paddingBottom: 100,
46
- },
47
- }}>
48
- {sectionList.map((section, index) => (
49
- <Section
50
- createLink={createLink}
51
- isActive={activeSection === section || sectionList.length === 1}
52
- key={index}
53
- location={location}
54
- onLinkClick={closeParentMenu}
55
- onSectionTitleClick={() => this._toggleSection(section)}
56
- section={section}
57
- />
58
- ))}
59
- </Flex>
60
- );
61
- }
62
-
63
- _toggleSection(section) {
64
- this.setState(state => ({
65
- activeSection: state.activeSection === section ? null : section,
66
- }));
67
- }
68
-}
69
-
70
-export default Sidebar;
www/src/templates/components/Sidebar/index.js
deleted
-14
@@ -1,14 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import Sidebar from './Sidebar';
13
-
14
-export default Sidebar;
www/src/templates/docs.js
deleted
-50
@@ -1,50 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import MarkdownPage from 'components/MarkdownPage';
13
-import PropTypes from 'prop-types';
14
-import React from 'react';
15
-import {createLinkDocs} from 'utils/createLink';
16
-import {sectionListDocs} from 'utils/sectionList';
17
-
18
-const Docs = ({data, location}) => (
19
- <MarkdownPage
20
- createLink={createLinkDocs}
21
- location={location}
22
- markdownRemark={data.markdownRemark}
23
- sectionList={sectionListDocs}
24
- titlePostfix=" - React"
25
- />
26
-);
27
-
28
-Docs.propTypes = {
29
- data: PropTypes.object.isRequired,
30
-};
31
-
32
-// eslint-disable-next-line no-undef
33
-export const pageQuery = graphql`
34
- query TemplateDocsMarkdown($slug: String!) {
35
- markdownRemark(fields: { slug: { eq: $slug } }) {
36
- html
37
- frontmatter {
38
- title
39
- next
40
- prev
41
- }
42
- fields {
43
- path
44
- slug
45
- }
46
- }
47
- }
48
-`;
49
-
50
-export default Docs;
www/src/templates/home.js
deleted
-465
@@ -1,465 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import ButtonLink from './components/ButtonLink';
13
-import Container from 'components/Container';
14
-import Flex from 'components/Flex';
15
-import mountCodeExample from 'utils/mountCodeExample';
16
-import PropTypes from 'prop-types';
17
-import React, {Component} from 'react';
18
-import TitleAndMetaTags from 'components/TitleAndMetaTags';
19
-import {colors, media, sharedStyles} from 'theme';
20
-import createOgUrl from 'utils/createOgUrl';
21
-
22
-class Home extends Component {
23
- componentDidMount() {
24
- mountCodeExample('helloExample', HELLO_COMPONENT);
25
- mountCodeExample('timerExample', TIMER_COMPONENT);
26
- mountCodeExample('todoExample', TODO_COMPONENT);
27
- mountCodeExample('markdownExample', MARKDOWN_COMPONENT);
28
- }
29
-
30
- render() {
31
- const {data} = this.props;
32
- const title = 'React - A JavaScript library for building user interfaces';
33
-
34
- return (
35
- <div css={{width: '100%'}}>
36
- <TitleAndMetaTags
37
- title={title}
38
- ogUrl={createOgUrl(data.markdownRemark.fields.slug)}
39
- />
40
- <header
41
- css={{
42
- backgroundColor: colors.dark,
43
- color: colors.white,
44
- }}>
45
- <div
46
- css={{
47
- paddingTop: 45,
48
- paddingBottom: 20,
49
-
50
- [media.greaterThan('small')]: {
51
- paddingTop: 60,
52
- paddingBottom: 70,
53
- },
54
-
55
- [media.greaterThan('xlarge')]: {
56
- paddingTop: 95,
57
- paddingBottom: 85,
58
- maxWidth: 1500, // Positioning of background logo
59
- marginLeft: 'auto',
60
- marginRight: 'auto',
61
- backgroundImage: 'url(/large-logo.svg)',
62
- backgroundRepeat: 'no-repeat',
63
- backgroundPosition: '100% 100px',
64
- backgroundSize: '50% auto',
65
- },
66
- }}>
67
- <Container>
68
- <h1
69
- css={{
70
- color: colors.brand,
71
- textAlign: 'center',
72
- margin: 0,
73
- fontSize: 45,
74
- letterSpacing: '0.01em',
75
- [media.size('xsmall')]: {
76
- fontSize: 30,
77
- },
78
- [media.greaterThan('xlarge')]: {
79
- fontSize: 60,
80
- },
81
- }}>
82
- React
83
- </h1>
84
- <p
85
- css={{
86
- paddingTop: 15,
87
- textAlign: 'center',
88
- fontSize: 24,
89
- letterSpacing: '0.01em',
90
- fontWeight: 200,
91
-
92
- [media.size('xsmall')]: {
93
- fontSize: 16,
94
- maxWidth: '12em',
95
- marginLeft: 'auto',
96
- marginRight: 'auto',
97
- },
98
-
99
- [media.greaterThan('xlarge')]: {
100
- paddingTop: 20,
101
- fontSize: 30,
102
- },
103
- }}>
104
- A JavaScript library for building user interfaces
105
- </p>
106
- <Flex
107
- valign="center"
108
- css={{
109
- paddingTop: 40,
110
-
111
- [media.greaterThan('xlarge')]: {
112
- paddingTop: 65,
113
- },
114
- }}>
115
- <CtaItem>
116
- <ButtonLink to="/docs/hello-world.html" type="primary">
117
- Get Started
118
- </ButtonLink>
119
- </CtaItem>
120
- <CtaItem>
121
- <ButtonLink to="/tutorial/tutorial.html" type="secondary">
122
- Take the Tutorial
123
- </ButtonLink>
124
- </CtaItem>
125
- </Flex>
126
- </Container>
127
- </div>
128
- </header>
129
-
130
- <Container>
131
- <div
132
- css={[sharedStyles.markdown, markdownStyles]}
133
- dangerouslySetInnerHTML={{__html: data.markdownRemark.html}}
134
- />
135
- </Container>
136
-
137
- <section
138
- css={{
139
- background: colors.dark,
140
- color: colors.white,
141
- paddingTop: 45,
142
- paddingBottom: 45,
143
- }}>
144
- <Container>
145
- <Flex valign="center">
146
- <CtaItem>
147
- <ButtonLink to="/docs/hello-world.html" type="primary">
148
- Get Started
149
- </ButtonLink>
150
- </CtaItem>
151
- <CtaItem>
152
- <ButtonLink to="/tutorial/tutorial.html" type="secondary">
153
- Take the Tutorial
154
- </ButtonLink>
155
- </CtaItem>
156
- </Flex>
157
- </Container>
158
- </section>
159
- </div>
160
- );
161
- }
162
-}
163
-
164
-Home.propTypes = {
165
- data: PropTypes.object.isRequired,
166
- location: PropTypes.object.isRequired,
167
-};
168
-
169
-const CtaItem = ({children, primary = false}) => (
170
- <div
171
- css={{
172
- width: '50%',
173
-
174
- [media.between('small', 'large')]: {
175
- paddingLeft: 20,
176
- },
177
-
178
- [media.greaterThan('xlarge')]: {
179
- paddingLeft: 40,
180
- },
181
-
182
- '&:first-child': {
183
- textAlign: 'right',
184
- paddingRight: 15,
185
- },
186
-
187
- '&:nth-child(2)': {
188
- [media.greaterThan('small')]: {
189
- paddingLeft: 15,
190
- },
191
- },
192
- }}>
193
- {children}
194
- </div>
195
-);
196
-
197
-// eslint-disable-next-line no-undef
198
-export const pageQuery = graphql`
199
- query HomeMarkdown($slug: String!) {
200
- markdownRemark(fields: { slug: { eq: $slug } }) {
201
- html
202
- frontmatter {
203
- title
204
- }
205
- fields {
206
- slug
207
- }
208
- }
209
- }
210
-`;
211
-
212
-export default Home;
213
-
214
-// TODO This nasty CSS is required because 'docs/index.md' defines hard-coded class names.
215
-const markdownStyles = {
216
- '& .home-section': {
217
- marginTop: 20,
218
- marginBottom: 15,
219
-
220
- [media.greaterThan('medium')]: {
221
- marginTop: 60,
222
- marginBottom: 65,
223
- },
224
- },
225
-
226
- '& .home-section:first-child': {
227
- [media.lessThan('medium')]: {
228
- marginTop: 0,
229
- marginBottom: 0,
230
- overflowX: 'auto',
231
- paddingTop: 30,
232
- WebkitOverflowScrolling: 'touch',
233
- position: 'relative',
234
- maskImage: 'linear-gradient(to right, transparent, white 10px, white 90%, transparent)',
235
- },
236
- },
237
-
238
- '& .homeDivider': {
239
- height: 1,
240
- marginBottom: -1,
241
- border: 'none',
242
- borderBottom: `1 solid ${colors.divider}`,
243
- },
244
-
245
- '& .marketing-row': {
246
- display: 'flex',
247
- flexDirection: 'row',
248
-
249
- [media.lessThan('medium')]: {
250
- display: 'block',
251
- whiteSpace: 'nowrap',
252
- },
253
- },
254
-
255
- '& .marketing-col': {
256
- display: 'flex',
257
- flexDirection: 'column',
258
- flex: '0 1 33%',
259
- marginLeft: 40,
260
-
261
- '&:first-of-type': {
262
- marginLeft: 0,
263
-
264
- [media.lessThan('medium')]: {
265
- marginLeft: 10,
266
- },
267
- },
268
-
269
- [media.lessThan('medium')]: {
270
- display: 'inline-block',
271
- verticalAlign: 'top',
272
- marginLeft: 0,
273
- whiteSpace: 'normal',
274
- width: '75%',
275
- marginRight: 20,
276
- paddingBottom: 40,
277
-
278
- '&:first-of-type': {
279
- marginTop: 0,
280
- },
281
- },
282
-
283
- '& h3': {
284
- color: colors.subtle,
285
- paddingTop: 0,
286
- fontWeight: 300,
287
- fontSize: 20,
288
-
289
- [media.greaterThan('xlarge')]: {
290
- fontSize: 24,
291
- fontWeight: 200,
292
- },
293
- },
294
-
295
- '& p': {
296
- lineHeight: 1.7,
297
- },
298
-
299
- '& h3 + p': {
300
- marginTop: 20,
301
- },
302
- },
303
-
304
- '& .example': {
305
- marginTop: 40,
306
-
307
- '&:first-child': {
308
- marginTop: 0,
309
- },
310
-
311
- [media.greaterThan('xlarge')]: {
312
- marginTop: 80,
313
- },
314
- },
315
-};
316
-
317
-// TODO Move these hard-coded examples into example files and out of the template?
318
-// Alternately, move them into the markdown and transform them during build?
319
-const name = Math.random() > 0.5 ? 'John' : 'Jane';
320
-const HELLO_COMPONENT = `
321
-class HelloMessage extends React.Component {
322
- render() {
323
- return (
324
- <div>
325
- Hello {this.props.name}
326
- </div>
327
- );
328
- }
329
-}
330
-
331
-ReactDOM.render(
332
- <HelloMessage name="${name}" />,
333
- mountNode
334
-);
335
-`.trim();
336
-
337
-const TIMER_COMPONENT = `
338
-class Timer extends React.Component {
339
- constructor(props) {
340
- super(props);
341
- this.state = { seconds: 0 };
342
- }
343
-
344
- tick() {
345
- this.setState((prevState) => ({
346
- seconds: prevState.seconds + 1
347
- }));
348
- }
349
-
350
- componentDidMount() {
351
- this.interval = setInterval(() => this.tick(), 1000);
352
- }
353
-
354
- componentWillUnmount() {
355
- clearInterval(this.interval);
356
- }
357
-
358
- render() {
359
- return (
360
- <div>
361
- Seconds: {this.state.seconds}
362
- </div>
363
- );
364
- }
365
-}
366
-
367
-ReactDOM.render(<Timer />, mountNode);
368
-`.trim();
369
-
370
-var TODO_COMPONENT = `
371
-class TodoApp extends React.Component {
372
- constructor(props) {
373
- super(props);
374
- this.state = { items: [], text: '' };
375
- this.handleChange = this.handleChange.bind(this);
376
- this.handleSubmit = this.handleSubmit.bind(this);
377
- }
378
-
379
- render() {
380
- return (
381
- <div>
382
- <h3>TODO</h3>
383
- <TodoList items={this.state.items} />
384
- <form onSubmit={this.handleSubmit}>
385
- <input
386
- onChange={this.handleChange}
387
- value={this.state.text}
388
- />
389
- <button>
390
- Add #{this.state.items.length + 1}
391
- </button>
392
- </form>
393
- </div>
394
- );
395
- }
396
-
397
- handleChange(e) {
398
- this.setState({ text: e.target.value });
399
- }
400
-
401
- handleSubmit(e) {
402
- e.preventDefault();
403
- const newItem = {
404
- text: this.state.text,
405
- id: Date.now()
406
- };
407
- this.setState((prevState) => ({
408
- items: prevState.items.concat(newItem),
409
- text: ''
410
- }));
411
- }
412
-}
413
-
414
-class TodoList extends React.Component {
415
- render() {
416
- return (
417
- <ul>
418
- {this.props.items.map(item => (
419
- <li key={item.id}>{item.text}</li>
420
- ))}
421
- </ul>
422
- );
423
- }
424
-}
425
-
426
-ReactDOM.render(<TodoApp />, mountNode);
427
-`.trim();
428
-
429
-var MARKDOWN_COMPONENT = `
430
-class MarkdownEditor extends React.Component {
431
- constructor(props) {
432
- super(props);
433
- this.handleChange = this.handleChange.bind(this);
434
- this.state = { value: 'Type some *markdown* here!' };
435
- }
436
-
437
- handleChange(e) {
438
- this.setState({ value: e.target.value });
439
- }
440
-
441
- getRawMarkup() {
442
- const md = new Remarkable();
443
- return { __html: md.render(this.state.value) };
444
- }
445
-
446
- render() {
447
- return (
448
- <div className="MarkdownEditor">
449
- <h3>Input</h3>
450
- <textarea
451
- onChange={this.handleChange}
452
- defaultValue={this.state.value}
453
- />
454
- <h3>Output</h3>
455
- <div
456
- className="content"
457
- dangerouslySetInnerHTML={this.getRawMarkup()}
458
- />
459
- </div>
460
- );
461
- }
462
-}
463
-
464
-ReactDOM.render(<MarkdownEditor />, mountNode);
465
-`.trim();
www/src/templates/tutorial.js
deleted
-61
@@ -1,61 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import MarkdownPage from 'components/MarkdownPage';
13
-import PropTypes from 'prop-types';
14
-import React from 'react';
15
-import {createLinkTutorial} from 'utils/createLink';
16
-import {sectionListTutorial} from 'utils/sectionList';
17
-
18
-const Tutorial = ({data, location}) => {
19
- // HACK The injected location prop doesn't update when hash changes
20
- // This might be a gatsby issue, or a react-router/history issue,
21
- // Or we might be using either library incorrectly.
22
- // For now this patch keeps the hash in sync by JIT copying it from window.
23
- // The undefined check prevents us from breaking on production build.
24
- if (typeof window !== 'undefined' && typeof window.location !== 'undefined') {
25
- location.hash = window.location.hash;
26
- }
27
-
28
- return (
29
- <MarkdownPage
30
- createLink={createLinkTutorial}
31
- location={location}
32
- markdownRemark={data.markdownRemark}
33
- sectionList={sectionListTutorial}
34
- titlePostfix=" - React"
35
- />
36
- );
37
-};
38
-
39
-Tutorial.propTypes = {
40
- data: PropTypes.object.isRequired,
41
-};
42
-
43
-// eslint-disable-next-line no-undef
44
-export const pageQuery = graphql`
45
- query TemplateTutorialMarkdown($slug: String!) {
46
- markdownRemark(fields: { slug: { eq: $slug } }) {
47
- html
48
- frontmatter {
49
- title
50
- next
51
- prev
52
- }
53
- fields {
54
- path
55
- slug
56
- }
57
- }
58
- }
59
-`;
60
-
61
-export default Tutorial;
www/src/theme.js
deleted
-405
@@ -1,405 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
- * @flow
9
-*/
10
-
11
-'use strict';
12
-
13
-/**
14
- * Theme contains variables shared by styles of multiple components.
15
- */
16
-
17
-import hex2rgba from 'hex2rgba';
18
-
19
-const colors = {
20
- lighter: '#373940', // light blue
21
- dark: '#282c34', // dark blue
22
- darker: '#20232a', // really dark blue
23
- brand: '#61dafb', // electric blue
24
- brandLight: '#bbeffd',
25
- text: '#1a1a1a', // very dark grey / black substitute
26
- subtle: '#6d6d6d', // light grey for text
27
- subtleOnDark: '#999',
28
- divider: '#ececec', // very light grey
29
- note: '#ffe564', // yellow
30
- error: '#ff6464', // yellow
31
- white: '#ffffff',
32
- black: '#000000',
33
-};
34
-
35
-const SIZES = {
36
- xsmall: {min: 0, max: 599},
37
- small: {min: 600, max: 779},
38
- medium: {min: 780, max: 979},
39
- large: {min: 980, max: 1279},
40
- xlarge: {min: 1280, max: 1339},
41
- xxlarge: {min: 1340, max: Infinity},
42
-
43
- // Sidebar/nav related tweakpoints
44
- largerSidebar: {min: 1100, max: 1339},
45
- sidebarFixed: {min: 2000, max: Infinity},
46
-};
47
-
48
-type Size = $Keys<typeof SIZES>;
49
-
50
-const media = {
51
- between(smallKey: Size, largeKey: Size, excludeLarge: boolean = false) {
52
- if (excludeLarge) {
53
- return `@media (min-width: ${SIZES[smallKey].min}px) and (max-width: ${SIZES[largeKey].min - 1}px)`;
54
- } else {
55
- if (SIZES[largeKey].max === Infinity) {
56
- return `@media (min-width: ${SIZES[smallKey].min}px)`;
57
- } else {
58
- return `@media (min-width: ${SIZES[smallKey].min}px) and (max-width: ${SIZES[largeKey].max}px)`;
59
- }
60
- }
61
- },
62
-
63
- greaterThan(key: Size) {
64
- return `@media (min-width: ${SIZES[key].min}px)`;
65
- },
66
-
67
- lessThan(key: Size) {
68
- return `@media (max-width: ${SIZES[key].min - 1}px)`;
69
- },
70
-
71
- size(key: Size) {
72
- const size = SIZES[key];
73
-
74
- if (size.min == null) {
75
- return media.lessThan(key);
76
- } else if (size.max == null) {
77
- return media.greaterThan(key);
78
- } else {
79
- return media.between(key, key);
80
- }
81
- },
82
-};
83
-
84
-const fonts = {
85
- header: {
86
- fontSize: 60,
87
- lineHeight: '65px',
88
- fontWeight: 700,
89
-
90
- [media.lessThan('medium')]: {
91
- fontSize: 40,
92
- lineHeight: '45px',
93
- },
94
- },
95
- small: {
96
- fontSize: 14,
97
- },
98
-};
99
-
100
-// Shared styles are generally better as components,
101
-// Except when they must be used within nested CSS selectors.
102
-// This is the case for eg markdown content.
103
-const linkStyle = {
104
- backgroundColor: hex2rgba(colors.brandLight, 0.5),
105
- borderBottom: `1px solid ${hex2rgba(colors.black, 0.2)}`,
106
- color: colors.text,
107
-
108
- ':hover': {
109
- backgroundColor: colors.brandLight,
110
- borderBottomColor: colors.text,
111
- },
112
-};
113
-const sharedStyles = {
114
- link: linkStyle,
115
-
116
- articleLayout: {
117
- container: {
118
- display: 'flex',
119
- minHeight: 'calc(100vh - 60px)',
120
- [media.greaterThan('sidebarFixed')]: {
121
- maxWidth: 840,
122
- marginLeft: 'auto',
123
- marginRight: 'auto',
124
- },
125
- },
126
- content: {
127
- marginTop: 40,
128
- marginBottom: 120,
129
-
130
- [media.greaterThan('medium')]: {
131
- marginTop: 50,
132
- },
133
- },
134
- sidebar: {
135
- display: 'flex',
136
- flexDirection: 'column',
137
-
138
- [media.between('small', 'sidebarFixed')]: {
139
- borderLeft: '1px solid #ececec',
140
- marginLeft: 80,
141
- },
142
-
143
- [media.between('small', 'largerSidebar')]: {
144
- flex: '0 0 200px',
145
- marginLeft: 80,
146
- },
147
-
148
- [media.between('small', 'medium')]: {
149
- marginLeft: 40,
150
- },
151
-
152
- [media.greaterThan('largerSidebar')]: {
153
- flex: '0 0 300px',
154
- },
155
-
156
- [media.greaterThan('sidebarFixed')]: {
157
- position: 'fixed',
158
- right: 0,
159
- width: 300,
160
- zIndex: 2,
161
- },
162
- },
163
-
164
- editLink: {
165
- color: colors.subtle,
166
- borderColor: colors.divider,
167
- transition: 'all 0.2s ease',
168
- transitionPropery: 'color, border-color',
169
- whiteSpace: 'nowrap',
170
- borderBottomWidth: 1,
171
- borderBottomStyle: 'solid',
172
-
173
- ':hover': {
174
- color: colors.text,
175
- borderColor: colors.text,
176
- },
177
- },
178
- },
179
-
180
- markdown: {
181
- lineHeight: '25px',
182
-
183
- '& .gatsby-highlight': {
184
- marginTop: 25,
185
- marginLeft: -30,
186
- marginRight: -30,
187
- marginBottom: 25,
188
- paddingLeft: 15,
189
- paddingRight: 15,
190
-
191
- [media.lessThan('small')]: {
192
- marginLeft: -20,
193
- marginRight: -20,
194
- borderRadius: 0,
195
- },
196
- },
197
-
198
- '& a:not(.anchor):not(.gatsby-resp-image-link)': linkStyle,
199
-
200
- '& > p:first-child': {
201
- fontSize: 18,
202
- fontWeight: 300,
203
- color: colors.subtle,
204
-
205
- [media.greaterThan('xlarge')]: {
206
- fontSize: 24,
207
- },
208
-
209
- '& a, & strong': {
210
- fontWeight: 400,
211
- },
212
- },
213
-
214
- '& p': {
215
- marginTop: 30,
216
- fontSize: 17,
217
- lineHeight: 1.7,
218
- maxWidth: '42em',
219
-
220
- '&:first-of-type': {
221
- marginTop: 15,
222
- },
223
-
224
- '&:first-child': {
225
- marginTop: 0,
226
- },
227
-
228
- [media.lessThan('large')]: {
229
- fontSize: 16,
230
- marginTop: 25,
231
- },
232
- },
233
-
234
- '& h3 + p, & h3 + p:first-of-type': {
235
- marginTop: 20,
236
- },
237
-
238
- '& p > code, & li > code': {
239
- background: hex2rgba(colors.note, 0.3),
240
- padding: '0 3px',
241
- fontSize: 'inherit',
242
- color: colors.text,
243
- wordBreak: 'break-word',
244
- },
245
-
246
- '& hr': {
247
- height: 1,
248
- marginBottom: -1,
249
- border: 'none',
250
- borderBottom: `1px solid ${colors.divider}`,
251
- marginTop: 40,
252
-
253
- ':first-child': {
254
- marginTop: 0,
255
- },
256
- },
257
-
258
- '& h1': {
259
- lineHeight: 1.2,
260
-
261
- [media.size('xsmall')]: {
262
- fontSize: 30,
263
- },
264
-
265
- [media.between('small', 'large')]: {
266
- fontSize: 45,
267
- },
268
-
269
- [media.greaterThan('xlarge')]: {
270
- fontSize: 60,
271
- },
272
- },
273
-
274
- '& h2': {
275
- borderTop: `1px solid ${colors.divider}`,
276
- marginTop: 44,
277
- paddingTop: 40,
278
- lineHeight: 1.2,
279
-
280
- ':first-child': {
281
- borderTop: 0,
282
- marginTop: 0,
283
- paddingTop: 0,
284
- },
285
-
286
- [media.lessThan('large')]: {
287
- fontSize: 20,
288
- },
289
- [media.greaterThan('xlarge')]: {
290
- fontSize: 35,
291
- },
292
- },
293
-
294
- '& hr + h2': {
295
- borderTop: 0,
296
- marginTop: 0,
297
- },
298
-
299
- '& h3': {
300
- paddingTop: 45,
301
-
302
- [media.greaterThan('xlarge')]: {
303
- fontSize: 25,
304
- lineHeight: 1.3,
305
- },
306
- },
307
-
308
- '& h2 + h3, & h2 + h3:first-of-type': {
309
- paddingTop: 30,
310
- },
311
-
312
- '& h4': {
313
- fontSize: 20,
314
- color: colors.subtle,
315
- lineHeight: 1.3,
316
- marginTop: 50,
317
- fontWeight: 400,
318
- },
319
-
320
- '& h4 + p': {
321
- marginTop: 20,
322
- },
323
-
324
- '& ol, & ul': {
325
- marginTop: 20,
326
- fontSize: 16,
327
- color: colors.text,
328
-
329
- [media.lessThan('small')]: {
330
- paddingLeft: 20,
331
- },
332
-
333
- '& p, & p:first-of-type': {
334
- fontSize: 16,
335
- marginTop: 0,
336
- lineHeight: 1.2,
337
- },
338
-
339
- '& li': {
340
- marginTop: 20,
341
- },
342
-
343
- '& li.button-newapp': {
344
- marginTop: 0,
345
- },
346
-
347
- '& ol, & ul': {
348
- marginLeft: 20,
349
- },
350
- },
351
-
352
- '& img': {
353
- maxWidth: '100%',
354
- },
355
-
356
- '& ol': {
357
- listStyle: 'decimal',
358
- },
359
-
360
- '& ul': {
361
- listStyle: 'disc',
362
- },
363
-
364
- '& blockquote': {
365
- backgroundColor: hex2rgba('#ffe564', 0.3),
366
- borderLeftColor: colors.note,
367
- borderLeftWidth: 9,
368
- borderLeftStyle: 'solid',
369
- padding: '20px 45px 20px 26px',
370
- marginBottom: 30,
371
- marginTop: 20,
372
- marginLeft: -30,
373
- marginRight: -30,
374
-
375
- [media.lessThan('small')]: {
376
- marginLeft: -20,
377
- marginRight: -20,
378
- },
379
-
380
- '& p': {
381
- marginTop: 15,
382
-
383
- '&:first-of-type': {
384
- fontWeight: 700,
385
- marginTop: 0,
386
- },
387
-
388
- '&:nth-of-type(2)': {
389
- marginTop: 0,
390
- },
391
- },
392
- },
393
-
394
- '& .gatsby-highlight + blockquote': {
395
- marginTop: 40,
396
- },
397
- },
398
-};
399
-
400
-export default {
401
- colors,
402
- fonts,
403
- media,
404
- sharedStyles,
405
-};
www/src/utils/createLink.js
deleted
-115
@@ -1,115 +0,0 @@
1
-/**
2
- * Copyright (c) 2015-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
- */
9
-
10
-'use strict';
11
-
12
-import Link from 'gatsby-link';
13
-import React from 'react';
14
-import ExternalLinkSvg from 'templates/components/ExternalLinkSvg';
15
-import isItemActive from 'utils/isItemActive';
16
-import slugify from 'utils/slugify';
17
-import {colors, media} from 'theme';
18
-
19
-const createLinkBlog = ({item, location, section}) => {
20
- const isActive = isItemActive(location, item);
21
-
22
- return (
23
- <Link css={[linkCss, isActive && activeLinkCss]} to={item.id}>
24
- {isActive && <span css={activeLinkBefore} />}
25
- {item.title}
26
- </Link>
27
- );
28
-};
29
-
30
-const createLinkCommunity = ({item, location, section}) => {
31
- if (item.href) {
32
- return (
33
- <a css={[linkCss]} href={item.href} target="_blank" rel="noopener">
34
- {item.title}
35
- <ExternalLinkSvg
36
- cssProps={{
37
- verticalAlign: -2,
38
- display: 'inline-block',
39
- marginLeft: 5,
40
- color: colors.subtle,
41
- }}
42
- />
43
- </a>
44
- );
45
- }
46
- return createLinkDocs({
47
- item,
48
- location,
49
- section,
50
- });
51
-};
52
-
53
-const createLinkDocs = ({item, location, section}) => {
54
- const isActive = isItemActive(location, item);
55
-
56
- return (
57
- <Link
58
- css={[linkCss, isActive && activeLinkCss]}
59
- to={slugify(item.id, section.directory)}>
60
- {isActive && <span css={activeLinkBefore} />}
61
- {item.title}
62
- </Link>
63
- );
64
-};
65
-
66
-const createLinkTutorial = ({item, location, onLinkClick, section}) => {
67
- const isActive = isItemActive(location, item);
68
-
69
- return (
70
- <Link
71
- css={[linkCss, isActive && activeLinkCss]}
72
- onClick={onLinkClick}
73
- to={item.href}>
74
- {isActive && <span css={activeLinkBefore} />}
75
- {item.title}
76
- </Link>
77
- );
78
-};
79
-
80
-const activeLinkCss = {
81
- fontWeight: 700,
82
-};
83
-
84
-const activeLinkBefore = {
85
- width: 4,
86
- height: 25,
87
- borderLeft: `4px solid ${colors.brand}`,
88
- paddingLeft: 16,
89
- position: 'absolute',
90
- left: 0,
91
- marginTop: -3,
92
-
93
- [media.greaterThan('largerSidebar')]: {
94
- left: 15,
95
- },
96
-};
97
-
98
-const linkCss = {
99
- color: colors.text,
100
- display: 'inline-block',
101
- borderBottom: '1px solid transparent',
102
- transition: 'border 0.2s ease',
103
- marginTop: 5,
104
-
105
- '&:hover': {
106
- color: colors.subtle,
107
- },
108
-};
109
-
110
-export default {
111
- createLinkBlog,
112
- createLinkCommunity,
113
- createLinkDocs,
114
- createLinkTutorial,
115
-};
www/src/utils/createOgUrl.js
deleted
-15
@@ -1,15 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
- */
9
-
10
-'use strict';
11
-
12
-import {urlRoot} from 'site-constants';
13
-
14
-export default slug =>
15
- (slug == null ? null : `${urlRoot}/${slug.replace(/^\//, '')}`);
www/src/utils/findSectionForPath.js
deleted
-37
@@ -1,37 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import slugify from './slugify';
13
-
14
-/**
15
- * Helper method to locate the section containing the current URL/path.
16
- * This method specifically works with the nav_*.yml format.
17
- */
18
-const findSectionForPath = (pathname, sections) => {
19
- let activeSection;
20
- const slugId = pathname.split('/').slice(-1)[0];
21
-
22
- sections.forEach(section => {
23
- const match = section.items.some(
24
- item =>
25
- slugId === slugify(item.id) ||
26
- (item.subitems &&
27
- item.subitems.some(subitem => slugId === slugify(subitem.id))),
28
- );
29
- if (match) {
30
- activeSection = section;
31
- }
32
- });
33
-
34
- return activeSection;
35
-};
36
-
37
-export default findSectionForPath;
www/src/utils/isItemActive.js
deleted
-35
@@ -1,35 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import slugify from 'utils/slugify';
13
-
14
-const toAnchor = (href = '') => {
15
- const index = href.indexOf('#');
16
- return index >= 0 ? href.substr(index) : '';
17
-};
18
-
19
-// TODO Account for redirect_from URLs somehow; they currently won't match.
20
-// This comment should not be true anymore since we're using 300 redirects
21
-
22
-const isItemActive = (location, item) => {
23
- if (location.hash) {
24
- if (item.href) {
25
- return location.hash === toAnchor(item.href);
26
- }
27
- } else if (item.id.includes('html')) {
28
- return location.pathname.includes(item.id);
29
- } else {
30
- const slugId = location.pathname.split('/').slice(-1)[0];
31
- return slugId === slugify(item.id);
32
- }
33
-};
34
-
35
-export default isItemActive;
www/src/utils/mountCodeExample.js
deleted
-41
@@ -1,41 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import CodeEditor from '../components/CodeEditor';
13
-import React from 'react';
14
-import ReactDOM from 'react-dom';
15
-
16
-// TODO This is a huge hack.
17
-// Remark transform this template to split code examples and their targets apart.
18
-const mountCodeExample = (containerId, code) => {
19
- const container = document.getElementById(containerId);
20
- const parent = container.parentElement;
21
-
22
- const children = Array.prototype.filter.call(
23
- parent.children,
24
- child => child !== container,
25
- );
26
- children.forEach(child => parent.removeChild(child));
27
-
28
- const description = children
29
- .map(child => child.outerHTML)
30
- .join('')
31
- .replace(/`([^`]+)`/g, '<code>$1</code>');
32
-
33
- ReactDOM.render(
34
- <CodeEditor code={code}>
35
- {<div dangerouslySetInnerHTML={{__html: description}} />}
36
- </CodeEditor>,
37
- container,
38
- );
39
-};
40
-
41
-export default mountCodeExample;
www/src/utils/sectionList.js
deleted
-38
@@ -1,38 +0,0 @@
1
-/**
2
- * Copyright (c) 2015-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
- */
9
-
10
-'use strict';
11
-
12
-import navCommunity from '../../../docs/_data/nav_community.yml';
13
-import navContributing from '../../../docs/_data/nav_contributing.yml';
14
-import navDocs from '../../../docs/_data/nav_docs.yml';
15
-import navTutorial from '../../../docs/_data/nav_tutorial.yml';
16
-
17
-const sectionListDocs = navDocs
18
- .map(item => ({
19
- ...item,
20
- directory: 'docs',
21
- }))
22
- .concat(
23
- navContributing.map(item => ({
24
- ...item,
25
- directory: 'contributing',
26
- })),
27
- );
28
-
29
-const sectionListCommunity = navCommunity.map(item => ({
30
- ...item,
31
- directory: 'community',
32
-}));
33
-
34
-export {
35
- sectionListCommunity,
36
- sectionListDocs,
37
- navTutorial as sectionListTutorial,
38
-};
www/src/utils/slugify.js
deleted
-18
@@ -1,18 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import slugify from 'slugify';
13
-
14
-export default (string, directory) => {
15
- const filename = slugify(string) + '.html';
16
-
17
- return directory ? `/${directory}/${filename}` : filename;
18
-};
www/src/utils/toCommaSeparatedList.js
deleted
-39
@@ -1,39 +0,0 @@
1
-/**
2
- * Copyright (c) 2013-present, Facebook, Inc.
3
- *
4
- * This source code is licensed under the MIT license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- *
7
- * @emails react-core
8
-*/
9
-
10
-'use strict';
11
-
12
-import React from 'react';
13
-
14
-const addString = (list, string) =>
15
- list.push(<span key={`${list.length}-${string}`}>{string}</span>);
16
-
17
-const toCommaSeparatedList = (array, renderCallback) => {
18
- if (array.length <= 1) {
19
- return array.map(renderCallback);
20
- }
21
-
22
- const list = [];
23
-
24
- array.forEach((item, index) => {
25
- if (index === array.length - 1) {
26
- addString(list, array.length === 2 ? ' and ' : ', and ');
27
- list.push(renderCallback(item, index));
28
- } else if (index > 0) {
29
- addString(list, ', ');
30
- list.push(renderCallback(item, index));
31
- } else {
32
- list.push(renderCallback(item, index));
33
- }
34
- });
35
-
36
- return list;
37
-};
38
-
39
-export default toCommaSeparatedList;
www/static/external.png
Binary files a/www/static/external.png and /dev/null differ
www/static/favicon.ico
Binary files a/www/static/favicon.ico and /dev/null differ
www/static/js/jsfiddle-integration-babel.js
deleted
-12
@@ -1,12 +0,0 @@
1
-// Do not delete or move this file.
2
-// Many fiddles reference it so we have to keep it here.
3
-(function() {
4
- var tag = document.querySelector(
5
- 'script[type="application/javascript;version=1.7"]'
6
- );
7
- if (!tag || tag.textContent.indexOf('window.onload=function(){') !== -1) {
8
- alert('Bad JSFiddle configuration, please fork the original React JSFiddle');
9
- }
10
- tag.setAttribute('type', 'text/babel');
11
- tag.textContent = tag.textContent.replace(/^\/\/<!\[CDATA\[/, '');
12
-})();
www/static/js/jsfiddle-integration.js
deleted
-12
@@ -1,12 +0,0 @@
1
-// Do not delete or move this file.
2
-// Many fiddles reference it so we have to keep it here.
3
-(function() {
4
- var tag = document.querySelector(
5
- 'script[type="application/javascript;version=1.7"]'
6
- );
7
- if (!tag || tag.textContent.indexOf('window.onload=function(){') !== -1) {
8
- alert('Bad JSFiddle configuration, please fork the original React JSFiddle');
9
- }
10
- tag.setAttribute('type', 'text/jsx;harmony=true');
11
- tag.textContent = tag.textContent.replace(/^\/\/<!\[CDATA\[/, '');
12
-})();
www/static/large-logo.svg
deleted
-1
@@ -1 +0,0 @@
1
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 823.85795 733"><title>large-logo</title><g opacity="0.05"><path d="M677.3796,237.5782v-.00013q-13.15347-4.51184-26.52168-8.35682,2.2162-9.00546,4.09815-18.08832c20.07545-97.45293,6.9495-175.96071-37.87563-201.8043C574.10386-15.45755,503.81433,10.386,432.82482,72.16188q-10.49272,9.15182-20.513,18.8248-6.70815-6.42994-13.651-12.60818c-74.39859-66.06005-148.97227-93.89436-193.75-67.97423-42.93648,24.85548-55.65406,98.66342-37.5803,191.01912q2.69729,13.71891,6.08893,27.28742c-10.55176,2.99712-20.74263,6.19108-30.49228,9.58925C55.70506,268.70848,0,316.37033,0,365.80411c0,51.06,59.796,102.27313,150.64951,133.32334q11.05033,3.759,22.27764,6.96393-3.64625,14.61321-6.47177,29.4132c-17.23148,90.75134-3.77376,162.80916,39.04973,187.51155,44.23076,25.50438,118.46536-.71107,190.75293-63.898q8.57022-7.49254,17.19138-15.84583,10.8498,10.46823,22.27032,20.3197c70.01968,60.25168,139.17161,84.58221,181.9586,59.81425,44.19066-25.581,58.549-102.99126,39.90285-197.17376q-2.13293-10.79053-4.94043-22.02241,7.82091-2.308,15.32089-4.78369C762.41022,468.13563,823.858,417.546,823.858,365.80425,823.858,316.19178,766.35894,268.20914,677.3796,237.5782ZM455.93017,98.71275c60.82417-52.934,117.67049-73.83348,143.5724-58.89543h.00007c27.58633,15.9116,38.31685,80.072,20.98329,164.213q-1.70415,8.22186-3.70447,16.37829A843.11184,843.11184,0,0,0,506.62552,203.0058c-22.63859-32.23516-46.09393-61.54615-69.6405-86.91573Q446.24028,107.16747,455.93017,98.71275ZM243.25691,408.03318q11.17562,21.58674,23.35692,42.63018,12.4265,21.46008,25.86547,42.30946a749.41279,749.41279,0,0,1-75.92641-12.20726C223.8269,457.27737,232.789,432.86312,243.25691,408.03318Zm-.0401-82.7737c-10.24913-24.30852-19.018-48.20874-26.17895-71.28855,23.50634-5.26129,48.57329-9.56006,74.69032-12.82331q-13.1139,20.4542-25.25653,41.50721Q254.34864,303.68289,243.21681,325.25948ZM261.9249,366.65q16.266-33.856,35.04269-66.41735v.00731q18.75838-32.54479,39.94668-63.59526c24.50177-1.85227,49.62338-2.82209,75.01843-2.82209,25.50817,0,50.66256.97714,75.15708,2.844q20.95959,30.97974,39.695,63.38007,18.82881,32.46544,35.51663,66.10381-16.50682,33.96338-35.39993,66.68714l-.00366.00007q-18.71978,32.51932-39.52367,63.77022c-24.44345,1.7466-49.70364,2.64707-75.44509,2.64707-25.63571,0-50.575-.79833-74.5919-2.35527q-21.33273-31.16146-40.26388-63.86883Q278.245,400.51974,261.9249,366.65Zm295.46159,83.76919q12.43081-21.55706,23.8929-43.65115h.00007a747.44376,747.44376,0,0,1,27.66653,72.4735,746.90393,746.90393,0,0,1-76.85248,13.10041Q545.15579,471.63431,557.38649,450.41918ZM580.944,325.28495Q569.52351,303.615,557.24445,282.4141v.00007q-12.081-20.868-25.05238-41.20092c26.2884,3.31791,51.472,7.72974,75.12057,13.1296A750.753,750.753,0,0,1,580.944,325.28495ZM412.32291,141.25908A752.67935,752.67935,0,0,1,460.805,199.78624q-48.65887-2.29927-97.37267-.02188C379.43872,178.65711,395.83523,159.04842,412.32291,141.25908ZM222.5434,40.86376C250.10793,24.9084,311.05246,47.66,375.2895,104.696c4.10546,3.64609,8.22921,7.46354,12.36021,11.41226a843.39474,843.39474,0,0,0-70.18008,86.8501A859.96423,859.96423,0,0,0,207.53247,220.044q-3.15066-12.6187-5.66241-25.38408v.00359C186.38506,115.5322,196.667,55.84191,222.5434,40.86376ZM182.3707,472.19q-10.24566-2.93259-20.33792-6.3661c-40.17271-13.73122-73.34857-31.57522-96.0893-51.04533-20.43275-17.50133-30.75117-34.875-30.75117-48.97441,0-29.99646,44.72664-68.26231,119.3222-94.26995q14.04424-4.87509,28.35573-8.922A844.0802,844.0802,0,0,0,223.02473,366.661,856.90089,856.90089,0,0,0,182.3707,472.19ZM373.09815,632.61472c-31.96537,27.94364-63.99632,47.76386-92.22443,57.736l-.00366-.00013c-25.36593,8.95844-45.56892,9.21367-57.7797,2.17319-25.98942-14.9856-36.78916-72.84909-22.05526-150.45626q2.62813-13.75741,6.01605-27.35312c33.74463,7.46354,71.0989,12.83435,111.02376,16.07206a856.43741,856.43741,0,0,0,70.71972,87.37518Q381.12547,625.58012,373.09815,632.61472Zm40.19824-39.779c-16.68093-18.00074-33.318-37.90848-49.56871-59.322q23.65952.92986,48.20142.93338,25.19087,0,49.73277-1.10475A748.43012,748.43012,0,0,1,413.2964,592.83569Zm213.71969,48.96723c-4.90764,26.44873-14.774,44.0814-26.97381,51.14381-25.96389,15.02922-81.49033-4.50652-141.36655-56.0333q-10.29837-8.85989-20.71716-18.88671c23.21474-25.3914,46.41485-54.91026,69.05717-87.68879,39.83-3.53291,77.45769-9.31215,111.58149-17.19849q2.51586,10.17258,4.45924,19.92955v-.00013C631.3003,574.71465,632.47794,612.3679,627.01609,641.80291Zm29.87976-175.78216h-.00359c-4.50293,1.49124-9.12622,2.93148-13.837,4.3279-10.42787-33.00808-24.50177-68.10909-41.71868-104.36958a825.689,825.689,0,0,0,40.09617-102.84915c8.42612,2.44291,16.60791,5.01338,24.4908,7.72974,76.24,26.241,122.74232,65.0464,122.74232,94.94445C788.6659,397.65278,738.44091,438.99953,656.89585,466.02076Z" fill="#fff"/><path d="M411.929,292.23677a73.56917,73.56917,0,1,1-73.56735,73.56735A73.56713,73.56713,0,0,1,411.929,292.23677" fill="#fff"/></g></svg>
\ No newline at end of file
www/static/logo-og.png
Binary files a/www/static/logo-og.png and /dev/null differ
www/static/search.svg
deleted
-14
@@ -1,14 +0,0 @@
1
-<svg
2
- alt="Search"
3
- xmlns="http://www.w3.org/2000/svg"
4
- viewBox="0 0 16 16"
5
->
6
- <path
7
- d="
8
- M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,
9
- 0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,
10
- 0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,
11
- 4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z"
12
- fill="#ffffff"
13
- />
14
-</svg>
\ No newline at end of file
www/yarn.lock
deleted
-9754
@@ -1,9754 +0,0 @@
1
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2
-# yarn lockfile v1
3
-
4
-
5
-"@gaearon/react-live@1.7.1-with-safari-fix":
6
- version "1.7.1-with-safari-fix"
7
- resolved "https://registry.yarnpkg.com/@gaearon/react-live/-/react-live-1.7.1-with-safari-fix.tgz#fef25ce045749b24c79f6475562530726e507876"
8
- dependencies:
9
- buble "^0.15.2"
10
- core-js "^2.4.1"
11
- dom-iterator "^0.3.0"
12
- prismjs "^1.6.0"
13
- prop-types "^15.5.8"
14
- unescape "^0.2.0"
15
-
16
-"@types/node@^6.0.46":
17
- version "6.0.79"
18
- resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.79.tgz#5efe7d4a6d8c453c7e9eaf55d931f4a22fac5169"
19
-
20
-abbrev@1:
21
- version "1.1.0"
22
- resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.0.tgz#d0554c2256636e2f56e7c2e5ad183f859428d81f"
23
-
24
-accept@1.x.x:
25
- version "1.1.0"
26
- resolved "https://registry.yarnpkg.com/accept/-/accept-1.1.0.tgz#c7b5567c99ade4ac7c937f2a9bc1c566160a30b5"
27
- dependencies:
28
- boom "2.x.x"
29
- hoek "2.x.x"
30
-
31
-accepts@1.3.3, accepts@^1.3.0, accepts@~1.3.3:
32
- version "1.3.3"
33
- resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.3.tgz#c3ca7434938648c3e0d9c1e328dd68b622c284ca"
34
- dependencies:
35
- mime-types "~2.1.11"
36
- negotiator "0.6.1"
37
-
38
-acorn-jsx@^3.0.1:
39
- version "3.0.1"
40
- resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-3.0.1.tgz#afdf9488fb1ecefc8348f6fb22f464e32a58b36b"
41
- dependencies:
42
- acorn "^3.0.4"
43
-
44
-acorn-object-spread@^1.0.0:
45
- version "1.0.0"
46
- resolved "https://registry.yarnpkg.com/acorn-object-spread/-/acorn-object-spread-1.0.0.tgz#48ead0f4a8eb16995a17a0db9ffc6acaada4ba68"
47
- dependencies:
48
- acorn "^3.1.0"
49
-
50
-acorn@^3.0.0, acorn@^3.0.4, acorn@^3.1.0, acorn@^3.3.0:
51
- version "3.3.0"
52
- resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
53
-
54
-address@^1.0.1:
55
- version "1.0.2"
56
- resolved "https://registry.yarnpkg.com/address/-/address-1.0.2.tgz#480081e82b587ba319459fef512f516fe03d58af"
57
-
58
-after@0.8.2:
59
- version "0.8.2"
60
- resolved "https://registry.yarnpkg.com/after/-/after-0.8.2.tgz#fedb394f9f0e02aa9768e702bda23b505fae7e1f"
61
-
62
-ajv@^4.9.1:
63
- version "4.11.8"
64
- resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
65
- dependencies:
66
- co "^4.6.0"
67
- json-stable-stringify "^1.0.1"
68
-
69
-align-text@^0.1.1, align-text@^0.1.3:
70
- version "0.1.4"
71
- resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
72
- dependencies:
73
- kind-of "^3.0.2"
74
- longest "^1.0.1"
75
- repeat-string "^1.5.2"
76
-
77
-alphanum-sort@^1.0.1, alphanum-sort@^1.0.2:
78
- version "1.0.2"
79
- resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
80
-
81
-amdefine@>=0.0.4:
82
- version "1.0.1"
83
- resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
84
-
85
-ammo@1.x.x:
86
- version "1.0.1"
87
- resolved "https://registry.yarnpkg.com/ammo/-/ammo-1.0.1.tgz#8f8add14cd49bdede3bab3a3e0ebcaf21d03de8b"
88
- dependencies:
89
- boom "2.x.x"
90
- hoek "2.x.x"
91
-
92
-ansi-escapes@^2.0.0:
93
- version "2.0.0"
94
- resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-2.0.0.tgz#5bae52be424878dd9783e8910e3fc2922e83c81b"
95
-
96
-ansi-html@0.0.7:
97
- version "0.0.7"
98
- resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
99
-
100
-ansi-red@^0.1.1:
101
- version "0.1.1"
102
- resolved "https://registry.yarnpkg.com/ansi-red/-/ansi-red-0.1.1.tgz#8c638f9d1080800a353c9c28c8a81ca4705d946c"
103
- dependencies:
104
- ansi-wrap "0.1.0"
105
-
106
-ansi-regex@^2.0.0:
107
- version "2.1.1"
108
- resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
109
-
110
-ansi-regex@^3.0.0:
111
- version "3.0.0"
112
- resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
113
-
114
-ansi-styles@^2.2.1:
115
- version "2.2.1"
116
- resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
117
-
118
-ansi-styles@^3.1.0:
119
- version "3.1.0"
120
- resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.1.0.tgz#09c202d5c917ec23188caa5c9cb9179cd9547750"
121
- dependencies:
122
- color-convert "^1.0.0"
123
-
124
-ansi-wrap@0.1.0:
125
- version "0.1.0"
126
- resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf"
127
-
128
-ansi@^0.3.0, ansi@~0.3.1:
129
- version "0.3.1"
130
- resolved "https://registry.yarnpkg.com/ansi/-/ansi-0.3.1.tgz#0c42d4fb17160d5a9af1e484bace1c66922c1b21"
131
-
132
-any-promise@^0.1.0:
133
- version "0.1.0"
134
- resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-0.1.0.tgz#830b680aa7e56f33451d4b049f3bd8044498ee27"
135
-
136
-anymatch@^1.3.0:
137
- version "1.3.0"
138
- resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.0.tgz#a3e52fa39168c825ff57b0248126ce5a8ff95507"
139
- dependencies:
140
- arrify "^1.0.0"
141
- micromatch "^2.1.5"
142
-
143
-aproba@^1.0.3:
144
- version "1.1.2"
145
- resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.1.2.tgz#45c6629094de4e96f693ef7eab74ae079c240fc1"
146
-
147
-archive-type@^3.0.0, archive-type@^3.0.1:
148
- version "3.2.0"
149
- resolved "https://registry.yarnpkg.com/archive-type/-/archive-type-3.2.0.tgz#9cd9c006957ebe95fadad5bd6098942a813737f6"
150
- dependencies:
151
- file-type "^3.1.0"
152
-
153
-are-we-there-yet@~1.1.2:
154
- version "1.1.4"
155
- resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz#bb5dca382bb94f05e15194373d16fd3ba1ca110d"
156
- dependencies:
157
- delegates "^1.0.0"
158
- readable-stream "^2.0.6"
159
-
160
-argparse@^1.0.7:
161
- version "1.0.9"
162
- resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.9.tgz#73d83bc263f86e97f8cc4f6bae1b0e90a7d22c86"
163
- dependencies:
164
- sprintf-js "~1.0.2"
165
-
166
-argparse@~0.1.15:
167
- version "0.1.16"
168
- resolved "https://registry.yarnpkg.com/argparse/-/argparse-0.1.16.tgz#cfd01e0fbba3d6caed049fbd758d40f65196f57c"
169
- dependencies:
170
- underscore "~1.7.0"
171
- underscore.string "~2.4.0"
172
-
173
-arr-diff@^2.0.0:
174
- version "2.0.0"
175
- resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
176
- dependencies:
177
- arr-flatten "^1.0.1"
178
-
179
-arr-diff@^4.0.0:
180
- version "4.0.0"
181
- resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
182
-
183
-arr-flatten@^1.0.1, arr-flatten@^1.0.3:
184
- version "1.0.3"
185
- resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.0.3.tgz#a274ed85ac08849b6bd7847c4580745dc51adfb1"
186
-
187
-arr-union@^3.1.0:
188
- version "3.1.0"
189
- resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
190
-
191
-array-differ@^1.0.0:
192
- version "1.0.0"
193
- resolved "https://registry.yarnpkg.com/array-differ/-/array-differ-1.0.0.tgz#eff52e3758249d33be402b8bb8e564bb2b5d4031"
194
-
195
-array-each@^1.0.1:
196
- version "1.0.1"
197
- resolved "https://registry.yarnpkg.com/array-each/-/array-each-1.0.1.tgz#a794af0c05ab1752846ee753a1f211a05ba0c44f"
198
-
199
-array-find-index@^1.0.1:
200
- version "1.0.2"
201
- resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
202
-
203
-array-flatten@1.1.1:
204
- version "1.1.1"
205
- resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
206
-
207
-array-from@^2.1.1:
208
- version "2.1.1"
209
- resolved "https://registry.yarnpkg.com/array-from/-/array-from-2.1.1.tgz#cfe9d8c26628b9dc5aecc62a9f5d8f1f352c1195"
210
-
211
-array-iterate@^1.0.0:
212
- version "1.1.1"
213
- resolved "https://registry.yarnpkg.com/array-iterate/-/array-iterate-1.1.1.tgz#865bf7f8af39d6b0982c60902914ac76bc0108f6"
214
-
215
-array-slice@^1.0.0:
216
- version "1.0.0"
217
- resolved "https://registry.yarnpkg.com/array-slice/-/array-slice-1.0.0.tgz#e73034f00dcc1f40876008fd20feae77bd4b7c2f"
218
-
219
-array-union@^1.0.1:
220
- version "1.0.2"
221
- resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
222
- dependencies:
223
- array-uniq "^1.0.1"
224
-
225
-array-uniq@^1.0.0, array-uniq@^1.0.1, array-uniq@^1.0.2:
226
- version "1.0.3"
227
- resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
228
-
229
-array-unique@^0.2.1:
230
- version "0.2.1"
231
- resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
232
-
233
-array-unique@^0.3.2:
234
- version "0.3.2"
235
- resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
236
-
237
-arraybuffer.slice@0.0.6:
238
- version "0.0.6"
239
- resolved "https://registry.yarnpkg.com/arraybuffer.slice/-/arraybuffer.slice-0.0.6.tgz#f33b2159f0532a3f3107a272c0ccfbd1ad2979ca"
240
-
241
-arrify@^1.0.0:
242
- version "1.0.1"
243
- resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
244
-
245
-asap@~2.0.3:
246
- version "2.0.5"
247
- resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f"
248
-
249
-asn1.js@^4.0.0:
250
- version "4.9.1"
251
- resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.9.1.tgz#48ba240b45a9280e94748990ba597d216617fd40"
252
- dependencies:
253
- bn.js "^4.0.0"
254
- inherits "^2.0.1"
255
- minimalistic-assert "^1.0.0"
256
-
257
-asn1@~0.2.3:
258
- version "0.2.3"
259
- resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.3.tgz#dac8787713c9966849fc8180777ebe9c1ddf3b86"
260
-
261
-assert-plus@1.0.0, assert-plus@^1.0.0:
262
- version "1.0.0"
263
- resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
264
-
265
-assert-plus@^0.2.0:
266
- version "0.2.0"
267
- resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-0.2.0.tgz#d74e1b87e7affc0db8aadb7021f3fe48101ab234"
268
-
269
-assert@^1.1.1:
270
- version "1.4.1"
271
- resolved "https://registry.yarnpkg.com/assert/-/assert-1.4.1.tgz#99912d591836b5a6f5b345c0f07eefc08fc65d91"
272
- dependencies:
273
- util "0.10.3"
274
-
275
-async-each-series@^1.1.0:
276
- version "1.1.0"
277
- resolved "https://registry.yarnpkg.com/async-each-series/-/async-each-series-1.1.0.tgz#f42fd8155d38f21a5b8ea07c28e063ed1700b138"
278
-
279
-async-each@^1.0.0, async-each@^1.0.1:
280
- version "1.0.1"
281
- resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
282
-
283
-async@2.1.4:
284
- version "2.1.4"
285
- resolved "https://registry.yarnpkg.com/async/-/async-2.1.4.tgz#2d2160c7788032e4dd6cbe2502f1f9a2c8f6cde4"
286
- dependencies:
287
- lodash "^4.14.0"
288
-
289
-async@^0.9.0:
290
- version "0.9.2"
291
- resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
292
-
293
-async@^1.3.0, async@^1.5.0:
294
- version "1.5.2"
295
- resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
296
-
297
-async@^2.1.2:
298
- version "2.5.0"
299
- resolved "https://registry.yarnpkg.com/async/-/async-2.5.0.tgz#843190fd6b7357a0b9e1c956edddd5ec8462b54d"
300
- dependencies:
301
- lodash "^4.14.0"
302
-
303
-async@~0.2.6:
304
- version "0.2.10"
305
- resolved "https://registry.yarnpkg.com/async/-/async-0.2.10.tgz#b6bbe0b0674b9d719708ca38de8c237cb526c3d1"
306
-
307
-asynckit@^0.4.0:
308
- version "0.4.0"
309
- resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
310
-
311
-atob@^2.0.0:
312
- version "2.0.3"
313
- resolved "https://registry.yarnpkg.com/atob/-/atob-2.0.3.tgz#19c7a760473774468f20b2d2d03372ad7d4cbf5d"
314
-
315
-autolinker@~0.15.0:
316
- version "0.15.3"
317
- resolved "https://registry.yarnpkg.com/autolinker/-/autolinker-0.15.3.tgz#342417d8f2f3461b14cf09088d5edf8791dc9832"
318
-
319
-autoprefixer@^6.0.2, autoprefixer@^6.3.1:
320
- version "6.7.7"
321
- resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.7.tgz#1dbd1c835658e35ce3f9984099db00585c782014"
322
- dependencies:
323
- browserslist "^1.7.6"
324
- caniuse-db "^1.0.30000634"
325
- normalize-range "^0.1.2"
326
- num2fraction "^1.2.2"
327
- postcss "^5.2.16"
328
- postcss-value-parser "^3.2.3"
329
-
330
-aws-sign2@~0.6.0:
331
- version "0.6.0"
332
- resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
333
-
334
-aws4@^1.2.1:
335
- version "1.6.0"
336
- resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
337
-
338
-b64@2.x.x:
339
- version "2.0.1"
340
- resolved "https://registry.yarnpkg.com/b64/-/b64-2.0.1.tgz#d08c10719719ff1fe1b532ae49269409ce149ce9"
341
- dependencies:
342
- hoek "2.x.x"
343
-
344
-babel-cli@^6.26.0:
345
- version "6.26.0"
346
- resolved "https://registry.yarnpkg.com/babel-cli/-/babel-cli-6.26.0.tgz#502ab54874d7db88ad00b887a06383ce03d002f1"
347
- dependencies:
348
- babel-core "^6.26.0"
349
- babel-polyfill "^6.26.0"
350
- babel-register "^6.26.0"
351
- babel-runtime "^6.26.0"
352
- commander "^2.11.0"
353
- convert-source-map "^1.5.0"
354
- fs-readdir-recursive "^1.0.0"
355
- glob "^7.1.2"
356
- lodash "^4.17.4"
357
- output-file-sync "^1.1.2"
358
- path-is-absolute "^1.0.1"
359
- slash "^1.0.0"
360
- source-map "^0.5.6"
361
- v8flags "^2.1.1"
362
- optionalDependencies:
363
- chokidar "^1.6.1"
364
-
365
-babel-code-frame@^6.11.0, babel-code-frame@^6.22.0:
366
- version "6.22.0"
367
- resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.22.0.tgz#027620bee567a88c32561574e7fd0801d33118e4"
368
- dependencies:
369
- chalk "^1.1.0"
370
- esutils "^2.0.2"
371
- js-tokens "^3.0.0"
372
-
373
-babel-code-frame@^6.26.0:
374
- version "6.26.0"
375
- resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
376
- dependencies:
377
- chalk "^1.1.3"
378
- esutils "^2.0.2"
379
- js-tokens "^3.0.2"
380
-
381
-babel-core@^6.24.1:
382
- version "6.25.0"
383
- resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.25.0.tgz#7dd42b0463c742e9d5296deb3ec67a9322dad729"
384
- dependencies:
385
- babel-code-frame "^6.22.0"
386
- babel-generator "^6.25.0"
387
- babel-helpers "^6.24.1"
388
- babel-messages "^6.23.0"
389
- babel-register "^6.24.1"
390
- babel-runtime "^6.22.0"
391
- babel-template "^6.25.0"
392
- babel-traverse "^6.25.0"
393
- babel-types "^6.25.0"
394
- babylon "^6.17.2"
395
- convert-source-map "^1.1.0"
396
- debug "^2.1.1"
397
- json5 "^0.5.0"
398
- lodash "^4.2.0"
399
- minimatch "^3.0.2"
400
- path-is-absolute "^1.0.0"
401
- private "^0.1.6"
402
- slash "^1.0.0"
403
- source-map "^0.5.0"
404
-
405
-babel-core@^6.26.0:
406
- version "6.26.0"
407
- resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.26.0.tgz#af32f78b31a6fcef119c87b0fd8d9753f03a0bb8"
408
- dependencies:
409
- babel-code-frame "^6.26.0"
410
- babel-generator "^6.26.0"
411
- babel-helpers "^6.24.1"
412
- babel-messages "^6.23.0"
413
- babel-register "^6.26.0"
414
- babel-runtime "^6.26.0"
415
- babel-template "^6.26.0"
416
- babel-traverse "^6.26.0"
417
- babel-types "^6.26.0"
418
- babylon "^6.18.0"
419
- convert-source-map "^1.5.0"
420
- debug "^2.6.8"
421
- json5 "^0.5.1"
422
- lodash "^4.17.4"
423
- minimatch "^3.0.4"
424
- path-is-absolute "^1.0.1"
425
- private "^0.1.7"
426
- slash "^1.0.0"
427
- source-map "^0.5.6"
428
-
429
-babel-generator@6.25.0, babel-generator@^6.25.0:
430
- version "6.25.0"
431
- resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.25.0.tgz#33a1af70d5f2890aeb465a4a7793c1df6a9ea9fc"
432
- dependencies:
433
- babel-messages "^6.23.0"
434
- babel-runtime "^6.22.0"
435
- babel-types "^6.25.0"
436
- detect-indent "^4.0.0"
437
- jsesc "^1.3.0"
438
- lodash "^4.2.0"
439
- source-map "^0.5.0"
440
- trim-right "^1.0.1"
441
-
442
-babel-generator@^6.26.0:
443
- version "6.26.0"
444
- resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.0.tgz#ac1ae20070b79f6e3ca1d3269613053774f20dc5"
445
- dependencies:
446
- babel-messages "^6.23.0"
447
- babel-runtime "^6.26.0"
448
- babel-types "^6.26.0"
449
- detect-indent "^4.0.0"
450
- jsesc "^1.3.0"
451
- lodash "^4.17.4"
452
- source-map "^0.5.6"
453
- trim-right "^1.0.1"
454
-
455
-babel-helper-bindify-decorators@^6.24.1:
456
- version "6.24.1"
457
- resolved "https://registry.yarnpkg.com/babel-helper-bindify-decorators/-/babel-helper-bindify-decorators-6.24.1.tgz#14c19e5f142d7b47f19a52431e52b1ccbc40a330"
458
- dependencies:
459
- babel-runtime "^6.22.0"
460
- babel-traverse "^6.24.1"
461
- babel-types "^6.24.1"
462
-
463
-babel-helper-builder-binary-assignment-operator-visitor@^6.24.1:
464
- version "6.24.1"
465
- resolved "https://registry.yarnpkg.com/babel-helper-builder-binary-assignment-operator-visitor/-/babel-helper-builder-binary-assignment-operator-visitor-6.24.1.tgz#cce4517ada356f4220bcae8a02c2b346f9a56664"
466
- dependencies:
467
- babel-helper-explode-assignable-expression "^6.24.1"
468
- babel-runtime "^6.22.0"
469
- babel-types "^6.24.1"
470
-
471
-babel-helper-builder-react-jsx@^6.24.1:
472
- version "6.24.1"
473
- resolved "https://registry.yarnpkg.com/babel-helper-builder-react-jsx/-/babel-helper-builder-react-jsx-6.24.1.tgz#0ad7917e33c8d751e646daca4e77cc19377d2cbc"
474
- dependencies:
475
- babel-runtime "^6.22.0"
476
- babel-types "^6.24.1"
477
- esutils "^2.0.0"
478
-
479
-babel-helper-call-delegate@^6.24.1:
480
- version "6.24.1"
481
- resolved "https://registry.yarnpkg.com/babel-helper-call-delegate/-/babel-helper-call-delegate-6.24.1.tgz#ece6aacddc76e41c3461f88bfc575bd0daa2df8d"
482
- dependencies:
483
- babel-helper-hoist-variables "^6.24.1"
484
- babel-runtime "^6.22.0"
485
- babel-traverse "^6.24.1"
486
- babel-types "^6.24.1"
487
-
488
-babel-helper-define-map@^6.24.1:
489
- version "6.24.1"
490
- resolved "https://registry.yarnpkg.com/babel-helper-define-map/-/babel-helper-define-map-6.24.1.tgz#7a9747f258d8947d32d515f6aa1c7bd02204a080"
491
- dependencies:
492
- babel-helper-function-name "^6.24.1"
493
- babel-runtime "^6.22.0"
494
- babel-types "^6.24.1"
495
- lodash "^4.2.0"
496
-
497
-babel-helper-explode-assignable-expression@^6.24.1:
498
- version "6.24.1"
499
- resolved "https://registry.yarnpkg.com/babel-helper-explode-assignable-expression/-/babel-helper-explode-assignable-expression-6.24.1.tgz#f25b82cf7dc10433c55f70592d5746400ac22caa"
500
- dependencies:
501
- babel-runtime "^6.22.0"
502
- babel-traverse "^6.24.1"
503
- babel-types "^6.24.1"
504
-
505
-babel-helper-explode-class@^6.24.1:
506
- version "6.24.1"
507
- resolved "https://registry.yarnpkg.com/babel-helper-explode-class/-/babel-helper-explode-class-6.24.1.tgz#7dc2a3910dee007056e1e31d640ced3d54eaa9eb"
508
- dependencies:
509
- babel-helper-bindify-decorators "^6.24.1"
510
- babel-runtime "^6.22.0"
511
- babel-traverse "^6.24.1"
512
- babel-types "^6.24.1"
513
-
514
-babel-helper-function-name@^6.24.1:
515
- version "6.24.1"
516
- resolved "https://registry.yarnpkg.com/babel-helper-function-name/-/babel-helper-function-name-6.24.1.tgz#d3475b8c03ed98242a25b48351ab18399d3580a9"
517
- dependencies:
518
- babel-helper-get-function-arity "^6.24.1"
519
- babel-runtime "^6.22.0"
520
- babel-template "^6.24.1"
521
- babel-traverse "^6.24.1"
522
- babel-types "^6.24.1"
523
-
524
-babel-helper-get-function-arity@^6.24.1:
525
- version "6.24.1"
526
- resolved "https://registry.yarnpkg.com/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.24.1.tgz#8f7782aa93407c41d3aa50908f89b031b1b6853d"
527
- dependencies:
528
- babel-runtime "^6.22.0"
529
- babel-types "^6.24.1"
530
-
531
-babel-helper-hoist-variables@^6.24.1:
532
- version "6.24.1"
533
- resolved "https://registry.yarnpkg.com/babel-helper-hoist-variables/-/babel-helper-hoist-variables-6.24.1.tgz#1ecb27689c9d25513eadbc9914a73f5408be7a76"
534
- dependencies:
535
- babel-runtime "^6.22.0"
536
- babel-types "^6.24.1"
537
-
538
-babel-helper-optimise-call-expression@^6.24.1:
539
- version "6.24.1"
540
- resolved "https://registry.yarnpkg.com/babel-helper-optimise-call-expression/-/babel-helper-optimise-call-expression-6.24.1.tgz#f7a13427ba9f73f8f4fa993c54a97882d1244257"
541
- dependencies:
542
- babel-runtime "^6.22.0"
543
- babel-types "^6.24.1"
544
-
545
-babel-helper-regex@^6.24.1:
546
- version "6.24.1"
547
- resolved "https://registry.yarnpkg.com/babel-helper-regex/-/babel-helper-regex-6.24.1.tgz#d36e22fab1008d79d88648e32116868128456ce8"
548
- dependencies:
549
- babel-runtime "^6.22.0"
550
- babel-types "^6.24.1"
551
- lodash "^4.2.0"
552
-
553
-babel-helper-remap-async-to-generator@^6.24.1:
554
- version "6.24.1"
555
- resolved "https://registry.yarnpkg.com/babel-helper-remap-async-to-generator/-/babel-helper-remap-async-to-generator-6.24.1.tgz#5ec581827ad723fecdd381f1c928390676e4551b"
556
- dependencies:
557
- babel-helper-function-name "^6.24.1"
558
- babel-runtime "^6.22.0"
559
- babel-template "^6.24.1"
560
- babel-traverse "^6.24.1"
561
- babel-types "^6.24.1"
562
-
563
-babel-helper-replace-supers@^6.24.1:
564
- version "6.24.1"
565
- resolved "https://registry.yarnpkg.com/babel-helper-replace-supers/-/babel-helper-replace-supers-6.24.1.tgz#bf6dbfe43938d17369a213ca8a8bf74b6a90ab1a"
566
- dependencies:
567
- babel-helper-optimise-call-expression "^6.24.1"
568
- babel-messages "^6.23.0"
569
- babel-runtime "^6.22.0"
570
- babel-template "^6.24.1"
571
- babel-traverse "^6.24.1"
572
- babel-types "^6.24.1"
573
-
574
-babel-helpers@^6.24.1:
575
- version "6.24.1"
576
- resolved "https://registry.yarnpkg.com/babel-helpers/-/babel-helpers-6.24.1.tgz#3471de9caec388e5c850e597e58a26ddf37602b2"
577
- dependencies:
578
- babel-runtime "^6.22.0"
579
- babel-template "^6.24.1"
580
-
581
-babel-loader@^6.0.0:
582
- version "6.4.1"
583
- resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-6.4.1.tgz#0b34112d5b0748a8dcdbf51acf6f9bd42d50b8ca"
584
- dependencies:
585
- find-cache-dir "^0.1.1"
586
- loader-utils "^0.2.16"
587
- mkdirp "^0.5.1"
588
- object-assign "^4.0.1"
589
-
590
-babel-messages@^6.23.0:
591
- version "6.23.0"
592
- resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
593
- dependencies:
594
- babel-runtime "^6.22.0"
595
-
596
-babel-plugin-add-module-exports@^0.2.1:
597
- version "0.2.1"
598
- resolved "https://registry.yarnpkg.com/babel-plugin-add-module-exports/-/babel-plugin-add-module-exports-0.2.1.tgz#9ae9a1f4a8dc67f0cdec4f4aeda1e43a5ff65e25"
599
-
600
-babel-plugin-check-es2015-constants@^6.22.0, babel-plugin-check-es2015-constants@^6.8.0:
601
- version "6.22.0"
602
- resolved "https://registry.yarnpkg.com/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.22.0.tgz#35157b101426fd2ffd3da3f75c7d1e91835bbf8a"
603
- dependencies:
604
- babel-runtime "^6.22.0"
605
-
606
-babel-plugin-syntax-async-functions@^6.8.0:
607
- version "6.13.0"
608
- resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
609
-
610
-babel-plugin-syntax-async-generators@^6.5.0:
611
- version "6.13.0"
612
- resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-generators/-/babel-plugin-syntax-async-generators-6.13.0.tgz#6bc963ebb16eccbae6b92b596eb7f35c342a8b9a"
613
-
614
-babel-plugin-syntax-class-constructor-call@^6.18.0:
615
- version "6.18.0"
616
- resolved "https://registry.yarnpkg.com/babel-plugin-syntax-class-constructor-call/-/babel-plugin-syntax-class-constructor-call-6.18.0.tgz#9cb9d39fe43c8600bec8146456ddcbd4e1a76416"
617
-
618
-babel-plugin-syntax-class-properties@^6.8.0:
619
- version "6.13.0"
620
- resolved "https://registry.yarnpkg.com/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz#d7eb23b79a317f8543962c505b827c7d6cac27de"
621
-
622
-babel-plugin-syntax-decorators@^6.13.0:
623
- version "6.13.0"
624
- resolved "https://registry.yarnpkg.com/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz#312563b4dbde3cc806cee3e416cceeaddd11ac0b"
625
-
626
-babel-plugin-syntax-do-expressions@^6.8.0:
627
- version "6.13.0"
628
- resolved "https://registry.yarnpkg.com/babel-plugin-syntax-do-expressions/-/babel-plugin-syntax-do-expressions-6.13.0.tgz#5747756139aa26d390d09410b03744ba07e4796d"
629
-
630
-babel-plugin-syntax-dynamic-import@^6.18.0:
631
- version "6.18.0"
632
- resolved "https://registry.yarnpkg.com/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz#8d6a26229c83745a9982a441051572caa179b1da"
633
-
634
-babel-plugin-syntax-exponentiation-operator@^6.8.0:
635
- version "6.13.0"
636
- resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
637
-
638
-babel-plugin-syntax-export-extensions@^6.8.0:
639
- version "6.13.0"
640
- resolved "https://registry.yarnpkg.com/babel-plugin-syntax-export-extensions/-/babel-plugin-syntax-export-extensions-6.13.0.tgz#70a1484f0f9089a4e84ad44bac353c95b9b12721"
641
-
642
-babel-plugin-syntax-flow@^6.18.0, babel-plugin-syntax-flow@^6.8.0:
643
- version "6.18.0"
644
- resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
645
-
646
-babel-plugin-syntax-function-bind@^6.8.0:
647
- version "6.13.0"
648
- resolved "https://registry.yarnpkg.com/babel-plugin-syntax-function-bind/-/babel-plugin-syntax-function-bind-6.13.0.tgz#48c495f177bdf31a981e732f55adc0bdd2601f46"
649
-
650
-babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0:
651
- version "6.18.0"
652
- resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
653
-
654
-babel-plugin-syntax-object-rest-spread@^6.8.0:
655
- version "6.13.0"
656
- resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
657
-
658
-babel-plugin-syntax-trailing-function-commas@^6.22.0, babel-plugin-syntax-trailing-function-commas@^6.8.0:
659
- version "6.22.0"
660
- resolved "https://registry.yarnpkg.com/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.22.0.tgz#ba0360937f8d06e40180a43fe0d5616fff532cf3"
661
-
662
-babel-plugin-transform-amd-system-wrapper@^0.3.7:
663
- version "0.3.7"
664
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-amd-system-wrapper/-/babel-plugin-transform-amd-system-wrapper-0.3.7.tgz#521c782d35644491c979ea683e8a5e1caff0ba42"
665
- dependencies:
666
- babel-template "^6.9.0"
667
-
668
-babel-plugin-transform-async-generator-functions@^6.24.1:
669
- version "6.24.1"
670
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-generator-functions/-/babel-plugin-transform-async-generator-functions-6.24.1.tgz#f058900145fd3e9907a6ddf28da59f215258a5db"
671
- dependencies:
672
- babel-helper-remap-async-to-generator "^6.24.1"
673
- babel-plugin-syntax-async-generators "^6.5.0"
674
- babel-runtime "^6.22.0"
675
-
676
-babel-plugin-transform-async-to-generator@^6.22.0, babel-plugin-transform-async-to-generator@^6.24.1:
677
- version "6.24.1"
678
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-to-generator/-/babel-plugin-transform-async-to-generator-6.24.1.tgz#6536e378aff6cb1d5517ac0e40eb3e9fc8d08761"
679
- dependencies:
680
- babel-helper-remap-async-to-generator "^6.24.1"
681
- babel-plugin-syntax-async-functions "^6.8.0"
682
- babel-runtime "^6.22.0"
683
-
684
-babel-plugin-transform-cjs-system-wrapper@^0.6.2:
685
- version "0.6.2"
686
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-cjs-system-wrapper/-/babel-plugin-transform-cjs-system-wrapper-0.6.2.tgz#bd7494775289424ff493b6ed455de495bd71ba1d"
687
- dependencies:
688
- babel-template "^6.9.0"
689
-
690
-babel-plugin-transform-class-constructor-call@^6.24.1:
691
- version "6.24.1"
692
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-constructor-call/-/babel-plugin-transform-class-constructor-call-6.24.1.tgz#80dc285505ac067dcb8d6c65e2f6f11ab7765ef9"
693
- dependencies:
694
- babel-plugin-syntax-class-constructor-call "^6.18.0"
695
- babel-runtime "^6.22.0"
696
- babel-template "^6.24.1"
697
-
698
-babel-plugin-transform-class-properties@^6.24.1, babel-plugin-transform-class-properties@^6.8.0:
699
- version "6.24.1"
700
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.24.1.tgz#6a79763ea61d33d36f37b611aa9def81a81b46ac"
701
- dependencies:
702
- babel-helper-function-name "^6.24.1"
703
- babel-plugin-syntax-class-properties "^6.8.0"
704
- babel-runtime "^6.22.0"
705
- babel-template "^6.24.1"
706
-
707
-babel-plugin-transform-decorators@^6.24.1:
708
- version "6.24.1"
709
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-decorators/-/babel-plugin-transform-decorators-6.24.1.tgz#788013d8f8c6b5222bdf7b344390dfd77569e24d"
710
- dependencies:
711
- babel-helper-explode-class "^6.24.1"
712
- babel-plugin-syntax-decorators "^6.13.0"
713
- babel-runtime "^6.22.0"
714
- babel-template "^6.24.1"
715
- babel-types "^6.24.1"
716
-
717
-babel-plugin-transform-do-expressions@^6.22.0:
718
- version "6.22.0"
719
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-do-expressions/-/babel-plugin-transform-do-expressions-6.22.0.tgz#28ccaf92812d949c2cd1281f690c8fdc468ae9bb"
720
- dependencies:
721
- babel-plugin-syntax-do-expressions "^6.8.0"
722
- babel-runtime "^6.22.0"
723
-
724
-babel-plugin-transform-es2015-arrow-functions@^6.22.0, babel-plugin-transform-es2015-arrow-functions@^6.8.0:
725
- version "6.22.0"
726
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz#452692cb711d5f79dc7f85e440ce41b9f244d221"
727
- dependencies:
728
- babel-runtime "^6.22.0"
729
-
730
-babel-plugin-transform-es2015-block-scoped-functions@^6.22.0, babel-plugin-transform-es2015-block-scoped-functions@^6.8.0:
731
- version "6.22.0"
732
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoped-functions/-/babel-plugin-transform-es2015-block-scoped-functions-6.22.0.tgz#bbc51b49f964d70cb8d8e0b94e820246ce3a6141"
733
- dependencies:
734
- babel-runtime "^6.22.0"
735
-
736
-babel-plugin-transform-es2015-block-scoping@^6.23.0, babel-plugin-transform-es2015-block-scoping@^6.24.1, babel-plugin-transform-es2015-block-scoping@^6.8.0:
737
- version "6.24.1"
738
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.24.1.tgz#76c295dc3a4741b1665adfd3167215dcff32a576"
739
- dependencies:
740
- babel-runtime "^6.22.0"
741
- babel-template "^6.24.1"
742
- babel-traverse "^6.24.1"
743
- babel-types "^6.24.1"
744
- lodash "^4.2.0"
745
-
746
-babel-plugin-transform-es2015-classes@^6.23.0, babel-plugin-transform-es2015-classes@^6.24.1, babel-plugin-transform-es2015-classes@^6.8.0:
747
- version "6.24.1"
748
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.24.1.tgz#5a4c58a50c9c9461e564b4b2a3bfabc97a2584db"
749
- dependencies:
750
- babel-helper-define-map "^6.24.1"
751
- babel-helper-function-name "^6.24.1"
752
- babel-helper-optimise-call-expression "^6.24.1"
753
- babel-helper-replace-supers "^6.24.1"
754
- babel-messages "^6.23.0"
755
- babel-runtime "^6.22.0"
756
- babel-template "^6.24.1"
757
- babel-traverse "^6.24.1"
758
- babel-types "^6.24.1"
759
-
760
-babel-plugin-transform-es2015-computed-properties@^6.22.0, babel-plugin-transform-es2015-computed-properties@^6.24.1, babel-plugin-transform-es2015-computed-properties@^6.8.0:
761
- version "6.24.1"
762
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-computed-properties/-/babel-plugin-transform-es2015-computed-properties-6.24.1.tgz#6fe2a8d16895d5634f4cd999b6d3480a308159b3"
763
- dependencies:
764
- babel-runtime "^6.22.0"
765
- babel-template "^6.24.1"
766
-
767
-babel-plugin-transform-es2015-destructuring@^6.22.0, babel-plugin-transform-es2015-destructuring@^6.23.0, babel-plugin-transform-es2015-destructuring@^6.8.0:
768
- version "6.23.0"
769
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.23.0.tgz#997bb1f1ab967f682d2b0876fe358d60e765c56d"
770
- dependencies:
771
- babel-runtime "^6.22.0"
772
-
773
-babel-plugin-transform-es2015-duplicate-keys@^6.22.0, babel-plugin-transform-es2015-duplicate-keys@^6.24.1:
774
- version "6.24.1"
775
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.24.1.tgz#73eb3d310ca969e3ef9ec91c53741a6f1576423e"
776
- dependencies:
777
- babel-runtime "^6.22.0"
778
- babel-types "^6.24.1"
779
-
780
-babel-plugin-transform-es2015-for-of@^6.22.0, babel-plugin-transform-es2015-for-of@^6.23.0, babel-plugin-transform-es2015-for-of@^6.8.0:
781
- version "6.23.0"
782
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-for-of/-/babel-plugin-transform-es2015-for-of-6.23.0.tgz#f47c95b2b613df1d3ecc2fdb7573623c75248691"
783
- dependencies:
784
- babel-runtime "^6.22.0"
785
-
786
-babel-plugin-transform-es2015-function-name@^6.22.0, babel-plugin-transform-es2015-function-name@^6.24.1, babel-plugin-transform-es2015-function-name@^6.8.0:
787
- version "6.24.1"
788
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-function-name/-/babel-plugin-transform-es2015-function-name-6.24.1.tgz#834c89853bc36b1af0f3a4c5dbaa94fd8eacaa8b"
789
- dependencies:
790
- babel-helper-function-name "^6.24.1"
791
- babel-runtime "^6.22.0"
792
- babel-types "^6.24.1"
793
-
794
-babel-plugin-transform-es2015-literals@^6.22.0, babel-plugin-transform-es2015-literals@^6.8.0:
795
- version "6.22.0"
796
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-literals/-/babel-plugin-transform-es2015-literals-6.22.0.tgz#4f54a02d6cd66cf915280019a31d31925377ca2e"
797
- dependencies:
798
- babel-runtime "^6.22.0"
799
-
800
-babel-plugin-transform-es2015-modules-amd@^6.22.0, babel-plugin-transform-es2015-modules-amd@^6.24.1:
801
- version "6.24.1"
802
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-amd/-/babel-plugin-transform-es2015-modules-amd-6.24.1.tgz#3b3e54017239842d6d19c3011c4bd2f00a00d154"
803
- dependencies:
804
- babel-plugin-transform-es2015-modules-commonjs "^6.24.1"
805
- babel-runtime "^6.22.0"
806
- babel-template "^6.24.1"
807
-
808
-babel-plugin-transform-es2015-modules-commonjs@^6.23.0, babel-plugin-transform-es2015-modules-commonjs@^6.24.1, babel-plugin-transform-es2015-modules-commonjs@^6.8.0:
809
- version "6.24.1"
810
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.24.1.tgz#d3e310b40ef664a36622200097c6d440298f2bfe"
811
- dependencies:
812
- babel-plugin-transform-strict-mode "^6.24.1"
813
- babel-runtime "^6.22.0"
814
- babel-template "^6.24.1"
815
- babel-types "^6.24.1"
816
-
817
-babel-plugin-transform-es2015-modules-systemjs@^6.23.0, babel-plugin-transform-es2015-modules-systemjs@^6.24.1, babel-plugin-transform-es2015-modules-systemjs@^6.6.5:
818
- version "6.24.1"
819
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.24.1.tgz#ff89a142b9119a906195f5f106ecf305d9407d23"
820
- dependencies:
821
- babel-helper-hoist-variables "^6.24.1"
822
- babel-runtime "^6.22.0"
823
- babel-template "^6.24.1"
824
-
825
-babel-plugin-transform-es2015-modules-umd@^6.23.0, babel-plugin-transform-es2015-modules-umd@^6.24.1:
826
- version "6.24.1"
827
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-umd/-/babel-plugin-transform-es2015-modules-umd-6.24.1.tgz#ac997e6285cd18ed6176adb607d602344ad38468"
828
- dependencies:
829
- babel-plugin-transform-es2015-modules-amd "^6.24.1"
830
- babel-runtime "^6.22.0"
831
- babel-template "^6.24.1"
832
-
833
-babel-plugin-transform-es2015-object-super@^6.22.0, babel-plugin-transform-es2015-object-super@^6.24.1, babel-plugin-transform-es2015-object-super@^6.8.0:
834
- version "6.24.1"
835
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-object-super/-/babel-plugin-transform-es2015-object-super-6.24.1.tgz#24cef69ae21cb83a7f8603dad021f572eb278f8d"
836
- dependencies:
837
- babel-helper-replace-supers "^6.24.1"
838
- babel-runtime "^6.22.0"
839
-
840
-babel-plugin-transform-es2015-parameters@^6.23.0, babel-plugin-transform-es2015-parameters@^6.24.1, babel-plugin-transform-es2015-parameters@^6.8.0:
841
- version "6.24.1"
842
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.24.1.tgz#57ac351ab49caf14a97cd13b09f66fdf0a625f2b"
843
- dependencies:
844
- babel-helper-call-delegate "^6.24.1"
845
- babel-helper-get-function-arity "^6.24.1"
846
- babel-runtime "^6.22.0"
847
- babel-template "^6.24.1"
848
- babel-traverse "^6.24.1"
849
- babel-types "^6.24.1"
850
-
851
-babel-plugin-transform-es2015-shorthand-properties@^6.22.0, babel-plugin-transform-es2015-shorthand-properties@^6.24.1, babel-plugin-transform-es2015-shorthand-properties@^6.8.0:
852
- version "6.24.1"
853
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-shorthand-properties/-/babel-plugin-transform-es2015-shorthand-properties-6.24.1.tgz#24f875d6721c87661bbd99a4622e51f14de38aa0"
854
- dependencies:
855
- babel-runtime "^6.22.0"
856
- babel-types "^6.24.1"
857
-
858
-babel-plugin-transform-es2015-spread@^6.22.0, babel-plugin-transform-es2015-spread@^6.8.0:
859
- version "6.22.0"
860
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-spread/-/babel-plugin-transform-es2015-spread-6.22.0.tgz#d6d68a99f89aedc4536c81a542e8dd9f1746f8d1"
861
- dependencies:
862
- babel-runtime "^6.22.0"
863
-
864
-babel-plugin-transform-es2015-sticky-regex@^6.22.0, babel-plugin-transform-es2015-sticky-regex@^6.24.1:
865
- version "6.24.1"
866
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-sticky-regex/-/babel-plugin-transform-es2015-sticky-regex-6.24.1.tgz#00c1cdb1aca71112cdf0cf6126c2ed6b457ccdbc"
867
- dependencies:
868
- babel-helper-regex "^6.24.1"
869
- babel-runtime "^6.22.0"
870
- babel-types "^6.24.1"
871
-
872
-babel-plugin-transform-es2015-template-literals@^6.22.0, babel-plugin-transform-es2015-template-literals@^6.8.0:
873
- version "6.22.0"
874
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-template-literals/-/babel-plugin-transform-es2015-template-literals-6.22.0.tgz#a84b3450f7e9f8f1f6839d6d687da84bb1236d8d"
875
- dependencies:
876
- babel-runtime "^6.22.0"
877
-
878
-babel-plugin-transform-es2015-typeof-symbol@^6.22.0, babel-plugin-transform-es2015-typeof-symbol@^6.23.0:
879
- version "6.23.0"
880
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-typeof-symbol/-/babel-plugin-transform-es2015-typeof-symbol-6.23.0.tgz#dec09f1cddff94b52ac73d505c84df59dcceb372"
881
- dependencies:
882
- babel-runtime "^6.22.0"
883
-
884
-babel-plugin-transform-es2015-unicode-regex@^6.22.0, babel-plugin-transform-es2015-unicode-regex@^6.24.1:
885
- version "6.24.1"
886
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-unicode-regex/-/babel-plugin-transform-es2015-unicode-regex-6.24.1.tgz#d38b12f42ea7323f729387f18a7c5ae1faeb35e9"
887
- dependencies:
888
- babel-helper-regex "^6.24.1"
889
- babel-runtime "^6.22.0"
890
- regexpu-core "^2.0.0"
891
-
892
-babel-plugin-transform-es3-member-expression-literals@^6.8.0:
893
- version "6.22.0"
894
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-es3-member-expression-literals/-/babel-plugin-transform-es3-member-expression-literals-6.22.0.tgz#733d3444f3ecc41bef8ed1a6a4e09657b8969ebb"
895
- dependencies:
896
- babel-runtime "^6.22.0"
897
-
898
-babel-plugin-transform-es3-property-literals@^6.8.0:
899
- version "6.22.0"
900
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-es3-property-literals/-/babel-plugin-transform-es3-property-literals-6.22.0.tgz#b2078d5842e22abf40f73e8cde9cd3711abd5758"
901
- dependencies:
902
- babel-runtime "^6.22.0"
903
-
904
-babel-plugin-transform-exponentiation-operator@^6.22.0, babel-plugin-transform-exponentiation-operator@^6.24.1:
905
- version "6.24.1"
906
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.24.1.tgz#2ab0c9c7f3098fa48907772bb813fe41e8de3a0e"
907
- dependencies:
908
- babel-helper-builder-binary-assignment-operator-visitor "^6.24.1"
909
- babel-plugin-syntax-exponentiation-operator "^6.8.0"
910
- babel-runtime "^6.22.0"
911
-
912
-babel-plugin-transform-export-extensions@^6.22.0:
913
- version "6.22.0"
914
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-export-extensions/-/babel-plugin-transform-export-extensions-6.22.0.tgz#53738b47e75e8218589eea946cbbd39109bbe653"
915
- dependencies:
916
- babel-plugin-syntax-export-extensions "^6.8.0"
917
- babel-runtime "^6.22.0"
918
-
919
-babel-plugin-transform-flow-strip-types@^6.22.0, babel-plugin-transform-flow-strip-types@^6.8.0:
920
- version "6.22.0"
921
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-flow-strip-types/-/babel-plugin-transform-flow-strip-types-6.22.0.tgz#84cb672935d43714fdc32bce84568d87441cf7cf"
922
- dependencies:
923
- babel-plugin-syntax-flow "^6.18.0"
924
- babel-runtime "^6.22.0"
925
-
926
-babel-plugin-transform-function-bind@^6.22.0:
927
- version "6.22.0"
928
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-function-bind/-/babel-plugin-transform-function-bind-6.22.0.tgz#c6fb8e96ac296a310b8cf8ea401462407ddf6a97"
929
- dependencies:
930
- babel-plugin-syntax-function-bind "^6.8.0"
931
- babel-runtime "^6.22.0"
932
-
933
-babel-plugin-transform-global-system-wrapper@^0.3.4:
934
- version "0.3.4"
935
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-global-system-wrapper/-/babel-plugin-transform-global-system-wrapper-0.3.4.tgz#948dd7d29fc21447e39bd3447f2debc7f2f73aac"
936
- dependencies:
937
- babel-template "^6.9.0"
938
-
939
-babel-plugin-transform-object-assign@^6.8.0:
940
- version "6.22.0"
941
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-assign/-/babel-plugin-transform-object-assign-6.22.0.tgz#f99d2f66f1a0b0d498e346c5359684740caa20ba"
942
- dependencies:
943
- babel-runtime "^6.22.0"
944
-
945
-babel-plugin-transform-object-rest-spread@^6.22.0, babel-plugin-transform-object-rest-spread@^6.8.0:
946
- version "6.26.0"
947
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06"
948
- dependencies:
949
- babel-plugin-syntax-object-rest-spread "^6.8.0"
950
- babel-runtime "^6.26.0"
951
-
952
-babel-plugin-transform-react-display-name@^6.23.0, babel-plugin-transform-react-display-name@^6.8.0:
953
- version "6.25.0"
954
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-display-name/-/babel-plugin-transform-react-display-name-6.25.0.tgz#67e2bf1f1e9c93ab08db96792e05392bf2cc28d1"
955
- dependencies:
956
- babel-runtime "^6.22.0"
957
-
958
-babel-plugin-transform-react-jsx-self@^6.22.0:
959
- version "6.22.0"
960
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-self/-/babel-plugin-transform-react-jsx-self-6.22.0.tgz#df6d80a9da2612a121e6ddd7558bcbecf06e636e"
961
- dependencies:
962
- babel-plugin-syntax-jsx "^6.8.0"
963
- babel-runtime "^6.22.0"
964
-
965
-babel-plugin-transform-react-jsx-source@^6.22.0:
966
- version "6.22.0"
967
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx-source/-/babel-plugin-transform-react-jsx-source-6.22.0.tgz#66ac12153f5cd2d17b3c19268f4bf0197f44ecd6"
968
- dependencies:
969
- babel-plugin-syntax-jsx "^6.8.0"
970
- babel-runtime "^6.22.0"
971
-
972
-babel-plugin-transform-react-jsx@^6.24.1, babel-plugin-transform-react-jsx@^6.8.0:
973
- version "6.24.1"
974
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-jsx/-/babel-plugin-transform-react-jsx-6.24.1.tgz#840a028e7df460dfc3a2d29f0c0d91f6376e66a3"
975
- dependencies:
976
- babel-helper-builder-react-jsx "^6.24.1"
977
- babel-plugin-syntax-jsx "^6.8.0"
978
- babel-runtime "^6.22.0"
979
-
980
-babel-plugin-transform-regenerator@^6.22.0, babel-plugin-transform-regenerator@^6.24.1:
981
- version "6.24.1"
982
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.24.1.tgz#b8da305ad43c3c99b4848e4fe4037b770d23c418"
983
- dependencies:
984
- regenerator-transform "0.9.11"
985
-
986
-babel-plugin-transform-strict-mode@^6.24.1:
987
- version "6.24.1"
988
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.24.1.tgz#d5faf7aa578a65bbe591cf5edae04a0c67020758"
989
- dependencies:
990
- babel-runtime "^6.22.0"
991
- babel-types "^6.24.1"
992
-
993
-babel-plugin-transform-system-register@^0.0.1:
994
- version "0.0.1"
995
- resolved "https://registry.yarnpkg.com/babel-plugin-transform-system-register/-/babel-plugin-transform-system-register-0.0.1.tgz#9dff40390c2763ac518f0b2ad7c5ea4f65a5be25"
996
-
997
-babel-polyfill@^6.23.0:
998
- version "6.23.0"
999
- resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.23.0.tgz#8364ca62df8eafb830499f699177466c3b03499d"
1000
- dependencies:
1001
- babel-runtime "^6.22.0"
1002
- core-js "^2.4.0"
1003
- regenerator-runtime "^0.10.0"
1004
-
1005
-babel-polyfill@^6.26.0:
1006
- version "6.26.0"
1007
- resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.26.0.tgz#379937abc67d7895970adc621f284cd966cf2153"
1008
- dependencies:
1009
- babel-runtime "^6.26.0"
1010
- core-js "^2.5.0"
1011
- regenerator-runtime "^0.10.5"
1012
-
1013
-babel-preset-env@^1.6.0:
1014
- version "1.6.0"
1015
- resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.6.0.tgz#2de1c782a780a0a5d605d199c957596da43c44e4"
1016
- dependencies:
1017
- babel-plugin-check-es2015-constants "^6.22.0"
1018
- babel-plugin-syntax-trailing-function-commas "^6.22.0"
1019
- babel-plugin-transform-async-to-generator "^6.22.0"
1020
- babel-plugin-transform-es2015-arrow-functions "^6.22.0"
1021
- babel-plugin-transform-es2015-block-scoped-functions "^6.22.0"
1022
- babel-plugin-transform-es2015-block-scoping "^6.23.0"
1023
- babel-plugin-transform-es2015-classes "^6.23.0"
1024
- babel-plugin-transform-es2015-computed-properties "^6.22.0"
1025
- babel-plugin-transform-es2015-destructuring "^6.23.0"
1026
- babel-plugin-transform-es2015-duplicate-keys "^6.22.0"
1027
- babel-plugin-transform-es2015-for-of "^6.23.0"
1028
- babel-plugin-transform-es2015-function-name "^6.22.0"
1029
- babel-plugin-transform-es2015-literals "^6.22.0"
1030
- babel-plugin-transform-es2015-modules-amd "^6.22.0"
1031
- babel-plugin-transform-es2015-modules-commonjs "^6.23.0"
1032
- babel-plugin-transform-es2015-modules-systemjs "^6.23.0"
1033
- babel-plugin-transform-es2015-modules-umd "^6.23.0"
1034
- babel-plugin-transform-es2015-object-super "^6.22.0"
1035
- babel-plugin-transform-es2015-parameters "^6.23.0"
1036
- babel-plugin-transform-es2015-shorthand-properties "^6.22.0"
1037
- babel-plugin-transform-es2015-spread "^6.22.0"
1038
- babel-plugin-transform-es2015-sticky-regex "^6.22.0"
1039
- babel-plugin-transform-es2015-template-literals "^6.22.0"
1040
- babel-plugin-transform-es2015-typeof-symbol "^6.23.0"
1041
- babel-plugin-transform-es2015-unicode-regex "^6.22.0"
1042
- babel-plugin-transform-exponentiation-operator "^6.22.0"
1043
- babel-plugin-transform-regenerator "^6.22.0"
1044
- browserslist "^2.1.2"
1045
- invariant "^2.2.2"
1046
- semver "^5.3.0"
1047
-
1048
-babel-preset-es2015@^6.24.1:
1049
- version "6.24.1"
1050
- resolved "https://registry.yarnpkg.com/babel-preset-es2015/-/babel-preset-es2015-6.24.1.tgz#d44050d6bc2c9feea702aaf38d727a0210538939"
1051
- dependencies:
1052
- babel-plugin-check-es2015-constants "^6.22.0"
1053
- babel-plugin-transform-es2015-arrow-functions "^6.22.0"
1054
- babel-plugin-transform-es2015-block-scoped-functions "^6.22.0"
1055
- babel-plugin-transform-es2015-block-scoping "^6.24.1"
1056
- babel-plugin-transform-es2015-classes "^6.24.1"
1057
- babel-plugin-transform-es2015-computed-properties "^6.24.1"
1058
- babel-plugin-transform-es2015-destructuring "^6.22.0"
1059
- babel-plugin-transform-es2015-duplicate-keys "^6.24.1"
1060
- babel-plugin-transform-es2015-for-of "^6.22.0"
1061
- babel-plugin-transform-es2015-function-name "^6.24.1"
1062
- babel-plugin-transform-es2015-literals "^6.22.0"
1063
- babel-plugin-transform-es2015-modules-amd "^6.24.1"
1064
- babel-plugin-transform-es2015-modules-commonjs "^6.24.1"
1065
- babel-plugin-transform-es2015-modules-systemjs "^6.24.1"
1066
- babel-plugin-transform-es2015-modules-umd "^6.24.1"
1067
- babel-plugin-transform-es2015-object-super "^6.24.1"
1068
- babel-plugin-transform-es2015-parameters "^6.24.1"
1069
- babel-plugin-transform-es2015-shorthand-properties "^6.24.1"
1070
- babel-plugin-transform-es2015-spread "^6.22.0"
1071
- babel-plugin-transform-es2015-sticky-regex "^6.24.1"
1072
- babel-plugin-transform-es2015-template-literals "^6.22.0"
1073
- babel-plugin-transform-es2015-typeof-symbol "^6.22.0"
1074
- babel-plugin-transform-es2015-unicode-regex "^6.24.1"
1075
- babel-plugin-transform-regenerator "^6.24.1"
1076
-
1077
-babel-preset-fbjs@^2.1.0:
1078
- version "2.1.4"
1079
- resolved "https://registry.yarnpkg.com/babel-preset-fbjs/-/babel-preset-fbjs-2.1.4.tgz#22f358e6654073acf61e47a052a777d7bccf03af"
1080
- dependencies:
1081
- babel-plugin-check-es2015-constants "^6.8.0"
1082
- babel-plugin-syntax-class-properties "^6.8.0"
1083
- babel-plugin-syntax-flow "^6.8.0"
1084
- babel-plugin-syntax-jsx "^6.8.0"
1085
- babel-plugin-syntax-object-rest-spread "^6.8.0"
1086
- babel-plugin-syntax-trailing-function-commas "^6.8.0"
1087
- babel-plugin-transform-class-properties "^6.8.0"
1088
- babel-plugin-transform-es2015-arrow-functions "^6.8.0"
1089
- babel-plugin-transform-es2015-block-scoped-functions "^6.8.0"
1090
- babel-plugin-transform-es2015-block-scoping "^6.8.0"
1091
- babel-plugin-transform-es2015-classes "^6.8.0"
1092
- babel-plugin-transform-es2015-computed-properties "^6.8.0"
1093
- babel-plugin-transform-es2015-destructuring "^6.8.0"
1094
- babel-plugin-transform-es2015-for-of "^6.8.0"
1095
- babel-plugin-transform-es2015-function-name "^6.8.0"
1096
- babel-plugin-transform-es2015-literals "^6.8.0"
1097
- babel-plugin-transform-es2015-modules-commonjs "^6.8.0"
1098
- babel-plugin-transform-es2015-object-super "^6.8.0"
1099
- babel-plugin-transform-es2015-parameters "^6.8.0"
1100
- babel-plugin-transform-es2015-shorthand-properties "^6.8.0"
1101
- babel-plugin-transform-es2015-spread "^6.8.0"
1102
- babel-plugin-transform-es2015-template-literals "^6.8.0"
1103
- babel-plugin-transform-es3-member-expression-literals "^6.8.0"
1104
- babel-plugin-transform-es3-property-literals "^6.8.0"
1105
- babel-plugin-transform-flow-strip-types "^6.8.0"
1106
- babel-plugin-transform-object-rest-spread "^6.8.0"
1107
- babel-plugin-transform-react-display-name "^6.8.0"
1108
- babel-plugin-transform-react-jsx "^6.8.0"
1109
-
1110
-babel-preset-flow@^6.23.0:
1111
- version "6.23.0"
1112
- resolved "https://registry.yarnpkg.com/babel-preset-flow/-/babel-preset-flow-6.23.0.tgz#e71218887085ae9a24b5be4169affb599816c49d"
1113
- dependencies:
1114
- babel-plugin-transform-flow-strip-types "^6.22.0"
1115
-
1116
-babel-preset-react@^6.24.1:
1117
- version "6.24.1"
1118
- resolved "https://registry.yarnpkg.com/babel-preset-react/-/babel-preset-react-6.24.1.tgz#ba69dfaea45fc3ec639b6a4ecea6e17702c91380"
1119
- dependencies:
1120
- babel-plugin-syntax-jsx "^6.3.13"
1121
- babel-plugin-transform-react-display-name "^6.23.0"
1122
- babel-plugin-transform-react-jsx "^6.24.1"
1123
- babel-plugin-transform-react-jsx-self "^6.22.0"
1124
- babel-plugin-transform-react-jsx-source "^6.22.0"
1125
- babel-preset-flow "^6.23.0"
1126
-
1127
-babel-preset-stage-0@^6.24.1:
1128
- version "6.24.1"
1129
- resolved "https://registry.yarnpkg.com/babel-preset-stage-0/-/babel-preset-stage-0-6.24.1.tgz#5642d15042f91384d7e5af8bc88b1db95b039e6a"
1130
- dependencies:
1131
- babel-plugin-transform-do-expressions "^6.22.0"
1132
- babel-plugin-transform-function-bind "^6.22.0"
1133
- babel-preset-stage-1 "^6.24.1"
1134
-
1135
-babel-preset-stage-1@^6.24.1:
1136
- version "6.24.1"
1137
- resolved "https://registry.yarnpkg.com/babel-preset-stage-1/-/babel-preset-stage-1-6.24.1.tgz#7692cd7dcd6849907e6ae4a0a85589cfb9e2bfb0"
1138
- dependencies:
1139
- babel-plugin-transform-class-constructor-call "^6.24.1"
1140
- babel-plugin-transform-export-extensions "^6.22.0"
1141
- babel-preset-stage-2 "^6.24.1"
1142
-
1143
-babel-preset-stage-2@^6.24.1:
1144
- version "6.24.1"
1145
- resolved "https://registry.yarnpkg.com/babel-preset-stage-2/-/babel-preset-stage-2-6.24.1.tgz#d9e2960fb3d71187f0e64eec62bc07767219bdc1"
1146
- dependencies:
1147
- babel-plugin-syntax-dynamic-import "^6.18.0"
1148
- babel-plugin-transform-class-properties "^6.24.1"
1149
- babel-plugin-transform-decorators "^6.24.1"
1150
- babel-preset-stage-3 "^6.24.1"
1151
-
1152
-babel-preset-stage-3@^6.24.1:
1153
- version "6.24.1"
1154
- resolved "https://registry.yarnpkg.com/babel-preset-stage-3/-/babel-preset-stage-3-6.24.1.tgz#836ada0a9e7a7fa37cb138fb9326f87934a48395"
1155
- dependencies:
1156
- babel-plugin-syntax-trailing-function-commas "^6.22.0"
1157
- babel-plugin-transform-async-generator-functions "^6.24.1"
1158
- babel-plugin-transform-async-to-generator "^6.24.1"
1159
- babel-plugin-transform-exponentiation-operator "^6.24.1"
1160
- babel-plugin-transform-object-rest-spread "^6.22.0"
1161
-
1162
-babel-register@^6.24.1:
1163
- version "6.24.1"
1164
- resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.24.1.tgz#7e10e13a2f71065bdfad5a1787ba45bca6ded75f"
1165
- dependencies:
1166
- babel-core "^6.24.1"
1167
- babel-runtime "^6.22.0"
1168
- core-js "^2.4.0"
1169
- home-or-tmp "^2.0.0"
1170
- lodash "^4.2.0"
1171
- mkdirp "^0.5.1"
1172
- source-map-support "^0.4.2"
1173
-
1174
-babel-register@^6.26.0:
1175
- version "6.26.0"
1176
- resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.26.0.tgz#6ed021173e2fcb486d7acb45c6009a856f647071"
1177
- dependencies:
1178
- babel-core "^6.26.0"
1179
- babel-runtime "^6.26.0"
1180
- core-js "^2.5.0"
1181
- home-or-tmp "^2.0.0"
1182
- lodash "^4.17.4"
1183
- mkdirp "^0.5.1"
1184
- source-map-support "^0.4.15"
1185
-
1186
-babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0, babel-runtime@^6.6.1:
1187
- version "6.26.0"
1188
- resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
1189
- dependencies:
1190
- core-js "^2.4.0"
1191
- regenerator-runtime "^0.11.0"
1192
-
1193
-babel-template@^6.24.1, babel-template@^6.25.0, babel-template@^6.7.0:
1194
- version "6.25.0"
1195
- resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.25.0.tgz#665241166b7c2aa4c619d71e192969552b10c071"
1196
- dependencies:
1197
- babel-runtime "^6.22.0"
1198
- babel-traverse "^6.25.0"
1199
- babel-types "^6.25.0"
1200
- babylon "^6.17.2"
1201
- lodash "^4.2.0"
1202
-
1203
-babel-template@^6.26.0, babel-template@^6.9.0:
1204
- version "6.26.0"
1205
- resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02"
1206
- dependencies:
1207
- babel-runtime "^6.26.0"
1208
- babel-traverse "^6.26.0"
1209
- babel-types "^6.26.0"
1210
- babylon "^6.18.0"
1211
- lodash "^4.17.4"
1212
-
1213
-babel-traverse@6.25.0, babel-traverse@^6.24.1, babel-traverse@^6.25.0:
1214
- version "6.25.0"
1215
- resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.25.0.tgz#2257497e2fcd19b89edc13c4c91381f9512496f1"
1216
- dependencies:
1217
- babel-code-frame "^6.22.0"
1218
- babel-messages "^6.23.0"
1219
- babel-runtime "^6.22.0"
1220
- babel-types "^6.25.0"
1221
- babylon "^6.17.2"
1222
- debug "^2.2.0"
1223
- globals "^9.0.0"
1224
- invariant "^2.2.0"
1225
- lodash "^4.2.0"
1226
-
1227
-babel-traverse@^6.26.0:
1228
- version "6.26.0"
1229
- resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
1230
- dependencies:
1231
- babel-code-frame "^6.26.0"
1232
- babel-messages "^6.23.0"
1233
- babel-runtime "^6.26.0"
1234
- babel-types "^6.26.0"
1235
- babylon "^6.18.0"
1236
- debug "^2.6.8"
1237
- globals "^9.18.0"
1238
- invariant "^2.2.2"
1239
- lodash "^4.17.4"
1240
-
1241
-babel-types@6.25.0, babel-types@^6.24.1, babel-types@^6.25.0:
1242
- version "6.25.0"
1243
- resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.25.0.tgz#70afb248d5660e5d18f811d91c8303b54134a18e"
1244
- dependencies:
1245
- babel-runtime "^6.22.0"
1246
- esutils "^2.0.2"
1247
- lodash "^4.2.0"
1248
- to-fast-properties "^1.0.1"
1249
-
1250
-babel-types@^6.19.0, babel-types@^6.26.0:
1251
- version "6.26.0"
1252
- resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
1253
- dependencies:
1254
- babel-runtime "^6.26.0"
1255
- esutils "^2.0.2"
1256
- lodash "^4.17.4"
1257
- to-fast-properties "^1.0.3"
1258
-
1259
-babylon@6.18.0, babylon@^6.18.0:
1260
- version "6.18.0"
1261
- resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
1262
-
1263
-babylon@^6.17.2, babylon@^6.17.3:
1264
- version "6.17.4"
1265
- resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.17.4.tgz#3e8b7402b88d22c3423e137a1577883b15ff869a"
1266
-
1267
-backo2@1.0.2:
1268
- version "1.0.2"
1269
- resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947"
1270
-
1271
-bail@^1.0.0:
1272
- version "1.0.1"
1273
- resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.1.tgz#912579de8b391aadf3c5fdf4cd2a0fc225df3bc2"
1274
-
1275
-balanced-match@0.1.0:
1276
- version "0.1.0"
1277
- resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.1.0.tgz#b504bd05869b39259dd0c5efc35d843176dccc4a"
1278
-
1279
-balanced-match@^0.2.0:
1280
- version "0.2.1"
1281
- resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.2.1.tgz#7bc658b4bed61eee424ad74f75f5c3e2c4df3cc7"
1282
-
1283
-balanced-match@^0.4.1, balanced-match@^0.4.2:
1284
- version "0.4.2"
1285
- resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"
1286
-
1287
-balanced-match@^1.0.0:
1288
- version "1.0.0"
1289
- resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
1290
-
1291
-base-64@0.1.0:
1292
- version "0.1.0"
1293
- resolved "https://registry.yarnpkg.com/base-64/-/base-64-0.1.0.tgz#780a99c84e7d600260361511c4877613bf24f6bb"
1294
-
1295
-base64-arraybuffer@0.1.5:
1296
- version "0.1.5"
1297
- resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz#73926771923b5a19747ad666aa5cd4bf9c6e9ce8"
1298
-
1299
-base64-js@^1.0.2:
1300
- version "1.2.1"
1301
- resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.1.tgz#a91947da1f4a516ea38e5b4ec0ec3773675e0886"
1302
-
1303
-base64id@1.0.0:
1304
- version "1.0.0"
1305
- resolved "https://registry.yarnpkg.com/base64id/-/base64id-1.0.0.tgz#47688cb99bb6804f0e06d3e763b1c32e57d8e6b6"
1306
-
1307
-base64url@^2.0.0:
1308
- version "2.0.0"
1309
- resolved "https://registry.yarnpkg.com/base64url/-/base64url-2.0.0.tgz#eac16e03ea1438eff9423d69baa36262ed1f70bb"
1310
-
1311
-base@^0.11.1:
1312
- version "0.11.2"
1313
- resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
1314
- dependencies:
1315
- cache-base "^1.0.1"
1316
- class-utils "^0.3.5"
1317
- component-emitter "^1.2.1"
1318
- define-property "^1.0.0"
1319
- isobject "^3.0.1"
1320
- mixin-deep "^1.2.0"
1321
- pascalcase "^0.1.1"
1322
-
1323
-basename@0.1.2:
1324
- version "0.1.2"
1325
- resolved "https://registry.yarnpkg.com/basename/-/basename-0.1.2.tgz#d6039bef939863160c78048cced3c5e7f88cb261"
1326
-
1327
-bash-glob@^1.0.1:
1328
- version "1.0.1"
1329
- resolved "https://registry.yarnpkg.com/bash-glob/-/bash-glob-1.0.1.tgz#d1bce5d2fd6875a5a2b24bdaa707c190731bc26e"
1330
- dependencies:
1331
- async-each "^1.0.1"
1332
- component-emitter "^1.2.1"
1333
- cross-spawn "^5.1.0"
1334
- extend-shallow "^2.0.1"
1335
- is-extglob "^2.1.1"
1336
- is-glob "^3.1.0"
1337
-
1338
-batch@0.6.1:
1339
- version "0.6.1"
1340
- resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
1341
-
1342
-bcrypt-pbkdf@^1.0.0:
1343
- version "1.0.1"
1344
- resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz#63bc5dcb61331b92bc05fd528953c33462a06f8d"
1345
- dependencies:
1346
- tweetnacl "^0.14.3"
1347
-
1348
-beeper@^1.0.0:
1349
- version "1.1.1"
1350
- resolved "https://registry.yarnpkg.com/beeper/-/beeper-1.1.1.tgz#e6d5ea8c5dad001304a70b22638447f69cb2f809"
1351
-
1352
-better-assert@~1.0.0:
1353
- version "1.0.2"
1354
- resolved "https://registry.yarnpkg.com/better-assert/-/better-assert-1.0.2.tgz#40866b9e1b9e0b55b481894311e68faffaebc522"
1355
- dependencies:
1356
- callsite "1.0.0"
1357
-
1358
-big.js@^3.1.3:
1359
- version "3.1.3"
1360
- resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.1.3.tgz#4cada2193652eb3ca9ec8e55c9015669c9806978"
1361
-
1362
-bin-build@^2.0.0:
1363
- version "2.2.0"
1364
- resolved "https://registry.yarnpkg.com/bin-build/-/bin-build-2.2.0.tgz#11f8dd61f70ffcfa2bdcaa5b46f5e8fedd4221cc"
1365
- dependencies:
1366
- archive-type "^3.0.1"
1367
- decompress "^3.0.0"
1368
- download "^4.1.2"
1369
- exec-series "^1.0.0"
1370
- rimraf "^2.2.6"
1371
- tempfile "^1.0.0"
1372
- url-regex "^3.0.0"
1373
-
1374
-bin-check@^2.0.0:
1375
- version "2.0.0"
1376
- resolved "https://registry.yarnpkg.com/bin-check/-/bin-check-2.0.0.tgz#86f8e6f4253893df60dc316957f5af02acb05930"
1377
- dependencies:
1378
- executable "^1.0.0"
1379
-
1380
-bin-version-check@^2.1.0:
1381
- version "2.1.0"
1382
- resolved "https://registry.yarnpkg.com/bin-version-check/-/bin-version-check-2.1.0.tgz#e4e5df290b9069f7d111324031efc13fdd11a5b0"
1383
- dependencies:
1384
- bin-version "^1.0.0"
1385
- minimist "^1.1.0"
1386
- semver "^4.0.3"
1387
- semver-truncate "^1.0.0"
1388
-
1389
-bin-version@^1.0.0:
1390
- version "1.0.4"
1391
- resolved "https://registry.yarnpkg.com/bin-version/-/bin-version-1.0.4.tgz#9eb498ee6fd76f7ab9a7c160436f89579435d78e"
1392
- dependencies:
1393
- find-versions "^1.0.0"
1394
-
1395
-bin-wrapper@^3.0.0:
1396
- version "3.0.2"
1397
- resolved "https://registry.yarnpkg.com/bin-wrapper/-/bin-wrapper-3.0.2.tgz#67d3306262e4b1a5f2f88ee23464f6a655677aeb"
1398
- dependencies:
1399
- bin-check "^2.0.0"
1400
- bin-version-check "^2.1.0"
1401
- download "^4.0.0"
1402
- each-async "^1.1.1"
1403
- lazy-req "^1.0.0"
1404
- os-filter-obj "^1.0.0"
1405
-
1406
-binary-extensions@^1.0.0:
1407
- version "1.8.0"
1408
- resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.8.0.tgz#48ec8d16df4377eae5fa5884682480af4d95c774"
1409
-
1410
-bl@^1.0.0:
1411
- version "1.2.1"
1412
- resolved "https://registry.yarnpkg.com/bl/-/bl-1.2.1.tgz#cac328f7bee45730d404b692203fcb590e172d5e"
1413
- dependencies:
1414
- readable-stream "^2.0.5"
1415
-
1416
-blob@0.0.4:
1417
- version "0.0.4"
1418
- resolved "https://registry.yarnpkg.com/blob/-/blob-0.0.4.tgz#bcf13052ca54463f30f9fc7e95b9a47630a94921"
1419
-
1420
-block-stream@*:
1421
- version "0.0.9"
1422
- resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
1423
- dependencies:
1424
- inherits "~2.0.0"
1425
-
1426
-bluebird@^3.0.5, bluebird@^3.3.4, bluebird@^3.5.0:
1427
- version "3.5.0"
1428
- resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.0.tgz#791420d7f551eea2897453a8a77653f96606d67c"
1429
-
1430
-bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
1431
- version "4.11.7"
1432
- resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.7.tgz#ddb048e50d9482790094c13eb3fcfc833ce7ab46"
1433
-
1434
-boolbase@~1.0.0:
1435
- version "1.0.0"
1436
- resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
1437
-
1438
-boom@2.x.x, boom@^2.5.x, boom@^2.7.2:
1439
- version "2.10.1"
1440
- resolved "https://registry.yarnpkg.com/boom/-/boom-2.10.1.tgz#39c8918ceff5799f83f9492a848f625add0c766f"
1441
- dependencies:
1442
- hoek "2.x.x"
1443
-
1444
-bowser@^1.6.0:
1445
- version "1.7.1"
1446
- resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.7.1.tgz#a4de8f18a1a0dc9531eb2a92a1521fb6a9ba96a5"
1447
-
1448
-brace-expansion@^1.1.7:
1449
- version "1.1.8"
1450
- resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
1451
- dependencies:
1452
- balanced-match "^1.0.0"
1453
- concat-map "0.0.1"
1454
-
1455
-braces@^1.8.2:
1456
- version "1.8.5"
1457
- resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
1458
- dependencies:
1459
- expand-range "^1.8.1"
1460
- preserve "^0.2.0"
1461
- repeat-element "^1.1.2"
1462
-
1463
-braces@^2.2.2:
1464
- version "2.2.2"
1465
- resolved "https://registry.yarnpkg.com/braces/-/braces-2.2.2.tgz#241f868c2b2690d9febeee5a7c83fbbf25d00b1b"
1466
- dependencies:
1467
- arr-flatten "^1.0.3"
1468
- array-unique "^0.3.2"
1469
- define-property "^1.0.0"
1470
- extend-shallow "^2.0.1"
1471
- fill-range "^4.0.0"
1472
- isobject "^3.0.0"
1473
- repeat-element "^1.1.2"
1474
- snapdragon "^0.8.1"
1475
- snapdragon-node "^2.0.1"
1476
- split-string "^2.1.0"
1477
- to-regex "^3.0.1"
1478
-
1479
-brorand@^1.0.1:
1480
- version "1.1.0"
1481
- resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
1482
-
1483
-browserify-aes@0.4.0:
1484
- version "0.4.0"
1485
- resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-0.4.0.tgz#067149b668df31c4b58533e02d01e806d8608e2c"
1486
- dependencies:
1487
- inherits "^2.0.1"
1488
-
1489
-browserify-aes@^1.0.0, browserify-aes@^1.0.4:
1490
- version "1.0.6"
1491
- resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.0.6.tgz#5e7725dbdef1fd5930d4ebab48567ce451c48a0a"
1492
- dependencies:
1493
- buffer-xor "^1.0.2"
1494
- cipher-base "^1.0.0"
1495
- create-hash "^1.1.0"
1496
- evp_bytestokey "^1.0.0"
1497
- inherits "^2.0.1"
1498
-
1499
-browserify-cipher@^1.0.0:
1500
- version "1.0.0"
1501
- resolved "https://registry.yarnpkg.com/browserify-cipher/-/browserify-cipher-1.0.0.tgz#9988244874bf5ed4e28da95666dcd66ac8fc363a"
1502
- dependencies:
1503
- browserify-aes "^1.0.4"
1504
- browserify-des "^1.0.0"
1505
- evp_bytestokey "^1.0.0"
1506
-
1507
-browserify-des@^1.0.0:
1508
- version "1.0.0"
1509
- resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.0.tgz#daa277717470922ed2fe18594118a175439721dd"
1510
- dependencies:
1511
- cipher-base "^1.0.1"
1512
- des.js "^1.0.0"
1513
- inherits "^2.0.1"
1514
-
1515
-browserify-rsa@^4.0.0:
1516
- version "4.0.1"
1517
- resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.0.1.tgz#21e0abfaf6f2029cf2fafb133567a701d4135524"
1518
- dependencies:
1519
- bn.js "^4.1.0"
1520
- randombytes "^2.0.1"
1521
-
1522
-browserify-sign@^4.0.0:
1523
- version "4.0.4"
1524
- resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.0.4.tgz#aa4eb68e5d7b658baa6bf6a57e630cbd7a93d298"
1525
- dependencies:
1526
- bn.js "^4.1.1"
1527
- browserify-rsa "^4.0.0"
1528
- create-hash "^1.1.0"
1529
- create-hmac "^1.1.2"
1530
- elliptic "^6.0.0"
1531
- inherits "^2.0.1"
1532
- parse-asn1 "^5.0.0"
1533
-
1534
-browserify-zlib@^0.1.4:
1535
- version "0.1.4"
1536
- resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.1.4.tgz#bb35f8a519f600e0fa6b8485241c979d0141fb2d"
1537
- dependencies:
1538
- pako "~0.2.0"
1539
-
1540
-browserslist@^1.0.0, browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6:
1541
- version "1.7.7"
1542
- resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.7.tgz#0bd76704258be829b2398bb50e4b62d1a166b0b9"
1543
- dependencies:
1544
- caniuse-db "^1.0.30000639"
1545
- electron-to-chromium "^1.2.7"
1546
-
1547
-browserslist@^2.1.2:
1548
- version "2.1.5"
1549
- resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.1.5.tgz#e882550df3d1cd6d481c1a3e0038f2baf13a4711"
1550
- dependencies:
1551
- caniuse-lite "^1.0.30000684"
1552
- electron-to-chromium "^1.3.14"
1553
-
1554
-bser@^2.0.0:
1555
- version "2.0.0"
1556
- resolved "https://registry.yarnpkg.com/bser/-/bser-2.0.0.tgz#9ac78d3ed5d915804fd87acb158bc797147a1719"
1557
- dependencies:
1558
- node-int64 "^0.4.0"
1559
-
1560
-buble@^0.15.2:
1561
- version "0.15.2"
1562
- resolved "https://registry.yarnpkg.com/buble/-/buble-0.15.2.tgz#547fc47483f8e5e8176d82aa5ebccb183b02d613"
1563
- dependencies:
1564
- acorn "^3.3.0"
1565
- acorn-jsx "^3.0.1"
1566
- acorn-object-spread "^1.0.0"
1567
- chalk "^1.1.3"
1568
- magic-string "^0.14.0"
1569
- minimist "^1.2.0"
1570
- os-homedir "^1.0.1"
1571
-
1572
-buffer-crc32@~0.2.3:
1573
- version "0.2.13"
1574
- resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
1575
-
1576
-buffer-peek-stream@^1.0.1:
1577
- version "1.0.1"
1578
- resolved "https://registry.yarnpkg.com/buffer-peek-stream/-/buffer-peek-stream-1.0.1.tgz#53b47570a1347787c5bad4ca2ca3021f9d8b3cfd"
1579
-
1580
-buffer-to-vinyl@^1.0.0:
1581
- version "1.1.0"
1582
- resolved "https://registry.yarnpkg.com/buffer-to-vinyl/-/buffer-to-vinyl-1.1.0.tgz#00f15faee3ab7a1dda2cde6d9121bffdd07b2262"
1583
- dependencies:
1584
- file-type "^3.1.0"
1585
- readable-stream "^2.0.2"
1586
- uuid "^2.0.1"
1587
- vinyl "^1.0.0"
1588
-
1589
-buffer-xor@^1.0.2:
1590
- version "1.0.3"
1591
- resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
1592
-
1593
-buffer@^4.3.0, buffer@^4.9.0:
1594
- version "4.9.1"
1595
- resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.1.tgz#6d1bb601b07a4efced97094132093027c95bc298"
1596
- dependencies:
1597
- base64-js "^1.0.2"
1598
- ieee754 "^1.1.4"
1599
- isarray "^1.0.0"
1600
-
1601
-builtin-modules@^1.0.0:
1602
- version "1.1.1"
1603
- resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
1604
-
1605
-builtin-status-codes@^3.0.0:
1606
- version "3.0.0"
1607
- resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
1608
-
1609
-bundle-loader@^0.5.4:
1610
- version "0.5.5"
1611
- resolved "https://registry.yarnpkg.com/bundle-loader/-/bundle-loader-0.5.5.tgz#11fd7b08edf86a1d708efcb1eca62ca51f6c368a"
1612
- dependencies:
1613
- loader-utils "^1.0.2"
1614
-
1615
-bytes@2.3.0:
1616
- version "2.3.0"
1617
- resolved "https://registry.yarnpkg.com/bytes/-/bytes-2.3.0.tgz#d5b680a165b6201739acb611542aabc2d8ceb070"
1618
-
1619
-bytes@2.4.0:
1620
- version "2.4.0"
1621
- resolved "https://registry.yarnpkg.com/bytes/-/bytes-2.4.0.tgz#7d97196f9d5baf7f6935e25985549edd2a6c2339"
1622
-
1623
-cache-base@^1.0.1:
1624
- version "1.0.1"
1625
- resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
1626
- dependencies:
1627
- collection-visit "^1.0.0"
1628
- component-emitter "^1.2.1"
1629
- get-value "^2.0.6"
1630
- has-value "^1.0.0"
1631
- isobject "^3.0.1"
1632
- set-value "^2.0.0"
1633
- to-object-path "^0.3.0"
1634
- union-value "^1.0.0"
1635
- unset-value "^1.0.0"
1636
-
1637
-call-me-maybe@^1.0.1:
1638
- version "1.0.1"
1639
- resolved "https://registry.yarnpkg.com/call-me-maybe/-/call-me-maybe-1.0.1.tgz#26d208ea89e37b5cbde60250a15f031c16a4d66b"
1640
-
1641
-call@2.x.x:
1642
- version "2.0.2"
1643
- resolved "https://registry.yarnpkg.com/call/-/call-2.0.2.tgz#9c9831abd0769486fdee83a41149b829b32d06c0"
1644
- dependencies:
1645
- boom "2.x.x"
1646
- hoek "2.x.x"
1647
-
1648
-callsite@1.0.0:
1649
- version "1.0.0"
1650
- resolved "https://registry.yarnpkg.com/callsite/-/callsite-1.0.0.tgz#280398e5d664bd74038b6f0905153e6e8af1bc20"
1651
-
1652
-camelcase-keys@^2.0.0:
1653
- version "2.1.0"
1654
- resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
1655
- dependencies:
1656
- camelcase "^2.0.0"
1657
- map-obj "^1.0.0"
1658
-
1659
-camelcase@^1.0.2:
1660
- version "1.2.1"
1661
- resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
1662
-
1663
-camelcase@^2.0.0:
1664
- version "2.1.1"
1665
- resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
1666
-
1667
-camelcase@^3.0.0:
1668
- version "3.0.0"
1669
- resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-3.0.0.tgz#32fc4b9fcdaf845fcdf7e73bb97cac2261f0ab0a"
1670
-
1671
-caniuse-api@^1.5.2, caniuse-api@^1.5.3:
1672
- version "1.6.1"
1673
- resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.6.1.tgz#b534e7c734c4f81ec5fbe8aca2ad24354b962c6c"
1674
- dependencies:
1675
- browserslist "^1.3.6"
1676
- caniuse-db "^1.0.30000529"
1677
- lodash.memoize "^4.1.2"
1678
- lodash.uniq "^4.5.0"
1679
-
1680
-caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
1681
- version "1.0.30000696"
1682
- resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000696.tgz#e71f5c61e1f96c7a3af4e791ac5db55e11737604"
1683
-
1684
-caniuse-lite@^1.0.30000684:
1685
- version "1.0.30000696"
1686
- resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000696.tgz#30f2695d2a01a0dfd779a26ab83f4d134b3da5cc"
1687
-
1688
-capture-stack-trace@^1.0.0:
1689
- version "1.0.0"
1690
- resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.0.tgz#4a6fa07399c26bba47f0b2496b4d0fb408c5550d"
1691
-
1692
-caseless@~0.12.0:
1693
- version "0.12.0"
1694
- resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
1695
-
1696
-catbox-memory@1.x.x:
1697
- version "1.1.2"
1698
- resolved "https://registry.yarnpkg.com/catbox-memory/-/catbox-memory-1.1.2.tgz#33c9183a32b31945ee8a484d0e3c3cbb82eaec1a"
1699
- dependencies:
1700
- hoek "2.x.x"
1701
-
1702
-catbox@^4.2.x:
1703
- version "4.3.0"
1704
- resolved "https://registry.yarnpkg.com/catbox/-/catbox-4.3.0.tgz#222377bd67f1291ac0e25d00002d065a9df7f39a"
1705
- dependencies:
1706
- boom "2.x.x"
1707
- hoek "2.x.x"
1708
- joi "6.x.x"
1709
-
1710
-caw@^1.0.1:
1711
- version "1.2.0"
1712
- resolved "https://registry.yarnpkg.com/caw/-/caw-1.2.0.tgz#ffb226fe7efc547288dc62ee3e97073c212d1034"
1713
- dependencies:
1714
- get-proxy "^1.0.1"
1715
- is-obj "^1.0.0"
1716
- object-assign "^3.0.0"
1717
- tunnel-agent "^0.4.0"
1718
-
1719
-caw@^2.0.0:
1720
- version "2.0.0"
1721
- resolved "https://registry.yarnpkg.com/caw/-/caw-2.0.0.tgz#11f8bddc2f801469952d5e3225ba98495a2fa0ff"
1722
- dependencies:
1723
- get-proxy "^1.0.1"
1724
- tunnel-agent "^0.4.0"
1725
-
1726
-ccount@^1.0.0:
1727
- version "1.0.1"
1728
- resolved "https://registry.yarnpkg.com/ccount/-/ccount-1.0.1.tgz#665687945168c218ec77ff61a4155ae00227a96c"
1729
-
1730
-center-align@^0.1.1:
1731
- version "0.1.3"
1732
- resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
1733
- dependencies:
1734
- align-text "^0.1.3"
1735
- lazy-cache "^1.0.3"
1736
-
1737
-chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
1738
- version "1.1.3"
1739
- resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
1740
- dependencies:
1741
- ansi-styles "^2.2.1"
1742
- escape-string-regexp "^1.0.2"
1743
- has-ansi "^2.0.0"
1744
- strip-ansi "^3.0.0"
1745
- supports-color "^2.0.0"
1746
-
1747
-chalk@^2.0, chalk@^2.0.1:
1748
- version "2.1.0"
1749
- resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.1.0.tgz#ac5becf14fa21b99c6c92ca7a7d7cfd5b17e743e"
1750
- dependencies:
1751
- ansi-styles "^3.1.0"
1752
- escape-string-regexp "^1.0.5"
1753
- supports-color "^4.0.0"
1754
-
1755
-character-entities-html4@^1.0.0:
1756
- version "1.1.0"
1757
- resolved "https://registry.yarnpkg.com/character-entities-html4/-/character-entities-html4-1.1.0.tgz#1ab08551d3ce1fa1df08d00fb9ca1defb147a06c"
1758
-
1759
-character-entities-legacy@^1.0.0:
1760
- version "1.1.0"
1761
- resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.0.tgz#b18aad98f6b7bcc646c1e4c81f9f1956376a561a"
1762
-
1763
-character-entities@^1.0.0:
1764
- version "1.2.0"
1765
- resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.0.tgz#a683e2cf75dbe8b171963531364e58e18a1b155f"
1766
-
1767
-character-reference-invalid@^1.0.0:
1768
- version "1.1.0"
1769
- resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.0.tgz#dec9ad1dfb9f8d06b4fcdaa2adc3c4fd97af1e68"
1770
-
1771
-charenc@~0.0.1:
1772
- version "0.0.2"
1773
- resolved "https://registry.yarnpkg.com/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667"
1774
-
1775
-cheerio@^0.22.0:
1776
- version "0.22.0"
1777
- resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-0.22.0.tgz#a9baa860a3f9b595a6b81b1a86873121ed3a269e"
1778
- dependencies:
1779
- css-select "~1.2.0"
1780
- dom-serializer "~0.1.0"
1781
- entities "~1.1.1"
1782
- htmlparser2 "^3.9.1"
1783
- lodash.assignin "^4.0.9"
1784
- lodash.bind "^4.1.4"
1785
- lodash.defaults "^4.0.1"
1786
- lodash.filter "^4.4.0"
1787
- lodash.flatten "^4.2.0"
1788
- lodash.foreach "^4.3.0"
1789
- lodash.map "^4.4.0"
1790
- lodash.merge "^4.4.0"
1791
- lodash.pick "^4.2.1"
1792
- lodash.reduce "^4.4.0"
1793
- lodash.reject "^4.4.0"
1794
- lodash.some "^4.4.0"
1795
-
1796
-cheerio@^1.0.0-rc.2:
1797
- version "1.0.0-rc.2"
1798
- resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.2.tgz#4b9f53a81b27e4d5dac31c0ffd0cfa03cc6830db"
1799
- dependencies:
1800
- css-select "~1.2.0"
1801
- dom-serializer "~0.1.0"
1802
- entities "~1.1.1"
1803
- htmlparser2 "^3.9.1"
1804
- lodash "^4.15.0"
1805
- parse5 "^3.0.1"
1806
-
1807
-chokidar@^1.0.0, chokidar@^1.6.1, chokidar@^1.7.0:
1808
- version "1.7.0"
1809
- resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
1810
- dependencies:
1811
- anymatch "^1.3.0"
1812
- async-each "^1.0.0"
1813
- glob-parent "^2.0.0"
1814
- inherits "^2.0.1"
1815
- is-binary-path "^1.0.0"
1816
- is-glob "^2.0.0"
1817
- path-is-absolute "^1.0.0"
1818
- readdirp "^2.0.0"
1819
- optionalDependencies:
1820
- fsevents "^1.0.0"
1821
-
1822
-chownr@^1.0.1:
1823
- version "1.0.1"
1824
- resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.0.1.tgz#e2a75042a9551908bebd25b8523d5f9769d79181"
1825
-
1826
-chunk-manifest-webpack-plugin@0.1.0:
1827
- version "0.1.0"
1828
- resolved "https://registry.yarnpkg.com/chunk-manifest-webpack-plugin/-/chunk-manifest-webpack-plugin-0.1.0.tgz#6138488fc21ddab4ccfb7c1c11d51bb80a943186"
1829
- dependencies:
1830
- webpack-core "^0.4.8"
1831
-
1832
-ci-info@^1.0.0:
1833
- version "1.0.0"
1834
- resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.0.0.tgz#dc5285f2b4e251821683681c381c3388f46ec534"
1835
-
1836
-cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
1837
- version "1.0.3"
1838
- resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.3.tgz#eeabf194419ce900da3018c207d212f2a6df0a07"
1839
- dependencies:
1840
- inherits "^2.0.1"
1841
-
1842
-clap@^1.0.9:
1843
- version "1.2.0"
1844
- resolved "https://registry.yarnpkg.com/clap/-/clap-1.2.0.tgz#59c90fe3e137104746ff19469a27a634ff68c857"
1845
- dependencies:
1846
- chalk "^1.1.3"
1847
-
1848
-class-utils@^0.3.5:
1849
- version "0.3.5"
1850
- resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.5.tgz#17e793103750f9627b2176ea34cfd1b565903c80"
1851
- dependencies:
1852
- arr-union "^3.1.0"
1853
- define-property "^0.2.5"
1854
- isobject "^3.0.0"
1855
- lazy-cache "^2.0.2"
1856
- static-extend "^0.1.1"
1857
-
1858
-cli-cursor@^2.1.0:
1859
- version "2.1.0"
1860
- resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
1861
- dependencies:
1862
- restore-cursor "^2.0.0"
1863
-
1864
-cli-width@^2.0.0:
1865
- version "2.1.0"
1866
- resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.1.0.tgz#b234ca209b29ef66fc518d9b98d5847b00edf00a"
1867
-
1868
-clipboard@^1.5.5:
1869
- version "1.7.1"
1870
- resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-1.7.1.tgz#360d6d6946e99a7a1fef395e42ba92b5e9b5a16b"
1871
- dependencies:
1872
- good-listener "^1.2.2"
1873
- select "^1.1.2"
1874
- tiny-emitter "^2.0.0"
1875
-
1876
-cliui@^2.1.0:
1877
- version "2.1.0"
1878
- resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
1879
- dependencies:
1880
- center-align "^0.1.1"
1881
- right-align "^0.1.1"
1882
- wordwrap "0.0.2"
1883
-
1884
-cliui@^3.2.0:
1885
- version "3.2.0"
1886
- resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
1887
- dependencies:
1888
- string-width "^1.0.1"
1889
- strip-ansi "^3.0.1"
1890
- wrap-ansi "^2.0.0"
1891
-
1892
-clone-stats@^0.0.1:
1893
- version "0.0.1"
1894
- resolved "https://registry.yarnpkg.com/clone-stats/-/clone-stats-0.0.1.tgz#b88f94a82cf38b8791d58046ea4029ad88ca99d1"
1895
-
1896
-clone@2.1.1:
1897
- version "2.1.1"
1898
- resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.1.tgz#d217d1e961118e3ac9a4b8bba3285553bf647cdb"
1899
-
1900
-clone@^0.2.0:
1901
- version "0.2.0"
1902
- resolved "https://registry.yarnpkg.com/clone/-/clone-0.2.0.tgz#c6126a90ad4f72dbf5acdb243cc37724fe93fc1f"
1903
-
1904
-clone@^1.0.0, clone@^1.0.2:
1905
- version "1.0.2"
1906
- resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.2.tgz#260b7a99ebb1edfe247538175f783243cb19d149"
1907
-
1908
-co@3.1.0:
1909
- version "3.1.0"
1910
- resolved "https://registry.yarnpkg.com/co/-/co-3.1.0.tgz#4ea54ea5a08938153185e15210c68d9092bc1b78"
1911
-
1912
-co@^4.6.0:
1913
- version "4.6.0"
1914
- resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
1915
-
1916
-coa@~1.0.1:
1917
- version "1.0.3"
1918
- resolved "https://registry.yarnpkg.com/coa/-/coa-1.0.3.tgz#1b54a5e1dcf77c990455d4deea98c564416dc893"
1919
- dependencies:
1920
- q "^1.1.2"
1921
-
1922
-code-point-at@^1.0.0:
1923
- version "1.1.0"
1924
- resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
1925
-
1926
-coffee-script@^1.12.4:
1927
- version "1.12.6"
1928
- resolved "https://registry.yarnpkg.com/coffee-script/-/coffee-script-1.12.6.tgz#285a3f7115689065064d6bf9ef4572db66695cbf"
1929
-
1930
-collapse-white-space@^1.0.0, collapse-white-space@^1.0.2:
1931
- version "1.0.3"
1932
- resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.3.tgz#4b906f670e5a963a87b76b0e1689643341b6023c"
1933
-
1934
-collection-visit@^1.0.0:
1935
- version "1.0.0"
1936
- resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
1937
- dependencies:
1938
- map-visit "^1.0.0"
1939
- object-visit "^1.0.0"
1940
-
1941
-color-convert@^0.5.3:
1942
- version "0.5.3"
1943
- resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
1944
-
1945
-color-convert@^1.0.0, color-convert@^1.3.0, color-convert@^1.8.2:
1946
- version "1.9.0"
1947
- resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.0.tgz#1accf97dd739b983bf994d56fec8f95853641b7a"
1948
- dependencies:
1949
- color-name "^1.1.1"
1950
-
1951
-color-name@^1.0.0, color-name@^1.1.1:
1952
- version "1.1.2"
1953
- resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.2.tgz#5c8ab72b64bd2215d617ae9559ebb148475cf98d"
1954
-
1955
-color-string@^0.3.0:
1956
- version "0.3.0"
1957
- resolved "https://registry.yarnpkg.com/color-string/-/color-string-0.3.0.tgz#27d46fb67025c5c2fa25993bfbf579e47841b991"
1958
- dependencies:
1959
- color-name "^1.0.0"
1960
-
1961
-color-string@^1.4.0:
1962
- version "1.5.2"
1963
- resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.2.tgz#26e45814bc3c9a7cbd6751648a41434514a773a9"
1964
- dependencies:
1965
- color-name "^1.0.0"
1966
- simple-swizzle "^0.2.2"
1967
-
1968
-color@^0.10.1:
1969
- version "0.10.1"
1970
- resolved "https://registry.yarnpkg.com/color/-/color-0.10.1.tgz#c04188df82a209ddebccecdacd3ec320f193739f"
1971
- dependencies:
1972
- color-convert "^0.5.3"
1973
- color-string "^0.3.0"
1974
-
1975
-color@^0.11.0, color@^0.11.3, color@^0.11.4:
1976
- version "0.11.4"
1977
- resolved "https://registry.yarnpkg.com/color/-/color-0.11.4.tgz#6d7b5c74fb65e841cd48792ad1ed5e07b904d764"
1978
- dependencies:
1979
- clone "^1.0.2"
1980
- color-convert "^1.3.0"
1981
- color-string "^0.3.0"
1982
-
1983
-color@^1.0.3:
1984
- version "1.0.3"
1985
- resolved "https://registry.yarnpkg.com/color/-/color-1.0.3.tgz#e48e832d85f14ef694fb468811c2d5cfe729b55d"
1986
- dependencies:
1987
- color-convert "^1.8.2"
1988
- color-string "^1.4.0"
1989
-
1990
-colormin@^1.0.5:
1991
- version "1.1.2"
1992
- resolved "https://registry.yarnpkg.com/colormin/-/colormin-1.1.2.tgz#ea2f7420a72b96881a38aae59ec124a6f7298133"
1993
- dependencies:
1994
- color "^0.11.0"
1995
- css-color-names "0.0.4"
1996
- has "^1.0.1"
1997
-
1998
-colors@1.1.2, colors@~1.1.2:
1999
- version "1.1.2"
2000
- resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
2001
-
2002
-combined-stream@^1.0.5, combined-stream@~1.0.5:
2003
- version "1.0.5"
2004
- resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
2005
- dependencies:
2006
- delayed-stream "~1.0.0"
2007
-
2008
-comma-separated-tokens@^1.0.1:
2009
- version "1.0.4"
2010
- resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.4.tgz#72083e58d4a462f01866f6617f4d98a3cd3b8a46"
2011
- dependencies:
2012
- trim "0.0.1"
2013
-
2014
-commander@2.9.0, commander@2.9.x:
2015
- version "2.9.0"
2016
- resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
2017
- dependencies:
2018
- graceful-readlink ">= 1.0.0"
2019
-
2020
-commander@^2.11.0:
2021
- version "2.11.0"
2022
- resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
2023
-
2024
-commander@~2.8.1:
2025
- version "2.8.1"
2026
- resolved "https://registry.yarnpkg.com/commander/-/commander-2.8.1.tgz#06be367febfda0c330aa1e2a072d3dc9762425d4"
2027
- dependencies:
2028
- graceful-readlink ">= 1.0.0"
2029
-
2030
-common-tags@0.1.1:
2031
- version "0.1.1"
2032
- resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-0.1.1.tgz#d893486ecc6df22cffe6c393c88c12f71e7e8871"
2033
- dependencies:
2034
- babel-runtime "^6.6.1"
2035
-
2036
-common-tags@^1.4.0:
2037
- version "1.4.0"
2038
- resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.4.0.tgz#1187be4f3d4cf0c0427d43f74eef1f73501614c0"
2039
- dependencies:
2040
- babel-runtime "^6.18.0"
2041
-
2042
-commondir@^1.0.1:
2043
- version "1.0.1"
2044
- resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
2045
-
2046
-component-bind@1.0.0:
2047
- version "1.0.0"
2048
- resolved "https://registry.yarnpkg.com/component-bind/-/component-bind-1.0.0.tgz#00c608ab7dcd93897c0009651b1d3a8e1e73bbd1"
2049
-
2050
-component-emitter@1.2.0:
2051
- version "1.2.0"
2052
- resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.0.tgz#ccd113a86388d06482d03de3fc7df98526ba8efe"
2053
-
2054
-component-emitter@1.2.1, component-emitter@^1.2.1:
2055
- version "1.2.1"
2056
- resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
2057
-
2058
-component-inherit@0.0.3:
2059
- version "0.0.3"
2060
- resolved "https://registry.yarnpkg.com/component-inherit/-/component-inherit-0.0.3.tgz#645fc4adf58b72b649d5cae65135619db26ff143"
2061
-
2062
-component-props@1.1.1:
2063
- version "1.1.1"
2064
- resolved "https://registry.yarnpkg.com/component-props/-/component-props-1.1.1.tgz#f9b7df9b9927b6e6d97c9bd272aa867670f34944"
2065
-
2066
-component-xor@0.0.3:
2067
- version "0.0.3"
2068
- resolved "https://registry.yarnpkg.com/component-xor/-/component-xor-0.0.3.tgz#68ae7f1c40b78d843d69f2a829cfb31d6afbf051"
2069
-
2070
-compressible@~2.0.8:
2071
- version "2.0.10"
2072
- resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.10.tgz#feda1c7f7617912732b29bf8cf26252a20b9eecd"
2073
- dependencies:
2074
- mime-db ">= 1.27.0 < 2"
2075
-
2076
-compression@^1.5.2:
2077
- version "1.6.2"
2078
- resolved "https://registry.yarnpkg.com/compression/-/compression-1.6.2.tgz#cceb121ecc9d09c52d7ad0c3350ea93ddd402bc3"
2079
- dependencies:
2080
- accepts "~1.3.3"
2081
- bytes "2.3.0"
2082
- compressible "~2.0.8"
2083
- debug "~2.2.0"
2084
- on-headers "~1.0.1"
2085
- vary "~1.1.0"
2086
-
2087
-concat-map@0.0.1:
2088
- version "0.0.1"
2089
- resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
2090
-
2091
-concat-stream@^1.4.6, concat-stream@^1.4.7, concat-stream@^1.5.2:
2092
- version "1.6.0"
2093
- resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7"
2094
- dependencies:
2095
- inherits "^2.0.3"
2096
- readable-stream "^2.2.2"
2097
- typedarray "^0.0.6"
2098
-
2099
-connect-history-api-fallback@^1.3.0:
2100
- version "1.3.0"
2101
- resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.3.0.tgz#e51d17f8f0ef0db90a64fdb47de3051556e9f169"
2102
-
2103
-console-browserify@^1.1.0:
2104
- version "1.1.0"
2105
- resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
2106
- dependencies:
2107
- date-now "^0.1.4"
2108
-
2109
-console-control-strings@^1.0.0, console-control-strings@~1.1.0:
2110
- version "1.1.0"
2111
- resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
2112
-
2113
-console-stream@^0.1.1:
2114
- version "0.1.1"
2115
- resolved "https://registry.yarnpkg.com/console-stream/-/console-stream-0.1.1.tgz#a095fe07b20465955f2fafd28b5d72bccd949d44"
2116
-
2117
-constants-browserify@^1.0.0:
2118
- version "1.0.0"
2119
- resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
2120
-
2121
-content-disposition@0.5.2:
2122
- version "0.5.2"
2123
- resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.2.tgz#0cf68bb9ddf5f2be7961c3a85178cb85dba78cb4"
2124
-
2125
-content-type@^1.0.2, content-type@~1.0.2:
2126
- version "1.0.2"
2127
- resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.2.tgz#b7d113aee7a8dd27bd21133c4dc2529df1721eed"
2128
-
2129
-content@1.x.x:
2130
- version "1.0.2"
2131
- resolved "https://registry.yarnpkg.com/content/-/content-1.0.2.tgz#cb7edf32afef17c48acfdbd21ff98c23315ae824"
2132
- dependencies:
2133
- boom "2.x.x"
2134
- hoek "2.x.x"
2135
-
2136
-convert-hrtime@^2.0.0:
2137
- version "2.0.0"
2138
- resolved "https://registry.yarnpkg.com/convert-hrtime/-/convert-hrtime-2.0.0.tgz#19bfb2c9162f9e11c2f04c2c79de2b7e8095c627"
2139
-
2140
-convert-source-map@^1.1.0, convert-source-map@^1.1.1, convert-source-map@^1.5.0:
2141
- version "1.5.0"
2142
- resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.0.tgz#9acd70851c6d5dfdd93d9282e5edf94a03ff46b5"
2143
-
2144
-cookie-signature@1.0.6:
2145
- version "1.0.6"
2146
- resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
2147
-
2148
-cookie@0.3.1:
2149
- version "0.3.1"
2150
- resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
2151
-
2152
-copy-descriptor@^0.1.0:
2153
- version "0.1.1"
2154
- resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
2155
-
2156
-copyfiles@^1.2.0:
2157
- version "1.2.0"
2158
- resolved "https://registry.yarnpkg.com/copyfiles/-/copyfiles-1.2.0.tgz#a8da3ac41aa2220ae29bd3c58b6984294f2c593c"
2159
- dependencies:
2160
- glob "^7.0.5"
2161
- ltcdr "^2.2.1"
2162
- minimatch "^3.0.3"
2163
- mkdirp "^0.5.1"
2164
- noms "0.0.0"
2165
- through2 "^2.0.1"
2166
-
2167
-core-js@^1.0.0, core-js@^1.2.6:
2168
- version "1.2.7"
2169
- resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
2170
-
2171
-core-js@^2.4.0, core-js@^2.5.1:
2172
- version "2.5.1"
2173
- resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.1.tgz#ae6874dc66937789b80754ff5428df66819ca50b"
2174
-
2175
-core-js@^2.4.1:
2176
- version "2.4.1"
2177
- resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.4.1.tgz#4de911e667b0eae9124e34254b53aea6fc618d3e"
2178
-
2179
-core-js@^2.5.0:
2180
- version "2.5.0"
2181
- resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.0.tgz#569c050918be6486b3837552028ae0466b717086"
2182
-
2183
-core-util-is@~1.0.0:
2184
- version "1.0.2"
2185
- resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
2186
-
2187
-create-ecdh@^4.0.0:
2188
- version "4.0.0"
2189
- resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.0.tgz#888c723596cdf7612f6498233eebd7a35301737d"
2190
- dependencies:
2191
- bn.js "^4.1.0"
2192
- elliptic "^6.0.0"
2193
-
2194
-create-error-class@^3.0.0, create-error-class@^3.0.1:
2195
- version "3.0.2"
2196
- resolved "https://registry.yarnpkg.com/create-error-class/-/create-error-class-3.0.2.tgz#06be7abef947a3f14a30fd610671d401bca8b7b6"
2197
- dependencies:
2198
- capture-stack-trace "^1.0.0"
2199
-
2200
-create-hash@^1.1.0, create-hash@^1.1.1, create-hash@^1.1.2:
2201
- version "1.1.3"
2202
- resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.1.3.tgz#606042ac8b9262750f483caddab0f5819172d8fd"
2203
- dependencies:
2204
- cipher-base "^1.0.1"
2205
- inherits "^2.0.1"
2206
- ripemd160 "^2.0.0"
2207
- sha.js "^2.4.0"
2208
-
2209
-create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
2210
- version "1.1.6"
2211
- resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.6.tgz#acb9e221a4e17bdb076e90657c42b93e3726cf06"
2212
- dependencies:
2213
- cipher-base "^1.0.3"
2214
- create-hash "^1.1.0"
2215
- inherits "^2.0.1"
2216
- ripemd160 "^2.0.0"
2217
- safe-buffer "^5.0.1"
2218
- sha.js "^2.4.8"
2219
-
2220
-cross-env@^3.1.1:
2221
- version "3.2.4"
2222
- resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-3.2.4.tgz#9e0585f277864ed421ce756f81a980ff0d698aba"
2223
- dependencies:
2224
- cross-spawn "^5.1.0"
2225
- is-windows "^1.0.0"
2226
-
2227
-cross-spawn@^4.0.0:
2228
- version "4.0.2"
2229
- resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-4.0.2.tgz#7b9247621c23adfdd3856004a823cbe397424d41"
2230
- dependencies:
2231
- lru-cache "^4.0.1"
2232
- which "^1.2.9"
2233
-
2234
-cross-spawn@^5.1.0:
2235
- version "5.1.0"
2236
- resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449"
2237
- dependencies:
2238
- lru-cache "^4.0.1"
2239
- shebang-command "^1.2.0"
2240
- which "^1.2.9"
2241
-
2242
-crypt@~0.0.1:
2243
- version "0.0.2"
2244
- resolved "https://registry.yarnpkg.com/crypt/-/crypt-0.0.2.tgz#88d7ff7ec0dfb86f713dc87bbb42d044d3e6c41b"
2245
-
2246
-cryptiles@2.x.x:
2247
- version "2.0.5"
2248
- resolved "https://registry.yarnpkg.com/cryptiles/-/cryptiles-2.0.5.tgz#3bdfecdc608147c1c67202fa291e7dca59eaa3b8"
2249
- dependencies:
2250
- boom "2.x.x"
2251
-
2252
-crypto-browserify@3.3.0:
2253
- version "3.3.0"
2254
- resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.3.0.tgz#b9fc75bb4a0ed61dcf1cd5dae96eb30c9c3e506c"
2255
- dependencies:
2256
- browserify-aes "0.4.0"
2257
- pbkdf2-compat "2.0.1"
2258
- ripemd160 "0.2.0"
2259
- sha.js "2.2.6"
2260
-
2261
-crypto-browserify@^3.11.0:
2262
- version "3.11.0"
2263
- resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.11.0.tgz#3652a0906ab9b2a7e0c3ce66a408e957a2485522"
2264
- dependencies:
2265
- browserify-cipher "^1.0.0"
2266
- browserify-sign "^4.0.0"
2267
- create-ecdh "^4.0.0"
2268
- create-hash "^1.1.0"
2269
- create-hmac "^1.1.0"
2270
- diffie-hellman "^5.0.0"
2271
- inherits "^2.0.1"
2272
- pbkdf2 "^3.0.3"
2273
- public-encrypt "^4.0.0"
2274
- randombytes "^2.0.0"
2275
-
2276
-css-color-function@^1.2.0:
2277
- version "1.3.0"
2278
- resolved "https://registry.yarnpkg.com/css-color-function/-/css-color-function-1.3.0.tgz#72c767baf978f01b8a8a94f42f17ba5d22a776fc"
2279
- dependencies:
2280
- balanced-match "0.1.0"
2281
- color "^0.11.0"
2282
- debug "~0.7.4"
2283
- rgb "~0.1.0"
2284
-
2285
-css-color-names@0.0.4:
2286
- version "0.0.4"
2287
- resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
2288
-
2289
-css-in-js-utils@^1.0.3:
2290
- version "1.0.3"
2291
- resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-1.0.3.tgz#9ac7e02f763cf85d94017666565ed68a5b5f3215"
2292
- dependencies:
2293
- hyphenate-style-name "^1.0.2"
2294
-
2295
-css-loader@^0.26.1:
2296
- version "0.26.4"
2297
- resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.26.4.tgz#b61e9e30db94303e6ffc892f10ecd09ad025a1fd"
2298
- dependencies:
2299
- babel-code-frame "^6.11.0"
2300
- css-selector-tokenizer "^0.7.0"
2301
- cssnano ">=2.6.1 <4"
2302
- loader-utils "^1.0.2"
2303
- lodash.camelcase "^4.3.0"
2304
- object-assign "^4.0.1"
2305
- postcss "^5.0.6"
2306
- postcss-modules-extract-imports "^1.0.0"
2307
- postcss-modules-local-by-default "^1.0.1"
2308
- postcss-modules-scope "^1.0.0"
2309
- postcss-modules-values "^1.1.0"
2310
- source-list-map "^0.1.7"
2311
-
2312
-css-select@^1.1.0, css-select@~1.2.0:
2313
- version "1.2.0"
2314
- resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
2315
- dependencies:
2316
- boolbase "~1.0.0"
2317
- css-what "2.1"
2318
- domutils "1.5.1"
2319
- nth-check "~1.0.1"
2320
-
2321
-css-selector-parser@^1.1.0:
2322
- version "1.3.0"
2323
- resolved "https://registry.yarnpkg.com/css-selector-parser/-/css-selector-parser-1.3.0.tgz#5f1ad43e2d8eefbfdc304fcd39a521664943e3eb"
2324
-
2325
-css-selector-tokenizer@^0.7.0:
2326
- version "0.7.0"
2327
- resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz#e6988474ae8c953477bf5e7efecfceccd9cf4c86"
2328
- dependencies:
2329
- cssesc "^0.1.0"
2330
- fastparse "^1.1.1"
2331
- regexpu-core "^1.0.0"
2332
-
2333
-css-what@2.1:
2334
- version "2.1.0"
2335
- resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
2336
-
2337
-cssesc@^0.1.0:
2338
- version "0.1.0"
2339
- resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
2340
-
2341
-"cssnano@>=2.6.1 <4":
2342
- version "3.10.0"
2343
- resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.10.0.tgz#4f38f6cea2b9b17fa01490f23f1dc68ea65c1c38"
2344
- dependencies:
2345
- autoprefixer "^6.3.1"
2346
- decamelize "^1.1.2"
2347
- defined "^1.0.0"
2348
- has "^1.0.1"
2349
- object-assign "^4.0.1"
2350
- postcss "^5.0.14"
2351
- postcss-calc "^5.2.0"
2352
- postcss-colormin "^2.1.8"
2353
- postcss-convert-values "^2.3.4"
2354
- postcss-discard-comments "^2.0.4"
2355
- postcss-discard-duplicates "^2.0.1"
2356
- postcss-discard-empty "^2.0.1"
2357
- postcss-discard-overridden "^0.1.1"
2358
- postcss-discard-unused "^2.2.1"
2359
- postcss-filter-plugins "^2.0.0"
2360
- postcss-merge-idents "^2.1.5"
2361
- postcss-merge-longhand "^2.0.1"
2362
- postcss-merge-rules "^2.0.3"
2363
- postcss-minify-font-values "^1.0.2"
2364
- postcss-minify-gradients "^1.0.1"
2365
- postcss-minify-params "^1.0.4"
2366
- postcss-minify-selectors "^2.0.4"
2367
- postcss-normalize-charset "^1.1.0"
2368
- postcss-normalize-url "^3.0.7"
2369
- postcss-ordered-values "^2.1.0"
2370
- postcss-reduce-idents "^2.2.2"
2371
- postcss-reduce-initial "^1.0.0"
2372
- postcss-reduce-transforms "^1.0.3"
2373
- postcss-svgo "^2.1.1"
2374
- postcss-unique-selectors "^2.0.2"
2375
- postcss-value-parser "^3.2.3"
2376
- postcss-zindex "^2.0.1"
2377
-
2378
-csso@~2.3.1:
2379
- version "2.3.2"
2380
- resolved "https://registry.yarnpkg.com/csso/-/csso-2.3.2.tgz#ddd52c587033f49e94b71fc55569f252e8ff5f85"
2381
- dependencies:
2382
- clap "^1.0.9"
2383
- source-map "^0.5.3"
2384
-
2385
-currently-unhandled@^0.4.1:
2386
- version "0.4.1"
2387
- resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
2388
- dependencies:
2389
- array-find-index "^1.0.1"
2390
-
2391
-d@1:
2392
- version "1.0.0"
2393
- resolved "https://registry.yarnpkg.com/d/-/d-1.0.0.tgz#754bb5bfe55451da69a58b94d45f4c5b0462d58f"
2394
- dependencies:
2395
- es5-ext "^0.10.9"
2396
-
2397
-dashdash@^1.12.0:
2398
- version "1.14.1"
2399
- resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
2400
- dependencies:
2401
- assert-plus "^1.0.0"
2402
-
2403
-data-uri-to-buffer@0.0.4:
2404
- version "0.0.4"
2405
- resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-0.0.4.tgz#46e13ab9da8e309745c8d01ce547213ebdb2fe3f"
2406
-
2407
-date-now@^0.1.4:
2408
- version "0.1.4"
2409
- resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
2410
-
2411
-dateformat@2.0.0, dateformat@^2.0.0:
2412
- version "2.0.0"
2413
- resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-2.0.0.tgz#2743e3abb5c3fc2462e527dca445e04e9f4dee17"
2414
-
2415
-death@^1.0.0:
2416
- version "1.1.0"
2417
- resolved "https://registry.yarnpkg.com/death/-/death-1.1.0.tgz#01aa9c401edd92750514470b8266390c66c67318"
2418
-
2419
-debug@2.3.3:
2420
- version "2.3.3"
2421
- resolved "https://registry.yarnpkg.com/debug/-/debug-2.3.3.tgz#40c453e67e6e13c901ddec317af8986cda9eff8c"
2422
- dependencies:
2423
- ms "0.7.2"
2424
-
2425
-debug@2.6.7:
2426
- version "2.6.7"
2427
- resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.7.tgz#92bad1f6d05bbb6bba22cca88bcd0ec894c2861e"
2428
- dependencies:
2429
- ms "2.0.0"
2430
-
2431
-debug@2.6.8, debug@^2.1.1, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.6, debug@^2.6.8, debug@~2.6.4, debug@~2.6.6:
2432
- version "2.6.8"
2433
- resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.8.tgz#e731531ca2ede27d188222427da17821d68ff4fc"
2434
- dependencies:
2435
- ms "2.0.0"
2436
-
2437
-debug@~0.7.4:
2438
- version "0.7.4"
2439
- resolved "https://registry.yarnpkg.com/debug/-/debug-0.7.4.tgz#06e1ea8082c2cb14e39806e22e2f6f757f92af39"
2440
-
2441
-debug@~2.2.0:
2442
- version "2.2.0"
2443
- resolved "https://registry.yarnpkg.com/debug/-/debug-2.2.0.tgz#f87057e995b1a1f6ae6a4960664137bc56f039da"
2444
- dependencies:
2445
- ms "0.7.1"
2446
-
2447
-decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
2448
- version "1.2.0"
2449
- resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
2450
-
2451
-decompress-response@^3.2.0:
2452
- version "3.3.0"
2453
- resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-3.3.0.tgz#80a4dd323748384bfa248083622aedec982adff3"
2454
- dependencies:
2455
- mimic-response "^1.0.0"
2456
-
2457
-decompress-tar@^3.0.0:
2458
- version "3.1.0"
2459
- resolved "https://registry.yarnpkg.com/decompress-tar/-/decompress-tar-3.1.0.tgz#217c789f9b94450efaadc5c5e537978fc333c466"
2460
- dependencies:
2461
- is-tar "^1.0.0"
2462
- object-assign "^2.0.0"
2463
- strip-dirs "^1.0.0"
2464
- tar-stream "^1.1.1"
2465
- through2 "^0.6.1"
2466
- vinyl "^0.4.3"
2467
-
2468
-decompress-tarbz2@^3.0.0:
2469
- version "3.1.0"
2470
- resolved "https://registry.yarnpkg.com/decompress-tarbz2/-/decompress-tarbz2-3.1.0.tgz#8b23935681355f9f189d87256a0f8bdd96d9666d"
2471
- dependencies:
2472
- is-bzip2 "^1.0.0"
2473
- object-assign "^2.0.0"
2474
- seek-bzip "^1.0.3"
2475
- strip-dirs "^1.0.0"
2476
- tar-stream "^1.1.1"
2477
- through2 "^0.6.1"
2478
- vinyl "^0.4.3"
2479
-
2480
-decompress-targz@^3.0.0:
2481
- version "3.1.0"
2482
- resolved "https://registry.yarnpkg.com/decompress-targz/-/decompress-targz-3.1.0.tgz#b2c13df98166268991b715d6447f642e9696f5a0"
2483
- dependencies:
2484
- is-gzip "^1.0.0"
2485
- object-assign "^2.0.0"
2486
- strip-dirs "^1.0.0"
2487
- tar-stream "^1.1.1"
2488
- through2 "^0.6.1"
2489
- vinyl "^0.4.3"
2490
-
2491
-decompress-unzip@^3.0.0:
2492
- version "3.4.0"
2493
- resolved "https://registry.yarnpkg.com/decompress-unzip/-/decompress-unzip-3.4.0.tgz#61475b4152066bbe3fee12f9d629d15fe6478eeb"
2494
- dependencies:
2495
- is-zip "^1.0.0"
2496
- read-all-stream "^3.0.0"
2497
- stat-mode "^0.2.0"
2498
- strip-dirs "^1.0.0"
2499
- through2 "^2.0.0"
2500
- vinyl "^1.0.0"
2501
- yauzl "^2.2.1"
2502
-
2503
-decompress@^3.0.0:
2504
- version "3.0.0"
2505
- resolved "https://registry.yarnpkg.com/decompress/-/decompress-3.0.0.tgz#af1dd50d06e3bfc432461d37de11b38c0d991bed"
2506
- dependencies:
2507
- buffer-to-vinyl "^1.0.0"
2508
- concat-stream "^1.4.6"
2509
- decompress-tar "^3.0.0"
2510
- decompress-tarbz2 "^3.0.0"
2511
- decompress-targz "^3.0.0"
2512
- decompress-unzip "^3.0.0"
2513
- stream-combiner2 "^1.1.1"
2514
- vinyl-assign "^1.0.1"
2515
- vinyl-fs "^2.2.0"
2516
-
2517
-deep-equal@^1.0.1:
2518
- version "1.0.1"
2519
- resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
2520
-
2521
-deep-extend@~0.4.0:
2522
- version "0.4.2"
2523
- resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
2524
-
2525
-define-property@^0.2.5:
2526
- version "0.2.5"
2527
- resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
2528
- dependencies:
2529
- is-descriptor "^0.1.0"
2530
-
2531
-define-property@^1.0.0:
2532
- version "1.0.0"
2533
- resolved "https://registry.yarnpkg.com/define-property/-/define-property-1.0.0.tgz#769ebaaf3f4a63aad3af9e8d304c9bbe79bfb0e6"
2534
- dependencies:
2535
- is-descriptor "^1.0.0"
2536
-
2537
-defined@^1.0.0:
2538
- version "1.0.0"
2539
- resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
2540
-
2541
-del@^3.0.0:
2542
- version "3.0.0"
2543
- resolved "https://registry.yarnpkg.com/del/-/del-3.0.0.tgz#53ecf699ffcbcb39637691ab13baf160819766e5"
2544
- dependencies:
2545
- globby "^6.1.0"
2546
- is-path-cwd "^1.0.0"
2547
- is-path-in-cwd "^1.0.0"
2548
- p-map "^1.1.1"
2549
- pify "^3.0.0"
2550
- rimraf "^2.2.8"
2551
-
2552
-delayed-stream@~1.0.0:
2553
- version "1.0.0"
2554
- resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
2555
-
2556
-delegate@^3.1.2:
2557
- version "3.1.3"
2558
- resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.1.3.tgz#9a8251a777d7025faa55737bc3b071742127a9fd"
2559
-
2560
-delegates@^1.0.0:
2561
- version "1.0.0"
2562
- resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
2563
-
2564
-depd@1.1.0, depd@~1.1.0:
2565
- version "1.1.0"
2566
- resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.0.tgz#e1bd82c6aab6ced965b97b88b17ed3e528ca18c3"
2567
-
2568
-des.js@^1.0.0:
2569
- version "1.0.0"
2570
- resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.0.tgz#c074d2e2aa6a8a9a07dbd61f9a15c2cd83ec8ecc"
2571
- dependencies:
2572
- inherits "^2.0.1"
2573
- minimalistic-assert "^1.0.0"
2574
-
2575
-destroy@~1.0.4:
2576
- version "1.0.4"
2577
- resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
2578
-
2579
-detab@^2.0.0:
2580
- version "2.0.0"
2581
- resolved "https://registry.yarnpkg.com/detab/-/detab-2.0.0.tgz#485bd7954d2348092e998f7ff1a79fd9869d9b50"
2582
- dependencies:
2583
- repeat-string "^1.5.4"
2584
-
2585
-detect-file@^0.1.0:
2586
- version "0.1.0"
2587
- resolved "https://registry.yarnpkg.com/detect-file/-/detect-file-0.1.0.tgz#4935dedfd9488648e006b0129566e9386711ea63"
2588
- dependencies:
2589
- fs-exists-sync "^0.1.0"
2590
-
2591
-detect-indent@^4.0.0:
2592
- version "4.0.0"
2593
- resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-4.0.0.tgz#f76d064352cdf43a1cb6ce619c4ee3a9475de208"
2594
- dependencies:
2595
- repeating "^2.0.0"
2596
-
2597
-detect-indent@^5.0.0:
2598
- version "5.0.0"
2599
- resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-5.0.0.tgz#3871cc0a6a002e8c3e5b3cf7f336264675f06b9d"
2600
-
2601
-detect-port@^1.2.1:
2602
- version "1.2.1"
2603
- resolved "https://registry.yarnpkg.com/detect-port/-/detect-port-1.2.1.tgz#a2c0a048aa9df2b703fc54bb4436ce2118f09b5a"
2604
- dependencies:
2605
- address "^1.0.1"
2606
- debug "^2.6.0"
2607
-
2608
-diacritics-map@^0.1.0:
2609
- version "0.1.0"
2610
- resolved "https://registry.yarnpkg.com/diacritics-map/-/diacritics-map-0.1.0.tgz#6dfc0ff9d01000a2edf2865371cac316e94977af"
2611
-
2612
-diffie-hellman@^5.0.0:
2613
- version "5.0.2"
2614
- resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.2.tgz#b5835739270cfe26acf632099fded2a07f209e5e"
2615
- dependencies:
2616
- bn.js "^4.1.0"
2617
- miller-rabin "^4.0.0"
2618
- randombytes "^2.0.0"
2619
-
2620
-dom-converter@~0.1:
2621
- version "0.1.4"
2622
- resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.1.4.tgz#a45ef5727b890c9bffe6d7c876e7b19cb0e17f3b"
2623
- dependencies:
2624
- utila "~0.3"
2625
-
2626
-dom-helpers@^3.0.0:
2627
- version "3.2.1"
2628
- resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.2.1.tgz#3203e07fed217bd1f424b019735582fc37b2825a"
2629
-
2630
-dom-iterator@^0.3.0:
2631
- version "0.3.0"
2632
- resolved "https://registry.yarnpkg.com/dom-iterator/-/dom-iterator-0.3.0.tgz#5a745bf47bc692ac0fa3c0c385396ff2cbd55882"
2633
- dependencies:
2634
- component-props "1.1.1"
2635
- component-xor "0.0.3"
2636
-
2637
-dom-serializer@0, dom-serializer@~0.1.0:
2638
- version "0.1.0"
2639
- resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
2640
- dependencies:
2641
- domelementtype "~1.1.1"
2642
- entities "~1.1.1"
2643
-
2644
-dom-walk@^0.1.0:
2645
- version "0.1.1"
2646
- resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
2647
-
2648
-domain-browser@^1.1.1:
2649
- version "1.1.7"
2650
- resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
2651
-
2652
-domelementtype@1, domelementtype@^1.3.0:
2653
- version "1.3.0"
2654
- resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2"
2655
-
2656
-domelementtype@~1.1.1:
2657
- version "1.1.3"
2658
- resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b"
2659
-
2660
-domhandler@2.1:
2661
- version "2.1.0"
2662
- resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.1.0.tgz#d2646f5e57f6c3bab11cf6cb05d3c0acf7412594"
2663
- dependencies:
2664
- domelementtype "1"
2665
-
2666
-domhandler@^2.3.0:
2667
- version "2.4.1"
2668
- resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.1.tgz#892e47000a99be55bbf3774ffea0561d8879c259"
2669
- dependencies:
2670
- domelementtype "1"
2671
-
2672
-domready@^1.0.8:
2673
- version "1.0.8"
2674
- resolved "https://registry.yarnpkg.com/domready/-/domready-1.0.8.tgz#91f252e597b65af77e745ae24dd0185d5e26d58c"
2675
-
2676
-domutils@1.1:
2677
- version "1.1.6"
2678
- resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.1.6.tgz#bddc3de099b9a2efacc51c623f28f416ecc57485"
2679
- dependencies:
2680
- domelementtype "1"
2681
-
2682
-domutils@1.5.1, domutils@^1.5.1:
2683
- version "1.5.1"
2684
- resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
2685
- dependencies:
2686
- dom-serializer "0"
2687
- domelementtype "1"
2688
-
2689
-dotenv@^4.0.0:
2690
- version "4.0.0"
2691
- resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-4.0.0.tgz#864ef1379aced55ce6f95debecdce179f7a0cd1d"
2692
-
2693
-download@^4.0.0, download@^4.1.2:
2694
- version "4.4.3"
2695
- resolved "https://registry.yarnpkg.com/download/-/download-4.4.3.tgz#aa55fdad392d95d4b68e8c2be03e0c2aa21ba9ac"
2696
- dependencies:
2697
- caw "^1.0.1"
2698
- concat-stream "^1.4.7"
2699
- each-async "^1.0.0"
2700
- filenamify "^1.0.1"
2701
- got "^5.0.0"
2702
- gulp-decompress "^1.2.0"
2703
- gulp-rename "^1.2.0"
2704
- is-url "^1.2.0"
2705
- object-assign "^4.0.1"
2706
- read-all-stream "^3.0.0"
2707
- readable-stream "^2.0.2"
2708
- stream-combiner2 "^1.1.1"
2709
- vinyl "^1.0.0"
2710
- vinyl-fs "^2.2.0"
2711
- ware "^1.2.0"
2712
-
2713
-duplexer2@0.0.2:
2714
- version "0.0.2"
2715
- resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.0.2.tgz#c614dcf67e2fb14995a91711e5a617e8a60a31db"
2716
- dependencies:
2717
- readable-stream "~1.1.9"
2718
-
2719
-duplexer2@^0.1.4, duplexer2@~0.1.0:
2720
- version "0.1.4"
2721
- resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"
2722
- dependencies:
2723
- readable-stream "^2.0.2"
2724
-
2725
-duplexer3@^0.1.4:
2726
- version "0.1.4"
2727
- resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
2728
-
2729
-duplexify@^3.2.0:
2730
- version "3.5.0"
2731
- resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.5.0.tgz#1aa773002e1578457e9d9d4a50b0ccaaebcbd604"
2732
- dependencies:
2733
- end-of-stream "1.0.0"
2734
- inherits "^2.0.1"
2735
- readable-stream "^2.0.0"
2736
- stream-shift "^1.0.0"
2737
-
2738
-each-async@^1.0.0, each-async@^1.1.1:
2739
- version "1.1.1"
2740
- resolved "https://registry.yarnpkg.com/each-async/-/each-async-1.1.1.tgz#dee5229bdf0ab6ba2012a395e1b869abf8813473"
2741
- dependencies:
2742
- onetime "^1.0.0"
2743
- set-immediate-shim "^1.0.0"
2744
-
2745
-ecc-jsbn@~0.1.1:
2746
- version "0.1.1"
2747
- resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
2748
- dependencies:
2749
- jsbn "~0.1.0"
2750
-
2751
-ee-first@1.1.1:
2752
- version "1.1.1"
2753
- resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
2754
-
2755
-electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.14:
2756
- version "1.3.15"
2757
- resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.15.tgz#08397934891cbcfaebbd18b82a95b5a481138369"
2758
-
2759
-elliptic@^6.0.0:
2760
- version "6.4.0"
2761
- resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df"
2762
- dependencies:
2763
- bn.js "^4.4.0"
2764
- brorand "^1.0.1"
2765
- hash.js "^1.0.0"
2766
- hmac-drbg "^1.0.0"
2767
- inherits "^2.0.1"
2768
- minimalistic-assert "^1.0.0"
2769
- minimalistic-crypto-utils "^1.0.0"
2770
-
2771
-"emoji-regex@>=6.0.0 <=6.1.1":
2772
- version "6.1.1"
2773
- resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.1.1.tgz#c6cd0ec1b0642e2a3c67a1137efc5e796da4f88e"
2774
-
2775
-emojis-list@^2.0.0:
2776
- version "2.1.0"
2777
- resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
2778
-
2779
-encodeurl@~1.0.1:
2780
- version "1.0.1"
2781
- resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
2782
-
2783
-encoding@^0.1.11:
2784
- version "0.1.12"
2785
- resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
2786
- dependencies:
2787
- iconv-lite "~0.4.13"
2788
-
2789
-end-of-stream@1.0.0:
2790
- version "1.0.0"
2791
- resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.0.0.tgz#d4596e702734a93e40e9af864319eabd99ff2f0e"
2792
- dependencies:
2793
- once "~1.3.0"
2794
-
2795
-end-of-stream@^1.0.0, end-of-stream@^1.1.0:
2796
- version "1.4.0"
2797
- resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.0.tgz#7a90d833efda6cfa6eac0f4949dbb0fad3a63206"
2798
- dependencies:
2799
- once "^1.4.0"
2800
-
2801
-engine.io-client@~3.1.0:
2802
- version "3.1.1"
2803
- resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-3.1.1.tgz#415a9852badb14fa008fa3ef1e31608db6761325"
2804
- dependencies:
2805
- component-emitter "1.2.1"
2806
- component-inherit "0.0.3"
2807
- debug "~2.6.4"
2808
- engine.io-parser "~2.1.1"
2809
- has-cors "1.1.0"
2810
- indexof "0.0.1"
2811
- parsejson "0.0.3"
2812
- parseqs "0.0.5"
2813
- parseuri "0.0.5"
2814
- ws "~2.3.1"
2815
- xmlhttprequest-ssl "1.5.3"
2816
- yeast "0.1.2"
2817
-
2818
-engine.io-parser@~2.1.0, engine.io-parser@~2.1.1:
2819
- version "2.1.1"
2820
- resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-2.1.1.tgz#e0fb3f0e0462f7f58bb77c1a52e9f5a7e26e4668"
2821
- dependencies:
2822
- after "0.8.2"
2823
- arraybuffer.slice "0.0.6"
2824
- base64-arraybuffer "0.1.5"
2825
- blob "0.0.4"
2826
- has-binary2 "~1.0.2"
2827
-
2828
-engine.io@~3.1.0:
2829
- version "3.1.0"
2830
- resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-3.1.0.tgz#5ca438e3ce9fdbc915c4a21c8dd9e1266706e57e"
2831
- dependencies:
2832
- accepts "1.3.3"
2833
- base64id "1.0.0"
2834
- cookie "0.3.1"
2835
- debug "~2.6.4"
2836
- engine.io-parser "~2.1.0"
2837
- ws "~2.3.1"
2838
- optionalDependencies:
2839
- uws "~0.14.4"
2840
-
2841
-enhanced-resolve@~0.9.0:
2842
- version "0.9.1"
2843
- resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-0.9.1.tgz#4d6e689b3725f86090927ccc86cd9f1635b89e2e"
2844
- dependencies:
2845
- graceful-fs "^4.1.2"
2846
- memory-fs "^0.2.0"
2847
- tapable "^0.1.8"
2848
-
2849
-entities@^1.1.1, entities@~1.1.1:
2850
- version "1.1.1"
2851
- resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
2852
-
2853
-err-code@^1.0.0:
2854
- version "1.1.2"
2855
- resolved "https://registry.yarnpkg.com/err-code/-/err-code-1.1.2.tgz#06e0116d3028f6aef4806849eb0ea6a748ae6960"
2856
-
2857
-errno@^0.1.3:
2858
- version "0.1.4"
2859
- resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.4.tgz#b896e23a9e5e8ba33871fc996abd3635fc9a1c7d"
2860
- dependencies:
2861
- prr "~0.0.0"
2862
-
2863
-error-ex@^1.2.0:
2864
- version "1.3.1"
2865
- resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.1.tgz#f855a86ce61adc4e8621c3cda21e7a7612c3a8dc"
2866
- dependencies:
2867
- is-arrayish "^0.2.1"
2868
-
2869
-error-stack-parser@^1.3.6:
2870
- version "1.3.6"
2871
- resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-1.3.6.tgz#e0e73b93e417138d1cd7c0b746b1a4a14854c292"
2872
- dependencies:
2873
- stackframe "^0.3.1"
2874
-
2875
-error-stack-parser@^2.0.0:
2876
- version "2.0.1"
2877
- resolved "https://registry.yarnpkg.com/error-stack-parser/-/error-stack-parser-2.0.1.tgz#a3202b8fb03114aa9b40a0e3669e48b2b65a010a"
2878
- dependencies:
2879
- stackframe "^1.0.3"
2880
-
2881
-es5-ext@^0.10.12, es5-ext@^0.10.14, es5-ext@^0.10.9, es5-ext@~0.10.14:
2882
- version "0.10.23"
2883
- resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.23.tgz#7578b51be974207a5487821b56538c224e4e7b38"
2884
- dependencies:
2885
- es6-iterator "2"
2886
- es6-symbol "~3.1"
2887
-
2888
-es6-iterator@2:
2889
- version "2.0.1"
2890
- resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.1.tgz#8e319c9f0453bf575d374940a655920e59ca5512"
2891
- dependencies:
2892
- d "1"
2893
- es5-ext "^0.10.14"
2894
- es6-symbol "^3.1"
2895
-
2896
-es6-promise@^4.1.0:
2897
- version "4.1.1"
2898
- resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.1.1.tgz#8811e90915d9a0dba36274f0b242dbda78f9c92a"
2899
-
2900
-es6-symbol@^3.1, es6-symbol@~3.1:
2901
- version "3.1.1"
2902
- resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.1.tgz#bf00ef4fdab6ba1b46ecb7b629b4c7ed5715cc77"
2903
- dependencies:
2904
- d "1"
2905
- es5-ext "~0.10.14"
2906
-
2907
-es6-template-strings@^2.0.0:
2908
- version "2.0.1"
2909
- resolved "https://registry.yarnpkg.com/es6-template-strings/-/es6-template-strings-2.0.1.tgz#b166c6a62562f478bb7775f6ca96103a599b4b2c"
2910
- dependencies:
2911
- es5-ext "^0.10.12"
2912
- esniff "^1.1"
2913
-
2914
-escape-html@~1.0.3:
2915
- version "1.0.3"
2916
- resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
2917
-
2918
-escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
2919
- version "1.0.5"
2920
- resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
2921
-
2922
-esniff@^1.1:
2923
- version "1.1.0"
2924
- resolved "https://registry.yarnpkg.com/esniff/-/esniff-1.1.0.tgz#c66849229f91464dede2e0d40201ed6abf65f2ac"
2925
- dependencies:
2926
- d "1"
2927
- es5-ext "^0.10.12"
2928
-
2929
-esprima@^2.6.0:
2930
- version "2.7.3"
2931
- resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
2932
-
2933
-esprima@^3.1.1:
2934
- version "3.1.3"
2935
- resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
2936
-
2937
-esutils@^2.0.0, esutils@^2.0.2:
2938
- version "2.0.2"
2939
- resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
2940
-
2941
-etag@~1.8.0:
2942
- version "1.8.0"
2943
- resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.0.tgz#6f631aef336d6c46362b51764044ce216be3c051"
2944
-
2945
-eval@^0.1.0:
2946
- version "0.1.2"
2947
- resolved "https://registry.yarnpkg.com/eval/-/eval-0.1.2.tgz#9f7103284c105a66df4030b2b3273165837013da"
2948
- dependencies:
2949
- require-like ">= 0.1.1"
2950
-
2951
-eventemitter2@^4.1.0:
2952
- version "4.1.0"
2953
- resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-4.1.0.tgz#b1fb8a1144e7dfcf80cecce9877ff6d68e7d8506"
2954
-
2955
-eventemitter3@1.x.x:
2956
- version "1.2.0"
2957
- resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-1.2.0.tgz#1c86991d816ad1e504750e73874224ecf3bec508"
2958
-
2959
-events@^1.0.0:
2960
- version "1.1.1"
2961
- resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
2962
-
2963
-eventsource@0.1.6:
2964
- version "0.1.6"
2965
- resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-0.1.6.tgz#0acede849ed7dd1ccc32c811bb11b944d4f29232"
2966
- dependencies:
2967
- original ">=0.0.5"
2968
-
2969
-evp_bytestokey@^1.0.0:
2970
- version "1.0.0"
2971
- resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.0.tgz#497b66ad9fef65cd7c08a6180824ba1476b66e53"
2972
- dependencies:
2973
- create-hash "^1.1.1"
2974
-
2975
-exec-buffer@^3.0.0:
2976
- version "3.1.0"
2977
- resolved "https://registry.yarnpkg.com/exec-buffer/-/exec-buffer-3.1.0.tgz#851b46d062fca9bcbc6ff8781693e28e8da80402"
2978
- dependencies:
2979
- execa "^0.5.0"
2980
- p-finally "^1.0.0"
2981
- pify "^2.3.0"
2982
- rimraf "^2.5.4"
2983
- tempfile "^1.0.0"
2984
-
2985
-exec-series@^1.0.0:
2986
- version "1.0.3"
2987
- resolved "https://registry.yarnpkg.com/exec-series/-/exec-series-1.0.3.tgz#6d257a9beac482a872c7783bc8615839fc77143a"
2988
- dependencies:
2989
- async-each-series "^1.1.0"
2990
- object-assign "^4.1.0"
2991
-
2992
-exec-sh@^0.2.0:
2993
- version "0.2.0"
2994
- resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.2.0.tgz#14f75de3f20d286ef933099b2ce50a90359cef10"
2995
- dependencies:
2996
- merge "^1.1.3"
2997
-
2998
-execa@^0.5.0:
2999
- version "0.5.1"
3000
- resolved "https://registry.yarnpkg.com/execa/-/execa-0.5.1.tgz#de3fb85cb8d6e91c85bcbceb164581785cb57b36"
3001
- dependencies:
3002
- cross-spawn "^4.0.0"
3003
- get-stream "^2.2.0"
3004
- is-stream "^1.1.0"
3005
- npm-run-path "^2.0.0"
3006
- p-finally "^1.0.0"
3007
- signal-exit "^3.0.0"
3008
- strip-eof "^1.0.0"
3009
-
3010
-executable@^1.0.0:
3011
- version "1.1.0"
3012
- resolved "https://registry.yarnpkg.com/executable/-/executable-1.1.0.tgz#877980e9112f3391066da37265de7ad8434ab4d9"
3013
- dependencies:
3014
- meow "^3.1.0"
3015
-
3016
-exenv@^1.2.1:
3017
- version "1.2.2"
3018
- resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
3019
-
3020
-expand-brackets@^0.1.4:
3021
- version "0.1.5"
3022
- resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-0.1.5.tgz#df07284e342a807cd733ac5af72411e581d1177b"
3023
- dependencies:
3024
- is-posix-bracket "^0.1.0"
3025
-
3026
-expand-brackets@^2.1.4:
3027
- version "2.1.4"
3028
- resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
3029
- dependencies:
3030
- debug "^2.3.3"
3031
- define-property "^0.2.5"
3032
- extend-shallow "^2.0.1"
3033
- posix-character-classes "^0.1.0"
3034
- regex-not "^1.0.0"
3035
- snapdragon "^0.8.1"
3036
- to-regex "^3.0.1"
3037
-
3038
-expand-range@^1.8.1:
3039
- version "1.8.2"
3040
- resolved "https://registry.yarnpkg.com/expand-range/-/expand-range-1.8.2.tgz#a299effd335fe2721ebae8e257ec79644fc85337"
3041
- dependencies:
3042
- fill-range "^2.1.0"
3043
-
3044
-expand-tilde@^1.2.0, expand-tilde@^1.2.2:
3045
- version "1.2.2"
3046
- resolved "https://registry.yarnpkg.com/expand-tilde/-/expand-tilde-1.2.2.tgz#0b81eba897e5a3d31d1c3d102f8f01441e559449"
3047
- dependencies:
3048
- os-homedir "^1.0.1"
3049
-
3050
-expand-tilde@^2.0.2:
3051
- version "2.0.2"
3052
- resolved "https://registry.yarnpkg.com/expand-tilde/-/expand-tilde-2.0.2.tgz#97e801aa052df02454de46b02bf621642cdc8502"
3053
- dependencies:
3054
- homedir-polyfill "^1.0.1"
3055
-
3056
-express-graphql@^0.6.6:
3057
- version "0.6.6"
3058
- resolved "https://registry.yarnpkg.com/express-graphql/-/express-graphql-0.6.6.tgz#fdf5c7b5af600b8ef920e4095e03dfc784f9094d"
3059
- dependencies:
3060
- accepts "^1.3.0"
3061
- content-type "^1.0.2"
3062
- http-errors "^1.3.0"
3063
- prettier "^1.3.1"
3064
- raw-body "^2.1.0"
3065
-
3066
-express@^4.13.3, express@^4.14.0:
3067
- version "4.15.3"
3068
- resolved "https://registry.yarnpkg.com/express/-/express-4.15.3.tgz#bab65d0f03aa80c358408972fc700f916944b662"
3069
- dependencies:
3070
- accepts "~1.3.3"
3071
- array-flatten "1.1.1"
3072
- content-disposition "0.5.2"
3073
- content-type "~1.0.2"
3074
- cookie "0.3.1"
3075
- cookie-signature "1.0.6"
3076
- debug "2.6.7"
3077
- depd "~1.1.0"
3078
- encodeurl "~1.0.1"
3079
- escape-html "~1.0.3"
3080
- etag "~1.8.0"
3081
- finalhandler "~1.0.3"
3082
- fresh "0.5.0"
3083
- merge-descriptors "1.0.1"
3084
- methods "~1.1.2"
3085
- on-finished "~2.3.0"
3086
- parseurl "~1.3.1"
3087
- path-to-regexp "0.1.7"
3088
- proxy-addr "~1.1.4"
3089
- qs "6.4.0"
3090
- range-parser "~1.2.0"
3091
- send "0.15.3"
3092
- serve-static "1.12.3"
3093
- setprototypeof "1.0.3"
3094
- statuses "~1.3.1"
3095
- type-is "~1.6.15"
3096
- utils-merge "1.0.0"
3097
- vary "~1.1.1"
3098
-
3099
-extend-shallow@^2.0.1:
3100
- version "2.0.1"
3101
- resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
3102
- dependencies:
3103
- is-extendable "^0.1.0"
3104
-
3105
-extend@^3.0.0, extend@~3.0.0:
3106
- version "3.0.1"
3107
- resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
3108
-
3109
-external-editor@^2.0.4:
3110
- version "2.0.4"
3111
- resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.0.4.tgz#1ed9199da9cbfe2ef2f7a31b2fde8b0d12368972"
3112
- dependencies:
3113
- iconv-lite "^0.4.17"
3114
- jschardet "^1.4.2"
3115
- tmp "^0.0.31"
3116
-
3117
-extglob@^0.3.1:
3118
- version "0.3.2"
3119
- resolved "https://registry.yarnpkg.com/extglob/-/extglob-0.3.2.tgz#2e18ff3d2f49ab2765cec9023f011daa8d8349a1"
3120
- dependencies:
3121
- is-extglob "^1.0.0"
3122
-
3123
-extglob@^2.0.2:
3124
- version "2.0.2"
3125
- resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.2.tgz#3290f46208db1b2e8eb8be0c94ed9e6ad80edbe2"
3126
- dependencies:
3127
- array-unique "^0.3.2"
3128
- define-property "^1.0.0"
3129
- expand-brackets "^2.1.4"
3130
- extend-shallow "^2.0.1"
3131
- fragment-cache "^0.2.1"
3132
- regex-not "^1.0.0"
3133
- snapdragon "^0.8.1"
3134
- to-regex "^3.0.1"
3135
-
3136
-extract-text-webpack-plugin@^1.0.1:
3137
- version "1.0.1"
3138
- resolved "https://registry.yarnpkg.com/extract-text-webpack-plugin/-/extract-text-webpack-plugin-1.0.1.tgz#c95bf3cbaac49dc96f1dc6e072549fbb654ccd2c"
3139
- dependencies:
3140
- async "^1.5.0"
3141
- loader-utils "^0.2.3"
3142
- webpack-sources "^0.1.0"
3143
-
3144
-extsprintf@1.0.2:
3145
- version "1.0.2"
3146
- resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.0.2.tgz#e1080e0658e300b06294990cc70e1502235fd550"
3147
-
3148
-fancy-log@^1.1.0:
3149
- version "1.3.0"
3150
- resolved "https://registry.yarnpkg.com/fancy-log/-/fancy-log-1.3.0.tgz#45be17d02bb9917d60ccffd4995c999e6c8c9948"
3151
- dependencies:
3152
- chalk "^1.1.1"
3153
- time-stamp "^1.0.0"
3154
-
3155
-fast-glob@^1.0.1:
3156
- version "1.0.1"
3157
- resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-1.0.1.tgz#30f9b1120fd57a7f172364a6458fbdbd98187b3c"
3158
- dependencies:
3159
- bash-glob "^1.0.1"
3160
- glob-parent "^3.1.0"
3161
- micromatch "^3.0.3"
3162
- readdir-enhanced "^1.5.2"
3163
-
3164
-fastparse@^1.1.1:
3165
- version "1.1.1"
3166
- resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
3167
-
3168
-faye-websocket@^0.10.0:
3169
- version "0.10.0"
3170
- resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4"
3171
- dependencies:
3172
- websocket-driver ">=0.5.1"
3173
-
3174
-faye-websocket@~0.11.0:
3175
- version "0.11.1"
3176
- resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.1.tgz#f0efe18c4f56e4f40afc7e06c719fd5ee6188f38"
3177
- dependencies:
3178
- websocket-driver ">=0.5.1"
3179
-
3180
-fb-watchman@^2.0.0:
3181
- version "2.0.0"
3182
- resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.0.tgz#54e9abf7dfa2f26cd9b1636c588c1afc05de5d58"
3183
- dependencies:
3184
- bser "^2.0.0"
3185
-
3186
-fbjs@^0.8.1, fbjs@^0.8.16:
3187
- version "0.8.16"
3188
- resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
3189
- dependencies:
3190
- core-js "^1.0.0"
3191
- isomorphic-fetch "^2.1.1"
3192
- loose-envify "^1.0.0"
3193
- object-assign "^4.1.0"
3194
- promise "^7.1.1"
3195
- setimmediate "^1.0.5"
3196
- ua-parser-js "^0.7.9"
3197
-
3198
-fbjs@^0.8.12, fbjs@^0.8.9:
3199
- version "0.8.14"
3200
- resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.14.tgz#d1dbe2be254c35a91e09f31f9cd50a40b2a0ed1c"
3201
- dependencies:
3202
- core-js "^1.0.0"
3203
- isomorphic-fetch "^2.1.1"
3204
- loose-envify "^1.0.0"
3205
- object-assign "^4.1.0"
3206
- promise "^7.1.1"
3207
- setimmediate "^1.0.5"
3208
- ua-parser-js "^0.7.9"
3209
-
3210
-fd-slicer@~1.0.1:
3211
- version "1.0.1"
3212
- resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.0.1.tgz#8b5bcbd9ec327c5041bf9ab023fd6750f1177e65"
3213
- dependencies:
3214
- pend "~1.2.0"
3215
-
3216
-figures@^1.3.5:
3217
- version "1.7.0"
3218
- resolved "https://registry.yarnpkg.com/figures/-/figures-1.7.0.tgz#cbe1e3affcf1cd44b80cadfed28dc793a9701d2e"
3219
- dependencies:
3220
- escape-string-regexp "^1.0.5"
3221
- object-assign "^4.1.0"
3222
-
3223
-figures@^2.0.0:
3224
- version "2.0.0"
3225
- resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
3226
- dependencies:
3227
- escape-string-regexp "^1.0.5"
3228
-
3229
-file-loader@^0.9.0:
3230
- version "0.9.0"
3231
- resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-0.9.0.tgz#1d2daddd424ce6d1b07cfe3f79731bed3617ab42"
3232
- dependencies:
3233
- loader-utils "~0.2.5"
3234
-
3235
-file-type@^3.1.0:
3236
- version "3.9.0"
3237
- resolved "https://registry.yarnpkg.com/file-type/-/file-type-3.9.0.tgz#257a078384d1db8087bc449d107d52a52672b9e9"
3238
-
3239
-file-type@^4.1.0:
3240
- version "4.4.0"
3241
- resolved "https://registry.yarnpkg.com/file-type/-/file-type-4.4.0.tgz#1b600e5fca1fbdc6e80c0a70c71c8dba5f7906c5"
3242
-
3243
-filename-regex@^2.0.0:
3244
- version "2.0.1"
3245
- resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
3246
-
3247
-filename-reserved-regex@^1.0.0:
3248
- version "1.0.0"
3249
- resolved "https://registry.yarnpkg.com/filename-reserved-regex/-/filename-reserved-regex-1.0.0.tgz#e61cf805f0de1c984567d0386dc5df50ee5af7e4"
3250
-
3251
-filenamify@^1.0.1:
3252
- version "1.2.1"
3253
- resolved "https://registry.yarnpkg.com/filenamify/-/filenamify-1.2.1.tgz#a9f2ffd11c503bed300015029272378f1f1365a5"
3254
- dependencies:
3255
- filename-reserved-regex "^1.0.0"
3256
- strip-outer "^1.0.0"
3257
- trim-repeated "^1.0.0"
3258
-
3259
-fill-range@^2.1.0:
3260
- version "2.2.3"
3261
- resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723"
3262
- dependencies:
3263
- is-number "^2.1.0"
3264
- isobject "^2.0.0"
3265
- randomatic "^1.1.3"
3266
- repeat-element "^1.1.2"
3267
- repeat-string "^1.5.2"
3268
-
3269
-fill-range@^4.0.0:
3270
- version "4.0.0"
3271
- resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
3272
- dependencies:
3273
- extend-shallow "^2.0.1"
3274
- is-number "^3.0.0"
3275
- repeat-string "^1.6.1"
3276
- to-regex-range "^2.1.0"
3277
-
3278
-finalhandler@~1.0.3:
3279
- version "1.0.3"
3280
- resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.0.3.tgz#ef47e77950e999780e86022a560e3217e0d0cc89"
3281
- dependencies:
3282
- debug "2.6.7"
3283
- encodeurl "~1.0.1"
3284
- escape-html "~1.0.3"
3285
- on-finished "~2.3.0"
3286
- parseurl "~1.3.1"
3287
- statuses "~1.3.1"
3288
- unpipe "~1.0.0"
3289
-
3290
-find-cache-dir@^0.1.1:
3291
- version "0.1.1"
3292
- resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-0.1.1.tgz#c8defae57c8a52a8a784f9e31c57c742e993a0b9"
3293
- dependencies:
3294
- commondir "^1.0.1"
3295
- mkdirp "^0.5.1"
3296
- pkg-dir "^1.0.0"
3297
-
3298
-find-node-modules@^1.0.1:
3299
- version "1.0.4"
3300
- resolved "https://registry.yarnpkg.com/find-node-modules/-/find-node-modules-1.0.4.tgz#b6deb3cccb699c87037677bcede2c5f5862b2550"
3301
- dependencies:
3302
- findup-sync "0.4.2"
3303
- merge "^1.2.0"
3304
-
3305
-find-up@^1.0.0:
3306
- version "1.1.2"
3307
- resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
3308
- dependencies:
3309
- path-exists "^2.0.0"
3310
- pinkie-promise "^2.0.0"
3311
-
3312
-find-versions@^1.0.0:
3313
- version "1.2.1"
3314
- resolved "https://registry.yarnpkg.com/find-versions/-/find-versions-1.2.1.tgz#cbde9f12e38575a0af1be1b9a2c5d5fd8f186b62"
3315
- dependencies:
3316
- array-uniq "^1.0.0"
3317
- get-stdin "^4.0.1"
3318
- meow "^3.5.0"
3319
- semver-regex "^1.0.0"
3320
-
3321
-findup-sync@0.4.2, findup-sync@^0.4.2:
3322
- version "0.4.2"
3323
- resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-0.4.2.tgz#a8117d0f73124f5a4546839579fe52d7129fb5e5"
3324
- dependencies:
3325
- detect-file "^0.1.0"
3326
- is-glob "^2.0.1"
3327
- micromatch "^2.3.7"
3328
- resolve-dir "^0.1.0"
3329
-
3330
-fined@^1.0.1:
3331
- version "1.1.0"
3332
- resolved "https://registry.yarnpkg.com/fined/-/fined-1.1.0.tgz#b37dc844b76a2f5e7081e884f7c0ae344f153476"
3333
- dependencies:
3334
- expand-tilde "^2.0.2"
3335
- is-plain-object "^2.0.3"
3336
- object.defaults "^1.1.0"
3337
- object.pick "^1.2.0"
3338
- parse-filepath "^1.0.1"
3339
-
3340
-first-chunk-stream@^1.0.0:
3341
- version "1.0.0"
3342
- resolved "https://registry.yarnpkg.com/first-chunk-stream/-/first-chunk-stream-1.0.0.tgz#59bfb50cd905f60d7c394cd3d9acaab4e6ad934e"
3343
-
3344
-flagged-respawn@^0.3.2:
3345
- version "0.3.2"
3346
- resolved "https://registry.yarnpkg.com/flagged-respawn/-/flagged-respawn-0.3.2.tgz#ff191eddcd7088a675b2610fffc976be9b8074b5"
3347
-
3348
-flat@^2.0.1:
3349
- version "2.0.1"
3350
- resolved "https://registry.yarnpkg.com/flat/-/flat-2.0.1.tgz#70e29188a74be0c3c89409eed1fa9577907ae32f"
3351
- dependencies:
3352
- is-buffer "~1.1.2"
3353
-
3354
-flatten@^1.0.2:
3355
- version "1.0.2"
3356
- resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
3357
-
3358
-for-in@^1.0.1, for-in@^1.0.2:
3359
- version "1.0.2"
3360
- resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
3361
-
3362
-for-own@^0.1.4:
3363
- version "0.1.5"
3364
- resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
3365
- dependencies:
3366
- for-in "^1.0.1"
3367
-
3368
-for-own@^1.0.0:
3369
- version "1.0.0"
3370
- resolved "https://registry.yarnpkg.com/for-own/-/for-own-1.0.0.tgz#c63332f415cedc4b04dbfe70cf836494c53cb44b"
3371
- dependencies:
3372
- for-in "^1.0.1"
3373
-
3374
-forever-agent@~0.6.1:
3375
- version "0.6.1"
3376
- resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
3377
-
3378
-form-data@~2.1.1:
3379
- version "2.1.4"
3380
- resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.4.tgz#33c183acf193276ecaa98143a69e94bfee1750d1"
3381
- dependencies:
3382
- asynckit "^0.4.0"
3383
- combined-stream "^1.0.5"
3384
- mime-types "^2.1.12"
3385
-
3386
-forwarded@~0.1.0:
3387
- version "0.1.0"
3388
- resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.0.tgz#19ef9874c4ae1c297bcf078fde63a09b66a84363"
3389
-
3390
-fragment-cache@^0.2.1:
3391
- version "0.2.1"
3392
- resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
3393
- dependencies:
3394
- map-cache "^0.2.2"
3395
-
3396
-fresh@0.5.0:
3397
- version "0.5.0"
3398
- resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.0.tgz#f474ca5e6a9246d6fd8e0953cfa9b9c805afa78e"
3399
-
3400
-friendly-errors-webpack-plugin@^1.6.1:
3401
- version "1.6.1"
3402
- resolved "https://registry.yarnpkg.com/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.6.1.tgz#e32781c4722f546a06a9b5d7a7cfa28520375d70"
3403
- dependencies:
3404
- chalk "^1.1.3"
3405
- error-stack-parser "^2.0.0"
3406
- string-length "^1.0.1"
3407
-
3408
-front-matter@^2.1.0:
3409
- version "2.1.2"
3410
- resolved "https://registry.yarnpkg.com/front-matter/-/front-matter-2.1.2.tgz#f75983b9f2f413be658c93dfd7bd8ce4078f5cdb"
3411
- dependencies:
3412
- js-yaml "^3.4.6"
3413
-
3414
-fs-exists-sync@^0.1.0:
3415
- version "0.1.0"
3416
- resolved "https://registry.yarnpkg.com/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz#982d6893af918e72d08dec9e8673ff2b5a8d6add"
3417
-
3418
-fs-extra@^3.0.1:
3419
- version "3.0.1"
3420
- resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-3.0.1.tgz#3794f378c58b342ea7dbbb23095109c4b3b62291"
3421
- dependencies:
3422
- graceful-fs "^4.1.2"
3423
- jsonfile "^3.0.0"
3424
- universalify "^0.1.0"
3425
-
3426
-fs-extra@^4.0.1:
3427
- version "4.0.1"
3428
- resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.1.tgz#7fc0c6c8957f983f57f306a24e5b9ddd8d0dd880"
3429
- dependencies:
3430
- graceful-fs "^4.1.2"
3431
- jsonfile "^3.0.0"
3432
- universalify "^0.1.0"
3433
-
3434
-fs-extra@^4.0.2:
3435
- version "4.0.2"
3436
- resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.2.tgz#f91704c53d1b461f893452b0c307d9997647ab6b"
3437
- dependencies:
3438
- graceful-fs "^4.1.2"
3439
- jsonfile "^4.0.0"
3440
- universalify "^0.1.0"
3441
-
3442
-fs-readdir-recursive@^1.0.0:
3443
- version "1.0.0"
3444
- resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.0.0.tgz#8cd1745c8b4f8a29c8caec392476921ba195f560"
3445
-
3446
-fs.realpath@^1.0.0:
3447
- version "1.0.0"
3448
- resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
3449
-
3450
-fsevents@^1.0.0:
3451
- version "1.1.2"
3452
- resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.2.tgz#3282b713fb3ad80ede0e9fcf4611b5aa6fc033f4"
3453
- dependencies:
3454
- nan "^2.3.0"
3455
- node-pre-gyp "^0.6.36"
3456
-
3457
-fstream-ignore@^1.0.5:
3458
- version "1.0.5"
3459
- resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
3460
- dependencies:
3461
- fstream "^1.0.0"
3462
- inherits "2"
3463
- minimatch "^3.0.0"
3464
-
3465
-fstream@^1.0.0, fstream@^1.0.10, fstream@^1.0.2:
3466
- version "1.0.11"
3467
- resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.11.tgz#5c1fb1f117477114f0632a0eb4b71b3cb0fd3171"
3468
- dependencies:
3469
- graceful-fs "^4.1.2"
3470
- inherits "~2.0.0"
3471
- mkdirp ">=0.5 0"
3472
- rimraf "2"
3473
-
3474
-function-bind@^1.0.2:
3475
- version "1.1.0"
3476
- resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.0.tgz#16176714c801798e4e8f2cf7f7529467bb4a5771"
3477
-
3478
-gatsby-1-config-css-modules@^1.0.4:
3479
- version "1.0.5"
3480
- resolved "https://registry.yarnpkg.com/gatsby-1-config-css-modules/-/gatsby-1-config-css-modules-1.0.5.tgz#0e28c59d4cf5b09bd3d58051f216f40bbc436a69"
3481
- dependencies:
3482
- babel-runtime "^6.26.0"
3483
-
3484
-gatsby-link@^1.6.9:
3485
- version "1.6.17"
3486
- resolved "https://registry.yarnpkg.com/gatsby-link/-/gatsby-link-1.6.17.tgz#4182d608798b72fd4ec716f118c4d1f649b214bb"
3487
- dependencies:
3488
- babel-runtime "^6.26.0"
3489
- prop-types "^15.5.8"
3490
- ric "^1.3.0"
3491
-
3492
-gatsby-module-loader@^1.0.5:
3493
- version "1.0.6"
3494
- resolved "https://registry.yarnpkg.com/gatsby-module-loader/-/gatsby-module-loader-1.0.6.tgz#d0c4c10fa8df7a2dde1515cbc1389be186aa4a47"
3495
- dependencies:
3496
- babel-runtime "^6.26.0"
3497
- loader-utils "^0.2.16"
3498
-
3499
-gatsby-plugin-feed@^1.3.9:
3500
- version "1.3.9"
3501
- resolved "https://registry.yarnpkg.com/gatsby-plugin-feed/-/gatsby-plugin-feed-1.3.9.tgz#97c824b4dec65feec728cf27895ebff7a729f6e0"
3502
- dependencies:
3503
- babel-runtime "^6.26.0"
3504
- lodash.merge "^4.6.0"
3505
- pify "^3.0.0"
3506
- rss "^1.2.2"
3507
-
3508
-gatsby-plugin-glamor@^1.6.4:
3509
- version "1.6.7"
3510
- resolved "https://registry.yarnpkg.com/gatsby-plugin-glamor/-/gatsby-plugin-glamor-1.6.7.tgz#cb4be8536acd8ce7b35053962b8fd6cb4186e337"
3511
- dependencies:
3512
- babel-runtime "^6.26.0"
3513
- glamor "^2.20.29"
3514
-
3515
-gatsby-plugin-google-analytics@^1.0.4:
3516
- version "1.0.7"
3517
- resolved "https://registry.yarnpkg.com/gatsby-plugin-google-analytics/-/gatsby-plugin-google-analytics-1.0.7.tgz#4d83f6fba7c884552c94f54c202661855c31a59d"
3518
- dependencies:
3519
- babel-runtime "^6.26.0"
3520
-
3521
-gatsby-plugin-manifest@^1.0.4:
3522
- version "1.0.8"
3523
- resolved "https://registry.yarnpkg.com/gatsby-plugin-manifest/-/gatsby-plugin-manifest-1.0.8.tgz#8c155cd2aed54759554c25bf9efb4a2c48de6429"
3524
- dependencies:
3525
- babel-runtime "^6.26.0"
3526
- bluebird "^3.5.0"
3527
-
3528
-gatsby-plugin-netlify@^1.0.4:
3529
- version "1.0.5"
3530
- resolved "https://registry.yarnpkg.com/gatsby-plugin-netlify/-/gatsby-plugin-netlify-1.0.5.tgz#7dab7dfdd92ce95953a9bad05ca054c69eb01e83"
3531
- dependencies:
3532
- babel-runtime "^6.26.0"
3533
- fs-extra "^4.0.2"
3534
- lodash "^4.17.4"
3535
- webpack-assets-manifest "^1.0.0"
3536
-
3537
-gatsby-plugin-nprogress@^1.0.7:
3538
- version "1.0.7"
3539
- resolved "https://registry.yarnpkg.com/gatsby-plugin-nprogress/-/gatsby-plugin-nprogress-1.0.7.tgz#36cf18776d22c282d3355d32b8c212afdf1a2907"
3540
- dependencies:
3541
- babel-runtime "^6.26.0"
3542
- nprogress "^0.2.0"
3543
-
3544
-gatsby-plugin-react-helmet@^1.0.3:
3545
- version "1.0.6"
3546
- resolved "https://registry.yarnpkg.com/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-1.0.6.tgz#32431fbfd072b05453080ed304142f4747868848"
3547
- dependencies:
3548
- babel-runtime "^6.26.0"
3549
- react-helmet "^5.1.3"
3550
-
3551
-gatsby-plugin-react-next@^1.0.3:
3552
- version "1.0.4"
3553
- resolved "https://registry.yarnpkg.com/gatsby-plugin-react-next/-/gatsby-plugin-react-next-1.0.4.tgz#256e919f01d4af088564a5a975f6613c2a7d1ead"
3554
- dependencies:
3555
- babel-runtime "^6.26.0"
3556
- core-js "^2.5.1"
3557
- react "^16.0.0"
3558
- react-dom "^16.0.0"
3559
-
3560
-gatsby-plugin-sharp@^1.6.2, gatsby-plugin-sharp@^1.6.8:
3561
- version "1.6.8"
3562
- resolved "https://registry.yarnpkg.com/gatsby-plugin-sharp/-/gatsby-plugin-sharp-1.6.8.tgz#289f11f3f54c5cdd51f78f17403b8f318fd68cfa"
3563
- dependencies:
3564
- async "^2.1.2"
3565
- babel-runtime "^6.26.0"
3566
- bluebird "^3.5.0"
3567
- image-size "^0.5.1"
3568
- imagemin "^5.2.2"
3569
- imagemin-pngquant "^5.0.0"
3570
- lodash "^4.17.4"
3571
- progress "^1.1.8"
3572
- sharp "^0.17.3"
3573
-
3574
-gatsby-plugin-twitter@^1.0.10:
3575
- version "1.0.10"
3576
- resolved "https://registry.yarnpkg.com/gatsby-plugin-twitter/-/gatsby-plugin-twitter-1.0.10.tgz#cac183238442779ddbbc54fb04622c114907af17"
3577
- dependencies:
3578
- babel-runtime "^6.26.0"
3579
-
3580
-gatsby-react-router-scroll@^1.0.1:
3581
- version "1.0.1"
3582
- resolved "https://registry.yarnpkg.com/gatsby-react-router-scroll/-/gatsby-react-router-scroll-1.0.1.tgz#2e0132807273e544f05bed016645b6e2dfe08c48"
3583
- dependencies:
3584
- babel-runtime "^6.26.0"
3585
- scroll-behavior "^0.9.1"
3586
- warning "^3.0.0"
3587
-
3588
-gatsby-remark-autolink-headers@^1.4.4:
3589
- version "1.4.7"
3590
- resolved "https://registry.yarnpkg.com/gatsby-remark-autolink-headers/-/gatsby-remark-autolink-headers-1.4.7.tgz#81fbeb02e07855d1e63237031d5655ae71f5e5d5"
3591
- dependencies:
3592
- babel-runtime "^6.26.0"
3593
- github-slugger "^1.1.1"
3594
- mdast-util-to-string "^1.0.2"
3595
- unist-util-visit "^1.1.1"
3596
-
3597
-gatsby-remark-copy-linked-files@^1.5.2:
3598
- version "1.5.7"
3599
- resolved "https://registry.yarnpkg.com/gatsby-remark-copy-linked-files/-/gatsby-remark-copy-linked-files-1.5.7.tgz#59817877cb2978a6a72df62f2353033f0f8a6e35"
3600
- dependencies:
3601
- babel-runtime "^6.26.0"
3602
- cheerio "^1.0.0-rc.2"
3603
- fs-extra "^4.0.1"
3604
- is-relative-url "^2.0.0"
3605
- lodash "^4.17.4"
3606
- unist-util-visit "^1.1.1"
3607
-
3608
-gatsby-remark-images@^1.5.11:
3609
- version "1.5.13"
3610
- resolved "https://registry.yarnpkg.com/gatsby-remark-images/-/gatsby-remark-images-1.5.13.tgz#7e383cea60aa624e8775256702eaa57c0ea55515"
3611
- dependencies:
3612
- babel-runtime "^6.26.0"
3613
- cheerio "^1.0.0-rc.2"
3614
- gatsby-plugin-sharp "^1.6.8"
3615
- is-relative-url "^2.0.0"
3616
- lodash "^4.17.4"
3617
- slash "^1.0.0"
3618
- unist-util-select "^1.5.0"
3619
-
3620
-gatsby-remark-prismjs@^1.2.1:
3621
- version "1.2.8"
3622
- resolved "https://registry.yarnpkg.com/gatsby-remark-prismjs/-/gatsby-remark-prismjs-1.2.8.tgz#0ca9732c8c5034d1331f420ff75aa380fbc22c91"
3623
- dependencies:
3624
- babel-runtime "^6.26.0"
3625
- parse-numeric-range "^0.0.2"
3626
- prismjs "^1.7.0"
3627
- unist-util-visit "^1.1.1"
3628
-
3629
-gatsby-remark-responsive-iframe@^1.4.3:
3630
- version "1.4.7"
3631
- resolved "https://registry.yarnpkg.com/gatsby-remark-responsive-iframe/-/gatsby-remark-responsive-iframe-1.4.7.tgz#38a360ab8d978ee694fc42084afea8734d2dee14"
3632
- dependencies:
3633
- babel-runtime "^6.26.0"
3634
- bluebird "^3.5.0"
3635
- cheerio "^1.0.0-rc.2"
3636
- lodash "^4.17.4"
3637
- unist-util-visit "^1.1.1"
3638
-
3639
-gatsby-remark-smartypants@^1.4.3:
3640
- version "1.4.7"
3641
- resolved "https://registry.yarnpkg.com/gatsby-remark-smartypants/-/gatsby-remark-smartypants-1.4.7.tgz#2fc191b3945bc82c039069b0681ec5399db936b9"
3642
- dependencies:
3643
- babel-runtime "^6.26.0"
3644
- retext "^4.0.0"
3645
- retext-smartypants "^2.0.0"
3646
- unist-util-visit "^1.1.1"
3647
-
3648
-gatsby-source-filesystem@^1.4.4:
3649
- version "1.5.1"
3650
- resolved "https://registry.yarnpkg.com/gatsby-source-filesystem/-/gatsby-source-filesystem-1.5.1.tgz#7aae50bdd75cad01641468bc82a99976f8c9de3b"
3651
- dependencies:
3652
- babel-cli "^6.26.0"
3653
- babel-runtime "^6.26.0"
3654
- bluebird "^3.5.0"
3655
- chokidar "^1.7.0"
3656
- fs-extra "^4.0.1"
3657
- got "^7.1.0"
3658
- md5-file "^3.1.1"
3659
- mime "^1.3.6"
3660
- pretty-bytes "^4.0.2"
3661
- slash "^1.0.0"
3662
-
3663
-gatsby-transformer-remark@^1.7.2:
3664
- version "1.7.12"
3665
- resolved "https://registry.yarnpkg.com/gatsby-transformer-remark/-/gatsby-transformer-remark-1.7.12.tgz#698117cf29659404092675176cd973aa940415d6"
3666
- dependencies:
3667
- babel-runtime "^6.26.0"
3668
- bluebird "^3.5.0"
3669
- gray-matter "^2.1.0"
3670
- hast-util-to-html "^3.0.0"
3671
- lodash "^4.17.4"
3672
- mdast-util-to-hast "^2.4.0"
3673
- mdast-util-toc "^2.0.1"
3674
- remark "^7.0.1"
3675
- sanitize-html "^1.14.1"
3676
- underscore.string "^3.3.4"
3677
- unist-util-select "^1.5.0"
3678
- unist-util-visit "^1.1.1"
3679
-
3680
-gatsby-transformer-sharp@^1.6.1:
3681
- version "1.6.6"
3682
- resolved "https://registry.yarnpkg.com/gatsby-transformer-sharp/-/gatsby-transformer-sharp-1.6.6.tgz#2ad1e4e6702d6f317fb0277941fdfb8d82f06494"
3683
- dependencies:
3684
- babel-runtime "^6.26.0"
3685
- bluebird "^3.5.0"
3686
- fs-extra "^4.0.1"
3687
- image-size "^0.6.0"
3688
-
3689
-gatsby@^1.9.9:
3690
- version "1.9.49"
3691
- resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.9.49.tgz#ff934a985493e731ada7e81ec77b17dd474e3e61"
3692
- dependencies:
3693
- async "^2.1.2"
3694
- babel-code-frame "^6.22.0"
3695
- babel-core "^6.24.1"
3696
- babel-loader "^6.0.0"
3697
- babel-plugin-add-module-exports "^0.2.1"
3698
- babel-plugin-transform-object-assign "^6.8.0"
3699
- babel-polyfill "^6.23.0"
3700
- babel-preset-env "^1.6.0"
3701
- babel-preset-es2015 "^6.24.1"
3702
- babel-preset-react "^6.24.1"
3703
- babel-preset-stage-0 "^6.24.1"
3704
- babel-runtime "^6.26.0"
3705
- babel-traverse "^6.24.1"
3706
- babylon "^6.17.3"
3707
- bluebird "^3.5.0"
3708
- boom "^2.7.2"
3709
- bundle-loader "^0.5.4"
3710
- chalk "^1.1.3"
3711
- chokidar "^1.7.0"
3712
- chunk-manifest-webpack-plugin "0.1.0"
3713
- commander "^2.11.0"
3714
- common-tags "^1.4.0"
3715
- convert-hrtime "^2.0.0"
3716
- copyfiles "^1.2.0"
3717
- core-js "^2.5.0"
3718
- css-loader "^0.26.1"
3719
- debug "^2.6.0"
3720
- del "^3.0.0"
3721
- detect-port "^1.2.1"
3722
- domready "^1.0.8"
3723
- dotenv "^4.0.0"
3724
- eventemitter2 "^4.1.0"
3725
- express "^4.14.0"
3726
- express-graphql "^0.6.6"
3727
- extract-text-webpack-plugin "^1.0.1"
3728
- file-loader "^0.9.0"
3729
- flat "^2.0.1"
3730
- friendly-errors-webpack-plugin "^1.6.1"
3731
- front-matter "^2.1.0"
3732
- fs-extra "^4.0.1"
3733
- gatsby-1-config-css-modules "^1.0.4"
3734
- gatsby-module-loader "^1.0.5"
3735
- gatsby-react-router-scroll "^1.0.1"
3736
- glob "^7.1.1"
3737
- graphql "^0.10.3"
3738
- graphql-relay "^0.5.1"
3739
- graphql-skip-limit "^1.0.5"
3740
- gray-matter "^2.1.0"
3741
- hapi "^8.5.1"
3742
- history "^4.6.2"
3743
- hosted-git-info "^2.4.2"
3744
- invariant "^2.2.2"
3745
- is-relative "^0.2.1"
3746
- is-relative-url "^2.0.0"
3747
- joi "^9.1.1"
3748
- json-loader "^0.5.2"
3749
- json-stringify-safe "^5.0.1"
3750
- json5 "^0.5.0"
3751
- lodash "^4.17.4"
3752
- lodash-id "^0.14.0"
3753
- lowdb "^0.16.2"
3754
- md5-file "^3.1.1"
3755
- mime "^1.3.6"
3756
- mitt "^1.1.2"
3757
- mkdirp "^0.5.1"
3758
- moment "^2.16.0"
3759
- node-libs-browser "^2.0.0"
3760
- normalize-path "^2.1.1"
3761
- null-loader "^0.1.1"
3762
- object-assign "^4.1.0"
3763
- observable "^2.1.4"
3764
- opn "^5.1.0"
3765
- parse-filepath "^1.0.1"
3766
- path-exists "^3.0.0"
3767
- postcss-browser-reporter "^0.5.0"
3768
- postcss-cssnext "^2.8.0"
3769
- postcss-import "^8.2.0"
3770
- postcss-loader "^0.13.0"
3771
- postcss-reporter "^1.4.1"
3772
- pretty-error "^2.1.1"
3773
- raw-loader "^0.5.1"
3774
- react "^15.6.0"
3775
- react-dom "^15.6.0"
3776
- react-hot-loader "^3.0.0-beta.6"
3777
- react-router "^4.1.1"
3778
- react-router-dom "^4.1.1"
3779
- redux "^3.6.0"
3780
- relay-compiler "1.3.0"
3781
- remote-redux-devtools "^0.5.7"
3782
- resolve-cwd "^2.0.0"
3783
- sift "^3.2.6"
3784
- slash "^1.0.0"
3785
- socket.io "^2.0.3"
3786
- source-map "^0.5.7"
3787
- stack-trace "^0.0.10"
3788
- static-site-generator-webpack-plugin "^3.4.1"
3789
- string-similarity "^1.2.0"
3790
- style-loader "^0.13.0"
3791
- tracer "^0.8.9"
3792
- type-of "^2.0.1"
3793
- underscore.string "^3.3.4"
3794
- url-loader "^0.5.7"
3795
- webpack "^1.13.3"
3796
- webpack-configurator "^0.3.0"
3797
- webpack-dev-middleware "^1.8.4"
3798
- webpack-dev-server "^1.16.1"
3799
- webpack-hot-middleware "^2.13.2"
3800
- webpack-md5-hash "0.0.5"
3801
- webpack-stats-plugin "^0.1.4"
3802
- webpack-validator "^2.2.7"
3803
- yaml-loader "^0.4.0"
3804
- yurnalist "^0.1.10"
3805
-
3806
-gauge@~1.2.5:
3807
- version "1.2.7"
3808
- resolved "https://registry.yarnpkg.com/gauge/-/gauge-1.2.7.tgz#e9cec5483d3d4ee0ef44b60a7d99e4935e136d93"
3809
- dependencies:
3810
- ansi "^0.3.0"
3811
- has-unicode "^2.0.0"
3812
- lodash.pad "^4.1.0"
3813
- lodash.padend "^4.1.0"
3814
- lodash.padstart "^4.1.0"
3815
-
3816
-gauge@~2.7.3:
3817
- version "2.7.4"
3818
- resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
3819
- dependencies:
3820
- aproba "^1.0.3"
3821
- console-control-strings "^1.0.0"
3822
- has-unicode "^2.0.0"
3823
- object-assign "^4.1.0"
3824
- signal-exit "^3.0.0"
3825
- string-width "^1.0.1"
3826
- strip-ansi "^3.0.1"
3827
- wide-align "^1.1.0"
3828
-
3829
-get-caller-file@^1.0.1:
3830
- version "1.0.2"
3831
- resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
3832
-
3833
-get-params@^0.1.2:
3834
- version "0.1.2"
3835
- resolved "https://registry.yarnpkg.com/get-params/-/get-params-0.1.2.tgz#bae0dfaba588a0c60d7834c0d8dc2ff60eeef2fe"
3836
-
3837
-get-proxy@^1.0.1:
3838
- version "1.1.0"
3839
- resolved "https://registry.yarnpkg.com/get-proxy/-/get-proxy-1.1.0.tgz#894854491bc591b0f147d7ae570f5c678b7256eb"
3840
- dependencies:
3841
- rc "^1.1.2"
3842
-
3843
-get-stdin@^4.0.1:
3844
- version "4.0.1"
3845
- resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
3846
-
3847
-get-stream@^2.2.0:
3848
- version "2.3.1"
3849
- resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-2.3.1.tgz#5f38f93f346009666ee0150a054167f91bdd95de"
3850
- dependencies:
3851
- object-assign "^4.0.1"
3852
- pinkie-promise "^2.0.0"
3853
-
3854
-get-stream@^3.0.0:
3855
- version "3.0.0"
3856
- resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
3857
-
3858
-get-value@^2.0.3, get-value@^2.0.6:
3859
- version "2.0.6"
3860
- resolved "https://registry.yarnpkg.com/get-value/-/get-value-2.0.6.tgz#dc15ca1c672387ca76bd37ac0a395ba2042a2c28"
3861
-
3862
-getpass@^0.1.1:
3863
- version "0.1.7"
3864
- resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
3865
- dependencies:
3866
- assert-plus "^1.0.0"
3867
-
3868
-gh-pages@^1.0.0:
3869
- version "1.0.0"
3870
- resolved "https://registry.yarnpkg.com/gh-pages/-/gh-pages-1.0.0.tgz#4a46f4c25439f7a2b7e6835504d4a49e949f04ca"
3871
- dependencies:
3872
- async "2.1.4"
3873
- base64url "^2.0.0"
3874
- commander "2.9.0"
3875
- fs-extra "^3.0.1"
3876
- globby "^6.1.0"
3877
- graceful-fs "4.1.11"
3878
- rimraf "^2.5.4"
3879
-
3880
-github-slugger@^1.1.1:
3881
- version "1.1.3"
3882
- resolved "https://registry.yarnpkg.com/github-slugger/-/github-slugger-1.1.3.tgz#314a6e759a18c2b0cc5760d512ccbab549c549a7"
3883
- dependencies:
3884
- emoji-regex ">=6.0.0 <=6.1.1"
3885
-
3886
-glamor@^2.20.29, glamor@^2.20.40:
3887
- version "2.20.40"
3888
- resolved "https://registry.yarnpkg.com/glamor/-/glamor-2.20.40.tgz#f606660357b7cf18dface731ad1a2cfa93817f05"
3889
- dependencies:
3890
- fbjs "^0.8.12"
3891
- inline-style-prefixer "^3.0.6"
3892
- object-assign "^4.1.1"
3893
- prop-types "^15.5.10"
3894
- through "^2.3.8"
3895
-
3896
-glob-base@^0.3.0:
3897
- version "0.3.0"
3898
- resolved "https://registry.yarnpkg.com/glob-base/-/glob-base-0.3.0.tgz#dbb164f6221b1c0b1ccf82aea328b497df0ea3c4"
3899
- dependencies:
3900
- glob-parent "^2.0.0"
3901
- is-glob "^2.0.0"
3902
-
3903
-glob-parent@^2.0.0:
3904
- version "2.0.0"
3905
- resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
3906
- dependencies:
3907
- is-glob "^2.0.0"
3908
-
3909
-glob-parent@^3.0.0, glob-parent@^3.1.0:
3910
- version "3.1.0"
3911
- resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
3912
- dependencies:
3913
- is-glob "^3.1.0"
3914
- path-dirname "^1.0.0"
3915
-
3916
-glob-stream@^5.3.2:
3917
- version "5.3.5"
3918
- resolved "https://registry.yarnpkg.com/glob-stream/-/glob-stream-5.3.5.tgz#a55665a9a8ccdc41915a87c701e32d4e016fad22"
3919
- dependencies:
3920
- extend "^3.0.0"
3921
- glob "^5.0.3"
3922
- glob-parent "^3.0.0"
3923
- micromatch "^2.3.7"
3924
- ordered-read-streams "^0.3.0"
3925
- through2 "^0.6.0"
3926
- to-absolute-glob "^0.1.1"
3927
- unique-stream "^2.0.2"
3928
-
3929
-glob-to-regexp@^0.3.0:
3930
- version "0.3.0"
3931
- resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
3932
-
3933
-glob@5.0.x, glob@^5.0.3:
3934
- version "5.0.15"
3935
- resolved "https://registry.yarnpkg.com/glob/-/glob-5.0.15.tgz#1bc936b9e02f4a603fcc222ecf7633d30b8b93b1"
3936
- dependencies:
3937
- inflight "^1.0.4"
3938
- inherits "2"
3939
- minimatch "2 || 3"
3940
- once "^1.3.0"
3941
- path-is-absolute "^1.0.0"
3942
-
3943
-glob@^6.0.1:
3944
- version "6.0.4"
3945
- resolved "https://registry.yarnpkg.com/glob/-/glob-6.0.4.tgz#0f08860f6a155127b2fadd4f9ce24b1aab6e4d22"
3946
- dependencies:
3947
- inflight "^1.0.4"
3948
- inherits "2"
3949
- minimatch "2 || 3"
3950
- once "^1.3.0"
3951
- path-is-absolute "^1.0.0"
3952
-
3953
-glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2:
3954
- version "7.1.2"
3955
- resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
3956
- dependencies:
3957
- fs.realpath "^1.0.0"
3958
- inflight "^1.0.4"
3959
- inherits "2"
3960
- minimatch "^3.0.4"
3961
- once "^1.3.0"
3962
- path-is-absolute "^1.0.0"
3963
-
3964
-global-modules@^0.2.3:
3965
- version "0.2.3"
3966
- resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-0.2.3.tgz#ea5a3bed42c6d6ce995a4f8a1269b5dae223828d"
3967
- dependencies:
3968
- global-prefix "^0.1.4"
3969
- is-windows "^0.2.0"
3970
-
3971
-global-prefix@^0.1.4:
3972
- version "0.1.5"
3973
- resolved "https://registry.yarnpkg.com/global-prefix/-/global-prefix-0.1.5.tgz#8d3bc6b8da3ca8112a160d8d496ff0462bfef78f"
3974
- dependencies:
3975
- homedir-polyfill "^1.0.0"
3976
- ini "^1.3.4"
3977
- is-windows "^0.2.0"
3978
- which "^1.2.12"
3979
-
3980
-global@^4.3.0:
3981
- version "4.3.2"
3982
- resolved "https://registry.yarnpkg.com/global/-/global-4.3.2.tgz#e76989268a6c74c38908b1305b10fc0e394e9d0f"
3983
- dependencies:
3984
- min-document "^2.19.0"
3985
- process "~0.5.1"
3986
-
3987
-globals@^9.0.0, globals@^9.18.0:
3988
- version "9.18.0"
3989
- resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
3990
-
3991
-globby@^6.1.0:
3992
- version "6.1.0"
3993
- resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
3994
- dependencies:
3995
- array-union "^1.0.1"
3996
- glob "^7.0.3"
3997
- object-assign "^4.0.1"
3998
- pify "^2.0.0"
3999
- pinkie-promise "^2.0.0"
4000
-
4001
-glogg@^1.0.0:
4002
- version "1.0.0"
4003
- resolved "https://registry.yarnpkg.com/glogg/-/glogg-1.0.0.tgz#7fe0f199f57ac906cf512feead8f90ee4a284fc5"
4004
- dependencies:
4005
- sparkles "^1.0.0"
4006
-
4007
-good-listener@^1.2.2:
4008
- version "1.2.2"
4009
- resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
4010
- dependencies:
4011
- delegate "^3.1.2"
4012
-
4013
-got@^5.0.0:
4014
- version "5.7.1"
4015
- resolved "https://registry.yarnpkg.com/got/-/got-5.7.1.tgz#5f81635a61e4a6589f180569ea4e381680a51f35"
4016
- dependencies:
4017
- create-error-class "^3.0.1"
4018
- duplexer2 "^0.1.4"
4019
- is-redirect "^1.0.0"
4020
- is-retry-allowed "^1.0.0"
4021
- is-stream "^1.0.0"
4022
- lowercase-keys "^1.0.0"
4023
- node-status-codes "^1.0.0"
4024
- object-assign "^4.0.1"
4025
- parse-json "^2.1.0"
4026
- pinkie-promise "^2.0.0"
4027
- read-all-stream "^3.0.0"
4028
- readable-stream "^2.0.5"
4029
- timed-out "^3.0.0"
4030
- unzip-response "^1.0.2"
4031
- url-parse-lax "^1.0.0"
4032
-
4033
-got@^6.7.1:
4034
- version "6.7.1"
4035
- resolved "https://registry.yarnpkg.com/got/-/got-6.7.1.tgz#240cd05785a9a18e561dc1b44b41c763ef1e8db0"
4036
- dependencies:
4037
- create-error-class "^3.0.0"
4038
- duplexer3 "^0.1.4"
4039
- get-stream "^3.0.0"
4040
- is-redirect "^1.0.0"
4041
- is-retry-allowed "^1.0.0"
4042
- is-stream "^1.0.0"
4043
- lowercase-keys "^1.0.0"
4044
- safe-buffer "^5.0.1"
4045
- timed-out "^4.0.0"
4046
- unzip-response "^2.0.1"
4047
- url-parse-lax "^1.0.0"
4048
-
4049
-got@^7.1.0:
4050
- version "7.1.0"
4051
- resolved "https://registry.yarnpkg.com/got/-/got-7.1.0.tgz#05450fd84094e6bbea56f451a43a9c289166385a"
4052
- dependencies:
4053
- decompress-response "^3.2.0"
4054
- duplexer3 "^0.1.4"
4055
- get-stream "^3.0.0"
4056
- is-plain-obj "^1.1.0"
4057
- is-retry-allowed "^1.0.0"
4058
- is-stream "^1.0.0"
4059
- isurl "^1.0.0-alpha5"
4060
- lowercase-keys "^1.0.0"
4061
- p-cancelable "^0.3.0"
4062
- p-timeout "^1.1.1"
4063
- safe-buffer "^5.0.1"
4064
- timed-out "^4.0.0"
4065
- url-parse-lax "^1.0.0"
4066
- url-to-options "^1.0.1"
4067
-
4068
-graceful-fs@4.1.11, graceful-fs@^4.0.0, graceful-fs@^4.1.2, graceful-fs@^4.1.3, graceful-fs@^4.1.4, graceful-fs@^4.1.6:
4069
- version "4.1.11"
4070
- resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
4071
-
4072
-"graceful-readlink@>= 1.0.0":
4073
- version "1.0.1"
4074
- resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
4075
-
4076
-graphql-relay@^0.5.1:
4077
- version "0.5.2"
4078
- resolved "https://registry.yarnpkg.com/graphql-relay/-/graphql-relay-0.5.2.tgz#40ff714efd60c2cd89e0bcc79e2afa6d87fa8673"
4079
-
4080
-graphql-skip-limit@^1.0.5:
4081
- version "1.0.5"
4082
- resolved "https://registry.yarnpkg.com/graphql-skip-limit/-/graphql-skip-limit-1.0.5.tgz#88d7a513340c4afb16c87fb37f1987eeae84933f"
4083
- dependencies:
4084
- babel-runtime "^6.26.0"
4085
-
4086
-graphql@^0.10.3, graphql@^0.10.5:
4087
- version "0.10.5"
4088
- resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.10.5.tgz#c9be17ca2bdfdbd134077ffd9bbaa48b8becd298"
4089
- dependencies:
4090
- iterall "^1.1.0"
4091
-
4092
-gray-matter@^2.1.0:
4093
- version "2.1.1"
4094
- resolved "https://registry.yarnpkg.com/gray-matter/-/gray-matter-2.1.1.tgz#3042d9adec2a1ded6a7707a9ed2380f8a17a430e"
4095
- dependencies:
4096
- ansi-red "^0.1.1"
4097
- coffee-script "^1.12.4"
4098
- extend-shallow "^2.0.1"
4099
- js-yaml "^3.8.1"
4100
- toml "^2.3.2"
4101
-
4102
-gulp-decompress@^1.2.0:
4103
- version "1.2.0"
4104
- resolved "https://registry.yarnpkg.com/gulp-decompress/-/gulp-decompress-1.2.0.tgz#8eeb65a5e015f8ed8532cafe28454960626f0dc7"
4105
- dependencies:
4106
- archive-type "^3.0.0"
4107
- decompress "^3.0.0"
4108
- gulp-util "^3.0.1"
4109
- readable-stream "^2.0.2"
4110
-
4111
-gulp-rename@^1.2.0:
4112
- version "1.2.2"
4113
- resolved "https://registry.yarnpkg.com/gulp-rename/-/gulp-rename-1.2.2.tgz#3ad4428763f05e2764dec1c67d868db275687817"
4114
-
4115
-gulp-sourcemaps@1.6.0:
4116
- version "1.6.0"
4117
- resolved "https://registry.yarnpkg.com/gulp-sourcemaps/-/gulp-sourcemaps-1.6.0.tgz#b86ff349d801ceb56e1d9e7dc7bbcb4b7dee600c"
4118
- dependencies:
4119
- convert-source-map "^1.1.1"
4120
- graceful-fs "^4.1.2"
4121
- strip-bom "^2.0.0"
4122
- through2 "^2.0.0"
4123
- vinyl "^1.0.0"
4124
-
4125
-gulp-util@^3.0.1:
4126
- version "3.0.8"
4127
- resolved "https://registry.yarnpkg.com/gulp-util/-/gulp-util-3.0.8.tgz#0054e1e744502e27c04c187c3ecc505dd54bbb4f"
4128
- dependencies:
4129
- array-differ "^1.0.0"
4130
- array-uniq "^1.0.2"
4131
- beeper "^1.0.0"
4132
- chalk "^1.0.0"
4133
- dateformat "^2.0.0"
4134
- fancy-log "^1.1.0"
4135
- gulplog "^1.0.0"
4136
- has-gulplog "^0.1.0"
4137
- lodash._reescape "^3.0.0"
4138
- lodash._reevaluate "^3.0.0"
4139
- lodash._reinterpolate "^3.0.0"
4140
- lodash.template "^3.0.0"
4141
- minimist "^1.1.0"
4142
- multipipe "^0.1.2"
4143
- object-assign "^3.0.0"
4144
- replace-ext "0.0.1"
4145
- through2 "^2.0.0"
4146
- vinyl "^0.5.0"
4147
-
4148
-gulplog@^1.0.0:
4149
- version "1.0.0"
4150
- resolved "https://registry.yarnpkg.com/gulplog/-/gulplog-1.0.0.tgz#e28c4d45d05ecbbed818363ce8f9c5926229ffe5"
4151
- dependencies:
4152
- glogg "^1.0.0"
4153
-
4154
-h2o2@4.x.x:
4155
- version "4.0.2"
4156
- resolved "https://registry.yarnpkg.com/h2o2/-/h2o2-4.0.2.tgz#87cb960dc0f5b495964fa928253e6cf13ba22486"
4157
- dependencies:
4158
- boom "2.x.x"
4159
- hoek "2.x.x"
4160
- joi "6.x.x"
4161
- wreck "6.x.x"
4162
-
4163
-hapi@^8.5.1:
4164
- version "8.8.1"
4165
- resolved "https://registry.yarnpkg.com/hapi/-/hapi-8.8.1.tgz#c7066fe9322e41b9e0e08315fd79f2d9985fa2ea"
4166
- dependencies:
4167
- accept "1.x.x"
4168
- ammo "1.x.x"
4169
- boom "^2.5.x"
4170
- call "2.x.x"
4171
- catbox "^4.2.x"
4172
- catbox-memory "1.x.x"
4173
- cryptiles "2.x.x"
4174
- h2o2 "4.x.x"
4175
- heavy "3.x.x"
4176
- hoek "^2.14.x"
4177
- inert "2.x.x"
4178
- iron "2.x.x"
4179
- items "1.x.x"
4180
- joi "6.x.x"
4181
- kilt "^1.1.x"
4182
- mimos "2.x.x"
4183
- peekaboo "1.x.x"
4184
- qs "4.x.x"
4185
- shot "1.x.x"
4186
- statehood "2.x.x"
4187
- subtext "1.x.x"
4188
- topo "1.x.x"
4189
- vision "2.x.x"
4190
-
4191
-har-schema@^1.0.5:
4192
- version "1.0.5"
4193
- resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-1.0.5.tgz#d263135f43307c02c602afc8fe95970c0151369e"
4194
-
4195
-har-validator@~4.2.1:
4196
- version "4.2.1"
4197
- resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
4198
- dependencies:
4199
- ajv "^4.9.1"
4200
- har-schema "^1.0.5"
4201
-
4202
-has-ansi@^2.0.0:
4203
- version "2.0.0"
4204
- resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
4205
- dependencies:
4206
- ansi-regex "^2.0.0"
4207
-
4208
-has-binary2@~1.0.2:
4209
- version "1.0.2"
4210
- resolved "https://registry.yarnpkg.com/has-binary2/-/has-binary2-1.0.2.tgz#e83dba49f0b9be4d026d27365350d9f03f54be98"
4211
- dependencies:
4212
- isarray "2.0.1"
4213
-
4214
-has-cors@1.1.0:
4215
- version "1.1.0"
4216
- resolved "https://registry.yarnpkg.com/has-cors/-/has-cors-1.1.0.tgz#5e474793f7ea9843d1bb99c23eef49ff126fff39"
4217
-
4218
-has-flag@^1.0.0:
4219
- version "1.0.0"
4220
- resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
4221
-
4222
-has-flag@^2.0.0:
4223
- version "2.0.0"
4224
- resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-2.0.0.tgz#e8207af1cc7b30d446cc70b734b5e8be18f88d51"
4225
-
4226
-has-gulplog@^0.1.0:
4227
- version "0.1.0"
4228
- resolved "https://registry.yarnpkg.com/has-gulplog/-/has-gulplog-0.1.0.tgz#6414c82913697da51590397dafb12f22967811ce"
4229
- dependencies:
4230
- sparkles "^1.0.0"
4231
-
4232
-has-symbol-support-x@^1.4.1:
4233
- version "1.4.1"
4234
- resolved "https://registry.yarnpkg.com/has-symbol-support-x/-/has-symbol-support-x-1.4.1.tgz#66ec2e377e0c7d7ccedb07a3a84d77510ff1bc4c"
4235
-
4236
-has-to-string-tag-x@^1.2.0:
4237
- version "1.4.1"
4238
- resolved "https://registry.yarnpkg.com/has-to-string-tag-x/-/has-to-string-tag-x-1.4.1.tgz#a045ab383d7b4b2012a00148ab0aa5f290044d4d"
4239
- dependencies:
4240
- has-symbol-support-x "^1.4.1"
4241
-
4242
-has-unicode@^2.0.0:
4243
- version "2.0.1"
4244
- resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
4245
-
4246
-has-value@^0.3.1:
4247
- version "0.3.1"
4248
- resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
4249
- dependencies:
4250
- get-value "^2.0.3"
4251
- has-values "^0.1.4"
4252
- isobject "^2.0.0"
4253
-
4254
-has-value@^1.0.0:
4255
- version "1.0.0"
4256
- resolved "https://registry.yarnpkg.com/has-value/-/has-value-1.0.0.tgz#18b281da585b1c5c51def24c930ed29a0be6b177"
4257
- dependencies:
4258
- get-value "^2.0.6"
4259
- has-values "^1.0.0"
4260
- isobject "^3.0.0"
4261
-
4262
-has-values@^0.1.4:
4263
- version "0.1.4"
4264
- resolved "https://registry.yarnpkg.com/has-values/-/has-values-0.1.4.tgz#6d61de95d91dfca9b9a02089ad384bff8f62b771"
4265
-
4266
-has-values@^1.0.0:
4267
- version "1.0.0"
4268
- resolved "https://registry.yarnpkg.com/has-values/-/has-values-1.0.0.tgz#95b0b63fec2146619a6fe57fe75628d5a39efe4f"
4269
- dependencies:
4270
- is-number "^3.0.0"
4271
- kind-of "^4.0.0"
4272
-
4273
-has@^1.0.1:
4274
- version "1.0.1"
4275
- resolved "https://registry.yarnpkg.com/has/-/has-1.0.1.tgz#8461733f538b0837c9361e39a9ab9e9704dc2f28"
4276
- dependencies:
4277
- function-bind "^1.0.2"
4278
-
4279
-hash-base@^2.0.0:
4280
- version "2.0.2"
4281
- resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-2.0.2.tgz#66ea1d856db4e8a5470cadf6fce23ae5244ef2e1"
4282
- dependencies:
4283
- inherits "^2.0.1"
4284
-
4285
-hash.js@^1.0.0, hash.js@^1.0.3:
4286
- version "1.1.3"
4287
- resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.3.tgz#340dedbe6290187151c1ea1d777a3448935df846"
4288
- dependencies:
4289
- inherits "^2.0.3"
4290
- minimalistic-assert "^1.0.0"
4291
-
4292
-hast-util-is-element@^1.0.0:
4293
- version "1.0.0"
4294
- resolved "https://registry.yarnpkg.com/hast-util-is-element/-/hast-util-is-element-1.0.0.tgz#3f7216978b2ae14d98749878782675f33be3ce00"
4295
-
4296
-hast-util-to-html@^3.0.0:
4297
- version "3.0.1"
4298
- resolved "https://registry.yarnpkg.com/hast-util-to-html/-/hast-util-to-html-3.0.1.tgz#9cdefb69772888db5f4253d08e1fcd533b716ba8"
4299
- dependencies:
4300
- ccount "^1.0.0"
4301
- comma-separated-tokens "^1.0.1"
4302
- hast-util-is-element "^1.0.0"
4303
- hast-util-whitespace "^1.0.0"
4304
- html-void-elements "^1.0.0"
4305
- kebab-case "^1.0.0"
4306
- property-information "^3.1.0"
4307
- space-separated-tokens "^1.0.0"
4308
- stringify-entities "^1.0.1"
4309
- unist-util-is "^2.0.0"
4310
- xtend "^4.0.1"
4311
-
4312
-hast-util-whitespace@^1.0.0:
4313
- version "1.0.0"
4314
- resolved "https://registry.yarnpkg.com/hast-util-whitespace/-/hast-util-whitespace-1.0.0.tgz#bd096919625d2936e1ff17bc4df7fd727f17ece9"
4315
-
4316
-hawk@~3.1.3:
4317
- version "3.1.3"
4318
- resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
4319
- dependencies:
4320
- boom "2.x.x"
4321
- cryptiles "2.x.x"
4322
- hoek "2.x.x"
4323
- sntp "1.x.x"
4324
-
4325
-heavy@3.x.x:
4326
- version "3.0.1"
4327
- resolved "https://registry.yarnpkg.com/heavy/-/heavy-3.0.1.tgz#f2867e6e3515bf83ab1a8bb1e73e5d28e85ab3cd"
4328
- dependencies:
4329
- boom "2.x.x"
4330
- hoek "2.x.x"
4331
- joi "6.x.x"
4332
-
4333
-hex2rgba@^0.0.1:
4334
- version "0.0.1"
4335
- resolved "https://registry.yarnpkg.com/hex2rgba/-/hex2rgba-0.0.1.tgz#8701ba1c6ec02c204504158407c1c4b47a9336ed"
4336
-
4337
-history@^4.5.1, history@^4.6.0, history@^4.6.2:
4338
- version "4.6.3"
4339
- resolved "https://registry.yarnpkg.com/history/-/history-4.6.3.tgz#6d723a8712c581d6bef37e8c26f4aedc6eb86967"
4340
- dependencies:
4341
- invariant "^2.2.1"
4342
- loose-envify "^1.2.0"
4343
- resolve-pathname "^2.0.0"
4344
- value-equal "^0.2.0"
4345
- warning "^3.0.0"
4346
-
4347
-hmac-drbg@^1.0.0:
4348
- version "1.0.1"
4349
- resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
4350
- dependencies:
4351
- hash.js "^1.0.3"
4352
- minimalistic-assert "^1.0.0"
4353
- minimalistic-crypto-utils "^1.0.1"
4354
-
4355
-hoek@2.x.x, hoek@^2.14.x, hoek@^2.9.x:
4356
- version "2.16.3"
4357
- resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
4358
-
4359
-hoek@4.x.x:
4360
- version "4.1.1"
4361
- resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.1.1.tgz#9cc573ffba2b7b408fb5e9c2a13796be94cddce9"
4362
-
4363
-hoist-non-react-statics@^1.2.0:
4364
- version "1.2.0"
4365
- resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"
4366
-
4367
-home-or-tmp@^2.0.0:
4368
- version "2.0.0"
4369
- resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
4370
- dependencies:
4371
- os-homedir "^1.0.0"
4372
- os-tmpdir "^1.0.1"
4373
-
4374
-homedir-polyfill@^1.0.0, homedir-polyfill@^1.0.1:
4375
- version "1.0.1"
4376
- resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.1.tgz#4c2bbc8a758998feebf5ed68580f76d46768b4bc"
4377
- dependencies:
4378
- parse-passwd "^1.0.0"
4379
-
4380
-hosted-git-info@^2.1.4, hosted-git-info@^2.4.2:
4381
- version "2.5.0"
4382
- resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.5.0.tgz#6d60e34b3abbc8313062c3b798ef8d901a07af3c"
4383
-
4384
-html-comment-regex@^1.1.0:
4385
- version "1.1.1"
4386
- resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e"
4387
-
4388
-html-entities@^1.2.0:
4389
- version "1.2.1"
4390
- resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
4391
-
4392
-html-void-elements@^1.0.0:
4393
- version "1.0.2"
4394
- resolved "https://registry.yarnpkg.com/html-void-elements/-/html-void-elements-1.0.2.tgz#9d22e0ca32acc95b3f45b8d5b4f6fbdc05affd55"
4395
-
4396
-htmlparser2@^3.9.0, htmlparser2@^3.9.1:
4397
- version "3.9.2"
4398
- resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.9.2.tgz#1bdf87acca0f3f9e53fa4fcceb0f4b4cbb00b338"
4399
- dependencies:
4400
- domelementtype "^1.3.0"
4401
- domhandler "^2.3.0"
4402
- domutils "^1.5.1"
4403
- entities "^1.1.1"
4404
- inherits "^2.0.1"
4405
- readable-stream "^2.0.2"
4406
-
4407
-htmlparser2@~3.3.0:
4408
- version "3.3.0"
4409
- resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.3.0.tgz#cc70d05a59f6542e43f0e685c982e14c924a9efe"
4410
- dependencies:
4411
- domelementtype "1"
4412
- domhandler "2.1"
4413
- domutils "1.1"
4414
- readable-stream "1.0"
4415
-
4416
-http-errors@^1.3.0, http-errors@~1.6.1:
4417
- version "1.6.1"
4418
- resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.1.tgz#5f8b8ed98aca545656bf572997387f904a722257"
4419
- dependencies:
4420
- depd "1.1.0"
4421
- inherits "2.0.3"
4422
- setprototypeof "1.0.3"
4423
- statuses ">= 1.3.1 < 2"
4424
-
4425
-http-proxy-middleware@~0.17.1:
4426
- version "0.17.4"
4427
- resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.17.4.tgz#642e8848851d66f09d4f124912846dbaeb41b833"
4428
- dependencies:
4429
- http-proxy "^1.16.2"
4430
- is-glob "^3.1.0"
4431
- lodash "^4.17.2"
4432
- micromatch "^2.3.11"
4433
-
4434
-http-proxy@^1.16.2:
4435
- version "1.16.2"
4436
- resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.16.2.tgz#06dff292952bf64dbe8471fa9df73066d4f37742"
4437
- dependencies:
4438
- eventemitter3 "1.x.x"
4439
- requires-port "1.x.x"
4440
-
4441
-http-signature@~1.1.0:
4442
- version "1.1.1"
4443
- resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.1.1.tgz#df72e267066cd0ac67fb76adf8e134a8fbcf91bf"
4444
- dependencies:
4445
- assert-plus "^0.2.0"
4446
- jsprim "^1.2.2"
4447
- sshpk "^1.7.0"
4448
-
4449
-https-browserify@0.0.1:
4450
- version "0.0.1"
4451
- resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
4452
-
4453
-hyphenate-style-name@^1.0.2:
4454
- version "1.0.2"
4455
- resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz#31160a36930adaf1fc04c6074f7eb41465d4ec4b"
4456
-
4457
-iconv-lite@0.4.15:
4458
- version "0.4.15"
4459
- resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb"
4460
-
4461
-iconv-lite@^0.4.17, iconv-lite@~0.4.13:
4462
- version "0.4.18"
4463
- resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.18.tgz#23d8656b16aae6742ac29732ea8f0336a4789cf2"
4464
-
4465
-icss-replace-symbols@^1.1.0:
4466
- version "1.1.0"
4467
- resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
4468
-
4469
-ieee754@^1.1.4:
4470
- version "1.1.8"
4471
- resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
4472
-
4473
-image-size@^0.5.1:
4474
- version "0.5.5"
4475
- resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
4476
-
4477
-image-size@^0.6.0:
4478
- version "0.6.1"
4479
- resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.6.1.tgz#98122a562d59dcc097ef1b2c8191866eb8f5d663"
4480
-
4481
-imagemin-pngquant@^5.0.0:
4482
- version "5.0.1"
4483
- resolved "https://registry.yarnpkg.com/imagemin-pngquant/-/imagemin-pngquant-5.0.1.tgz#d8a329da553afa226b11ce62debe0b7e37b439e6"
4484
- dependencies:
4485
- exec-buffer "^3.0.0"
4486
- is-png "^1.0.0"
4487
- pngquant-bin "^3.0.0"
4488
-
4489
-imagemin@^5.2.2:
4490
- version "5.3.1"
4491
- resolved "https://registry.yarnpkg.com/imagemin/-/imagemin-5.3.1.tgz#f19c2eee1e71ba6c6558c515f9fc96680189a6d4"
4492
- dependencies:
4493
- file-type "^4.1.0"
4494
- globby "^6.1.0"
4495
- make-dir "^1.0.0"
4496
- p-pipe "^1.1.0"
4497
- pify "^2.3.0"
4498
- replace-ext "^1.0.0"
4499
-
4500
-immutable@^3.8.1:
4501
- version "3.8.1"
4502
- resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.1.tgz#200807f11ab0f72710ea485542de088075f68cd2"
4503
-
4504
-indent-string@^2.1.0:
4505
- version "2.1.0"
4506
- resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80"
4507
- dependencies:
4508
- repeating "^2.0.0"
4509
-
4510
-indexes-of@^1.0.1:
4511
- version "1.0.1"
4512
- resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
4513
-
4514
-indexof@0.0.1:
4515
- version "0.0.1"
4516
- resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
4517
-
4518
-inert@2.x.x:
4519
- version "2.1.6"
4520
- resolved "https://registry.yarnpkg.com/inert/-/inert-2.1.6.tgz#8f1d74bfeca59a098bd3ee0dc17b648b7ef1e3da"
4521
- dependencies:
4522
- ammo "1.x.x"
4523
- boom "2.x.x"
4524
- hoek "2.x.x"
4525
- items "1.x.x"
4526
- joi "6.x.x"
4527
- lru-cache "2.6.x"
4528
-
4529
-inflight@^1.0.4:
4530
- version "1.0.6"
4531
- resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
4532
- dependencies:
4533
- once "^1.3.0"
4534
- wrappy "1"
4535
-
4536
-inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.0, inherits@~2.0.1, inherits@~2.0.3:
4537
- version "2.0.3"
4538
- resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
4539
-
4540
-inherits@2.0.1:
4541
- version "2.0.1"
4542
- resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
4543
-
4544
-ini@^1.3.4, ini@~1.3.0:
4545
- version "1.3.4"
4546
- resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
4547
-
4548
-inline-style-prefixer@^3.0.6:
4549
- version "3.0.7"
4550
- resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-3.0.7.tgz#0ccc92e5902fe6e0d28d975c4258443f880615f8"
4551
- dependencies:
4552
- bowser "^1.6.0"
4553
- css-in-js-utils "^1.0.3"
4554
-
4555
-inquirer@^3.0.1:
4556
- version "3.1.1"
4557
- resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.1.1.tgz#87621c4fba4072f48a8dd71c9f9df6f100b2d534"
4558
- dependencies:
4559
- ansi-escapes "^2.0.0"
4560
- chalk "^1.0.0"
4561
- cli-cursor "^2.1.0"
4562
- cli-width "^2.0.0"
4563
- external-editor "^2.0.4"
4564
- figures "^2.0.0"
4565
- lodash "^4.3.0"
4566
- mute-stream "0.0.7"
4567
- run-async "^2.2.0"
4568
- rx-lite "^4.0.8"
4569
- rx-lite-aggregates "^4.0.8"
4570
- string-width "^2.0.0"
4571
- strip-ansi "^3.0.0"
4572
- through "^2.3.6"
4573
-
4574
-interpret@^0.6.4:
4575
- version "0.6.6"
4576
- resolved "https://registry.yarnpkg.com/interpret/-/interpret-0.6.6.tgz#fecd7a18e7ce5ca6abfb953e1f86213a49f1625b"
4577
-
4578
-interpret@^1.0.0:
4579
- version "1.0.3"
4580
- resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.3.tgz#cbc35c62eeee73f19ab7b10a801511401afc0f90"
4581
-
4582
-invariant@^2.2.0, invariant@^2.2.1, invariant@^2.2.2:
4583
- version "2.2.2"
4584
- resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
4585
- dependencies:
4586
- loose-envify "^1.0.0"
4587
-
4588
-invert-kv@^1.0.0:
4589
- version "1.0.0"
4590
- resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-1.0.0.tgz#104a8e4aaca6d3d8cd157a8ef8bfab2d7a3ffdb6"
4591
-
4592
-ip-regex@^1.0.1:
4593
- version "1.0.3"
4594
- resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-1.0.3.tgz#dc589076f659f419c222039a33316f1c7387effd"
4595
-
4596
-ipaddr.js@1.3.0:
4597
- version "1.3.0"
4598
- resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.3.0.tgz#1e03a52fdad83a8bbb2b25cbf4998b4cffcd3dec"
4599
-
4600
-iron@2.x.x:
4601
- version "2.1.3"
4602
- resolved "https://registry.yarnpkg.com/iron/-/iron-2.1.3.tgz#71b8f357d806aae03a90a745b9aaaffec7e2dde4"
4603
- dependencies:
4604
- boom "2.x.x"
4605
- cryptiles "2.x.x"
4606
- hoek "2.x.x"
4607
-
4608
-is-absolute-url@^2.0.0:
4609
- version "2.1.0"
4610
- resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.1.0.tgz#50530dfb84fcc9aa7dbe7852e83a37b93b9f2aa6"
4611
-
4612
-is-absolute@^0.1.5:
4613
- version "0.1.7"
4614
- resolved "https://registry.yarnpkg.com/is-absolute/-/is-absolute-0.1.7.tgz#847491119fccb5fb436217cc737f7faad50f603f"
4615
- dependencies:
4616
- is-relative "^0.1.0"
4617
-
4618
-is-absolute@^0.2.3:
4619
- version "0.2.6"
4620
- resolved "https://registry.yarnpkg.com/is-absolute/-/is-absolute-0.2.6.tgz#20de69f3db942ef2d87b9c2da36f172235b1b5eb"
4621
- dependencies:
4622
- is-relative "^0.2.1"
4623
- is-windows "^0.2.0"
4624
-
4625
-is-accessor-descriptor@^0.1.6:
4626
- version "0.1.6"
4627
- resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6"
4628
- dependencies:
4629
- kind-of "^3.0.2"
4630
-
4631
-is-alphabetical@^1.0.0:
4632
- version "1.0.0"
4633
- resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.0.tgz#e2544c13058255f2144cb757066cd3342a1c8c46"
4634
-
4635
-is-alphanumeric@^1.0.0:
4636
- version "1.0.0"
4637
- resolved "https://registry.yarnpkg.com/is-alphanumeric/-/is-alphanumeric-1.0.0.tgz#4a9cef71daf4c001c1d81d63d140cf53fd6889f4"
4638
-
4639
-is-alphanumerical@^1.0.0:
4640
- version "1.0.0"
4641
- resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-1.0.0.tgz#e06492e719c1bf15dec239e4f1af5f67b4d6e7bf"
4642
- dependencies:
4643
- is-alphabetical "^1.0.0"
4644
- is-decimal "^1.0.0"
4645
-
4646
-is-arrayish@^0.2.1:
4647
- version "0.2.1"
4648
- resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
4649
-
4650
-is-arrayish@^0.3.1:
4651
- version "0.3.1"
4652
- resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.1.tgz#c2dfc386abaa0c3e33c48db3fe87059e69065efd"
4653
-
4654
-is-binary-path@^1.0.0:
4655
- version "1.0.1"
4656
- resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
4657
- dependencies:
4658
- binary-extensions "^1.0.0"
4659
-
4660
-is-buffer@^1.1.4, is-buffer@^1.1.5, is-buffer@~1.1.1, is-buffer@~1.1.2:
4661
- version "1.1.5"
4662
- resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.5.tgz#1f3b26ef613b214b88cbca23cc6c01d87961eecc"
4663
-
4664
-is-builtin-module@^1.0.0:
4665
- version "1.0.0"
4666
- resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-1.0.0.tgz#540572d34f7ac3119f8f76c30cbc1b1e037affbe"
4667
- dependencies:
4668
- builtin-modules "^1.0.0"
4669
-
4670
-is-bzip2@^1.0.0:
4671
- version "1.0.0"
4672
- resolved "https://registry.yarnpkg.com/is-bzip2/-/is-bzip2-1.0.0.tgz#5ee58eaa5a2e9c80e21407bedf23ae5ac091b3fc"
4673
-
4674
-is-ci@^1.0.10:
4675
- version "1.0.10"
4676
- resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.0.10.tgz#f739336b2632365061a9d48270cd56ae3369318e"
4677
- dependencies:
4678
- ci-info "^1.0.0"
4679
-
4680
-is-data-descriptor@^0.1.4:
4681
- version "0.1.4"
4682
- resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
4683
- dependencies:
4684
- kind-of "^3.0.2"
4685
-
4686
-is-decimal@^1.0.0:
4687
- version "1.0.0"
4688
- resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.0.tgz#940579b6ea63c628080a69e62bda88c8470b4fe0"
4689
-
4690
-is-descriptor@^0.1.0:
4691
- version "0.1.6"
4692
- resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
4693
- dependencies:
4694
- is-accessor-descriptor "^0.1.6"
4695
- is-data-descriptor "^0.1.4"
4696
- kind-of "^5.0.0"
4697
-
4698
-is-descriptor@^1.0.0:
4699
- version "1.0.1"
4700
- resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-1.0.1.tgz#2c6023599bde2de9d5d2c8b9a9d94082036b6ef2"
4701
- dependencies:
4702
- is-accessor-descriptor "^0.1.6"
4703
- is-data-descriptor "^0.1.4"
4704
- kind-of "^5.0.0"
4705
-
4706
-is-dotfile@^1.0.0:
4707
- version "1.0.3"
4708
- resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.3.tgz#a6a2f32ffd2dfb04f5ca25ecd0f6b83cf798a1e1"
4709
-
4710
-is-equal-shallow@^0.1.3:
4711
- version "0.1.3"
4712
- resolved "https://registry.yarnpkg.com/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz#2238098fc221de0bcfa5d9eac4c45d638aa1c534"
4713
- dependencies:
4714
- is-primitive "^2.0.0"
4715
-
4716
-is-extendable@^0.1.0, is-extendable@^0.1.1:
4717
- version "0.1.1"
4718
- resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
4719
-
4720
-is-extglob@^1.0.0:
4721
- version "1.0.0"
4722
- resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
4723
-
4724
-is-extglob@^2.1.0, is-extglob@^2.1.1:
4725
- version "2.1.1"
4726
- resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
4727
-
4728
-is-finite@^1.0.0:
4729
- version "1.0.2"
4730
- resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
4731
- dependencies:
4732
- number-is-nan "^1.0.0"
4733
-
4734
-is-fullwidth-code-point@^1.0.0:
4735
- version "1.0.0"
4736
- resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
4737
- dependencies:
4738
- number-is-nan "^1.0.0"
4739
-
4740
-is-fullwidth-code-point@^2.0.0:
4741
- version "2.0.0"
4742
- resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
4743
-
4744
-is-glob@^2.0.0, is-glob@^2.0.1:
4745
- version "2.0.1"
4746
- resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
4747
- dependencies:
4748
- is-extglob "^1.0.0"
4749
-
4750
-is-glob@^3.1.0:
4751
- version "3.1.0"
4752
- resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-3.1.0.tgz#7ba5ae24217804ac70707b96922567486cc3e84a"
4753
- dependencies:
4754
- is-extglob "^2.1.0"
4755
-
4756
-is-gzip@^1.0.0:
4757
- version "1.0.0"
4758
- resolved "https://registry.yarnpkg.com/is-gzip/-/is-gzip-1.0.0.tgz#6ca8b07b99c77998025900e555ced8ed80879a83"
4759
-
4760
-is-hexadecimal@^1.0.0:
4761
- version "1.0.0"
4762
- resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.0.tgz#5c459771d2af9a2e3952781fd54fcb1bcfe4113c"
4763
-
4764
-is-natural-number@^2.0.0:
4765
- version "2.1.1"
4766
- resolved "https://registry.yarnpkg.com/is-natural-number/-/is-natural-number-2.1.1.tgz#7d4c5728377ef386c3e194a9911bf57c6dc335e7"
4767
-
4768
-is-number@^2.1.0:
4769
- version "2.1.0"
4770
- resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
4771
- dependencies:
4772
- kind-of "^3.0.2"
4773
-
4774
-is-number@^3.0.0:
4775
- version "3.0.0"
4776
- resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
4777
- dependencies:
4778
- kind-of "^3.0.2"
4779
-
4780
-is-obj@^1.0.0:
4781
- version "1.0.1"
4782
- resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
4783
-
4784
-is-object@^1.0.1:
4785
- version "1.0.1"
4786
- resolved "https://registry.yarnpkg.com/is-object/-/is-object-1.0.1.tgz#8952688c5ec2ffd6b03ecc85e769e02903083470"
4787
-
4788
-is-odd@^1.0.0:
4789
- version "1.0.0"
4790
- resolved "https://registry.yarnpkg.com/is-odd/-/is-odd-1.0.0.tgz#3b8a932eb028b3775c39bb09e91767accdb69088"
4791
- dependencies:
4792
- is-number "^3.0.0"
4793
-
4794
-is-path-cwd@^1.0.0:
4795
- version "1.0.0"
4796
- resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-1.0.0.tgz#d225ec23132e89edd38fda767472e62e65f1106d"
4797
-
4798
-is-path-in-cwd@^1.0.0:
4799
- version "1.0.0"
4800
- resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-1.0.0.tgz#6477582b8214d602346094567003be8a9eac04dc"
4801
- dependencies:
4802
- is-path-inside "^1.0.0"
4803
-
4804
-is-path-inside@^1.0.0:
4805
- version "1.0.0"
4806
- resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.0.tgz#fc06e5a1683fbda13de667aff717bbc10a48f37f"
4807
- dependencies:
4808
- path-is-inside "^1.0.1"
4809
-
4810
-is-plain-obj@^1.0.0, is-plain-obj@^1.1.0:
4811
- version "1.1.0"
4812
- resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
4813
-
4814
-is-plain-object@^2.0.1, is-plain-object@^2.0.3:
4815
- version "2.0.3"
4816
- resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.3.tgz#c15bf3e4b66b62d72efaf2925848663ecbc619b6"
4817
- dependencies:
4818
- isobject "^3.0.0"
4819
-
4820
-is-png@^1.0.0:
4821
- version "1.1.0"
4822
- resolved "https://registry.yarnpkg.com/is-png/-/is-png-1.1.0.tgz#d574b12bf275c0350455570b0e5b57ab062077ce"
4823
-
4824
-is-posix-bracket@^0.1.0:
4825
- version "0.1.1"
4826
- resolved "https://registry.yarnpkg.com/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
4827
-
4828
-is-primitive@^2.0.0:
4829
- version "2.0.0"
4830
- resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
4831
-
4832
-is-promise@^2.1.0:
4833
- version "2.1.0"
4834
- resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
4835
-
4836
-is-redirect@^1.0.0:
4837
- version "1.0.0"
4838
- resolved "https://registry.yarnpkg.com/is-redirect/-/is-redirect-1.0.0.tgz#1d03dded53bd8db0f30c26e4f95d36fc7c87dc24"
4839
-
4840
-is-relative-url@^2.0.0:
4841
- version "2.0.0"
4842
- resolved "https://registry.yarnpkg.com/is-relative-url/-/is-relative-url-2.0.0.tgz#72902d7fe04b3d4792e7db15f9db84b7204c9cef"
4843
- dependencies:
4844
- is-absolute-url "^2.0.0"
4845
-
4846
-is-relative@^0.1.0:
4847
- version "0.1.3"
4848
- resolved "https://registry.yarnpkg.com/is-relative/-/is-relative-0.1.3.tgz#905fee8ae86f45b3ec614bc3c15c869df0876e82"
4849
-
4850
-is-relative@^0.2.1:
4851
- version "0.2.1"
4852
- resolved "https://registry.yarnpkg.com/is-relative/-/is-relative-0.2.1.tgz#d27f4c7d516d175fb610db84bbeef23c3bc97aa5"
4853
- dependencies:
4854
- is-unc-path "^0.1.1"
4855
-
4856
-is-retry-allowed@^1.0.0:
4857
- version "1.1.0"
4858
- resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz#11a060568b67339444033d0125a61a20d564fb34"
4859
-
4860
-is-stream@^1.0.0, is-stream@^1.0.1, is-stream@^1.1.0:
4861
- version "1.1.0"
4862
- resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
4863
-
4864
-is-svg@^2.0.0:
4865
- version "2.1.0"
4866
- resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-2.1.0.tgz#cf61090da0d9efbcab8722deba6f032208dbb0e9"
4867
- dependencies:
4868
- html-comment-regex "^1.1.0"
4869
-
4870
-is-tar@^1.0.0:
4871
- version "1.0.0"
4872
- resolved "https://registry.yarnpkg.com/is-tar/-/is-tar-1.0.0.tgz#2f6b2e1792c1f5bb36519acaa9d65c0d26fe853d"
4873
-
4874
-is-typedarray@~1.0.0:
4875
- version "1.0.0"
4876
- resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
4877
-
4878
-is-unc-path@^0.1.1:
4879
- version "0.1.2"
4880
- resolved "https://registry.yarnpkg.com/is-unc-path/-/is-unc-path-0.1.2.tgz#6ab053a72573c10250ff416a3814c35178af39b9"
4881
- dependencies:
4882
- unc-path-regex "^0.1.0"
4883
-
4884
-is-url@^1.2.0:
4885
- version "1.2.2"
4886
- resolved "https://registry.yarnpkg.com/is-url/-/is-url-1.2.2.tgz#498905a593bf47cc2d9e7f738372bbf7696c7f26"
4887
-
4888
-is-utf8@^0.2.0:
4889
- version "0.2.1"
4890
- resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
4891
-
4892
-is-valid-glob@^0.3.0:
4893
- version "0.3.0"
4894
- resolved "https://registry.yarnpkg.com/is-valid-glob/-/is-valid-glob-0.3.0.tgz#d4b55c69f51886f9b65c70d6c2622d37e29f48fe"
4895
-
4896
-is-whitespace-character@^1.0.0:
4897
- version "1.0.0"
4898
- resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.0.tgz#bbf4a83764ead0d451bec2a55218e91961adc275"
4899
-
4900
-is-windows@^0.2.0:
4901
- version "0.2.0"
4902
- resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-0.2.0.tgz#de1aa6d63ea29dd248737b69f1ff8b8002d2108c"
4903
-
4904
-is-windows@^1.0.0:
4905
- version "1.0.1"
4906
- resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.1.tgz#310db70f742d259a16a369202b51af84233310d9"
4907
-
4908
-is-word-character@^1.0.0:
4909
- version "1.0.0"
4910
- resolved "https://registry.yarnpkg.com/is-word-character/-/is-word-character-1.0.0.tgz#a3a9e5ddad70c5c2ee36f4a9cfc9a53f44535247"
4911
-
4912
-is-wsl@^1.1.0:
4913
- version "1.1.0"
4914
- resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
4915
-
4916
-is-zip@^1.0.0:
4917
- version "1.0.0"
4918
- resolved "https://registry.yarnpkg.com/is-zip/-/is-zip-1.0.0.tgz#47b0a8ff4d38a76431ccfd99a8e15a4c86ba2325"
4919
-
4920
-isarray@0.0.1:
4921
- version "0.0.1"
4922
- resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
4923
-
4924
-isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
4925
- version "1.0.0"
4926
- resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
4927
-
4928
-isarray@2.0.1:
4929
- version "2.0.1"
4930
- resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.1.tgz#a37d94ed9cda2d59865c9f76fe596ee1f338741e"
4931
-
4932
-isemail@1.x.x:
4933
- version "1.2.0"
4934
- resolved "https://registry.yarnpkg.com/isemail/-/isemail-1.2.0.tgz#be03df8cc3e29de4d2c5df6501263f1fa4595e9a"
4935
-
4936
-isemail@2.x.x:
4937
- version "2.2.1"
4938
- resolved "https://registry.yarnpkg.com/isemail/-/isemail-2.2.1.tgz#0353d3d9a62951080c262c2aa0a42b8ea8e9e2a6"
4939
-
4940
-isexe@^2.0.0:
4941
- version "2.0.0"
4942
- resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
4943
-
4944
-isnumeric@^0.2.0:
4945
- version "0.2.0"
4946
- resolved "https://registry.yarnpkg.com/isnumeric/-/isnumeric-0.2.0.tgz#a2347ba360de19e33d0ffd590fddf7755cbf2e64"
4947
-
4948
-isobject@^2.0.0, isobject@^2.1.0:
4949
- version "2.1.0"
4950
- resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
4951
- dependencies:
4952
- isarray "1.0.0"
4953
-
4954
-isobject@^3.0.0, isobject@^3.0.1:
4955
- version "3.0.1"
4956
- resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
4957
-
4958
-isomorphic-fetch@^2.1.1:
4959
- version "2.2.1"
4960
- resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
4961
- dependencies:
4962
- node-fetch "^1.0.1"
4963
- whatwg-fetch ">=0.10.0"
4964
-
4965
-isstream@~0.1.2:
4966
- version "0.1.2"
4967
- resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
4968
-
4969
-isurl@^1.0.0-alpha5:
4970
- version "1.0.0"
4971
- resolved "https://registry.yarnpkg.com/isurl/-/isurl-1.0.0.tgz#b27f4f49f3cdaa3ea44a0a5b7f3462e6edc39d67"
4972
- dependencies:
4973
- has-to-string-tag-x "^1.2.0"
4974
- is-object "^1.0.1"
4975
-
4976
-items@1.x.x, items@^1.1.x:
4977
- version "1.1.1"
4978
- resolved "https://registry.yarnpkg.com/items/-/items-1.1.1.tgz#435b5dd21bca28b3cfd25bb5c6b278b715010fd9"
4979
-
4980
-items@2.x.x:
4981
- version "2.1.1"
4982
- resolved "https://registry.yarnpkg.com/items/-/items-2.1.1.tgz#8bd16d9c83b19529de5aea321acaada78364a198"
4983
-
4984
-iterall@^1.1.0:
4985
- version "1.1.1"
4986
- resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.1.1.tgz#f7f0af11e9a04ec6426260f5019d9fcca4d50214"
4987
-
4988
-joi@6.x.x:
4989
- version "6.10.1"
4990
- resolved "https://registry.yarnpkg.com/joi/-/joi-6.10.1.tgz#4d50c318079122000fe5f16af1ff8e1917b77e06"
4991
- dependencies:
4992
- hoek "2.x.x"
4993
- isemail "1.x.x"
4994
- moment "2.x.x"
4995
- topo "1.x.x"
4996
-
4997
-joi@9.0.0-0:
4998
- version "9.0.0-0"
4999
- resolved "https://registry.yarnpkg.com/joi/-/joi-9.0.0-0.tgz#a7ca4219602149ae0da7a7c5ca1d63d3c79e096b"
This file is too large to show in full.