├── LICENSE
├── README.md
├── docs
    ├── 00-object-elements.html
    ├── 01-element-factory.html
    ├── 02-jsx.html
    ├── 03-nested-elements.html
    ├── 04-components.html
    ├── 05-properties.html
    ├── 06-property-types.html
    ├── 07-property-example.html
    ├── 08-nested-components.html
    ├── 09-component-classes.html
    ├── 10-example-app.html
    ├── 11-lifecycle-methods.html
    ├── 12-component-refactor.html
    ├── 13-element-refactor.html
    ├── 14-references.html
    ├── 15-simple-integration.html
    └── 16-advanced-integration.html
├── summary.md
└── summary.zh.md


/LICENSE:
--------------------------------------------------------------------------------
  1 |                     GNU GENERAL PUBLIC LICENSE
  2 |                        Version 2, June 1991
  3 | 
  4 |  Copyright (C) 1989, 1991 Free Software Foundation, Inc., <http://fsf.org/>
  5 |  51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
  6 |  Everyone is permitted to copy and distribute verbatim copies
  7 |  of this license document, but changing it is not allowed.
  8 | 
  9 |                             Preamble
 10 | 
 11 |   The licenses for most software are designed to take away your
 12 | freedom to share and change it.  By contrast, the GNU General Public
 13 | License is intended to guarantee your freedom to share and change free
 14 | software--to make sure the software is free for all its users.  This
 15 | General Public License applies to most of the Free Software
 16 | Foundation's software and to any other program whose authors commit to
 17 | using it.  (Some other Free Software Foundation software is covered by
 18 | the GNU Lesser General Public License instead.)  You can apply it to
 19 | your programs, too.
 20 | 
 21 |   When we speak of free software, we are referring to freedom, not
 22 | price.  Our General Public Licenses are designed to make sure that you
 23 | have the freedom to distribute copies of free software (and charge for
 24 | this service if you wish), that you receive source code or can get it
 25 | if you want it, that you can change the software or use pieces of it
 26 | in new free programs; and that you know you can do these things.
 27 | 
 28 |   To protect your rights, we need to make restrictions that forbid
 29 | anyone to deny you these rights or to ask you to surrender the rights.
 30 | These restrictions translate to certain responsibilities for you if you
 31 | distribute copies of the software, or if you modify it.
 32 | 
 33 |   For example, if you distribute copies of such a program, whether
 34 | gratis or for a fee, you must give the recipients all the rights that
 35 | you have.  You must make sure that they, too, receive or can get the
 36 | source code.  And you must show them these terms so they know their
 37 | rights.
 38 | 
 39 |   We protect your rights with two steps: (1) copyright the software, and
 40 | (2) offer you this license which gives you legal permission to copy,
 41 | distribute and/or modify the software.
 42 | 
 43 |   Also, for each author's protection and ours, we want to make certain
 44 | that everyone understands that there is no warranty for this free
 45 | software.  If the software is modified by someone else and passed on, we
 46 | want its recipients to know that what they have is not the original, so
 47 | that any problems introduced by others will not reflect on the original
 48 | authors' reputations.
 49 | 
 50 |   Finally, any free program is threatened constantly by software
 51 | patents.  We wish to avoid the danger that redistributors of a free
 52 | program will individually obtain patent licenses, in effect making the
 53 | program proprietary.  To prevent this, we have made it clear that any
 54 | patent must be licensed for everyone's free use or not licensed at all.
 55 | 
 56 |   The precise terms and conditions for copying, distribution and
 57 | modification follow.
 58 | 
 59 |                     GNU GENERAL PUBLIC LICENSE
 60 |    TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
 61 | 
 62 |   0. This License applies to any program or other work which contains
 63 | a notice placed by the copyright holder saying it may be distributed
 64 | under the terms of this General Public License.  The "Program", below,
 65 | refers to any such program or work, and a "work based on the Program"
 66 | means either the Program or any derivative work under copyright law:
 67 | that is to say, a work containing the Program or a portion of it,
 68 | either verbatim or with modifications and/or translated into another
 69 | language.  (Hereinafter, translation is included without limitation in
 70 | the term "modification".)  Each licensee is addressed as "you".
 71 | 
 72 | Activities other than copying, distribution and modification are not
 73 | covered by this License; they are outside its scope.  The act of
 74 | running the Program is not restricted, and the output from the Program
 75 | is covered only if its contents constitute a work based on the
 76 | Program (independent of having been made by running the Program).
 77 | Whether that is true depends on what the Program does.
 78 | 
 79 |   1. You may copy and distribute verbatim copies of the Program's
 80 | source code as you receive it, in any medium, provided that you
 81 | conspicuously and appropriately publish on each copy an appropriate
 82 | copyright notice and disclaimer of warranty; keep intact all the
 83 | notices that refer to this License and to the absence of any warranty;
 84 | and give any other recipients of the Program a copy of this License
 85 | along with the Program.
 86 | 
 87 | You may charge a fee for the physical act of transferring a copy, and
 88 | you may at your option offer warranty protection in exchange for a fee.
 89 | 
 90 |   2. You may modify your copy or copies of the Program or any portion
 91 | of it, thus forming a work based on the Program, and copy and
 92 | distribute such modifications or work under the terms of Section 1
 93 | above, provided that you also meet all of these conditions:
 94 | 
 95 |     a) You must cause the modified files to carry prominent notices
 96 |     stating that you changed the files and the date of any change.
 97 | 
 98 |     b) You must cause any work that you distribute or publish, that in
 99 |     whole or in part contains or is derived from the Program or any
