Compare commits
1377 Commits
0.14-stabl
...
v15.3.0
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
66cee497e7 | ||
|
|
7251f6a6e9 | ||
|
|
f7837682b4 | ||
|
|
41f21520d1 | ||
|
|
e5efe5f568 | ||
|
|
396ab3eba1 | ||
|
|
01ad9af590 | ||
|
|
5d2f6c07c3 | ||
|
|
6cab7064a0 | ||
|
|
6f80ed8615 | ||
|
|
88d49edda5 | ||
|
|
5f705664fa | ||
|
|
6fba1f1fad | ||
|
|
127af0ffc7 | ||
|
|
86f72d0830 | ||
|
|
9423829db2 | ||
|
|
f8a698e9af | ||
|
|
807244badd | ||
|
|
2106bf5085 | ||
|
|
2debcef8f6 | ||
|
|
7cdcb4f696 | ||
|
|
8f8e215df1 | ||
|
|
0c56ee7a89 | ||
|
|
dfebed11c2 | ||
|
|
0394bae0e3 | ||
|
|
1e4828d9fc | ||
|
|
108f25350d | ||
|
|
f40b5b5c47 | ||
|
|
b38bbde2fe | ||
|
|
939071d737 | ||
|
|
42d7d0adad | ||
|
|
14e6a69a46 | ||
|
|
b1e1ccf632 | ||
|
|
7b78757c6f | ||
|
|
7d3cf9565e | ||
|
|
86cc1d4e67 | ||
|
|
80d09bfbb3 | ||
|
|
615ae2f497 | ||
|
|
1c3b4af564 | ||
|
|
40cc8fa45f | ||
|
|
ea61ddb0d0 | ||
|
|
9f975293e1 | ||
|
|
d40393fde7 | ||
|
|
8517e99816 | ||
|
|
cf07f0cab1 | ||
|
|
ddb58dd9f3 | ||
|
|
7d9ded56a2 | ||
|
|
e75e8dcbeb | ||
|
|
4a0a534357 | ||
|
|
d441128bf6 | ||
|
|
891e087926 | ||
|
|
9d385ef326 | ||
|
|
3b80d4dcd7 | ||
|
|
343033bf06 | ||
|
|
b688bb301c | ||
|
|
9138b45e82 | ||
|
|
1b7f871819 | ||
|
|
52e45997db | ||
|
|
45547d1c3b | ||
|
|
0f520b8cc0 | ||
|
|
5478d76271 | ||
|
|
57a1ebb809 | ||
|
|
dfb5cc306f | ||
|
|
ea880f2e2c | ||
|
|
68faf9d1b9 | ||
|
|
5597ca70be | ||
|
|
4b9d48a150 | ||
|
|
6b19617333 | ||
|
|
86d696d933 | ||
|
|
e685ca9126 | ||
|
|
abaa9a8760 | ||
|
|
ebabd2f8cd | ||
|
|
c51e8a1523 | ||
|
|
9fb898943a | ||
|
|
ccd781d97e | ||
|
|
9db68fcf5d | ||
|
|
219e838070 | ||
|
|
720ce5aa70 | ||
|
|
a0a8f2a451 | ||
|
|
67cc922747 | ||
|
|
75e6399261 | ||
|
|
25528eacbc | ||
|
|
f6b619aab1 | ||
|
|
7547d0d8e5 | ||
|
|
d7a6c95464 | ||
|
|
9687b35d83 | ||
|
|
173d065a9e | ||
|
|
67cbe6d471 | ||
|
|
c625bc88aa | ||
|
|
f1f599d775 | ||
|
|
c4b719d4dc | ||
|
|
e23690a0dc | ||
|
|
20d2398ab6 | ||
|
|
32cadeacdb | ||
|
|
a3c0d68af9 | ||
|
|
24cf5c7a5e | ||
|
|
8ea1ee14d5 | ||
|
|
ec029f66cc | ||
|
|
ba6ca7ff71 | ||
|
|
eb9f4efde7 | ||
|
|
8ee93720ce | ||
|
|
cea00b4b21 | ||
|
|
f3c9508e95 | ||
|
|
23de673537 | ||
|
|
26870ad27b | ||
|
|
54ee110436 | ||
|
|
a011a23090 | ||
|
|
0d4c994471 | ||
|
|
bc1d59ee19 | ||
|
|
3a6584b2ee | ||
|
|
c650249339 | ||
|
|
516aa96419 | ||
|
|
1808ecb348 | ||
|
|
74c29b391a | ||
|
|
33f54bfaa1 | ||
|
|
5131a43f96 | ||
|
|
62135da3ba | ||
|
|
7fbbb535ff | ||
|
|
bda788e932 | ||
|
|
ec44f2af6d | ||
|
|
6059444c84 | ||
|
|
814bf1ca0c | ||
|
|
aaa496213e | ||
|
|
c66f40f749 | ||
|
|
e921abf260 | ||
|
|
d893ab6428 | ||
|
|
dbb67824a4 | ||
|
|
592abf8ee7 | ||
|
|
2a411dd248 | ||
|
|
909d647801 | ||
|
|
243be87c6d | ||
|
|
eab4ffa721 | ||
|
|
1e0f0a35cf | ||
|
|
d4aebaa671 | ||
|
|
cd5189a63c | ||
|
|
cf50a83b8d | ||
|
|
89746fa70f | ||
|
|
e1c2c42c24 | ||
|
|
05c133a9c3 | ||
|
|
92bda144d9 | ||
|
|
6eeb2898f7 | ||
|
|
e974383cba | ||
|
|
7912baea69 | ||
|
|
07389fd9fc | ||
|
|
7a4aef0d0d | ||
|
|
85fd90d4c2 | ||
|
|
6080ab547d | ||
|
|
6562466c9e | ||
|
|
904c6e767b | ||
|
|
58634bda69 | ||
|
|
cb10a45ded | ||
|
|
90007f7087 | ||
|
|
39ddfdd9a2 | ||
|
|
ab4ea744f9 | ||
|
|
60cc2fe911 | ||
|
|
74ea71b324 | ||
|
|
3d748e93f1 | ||
|
|
a5d7fc84ee | ||
|
|
e8a8d005f0 | ||
|
|
2f4c61d1be | ||
|
|
677dd27912 | ||
|
|
689f5cc187 | ||
|
|
8f8d9a9dde | ||
|
|
634b107491 | ||
|
|
31ba751d2e | ||
|
|
c8b2a3dc13 | ||
|
|
58313419e2 | ||
|
|
8e598ea5c6 | ||
|
|
58f0298c62 | ||
|
|
f98e6c1955 | ||
|
|
a2f7b34f38 | ||
|
|
fad173a0f9 | ||
|
|
c1a9d1c0e0 | ||
|
|
3cf363384e | ||
|
|
bff0662ba3 | ||
|
|
8b6749dedd | ||
|
|
00095e3cbd | ||
|
|
6890805b16 | ||
|
|
c654fdf709 | ||
|
|
c060f4ac3d | ||
|
|
23d3e70b4e | ||
|
|
d945077f42 | ||
|
|
6607ffb9ec | ||
|
|
ad5902bc39 | ||
|
|
5247dc3cd2 | ||
|
|
b340601ef6 | ||
|
|
0f6081ee26 | ||
|
|
c17797f979 | ||
|
|
6638d49ad9 | ||
|
|
659ff22ea4 | ||
|
|
442d78a556 | ||
|
|
a599587fce | ||
|
|
9483255583 | ||
|
|
b3d37a908c | ||
|
|
e039795971 | ||
|
|
47d0f21c60 | ||
|
|
a88d821d9f | ||
|
|
460c4c2b9a | ||
|
|
3bf315d70e | ||
|
|
5d3920f5ab | ||
|
|
69208fc62a | ||
|
|
484a5b38af | ||
|
|
f112083c7a | ||
|
|
2ef148d1ee | ||
|
|
818ef42d22 | ||
|
|
d77b28e90b | ||
|
|
2183e55c12 | ||
|
|
b3d3ae42ed | ||
|
|
61924171bf | ||
|
|
20a081eb37 | ||
|
|
7dbf29a10d | ||
|
|
440543aa88 | ||
|
|
4725941c74 | ||
|
|
f14d0ef339 | ||
|
|
c595c27357 | ||
|
|
6d378bf78e | ||
|
|
23c4d31291 | ||
|
|
6af9f59010 | ||
|
|
571d1f7314 | ||
|
|
dd29092472 | ||
|
|
3a48eef3c8 | ||
|
|
f80da18f2e | ||
|
|
c4c800416f | ||
|
|
a6e4c9210d | ||
|
|
764519245b | ||
|
|
902a15d149 | ||
|
|
3e61ccc2d4 | ||
|
|
3aaf9abb73 | ||
|
|
e348891410 | ||
|
|
45469fbde9 | ||
|
|
0bc349c450 | ||
|
|
6aacfdb9ba | ||
|
|
5aa1c3547e | ||
|
|
c1c31f2cba | ||
|
|
79707ca3ee | ||
|
|
5fcb784294 | ||
|
|
0a1e5eb93b | ||
|
|
826d2ac716 | ||
|
|
878644b358 | ||
|
|
ef4efcced1 | ||
|
|
9e1a44e6bb | ||
|
|
7819816cc9 | ||
|
|
087c4c8b3c | ||
|
|
b370918e0c | ||
|
|
e6ad21933b | ||
|
|
22b96dd414 | ||
|
|
aa2edb427a | ||
|
|
39d6f49896 | ||
|
|
e0a82f4921 | ||
|
|
b95a23ce78 | ||
|
|
7842c19934 | ||
|
|
fef495942a | ||
|
|
b7d480986a | ||
|
|
da6a30b022 | ||
|
|
bca912f91e | ||
|
|
5b77fff586 | ||
|
|
95db5bab42 | ||
|
|
b4c1356d18 | ||
|
|
668dd47700 | ||
|
|
d9bcda01db | ||
|
|
8c50a04455 | ||
|
|
80b849e2a0 | ||
|
|
e15a7d1f7e | ||
|
|
7da8884581 | ||
|
|
871523c8f4 | ||
|
|
09172b112f | ||
|
|
3adc4a6e0e | ||
|
|
b29bf7515b | ||
|
|
cba62feeec | ||
|
|
09c6d53e64 | ||
|
|
78aa706491 | ||
|
|
f50d542ff7 | ||
|
|
583d7205c6 | ||
|
|
1f1dba92a8 | ||
|
|
258e591e45 | ||
|
|
42d27cd152 | ||
|
|
d8d6c7a07b | ||
|
|
4f0163fd38 | ||
|
|
0244879c8f | ||
|
|
743e4c6231 | ||
|
|
c3d99b5292 | ||
|
|
d1f519e0cd | ||
|
|
ff3cec5beb | ||
|
|
b0deadc05d | ||
|
|
ced4ef9ad6 | ||
|
|
ca19ae5ad0 | ||
|
|
9460263e41 | ||
|
|
197ecabb9a | ||
|
|
ee459684f1 | ||
|
|
6516c72ef1 | ||
|
|
9d022818e1 | ||
|
|
b9ae9f5f38 | ||
|
|
b8ac9e1597 | ||
|
|
9537b240de | ||
|
|
9c6de78844 | ||
|
|
6bb4fea31d | ||
|
|
97849a08cd | ||
|
|
2f435912d8 | ||
|
|
d737dc6dd2 | ||
|
|
1b22f12acd | ||
|
|
69bb9e3c8c | ||
|
|
772b5f9a5a | ||
|
|
64acaca8ee | ||
|
|
0008beb1fb | ||
|
|
846b5ea252 | ||
|
|
de0b0b3705 | ||
|
|
4dec99c61e | ||
|
|
18d715b86e | ||
|
|
a157791264 | ||
|
|
590d82bc33 | ||
|
|
a210dacdf4 | ||
|
|
1dfaa528f8 | ||
|
|
8c811778d6 | ||
|
|
395ae75eb3 | ||
|
|
2606966b43 | ||
|
|
c98f0e6631 | ||
|
|
a7714585bb | ||
|
|
da6e4853be | ||
|
|
afba0f3da7 | ||
|
|
d2b947c351 | ||
|
|
d1ba51bc84 | ||
|
|
9d73b2339a | ||
|
|
e88c96b1d7 | ||
|
|
3655e30adb | ||
|
|
112a400662 | ||
|
|
33a9603e93 | ||
|
|
ae6dfa9dae | ||
|
|
c05ae26ec8 | ||
|
|
3b2f29ef69 | ||
|
|
ecb61403d7 | ||
|
|
9eb37bff49 | ||
|
|
605109021f | ||
|
|
a3b7699f42 | ||
|
|
3251460ebd | ||
|
|
ec036ed185 | ||
|
|
5922ea1a0c | ||
|
|
1fb7d64171 | ||
|
|
fd8aa077e3 | ||
|
|
3e8a2aaddb | ||
|
|
c81c29ae58 | ||
|
|
5b4b6e7999 | ||
|
|
f565c92e38 | ||
|
|
fc4bf8158a | ||
|
|
7cd3aa7a1e | ||
|
|
ab4057880e | ||
|
|
d72885b383 | ||
|
|
fd1476e3aa | ||
|
|
142e4ebb57 | ||
|
|
ca92b9104c | ||
|
|
a6179d03f3 | ||
|
|
8afaf0380f | ||
|
|
ca0c409b6f | ||
|
|
177796ff79 | ||
|
|
da3be881ba | ||
|
|
1a0ec77094 | ||
|
|
e226021c5e | ||
|
|
1942c6a035 | ||
|
|
c49166401a | ||
|
|
500c0003b2 | ||
|
|
0275d77fc0 | ||
|
|
67a4b12e27 | ||
|
|
d1c08f11d5 | ||
|
|
40c0867f63 | ||
|
|
7081a85ace | ||
|
|
e8615daaed | ||
|
|
a37e4e94fc | ||
|
|
411951d5b8 | ||
|
|
95cd88d07a | ||
|
|
a142fd2578 | ||
|
|
e19353cdb5 | ||
|
|
ff7cc5dc4e | ||
|
|
a55579af0a | ||
|
|
edbe103094 | ||
|
|
a10665cac0 | ||
|
|
a7af9c6ce4 | ||
|
|
65c68b5a04 | ||
|
|
3f9e21f4eb | ||
|
|
cf1a96611f | ||
|
|
42b1cba048 | ||
|
|
622e84bcfe | ||
|
|
2d069fc5e6 | ||
|
|
add9ccedd6 | ||
|
|
d10b355b42 | ||
|
|
b72a098657 | ||
|
|
3cd39cbb8f | ||
|
|
90856ee61b | ||
|
|
67ff7104a1 | ||
|
|
b151e7fd3b | ||
|
|
80bff5397b | ||
|
|
1573baaee8 | ||
|
|
f7db143b41 | ||
|
|
b0d1e16271 | ||
|
|
30dc842e34 | ||
|
|
14b19870fe | ||
|
|
0c89da5b25 | ||
|
|
44c699a465 | ||
|
|
ec1462834e | ||
|
|
a5c164daca | ||
|
|
599582c3b2 | ||
|
|
51bfe2d1f3 | ||
|
|
575fb79162 | ||
|
|
eb85b7b2c9 | ||
|
|
7a8c460e03 | ||
|
|
cbe72d4b97 | ||
|
|
b6bc4bd996 | ||
|
|
e6e38d0f9c | ||
|
|
05b05c4c81 | ||
|
|
531205065f | ||
|
|
03fe7dbb37 | ||
|
|
d9ca95c44f | ||
|
|
58a86f6c6c | ||
|
|
4910c3bcce | ||
|
|
fb13cf55fe | ||
|
|
b666a44ce1 | ||
|
|
d743a8dd55 | ||
|
|
22a3d0387b | ||
|
|
2baa3b7d2f | ||
|
|
7f01c47658 | ||
|
|
d7fe7ecca5 | ||
|
|
96c0cd061e | ||
|
|
815d3514a7 | ||
|
|
2890af02f1 | ||
|
|
a2780212ae | ||
|
|
ba76649c3b | ||
|
|
dcd092560d | ||
|
|
70de7e4a38 | ||
|
|
9358ce3b02 | ||
|
|
6a8ebfc418 | ||
|
|
d17091ddeb | ||
|
|
ae2a7c723f | ||
|
|
6b307a55fb | ||
|
|
f0dbc1e1d3 | ||
|
|
e119f20927 | ||
|
|
414f057bc2 | ||
|
|
c212226fff | ||
|
|
d8ee071c92 | ||
|
|
f80f2379cd | ||
|
|
0f1240e877 | ||
|
|
5e770f4d2d | ||
|
|
bfb9444300 | ||
|
|
f5a9fb378d | ||
|
|
1e8156143a | ||
|
|
75c2b6ab59 | ||
|
|
7169da21ba | ||
|
|
a7fae7e4c7 | ||
|
|
c528732504 | ||
|
|
af4fe68b14 | ||
|
|
d4657b8331 | ||
|
|
d433c2f376 | ||
|
|
8b026f901c | ||
|
|
39ccdccef1 | ||
|
|
ebe5128489 | ||
|
|
552f00b536 | ||
|
|
fe617082d9 | ||
|
|
40c4635e17 | ||
|
|
ecf824cc2a | ||
|
|
75e4ef167e | ||
|
|
0393488f39 | ||
|
|
7bdf4dba75 | ||
|
|
441d9b65bd | ||
|
|
cfec10bd51 | ||
|
|
2f24f89111 | ||
|
|
67f8524e88 | ||
|
|
d138b286db | ||
|
|
b6547734c6 | ||
|
|
5520c399a6 | ||
|
|
ea55d66760 | ||
|
|
8e6996267f | ||
|
|
8046cbda10 | ||
|
|
b322d65320 | ||
|
|
67647fd82f | ||
|
|
51d37c64c3 | ||
|
|
a7ed9fd199 | ||
|
|
663a78399c | ||
|
|
e04a138634 | ||
|
|
8bff1f50a6 | ||
|
|
7dd71ca488 | ||
|
|
97038d1ff7 | ||
|
|
c395c0977f | ||
|
|
c5f7c8dae1 | ||
|
|
9f418df8b3 | ||
|
|
07824258c6 | ||
|
|
745108f625 | ||
|
|
93752bb175 | ||
|
|
a261c45ccf | ||
|
|
318e024338 | ||
|
|
9268c1a710 | ||
|
|
6882c7ca40 | ||
|
|
9e1a637644 | ||
|
|
b8682e0f20 | ||
|
|
28caa8882b | ||
|
|
37c3b081d9 | ||
|
|
c927cfa0b4 | ||
|
|
02b4d18252 | ||
|
|
3240c09a06 | ||
|
|
20e1acb7dd | ||
|
|
ec25297def | ||
|
|
5a17a1ef1d | ||
|
|
a0a72004e5 | ||
|
|
48a1cc52d7 | ||
|
|
37fc21f1e8 | ||
|
|
79a62b09ea | ||
|
|
afda226cb9 | ||
|
|
b7e8b7f239 | ||
|
|
9f4f88b21f | ||
|
|
2fb74cd1ac | ||
|
|
e8005bf01a | ||
|
|
0229f48815 | ||
|
|
2326d1af9a | ||
|
|
1f2d9b208d | ||
|
|
6eda7d2b25 | ||
|
|
5e98dceded | ||
|
|
c912a1b367 | ||
|
|
f30fb748f8 | ||
|
|
72f33ce892 | ||
|
|
28a97dbd74 | ||
|
|
c52265884a | ||
|
|
8c57fd9d31 | ||
|
|
ea15fa31b6 | ||
|
|
0fb1cd61e1 | ||
|
|
181db5b1f6 | ||
|
|
f9a08b0e9c | ||
|
|
2f4a8e9d47 | ||
|
|
f938299765 | ||
|
|
11b55231c4 | ||
|
|
88e1bb33aa | ||
|
|
36392534a8 | ||
|
|
f6463576ee | ||
|
|
2a7b50a48e | ||
|
|
bb9629476e | ||
|
|
d4371aafcf | ||
|
|
e245ed6ba9 | ||
|
|
846fd5fbf0 | ||
|
|
36796348f2 | ||
|
|
e61e6dd4ed | ||
|
|
3d51c7523a | ||
|
|
340b344b20 | ||
|
|
dc93efaf11 | ||
|
|
56f8321559 | ||
|
|
f3738d2cd0 | ||
|
|
626bb81241 | ||
|
|
2b0f730081 | ||
|
|
6a5866f286 | ||
|
|
f430c47467 | ||
|
|
7e20243516 | ||
|
|
10f9476f3a | ||
|
|
9c1916dedb | ||
|
|
3b86cb10c4 | ||
|
|
4e2a0d14a9 | ||
|
|
1dc705aa0b | ||
|
|
9fff1693f6 | ||
|
|
6432625c6b | ||
|
|
8b22a82162 | ||
|
|
f707ee53e2 | ||
|
|
25c2bfcd52 | ||
|
|
36798f7395 | ||
|
|
0ba1073e17 | ||
|
|
8a9ab75261 | ||
|
|
b89e7d25d5 | ||
|
|
093bb22030 | ||
|
|
45a321d686 | ||
|
|
b271efb7d3 | ||
|
|
f8046f2dc2 | ||
|
|
18af9bc91e | ||
|
|
09666ad486 | ||
|
|
4bbd8d25e1 | ||
|
|
5eab1bbe29 | ||
|
|
32b0c62214 | ||
|
|
56c423afd6 | ||
|
|
4da7e7ef9c | ||
|
|
aec8a9b4fe | ||
|
|
e0442f6915 | ||
|
|
ab6041bad6 | ||
|
|
8f2b7d8e71 | ||
|
|
a026b35626 | ||
|
|
730e5ac2e6 | ||
|
|
03925f4f06 | ||
|
|
4045747af6 | ||
|
|
132a291747 | ||
|
|
96eb7ffdda | ||
|
|
7dc8910373 | ||
|
|
4d1bfcc8e1 | ||
|
|
5696ccfcd7 | ||
|
|
adc9104d84 | ||
|
|
f68325f5d7 | ||
|
|
5bb4303f9d | ||
|
|
1365498b81 | ||
|
|
4c804361e0 | ||
|
|
1e5bb2e9e4 | ||
|
|
471b4af2c8 | ||
|
|
13871886ba | ||
|
|
92530b4ddc | ||
|
|
74070e5838 | ||
|
|
5b13cbc0e8 | ||
|
|
895fab782b | ||
|
|
260353e977 | ||
|
|
8ab15c1d84 | ||
|
|
e2866ae412 | ||
|
|
040e94b7f5 | ||
|
|
df095c005f | ||
|
|
dff05beeff | ||
|
|
7a3009c2b4 | ||
|
|
f7276b304c | ||
|
|
308badbc03 | ||
|
|
39c597f523 | ||
|
|
8886cee285 | ||
|
|
de09e0acd8 | ||
|
|
8011112cc1 | ||
|
|
fb75341769 | ||
|
|
5652c710c0 | ||
|
|
6ec8f078f1 | ||
|
|
01b3196896 | ||
|
|
5ebb784be5 | ||
|
|
ccfd1ffb30 | ||
|
|
cf4255445e | ||
|
|
70b5eda83e | ||
|
|
dcc86b63dc | ||
|
|
a080d863c5 | ||
|
|
628a16c84d | ||
|
|
b3335f371f | ||
|
|
559fed7988 | ||
|
|
98d3327a5d | ||
|
|
81e5dd0a29 | ||
|
|
e8fb8c7870 | ||
|
|
3863330524 | ||
|
|
684ef3e320 | ||
|
|
f818fa38b4 | ||
|
|
203850013a | ||
|
|
5d7cd93b0e | ||
|
|
efa8624eb9 | ||
|
|
decff26e81 | ||
|
|
6454bfb9de | ||
|
|
c54249c868 | ||
|
|
e8e56e8723 | ||
|
|
6312852688 | ||
|
|
51d16473b0 | ||
|
|
5879c9e1a4 | ||
|
|
8d08f3f00a | ||
|
|
3a4e1dbb5b | ||
|
|
5ffd1db570 | ||
|
|
62e9531023 | ||
|
|
acb49363d5 | ||
|
|
c9e0fc766f | ||
|
|
2fdaba49c7 | ||
|
|
50c28fa9c4 | ||
|
|
383e2f938d | ||
|
|
73ad44567c | ||
|
|
356fa4e8c0 | ||
|
|
d26ec08cf1 | ||
|
|
41dea65abf | ||
|
|
3bee2d962a | ||
|
|
c3980a6d08 | ||
|
|
ee64241e90 | ||
|
|
5b80f9009f | ||
|
|
ec41af0557 | ||
|
|
2410dc7f15 | ||
|
|
57d59ea344 | ||
|
|
8aacf1e850 | ||
|
|
175d0978cc | ||
|
|
0b87d7f56f | ||
|
|
17c9dffed4 | ||
|
|
d684b1598d | ||
|
|
b3eaab9f75 | ||
|
|
5ce1fea75a | ||
|
|
385cadf8e3 | ||
|
|
c4a2425eca | ||
|
|
bbd5a78efa | ||
|
|
dd390b3e36 | ||
|
|
293dc75584 | ||
|
|
428ef03bbb | ||
|
|
3e41da767f | ||
|
|
b560fea08d | ||
|
|
e5b304ebe3 | ||
|
|
fcfbcf79a0 | ||
|
|
3ce7e91946 | ||
|
|
bd3979980f | ||
|
|
6fe495a5ab | ||
|
|
0509950e74 | ||
|
|
48ded230fc | ||
|
|
4a1b0b7dfa | ||
|
|
9d22ce8440 | ||
|
|
08c7b1aa40 | ||
|
|
1e85460909 | ||
|
|
38bf3583cb | ||
|
|
a90344a9c1 | ||
|
|
725a723e27 | ||
|
|
e4b463f921 | ||
|
|
886044312c | ||
|
|
a1dab9edbf | ||
|
|
81e41ae1b1 | ||
|
|
86305fba41 | ||
|
|
220b4b6b50 | ||
|
|
b38b39a696 | ||
|
|
97e0fe5d91 | ||
|
|
dbb54b1990 | ||
|
|
f2bb01506a | ||
|
|
ef2b1f26ef | ||
|
|
8c7d743361 | ||
|
|
292f2b7608 | ||
|
|
0bd65aa028 | ||
|
|
2981bef075 | ||
|
|
1beae0c4ff | ||
|
|
823966ef33 | ||
|
|
d136d28f55 | ||
|
|
1ccec8b711 | ||
|
|
cded0c5c23 | ||
|
|
188e8cde2f | ||
|
|
9d5825cf4b | ||
|
|
67e1291ef7 | ||
|
|
a0c32cb629 | ||
|
|
9c3f595597 | ||
|
|
6986fdd6bd | ||
|
|
c569b329e9 | ||
|
|
6ecf06ce60 | ||
|
|
e9636b1f6a | ||
|
|
4b2b7b0d3e | ||
|
|
fc547e8380 | ||
|
|
01f10eb7ba | ||
|
|
ed40119db8 | ||
|
|
a92bc51e0a | ||
|
|
6f5e619fae | ||
|
|
edaf5b43b4 | ||
|
|
ea79138156 | ||
|
|
0ce28c6e88 | ||
|
|
e1b7c3aa0c | ||
|
|
096115c5c9 | ||
|
|
080ff5ad73 | ||
|
|
7c52b802b4 | ||
|
|
4c03bafa4e | ||
|
|
1aa7fd0d24 | ||
|
|
7e779a9d44 | ||
|
|
b41f5a1cdf | ||
|
|
30f7641873 | ||
|
|
76da1f8599 | ||
|
|
757756f682 | ||
|
|
e9e70365c3 | ||
|
|
af43d06e97 | ||
|
|
7f98dc897d | ||
|
|
e420edda36 | ||
|
|
3da6e2889b | ||
|
|
7cee5022f8 | ||
|
|
49fa7d139d | ||
|
|
31d3bfa763 | ||
|
|
ae5ff24da6 | ||
|
|
c7808cac69 | ||
|
|
f5a9a26a43 | ||
|
|
e09dfe1e0e | ||
|
|
1186cb9ab4 | ||
|
|
7a6000c093 | ||
|
|
aedfa3011e | ||
|
|
2f792d5a60 | ||
|
|
accd0d874d | ||
|
|
422b4e105c | ||
|
|
909cba2254 | ||
|
|
209b7522d9 | ||
|
|
be0551d01e | ||
|
|
f1c1544401 | ||
|
|
fb5cd2f7ae | ||
|
|
fcc63e1fff | ||
|
|
7334fece2c | ||
|
|
689efd1abf | ||
|
|
0acdb7b56a | ||
|
|
1da992a0ab | ||
|
|
ad4e31c312 | ||
|
|
fdd7fabd12 | ||
|
|
9494ec80c2 | ||
|
|
dd93eb7f40 | ||
|
|
1b3adff1ca | ||
|
|
da1fcd0fbf | ||
|
|
70097ea27c | ||
|
|
6f976dfbbe | ||
|
|
2e1fb4b529 | ||
|
|
e8af100849 | ||
|
|
ee03c19b3b | ||
|
|
b60e8c255d | ||
|
|
26f53de4a6 | ||
|
|
171305f7e2 | ||
|
|
f2b62e9d90 | ||
|
|
d51a1d4ec1 | ||
|
|
f7850dd3d7 | ||
|
|
67e85df1fa | ||
|
|
77a137adf9 | ||
|
|
ea0ac61945 | ||
|
|
708e1b3f03 | ||
|
|
0c6b909322 | ||
|
|
3574e60867 | ||
|
|
23167f287e | ||
|
|
a3ec1c34d6 | ||
|
|
a1584053cc | ||
|
|
31fc7fd627 | ||
|
|
c3cea365e7 | ||
|
|
70938de9ae | ||
|
|
a7f7ef6ac3 | ||
|
|
5597873d7c | ||
|
|
19db8e13bc | ||
|
|
78be6f45cc | ||
|
|
d3e315193a | ||
|
|
9b679ab56a | ||
|
|
f4c5b2c00b | ||
|
|
2751e8179d | ||
|
|
4e3d38ed27 | ||
|
|
0e8db6ba42 | ||
|
|
eb00290673 | ||
|
|
27926572f6 | ||
|
|
0ebc7b60e1 | ||
|
|
067547c1d1 | ||
|
|
7f322b5a46 | ||
|
|
102cd29189 | ||
|
|
a8c2c80fdc | ||
|
|
bdcb69f43d | ||
|
|
c035179ef8 | ||
|
|
3b96650e39 | ||
|
|
2a042a3060 | ||
|
|
e15e059d73 | ||
|
|
dd2dbd0a5c | ||
|
|
6dc7f13343 | ||
|
|
2a64098271 | ||
|
|
7cc6738061 | ||
|
|
8f720f8cd9 | ||
|
|
a58cde6c79 | ||
|
|
53920e7c38 | ||
|
|
99dc2a73f6 | ||
|
|
62c9d999be | ||
|
|
c29642d6ed | ||
|
|
bef45b0b1a | ||
|
|
51295bf7d0 | ||
|
|
a0d6a98cbf | ||
|
|
713401f2eb | ||
|
|
feb4c487be | ||
|
|
53dabe748c | ||
|
|
98a7100930 | ||
|
|
f27e3aa750 | ||
|
|
251d6c30b5 | ||
|
|
232a47ad04 | ||
|
|
6e0a023572 | ||
|
|
badc15e3c0 | ||
|
|
82fe64a456 | ||
|
|
edf1952421 | ||
|
|
432578ef03 | ||
|
|
5043b89d5e | ||
|
|
07c0bc6166 | ||
|
|
d9dabac48d | ||
|
|
0d5312559a | ||
|
|
a0741ab468 | ||
|
|
56365f4eda | ||
|
|
6ff96441da | ||
|
|
35e1908bb4 | ||
|
|
f0a15b993c | ||
|
|
4865ddf7ea | ||
|
|
109c9a91e2 | ||
|
|
bae0f19543 | ||
|
|
bb11639e25 | ||
|
|
89a0ef4ff9 | ||
|
|
85e646015d | ||
|
|
1d8b816496 | ||
|
|
8fa1dfaa8c | ||
|
|
39c24bf6a6 | ||
|
|
e68e17503e | ||
|
|
f3dbc40261 | ||
|
|
bbef2958b2 | ||
|
|
5b98152a3d | ||
|
|
a9a4c9d9d0 | ||
|
|
9b0ef9244d | ||
|
|
82ed8fb0cd | ||
|
|
7e2a7f0ce6 | ||
|
|
88ce0fc95f | ||
|
|
c465c2ab77 | ||
|
|
744b1175f3 | ||
|
|
14d8593102 | ||
|
|
d872c25739 | ||
|
|
ac20cb2d8c | ||
|
|
9c57c30049 | ||
|
|
cd0c62ef74 | ||
|
|
50af034108 | ||
|
|
dae1152e66 | ||
|
|
ca31e9f3f7 | ||
|
|
dc9b3fedb2 | ||
|
|
8d0efaf980 | ||
|
|
a8b953327a | ||
|
|
a067949c99 | ||
|
|
aad8024d09 | ||
|
|
1b85c9a6c4 | ||
|
|
abddb558ec | ||
|
|
7c0189fbad | ||
|
|
89538d44a9 | ||
|
|
421d177dd2 | ||
|
|
5563771ace | ||
|
|
40d5692980 | ||
|
|
bdca170d2a | ||
|
|
9a6c5deeb6 | ||
|
|
f56b28c07a | ||
|
|
7a1d87bd33 | ||
|
|
8eabf84204 | ||
|
|
a3d6553a30 | ||
|
|
26f3785a8c | ||
|
|
83328d4923 | ||
|
|
b8315fdd59 | ||
|
|
963b3cacab | ||
|
|
c9c3c339b7 | ||
|
|
ab37776cc2 | ||
|
|
0c15b01c38 | ||
|
|
3afced6a75 | ||
|
|
a15293704a | ||
|
|
ccb97d8e59 | ||
|
|
20e5a95fe3 | ||
|
|
bec238a7c9 | ||
|
|
6c8cbcae8f | ||
|
|
13080f99ba | ||
|
|
30ef056731 | ||
|
|
a55ab282fa | ||
|
|
33217f0fb9 | ||
|
|
3997164418 | ||
|
|
eee5d466a6 | ||
|
|
b6a01d7733 | ||
|
|
2ff1b2e9e3 | ||
|
|
db37deb17c | ||
|
|
55bd203310 | ||
|
|
83ee3c38a4 | ||
|
|
682d61537d | ||
|
|
0886273438 | ||
|
|
410cc30bf9 | ||
|
|
fcf74fe9da | ||
|
|
f282710072 | ||
|
|
ef32927eb5 | ||
|
|
eeee272268 | ||
|
|
94325ea3ef | ||
|
|
bb084eba24 | ||
|
|
b1964ad8a7 | ||
|
|
4f7a2766e4 | ||
|
|
46f5251c66 | ||
|
|
be964561ed | ||
|
|
3deca65a89 | ||
|
|
0130a04f05 | ||
|
|
c65ff201fc | ||
|
|
86b44349de | ||
|
|
178fe648de | ||
|
|
14725ba768 | ||
|
|
1d3ff2a159 | ||
|
|
856eb72b4f | ||
|
|
b15c80696c | ||
|
|
3faf9569d4 | ||
|
|
67663ba2c9 | ||
|
|
4f9d8c31b8 | ||
|
|
2f77367863 | ||
|
|
4a971c2d1c | ||
|
|
c77f0b2fc5 | ||
|
|
ad54e49f0c | ||
|
|
7d699f4063 | ||
|
|
f4744f3a70 | ||
|
|
8c7603311a | ||
|
|
526d5c0edc | ||
|
|
31253c251f | ||
|
|
50c7b1792c | ||
|
|
0be7786e1c | ||
|
|
3ca15b0090 | ||
|
|
b0ae955977 | ||
|
|
8557cc0d67 | ||
|
|
9c21e2f3c4 | ||
|
|
6b3ee0e74d | ||
|
|
a0f88d29df | ||
|
|
f5840e685e | ||
|
|
36dfe62f68 | ||
|
|
13c398bef6 | ||
|
|
25ef456b13 | ||
|
|
fbf81a8435 | ||
|
|
940a75b1fe | ||
|
|
f1d3f78334 | ||
|
|
34fbcf20d8 | ||
|
|
f48bb3a274 | ||
|
|
6b641de6b8 | ||
|
|
d54b151bc2 | ||
|
|
1e98c78541 | ||
|
|
ed8727ade7 | ||
|
|
50c81d5fe6 | ||
|
|
ba0792e72b | ||
|
|
8248470bd9 | ||
|
|
418ba27485 | ||
|
|
08499f9938 | ||
|
|
3722616349 | ||
|
|
c6025da952 | ||
|
|
54e6057b1a | ||
|
|
e95d3dd812 | ||
|
|
58901af7a6 | ||
|
|
18a3a3979e | ||
|
|
e02bd0543f | ||
|
|
f44a0778e3 | ||
|
|
d01188133e | ||
|
|
b74e53c3ca | ||
|
|
7ea1d15197 | ||
|
|
bf4bd19101 | ||
|
|
60af7d1c3d | ||
|
|
c5867ea401 | ||
|
|
812e1a877f | ||
|
|
64f795e5ef | ||
|
|
23edc0d274 | ||
|
|
acabb22a1d | ||
|
|
907dee2b5d | ||
|
|
1cdbff26ab | ||
|
|
aa1e58a41b | ||
|
|
179263c72f | ||
|
|
22a3f6724a | ||
|
|
1d071c20e8 | ||
|
|
c643ecd7c7 | ||
|
|
ab6892956d | ||
|
|
0440de9f89 | ||
|
|
399a6cfd1c | ||
|
|
b40221973c | ||
|
|
fd03270372 | ||
|
|
844ca8b6b2 | ||
|
|
d1eba1f78c | ||
|
|
5a80b20017 | ||
|
|
a3779421a1 | ||
|
|
1a6d1e74e0 | ||
|
|
e7a5a98044 | ||
|
|
904e9e3ea6 | ||
|
|
3812b95450 | ||
|
|
c4f134883d | ||
|
|
60cba8fcf7 | ||
|
|
7729d51726 | ||
|
|
c07b304c76 | ||
|
|
538d0b08f2 | ||
|
|
e03df26e62 | ||
|
|
6c89857cdc | ||
|
|
892352e95d | ||
|
|
ba8c987391 | ||
|
|
85a3142f04 | ||
|
|
80bcc519d7 | ||
|
|
94504c3767 | ||
|
|
7a453646be | ||
|
|
96549a1f48 | ||
|
|
034cfc96c7 | ||
|
|
72d9a8bc15 | ||
|
|
09b7ff1fc4 | ||
|
|
3bcb0d63f0 | ||
|
|
dbe8212974 | ||
|
|
593a234c1e | ||
|
|
2d5612913f | ||
|
|
a2b471e098 | ||
|
|
47253733d3 | ||
|
|
ea31f924b8 | ||
|
|
8104262043 | ||
|
|
951f3b6ba8 | ||
|
|
12a20b184c | ||
|
|
358140679c | ||
|
|
1220ccc805 | ||
|
|
fc245226f9 | ||
|
|
4cb210a9da | ||
|
|
7d0ee24514 | ||
|
|
575d1a5093 | ||
|
|
eecd2953cd | ||
|
|
e39f51429b | ||
|
|
d6a547f793 | ||
|
|
30ca6619dc | ||
|
|
b4b1adddda | ||
|
|
4b80ea23a1 | ||
|
|
f9a8bdcafe | ||
|
|
586653935c | ||
|
|
10edb83166 | ||
|
|
95da62765e | ||
|
|
5bdb808a46 | ||
|
|
a88c39be86 | ||
|
|
bc0dc86ae6 | ||
|
|
c8b8c818b5 | ||
|
|
240d7c82cc | ||
|
|
99fbde54a1 | ||
|
|
00eddc2060 | ||
|
|
2f7f1a9d45 | ||
|
|
5fec308d60 | ||
|
|
d16754125f | ||
|
|
59dd7b33ee | ||
|
|
73b496db95 | ||
|
|
22b8952fbf | ||
|
|
aca4ccda35 | ||
|
|
6d5fe44c86 | ||
|
|
88584a96b7 | ||
|
|
2f6fb746b9 | ||
|
|
a86d25d584 | ||
|
|
9b7cc43330 | ||
|
|
b9fd77a4bd | ||
|
|
4a7456a136 | ||
|
|
8987522a2a | ||
|
|
e131357c23 | ||
|
|
9419976e51 | ||
|
|
578312e267 | ||
|
|
76bbd9e660 | ||
|
|
e2fdcb1990 | ||
|
|
cd7387c465 | ||
|
|
80af7c7be4 | ||
|
|
4fae036269 | ||
|
|
1c14477a47 | ||
|
|
7ae67916cc | ||
|
|
35962a0008 | ||
|
|
c193d1a0c2 | ||
|
|
b80f676d27 | ||
|
|
35543c6312 | ||
|
|
3cebadaa6b | ||
|
|
e48c8be556 | ||
|
|
f06ddf7905 | ||
|
|
663c4b7d2e | ||
|
|
5d94d7d43c | ||
|
|
4ba0e95a96 | ||
|
|
796f8c353c | ||
|
|
d11ccd6956 | ||
|
|
f470cb88f8 | ||
|
|
6d20556c78 | ||
|
|
ce528457a4 | ||
|
|
5a7c273a1b | ||
|
|
276ef737fe | ||
|
|
5becbe3f08 | ||
|
|
19e2cf5ad5 | ||
|
|
45c612ed7a | ||
|
|
84af306044 | ||
|
|
2858bca2e3 | ||
|
|
9ad4be0316 | ||
|
|
a4b5f2fffa | ||
|
|
c802e9ede9 | ||
|
|
d2888798f0 | ||
|
|
17289020f7 | ||
|
|
5724fca7ae | ||
|
|
fbb8d2fe2d | ||
|
|
b9371bc216 | ||
|
|
2b54e5417d | ||
|
|
bc3b32c968 | ||
|
|
db7ea058e7 | ||
|
|
dbab71bbf4 | ||
|
|
ff6714064f | ||
|
|
72a11421d2 | ||
|
|
a82400faa2 | ||
|
|
d44c45f8a5 | ||
|
|
3c1c02394e | ||
|
|
e9f931653d | ||
|
|
57b0c8efd0 | ||
|
|
6e1f642273 | ||
|
|
88bae3fb73 | ||
|
|
41fc5f21e5 | ||
|
|
bbffc36534 | ||
|
|
8a9039891b | ||
|
|
c525732147 | ||
|
|
b5d90f8c6b | ||
|
|
d77e161f99 | ||
|
|
a2d26c82ea | ||
|
|
0c790baf31 | ||
|
|
68eb1a6fb6 | ||
|
|
86fc94750a | ||
|
|
bd6417e24e | ||
|
|
3d75a4234d | ||
|
|
6fd7892a4d | ||
|
|
38b80b5b37 | ||
|
|
761921499c | ||
|
|
aa6fcf902c | ||
|
|
c35b4384f7 | ||
|
|
f02584d807 | ||
|
|
0ef5112e89 | ||
|
|
d914f15c0e | ||
|
|
1384d43f53 | ||
|
|
d80710b0ae | ||
|
|
d15e2fcd8e | ||
|
|
cc09ed940f | ||
|
|
12c214a992 | ||
|
|
f00d45d65f | ||
|
|
ac17bdaaba | ||
|
|
606aa61209 | ||
|
|
29523d0113 | ||
|
|
d95a2239a8 | ||
|
|
b8f502b224 | ||
|
|
c0f0d12f96 | ||
|
|
2ecfc4f8fb | ||
|
|
9d25303d89 | ||
|
|
c341269ab2 | ||
|
|
01341480c2 | ||
|
|
fbf4cbbae6 | ||
|
|
2257d8aa76 | ||
|
|
afc118e3c4 | ||
|
|
ee06df1ac5 | ||
|
|
a65a4851c6 | ||
|
|
e849819cb6 | ||
|
|
2c176da7e8 | ||
|
|
f8b4affb87 | ||
|
|
ad00a6e672 | ||
|
|
b0a7a00dba | ||
|
|
7f205e9c1b | ||
|
|
65b9ceb4f8 | ||
|
|
517872817f | ||
|
|
ad654ceb66 | ||
|
|
e26666fb1e | ||
|
|
59db07c4f9 | ||
|
|
e603644255 | ||
|
|
f558b95584 | ||
|
|
0f76873ebb | ||
|
|
e2267613ac | ||
|
|
924cddc505 | ||
|
|
a51ef94384 | ||
|
|
055ecd7f14 | ||
|
|
d17ad0f0c0 | ||
|
|
0508a07446 | ||
|
|
0ddc0817e4 | ||
|
|
11919b6d90 | ||
|
|
73ec3713b3 | ||
|
|
22a240fd39 | ||
|
|
56c91248fd | ||
|
|
2f48cc4327 | ||
|
|
75e9045719 | ||
|
|
2b136a4f84 | ||
|
|
6269ef62cf | ||
|
|
8aaa66c292 | ||
|
|
3a0ab000bf | ||
|
|
4106251316 | ||
|
|
939c7596ad | ||
|
|
b447b40958 | ||
|
|
7221e1b2e9 | ||
|
|
263ca4792e | ||
|
|
4d41cf740a | ||
|
|
a79fcd7a7f | ||
|
|
be6bd3404e | ||
|
|
bb3a326ecd | ||
|
|
b106e96864 | ||
|
|
7b97d8d58f | ||
|
|
1bcd6804f3 | ||
|
|
1dafac9e0c | ||
|
|
85fc28624c | ||
|
|
29939b7270 | ||
|
|
ce002e61b1 | ||
|
|
a468eed33f | ||
|
|
8848984c46 | ||
|
|
caece8b4b7 | ||
|
|
5bd04cf259 | ||
|
|
fc96f31fad | ||
|
|
244dd5da4c | ||
|
|
7aac368253 | ||
|
|
3d7def0b48 | ||
|
|
545f31741e | ||
|
|
8f1ce99cc3 | ||
|
|
2a7d054bfc | ||
|
|
db7522f2c5 | ||
|
|
9cb01de1bc | ||
|
|
1044d4c7d5 | ||
|
|
dd3c4474d1 | ||
|
|
617f03518a | ||
|
|
7a164fd3a0 | ||
|
|
278939ec58 | ||
|
|
cdaea311a3 | ||
|
|
98c96b6460 | ||
|
|
e0904a0a90 | ||
|
|
3260b00385 | ||
|
|
e67ceae1ad | ||
|
|
f7816cdbfe | ||
|
|
0fc8f6ade3 | ||
|
|
3d4e8affcd | ||
|
|
20ec78d9f0 | ||
|
|
b5e7a8447c | ||
|
|
ef95128ae2 | ||
|
|
ed7ab7b94a | ||
|
|
e12ee95e09 | ||
|
|
5ceb22953c | ||
|
|
ccfc2d8049 | ||
|
|
95afe4608f | ||
|
|
0dc6596dc2 | ||
|
|
b735dd4ab4 | ||
|
|
b42c1dafcc | ||
|
|
5ae4f035c7 | ||
|
|
8168c8eac6 | ||
|
|
c47d2cfada | ||
|
|
8e9682c542 | ||
|
|
5f8fe7d614 | ||
|
|
8e67b7f624 | ||
|
|
5c5d2ec182 | ||
|
|
659172df50 | ||
|
|
555fd46c7e | ||
|
|
a299a366ce | ||
|
|
da1135618e | ||
|
|
4f9fdeeec1 | ||
|
|
1206d8d2eb | ||
|
|
e89e675508 | ||
|
|
af99b2c2a3 | ||
|
|
dc21b95244 | ||
|
|
dddbca472a | ||
|
|
622db4ee4f | ||
|
|
194ab16d7b | ||
|
|
51c0f86ec7 | ||
|
|
6488a4c187 | ||
|
|
50c9b94552 | ||
|
|
4a37796f88 | ||
|
|
f7a3ac2d56 | ||
|
|
2c1c7fad4d | ||
|
|
bffed177f4 | ||
|
|
e46e5784ce | ||
|
|
c1c9b383a0 | ||
|
|
b4a6bc89c2 | ||
|
|
b32835ea61 | ||
|
|
db989bf686 | ||
|
|
37c71a6e1f | ||
|
|
48ada00bdb | ||
|
|
abaf0051de | ||
|
|
45d4296ac5 | ||
|
|
875e2b36cc | ||
|
|
b03b195759 | ||
|
|
227ba42f81 | ||
|
|
e45e46a567 | ||
|
|
0e451162bc | ||
|
|
f8f2be05ce | ||
|
|
01817c143c | ||
|
|
dd0b1a643b | ||
|
|
5dc2858bc9 | ||
|
|
0b21632f8e | ||
|
|
a86e349535 | ||
|
|
2b81ea0d20 | ||
|
|
0b29035484 | ||
|
|
ab1be09d7d | ||
|
|
be90351add | ||
|
|
5c3e99c7f4 | ||
|
|
f6e09f1903 | ||
|
|
fb9e1ed475 | ||
|
|
8210299437 | ||
|
|
1dca72ebfa | ||
|
|
a907da9430 | ||
|
|
4e48c67120 | ||
|
|
28b10a9d6a | ||
|
|
09b688efce | ||
|
|
15c731edca | ||
|
|
d95381387e | ||
|
|
9c836b09f2 | ||
|
|
8f4c2997a0 | ||
|
|
845135531a | ||
|
|
3359e2f64c | ||
|
|
e8be7013ba | ||
|
|
a8459214d1 | ||
|
|
72e70f345b | ||
|
|
407e88d6c8 | ||
|
|
98aecac34c | ||
|
|
1a7c0a4b16 | ||
|
|
ff17bc25d1 | ||
|
|
d96f319d6e | ||
|
|
f522371cee | ||
|
|
d4420eca8a | ||
|
|
3f5747009d | ||
|
|
c511f161df | ||
|
|
f3a506bc0c | ||
|
|
8fb436a5eb | ||
|
|
2253405dcc | ||
|
|
4fb39ce984 | ||
|
|
4bb83d237e | ||
|
|
e9796cc447 | ||
|
|
3fb2d3f5d4 | ||
|
|
2637a8eaf4 | ||
|
|
a7189c57fc | ||
|
|
9af15d3ecd | ||
|
|
0d12643652 | ||
|
|
319b374097 | ||
|
|
d0970ee8b8 | ||
|
|
f97d759db1 | ||
|
|
40cce38330 | ||
|
|
f31a46cb18 | ||
|
|
34d84a36d6 | ||
|
|
8ce7b7120c | ||
|
|
fe9a76ef25 | ||
|
|
60491d89f8 | ||
|
|
743ccf090f | ||
|
|
e4a43389b8 | ||
|
|
8ebbb7802c | ||
|
|
501a2765ac | ||
|
|
4a29fd892a | ||
|
|
e1d4668fd5 | ||
|
|
926f372dc5 | ||
|
|
30386b2e86 | ||
|
|
42481fe51f | ||
|
|
c2ae332718 | ||
|
|
59cd224a03 | ||
|
|
a69f05c881 | ||
|
|
fc043bb3a5 | ||
|
|
c103c8d065 | ||
|
|
3b28c72142 | ||
|
|
41640a7475 | ||
|
|
107e3014ef | ||
|
|
e65fe182e7 | ||
|
|
241533782c | ||
|
|
b7bf1ccafe | ||
|
|
8da4efa899 |
27
.babelrc
Normal file
27
.babelrc
Normal file
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"presets": ["react"],
|
||||
"ignore": ["third_party"],
|
||||
"plugins": [
|
||||
"syntax-trailing-function-commas",
|
||||
"babel-plugin-transform-object-rest-spread",
|
||||
"transform-es2015-template-literals",
|
||||
"transform-es2015-literals",
|
||||
"transform-es2015-arrow-functions",
|
||||
"transform-es2015-block-scoped-functions",
|
||||
["transform-es2015-classes", { "loose": true }],
|
||||
"transform-es2015-object-super",
|
||||
"transform-es2015-shorthand-properties",
|
||||
"transform-es2015-computed-properties",
|
||||
"transform-es2015-for-of",
|
||||
"check-es2015-constants",
|
||||
["transform-es2015-spread", { "loose": true }],
|
||||
"transform-es2015-parameters",
|
||||
["transform-es2015-destructuring", { "loose": true }],
|
||||
"transform-es2015-block-scoping",
|
||||
"transform-es2015-modules-commonjs",
|
||||
"transform-es3-member-expression-literals",
|
||||
"transform-es3-property-literals",
|
||||
"./scripts/babel/transform-object-assign-require",
|
||||
"transform-react-jsx-source"
|
||||
]
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
# We can probably lint these later but not important at this point
|
||||
src/renderers/art
|
||||
src/shared/vendor
|
||||
# But not in docs/_js/examples/*
|
||||
docs/_js/*.js
|
||||
@@ -11,9 +12,6 @@ docs/vendor/bundle/
|
||||
examples/
|
||||
# Ignore built files.
|
||||
build/
|
||||
# react-codemod
|
||||
packages/react-codemod/test/
|
||||
packages/react-codemod/scripts/
|
||||
packages/react-codemod/build/
|
||||
packages/react-codemod/node_modules/
|
||||
vendor/react-dom.js
|
||||
coverage/
|
||||
scripts/bench/bench-*.js
|
||||
vendor/*
|
||||
|
||||
63
.eslintrc
63
.eslintrc
@@ -1,63 +0,0 @@
|
||||
---
|
||||
parser: babel-eslint
|
||||
|
||||
extends:
|
||||
- ./node_modules/fbjs-scripts/eslint/.eslintrc
|
||||
|
||||
plugins:
|
||||
- react
|
||||
- react-internal
|
||||
|
||||
# We're stricter than the default config, mostly. We'll override a few rules and
|
||||
# then enable some React specific ones.
|
||||
rules:
|
||||
accessor-pairs: 0
|
||||
brace-style: [2, 1tbs]
|
||||
comma-dangle: [2, always-multiline]
|
||||
consistent-return: 2
|
||||
dot-location: [2, property]
|
||||
dot-notation: 2
|
||||
eol-last: 2
|
||||
indent: [2, 2, {SwitchCase: 1}]
|
||||
jsx-quotes: [2, prefer-double]
|
||||
no-bitwise: 0
|
||||
no-dupe-class-members: 2
|
||||
no-multi-spaces: 2
|
||||
no-restricted-syntax: [2, WithStatement]
|
||||
no-shadow: 2
|
||||
no-unused-expressions: 2
|
||||
no-unused-vars: [2, {args: none}]
|
||||
quotes: [2, single, avoid-escape]
|
||||
space-after-keywords: 2
|
||||
space-before-blocks: 2
|
||||
# TODO: enable this rule after https://github.com/eslint/eslint/pull/3768 lands
|
||||
space-before-keywords: 0
|
||||
strict: [2, global]
|
||||
|
||||
# JSX
|
||||
# Our transforms set this automatically
|
||||
react/display-name: 0
|
||||
react/jsx-boolean-value: [2, always]
|
||||
react/jsx-no-undef: 2
|
||||
# We don't care to do this
|
||||
react/jsx-sort-prop-types: 0
|
||||
react/jsx-sort-props: 0
|
||||
react/jsx-uses-react: 2
|
||||
react/jsx-uses-vars: 2
|
||||
# It's easier to test some things this way
|
||||
react/no-did-mount-set-state: 0
|
||||
react/no-did-update-set-state: 0
|
||||
# We define multiple components in test files
|
||||
react/no-multi-comp: 0
|
||||
react/no-unknown-property: 2
|
||||
# This isn't useful in our test code
|
||||
react/prop-types: 0
|
||||
react/react-in-jsx-scope: 2
|
||||
react/self-closing-comp: 2
|
||||
# We don't care to do this
|
||||
react/sort-comp: 0
|
||||
react/wrap-multilines: [2, {declaration: false, assignment: false}]
|
||||
|
||||
# CUSTOM RULES
|
||||
# the second argument of warning/invariant should be a literal string
|
||||
react-internal/warning-and-invariant-args: 2
|
||||
74
.eslintrc.js
Normal file
74
.eslintrc.js
Normal file
@@ -0,0 +1,74 @@
|
||||
const OFF = 0;
|
||||
const WARNING = 1;
|
||||
const ERROR = 2;
|
||||
|
||||
module.exports = {
|
||||
parser: 'babel-eslint',
|
||||
|
||||
extends: './node_modules/fbjs-scripts/eslint/.eslintrc.js',
|
||||
|
||||
plugins: [
|
||||
'react',
|
||||
'react-internal',
|
||||
],
|
||||
|
||||
ecmaFeatures: {
|
||||
modules: false
|
||||
},
|
||||
|
||||
// We're stricter than the default config, mostly. We'll override a few rules
|
||||
// and then enable some React specific ones.
|
||||
rules: {
|
||||
'accessor-pairs': OFF,
|
||||
'brace-style': [ERROR, '1tbs'],
|
||||
'comma-dangle': [ERROR, 'always-multiline'],
|
||||
'consistent-return': ERROR,
|
||||
'dot-location': [ERROR, 'property'],
|
||||
'dot-notation': ERROR,
|
||||
'eol-last': ERROR,
|
||||
'eqeqeq': [ERROR, 'allow-null'],
|
||||
'indent': [ERROR, 2, {SwitchCase: 1}],
|
||||
'jsx-quotes': [ERROR, 'prefer-double'],
|
||||
'no-bitwise': OFF,
|
||||
'no-inner-declarations': [ERROR, 'functions'],
|
||||
'no-multi-spaces': ERROR,
|
||||
'no-restricted-syntax': [ERROR, 'WithStatement'],
|
||||
'no-shadow': ERROR,
|
||||
'no-unused-expressions': ERROR,
|
||||
'no-unused-vars': [ERROR, {args: 'none'}],
|
||||
'quotes': [ERROR, 'single', 'avoid-escape'],
|
||||
'space-after-keywords': ERROR,
|
||||
'space-before-blocks': ERROR,
|
||||
'space-before-function-paren': [ERROR, {anonymous: 'never', named: 'never'}],
|
||||
'space-before-keywords': ERROR,
|
||||
'strict': [ERROR, 'global'],
|
||||
|
||||
// React & JSX
|
||||
// Our transforms set this automatically
|
||||
'react/display-name': OFF,
|
||||
'react/jsx-boolean-value': [ERROR, 'always'],
|
||||
'react/jsx-no-undef': ERROR,
|
||||
// We don't care to do this
|
||||
'react/jsx-sort-prop-types': OFF,
|
||||
'react/jsx-sort-props': OFF,
|
||||
'react/jsx-uses-react': ERROR,
|
||||
'react/jsx-uses-vars': ERROR,
|
||||
// It's easier to test some things this way
|
||||
'react/no-did-mount-set-state': OFF,
|
||||
'react/no-did-update-set-state': OFF,
|
||||
// We define multiple components in test files
|
||||
'react/no-multi-comp': OFF,
|
||||
'react/no-unknown-property': OFF,
|
||||
// This isn't useful in our test code
|
||||
'react/prop-types': OFF,
|
||||
'react/react-in-jsx-scope': ERROR,
|
||||
'react/self-closing-comp': ERROR,
|
||||
// We don't care to do this
|
||||
'react/sort-comp': OFF,
|
||||
'react/wrap-multilines': [ERROR, {declaration: false, assignment: false}],
|
||||
|
||||
// CUSTOM RULES
|
||||
// the second argument of warning/invariant should be a literal string
|
||||
'react-internal/warning-and-invariant-args': ERROR,
|
||||
}
|
||||
};
|
||||
37
.flowconfig
Normal file
37
.flowconfig
Normal file
@@ -0,0 +1,37 @@
|
||||
[ignore]
|
||||
|
||||
.*/examples/.*
|
||||
.*/build/.*
|
||||
.*/node_modules/y18n/.*
|
||||
.*/__mocks__/.*
|
||||
.*/__tests__/.*
|
||||
|
||||
# Ignore Docs
|
||||
.*/docs/.*
|
||||
|
||||
[include]
|
||||
|
||||
[libs]
|
||||
./node_modules/fbjs/flow/lib
|
||||
./flow
|
||||
|
||||
[options]
|
||||
module.system=haste
|
||||
|
||||
esproposal.class_static_fields=enable
|
||||
esproposal.class_instance_fields=enable
|
||||
|
||||
experimental.strict_type_args=true
|
||||
|
||||
munge_underscores=false
|
||||
|
||||
suppress_type=$FlowIssue
|
||||
suppress_type=$FlowFixMe
|
||||
suppress_type=$FixMe
|
||||
|
||||
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-4]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*\\)?)\\)
|
||||
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-4]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*\\)?)\\)? #[0-9]+
|
||||
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
|
||||
|
||||
[version]
|
||||
^0.27.0
|
||||
2
.gitignore
vendored
2
.gitignore
vendored
@@ -7,6 +7,7 @@ static
|
||||
_SpecRunner.html
|
||||
__benchmarks__
|
||||
build/
|
||||
coverage/
|
||||
.module-cache
|
||||
*.gem
|
||||
docs/.bundle
|
||||
@@ -24,3 +25,4 @@ chrome-user-data
|
||||
*.sublime-workspace
|
||||
.idea
|
||||
*.iml
|
||||
.vscode
|
||||
|
||||
35
.mailmap
35
.mailmap
@@ -7,47 +7,61 @@ Andreas Savvides <asavvides@twitter.com> <AnSavvides@users.noreply.github.com>
|
||||
Andreas Savvides <asavvides@twitter.com> <andreas@nibbli.com>
|
||||
Andreas Svensson <andreas@syranide.com>
|
||||
Andres Suarez <zertosh@gmail.com>
|
||||
Andrew Kulakov <avk@8xx8.ru>
|
||||
Andrew Sokolov <asokolov@atlassian.com>
|
||||
Anto Aravinth <anto.aravinth.cse@gmail.com>
|
||||
Baraa Hamodi <bhamodi@uwaterloo.ca> <baraa@optimizely.com>
|
||||
Ben Alpert <ben@benalpert.com> <balpert@fb.com>
|
||||
Ben Alpert <ben@benalpert.com> <spicyjalapeno@gmail.com>
|
||||
Ben Halpern <bendhalpern@gmail.com>
|
||||
Ben Newman <bn@cs.stanford.edu> <benjamn@fb.com>
|
||||
Benjamin Woodruff <github@benjam.info> <bgw@fb.com>
|
||||
Bill Fisher <fisherwebdev@gmail.com>
|
||||
Blaine Kasten <blainekasten@gmail.com>
|
||||
Brandon Tilley <brandon@brandontilley.com>
|
||||
Changsoon Bok <winmain@gmail.com>
|
||||
Cheng Lou <chenglou92@gmail.com> <chenglou@fb.com>
|
||||
Christian Oliff <christianoliff@yahoo.com>
|
||||
Christoph Pojer <christoph.pojer@gmail.com>
|
||||
Christoph Pojer <christoph.pojer@gmail.com> <cpojer@fb.com>
|
||||
Connor McSheffrey <c@conr.me> <connor.mcsheffrey@gmail.com>
|
||||
Conor Hastings <hastings.conorm@gmail.com> <conor@socialtables.com>
|
||||
Dan Schafer <dschafer@fb.com>
|
||||
Daniel Gasienica <daniel@gasienica.ch> <daniel@fiftythree.com>
|
||||
Daniel Gasienica <daniel@gasienica.ch> <dgasienica@zynga.com>
|
||||
Daniel Hejl <daniel.hejl@hotmail.com>
|
||||
Daniel Lo Nigro <daniel@dan.cx> <danlo@fb.com>
|
||||
Dave Galbraith <dave@jut.io>
|
||||
Dennis Johnson <songawee@gmail.com>
|
||||
Dmitry Blues <dmitri.blyus@gmail.com>
|
||||
Dongsheng Liu <bellanchor@gmail.com>
|
||||
Erik Harper <eharper@mixpo.com>
|
||||
Evan Coonrod <evan@paloalto.com>
|
||||
Fabio M. Costa <fabiomcosta@gmail.com> <fabs@fb.com>
|
||||
Felix Kling <felix.kling@gmx.net> <fkling@fb.com>
|
||||
François-Xavier Bois <fxbois@gmail.com>
|
||||
Fyodor Ivanishchev <cbrwizard@gmail.com>
|
||||
Gabe Levi <gabelevi@gmail.com> <glevi@fb.com>
|
||||
Geert Pasteels <geert.pasteels@gmail.com>
|
||||
George A Sisco III <george.sisco@gmail.com>
|
||||
Georgii Dolzhykov <thorn.mailbox@gmail.com>
|
||||
Harry Hull <harry.hull1@gmail.com>
|
||||
Hendrik Swanepoel <hendrik.swanepoel@gmail.com>
|
||||
Hyeock Kwon <doublus@gmail.com>
|
||||
Ian Obermiller <ian@obermillers.com> <iano@fb.com>
|
||||
Ilia Pavlenkov <dortonway@gmail.com>
|
||||
Ilyá Belsky <gelias.gbelsky@gmail.com>
|
||||
Ingvar Stepanyan <me@rreverser.com> <rreverser@ubuntu.rreverser.a4.internal.cloudapp.net>
|
||||
Irae Carvalho <irae@irae.pro.br>
|
||||
Ivan Vergiliev <ivan.vergiliev@gmail.com>
|
||||
JJ Weber <jj.weber@gmail.com>
|
||||
Jae Hun Ro <jhr24@duke.edu>
|
||||
Jaime Mingo <j.mingov@3boll.com>
|
||||
James Brantly <james@jbrantly.com>
|
||||
Jan Hancic <jan.hancic@gmail.com> <jan.hancic@caplin.com>
|
||||
Jan Kassens <jan@kassens.net> <jkassens@fb.com>
|
||||
Jason Bonta <jbonta@gmail.com> <jasonbonta@fb.com>
|
||||
Jason Quense <monastic.panic@gmail.com>
|
||||
Jason Trill <jason@jasontrill.com>
|
||||
Jeff Chan <jefftchan@gmail.com> <jeff@quizlet.com>
|
||||
Jeff Morrison <jeff@anafx.com> <Jeff@anafx.com>
|
||||
@@ -56,10 +70,14 @@ Jeff Morrison <jeff@anafx.com> <lbljeffmo@gmail.com>
|
||||
Jeffrey Lin <lin.jeffrey@gmail.com> <jeffreylin@fb.com>
|
||||
Jim Sproch <jsproch@fb.com>
|
||||
Jim Sproch <jsproch@fb.com> <jsfb@github>
|
||||
Jim Sproch <jsproch@fb.com> <none@no-reply.com>
|
||||
Jinwoo Oh <arkist@gmail.com>
|
||||
Jinxiu Lee <lee.jinxiu@gmail.com>
|
||||
Jiyeon Seo <zzzeons@gmail.com>
|
||||
Jon Chester <jonchester@fb.com>
|
||||
Jon Madison <jon@tfftech.com>
|
||||
Jonathan Hsu <jhiswin@gmail.com>
|
||||
Jonathan Persson <persson.jonathan@gmail.com> <jonathan.persson@creuna.se>
|
||||
Jordan Walke <jordojw@gmail.com>
|
||||
Jordan Walke <jordojw@gmail.com> <jordanjcw@fb.com>
|
||||
Joseph Savona <joesavona@fb.com> <josephsavona@users.noreply.github.com>
|
||||
@@ -69,10 +87,12 @@ Jun Wu <quark@lihdd.net>
|
||||
Justin Robison <jrobison151@gmail.com>
|
||||
Keito Uchiyama <projects@keito.me> <keito@fb.com>
|
||||
Kevin Coughlin <kevintcoughlin@gmail.com> <kevincoughlin@tumblr.com>
|
||||
Krystian Karczewski <karcz.k@gmail.com>
|
||||
Kunal Mehta <k.mehta@berkeley.edu> <kunalm@fb.com>
|
||||
Laurence Rowe <l@lrowe.co.uk> <laurence@lrowe.co.uk>
|
||||
Marcin K. <katzoo@github.mail>
|
||||
Mark Anderson <undernewmanagement@users.noreply.github.com>
|
||||
Mark Funk <mfunk86@gmail.com> <mark@boomtownroi.com>
|
||||
Martin Andert <mandert@gmail.com>
|
||||
Mathieu M-Gosselin <mathieumg@gmail.com> <mathieumg@atx33.com>
|
||||
Matsunoki <himkt@klis.tsukuba.ac.jp>
|
||||
@@ -80,7 +100,10 @@ Matt Brookes <matt@brookes.net>
|
||||
Matt Dunn-Rankin <mdunnrankin@gmail.com> <matchu1993@gmail.com>
|
||||
Matt Zabriskie <mzabriskie@gmail.com>
|
||||
Matthew Johnston <matthewjohnston4@outlook.com> <matthewjohnston4@users.noreply.github.com>
|
||||
Matthew Looi <looi.matthew@gmail.com>
|
||||
Mattijs Kneppers <mattijs@arttech.nl>
|
||||
Max Heiber <max.heiber@gmail.com>
|
||||
Max Stoiber <contact@mstoiber.com>
|
||||
Michal Srb <xixixao@seznam.cz> xixixao <xixixao@seznam.cz>
|
||||
Michelle Todd <himichelletodd@gmail.com> <michelle@khanacademy.org>
|
||||
Mihai Parparita <mihai.parparita@gmail.com> <mihai@persistent.info>
|
||||
@@ -101,27 +124,39 @@ Petri Lievonen <plievone@cc.hut.fi>
|
||||
Petri Lievonen <plievone@cc.hut.fi> <petri.lievonen@tkk.fi>
|
||||
Pieter Vanderwerff <me@pieter.io> <pieter@heyday.co.nz>
|
||||
Pouja Nikray <poujanik@gmail.com>
|
||||
Rainer Oviir <roviir@gmail.com> <raineroviir@rainers-MacBook-Pro.local>
|
||||
Ray <ray@tomo.im>
|
||||
Richard Feldman <richard.t.feldman@gmail.com> <richard@noredink.com>
|
||||
Richard Livesey <Livesey7@hotmail.co.uk>
|
||||
Rob Arnold <robarnold@cs.cmu.edu>
|
||||
Robert Binna <rbinna@gmail.com> <speedskater@users.noreply.github.com>
|
||||
Robin Frischmann <robin@rofrischmann.de>
|
||||
Sander Spies <sandermail@gmail.com>
|
||||
Scott Feeney <scott@oceanbase.org> <smf@fb.com>
|
||||
Sebastian Markbåge <sebastian@calyptus.eu> <sema@fb.com>
|
||||
Sergey Rubanov <chi187@gmail.com>
|
||||
Shogun Sea <shogunsea08@gmail.com> <xxin@groupon.com>
|
||||
Soichiro Kawamura <mail@w-st.com>
|
||||
Sota Ohara <ohrst.18@gmail.com>
|
||||
Steven Luscher <react@steveluscher.com> <github@steveluscher.com>
|
||||
Steven Luscher <react@steveluscher.com> <steveluscher@fb.com>
|
||||
Steven Luscher <react@steveluscher.com> <steveluscher@instagram.com>
|
||||
Steven Luscher <react@steveluscher.com> <steveluscher@users.noreply.github.com>
|
||||
Stoyan Stefanov <ssttoo@ymail.com>
|
||||
Tengfei Guo <terryr3rd@yeah.net> <tfguo369@gmail.com>
|
||||
Thomas Aylott <oblivious@subtlegradient.com> <aylott@fb.com>
|
||||
Timothy Yung <yungsters@gmail.com> <yungsters@fb.com>
|
||||
Tomoya Suzuki <tmysz.dev@gmail.com>
|
||||
Vasiliy Loginevskiy <Yeti.or@gmail.com>
|
||||
Vasiliy Loginevskiy <Yeti.or@gmail.com> <yeti-or@yandex-team.ru>
|
||||
Vjeux <vjeuxx@gmail.com>
|
||||
Vjeux <vjeuxx@gmail.com> <vjeux@fb.com>
|
||||
Volkan Unsal <spocksplanet@gmail.com>
|
||||
Wander Wang <wander.wang@ismole.com>
|
||||
Xavier Morel <xmo-odoo@users.noreply.github.com>
|
||||
YouBao Nong <noyobo@gmail.com> <nongyoubao@alibaba-inc.com>
|
||||
Yutaka Nakajima <nakazye@gmail.com>
|
||||
Zach Bruggeman <mail@bruggie.com> <zbruggeman@me.com>
|
||||
iawia002 <z2d@jifangcheng.com> <850127508@qq.com>
|
||||
元彦 <yuanyan@users.noreply.github.com>
|
||||
张敏 <cookfront@gmail.com>
|
||||
|
||||
31
.travis.yml
31
.travis.yml
@@ -1,8 +1,11 @@
|
||||
---
|
||||
sudo: required
|
||||
dist: trusty
|
||||
language: node_js
|
||||
node_js:
|
||||
- 4
|
||||
sudo: false
|
||||
rvm:
|
||||
- 2.2.3
|
||||
cache:
|
||||
directories:
|
||||
- docs/vendor/bundle
|
||||
@@ -54,8 +57,11 @@ script:
|
||||
-F "react-with-addons.min=@build/react-with-addons.min.js" \
|
||||
-F "react-dom=@build/react-dom.js" \
|
||||
-F "react-dom.min=@build/react-dom.min.js" \
|
||||
-F "react-dom-server=@build/react-dom-server.js" \
|
||||
-F "react-dom-server.min=@build/react-dom-server.min.js" \
|
||||
-F "npm-react=@build/packages/react.tgz" \
|
||||
-F "npm-react-dom=@build/packages/react-dom.tgz" \
|
||||
-F "npm-react-native=@build/packages/react-native-renderer.tgz" \
|
||||
-F "commit=$TRAVIS_COMMIT" \
|
||||
-F "date=`git log --format='%ct' -1`" \
|
||||
-F "pull_request=$TRAVIS_PULL_REQUEST" \
|
||||
@@ -63,14 +69,31 @@ script:
|
||||
-F "branch=$TRAVIS_BRANCH" \
|
||||
$SERVER
|
||||
fi
|
||||
elif [ "$TEST_TYPE" = test ]; then
|
||||
set -e
|
||||
# Disabling coverage because it's broken:
|
||||
# https://travis-ci.org/facebook/react/jobs/128163922
|
||||
if false; then
|
||||
./node_modules/.bin/grunt jest:coverage
|
||||
cat ./coverage/lcov.info | ./node_modules/.bin/coveralls
|
||||
else
|
||||
./node_modules/.bin/grunt jest:normal
|
||||
fi
|
||||
echo 'Testing in server-render (HTML generation) mode...'
|
||||
printf '\nmodule.exports.useCreateElement = false;\n' \
|
||||
>> src/renderers/dom/shared/ReactDOMFeatureFlags.js
|
||||
./node_modules/.bin/grunt jest:normal
|
||||
git checkout -- src/renderers/dom/shared/ReactDOMFeatureFlags.js
|
||||
./node_modules/.bin/gulp react:extract-errors
|
||||
else
|
||||
./node_modules/.bin/grunt $TEST_TYPE
|
||||
fi
|
||||
env:
|
||||
matrix:
|
||||
- TEST_TYPE=build
|
||||
- TEST_TYPE=jest
|
||||
- TEST_TYPE=test
|
||||
- TEST_TYPE=lint
|
||||
- TEST_TYPE=flow
|
||||
- TEST_TYPE=build_website
|
||||
global:
|
||||
# SERVER
|
||||
@@ -79,8 +102,8 @@ env:
|
||||
- secure: dkpPW+VnoqC/okhRdV90m36NcyBFhcwEKL3bNFExAwi0dXnFao8RoFlvnwiPlA23h2faROkMIetXlti6Aju08BgUFV+f9aL6vLyU7gUent4Nd3413zf2fwDtXIWIETg6uLnOpSykGKgCAT/hY3Q2oPLqOoY0OxfgnbqwxkxljrE=
|
||||
# GITHUB_TOKEN
|
||||
- secure: EHCyCSKMwKlLHNtcj9nmkRzmiiPE3aDGlPcnEyrDJeRI0SeN/iCXHXfFivR0vFq3vr+9naMBczAR2AEidtps5KbJrKqdZnjPFRbmfVtzWr/LlvVCub3u13Pub6TdKIVBTny1PuZ5X8GvdxMNVig89jGjvzhhWuQRaz3VhJnTra4=
|
||||
matrix:
|
||||
fast_finish: true
|
||||
# COVERALLS_TOKEN
|
||||
- secure: h/cUq+TrUMZOQmkFD7CvuwX0uAwmjIfKZ4qSUzY+QzUtDzOzA0L/XF84xTBq1Q5YYsEiaoF6GxxGCdrLQiBA/ZTd+88UHgeZPMRvi0xG9Q+PeePVOsZMTxy4/WWFgOfSQCk49Mj9zizGgO78i6vxq+SDXMtFHnZ+TpPJIEW6/m0=
|
||||
notifications:
|
||||
irc:
|
||||
use_notice: true
|
||||
|
||||
147
AUTHORS
147
AUTHORS
@@ -1,17 +1,21 @@
|
||||
839 <8398a7@gmail.com>
|
||||
Aaron Franks <aaron.franks@gmail.com>
|
||||
Aaron Gelter <aaron.gelter@harman.com>
|
||||
Adam Bloomston <adam@glitterfram.es>
|
||||
Adam Krebs <amk528@cs.nyu.edu>
|
||||
Adam Mark <adammark75@gmail.com>
|
||||
Adam Solove <asolove@gmail.com>
|
||||
Adam Timberlake <adam.timberlake@gmail.com>
|
||||
Adam Zapletal <adamzap@gmail.com>
|
||||
Ahmad Wali Sidiqi <wali-s@users.noreply.github.com>
|
||||
Alan Plum <me@pluma.io>
|
||||
Alan Souza <alansouzati@gmail.com>
|
||||
Alan deLevie <adelevie@gmail.com>
|
||||
Alastair Hole <afhole@gmail.com>
|
||||
Alex <ultrafez@users.noreply.github.com>
|
||||
Alex Boatwright <drdelambre@gmail.com>
|
||||
Alex Boyd <alex@opengroove.org>
|
||||
Alex Dajani <xelad1@gmail.com>
|
||||
Alex Lopatin <alex@alexlopatin.com>
|
||||
Alex Mykyta <dancingwithcows@gmail.com>
|
||||
Alex Pien <alexpien@gmail.com>
|
||||
@@ -23,22 +27,28 @@ Alexander Tseung <alextsg@gmail.com>
|
||||
Alexandre Gaudencio <shahor@shahor.fr>
|
||||
Alexey Raspopov <avenger7x13@gmail.com>
|
||||
Alexey Shamrin <shamrin@gmail.com>
|
||||
Ali Ukani <ali.ukani@gmail.com>
|
||||
Andre Z Sanchez <andrezacsanchez@gmail.com>
|
||||
Andreas Savvides <asavvides@twitter.com>
|
||||
Andreas Svensson <andreas@syranide.com>
|
||||
Andres Kalle <mjomble@gmail.com>
|
||||
Andres Suarez <zertosh@gmail.com>
|
||||
Andrew Clark <acdlite@me.com>
|
||||
Andrew Cobby <cobbweb@users.noreply.github.com>
|
||||
Andrew Davey <andrew@equin.co.uk>
|
||||
Andrew Henderson <andrew.m.henderson@gmail.com>
|
||||
Andrew Kulakov <avk@8xx8.ru>
|
||||
Andrew Rasmussen <andras@fb.com>
|
||||
Andrew Sokolov <asokolov@atlassian.com>
|
||||
Andrew Zich <azich@fb.com>
|
||||
Andrey Popp <8mayday@gmail.com>
|
||||
Anthony van der Hoorn <anthony.vanderhoorn@gmail.com>
|
||||
Anto Aravinth <anto.aravinth.cse@gmail.com>
|
||||
Antonio Ruberto <anto.ruberto@gmail.com>
|
||||
Antti Ahti <antti.ahti@gmail.com>
|
||||
Anuj Tomar <ankuto@gmail.com>
|
||||
AoDev <AoDev@users.noreply.github.com>
|
||||
April Arcus <april.arcus@gmail.com>
|
||||
Areeb Malik <areeb.malik91@gmail.com>
|
||||
Aria Buckles <aria@khanacademy.org>
|
||||
Aria Stewart <aredridel@dinhe.net>
|
||||
@@ -53,7 +63,9 @@ Battaile Fauber <battaile@gmail.com>
|
||||
Beau Smith <beau@beausmith.com>
|
||||
Ben Alpert <ben@benalpert.com>
|
||||
Ben Anderson <banderson@constantcontact.com>
|
||||
Ben Brooks <ben@benbrooks.net>
|
||||
Ben Foxall <benfoxall@gmail.com>
|
||||
Ben Halpern <bendhalpern@gmail.com>
|
||||
Ben Jaffe <jaffe.ben@gmail.com>
|
||||
Ben Moss <ben@mossity.com>
|
||||
Ben Newman <bn@cs.stanford.edu>
|
||||
@@ -61,16 +73,20 @@ Ben Ripkens <bripkens.dev@gmail.com>
|
||||
Benjamin Keen <ben.keen@gmail.com>
|
||||
Benjamin Leiken <benleiken@gmail.com>
|
||||
Benjamin Woodruff <github@benjam.info>
|
||||
Benjy Cui <benjytrys@gmail.com>
|
||||
Bill Blanchard <bill@plumbdev.com>
|
||||
Bill Fisher <fisherwebdev@gmail.com>
|
||||
Blaine Hatab <jbhatab@gmail.com>
|
||||
Blaine Kasten <blainekasten@gmail.com>
|
||||
Bob Eagan <bob@synapsestudios.com>
|
||||
Bob Ralian <bob.ralian@gmail.com>
|
||||
Bob Renwick <bob.renwick@gmail.com>
|
||||
Bobby <puppybytes@gmail.com>
|
||||
Bojan Mihelac <bmihelac@mihelac.org>
|
||||
Bradley Spaulding <brad.spaulding@gmail.com>
|
||||
Brandon Bloom <brandon@brandonbloom.name>
|
||||
Brandon Tilley <brandon@brandontilley.com>
|
||||
Brenard Cubacub <bcbcb@users.noreply.github.com>
|
||||
Brian Cooke <bri@bricooke.com>
|
||||
Brian Holt <btholt@gmail.com>
|
||||
Brian Hsu <brianhsu@Brians-MacBook-Pro.local>
|
||||
@@ -81,14 +97,19 @@ Brian Rue <brian@rollbar.com>
|
||||
Bruno Škvorc <bruno@skvorc.me>
|
||||
Cam Song <neosoyn@gmail.com>
|
||||
Cam Spiers <camspiers@gmail.com>
|
||||
Cameron Chamberlain <git@camjc.com>
|
||||
Cameron Matheson <cameron@instructure.com>
|
||||
Carter Chung <carterchung@users.noreply.github.com>
|
||||
Cassus Adam Banko <banko.adam@gmail.com>
|
||||
Cat Chen <catchen@fb.com>
|
||||
Cedric Sohrauer <cedric.sohrauer@infopark.de>
|
||||
Cesar William Alvarenga <cesarwbr@gmail.com>
|
||||
Changsoon Bok <winmain@gmail.com>
|
||||
Charles Marsh <charlie@khanacademy.org>
|
||||
Chase Adams <realchaseadams@gmail.com>
|
||||
Cheng Lou <chenglou92@gmail.com>
|
||||
Chitharanjan Das <das.chitharanjan@gmail.com>
|
||||
Chris Bolin <bolin.chris@gmail.com>
|
||||
Chris Grovers <chrisgrovers@users.noreply.github.com>
|
||||
Chris Ha <chriskevinha@gmail.com>
|
||||
Chris Rebert <github@rebertia.com>
|
||||
@@ -96,12 +117,15 @@ Chris Sciolla <csciolla1@gmail.com>
|
||||
Christian Alfoni <christianalfoni@gmail.com>
|
||||
Christian Oliff <christianoliff@yahoo.com>
|
||||
Christian Roman <chroman16@gmail.com>
|
||||
Christoffer Sawicki <christoffer.sawicki@gmail.com>
|
||||
Christoph Pojer <christoph.pojer@gmail.com>
|
||||
Christopher Monsanto <chris@monsan.to>
|
||||
Clay Allsopp <clay.allsopp@gmail.com>
|
||||
Connor McSheffrey <c@conr.me>
|
||||
Conor Hastings <hastings.conorm@gmail.com>
|
||||
Cory House <housecor@gmail.com>
|
||||
Cotton Hou <himcotton@gmail.com>
|
||||
Craig Akimoto <strawbrary@users.noreply.github.com>
|
||||
Cristovao Verstraeten <cristovao@apleasantview.com>
|
||||
Damien Pellier <dpellier@leadformance.com>
|
||||
Dan Abramov <dan.abramov@gmail.com>
|
||||
@@ -111,6 +135,7 @@ Daniel Carlsson <daniel.carlsson.1987@gmail.com>
|
||||
Daniel Cousens <dcousens@users.noreply.github.com>
|
||||
Daniel Friesen <daniel@nadir-seen-fire.com>
|
||||
Daniel Gasienica <daniel@gasienica.ch>
|
||||
Daniel Hejl <daniel.hejl@hotmail.com>
|
||||
Daniel Hejl <hejldaniel@gmail.com>
|
||||
Daniel Lo Nigro <daniel@dan.cx>
|
||||
Daniel Mané <danmane@gmail.com>
|
||||
@@ -121,23 +146,31 @@ Danny Ben-David <dannybd@fb.com>
|
||||
Darcy <smadad@me.com>
|
||||
Daryl Lau <daryl@weak.io>
|
||||
Darío Javier Cravero <dario@uxtemple.com>
|
||||
Dave Galbraith <dave@jut.io>
|
||||
David Baker <djbaker2@gmail.com>
|
||||
David Ed Mellum <david@edmellum.com>
|
||||
David Goldberg <gberg1@users.noreply.github.com>
|
||||
David Granado <davidjgranado@gmail.com>
|
||||
David Greenspan <dgreenspan@alum.mit.edu>
|
||||
David Hellsing <david@aino.se>
|
||||
David Hu <davidhu91@gmail.com>
|
||||
David Khourshid <davidkpiano@gmail.com>
|
||||
David Mininger <dmininger@gmail.com>
|
||||
David Neubauer <davidneub@gmail.com>
|
||||
David Percy <davetp425@gmail.com>
|
||||
Dean Shi <dnshi@users.noreply.github.com>
|
||||
Denis Sokolov <denis@sokolov.cc>
|
||||
Deniss Jacenko <deniss.jacenko+github@gmail.com>
|
||||
Dennis Johnson <djohnson@rallydev.com>
|
||||
Devon Blandin <dblandin@gmail.com>
|
||||
Devon Harvey <devonharvey@gmail.com>
|
||||
Dmitrii Abramov <dmitrii@rheia.us>
|
||||
Dmitriy Rozhkov <dmitriy.rozhkov@xing.com>
|
||||
Dmitry Blues <dmitri.blyus@gmail.com>
|
||||
Dmitry Mazuro <dmitry.mazuro@icloud.com>
|
||||
Domenico Matteo <matteo.domenico@gmail.com>
|
||||
Don Abrams <donabrams@gmail.com>
|
||||
Dongsheng Liu <bellanchor@gmail.com>
|
||||
Dustan Kasten <dustan.kasten@gmail.com>
|
||||
Dustin Getz <dgetz@wingspan.com>
|
||||
Dylan Harrington <dylanharrington@gmail.com>
|
||||
@@ -153,6 +186,7 @@ Eric Schoffstall <contra@wearefractal.com>
|
||||
Erik Harper <eharper@mixpo.com>
|
||||
Espen Hovlandsdal <rexxars@gmail.com>
|
||||
Evan Coonrod <evan@paloalto.com>
|
||||
Evan Vosberg <evanvosberg@urban.to>
|
||||
Fabio M. Costa <fabiomcosta@gmail.com>
|
||||
Federico Rampazzo <frampone@gmail.com>
|
||||
Felipe Oliveira Carvalho <felipekde@gmail.com>
|
||||
@@ -162,11 +196,15 @@ Fernando Correia <fernando@servicero.com>
|
||||
Frankie Bagnardi <f.bagnardi@gmail.com>
|
||||
François-Xavier Bois <fxbois@gmail.com>
|
||||
Fred Zhao <fredz@fb.com>
|
||||
Freddy Rangel <frederick.rangel@gmail.com>
|
||||
Fyodor Ivanishchev <cbrwizard@gmail.com>
|
||||
G Scott Olson <gscottolson@gmail.com>
|
||||
G. Kay Lee <balancetraveller+github@gmail.com>
|
||||
Gabe Levi <gabelevi@gmail.com>
|
||||
Gajus Kuizinas <g.kuizinas@anuary.com>
|
||||
Gareth Nicholson <gareth.nic@gmail.com>
|
||||
Garren Smith <garren.smith@gmail.com>
|
||||
Gavin McQuistin <gavin@kickfiredesign.com>
|
||||
Geert Pasteels <geert.pasteels@gmail.com>
|
||||
Geert-Jan Brits <gbrits@gmail.com>
|
||||
George A Sisco III <george.sisco@gmail.com>
|
||||
@@ -187,39 +225,52 @@ Harshad Sabne <harshadsabne@users.noreply.github.com>
|
||||
Hekar Khani <hekark@gmail.com>
|
||||
Hendrik Swanepoel <hendrik.swanepoel@gmail.com>
|
||||
Henrik Nyh <henrik@nyh.se>
|
||||
Henry Wong <henryw4k@gmail.com>
|
||||
Henry Zhu <hi@henryzoo.com>
|
||||
Hideo Matsumoto <hideo-m@pekeq.com>
|
||||
Hou Chia <kchia87@gmail.com>
|
||||
Huang-Wei Chang <chang.huangwei.01@gmail.com>
|
||||
Hugo Agbonon <hugo@agbonon.fr>
|
||||
Hugo Jobling <me@thisishugo.com>
|
||||
Hyeock Kwon <doublus@gmail.com>
|
||||
Héliton Nordt <hnordt@hnordt.com>
|
||||
Ian Obermiller <ian@obermillers.com>
|
||||
Ignacio Carbajo <icarbajop@gmail.com>
|
||||
Igor Scekic <igorscekic2@gmail.com>
|
||||
Ilia Pavlenkov <dortonway@gmail.com>
|
||||
Ilya Shuklin <ilya.shuklin@gmail.com>
|
||||
Ilyá Belsky <gelias.gbelsky@gmail.com>
|
||||
Ingvar Stepanyan <me@rreverser.com>
|
||||
Irae Carvalho <irae@irae.pro.br>
|
||||
Isaac Salier-Hellendag <isaac@fb.com>
|
||||
Iurii Kucherov <yuyokk@gmail.com>
|
||||
Ivan Kozik <ivan@ludios.org>
|
||||
Ivan Krechetov <ikr@ikr.su>
|
||||
Ivan Vergiliev <ivan.vergiliev@gmail.com>
|
||||
J. Andrew Brassington <jabbrass@zoho.com>
|
||||
J. Renée Beach <splendidnoise@gmail.com>
|
||||
JD Isaacks <jd@jisaacks.com>
|
||||
JJ Weber <jj.weber@gmail.com>
|
||||
JW <JW00000@gmail.com>
|
||||
Jack Zhang <jzhang31191@gmail.com>
|
||||
Jackie Wung <jacquelinewung@gmail.com>
|
||||
Jacob Gable <jacob.gable@gmail.com>
|
||||
Jacob Greenleaf <jake@imgur.com>
|
||||
Jae Hun Ro <jhr24@duke.edu>
|
||||
Jaeho Lee <me@jaeholee.org>
|
||||
Jaime Mingo <j.mingov@3boll.com>
|
||||
Jake Worth <jakeworth82@gmail.com>
|
||||
Jakub Malinowski <jakubmal@gmail.com>
|
||||
James <james@mystrata.com>
|
||||
James Brantly <james@jbrantly.com>
|
||||
James Burnett <jtburnett@tribune.com>
|
||||
James Friend <james@jsdf.co>
|
||||
James Ide <ide@fb.com>
|
||||
James Long <longster@gmail.com>
|
||||
James Pearce <jpearce@fb.com>
|
||||
James Seppi <james.seppi@gmail.com>
|
||||
James South <james_south@hotmail.com>
|
||||
James Wen <jrw2175@columbia.edu>
|
||||
Jamie Wong <jamie.lf.wong@gmail.com>
|
||||
Jamis Charles <jacharles@paypal.com>
|
||||
Jamison Dance <jergason@gmail.com>
|
||||
@@ -245,6 +296,7 @@ Jeff Kolesky <github@kolesky.com>
|
||||
Jeff Morrison <jeff@anafx.com>
|
||||
Jeff Welch <whatthejeff@gmail.com>
|
||||
Jeffrey Lin <lin.jeffrey@gmail.com>
|
||||
Jeremy Fairbank <elpapapollo@gmail.com>
|
||||
Jesse Skinner <jesse@thefutureoftheweb.com>
|
||||
Jignesh Kakadiya <jigneshhk1992@gmail.com>
|
||||
Jim OBrien <jimobrien930@gmail.com>
|
||||
@@ -252,14 +304,19 @@ Jim Sproch <jsproch@fb.com>
|
||||
Jimmy Jea <jimjea@gmail.com>
|
||||
Jing Chen <jingc@fb.com>
|
||||
Jinwoo Oh <arkist@gmail.com>
|
||||
Jinxiu Lee <lee.jinxiu@gmail.com>
|
||||
Jiyeon Seo <zzzeons@gmail.com>
|
||||
Jody McIntyre <scjody@modernduck.com>
|
||||
Joe Critchley <joecritch@gmail.com>
|
||||
Joe Stein <joeaarons@gmail.com>
|
||||
Joel Auterson <joel.auterson@googlemail.com>
|
||||
Johannes Baiter <johannes.baiter@gmail.com>
|
||||
Johannes Emerich <johannes@emerich.de>
|
||||
Johannes Lumpe <johannes@johanneslumpe.de>
|
||||
John Heroy <johnheroy@users.noreply.github.com>
|
||||
John Ryan <tjfryan@fb.com>
|
||||
John Watson <jwatson@fb.com>
|
||||
John-David Dalton <john.david.dalton@gmail.com>
|
||||
Jon Beebe <jon.beebe@daveramsey.com>
|
||||
Jon Chester <jonchester@fb.com>
|
||||
Jon Hester <jon.d.hester@gmail.com>
|
||||
@@ -269,6 +326,7 @@ Jon Tewksbury <jontewks@gmail.com>
|
||||
Jonas Enlund <jonas.enlund@gmail.com>
|
||||
Jonas Gebhardt <jonas@instagram.com>
|
||||
Jonathan Hsu <jhiswin@gmail.com>
|
||||
Jonathan Persson <persson.jonathan@gmail.com>
|
||||
Jordan Harband <ljharb@gmail.com>
|
||||
Jordan Walke <jordojw@gmail.com>
|
||||
Jorrit Schippers <jorrit@ncode.nl>
|
||||
@@ -276,7 +334,9 @@ Joseph Nudell <joenudell@gmail.com>
|
||||
Joseph Savona <joesavona@fb.com>
|
||||
Josh Bassett <josh.bassett@gmail.com>
|
||||
Josh Duck <josh@fb.com>
|
||||
Josh Perez <josh.perez@airbnb.com>
|
||||
Josh Yudaken <yud@instagram.com>
|
||||
Joshua Evans <joshua.evans@quantified.co>
|
||||
Joshua Go <joshuago@gmail.com>
|
||||
Joshua Goldberg <jsgoldberg90@gmail.com>
|
||||
Joshua Ma <me@joshma.com>
|
||||
@@ -285,23 +345,34 @@ Juan Serrano <germ13@users.noreply.github.com>
|
||||
Julen Ruiz Aizpuru <julenx@gmail.com>
|
||||
Julian Viereck <julian.viereck@gmail.com>
|
||||
Julien Bordellier <git@julienbordellier.com>
|
||||
Julio Lopez <ljuliom@gmail.com>
|
||||
Jun Wu <quark@lihdd.net>
|
||||
Juraj Dudak <jdudak@fb.com>
|
||||
Justas Brazauskas <brazauskasjustas@gmail.com>
|
||||
Justin Jaffray <justinjaffray@khanacademy.org>
|
||||
Justin Robison <jrobison151@gmail.com>
|
||||
Justin Woo <moomoowoo@gmail.com>
|
||||
Kale <krydrogen@gmail.com>
|
||||
Kamron Batman <kamronbatman@users.noreply.github.com>
|
||||
Karl Mikkelsen <karl@kingkarl.com>
|
||||
Karpich Dmitry <karpich@gollard.ru>
|
||||
Keito Uchiyama <projects@keito.me>
|
||||
Ken Powers <ken@kenpowers.net>
|
||||
Kent C. Dodds <kent@doddsfamily.us>
|
||||
Kevin Cheng <09chengk@gmail.com>
|
||||
Kevin Coughlin <kevintcoughlin@gmail.com>
|
||||
Kevin Huang <huang.kev@gmail.com>
|
||||
Kevin Lau <thekevlau@gmail.com>
|
||||
Kevin Old <kevin@kevinold.com>
|
||||
Kevin Robinson <krobinson@twitter.com>
|
||||
Kewei Jiang <jkewei328@hotmail.com>
|
||||
Kier Borromeo <seraphipod@gmail.com>
|
||||
KimCoding <jeokrang@hanmail.net>
|
||||
Kirk Steven Hansen <hanski07@kirk-hansens-macbook.local>
|
||||
Kit Randel <kit@nocturne.net.nz>
|
||||
Kohei TAKATA <kt.koheitakata@gmail.com>
|
||||
Koo Youngmin <youngmin@youngminz.kr>
|
||||
Krystian Karczewski <karcz.k@gmail.com>
|
||||
Kunal Mehta <k.mehta@berkeley.edu>
|
||||
Kurt Ruppel <me@kurtruppel.com>
|
||||
Kyle Kelley <rgbkrk@gmail.com>
|
||||
@@ -311,6 +382,7 @@ Laurent Etiemble <laurent.etiemble@monobjc.net>
|
||||
Lee Byron <lee@leebyron.com>
|
||||
Lee Jaeyoung <jaeyoung@monodiary.net>
|
||||
Lei <tendant@gmail.com>
|
||||
Leland Richardson <leland.m.richardson@gmail.com>
|
||||
Leon Fedotov <LeonFedotov@users.noreply.github.com>
|
||||
Leon Yip <lyip1992@users.noreply.github.com>
|
||||
Leonardo YongUk Kim <dalinaum@gmail.com>
|
||||
@@ -318,71 +390,99 @@ Levi Buzolic <levibuzolic@gmail.com>
|
||||
Levi McCallum <levi@levimccallum.com>
|
||||
Lily <qvang.j@gmail.com>
|
||||
Logan Allen <loganfynne@gmail.com>
|
||||
Lovisa Svallingson <lovisasvallingson@gmail.com>
|
||||
Ludovico Fischer <livrerie@gmail.com>
|
||||
Luigy Leon <luichi.19@gmail.com>
|
||||
Luke Horvat <lukehorvat@gmail.com>
|
||||
MIKAMI Yoshiyuki <yoshuki@saikyoline.jp>
|
||||
Maher Beg <maherbeg@gmail.com>
|
||||
Manas <prometheansacrifice@gmail.com>
|
||||
Marcin K. <katzoo@github.mail>
|
||||
Marcin Kwiatkowski <marcin.kwiatkowski@hotmail.com>
|
||||
Marcin Szczepanski <marcins@gmail.com>
|
||||
Mariano Desanze <protronm@gmail.com>
|
||||
Marjan <marjan.georgiev@gmail.com>
|
||||
Mark Anderson <undernewmanagement@users.noreply.github.com>
|
||||
Mark Funk <mark@boomtownroi.com>
|
||||
Mark Funk <mfunk86@gmail.com>
|
||||
Mark Hintz <markohintz@gmail.com>
|
||||
Mark IJbema <markijbema@gmail.com>
|
||||
Mark Murphy <murphy.mark@live.ca>
|
||||
Mark Richardson <echo@fb.com>
|
||||
Mark Rushakoff <mark@influxdb.com>
|
||||
Mark Sun <sunmark14@gmail.com>
|
||||
Marlon Landaverde <milanlandaverde@gmail.com>
|
||||
Marshall Roch <mroch@fb.com>
|
||||
Martin Andert <mandert@gmail.com>
|
||||
Martin Hujer <mhujer@gmail.com>
|
||||
Martin Jul <martin@mjul.com>
|
||||
Martin Konicek <mkonicek@fb.com>
|
||||
Martin Mihaylov <martomi@users.noreply.github.com>
|
||||
Masaki KOBAYASHI <makky.4d6b.3f5@gmail.com>
|
||||
Mathieu M-Gosselin <mathieumg@gmail.com>
|
||||
Mathieu Savy <savy.mathieu@gmail.com>
|
||||
Matias Singers <mail@matiassingers.com>
|
||||
Matsunoki <himkt@klis.tsukuba.ac.jp>
|
||||
Matt Brookes <matt@brookes.net>
|
||||
Matt Dunn-Rankin <mdunnrankin@gmail.com>
|
||||
Matt Harrison <mt.harrison86@gmail.com>
|
||||
Matt Huggins <matt.huggins@gmail.com>
|
||||
Matt Stow <matt.stow@foxsports.com.au>
|
||||
Matt Zabriskie <mzabriskie@gmail.com>
|
||||
Matthew Dapena-Tretter <m@tthewwithanm.com>
|
||||
Matthew Herbst <mherbst@chegg.com>
|
||||
Matthew Hodgson <matthew@matrix.org>
|
||||
Matthew Johnston <matthewjohnston4@outlook.com>
|
||||
Matthew King <mking@users.noreply.github.com>
|
||||
Matthew Looi <looi.matthew@gmail.com>
|
||||
Matthew Miner <matthew@matthewminer.com>
|
||||
Matthias Le Brun <mlbli@me.com>
|
||||
Matti Nelimarkka <matti.nelimarkka@hiit.fi>
|
||||
Mattijs Kneppers <mattijs@arttech.nl>
|
||||
Max F. Albrecht <1@178.is>
|
||||
Max Heiber <max.heiber@gmail.com>
|
||||
Max Stoiber <contact@mstoiber.com>
|
||||
Maxi Ferreira <charca@gmail.com>
|
||||
Maxim Abramchuk <MaximAbramchuck@gmail.com>
|
||||
Merrick Christensen <merrick.christensen@gmail.com>
|
||||
Mert Kahyaoğlu <mertkahyaoglu93@gmail.com>
|
||||
Michael Chan <mijoch@gmail.com>
|
||||
Michael McDermott <michael@mgmcdermott.com>
|
||||
Michael Randers-Pehrson <michael.rp@gmail.com>
|
||||
Michael Ridgway <mridgway@yahoo-inc.com>
|
||||
Michael Warner <MichaelJWarner@hotmail.com>
|
||||
Michael Wiencek <mwtuea@gmail.com>
|
||||
Michael Ziwisky <mikezx@gmail.com>
|
||||
Michal Srb <xixixao@seznam.cz>
|
||||
Michelle Todd <himichelletodd@gmail.com>
|
||||
Mihai Parparita <mihai.parparita@gmail.com>
|
||||
Mike D Pilsbury <mike.pilsbury@gmail.com>
|
||||
Mike Groseclose <mike.groseclose@gmail.com>
|
||||
Mike Nordick <mnordick>
|
||||
Mikolaj Dadela <mikolaj.dadela@hgv-online.de>
|
||||
Miles Johnson <mileswjohnson@gmail.com>
|
||||
Minwe LUO <minwe@yunshipei.com>
|
||||
Miorel Palii <miorel@fb.com>
|
||||
Morhaus <alexandre.kirszenberg@gmail.com>
|
||||
Moshe Kolodny <kolodny.github@gmail.com>
|
||||
Mouad Debbar <mdebbar@fb.com>
|
||||
Murad <rogozhnikoff@users.noreply.github.com>
|
||||
Murray M. Moss <murray@mmoss.name>
|
||||
Nadeesha Cabral <nadeesha.cabral@gmail.com>
|
||||
Naman Goel <naman34@gmail.com>
|
||||
Nate Hunzaker <nate.hunzaker@gmail.com>
|
||||
Nate Lee <nathaniel.jy.lee88@gmail.com>
|
||||
Nathan Smith <NogsMPLS@users.noreply.github.com>
|
||||
Nathan White <nw@nwhite.net>
|
||||
Nee <944316342@qq.com>
|
||||
Neri Marschik <marschik_neri@cyberagent.co.jp>
|
||||
Nguyen Truong Duy <truongduy134@yahoo.com>
|
||||
Nicholas Bergson-Shilcock <me@nicholasbs.net>
|
||||
Nicholas Clawson <nickclaw@users.noreply.github.com>
|
||||
Nick Balestra <nickbalestra@users.noreply.github.com>
|
||||
Nick Fitzgerald <fitzgen@gmail.com>
|
||||
Nick Gavalas <njg57@cornell.edu>
|
||||
Nick Merwin <nick@lemurheavy.com>
|
||||
Nick Presta <nick@nickpresta.ca>
|
||||
Nick Raienko <enaqxx@gmail.com>
|
||||
Nick Thompson <ncthom91@gmail.com>
|
||||
Nick Williams <WickyNilliams@users.noreply.github.com>
|
||||
@@ -398,8 +498,10 @@ Owen Coutts <owenc@fb.com>
|
||||
Pablo Lacerda de Miranda <pablolm@yahoo-inc.com>
|
||||
Paolo Moretti <moretti@users.noreply.github.com>
|
||||
Pascal Hartig <passy@twitter.com>
|
||||
Patrick <info@telepark.de>
|
||||
Patrick Laughlin <patrick@laughl.info>
|
||||
Patrick Stapleton <github@gdi2290.com>
|
||||
Paul Benigeri <me@benigeri.com>
|
||||
Paul Harper <benekastah@gmail.com>
|
||||
Paul O’Shannessy <paul@oshannessy.com>
|
||||
Paul Seiffert <paul.seiffert@gmail.com>
|
||||
@@ -409,19 +511,25 @@ Pete Hunt <floydophone@gmail.com>
|
||||
Peter Blazejewicz <peter.blazejewicz@gmail.com>
|
||||
Peter Cottle <pcottle@fb.com>
|
||||
Peter Jaros <peter.a.jaros@gmail.com>
|
||||
Peter Newnham <peter.newnham@appsbroker.com>
|
||||
Petri Lehtinen <petri@digip.org>
|
||||
Petri Lievonen <plievone@cc.hut.fi>
|
||||
Pieter Vanderwerff <me@pieter.io>
|
||||
Pouja Nikray <poujanik@gmail.com>
|
||||
Prathamesh Sonpatki <csonpatki@gmail.com>
|
||||
Prayag Verma <prayag.verma@gmail.com>
|
||||
Preston Parry <ClimbsRocks@users.noreply.github.com>
|
||||
Rafael <rafael.garcia@clever.com>
|
||||
Rafal Dittwald <rafal.dittwald@gmail.com>
|
||||
Rainer Oviir <roviir@gmail.com>
|
||||
Rajat Sehgal <rajatsehgal1988@gmail.com>
|
||||
Rajiv Tirumalareddy <rajivtreddy@gmail.com>
|
||||
Ram Kaniyur <quadrupleslap@users.noreply.github.com>
|
||||
Randall Randall <randall@randallsquared.com>
|
||||
Ray <ray@tomo.im>
|
||||
Raymond Ha <raymond@shraymonks.com>
|
||||
Reed Loden <reed@reedloden.com>
|
||||
Remko Tronçon <git@el-tramo.be>
|
||||
Richard D. Worth <rdworth@gmail.com>
|
||||
Richard Feldman <richard.t.feldman@gmail.com>
|
||||
Richard Kho <hello@richardkho.com>
|
||||
@@ -429,16 +537,22 @@ Richard Littauer <richard.littauer@gmail.com>
|
||||
Richard Livesey <Livesey7@hotmail.co.uk>
|
||||
Richard Wood <rwoodnz@gmail.com>
|
||||
Rick Beerendonk <rick@beerendonk.com>
|
||||
Rick Ford <rickfordrick@gmail.com>
|
||||
Riley Tomasek <riley.tomasek@gmail.com>
|
||||
Rob Arnold <robarnold@cs.cmu.edu>
|
||||
Robert Binna <rbinna@gmail.com>
|
||||
Robert Knight <robert.knight@mendeley.com>
|
||||
Robert Sedovsek <robert.sedovsek@gmail.com>
|
||||
Robin Berjon <robin@berjon.com>
|
||||
Robin Frischmann <robin@rofrischmann.de>
|
||||
Roman Pominov <rpominov+github@gmail.com>
|
||||
Roman Vanesyan <roman.vanesyan@gmail.com>
|
||||
Russ <russwirtz@gmail.com>
|
||||
Ryan Seddon <seddon.ryan@gmail.com>
|
||||
Sahat Yalkabov <sakhat@gmail.com>
|
||||
Saif Hakim <saif@benchling.com>
|
||||
Saiichi Hashimoto <saiichihashimoto@gmail.com>
|
||||
Sam Beveridge <sbeveridge@saltstack.com>
|
||||
Sam Saccone <samccone@gmail.com>
|
||||
Sam Selikoff <sam.selikoff@gmail.com>
|
||||
Samy Al Zahrani <samy@sadeem.net>
|
||||
@@ -447,7 +561,9 @@ Scott Burch <scott@bulldoginfo.com>
|
||||
Scott Feeney <scott@oceanbase.org>
|
||||
Sean Kinsey <oyvind@fb.com>
|
||||
Sebastian Markbåge <sebastian@calyptus.eu>
|
||||
Sebastian McKenzie <sebmck@gmail.com>
|
||||
Seoh Char <devthewild@gmail.com>
|
||||
Sercan Eraslan <sercan.eraslan@sahibinden.com>
|
||||
Serg <undrdog@yandex.ru>
|
||||
Sergey Generalov <sergey@genbit.ru>
|
||||
Sergey Rubanov <chi187@gmail.com>
|
||||
@@ -456,18 +572,25 @@ Shane O'Sullivan <shaneosullivan1@gmail.com>
|
||||
Shaun Trennery <shaun.trennery@gmail.com>
|
||||
ShihChi Huang <hhuang@netflix.com>
|
||||
Shim Won <marocchino@gmail.com>
|
||||
Shinnosuke Watanabe <snnskwtnb@gmail.com>
|
||||
Shogun Sea <shogunsea08@gmail.com>
|
||||
Shota Kubota <kubosho@users.noreply.github.com>
|
||||
Shripad K <assortmentofsorts@gmail.com>
|
||||
Sibi <psibi2000@gmail.com>
|
||||
Simen Bekkhus <sbekkhus91@gmail.com>
|
||||
Simon Højberg <r.hackr@gmail.com>
|
||||
Simon Welsh <simon@simon.geek.nz>
|
||||
Simone Vittori <hello@simonewebdesign.it>
|
||||
Soichiro Kawamura <mail@w-st.com>
|
||||
Sophia Westwood <sophia@quip.com>
|
||||
Sota Ohara <ohrst.18@gmail.com>
|
||||
Spencer Handley <spencerhandley@gmail.com>
|
||||
Stefan Dombrowski <sdo451@gmail.com>
|
||||
Stephen Murphy <smurphy3@apple.com>
|
||||
Sterling Cobb <sterlingcobb@gmail.com>
|
||||
Steve Baker <_steve_@outlook.com>
|
||||
Steven Luscher <react@steveluscher.com>
|
||||
Steven Vachon <contact@svachon.com>
|
||||
Stoyan Stefanov <ssttoo@ymail.com>
|
||||
Sundeep Malladi <sundeep.malladi@gmail.com>
|
||||
Sunny Juneja <me@sunnyjuneja.com>
|
||||
@@ -478,9 +601,11 @@ Sławomir Laskowski <laskowski.box@gmail.com>
|
||||
Taeho Kim <dittos@gmail.com>
|
||||
Tay Yang Shun <tay.yang.shun@gmail.com>
|
||||
Ted Kim <ted@vcnc.co.kr>
|
||||
Tengfei Guo <terryr3rd@yeah.net>
|
||||
Teodor Szente <teodor98sz@gmail.com>
|
||||
Thomas Aylott <oblivious@subtlegradient.com>
|
||||
Thomas Boyt <thomas.boyt@venmo.com>
|
||||
Thomas Broadley <buriedunderbooks@hotmail.com>
|
||||
Thomas Reggi <socialtr@gmail.com>
|
||||
Thomas Röggla <t.roggla@cwi.nl>
|
||||
Thomas Shaddox <thomas@heyzap.com>
|
||||
@@ -490,12 +615,15 @@ Tienchai Wirojsaksaree <tienchai@fb.com>
|
||||
Tim Routowicz <troutowicz@gmail.com>
|
||||
Tim Schaub <tschaub@users.noreply.github.com>
|
||||
Timothy Yung <yungsters@gmail.com>
|
||||
Timur Carpeev <timuric@users.noreply.github.com>
|
||||
Tobias Reiss <tag+github@basecode.de>
|
||||
Tom Duncalf <tom@tomduncalf.com>
|
||||
Tom Haggie <thaggie@gmail.com>
|
||||
Tom Hauburger <thauburger@gmail.com>
|
||||
Tom MacWright <tom@macwright.org>
|
||||
Tom Occhino <tomocchino@gmail.com>
|
||||
Tomasz Kołodziejski <tkolodziejski@gmail.com>
|
||||
Tomoya Suzuki <tmysz.dev@gmail.com>
|
||||
Tony Spiro <tspiro@tonyspiro.com>
|
||||
Toru Kobayashi <koba0004@gmail.com>
|
||||
Trinh Hoang Nhu <trinhhoangnhu@gmail.com>
|
||||
@@ -506,14 +634,17 @@ Vadim Chernysh <chernysh.vadim@gmail.com>
|
||||
Varun Rau <varunrau@gmail.com>
|
||||
Vasiliy Loginevskiy <Yeti.or@gmail.com>
|
||||
Victor Alvarez <v.alvarez312@gmail.com>
|
||||
Victor Homyakov <vkhomyackov@gmail.com>
|
||||
Victor Koenders <victor.koenders@gmail.com>
|
||||
Ville Immonen <ville.immonen@iki.fi>
|
||||
Vincent Riemer <vincentriemer@gmail.com>
|
||||
Vincent Siao <vincent@asana.com>
|
||||
Vipul A M <vipulnsward@gmail.com>
|
||||
Vitaly Kramskikh <vkramskikh@gmail.com>
|
||||
Vitor Balocco <vitorbal@gmail.com>
|
||||
Vjeux <vjeuxx@gmail.com>
|
||||
Volkan Unsal <spocksplanet@gmail.com>
|
||||
Wander Wang <wander.wang@ismole.com>
|
||||
Wayne Larsen <wayne@larsen.st>
|
||||
WickyNilliams <WickyNilliams@MBA>
|
||||
Wincent Colaiuta <win@wincent.com>
|
||||
@@ -525,9 +656,14 @@ Yasar icli <hello@yasaricli.com>
|
||||
YouBao Nong <noyobo@gmail.com>
|
||||
Yuichi Hagio <yhagio87@gmail.com>
|
||||
Yuriy Dybskiy <yuriy@dybskiy.com>
|
||||
Yutaka Nakajima <nakazye@gmail.com>
|
||||
Yuval Dekel <thedekel@fb.com>
|
||||
Zach Bruggeman <mail@bruggie.com>
|
||||
Zach Ramaekers <zramaekers@gmail.com>
|
||||
Zacharias <zachasme@users.noreply.github.com>
|
||||
Zeke Sikelianos <zeke@sikelianos.com>
|
||||
Zhangjd <zhang.jd@qq.com>
|
||||
adraeth <jerzy.mirecki@gmail.com>
|
||||
arush <arush@ilovebrands.net>
|
||||
brafdlog <brafdlog@gmail.com>
|
||||
chen <kikyous@163.com>
|
||||
@@ -538,14 +674,23 @@ davidxi <davidgraycn@gmail.com>
|
||||
dongmeng.ldm <dongmeng.ldm@alibaba-inc.com>
|
||||
iamchenxin <iamchenxin@gmail.com>
|
||||
iamdoron <doronpagot@gmail.com>
|
||||
iawia002 <z2d@jifangcheng.com>
|
||||
imagentleman <imagentlemail@gmail.com>
|
||||
koh-taka <koh-taka@users.noreply.github.com>
|
||||
kohashi85 <hako584@gmail.com>
|
||||
laiso <laiso@lai.so>
|
||||
leeyoungalias <leeyoungalias@qq.com>
|
||||
li.li <li.li@ele.me>
|
||||
maxprafferty <maxprafferty@gmail.com>
|
||||
rgarifullin <ringarifullin@gmail.com>
|
||||
songawee <dennis@songawee.com>
|
||||
sugarshin <shinsugar@gmail.com>
|
||||
wali-s <ahmad3y2k@hotmail.com>
|
||||
yiminghe <yiminghe@gmail.com>
|
||||
youmoo <youmoolee@gmail.com>
|
||||
zhangjg <jinguozhang@qq.com>
|
||||
zwhitchcox <zwhitchcox@gmail.com>
|
||||
Árni Hermann Reynisson <arnihr@gmail.com>
|
||||
元彦 <yuanyan@users.noreply.github.com>
|
||||
凌恒 <jiakun.dujk@alibaba-inc.com>
|
||||
张敏 <cookfront@gmail.com>
|
||||
|
||||
408
CHANGELOG.md
408
CHANGELOG.md
@@ -1,3 +1,403 @@
|
||||
## 15.3.0 (July 29, 2016)
|
||||
|
||||
### React
|
||||
- Add `React.PureComponent` - a new base class to extend, replacing `react-addons-pure-render-mixin` now that mixins don't work with ES2015 classes. ([@spicyj](https://github.com/spicyj) in [#7195](https://github.com/facebook/react/pull/7195))
|
||||
- Add new warning when modifying `this.props.children`. ([@jimfb](https://github.com/jimfb) in [#7001](https://github.com/facebook/react/pull/7001))
|
||||
- Fixed issue with ref resolution order. ([@gaearon](https://github.com/gaearon) in [#7101](https://github.com/facebook/react/pull/7101))
|
||||
- Warn when mixin is undefined. ([@swaroopsm](https://github.com/swaroopsm) in [#6158](https://github.com/facebook/react/pull/6158))
|
||||
- Downgrade "unexpected batch number" invariant to a warning. ([@spicyj](https://github.com/spicyj) in [#7133](https://github.com/facebook/react/pull/7133))
|
||||
- Validate arguments to `oneOf` and `oneOfType` PropTypes sooner. ([@troydemonbreun](https://github.com/troydemonbreun) in [#6316](https://github.com/facebook/react/pull/6316))
|
||||
- Warn when calling PropTypes directly. ([@Aweary](https://github.com/Aweary) in [#7132](https://github.com/facebook/react/pull/7132), [#7194](https://github.com/facebook/react/pull/7194))
|
||||
- Improve warning when using Maps as children. ([@keyanzhang](https://github.com/keyanzhang) in [#7260](https://github.com/facebook/react/pull/7260))
|
||||
- Add additional type information to the `PropTypes.element` warning. ([@alexzherdev](https://github.com/alexzherdev) in [#7319](https://github.com/facebook/react/pull/7319))
|
||||
- Improve component identification in no-op `setState` warning. ([@keyanzhang](https://github.com/keyanzhang) in [#7326](https://github.com/facebook/react/pull/7326))
|
||||
|
||||
### React DOM
|
||||
- Fix issue with nested server rendering. ([@Aweary](https://github.com/Aweary) in [#7033](https://github.com/facebook/react/pull/7033))
|
||||
- Add `xmlns`, `xmlnsXlink` to supported SVG attributes. ([@salzhrani](https://github.com/salzhrani) in [#6471](https://github.com/facebook/react/pull/6471))
|
||||
- Add `referrerPolicy` to supported HTML attributes. ([@Aweary](https://github.com/Aweary) in [#7274](https://github.com/facebook/react/pull/7274))
|
||||
- Fix issue resulting in `<input type="range">` initial value being rounded. ([@troydemonbreun](https://github.com/troydemonbreun) in [#7251](https://github.com/facebook/react/pull/7251))
|
||||
|
||||
### React Test Renderer
|
||||
- Initial public release of package allowing more focused testing. Install with `npm install react-test-renderer`. ([@spicyj](https://github.com/spicyj) in [#6944](https://github.com/facebook/react/pull/6944), [#7258](https://github.com/facebook/react/pull/7258), [@iamdustan](https://github.com/iamdustan) in [#7362](https://github.com/facebook/react/pull/7362))
|
||||
|
||||
### React Perf Add-on
|
||||
- Fix issue resulting in excessive warnings when encountering an internal measurement error. ([@sassanh](https://github.com/sassanh) in [#7299](https://github.com/facebook/react/pull/7299))
|
||||
|
||||
### React TestUtils Add-on
|
||||
- Implement `type` property on for events created via `TestUtils.Simulate.*`. ([@yaycmyk](https://github.com/yaycmyk) in [#6154](https://github.com/facebook/react/pull/6154))
|
||||
- Fix crash when running TestUtils with the production build of React. ([@gaearon](https://github.com/gaearon) in [#7246](https://github.com/facebook/react/pull/7246))
|
||||
|
||||
|
||||
## 15.2.1 (July 8, 2016)
|
||||
|
||||
### React
|
||||
- Fix errant warning about missing React element. ([@gaearon](https://github.com/gaearon) in [#7193](https://github.com/facebook/react/pull/7193))
|
||||
- Better removal of dev-only code, leading to a small reduction in the minified production bundle size. ([@gaearon](https://github.com/gaearon) in [#7188](https://github.com/facebook/react/pull/7188), [#7189](https://github.com/facebook/react/pull/7189))
|
||||
|
||||
### React DOM
|
||||
- Add stack trace to null input value warning. ([@jimfb](https://github.com/jimfb) in [#7040](https://github.com/facebook/react/pull/7040))
|
||||
- Fix webcomponents example. ([@jalexanderfox](https://github.com/jalexanderfox) in [#7057](https://github.com/facebook/react/pull/7057))
|
||||
- Fix `unstable_renderSubtreeIntoContainer` so that context properly updates when linked to state. ([@gaearon](https://github.com/gaearon) in [#7125](https://github.com/facebook/react/pull/7125))
|
||||
- Improve invariant wording for void elements. ([@starkch](https://github.com/starkch) in [#7066](https://github.com/facebook/react/pull/7066))
|
||||
- Ensure no errors are thrown due to event handlers in server rendering. ([@rricard](https://github.com/rricard) in [#7127](https://github.com/facebook/react/pull/7127))
|
||||
- Fix regression resulting in `value`-less submit and reset inputs removing the browser-default text. ([@zpao](https://github.com/zpao) in [#7197](https://github.com/facebook/react/pull/7197))
|
||||
- Fix regression resulting in empty `name` attribute being added to inputs when not provided. ([@okonet](https://github.com/okonet) in [#7199](https://github.com/facebook/react/pull/7199))
|
||||
- Fix issue with nested server rendering. ([@Aweary](https://github.com/Aweary) in [#7033](https://github.com/facebook/react/pull/7033))
|
||||
|
||||
### React Perf Add-on
|
||||
- Make `ReactPerf.start()` work properly during lifecycle methods. ([@gaearon](https://github.com/gaearon) in [#7208](https://github.com/facebook/react/pull/7208)).
|
||||
|
||||
### React CSSTransitionGroup Add-on
|
||||
- Fix issue resulting in spurious unknown property warnings. ([@batusai513](https://github.com/batusai513) in [#7165](https://github.com/facebook/react/pull/7165))
|
||||
|
||||
### React Native Renderer
|
||||
- Improve error handling in cross-platform touch event handling. ([@yungsters](https://github.com/yungsters) in [#7143](https://github.com/facebook/react/pull/7143))
|
||||
|
||||
|
||||
## 15.2.0 (July 1, 2016)
|
||||
|
||||
### React
|
||||
- Add error codes to production invariants, with links to the view the full error text. ([@keyanzhang](https://github.com/keyanzhang) in [#6948](https://github.com/facebook/react/pull/6948))
|
||||
- Include component stack information in PropType validation warnings. ([@troydemonbreun](https://github.com/troydemonbreun) in [#6398](https://github.com/facebook/react/pull/6398), [@spicyj](https://github.com/spicyj) in [#6771](https://github.com/facebook/react/pull/6771))
|
||||
- Include component stack information in key warnings. ([@keyanzhang](https://github.com/keyanzhang) in [#6799](https://github.com/facebook/react/pull/6799))
|
||||
- Stop validating props at mount time, only validate at element creation. ([@keyanzhang](https://github.com/keyanzhang) in [#6824](https://github.com/facebook/react/pull/6824))
|
||||
- New invariant providing actionable error in missing instance case. ([@yungsters](https://github.com/yungsters) in [#6990](https://github.com/facebook/react/pull/6990))
|
||||
- Add `React.PropTypes.symbol` to support ES2015 Symbols as props. ([@puradox](https://github.com/puradox) in [#6377](https://github.com/facebook/react/pull/6377))
|
||||
- Fix incorrect coercion of ref or key that are undefined in development ([@gaearon](https://github.com/gaearon) in [#6880](https://github.com/facebook/react/pull/6880))
|
||||
- Fix a false positive when passing other element’s props to cloneElement ([@ericmatthys](https://github.com/ericmatthys) in [#6268](https://github.com/facebook/react/pull/6268))
|
||||
- Warn if you attempt to define `childContextTypes` on a functional component ([@Aweary](https://github.com/Aweary) in [#6933](https://github.com/facebook/react/pull/6933))
|
||||
|
||||
### React DOM
|
||||
- Add warning for unknown properties on DOM elements. ([@jimfb](https://github.com/jimfb) in [#6800](https://github.com/facebook/react/pull/6800), [@gm758](https://github.com/gm758) in [#7152](https://github.com/facebook/react/pull/7152))
|
||||
- Properly remove attributes from custom elements. ([@grassator](https://github.com/grassator) in [#6748](https://github.com/facebook/react/pull/6748))
|
||||
- Fix invalid unicode escape in attribute name regular expression. ([@nbjahan](https://github.com/nbjahan) in [#6772](https://github.com/facebook/react/pull/6772))
|
||||
- Add `onLoad` handling to `<link>` element. ([@roderickhsiao](https://github.com/roderickhsiao) in [#6815](https://github.com/facebook/react/pull/6815))
|
||||
- Add `onError` handling to `<source>` element. ([@wadahiro](https://github.com/wadahiro) in [#6941](https://github.com/facebook/react/pull/6941))
|
||||
- Handle `value` and `defaultValue` more accurately in the DOM. ([@jimfb](https://github.com/jimfb) in [#6406](https://github.com/facebook/react/pull/6406))
|
||||
- Fix events issue in environments with mutated `Object.prototype`. ([@Weizenlol](https://github.com/Weizenlol) in [#6886](https://github.com/facebook/react/pull/6886))
|
||||
- Fix issue where `is="null"` ended up in the DOM in Firefox. ([@darobin](https://github.com/darobin) in [#6896](https://github.com/facebook/react/pull/6896))
|
||||
- Improved performance of text escaping by using [escape-html](https://github.com/component/escape-html). ([@aickin](https://github.com/aickin) in [#6862](https://github.com/facebook/react/pull/6862))
|
||||
- Fix issue with `dangerouslySetInnerHTML` and SVG in Internet Explorer. ([@joshhunt](https://github.com/joshhunt) in [#6982](https://github.com/facebook/react/pull/6982))
|
||||
- Fix issue with `<textarea>` placeholders. ([@jimfb](https://github.com/jimfb) in [#7002](https://github.com/facebook/react/pull/7002))
|
||||
- Fix controlled vs uncontrolled detection of `<input type="radio"/>`. ([@jimfb](https://github.com/jimfb) in [#7003](https://github.com/facebook/react/pull/7003))
|
||||
- Improve performance of updating text content. ([@trueadm](https://github.com/trueadm) in [#7005](https://github.com/facebook/react/pull/7005))
|
||||
- Ensure controlled `<select>` components behave the same on initial render as they do on updates. ([@yiminghe](https://github.com/yiminghe) in [#5362](https://github.com/facebook/react/pull/5362))
|
||||
|
||||
### React Perf Add-on
|
||||
- Add `isRunning()` API. ([@nfcampos](https://github.com/nfcampos) in [#6763](https://github.com/facebook/react/pull/6763))
|
||||
- Improve accuracy of lifecycle hook timing. ([@gaearon](https://github.com/gaearon) in [#6858](https://github.com/facebook/react/pull/6858))
|
||||
- Fix internal errors when using ReactPerf with portal components. ([@gaearon](https://github.com/gaearon) in [#6860](https://github.com/facebook/react/pull/6860))
|
||||
- Fix performance regression. ([@spicyj](https://github.com/spicyj) in [#6770](https://github.com/facebook/react/pull/6770))
|
||||
- Add warning that ReactPerf is not enabled in production. ([@sashashakun](https://github.com/sashashakun) in [#6884](https://github.com/facebook/react/pull/6884))
|
||||
|
||||
### React CSSTransitionGroup Add-on
|
||||
- Fix timing issue with `null` node. ([@keyanzhang](https://github.com/keyanzhang) in [#6958](https://github.com/facebook/react/pull/6958))
|
||||
|
||||
### React Native Renderer
|
||||
- Dependencies on React Native modules use CommonJS requires instead of providesModule. ([@davidaurelio](https://github.com/davidaurelio) in [#6715](https://github.com/facebook/react/pull/6715))
|
||||
|
||||
|
||||
## 15.1.0 (May 20, 2016)
|
||||
|
||||
### React
|
||||
- Ensure we're using the latest `object-assign`, which has protection against a non-spec-compliant native `Object.assign`. ([@zpao](https://github.com/zpao) in [#6681](https://github.com/facebook/react/pull/6681))
|
||||
- Add a new warning to communicate that `props` objects passed to `createElement` must be plain objects. ([@richardscarrott](https://github.com/richardscarrott) in [#6134](https://github.com/facebook/react/pull/6134))
|
||||
- Fix a batching bug resulting in some lifecycle methods incorrectly being called multiple times. ([@spicyj](https://github.com/spicyj) in [#6650](https://github.com/facebook/react/pull/6650))
|
||||
|
||||
### React DOM
|
||||
- Fix regression in custom elements support. ([@jscissr](https://github.com/jscissr) in [#6570](https://github.com/facebook/react/pull/6570))
|
||||
- Stop incorrectly warning about using `onScroll` event handler with server rendering. ([@Aweary](https://github.com/Aweary) in [#6678](https://github.com/facebook/react/pull/6678))
|
||||
- Fix grammar in the controlled input warning. ([@jakeboone02](https://github.com/jakeboone02) in [#6657](https://github.com/facebook/react/pull/6657))
|
||||
- Fix issue preventing `<object>` nodes from being able to read `<param>` nodes in IE. ([@syranide](https://github.com/syranide) in [#6691](https://github.com/facebook/react/pull/6691))
|
||||
- Fix issue resulting in crash when using experimental error boundaries with server rendering. ([@jimfb](https://github.com/jimfb) in [#6694](https://github.com/facebook/react/pull/6694))
|
||||
- Add additional information to the controlled input warning. ([@borisyankov](https://github.com/borisyankov) in [#6341](https://github.com/facebook/react/pull/6341))
|
||||
|
||||
### React Perf Add-on
|
||||
- Completely rewritten to collect data more accurately and to be easier to maintain. ([@gaearon](https://github.com/gaearon) in [#6647](https://github.com/facebook/react/pull/6647), [#6046](https://github.com/facebook/react/pull/6046))
|
||||
|
||||
### React Native Renderer
|
||||
- Remove some special cases for platform specific branching. ([@sebmarkbage](https://github.com/sebmarkbage) in [#6660](https://github.com/facebook/react/pull/6660))
|
||||
- Remove use of `merge` utility. ([@sebmarkbage](https://github.com/sebmarkbage) in [#6634](https://github.com/facebook/react/pull/6634))
|
||||
- Renamed some modules to better indicate usage ([@javache](https://github.com/javache) in [#6643](https://github.com/facebook/react/pull/6643))
|
||||
|
||||
|
||||
## 15.0.2 (April 29, 2016)
|
||||
|
||||
### React
|
||||
- Removed extraneous files from npm package. ([@gaearon](https://github.com/gaearon) in [#6388](https://github.com/facebook/react/pull/6388))
|
||||
- Ensure `componentWillUnmount` is only called once. ([@jimfb](https://github.com/jimfb) in [#6613](https://github.com/facebook/react/pull/6613))
|
||||
|
||||
### ReactDOM
|
||||
- Fixed bug resulting in disabled buttons responding to mouse events in IE. ([@nhunzaker](https://github.com/nhunzaker) in [#6215](https://github.com/facebook/react/pull/6215))
|
||||
- Ensure `<option>`s are correctly selected when inside `<optgroup>`. ([@trevorsmith](https://github.com/trevorsmith) in [#6442](https://github.com/facebook/react/pull/6442))
|
||||
- Restore support for rendering into a shadow root. ([@Wildhoney](https://github.com/Wildhoney) in [#6462](https://github.com/facebook/react/pull/6462))
|
||||
- Ensure nested `<body>` elements are caught when warning for invalid markup. ([@keyanzhang](https://github.com/keyanzhang) in [#6469](https://github.com/facebook/react/pull/6469))
|
||||
- Improve warning when encountering multiple elements with the same key. ([@hkal](https://github.com/hkal) in [#6500](https://github.com/facebook/react/pull/6500))
|
||||
|
||||
### React TestUtils Add-on
|
||||
- Ensure that functional components do not have an owner. ([@gaearon](https://github.com/gaearon) in [#6362](https://github.com/facebook/react/pull/6362))
|
||||
- Handle invalid arguments to `scryRenderedDOMComponentsWithClass` better. ([@ipeters90](https://github.com/ipeters90) in [#6529](https://github.com/facebook/react/pull/6529))
|
||||
|
||||
### React Perf Add-on
|
||||
- Ignore DOM operations that occur outside the batch operation. ([@gaearon](https://github.com/gaearon) in [#6516](https://github.com/facebook/react/pull/6516))
|
||||
|
||||
### React Native Renderer
|
||||
- These files are now shipped inside the React npm package. They have no impact on React core or ReactDOM.
|
||||
|
||||
|
||||
## 15.0.1 (April 8, 2016)
|
||||
|
||||
### React
|
||||
- Restore `React.__spread` API to unbreak code compiled with some tools making use of this undocumented API. It is now officially deprecated. ([@zpao](https://github.com/zpao) in [#6444](https://github.com/facebook/react/pull/6444))
|
||||
|
||||
### ReactDOM
|
||||
- Fixed issue resulting in loss of cursor position in controlled inputs. ([@spicyj](https://github.com/spicyj) in [#6449](https://github.com/facebook/react/pull/6449))
|
||||
|
||||
|
||||
## 15.0.0 (April 7, 2016)
|
||||
|
||||
### Major changes
|
||||
|
||||
- **Initial render now uses `document.createElement` instead of generating HTML.** Previously we would generate a large string of HTML and then set `node.innerHTML`. At the time, this was decided to be faster than using `document.createElement` for the majority of cases and browsers that we supported. Browsers have continued to improve and so overwhelmingly this is no longer true. By using `createElement` we can make other parts of React faster. ([@spicyj](https://github.com/spicyj) in [#5205](https://github.com/facebook/react/pull/5205))
|
||||
- **`data-reactid` is no longer on every node.** As a result of using `document.createElement`, we can prime the node cache as we create DOM nodes, allowing us to skip a potential lookup (which used the `data-reactid` attribute). Root nodes will have a `data-reactroot` attribute and server generated markup will still contain `data-reactid`. ([@spicyj](https://github.com/spicyj) in [#5205](https://github.com/facebook/react/pull/5205))
|
||||
- **No more extra `<span>`s.** ReactDOM will now render plain text nodes interspersed with comment nodes that are used for demarcation. This gives us the same ability to update individual pieces of text, without creating extra nested nodes. If you were targeting these `<span>`s in your CSS, you will need to adjust accordingly. You can always render them explicitly in your components. ([@mwiencek](https://github.com/mwiencek) in [#5753](https://github.com/facebook/react/pull/5753))
|
||||
- **Rendering `null` now uses comment nodes.** Previously `null` would render to `<noscript>` elements. We now use comment nodes. This may cause issues if making use of `:nth-child` CSS selectors. While we consider this rendering behavior an implementation detail of React, it's worth noting the potential problem. ()[@spicyj](https://github.com/spicyj) in [#5451](https://github.com/facebook/react/pull/5451))
|
||||
- **Functional components can now return `null`.** We added support for [defining stateless components as functions](/react/blog/2015/09/10/react-v0.14-rc1.html#stateless-function-components) in React 0.14. However, React 0.14 still allowed you to define a class component without extending `React.Component` or using `React.createClass()`, so [we couldn’t reliably tell if your component is a function or a class](https://github.com/facebook/react/issues/5355), and did not allow returning `null` from it. This issue is solved in React 15, and you can now return `null` from any component, whether it is a class or a function. ([@jimfb](https://github.com/jimfb) in [#5884](https://github.com/facebook/react/pull/5884))
|
||||
- **Improved SVG support.** All SVG tags are now fully supported. (Uncommon SVG tags are not present on the `React.DOM` element helper, but JSX and `React.createElement` work on all tag names.) All SVG attributes that are implemented by the browsers should be supported too. If you find any attributes that we have missed, please [let us know in this issue](https://github.com/facebook/react/issues/1657). ([@zpao](https://github.com/zpao) in [#6243](https://github.com/facebook/react/pull/6243))
|
||||
|
||||
### Breaking changes
|
||||
|
||||
- **No more extra `<span>`s.**
|
||||
- **`React.cloneElement()` now resolves `defaultProps`.** We fixed a bug in `React.cloneElement()` that some components may rely on. If some of the `props` received by `cloneElement()` are `undefined`, it used to return an element with `undefined` values for those props. We’re changing it to be consistent with `createElement()`. Now any `undefined` props passed to `cloneElement()` are resolved to the corresponding component’s `defaultProps`. ([@truongduy134](https://github.com/truongduy134) in [#5997](https://github.com/facebook/react/pull/5997))
|
||||
- **`ReactPerf.getLastMeasurements()` is opaque.** This change won’t affect applications but may break some third-party tools. We are [revamping `ReactPerf` implementation](https://github.com/facebook/react/pull/6046) and plan to release it during the 15.x cycle. The internal performance measurement format is subject to change so, for the time being, we consider the return value of `ReactPerf.getLastMeasurements()` an opaque data structure that should not be relied upon. ([@gaearon](https://github.com/gaearon) in [#6286](https://github.com/facebook/react/pull/6286))
|
||||
|
||||
#### Removed deprecations
|
||||
|
||||
These deprecations were introduced nine months ago in v0.14 with a warning and are removed:
|
||||
|
||||
- Deprecated APIs are removed from the `React` top-level export: `findDOMNode`, `render`, `renderToString`, `renderToStaticMarkup`, and `unmountComponentAtNode`. As a reminder, they are now available on `ReactDOM` and `ReactDOMServer`. ([@jimfb](https://github.com/jimfb) in [#5832](https://github.com/facebook/react/pull/5832))
|
||||
- Deprecated addons are removed: `batchedUpdates` and `cloneWithProps`. ([@jimfb](https://github.com/jimfb) in [#5859](https://github.com/facebook/react/pull/5859), [@zpao](https://github.com/zpao) in [#6016](https://github.com/facebook/react/pull/6016))
|
||||
- Deprecated component instance methods are removed: `setProps`, `replaceProps`, and `getDOMNode`. ([@jimfb](https://github.com/jimfb) in [#5570](https://github.com/facebook/react/pull/5570))
|
||||
- Deprecated CommonJS `react/addons` entry point is removed. As a reminder, you should use separate `react-addons-*` packages instead. This only applies if you use the CommonJS builds. ([@gaearon](https://github.com/gaearon) in [#6285](https://github.com/facebook/react/pull/6285))
|
||||
- Passing `children` to void elements like `<input>` was deprecated, and now throws an error. ([@jonhester](https://github.com/jonhester) in [#3372](https://github.com/facebook/react/pull/3372))
|
||||
- React-specific properties on DOM `refs` (e.g. `this.refs.div.props`) were deprecated, and are removed now. ([@jimfb](https://github.com/jimfb) in [#5495](https://github.com/facebook/react/pull/5495))
|
||||
|
||||
### New deprecations, introduced with a warning
|
||||
|
||||
Each of these changes will continue to work as before with a new warning until the release of React 16 so you can upgrade your code gradually.
|
||||
|
||||
- `LinkedStateMixin` and `valueLink` are now deprecated due to very low popularity. If you need this, you can use a wrapper component that implements the same behavior: [react-linked-input](https://www.npmjs.com/package/react-linked-input). ([@jimfb](https://github.com/jimfb) in [#6127](https://github.com/facebook/react/pull/6127))
|
||||
- Future versions of React will treat `<input value={null}>` as a request to clear the input. However, React 0.14 has been ignoring `value={null}`. React 15 warns you on a `null` input value and offers you to clarify your intention. To fix the warning, you may explicitly pass an empty string to clear a controlled input, or pass `undefined` to make the input uncontrolled. ([@antoaravinth](https://github.com/antoaravinth) in [#5048](https://github.com/facebook/react/pull/5048))
|
||||
- `ReactPerf.printDOM()` was renamed to `ReactPerf.printOperations()`, and `ReactPerf.getMeasurementsSummaryMap()` was renamed to `ReactPerf.getWasted()`. ([@gaearon](https://github.com/gaearon) in [#6287](https://github.com/facebook/react/pull/6287))
|
||||
|
||||
### New helpful warnings
|
||||
|
||||
- If you use a minified copy of the _development_ build, React DOM kindly encourages you to use the faster production build instead. ([@spicyj](https://github.com/spicyj) in [#5083](https://github.com/facebook/react/pull/5083))
|
||||
- React DOM: When specifying a unit-less CSS value as a string, a future version will not add `px` automatically. This version now warns in this case (ex: writing `style={{'{{'}}width: '300'}}`. Unitless *number* values like `width: 300` are unchanged. ([@pluma](https://github.com/pluma) in [#5140](https://github.com/facebook/react/pull/5140))
|
||||
- Synthetic Events will now warn when setting and accessing properties (which will not get cleared appropriately), as well as warn on access after an event has been returned to the pool. ([@kentcdodds](https://github.com/kentcdodds) in [#5940](https://github.com/facebook/react/pull/5940) and [@koba04](https://github.com/koba04) in [#5947](https://github.com/facebook/react/pull/5947))
|
||||
- Elements will now warn when attempting to read `ref` and `key` from the props. ([@prometheansacrifice](https://github.com/prometheansacrifice) in [#5744](https://github.com/facebook/react/pull/5744))
|
||||
- React will now warn if you pass a different `props` object to `super()` in the constructor. ([@prometheansacrifice](https://github.com/prometheansacrifice) in [#5346](https://github.com/facebook/react/pull/5346))
|
||||
- React will now warn if you call `setState()` inside `getChildContext()`. ([@raineroviir](https://github.com/raineroviir) in [#6121](https://github.com/facebook/react/pull/6121))
|
||||
- React DOM now attempts to warn for mistyped event handlers on DOM elements, such as `onclick` which should be `onClick`. ([@ali](https://github.com/ali) in [#5361](https://github.com/facebook/react/pull/5361))
|
||||
- React DOM now warns about `NaN` values in `style`. ([@jontewks](https://github.com/jontewks) in [#5811](https://github.com/facebook/react/pull/5811))
|
||||
- React DOM now warns if you specify both `value` and `defaultValue` for an input. ([@mgmcdermott](https://github.com/mgmcdermott) in [#5823](https://github.com/facebook/react/pull/5823))
|
||||
- React DOM now warns if an input switches between being controlled and uncontrolled. ([@TheBlasfem](https://github.com/TheBlasfem) in [#5864](https://github.com/facebook/react/pull/5864))
|
||||
- React DOM now warns if you specify `onFocusIn` or `onFocusOut` handlers as they are unnecessary in React. ([@jontewks](https://github.com/jontewks) in [#6296](https://github.com/facebook/react/pull/6296))
|
||||
- React now prints a descriptive error message when you pass an invalid callback as the last argument to `ReactDOM.render()`, `this.setState()`, or `this.forceUpdate()`. ([@conorhastings](https://github.com/conorhastings) in [#5193](https://github.com/facebook/react/pull/5193) and [@gaearon](https://github.com/gaearon) in [#6310](https://github.com/facebook/react/pull/6310))
|
||||
- Add-Ons: `TestUtils.Simulate()` now prints a helpful message if you attempt to use it with shallow rendering. ([@conorhastings](https://github.com/conorhastings) in [#5358](https://github.com/facebook/react/pull/5358))
|
||||
- PropTypes: `arrayOf()` and `objectOf()` provide better error messages for invalid arguments. ([@chicoxyzzy](https://github.com/chicoxyzzy) in [#5390](https://github.com/facebook/react/pull/5390))
|
||||
|
||||
### Notable bug fixes
|
||||
|
||||
- Fixed multiple small memory leaks. ([@spicyj](https://github.com/spicyj) in [#4983](https://github.com/facebook/react/pull/4983) and [@victor-homyakov](https://github.com/victor-homyakov) in [#6309](https://github.com/facebook/react/pull/6309))
|
||||
- Input events are handled more reliably in IE 10 and IE 11; spurious events no longer fire when using a placeholder. ([@jquense](https://github.com/jquense) in [#4051](https://github.com/facebook/react/pull/4051))
|
||||
- The `componentWillReceiveProps()` lifecycle method is now consistently called when `context` changes. ([@milesj](https://github.com/milesj) in [#5787](https://github.com/facebook/react/pull/5787))
|
||||
- `React.cloneElement()` doesn’t append slash to an existing `key` when used inside `React.Children.map()`. ([@ianobermiller](https://github.com/ianobermiller) in [#5892](https://github.com/facebook/react/pull/5892))
|
||||
- React DOM now supports the `cite` and `profile` HTML attributes. ([@AprilArcus](https://github.com/AprilArcus) in [#6094](https://github.com/facebook/react/pull/6094) and [@saiichihashimoto](https://github.com/saiichihashimoto) in [#6032](https://github.com/facebook/react/pull/6032))
|
||||
- React DOM now supports `cssFloat`, `gridRow` and `gridColumn` CSS properties. ([@stevenvachon](https://github.com/stevenvachon) in [#6133](https://github.com/facebook/react/pull/6133) and [@mnordick](https://github.com/mnordick) in [#4779](https://github.com/facebook/react/pull/4779))
|
||||
- React DOM now correctly handles `borderImageOutset`, `borderImageWidth`, `borderImageSlice`, `floodOpacity`, `strokeDasharray`, and `strokeMiterlimit` as unitless CSS properties. ([@rofrischmann](https://github.com/rofrischmann) in [#6210](https://github.com/facebook/react/pull/6210) and [#6270](https://github.com/facebook/react/pull/6270))
|
||||
- React DOM now supports the `onAnimationStart`, `onAnimationEnd`, `onAnimationIteration`, `onTransitionEnd`, and `onInvalid` events. Support for `onLoad` has been added to `object` elements. ([@tomduncalf](https://github.com/tomduncalf) in [#5187](https://github.com/facebook/react/pull/5187), [@milesj](https://github.com/milesj) in [#6005](https://github.com/facebook/react/pull/6005), and [@ara4n](https://github.com/ara4n) in [#5781](https://github.com/facebook/react/pull/5781))
|
||||
- React DOM now defaults to using DOM attributes instead of properties, which fixes a few edge case bugs. Additionally the nullification of values (ex: `href={null}`) now results in the forceful removal, no longer trying to set to the default value used by browsers in the absence of a value. ([@syranide](https://github.com/syranide) in [#1510](https://github.com/facebook/react/pull/1510))
|
||||
- React DOM does not mistakingly coerce `children` to strings for Web Components. ([@jimfb](https://github.com/jimfb) in [#5093](https://github.com/facebook/react/pull/5093))
|
||||
- React DOM now correctly normalizes SVG `<use>` events. ([@edmellum](https://github.com/edmellum) in [#5720](https://github.com/facebook/react/pull/5720))
|
||||
- React DOM does not throw if a `<select>` is unmounted while its `onChange` handler is executing. ([@sambev](https://github.com/sambev) in [#6028](https://github.com/facebook/react/pull/6028))
|
||||
- React DOM does not throw in Windows 8 apps. ([@Andrew8xx8](https://github.com/Andrew8xx8) in [#6063](https://github.com/facebook/react/pull/6063))
|
||||
- React DOM does not throw when asynchronously unmounting a child with a `ref`. ([@yiminghe](https://github.com/yiminghe) in [#6095](https://github.com/facebook/react/pull/6095))
|
||||
- React DOM no longer forces synchronous layout because of scroll position tracking. ([@syranide](https://github.com/syranide) in [#2271](https://github.com/facebook/react/pull/2271))
|
||||
- `Object.is` is used in a number of places to compare values, which leads to fewer false positives, especially involving `NaN`. In particular, this affects the `shallowCompare` add-on. ([@chicoxyzzy](https://github.com/chicoxyzzy) in [#6132](https://github.com/facebook/react/pull/6132))
|
||||
- Add-Ons: ReactPerf no longer instruments adding or removing an event listener because they don’t really touch the DOM due to event delegation. ([@antoaravinth](https://github.com/antoaravinth) in [#5209](https://github.com/facebook/react/pull/5209))
|
||||
|
||||
### Other improvements
|
||||
|
||||
- React now uses `loose-envify` instead of `envify` so it installs fewer transitive dependencies. ([@qerub](https://github.com/qerub) in [#6303](https://github.com/facebook/react/pull/6303))
|
||||
- Shallow renderer now exposes `getMountedInstance()`. ([@glenjamin](https://github.com/glenjamin) in [#4918](https://github.com/facebook/react/pull/4918))
|
||||
- Shallow renderer now returns the rendered output from `render()`. ([@simonewebdesign](https://github.com/simonewebdesign) in [#5411](https://github.com/facebook/react/pull/5411))
|
||||
- React no longer depends on ES5 *shams* for `Object.create` and `Object.freeze` in older environments. It still, however, requires ES5 *shims* in those environments. ([@dgreensp](https://github.com/dgreensp) in [#4959](https://github.com/facebook/react/pull/4959))
|
||||
- React DOM now allows `data-` attributes with names that start with numbers. ([@nLight](https://github.com/nLight) in [#5216](https://github.com/facebook/react/pull/5216))
|
||||
- React DOM adds a new `suppressContentEditableWarning` prop for components like [Draft.js](https://facebook.github.io/draft-js/) that intentionally manage `contentEditable` children with React. ([@mxstbr](https://github.com/mxstbr) in [#6112](https://github.com/facebook/react/pull/6112))
|
||||
- React improves the performance for `createClass()` on complex specs. ([@spicyj](https://github.com/spicyj) in [#5550](https://github.com/facebook/react/pull/5550))
|
||||
|
||||
|
||||
## 0.14.8 (March 29, 2016)
|
||||
|
||||
### React
|
||||
- Fixed memory leak when rendering on the server
|
||||
|
||||
## 0.14.7 (January 28, 2016)
|
||||
|
||||
### React
|
||||
- Fixed bug with `<option>` tags when using `dangerouslySetInnerHTML`
|
||||
- Fixed memory leak in synthetic event system
|
||||
|
||||
### React TestUtils Add-on
|
||||
- Fixed bug with calling `setState` in `componentWillMount` when using shallow rendering
|
||||
|
||||
|
||||
## 0.14.6 (January 6, 2016)
|
||||
|
||||
### React
|
||||
- Updated `fbjs` dependency to pick up change affecting handling of undefined document.
|
||||
|
||||
|
||||
## 0.14.5 (December 29, 2015)
|
||||
|
||||
### React
|
||||
- More minor internal changes for better compatibility with React Native
|
||||
|
||||
|
||||
## 0.14.4 (December 29, 2015)
|
||||
|
||||
### React
|
||||
- Minor internal changes for better compatibility with React Native
|
||||
|
||||
### React DOM
|
||||
- The `autoCapitalize` and `autoCorrect` props are now set as attributes in the DOM instead of properties to improve cross-browser compatibility
|
||||
- Fixed bug with controlled `<select>` elements not handling updates properly
|
||||
|
||||
### React Perf Add-on
|
||||
- Some DOM operation names have been updated for clarity in the output of `.printDOM()`
|
||||
|
||||
|
||||
## 0.14.3 (November 18, 2015)
|
||||
|
||||
### React DOM
|
||||
- Added support for `nonce` attribute for `<script>` and `<style>` elements
|
||||
- Added support for `reversed` attribute for `<ol>` elements
|
||||
|
||||
### React TestUtils Add-on
|
||||
- Fixed bug with shallow rendering and function refs
|
||||
|
||||
### React CSSTransitionGroup Add-on
|
||||
- Fixed bug resulting in timeouts firing incorrectly when mounting and unmounting rapidly
|
||||
|
||||
### React on Bower
|
||||
- Added `react-dom-server.js` to expose `renderToString` and `renderToStaticMarkup` for usage in the browser
|
||||
|
||||
|
||||
## 0.14.2 (November 2, 2015)
|
||||
|
||||
### React DOM
|
||||
- Fixed bug with development build preventing events from firing in some versions of Internet Explorer & Edge
|
||||
- Fixed bug with development build when using es5-sham in older versions of Internet Explorer
|
||||
- Added support for `integrity` attribute
|
||||
- Fixed bug resulting in `children` prop being coerced to a string for custom elements, which was not the desired behavior
|
||||
- Moved `react` from `dependencies` to `peerDependencies` to match expectations and align with `react-addons-*` packages
|
||||
|
||||
|
||||
## 0.14.1 (October 28, 2015)
|
||||
|
||||
### React DOM
|
||||
- Fixed bug where events wouldn't fire in old browsers when using React in development mode
|
||||
- Fixed bug preventing use of `dangerouslySetInnerHTML` with Closure Compiler Advanced mode
|
||||
- Added support for `srcLang`, `default`, and `kind` attributes for `<track>` elements
|
||||
- Added support for `color` attribute
|
||||
- Ensured legacy `.props` access on DOM nodes is updated on re-renders
|
||||
|
||||
### React TestUtils Add-on
|
||||
- Fixed `scryRenderedDOMComponentsWithClass` so it works with SVG
|
||||
|
||||
### React CSSTransitionGroup Add-on
|
||||
- Fix bug preventing `0` to be used as a timeout value
|
||||
|
||||
### React on Bower
|
||||
- Added `react-dom.js` to `main` to improve compatibility with tooling
|
||||
|
||||
|
||||
## 0.14.0 (October 7, 2015)
|
||||
|
||||
### Major changes
|
||||
|
||||
- Split the main `react` package into two: `react` and `react-dom`. This paves the way to writing components that can be shared between the web version of React and React Native. This means you will need to include both files and some functions have been moved from `React` to `ReactDOM`.
|
||||
- Addons have been moved to separate packages (`react-addons-clone-with-props`, `react-addons-create-fragment`, `react-addons-css-transition-group`, `react-addons-linked-state-mixin`, `react-addons-perf`, `react-addons-pure-render-mixin`, `react-addons-shallow-compare`, `react-addons-test-utils`, `react-addons-transition-group`, `react-addons-update`, `ReactDOM.unstable_batchedUpdates`).
|
||||
- Stateless functional components - React components were previously created using React.createClass or using ES6 classes. This release adds a [new syntax](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions) where a user defines a single [stateless render function](https://facebook.github.io/react/docs/reusable-components.html#stateless-functions) (with one parameter: `props`) which returns a JSX element, and this function may be used as a component.
|
||||
- Refs to DOM components as the DOM node itself. Previously the only useful thing you can do with a DOM component is call `getDOMNode()` to get the underlying DOM node. Starting with this release, a ref to a DOM component _is_ the actual DOM node. **Note that refs to custom (user-defined) components work exactly as before; only the built-in DOM components are affected by this change.**
|
||||
|
||||
|
||||
### Breaking changes
|
||||
|
||||
- `React.initializeTouchEvents` is no longer necessary and has been removed completely. Touch events now work automatically.
|
||||
- Add-Ons: Due to the DOM node refs change mentioned above, `TestUtils.findAllInRenderedTree` and related helpers are no longer able to take a DOM component, only a custom component.
|
||||
- The `props` object is now frozen, so mutating props after creating a component element is no longer supported. In most cases, [`React.cloneElement`](https://facebook.github.io/react/docs/top-level-api.html#react.cloneelement) should be used instead. This change makes your components easier to reason about and enables the compiler optimizations mentioned above.
|
||||
- Plain objects are no longer supported as React children; arrays should be used instead. You can use the [`createFragment`](https://facebook.github.io/react/docs/create-fragment.html) helper to migrate, which now returns an array.
|
||||
- Add-Ons: `classSet` has been removed. Use [classnames](https://github.com/JedWatson/classnames) instead.
|
||||
- Web components (custom elements) now use native property names. Eg: `class` instead of `className`.
|
||||
|
||||
### Deprecations
|
||||
|
||||
- `this.getDOMNode()` is now deprecated and `ReactDOM.findDOMNode(this)` can be used instead. Note that in the common case, `findDOMNode` is now unnecessary since a ref to the DOM component is now the actual DOM node.
|
||||
- `setProps` and `replaceProps` are now deprecated. Instead, call ReactDOM.render again at the top level with the new props.
|
||||
- ES6 component classes must now extend `React.Component` in order to enable stateless function components. The [ES3 module pattern](https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#other-languages) will continue to work.
|
||||
- Reusing and mutating a `style` object between renders has been deprecated. This mirrors our change to freeze the `props` object.
|
||||
- Add-Ons: `cloneWithProps` is now deprecated. Use [`React.cloneElement`](https://facebook.github.io/react/docs/top-level-api.html#react.cloneelement) instead (unlike `cloneWithProps`, `cloneElement` does not merge `className` or `style` automatically; you can merge them manually if needed).
|
||||
- Add-Ons: To improve reliability, `CSSTransitionGroup` will no longer listen to transition events. Instead, you should specify transition durations manually using props such as `transitionEnterTimeout={500}`.
|
||||
|
||||
### Notable enhancements
|
||||
|
||||
- Added `React.Children.toArray` which takes a nested children object and returns a flat array with keys assigned to each child. This helper makes it easier to manipulate collections of children in your `render` methods, especially if you want to reorder or slice `this.props.children` before passing it down. In addition, `React.Children.map` now returns plain arrays too.
|
||||
- React uses `console.error` instead of `console.warn` for warnings so that browsers show a full stack trace in the console. (Our warnings appear when you use patterns that will break in future releases and for code that is likely to behave unexpectedly, so we do consider our warnings to be “must-fix” errors.)
|
||||
- Previously, including untrusted objects as React children [could result in an XSS security vulnerability](http://danlec.com/blog/xss-via-a-spoofed-react-element). This problem should be avoided by properly validating input at the application layer and by never passing untrusted objects around your application code. As an additional layer of protection, [React now tags elements](https://github.com/facebook/react/pull/4832) with a specific [ES2015 (ES6) `Symbol`](http://www.2ality.com/2014/12/es6-symbols.html) in browsers that support it, in order to ensure that React never considers untrusted JSON to be a valid element. If this extra security protection is important to you, you should add a `Symbol` polyfill for older browsers, such as the one included by [Babel’s polyfill](http://babeljs.io/docs/usage/polyfill/).
|
||||
- When possible, React DOM now generates XHTML-compatible markup.
|
||||
- React DOM now supports these standard HTML attributes: `capture`, `challenge`, `inputMode`, `is`, `keyParams`, `keyType`, `minLength`, `summary`, `wrap`. It also now supports these non-standard attributes: `autoSave`, `results`, `security`.
|
||||
- React DOM now supports these SVG attributes, which render into namespaced attributes: `xlinkActuate`, `xlinkArcrole`, `xlinkHref`, `xlinkRole`, `xlinkShow`, `xlinkTitle`, `xlinkType`, `xmlBase`, `xmlLang`, `xmlSpace`.
|
||||
- The `image` SVG tag is now supported by React DOM.
|
||||
- In React DOM, arbitrary attributes are supported on custom elements (those with a hyphen in the tag name or an `is="..."` attribute).
|
||||
- React DOM now supports these media events on `audio` and `video` tags: `onAbort`, `onCanPlay`, `onCanPlayThrough`, `onDurationChange`, `onEmptied`, `onEncrypted`, `onEnded`, `onError`, `onLoadedData`, `onLoadedMetadata`, `onLoadStart`, `onPause`, `onPlay`, `onPlaying`, `onProgress`, `onRateChange`, `onSeeked`, `onSeeking`, `onStalled`, `onSuspend`, `onTimeUpdate`, `onVolumeChange`, `onWaiting`.
|
||||
- Many small performance improvements have been made.
|
||||
- Many warnings show more context than before.
|
||||
- Add-Ons: A [`shallowCompare`](https://github.com/facebook/react/pull/3355) add-on has been added as a migration path for `PureRenderMixin` in ES6 classes.
|
||||
- Add-Ons: `CSSTransitionGroup` can now use [custom class names](https://github.com/facebook/react/blob/48942b85/docs/docs/10.1-animation.md#custom-classes) instead of appending `-enter-active` or similar to the transition name.
|
||||
|
||||
### New helpful warnings
|
||||
|
||||
- React DOM now warns you when nesting HTML elements invalidly, which helps you avoid surprising errors during updates.
|
||||
- Passing `document.body` directly as the container to `ReactDOM.render` now gives a warning as doing so can cause problems with browser extensions that modify the DOM.
|
||||
- Using multiple instances of React together is not supported, so we now warn when we detect this case to help you avoid running into the resulting problems.
|
||||
|
||||
### Notable bug fixes
|
||||
|
||||
- Click events are handled by React DOM more reliably in mobile browsers, particularly in Mobile Safari.
|
||||
- SVG elements are created with the correct namespace in more cases.
|
||||
- React DOM now renders `<option>` elements with multiple text children properly and renders `<select>` elements on the server with the correct option selected.
|
||||
- When two separate copies of React add nodes to the same document (including when a browser extension uses React), React DOM tries harder not to throw exceptions during event handling.
|
||||
- Using non-lowercase HTML tag names in React DOM (e.g., `React.createElement('DIV')`) no longer causes problems, though we continue to recommend lowercase for consistency with the JSX tag name convention (lowercase names refer to built-in components, capitalized names refer to custom components).
|
||||
- React DOM understands that these CSS properties are unitless and does not append “px” to their values: `animationIterationCount`, `boxOrdinalGroup`, `flexOrder`, `tabSize`, `stopOpacity`.
|
||||
- Add-Ons: When using the test utils, `Simulate.mouseEnter` and `Simulate.mouseLeave` now work.
|
||||
- Add-Ons: ReactTransitionGroup now correctly handles multiple nodes being removed simultaneously.
|
||||
|
||||
|
||||
### React Tools / Babel
|
||||
|
||||
#### Breaking Changes
|
||||
|
||||
- The `react-tools` package and `JSXTransformer.js` browser file [have been deprecated](https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html). You can continue using version `0.13.3` of both, but we no longer support them and recommend migrating to [Babel](http://babeljs.io/), which has built-in support for React and JSX.
|
||||
|
||||
#### New Features
|
||||
|
||||
- Babel 5.8.24 introduces **Inlining React elements:** The `optimisation.react.inlineElements` transform converts JSX elements to object literals like `{type: 'div', props: ...}` instead of calls to `React.createElement`. This should only be enabled in production, since it disables some development warnings/checks.
|
||||
- Babel 5.8.24 introduces **Constant hoisting for React elements:** The `optimisation.react.constantElements` transform hoists element creation to the top level for subtrees that are fully static, which reduces calls to `React.createElement` and the resulting allocations. More importantly, it tells React that the subtree hasn’t changed so React can completely skip it when reconciling. This should only be enabled in production, since it disables some development warnings/checks.
|
||||
|
||||
|
||||
## 0.13.3 (May 8, 2015)
|
||||
|
||||
### React Core
|
||||
@@ -92,7 +492,7 @@
|
||||
|
||||
* Support for using ES6 classes to build React components; see the [v0.13.0 beta 1 notes](https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html) for details.
|
||||
* Added new top-level API `React.findDOMNode(component)`, which should be used in place of `component.getDOMNode()`. The base class for ES6-based components will not have `getDOMNode`. This change will enable some more patterns moving forward.
|
||||
* Added a new top-level API `React.cloneElement(el, props)` for making copies of React elements – see the [v0.13 RC2 notes](/react/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement) for more details.
|
||||
* Added a new top-level API `React.cloneElement(el, props)` for making copies of React elements – see the [v0.13 RC2 notes](https://facebook.github.io/react/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement) for more details.
|
||||
* New `ref` style, allowing a callback to be used in place of a name: `<Photo ref={(c) => this._photo = c} />` allows you to reference the component with `this._photo` (as opposed to `ref="photo"` which gives `this.refs.photo`).
|
||||
* `this.setState()` can now take a function as the first argument for transactional state updates, such as `this.setState((state, props) => ({count: state.count + 1}));` – this means that you no longer need to use `this._pendingState`, which is now gone.
|
||||
* Support for iterators and immutable-js sequences as children.
|
||||
@@ -106,7 +506,7 @@
|
||||
|
||||
#### New Features
|
||||
|
||||
* [`React.addons.createFragment` was added](/react/docs/create-fragment.html) for adding keys to entire sets of children.
|
||||
* [`React.addons.createFragment` was added](https://facebook.github.io/react/docs/create-fragment.html) for adding keys to entire sets of children.
|
||||
|
||||
#### Deprecations
|
||||
|
||||
@@ -574,14 +974,14 @@
|
||||
|
||||
* Upgrade Commoner so `require` statements are no longer relativized when passing through the transformer. This was a feature needed when building React, but doesn't translate well for other consumers of `bin/jsx`.
|
||||
* Upgraded our dependencies on Commoner and Recast so they use a different directory for their cache.
|
||||
* Freeze our esprima dependency.
|
||||
* Freeze our Esprima dependency.
|
||||
|
||||
|
||||
## 0.3.2 (May 31, 2013)
|
||||
|
||||
### JSX
|
||||
|
||||
* Improved compatability with other coding styles (specifically, multiple assignments with a single `var`).
|
||||
* Improved compatibility with other coding styles (specifically, multiple assignments with a single `var`).
|
||||
|
||||
### react-tools
|
||||
|
||||
|
||||
@@ -14,8 +14,26 @@ Some of the core team will be working directly on GitHub. These changes will be
|
||||
|
||||
We will do our best to keep `master` in good shape, with tests passing at all times. But in order to move fast, we will make API changes that your application might not be compatible with. We will do our best to communicate these changes and always version appropriately so you can lock into a specific version if need be.
|
||||
|
||||
### Test Suite
|
||||
|
||||
Use `grunt test` to run the full test suite with PhantomJS.
|
||||
|
||||
This command is just a facade to [Jest](https://facebook.github.io/jest/). You may optionally run `npm install -g jest-cli` and use Jest commands directly to have more control over how tests are executed.
|
||||
|
||||
For example, `jest --watch` lets you automatically run the test suite on every file change.
|
||||
|
||||
You can also run a subset of tests by passing a prefix to `jest`. For instance, `jest ReactDOMSVG` will only run tests in the files that start with `ReactDOMSVG`, such as `ReactDOMSVG-test.js`.
|
||||
|
||||
When you know which tests you want to run, you can achieve a fast feedback loop by using these two features together. For example, `jest ReactDOMSVG --watch` will re-run only the matching tests on every change.
|
||||
|
||||
Just make sure to run the whole test suite before submitting a pull request!
|
||||
|
||||
### Pull Requests
|
||||
|
||||
**Working on your first Pull Request?** You can learn how from this *free* series [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github)
|
||||
|
||||
You may also 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 the React JS project.
|
||||
|
||||
The core team will be monitoring for pull requests. When we get one, we'll run some Facebook-specific integration tests on it first. From here, we'll need to get another person to sign off on the changes and then merge the pull request. For API changes we may need to fix internal uses, which could cause some delay. We'll do our best to provide updates and feedback throughout the process.
|
||||
|
||||
*Before* submitting a pull request, please make sure the following is done…
|
||||
@@ -52,6 +70,11 @@ Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe
|
||||
* IRC - [#reactjs on freenode](https://webchat.freenode.net/?channels=reactjs)
|
||||
* Discussion forum - [discuss.reactjs.org](https://discuss.reactjs.org/)
|
||||
|
||||
## Meeting Notes
|
||||
|
||||
React team meets once a week to discuss the development of React, future plans, and priorities.
|
||||
You can find the meeting notes in a [dedicated repository](https://github.com/reactjs/core-notes/).
|
||||
|
||||
## Style Guide
|
||||
|
||||
Our linter will catch most styling issues that may exist in your code.
|
||||
|
||||
54
Gruntfile.js
54
Gruntfile.js
@@ -1,13 +1,16 @@
|
||||
'use strict';
|
||||
|
||||
var assign = require('object-assign');
|
||||
var path = require('path');
|
||||
|
||||
var GULP_EXE = 'gulp';
|
||||
if (process.platform === 'win32') {
|
||||
GULP_EXE += '.cmd';
|
||||
}
|
||||
|
||||
module.exports = function(grunt) {
|
||||
|
||||
grunt.initConfig({
|
||||
pkg: grunt.file.readJSON('package.json'),
|
||||
jsx: require('./grunt/config/jsx'),
|
||||
browserify: require('./grunt/config/browserify'),
|
||||
npm: require('./grunt/config/npm'),
|
||||
clean: [
|
||||
@@ -17,20 +20,19 @@ module.exports = function(grunt) {
|
||||
'./examples/shared/*.js',
|
||||
'.module-cache',
|
||||
],
|
||||
/*eslint-disable camelcase */
|
||||
compare_size: require('./grunt/config/compare_size'),
|
||||
/*eslint-enable camelcase */
|
||||
'compare_size': require('./grunt/config/compare_size'),
|
||||
});
|
||||
|
||||
grunt.config.set('compress', require('./grunt/config/compress'));
|
||||
|
||||
function spawnGulp(args, opts, done) {
|
||||
|
||||
grunt.util.spawn({
|
||||
// This could be more flexible (require.resolve & lookup bin in package)
|
||||
// but if it breaks we'll fix it then.
|
||||
cmd: path.join('node_modules', '.bin', 'gulp'),
|
||||
cmd: path.join('node_modules', '.bin', GULP_EXE),
|
||||
args: args,
|
||||
opts: assign({stdio: 'inherit'}, opts),
|
||||
opts: Object.assign({stdio: 'inherit'}, opts),
|
||||
}, function(err, result, code) {
|
||||
if (err) {
|
||||
grunt.fail.fatal('Something went wrong running gulp: ', result);
|
||||
@@ -50,18 +52,23 @@ module.exports = function(grunt) {
|
||||
grunt.loadNpmTasks(npmTaskName);
|
||||
});
|
||||
|
||||
grunt.registerTask('eslint', require('./grunt/tasks/eslint'));
|
||||
grunt.registerTask('eslint', function() {
|
||||
// Use gulp here.
|
||||
spawnGulp(['eslint'], null, this.async());
|
||||
});
|
||||
|
||||
grunt.registerTask('lint', ['eslint']);
|
||||
|
||||
grunt.registerTask('flow', function() {
|
||||
// Use gulp here.
|
||||
spawnGulp(['flow'], null, this.async());
|
||||
});
|
||||
|
||||
grunt.registerTask('delete-build-modules', function() {
|
||||
// Use gulp here.
|
||||
spawnGulp(['react:clean'], null, this.async());
|
||||
});
|
||||
|
||||
// Register jsx:normal and :release tasks.
|
||||
grunt.registerMultiTask('jsx', require('./grunt/tasks/jsx'));
|
||||
|
||||
// Our own browserify-based tasks to build a single JS file build.
|
||||
grunt.registerMultiTask('browserify', require('./grunt/tasks/browserify'));
|
||||
|
||||
@@ -75,11 +82,22 @@ module.exports = function(grunt) {
|
||||
grunt.registerTask('npm-react-dom:release', npmReactDOMTasks.buildRelease);
|
||||
grunt.registerTask('npm-react-dom:pack', npmReactDOMTasks.packRelease);
|
||||
|
||||
var npmReactNativeTasks = require('./grunt/tasks/npm-react-native');
|
||||
grunt.registerTask('npm-react-native:release', npmReactNativeTasks.buildRelease);
|
||||
grunt.registerTask('npm-react-native:pack', npmReactNativeTasks.packRelease);
|
||||
|
||||
var npmReactAddonsTasks = require('./grunt/tasks/npm-react-addons');
|
||||
grunt.registerTask('npm-react-addons:release', npmReactAddonsTasks.buildReleases);
|
||||
grunt.registerTask('npm-react-addons:pack', npmReactAddonsTasks.packReleases);
|
||||
|
||||
grunt.registerTask('version-check', require('./grunt/tasks/version-check'));
|
||||
var npmReactTestRendererTasks = require('./grunt/tasks/npm-react-test');
|
||||
grunt.registerTask('npm-react-test:release', npmReactTestRendererTasks.buildRelease);
|
||||
grunt.registerTask('npm-react-test:pack', npmReactTestRendererTasks.packRelease);
|
||||
|
||||
grunt.registerTask('version-check', function() {
|
||||
// Use gulp here.
|
||||
spawnGulp(['version-check'], null, this.async());
|
||||
});
|
||||
|
||||
grunt.registerTask('build:basic', [
|
||||
'build-modules',
|
||||
@@ -106,10 +124,12 @@ module.exports = function(grunt) {
|
||||
]);
|
||||
grunt.registerTask('build:react-dom', require('./grunt/tasks/react-dom'));
|
||||
|
||||
grunt.registerTask('test', ['jest']);
|
||||
grunt.registerTask('npm:test', ['build', 'npm:pack']);
|
||||
var jestTasks = require('./grunt/tasks/jest');
|
||||
grunt.registerTask('jest:normal', jestTasks.normal);
|
||||
grunt.registerTask('jest:coverage', jestTasks.coverage);
|
||||
|
||||
grunt.registerTask('jest', require('./grunt/tasks/jest'));
|
||||
grunt.registerTask('test', ['jest:normal']);
|
||||
grunt.registerTask('npm:test', ['build', 'npm:pack']);
|
||||
|
||||
// Optimized build task that does all of our builds. The subtasks will be run
|
||||
// in order so we can take advantage of that and only run build-modules once.
|
||||
@@ -126,8 +146,12 @@ module.exports = function(grunt) {
|
||||
'npm-react:pack',
|
||||
'npm-react-dom:release',
|
||||
'npm-react-dom:pack',
|
||||
'npm-react-native:release',
|
||||
'npm-react-native:pack',
|
||||
'npm-react-addons:release',
|
||||
'npm-react-addons:pack',
|
||||
'npm-react-test:release',
|
||||
'npm-react-test:pack',
|
||||
'compare_size',
|
||||
]);
|
||||
|
||||
|
||||
2
LICENSE
2
LICENSE
@@ -2,7 +2,7 @@ BSD License
|
||||
|
||||
For React software
|
||||
|
||||
Copyright (c) 2013-2015, Facebook, Inc.
|
||||
Copyright (c) 2013-present, Facebook, Inc.
|
||||
All rights reserved.
|
||||
|
||||
Redistribution and use in source and binary forms, with or without modification,
|
||||
|
||||
37
README.md
37
README.md
@@ -1,12 +1,10 @@
|
||||
# [React](https://facebook.github.io/react/) [](https://travis-ci.org/facebook/react) [](http://badge.fury.io/js/react)
|
||||
# [React](https://facebook.github.io/react/) [](https://travis-ci.org/facebook/react) [](https://coveralls.io/github/facebook/react?branch=master) [](https://www.npmjs.com/package/react) [](CONTRIBUTING.md#pull-requests)
|
||||
|
||||
React is a JavaScript library for building user interfaces.
|
||||
|
||||
* **Just the UI:** Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.
|
||||
* **Virtual DOM:** React abstracts away the DOM from you, giving a simpler programming model and better performance. React can also render on the server using Node, and it can power native apps using [React Native](https://facebook.github.io/react-native/).
|
||||
* **Data flow:** React implements one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding.
|
||||
|
||||
**NEW**! Check out our newest project [React Native](https://github.com/facebook/react-native), which uses React and JavaScript to create native mobile apps.
|
||||
* **Declarative:** React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable, simpler to understand, and easier to debug.
|
||||
* **Component-Based:** Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
|
||||
* **Learn Once, Write Anywhere:** We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using [React Native](https://facebook.github.io/react-native/).
|
||||
|
||||
[Learn how to use React in your own project](https://facebook.github.io/react/docs/getting-started.html).
|
||||
|
||||
@@ -21,7 +19,7 @@ var HelloMessage = React.createClass({
|
||||
}
|
||||
});
|
||||
|
||||
React.render(
|
||||
ReactDOM.render(
|
||||
<HelloMessage name="John" />,
|
||||
document.getElementById('container')
|
||||
);
|
||||
@@ -33,16 +31,16 @@ You'll notice that we used an HTML-like syntax; [we call it JSX](https://faceboo
|
||||
|
||||
## Installation
|
||||
|
||||
The fastest way to get started is to serve JavaScript from the CDN (also available on [cdnjs](https://cdnjs.com/libraries/react) and [jsdelivr](http://www.jsdelivr.com/#!react)):
|
||||
The fastest way to get started is to serve JavaScript from the CDN (also available on [cdnjs](https://cdnjs.com/libraries/react) and [jsdelivr](https://www.jsdelivr.com/projects/react)):
|
||||
|
||||
```html
|
||||
<!-- The core React library -->
|
||||
<script src="https://fb.me/react-0.13.3.js"></script>
|
||||
<!-- In-browser JSX transformer, remove when pre-compiling JSX. -->
|
||||
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
|
||||
<script src="https://fb.me/react-15.3.0.js"></script>
|
||||
<!-- The ReactDOM Library -->
|
||||
<script src="https://fb.me/react-dom-15.3.0.js"></script>
|
||||
```
|
||||
|
||||
We've also built a [starter kit](https://facebook.github.io/react/downloads/react-0.13.3.zip) which might be useful if this is your first time using React. It includes a webpage with an example of using React with live code.
|
||||
We've also built a [starter kit](https://facebook.github.io/react/downloads/react-15.3.0.zip) which might be useful if this is your first time using React. It includes a webpage with an example of using React with live code.
|
||||
|
||||
If you'd like to use [bower](http://bower.io), it's as easy as:
|
||||
|
||||
@@ -50,6 +48,12 @@ If you'd like to use [bower](http://bower.io), it's as easy as:
|
||||
bower install --save react
|
||||
```
|
||||
|
||||
And it's just as easy with [npm](http://npmjs.com):
|
||||
|
||||
```sh
|
||||
npm i --save react
|
||||
```
|
||||
|
||||
## Contribute
|
||||
|
||||
The main purpose of this repository is to continue to evolve React core, making it faster and easier to use. If you're interested in helping with that, then keep reading. If you're not interested in helping right now that's ok too. :) Any feedback you have about using React would be greatly appreciated.
|
||||
@@ -60,7 +64,8 @@ The process to build `react.js` is built entirely on top of node.js, using many
|
||||
|
||||
#### Prerequisites
|
||||
|
||||
* You have `node` installed at v0.10.0+ (it might work at lower versions, we just haven't tested) and `npm` at v2.0.0+.
|
||||
* You have `node` installed at v4.0.0+ and `npm` at v2.0.0+.
|
||||
* You have `gcc` installed or are comfortable installing a compiler if needed. Some of our `npm` dependencies may require a compliation 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.
|
||||
* You are familiar with `npm` and know whether or not you need to use `sudo` when installing packages globally.
|
||||
* You are familiar with `git`.
|
||||
|
||||
@@ -84,14 +89,16 @@ We use grunt to automate many tasks. Run `grunt -h` to see a mostly complete lis
|
||||
```sh
|
||||
# Build and run tests with PhantomJS
|
||||
grunt test
|
||||
# Build and run tests in your browser
|
||||
grunt test --debug
|
||||
# Lint the code with ESLint
|
||||
grunt lint
|
||||
# Wipe out build directory
|
||||
grunt clean
|
||||
```
|
||||
|
||||
### Good First Bug
|
||||
To help you get your feet wet and get you familiar with our contribution process, we have a list of [good first bugs](https://github.com/facebook/react/labels/good%20first%20bug) that contain bugs which are fairly easy to fix. This is a great place to get started.
|
||||
|
||||
|
||||
### License
|
||||
|
||||
React is [BSD licensed](./LICENSE). We also provide an additional [patent grant](./PATENTS).
|
||||
|
||||
@@ -1,48 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
// -*- mode: js -*-
|
||||
// vim: set ft=javascript :
|
||||
|
||||
'use strict';
|
||||
|
||||
var babel = require('babel');
|
||||
|
||||
var devExpressionPlugin = require('fbjs/scripts/babel/dev-expression');
|
||||
|
||||
var TRANSFORM_IGNORE_RE = /^WebComponents$/;
|
||||
|
||||
require('commoner').version(
|
||||
require('../package.json').version
|
||||
).resolve(function(id) {
|
||||
var context = this;
|
||||
|
||||
// Note that the result of context.getProvidedP() is cached for the
|
||||
// duration of the build, so it is both consistent and cheap to
|
||||
// evaluate multiple times.
|
||||
return context.getProvidedP().then(function(idToPath) {
|
||||
// If a module declares its own identifier using @providesModule
|
||||
// then that identifier will be a key in the idToPath object.
|
||||
if (idToPath.hasOwnProperty(id)) {
|
||||
return context.readFileP(idToPath[id]);
|
||||
}
|
||||
|
||||
// Otherwise assume the identifier maps directly to a path in the
|
||||
// filesystem.
|
||||
return context.readModuleP(id);
|
||||
});
|
||||
|
||||
}).process(function(id, source) {
|
||||
var context = this;
|
||||
|
||||
// This is hacky but that's ok… It really only matters for tests since it
|
||||
// won't otherwise be in the dependency tree.
|
||||
if (!TRANSFORM_IGNORE_RE.test(id)) {
|
||||
// This is where JSX, ES6, etc. desugaring happens.
|
||||
source = babel.transform(source, {
|
||||
blacklist: ['spec.functionName', 'validation.react'],
|
||||
plugins: [devExpressionPlugin],
|
||||
filename: id,
|
||||
}).code;
|
||||
}
|
||||
|
||||
return source;
|
||||
});
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
layout: single
|
||||
title: Page Not Found
|
||||
permalink: 404.html
|
||||
---
|
||||
|
||||
We couldn't find what you were looking for.
|
||||
|
||||
16
docs/Gemfile
16
docs/Gemfile
@@ -3,11 +3,12 @@ source 'https://rubygems.org'
|
||||
gem 'rake'
|
||||
|
||||
# jekyll, which builds it all
|
||||
# 2.0 includes sass processing
|
||||
gem 'jekyll', '~>2.0'
|
||||
# 3.0 includes sass processing
|
||||
gem 'jekyll', '~>3.1'
|
||||
|
||||
# Auto redirect pages
|
||||
# Jekyll extensions
|
||||
gem 'jekyll-redirect-from'
|
||||
gem 'jekyll-paginate'
|
||||
|
||||
# JSON
|
||||
gem 'json'
|
||||
@@ -17,3 +18,12 @@ gem 'rb-fsevent'
|
||||
|
||||
# For markdown header cleanup
|
||||
gem 'sanitize', '~>2.0'
|
||||
|
||||
# Markdown
|
||||
gem 'redcarpet'
|
||||
|
||||
# Syntax highlighting
|
||||
gem 'pygments.rb'
|
||||
|
||||
# Avoid having to poll for changes on Windows
|
||||
gem 'wdm', '>= 0.1.0' if Gem.win_platform?
|
||||
@@ -1,85 +1,70 @@
|
||||
GEM
|
||||
remote: https://rubygems.org/
|
||||
specs:
|
||||
blankslate (2.1.2.4)
|
||||
celluloid (0.15.2)
|
||||
timers (~> 1.1.0)
|
||||
classifier (1.3.4)
|
||||
fast-stemmer (>= 1.0.0)
|
||||
coffee-script (2.3.0)
|
||||
coffee-script-source
|
||||
execjs
|
||||
coffee-script-source (1.7.1)
|
||||
colorator (0.1)
|
||||
execjs (2.2.1)
|
||||
fast-stemmer (1.0.2)
|
||||
ffi (1.9.3)
|
||||
jekyll (2.2.0)
|
||||
classifier (~> 1.3)
|
||||
ffi (1.9.14)
|
||||
ffi (1.9.14-x64-mingw32)
|
||||
jekyll (3.1.6)
|
||||
colorator (~> 0.1)
|
||||
jekyll-coffeescript (~> 1.0)
|
||||
jekyll-gist (~> 1.0)
|
||||
jekyll-paginate (~> 1.0)
|
||||
jekyll-sass-converter (~> 1.0)
|
||||
jekyll-watch (~> 1.0)
|
||||
jekyll-watch (~> 1.1)
|
||||
kramdown (~> 1.3)
|
||||
liquid (~> 2.6.1)
|
||||
liquid (~> 3.0)
|
||||
mercenary (~> 0.3.3)
|
||||
pygments.rb (~> 0.6.0)
|
||||
redcarpet (~> 3.1)
|
||||
rouge (~> 1.7)
|
||||
safe_yaml (~> 1.0)
|
||||
toml (~> 0.1.0)
|
||||
jekyll-coffeescript (1.0.0)
|
||||
coffee-script (~> 2.2)
|
||||
jekyll-gist (1.1.0)
|
||||
jekyll-paginate (1.0.0)
|
||||
jekyll-redirect-from (0.5.0)
|
||||
jekyll (~> 2.0)
|
||||
jekyll-sass-converter (1.2.0)
|
||||
sass (~> 3.2)
|
||||
jekyll-watch (1.1.0)
|
||||
listen (~> 2.7)
|
||||
json (1.8.1)
|
||||
kramdown (1.4.1)
|
||||
liquid (2.6.1)
|
||||
listen (2.7.9)
|
||||
celluloid (>= 0.15.2)
|
||||
rb-fsevent (>= 0.9.3)
|
||||
rb-inotify (>= 0.9)
|
||||
mercenary (0.3.4)
|
||||
mini_portile (0.6.0)
|
||||
nokogiri (1.6.3.1)
|
||||
mini_portile (= 0.6.0)
|
||||
parslet (1.5.0)
|
||||
blankslate (~> 2.0)
|
||||
posix-spawn (0.3.9)
|
||||
pygments.rb (0.6.0)
|
||||
jekyll-paginate (1.1.0)
|
||||
jekyll-redirect-from (0.11.0)
|
||||
jekyll (>= 2.0)
|
||||
jekyll-sass-converter (1.4.0)
|
||||
sass (~> 3.4)
|
||||
jekyll-watch (1.4.0)
|
||||
listen (~> 3.0, < 3.1)
|
||||
json (2.0.1)
|
||||
kramdown (1.11.1)
|
||||
liquid (3.0.6)
|
||||
listen (3.0.8)
|
||||
rb-fsevent (~> 0.9, >= 0.9.4)
|
||||
rb-inotify (~> 0.9, >= 0.9.7)
|
||||
mercenary (0.3.6)
|
||||
mini_portile2 (2.1.0)
|
||||
nokogiri (1.6.8)
|
||||
mini_portile2 (~> 2.1.0)
|
||||
pkg-config (~> 1.1.7)
|
||||
nokogiri (1.6.8-x64-mingw32)
|
||||
mini_portile2 (~> 2.1.0)
|
||||
pkg-config (~> 1.1.7)
|
||||
pkg-config (1.1.7)
|
||||
posix-spawn (0.3.11)
|
||||
pygments.rb (0.6.3)
|
||||
posix-spawn (~> 0.3.6)
|
||||
yajl-ruby (~> 1.1.0)
|
||||
rake (10.3.2)
|
||||
rb-fsevent (0.9.4)
|
||||
rb-inotify (0.9.5)
|
||||
yajl-ruby (~> 1.2.0)
|
||||
rake (11.2.2)
|
||||
rb-fsevent (0.9.7)
|
||||
rb-inotify (0.9.7)
|
||||
ffi (>= 0.5.0)
|
||||
redcarpet (3.1.2)
|
||||
redcarpet (3.3.4)
|
||||
rouge (1.11.1)
|
||||
safe_yaml (1.0.4)
|
||||
sanitize (2.0.6)
|
||||
sanitize (2.1.0)
|
||||
nokogiri (>= 1.4.4)
|
||||
sass (3.3.14)
|
||||
timers (1.1.0)
|
||||
toml (0.1.1)
|
||||
parslet (~> 1.5.0)
|
||||
yajl-ruby (1.1.0)
|
||||
sass (3.4.22)
|
||||
yajl-ruby (1.2.1)
|
||||
|
||||
PLATFORMS
|
||||
ruby
|
||||
x64-mingw32
|
||||
|
||||
DEPENDENCIES
|
||||
jekyll (~> 2.0)
|
||||
jekyll (~> 3.1)
|
||||
jekyll-paginate
|
||||
jekyll-redirect-from
|
||||
json
|
||||
pygments.rb
|
||||
rake
|
||||
rb-fsevent
|
||||
redcarpet
|
||||
sanitize (~> 2.0)
|
||||
|
||||
BUNDLED WITH
|
||||
1.10.1
|
||||
1.11.2
|
||||
|
||||
@@ -1,10 +1,18 @@
|
||||
require('rubygems')
|
||||
require('json')
|
||||
require('yaml')
|
||||
require('open-uri')
|
||||
|
||||
desc "download babel-browser"
|
||||
task :fetch_remotes do
|
||||
IO.copy_stream(
|
||||
open('https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js'),
|
||||
'js/babel-browser.min.js'
|
||||
)
|
||||
end
|
||||
|
||||
desc "generate js from jsx"
|
||||
task :js do
|
||||
system "cp ../node_modules/babel/node_modules/babel-core/browser.min.js ./js/babel-browser.min.js"
|
||||
system "../node_modules/.bin/babel _js --out-dir=js"
|
||||
end
|
||||
|
||||
@@ -24,6 +32,25 @@ task :update_version do
|
||||
end
|
||||
end
|
||||
|
||||
desc "update SRI hashes"
|
||||
task :update_hashes do
|
||||
map = {
|
||||
'react.js' => 'dev',
|
||||
'react.min.js' => 'prod',
|
||||
'react-with-addons.js' => 'addons_dev',
|
||||
'react-with-addons.min.js' => 'addons_prod',
|
||||
'react-dom.js' => 'dom_dev',
|
||||
'react-dom.min.js' => 'dom_prod',
|
||||
'react-dom-server.js' => 'dom_server_dev',
|
||||
'react-dom-server.min.js' => 'dom_server_prod'
|
||||
}
|
||||
site_config = YAML.load_file('_config.yml')
|
||||
map.each do |file, key|
|
||||
site_config['react_hashes'][key] = `openssl dgst -sha384 -binary ../../react-bower/#{file} | openssl base64 -A`
|
||||
end
|
||||
File.open('_config.yml', 'w+') { |f| f.write(site_config.to_yaml) }
|
||||
end
|
||||
|
||||
desc "update acknowledgements list"
|
||||
task :update_acknowledgements do
|
||||
authors = File.readlines('../AUTHORS').map {|author| author.gsub(/ <.*\n/,'')}
|
||||
@@ -34,8 +61,15 @@ task :update_acknowledgements do
|
||||
File.open('_data/acknowledgements.yml', 'w+') { |f| f.write(cols.to_yaml) }
|
||||
end
|
||||
|
||||
desc "copy error codes to docs"
|
||||
task :copy_error_codes do
|
||||
codes_json = File.read('../scripts/error-codes/codes.json')
|
||||
codes_js = "var errorMap = #{codes_json.chomp};\n"
|
||||
File.write('js/errorMap.js', codes_js)
|
||||
end
|
||||
|
||||
desc "build into ../../react-gh-pages"
|
||||
task :release => [:update_version, :default] do
|
||||
task :release => [:update_version, :js, :fetch_remotes, :copy_error_codes] do
|
||||
system "jekyll build -d ../../react-gh-pages"
|
||||
end
|
||||
|
||||
|
||||
@@ -5,21 +5,37 @@ url: https://facebook.github.io
|
||||
baseurl: "/react"
|
||||
permalink: "/blog/:year/:month/:day/:title.html"
|
||||
paginate_path: "/blog/page:num/"
|
||||
relative_permalinks: true
|
||||
paginate: 5
|
||||
timezone: America/Los_Angeles
|
||||
highlighter: pygments
|
||||
defaults:
|
||||
- scope:
|
||||
path: ''
|
||||
type: post
|
||||
type: posts
|
||||
values:
|
||||
layout: post
|
||||
sectionid: blog
|
||||
- scope:
|
||||
path: blog
|
||||
type: pages
|
||||
values:
|
||||
sectionid: blog
|
||||
- scope:
|
||||
path: docs
|
||||
type: page
|
||||
type: pages
|
||||
values:
|
||||
layout: docs
|
||||
sectionid: docs
|
||||
- scope:
|
||||
path: tips
|
||||
type: pages
|
||||
values:
|
||||
sectionid: docs
|
||||
- scope:
|
||||
path: contributing
|
||||
type: pages
|
||||
values:
|
||||
sectionid: docs
|
||||
exclude:
|
||||
- Gemfile
|
||||
- Gemfile.lock
|
||||
@@ -36,4 +52,14 @@ sass:
|
||||
sass_dir: _css
|
||||
gems:
|
||||
- jekyll-redirect-from
|
||||
react_version: 0.14.0-alpha
|
||||
- jekyll-paginate
|
||||
react_version: 15.2.1
|
||||
react_hashes:
|
||||
dev: g2900ZIpFKhyIsz+bnx4YDEfAISugYRU58ljeAgI8TZ0A0AkRLGUCN7OmjF16Cj+
|
||||
prod: ICzDcvbNpMy31akJ8WzksHoK9tl1iRIUPRCaBRN+sn/k40TNGjs9IvgPN0SekkDT
|
||||
addons_dev: js+Yc2Nd259A4+UPokRNVOXJdipY9oIrkkDdFJAZzZxgryRJLkWYDrJVgM97aweF
|
||||
addons_prod: DaNE8gIDQr8RWDoa4y9HX/70fzdOBzpV/e+7RJtMN1MnXEiCMpiIFtutJml6mvPC
|
||||
dom_dev: LD1cH7LXOdrrq5dOOiE2N/HdgCyrw3nmUMq6oPFCJKUfWO3i7AozvBKz7G3maMHt
|
||||
dom_prod: 1dLXeik7kFcDPXbz3rX9dibLTGh/D8dpAOL5X2Ml09pH8wpQlpL+JOgOnzAMCO4T
|
||||
dom_server_dev: WJt1y2JljJEQ1OgpupP2ly0GgIwi7Aodp+n+/fv2bakpgWpXMnLklj5rSouRJt59
|
||||
dom_server_prod: Y6UDASOvQhWWBwXy/Ccp4vSAt0YAp+ymuRXBX4hffy+pMlOgjXzryIjbiceIB6GF
|
||||
|
||||
@@ -37,7 +37,7 @@ html * {
|
||||
border-bottom: 1px dotted #cb4b16;
|
||||
}
|
||||
.cm-s-solarized-light span.cm-keyword {
|
||||
color: #268bd2;
|
||||
color: #859900;
|
||||
}
|
||||
.cm-s-solarized-light span.cm-atom {
|
||||
color: #2aa198;
|
||||
@@ -61,7 +61,7 @@ html * {
|
||||
color: #93a1a1;
|
||||
}
|
||||
.cm-s-solarized-light span.cm-property {
|
||||
color: #637c84;
|
||||
color: #657b83;
|
||||
}
|
||||
.cm-s-solarized-light span.cm-operator {
|
||||
color: #657b83;
|
||||
@@ -74,14 +74,13 @@ html * {
|
||||
border-bottom: 1px dotted #cb4b16;
|
||||
}
|
||||
.cm-s-solarized-light span.cm-bracket {
|
||||
color: #cb4b16;
|
||||
color: #268bd2;
|
||||
}
|
||||
.cm-s-solarized-light span.cm-tag {
|
||||
color: #657b83;
|
||||
color: #268bd2;
|
||||
}
|
||||
.cm-s-solarized-light span.cm-attribute {
|
||||
color: #586e75;
|
||||
font-weight: bold;
|
||||
}
|
||||
.cm-s-solarized-light span.cm-meta {
|
||||
color: #268bd2;
|
||||
@@ -166,7 +165,6 @@ html * {
|
||||
}
|
||||
.cm-s-solarized-dark span.cm-attribute {
|
||||
color: #93a1a1;
|
||||
font-weight: bold;
|
||||
}
|
||||
.cm-s-solarized-dark span.cm-meta {
|
||||
color: #268bd2;
|
||||
|
||||
@@ -1,46 +1,93 @@
|
||||
---
|
||||
- - Aaron Franks
|
||||
- - '839'
|
||||
- Aaron Franks
|
||||
- Aaron Gelter
|
||||
- Adam Bloomston
|
||||
- Adam Krebs
|
||||
- Adam Mark
|
||||
- Adam Solove
|
||||
- Adam Timberlake
|
||||
- Adam Zapletal
|
||||
- Ahmad Wali Sidiqi
|
||||
- Alan Plum
|
||||
- Alan Souza
|
||||
- Alan deLevie
|
||||
- Alastair Hole
|
||||
- Alex
|
||||
- Alex Boatwright
|
||||
- Alex Boyd
|
||||
- Alex Dajani
|
||||
- Alex Lopatin
|
||||
- Alex Mykyta
|
||||
- Alex Pien
|
||||
- Alex Smith
|
||||
- Alex Zelenskiy
|
||||
- Alexander Shtuchkin
|
||||
- Alexander Solovyov
|
||||
- Alexander Tseung
|
||||
- Alexandre Gaudencio
|
||||
- Alexey Raspopov
|
||||
- Alexey Shamrin
|
||||
- Ali Ukani
|
||||
- Andre Z Sanchez
|
||||
- Andreas Savvides
|
||||
- Andreas Svensson
|
||||
- Andres Kalle
|
||||
- Andres Suarez
|
||||
- Andrew Clark
|
||||
- Andrew Cobby
|
||||
- Andrew Davey
|
||||
- Andrew Henderson
|
||||
- Andrew Kulakov
|
||||
- Andrew Rasmussen
|
||||
- Andrew Sokolov
|
||||
- Andrew Zich
|
||||
- Andrey Popp
|
||||
- Anthony van der Hoorn
|
||||
- Anto Aravinth
|
||||
- Antonio Ruberto
|
||||
- Antti Ahti
|
||||
- Anuj Tomar
|
||||
- AoDev
|
||||
- April Arcus
|
||||
- Areeb Malik
|
||||
- Aria Buckles
|
||||
- Aria Stewart
|
||||
- Arian Faurtosh
|
||||
- Artem Nezvigin
|
||||
- Austin Wright
|
||||
- Ayman Osman
|
||||
- Baraa Hamodi
|
||||
- Bartosz Kaszubowski
|
||||
- Basarat Ali Syed
|
||||
- Battaile Fauber
|
||||
- Beau Smith
|
||||
- Ben Alpert
|
||||
- Ben Anderson
|
||||
- Ben Brooks
|
||||
- Ben Foxall
|
||||
- Ben Halpern
|
||||
- Ben Jaffe
|
||||
- Ben Moss
|
||||
- Ben Newman
|
||||
- Ben Ripkens
|
||||
- Benjamin Keen
|
||||
- Benjamin Leiken
|
||||
- Benjamin Woodruff
|
||||
- Benjy Cui
|
||||
- Bill Blanchard
|
||||
- Bill Fisher
|
||||
- Blaine Hatab
|
||||
- Blaine Kasten
|
||||
- Bob Eagan
|
||||
- Bob Ralian
|
||||
- Bob Renwick
|
||||
- Bobby
|
||||
- Bojan Mihelac
|
||||
- Bradley Spaulding
|
||||
- Brandon Bloom
|
||||
- Brandon Tilley
|
||||
- Brenard Cubacub
|
||||
- Brian Cooke
|
||||
- Brian Holt
|
||||
- Brian Hsu
|
||||
@@ -51,205 +98,412 @@
|
||||
- Bruno Škvorc
|
||||
- Cam Song
|
||||
- Cam Spiers
|
||||
- Cameron Chamberlain
|
||||
- Cameron Matheson
|
||||
- Carter Chung
|
||||
- Cassus Adam Banko
|
||||
- Cat Chen
|
||||
- Cedric Sohrauer
|
||||
- Cesar William Alvarenga
|
||||
- Changsoon Bok
|
||||
- Charles Marsh
|
||||
- Chase Adams
|
||||
- Cheng Lou
|
||||
- Chitharanjan Das
|
||||
- Chris Bolin
|
||||
- Chris Grovers
|
||||
- Chris Ha
|
||||
- Chris Rebert
|
||||
- Chris Sciolla
|
||||
- Christian
|
||||
- Christian Alfoni
|
||||
- Christian Oliff
|
||||
- Christian Roman
|
||||
- Christoffer Sawicki
|
||||
- Christoph Pojer
|
||||
- Christopher Monsanto
|
||||
- Clay Allsopp
|
||||
- Connor McSheffrey
|
||||
- Conor Hastings
|
||||
- Cory House
|
||||
- Cotton Hou
|
||||
- Craig Akimoto
|
||||
- Cristovao Verstraeten
|
||||
- Damien Pellier
|
||||
- Dan Abramov
|
||||
- Dan Fox
|
||||
- Dan Schafer
|
||||
- Daniel Carlsson
|
||||
- Daniel Cousens
|
||||
- Daniel Friesen
|
||||
- Daniel Gasienica
|
||||
- Daniel Hejl
|
||||
- Daniel Hejl
|
||||
- Daniel Lo Nigro
|
||||
- Daniel Mané
|
||||
- Daniel Miladinov
|
||||
- Daniel Rodgers-Pryor
|
||||
- Daniel Schonfeld
|
||||
- Danny Ben-David
|
||||
- Darcy
|
||||
- Daryl Lau
|
||||
- Darío Javier Cravero
|
||||
- Dave Galbraith
|
||||
- David Baker
|
||||
- David Ed Mellum
|
||||
- David Goldberg
|
||||
- David Granado
|
||||
- David Greenspan
|
||||
- David Hellsing
|
||||
- David Hu
|
||||
- David Khourshid
|
||||
- David Mininger
|
||||
- David Neubauer
|
||||
- David Percy
|
||||
- Dean Shi
|
||||
- Denis Sokolov
|
||||
- Deniss Jacenko
|
||||
- Dennis Johnson
|
||||
- Devon Blandin
|
||||
- Devon Harvey
|
||||
- Dmitrii Abramov
|
||||
- Dmitriy Rozhkov
|
||||
- Dmitry Blues
|
||||
- Dmitry Mazuro
|
||||
- Domenico Matteo
|
||||
- Don Abrams
|
||||
- Dongsheng Liu
|
||||
- Dustan Kasten
|
||||
- Dustin Getz
|
||||
- Dylan Harrington
|
||||
- Eduardo Garcia
|
||||
- Edvin Erikson
|
||||
- Elaine Fang
|
||||
- Enguerran
|
||||
- Eric Clemmons
|
||||
- Eric Eastwood
|
||||
- Eric Florenzano
|
||||
- Eric O'Connell
|
||||
- Eric Schoffstall
|
||||
- Erik Harper
|
||||
- Espen Hovlandsdal
|
||||
- Evan Coonrod
|
||||
- Evan Vosberg
|
||||
- Fabio M. Costa
|
||||
- Federico Rampazzo
|
||||
- Felipe Oliveira Carvalho
|
||||
- Felix Gnass
|
||||
- Felix Kling
|
||||
- Fernando Correia
|
||||
- Frankie Bagnardi
|
||||
- François-Xavier Bois
|
||||
- Fred Zhao
|
||||
- Freddy Rangel
|
||||
- Fyodor Ivanishchev
|
||||
- G Scott Olson
|
||||
- G. Kay Lee
|
||||
- Gabe Levi
|
||||
- Gajus Kuizinas
|
||||
- Gareth Nicholson
|
||||
- Garren Smith
|
||||
- Gavin McQuistin
|
||||
- Geert Pasteels
|
||||
- Geert-Jan Brits
|
||||
- George A Sisco III
|
||||
- Georgii Dolzhykov
|
||||
- Gilbert
|
||||
- Glen Mailer
|
||||
- Grant Timmerman
|
||||
- Greg Hurrell
|
||||
- Greg Perkins
|
||||
- Greg Roodt
|
||||
- Gregory
|
||||
- Guangqiang Dong
|
||||
- Guido Bouman
|
||||
- Harry Hull
|
||||
- Harry Marr
|
||||
- - Harry Moreno
|
||||
- Harry Moreno
|
||||
- Harshad Sabne
|
||||
- Hekar Khani
|
||||
- Hendrik Swanepoel
|
||||
- Henrik Nyh
|
||||
- Henry Wong
|
||||
- Henry Zhu
|
||||
- Hideo Matsumoto
|
||||
- Hou Chia
|
||||
- Huang-Wei Chang
|
||||
- - Hugo Agbonon
|
||||
- Hugo Jobling
|
||||
- Hyeock Kwon
|
||||
- Héliton Nordt
|
||||
- Ian Obermiller
|
||||
- Ignacio Carbajo
|
||||
- Igor Scekic
|
||||
- Ilia Pavlenkov
|
||||
- Ilya Shuklin
|
||||
- Ilyá Belsky
|
||||
- Ingvar Stepanyan
|
||||
- Irae Carvalho
|
||||
- Isaac Salier-Hellendag
|
||||
- Iurii Kucherov
|
||||
- Ivan Kozik
|
||||
- Ivan Krechetov
|
||||
- Ivan Vergiliev
|
||||
- J. Andrew Brassington
|
||||
- J. Renée Beach
|
||||
- JD Isaacks
|
||||
- JJ Weber
|
||||
- JW
|
||||
- Jack Zhang
|
||||
- Jackie Wung
|
||||
- Jacob Gable
|
||||
- Jacob Greenleaf
|
||||
- Jae Hun Ro
|
||||
- Jaeho Lee
|
||||
- Jaime Mingo
|
||||
- Jake Worth
|
||||
- Jakub Malinowski
|
||||
- James
|
||||
- James Brantly
|
||||
- James Burnett
|
||||
- James Friend
|
||||
- James Ide
|
||||
- James Long
|
||||
- James Pearce
|
||||
- James Seppi
|
||||
- James South
|
||||
- James Wen
|
||||
- Jamie Wong
|
||||
- Jamis Charles
|
||||
- Jamison Dance
|
||||
- Jan Hancic
|
||||
- Jan Kassens
|
||||
- Jan Raasch
|
||||
- Jared Forsyth
|
||||
- Jason
|
||||
- Jason Bonta
|
||||
- Jason Ly
|
||||
- Jason Miller
|
||||
- Jason Quense
|
||||
- Jason Trill
|
||||
- Jason Webster
|
||||
- Jay Jaeho Lee
|
||||
- Jean Lauliac
|
||||
- Jed Watson
|
||||
- Jeff Barczewski
|
||||
- Jeff Carpenter
|
||||
- Jeff Chan
|
||||
- Jeff Hicken
|
||||
- Jeff Kolesky
|
||||
- Jeff Morrison
|
||||
- Jeff Welch
|
||||
- Jeffrey Lin
|
||||
- Jeremy Fairbank
|
||||
- Jesse Skinner
|
||||
- Jignesh Kakadiya
|
||||
- Jim OBrien
|
||||
- Jim Sproch
|
||||
- Jimmy Jea
|
||||
- Jing Chen
|
||||
- Jinwoo Oh
|
||||
- Jinxiu Lee
|
||||
- Jiyeon Seo
|
||||
- Jody McIntyre
|
||||
- Joe Critchley
|
||||
- Joe Stein
|
||||
- Joel Auterson
|
||||
- Johannes Baiter
|
||||
- Johannes Emerich
|
||||
- Johannes Lumpe
|
||||
- John Heroy
|
||||
- John Ryan
|
||||
- John Watson
|
||||
- John-David Dalton
|
||||
- Jon Beebe
|
||||
- Jon Chester
|
||||
- Jon Hester
|
||||
- Jon Madison
|
||||
- Jon Scott Clark
|
||||
- Jon Tewksbury
|
||||
- Jonas Enlund
|
||||
- Jonas Gebhardt
|
||||
- Jonathan Hsu
|
||||
- Jonathan Persson
|
||||
- Jordan Harband
|
||||
- Jordan Walke
|
||||
- Jorrit Schippers
|
||||
- Joseph Nudell
|
||||
- Joseph Savona
|
||||
- Josh Bassett
|
||||
- Josh Duck
|
||||
- Josh Perez
|
||||
- Josh Yudaken
|
||||
- Joshua Evans
|
||||
- Joshua Go
|
||||
- Joshua Goldberg
|
||||
- Joshua Ma
|
||||
- João Valente
|
||||
- Juan Serrano
|
||||
- Julen Ruiz Aizpuru
|
||||
- Julian Viereck
|
||||
- Julien Bordellier
|
||||
- Julio Lopez
|
||||
- Jun Wu
|
||||
- Juraj Dudak
|
||||
- Justas Brazauskas
|
||||
- Justin Jaffray
|
||||
- Justin Robison
|
||||
- Justin Woo
|
||||
- Kale
|
||||
- Kamron Batman
|
||||
- Karl Mikkelsen
|
||||
- Karpich Dmitry
|
||||
- Keito Uchiyama
|
||||
- Ken Powers
|
||||
- Kent C. Dodds
|
||||
- Kevin Cheng
|
||||
- Kevin Coughlin
|
||||
- Kevin Huang
|
||||
- Kevin Lau
|
||||
- Kevin Old
|
||||
- Kevin Robinson
|
||||
- Kewei Jiang
|
||||
- Kier Borromeo
|
||||
- KimCoding
|
||||
- Kirk Steven Hansen
|
||||
- Kit Randel
|
||||
- Kohei TAKATA
|
||||
- Koo Youngmin
|
||||
- Krystian Karczewski
|
||||
- Kunal Mehta
|
||||
- Kurt Ruppel
|
||||
- Kyle Kelley
|
||||
- Kyle Mathews
|
||||
- Laurence Rowe
|
||||
- Laurent Etiemble
|
||||
- Lee Byron
|
||||
- Lee Jaeyoung
|
||||
- Lei
|
||||
- Leland Richardson
|
||||
- Leon Fedotov
|
||||
- Leon Yip
|
||||
- Leonardo YongUk Kim
|
||||
- Levi Buzolic
|
||||
- Levi McCallum
|
||||
- Lily
|
||||
- Logan Allen
|
||||
- Lovisa Svallingson
|
||||
- Ludovico Fischer
|
||||
- Luigy Leon
|
||||
- Luke Horvat
|
||||
- MIKAMI Yoshiyuki
|
||||
- Maher Beg
|
||||
- Manas
|
||||
- Marcin K.
|
||||
- Marcin Kwiatkowski
|
||||
- Marcin Szczepanski
|
||||
- Mariano Desanze
|
||||
- Marjan
|
||||
- Mark Anderson
|
||||
- Mark Funk
|
||||
- Mark Hintz
|
||||
- Mark IJbema
|
||||
- Mark Murphy
|
||||
- Mark Richardson
|
||||
- Mark Rushakoff
|
||||
- Mark Sun
|
||||
- Marlon Landaverde
|
||||
- Marshall Roch
|
||||
- Martin Andert
|
||||
- Martin Hujer
|
||||
- Martin Jul
|
||||
- Martin Konicek
|
||||
- Martin Mihaylov
|
||||
- Masaki KOBAYASHI
|
||||
- Mathieu M-Gosselin
|
||||
- Mathieu Savy
|
||||
- Matias Singers
|
||||
- Matsunoki
|
||||
- Matt Brookes
|
||||
- Matt Dunn-Rankin
|
||||
- Matt Harrison
|
||||
- Matt Huggins
|
||||
- Matt Stow
|
||||
- Matt Zabriskie
|
||||
- Matthew Dapena-Tretter
|
||||
- Matthew Herbst
|
||||
- Matthew Hodgson
|
||||
- Matthew Johnston
|
||||
- Matthew King
|
||||
- Matthew Looi
|
||||
- Matthew Miner
|
||||
- Matthias Le Brun
|
||||
- Matti Nelimarkka
|
||||
- Mattijs Kneppers
|
||||
- Max F. Albrecht
|
||||
- Max Heiber
|
||||
- Max Stoiber
|
||||
- Maxi Ferreira
|
||||
- Maxim Abramchuk
|
||||
- Merrick Christensen
|
||||
- Mert Kahyaoğlu
|
||||
- Michael Chan
|
||||
- Michael McDermott
|
||||
- Michael Randers-Pehrson
|
||||
- Michael Ridgway
|
||||
- Michael Warner
|
||||
- Michael Wiencek
|
||||
- Michael Ziwisky
|
||||
- Michal Srb
|
||||
- Michelle Todd
|
||||
- Mihai Parparita
|
||||
- Mike D Pilsbury
|
||||
- Mike Groseclose
|
||||
- Mike Nordick
|
||||
- Mikolaj Dadela
|
||||
- Miles Johnson
|
||||
- Minwe LUO
|
||||
- Miorel Palii
|
||||
- - Mouad Debbar
|
||||
- - Morhaus
|
||||
- Moshe Kolodny
|
||||
- Mouad Debbar
|
||||
- Murad
|
||||
- Murray M. Moss
|
||||
- Nadeesha Cabral
|
||||
- Naman Goel
|
||||
- Nate Hunzaker
|
||||
- Nate Lee
|
||||
- Nathan Smith
|
||||
- Nathan White
|
||||
- Nee
|
||||
- Neri Marschik
|
||||
- Nguyen Truong Duy
|
||||
- Nicholas Bergson-Shilcock
|
||||
- Nicholas Clawson
|
||||
- Nick Balestra
|
||||
- Nick Fitzgerald
|
||||
- Nick Gavalas
|
||||
- Nick Merwin
|
||||
- Nick Presta
|
||||
- Nick Raienko
|
||||
- Nick Thompson
|
||||
- Nick Williams
|
||||
- Niklas Boström
|
||||
- Ning Xia
|
||||
- Niole Nelson
|
||||
- Oiva Eskola
|
||||
- Oleg
|
||||
- Oleksii Markhovskyi
|
||||
- Oliver Zeigermann
|
||||
- Olivier Tassinari
|
||||
- Owen Coutts
|
||||
- Pablo Lacerda de Miranda
|
||||
- Paolo Moretti
|
||||
- Pascal Hartig
|
||||
- Patrick
|
||||
- Patrick Laughlin
|
||||
- Patrick Stapleton
|
||||
- Paul Benigeri
|
||||
- Paul Harper
|
||||
- Paul O’Shannessy
|
||||
- Paul Seiffert
|
||||
- Paul Shen
|
||||
@@ -258,87 +512,186 @@
|
||||
- Peter Blazejewicz
|
||||
- Peter Cottle
|
||||
- Peter Jaros
|
||||
- Peter Newnham
|
||||
- Petri Lehtinen
|
||||
- Petri Lievonen
|
||||
- Pieter Vanderwerff
|
||||
- Pouja Nikray
|
||||
- Prathamesh Sonpatki
|
||||
- Prayag Verma
|
||||
- Preston Parry
|
||||
- Rafael
|
||||
- Rafal Dittwald
|
||||
- Rainer Oviir
|
||||
- Rajat Sehgal
|
||||
- Rajiv Tirumalareddy
|
||||
- Ram Kaniyur
|
||||
- Randall Randall
|
||||
- Ray
|
||||
- Raymond Ha
|
||||
- Reed Loden
|
||||
- Remko Tronçon
|
||||
- Richard D. Worth
|
||||
- Richard Feldman
|
||||
- Richard Kho
|
||||
- Richard Littauer
|
||||
- Richard Livesey
|
||||
- Richard Wood
|
||||
- Rick Beerendonk
|
||||
- Rick Ford
|
||||
- Riley Tomasek
|
||||
- Rob Arnold
|
||||
- Robert Binna
|
||||
- Robert Knight
|
||||
- Robert Sedovsek
|
||||
- Robin Berjon
|
||||
- Robin Frischmann
|
||||
- Roman Pominov
|
||||
- Roman Vanesyan
|
||||
- Russ
|
||||
- Ryan Seddon
|
||||
- Sahat Yalkabov
|
||||
- Saif Hakim
|
||||
- Saiichi Hashimoto
|
||||
- Sam Beveridge
|
||||
- Sam Saccone
|
||||
- Sam Selikoff
|
||||
- Samy Al Zahrani
|
||||
- Sander Spies
|
||||
- Scott Burch
|
||||
- Scott Feeney
|
||||
- Sean Kinsey
|
||||
- Sebastian Markbåge
|
||||
- Sebastian McKenzie
|
||||
- Seoh Char
|
||||
- Sercan Eraslan
|
||||
- Serg
|
||||
- Sergey Generalov
|
||||
- Sergey Rubanov
|
||||
- Seyi Adebajo
|
||||
- Shane O'Sullivan
|
||||
- Shaun Trennery
|
||||
- Sheraz
|
||||
- ShihChi Huang
|
||||
- Shim Won
|
||||
- Shinnosuke Watanabe
|
||||
- Shogun Sea
|
||||
- Shota Kubota
|
||||
- Shripad K
|
||||
- Sibi
|
||||
- Simen Bekkhus
|
||||
- Simon Højberg
|
||||
- Simon Welsh
|
||||
- Simone Vittori
|
||||
- Soichiro Kawamura
|
||||
- Sophia Westwood
|
||||
- Sota Ohara
|
||||
- Spencer Handley
|
||||
- Stefan Dombrowski
|
||||
- Stephen Murphy
|
||||
- Sterling Cobb
|
||||
- Steve Baker
|
||||
- Steven Luscher
|
||||
- Steven Vachon
|
||||
- Stoyan Stefanov
|
||||
- Sundeep Malladi
|
||||
- Sunny Juneja
|
||||
- Sven Helmberger
|
||||
- Sverre Johansen
|
||||
- Sébastien Lorber
|
||||
- Sławomir Laskowski
|
||||
- Taeho Kim
|
||||
- Tay Yang Shun
|
||||
- Ted Kim
|
||||
- Tengfei Guo
|
||||
- Teodor Szente
|
||||
- Thomas Aylott
|
||||
- Thomas Boyt
|
||||
- Thomas Broadley
|
||||
- Thomas Reggi
|
||||
- Thomas Röggla
|
||||
- Thomas Shaddox
|
||||
- Thomas Shafer
|
||||
- ThomasCrvsr
|
||||
- Tienchai Wirojsaksaree
|
||||
- Tim Routowicz
|
||||
- Tim Schaub
|
||||
- Timothy Yung
|
||||
- Timur Carpeev
|
||||
- Tobias Reiss
|
||||
- Tom Duncalf
|
||||
- Tom Haggie
|
||||
- Tom Hauburger
|
||||
- Tom MacWright
|
||||
- Tom Occhino
|
||||
- Tomasz Kołodziejski
|
||||
- Tomoya Suzuki
|
||||
- Tony Spiro
|
||||
- Toru Kobayashi
|
||||
- Trinh Hoang Nhu
|
||||
- Tsung Hung
|
||||
- Tyler Brock
|
||||
- Ustin Zarubin
|
||||
- Vadim Chernysh
|
||||
- Varun Rau
|
||||
- Vasiliy Loginevskiy
|
||||
- Victor Alvarez
|
||||
- Victor Homyakov
|
||||
- Victor Koenders
|
||||
- Ville Immonen
|
||||
- Vincent Riemer
|
||||
- Vincent Siao
|
||||
- Vipul A M
|
||||
- Vitaly Kramskikh
|
||||
- Vitor Balocco
|
||||
- Vjeux
|
||||
- Volkan Unsal
|
||||
- Wander Wang
|
||||
- Wayne Larsen
|
||||
- WickyNilliams
|
||||
- Wincent Colaiuta
|
||||
- Wout Mertens
|
||||
- Xavier Morel
|
||||
- XuefengWu
|
||||
- Yakov Dalinchuk
|
||||
- Yasar icli
|
||||
- YouBao Nong
|
||||
- Yuichi Hagio
|
||||
- Yuriy Dybskiy
|
||||
- Yutaka Nakajima
|
||||
- Yuval Dekel
|
||||
- Zach Bruggeman
|
||||
- Zach Ramaekers
|
||||
- Zacharias
|
||||
- Zeke Sikelianos
|
||||
- Zhangjd
|
||||
- adraeth
|
||||
- arush
|
||||
- brafdlog
|
||||
- chen
|
||||
- clariroid
|
||||
- claudiopro
|
||||
- cutbko
|
||||
- davidxi
|
||||
- dongmeng.ldm
|
||||
- iamchenxin
|
||||
- iamdoron
|
||||
- iawia002
|
||||
- imagentleman
|
||||
- koh-taka
|
||||
- kohashi85
|
||||
- laiso
|
||||
- leeyoungalias
|
||||
- li.li
|
||||
- maxprafferty
|
||||
- rgarifullin
|
||||
- songawee
|
||||
- sugarshin
|
||||
- wali-s
|
||||
- yiminghe
|
||||
- youmoo
|
||||
- zhangjg
|
||||
- zwhitchcox
|
||||
- "Árni Hermann Reynisson"
|
||||
- "元彦"
|
||||
- "凌恒"
|
||||
- "张敏"
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
# Map of short name to more information. `name` will be used but if you don't
|
||||
# want to use your real name, just use whatever. If url is included, your name
|
||||
# will be a link to the provided url.
|
||||
billandjing:
|
||||
name: Bill Fisher and Jing Chen
|
||||
benigeri:
|
||||
name: Paul Benigeri
|
||||
url: https://github.com/benigeri
|
||||
chenglou:
|
||||
name: Cheng Lou
|
||||
url: https://twitter.com/_chenglou
|
||||
@@ -12,17 +13,27 @@ Daniel15:
|
||||
fisherwebdev:
|
||||
name: Bill Fisher
|
||||
url: https://twitter.com/fisherwebdev
|
||||
gaearon:
|
||||
name: Dan Abramov
|
||||
url: https://twitter.com/dan_abramov
|
||||
jaredly:
|
||||
name: Jared Forsyth
|
||||
url: https://twitter.com/jaredforsyth
|
||||
jgebhardt:
|
||||
name: Jonas Gebhardt
|
||||
url: https://twitter.com/jonasgebhardt
|
||||
jimandsebastian:
|
||||
name: Jim Sproch and Sebastian Markbåge
|
||||
jimfb:
|
||||
name: Jim Sproch
|
||||
url: http://www.jimsproch.com
|
||||
jingc:
|
||||
name: Jing Chen
|
||||
url: https://twitter.com/jingc
|
||||
josephsavona:
|
||||
name: Joseph Savona
|
||||
url: https://twitter.com/en_JS
|
||||
keyanzhang:
|
||||
name: Keyan Zhang
|
||||
url: https://twitter.com/keyanzhang
|
||||
kmeht:
|
||||
name: Kunal Mehta
|
||||
url: https://github.com/kmeht
|
||||
|
||||
4
docs/_data/nav_contributing.yml
Normal file
4
docs/_data/nav_contributing.yml
Normal file
@@ -0,0 +1,4 @@
|
||||
- title: Contributing
|
||||
items:
|
||||
- id: design-principles
|
||||
title: Design Principles
|
||||
@@ -14,8 +14,10 @@
|
||||
title: Videos
|
||||
- id: complementary-tools
|
||||
title: Complementary Tools
|
||||
href: https://github.com/facebook/react/wiki/Complementary-Tools
|
||||
- id: examples
|
||||
title: Examples
|
||||
href: https://github.com/facebook/react/wiki/Examples
|
||||
- title: Guides
|
||||
items:
|
||||
- id: why-react
|
||||
@@ -46,6 +48,13 @@
|
||||
title: Refs to Components
|
||||
- id: tooling-integration
|
||||
title: Tooling Integration
|
||||
subitems:
|
||||
- id: language-tooling
|
||||
title: Language Tooling
|
||||
- id: package-management
|
||||
title: Package Management
|
||||
- id: environments
|
||||
title: Server-side Environments
|
||||
- id: addons
|
||||
title: Add-Ons
|
||||
subitems:
|
||||
@@ -65,8 +74,12 @@
|
||||
title: PureRenderMixin
|
||||
- id: perf
|
||||
title: Performance Tools
|
||||
- id: shallow-compare
|
||||
title: Shallow Compare
|
||||
- id: advanced-performance
|
||||
title: Advanced Performance
|
||||
- id: context
|
||||
title: Context
|
||||
- title: Reference
|
||||
items:
|
||||
- id: top-level-api
|
||||
@@ -85,13 +98,7 @@
|
||||
title: Special Non-DOM Attributes
|
||||
- id: reconciliation
|
||||
title: Reconciliation
|
||||
- id: webcomponents
|
||||
title: Web Components
|
||||
- id: glossary
|
||||
title: React (Virtual) DOM Terminology
|
||||
- title: Flux
|
||||
items:
|
||||
- id: flux-overview
|
||||
title: Flux Overview
|
||||
href: https://facebook.github.io/flux/docs/overview.html
|
||||
- id: flux-todo-list
|
||||
title: Flux TodoMVC Tutorial
|
||||
href: https://facebook.github.io/flux/docs/todo-list.html
|
||||
|
||||
@@ -11,11 +11,14 @@
|
||||
<p class="meta">
|
||||
{{ page.date | date: "%B %e, %Y" }}
|
||||
by
|
||||
{% if page.author.url %}
|
||||
<a href="{{page.author.url}}">{{ page.author.name }}</a>
|
||||
{% else %}
|
||||
{{ page.author.name }}
|
||||
{% endif %}
|
||||
{% for author in page.authors %}
|
||||
{% if author.url %}
|
||||
<a href="{{author.url}}">{{ author.name }}</a>
|
||||
{% else %}
|
||||
{{ author.name }}
|
||||
{% endif %}
|
||||
{% if forloop.last == false %} and {% endif %}
|
||||
{% endfor %}
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
@@ -35,4 +35,18 @@
|
||||
</ul>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<!-- Contributing Nav -->
|
||||
{% for section in site.data.nav_contributing %}
|
||||
<div class="nav-docs-section">
|
||||
<h3>{{ section.title }}</h3>
|
||||
<ul>
|
||||
{% for item in section.items %}
|
||||
<li>
|
||||
<a href="/react/contributing/{{ item.id }}.html"{% if page.id == item.id %} class="active"{% endif %}>{{ item.title }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
111
docs/_js/ErrorDecoderComponent.js
Normal file
111
docs/_js/ErrorDecoderComponent.js
Normal file
@@ -0,0 +1,111 @@
|
||||
/**
|
||||
* Copyright (c) 2013-present, Facebook, Inc.
|
||||
* All rights reserved.
|
||||
*
|
||||
* This source code is licensed under the BSD-style license found in the
|
||||
* LICENSE file in the root directory of this source tree. An additional grant
|
||||
* of patent rights can be found in the PATENTS file in the same directory.
|
||||
*/
|
||||
/* global React ReactDOM errorMap:true */
|
||||
'use strict';
|
||||
|
||||
function replaceArgs(msg, argList) {
|
||||
let argIdx = 0;
|
||||
return msg.replace(/%s/g, function() {
|
||||
const arg = argList[argIdx++];
|
||||
return arg === undefined ? '[missing argument]' : arg;
|
||||
});
|
||||
}
|
||||
|
||||
function urlify(str) {
|
||||
const urlRegex = /(https:\/\/fb\.me\/[a-z\-]+)/g;
|
||||
|
||||
const segments = str.split(urlRegex);
|
||||
|
||||
for (let i = 0; i < segments.length; i++) {
|
||||
if (i % 2 === 1) {
|
||||
segments[i] = (<a key={i} target="_blank" href={segments[i]}>{segments[i]}</a>);
|
||||
}
|
||||
}
|
||||
|
||||
return segments;
|
||||
}
|
||||
|
||||
// ?invariant=123&args[]=foo&args[]=bar
|
||||
function parseQueryString() {
|
||||
const rawQueryString = window.location.search.substring(1);
|
||||
if (!rawQueryString) {
|
||||
return null;
|
||||
}
|
||||
|
||||
let code = '';
|
||||
let args = [];
|
||||
|
||||
const queries = rawQueryString.split('&');
|
||||
for (let i = 0; i < queries.length; i++) {
|
||||
const query = decodeURIComponent(queries[i]);
|
||||
if (query.indexOf('invariant=') === 0) {
|
||||
code = query.slice(10);
|
||||
} else if (query.indexOf('args[]=') === 0) {
|
||||
args.push(query.slice(7));
|
||||
}
|
||||
}
|
||||
|
||||
return [code, args];
|
||||
}
|
||||
|
||||
function ErrorResult(props) {
|
||||
const code = props.code;
|
||||
const errorMsg = props.msg;
|
||||
|
||||
if (!code) {
|
||||
return (
|
||||
<p>When you encounter an error, you'll receive a link to this page for that specific error and we'll show you the full error text.</p>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<p>The full text of the error you just encountered is:</p>
|
||||
<code>{urlify(errorMsg)}</code>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
class ErrorDecoder extends React.Component {
|
||||
constructor(...args) {
|
||||
super(...args);
|
||||
|
||||
this.state = {
|
||||
code: null,
|
||||
errorMsg: '',
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
const parseResult = parseQueryString();
|
||||
if (parseResult != null) {
|
||||
const [code, args] = parseResult;
|
||||
if (errorMap[code]) {
|
||||
this.setState({
|
||||
code: code,
|
||||
errorMsg: replaceArgs(errorMap[code], args),
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ErrorResult
|
||||
code={this.state.code}
|
||||
msg={this.state.errorMsg}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<ErrorDecoder />,
|
||||
document.querySelector('.error-decoder-container')
|
||||
);
|
||||
@@ -7,7 +7,8 @@ var MarkdownEditor = React.createClass({
|
||||
this.setState({value: this.refs.textarea.value});
|
||||
},
|
||||
rawMarkup: function() {
|
||||
return { __html: marked(this.state.value, {sanitize: true}) };
|
||||
var md = new Remarkable();
|
||||
return { __html: md.render(this.state.value) };
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
var TODO_COMPONENT = `
|
||||
var TodoList = React.createClass({
|
||||
render: function() {
|
||||
var createItem = function(itemText, index) {
|
||||
return <li key={index + itemText}>{itemText}</li>;
|
||||
var createItem = function(item) {
|
||||
return <li key={item.id}>{item.text}</li>;
|
||||
};
|
||||
return <ul>{this.props.items.map(createItem)}</ul>;
|
||||
}
|
||||
@@ -16,7 +16,7 @@ var TodoApp = React.createClass({
|
||||
},
|
||||
handleSubmit: function(e) {
|
||||
e.preventDefault();
|
||||
var nextItems = this.state.items.concat([this.state.text]);
|
||||
var nextItems = this.state.items.concat([{text: this.state.text, id: Date.now()}]);
|
||||
var nextText = '';
|
||||
this.setState({items: nextItems, text: nextText});
|
||||
},
|
||||
|
||||
@@ -1,82 +0,0 @@
|
||||
/**
|
||||
* Copyright 2013-2015, Facebook, Inc.
|
||||
* All rights reserved.
|
||||
*
|
||||
* This source code is licensed under the BSD-style license found in the
|
||||
* LICENSE file in the root directory of this source tree. An additional grant
|
||||
* of patent rights can be found in the PATENTS file in the same directory.
|
||||
*/
|
||||
|
||||
/**
|
||||
* This is a web interface for the HTML to JSX converter contained in
|
||||
* `html-jsx-lib.js`.
|
||||
*/
|
||||
;(function() {
|
||||
|
||||
var HELLO_COMPONENT = "\
|
||||
<!-- Hello world -->\n\
|
||||
<div class=\"awesome\" style=\"border: 1px solid red\">\n\
|
||||
<label for=\"name\">Enter your name: </label>\n\
|
||||
<input type=\"text\" id=\"name\" />\n\
|
||||
</div>\n\
|
||||
<p>Enter your HTML here</p>\
|
||||
";
|
||||
|
||||
var HTMLtoJSXComponent = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {
|
||||
outputClassName: 'NewComponent',
|
||||
createClass: true
|
||||
};
|
||||
},
|
||||
onReactClassNameChange: function(evt) {
|
||||
this.setState({ outputClassName: evt.target.value });
|
||||
},
|
||||
onCreateClassChange: function(evt) {
|
||||
this.setState({ createClass: evt.target.checked });
|
||||
},
|
||||
setInput: function(input) {
|
||||
this.setState({ input: input });
|
||||
this.convertToJsx();
|
||||
},
|
||||
convertToJSX: function(input) {
|
||||
var converter = new HTMLtoJSX({
|
||||
outputClassName: this.state.outputClassName,
|
||||
createClass: this.state.createClass
|
||||
});
|
||||
return converter.convert(input);
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<div>
|
||||
<div id="options">
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={this.state.createClass}
|
||||
onChange={this.onCreateClassChange} />
|
||||
Create class
|
||||
</label>
|
||||
<label style={{display: this.state.createClass ? '' : 'none'}}>
|
||||
·
|
||||
Class name:
|
||||
<input
|
||||
type="text"
|
||||
value={this.state.outputClassName}
|
||||
onChange={this.onReactClassNameChange} />
|
||||
</label>
|
||||
</div>
|
||||
<ReactPlayground
|
||||
codeText={HELLO_COMPONENT}
|
||||
renderCode={true}
|
||||
transformer={this.convertToJSX}
|
||||
showCompiledJSTab={false}
|
||||
editorTabTitle="Live HTML Editor"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(<HTMLtoJSXComponent />, document.getElementById('jsxCompiler'));
|
||||
}());
|
||||
@@ -22,7 +22,7 @@ var CodeMirrorEditor = React.createClass({
|
||||
if (IS_MOBILE) return;
|
||||
|
||||
this.editor = CodeMirror.fromTextArea(ReactDOM.findDOMNode(this.refs.editor), {
|
||||
mode: 'javascript',
|
||||
mode: 'jsx',
|
||||
lineNumbers: this.props.lineNumbers,
|
||||
lineWrapping: true,
|
||||
smartIndent: false, // javascript mode does bad things with jsx indents
|
||||
|
||||
23
docs/_layouts/contributing.html
Normal file
23
docs/_layouts/contributing.html
Normal file
@@ -0,0 +1,23 @@
|
||||
---
|
||||
layout: default
|
||||
sectionid: contributing
|
||||
---
|
||||
|
||||
<section class="content wrap documentationContent">
|
||||
{% include nav_docs.html %}
|
||||
|
||||
<div class="inner-content">
|
||||
<h1>{{ page.title }}</h1>
|
||||
<div class="subHeader">{{ page.description }}</div>
|
||||
{{ content }}
|
||||
|
||||
<div class="docs-prevnext">
|
||||
{% if page.prev %}
|
||||
<a class="docs-prev" href="/react/contributing/{{ page.prev }}">← Prev</a>
|
||||
{% endif %}
|
||||
{% if page.next %}
|
||||
<a class="docs-next" href="/react/contributing/{{ page.next }}">Next →</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -16,6 +16,7 @@
|
||||
<link rel="shortcut icon" href="/react/favicon.ico">
|
||||
<link rel="alternate" type="application/rss+xml" title="{{ site.name }}" href="{{ site.url }}{{ site.baseurl }}/feed.xml">
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
|
||||
<link rel="stylesheet" href="/react/css/syntax.css">
|
||||
<link rel="stylesheet" href="/react/css/codemirror.css">
|
||||
<link rel="stylesheet" href="/react/css/react.css">
|
||||
@@ -28,8 +29,11 @@
|
||||
<script src="/react/js/es5-shim.min.js"></script>
|
||||
<script src="/react/js/es5-sham.min.js"></script>
|
||||
<![endif]-->
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
|
||||
<script src="/react/js/codemirror.js"></script>
|
||||
<script src="/react/js/javascript.js"></script>
|
||||
<script src="/react/js/xml.js"></script>
|
||||
<script src="/react/js/jsx.js"></script>
|
||||
<script src="/react/js/react.js"></script>
|
||||
<script src="/react/js/react-dom.js"></script>
|
||||
<script src="/react/js/babel-browser.min.js"></script>
|
||||
@@ -46,15 +50,18 @@
|
||||
React
|
||||
</a>
|
||||
<ul class="nav-site nav-site-internal">
|
||||
<li><a href="/react/docs/getting-started.html"{% if page.sectionid == 'docs' or page.sectionid == 'tips' %} class="active"{% endif %}>Docs</a></li>
|
||||
<li><a href="/react/docs/getting-started.html"{% if page.sectionid == 'docs' or page.sectionid == 'tips' or page.sectionid == 'contributing' %} class="active"{% endif %}>Docs</a></li>
|
||||
<li><a href="/react/support.html"{% if page.id == 'support' %} class="active"{% endif %}>Support</a></li>
|
||||
<li><a href="/react/downloads.html"{% if page.id == 'downloads' %} class="active"{% endif %}>Download</a></li>
|
||||
<li><a href="/react/blog/"{% if page.sectionid == 'blog' %} class="active"{% endif %}>Blog</a></li>
|
||||
<li>
|
||||
<input id="algolia-doc-search" type="text" placeholder="Search docs..." />
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul class="nav-site nav-site-external">
|
||||
<li><a href="https://github.com/facebook/react">GitHub</a>
|
||||
<li><a href="https://facebook.github.io/react-native/">React Native</a>
|
||||
<li><a href="https://github.com/facebook/react">GitHub</a></li>
|
||||
<li><a href="https://facebook.github.io/react-native/">React Native</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -104,9 +111,15 @@
|
||||
var js, fjs = d.getElementsByTagName(s)[0];
|
||||
if (d.getElementById(id)) return;
|
||||
js = d.createElement(s); js.id = id;
|
||||
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=623268441017527";
|
||||
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId=623268441017527";
|
||||
fjs.parentNode.insertBefore(js, fjs);
|
||||
}(document, 'script', 'facebook-jssdk'));
|
||||
|
||||
docsearch({
|
||||
apiKey: '36221914cce388c46d0420343e0bb32e',
|
||||
indexName: 'react',
|
||||
inputSelector: '#algolia-doc-search'
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -7,9 +7,9 @@ sectionid: docs
|
||||
{% include nav_docs.html %}
|
||||
|
||||
<div class="inner-content">
|
||||
<a class="edit-page-link" href="https://github.com/facebook/react/tree/master/docs/{{ page.path }}" target="_blank">Edit on GitHub</a>
|
||||
<h1>
|
||||
{{ page.title }}
|
||||
<a class="edit-page-link" href="https://github.com/facebook/react/tree/master/docs/{{ page.path }}" target="_blank">Edit on GitHub</a>
|
||||
</h1>
|
||||
<div class="subHeader">{{ page.description }}</div>
|
||||
|
||||
|
||||
8
docs/_layouts/redirect.html
Normal file
8
docs/_layouts/redirect.html
Normal file
@@ -0,0 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>Redirecting...</title>
|
||||
<link rel=canonical href="{{ page.dest_url }}">
|
||||
<meta http-equiv=refresh content="0; url={{ page.dest_url }}">
|
||||
<h1>Redirecting...</h1>
|
||||
<a href="{{ page.dest_url }}">Click here if you are not redirected.</a>
|
||||
<script>location="{{ page.dest_url }}"</script>
|
||||
@@ -6,8 +6,16 @@
|
||||
module Authors
|
||||
class Generator < Jekyll::Generator
|
||||
def generate(site)
|
||||
site.posts.each do |post|
|
||||
post.data['author'] = site.data['authors'][post['author']]
|
||||
site.posts.docs.each do |post|
|
||||
authors = []
|
||||
if post['author'].kind_of?(Array)
|
||||
for author in post['author']
|
||||
authors.push(site.data['authors'][author])
|
||||
end
|
||||
else
|
||||
authors.push(site.data['authors'][post['author']])
|
||||
end
|
||||
post.data['authors'] = authors
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
@@ -4,7 +4,14 @@ module Jekyll
|
||||
pageID = @context.registers[:page]["id"]
|
||||
itemID = item["id"]
|
||||
href = item["href"] || "/react/docs/#{itemID}.html"
|
||||
className = pageID == itemID ? ' class="active"' : ''
|
||||
classes = []
|
||||
if pageID == itemID
|
||||
classes.push("active")
|
||||
end
|
||||
if item["href"]
|
||||
classes.push("external")
|
||||
end
|
||||
className = classes.size > 0 ? " class=\"#{classes.join(' ')}\"" : ""
|
||||
|
||||
return "<a href=\"#{href}\"#{className}>#{item["title"]}</a>"
|
||||
end
|
||||
|
||||
@@ -34,7 +34,7 @@ While this is not going to work for all the attributes since they are camelCased
|
||||
|
||||
## Remarkable React
|
||||
|
||||
[Stoyan Stefanov](http://www.phpied.com/) gave a talk at [BrazilJS](http://braziljs.com.br/) about React and wrote an article with the content of the presentation. He goes through the difficulties of writting _active apps_ using the DOM API and shows how React handles it.
|
||||
[Stoyan Stefanov](http://www.phpied.com/) gave a talk at [BrazilJS](http://braziljs.com.br/) about React and wrote an article with the content of the presentation. He goes through the difficulties of writing _active apps_ using the DOM API and shows how React handles it.
|
||||
|
||||
> So how does exactly React deal with it internally? Two crazy ideas - virtual DOM and synthetic events.
|
||||
>
|
||||
|
||||
@@ -56,7 +56,7 @@ The video will be available soon on the [JSConf EU website](http://2013.jsconf.e
|
||||
|
||||
[Todd Kennedy](http://blog.selfassembled.org/) working at [Condé Nast](http://www.condenast.com/) implemented a wrapper on-top of [JSHint](http://www.jshint.com/) that first converts JSX files to JS.
|
||||
|
||||
> A wrapper around JSHint to allow linting of files containg JSX syntax. Accepts glob patterns. Respects your local .jshintrc file and .gitignore to filter your glob patterns.
|
||||
> A wrapper around JSHint to allow linting of files containing JSX syntax. Accepts glob patterns. Respects your local .jshintrc file and .gitignore to filter your glob patterns.
|
||||
>
|
||||
> ```
|
||||
npm install -g jsxhint
|
||||
|
||||
@@ -13,7 +13,7 @@ React is only one-piece of your web application stack. [Mark Lussier](https://gi
|
||||
>
|
||||
> I encourage you to fork, and make it right and submit a pull request!
|
||||
>
|
||||
> My current opinion is using tools like Grunt, Browserify, Bower and mutiple grunt plugins to get the job done. I also opted for Zepto over jQuery and the Flatiron Project's Director when I need a router. Oh and for the last little bit of tech that makes you mad, I am in the SASS camp when it comes to stylesheets
|
||||
> 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
|
||||
>
|
||||
> [Check it out on GitHub...](https://github.com/intabulas/reactjs-baseline)
|
||||
|
||||
|
||||
@@ -54,7 +54,7 @@ It's great to see the React community expand internationally. [This site](http:/
|
||||
|
||||
### Egghead.io video tutorials
|
||||
|
||||
Joe Maddalone ([@joemaddalone](https://twitter.com/joemaddalone)) of [egghead.io](https://egghead.io/) created a series of React video tutorials, such as [this](http://www.youtube-nocookie.com/watch?v=rFvZydtmsxM&feature=youtu.be&a) introduction to React Components. [[part 1](http://www.youtube-nocookie.com/watch?v=rFvZydtmsxM&feature=youtu.be&a)], [[part 2](http://www.youtube-nocookie.com/watch?v=5yvFLrt7N8M)]
|
||||
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)]
|
||||
|
||||
### "React: Finally, a great server/client web stack"
|
||||
|
||||
|
||||
@@ -49,7 +49,7 @@ React.DOM.div(null,
|
||||
)
|
||||
```
|
||||
|
||||
We believe this new behavior is more helpful and elimates cases where unwanted whitespace was previously added.
|
||||
We believe this new behavior is more helpful and eliminates cases where unwanted whitespace was previously added.
|
||||
|
||||
In cases where you want to preserve the space adjacent to a newline, you can write a JS string like `{"Monkeys: "}` in your JSX source. We've included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can [install jsx\_whitespace\_transformer from npm](https://github.com/facebook/react/blob/master/npm-jsx_whitespace_transformer/README.md) and run it over your source tree to modify files in place. The transformed JSX files will preserve your code's existing whitespace behavior.
|
||||
|
||||
|
||||
@@ -57,7 +57,7 @@ React.DOM.div(null,
|
||||
)
|
||||
```
|
||||
|
||||
We believe this new behavior is more helpful and elimates cases where unwanted whitespace was previously added.
|
||||
We believe this new behavior is more helpful and eliminates cases where unwanted whitespace was previously added.
|
||||
|
||||
In cases where you want to preserve the space adjacent to a newline, you can write `{'Monkeys: '}` or `Monkeys:{' '}` in your JSX source. We've included a script to do an automated codemod of your JSX source tree that preserves the old whitespace behavior by adding and removing spaces appropriately. You can [install jsx\_whitespace\_transformer from npm](https://github.com/facebook/react/blob/master/npm-jsx_whitespace_transformer/README.md) and run it over your source tree to modify files in place. The transformed JSX files will preserve your code's existing whitespace behavior.
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: "Flux: An Application Architecture for React"
|
||||
author: fisherwebdevandjing
|
||||
author: [fisherwebdev, jingc]
|
||||
---
|
||||
|
||||
We recently spoke at one of f8's breakout session about Flux, a data flow architecture that works well with React. Check out the video here:
|
||||
|
||||
@@ -41,7 +41,7 @@ We have wanted to do this since before we even open sourced React. No more `/**
|
||||
|
||||
The React specific JSX transform no longer transforms to function calls. Instead we use `React.createElement` and pass it arguments. This allows us to make optimizations and better support React as a compile target for things like Om. Read more in the [React Elements introduction](/react/blog/2014/10/14/introducting-react-elements.html).
|
||||
|
||||
The result of this change is that we will no longer support arbitrary function calls. We understand that the ability to do was was a convenient shortcut for many people but we believe the gains will be worth it.
|
||||
The result of this change is that we will no longer support arbitrary function calls. We understand that the ability to do was a convenient shortcut for many people but we believe the gains will be worth it.
|
||||
|
||||
|
||||
### JSX Lower-case Convention
|
||||
|
||||
@@ -10,14 +10,14 @@ amazed that 600 people requested to be notified when ticket go on sale. This is
|
||||
When we organized the conference, we decided to start small since this is the
|
||||
first React.js conference. Also, we weren't sure what level of demand to expect,
|
||||
so we planned for a single-track, two-day conference on Facebook's campus. The
|
||||
largest room available would accomodate 18 speaking slots and 200 attendees.
|
||||
largest room available would accommodate 18 speaking slots and 200 attendees.
|
||||
The spacial configuration makes it difficult to add a second track and changing
|
||||
venues only two months in advance would be too difficult, so we are deciding to
|
||||
stick with the originally planned format and venue on Facebook's campus.
|
||||
|
||||
Unfortunately, this means that we can only accept a small number of the awesome
|
||||
conference talk proposals. In order to make sure attendees get a fair shot at
|
||||
registering, we're going to to sell tickets in three separate first-come,
|
||||
registering, we're going to sell tickets in three separate first-come,
|
||||
first-serve phases. **Tickets will cost $200 regardless of which phase they are
|
||||
purchased from and all proceeds will go to charity**.
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ layout: post
|
||||
author: steveluscher
|
||||
---
|
||||
|
||||
It was a privilege to welcome the React community to Facebook HQ on January 28–29 for the first-ever React.js Conf, and a pleasure to be be able to unveil three new technologies that we've been using internally at Facebook for some time: GraphQL, Relay, and React Native.
|
||||
It was a privilege to welcome the React community to Facebook HQ on January 28–29 for the first-ever React.js Conf, and a pleasure to be able to unveil three new technologies that we've been using internally at Facebook for some time: GraphQL, Relay, and React Native.
|
||||
|
||||
## The talks
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@ title: "Building The Facebook News Feed With Relay"
|
||||
author: josephsavona
|
||||
---
|
||||
|
||||
At React.js Conf in January we gave a preview of Relay, a new framework for building data-driven applications in React. In this post, we'll describe the process of creating a Relay application. This post assumes some familiarity with the concepts of Relay and GraphQL, so if you haven't already we recommend reading [our introductory blog post](/react/blog/2015/02/20/introducing-relay-and-graphql.html) or watching [the conference talk](https://www.youtube-nocookie.com/watch?v=9sc8Pyc51uU).
|
||||
At React.js Conf in January we gave a preview of Relay, a new framework for building data-driven applications in React. In this post, we'll describe the process of creating a Relay application. This post assumes some familiarity with the concepts of Relay and GraphQL, so if you haven't already we recommend reading [our introductory blog post](/react/blog/2015/02/20/introducing-relay-and-graphql.html) or watching [the conference talk](https://www.youtube-nocookie.com/v/9sc8Pyc51uU).
|
||||
|
||||
We're working hard to prepare GraphQL and Relay for public release. In the meantime, we'll continue to provide information about what you can expect.
|
||||
|
||||
@@ -40,20 +40,18 @@ The first step is a React `<Story>` component that accepts a `story` prop with t
|
||||
|
||||
```javascript
|
||||
// Story.react.js
|
||||
class Story extends React.Component {
|
||||
export default class Story extends React.Component {
|
||||
render() {
|
||||
var story = this.props.story;
|
||||
return (
|
||||
<View>
|
||||
<Image uri={story.author.profile_picture.uri} />
|
||||
<Image uri={story.author.profilePicture.uri} />
|
||||
<Text>{story.author.name}</Text>
|
||||
<Text>{story.text}</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Story;
|
||||
```
|
||||
|
||||
<br/>
|
||||
@@ -66,41 +64,41 @@ Relay automates the process of fetching data for components by wrapping existing
|
||||
// Story.react.js
|
||||
class Story extends React.Component { ... }
|
||||
|
||||
module.exports = Relay.createContainer(Story, {
|
||||
queries: {
|
||||
export default Relay.createContainer(Story, {
|
||||
fragments: {
|
||||
story: /* TODO */
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
Before adding the GraphQL query, let's look at the component hierarchy this creates:
|
||||
Before adding the GraphQL fragment, let's look at the component hierarchy this creates:
|
||||
|
||||
<img src="/react/img/blog/relay-components/relay-containers.png" width="397" alt="React Container Data Flow" />
|
||||
|
||||
Most props will be passed through from the container to the original component. However, Relay will return the query results for a prop whenever a query is defined. In this case we'll add a GraphQL query for `story`:
|
||||
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`:
|
||||
|
||||
```javascript
|
||||
// Story.react.js
|
||||
class Story extends React.Component { ... }
|
||||
|
||||
module.exports = Relay.createContainer(Story, {
|
||||
queries: {
|
||||
story: graphql`
|
||||
Story {
|
||||
export default Relay.createContainer(Story, {
|
||||
fragments: {
|
||||
story: () => Relay.QL`
|
||||
fragment on Story {
|
||||
author {
|
||||
name,
|
||||
profile_picture {
|
||||
name
|
||||
profilePicture {
|
||||
uri
|
||||
}
|
||||
},
|
||||
}
|
||||
text
|
||||
}
|
||||
`
|
||||
}
|
||||
`,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
Queries use ES6 template literals tagged with the `graphql` function. Similar to how JSX transpiles to plain JavaScript objects and function calls, these template literals transpile to plain objects that describe queries. Note that the query's structure closely matches the object structure that we expected in `<Story>`'s render function.
|
||||
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.
|
||||
|
||||
<br/>
|
||||
|
||||
@@ -112,7 +110,7 @@ We can render a Relay component by providing Relay with the component (`<Story>`
|
||||
{
|
||||
author: {
|
||||
name: "Greg",
|
||||
profile_picture: {
|
||||
profilePicture: {
|
||||
uri: "https://…"
|
||||
}
|
||||
},
|
||||
@@ -159,35 +157,35 @@ module.exports = NewsFeed;
|
||||
|
||||
`<NewsFeed>` has two new requirements: it composes `<Story>` and requests more data at runtime.
|
||||
|
||||
Just as React views can be nested, Relay queries can compose queries from child components. Composition in GraphQL uses ES6 template literal substitution: `${Component.getQuery('prop')}`. Pagination can be accomplished with a query parameter, specified with `<param>` (as in `stories(first: <count>)`):
|
||||
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)`):
|
||||
|
||||
```javascript
|
||||
// NewsFeed.react.js
|
||||
class NewsFeed extends React.Component { ... }
|
||||
|
||||
module.exports = Relay.createContainer(NewsFeed, {
|
||||
queryParams: {
|
||||
count: 3 /* default to 3 stories */
|
||||
export default Relay.createContainer(NewsFeed, {
|
||||
initialVariables: {
|
||||
count: 3 /* default to 3 stories */
|
||||
},
|
||||
queries: {
|
||||
viewer: graphql`
|
||||
Viewer {
|
||||
stories(first: <count>) { /* fetch viewer's stories */
|
||||
edges { /* traverse the graph */
|
||||
fragments: {
|
||||
viewer: () => Relay.QL`
|
||||
fragment on Viewer {
|
||||
stories(first: $count) { /* fetch viewer's stories */
|
||||
edges { /* traverse the graph */
|
||||
node {
|
||||
${Story.getQuery('story')} /* compose child query */
|
||||
${Story.getFragment('story')} /* compose child fragment */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
}
|
||||
`,
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
Whenever `<NewsFeed>` is rendered, Relay will recursively expand all the composed queries and fetch them in a single trip to the server. In this case, the `text` and `author` data will be fetched for each of the 3 story nodes.
|
||||
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.
|
||||
|
||||
Query parameters are available to components as `props.queryParams` and can be modified with `props.setQueryParams(nextParams)`. We can use these to implement pagination:
|
||||
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:
|
||||
|
||||
```javascript
|
||||
// NewsFeed.react.js
|
||||
@@ -196,16 +194,16 @@ class NewsFeed extends React.Component {
|
||||
|
||||
loadMore() {
|
||||
// read current params
|
||||
var count = this.props.queryParams.count;
|
||||
var count = this.props.relay.variables.count;
|
||||
// update params
|
||||
this.props.setQueryParams({
|
||||
count: count + 5
|
||||
this.props.relay.setVariables({
|
||||
count: count + 5,
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Now when `loadMore()` is called, Relay will send a GraphQL request for the additional five stories. When these stories are fetched, the component will re-render with the new stories available in `props.viewer.stories` and the updated count reflected in `props.queryParams.count`.
|
||||
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`.
|
||||
|
||||
<br/>
|
||||
|
||||
|
||||
@@ -77,7 +77,7 @@ We believe there are a number of weakness in typical REST systems, ones that are
|
||||
|
||||
* Fetching complicated object graphs require multiple round trips between the client and server to render single views. For mobile applications operating in variable network conditions, these multiple roundtrips are highly undesirable.
|
||||
* Invariably fields and additional data are added to REST endpoints as the system requirements change. However, old clients also receive this additional data as well, because the data fetching specification is encoded on the server rather than the client. As result, these payloads tend to grow over time for all clients. When this becomes a problem for a system, one solution is to overlay a versioning system onto the REST endpoints. Versioning also complicates a server, and results in code duplication, spaghetti code, or a sophisticated, hand-rolled infrastructure to manage it. Another solution to limit over-fetching is to provide multiple views – such as “compact” vs “full” – of the same REST endpoint, however this coarse granularity often does not offer adequate flexibility.
|
||||
* REST endpoints are usually weakly-typed and lack machine-readable metadata. While there is much debate about the merits of strong- versus weak-typing in distributed systems, we believe in strong typing because of the correctness guarantees and tooling opportunities it provides. Developer deal with systems that lack this metadata by inspecting frequently out-of-date documentation and then writing code against the documentation.
|
||||
* REST endpoints are usually weakly-typed and lack machine-readable metadata. While there is much debate about the merits of strong- versus weak-typing in distributed systems, we believe in strong typing because of the correctness guarantees and tooling opportunities it provides. Developers deal with systems that lack this metadata by inspecting frequently out-of-date documentation and then writing code against the documentation.
|
||||
* Many of these attributes are linked to the fact that “REST is intended for long-lived network-based applications that span multiple organizations” [according to its inventor](http://roy.gbiv.com/untangled/2008/rest-apis-must-be-hypertext-driven). This is not a requirement for APIs that serve a client app built within the same organization.
|
||||
|
||||
Nearly all externally facing REST APIs we know of trend or end up in these non-ideal states, as well as nearly all *internal* REST APIs. The consequences of opaqueness and over-fetching are more severe in internal APIs since their velocity of change and level of usage is almost always higher.
|
||||
@@ -90,7 +90,7 @@ Because of multiple round-trips and over-fetching, applications built in the RES
|
||||
Many applications have no formalized client-server contract. Product developers access server capabilities through *ad hoc* endpoints and write custom code to fetch the data they need. Servers define procedures, and they return data. This approach has the virtue of simplicity, but can often become untenable as systems age.
|
||||
|
||||
* These systems typically define a custom endpoint per view. For systems with a wide surface area this can quickly grow into a maintenance nightmare of orphaned endpoints, inconsistent tooling, and massive server code duplication. Disciplined engineering organizations can mitigate these issues with great engineering practices, high quality abstractions, and custom tooling. However, given our experience we believe that custom endpoints tend to lead to entropic server codebases.
|
||||
* Much like REST, the payloads of custom endpoints grow monotonically (even with mitigation from versioning systems) as the server evolves. Deployed clients cannot break, and, with rapid release cycles and backwards compatibility guarantees, distributed applications will have large numbers of extant versions. Under these constraints it is difficult remove data from a custom endpoint.
|
||||
* Much like REST, the payloads of custom endpoints grow monotonically (even with mitigation from versioning systems) as the server evolves. Deployed clients cannot break, and, with rapid release cycles and backwards compatibility guarantees, distributed applications will have large numbers of extant versions. Under these constraints it is difficult to remove data from a custom endpoint.
|
||||
* Custom endpoints tend to – for a client developer – create a clunky, multi-language, multi-environment development process. No matter if the data has been accessed before in a different view, they are required to first change the custom endpoint, then deploy that code to a server accessible from a mobile device, and only then change the client to utilize that data. In GraphQL – unless the data in the view is completely new to the entire system – a product developer adds a field to a GraphQL query and the work on the client continues unabated.
|
||||
* Much like REST, most systems with custom endpoints do not have a formalized type system, which eliminates the possibility for the tools and guarantees that introspective type systems can provide. Some custom-endpoint-driven systems do use a strongly typed serialization scheme, such as Protocol Buffers, Thrift, or XML. Those do allow for direct parsing of responses into typed classes and eliminating boilerplate shuffling from JSON into handwritten classes. These systems are as not as expressive and flexible as GraphQL, and the other downsides of *ad hoc* endpoints remain.
|
||||
|
||||
|
||||
@@ -57,7 +57,7 @@ These builds are also available in the `react` package on bower.
|
||||
ReactDOM.render(<MyComponent />, node);
|
||||
```
|
||||
|
||||
We’ve published the [automated codemod script](https://github.com/facebook/react/blob/master/packages/react-codemod/README.md) we used at Facebook to help you with this transition.
|
||||
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.
|
||||
|
||||
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`.
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: "ReactDOM.render and the Top Level React API"
|
||||
author: jimandsebastian
|
||||
author: ["jimfb", "sebmarkbage"]
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -15,6 +15,8 @@ Like always, we have a few breaking changes in this release. We know changes can
|
||||
|
||||
If your code is free of warnings when running under React 0.13, upgrading should be easy. We have two new small breaking changes that didn't give a warning in 0.13 (see below). Every new change in 0.14, including the major changes below, is introduced with a runtime warning and will work as before until 0.15, so you don't have to worry about your app breaking with this upgrade.
|
||||
|
||||
For the two major changes which require significant code changes, we've included [codemod scripts](https://github.com/reactjs/react-codemod/blob/master/README.md) to help you upgrade your code automatically.
|
||||
|
||||
See the changelog below for more details.
|
||||
|
||||
## Installation
|
||||
@@ -64,7 +66,7 @@ If you can’t use `npm` yet, we provide pre-built browser builds for your conve
|
||||
ReactDOM.render(<MyComponent />, node);
|
||||
```
|
||||
|
||||
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/facebook/react/blob/master/packages/react-codemod/README.md) we used at Facebook to help you with this transition.
|
||||
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.
|
||||
|
||||
The add-ons have moved to separate packages as well:
|
||||
- `react-addons-clone-with-props`
|
||||
@@ -99,7 +101,7 @@ If you can’t use `npm` yet, we provide pre-built browser builds for your conve
|
||||
```
|
||||
|
||||
This change also applies to the return result of `ReactDOM.render` when passing a DOM node as the top component. As with refs, this change does not affect custom components.
|
||||
|
||||
|
||||
With this change, 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.
|
||||
|
||||
- #### Stateless functional components
|
||||
@@ -124,7 +126,7 @@ If you can’t use `npm` yet, we provide pre-built browser builds for your conve
|
||||
```
|
||||
|
||||
These components behave just like a React class with only a `render` method defined. Since no component instance is created for a functional component, any `ref` added to one will evaluate to `null`. Functional components do not have lifecycle methods, but you can set `.propTypes` and `.defaultProps` as properties on the function.
|
||||
|
||||
|
||||
This pattern is designed to encourage the creation of these simple components that should comprise large portions of your apps. In the future, we’ll also be able to make performance optimizations specific to these components by avoiding unnecessary checks and memory allocations.
|
||||
|
||||
- #### Deprecation of react-tools
|
||||
@@ -133,7 +135,7 @@ If you can’t use `npm` yet, we provide pre-built browser builds for your conve
|
||||
|
||||
- #### Compiler optimizations
|
||||
|
||||
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.
|
||||
React now supports two compiler optimizations that can be enabled in Babel 5.8.24 and newer. Both of these transforms **should be enabled only in production** (e.g., just before minifying your code) because although they improve runtime performance, they make warning messages more cryptic and skip important checks that happen in development mode, including propTypes.
|
||||
|
||||
**Inlining React elements:** The `optimisation.react.inlineElements` transform converts JSX elements to object literals like `{type: 'div', props: ...}` instead of calls to `React.createElement`.
|
||||
|
||||
@@ -159,7 +161,7 @@ Each of these changes will continue to work as before with a new warning until t
|
||||
|
||||
- Due to the DOM node refs change mentioned above, `this.getDOMNode()` is now deprecated and `ReactDOM.findDOMNode(this)` can be used instead. Note that in most cases, calling `findDOMNode` is now unnecessary – see the example above in the “DOM node refs” section.
|
||||
|
||||
With each returned DOM node, we've added a `getDOMNode` method for backwards compatibility that will work with a warning until 0.15. If you have a large codebase, you can use our [automated codemod script](https://github.com/facebook/react/blob/master/packages/react-codemod/README.md) to change your code automatically.
|
||||
With each returned DOM node, we've added a `getDOMNode` method for backwards compatibility that will work with a warning until 0.15. If you have a large codebase, you can use our [automated codemod script](https://github.com/reactjs/react-codemod/blob/master/README.md) to change your code automatically.
|
||||
|
||||
- `setProps` and `replaceProps` are now deprecated. Instead, call ReactDOM.render again at the top level with the new props.
|
||||
- ES6 component classes must now extend `React.Component` in order to enable stateless function components. The [ES3 module pattern](/react/blog/2015/01/27/react-v0.13.0-beta-1.html#other-languages) will continue to work.
|
||||
|
||||
86
docs/_posts/2015-10-19-reactiflux-is-moving-to-discord.md
Normal file
86
docs/_posts/2015-10-19-reactiflux-is-moving-to-discord.md
Normal file
@@ -0,0 +1,86 @@
|
||||
---
|
||||
title: "Reactiflux is moving to Discord"
|
||||
author: benigeri
|
||||
---
|
||||
|
||||
TL;DR: Slack decided that Reactiflux had too many members and disabled new invites. Reactiflux is moving to Discord. Join us: [http://join.reactiflux.com](http://join.reactiflux.com/)
|
||||
|
||||
## What happened with Slack?
|
||||
|
||||
A few weeks ago, Reactiflux reached 7,500 members on Slack. Shortly after, Slack decided we were too big and disabled invites. There was no way for new users to join. Many of us were sad and upset. We loved Slack. Our community was built around it.
|
||||
|
||||
We reached out to Slack several times, but their decision was firm. Our large community caused performance issues. Slack wants to focus on building a great product for teams, not necessarily large open communities. Losing focus and building for too many use cases always leads to product bloat, and eventually a decrease in quality.
|
||||
|
||||
## So… why Discord?
|
||||
|
||||
After a [long and thorough debate](https://github.com/reactiflux/volunteers/issues/25), Discord quickly emerged as the most promising service. After just a few days, 400 members had joined the Discord server, and many already loved it.
|
||||
|
||||
### Easiest to join
|
||||
|
||||
Discord is the easiest platform to join. New users can immediately join our conversations without having to create an account. All they need to do is provide a name. No permission granting, no password, no email confirmation.
|
||||
|
||||
This is critically useful for us, and will make Reactiflux even more open and accessible.
|
||||
|
||||
### Great apps
|
||||
|
||||
Out of all of the services 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.
|
||||
|
||||
Their desktop apps are built with React and Electron, and their iOS app is built with React Native.
|
||||
|
||||
### Moderation tools
|
||||
|
||||
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.
|
||||
|
||||
### Great multiple Server support
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
### It’s hosted
|
||||
|
||||
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.
|
||||
|
||||
It’s a much safer bet to offload the hosting to Discord, who is already keeping the lights on for all their users.
|
||||
|
||||
### We like the team
|
||||
|
||||
And they seem to like us back. They are excited for us to join them, and they’ve been very responsive to our feedback and suggestions.
|
||||
|
||||
They implemented code syntax highlighting just a few days after we told them we needed it.
|
||||
|
||||
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.
|
||||
|
||||
## And what’s the catch?
|
||||
|
||||
Choosing the best chat service is subjective. There are a million reasons why Discord *might be* a terrible idea. Here are the ones that we’re most worried about:
|
||||
|
||||
### Difficult channel management
|
||||
|
||||
Channel management seems to be the biggest issue. There is no way to opt out of channels; you can only mute them. And you can only mute channels one by one. There is no way to star channels, and channels can only be sorted on the server level. Each user will see the list of channels in the same order.
|
||||
|
||||
As the number of channels grow, it will be challenging to keep things in order. Branching off sub-servers will help, and we will keep an easily accessible directory of channels across our main server and all of the sub-servers.
|
||||
|
||||
We can build simple tools to make channel lookup easier, and the Discord team is working on improvements that should make this more manageable.
|
||||
|
||||
### No Search
|
||||
|
||||
Lack of search is clearly a bummer, but Discord is working on it. Search is coming!
|
||||
|
||||
### Firewall
|
||||
|
||||
A couple of users 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).
|
||||
|
||||
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.
|
||||
|
||||
## Is Discord going to disappear tomorrow?
|
||||
|
||||
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/).
|
||||
|
||||
By focusing on gaming communities, Discord has differentiated itself from the many other communication apps. Discord is well received and has a rapidly growing user base. They plan to keep their basic offerings free for unlimited users and hope to make money with premium offerings (themes, add-ons, content, and more).
|
||||
|
||||
## Join us!
|
||||
|
||||
More than 500 of us have already migrated to the new Reactiflux. Join us, we're one click away: [http://join.reactiflux.com](http://join.reactiflux.com/)
|
||||
|
||||
*Note: Jordan Hawker’s thorough [research](http://jhawk.co/team-chat-comparison) made our decision a lot easier.*
|
||||
40
docs/_posts/2015-10-28-react-v0.14.1.md
Normal file
40
docs/_posts/2015-10-28-react-v0.14.1.md
Normal file
@@ -0,0 +1,40 @@
|
||||
---
|
||||
title: "React v0.14.1"
|
||||
author: zpao
|
||||
---
|
||||
|
||||
After a couple weeks of having more people use v0.14, we're ready to ship a patch release addressing a few issues. Thanks to everybody who has reported issues and written patches!
|
||||
|
||||
The release is now available for download:
|
||||
|
||||
* **React**
|
||||
Dev build with warnings: <https://fb.me/react-0.14.1.js>
|
||||
Minified build for production: <https://fb.me/react-0.14.1.min.js>
|
||||
* **React with Add-Ons**
|
||||
Dev build with warnings: <https://fb.me/react-with-addons-0.14.1.js>
|
||||
Minified build for production: <https://fb.me/react-with-addons-0.14.1.min.js>
|
||||
* **React DOM** (include React in the page before React DOM)
|
||||
Dev build with warnings: <https://fb.me/react-dom-0.14.1.js>
|
||||
Minified build for production: <https://fb.me/react-dom-0.14.1.min.js>
|
||||
|
||||
We've also published version `0.14.1` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower.
|
||||
|
||||
- - -
|
||||
|
||||
## Changelog
|
||||
|
||||
### React DOM
|
||||
- Fixed bug where events wouldn't fire in old browsers when using React in development mode
|
||||
- Fixed bug preventing use of `dangerouslySetInnerHTML` with Closure Compiler Advanced mode
|
||||
- Added support for `srcLang`, `default`, and `kind` attributes for `<track>` elements
|
||||
- Added support for `color` attribute
|
||||
- Ensured legacy `.props` access on DOM nodes is updated on re-renders
|
||||
|
||||
### React TestUtils Add-on
|
||||
- Fixed `scryRenderedDOMComponentsWithClass` so it works with SVG
|
||||
|
||||
### React CSSTransitionGroup Add-on
|
||||
- Fix bug preventing `0` to be used as a timeout value
|
||||
|
||||
### React on Bower
|
||||
- Added `react-dom.js` to `main` to improve compatibility with tooling
|
||||
31
docs/_posts/2015-11-02-react-v0.14.2.md
Normal file
31
docs/_posts/2015-11-02-react-v0.14.2.md
Normal file
@@ -0,0 +1,31 @@
|
||||
---
|
||||
title: "React v0.14.2"
|
||||
author: zpao
|
||||
---
|
||||
|
||||
We have a quick update following the release of 0.14.1 last week. It turns out we broke a couple things in the development build of React when using Internet Explorer. Luckily it was only the development build, so your production applications were unaffected. This release is mostly to address those issues. There is one notable change if consuming React from npm. For the `react-dom` package, we moved `react` from a regular dependency to a peer dependency. This will impact very few people as these two are typically installed together at the top level, but it will fix some issues with dependencies of installed components also using `react` as a peer dependency.
|
||||
|
||||
The release is now available for download:
|
||||
|
||||
* **React**
|
||||
Dev build with warnings: <https://fb.me/react-0.14.2.js>
|
||||
Minified build for production: <https://fb.me/react-0.14.2.min.js>
|
||||
* **React with Add-Ons**
|
||||
Dev build with warnings: <https://fb.me/react-with-addons-0.14.2.js>
|
||||
Minified build for production: <https://fb.me/react-with-addons-0.14.2.min.js>
|
||||
* **React DOM** (include React in the page before React DOM)
|
||||
Dev build with warnings: <https://fb.me/react-dom-0.14.2.js>
|
||||
Minified build for production: <https://fb.me/react-dom-0.14.2.min.js>
|
||||
|
||||
We've also published version `0.14.2` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower.
|
||||
|
||||
- - -
|
||||
|
||||
## Changelog
|
||||
|
||||
### React DOM
|
||||
- Fixed bug with development build preventing events from firing in some versions of Internet Explorer & Edge
|
||||
- Fixed bug with development build when using es5-sham in older versions of Internet Explorer
|
||||
- Added support for `integrity` attribute
|
||||
- Fixed bug resulting in `children` prop being coerced to a string for custom elements, which was not the desired behavior.
|
||||
- Moved `react` from `dependencies` to `peerDependencies` to match expectations and align with `react-addons-*` packages
|
||||
40
docs/_posts/2015-11-18-react-v0.14.3.md
Normal file
40
docs/_posts/2015-11-18-react-v0.14.3.md
Normal file
@@ -0,0 +1,40 @@
|
||||
---
|
||||
title: "React v0.14.3"
|
||||
author: zpao
|
||||
---
|
||||
|
||||
It's time for another installment of React patch releases! We didn't break anything in v0.14.2 but we do have a couple of other bugs we're fixing. The biggest change in this release is actually an addition of a new built file. We heard from a number of people that they still need the ability to use React to render to a string on the client. While the use cases are not common and there are other ways to achieve this, we decided that it's still valuable to support. So we're now building `react-dom-server.js`, which will be shipped to Bower and in the `dist/` directory of the `react-dom` package on npm. This file works the same way as `react-dom.js` and therefore requires that the primary React build has already been included on the page.
|
||||
|
||||
The release is now available for download:
|
||||
|
||||
* **React**
|
||||
Dev build with warnings: <https://fb.me/react-0.14.3.js>
|
||||
Minified build for production: <https://fb.me/react-0.14.3.min.js>
|
||||
* **React with Add-Ons**
|
||||
Dev build with warnings: <https://fb.me/react-with-addons-0.14.3.js>
|
||||
Minified build for production: <https://fb.me/react-with-addons-0.14.3.min.js>
|
||||
* **React DOM** (include React in the page before React DOM)
|
||||
Dev build with warnings: <https://fb.me/react-dom-0.14.3.js>
|
||||
Minified build for production: <https://fb.me/react-dom-0.14.3.min.js>
|
||||
* **React DOM Server** (include React in the page before React DOM Server)
|
||||
Dev build with warnings: <https://fb.me/react-dom-server-0.14.3.js>
|
||||
Minified build for production: <https://fb.me/react-dom-server-0.14.3.min.js>
|
||||
|
||||
We've also published version `0.14.3` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower.
|
||||
|
||||
- - -
|
||||
|
||||
## Changelog
|
||||
|
||||
### React DOM
|
||||
- Added support for `nonce` attribute for `<script>` and `<style>` elements
|
||||
- Added support for `reversed` attribute for `<ol>` elements
|
||||
|
||||
### React TestUtils Add-on
|
||||
- Fixed bug with shallow rendering and function refs
|
||||
|
||||
### React CSSTransitionGroup Add-on
|
||||
- Fixed bug resulting in timeouts firing incorrectly when mounting and unmounting rapidly
|
||||
|
||||
### React on Bower
|
||||
- Added `react-dom-server.js` to expose `renderToString` and `renderToStaticMarkup` for usage in the browser
|
||||
@@ -0,0 +1,45 @@
|
||||
---
|
||||
title: React.js Conf 2016 Diversity Scholarship
|
||||
author: zpao
|
||||
---
|
||||
|
||||
I am thrilled to announced that we will be organizing another diversity scholarship program for the upcoming React.js Conf! The tech industry is suffering from a lack of diversity, but it's important to us that we have a thriving community that is made up of people with a variety of experiences and viewpoints.
|
||||
|
||||
When we ran this program last year, we had *over 200* people apply for only 10 tickets. There were so many people that we wanted to bring in but we couldn't. The results were still awesome, and we had bright individuals from around the world attending who would have otherwise been unable to. These attendees took part in discussions at the conference and brought perspectives that we might not have otherwise seen there.
|
||||
|
||||
This year we're excited to bring back the scholarship, but we've set aside **40 tickets** because we really believe that it's important to do our best to make sure we have an even more diverse audience.
|
||||
|
||||
This is something I'm personally really excited to be a part of. I know the rest of the team is as well. We're really proud to have everyone at Facebook providing support and funding for this.
|
||||
|
||||
The details of the scholarship are provided below (or you can [go directly to the application](http://goo.gl/forms/PEmKj8oUp4)). I encourage you to apply! If you don't feel like you are eligible yourself, you can still help – send this along to friends, family, coworkers, acquaintances, or anybody who might be interested. And even if you haven't spoken before, please consider [submitting a proposal for a talk](http://conf.reactjs.com/) (either 30 minutes or just 5 minutes) - we're hoping to have a very diverse group of speakers in addition to attendees.
|
||||
|
||||
|
||||
- - -
|
||||
|
||||
Facebook is excited to announce that we are now accepting applications for the React.js Conf Diversity Scholarship!
|
||||
|
||||
Beginning today, those studying or working in computer science or a related field can apply for a partial scholarship to attend the React.js Conf in San Francisco, CA on February 22 & 23, 2016.
|
||||
|
||||
React opens a world of new possibilities such as server-side rendering, real-time updates, different rendering targets like SVG and canvas. React Native makes is easy to use the same concepts and technologies to build native mobile experiences on iOS and Android. Join us at React.js Conf to shape the future of client-side applications! For more information about the React.js conference, please see [the website](http://conf.reactjs.com/).
|
||||
|
||||
At Facebook, we believe that anyone anywhere can make a positive impact by developing products to make the world more open and connected to the people and things they care about. Given the current realities of the tech industry and the lack of representation of communities we seek to serve, applicants currently under-represented in Computer Science and related fields are strongly encouraged to apply. Facebook will make determinations on scholarship recipients in its sole discretion. Facebook complies with all equal opportunity laws.
|
||||
|
||||
To apply for the scholarship, please visit the application page: **<http://goo.gl/forms/PEmKj8oUp4>**
|
||||
|
||||
## Award Includes
|
||||
|
||||
* Paid registration fee for the React.js Conf Feburary 22 & 23 in downtown San Francisco, CA
|
||||
* Paid lodging expenses for February 21, 22, 23
|
||||
|
||||
## Important Dates
|
||||
|
||||
* Sunday December 13th 2015 - 11:59 PST: Applications for the React.js Conf Scholarship must be submitted in full
|
||||
* Wednesday, December 16th, 2015: Award recipients will be notified by email of their acceptance
|
||||
* Monday & Tuesday, February 22 & 23, 2016: React.js Conf
|
||||
|
||||
## Eligibility
|
||||
|
||||
* Must currently be studying or working in Computer Science or a related field
|
||||
* International applicants are welcome, but you will be responsible for securing your own visa to attend the conference
|
||||
* You must be able to provide your own transportation to San Francisco
|
||||
* You must be available to attend the full duration of React.js Conf on February 22 & 23 in San Francisco, CA
|
||||
80
docs/_posts/2015-12-16-ismounted-antipattern.md
Normal file
80
docs/_posts/2015-12-16-ismounted-antipattern.md
Normal file
@@ -0,0 +1,80 @@
|
||||
---
|
||||
title: "isMounted is an Antipattern"
|
||||
author: jimfb
|
||||
---
|
||||
|
||||
As we move closer to officially deprecating isMounted, it's worth understanding why the function is an antipattern, and how to write code without the isMounted function.
|
||||
|
||||
The primary use case for `isMounted()` is to avoid calling `setState()` after a component has unmounted, because calling `setState()` after a component has unmounted will emit a warning. The “setState warning” exists to help you catch bugs, because calling `setState()` on an unmounted component is an indication that your app/component has somehow failed to clean up properly. Specifically, calling `setState()` in an unmounted component means that your app is still holding a reference to the component after the component has been unmounted - which often indicates a memory leak!
|
||||
|
||||
To avoid the error message, people often add lines like this:
|
||||
|
||||
```js
|
||||
if(this.isMounted()) { // This is bad.
|
||||
this.setState({...});
|
||||
}
|
||||
```
|
||||
|
||||
Checking `isMounted` before calling `setState()` does eliminate the warning, but it also defeats the purpose of the warning, since now you will never get the warning (even when you should!)
|
||||
|
||||
Other uses of `isMounted()` are similarly erroneous; using `isMounted()` is a code smell because the only reason you would check is because you think you might be holding a reference after the component has unmounted.
|
||||
|
||||
An easy migration strategy for anyone upgrading their code to avoid `isMounted()` is to track the mounted status yourself. Just set a `_isMounted` property to true in `componentDidMount` and set it to false in `componentWillUnmount`, and use this variable to check your component's status.
|
||||
|
||||
An optimal solution would be to find places where `setState()` might be called after a component has unmounted, and fix them. Such situations most commonly occur due to callbacks, when a component is waiting for some data and gets unmounted before the data arrives. Ideally, any callbacks should be canceled in `componentWillUnmount`, prior to unmounting.
|
||||
|
||||
For instance, if you are using a Flux store in your component, you must unsubscribe in `componentWillUnmount`:
|
||||
|
||||
```javascript{9}
|
||||
class MyComponent extends React.Component {
|
||||
componentDidMount() {
|
||||
mydatastore.subscribe(this);
|
||||
}
|
||||
render() {
|
||||
...
|
||||
}
|
||||
componentWillUnmount() {
|
||||
mydatastore.unsubscribe(this);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
If you use ES6 promises, you may need to wrap your promise in order to make it cancelable.
|
||||
|
||||
```js
|
||||
const cancelablePromise = makeCancelable(
|
||||
new Promise(r => component.setState({...}}))
|
||||
);
|
||||
|
||||
cancelablePromise
|
||||
.promise
|
||||
.then(() => console.log('resolved'))
|
||||
.catch((reason) => console.log('isCanceled', reason.isCanceled));
|
||||
|
||||
cancelablePromise.cancel(); // Cancel the promise
|
||||
```
|
||||
|
||||
Where `makeCancelable` is [defined by @istarkov](https://github.com/facebook/react/issues/5465#issuecomment-157888325) as:
|
||||
|
||||
```js
|
||||
const makeCancelable = (promise) => {
|
||||
let hasCanceled_ = false;
|
||||
|
||||
const wrappedPromise = new Promise((resolve, reject) => {
|
||||
promise.then((val) =>
|
||||
hasCanceled_ ? reject({isCanceled: true}) : resolve(val)
|
||||
);
|
||||
promise.catch((error) =>
|
||||
hasCanceled_ ? reject({isCanceled: true}) : reject(error)
|
||||
);
|
||||
});
|
||||
|
||||
return {
|
||||
promise: wrappedPromise,
|
||||
cancel() {
|
||||
hasCanceled_ = true;
|
||||
},
|
||||
};
|
||||
};
|
||||
```
|
||||
As an added bonus for getting your code cleaned up early, getting rid of `isMounted()` makes it one step easier for you to upgrade to ES6 classes, where using `isMounted()` is already prohibited. Happy coding!
|
||||
@@ -0,0 +1,383 @@
|
||||
---
|
||||
title: "React Components, Elements, and Instances"
|
||||
author: gaearon
|
||||
---
|
||||
|
||||
The difference between **components, their instances, and elements** confuses many React beginners. Why are there three different terms to refer to something that is painted on screen?
|
||||
|
||||
## Managing the Instances
|
||||
|
||||
If you’re new to React, you probably only worked with component classes and instances before. For example, you may declare a `Button` *component* by creating a class. When the app is running, you may have several *instances* of this component on screen, each with its own properties and local state. This is the traditional object-oriented UI programming. Why introduce *elements*?
|
||||
|
||||
In this traditional UI model, it is up to you to take care of creating and destroying child component instances. If a `Form` component wants to render a `Button` component, it needs to create its instance, and manually keep it up to date with any new information.
|
||||
|
||||
```js
|
||||
class Form extends TraditionalObjectOrientedView {
|
||||
render() {
|
||||
// Read some data passed to the view
|
||||
const { isSubmitted, buttonText } = this.attrs;
|
||||
|
||||
if (!isSubmitted && !this.button) {
|
||||
// Form is not yet submitted. Create the button!
|
||||
this.button = new Button({
|
||||
children: buttonText,
|
||||
color: 'blue'
|
||||
});
|
||||
this.el.appendChild(this.button.el);
|
||||
}
|
||||
|
||||
if (this.button) {
|
||||
// The button is visible. Update its text!
|
||||
this.button.attrs.children = buttonText;
|
||||
this.button.render();
|
||||
}
|
||||
|
||||
if (isSubmitted && this.button) {
|
||||
// Form was submitted. Destroy the button!
|
||||
this.el.removeChild(this.button.el);
|
||||
this.button.destroy();
|
||||
}
|
||||
|
||||
if (isSubmitted && !this.message) {
|
||||
// Form was submitted. Show the success message!
|
||||
this.message = new Message({ text: 'Success!' });
|
||||
this.el.appendChild(this.message.el);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This is pseudocode, but it is more or less what you end up with when you write composite UI code that behaves consistently in an object-oriented way using a library like Backbone.
|
||||
|
||||
Each component instance has to keep references to its DOM node and to the instances of the children components, and create, update, and destroy them when the time is right. The lines of code grow as the square of the number of possible states of the component, and the parents have direct access to their children component instances, making it hard to decouple them in the future.
|
||||
|
||||
So how is React different?
|
||||
|
||||
## Elements Describe the Tree
|
||||
|
||||
In React, this is where the *elements* come to rescue. **An element is a plain object *describing* a component instance or DOM node and its desired properties.** It contains only information about the component type (for example, a `Button`), its properties (for example, its `color`), and any child elements inside it.
|
||||
|
||||
An element is not an actual instance. Rather, it is a way to tell React what you *want* to see on the screen. You can’t call any methods on the element. It’s just an immutable description object with two fields: `type: (string | ReactClass)` and `props: Object`[^1].
|
||||
|
||||
### DOM Elements
|
||||
|
||||
When an element’s `type` is a string, it represents a DOM node with that tag name, and `props` correspond to its attributes. This is what React will render. For example:
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'button',
|
||||
props: {
|
||||
className: 'button button-blue',
|
||||
children: {
|
||||
type: 'b',
|
||||
props: {
|
||||
children: 'OK!'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This element is just a way to represent the following HTML as a plain object:
|
||||
|
||||
```html
|
||||
<button class='button button-blue'>
|
||||
<b>
|
||||
OK!
|
||||
</b>
|
||||
</button>
|
||||
```
|
||||
|
||||
Note how elements can be nested. By convention, when we want to create an element tree, we specify one or more child elements as the `children` prop of their containing element.
|
||||
|
||||
What’s important is that both child and parent elements are *just descriptions and not the actual instances*. They don’t refer to anything on the screen when you create them. You can create them and throw them away, and it won’t matter much.
|
||||
|
||||
React elements are easy to traverse, don’t need to be parsed, and of course they are much lighter than the actual DOM elements—they’re just objects!
|
||||
|
||||
### Component Elements
|
||||
|
||||
However, the `type` of an element can also be a function or a class corresponding to a React component:
|
||||
|
||||
```js
|
||||
{
|
||||
type: Button,
|
||||
props: {
|
||||
color: 'blue',
|
||||
children: 'OK!'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This is the core idea of React.
|
||||
|
||||
**An element describing a component is also an element, just like an element describing the DOM node. They can be nested and mixed with each other.**
|
||||
|
||||
This feature lets you define a `DangerButton` component as a `Button` with a specific `color` property value without worrying about whether `Button` renders to a DOM `<button>`, a `<div>`, or something else entirely:
|
||||
|
||||
```js
|
||||
const DangerButton = ({ children }) => ({
|
||||
type: Button,
|
||||
props: {
|
||||
color: 'red',
|
||||
children: children
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
You can mix and match DOM and component elements in a single element tree:
|
||||
|
||||
```js
|
||||
const DeleteAccount = () => ({
|
||||
type: 'div',
|
||||
props: {
|
||||
children: [{
|
||||
type: 'p',
|
||||
props: {
|
||||
children: 'Are you sure?'
|
||||
}
|
||||
}, {
|
||||
type: DangerButton,
|
||||
props: {
|
||||
children: 'Yep'
|
||||
}
|
||||
}, {
|
||||
type: Button,
|
||||
props: {
|
||||
color: 'blue',
|
||||
children: 'Cancel'
|
||||
}
|
||||
}]
|
||||
});
|
||||
```
|
||||
|
||||
Or, if you prefer JSX:
|
||||
|
||||
```js
|
||||
const DeleteAccount = () => (
|
||||
<div>
|
||||
<p>Are you sure?</p>
|
||||
<DangerButton>Yep</DangerButton>
|
||||
<Button color='blue'>Cancel</Button>
|
||||
</div>
|
||||
);
|
||||
```
|
||||
|
||||
This mix and matching helps keep components decoupled from each other, as they can express both *is-a* and *has-a* relationships exclusively through composition:
|
||||
|
||||
* `Button` is a DOM `<button>` with specific properties.
|
||||
* `DangerButton` is a `Button` with specific properties.
|
||||
* `DeleteAccount` contains a `Button` and a `DangerButton` inside a `<div>`.
|
||||
|
||||
### Components Encapsulate Element Trees
|
||||
|
||||
When React sees an element with a function or class `type`, it knows to ask *that* component what element it renders to, given the corresponding `props`.
|
||||
|
||||
When it sees this element:
|
||||
|
||||
```js
|
||||
{
|
||||
type: Button,
|
||||
props: {
|
||||
color: 'blue',
|
||||
children: 'OK!'
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
React will ask `Button` what it renders to. The `Button` will return this element:
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'button',
|
||||
props: {
|
||||
className: 'button button-blue',
|
||||
children: {
|
||||
type: 'b',
|
||||
props: {
|
||||
children: 'OK!'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
React will repeat this process until it knows the underlying DOM tag elements for every component on the page.
|
||||
|
||||
React is like a child asking “what is Y” for every “X is Y” you explain to them until they figure out every little thing in the world.
|
||||
|
||||
Remember the `Form` example above? It can be written in React as follows[^1]:
|
||||
|
||||
```js
|
||||
const Form = ({ isSubmitted, buttonText }) => {
|
||||
if (isSubmitted) {
|
||||
// Form submitted! Return a message element.
|
||||
return {
|
||||
type: Message,
|
||||
props: {
|
||||
text: 'Success!'
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Form is still visible! Return a button element.
|
||||
return {
|
||||
type: Button,
|
||||
props: {
|
||||
children: buttonText,
|
||||
color: 'blue'
|
||||
}
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
That’s it! For a React component, props are the input, and an element tree is the output.
|
||||
|
||||
**The returned element tree can contain both elements describing DOM nodes, and elements describing other components. This lets you compose independent parts of UI without relying on their internal DOM structure.**
|
||||
|
||||
We let React create, update, and destroy instances. We *describe* them with elements we return from the components, and React takes care of managing the instances.
|
||||
|
||||
### Components Can Be Classes or Functions
|
||||
|
||||
In the code above, `Form`, `Message`, and `Button` are React components. They can either be written as functions, like above, or as classes descending from `React.Component`. These three ways to declare a component are mostly equivalent:
|
||||
|
||||
```js
|
||||
// 1) As a function of props
|
||||
const Button = ({ children, color }) => ({
|
||||
type: 'button',
|
||||
props: {
|
||||
className: 'button button-' + color,
|
||||
children: {
|
||||
type: 'b',
|
||||
props: {
|
||||
children: children
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 2) Using the React.createClass() factory
|
||||
const Button = React.createClass({
|
||||
render() {
|
||||
const { children, color } = this.props;
|
||||
return {
|
||||
type: 'button',
|
||||
props: {
|
||||
className: 'button button-' + color,
|
||||
children: {
|
||||
type: 'b',
|
||||
props: {
|
||||
children: children
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
// 3) As an ES6 class descending from React.Component
|
||||
class Button extends React.Component {
|
||||
render() {
|
||||
const { children, color } = this.props;
|
||||
return {
|
||||
type: 'button',
|
||||
props: {
|
||||
className: 'button button-' + color,
|
||||
children: {
|
||||
type: 'b',
|
||||
props: {
|
||||
children: children
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
When a component is defined as a class, it is a little bit more powerful than a functional component. It can store some local state and perform custom logic when the corresponding DOM node is created or destroyed.
|
||||
|
||||
A functional component is less powerful but is simpler, and acts like a class component with just a single `render()` method. Unless you need features available only in a class, we encourage you to use functional components instead.
|
||||
|
||||
**However, whether functions or classes, fundamentally they are all components to React. They take the props as their input, and return the elements as their output.**
|
||||
|
||||
### Top-Down Reconciliation
|
||||
|
||||
When you call:
|
||||
|
||||
```js
|
||||
ReactDOM.render({
|
||||
type: Form,
|
||||
props: {
|
||||
isSubmitted: false,
|
||||
buttonText: 'OK!'
|
||||
}
|
||||
}, document.getElementById('root'));
|
||||
```
|
||||
|
||||
React will ask the `Form` component what element tree it returns, given those `props`. It will gradually “refine” its understanding of your component tree in terms of simpler primitives:
|
||||
|
||||
```js
|
||||
// React: You told me this...
|
||||
{
|
||||
type: Form,
|
||||
props: {
|
||||
isSubmitted: false,
|
||||
buttonText: 'OK!'
|
||||
}
|
||||
}
|
||||
|
||||
// React: ...And Form told me this...
|
||||
{
|
||||
type: Button,
|
||||
props: {
|
||||
children: 'OK!',
|
||||
color: 'blue'
|
||||
}
|
||||
}
|
||||
|
||||
// React: ...and Button told me this! I guess I'm done.
|
||||
{
|
||||
type: 'button',
|
||||
props: {
|
||||
className: 'button button-blue',
|
||||
children: {
|
||||
type: 'b',
|
||||
props: {
|
||||
children: 'OK!'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This is a part of the process that React calls [reconciliation](/react/docs/reconciliation.html) which starts when you call [`ReactDOM.render()`](/react/docs/top-level-api.html#reactdom.render) or [`setState()`](/react/docs/component-api.html#setstate). By the end of the reconciliation, React knows the result DOM tree, and a renderer like `react-dom` or `react-native` applies the minimal set of changes necessary to update the DOM nodes (or the platform-specific views in case of React Native).
|
||||
|
||||
This gradual refining process is also the reason React apps are easy to optimize. If some parts of your component tree become too large for React to visit efficiently, you can tell it to [skip this “refining” and diffing certain parts of the tree if the relevant props have not changed](/react/docs/advanced-performance.html). It is very fast to calculate whether the props have changed if they are immutable, so React and immutability work great together, and can provide great optimizations with the minimal effort.
|
||||
|
||||
You might have noticed that this blog entry talks a lot about components and elements, and not so much about the instances. The truth is, instances have much less importance in React than in most object-oriented UI frameworks.
|
||||
|
||||
Only components declared as classes have instances, and you never create them directly: React does that for you. While [mechanisms for a parent component instance to access a child component instance](/react/docs/more-about-refs.html) exist, they are only used for imperative actions (such as setting focus on a field), and should generally be avoided.
|
||||
|
||||
React takes care of creating an instance for every class component, so you can write components in an object-oriented way with methods and local state, but other than that, instances are not very important in the React’s programming model and are managed by React itself.
|
||||
|
||||
## Summary
|
||||
|
||||
An *element* is a plain object describing what you want to appear on the screen in terms of the DOM nodes or other components. Elements can contain other elements in their props. Creating a React element is cheap. Once an element is created, it is never mutated.
|
||||
|
||||
A *component* can be declared in several different ways. It can be a class with a `render()` method. Alternatively, in simple cases, it can be defined as a function. In either case, it takes props as an input, and returns an element tree as the output.
|
||||
|
||||
When a component receives some props as an input, it is because a particular parent component returned an element with its `type` and these props. This is why people say that the props flows one way in React: from parents to children.
|
||||
|
||||
An *instance* is what you refer to as `this` in the component class you write. It is useful for [storing local state and reacting to the lifecycle events](/react/docs/component-api.html).
|
||||
|
||||
Functional components don’t have instances at all. Class components have instances, but you never need to create a component instance directly—React takes care of this.
|
||||
|
||||
Finally, to create elements, use [`React.createElement()`](/react/docs/top-level-api.html#react.createelement), [JSX](/react/docs/jsx-in-depth.html), or an [element factory helper](/react/docs/top-level-api.html#react.createfactory). Don’t write elements as plain objects in the real code—just know that they are plain objects under the hood.
|
||||
|
||||
## Further Reading
|
||||
|
||||
* [Introducing React Elements](/react/blog/2014/10/14/introducing-react-elements.html)
|
||||
* [Streamlining React Elements](/react/blog/2015/02/24/streamlining-react-elements.html)
|
||||
* [React (Virtual) DOM Terminology](/react/docs/glossary.html)
|
||||
|
||||
[^1]: All React elements require an additional ``$$typeof: Symbol.for('react.element')`` field declared on the object for [security reasons](https://github.com/facebook/react/pull/4832). It is omitted in the examples above. This blog entry uses inline objects for elements to give you an idea of what’s happening underneath but the code won’t run as is unless you either add `$$typeof` to the elements, or change the code to use `React.createElement()` or JSX.
|
||||
37
docs/_posts/2015-12-29-react-v0.14.4.md
Normal file
37
docs/_posts/2015-12-29-react-v0.14.4.md
Normal file
@@ -0,0 +1,37 @@
|
||||
---
|
||||
title: "React v0.14.4"
|
||||
author: spicyj
|
||||
---
|
||||
|
||||
Happy December! We have a minor point release today. It has just a few small bug fixes.
|
||||
|
||||
The release is now available for download:
|
||||
|
||||
* **React**
|
||||
Dev build with warnings: <https://fb.me/react-0.14.4.js>
|
||||
Minified build for production: <https://fb.me/react-0.14.4.min.js>
|
||||
* **React with Add-Ons**
|
||||
Dev build with warnings: <https://fb.me/react-with-addons-0.14.4.js>
|
||||
Minified build for production: <https://fb.me/react-with-addons-0.14.4.min.js>
|
||||
* **React DOM** (include React in the page before React DOM)
|
||||
Dev build with warnings: <https://fb.me/react-dom-0.14.4.js>
|
||||
Minified build for production: <https://fb.me/react-dom-0.14.4.min.js>
|
||||
* **React DOM Server** (include React in the page before React DOM Server)
|
||||
Dev build with warnings: <https://fb.me/react-dom-server-0.14.4.js>
|
||||
Minified build for production: <https://fb.me/react-dom-server-0.14.4.min.js>
|
||||
|
||||
We've also published version `0.14.4` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower.
|
||||
|
||||
- - -
|
||||
|
||||
## Changelog
|
||||
|
||||
### React
|
||||
- Minor internal changes for better compatibility with React Native
|
||||
|
||||
### React DOM
|
||||
- The `autoCapitalize` and `autoCorrect` props are now set as attributes in the DOM instead of properties to improve cross-browser compatibility
|
||||
- Fixed bug with controlled `<select>` elements not handling updates properly
|
||||
|
||||
### React Perf Add-on
|
||||
- Some DOM operation names have been updated for clarity in the output of `.printDOM()`
|
||||
@@ -0,0 +1,60 @@
|
||||
---
|
||||
title: "(A => B) !=> (B => A)"
|
||||
author: jimfb
|
||||
---
|
||||
|
||||
The documentation for `componentWillReceiveProps` states that `componentWillReceiveProps` will be invoked when the props change as the result of a rerender. Some people assume this means "if `componentWillReceiveProps` is called, then the props must have changed", but that conclusion is logically incorrect.
|
||||
|
||||
The guiding principle is one of my favorites from formal logic/mathematics:
|
||||
> A implies B does not imply B implies A
|
||||
|
||||
Example: "If I eat moldy food, then I will get sick" does not imply "if I am sick, then I must have eaten moldy food". There are many other reasons I could be feeling sick. For instance, maybe the flu is circulating around the office. Similarly, there are many reasons that `componentWillReceiveProps` might get called, even if the props didn’t change.
|
||||
|
||||
If you don’t believe me, call `ReactDOM.render()` three times with the exact same props, and try to predict the number of times `componentWillReceiveProps` will get called:
|
||||
|
||||
|
||||
```js
|
||||
class Component extends React.Component {
|
||||
componentWillReceiveProps(nextProps) {
|
||||
console.log('componentWillReceiveProps', nextProps.data.bar);
|
||||
}
|
||||
render() {
|
||||
return <div>Bar {this.props.data.bar}!</div>;
|
||||
}
|
||||
}
|
||||
|
||||
var container = document.getElementById('container');
|
||||
|
||||
var mydata = {bar: 'drinks'};
|
||||
ReactDOM.render(<Component data={mydata} />, container);
|
||||
ReactDOM.render(<Component data={mydata} />, container);
|
||||
ReactDOM.render(<Component data={mydata} />, container);
|
||||
```
|
||||
|
||||
|
||||
In this case, the answer is "2". React calls `componentWillReceiveProps` twice (once for each of the two updates). Both times, the value of "drinks" is printed (ie. the props didn’t change).
|
||||
|
||||
To understand why, we need to think about what *could* have happened. The data *could* have changed between the initial render and the two subsequent updates, if the code had performed a mutation like this:
|
||||
|
||||
```js
|
||||
var mydata = {bar: 'drinks'};
|
||||
ReactDOM.render(<Component data={mydata} />, container);
|
||||
mydata.bar = 'food'
|
||||
ReactDOM.render(<Component data={mydata} />, container);
|
||||
mydata.bar = 'noise'
|
||||
ReactDOM.render(<Component data={mydata} />, container);
|
||||
```
|
||||
|
||||
React has no way of knowing that the data didn’t change. Therefore, React needs to call `componentWillReceiveProps`, because the component needs to be notified of the new props (even if the new props happen to be the same as the old props).
|
||||
|
||||
You might think that React could just use smarter checks for equality, but there are some issues with this idea:
|
||||
|
||||
* The old `mydata` and the new `mydata` are actually the same physical object (only the object’s internal value changed). Since the references are triple-equals-equal, doing an equality check doesn’t tell us if the value has changed. The only possible solution would be to have created a deep copy of the data, and then later do a deep comparison - but this can be prohibitively expensive for large data structures (especially ones with cycles).
|
||||
* The `mydata` object might contain references to functions which have captured variables within closures. There is no way for React to peek into these closures, and thus no way for React to copy them and/or verify equality.
|
||||
* The `mydata` object might contain references to objects which are re-instantiated during the parent's render (ie. not triple-equals-equal) but are conceptually equal (ie. same keys and same values). A deep-compare (expensive) could detect this, except that functions present a problem again because there is no reliable way to compare two functions to see if they are semantically equivalent.
|
||||
|
||||
Given the language constraints, it is sometimes impossible for us to achieve meaningful equality semantics. In such cases, React will call `componentWillReceiveProps` (even though the props might not have changed) so the component has an opportunity to examine the new props and act accordingly.
|
||||
|
||||
As a result, your implementation of `componentWillReceiveProps` MUST NOT assume that your props have changed. If you want an operation (such as a network request) to occur only when props have changed, your `componentWillReceiveProps` code needs to check to see if the props actually changed.
|
||||
|
||||
|
||||
10
docs/_posts/2016-01-12-discontinuing-ie8-support.md
Normal file
10
docs/_posts/2016-01-12-discontinuing-ie8-support.md
Normal file
@@ -0,0 +1,10 @@
|
||||
---
|
||||
title: "Discontinuing IE 8 Support in React DOM"
|
||||
author: spicyj
|
||||
---
|
||||
|
||||
Since its 2013 release, React has supported all popular browsers, including Internet Explorer 8 and above. We handle normalizing many quirks present in old browser versions, including event system differences, so that your app code doesn't have to worry about most browser bugs.
|
||||
|
||||
Today, Microsoft [discontinued support for older versions of IE](https://www.microsoft.com/en-us/WindowsForBusiness/End-of-IE-support). Starting with React v15, we're discontinuing React DOM's support for IE 8. We've heard that most React DOM apps already don't support old versions of Internet Explorer, so this shouldn't affect many people. This change will help us develop faster and make React DOM even better. (We won't actively remove IE 8–related code quite yet, but we will deprioritize new bugs that are reported. If you need to support IE 8 we recommend you stay on React v0.14.)
|
||||
|
||||
React DOM will continue to support IE 9 and above for the foreseeable future.
|
||||
60
docs/_posts/2016-02-19-new-versioning-scheme.md
Normal file
60
docs/_posts/2016-02-19-new-versioning-scheme.md
Normal file
@@ -0,0 +1,60 @@
|
||||
---
|
||||
title: "New Versioning Scheme"
|
||||
author: sebmarkbage
|
||||
---
|
||||
|
||||
Today we're announcing that we're switching to major revisions for React. The current version is 0.14.7. The next release will be: **15.0.0**
|
||||
|
||||
This change shouldn't materially affect most of you. Moving to major semver versions simply helps indicate our commitment to stability and gives us the flexibility to add new backwards-compatible features in minor releases. This means we can have fewer major releases and you won't have to wait as long to take advantage of improvements to React. Plus, if you're a component author, this versioning scheme gives you the flexibility to support two major versions of React at the same time so you don't need to leave anyone behind.
|
||||
|
||||
The core of the React API has been stable for years. Our business as well as many of yours all depend heavily on the use of React as a core piece of our infrastructure. We're committed to the stability as well as the progress of React going forward.
|
||||
|
||||
## Bring Everyone Along
|
||||
|
||||
React isn't just a library but an ecosystem. We know that your applications and ours are not just isolated islands of code. It is a network of your own application code, your own open source components and third party libraries that all depend on React.
|
||||
|
||||
<img src="/react/img/blog/versioning-1.png" width="403">
|
||||
|
||||
Therefore it is important that we don't just upgrade our own codebases but that we bring our whole community with us. We take the upgrade path very seriously - for everyone.
|
||||
|
||||
<img src="/react/img/blog/versioning-poll.png" width="596">
|
||||
|
||||
## Introducing Minor Releases
|
||||
|
||||
Ideally everyone could just depend on the latest version of React all the time.
|
||||
|
||||
<img src="/react/img/blog/versioning-2.png" width="463">
|
||||
|
||||
We know that in practice that is not possible. In the future, we expect more new additive APIs rather than breakage of existing ones. By moving to major revisions in the semver scheme, we can release new versions without breaking existing ones.
|
||||
|
||||
<img src="/react/img/blog/versioning-3.png" width="503">
|
||||
|
||||
That means that if one component needs a new API, there is no need for any of the other components to do any further work. They remain compatible.
|
||||
|
||||
## What Happened to 1.0.0?
|
||||
|
||||
Part of React's growth and popularity is that it is stable and performant in production. People have long asked what React v1.0 will look. Technically some breaking changes are important to avoid stagnating, but we still achieve stability by making it easy to upgrade. If major version numbers indicate API stability and engender trust that it can be used in production, then we got there a long time ago. There are too many preconceived notions of what v1.0 is. We're still following semver. We're just communicating stability by moving the 0 from the beginning to the end.
|
||||
|
||||
## Breaking Changes
|
||||
|
||||
Minor revision releases will include deprecation warnings and tips for how to upgrade an API or pattern that will be removed or changed in the future.
|
||||
|
||||
We will continue to release [codemods](https://www.youtube.com/watch?v=d0pOgY8__JM) for common patterns to make automatic upgrades of your codebase easier.
|
||||
|
||||
Once we've reached the end of life for a particular major version, we'll release a new major version where all deprecated APIs have been removed.
|
||||
|
||||
## Avoiding The Major Cliff
|
||||
|
||||
If you try to upgrade your component to 16.0.0 you might find that your application no longer works if you still have other dependencies. E.g. if Ryan's and Jed's components are only compatible with 15.x.x.
|
||||
|
||||
<img src="/react/img/blog/versioning-4.png" width="498">
|
||||
|
||||
Worst case, you revert back to 15.1.0 for your application. Since you'll want to use your component, you might also revert that one.
|
||||
|
||||
<img src="/react/img/blog/versioning-5.png" width="493">
|
||||
|
||||
Of course, Ryan and Jed think the same way. If we're not careful, we can hit a cliff where nobody upgrades. This has happened to many software project ecosystems in the past.
|
||||
|
||||
Therefore, we're committed to making it easy for most components and libraries built on top of React to be compatible with two major versions at the same time. We will do this by introducing new APIs before completely removing the old ones, thereby avoiding those cliffs.
|
||||
|
||||
<img src="/react/img/blog/versioning-6.png" width="493">
|
||||
94
docs/_posts/2016-03-07-react-v15-rc1.md
Normal file
94
docs/_posts/2016-03-07-react-v15-rc1.md
Normal file
@@ -0,0 +1,94 @@
|
||||
---
|
||||
title: "React v15.0 Release Candidate"
|
||||
author: zpao
|
||||
---
|
||||
|
||||
Sorry for the small delay in releasing this. As we said, we've been busy binge-watching House of Cards. That scene in the last episode where Francis and Claire Underwood <abbr title="You didn't think we would actually spoil anything did you?">████████████████████████████████████</abbr>. WOW!
|
||||
|
||||
But now we're ready, so without further ado, we're shipping a release candidate for React v15 now. As a reminder, [we're switching to major versions](/react/blog/2016/02/19/new-versioning-scheme.html) to indicate that we have been using React in production for a long time. This 15.0 release follows our previous 0.14 version and we'll continue to follow semver like we've been doing since 2013. It's also worth noting that [we no longer actively support Internet Explorer 8](/react/blog/2016/01/12/discontinuing-ie8-support.html). We believe React will work in its current form there but we will not be prioritizing any efforts to fix new issues that only affect IE8.
|
||||
|
||||
Please try it out before we publish the final release. Let us know if you run into any problems by filing issues on our [GitHub repo](https://github.com/facebook/react).
|
||||
|
||||
## Upgrade Guide
|
||||
|
||||
Like always, we have a few breaking changes in this release. We know changes can be painful (the Facebook codebase has over 15,000 React components), so we always try to make changes gradually in order to minimize the pain.
|
||||
|
||||
If your code is free of warnings when running under React 0.14, upgrading should be easy. The bulk of changes in this release are actually behind the scenes, impacting the way that React interacts with the DOM. The other substantial change is that React now supports the full range of SVG elements and attributes. Beyond that we have a large number of incremental improvements and additional warnings aimed to aid developers. We've also laid some groundwork in the core to bring you some new capabilities in future releases.
|
||||
|
||||
See the changelog below for more details.
|
||||
|
||||
## Installation
|
||||
|
||||
We recommend using React from `npm` and using a tool like browserify or webpack to build your code into a single bundle. To install the two packages:
|
||||
|
||||
* `npm install --save react@15.0.0-rc.1 react-dom@15.0.0-rc.1`
|
||||
|
||||
Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, set the `NODE_ENV` environment variable to `production` to use the production build of React which does not include the development warnings and runs significantly faster.
|
||||
|
||||
If you can’t use `npm` yet, we provide pre-built browser builds for your convenience, which are also available in the `react` package on bower.
|
||||
|
||||
* **React**
|
||||
Dev build with warnings: <https://fb.me/react-15.0.0-rc.1.js>
|
||||
Minified build for production: <https://fb.me/react-15.0.0-rc.1.min.js>
|
||||
* **React with Add-Ons**
|
||||
Dev build with warnings: <https://fb.me/react-with-addons-15.0.0-rc.1.js>
|
||||
Minified build for production: <https://fb.me/react-with-addons-15.0.0-rc.1.min.js>
|
||||
* **React DOM** (include React in the page before React DOM)
|
||||
Dev build with warnings: <https://fb.me/react-dom-15.0.0-rc.1.js>
|
||||
Minified build for production: <https://fb.me/react-dom-15.0.0-rc.1.min.js>
|
||||
|
||||
## Changelog
|
||||
|
||||
### Major changes
|
||||
|
||||
- #### `document.createElement` is in and `data-reactid` is out
|
||||
|
||||
There were a number of large changes to our interactions with the DOM. One of the most noticeable changes is that we no longer set the `data-reactid` attribute for each DOM node. While this will make it much more difficult to know if a website is using React, the advantage is that the DOM is much more lightweight. This change was made possible by us switching to use `document.createElement` on initial render. Previously we would generate a large string of HTML and then set `node.innerHTML`. At the time, this was decided to be faster than using `document.createElement` for the majority of cases and browsers that we supported. Browsers have continued to improve and so overwhelmingly this is no longer true. By using `createElement` we can make other parts of React faster. The ids were used to map back from events to the original React component, meaning we had to do a bunch of work on every event, even though we cached this data heavily. As we've all experienced, caching and in particularly invalidating caches, can be error prone and we saw many hard to reproduce issues over the years as a result. Now we can build up a direct mapping at render time since we already have a handle on the node.
|
||||
|
||||
- #### No more extra `<span>`s
|
||||
|
||||
Another big change with our DOM interaction is how we render text blocks. Previously you may have noticed that React rendered a lot of extra `<span>`s. Eg, in our most basic example on the home page we render `<div>Hello {this.props.name}</div>`, resulting in markup that contained 2 `<span>`s. Now we'll render plain text nodes interspersed with comment nodes that are used for demarcation. This gives us the same ability to update individual pieces of text, without creating extra nested nodes. Very few people have depended on the actual markup generated here so it's likely you are not impacted. However if you were targeting these `<span>`s in your CSS, you will need to adjust accordingly. You can always render them explicitly in your components.
|
||||
|
||||
- #### Rendering `null` now uses comment nodes
|
||||
|
||||
We've also made use of these comment nodes to change what `null` renders to. Rendering to `null` was a feature we added in React v0.11 and was implemented by rendering `<noscript>` elements. By rendering to comment nodes now, there's a chance some of your CSS will be targeting the wrong thing, specifically if you are making use of `:nth-child` selectors. This, along with the other changes mentioned above, have always been considered implementation details of how React targets the DOM. We believe they are safe changes to make without going through a release with warnings detailing the subtle differences as they are details that should not be depended upon. Additionally, we have seen that these changes have improved React performance for many typical applications.
|
||||
|
||||
- #### Improved SVG support
|
||||
|
||||
All SVG tags and attributes are now fully supported. (Uncommon SVG tags are not present on the `React.DOM` element helper, but JSX and `React.createElement` work on all tag names.) All SVG attributes match their original capitalization and hyphenation as defined in the specification (ex: `gradientTransform` must be camel-cased but `clip-path` should be hyphenated).
|
||||
|
||||
|
||||
|
||||
### Breaking changes
|
||||
|
||||
It's worth calling out the DOM structure changes above again, in particular the change from `<span>`s. In the course of updating the Facebook codebase, we found a very small amount of code that was depending on the markup that React generated. Some of these cases were integration tests like WebDriver which were doing very specific XPath queries to target nodes. Others were simply tests using `ReactDOM.renderToStaticMarkup` and comparing markup. Again, there were a very small number of changes that had to be made, but we don't want anybody to be blindsided. We encourage everybody to run their test suites when upgrading and consider alternative approaches when possible. One approach that will work for some cases is to explicitly use `<span>`s in your `render` method.
|
||||
|
||||
These deprecations were introduced in v0.14 with a warning and the APIs are now removed.
|
||||
|
||||
- Deprecated APIs removed from `React`, specifically `findDOMNode`, `render`, `renderToString`, `renderToStaticMarkup`, and `unmountComponentAtNode`.
|
||||
- Deprecated APIs removed from `React.addons`, specifically `batchedUpdates` and `cloneWithProps`.
|
||||
- Deprecated APIs removed from component instances, specifically `setProps`, `replaceProps`, and `getDOMNode`.
|
||||
|
||||
### New deprecations, introduced with a warning
|
||||
|
||||
Each of these changes will continue to work as before with a new warning until the release of React 16 so you can upgrade your code gradually.
|
||||
|
||||
- `LinkedStateMixin` and `valueLink` are now deprecated due to very low popularity. If you need this, you can use a wrapper component that implements the same behavior: [react-linked-input](https://www.npmjs.com/package/react-linked-input).
|
||||
|
||||
|
||||
### New helpful warnings
|
||||
|
||||
- If you use a minified copy of the _development_ build, React DOM kindly encourages you to use the faster production build instead.
|
||||
- React DOM: When specifying a unit-less CSS value as a string, a future version will not add `px` automatically. This version now warns in this case (ex: writing `style={{'{{'}}width: '300'}}`. (Unitless *number* values like `width: 300` are unchanged.)
|
||||
- Synthetic Events will now warn when setting and accessing properties (which will not get cleared appropriately), as well as warn on access after an event has been returned to the pool.
|
||||
- Elements will now warn when attempting to read `ref` and `key` from the props.
|
||||
- React DOM now attempts to warn for mistyped event handlers on DOM elements (ex: `onclick` which should be `onClick`)
|
||||
|
||||
### Notable bug fixes
|
||||
|
||||
- Fixed multiple small memory leaks
|
||||
- Input events are handled more reliably in IE 10 and IE 11; spurious events no longer fire when using a placeholder.
|
||||
- React DOM now supports the `cite` and `profile` HTML attributes.
|
||||
- React DOM now supports the `onAnimationStart`, `onAnimationEnd`, `onAnimationIteration`, `onTransitionEnd`, and `onInvalid` events. Support for `onLoad` has been added to `object` elements.
|
||||
- `Object.is` is used in a number of places to compare values, which leads to fewer false positives, especially involving `NaN`. In particular, this affects the `shallowCompare` add-on.
|
||||
- React DOM now defaults to using DOM attributes instead of properties, which fixes a few edge case bugs. Additionally the nullification of values (ex: `href={null}`) now results in the forceful removal, no longer trying to set to the default value used by browsers in the absence of a value.
|
||||
32
docs/_posts/2016-03-16-react-v15-rc2.md
Normal file
32
docs/_posts/2016-03-16-react-v15-rc2.md
Normal file
@@ -0,0 +1,32 @@
|
||||
---
|
||||
title: "React v15.0 Release Candidate 2"
|
||||
author: zpao
|
||||
---
|
||||
|
||||
Today we're releasing a second release candidate for version 15. Primarily this is to address 2 issues, but we also picked up a few small changes from new contributors, including some improvements to some of our new warnings.
|
||||
|
||||
The most pressing change that was made is to fix a bug in our new code that removes `<span>`s, as discussed in the original RC1 post. Specifically we have some code that takes a different path in IE11 and Edge due to the speed of some DOM operations. There was a bug in this code which didn't break out of the optimization for `DocumentFragment`s, resulting in text not appearing at all. Thanks to the several people who [reported this](https://github.com/facebook/react/issues/6246).
|
||||
|
||||
The other change is to our SVG code. In RC1 we had made the decision to pass through all attributes directly. This led to [some confusion with `class` vs `className`](https://github.com/facebook/react/issues/6211) and ultimately led us to reconsider our position on the approach. Passing through all attributes meant that we would have two different patterns for using React where things like hyphenated attributes would work for SVG but not HTML. In the future, we *might* change our approach to the problem for HTML as well but in the meantime, maintaining consistency is important. So we reverted the changes that allowed the attributes to be passed through and instead expanded the SVG property list to include all attributes that are in the spec. We believe we have everything now but definitely [let us know](https://github.com/facebook/react/issues/1657#issuecomment-197031403) if we missed anything. It was and still is our intent to support the full range of SVG tags and attributes in this release.
|
||||
|
||||
Thanks again to everybody who has tried the RC1 and reported issues. It has been extremely important and we wouldn't be able to do this without your help!
|
||||
|
||||
## Installation
|
||||
|
||||
We recommend using React from `npm` and using a tool like browserify or webpack to build your code into a single bundle. To install the two packages:
|
||||
|
||||
* `npm install --save react@15.0.0-rc.2 react-dom@15.0.0-rc.2`
|
||||
|
||||
Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, set the `NODE_ENV` environment variable to `production` to use the production build of React which does not include the development warnings and runs significantly faster.
|
||||
|
||||
If you can’t use `npm` yet, we provide pre-built browser builds for your convenience, which are also available in the `react` package on bower.
|
||||
|
||||
* **React**
|
||||
Dev build with warnings: <https://fb.me/react-15.0.0-rc.2.js>
|
||||
Minified build for production: <https://fb.me/react-15.0.0-rc.2.min.js>
|
||||
* **React with Add-Ons**
|
||||
Dev build with warnings: <https://fb.me/react-with-addons-15.0.0-rc.2.js>
|
||||
Minified build for production: <https://fb.me/react-with-addons-15.0.0-rc.2.min.js>
|
||||
* **React DOM** (include React in the page before React DOM)
|
||||
Dev build with warnings: <https://fb.me/react-dom-15.0.0-rc.2.js>
|
||||
Minified build for production: <https://fb.me/react-dom-15.0.0-rc.2.min.js>
|
||||
32
docs/_posts/2016-03-29-react-v0.14.8.md
Normal file
32
docs/_posts/2016-03-29-react-v0.14.8.md
Normal file
@@ -0,0 +1,32 @@
|
||||
---
|
||||
title: "React v0.14.8"
|
||||
author: gaearon
|
||||
---
|
||||
|
||||
We have already released two release candidates for React 15, and the final version is coming soon.
|
||||
|
||||
However [Ian Christian Myers](https://github.com/iancmyers) discovered a memory leak related to server rendering in React 0.14 and [contributed a fix](https://github.com/facebook/react/pull/6060). While this memory leak has already been fixed in a different way in the React 15 release candidates, we decided to cut another 0.14 release that contains just this fix.
|
||||
|
||||
The release is now available for download:
|
||||
|
||||
* **React**
|
||||
Dev build with warnings: <https://fb.me/react-0.14.8.js>
|
||||
Minified build for production: <https://fb.me/react-0.14.8.min.js>
|
||||
* **React with Add-Ons**
|
||||
Dev build with warnings: <https://fb.me/react-with-addons-0.14.8.js>
|
||||
Minified build for production: <https://fb.me/react-with-addons-0.14.8.min.js>
|
||||
* **React DOM** (include React in the page before React DOM)
|
||||
Dev build with warnings: <https://fb.me/react-dom-0.14.8.js>
|
||||
Minified build for production: <https://fb.me/react-dom-0.14.8.min.js>
|
||||
* **React DOM Server** (include React in the page before React DOM Server)
|
||||
Dev build with warnings: <https://fb.me/react-dom-server-0.14.8.js>
|
||||
Minified build for production: <https://fb.me/react-dom-server-0.14.8.min.js>
|
||||
|
||||
We've also published version `0.14.8` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower.
|
||||
|
||||
- - -
|
||||
|
||||
## Changelog
|
||||
|
||||
### React
|
||||
- Fixed memory leak when rendering on the server
|
||||
259
docs/_posts/2016-04-07-react-v15.md
Normal file
259
docs/_posts/2016-04-07-react-v15.md
Normal file
@@ -0,0 +1,259 @@
|
||||
---
|
||||
title: "React v15.0"
|
||||
author: gaearon
|
||||
---
|
||||
|
||||
We would like to thank the React community for reporting issues and regressions in the release candidates on our [issue tracker](https://github.com/facebook/react/issues/). Over the last few weeks we fixed those issues, and now, after two release candidates, we are excited to finally release the stable version of React 15.
|
||||
|
||||
As a reminder, [we’re switching to major versions](/react/blog/2016/02/19/new-versioning-scheme.html) to indicate that we have been using React in production for a long time. This 15.0 release follows our previous 0.14 version and we’ll continue to follow semver like we’ve been doing since 2013. It’s also worth noting that [we no longer actively support Internet Explorer 8](/react/blog/2016/01/12/discontinuing-ie8-support.html). We believe React will work in its current form there but we will not be prioritizing any efforts to fix new issues that only affect IE8.
|
||||
|
||||
React 15 brings significant improvements to how we interact with the DOM:
|
||||
|
||||
* We are now using `document.createElement` instead of setting `innerHTML` when mounting components. This allows us to get rid of the `data-reactid` attribute on every node and make the DOM lighter. Using `document.createElement` is also faster in modern browsers and fixes a number of edge cases related to SVG elements and running multiple copies of React on the same page.
|
||||
|
||||
* Historically our support for SVG has been incomplete, and many tags and attributes were missing. We heard you, and in React 15 we [added support for all the SVG attributes that are recognized by 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.
|
||||
|
||||
* 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.
|
||||
|
||||
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.
|
||||
|
||||
We are also experimenting with a new changelog format in this post. Every change now links to the corresponding pull request and mentions the author. Let us know whether you find this useful!
|
||||
|
||||
## Upgrade Guide
|
||||
|
||||
As usual with major releases, React 15 will remove support for some of the patterns deprecated nine months ago in React 0.14. We know changes can be painful (the Facebook codebase has over 20,000 React components, and that’s not even counting React Native), so we always try to make changes gradually in order to minimize the pain.
|
||||
|
||||
If your code is free of warnings when running under React 0.14, upgrading should be easy. The bulk of changes in this release are actually behind the scenes, impacting the way that React interacts with the DOM. The other substantial change is that React now supports the full range of SVG elements and attributes. Beyond that we have a large number of incremental improvements and additional warnings aimed to aid developers. We’ve also laid some groundwork in the core to bring you some new capabilities in future releases.
|
||||
|
||||
See the changelog below for more details.
|
||||
|
||||
## Installation
|
||||
|
||||
We recommend using React from `npm` and using a tool like browserify or webpack to build your code into a single bundle. To install the two packages:
|
||||
|
||||
* `npm install --save react react-dom`
|
||||
|
||||
Remember that by default, React runs extra checks and provides helpful warnings in development mode. When deploying your app, set the `NODE_ENV` environment variable to `production` to use the production build of React which does not include the development warnings and runs significantly faster.
|
||||
|
||||
If you can’t use `npm` yet, we provide pre-built browser builds for your convenience, which are also available in the `react` package on bower.
|
||||
|
||||
* **React**
|
||||
Dev build with warnings: <https://fb.me/react-15.0.0.js>
|
||||
Minified build for production: <https://fb.me/react-15.0.0.min.js>
|
||||
* **React with Add-Ons**
|
||||
Dev build with warnings: <https://fb.me/react-with-addons-15.0.0.js>
|
||||
Minified build for production: <https://fb.me/react-with-addons-15.0.0.min.js>
|
||||
* **React DOM** (include React in the page before React DOM)
|
||||
Dev build with warnings: <https://fb.me/react-dom-15.0.0.js>
|
||||
Minified build for production: <https://fb.me/react-dom-15.0.0.min.js>
|
||||
|
||||
## Changelog
|
||||
|
||||
### Major changes
|
||||
|
||||
- #### `document.createElement` is in and `data-reactid` is out
|
||||
|
||||
There were a number of large changes to our interactions with the DOM. One of the most noticeable changes is that we no longer set the `data-reactid` attribute for each DOM node. While this will make it more difficult to know if a website is using React, the advantage is that the DOM is much more lightweight. This change was made possible by us switching to use `document.createElement` on initial render. Previously we would generate a large string of HTML and then set `node.innerHTML`. At the time, this was decided to be faster than using `document.createElement` for the majority of cases and browsers that we supported. Browsers have continued to improve and so overwhelmingly this is no longer true. By using `createElement` we can make other parts of React faster. The ids were used to map back from events to the original React component, meaning we had to do a bunch of work on every event, even though we cached this data heavily. As 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.
|
||||
|
||||
**Note:** `data-reactid` is still present for server-rendered content, however it is much smaller than before and is simply an auto-incrementing counter.
|
||||
|
||||
<small>[@spicyj](https://github.com/spicyj) in [#5205](https://github.com/facebook/react/pull/5205)</small>
|
||||
|
||||
- #### No more extra `<span>`s
|
||||
|
||||
Another big change with our DOM interaction is how we render text blocks. Previously you may have noticed that React rendered a lot of extra `<span>`s. For example, in our most basic example on the home page we render `<div>Hello {this.props.name}</div>`, resulting in markup that contained 2 `<span>`s. Now 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.
|
||||
|
||||
<small>[@mwiencek](https://github.com/mwiencek) in [#5753](https://github.com/facebook/react/pull/5753)</small>
|
||||
|
||||
- #### Rendering `null` now uses comment nodes
|
||||
|
||||
We’ve also made use of these comment nodes to change what `null` renders to. Rendering to `null` was a feature we added in React 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.
|
||||
|
||||
<small>[@spicyj](https://github.com/spicyj) in [#5451](https://github.com/facebook/react/pull/5451)</small>
|
||||
|
||||
- #### Functional components can now return `null` too
|
||||
|
||||
We added support for [defining stateless components as functions](/react/blog/2015/09/10/react-v0.14-rc1.html#stateless-function-components) in React 0.14. However, React 0.14 still allowed you to define a class component without extending `React.Component` or using `React.createClass()`, so [we 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.
|
||||
|
||||
<small>[@jimfb](https://github.com/jimfb) in [#5884](https://github.com/facebook/react/pull/5884)</small>
|
||||
|
||||
- #### Improved SVG support
|
||||
|
||||
All SVG tags are now fully supported. (Uncommon SVG tags are not present on the `React.DOM` element helper, but JSX and `React.createElement` work on all tag names.) All SVG attributes that are implemented by the browsers should be supported too. If you find any attributes that we have missed, please [let us know in this issue](https://github.com/facebook/react/issues/1657).
|
||||
|
||||
<small>[@zpao](https://github.com/zpao) in [#6243](https://github.com/facebook/react/pull/6243)</small>
|
||||
|
||||
### Breaking changes
|
||||
|
||||
- #### No more extra `<span>`s
|
||||
|
||||
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.
|
||||
|
||||
<small>[@mwiencek](https://github.com/mwiencek) in [#5753](https://github.com/facebook/react/pull/5753)</small>
|
||||
|
||||
- #### `React.cloneElement()` now resolves `defaultProps`
|
||||
|
||||
We fixed a bug in `React.cloneElement()` that some components may rely on. If some of the `props` received by `cloneElement()` are `undefined`, it used to return an element with `undefined` values for those props. In React 15, 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.
|
||||
|
||||
<small>[@truongduy134](https://github.com/truongduy134) in [#5997](https://github.com/facebook/react/pull/5997)</small>
|
||||
|
||||
- #### `ReactPerf.getLastMeasurements()` is opaque
|
||||
|
||||
This change won’t affect applications but may break some third-party tools. We are [revamping `ReactPerf` implementation](https://github.com/facebook/react/pull/6046) and plan to release it during the 15.x cycle. The internal performance measurement format is subject to change so, for the time being, we consider the return value of `ReactPerf.getLastMeasurements()` an opaque data structure that should not be relied upon.
|
||||
|
||||
<small>[@gaearon](https://github.com/gaearon) in [#6286](https://github.com/facebook/react/pull/6286)</small>
|
||||
|
||||
- #### Removed deprecations
|
||||
|
||||
These deprecations were introduced nine months ago in v0.14 with a warning and are removed:
|
||||
|
||||
- Deprecated APIs are removed from the `React` top-level export: `findDOMNode`, `render`, `renderToString`, `renderToStaticMarkup`, and `unmountComponentAtNode`. As a reminder, they are now available on `ReactDOM` and `ReactDOMServer`.
|
||||
<small>[@jimfb](https://github.com/jimfb) in [#5832](https://github.com/facebook/react/pull/5832)</small>
|
||||
|
||||
- Deprecated addons are removed: `batchedUpdates` and `cloneWithProps`.
|
||||
<small>[@jimfb](https://github.com/jimfb) in [#5859](https://github.com/facebook/react/pull/5859), [@zpao](https://github.com/zpao) in [#6016](https://github.com/facebook/react/pull/6016)</small>
|
||||
|
||||
- Deprecated component instance methods are removed: `setProps`, `replaceProps`, and `getDOMNode`.
|
||||
<small>[@jimfb](https://github.com/jimfb) in [#5570](https://github.com/facebook/react/pull/5570)</small>
|
||||
|
||||
- Deprecated CommonJS `react/addons` entry point is removed. As a reminder, you should use separate `react-addons-*` packages instead. This only applies if you use the CommonJS builds.
|
||||
<small>[@gaearon](https://github.com/gaearon) in [#6285](https://github.com/facebook/react/pull/6285)</small>
|
||||
|
||||
- Passing `children` to void elements like `<input>` was deprecated, and now throws an error.
|
||||
<small>[@jonhester](https://github.com/jonhester) in [#3372](https://github.com/facebook/react/pull/3372)</small>
|
||||
|
||||
- React-specific properties on DOM `refs` (e.g. `this.refs.div.props`) were deprecated, and are removed now.
|
||||
<small>[@jimfb](https://github.com/jimfb) in [#5495](https://github.com/facebook/react/pull/5495)</small>
|
||||
|
||||
### New deprecations, introduced with a warning
|
||||
|
||||
Each of these changes will continue to work as before with a new warning until the release of React 16 so you can upgrade your code gradually.
|
||||
|
||||
- `LinkedStateMixin` and `valueLink` are now deprecated due to very low popularity. If you need this, you can use a wrapper component that implements the same behavior: [react-linked-input](https://www.npmjs.com/package/react-linked-input).
|
||||
<small>[@jimfb](https://github.com/jimfb) in [#6127](https://github.com/facebook/react/pull/6127)</small>
|
||||
|
||||
- Future versions of React will treat `<input value={null}>` as a request to clear the input. However, React 0.14 has been ignoring `value={null}`. React 15 warns you on a `null` input value and offers you to clarify your intention. To fix the warning, you may explicitly pass an empty string to clear a controlled input, or pass `undefined` to make the input uncontrolled.
|
||||
<small>[@antoaravinth](https://github.com/antoaravinth) in [#5048](https://github.com/facebook/react/pull/5048)</small>
|
||||
|
||||
- `ReactPerf.printDOM()` was renamed to `ReactPerf.printOperations()`, and `ReactPerf.getMeasurementsSummaryMap()` was renamed to `ReactPerf.getWasted()`.
|
||||
<small>[@gaearon](https://github.com/gaearon) in [#6287](https://github.com/facebook/react/pull/6287)</small>
|
||||
|
||||
### New helpful warnings
|
||||
|
||||
- If you use a minified copy of the _development_ build, React DOM kindly encourages you to use the faster production build instead.
|
||||
<small>[@spicyj](https://github.com/spicyj) in [#5083](https://github.com/facebook/react/pull/5083)</small>
|
||||
|
||||
- React DOM: When specifying a unit-less CSS value as a string, a future version will not add `px` automatically. This version now warns in this case (ex: writing `style={{'{{'}}width: '300'}}`. Unitless *number* values like `width: 300` are unchanged.
|
||||
<small>[@pluma](https://github.com/pluma) in [#5140](https://github.com/facebook/react/pull/5140)</small>
|
||||
|
||||
- Synthetic Events will now warn when setting and accessing properties (which will not get cleared appropriately), as well as warn on access after an event has been returned to the pool.
|
||||
<small>[@kentcdodds](https://github.com/kentcdodds) in [#5940](https://github.com/facebook/react/pull/5940) and [@koba04](https://github.com/koba04) in [#5947](https://github.com/facebook/react/pull/5947)</small>
|
||||
|
||||
- Elements will now warn when attempting to read `ref` and `key` from the props.
|
||||
<small>[@prometheansacrifice](https://github.com/prometheansacrifice) in [#5744](https://github.com/facebook/react/pull/5744)</small>
|
||||
|
||||
- React will now warn if you pass a different `props` object to `super()` in the constructor.
|
||||
<small>[@prometheansacrifice](https://github.com/prometheansacrifice) in [#5346](https://github.com/facebook/react/pull/5346)</small>
|
||||
|
||||
- React will now warn if you call `setState()` inside `getChildContext()`.
|
||||
<small>[@raineroviir](https://github.com/raineroviir) in [#6121](https://github.com/facebook/react/pull/6121)</small>
|
||||
|
||||
- React DOM now attempts to warn for mistyped event handlers on DOM elements, such as `onclick` which should be `onClick`.
|
||||
<small>[@ali](https://github.com/ali) in [#5361](https://github.com/facebook/react/pull/5361)</small>
|
||||
|
||||
- React DOM now warns about `NaN` values in `style`.
|
||||
<small>[@jontewks](https://github.com/jontewks) in [#5811](https://github.com/facebook/react/pull/5811)</small>
|
||||
|
||||
- React DOM now warns if you specify both `value` and `defaultValue` for an input.
|
||||
<small>[@mgmcdermott](https://github.com/mgmcdermott) in [#5823](https://github.com/facebook/react/pull/5823)</small>
|
||||
|
||||
- React DOM now warns if an input switches between being controlled and uncontrolled.
|
||||
<small>[@TheBlasfem](https://github.com/TheBlasfem) in [#5864](https://github.com/facebook/react/pull/5864)</small>
|
||||
|
||||
- React DOM now warns if you specify `onFocusIn` or `onFocusOut` handlers as they are unnecessary in React.
|
||||
<small>[@jontewks](https://github.com/jontewks) in [#6296](https://github.com/facebook/react/pull/6296)</small>
|
||||
|
||||
- React now prints a descriptive error message when you pass an invalid callback as the last argument to `ReactDOM.render()`, `this.setState()`, or `this.forceUpdate()`.
|
||||
<small>[@conorhastings](https://github.com/conorhastings) in [#5193](https://github.com/facebook/react/pull/5193) and [@gaearon](https://github.com/gaearon) in [#6310](https://github.com/facebook/react/pull/6310)</small>
|
||||
|
||||
- Add-Ons: `TestUtils.Simulate()` now prints a helpful message if you attempt to use it with shallow rendering.
|
||||
<small>[@conorhastings](https://github.com/conorhastings) in [#5358](https://github.com/facebook/react/pull/5358)</small>
|
||||
|
||||
- PropTypes: `arrayOf()` and `objectOf()` provide better error messages for invalid arguments.
|
||||
<small>[@chicoxyzzy](https://github.com/chicoxyzzy) in [#5390](https://github.com/facebook/react/pull/5390)</small>
|
||||
|
||||
### Notable bug fixes
|
||||
|
||||
- Fixed multiple small memory leaks.
|
||||
<small>[@spicyj](https://github.com/spicyj) in [#4983](https://github.com/facebook/react/pull/4983) and [@victor-homyakov](https://github.com/victor-homyakov) in [#6309](https://github.com/facebook/react/pull/6309)</small>
|
||||
|
||||
- Input events are handled more reliably in IE 10 and IE 11; spurious events no longer fire when using a placeholder.
|
||||
<small>[@jquense](https://github.com/jquense) in [#4051](https://github.com/facebook/react/pull/4051)</small>
|
||||
|
||||
- The `componentWillReceiveProps()` lifecycle method is now consistently called when `context` changes.
|
||||
<small>[@milesj](https://github.com/milesj) in [#5787](https://github.com/facebook/react/pull/5787)</small>
|
||||
|
||||
- `React.cloneElement()` doesn’t append slash to an existing `key` when used inside `React.Children.map()`.
|
||||
<small>[@ianobermiller](https://github.com/ianobermiller) in [#5892](https://github.com/facebook/react/pull/5892)</small>
|
||||
|
||||
- React DOM now supports the `cite` and `profile` HTML attributes.
|
||||
<small>[@AprilArcus](https://github.com/AprilArcus) in [#6094](https://github.com/facebook/react/pull/6094) and [@saiichihashimoto](https://github.com/saiichihashimoto) in [#6032](https://github.com/facebook/react/pull/6032)</small>
|
||||
|
||||
- React DOM now supports `cssFloat`, `gridRow` and `gridColumn` CSS properties.
|
||||
<small>[@stevenvachon](https://github.com/stevenvachon) in [#6133](https://github.com/facebook/react/pull/6133) and [@mnordick](https://github.com/mnordick) in [#4779](https://github.com/facebook/react/pull/4779)</small>
|
||||
|
||||
- React DOM now correctly handles `borderImageOutset`, `borderImageWidth`, `borderImageSlice`, `floodOpacity`, `strokeDasharray`, and `strokeMiterlimit` as unitless CSS properties.
|
||||
<small>[@rofrischmann](https://github.com/rofrischmann) in [#6210](https://github.com/facebook/react/pull/6210) and [#6270](https://github.com/facebook/react/pull/6270)</small>
|
||||
|
||||
- React DOM now supports the `onAnimationStart`, `onAnimationEnd`, `onAnimationIteration`, `onTransitionEnd`, and `onInvalid` events. Support for `onLoad` has been added to `object` elements.
|
||||
<small>[@tomduncalf](https://github.com/tomduncalf) in [#5187](https://github.com/facebook/react/pull/5187), [@milesj](https://github.com/milesj) in [#6005](https://github.com/facebook/react/pull/6005), and [@ara4n](https://github.com/ara4n) in [#5781](https://github.com/facebook/react/pull/5781)</small>
|
||||
|
||||
- React DOM now defaults to using DOM attributes instead of properties, which fixes a few edge case bugs. Additionally the nullification of values (ex: `href={null}`) now results in the forceful removal, no longer trying to set to the default value used by browsers in the absence of a value.
|
||||
<small>[@syranide](https://github.com/syranide) in [#1510](https://github.com/facebook/react/pull/1510)</small>
|
||||
|
||||
- React DOM does not mistakingly coerce `children` to strings for Web Components.
|
||||
<small>[@jimfb](https://github.com/jimfb) in [#5093](https://github.com/facebook/react/pull/5093)</small>
|
||||
|
||||
- React DOM now correctly normalizes SVG `<use>` events.
|
||||
<small>[@edmellum](https://github.com/edmellum) in [#5720](https://github.com/facebook/react/pull/5720)</small>
|
||||
|
||||
- React DOM does not throw if a `<select>` is unmounted while its `onChange` handler is executing.
|
||||
<small>[@sambev](https://github.com/sambev) in [#6028](https://github.com/facebook/react/pull/6028)</small>
|
||||
|
||||
- React DOM does not throw in Windows 8 apps.
|
||||
<small>[@Andrew8xx8](https://github.com/Andrew8xx8) in [#6063](https://github.com/facebook/react/pull/6063)</small>
|
||||
|
||||
- React DOM does not throw when asynchronously unmounting a child with a `ref`.
|
||||
<small>[@yiminghe](https://github.com/yiminghe) in [#6095](https://github.com/facebook/react/pull/6095)</small>
|
||||
|
||||
- React DOM no longer forces synchronous layout because of scroll position tracking.
|
||||
<small>[@syranide](https://github.com/syranide) in [#2271](https://github.com/facebook/react/pull/2271)</small>
|
||||
|
||||
- `Object.is` is used in a number of places to compare values, which leads to fewer false positives, especially involving `NaN`. In particular, this affects the `shallowCompare` add-on.
|
||||
<small>[@chicoxyzzy](https://github.com/chicoxyzzy) in [#6132](https://github.com/facebook/react/pull/6132)</small>
|
||||
|
||||
- Add-Ons: ReactPerf no longer instruments adding or removing an event listener because they don’t really touch the DOM due to event delegation.
|
||||
<small>[@antoaravinth](https://github.com/antoaravinth) in [#5209](https://github.com/facebook/react/pull/5209)</small>
|
||||
|
||||
### Other improvements
|
||||
|
||||
- React now uses `loose-envify` instead of `envify` so it installs fewer transitive dependencies.
|
||||
<small>[@qerub](https://github.com/qerub) in [#6303](https://github.com/facebook/react/pull/6303)</small>
|
||||
|
||||
- Shallow renderer now exposes `getMountedInstance()`.
|
||||
<small>[@glenjamin](https://github.com/glenjamin) in [#4918](https://github.com/facebook/react/pull/4918)</small>
|
||||
|
||||
- Shallow renderer now returns the rendered output from `render()`.
|
||||
<small>[@simonewebdesign](https://github.com/simonewebdesign) in [#5411](https://github.com/facebook/react/pull/5411)</small>
|
||||
|
||||
- React no longer depends on ES5 *shams* for `Object.create` and `Object.freeze` in older environments. It still, however, requires ES5 *shims* in those environments.
|
||||
<small>[@dgreensp](https://github.com/dgreensp) in [#4959](https://github.com/facebook/react/pull/4959)</small>
|
||||
|
||||
- React DOM now allows `data-` attributes with names that start with numbers.
|
||||
<small>[@nLight](https://github.com/nLight) in [#5216](https://github.com/facebook/react/pull/5216)</small>
|
||||
|
||||
- React DOM adds a new `suppressContentEditableWarning` prop for components like [Draft.js](https://facebook.github.io/draft-js/) that intentionally manage `contentEditable` children with React.
|
||||
<small>[@mxstbr](https://github.com/mxstbr) in [#6112](https://github.com/facebook/react/pull/6112)</small>
|
||||
|
||||
- React improves the performance for `createClass()` on complex specs.
|
||||
<small>[@spicyj](https://github.com/spicyj) in [#5550](https://github.com/facebook/react/pull/5550)</small>
|
||||
34
docs/_posts/2016-04-08-react-v15.0.1.md
Normal file
34
docs/_posts/2016-04-08-react-v15.0.1.md
Normal file
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: "React v15.0.1"
|
||||
author: zpao
|
||||
---
|
||||
|
||||
Yesterday afternoon we shipped v15.0.0 and quickly got some feedback about a couple of issues. We apologize for these problems and we've been working since then to make sure we get fixes into your hands as quickly as possible.
|
||||
|
||||
The first of these issues is related to the removal of an undocumented API. This API was added to enable [JSX Spread Attributes](/react/docs/jsx-spread.html) in our JS compile tools (react-tools, JSXTransformer) before `Object.assign` was standard. When we stopped supporting these tools last year, we kept the API there to catch the longer tail of people using those tools. Meanwhile we moved to using Babel and encouraged others to do the same. Babel will typically compile the spread use to an `_extends` helper, which will use `Object.assign`. We did not properly research other compilation tools before deciding to remove the API in v15. Specifically, TypeScript and coffee-react are two popular packages using `React.__spread`, as well as reactify which still makes use react-tools. In order to make sure that code compiled with these tools is not broken, we will be restoring the `React.__spread` API and adding a warning. It will be removed in the future so if you maintain a project making using of it, we encourage you to compile to `Object.assign` directly or a similar helper function.
|
||||
|
||||
The second issue resulted in cursor position being lost in controlled inputs. We merged a pull request earlier this week to fix a separate regression from v0.14. Our goal was to target `<option>` elements but we ended up targeting all interactions with `value` properties. Unfortunately we didn't test it as thoroughly as we thought. We backed out the offending change and fixed the issue in different way which doesn't have the same problem.
|
||||
|
||||
We apologize if you installed 15.0.0 and have encountered these issues yourselves.
|
||||
|
||||
As usual, you can get install the `react` package via npm or download a browser bundle.
|
||||
|
||||
* **React**
|
||||
Dev build with warnings: <https://fb.me/react-15.0.1.js>
|
||||
Minified build for production: <https://fb.me/react-15.0.1.min.js>
|
||||
* **React with Add-Ons**
|
||||
Dev build with warnings: <https://fb.me/react-with-addons-15.0.1.js>
|
||||
Minified build for production: <https://fb.me/react-with-addons-15.0.1.min.js>
|
||||
* **React DOM** (include React in the page before React DOM)
|
||||
Dev build with warnings: <https://fb.me/react-dom-15.0.1.js>
|
||||
Minified build for production: <https://fb.me/react-dom-15.0.1.min.js>
|
||||
|
||||
## Changelog
|
||||
|
||||
### React
|
||||
- Restore `React.__spread` API to unbreak code compiled with some tools making use of this undocumented API. It is now officially deprecated.
|
||||
<small>[@zpao](https://github.com/zpao) in [#6444](https://github.com/facebook/react/pull/6444)</small>
|
||||
|
||||
### ReactDOM
|
||||
- Fixed issue resulting in loss of cursor position in controlled inputs.
|
||||
<small>[@spicyj](https://github.com/spicyj) in [#6449](https://github.com/facebook/react/pull/6449)</small>
|
||||
@@ -0,0 +1,18 @@
|
||||
---
|
||||
title: "Introducing React's Error Code System"
|
||||
author: keyanzhang
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
Prior to this release, we stripped out error messages at build-time and this is why you might have seen this message in production:
|
||||
|
||||
> Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.
|
||||
|
||||
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/dev-expression-with-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.
|
||||
|
||||
While we hope you don't see errors often, you can see how it works [here](/react/docs/error-decoder.html?invariant=109&args[]=Foo). This is what the same error from above will look like:
|
||||
|
||||
> Minified React error #109; visit https://facebook.github.io/react/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.
|
||||
|
||||
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!
|
||||
614
docs/_posts/2016-07-13-mixins-considered-harmful.md
Normal file
614
docs/_posts/2016-07-13-mixins-considered-harmful.md
Normal file
@@ -0,0 +1,614 @@
|
||||
---
|
||||
title: "Mixins Considered Harmful"
|
||||
author: gaearon
|
||||
---
|
||||
|
||||
“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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
## Why Mixins are Broken
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
### Mixins introduce implicit dependencies
|
||||
|
||||
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.
|
||||
|
||||
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?
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
### Mixins cause name clashes
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
### Mixins cause snowballing complexity
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
## Migrating from Mixins
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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!
|
||||
|
||||
### Performance Optimizations
|
||||
|
||||
One of the most commonly used mixins is [`PureRenderMixin`](/react/docs/pure-render-mixin.html). You might be using it in some components to [prevent unnecessary re-renders](/react/docs/advanced-performance.html#shouldcomponentupdate-in-action) when the props and state are shallowly equal to the previous props and state:
|
||||
|
||||
```javascript
|
||||
var PureRenderMixin = require('react-addons-pure-render-mixin');
|
||||
|
||||
var Button = React.createClass({
|
||||
mixins: [PureRenderMixin],
|
||||
|
||||
// ...
|
||||
|
||||
});
|
||||
```
|
||||
|
||||
#### Solution
|
||||
|
||||
To express the same without mixins, you can use the [`shallowCompare`](/react/docs/shallow-compare.html) function directly instead:
|
||||
|
||||
```js
|
||||
var shallowCompare = require('react-addons-shallow-compare');
|
||||
|
||||
var Button = React.createClass({
|
||||
shouldComponentUpdate: function(nextProps, nextState) {
|
||||
return shallowCompare(this, nextProps, nextState);
|
||||
},
|
||||
|
||||
// ...
|
||||
|
||||
});
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
### Subscriptions and Side Effects
|
||||
|
||||
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()`.
|
||||
|
||||
```javascript
|
||||
var SubscriptionMixin = {
|
||||
getInitialState: function() {
|
||||
return {
|
||||
comments: DataSource.getComments()
|
||||
};
|
||||
},
|
||||
|
||||
componentDidMount: function() {
|
||||
DataSource.addChangeListener(this.handleChange);
|
||||
},
|
||||
|
||||
componentWillUnmount: function() {
|
||||
DataSource.removeChangeListener(this.handleChange);
|
||||
},
|
||||
|
||||
handleChange: function() {
|
||||
this.setState({
|
||||
comments: DataSource.getComments()
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
var CommentList = React.createClass({
|
||||
mixins: [SubscriptionMixin],
|
||||
|
||||
render: function() {
|
||||
// Reading comments from state managed by mixin.
|
||||
var comments = this.state.comments;
|
||||
return (
|
||||
<div>
|
||||
{comments.map(function(comment) {
|
||||
return <Comment comment={comment} key={comment.id} />
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = CommentList;
|
||||
```
|
||||
|
||||
#### Solution
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
#### Higher-Order Components Explained
|
||||
|
||||
Let’s forget about React for a second. Consider these two functions that add and multiply numbers, logging the results as they do that:
|
||||
|
||||
```js
|
||||
function addAndLog(x, y) {
|
||||
var result = x + y;
|
||||
console.log('result:', result);
|
||||
return result;
|
||||
}
|
||||
|
||||
function multiplyAndLog(x, y) {
|
||||
var result = x * y;
|
||||
console.log('result:', result);
|
||||
return result;
|
||||
}
|
||||
```
|
||||
|
||||
These two functions are not very useful but they help us demonstrate a pattern that we can later apply to components.
|
||||
|
||||
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.
|
||||
|
||||
Again, it sounds more intimidating than it really is:
|
||||
|
||||
```js
|
||||
function withLogging(wrappedFunction) {
|
||||
// Return a function with the same API...
|
||||
return function(x, y) {
|
||||
// ... that calls the original function
|
||||
var result = wrappedFunction(x, y);
|
||||
// ... but also logs its result!
|
||||
console.log('result:', result);
|
||||
return result;
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
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:
|
||||
|
||||
```js
|
||||
function add(x, y) {
|
||||
return x + y;
|
||||
}
|
||||
|
||||
function multiply(x, y) {
|
||||
return x * y;
|
||||
}
|
||||
|
||||
function withLogging(wrappedFunction) {
|
||||
return function(x, y) {
|
||||
var result = wrappedFunction(x, y);
|
||||
console.log('result:', result);
|
||||
return result;
|
||||
};
|
||||
}
|
||||
|
||||
// Equivalent to writing addAndLog by hand:
|
||||
var addAndLog = withLogging(add);
|
||||
|
||||
// Equivalent to writing multiplyAndLog by hand:
|
||||
var multiplyAndLog = withLogging(multiply);
|
||||
```
|
||||
|
||||
Higher-order components are a very similar pattern, but applied to components in React. We will apply this transformation from mixins in two steps.
|
||||
|
||||
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.
|
||||
|
||||
```js
|
||||
// This is a child component.
|
||||
// It only renders the comments it receives as props.
|
||||
var CommentList = React.createClass({
|
||||
render: function() {
|
||||
// Note: now reading from props rather than state.
|
||||
var comments = this.props.comments;
|
||||
return (
|
||||
<div>
|
||||
{comments.map(function(comment) {
|
||||
return <Comment comment={comment} key={comment.id} />
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
});
|
||||
|
||||
// This is a parent component.
|
||||
// It subscribes to the data source and renders <CommentList />.
|
||||
var CommentListWithSubscription = React.createClass({
|
||||
getInitialState: function() {
|
||||
return {
|
||||
comments: DataSource.getComments()
|
||||
};
|
||||
},
|
||||
|
||||
componentDidMount: function() {
|
||||
DataSource.addChangeListener(this.handleChange);
|
||||
},
|
||||
|
||||
componentWillUnmount: function() {
|
||||
DataSource.removeChangeListener(this.handleChange);
|
||||
},
|
||||
|
||||
handleChange: function() {
|
||||
this.setState({
|
||||
comments: DataSource.getComments()
|
||||
});
|
||||
},
|
||||
|
||||
render: function() {
|
||||
// We pass the current state as props to CommentList.
|
||||
return <CommentList comments={this.state.comments} />;
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = CommentListWithSubscription;
|
||||
```
|
||||
|
||||
There is just one final step left to do.
|
||||
|
||||
Remember how we made `withLogging()` take a function and return another function wrapping it? We can apply a similar pattern to React components.
|
||||
|
||||
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.
|
||||
|
||||
This function would return another component. The returned component would manage the subscription and render `<WrappedComponent />` with the current data.
|
||||
|
||||
We call this pattern a “higher-order component”.
|
||||
|
||||
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.
|
||||
|
||||
```js
|
||||
// This function takes a component...
|
||||
function withSubscription(WrappedComponent) {
|
||||
// ...and returns another component...
|
||||
return React.createClass({
|
||||
getInitialState: function() {
|
||||
return {
|
||||
comments: DataSource.getComments()
|
||||
};
|
||||
},
|
||||
|
||||
componentDidMount: function() {
|
||||
// ... that takes care of the subscription...
|
||||
DataSource.addChangeListener(this.handleChange);
|
||||
},
|
||||
|
||||
componentWillUnmount: function() {
|
||||
DataSource.removeChangeListener(this.handleChange);
|
||||
},
|
||||
|
||||
handleChange: function() {
|
||||
this.setState({
|
||||
comments: DataSource.getComments()
|
||||
});
|
||||
},
|
||||
|
||||
render: function() {
|
||||
// ... and renders the wrapped component with the fresh data!
|
||||
return <WrappedComponent comments={this.state.comments} />;
|
||||
}
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
Now we can declare `CommentListWithSubscription` by applying `withSubscription` to `CommentList`:
|
||||
|
||||
```js
|
||||
var CommentList = React.createClass({
|
||||
render: function() {
|
||||
var comments = this.props.comments;
|
||||
return (
|
||||
<div>
|
||||
{comments.map(function(comment) {
|
||||
return <Comment comment={comment} key={comment.id} />
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
});
|
||||
|
||||
// withSubscription() returns a new component that
|
||||
// is subscribed to the data source and renders
|
||||
// <CommentList /> with up-to-date data.
|
||||
var CommentListWithSubscription = withSubscription(CommentList);
|
||||
|
||||
// The rest of the app is interested in the subscribed component
|
||||
// so we export it instead of the original unwrapped CommentList.
|
||||
module.exports = CommentListWithSubscription;
|
||||
```
|
||||
|
||||
#### Solution, Revisited
|
||||
|
||||
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:
|
||||
|
||||
```js
|
||||
function withSubscription(WrappedComponent) {
|
||||
return React.createClass({
|
||||
getInitialState: function() {
|
||||
return {
|
||||
comments: DataSource.getComments()
|
||||
};
|
||||
},
|
||||
|
||||
componentDidMount: function() {
|
||||
DataSource.addChangeListener(this.handleChange);
|
||||
},
|
||||
|
||||
componentWillUnmount: function() {
|
||||
DataSource.removeChangeListener(this.handleChange);
|
||||
},
|
||||
|
||||
handleChange: function() {
|
||||
this.setState({
|
||||
comments: DataSource.getComments()
|
||||
});
|
||||
},
|
||||
|
||||
render: function() {
|
||||
// Use JSX spread syntax to pass all props and state down automatically.
|
||||
return <WrappedComponent {...this.props} {...this.state} />;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Optional change: convert CommentList to a functional component
|
||||
// because it doesn't use lifecycle hooks or state.
|
||||
function CommentList(props) {
|
||||
var comments = props.comments;
|
||||
return (
|
||||
<div>
|
||||
{comments.map(function(comment) {
|
||||
return <Comment comment={comment} key={comment.id} />
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Instead of declaring CommentListWithSubscription,
|
||||
// we export the wrapped component right away.
|
||||
module.exports = withSubscription(CommentList);
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
Like any solution, higher-order components have their own pitfalls. For example, if you heavily use [refs](/react/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.
|
||||
|
||||
### Rendering Logic
|
||||
|
||||
The next most common use case for mixins that we discovered in our codebase is sharing rendering logic between components.
|
||||
|
||||
Here is a typical example of this pattern:
|
||||
|
||||
```js
|
||||
var RowMixin = {
|
||||
// Called by components from render()
|
||||
renderHeader: function() {
|
||||
return (
|
||||
<div className='row-header'>
|
||||
<h1>
|
||||
{this.getHeaderText() /* Defined by components */}
|
||||
</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
var UserRow = React.createClass({
|
||||
mixins: [RowMixin],
|
||||
|
||||
// Called by RowMixin.renderHeader()
|
||||
getHeaderText: function() {
|
||||
return this.props.user.fullName;
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<div>
|
||||
{this.renderHeader() /* Defined by RowMixin */}
|
||||
<h2>{this.props.user.biography}</h2>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
Multiple components may be sharing `RowMixin` to render the header, and each of them would need to define `getHeaderText()`.
|
||||
|
||||
#### Solution
|
||||
|
||||
If you see rendering logic inside a mixin, it’s time to extract a component!
|
||||
|
||||
Instead of `RowMixin`, we will define a `<Row>` component. We will also replace the convention of defining a `getHeaderText()` method with the standard mechanism of top-data flow in React: passing props.
|
||||
|
||||
Finally, since neither of those components currently need lifecycle hooks or state, we can declare them as simple functions:
|
||||
|
||||
```js
|
||||
function RowHeader(props) {
|
||||
return (
|
||||
<div className='row-header'>
|
||||
<h1>{props.text}</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function UserRow(props) {
|
||||
return (
|
||||
<div>
|
||||
<RowHeader text={props.user.fullName} />
|
||||
<h2>{props.user.biography}</h2>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
Props keep component dependencies explicit, easy to replace, and enforceable with tools like [Flow](https://flowtype.org/) and [TypeScript](https://www.typescriptlang.org/).
|
||||
|
||||
> **Note:**
|
||||
>
|
||||
> 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.
|
||||
|
||||
### Context
|
||||
|
||||
Another group of mixins we discovered were helpers for providing and consuming [React context](/react/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.
|
||||
|
||||
Nevertheless, if you already use context today, you might have been hiding its usage with mixins like this:
|
||||
|
||||
```js
|
||||
var RouterMixin = {
|
||||
contextTypes: {
|
||||
router: React.PropTypes.object.isRequired
|
||||
},
|
||||
|
||||
// The mixin provides a method so that components
|
||||
// don't have to use the context API directly.
|
||||
push: function(path) {
|
||||
this.context.router.push(path)
|
||||
}
|
||||
};
|
||||
|
||||
var Link = React.createClass({
|
||||
mixins: [RouterMixin],
|
||||
|
||||
handleClick: function(e) {
|
||||
e.stopPropagation();
|
||||
|
||||
// This method is defined in RouterMixin.
|
||||
this.push(this.props.to);
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<a onClick={this.handleClick}>
|
||||
{this.props.children}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = Link;
|
||||
```
|
||||
|
||||
#### Solution
|
||||
|
||||
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.
|
||||
|
||||
Let the wrapping component grab something from the context, and pass it down with props to the wrapped component:
|
||||
|
||||
```js
|
||||
function withRouter(WrappedComponent) {
|
||||
return React.createClass({
|
||||
contextTypes: {
|
||||
router: React.PropTypes.object.isRequired
|
||||
},
|
||||
|
||||
render: function() {
|
||||
// The wrapper component reads something from the context
|
||||
// and passes it down as a prop to the wrapped component.
|
||||
var router = this.context.router;
|
||||
return <WrappedComponent {...this.props} router={router} />;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var Link = React.createClass({
|
||||
handleClick: function(e) {
|
||||
e.stopPropagation();
|
||||
|
||||
// The wrapped component uses props instead of context.
|
||||
this.props.router.push(this.props.to);
|
||||
},
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<a onClick={this.handleClick}>
|
||||
{this.props.children}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// Don't forget to wrap the component!
|
||||
module.exports = withRouter(Link);
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
### Utility Methods
|
||||
|
||||
Sometimes, mixins are used solely to share utility functions between components:
|
||||
|
||||
```js
|
||||
var ColorMixin = {
|
||||
getLuminance(color) {
|
||||
var c = parseInt(color, 16);
|
||||
var r = (c & 0xFF0000) >> 16;
|
||||
var g = (c & 0x00FF00) >> 8;
|
||||
var b = (c & 0x0000FF);
|
||||
return (0.299 * r + 0.587 * g + 0.114 * b);
|
||||
}
|
||||
};
|
||||
|
||||
var Button = React.createClass({
|
||||
mixins: [ColorMixin],
|
||||
|
||||
render: function() {
|
||||
var theme = this.getLuminance(this.props.color) > 160 ? 'dark' : 'light';
|
||||
return (
|
||||
<div className={theme}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
#### Solution
|
||||
|
||||
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:
|
||||
|
||||
```js
|
||||
var getLuminance = require('../utils/getLuminance');
|
||||
|
||||
var Button = React.createClass({
|
||||
render: function() {
|
||||
var theme = getLuminance(this.props.color) > 160 ? 'dark' : 'light';
|
||||
return (
|
||||
<div className={theme}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### Other Use Cases
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
165
docs/_posts/2016-07-22-create-apps-with-no-configuration.md
Normal file
165
docs/_posts/2016-07-22-create-apps-with-no-configuration.md
Normal file
@@ -0,0 +1,165 @@
|
||||
---
|
||||
title: "Create Apps with No Configuration"
|
||||
author: gaearon
|
||||
---
|
||||
|
||||
**[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.
|
||||
|
||||
## Getting Started
|
||||
|
||||
### Installation
|
||||
|
||||
First, install the global package:
|
||||
|
||||
```sh
|
||||
npm install -g create-react-app
|
||||
```
|
||||
|
||||
Node.js 4.x or higher is required.
|
||||
|
||||
### Creating an App
|
||||
|
||||
Now you can use it to create a new app:
|
||||
|
||||
```sh
|
||||
create-react-app hello-world
|
||||
```
|
||||
|
||||
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:
|
||||
|
||||

|
||||
|
||||
### Starting the Server
|
||||
|
||||
Run `npm start` to launch the development server. The browser will open automatically with the created app’s URL.
|
||||
|
||||

|
||||
|
||||
Create React App uses both Webpack and Babel under the hood.
|
||||
The console output is tuned to be minimal to help you focus on the problems:
|
||||
|
||||

|
||||
|
||||
ESLint is also integrated so lint warnings are displayed right in the console:
|
||||
|
||||

|
||||
|
||||
We only picked a small subset of lint rules that often lead to bugs.
|
||||
|
||||
### Building for Production
|
||||
|
||||
To build an optimized bundle, run `npm run build`:
|
||||
|
||||

|
||||
|
||||
It is minified, correctly envified, and the assets include content hashes for caching.
|
||||
|
||||
### One Dependency
|
||||
|
||||
Your `package.json` contains only a single build dependency and a few scripts:
|
||||
|
||||
```js
|
||||
{
|
||||
"name": "hello-world",
|
||||
"dependencies": {
|
||||
"react": "^15.2.1",
|
||||
"react-dom": "^15.2.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"react-scripts": "0.1.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"eject": "react-scripts eject"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
We take care of updating Babel, ESLint, and Webpack to stable compatible versions so you can update a single dependency to get them all.
|
||||
|
||||
### Zero Configuration
|
||||
|
||||
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.
|
||||
|
||||
```
|
||||
hello-world/
|
||||
README.md
|
||||
index.html
|
||||
favicon.ico
|
||||
node_modules/
|
||||
package.json
|
||||
src/
|
||||
App.css
|
||||
App.js
|
||||
index.css
|
||||
index.js
|
||||
logo.svg
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
### No Lock-In
|
||||
|
||||
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!
|
||||
|
||||
“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.
|
||||
|
||||
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.
|
||||
|
||||
## Try It Out!
|
||||
|
||||
You can find [**Create React App**](https://github.com/facebookincubator/create-react-app) with additional instructions on GitHub.
|
||||
|
||||
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.
|
||||
|
||||
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).
|
||||
|
||||
## The Backstory
|
||||
|
||||
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.
|
||||
|
||||
Eric Clemmons called this phenomenon the “[JavaScript Fatigue](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4)”:
|
||||
|
||||
>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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
<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>
|
||||
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
## Could We Fix This?
|
||||
|
||||
We found ourselves in an unusual dilemma.
|
||||
|
||||
So far, [our strategy](/react/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.
|
||||
|
||||
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!
|
||||
|
||||
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.
|
||||
|
||||
## The Quest for a React <abbr title="Command Line Interface">CLI</abbr>
|
||||
|
||||
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).
|
||||
|
||||
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):
|
||||
|
||||
>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?”
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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)
|
||||
|
||||
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.
|
||||
@@ -2,6 +2,7 @@
|
||||
id: acknowledgements
|
||||
title: Acknowledgements
|
||||
layout: single
|
||||
permalink: acknowledgements.html
|
||||
---
|
||||
|
||||
We'd like to thank all of our contributors:
|
||||
@@ -16,4 +17,8 @@ We'd like to thank all of our contributors:
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
In addition, we're grateful to [Jeff Barczewski](https://github.com/jeffbski) for allowing us to use the [react](https://www.npmjs.com/package/react) package name on npm and to [Christopher Aue](http://christopheraue.net/) for letting us use the [reactjs.com](http://reactjs.com/) domain name and the [@reactjs](https://twitter.com/reactjs) username on Twitter. We'd also like to thank [ProjectMoon](https://github.com/ProjectMoon) for letting us use the [flux](https://www.npmjs.com/package/flux) package name on npm.
|
||||
In addition, we're grateful to
|
||||
- [Jeff Barczewski](https://github.com/jeffbski) for allowing us to use the [react](https://www.npmjs.com/package/react) package name on npm.
|
||||
- [Christopher Aue](http://christopheraue.net/) for letting us use the [reactjs.com](http://reactjs.com/) domain name and the [@reactjs](https://twitter.com/reactjs) username on Twitter.
|
||||
- [ProjectMoon](https://github.com/ProjectMoon) for letting us use the [flux](https://www.npmjs.com/package/flux) package name on npm.
|
||||
- Shane Anderson for allowing us to use the [react](https://github.com/react) org on GitHub.
|
||||
|
||||
@@ -9,7 +9,12 @@ id: all-posts
|
||||
<div class="inner-content">
|
||||
<h1>All Posts</h1>
|
||||
{% for page in site.posts %}
|
||||
<p><strong><a href="/react{{ page.url }}">{{ page.title }}</a></strong> on {{ page.date | date: "%B %e, %Y" }} by {{ page.author.name }}</p>
|
||||
<p><strong><a href="/react{{ page.url }}">{{ page.title }}</a></strong> on {{ page.date | date: "%B %e, %Y" }} by
|
||||
{% for author in page.authors %}
|
||||
{{ author.name }}
|
||||
{% if forloop.last == false %} and {% endif %}
|
||||
{% endfor %}
|
||||
</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
162
docs/contributing/design-principles.md
Normal file
162
docs/contributing/design-principles.md
Normal file
@@ -0,0 +1,162 @@
|
||||
---
|
||||
id: design-principles
|
||||
title: Design Principles
|
||||
layout: contributing
|
||||
permalink: contributing/design-principles.html
|
||||
---
|
||||
|
||||
After using React in a couple of applications, you might be interested in contributing to React. Before [diving into specifics](https://github.com/facebook/react/blob/master/CONTRIBUTING.md), we think it's important to establish a few design principles guiding our decisions about changes in React.
|
||||
|
||||
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.
|
||||
|
||||
>**Note:**
|
||||
>
|
||||
>This document assumes a strong understanding of React. It describes the design principles of *React itself*, not React components or applications.
|
||||
>
|
||||
>For an introduction to React, check out [Thinking in React](/react/docs/thinking-in-react.html) instead.
|
||||
|
||||
### Composition
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
There is nothing "bad" about using state or lifecycle hooks in components. Like any powerful features, 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.
|
||||
|
||||
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.
|
||||
|
||||
### Common Abstraction
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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%3Aopen+is%3Aissue+label%3A%22big+picture%22) label on the React issue tracker.
|
||||
|
||||
### Escape Hatches
|
||||
|
||||
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.
|
||||
|
||||
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](/react/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](/react/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](/react/docs/context.html) as long as it is possible to get rid of it later and it leaves the door open for future improvements.
|
||||
|
||||
### Stability
|
||||
|
||||
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.
|
||||
|
||||
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."
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
For example, we added a [warning about unknown DOM props](/react/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.
|
||||
|
||||
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](/react/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.
|
||||
|
||||
You can find the codemods that we released in the [react-codemod](https://github.com/reactjs/react-codemod) repository.
|
||||
|
||||
### Interoperability
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
### Scheduling
|
||||
|
||||
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](/react/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.
|
||||
|
||||
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).
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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".
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
There is an internal joke in the team that React should have been called "Schedule" because React does not want to be fully "reactive".
|
||||
|
||||
### Developer Experience
|
||||
|
||||
Providing a good developer experience is important to us.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
### Debugging
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
### Configuration
|
||||
|
||||
We find global runtime configuration options to be problematic.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
### Beyond the DOM
|
||||
|
||||
We see the value of React in the way it allows us to write components that have less 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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
### Implementation
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
### Optimized for Tooling
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
[JSX](/react/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.
|
||||
|
||||
In our codebase, JSX provides an unambigious 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.
|
||||
|
||||
### Dogfooding
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
|
||||
This doesn't mean that we ignore the issues raised by the community. For example, we added support for [web components](/react/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](/react/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.
|
||||
|
||||
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.
|
||||
|
||||
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.
|
||||
@@ -5,7 +5,7 @@
|
||||
font-family: monospace;
|
||||
}
|
||||
.CodeMirror-scroll {
|
||||
/* Set scrolling behaviour here */
|
||||
/* Set scrolling behavior here */
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
padding: 0 14px; /* Horizontal padding of content */
|
||||
}
|
||||
|
||||
.CodeMirror-scrollbar-filler {
|
||||
.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
|
||||
background-color: white; /* The little square between H and V scrollbars */
|
||||
}
|
||||
|
||||
@@ -27,6 +27,7 @@
|
||||
.CodeMirror-gutters {
|
||||
border-right: 1px solid #ddd;
|
||||
background-color: #f7f7f7;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.CodeMirror-linenumbers {}
|
||||
.CodeMirror-linenumber {
|
||||
@@ -34,68 +35,110 @@
|
||||
min-width: 20px;
|
||||
text-align: right;
|
||||
color: #999;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.CodeMirror-guttermarker { color: black; }
|
||||
.CodeMirror-guttermarker-subtle { color: #999; }
|
||||
|
||||
/* CURSOR */
|
||||
|
||||
.CodeMirror div.CodeMirror-cursor {
|
||||
.CodeMirror-cursor {
|
||||
border-left: 1px solid black;
|
||||
border-right: none;
|
||||
width: 0;
|
||||
}
|
||||
/* Shown when moving in bi-directional text */
|
||||
.CodeMirror div.CodeMirror-secondarycursor {
|
||||
border-left: 1px solid silver;
|
||||
}
|
||||
.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor {
|
||||
.cm-fat-cursor .CodeMirror-cursor {
|
||||
width: auto;
|
||||
border: 0 !important;
|
||||
background: #7e7;
|
||||
}
|
||||
.cm-fat-cursor div.CodeMirror-cursors {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cm-animate-fat-cursor {
|
||||
width: auto;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
background: rgba(0, 200, 0, .4);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#6600c800, endColorstr=#4c00c800);
|
||||
-webkit-animation: blink 1.06s steps(1) infinite;
|
||||
-moz-animation: blink 1.06s steps(1) infinite;
|
||||
animation: blink 1.06s steps(1) infinite;
|
||||
background-color: #7e7;
|
||||
}
|
||||
/* Kludge to turn off filter in ie9+, which also accepts rgba */
|
||||
.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor:not(#nonsense_id) {
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
|
||||
@-moz-keyframes blink {
|
||||
0% {}
|
||||
50% { background-color: transparent; }
|
||||
100% {}
|
||||
}
|
||||
@-webkit-keyframes blink {
|
||||
0% {}
|
||||
50% { background-color: transparent; }
|
||||
100% {}
|
||||
}
|
||||
@keyframes blink {
|
||||
0% {}
|
||||
50% { background-color: transparent; }
|
||||
100% {}
|
||||
}
|
||||
|
||||
/* Can style cursor different in overwrite (non-insert) mode */
|
||||
.CodeMirror div.CodeMirror-cursor.CodeMirror-overwrite {}
|
||||
.CodeMirror-overwrite .CodeMirror-cursor {}
|
||||
|
||||
.cm-tab { display: inline-block; text-decoration: inherit; }
|
||||
|
||||
.CodeMirror-ruler {
|
||||
border-left: 1px solid #ccc;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* DEFAULT THEME */
|
||||
|
||||
.cm-s-default .cm-header {color: blue;}
|
||||
.cm-s-default .cm-quote {color: #090;}
|
||||
.cm-negative {color: #d44;}
|
||||
.cm-positive {color: #292;}
|
||||
.cm-header, .cm-strong {font-weight: bold;}
|
||||
.cm-em {font-style: italic;}
|
||||
.cm-link {text-decoration: underline;}
|
||||
.cm-strikethrough {text-decoration: line-through;}
|
||||
|
||||
.cm-s-default .cm-keyword {color: #708;}
|
||||
.cm-s-default .cm-atom {color: #219;}
|
||||
.cm-s-default .cm-number {color: #164;}
|
||||
.cm-s-default .cm-def {color: #00f;}
|
||||
.cm-s-default .cm-variable {color: black;}
|
||||
.cm-s-default .cm-variable,
|
||||
.cm-s-default .cm-punctuation,
|
||||
.cm-s-default .cm-property,
|
||||
.cm-s-default .cm-operator {}
|
||||
.cm-s-default .cm-variable-2 {color: #05a;}
|
||||
.cm-s-default .cm-variable-3 {color: #085;}
|
||||
.cm-s-default .cm-property {color: black;}
|
||||
.cm-s-default .cm-operator {color: black;}
|
||||
.cm-s-default .cm-comment {color: #a50;}
|
||||
.cm-s-default .cm-string {color: #a11;}
|
||||
.cm-s-default .cm-string-2 {color: #f50;}
|
||||
.cm-s-default .cm-meta {color: #555;}
|
||||
.cm-s-default .cm-error {color: #f00;}
|
||||
.cm-s-default .cm-qualifier {color: #555;}
|
||||
.cm-s-default .cm-builtin {color: #30a;}
|
||||
.cm-s-default .cm-bracket {color: #997;}
|
||||
.cm-s-default .cm-tag {color: #170;}
|
||||
.cm-s-default .cm-attribute {color: #00c;}
|
||||
.cm-s-default .cm-header {color: blue;}
|
||||
.cm-s-default .cm-quote {color: #090;}
|
||||
.cm-s-default .cm-hr {color: #999;}
|
||||
.cm-s-default .cm-link {color: #00c;}
|
||||
|
||||
.cm-negative {color: #d44;}
|
||||
.cm-positive {color: #292;}
|
||||
.cm-header, .cm-strong {font-weight: bold;}
|
||||
.cm-em {font-style: italic;}
|
||||
.cm-emstrong {font-style: italic; font-weight: bold;}
|
||||
.cm-link {text-decoration: underline;}
|
||||
|
||||
.cm-s-default .cm-error {color: #f00;}
|
||||
.cm-invalidchar {color: #f00;}
|
||||
|
||||
.CodeMirror-composing { border-bottom: 2px solid; }
|
||||
|
||||
/* Default styles for common addons */
|
||||
|
||||
div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
|
||||
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
|
||||
.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
|
||||
.CodeMirror-activeline-background {background: #e8f2ff;}
|
||||
|
||||
/* STOP */
|
||||
|
||||
@@ -103,28 +146,30 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
|
||||
the editor. You probably shouldn't touch them. */
|
||||
|
||||
.CodeMirror {
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.CodeMirror-scroll {
|
||||
overflow: scroll !important; /* Things will break if this is overridden */
|
||||
/* 30px is the magic margin used to hide the element's real scrollbars */
|
||||
/* See overflow: hidden in .CodeMirror, and the paddings in .CodeMirror-sizer */
|
||||
/* See overflow: hidden in .CodeMirror */
|
||||
margin-bottom: -30px; margin-right: -30px;
|
||||
padding-bottom: 30px; padding-right: 30px;
|
||||
padding-bottom: 30px;
|
||||
height: 100%;
|
||||
outline: none; /* Prevent dragging from highlighting the element */
|
||||
position: relative;
|
||||
}
|
||||
.CodeMirror-sizer {
|
||||
position: relative;
|
||||
border-right: 30px solid transparent;
|
||||
}
|
||||
|
||||
/* The fake, visible scrollbars. Used to force redraw during scrolling
|
||||
before actuall scrolling happens, thus preventing shaking and
|
||||
before actual scrolling happens, thus preventing shaking and
|
||||
flickering artifacts. */
|
||||
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler {
|
||||
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
|
||||
position: absolute;
|
||||
z-index: 6;
|
||||
display: none;
|
||||
@@ -141,33 +186,55 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
|
||||
}
|
||||
.CodeMirror-scrollbar-filler {
|
||||
right: 0; bottom: 0;
|
||||
z-index: 6;
|
||||
}
|
||||
.CodeMirror-gutter-filler {
|
||||
left: 0; bottom: 0;
|
||||
}
|
||||
|
||||
.CodeMirror-gutters {
|
||||
position: absolute; left: 0; top: 0;
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
z-index: 3;
|
||||
}
|
||||
.CodeMirror-gutter {
|
||||
white-space: normal;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-bottom: -30px;
|
||||
/* Hack to make IE7 behave */
|
||||
*zoom:1;
|
||||
*display:inline;
|
||||
}
|
||||
.CodeMirror-gutter-wrapper {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
.CodeMirror-gutter-background {
|
||||
position: absolute;
|
||||
top: 0; bottom: 0;
|
||||
z-index: 4;
|
||||
}
|
||||
.CodeMirror-gutter-elt {
|
||||
position: absolute;
|
||||
cursor: default;
|
||||
z-index: 4;
|
||||
}
|
||||
.CodeMirror-gutter-wrapper {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.CodeMirror-lines {
|
||||
cursor: text;
|
||||
min-height: 1px; /* prevents collapsing before first draw */
|
||||
}
|
||||
.CodeMirror pre {
|
||||
/* Reset some styles that the rest of the page might have set */
|
||||
-moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; border-radius: 0;
|
||||
-moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
|
||||
border-width: 0;
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
@@ -180,12 +247,16 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-font-variant-ligatures: none;
|
||||
font-variant-ligatures: none;
|
||||
}
|
||||
.CodeMirror-wrap pre {
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.CodeMirror-linebackground {
|
||||
position: absolute;
|
||||
left: 0; right: 0; top: 0; bottom: 0;
|
||||
@@ -198,30 +269,51 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.CodeMirror-wrap .CodeMirror-scroll {
|
||||
overflow-x: hidden;
|
||||
.CodeMirror-widget {}
|
||||
|
||||
.CodeMirror-code {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Force content-box sizing for the elements where we expect it */
|
||||
.CodeMirror-scroll,
|
||||
.CodeMirror-sizer,
|
||||
.CodeMirror-gutter,
|
||||
.CodeMirror-gutters,
|
||||
.CodeMirror-linenumber {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.CodeMirror-measure {
|
||||
position: absolute;
|
||||
width: 100%; height: 0px;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.CodeMirror-cursor { position: absolute; }
|
||||
.CodeMirror-measure pre { position: static; }
|
||||
|
||||
.CodeMirror div.CodeMirror-cursor {
|
||||
position: absolute;
|
||||
div.CodeMirror-cursors {
|
||||
visibility: hidden;
|
||||
border-right: none;
|
||||
width: 0;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
.CodeMirror-focused div.CodeMirror-cursor {
|
||||
div.CodeMirror-dragcursors {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.CodeMirror-focused div.CodeMirror-cursors {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.CodeMirror-selected { background: #d9d9d9; }
|
||||
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
|
||||
.CodeMirror-crosshair { cursor: crosshair; }
|
||||
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
|
||||
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
|
||||
|
||||
.cm-searching {
|
||||
background: #ffa;
|
||||
@@ -231,9 +323,18 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
|
||||
/* IE7 hack to prevent it from returning funny offsetTops on the spans */
|
||||
.CodeMirror span { *vertical-align: text-bottom; }
|
||||
|
||||
/* Used to force a border model for a node */
|
||||
.cm-force-border { padding-right: .1px; }
|
||||
|
||||
@media print {
|
||||
/* Hide the cursor when printing */
|
||||
.CodeMirror div.CodeMirror-cursor {
|
||||
.CodeMirror div.CodeMirror-cursors {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/* See issue #2901 */
|
||||
.cm-tab-wrap-hack:after { content: ''; }
|
||||
|
||||
/* Help users use markselection to safely style text background */
|
||||
span.CodeMirror-selectedtext { background: none; }
|
||||
|
||||
@@ -129,7 +129,7 @@ h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
li > a {
|
||||
box-sizing: content-box;
|
||||
padding: 0 10px;
|
||||
line-height: $navHeight;
|
||||
@@ -260,6 +260,22 @@ h1, h2, h3, h4, h5, h6 {
|
||||
&.active {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
&.external {
|
||||
&:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
padding-left: 5px;
|
||||
@include retina-image('../img/external', 10px 10px);
|
||||
background-position: 100% 0;
|
||||
background-repeat: no-repeat;
|
||||
font-size: 10px;
|
||||
line-height: 1em;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-docs-section {
|
||||
@@ -324,8 +340,8 @@ h1, h2, h3, h4, h5, h6 {
|
||||
h3 {
|
||||
color: $darkColor;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
p {
|
||||
font-size: 16px;
|
||||
@@ -390,6 +406,39 @@ h1, h2, h3, h4, h5, h6 {
|
||||
@include clearfix;
|
||||
}
|
||||
|
||||
/* JSX Compiler */
|
||||
|
||||
.jsxCompiler {
|
||||
margin: 0 auto;
|
||||
padding-top: 20px;
|
||||
width: 1220px;
|
||||
|
||||
label.compiler-option {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#jsxCompiler {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.playgroundPreview {
|
||||
padding: 0;
|
||||
width: 600px;
|
||||
word-wrap: break-word;
|
||||
|
||||
pre {
|
||||
@include code-typography;
|
||||
}
|
||||
}
|
||||
|
||||
.playgroundError {
|
||||
// The compiler view kills padding in order to render the CodeMirror code
|
||||
// more nicely. For the error view, put a padding back
|
||||
padding: 15px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.docs-prev {
|
||||
float: left;
|
||||
}
|
||||
@@ -710,6 +759,8 @@ p a code {
|
||||
margin-bottom: 0;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
float: left;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.highlight pre code {
|
||||
@@ -805,3 +856,72 @@ div[data-twttr-id] iframe {
|
||||
.three-column > ul:first-child {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
|
||||
/* Algolia Doc Search */
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
#algolia-doc-search {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
input#algolia-doc-search {
|
||||
background: transparent url('/react/img/search.png') no-repeat 10px center;
|
||||
background-size: 16px 16px;
|
||||
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
margin-left: 10px;
|
||||
padding: 0 10px;
|
||||
padding-left: 35px;
|
||||
height: 30px;
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
background-color: #333;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
outline: none;
|
||||
width: 170px;
|
||||
|
||||
transition: width .2s ease;
|
||||
}
|
||||
|
||||
input#algolia-doc-search:focus {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.algolia-autocomplete .aa-dropdown-menu {
|
||||
margin-left: -110px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.algolia-autocomplete {
|
||||
vertical-align: top;
|
||||
height: 53px;
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion {
|
||||
border-bottom-color: #c05b4d;
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--category-header {
|
||||
background-color: #cc7a6f;
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--highlight {
|
||||
color: #c05b4d;
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight {
|
||||
background-color: #c05b4d;
|
||||
}
|
||||
|
||||
.aa-cursor .algolia-docsearch-suggestion--content {
|
||||
color: #c05b4d;
|
||||
}
|
||||
|
||||
.aa-cursor .algolia-docsearch-suggestion {
|
||||
background: #f1f3f5;
|
||||
}
|
||||
|
||||
28
docs/docs/01-why-react.de-DE.md
Normal file
28
docs/docs/01-why-react.de-DE.md
Normal file
@@ -0,0 +1,28 @@
|
||||
---
|
||||
id: why-react-de-DE
|
||||
title: Warum React?
|
||||
permalink: docs/why-react-de-DE.html
|
||||
---
|
||||
React ist eine JavaScript-Bibliothek von Facebook und Instagram für Benutzeroberflächen. Man kann sich React als das **V** in **[MVC](https://de.wikipedia.org/wiki/Model_View_Controller)** vorstellen.
|
||||
|
||||
Wir haben React für folgende Aufgabe entwickelt: **umfangreiche Anwendungen zu bauen, deren Daten sich zeitlich ändern**.
|
||||
|
||||
## Einfach
|
||||
|
||||
Beschreibe, wie sich Deine App zu jedem gewünschten Zeitpunkt präsentieren soll und React kümmert sich um alle Benutzeroberflächen-Änderungen sobald sich die zugrundeliegenden Daten ändern.
|
||||
|
||||
## Deklarativ
|
||||
|
||||
Bei Datenveränderungen drückt React bildlich die "Aktualisieren"-Taste und versteht sich darauf, nur die veränderten Elemente zu erneuern.
|
||||
|
||||
## Baue zusammensetzbare Komponenten
|
||||
|
||||
React unterstützt die Entwicklung wiederverwendbarer Komponenten. Tatsächlich machst Du in React nichts anderes, als Komponenten zu bauen. Dank ihrer Kapselung erleichtern Komponenten die Wiederverwendung und das Testen von Code sowie die Trennung der Belange.
|
||||
|
||||
## Gib' ihnen fünf Minuten
|
||||
|
||||
React hinterfragt eine ganze Reihe konventioneller Standpunkte. Auf den ersten Blick mögen einige Ideen verrückt klingen. [Gib' ihnen fünf Minuten](https://signalvnoise.com/posts/3124-give-it-five-minutes) während Du diese Anleitung liest; diese verrückten Ideen halfen dabei, tausende von Komponenten innerhalb und außerhalb von Facebook und Instagram zu entwickeln.
|
||||
|
||||
## Erfahre mehr
|
||||
|
||||
Erfahre mehr über unsere Motivation zur Entwicklung von React in [diesem Blogeintrag](/react/blog/2013/06/05/why-react.html).
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
id: why-react-it-IT
|
||||
title: Perché React?
|
||||
permalink: why-react-it-IT.html
|
||||
permalink: docs/why-react-it-IT.html
|
||||
next: displaying-data-it-IT.html
|
||||
---
|
||||
React è una libreria JavaScript per creare interfacce utente scritta da Facebook e Instagram. A molti piace pensare a React come alla **V** di **[MVC](https://it.wikipedia.org/wiki/Model-View-Controller)**.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
id: why-react-ja-JP
|
||||
title: なぜReactを使うのでしょうか?
|
||||
permalink: why-react-ja-JP.html
|
||||
permalink: docs/why-react-ja-JP.html
|
||||
next: displaying-data-ja-JP.html
|
||||
|
||||
---
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
id: why-react-ko-KR
|
||||
title: 왜 React인가?
|
||||
permalink: why-react-ko-KR.html
|
||||
permalink: docs/why-react-ko-KR.html
|
||||
next: displaying-data-ko-KR.html
|
||||
---
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
id: why-react
|
||||
title: Why React?
|
||||
permalink: why-react.html
|
||||
permalink: docs/why-react.html
|
||||
next: displaying-data.html
|
||||
---
|
||||
React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the **V** in **[MVC](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)**.
|
||||
|
||||
29
docs/docs/01-why-react.ru-RU.md
Normal file
29
docs/docs/01-why-react.ru-RU.md
Normal file
@@ -0,0 +1,29 @@
|
||||
---
|
||||
id: why-react-ru-RU
|
||||
title: Почему именно React?
|
||||
permalink: docs/why-react-ru-RU.html
|
||||
next: displaying-data-ru-RU.html
|
||||
---
|
||||
React — библиотека JavaScript для создания интерфейсов от команд Facebook и Instagram. Многие ассоциируют React с понятием **View** в паттерне **[MVC](https://ru.wikipedia.org/wiki/Model-View-Controller)**.
|
||||
|
||||
Мы делали React, чтобы решить одну важную задачу: **создавать действительно большие приложения с постоянно меняющимися данными**.
|
||||
|
||||
## Простота
|
||||
|
||||
С React вы всегда точно знаете как будет выглядеть ваше приложение, ведь как только изменятся данные, он мгновенно отобразит эти изменения в интерфейсе.
|
||||
|
||||
## Декларативность
|
||||
|
||||
Как только состояние приложения изменится, React будто нажимает кнопку "обновить" и точно знает, какие части интерфейса надо поменять, а какие нет. Никаких дополнительных инструкций и команд, React сам отслеживает изменения данных и реагирует на них.
|
||||
|
||||
## Создание компонентов, как строительных блоков приложения
|
||||
|
||||
По сути, разработка на React целиком состоит в создании таких компонентов. С React вы *только* тем и занимаетесь, что пишете новые компоненты, те самые строительные блоки, из которых будет строиться приложение. А поскольку они хорошо инскапсулированы, их удобно использовать повторно даже в других проектах, плюс такой код проще тестировать.
|
||||
|
||||
## Уделите этому 5 минут
|
||||
|
||||
React бросает вызов многим устоявшимся идеям и правилам, и на первый взгляд, некоторые из его идей выглядят по меньшей мере странными. [Уделите этому 5 минут](https://signalvnoise.com/posts/3124-give-it-five-minutes) пока читаете эту статью; эти безумные идеи нашли свое применение при создании тысяч компонентов не только для Facebook и Instagram, но и в других крупных проектах.
|
||||
|
||||
## Узнай больше
|
||||
|
||||
Вы можете больше узнать о причинах создания React [отсюда](/react/blog/2013/06/05/why-react.html).
|
||||
@@ -1,17 +1,16 @@
|
||||
---
|
||||
id: why-react-zh-CN
|
||||
title: 为什么使用 React?
|
||||
permalink: why-react-zh-CN.html
|
||||
permalink: docs/why-react-zh-CN.html
|
||||
next: displaying-data-zh-CN.html
|
||||
---
|
||||
|
||||
React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很人多认为 React 是 **[MVC](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)** 中的 **V**(视图)。
|
||||
React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很多人选择将 React 认为是 **[MVC](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)** 中的 **V**(视图)。
|
||||
|
||||
我们创造 React 是为了解决一个问题:**构建随着时间数据不断变化的大规模应用程序**。
|
||||
|
||||
### 简单
|
||||
|
||||
仅仅只要表达出你的应用程序在任一个时间点应该长的样子,然后当底层的数据变了,React 会自动处理所有用户界面的更新。
|
||||
仅仅只要表达出你的应用程序在任一个时间点应该呈现的样子,然后当底层的数据变了,React 会自动处理所有用户界面的更新。
|
||||
|
||||
### 声明式 (Declarative)
|
||||
|
||||
@@ -28,5 +27,3 @@ React挑战了很多传统的知识,第一眼看上去可能很多想法有点
|
||||
## 了解更多
|
||||
|
||||
你可以从这篇[博客](/react/blog/2013/06/05/why-react.html)了解更多我们创造 React 的动机。
|
||||
|
||||
|
||||
|
||||
29
docs/docs/01-why-react.zh-TW.md
Normal file
29
docs/docs/01-why-react.zh-TW.md
Normal file
@@ -0,0 +1,29 @@
|
||||
---
|
||||
id: why-react-zh-TW
|
||||
title: Why React?
|
||||
permalink: docs/why-react-zh-TW.html
|
||||
next: displaying-data.html
|
||||
---
|
||||
React是Facebook和Instagram用來建立使用者介面的JavaScript函式庫. 很多人認為React就是處理 **[MVC](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller)**架構中 **V** 的部份.
|
||||
|
||||
我們建造React用來解決一個問題: **開發資料能隨時間頻繁更新的大型應用程式**.
|
||||
|
||||
## 簡單(Simple)
|
||||
|
||||
簡單意味著你所開發的應用程式外觀任何一部分都要能即時呈現, 並且當資料有所變動時React能自動管理所有UI的更新.
|
||||
|
||||
## 陳述(Declarative)
|
||||
|
||||
當資料改變時, React概念上就像是點擊了 "刷新" 的按鈕, 並且知道只需更新有改變的部份.
|
||||
|
||||
## 建立可組合的元件(Composable Components)
|
||||
|
||||
React就是在建造可重用的元件(Components). 事實上, 當你使用React時 *唯一* 在做的事就是建立元件(Components). 由於它們封裝性高,元件使得程式碼能夠易於重複使用, 測試, 並且容易做到讓關注點分離(separation of concerns easy).
|
||||
|
||||
## 指引(Give It Five Minutes)
|
||||
|
||||
React挑戰了許多傳統的觀念, 第一次乍看之下這些構想可能看起來有點瘋狂. [Give it five minutes](https://signalvnoise.com/posts/3124-give-it-five-minutes) 而當閱讀完這篇指引; 這些瘋狂的構想在Facebook和Instagram裡裡外外建立了數以千計的元件(components)之後被證明是可實行的.
|
||||
|
||||
## 更多學習資源
|
||||
|
||||
從這裡你能學習到更多建造React背後的動機 [this blog post](/react/blog/2013/06/05/why-react.html).
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
id: displaying-data-it-IT
|
||||
title: Visualizzare Dati
|
||||
permalink: displaying-data-it-IT.html
|
||||
permalink: docs/displaying-data-it-IT.html
|
||||
prev: why-react-it-IT.html
|
||||
next: jsx-in-depth-it-IT.html
|
||||
---
|
||||
@@ -20,7 +20,7 @@ Diamo un'occhiata ad un esempio davvero semplice. Creiamo un file dal nome `hell
|
||||
<meta charset="UTF-8" />
|
||||
<title>Hello React</title>
|
||||
<script src="https://fb.me/react-{{site.react_version}}.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="example"></div>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
id: displaying-data-ja-JP
|
||||
title: データを表示する
|
||||
permalink: displaying-data-ja-JP.html
|
||||
permalink: docs/displaying-data-ja-JP.html
|
||||
prev: why-react-ja-JP.html
|
||||
next: jsx-in-depth-ja-JP.html
|
||||
|
||||
@@ -20,7 +20,7 @@ UIについて、最も基本的なことは、いくつかのデータを表示
|
||||
<meta charset="UTF-8" />
|
||||
<title>Hello React</title>
|
||||
<script src="https://fb.me/react-{{site.react_version}}.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="example"></div>
|
||||
@@ -62,7 +62,7 @@ setInterval(function() {
|
||||
|
||||
このことについて私たちが理解できる方法は、Reactは必要になるまで、DOMの操作を行わないということです。 **Reactは、DOMの変化を表現し、あなたにもっとも効率的なDOMの変化を見積もるために早い、内部のモックのDOMを使っています。**
|
||||
|
||||
このコンポーネントのインプットは `props` と呼ばれるものです。"properties" の省略形です。それらはJSXシンタックスの中でアトリビュートとして渡されます。それらはコンポーネントの中で不変と考えるべきで、 **`this.props` と書かないようにしてください**
|
||||
このコンポーネントのインプットは `props` と呼ばれるものです。"properties" の省略形です。それらはJSXシンタックスの中でアトリビュートとして渡されます。それらはコンポーネントの中で不変と考えるべきで、 **`this.props` には書き込まないようにしてください**
|
||||
|
||||
## コンポーネントは関数のようなものです。
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
id: displaying-data-ko-KR
|
||||
title: 데이터를 표시하기
|
||||
permalink: displaying-data-ko-KR.html
|
||||
permalink: docs/displaying-data-ko-KR.html
|
||||
prev: why-react-ko-KR.html
|
||||
next: jsx-in-depth-ko-KR.html
|
||||
---
|
||||
@@ -19,7 +19,8 @@ UI를 가지고 할 수 있는 가장 기초적인 것은 데이터를 표시하
|
||||
<meta charset="UTF-8" />
|
||||
<title>Hello React</title>
|
||||
<script src="https://fb.me/react-{{site.react_version}}.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
|
||||
<script src="https://fb.me/react-dom-{{site.react_version}}.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="example"></div>
|
||||
@@ -54,7 +55,6 @@ setInterval(function() {
|
||||
}, 500);
|
||||
```
|
||||
|
||||
|
||||
## 반응 적(Reactive) 업데이트
|
||||
|
||||
`hello-react.html` 파일을 웹 브라우저에서 열어 당신의 이름을 텍스트 필드에 써 보세요. React는 단지 시간을 표시하는 부분만을 바꿉니다 — 텍스트 필드 안에 입력한 것은 그대로 남아 있구요, 당신이 이 동작을 관리하는 그 어떤 코드도 쓰지 않았음에도 불구하고 말이죠. React는 그걸 올바른 방법으로 알아서 해줍니다.
|
||||
@@ -63,7 +63,6 @@ setInterval(function() {
|
||||
|
||||
이 컴포넌트에 대한 입력은 `props` 라고 불립니다 — "properties" 를 줄인 것이죠. 그들은 JSX 문법에서는 어트리뷰트로서 전달됩니다. 당신은 `props` 를 컴포넌트 안에서 불변의(immutable) 엘리먼트로서 생각해야 하고, `this.props` 를 덮어씌우려고 해서는 안됩니다.
|
||||
|
||||
|
||||
## 컴포넌트들은 함수와 같습니다
|
||||
|
||||
React 컴포넌트들은 매우 단순합니다. 당신은 그것들을 `props` 와 `state` (이것들은 나중에 언급할 것입니다) 를 받고 HTML을 렌더링하는 단순한 함수들로 생각해도 됩니다. 이걸 염두하면, 컴포넌트의 작동을 이해하는 것도 쉽습니다.
|
||||
@@ -72,7 +71,6 @@ React 컴포넌트들은 매우 단순합니다. 당신은 그것들을 `props`
|
||||
>
|
||||
> **한가지 제약이 있습니다**: React 컴포넌트들은 단 하나의 루트 노드(root node)만을 렌더할 수 있습니다. 만약 여러개의 노드들을 리턴하고 싶다면, 그것들은 단 하나의 루트 노드로 싸여져 있어야만 합니다.
|
||||
|
||||
|
||||
## JSX 문법
|
||||
|
||||
우리는 컴포넌트를 사용하는 것이 "템플릿"과 "디스플레이 로직(display logic)"을 이용하는 것보다 관심을 분리(separate concerns)하는 데에 올바른 방법이라고 강하게 믿고 있습니다. 우리는 마크업과 그것을 만들어내는 코드는 친밀하게 함께 결합되어있다고 생각합니다. 또한, 디스플레이 로직은 종종 매우 복잡하고, 그것을 템플릿 언어를 이용해 표현하는 것은 점점 사용하기 어렵게 됩니다.
|
||||
@@ -91,12 +89,11 @@ JSX를 이용하면:
|
||||
|
||||
우리는 이것이 React 앱들을 만들기 쉽게 하고, 디자이너들이 이 문법을 더 선호하는 것을 발견했습니다, 하지만 모든 사람은 그들만의 선호하는 워크플로우가 있기 마련이므로, **JSX는 React를 사용하기 위해 필수적이지는 않습니다.**
|
||||
|
||||
JSX는 매우 작은 언어입니다. 그것을 배우고 싶다면, [JSX 깊게 살펴보기](/react/docs/jsx-in-depth-ko-KR.html). 를 살펴 보시기 바랍니다. 또는, [우리의 온라인 JSX 컴파일러](/react/jsx-compiler.html)를 통해 문법이 변환되는 것을 살펴 보시기 바랍니다.
|
||||
JSX는 매우 작은 언어입니다. 그것을 배우고 싶다면, [JSX 깊게 살펴보기](/react/docs/jsx-in-depth-ko-KR.html)를 살펴 보시기 바랍니다. 또는, [바벨 REPL](https://babeljs.io/repl/)를 통해 문법이 변환되는 것을 살펴 보시기 바랍니다.
|
||||
|
||||
JSX는 HTML과 비슷하지만, 완전히 똑같지는 않습니다. [JSX의 실수하기 쉬운 부분들](/react/docs/jsx-gotchas-ko-KR.html)에 중요한 차이점들에 대해 설명되어 있습니다.
|
||||
|
||||
JSX를 사용하기 시작하기 위한 가장 쉬운 방법은 브라우저에서 작동하는 `JSXTransformer`를 사용하는 것입니다. 우리는 이것을 프로덕션에서는 사용하지 않기를 강하게 권장하는 바입니다. 당신은 우리의 커맨드 라인 [react-tools](https://www.npmjs.com/package/react-tools) 패키지를 이용하여 미리 컴파일(precompile)해 사용할 수 있습니다.
|
||||
|
||||
[바벨에서 JSX를 시작하는 여러 방법을 제공합니다](http://babeljs.io/docs/setup/). 여기에는 커맨드 라인 툴부터 루비 온 레일스 연동까지 다양한 방법이 있습니다. 가장 편한 툴을 사용하세요.
|
||||
|
||||
## JSX 없이 React 사용하기
|
||||
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
---
|
||||
id: displaying-data
|
||||
title: Displaying Data
|
||||
permalink: displaying-data.html
|
||||
permalink: docs/displaying-data.html
|
||||
prev: why-react.html
|
||||
next: jsx-in-depth.html
|
||||
---
|
||||
|
||||
The most basic thing you can do with a UI is display some data. React makes it easy to display data and automatically keeps the interface up-to-date when the data changes.
|
||||
|
||||
|
||||
## Getting Started
|
||||
|
||||
Let's look at a really simple example. Create a `hello-react.html` file with the following code:
|
||||
@@ -20,7 +19,8 @@ Let's look at a really simple example. Create a `hello-react.html` file with the
|
||||
<meta charset="UTF-8" />
|
||||
<title>Hello React</title>
|
||||
<script src="https://fb.me/react-{{site.react_version}}.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
|
||||
<script src="https://fb.me/react-dom-{{site.react_version}}.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="example"></div>
|
||||
@@ -55,7 +55,6 @@ setInterval(function() {
|
||||
}, 500);
|
||||
```
|
||||
|
||||
|
||||
## Reactive Updates
|
||||
|
||||
Open `hello-react.html` in a web browser and type your name into the text field. Notice that React is only changing the time string in the UI — any input you put in the text field remains, even though you haven't written any code to manage this behavior. React figures it out for you and does the right thing.
|
||||
@@ -64,7 +63,6 @@ The way we are able to figure this out is that React does not manipulate the DOM
|
||||
|
||||
The inputs to this component are called `props` — short for "properties". They're passed as attributes in JSX syntax. You should think of these as immutable within the component, that is, **never write to `this.props`**.
|
||||
|
||||
|
||||
## Components are Just Like Functions
|
||||
|
||||
React components are very simple. You can think of them as simple functions that take in `props` and `state` (discussed later) and render HTML. With this in mind, components are easy to reason about.
|
||||
@@ -73,7 +71,6 @@ React components are very simple. You can think of them as simple functions that
|
||||
>
|
||||
> **One limitation**: React components can only render a single root node. If you want to return multiple nodes they *must* be wrapped in a single root.
|
||||
|
||||
|
||||
## JSX Syntax
|
||||
|
||||
We strongly believe that components are the right way to separate concerns rather than "templates" and "display logic." We think that markup and the code that generates it are intimately tied together. Additionally, display logic is often very complex and using template languages to express it becomes cumbersome.
|
||||
@@ -98,7 +95,6 @@ JSX is similar to HTML, but not exactly the same. See [JSX gotchas](/react/docs/
|
||||
|
||||
[Babel exposes a number of ways to get started using JSX](http://babeljs.io/docs/setup/), ranging from command line tools to Ruby on Rails integrations. Choose the tool that works best for you.
|
||||
|
||||
|
||||
## React without JSX
|
||||
|
||||
JSX is completely optional; you don't have to use JSX with React. You can create React elements in plain JavaScript using `React.createElement`, which takes a tag name or component, a properties object, and variable number of optional child arguments.
|
||||
|
||||
124
docs/docs/02-displaying-data.ru-RU.md
Normal file
124
docs/docs/02-displaying-data.ru-RU.md
Normal file
@@ -0,0 +1,124 @@
|
||||
---
|
||||
id: displaying-data-ru-RU
|
||||
title: Отображение данных
|
||||
permalink: docs/displaying-data-ru-RU.html
|
||||
prev: why-react-ru-RU.html
|
||||
next: jsx-in-depth.html
|
||||
---
|
||||
|
||||
Главная задача интерфейса — это отображать данные. React делает это легко и обновляет интерфейс сразу, как только изменятся данные.
|
||||
|
||||
## Начало
|
||||
|
||||
Давайте рассмотрим простой пример. Создайте файл `hello-react.html` со следующим текстом:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Hello React</title>
|
||||
<script src="https://fb.me/react-{{site.react_version}}.js"></script>
|
||||
<script src="https://fb.me/react-dom-{{site.react_version}}.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="example"></div>
|
||||
<script type="text/babel">
|
||||
|
||||
// ** Ваш код будет здесь! **
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Добавим в этот шаблон немного JavaScript. Замените комментарий на следующий JSX-код:
|
||||
|
||||
```javascript
|
||||
var HelloWorld = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<p>
|
||||
Hello, <input type="text" placeholder="Your name here" />!
|
||||
It is {this.props.date.toTimeString()}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
setInterval(function() {
|
||||
ReactDOM.render(
|
||||
<HelloWorld date={new Date()} />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
}, 500);
|
||||
```
|
||||
|
||||
## Реактивные обновления
|
||||
|
||||
Откройте `hello-react.html` в браузере и введите в текстовое поле свое имя. Что происходит со страницей? Каждые полсекунды обновляется время, остальные же части страницы остаются без изменений. Обратите внимание, что мы не написали ни строчки кода, чтобы управлять этим поведением. React сам отлично понимает что надо делать и обновляет элементы на странице по мере необходимости.
|
||||
|
||||
Суть в том, что React не меняет DOM-дерево до тех пор, пока это не потребуется. **Чтобы отразить изменения, React использует быстрое внутреннее представление DOM-дерева и просчитывает как его изменить наиболее эффективно**.
|
||||
|
||||
Передаваемые в компонент данные называются `props` — сокращенно от "properties". В JSX коде они передаются как атрибуты компонента. Считайте, что компонент получает `props` только для чтения. **Никогда не перезаписывайте значения `this.props` внутри компонента.**
|
||||
|
||||
## Компоненты как функции
|
||||
|
||||
Компоненты React — довольно простые сущности. Можно считать их обыкновенными функциями, которые принимают на входе `props` и `state` (см. далее) и возвращают HTML. Если помнить об этом, то компоненты становятся простыми для понимания.
|
||||
|
||||
> Замечание:
|
||||
>
|
||||
> **Есть одно ограничение**: Компоненты React умеют возвращать только один узел. Если вам надо вернуть сразу несколько, они *должны* быть обернуты в один корневой узел.
|
||||
|
||||
## Синтаксис JSX
|
||||
|
||||
Мы убеждены, что компоненты — самый подходящий способ разделения ответственностей, гораздо более удобный чем "шаблоны" и "вынесение логики на страницу". Мы считаем, что разметка и код, который её генерирует, неотделимы друг от друга. Плюс, логика на странице часто бывает запутанной, и использование шаблонизаторов, чтобы описать её, только затрудняет работу.
|
||||
|
||||
Мы решили, что лучшим вариантом будет генерировать HTML и деревья компонентов прямо из JS кода. Так вы сможете зайдействовать всю выразительную мощь современного языка программирования для создания интерфейсов.
|
||||
|
||||
А чтобы упростить создание узлов дерева, мы ввели **опциональный** HTML-подобный синтаксис.
|
||||
|
||||
**JSX позволяет вам создавать JavaScript объекты используя синтаксис HTML**. Для генерации ссылки в React вы напишете на чистом JavaScript:
|
||||
|
||||
`React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Hello!')`
|
||||
|
||||
С JSX это станет:
|
||||
|
||||
`<a href="https://facebook.github.io/react/">Hello!</a>`
|
||||
|
||||
Мы установили, что с JSX создавать React приложения проще, и дизайнеров как правило устраивает его синтаксис. Но у разных людей разные предпочтения, поэтому стоит сказать, что **JSX необязателен при работе с React.**
|
||||
|
||||
JSX сам по себе очень прост. Чтобы узнать о нем больше, почитайте [подробно про JSX](/react/docs/jsx-in-depth.html). Или можете попробовать его в [Babel REPL](https://babeljs.io/repl/).
|
||||
|
||||
JSX похож на HTML, но но имеет существенные отличия. Почитайте про [подводные камни JSX](/react/docs/jsx-gotchas.html), чтобы понять их ключевые различия.
|
||||
|
||||
[Babel предлагает несколько способов начать работу с JSX](http://babeljs.io/docs/setup/), от консольных утилит до интеграций с Ruby on Rails. Выберите тот инструмент, который лучше всего вам подходит.
|
||||
|
||||
## React без использования JSX
|
||||
|
||||
JSX полностью опционален; вам совсем необязательно использовать его вместе с React. Вы можете создавать React-элементы на чистом JavaScript используя функцию `React.createElement`, которая принимает имя тега или компонента, объект со свойствами, и набор необязательных дочерних элементов.
|
||||
|
||||
```javascript
|
||||
var child1 = React.createElement('li', null, 'First Text Content');
|
||||
var child2 = React.createElement('li', null, 'Second Text Content');
|
||||
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
|
||||
ReactDOM.render(root, document.getElementById('example'));
|
||||
```
|
||||
|
||||
Для удобства, вы можете создать сокращенные фабричные функции, чтобы создавать React-элементы из ваших собственных компонентов.
|
||||
|
||||
```javascript
|
||||
var Factory = React.createFactory(ComponentClass);
|
||||
...
|
||||
var root = Factory({ custom: 'prop' });
|
||||
ReactDOM.render(root, document.getElementById('example'));
|
||||
```
|
||||
|
||||
А для базовых HTML тегов в React уже есть встроенные фабрики:
|
||||
|
||||
```javascript
|
||||
var root = React.DOM.ul({ className: 'my-list' },
|
||||
React.DOM.li(null, 'Text Content')
|
||||
);
|
||||
```
|
||||
@@ -1,15 +1,13 @@
|
||||
---
|
||||
id: displaying-data-zh-CN
|
||||
title: 显示数据
|
||||
layout: docs
|
||||
permalink: displaying-data-zh-CN.html
|
||||
permalink: docs/displaying-data-zh-CN.html
|
||||
prev: why-react-zh-CN.html
|
||||
next: jsx-in-depth-zh-CN.html
|
||||
---
|
||||
|
||||
用户界面能做的最基础的事就是显示一些数据。React 让显示数据变得简单,当数据变化的时候,用户界面会自动同步更新。
|
||||
|
||||
|
||||
## 开始
|
||||
|
||||
让我们看一个非常简单的例子。新建一个名为 `hello-react.html` 的文件,代码内容如下:
|
||||
@@ -21,7 +19,8 @@ next: jsx-in-depth-zh-CN.html
|
||||
<meta charset="UTF-8" />
|
||||
<title>Hello React</title>
|
||||
<script src="https://fb.me/react-{{site.react_version}}.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
|
||||
<script src="https://fb.me/react-dom-{{site.react_version}}.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="example"></div>
|
||||
@@ -56,7 +55,6 @@ setInterval(function() {
|
||||
}, 500);
|
||||
```
|
||||
|
||||
|
||||
## 被动更新 (Reactive Updates)
|
||||
|
||||
在浏览器中打开 `hello-react.html` ,在输入框输入你的名字。你会发现 React 在用户界面中只改变了时间, 任何你在输入框输入的内容一直保留着,即使你没有写任何代码来完成这个功能。React 为你解决了这个问题,做了正确的事。
|
||||
@@ -65,7 +63,6 @@ setInterval(function() {
|
||||
|
||||
对这个组件的输入称为 `props` - "properties"的缩写。得益于 JSX 语法,它们通过参数传递。你必须知道在组件里,这些属性是不可改变的,也就是说 **`this.props` 是只读的**。
|
||||
|
||||
|
||||
## 组件就像是函数
|
||||
|
||||
React 组件非常简单。你可以认为它们就是简单的函数,接受 `props` 和 `state` (后面会讨论) 作为参数,然后渲染出 HTML。正是应为它们是这么的简单,这使得它们非常容易理解。
|
||||
@@ -74,12 +71,13 @@ React 组件非常简单。你可以认为它们就是简单的函数,接受 `
|
||||
>
|
||||
> **只有一个限制**: React 组件只能渲染单个根节点。如果你想要返回多个节点,它们*必须*被包含在同一个节点里。
|
||||
|
||||
|
||||
## JSX 语法
|
||||
|
||||
我们坚信组件是正确方法去做关注分离,而不是通过“模板”和“展示逻辑”。我们认为标签和生成它的代码是紧密相连的。此外,展示逻辑通常是很复杂的,通过模板语言实现这些逻辑会产生大量代码。
|
||||
|
||||
我们得出解决这个问题最好的方案是通过 JavaScript 直接生成模板,这样你就可以用一个真正语言的所有表达能力去构建用户界面。为了使这变得更简单,我们做了一个非常简单、**可选**类似 HTML 语法 ,通过函数调用即可生成模板的编译器,称为 JSX。
|
||||
我们得出解决这个问题最好的方案是通过 JavaScript 直接生成模板,这样你就可以用一个真正语言的所有表达能力去构建用户界面。
|
||||
|
||||
为了使这变得更简单,我们做了一个非常简单、**可选**类似 HTML 语法 ,通过函数调用即可生成模板的编译器,称为 JSX。
|
||||
|
||||
**JSX 让你可以用 HTML 语法去写 JavaScript 函数调用** 为了在 React 生成一个链接,通过纯 JavaScript 你可以这么写:
|
||||
|
||||
@@ -95,16 +93,16 @@ JSX 非常小;上面“hello, world”的例子使用了 JSX 所有的特性
|
||||
|
||||
JSX 类似于 HTML,但不是完全一样。参考 [JSX 陷阱](/react/docs/jsx-gotchas-zh-CN.html) 学习关键区别。
|
||||
|
||||
最简单开始学习 JSX 的方法就是使用浏览器端的 `JSXTransformer`。我们强烈建议你不要在生产环境中使用它。你可以通过我们的命令行工具 [react-tools](https://www.npmjs.com/package/react-tools) 包来预编译你的代码。
|
||||
|
||||
[Babel 公开了一些使用 JSX 的方式],从命令行工具到 Ruby on Rails 集成。选择一个对你来说最合适的工具。
|
||||
|
||||
## 没有 JSX 的 React
|
||||
|
||||
你完全可以选择是否使用 JSX,并不是 React 必须的。你可以通过 `React.createElement` 来创建一个树。第一个参数是标签,第二个参数是一个属性对象,每三个是子节点。
|
||||
JSX完全是可选的;你无需在 React 中必须使用 JSX。你可以通过 `React.createElement` 来创建一个树。第一个参数是标签,第二个参数是一个属性对象,第三个是子节点。
|
||||
|
||||
```javascript
|
||||
var child = React.createElement('li', null, 'Text Content');
|
||||
var root = React.createElement('ul', { className: 'my-list' }, child);
|
||||
var child1 = React.createElement('li', null, 'First Text Content');
|
||||
var child2 = React.createElement('li', null, 'Second Text Content');
|
||||
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
|
||||
ReactDOM.render(root, document.getElementById('example'));
|
||||
```
|
||||
|
||||
@@ -121,6 +119,6 @@ React 已经为 HTML 标签提供内置工厂方法。
|
||||
|
||||
```javascript
|
||||
var root = React.DOM.ul({ className: 'my-list' },
|
||||
React.DOM.li(null, 'Text Content')
|
||||
);
|
||||
React.DOM.li(null, 'Text Content')
|
||||
);
|
||||
```
|
||||
|
||||
125
docs/docs/02-displaying-data.zh-TW.md
Normal file
125
docs/docs/02-displaying-data.zh-TW.md
Normal file
@@ -0,0 +1,125 @@
|
||||
---
|
||||
id: displaying-data-zh-TW
|
||||
title: Displaying Data
|
||||
permalink: displaying-data-zh-TW.html
|
||||
prev: why-react-zh-TW.html
|
||||
next: jsx-in-depth-zh-TW.html
|
||||
---
|
||||
|
||||
在使用者介面所能做最基本的事情就是呈現資料. React讓呈現資料變得更加容易並且當資料有所變動時也能自動地讓使用者介面保持呈現最新的資料.
|
||||
|
||||
## 入門(Getting Started)
|
||||
|
||||
我們從一個相當簡單的範例開始. 建立一個名為 `hello-react.html` 的檔案裡面包含下列程式碼:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Hello React</title>
|
||||
<script src="https://fb.me/react-{{site.react_version}}.js"></script>
|
||||
<script src="https://fb.me/react-dom-{{site.react_version}}.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="example"></div>
|
||||
<script type="text/babel">
|
||||
|
||||
// ** 將你的程式碼放在這裡! **
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
這份文件其他部份,我們將只會專注在JavaScript程式碼解說上,並且假設程式碼會被放置在如上述模板的註解區塊內. 用下列的JSX程式碼取代上述註解區塊:
|
||||
|
||||
```javascript
|
||||
var HelloWorld = React.createClass({
|
||||
render: function() {
|
||||
return (
|
||||
<p>
|
||||
Hello, <input type="text" placeholder="Your name here" />!
|
||||
It is {this.props.date.toTimeString()}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
setInterval(function() {
|
||||
ReactDOM.render(
|
||||
<HelloWorld date={new Date()} />,
|
||||
document.getElementById('example')
|
||||
);
|
||||
}, 500);
|
||||
```
|
||||
|
||||
## 反應性更新(Reactive Updates)
|
||||
|
||||
在一個瀏覽器上開啟檔案 `hello-react.html` 並且在文字區塊填入你的名字. 請注意React僅僅改變UI上的時間字串 — 你在文字區塊輸入的任何文字依舊存在, 即使你並沒有寫任何程式碼來管理這個行為.React可以為你分辨出這樣的行為並且做出正確的回應.
|
||||
|
||||
之所以能夠分辨出這樣的行為是因為React除非在真正有必要的情況下,否則不會對DOM做任何操作. **它使用一個快速的, 內部虛擬的DOM(internal mock DOM)來為你施行比較和計算最有效率的DOM變動(DOM mutation)**
|
||||
|
||||
輸入到元件(component)的內容我們稱為`props` — 是屬性("properties")的簡稱. 他們在JSX語法中作為傳遞屬性之用. 你應該把這些屬性當做元件中不可被改變的, 也就是說, **永遠不要對 `this.props` 做寫入的行為**.
|
||||
|
||||
## 元件就是函數(Components are Just Like Functions)
|
||||
|
||||
React元件(components)是非常簡單的. 你能把它們想成是簡單的函數帶入`props`和`state`(後面會討論這部份)並且呈送給HTML(render HTML). 在心中保持住這個想法, 就能容易理解元件(components).
|
||||
React components are very simple. You can think of them as simple functions that take in `props` and `state` (discussed later) and render HTML. With this in mind, components are easy to reason about.
|
||||
|
||||
> 注意(Note):
|
||||
>
|
||||
> **一個局限性**: React元件(components)只能呈送(render)給一個單一根節點(root node). 如果你想要回傳多個節點(multiple nodes)他們*必須*被包裹在單一根節點內.
|
||||
|
||||
## JSX語法
|
||||
|
||||
我們深信元件(components)才是分離關注點(separate concerns)的正確方法, 而並非傳統的模板("templates")和顯示邏輯("display logic")觀念. 我們認為標記(markup)和產生它的程式碼應當緊密的綁在一起. 另外, 顯示邏輯(display logic)常常是非常複雜的, 若使用模板語言(template languages)來詮釋它就顯得笨重或累贅.
|
||||
|
||||
我們找到解決這個問題的最佳解答就是直接在JavaScript程式內產生HTML和元件樹(component trees)如此一來你就能使用真正的程式語言的表達能力(expressive power)來建立使用者介面(UIs).
|
||||
|
||||
為了能更輕鬆實現, 我們增加了一個非常簡單, **可選擇性使用的** 類似HTML的語法(HTML-like syntax) 來創建這些React樹節點(React tree nodes).
|
||||
|
||||
**JSX能讓你使用HTML語法來創建JavaScript物件.** 在React裡使用純JavaScript來產生一個鏈接(link)你可以這樣寫:
|
||||
|
||||
`React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Hello!')`
|
||||
|
||||
使用JSX語法則變成:
|
||||
|
||||
`<a href="https://facebook.github.io/react/">Hello!</a>`
|
||||
|
||||
我們發現這麼做能讓建立React apps更加容易並且設計師往往喜歡語法, 但是每個人都有他們自己的工作流程, 所以**在使用React時JSX並非必要.**
|
||||
|
||||
JSX非常簡單易懂. 若想要學習更多關於JSX, 請參閱 [JSX in depth](/react/docs/jsx-in-depth.html). 或是可以使用線上及時轉換工具 [the Babel REPL](https://babeljs.io/repl/).
|
||||
|
||||
JSX類似於HTML, 但不盡然完全相同. 參閱 [JSX gotchas](/react/docs/jsx-gotchas.html) 來比較一些主要的差異點.
|
||||
|
||||
[Babel exposes a number of ways to get started using JSX](http://babeljs.io/docs/setup/), 涵蓋從命令列工具到Ruby on Rails整合. 可以從中選擇最適合你的工具.
|
||||
|
||||
## React不使用JSX的範例(React without JSX)
|
||||
|
||||
JSX完全是可選擇性使用的; 你可以不拿JSX跟React一起使用. 你能在純粹的JavaScript環境中使用`React.createElement`來創建React元素(React elements), 它搭配一個標籤名(tag name)或是元件(component), 一個屬性物件(properties object), 和數個選擇性子參數(child arguments).
|
||||
|
||||
```javascript
|
||||
var child1 = React.createElement('li', null, 'First Text Content');
|
||||
var child2 = React.createElement('li', null, 'Second Text Content');
|
||||
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
|
||||
ReactDOM.render(root, document.getElementById('example'));
|
||||
```
|
||||
|
||||
為了方便起見, 你能創建速記factory函式(short-hand factory functions)然後從自訂元件(custom components)建立元素(elements).
|
||||
|
||||
```javascript
|
||||
var Factory = React.createFactory(ComponentClass);
|
||||
...
|
||||
var root = Factory({ custom: 'prop' });
|
||||
ReactDOM.render(root, document.getElementById('example'));
|
||||
```
|
||||
|
||||
針對一般的HTML標籤React已經有內建的factories函式:
|
||||
|
||||
```javascript
|
||||
var root = React.DOM.ul({ className: 'my-list' },
|
||||
React.DOM.li(null, 'Text Content')
|
||||
);
|
||||
```
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
id: jsx-in-depth-it-IT
|
||||
title: JSX in Profondità
|
||||
permalink: jsx-in-depth-it-IT.html
|
||||
permalink: docs/jsx-in-depth-it-IT.html
|
||||
prev: displaying-data-it-IT.html
|
||||
next: jsx-spread-it-IT.html
|
||||
---
|
||||
@@ -84,7 +84,7 @@ var Nav = React.createClass({displayName: "Nav", });
|
||||
|
||||
Usa la [REPL di Babel](https://babeljs.io/repl/) per provare il JSX e vedere come viene trasformato
|
||||
in JavaScript nativo, e il
|
||||
[convertitore da HTML a JSX](/react/html-jsx.html) per convertire il tuo HTML esistente a
|
||||
[convertitore da HTML a JSX](http://magic.reactjs.net/htmltojsx.htm) per convertire il tuo HTML esistente a
|
||||
JSX.
|
||||
|
||||
Se desideri utilizzare JSX, la guida [Primi Passi](/react/docs/getting-started-it-IT.html) ti mostra come impostare la compilazione.
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
id: jsx-in-depth
|
||||
title: JSXの深層
|
||||
permalink: jsx-in-depth-ja-JP.html
|
||||
permalink: docs/jsx-in-depth-ja-JP.html
|
||||
prev: displaying-data-ja-JP.html
|
||||
next: jsx-spread-ja_JP.html
|
||||
---
|
||||
@@ -80,7 +80,7 @@ var Nav = React.createClass({ });
|
||||
var Nav = React.createClass({displayName: "Nav", });
|
||||
```
|
||||
|
||||
JSXを試し、どのようにネイティブなJavaScriptに変換されるか見るには、[JSX Compiler](/react/jsx-compiler.html)を、すでに存在するHTMLをJSXに変換するには[HTMLからJSXへのコンバーター](/react/html-jsx.html)を使ってください。
|
||||
JSXを試し、どのようにネイティブなJavaScriptに変換されるか見るには、[JSX Compiler](/react/jsx-compiler.html)を、すでに存在するHTMLをJSXに変換するには[HTMLからJSXへのコンバーター](http://magic.reactjs.net/htmltojsx.htm)を使ってください。
|
||||
|
||||
JSXを使いたい場合は、[始めてみましょう](/react/docs/getting-started-ja-JP.html)というガイドがどのようにコンパイルを設定するか示してくれます。
|
||||
|
||||
@@ -216,4 +216,4 @@ var content = (
|
||||
```
|
||||
|
||||
> 注意:
|
||||
> JSXはHTMLに似ていますが、全く同じではありません。いくつかのキーの違いについては[JSXの理解](/react/docs/jsx-gotchas.html) をご覧ください。
|
||||
> JSXはHTMLに似ていますが、全く同じではありません。いくつかのキーの違いについては[JSXの理解](/react/docs/jsx-gotchas.html) をご覧ください。
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
id: jsx-in-depth-ko-KR
|
||||
title: JSX 깊이보기
|
||||
permalink: jsx-in-depth-ko-KR.html
|
||||
permalink: docs/jsx-in-depth-ko-KR.html
|
||||
prev: displaying-data-ko-KR.html
|
||||
next: jsx-spread-ko-KR.html
|
||||
---
|
||||
@@ -83,7 +83,7 @@ var Nav = React.createClass({ });
|
||||
var Nav = React.createClass({displayName: "Nav", });
|
||||
```
|
||||
|
||||
[JSX 컴파일러](/react/jsx-compiler.html)를 보면 JSX에서 어떻게 네이티브 JavaScript로 변환(desugars)하는지 볼 수 있고, [HTML-JSX 변환기](/react/html-jsx.html)는 이미 있는 HTML을 JSX로 변환해 줍니다.
|
||||
[바벨 REPL](https://babeljs.io/repl/)를 보면 JSX에서 어떻게 네이티브 JavaScript로 변환(desugars)하는지 볼 수 있고, [HTML-JSX 변환기](http://magic.reactjs.net/htmltojsx.htm)는 이미 있는 HTML을 JSX로 변환해 줍니다.
|
||||
|
||||
JSX를 사용 하시려면, [시작하기](/react/docs/getting-started-ko-KR.html) 가이드에서 어떻게 컴파일을 하기 위해 설정하는지 보실 수 있습니다.
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
id: jsx-in-depth
|
||||
title: JSX in Depth
|
||||
permalink: jsx-in-depth.html
|
||||
permalink: docs/jsx-in-depth.html
|
||||
prev: displaying-data.html
|
||||
next: jsx-spread.html
|
||||
---
|
||||
@@ -22,7 +22,7 @@ It doesn't alter the semantics of JavaScript.
|
||||
|
||||
React can either render HTML tags (strings) or React components (classes).
|
||||
|
||||
To render a HTML tag, just use lower-case tag names in JSX:
|
||||
To render an HTML tag, just use lower-case tag names in JSX:
|
||||
|
||||
```javascript
|
||||
var myDivElement = <div className="foo" />;
|
||||
@@ -82,10 +82,7 @@ var Nav = React.createClass({ });
|
||||
var Nav = React.createClass({displayName: "Nav", });
|
||||
```
|
||||
|
||||
Use the [Babel REPL](https://babeljs.io/repl/) to try out JSX and see how it
|
||||
desugars into native JavaScript, and the
|
||||
[HTML to JSX converter](/react/html-jsx.html) to convert your existing HTML to
|
||||
JSX.
|
||||
Use the [Babel REPL](https://babeljs.io/repl/) to try out JSX and see how it desugars into native JavaScript, and the [HTML to JSX converter](http://magic.reactjs.net/htmltojsx.htm) to convert your existing HTML to JSX.
|
||||
|
||||
If you want to use JSX, the [Getting Started](/react/docs/getting-started.html) guide shows how to set up compilation.
|
||||
|
||||
@@ -163,8 +160,7 @@ var App = (
|
||||
|
||||
### Attribute Expressions
|
||||
|
||||
To use a JavaScript expression as an attribute value, wrap the expression in a
|
||||
pair of curly braces (`{}`) instead of quotes (`""`).
|
||||
To use a JavaScript expression as an attribute value, wrap the expression in a pair of curly braces (`{}`) instead of quotes (`""`).
|
||||
|
||||
```javascript
|
||||
// Input (JSX):
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
---
|
||||
id: jsx-in-depth-zh-CN
|
||||
title: 深入 JSX
|
||||
permalink: jsx-in-depth-zh-CN.html
|
||||
permalink: docs/jsx-in-depth-zh-CN.html
|
||||
prev: displaying-data-zh-CN.html
|
||||
next: jsx-spread-zh-CN.html
|
||||
---
|
||||
|
||||
[JSX](https://facebook.github.io/jsx/) 是一个看起来很像 XML 的 JavaScript 语法扩展。React 可以用来做简单的 JSX 句法转换。
|
||||
|
||||
|
||||
## 为什么要用 JSX?
|
||||
|
||||
你不需要为了 React 使用 JSX,可以直接使用原生 JS。但是,我们建议使用 JSX 是因为它能精确,也是常用的定义包含属性的树状结构的语法。
|
||||
@@ -46,7 +45,6 @@ React 的 JSX 使用大、小写的约定来区分本地组件的类和 HTML 标
|
||||
> 由于 JSX 就是 JavaScript,一些标识符像 `class` 和 `for` 不建议作为 XML
|
||||
> 属性名。作为替代,React DOM 使用 `className` 和 `htmlFor` 来做对应的属性。
|
||||
|
||||
|
||||
## 转换(Transform)
|
||||
|
||||
JSX 把类 XML 的语法转成原生 JavaScript,XML 元素、属性和子节点被转换成 `React.createElement` 的参数。
|
||||
@@ -84,12 +82,13 @@ var Nav = React.createClass({ });
|
||||
var Nav = React.createClass({displayName: "Nav", });
|
||||
```
|
||||
|
||||
使用 [JSX 编译器](/react/jsx-compiler.html) 来试用 JSX 并理解它是如何转换到原生 JavaScript,还有 [HTML 到 JSX 转换器](/react/html-jsx.html) 来把现有 HTML 转成 JSX。
|
||||
使用 [JSX 编译器](/react/jsx-compiler.html) 来试用 JSX 并理解它是如何转换到原生 JavaScript,还有 [HTML 到 JSX 转换器](http://magic.reactjs.net/htmltojsx.htm) 来把现有 HTML 转成 JSX。
|
||||
|
||||
如果你要使用 JSX,这篇 [新手入门](/react/docs/getting-started.html) 教程来教你如何搭建环境。
|
||||
|
||||
> 注意:
|
||||
>
|
||||
>
|
||||
> JSX 表达式总是会当作 ReactElement 执行。具体的实际细节可能不同。一种优化
|
||||
> 的模式是把 ReactElement 当作一个行内的对象字面量形式来绕过
|
||||
> `React.createElement` 里的校验代码。
|
||||
@@ -99,7 +98,7 @@ var Nav = React.createClass({displayName: "Nav", });
|
||||
如果你正在构建一个有很多子组件的组件,比如表单,你也许会最终得到许多的变量声明。
|
||||
|
||||
```javascript
|
||||
// 尴尬的变量声明块
|
||||
// 尴尬的变量声明块
|
||||
var Form = MyFormComponent;
|
||||
var FormRow = Form.Row;
|
||||
var FormLabel = Form.Label;
|
||||
@@ -221,5 +220,5 @@ var content = (
|
||||
```
|
||||
|
||||
> 注意:
|
||||
>
|
||||
>
|
||||
> JSX 类似于 HTML,但不完全一样。参考 [JSX 陷阱](/react/docs/jsx-gotchas-zh-CN.html) 了解主要不同。
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
id: jsx-spread-it-IT
|
||||
title: Attributi Spread JSX
|
||||
permalink: jsx-spread-it-IT.html
|
||||
permalink: docs/jsx-spread-it-IT.html
|
||||
prev: jsx-in-depth-it-IT.html
|
||||
next: jsx-gotchas-it-IT.html
|
||||
---
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
id: jsx-spread
|
||||
title: JSXの拡張属性
|
||||
permalink: jsx-spread-ja-JP.html
|
||||
permalink: docs/jsx-spread-ja-JP.html
|
||||
prev: jsx-in-depth-ja-JP.html
|
||||
next: jsx-gotchas-ja-JP.html
|
||||
---
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
---
|
||||
id: jsx-spread-ko-KR
|
||||
title: JSX 스프레드 어트리뷰트
|
||||
permalink: jsx-spread-ko-KR.html
|
||||
permalink: docs/jsx-spread-ko-KR.html
|
||||
prev: jsx-in-depth-ko-KR.html
|
||||
next: jsx-gotchas-ko-KR.html
|
||||
---
|
||||
@@ -12,7 +12,7 @@ next: jsx-gotchas-ko-KR.html
|
||||
var component = <Component foo={x} bar={y} />;
|
||||
```
|
||||
|
||||
## Props의 변경은 나빠요.[^1]
|
||||
## Props의 변경은 나빠요
|
||||
|
||||
하지만 어떤 프로퍼티를 설정하고 싶은지 모른다면, 객체 레이어에 넣고 싶어질 수도 있습니다.
|
||||
|
||||
@@ -50,7 +50,3 @@ props는 변하지 않는 것으로 간주해야 합니다. props 객체를 변
|
||||
## 이상한 `...` 표기법은 무엇인가요?
|
||||
|
||||
`...` 연산자(스프레드 연산자)는 이미 [ES6의 배열](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator)에서 지원합니다. [객체 rest와 스프레드 프로퍼티](https://github.com/sebmarkbage/ecmascript-rest-spread)에 대한 ES7의 제안도 있습니다. JSX의 구문을 더 깔끔하게 하기 위해 지원되고 개발중인 표준을 활용하고 있습니다.
|
||||
|
||||
[^1]: 아무래도 좋지만, 이 제목의 원문 "Mutating Props is Bad, mkay"는 사우스 파크에
|
||||
나온 대사 "[Drug is bad, mkay](https://www.youtube-nocookie.com/watch?v=Uh7l8dx-h8M)"의
|
||||
패러디입니다.
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user