100 |     part thereof, to be licensed as a whole at no charge to all third
101 |     parties under the terms of this License.
102 | 
103 |     c) If the modified program normally reads commands interactively
104 |     when run, you must cause it, when started running for such
105 |     interactive use in the most ordinary way, to print or display an
106 |     announcement including an appropriate copyright notice and a
107 |     notice that there is no warranty (or else, saying that you provide
108 |     a warranty) and that users may redistribute the program under
109 |     these conditions, and telling the user how to view a copy of this
110 |     License.  (Exception: if the Program itself is interactive but
111 |     does not normally print such an announcement, your work based on
112 |     the Program is not required to print an announcement.)
113 | 
114 | These requirements apply to the modified work as a whole.  If
115 | identifiable sections of that work are not derived from the Program,
116 | and can be reasonably considered independent and separate works in
117 | themselves, then this License, and its terms, do not apply to those
118 | sections when you distribute them as separate works.  But when you
119 | distribute the same sections as part of a whole which is a work based
120 | on the Program, the distribution of the whole must be on the terms of
121 | this License, whose permissions for other licensees extend to the
122 | entire whole, and thus to each and every part regardless of who wrote it.
123 | 
124 | Thus, it is not the intent of this section to claim rights or contest
125 | your rights to work written entirely by you; rather, the intent is to
126 | exercise the right to control the distribution of derivative or
127 | collective works based on the Program.
128 | 
129 | In addition, mere aggregation of another work not based on the Program
130 | with the Program (or with a work based on the Program) on a volume of
131 | a storage or distribution medium does not bring the other work under
132 | the scope of this License.
133 | 
134 |   3. You may copy and distribute the Program (or a work based on it,
135 | under Section 2) in object code or executable form under the terms of
136 | Sections 1 and 2 above provided that you also do one of the following:
137 | 
138 |     a) Accompany it with the complete corresponding machine-readable
139 |     source code, which must be distributed under the terms of Sections
140 |     1 and 2 above on a medium customarily used for software interchange; or,
141 | 
142 |     b) Accompany it with a written offer, valid for at least three
143 |     years, to give any third party, for a charge no more than your
144 |     cost of physically performing source distribution, a complete
145 |     machine-readable copy of the corresponding source code, to be
146 |     distributed under the terms of Sections 1 and 2 above on a medium
147 |     customarily used for software interchange; or,
148 | 
149 |     c) Accompany it with the information you received as to the offer
150 |     to distribute corresponding source code.  (This alternative is
151 |     allowed only for noncommercial distribution and only if you
152 |     received the program in object code or executable form with such
153 |     an offer, in accord with Subsection b above.)
154 | 
155 | The source code for a work means the preferred form of the work for
156 | making modifications to it.  For an executable work, complete source
157 | code means all the source code for all modules it contains, plus any
158 | associated interface definition files, plus the scripts used to
159 | control compilation and installation of the executable.  However, as a
160 | special exception, the source code distributed need not include
161 | anything that is normally distributed (in either source or binary
162 | form) with the major components (compiler, kernel, and so on) of the
163 | operating system on which the executable runs, unless that component
164 | itself accompanies the executable.
165 | 
166 | If distribution of executable or object code is made by offering
167 | access to copy from a designated place, then offering equivalent
168 | access to copy the source code from the same place counts as
169 | distribution of the source code, even though third parties are not
170 | compelled to copy the source along with the object code.
171 | 
172 |   4. You may not copy, modify, sublicense, or distribute the Program
173 | except as expressly provided under this License.  Any attempt
174 | otherwise to copy, modify, sublicense or distribute the Program is
175 | void, and will automatically terminate your rights under this License.
176 | However, parties who have received copies, or rights, from you under
177 | this License will not have their licenses terminated so long as such
178 | parties remain in full compliance.
179 | 
180 |   5. You are not required to accept this License, since you have not
181 | signed it.  However, nothing else grants you permission to modify or
182 | distribute the Program or its derivative works.  These actions are
183 | prohibited by law if you do not accept this License.  Therefore, by
184 | modifying or distributing the Program (or any work based on the
185 | Program), you indicate your acceptance of this License to do so, and
186 | all its terms and conditions for copying, distributing or modifying
187 | the Program or works based on it.
188 | 
189 |   6. Each time you redistribute the Program (or any work based on the
190 | Program), the recipient automatically receives a license from the
191 | original licensor to copy, distribute or modify the Program subject to
192 | these terms and conditions.  You may not impose any further
193 | restrictions on the recipients' exercise of the rights granted herein.
194 | You are not responsible for enforcing compliance by third parties to
195 | this License.
196 | 
197 |   7. If, as a consequence of a court judgment or allegation of patent
198 | infringement or for any other reason (not limited to patent issues),
199 | conditions are imposed on you (whether by court order, agreement or
200 | otherwise) that contradict the conditions of this License, they do not
201 | excuse you from the conditions of this License.  If you cannot
202 | distribute so as to satisfy simultaneously your obligations under this
203 | License and any other pertinent obligations, then as a consequence you
204 | may not distribute the Program at all.  For example, if a patent
205 | license would not permit royalty-free redistribution of the Program by
206 | all those who receive copies directly or indirectly through you, then
207 | the only way you could satisfy both it and this License would be to
208 | refrain entirely from distribution of the Program.
209 | 
210 | If any portion of this section is held invalid or unenforceable under
211 | any particular circumstance, the balance of the section is intended to
212 | apply and the section as a whole is intended to apply in other
213 | circumstances.
214 | 
215 | It is not the purpose of this section to induce you to infringe any
216 | patents or other property right claims or to contest validity of any
217 | such claims; this section has the sole purpose of protecting the
218 | integrity of the free software distribution system, which is
219 | implemented by public license practices.  Many people have made
220 | generous contributions to the wide range of software distributed
221 | through that system in reliance on consistent application of that
222 | system; it is up to the author/donor to decide if he or she is willing
223 | to distribute software through any other system and a licensee cannot
224 | impose that choice.
225 | 
226 | This section is intended to make thoroughly clear what is believed to
227 | be a consequence of the rest of this License.
228 | 
229 |   8. If the distribution and/or use of the Program is restricted in
230 | certain countries either by patents or by copyrighted interfaces, the
231 | original copyright holder who places the Program under this License
232 | may add an explicit geographical distribution limitation excluding
233 | those countries, so that distribution is permitted only in or among
234 | countries not thus excluded.  In such case, this License incorporates
235 | the limitation as if written in the body of this License.
236 | 
237 |   9. The Free Software Foundation may publish revised and/or new versions
238 | of the General Public License from time to time.  Such new versions will
239 | be similar in spirit to the present version, but may differ in detail to
240 | address new problems or concerns.
241 | 
242 | Each version is given a distinguishing version number.  If the Program
243 | specifies a version number of this License which applies to it and "any
244 | later version", you have the option of following the terms and conditions
245 | either of that version or of any later version published by the Free
246 | Software Foundation.  If the Program does not specify a version number of
247 | this License, you may choose any version ever published by the Free Software
248 | Foundation.
249 | 
250 |   10. If you wish to incorporate parts of the Program into other free
251 | programs whose distribution conditions are different, write to the author
252 | to ask for permission.  For software which is copyrighted by the Free
253 | Software Foundation, write to the Free Software Foundation; we sometimes
254 | make exceptions for this.  Our decision will be guided by the two goals
255 | of preserving the free status of all derivatives of our free software and
256 | of promoting the sharing and reuse of software generally.
257 | 
258 |                             NO WARRANTY
259 | 
260 |   11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
261 | FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW.  EXCEPT WHEN
262 | OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
263 | PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
264 | OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
265 | MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.  THE ENTIRE RISK AS
266 | TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU.  SHOULD THE
267 | PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
268 | REPAIR OR CORRECTION.
269 | 
270 |   12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
271 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
272 | REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
273 | INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
274 | OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
275 | TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
276 | YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
277 | PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
278 | POSSIBILITY OF SUCH DAMAGES.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # React From Zero [![explain]][source] [![translate-svg]][translate-list]
  2 | 
  3 | [explain]: http://llever.com/explain.svg
  4 | [source]: https://github.com/chinanf-boy/Source-Explain
  5 | [translate-svg]: http://llever.com/translate.svg
  6 | [translate-list]: https://github.com/chinanf-boy/chinese-translate-list
  7 | 
  8 | React 简单 (至少99% ES2015 ) 例子
  9 | 
 10 | 一切都在浏览器中运行，无需手动预编译。
 11 | 
 12 | ## 校对 ✅
 13 | 
 14 | <!-- doc-templite START generated -->
 15 | <!-- time = '2018 6.30' -->
 16 | <!-- repo = 'kay-is/react-from-zero' -->
 17 | <!-- commit = 'b31878c2c1ba423fede7542c473092bba5943dfa' -->
 18 | 翻译的原文 | 与日期 | 最新更新 | 更多
 19 | ---|---|---|---
 20 | [commit] | ⏰ 2018 6.30 | ![last] | [中文翻译][translate-list]
 21 | 
 22 | [last]: https://img.shields.io/github/last-commit/kay-is/react-from-zero.svg
 23 | [commit]: https://github.com/kay-is/react-from-zero/tree/b31878c2c1ba423fede7542c473092bba5943dfa
 24 | 
 25 | <!-- doc-templite END generated -->
 26 | 
 27 | ### 贡献
 28 | 
 29 | 欢迎 👏 勘误/校对/更新贡献 😊 [具体贡献请看](https://github.com/chinanf-boy/chinese-translate-list#贡献)
 30 | 
 31 | 
 32 | ## 生活
 33 | 
 34 | [If help, **buy** me coffee —— 营养跟不上了，给我来瓶营养快线吧! 💰](https://github.com/chinanf-boy/live-need-money)
 35 | 
 36 | ## 课堂
 37 | 
 38 | [Lesson 0 - Object Elements](https://github.com/chinanf-boy/react-from-zero/blob/master/docs/00-object-elements.html) React元素长什么样 -
 39 | [预览](https://chinanf-boy.github.io/react-from-zero/00-object-elements.html)
 40 | 
 41 | ---
 42 | 
 43 | [Lesson 1 - Element Factory](https://github.com/chinanf-boy/react-from-zero/blob/master/docs/01-element-factory.html) React元素-生产函数 `React.createElement` -
 44 | [预览](https://chinanf-boy.github.io/react-from-zero/01-element-factory.html)
 45 | 
 46 | ---
 47 | 
 48 | [Lesson 2 - JSX](https://github.com/chinanf-boy/react-from-zero/blob/master/docs/02-jsx.html) - JSX 写在`js`中的`XHTMl`样式
 49 | [预览](https://chinanf-boy.github.io/react-from-zero/02-jsx.html)
 50 | 
 51 | ---
 52 | 
 53 | [Lesson 3 - Nested Elements](https://github.com/chinanf-boy/react-from-zero/blob/master/docs/03-nested-elements.html) - 嵌套`React`元素
 54 | [预览](https://chinanf-boy.github.io/react-from-zero/03-nested-elements.html)
 55 | 
 56 | ---
 57 | 
 58 | [Lesson 4 - Components](https://github.com/chinanf-boy/react-from-zero/blob/master/docs/04-components.html) - 组件怎么来的
 59 | [预览](https://chinanf-boy.github.io/react-from-zero/04-components.html)
 60 | 
 61 | ---
 62 | 
 63 | [Lesson 5 - Properties](https://github.com/chinanf-boy/react-from-zero/blob/master/docs/05-properties.html) - 属性,来了
 64 | [预览](https://chinanf-boy.github.io/react-from-zero/05-properties.html)
 65 | 
 66 | ---
 67 | 
 68 | [Lesson 6 - Property Types](https://github.com/chinanf-boy/react-from-zero/blob/master/docs/06-property-types.html) - 属性类型验证
 69 | [预览](https://chinanf-boy.github.io/react-from-zero/06-property-types.html)
 70 | 
 71 | ---
 72 | 
 73 | [Lesson 7 - Property Example](https://github.com/chinanf-boy/react-from-zero/blob/master/docs/07-property-example.html) - 属性的示例
 74 | [预览](https://chinanf-boy.github.io/react-from-zero/07-property-example.html)
 75 | 
 76 | ---
 77 | 
 78 | [Lesson 8 - Nested Components](https://github.com/chinanf-boy/react-from-zero/blob/master/docs/08-nested-components.html) - 嵌套组件
 79 | [预览](https://chinanf-boy.github.io/react-from-zero/08-nested-components.html)
 80 | 
 81 | ---
 82 | 
 83 | [Lesson 9 - Component Classes](https://github.com/chinanf-boy/react-from-zero/blob/master/docs/09-component-classes.html) - 组件类
 84 | [预览](https://chinanf-boy.github.io/react-from-zero/09-component-classes.html)
 85 | 
 86 | ---
 87 | 
 88 | [Lesson 10 - Example App](https://github.com/chinanf-boy/react-from-zero/blob/master/docs/10-example-app.html) - 任务列表应用的示例
 89 | [预览](https://chinanf-boy.github.io/react-from-zero/10-example-app.html)
 90 | 
 91 | ---
 92 | 
 93 | [Lesson 11 - Lifecycle Methods](https://github.com/chinanf-boy/react-from-zero/blob/master/docs/11-lifecycle-methods.html) - 生命周期钩子函数
 94 | [预览](https://chinanf-boy.github.io/react-from-zero/11-lifecycle-methods.html)
 95 | 
 96 | ---
 97 | 
 98 | [Lesson 12 - Component refactor](https://github.com/chinanf-boy/react-from-zero/blob/master/docs/12-component-refactor.html) - 组件的重构
 99 | [预览](https://chinanf-boy.github.io/react-from-zero/12-component-refactor.html)
100 | 
101 | ---
102 | 
103 | [Lesson 13 - Element Refactor](https://github.com/chinanf-boy/react-from-zero/blob/master/docs/13-element-refactor.html) - `React`元素重构
104 | [预览](https://chinanf-boy.github.io/react-from-zero/13-element-refactor.html)
105 | 
106 | ---
107 | 
108 | [Lesson 14 - References](https://github.com/chinanf-boy/react-from-zero/blob/master/docs/14-references.html) - `元素/组件`引用
109 | [预览](https://chinanf-boy.github.io/react-from-zero/14-references.html)
110 | 
111 | ---
112 | 
113 | [Lesson 15 - Simple Integration](https://github.com/chinanf-boy/react-from-zero/blob/master/docs/15-simple-integration.html) - 同步简单库的整合
114 | [预览](https://chinanf-boy.github.io/react-from-zero/15-simple-integration.html)
115 | 
116 | ---
117 | 
118 | [Lesson 16 - Advanced Integration](https://github.com/chinanf-boy/react-from-zero/blob/master/docs/16-advanced-integration.html) - 高级库的整合
119 | [预览](https://chinanf-boy.github.io/react-from-zero/16-advanced-integration.html)
120 | 
121 | ---
122 | 
123 | 
124 | ## More
125 | 
126 | [更多中文翻译](https://github.com/chinanf-boy/chinese-translate-list)


--------------------------------------------------------------------------------
/docs/00-object-elements.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <title>00 Object Elements/React元素长什么样 - React From Zero</title>
 4 | 
 5 | <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
 6 | <script src="https://cdn.bootcss.com/react-dom/16.4.0-alpha.0911da3/umd/react-dom.development.js"></script>
 7 | 
 8 | <div id="app">
 9 |   <!--我们 React 应用渲染的目标元素 id="app"-->
10 | </div>
11 | 
12 | <script>
13 |   // `React`使用`ES2015`符号`"tag"`标签化它的元素对象. 
14 |   // 它在旧版浏览器上使用 神奇的数字 作为回调. 
15 |   var magicValue = (Symbol && Symbol.for("react.element")) || 0xeac7
16 | 
17 |   // `React`使用虚拟`DOM`元素,在渲染时会成为真实的`DOM`的元素. 
18 |   // 虚拟`DOM`元素可以被定义为一个简单的对象文字. 
19 |   // 通常你会使用`React.createElement()`创建一个元素. 
20 |   // 下面看起来就像是`React.createElement()`运行后的返回值.
21 |   var reactElement = {
22 | 
23 |     // 这个特殊的 财产-property 将被`React`检查,
24 |     // 确保这个对象是一个`React`元素,
25 |     // 而不仅仅是一些用户数据
26 |     // `React.createElement()`自动为你设置
27 |     $$typeof: magicValue,
28 | 
29 |     // 这也将被`React`检查.
30 |     // 我们稍后将讨论 引用-ref , 
31 |     // 但如果您不使用它们,则必须将其设置为null,而不是 未定义-undefined 的
32 |     ref: null,
33 | 
34 |     // 这定义了 HTML 标签
35 |     type: "h1",
36 | 
37 |     // 这定义了传递给元素的属性
38 |     props: {
39 | 
40 |       // 在这个例子中,只有一个文本节点作为子节点
41 |       children: "Hello, world!",
42 | 
43 |       // 一个`CSS`类
44 |       className: "abc",
45 | 
46 |       // 样式可以作为对象传递, 
47 |       // `React`使用 驼峰 而不是虚线 (例如`CSS/D3`) : text-align{虚线} => textAlign{驼峰}
48 |       style: {
49 |         textAlign: "center",
50 |       },
51 | 
52 |       // 事件处理程序也可以作为属性添加,
53 |       // `React`使用 组合事件,基本上试图规范化浏览器的行为
54 |       onClick: function (notYourRegularEvent) { alert("click") },
55 |     },
56 | 
57 |   }
58 | 
59 |   // 另一个没有太多配置的元素
60 |   var anotherElement = {
61 |     $$typeof: magicValue,
62 |     ref: null,
63 |     type: "p",
64 |     props: {
65 |       children: "A nice text paragraph.",
66 |     },
67 |   }
68 | 
69 |   // `React`需要一个`DOM`元素作为渲染目标
70 |   var renderTarget = document.getElementById("app")
71 | 
72 |   // `ReactDOM`负责将元素插入到 DOM 中
73 |   ReactDOM.render(reactElement, renderTarget)
74 | </script>


--------------------------------------------------------------------------------
/docs/01-element-factory.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <title>01 Element Factory - React From Zero</title>
 4 | 
 5 | <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
 6 | <script src="https://cdn.bootcss.com/react-dom/16.4.0-alpha.0911da3/umd/react-dom.development.js"></script>
 7 | 
 8 | <div id="app"></div>
 9 | 
10 | <script>
11 |   //`React.createElement()`需要 类型-type, 属性-props, 孩子-children. 这比使用普通对象文字的冗长
12 |   // 它隐藏了第0课中提到的 $$type/Symbol 和 ref
13 |   var reactElement = React.createElement("h1", // type
14 |   { // props
15 | 
16 |     className: "abc", 
17 | 
18 |     style: {
19 |       textAlign: "center",
20 |     },
21 | 
22 |     onClick: function () { alert("click") },
23 | 
24 |   }, "Hello, world!") // children
25 | 
26 |   // 第二个参数是 属性-props 对象 ,如果为空,则必须为null
27 |   var anotherElement = React.createElement("p", null, "A nice text paragraph.")
28 | 
29 |   var renderTarget = document.getElementById("app")
30 | 
31 |   ReactDOM.render(reactElement, renderTarget)
32 | </script>


--------------------------------------------------------------------------------
/docs/02-jsx.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <title>02 JSX - React From Zero</title>
 4 | 
 5 | <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
 6 | <script src="https://cdn.bootcss.com/react-dom/16.4.0-alpha.0911da3/umd/react-dom.development.js"></script>
 7 | 
 8 | <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.min.js">
 9 | 
10 | // 现在我们将使用`JSX`,这需要转换为`JavaScript`. 
11 | // 为此我们将使用`Babel`. `Babel`通常用于转换`ES2015`至`ES5`,
12 | // 但它也可以转换`JSX`至`ES5`. `Babel`浏览器版本使用 `text/babel` `<script>` 标签. 
13 | </script>
14 | 
15 | <div id="app"></div>
16 | 
17 | <script type="text/babel">
18 | // JSX is the idiomatic way of creating elements.
19 | // It's basically XHTML with {} for dynamic content
20 | // also class has to be called className
21 | // `JSX`是创造元素的惯用方式. 
22 | // 基本上是这样`XHTML`夹杂`{}`, 这样带入`动态内容/js`,
23 | // 还有将 `class` 改称为 `className`
24 | var reactElement =
25 |   <h1
26 |     className="abc"
27 |     style={{textAlign: "center"}}
28 |     onClick={function() { alert("click") }}>
29 |     Hello, world!
30 |   </h1>
31 | 
32 | // 是相同的
33 | reactElement =
34 |   React.createElement(
35 |     "h1",
36 |     {className: "abc", style: {textAlign: "center"},
37 |     onClick: function() { alert("click") }},
38 |     "Hello, world!"
39 |   )
40 | 
41 | // JSX shines especially with simple elements that make up the majority
42 | // `JSX`特别是构成大多数的简单元素, 所以尤为闪耀简单
43 | var anotherElement = <p>A nice text paragraph.</p>
44 | 
45 | // 是相同的
46 | anotherElement = React.createElement("p", null, "A nice text paragraph.")
47 | 
48 | // 正如我们所看到的,其他一切和以前一样
49 | var renderTarget = document.getElementById("app")
50 | 
51 | ReactDOM.render(reactElement, renderTarget)
52 | </script>


--------------------------------------------------------------------------------
/docs/03-nested-elements.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <title>03 Nested Elements - React From Zero</title>
 4 | 
 5 | <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
 6 | <script src="https://cdn.bootcss.com/react-dom/16.4.0-alpha.0911da3/umd/react-dom.development.js"></script>
 7 | <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
 8 | 
 9 | <div id="app"></div>
10 | 
11 | <script type="text/babel">
12 | 
13 | // 元素可以嵌套, 这将导致`React.createElement()`嵌套调用
14 | // 正如你可以想象的那样,不用`JSX`写这些嵌套会很乏味/繁琐
15 | var reactElement =
16 |   <div className="abc">
17 |     <h1>Hello</h1> 
18 |     <h2>world</h2>
19 |   </div>
20 | 
21 | // 他们也可以像 第 2 课中, 提到的那样包含`JavaScript`在`{}`
22 | var myClass = "abc"
23 | 
24 | function myText() { return "world" }
25 | 
26 | // `JavaScript`插入在属性中的语法, 与在 普通文本或元素 中的语法相同
27 | reactElement =
28 |   <div className={myClass}>
29 |     <h1>Hello {10 * 10}</h1>
30 |     <h2>{myText()}</h2>
31 |   </div>
32 | 
33 | // 这个`JavaScript`也可以包含元素,
34 | var nestedElement = <h2>world</h2>
35 | 
36 | reactElement =
37 |   <div>
38 |     <h1>Hello</h1>
39 |     {nestedElement}
40 |   </div>
41 | 
42 | // 也可以将对象, "散布{...}" 为属性
43 | var properties = {
44 |   className: "abc",
45 |   onClick: function() { alert("click") },
46 | }
47 | 
48 | reactElement =
49 |   <div {...properties}>
50 |     <h1>Hello</h1>
51 |     <h2>world</h2>
52 |   </div>
53 | 
54 | var renderTarget = document.getElementById("app")
55 | 
56 | ReactDOM.render(reactElement, renderTarget)
57 | </script>
58 | 


--------------------------------------------------------------------------------
/docs/04-components.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <title>04 Components - React From Zero</title>
 4 | 
 5 | <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
 6 | <script src="https://cdn.bootcss.com/react-dom/16.4.0-alpha.0911da3/umd/react-dom.development.js"></script>
 7 | <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
 8 | 
 9 | <div id="app"></div>
10 | 
11 | <script type="text/babel">
12 | // `React`主要卖点之一是它的组件系统,
13 | // 组件 被用来封装 元素 和它们的 行为, 
14 | // 将它们视为 MVC 的 控制器-C 和 视图-V 的混合
15 | 
16 | // 这里我们使用 独立元素 和一些数据
17 | var data = "world"
18 | var reactElement =
19 |   <div>
20 |     <h1>Hello</h1>
21 |     <h2>{data}</h2>
22 |   </div>
23 | 
24 | // 这里的元素被封装在一个简单的组件函数中,
25 | // 它们必须以大写字母开头,
26 | // 并返回仅一个根元素 (或不带嵌套元素)  (之前`React`16) 
27 | function MyComponent() {
28 |   var data = "world"
29 |   return (
30 |     <div>
31 |       <h1>Hello</h1>
32 |       <h2>{data}</h2>
33 |     </div>
34 |   )
35 | }
36 | 
37 | // 至`React 16.0.0`以来,组件也可以返回元素数组. 
38 | // 为此, 不创建额外的包装器元素. 
39 | // 有一点需要注意的是, 与我们在 渲染数组 时所做的相似,
40 | // 我们必须为数组中的每个元素添加一个 唯一键-key,同时不要忘记逗号隔开数组项
41 | // (在下一课中我们会看到更多内容)
42 | function MyComponent() {
43 |   var data = "world"
44 |   return [
45 |     <h1 key="hello">Hello</h1>,
46 |     <h2 key="data">{data}</h2>
47 |   ]
48 | }
49 | 
50 | // 至`React 16.2.0`以来, 我们可以使用称为 片段-fragments 的 特殊"包装器"组件,
51 | // 它们的行为相同 (不创建额外的包装器元素) ,
52 | // 但是不需要设置明确的 键-key ( fragments 在 React控制下进行) 和逗号
53 | function MyComponent() {
54 |   var data = "world"
55 |   return (
56 |     <React.Fragment>
57 |       <h1>Hello</h1>
58 |       <h2>{data}</h2>
59 |     </React.Fragment>
60 |   )
61 | }
62 | 
63 | // 一个组件函数 可以像 一个元素 一样使用
64 | reactElement = <MyComponent/>
65 | 
66 | // 这转化为一个`React.createElement()`调用
67 | // null 表示没有设置属性
68 | reactElement = React.createElement(MyComponent, null)
69 | 
70 | // 引用`React`-内部 `<div>` 标签
71 | var anotherElement = <div/>
72 | // 被转换为
73 | anotherElement = React.createElement("div", null)
74 | 
75 | var renderTarget = document.getElementById("app")
76 | 
77 | ReactDOM.render(reactElement, renderTarget)
78 | </script>
79 | 


--------------------------------------------------------------------------------
/docs/05-properties.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <title>05 Properties - React From Zero</title>
 4 | 
 5 | <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
 6 | <script src="https://cdn.bootcss.com/react-dom/16.4.0-alpha.0911da3/umd/react-dom.development.js"></script>
 7 | <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
 8 | 
 9 | <div id="app"></div>
10 | 
11 | <script type="text/babel">
12 | // 组件与 元素一样也可以使用 属性-props
13 | function MyComponent(props) {
14 |   return (
15 |     <div className={props.className}>
16 |       <h1>Hello</h1>
17 |       <h2>{props.customData}</h2>
18 |     </div>
19 |   )
20 | }
21 | 
22 | var reactElement = <MyComponent className="abc" customData="world"/>
23 | 
24 | // 这也适用于 对象 和  (...) 运算符
25 | var props = {
26 |   className: "abc",
27 |   customData: "world",
28 | }
29 | 
30 | reactElement = <MyComponent {...props}/>
31 | 
32 | // 这允许具有 动态内容 的组件
33 | var planets = ["earth", "mars", "venus"]
34 | 
35 | // 如果一个数组被用作"子节点", 
36 | // 那么 每个孩子 都需要一个 唯一的键 属性
37 | var elements = planets.map(function(planet, index) {
38 |   return <MyComponent className="myClass" customData={planet} key={index}/>
39 | })
40 | 
41 | reactElement = <div>{elements}</div>
42 | 
43 | var renderTarget = document.getElementById("app")
44 | 
45 | ReactDOM.render(reactElement, renderTarget)
46 | </script>


--------------------------------------------------------------------------------
/docs/06-property-types.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <title>06 Property Types - React From Zero</title>
 4 | 
 5 | <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
 6 | <script src="https://cdn.bootcss.com/react-dom/16.4.0-alpha.0911da3/umd/react-dom.development.js"></script>
 7 | <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
 8 | 
 9 | <script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js">
10 | // PropType 已从`React 16`中删除, 现在是 分出来 的库
11 | </script>
12 | 
13 | <div id="app"></div>
14 | 
15 | <script type="text/babel">
16 | 
17 | // 创建组件来 封装应该在一起的东西 并 重用. 
18 | // 重复使用的组件, 要求用户提供正确的 属性-props, 以便我们可以定义每个属性的类型 并 设置默认值
19 | function MyComponent(props) {
20 |   return (
21 |     <div className={props.className}>
22 |       <h1>Hello</h1>
23 |       <h2>{props.customData}</h2>
24 |     </div>
25 |   )
26 | }
27 | 
28 | // 将 propTypes (function-)属性 添加到组件函数, 可以验证其 ( (element) ) 属性
29 | MyComponent.propTypes = {
30 |   // `React`为我们提供了一堆类型,比如 字符串
31 |   customData: PropTypes.string,
32 | }
33 | 
34 | // 如果用户未提供任何内容, 
35 | // 则添加 defaultProps (function-)属性以设置默认
36 | MyComponent.defaultProps = {
37 |   customData: "default",
38 |   className: "default-class",
39 | }
40 | 
41 | // 这将在控制台中显示警告,因为 customData 应该是一个字符串
42 | var reactElement = <MyComponent customData={123}/>
43 | 
44 | // 这将使用默认值
45 | reactElement = <MyComponent/>
46 | 
47 | var renderTarget = document.getElementById("app")
48 | 
49 | ReactDOM.render(reactElement, renderTarget)
50 | </script>
51 | 


--------------------------------------------------------------------------------
/docs/07-property-example.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <title>07 Property Example - React From Zero</title>
 4 | 
 5 | <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
 6 | <script src="https://cdn.bootcss.com/react-dom/16.4.0-alpha.0911da3/umd/react-dom.development.js"></script>
 7 | <script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>
 8 | <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
 9 | 
10 | <div id="app"></div>
11 | 
12 | <script type="text/babel">
13 |   // 这是一个更实用的组件,
14 |   // 格式化日期并返回一个`<span>`包含格式化的字符串
15 | function DateSpan(props) {
16 |   var date = props.date,
17 |     day = date.getDate(),
18 |     month = date.getMonth() + 1,
19 |     year = date.getFullYear()
20 | 
21 |   return <span>{day}.{month}.{year}</span>
22 | }
23 | 
24 | // 还有一个更复杂的日期属性类型检查,
25 | // 该属性是必需的,因为没有设置默认值
26 | DateSpan.propTypes = {
27 |   date: PropTypes.instanceOf(Date).isRequired,
28 | }
29 | 
30 | // 我们必须提供一个日期对象,组件才能进行格式化
31 | var reactElement = <DateSpan date={new Date()}/>
32 | 
33 | var renderTarget = document.getElementById("app")
34 | 
35 | ReactDOM.render(reactElement, renderTarget)
36 | </script>
37 | 


--------------------------------------------------------------------------------
/docs/08-nested-components.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <title>08 Nested Components - React From Zero</title>
 4 | 
 5 | <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
 6 | <script src="https://cdn.bootcss.com/react-dom/16.4.0-alpha.0911da3/umd/react-dom.development.js"></script>
 7 | <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
 8 | 
 9 | <div id="app"></div>
10 | 
11 | <script type="text/babel">
12 | // 组件像元素一样可以嵌套
13 | // 为此,子组件内部使用子属性
14 | 
15 | // 这个组件只是将它的孩子包裹在一个`<li>`元件
16 | function Item(props) {
17 |   return <li>{props.children}</li>
18 | }
19 | 
20 | // 这个组件把它的孩子包装成一个`<ul>`元件
21 | function List(props) {
22 |   return <ul>{props.children}</ul>
23 | }
24 | 
25 | // 如果`<List>`没有孩子的时候会创建一个默认的孩子
26 | List.defaultProps = {
27 |   children: <Item>Empty</Item>
28 | }
29 | 
30 | // now we render two <List>s, without and with Items
31 | // 现在我们渲染两个`<List>`, 一个有物品,一个没有
32 | var reactElement =
33 |   <div>
34 |     <List/>
35 |     <List>
36 |       <Item>First</Item>
37 |       <Item>Second</Item>
38 |       <Item>Third</Item>
39 |     </List>
40 |   </div>
41 | 
42 | var renderTarget = document.getElementById("app")
43 | 
44 | ReactDOM.render(reactElement, renderTarget)
45 | </script>


--------------------------------------------------------------------------------
/docs/09-component-classes.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | 
  3 | <title>09 Component Classes - React From Zero</title>
  4 | 
  5 | <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
  6 | <script src="https://cdn.bootcss.com/react-dom/16.4.0-alpha.0911da3/umd/react-dom.development.js"></script>
  7 | <script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>
  8 | <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
  9 | 
 10 | <script src="https://unpkg.com/create-react-class@15.6.3/create-react-class.js">
 11 | // `React.createClass` 已从`React 16`中删除, 现在是它自己的软件包
 12 | </script>
 13 | 
 14 | <div id="app"></div>
 15 | 
 16 | <script type="text/babel">
 17 | // 通常情况下,组件需要维护一些内部状态,
 18 | // 例如,如果在这种情况下涉及交互,
 19 | // 但组件功能不够,
 20 | // 组件功能只能具有属性而没有状态,
 21 | // 我们需要具有 渲染-render 功能 的 组件类
 22 | var MyComponent = createReactClass({
 23 | 
 24 |   // 用于与 组件函数 相同的 属性类型检查
 25 |   propTypes: {
 26 |     color: PropTypes.string,
 27 |   },
 28 | 
 29 |   // 此方法为缺少的属性设置默认值,它将在`React`组件被 装入-mounted DOM 之前 被调用
 30 |   getDefaultProps: function() {
 31 |     return {color: "green"}
 32 |   },
 33 | 
 34 |   // 这个方法它将被`React`调用, 用来为 组件 设置初始状态
 35 |   // 如果缺少这种方法,
 36 |   // 组件被装入DOM之前,`this.state`将是未定义的
 37 |   getInitialState: function() {
 38 |     // 状态-state 可以是任何`JavaScript`值,往往是一个对象
 39 |     return {times: 0}
 40 |   },
 41 | 
 42 |     // 此方法处理所有的点击`<span>`元件
 43 |   handleClick: function() {
 44 |     // `setState()` 可以使用 包含新状态的对象 调用,
 45 |     // 通常会触发 `render()`的调用,
 46 |     // 但`React` 可以集合多次调用并推迟 `render()` 调用 (通过异步调用) 
 47 |     // 为了防止出现这种情况,`setState`可以用一个回调代替
 48 | 
 49 |     // 如果我们依赖我们的计算到的`this.state`或者`this.props`,
 50 |     // 这可能会导致意想不到的行为
 51 |     // this.setState({times: this.state.times + 1})
 52 | 
 53 |     // 回调版本就没有这个问题
 54 |     // 在更新时, 回调得到正确的 状态和`props`
 55 |     this.setState(function(prevState, props) {
 56 |       return {times: prevState.times + 1}
 57 |     })
 58 | 
 59 |   },
 60 | 
 61 |   // 每次将组件装入 DOM 和
 62 |   // `this.setState()` 调用之后
 63 |   // 这个方法会被`React`调用
 64 |   // 它就像之前的组件函数,
 65 |   // 但没有`props`参数
 66 |   render: function() {
 67 | 
 68 |     // 使用 创建者给出的该组件 属性-props
 69 |     // `props`现在是`this.props`而不是`props`参数
 70 |     var style = {color: this.props.color}
 71 | 
 72 |     // 返回一个带有 点击处理程序,`props`和 状态值-state 的元素
 73 |     // `state`存储在`this.state`
 74 |     return (
 75 |       <span onClick={this.handleClick} style={style}>
 76 |         Clicked {this.state.times} times
 77 |       </span>
 78 |     )
 79 | 
 80 |   },
 81 | 
 82 | })
 83 | 
 84 | // 创建一些具有 状态组件类的实例
 85 | // 其中一个是默认值
 86 | // 一切与 简单的组件函数使用完全相同,
 87 | // 对于此组件的用户接口没有改变
 88 | var reactElement =
 89 |   <div>
 90 |     <MyComponent color="red"/>
 91 |     <br/>
 92 |     <MyComponent color="blue"/>
 93 |     <br/>
 94 |     <MyComponent/>
 95 |   </div>;
 96 | 
 97 | var renderTarget = document.getElementById("app")
 98 | 
 99 | ReactDOM.render(reactElement, renderTarget)
100 | </script>
101 | 


--------------------------------------------------------------------------------
/docs/10-example-app.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | 
  3 | <title>10 Example App - React From Zero</title>
  4 | 
  5 | <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
  6 | <script src="https://cdn.bootcss.com/react-dom/16.4.0-alpha.0911da3/umd/react-dom.development.js"></script>
  7 | <script src="https://unpkg.com/create-react-class@15.6.3/create-react-class.js"></script>
  8 | <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
  9 | 
 10 | <div id="app"></div>
 11 | 
 12 | <script type="text/babel">
 13 | // 一个简单`React`应用程序的例子
 14 | // 一个无状态组件的简单组件函数,
 15 | // 和一个使用 复杂的组件类 来处理交互
 16 | 
 17 | 
 18 | // 首先我们有 Task 和 TaskList
 19 | // 他们通过 他们的属性-props 获得他们所有的 数据-data/状态-state 
 20 | // <TaskList>
 21 | //   <Task text="Do something"/>
 22 | //   <Task text="Do nothing"/>
 23 | // </TaskList>
 24 | 
 25 | //  Task 需要一个 文本属性
 26 | function Task(props) {
 27 |   return <li>{props.text}</li>
 28 | }
 29 | 
 30 | // TaskList 需要在其 子属性 中包含 Task 数组
 31 | function TaskList(props) {
 32 |   // 打印第一个粗体元素
 33 |   return (
 34 |     <ul>
 35 |       <b key={0}>{props.children[0]}</b>
 36 |       {props.children.slice(1)}
 37 |     </ul>
 38 |   )
 39 | }
 40 | 
 41 | // 这个组件处理输入
 42 | // 它需要是一个类,因为`<input>`元素是有状态的
 43 | var TaskInput = createReactClass({
 44 | 
 45 |   getInitialState: function() {
 46 |     return {value: ""}
 47 |   },
 48 | 
 49 |   // 当有人在`<input>`元素输入时, 被调用
 50 |   handleChange: function(e) {
 51 |     this.setState({value: e.target.value})
 52 |   },
 53 | 
 54 |   // 当有人在`<button>`元素点击时, 被调用
 55 |   handleAdd: function(e) {
 56 |     if (!this.state.value) return
 57 | 
 58 |     // 调用添加到其 onAdd 属性, props.onAdd 函数,
 59 |     this.props.onAdd(this.state.value)
 60 | 
 61 |     // 清除状态,以便在添加后, 输入再次为空
 62 |     this.setState({value: ""})
 63 |   },
 64 | 
 65 |   // 每次有人 输入或添加 时渲染元素
 66 |   render: function() {
 67 |     return (
 68 |       <div>
 69 | 
 70 |         <input
 71 |           placeholder="Enter Task	."
 72 |           value={this.state.value}
 73 |           onChange={this.handleChange}/>
 74 | 
 75 |         <button onClick={this.handleAdd}>Add</button>
 76 | 
 77 |       </div>
 78 |     )
 79 |   },
 80 | 
 81 | })
 82 | 
 83 | // 该应用程序跟踪其当前 Task 状态
 84 | var TodoApp = createReactClass({
 85 | 
 86 |   getInitialState: function() {
 87 |     return {tasks: []}
 88 |   },
 89 | 
 90 |     // 这个回调会被插入到`<TaskInput>`组件的 onAdd 属性「props.onAdd」中
 91 |   handleAdd: function(task) {
 92 |     // 增加一项新 Task 
 93 |     var tasks = [task].concat(this.state.tasks)
 94 | 
 95 |     // 这迫使了`<TodoApp>`渲染组件
 96 |     this.setState({tasks: tasks})
 97 |   },
 98 | 
 99 |   render: function() {
100 |     // create the list of <Task> components from the tasks array in the state
101 |       // 创建来自 state.tasks 数组中的 的`<Task>`列表组件
102 |     var taskElements = this.state.tasks.map(function(t, i) {
103 |       return <Task key={i} text={t}/>
104 |     })
105 | 
106 |     // 一些简单的样式和
107 |     // 添加 处理程序-`this.handleAdd` 到`<TaskInput>`组件
108 |     return (
109 |       <div style={{width: 300, margin: "auto"}}>
110 | 
111 |         <TaskInput onAdd={this.handleAdd}/>
112 | 
113 |         <TaskList>
114 |           {taskElements}
115 |         </TaskList>
116 | 
117 |       </div>
118 |     )
119 |   },
120 | 
121 | })
122 | 
123 | var renderTarget = document.getElementById("app")
124 | 
125 | //我们可以直接使用组件
126 | ReactDOM.render(<TodoApp/>, renderTarget)
127 | 
128 | </script>
129 | 


--------------------------------------------------------------------------------
/docs/11-lifecycle-methods.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | 
  3 | <title>11 Lifecycle Methods - React From Zero</title>
  4 | 
  5 | <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
  6 | <script src="https://cdn.bootcss.com/react-dom/16.4.0-alpha.0911da3/umd/react-dom.development.js"></script>
  7 | <script src="https://unpkg.com/create-react-class@15.6.3/create-react-class.js"></script>
  8 | <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
  9 | 
 10 | <div id="app"></div>
 11 | 
 12 | <script type="text/babel">
 13 | // 如果我们使用 组件类,我们的组件会继承
 14 | // 一堆`React`在特定的时间调用的方法, 
 15 | // 这些方法让我们对我们的组件有更多的控制,
 16 | // 其中一些我们已经在 第9课 中遇到过. 
 17 | // 下面有几个新组件. 并不是代表全部,但却是最重要的
 18 | var TRANSLATION_FROM_SOMEWHERE = "Text from a synchronous source."
 19 | 
 20 | var MyComponent = createReactClass({
 21 |   // 这个默认的 prop 值的方法
 22 |   // 是在`props`给我们的组件之前被调用的
 23 |   // 如果有传递"真实"`props`下来,那么会覆盖默认
 24 |   getDefaultProps: function() {
 25 |     return {
 26 |       iGetOverriden: "default",
 27 |       iStayAsIAm: "default",
 28 |     }
 29 |   },
 30 | 
 31 |   // 这个方法在 组件被 装载-mounted 到 DOM 之前 被调用,
 32 |   // 它返回的值用于`this.state`
 33 |   getInitialState: function() {
 34 |     return {serverData: null}
 35 |   },
 36 | 
 37 |   // 在装载组件之前调用此方法
 38 |   // 可用于初始化某些同步配置,
 39 |   // 该配置在组件渲染前,应该可用
 40 |   componentWillMount: function() {
 41 |     this.TEXT = TRANSLATION_FROM_SOMEWHERE
 42 |   },
 43 | 
 44 |   // 这个方法在组件被挂载后 立即调用,
 45 |   // 这是启动一些异步任务的好地方. 
 46 |   // 例如,在第一个 mount 上显示一个加载消息,
 47 |   // 然后调用 componentDidMount 并获取一些服务器数据.
 48 |   componentDidMount: function() {
 49 | 
 50 |     var component = this
 51 | 
 52 |     // 我们清理数据, 并从某处获得新的信息
 53 |     function loadData() {
 54 | 
 55 |       component.setState({serverData: null})
 56 | 
 57 |       getServerData(function(data) {
 58 |         component.setState({serverData: data})
 59 |       })
 60 | 
 61 |     }
 62 | 
 63 |     // 初始数据加载
 64 |     loadData()
 65 | 
 66 |     // 我们每4秒模拟一次服务器请求
 67 |     this.updateInterval = setInterval(loadData, 4000)
 68 | 
 69 |   },
 70 | 
 71 |   // 这个方法在组件被移除之前被调用. 有点像自毁
 72 |   // 在这里,我们可以做一些清理.
 73 |   componentWillUnmount: function() {
 74 | 
 75 |     clearInterval(this.updateInterval)
 76 | 
 77 |   },
 78 | 
 79 |   // 这个方法在渲染之前 `props`或状态是可用的时 调用,
 80 |   // 它不会在第一个渲染 或 `this.forceUpdate()`调用时使用
 81 |   // 如果某些 状态 或 props 变化后,不需要重新渲染,可以使用它做些条件返回
 82 |   shouldComponentUpdate: function(nextProps, nextState) {
 83 | 
 84 |     // 我们想要在每次更改时渲染,这是默认行为
 85 |     return true
 86 | 
 87 |   },
 88 | 
 89 |   render: function() {
 90 |     return (
 91 |       <h2 style={{width: 400, margin: "auto"}}>
 92 | 
 93 |         Overriden Prop: {this.props.iGetOverriden}<br/><br/>
 94 | 
 95 |         Default Prop: {this.props.iStayAsIAm}<br/><br/>
 96 | 
 97 |         {this.TEXT}<br/><br/>
 98 | 
 99 |         {this.state.serverData
100 |           ? this.state.serverData
101 |           : "Loading..."
102 |         }
103 |       </h2>
104 |     )
105 |   },
106 | 
107 | })
108 | 
109 | function getServerData(fn) {
110 |   setTimeout(function() { fn("Data Loaded!") }, 700)
111 | }
112 | 
113 | ReactDOM.render(<MyComponent iGetOverriden={"override"}/>, document.getElementById("app"))
114 | </script>
115 | 


--------------------------------------------------------------------------------
/docs/12-component-refactor.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | 
  3 | <title>12 Component Refactor - React From Zero</title>
  4 | 
  5 | <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
  6 | <script src="https://cdn.bootcss.com/react-dom/16.4.0-alpha.0911da3/umd/react-dom.development.js"></script>
  7 | <script src="https://unpkg.com/create-react-class@15.6.3/create-react-class.js"></script>
  8 | <script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>
  9 | <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
 10 | 
 11 | <div id="app"></div>
 12 | 
 13 | <script type="text/babel">
 14 | // 重构是另一件`React`很好的事情
 15 | // 首先,我们将讨论如何将一个组件重构为另一个组件,
 16 | // 如果好运的话,您可以更改组件的实现,而无需在 呼叫站点 更改任何内容
 17 | 
 18 | // 我们从一个以某种方式 渲染 rooms 记录 的组件开始
 19 | function ViewBefore(props) {
 20 |   return (
 21 |     <table>
 22 |       <thead>
 23 |         <tr>
 24 |           <th>Room</th>
 25 |           <th>People</th>
 26 |         </tr>
 27 |       </thead>
 28 |       <tbody>
 29 |         {props.rooms.map(function(room, k) {
 30 |           return <tr key={k}>
 31 |             <td>{room.name}</td>
 32 |             <td>{room.people}</td>
 33 |           </tr>
 34 |         })}
 35 |       </tbody>
 36 |     </table>
 37 |   )
 38 | }
 39 | 
 40 | // 该组件有一个简单的`props`-接口
 41 | ViewBefore.propTypes = {
 42 |   rooms: PropTypes.array.isRequired,
 43 | }
 44 | 
 45 | // 现在我们用更复杂的东西来实现
 46 | function ViewAfter(props) {
 47 |   return (
 48 |     <div>
 49 |       {props.rooms.map(function(room, k) {
 50 |         var barStyle = {
 51 |           display: "inline-block",
 52 |           background: "lightgrey",
 53 |           width: room.people * 25,
 54 |         }
 55 |         return <div key={k}>
 56 |           {room.people > 0
 57 |             ? <span style={barStyle}>{room.people} People</span>
 58 |             : <span>0 People</span>
 59 |           }
 60 |           <span> in {room.name}</span>
 61 |         </div>
 62 |       })}
 63 |     </div>
 64 |   )
 65 | }
 66 | // 我们保持`props`- 接口相同
 67 | ViewAfter.propTypes = {
 68 |   rooms: PropTypes.array.isRequired,
 69 | }
 70 | 
 71 | // 我们也可以用 更动态的东西 实现
 72 | var ViewDynamic = createReactClass({
 73 | 
 74 |   // 我们仍然保持着`props`- 接口相同
 75 |   propTypes: {
 76 |     rooms: PropTypes.array.isRequired,
 77 |   },
 78 | 
 79 |   getInitialState: function() {
 80 |     return {currentRoom: 0}
 81 |   },
 82 | 
 83 |   componentDidMount() {
 84 |     var component = this
 85 |     var props = this.props
 86 | 
 87 |     this.interval = setInterval(function() {
 88 |       var currentRoom = component.state.currentRoom < props.rooms.length - 1
 89 |         ? component.state.currentRoom + 1
 90 |         : 0
 91 |       component.setState({currentRoom: currentRoom})
 92 |     }, 1000)
 93 |   },
 94 | 
 95 |   componentWillUnmount() {
 96 |     clearInterval(this.interval)
 97 |   },
 98 | 
 99 |   render: function() {
100 |     var room = this.props.rooms[this.state.currentRoom]
101 | 
102 |     return (
103 |       <span style={{color: this.state.color}}>
104 |         Room <b>{room.name}</b> has <b>{room.people}</b> People.
105 |       </span>
106 |     )
107 |   },
108 | 
109 | })
110 | 
111 | // 一些数据
112 | var rooms = [
113 |   {name:"Office", people: 10},
114 |   {name:"Kitchen", people: 15},
115 |   {name:"Floor", people: 3},
116 |   {name:"Bathroom", people: 0},
117 | ]
118 | 
119 | // 正如我们所看到的,组件的使用方式完全相同
120 | // 如果我们将 ViewAfter的实现 复制到 ViewBefore 中,所有内容都可以继续工作
121 | var reactElement =
122 |   <div style={{margin: "auto", width: 500}}>
123 | 
124 |     <h3>Before the refactor</h3>
125 |     <ViewBefore rooms={rooms}/>
126 | 
127 |     <h3>After the refactor</h3>
128 |     <ViewAfter rooms={rooms}/>
129 | 
130 |     <h3>Dynamic refactor</h3>
131 |     <ViewDynamic rooms={rooms}/>
132 | 
133 |   </div>
134 | 
135 | ReactDOM.render(reactElement, document.getElementById("app"))
136 | </script>


--------------------------------------------------------------------------------
/docs/13-element-refactor.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | 
  3 | <title>13 Element Refactor - React From Zero</title>
  4 | 
  5 | <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
  6 | <script src="https://cdn.bootcss.com/react-dom/16.4.0-alpha.0911da3/umd/react-dom.development.js"></script>
  7 | <script src="https://unpkg.com/create-react-class@15.6.3/create-react-class.js"></script>
  8 | <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
  9 | 
 10 | <div id="app"></div>
 11 | 
 12 | <script type="text/babel">
 13 | // 重构一个元素有点棘手
 14 | // 首先,`JSX`要明确标签 是否是元素或组件
 15 | // 小写 的意思是元素
 16 | // 大写 意味着组件
 17 | 
 18 | var element = <div/>
 19 | // 变
 20 | element = React.createElement("div", null)
 21 | 
 22 | try {
 23 | 
 24 | var component = <Div/>
 25 | // 变
 26 | component = React.createElement(Div, null)
 27 | 
 28 | } catch(e) {}
 29 | 
 30 | // 第二,`React`将这些元素触发的所有事件转换为合成事件. 
 31 | // 这通常不是问题,它们仅仅是事件. 但你不能触发你自己的. 
 32 | // 所以,即使你的`<Input>`组件接受一个`onClick`回调作为属性
 33 | // 你不能用一个相同的事件给`<input>`元素来调用它
 34 | 
 35 | 
 36 | // 一种方法可能是这样的. 
 37 | // 我们只是实现我们自己的`onChange`,
 38 | // 我们创建一个只能 数字输入调用的 `NumberInput`
 39 | // (非数字触发一个空的变化)
 40 | var NumberInput = createReactClass({
 41 | 
 42 |   getInitialState: function() {
 43 |     return {value: ""}
 44 |   },
 45 | 
 46 |   handleInput: function(e) { // 自己的`onChange`
 47 | 
 48 |     // 我们可以尝试修改事件来获取我们的数据,
 49 |     // 但这可能会让事情搞砸,
 50 |     // 重要的应该是我们 阻止此事件进一步采取行动
 51 |     e.preventDefault()
 52 | 
 53 |     var newNumber = e.target.value
 54 | 
 55 |     // 过滤空白变化
 56 |     if (newNumber.length < 1 || newNumber === this.state.value) return
 57 | 
 58 |     this.setState({value: newNumber})
 59 | 
 60 |     // 然后我们提取我们的数据并提供给`onChange`
 61 |     this.props.onChange(newNumber) // 来自 <NumberInput onChange={logChange}/> 的 logChange
 62 | 
 63 |   },
 64 | 
 65 |   render: function () {
 66 | 
 67 |     return <input type="number" value={this.state.value} onChange={this.handleInput}/>
 68 | 
 69 |   },
 70 | 
 71 | })
 72 | 
 73 | function logChange(v){
 74 |   console.log(v)
 75 | }
 76 | 
 77 | 
 78 | // 在这里我们看到,新的 NumberInput 具有不同的接口
 79 | // 它的 onChange 属性 似乎会收到事件,但事实并非如此. 
 80 | // 即便我们想把它像 `html元素`原始输入一样 运行.
 81 | // 我们还需要使用 大写字母,为了区分
 82 | var reactElement = <div style={{width: 300, margin: "auto"}}>
 83 | 
 84 |   <h2>Logging number inputs</h2>
 85 | 
 86 |   <h2>Before 重构</h2>
 87 |   <input type="number" onChange={function(e) { logChange(e.target.value) }}/>
 88 | 
 89 |   <h2>After 重构</h2>
 90 |   <NumberInput onChange={logChange}/>
 91 | 
 92 | </div>
 93 | 
 94 | ReactDOM.render(reactElement, document.getElementById("app"))
 95 | 
 96 | // 其他方法包括在第一个地方不使用 "默认"prop属性名称 
 97 | // 比如`onUpdate`替换`onChange`
 98 | // 它一个组件使用 `onMouseDown` 做一些内部的事情
 99 | // 并触发一个`onChange`也可能发生, 当然这可能会导致混淆
100 | // 通常 组件 比 第一个元素`<div>`提供更丰富的交互,
101 | // 所以它们的 prop方法 可以用 名称 来反映
102 | </script>
103 | 


--------------------------------------------------------------------------------
/docs/14-references.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <title>14 References - React From Zero</title>
 4 | 
 5 | <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
 6 | <script src="https://cdn.bootcss.com/react-dom/16.4.0-alpha.0911da3/umd/react-dom.development.js"></script>
 7 | <script src="https://unpkg.com/create-react-class@15.6.3/create-react-class.js"></script>
 8 | <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
 9 | 
10 | <div id="app"></div>
11 | 
12 | <script type="text/babel">
13 | // 有时我们需要 某个元素或某个组件 的状态,
14 | // 或者必须以某种方式直接进行修改. 
15 | // 对于这种情况,我们可以告诉`React`创建引用-ref.
16 | var RefComponent = createReactClass({
17 | 
18 |   // 首先我们告诉`React`在渲染输入时使用 ref 回调,
19 |   // 当`DOM`的输入元素是可用时, 将会调用它, 保存
20 |   render: function() {
21 |     return (
22 |       <div>
23 |         <input ref={this.handleRef}/>
24 |         <button onClick={this.handleClick}>Do Something</button>
25 |       </div>
26 |     )
27 |   },
28 | 
29 |   // 当input元素被装载到DOM中时 调用此回调函数,
30 |   // 当然它再次被卸载时, 也会回到 null. 
31 |   // 对于元素,渲染`DOM`节点 将被存储
32 |   // 对于组件,组件的实例 将被存储.
33 |   handleRef(nameInput) {
34 |     // 我们保存对其的引用以备后用.
35 |     this.nameInput = nameInput
36 |   },
37 | 
38 |   // 此按钮被单击时
39 |   // 调用此回调读出`this.nameInput`输入的值.
40 |   handleClick: function() {
41 |     console.log(this.nameInput.value)
42 |   },
43 | 
44 | })
45 | 
46 | // 由于 引用 对 其组件是局部变量,
47 | // 因此它们可以用作 本地ID「this.nameInput」 来获取元素,
48 | // 并且在创建另一个组件实例时也不会相互覆盖
49 | var reactElement =
50 |   <div>
51 |     <RefComponent/>
52 |     <RefComponent/>
53 |     <RefComponent/>
54 |   </div>
55 | 
56 | ReactDOM.render(reactElement, document.getElementById("app"))
57 | </script>


--------------------------------------------------------------------------------
/docs/15-simple-integration.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | 
 3 | <title>15 Simple Integration - React From Zero</title>
 4 | 
 5 | <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
 6 | <script src="https://cdn.bootcss.com/react-dom/16.4.0-alpha.0911da3/umd/react-dom.development.js"></script>
 7 | <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
 8 | 
 9 | <script src="https://unpkg.com/moment@2.18.1/min/moment.min.js">
10 | // 大多数情况下,我们必须在应用程序中使用第三方库. 
11 | // 在这里,我们整合了一个简单的日期处理和在`React`中使用它. 
12 | // 它不使用`DOM`, 所以它可以很容易地集成.
13 | </script>
14 | 
15 | <div id="app"></div>
16 | 
17 | <script type="text/babel">
18 | // 在`{}`的帮助下, 同步的简单库 可以直接用于`JSX`,
19 | // 因为它们只是函数调用
20 | var DateToday = function() {
21 |   return <span>{moment().format("DD.MM.YYYY")}</span>
22 | }
23 | 
24 | var tomorrow = moment().add(1, "day")
25 | 
26 | // 在这里没有发生什么令人兴奋的事情,
27 | // 只是调用库并显示其返回值. 
28 | // 首先使用一些元素,然后在组件内部使用.
29 | var reactElement =
30 |   <div>
31 |     <h1 style={{textAlign:"center"}}>
32 |       Tomorrow is {tomorrow.format("MMMM")} the {tomorrow.format("Do")}
33 |     </h1>
34 |     <DateToday/>
35 |   </div>
36 | 
37 | ReactDOM.render(reactElement, document.getElementById("app"))
38 | </script>
39 | 


--------------------------------------------------------------------------------
/docs/16-advanced-integration.html:
--------------------------------------------------------------------------------
  1 | 
  2 | // <!doctype html>
  3 | 
  4 | <title>16 Advanced Integration - React From Zero</title>
  5 | 
  6 | <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
  7 | <script src="https://cdn.bootcss.com/react-dom/16.4.0-alpha.0911da3/umd/react-dom.development.js"></script>
  8 | <script src="https://unpkg.com/create-react-class@15.6.3/create-react-class.js"></script>
  9 | <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.min.js"></script>
 10 | 
 11 | <script src="https://unpkg.com/d3@4.7.3/build/d3.min.js">
 12 | // 有时我们需要整合更复杂的库. 
 13 | // 那些库会 直接使用DOM 或 需要异步交互. 
 14 | // 在这个例子中,我们使用了一个免费的 InfoVis 库 => D3.js.
 15 | </script>
 16 | 
 17 | <div id="app"></div>
 18 | 
 19 | <script type="text/babel">
 20 | // 由于 D3 需要 直接与`DOM`交互,
 21 | // 我们应该使用一个组件类,
 22 | // 因为它可以 存储对它自身的`DOM-elements`的 引用-ref.
 23 | var Visual = createReactClass({
 24 | 
 25 |   // 我们只是渲染一个空的 画布-canvas ,
 26 |   // 并告诉`React`在渲染之后 存储其引用
 27 |   render: function() {
 28 |     return <canvas ref={this.handleRef} width={500} height={500}/>
 29 |   },
 30 | 
 31 |   handleRef: function(canvas) {
 32 |     this.canvas = canvas // 存储 ref
 33 |   },
 34 | 
 35 |   // 在第一次渲染之后,我们获取对 canvas-`DOM`元素 的引用,
 36 |   // 并在这里将其传递给 D3库 ,
 37 |   componentDidMount: function() {
 38 |   // 我们也使用一些额外的颜色配置
 39 |     drawGraph(this.canvas, this.props.color)
 40 |   },
 41 | 
 42 |   // 我们对重新渲染也有一些细粒度的控制. 使用这个 lifecylce 方法
 43 |   shouldComponentUpdate: function(nextProps, nextState) {
 44 |     // 在这里,我们可以告诉我们的库 新数据`props`或状态,
 45 |     // 这样它就可以更新`DOM`元素本身
 46 | 
 47 |     // 最后,我们总是返回false,
 48 |     // 所以我们的 render方法 没有被调用, canvas元素也没有被替换
 49 |     return false
 50 |   },
 51 | 
 52 |   // 在 从 DOM 中删除组件 之前,可以使用此生命周期方法来释放资源. 
 53 |   // 我们的画布肯定会被移除,但是对于库来说,
 54 |   // 其他对象,监听事件之类的,通常会有状态,
 55 |   // 他们可以存储在组件上,也可以被删除以防止内存泄漏
 56 |   componentWillUnmount() {},
 57 | 
 58 | })
 59 | 
 60 | // 现在我们可以使用该D3库做成的组件
 61 | // 不需要全局ID,每个实例都有自己的画布引用存储,也有它自己的颜色属性
 62 | var reactElement =
 63 |   <div>
 64 |     <Visual color="#f00"/>
 65 |     <Visual color="#0f0"/>
 66 |     <Visual color="#00f"/>
 67 |   </div>
 68 | 
 69 | ReactDOM.render(reactElement, document.getElementById("app"))
 70 | 
 71 | // 将 D3库交互 包装成一个函数
 72 | function drawGraph(canvas, strokeColor) {
 73 | 
 74 |   // 来自http://bl.ocks.org/mbostock/1b64ec067fcfc51e7471d944f51f1611 的 一个例子
 75 |   // GPL-V3协议
 76 |   var n = 20
 77 | 
 78 |   var nodes = d3.range(n * n).map(function(i) {
 79 |     return {index: i}
 80 |   })
 81 | 
 82 |   var links = []
 83 | 
 84 |   for (var y = 0; y < n; ++y) {
 85 |     for (var x = 0; x < n; ++x) {
 86 |       if (y > 0) links.push({source: (y - 1) * n + x, target: y * n + x});
 87 |       if (x > 0) links.push({source: y * n + (x - 1), target: y * n + x});
 88 |     }
 89 |   }
 90 | 
 91 |   d3.forceSimulation(nodes)
 92 |     .force("charge", d3.forceManyBody().strength(-30))
 93 |     .force("link", d3.forceLink(links).distance(20).iterations(10))
 94 |     .on("tick", ticked)
 95 | 
 96 |   var context = canvas.getContext("2d")
 97 |   var width = canvas.width
 98 |   var height = canvas.height
 99 | 
100 |   function ticked() {
101 |     context.clearRect(0, 0, width, height)
102 |     context.save()
103 |     context.translate(width / 2, height / 2)
104 | 
105 |     context.beginPath()
106 |     links.forEach(drawLink)
107 |     context.strokeStyle = "#aaa"
108 |     context.stroke()
109 | 
110 |     context.beginPath()
111 |     nodes.forEach(drawNode)
112 |     context.fill()
113 |     context.strokeStyle = strokeColor
114 |     context.stroke()
115 | 
116 |     context.restore()
117 |   }
118 | 
119 |   function drawLink(d) {
120 |     context.moveTo(d.source.x, d.source.y)
121 |     context.lineTo(d.target.x, d.target.y)
122 |   }
123 | 
124 |   function drawNode(d) {
125 |     context.moveTo(d.x + 3, d.y);
126 |     context.arc(d.x, d.y, 3, 0, 2 * Math.PI)
127 |   }
128 | 
129 | }
130 | 
131 | </script>
132 | 


--------------------------------------------------------------------------------
/summary.md:
--------------------------------------------------------------------------------
  1 | ## menu
  2 | 
  3 | ### Lesson 0 - Object Elements
  4 | 
  5 | `React` uses `ES2015` Symbols to `"tag"` its element-objects.
  6 | 
  7 | It uses a magic number as fallback on older browsers.
  8 | 
  9 | `React` uses virtual `DOM` elements, which become real `DOM` elements on a render.
 10 | 
 11 | A virtual `DOM` element can be defined as a simple object literal.
 12 | 
 13 | Normally you would use the `React`.
 14 | `createElement()` to create an element.
 15 | 
 16 | This is what the return value of a `React`.
 17 | `createElement()` call could look like.
 18 | 
 19 | This special property will be checked by `React` to ensure this object
 20 | is a `React` element and not just some user data
 21 | `React.createElement()`  sets it for you
 22 | 
 23 | This will also be checked by `React`.
 24 | 
 25 |  We will be talking about references
 26 | later, but if you're not using them, this has to be set to null and not
 27 | undefined
 28 | 
 29 | This defines the HTML-tag
 30 | 
 31 | This defines the properties that get passed down into the element
 32 | 
 33 | In this example there is just a single text node as child
 34 | a `CSS` class
 35 | 
 36 | styles can be passed as object literals
 37 | `React` uses camelCase instead of dashed-case (like `CSS/D3` do)
 38 | 
 39 | event handlers can be added as properties, too
 40 | `React` uses synthetic events, which basically try to normalize browser behaviour
 41 | 
 42 | another element that doesn"t have much configuration
 43 | `React` needs a `DOM` element as render target
 44 | 
 45 | `ReactDOM`OM is responsible for inserting the element into the DOM
 46 | 
 47 | ### Lesson 1 - Element Factory
 48 | 
 49 | `React.createElement()`  needs type, properties, children.
 50 | This is less verbose than using plain object literals,
 51 | it hides the $$type/Symbol and ref mentioned in lesson 0
 52 | 
 53 | The second argument is the property object and has to be null if empty
 54 | 
 55 | ### Lesson 2 - `JSX`
 56 | 
 57 | Now we will use `JSX`, which needs to be converted to `JavaScript`.
 58 | For this we will use `Babel`. `Babel` is normally used to convert `ES2015` to `ES5`, but
 59 | it also can convert `JSX` to `ES5`. `Babel`s browser version uses text/babel script tags.
 60 | 
 61 | `JSX` is the idiomatic way of creating elements.
 62 | It's basically `XHTML` with `{}` for dynamic content
 63 | also class has to be called className
 64 | 
 65 | Is the same as
 66 | 
 67 | `JSX` shines especially with simple elements that make up the majority
 68 | 
 69 | Is the same as
 70 | 
 71 | As we can see, everything else works as before
 72 | 
 73 | ### Lesson 3 - Nested Elements
 74 | 
 75 | Elements can be nested, which will result in nested `React.createElement()`reateElement calls
 76 | As you can imagine, writing this without `JSX` would be pretty tedious
 77 | 
 78 | they can also, like mentioned in lesson 2, contain `JavaScript` in `{}`
 79 | 
 80 | `JavaScript` insertion has the same syntax in attributes as in normal text or elements
 81 | 
 82 | this `JavaScript` can contain elements too
 83 | it is also possible to "spread" an object as properties
 84 | 
 85 | ### Lesson 4 - Components
 86 | 
 87 | The main selling point of `React` is its component system
 88 | components are used to encapsulate elements and their behaviour
 89 | see them as a mix of controller and view of MVC
 90 | 
 91 | Here we use stand alone elements and some data
 92 | 
 93 | Here the elements are encapsuled in a simple component function
 94 | They have to start with a capital letter and
 95 | return exactly ONE root element with or without nested elements (before `React` 16)
 96 | 
 97 | Since `React` 16.0.0, components can return an array of elements as well
 98 | In doing so, no additional wrapper element is created.
 99 | One caveat is that, similarly to what we do when rendering an array,
100 | we have to add a unique key to each element in the array
101 | (we'll see more on this in the next lesson)
102 | 
103 | Since `React` 16.2.0, we can use special "wrapper" components called fragments
104 | that behave the same (no extra wrapper element created)
105 | but remove the need to explitly set keys (fragments do this under the hood)
106 | 
107 | a component function can be used like an element
108 | 
109 | this translates to a `React.createElement()`  call
110 | the null indicates that no properties have been set
111 | 
112 | for reference a `React`-internal `<div>` tag
113 | 
114 | gets converted to
115 | 
116 | ### Lesson 5 - Properties
117 | 
118 | Components, like elements, can use properties, too
119 | 
120 | Which also works with an object and the spread (...) operator
121 | 
122 | This allows components with dynamic content
123 | 
124 | If an array is used as "child node" each child needs a unique key-property
125 | 
126 | ### Lesson 6 - Property Types
127 | 
128 | PropTypes were removed from `React` 16 and are now their own package
129 | 
130 | Components get created to encapsulate stuff that should be together in one
131 | place and for reuse.
132 | Reuse requires the user of the component to supply the correct properties so
133 | we can define a type of each property and set defaults
134 | 
135 | Add the propTypes (function-)property to the component function
136 | to let it validate its (element-)properties
137 | 
138 | `React` supplies us with a bunch of types, like string
139 | 
140 | Add defaultProps (function-)property to set the defaults
141 | if nothing was provided by the user
142 | 
143 | This will show a warning in the console, because customData should be a string
144 | 
145 | This will use the defaults
146 | 
147 | ### Lesson 7 - Property Example
148 | 
149 | Here's a more practical example of a component
150 | it formats a date and returns a `<span>` containing that formatted string
151 | 
152 | Also a more sophisticated type check for the date property
153 | The property is required, because there are no defaults set
154 | 
155 | We have to supply a date object and the component does the formatting
156 | 
157 | ### Lesson 8 - Nested Components
158 | 
159 | Components, like elements, can be nested
160 | 
161 | for this, the children property is used inside the component
162 | 
163 | This component just wraps its children in an `<li>` element
164 | 
165 | This component wraps its children into an `<ul>` element
166 | 
167 | If the `<List>` is created without children it gets a default child
168 | 
169 | now we render two `<List>`s, without and with Items
170 | 
171 | ### Lesson 9 - Component Classes
172 | 
173 | `React.createElement()`reateClass was removed from `React` 16 and is now its own package
174 | 
175 | Often a component needs to maintain some internal state
176 | for example if there is an interaction involved
177 | in this case a component function is not sufficient
178 | the component function can only have properties and no state
179 | we need a component class with a render function
180 | 
181 | used for type-checking of the properties
182 | same as with the component function
183 | 
184 | this method sets default values for missing properties
185 | it will be called by `React`
186 | before the components gets mounted into the DOM
187 | 
188 | this method sets the initial state for the component
189 | it will be called by `React`
190 | before the components gets mounted into the DOM
191 | if this method is missing, `this.state` will be undefined
192 | 
193 | The state can be any `JavaScript` value, often it is an object
194 | 
195 | this method handles all the clicks on the `<span>` element
196 | 
197 | setState() can be called with an object that contains the new state
198 | normally this triggers a call of render(), but `React` can batch multiple
199 | calls and defer the render() call (make the call asynchronous)
200 | To prevent this, setState can take a callback instead
201 | 
202 | This can lead to unexpected behaviour, if we rely on `this.state` or
203 | `this.props` for our calculations
204 | `this.setState`({times: `this.state.times` + 1})
205 | 
206 | The callback version doesn't have this problem
207 | The callback gets the right state and `props` at time of the update
208 | 
209 | this method will be called by `React`
210 | after the component got mounted into the DOM
211 | also every time `this.setState`() was called
212 | it's like the component function from before
213 | but without a `props` argument
214 | 
215 | using the prop given by the creator of this component
216 | properties are now in `this.props` instead of the `props` argument
217 | 
218 | returning an element with a click-handler and the `props` and
219 | state values. state is stored in `this.state`
220 | 
221 | creating some instances of the interactive stateful component class
222 | one with default color
223 | Everything works exactly like with the simpler component functions
224 | The interface has not changed for the user of this component
225 | 
226 | ### Lesson 10 - Example App
227 | 
228 | An example of a simple `React` app
229 | It uses simple component functions for its stateless components
230 | and a complex component class to handle the interactions
231 | 
232 | First we have the Task and TaskList
233 | They get all their data/state through their properties
234 | `<TaskList>`
235 |   `<Task text="Do something"/>`
236 |   `<Task text="Do nothing"/>`
237 | `</TaskList>`
238 | 
239 | Task needs a text property
240 | 
241 | TaskList needs an array of Task in its children property
242 | 
243 | Print the first element bold
244 | 
245 | This component handles the input
246 | It needs to be a class, because the `<input>` element is stateful
247 | 
248 | gets called when someone types into the `<input>` element
249 | 
250 | gets called when someone clicks the `<button>` element
251 | 
252 | call the function that was added into its onAdd property
253 | 
254 | clear the state so the input is empty again after an add
255 | 
256 | renders the elements every time someone types or adds
257 | 
258 | The app keeps track of the current tasks in its state
259 | 
260 | this callback will be inserted into the onAdd property of the `<TaskInput>` component
261 | 
262 | adding a new task
263 | 
264 | this forces the `<TodoApp>` component to render
265 | 
266 | create the list of `<Task>` components from the tasks array in the state
267 | 
268 | some simple styling
269 | and adding the add handler to the `<TaskInput>` component
270 | 
271 | we can use components directly
272 | 
273 | 
274 | ### Lesson 11 - Lifecycle Methods
275 | 
276 | If we use component classes, our components inherit
277 | a bunch of methods, which get called by `React` at specifics
278 | times to allow us to get more control over our components
279 | a few of them we already met in lesson 9
280 | Here are a few new ones. Not all of them, but the most important ones
281 | 
282 | This method is for default prop values
283 | it gets called before the `props` are given to our component
284 | the "real" `props` override them if there are any
285 | 
286 | This method is called before a component got mounted to the DOM
287 | it returns values that are used for `this.state` 
288 | 
289 | This method gets called right before the component is mounted
290 | can be used to initialize some synchronous configuration, that should
291 | be available before the component renders
292 | 
293 | This method will be called right after the component got mounted
294 | it's a good place to start some asynchronous tasks.
295 | For example on the first mount it shows a loading message
296 | then componentDidMount is called and gets some server data.
297 | 
298 | We clean up the data and get new from somewhere
299 | 
300 | Initial data load
301 | 
302 | We simulate a server request every 4 seconds
303 | 
304 | This method will be called before the component gets removed from the DOM
305 | a bit like a destructor. Here we can do some cleanup.
306 | 
307 | This method is called before a render when new `props` or state is available
308 | it won"t be called on the first render or if `this.forceUpdate()` is used
309 | it can be used if some state or prop changes don"t require a rerender
310 | 
311 | we want to render on every change, this is the default behaviour
312 | 
313 | ### Lesson 12 - Component refactor
314 | 
315 | Refactoring is another thing that is nice with `React`
316 | First we'll talk about refactoring one component into another
317 | if you're lucky, you can just change the implementation of a component
318 | and don't need to change anything at the call-site
319 | 
320 | We start with a component that renders records somehow
321 | 
322 | The component has a simple `props`-interface
323 | 
324 | Now we switch out the implementation with something more complicated
325 | 
326 | We keep the `props`-interface the same
327 | 
328 | We could also switch it with something more dynamic
329 | 
330 | We still keep the `props`-interface the same
331 | 
332 | Some data
333 | 
334 | As we can see the components can be used exactly the same
335 | If we copy the implementation of ViewAfter into ViewBefore,
336 | everything keeps working
337 | 
338 | ### Lesson 13 - Element Refactor
339 | 
340 | Refactoring an element is a bit more tricky
341 | First, casing of `JSX` determines whether a tag is an element or component
342 | lower case means element
343 | upper case means component
344 | 
345 | becomes
346 | 
347 | becomes
348 | 
349 | Second, `React` converts all events these elements trigger, to
350 | synthetic events. This is often not a problem, they are simply events.
351 | But you can't trigger your own.
352 | So even if your `<Input>` component accepts an `onClick` callback as property
353 | You can't call it with the same event as an `<input>` element would
354 | 
355 | One approach could be this.
356 | We simply implement our own `onChange` caller
357 | Here we create a number input that only calls `onChange` on number inputs
358 | (non-numbers trigger an empty change)
359 | 
360 | we could try to modify the event to get our data in
361 | but this could mess things up
362 | instead we prevent this event from further actions
363 | 
364 | filter empty-changes
365 | 
366 | then we extract our data and give it to `onChange`
367 | 
368 | Here we see, that the new NumberInput has a different interface
369 | it's `onChange` property implies that events will be received, but this isn't
370 | the case. Also, even if we would want to call it like the original input,
371 | we would need to use upper case, and wouldn't win anything
372 | 
373 | Other approaches include not using "default" prop names in the first place
374 | onUpdate instead of `onChange`
375 | 
376 | It could also happen that a component uses onMouseDown to do something internal
377 | and triggers an `onChange`, which could cause confusion
378 | Often components deliver richer interactions than elements in the first place
379 | so their prop methods can reflect that with the name
380 | 
381 | ### Lesson 14 - References
382 | 
383 | Sometimes we need some state from an element or a component
384 | or it has to be directly modified somehow. For
385 | this case, we can tell `React` to create references.
386 | 
387 | First we tell `React` to render an input with a
388 | ref callback, it will be called, when the `DOM` of the input element
389 | is available
390 | 
391 | This callback is called when the input element was mounted into the DOM
392 | and again, with null, when it was unmounted again
393 | For elements the rendered `DOM` node will be stored
394 | For components the instance of the component will be stored.
395 | 
396 | We save a reference to it for later use.
397 | 
398 | This callback is called when the button is clicked
399 | and uses `this.nameInput` to read out the value of the input.
400 | 
401 | Since references are local to their component
402 | they can be used as local IDs to get elements
403 | and don't override each other when another
404 | instance of the component is created
405 | 
406 | ### Lesson 15 - Simple Integration
407 | 
408 | Most of the time we have to use third party libraries
409 | in our applications. Here we integrate a simple one
410 | for date handling and use it with `React`. It doesn"t
411 | use the `DOM` so it can be integrated fairly easy.
412 | 
413 | Simple libraries that are called synchronous can used
414 | directly in `JSX` with the help of `{}`, since they are
415 | just function calls
416 | 
417 | Nothing exciting happening here, just calling the library
418 | and displaying its return values. First with some
419 | elements, then used inside of a component.
420 | 
421 | ### Lesson 16 - Advanced Integration
422 | 
423 | Sometimes we need to integrate more complex
424 | libraries. Libraries that want to use the
425 | DOM directly or require asynchronous interaction.
426 | In this example we use D3.js, a free InfoVis library.
427 | 
428 | Since D3 needs to interact directly with the `DOM` we
429 | should use a component class, because it can store
430 | references to its `DOM-elements`.
431 | 
432 | We simply render an empty canvas and tell `React` to
433 | store its reference after the render
434 | 
435 | After the first render, we grab the reference
436 | to the canvas element in the `DOM` and pass it
437 | to the library
438 | Here we also use some additional color configuration
439 | 
440 | We also have some fine-granular control over the re-render
441 | With the use of this lifecylce method
442 | 
443 | Here we could tell our library the new data for `props`
444 | or state, so it can update the `DOM` elements on its own
445 | 
446 | At the end we always return false so our render method
447 | isn't called and the canvas element isn't replaced
448 | 
449 | This lifecycle method can be used to free resources
450 | before the component will be removed from the DOM.
451 | Our canvas will be removed for sure, but often there
452 | is state for the library, other objects, listeners etc.
453 | they could be stored on the component and should be
454 | deleted to prevent memory leaks
455 | 
456 | Now we can use the library as a component
457 | No need for global IDs, every instance has its own canvas
458 | reference stored, also its own color property
459 | 
460 | Wrapping the library interaction into a function
461 | 
462 | An example from `h`ttp://bl.ocks.org/mbostock/1b64ec067fcfc51e7471d944f51f1611`
463 | its realeased under the `GPL-V3`


--------------------------------------------------------------------------------
/summary.zh.md:
--------------------------------------------------------------------------------
  1 | 
  2 | ## menu
  3 | 
  4 | ### Lesson 0 - Object Elements
  5 | 
  6 | `React`使用`ES2015`符号`"tag"`它的元素对象. 
  7 | 
  8 | 它在旧版浏览器上使用幻数作为回退. 
  9 | 
 10 | `React`使用虚拟`DOM`元素,这成为真实的`DOM`在渲染上的元素. 
 11 | 
 12 | 虚拟`DOM`元素可以被定义为一个简单的对象文字. 
 13 | 
 14 | 通常你会使用`React`. `createElement()`创建一个元素. 
 15 | 
 16 | 这就是a的返回值`React`. `createElement()`电话可能看起来像. 
 17 | 
 18 | 这个特殊的财产将被检查`React`确保这个对象是一个`React`元素而不仅仅是一些用户数据`React.createElement()`为你设置
 19 | 
 20 | 这也将被检查`React`. 
 21 | 
 22 | 我们稍后将讨论引用,但如果您不使用它们,则必须将其设置为null,而不是未定义的
 23 | 
 24 | 这定义了HTML标签
 25 | 
 26 | 这定义了传递给元素的属性
 27 | 
 28 | 在这个例子中,只有一个文本节点作为子节点a`CSS`类
 29 | 
 30 | 样式可以作为对象文字传递`React`使用camelCase而不是虚线 (例如`CSS/D3`做) 
 31 | 
 32 | 事件处理程序也可以作为属性添加`React`使用综合事件,基本上试图规范化浏览器的行为
 33 | 
 34 | 另一个没有太多配置的元素`React`需要一个`DOM`元素作为渲染目标
 35 | 
 36 | `ReactDOM`OM负责将元素插入到DOM中
 37 | 
 38 | ### Lesson 1 - Element Factory
 39 | 
 40 | `React.createElement()`需要类型,属性,孩子. 这比使用普通对象文字的冗长,它隐藏了第0课中提到的$$ type / Symbol和ref
 41 | 
 42 | 第二个参数是属性对象,如果为空,则必须为null
 43 | 
 44 | ### Lesson 2 - `JSX`
 45 | 
 46 | 现在我们将使用`JSX`,这需要转换为`JavaScript`. 为此我们将使用`Babel`. `Babel`通常用于转换`ES2015`至`ES5`,但它也可以转换`JSX`至`ES5`. `Babel`浏览器版本使用文本/ babel脚本标签. 
 47 | 
 48 | `JSX`是创造元素的惯用方式. 基本上是这样`XHTML`同`{}`对于动态内容,也必须将class称为className
 49 | 
 50 | 是相同的
 51 | 
 52 | `JSX`特别是构成大多数的简单元素尤其闪耀
 53 | 
 54 | 是相同的
 55 | 
 56 | 正如我们所看到的,其他一切和以前一样
 57 | 
 58 | ### Lesson 3 - Nested Elements
 59 | 
 60 | 元素可以嵌套,这将导致嵌套`React.createElement()`reateElement调用正如你可以想象的那样,不需要写这个`JSX`会很乏味
 61 | 
 62 | 他们也可以像第2课中提到的那样包含`JavaScript`在`{}`
 63 | 
 64 | `JavaScript`插入在属性中的语法与在普通文本或元素中的语法相同
 65 | 
 66 | 这个`JavaScript`也可以包含元素,也可以将对象"散布"为属性
 67 | 
 68 | ### Lesson 4 - Components
 69 | 
 70 | 主要卖点之一`React`是它的组件系统组件被用来封装元素和它们的行为,将它们视为MVC的控制器和视图的混合
 71 | 
 72 | 这里我们使用独立元素和一些数据
 73 | 
 74 | 这里的元素被封装在一个简单的组件函数中它们必须以大写字母开头,并返回恰好一个根元素 (带或不带嵌套元素)  (之前`React`16) 
 75 | 
 76 | 以来`React`16.0.0,组件也可以返回元素数组. 为此,不创建额外的包装器元素. 有一点需要注意的是,与我们在渲染数组时所做的相似,我们必须为数组中的每个元素添加一个唯一键 (在下一课中我们会看到更多内容) 
 77 | 
 78 | 以来`React`16.2.0,我们可以使用称为片段的特殊"包装器"组件,它们的行为相同 (不创建额外的包装器元素) ,但是不需要设置明确的键 (片段可以在引擎盖下进行) 
 79 | 
 80 | 一个组件函数可以像一个元素一样使用
 81 | 
 82 | 这转化为a`React.createElement()`调用null表示没有设置属性
 83 | 
 84 | 供参考`React`-内部`<div>`标签
 85 | 
 86 | 被转换为
 87 | 
 88 | ### Lesson 5 - Properties
 89 | 
 90 | 组件与元素一样也可以使用属性
 91 | 
 92 | 这也适用于对象和传播 (...) 运算符
 93 | 
 94 | 这允许具有动态内容的组件
 95 | 
 96 | 如果一个数组被用作"子节点",那么每个孩子都需要一个唯一的键属性
 97 | 
 98 | ### Lesson 6 - Property Types
 99 | 
100 | PropType已从中删除`React`16,现在是他们自己的套餐
101 | 
102 | 组件被创建来封装应该在一起的东西并重用. 重复使用要求组件的用户提供正确的属性,以便我们可以定义每个属性的类型并设置默认值
103 | 
104 | 将propTypes (function-) 属性添加到组件函数以使其验证其 ( (element) ) 属性
105 | 
106 | `React`为我们提供了一堆类型,比如字符串
107 | 
108 | 如果用户未提供任何内容,则添加defaultProps (function-) 属性以设置默认值
109 | 
110 | 这将在控制台中显示警告,因为customData应该是一个字符串
111 | 
112 | 这将使用默认值
113 | 
114 | ### Lesson 7 - Property Example
115 | 
116 | 这是一个更实用的组件格式化日期并返回一个例子`<span>`包含格式化的字符串
117 | 
118 | 还有一个更复杂的日期属性类型检查该属性是必需的,因为没有设置默认值
119 | 
120 | 我们必须提供一个日期对象,组件进行格式化
121 | 
122 | ### Lesson 8 - Nested Components
123 | 
124 | 组件与元素一样可以嵌套
125 | 
126 | 为此,子组件内部使用子属性
127 | 
128 | 这个组件只是将它的孩子包裹在一个`<li>`元件
129 | 
130 | 这个组件把它的孩子包装成一个`<ul>`元件
131 | 
132 | 如果`<List>`没有孩子的时候会创建一个默认的孩子
133 | 
134 | 现在我们渲染两个`<List>`没有和有物品
135 | 
136 | ### Lesson 9 - Component Classes
137 | 
138 | `React.createElement()`reateClass已从中删除`React`16现在是它自己的软件包
139 | 
140 | 通常情况下,组件需要维护一些内部状态,例如,如果在这种情况下涉及交互,则组件功能不够,组件功能只能具有属性而没有状态,我们需要具有渲染功能的组件类
141 | 
142 | 用于与组件函数相同的属性类型检查
143 | 
144 | 此方法为缺少的属性设置默认值,它将被调用`React`在组件被装入DOM之前
145 | 
146 | 这个方法为它将被调用的组件设置初始状态`React`如果缺少这种方法,组件被装入DOM之前,`this.state`将是未定义的
147 | 
148 | 国家可以是任何`JavaScript`价值,往往是一个对象
149 | 
150 | 此方法处理所有的点击`<span>`元件
151 | 
152 | 可以使用包含新状态的对象调用setState () ,但通常会触发render () 的调用`React`可以批量多次调用并延迟render () 调用 (使调用异步) 为了防止出现这种情况,setState可以取回一个回调
153 | 
154 | 如果我们依赖,这可能会导致意想不到的行为`this.state`要么`this.props`为我们的计算`this.setState` ({时间: `this.state.times`+ 1}) 
155 | 
156 | 回调版本没有这个问题回调得到正确的状态和`props`在更新时
157 | 
158 | 这个方法会被调用`React`每次将组件装入DOM之后`this.setState` () 被称为它就像之前的组件函数,但没有`props`论据
159 | 
160 | 使用该组件属性的创建者给出的道具现在处于`this.props`而不是`props`论据
161 | 
162 | 通过点击处理程序返回一个元素`props`和状态值. 状态存储在`this.state`
163 | 
164 | 创建一些具有默认颜色的交互式有状态组件类的实例一切与更简单的组件函数完全相同对于此组件的用户,接口没有改变
165 | 
166 | ### Lesson 10 - Example App
167 | 
168 | 一个简单的例子`React`应用程序它为无状态组件使用简单的组件函数,并使用复杂的组件类来处理交互
169 | 
170 | 首先我们有任务和任务列表他们通过他们的属性获得他们所有的数据/状态`<TaskList>`
171 |   `<Task text="Do something"/>`
172 |   `<Task text="Do nothing"/>`
173 | `</TaskList>`
174 | 
175 | 任务需要一个文本属性
176 | 
177 | TaskList需要在其子属性中包含任务数组
178 | 
179 | 打印第一个粗体元素
180 | 
181 | 这个组件处理输入它需要是一个类,因为`<input>`元素是有状态的
182 | 
183 | 当有人输入进来时被调用`<input>`元件
184 | 
185 | 当有人点击时会被调用`<button>`元件
186 | 
187 | 调用添加到其onAdd属性中的函数
188 | 
189 | 请清除状态,以便在添加后再次输入为空
190 | 
191 | 每次有人输入或添加时呈现元素
192 | 
193 | 该应用程序跟踪其状态中的当前任务
194 | 
195 | 这个回调会被插入到onAdd属性中`<TaskInput>`零件
196 | 
197 | 增加一项新任务
198 | 
199 | 这迫使了`<TodoApp>`要渲染的组件
200 | 
201 | 创建列表`<Task>`组件来自任务数组中的状态
202 | 
203 | 一些简单的样式和添加处理程序的`<TaskInput>`零件
204 | 
205 | 我们可以直接使用组件
206 | 
207 | ### Lesson 11 - Lifecycle Methods
208 | 
209 | 如果我们使用组件类,我们的组件会继承一堆被调用的方法`React`在特定的时间让我们对我们的组件有更多的控制,其中一些我们已经在第9课中遇到过. 这里有几个新组件. 不是全部,而是最重要的
210 | 
211 | 这个方法是在默认的prop值之前被调用的`props`给我们的组件"真实"`props`如果有的话,覆盖它们
212 | 
213 | 这个方法在组件被装载到DOM之前被调用,它返回用于的值`this.state` 
214 | 
215 | 在装载组件之前调用此方法可用于初始化某些同步配置,该配置在组件呈现前应该可用
216 | 
217 | 这个方法在组件被挂载后立即调用,这是启动一些异步任务的好地方. 例如,在第一个mount上显示一个加载消息,然后调用componentDidMount并获取一些服务器数据. 
218 | 
219 | 我们清理数据并从某处获得新的信息
220 | 
221 | 初始数据加载
222 | 
223 | 我们每4秒模拟一次服务器请求
224 | 
225 | 这个方法在组件从析构函数中被移除之前被调用. 在这里,我们可以做一些清理. 
226 | 
227 | 新方法在渲染之前调用此方法`props`或状态是可用的,它不会在第一个渲染或如果调用`this.forceUpdate()`如果某些状态或道具变化不需要重投,可以使用它
228 | 
229 | 我们想要在每次更改时渲染,这是默认行为
230 | 
231 | ### Lesson 12 - Component refactor
232 | 
233 | 重构是另一件很好的事情`React`首先,我们将讨论如何将一个组件重构为另一个组件,您可以更改组件的实现,而无需在呼叫站点更改任何内容
234 | 
235 | 我们从一个以某种方式呈现记录的组件开始
236 | 
237 | 该组件有一个简单的`props`-接口
238 | 
239 | 现在我们用更复杂的东西来切换实现
240 | 
241 | 我们保持`props`- 接口相同
242 | 
243 | 我们也可以用更动态的东西切换它
244 | 
245 | 我们仍然保持着`props`- 接口相同
246 | 
247 | 一些数据
248 | 
249 | 正如我们所看到的,组件的使用方式完全相同如果我们将ViewAfter的实现复制到ViewBefore中,所有内容都可以继续工作
250 | 
251 | ### Lesson 13 - Element Refactor
252 | 
253 | 重构一个元素有点棘手首先,`JSX`确定标签是否是元素或组件是小写的意思是元素的大写意味着组件
254 | 
255 | 变
256 | 
257 | 变
258 | 
259 | 第二,`React`将这些元素触发的所有事件转换为合成事件. 这通常不是问题,它们仅仅是事件. 但你不能触发你自己的. 所以,即使你的`<Input>`组件接受一个`onClick`作为属性回调你不能用一个相同的事件来调用它`<input>`元素会
260 | 
261 | 一种方法可能是这样的. 我们只是实现我们自己的`onChange`调用者在这里,我们创建一个只能调用的数字输入`onChange`在数字输入 (非数字触发一个空的变化) 
262 | 
263 | 我们可以尝试修改事件来获取我们的数据,但这可能会让事情搞砸,而不是我们阻止此事件进一步采取行动
264 | 
265 | 过滤空白变化
266 | 
267 | 然后我们提取我们的数据并提供给它`onChange`
268 | 
269 | 在这里我们看到,新的NumberInput具有不同的接口`onChange`财产意味着会收到事件,但事实并非如此. 另外,即使我们想把它称为原始输入,我们也需要使用大写字母,并且不会赢得任何东西
270 | 
271 | 其他方法包括不首先在onUpdate中使用"默认"prop属性名称`onChange`
272 | 
273 | 它也可能发生,一个组件使用onMouseDown做一些内部的事情并触发一个`onChange`,这可能会导致混淆通常组件比第一个元素提供更丰富的交互,所以它们的prop方法可以用名称来反映
274 | 
275 | ### Lesson 14 - References
276 | 
277 | 有时我们需要某个元素或某个组件的状态,或者必须以某种方式直接进行修改. 对于这种情况,我们可以告诉`React`创建参考. 
278 | 
279 | 首先我们告诉`React`使用ref回调来呈现输入时,将会调用它`DOM`的输入元素是可用的
280 | 
281 | 当input元素被装载到DOM中时调用此回调函数,并且当它再次被卸载时再次调用null. 对于呈现元素`DOM`节点将被存储对于组件,组件的实例将被存储. 
282 | 
283 | 我们保存对其的引用以备后用. 
284 | 
285 | 此按钮被单击并使用时调用此回调`this.nameInput`读出输入的值. 
286 | 
287 | 由于引用对其组件是局部的,因此它们可以用作本地ID来获取元素,并且在创建组件的另一个实例时不会相互覆盖
288 | 
289 | ### Lesson 15 - Simple Integration
290 | 
291 | 大多数情况下,我们必须在应用程序中使用第三方库. 在这里,我们整合了一个简单的日期处理和使用它`React`. 它不使用`DOM`所以它可以很容易地集成. 
292 | 
293 | 被称为同步的简单库可以直接用于`JSX`在...的帮助下`{}`,因为它们只是函数调用
294 | 
295 | 没有什么令人兴奋的事情发生在这里,只是调用库并显示其返回值. 首先使用一些元素,然后在组件内部使用. 
296 | 
297 | ### Lesson 16 - Advanced Integration
298 | 
299 | 有时我们需要整合更复杂的库. 希望直接使用DOM或需要异步交互的库. 在这个例子中,我们使用了一个免费的InfoVis库D3.js. 
300 | 
301 | 由于D3需要直接与之交互`DOM`我们应该使用一个组件类,因为它可以存储对它的引用`DOM-elements`. 
302 | 
303 | 我们只是渲染一个空的画布并告诉`React`在渲染之后存储其引用
304 | 
305 | 在第一次渲染之后,我们获取对canvas元素的引用`DOM`并将其传递给库在这里,我们也使用一些额外的颜色配置
306 | 
307 | 我们对重新渲染也有一些细粒度的控制. 使用这种lifecylce方法
308 | 
309 | 在这里,我们可以告诉我们的图书馆的新数据`props`或状态,所以它可以更新`DOM`元素本身
310 | 
311 | 最后,我们总是返回false,所以我们的render方法没有被调用,canvas元素也没有被替换
312 | 
313 | 在从DOM中删除组件之前,可以使用此生命周期方法来释放资源. 我们的画布肯定会被移除,但是对于图书馆,其他对象,听众等来说通常会有状态,他们可以存储在组件上,并且应该被删除以防止内存泄漏
314 | 
315 | 现在我们可以使用该库作为组件不需要全局ID,每个实例都有自己的画布引用存储,也有它自己的颜色属性
316 | 
317 | 将图书馆交互包装成一个功能
318 | 
319 | 来自一个例子`h`TTP: //bl.ocks.org/mbostock/1b64ec067fcfc51e7471d944f51f1611`its realeased under the`GPL-V3\`
320 | 


--------------------------------------------------------------------------------