fatigue.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.36.0 (20140111.2315)
 -->
<!-- Title: %3 Pages: 1 -->
<svg width="1359pt" height="2520pt"
 viewBox="0.00 0.00 1359.00 2520.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 2516)">
<title>%3</title>
<polygon fill="white" stroke="none" points="-4,4 -4,-2516 1355,-2516 1355,4 -4,4"/>
<!-- unhappy -->
<g id="node1" class="node"><title>unhappy</title>
<path fill="none" stroke="black" d="M433,-2512C433,-2512 349,-2512 349,-2512 343,-2512 337,-2506 337,-2500 337,-2500 337,-2488 337,-2488 337,-2482 343,-2476 349,-2476 349,-2476 433,-2476 433,-2476 439,-2476 445,-2482 445,-2488 445,-2488 445,-2500 445,-2500 445,-2506 439,-2512 433,-2512"/>
<text text-anchor="middle" x="391" y="-2490.3" font-family="Times,serif" font-size="14.00">React 让你不爽</text>
</g>
<!-- are_you_using_react_boilerplates -->
<g id="node2" class="node"><title>are_you_using_react_boilerplates</title>
<polygon fill="none" stroke="black" points="391,-2438 232.5,-2400 391,-2362 549.5,-2400 391,-2438"/>
<text text-anchor="middle" x="391" y="-2403.8" font-family="Times,serif" font-size="14.00">你是通过复制示例项目</text>
<text text-anchor="middle" x="391" y="-2388.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;学习 React 么？</text>
</g>
<!-- unhappy&#45;&gt;are_you_using_react_boilerplates -->
<g id="edge1" class="edge"><title>unhappy&#45;&gt;are_you_using_react_boilerplates</title>
<path fill="none" stroke="black" d="M391,-2475.7C391,-2467.81 391,-2458.06 391,-2448.24"/>
<polygon fill="black" stroke="black" points="394.5,-2448.04 391,-2438.04 387.5,-2448.04 394.5,-2448.04"/>
</g>
<!-- boilerplates_dont_teach -->
<g id="node3" class="node"><title>boilerplates_dont_teach</title>
<polygon fill="none" stroke="black" points="386,-2310 0,-2310 0,-2152 386,-2152 386,-2310"/>
<text text-anchor="middle" x="193" y="-2294.8" font-family="Times,serif" font-size="14.00">跟着示例项目学 React 就好像在一家超棒的</text>
<text text-anchor="middle" x="193" y="-2279.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;餐厅里通过点菜来学做饭一样。这压根没用。你得从基础</text>
<text text-anchor="middle" x="193" y="-2264.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;学起，不要怕有所遗漏。这没有根据。人们之所以建立</text>
<text text-anchor="middle" x="193" y="-2249.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;示例项目是为了展示他们所创造的、学到的，而不是为了</text>
<text text-anchor="middle" x="193" y="-2234.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;帮助你学习。示例项目是为更有经验的人准备的，并且</text>
<text text-anchor="middle" x="193" y="-2219.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;通常要比被承认的更具试验性。示例项目彼此竞争，为了</text>
<text text-anchor="middle" x="193" y="-2204.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;获得更多的注意力往往有所夸大。如果你确实对 React</text>
<text text-anchor="middle" x="193" y="-2189.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;感兴趣，你应该按照　Pete Hunt 的指南来学习:</text>
<text text-anchor="middle" x="193" y="-2174.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;https://github.com/petehunt/react&#45;howto.</text>
<text text-anchor="middle" x="193" y="-2159.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;在你能自己建立示例项目前不要看网上的。</text>
</g>
<!-- are_you_using_react_boilerplates&#45;&gt;boilerplates_dont_teach -->
<g id="edge2" class="edge"><title>are_you_using_react_boilerplates&#45;&gt;boilerplates_dont_teach</title>
<path fill="none" stroke="black" d="M356.511,-2369.91C338.792,-2354.97 316.19,-2335.9 293.483,-2316.75"/>
<polygon fill="black" stroke="black" points="295.687,-2314.03 285.786,-2310.26 291.173,-2319.38 295.687,-2314.03"/>
<text text-anchor="middle" x="329.5" y="-2332.3" font-family="Times,serif" font-size="14.00">是</text>
</g>
<!-- steal_from_boilerplates -->
<g id="node4" class="node"><title>steal_from_boilerplates</title>
<polygon fill="none" stroke="black" points="775.5,-2295 404.5,-2295 404.5,-2167 775.5,-2167 775.5,-2295"/>
<text text-anchor="middle" x="590" y="-2279.8" font-family="Times,serif" font-size="14.00">虽然示例项目对于学习它综合的各种技术</text>
<text text-anchor="middle" x="590" y="-2264.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;不是一个很好的方法，但是当你掌握这里的每一项</text>
<text text-anchor="middle" x="590" y="-2249.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;技术后，示例项目能够帮助你了解这些技术是如何</text>
<text text-anchor="middle" x="590" y="-2234.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;协同工作的。这是发现新技术的好途径，但是不要</text>
<text text-anchor="middle" x="590" y="-2219.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;觉得有使用的义务。不过也不要把示例项目束之高阁，</text>
<text text-anchor="middle" x="590" y="-2204.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;只要记住示例项目是各种技巧的一锅烩，并不能</text>
<text text-anchor="middle" x="590" y="-2189.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;被当做应用坚实的基础。</text>
<text text-anchor="middle" x="590" y="-2174.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;</text>
</g>
<!-- are_you_using_react_boilerplates&#45;&gt;steal_from_boilerplates -->
<g id="edge3" class="edge"><title>are_you_using_react_boilerplates&#45;&gt;steal_from_boilerplates</title>
<path fill="none" stroke="black" d="M425.663,-2369.91C448.056,-2351.12 478.21,-2325.81 506.574,-2302.01"/>
<polygon fill="black" stroke="black" points="509.108,-2304.45 514.518,-2295.34 504.608,-2299.09 509.108,-2304.45"/>
<text text-anchor="middle" x="480.5" y="-2332.3" font-family="Times,serif" font-size="14.00">否</text>
</g>
<!-- are_you_using_flux -->
<g id="node5" class="node"><title>are_you_using_flux</title>
<polygon fill="none" stroke="black" points="438,-2114 280.5,-2076 438,-2038 595.5,-2076 438,-2114"/>
<text text-anchor="middle" x="438" y="-2079.8" font-family="Times,serif" font-size="14.00">你在使用 Flux</text>
<text text-anchor="middle" x="438" y="-2064.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;（或者 Redux 么）？</text>
</g>
<!-- boilerplates_dont_teach&#45;&gt;are_you_using_flux -->
<g id="edge4" class="edge"><title>boilerplates_dont_teach&#45;&gt;are_you_using_flux</title>
<path fill="none" stroke="black" d="M318.012,-2151.93C342.264,-2136.79 366.385,-2121.72 386.571,-2109.12"/>
<polygon fill="black" stroke="black" points="388.633,-2111.96 395.261,-2103.69 384.925,-2106.02 388.633,-2111.96"/>
</g>
<!-- steal_from_boilerplates&#45;&gt;are_you_using_flux -->
<g id="edge5" class="edge"><title>steal_from_boilerplates&#45;&gt;are_you_using_flux</title>
<path fill="none" stroke="black" d="M527.298,-2166.89C509.588,-2149.06 490.884,-2130.23 475.195,-2114.44"/>
<polygon fill="black" stroke="black" points="477.284,-2111.58 467.753,-2106.95 472.318,-2116.51 477.284,-2111.58"/>
</g>
<!-- is_too_much_flux -->
<g id="node6" class="node"><title>is_too_much_flux</title>
<polygon fill="none" stroke="black" points="341,-1986 210,-1948 341,-1910 472,-1948 341,-1986"/>
<text text-anchor="middle" x="341" y="-1951.8" font-family="Times,serif" font-size="14.00">它是不是增加了</text>
<text text-anchor="middle" x="341" y="-1936.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;一堆无用代码？</text>
</g>
<!-- are_you_using_flux&#45;&gt;is_too_much_flux -->
<g id="edge6" class="edge"><title>are_you_using_flux&#45;&gt;is_too_much_flux</title>
<path fill="none" stroke="black" d="M413.773,-2043.53C400.732,-2026.59 384.535,-2005.55 370.735,-1987.63"/>
<polygon fill="black" stroke="black" points="373.457,-1985.42 364.584,-1979.63 367.91,-1989.69 373.457,-1985.42"/>
<text text-anchor="middle" x="403.5" y="-2008.3" font-family="Times,serif" font-size="14.00">是</text>
</g>
<!-- is_not_enough_flux -->
<g id="node7" class="node"><title>is_not_enough_flux</title>
<polygon fill="none" stroke="black" points="692,-1986 490,-1948 692,-1910 894,-1948 692,-1986"/>
<text text-anchor="middle" x="692" y="-1951.8" font-family="Times,serif" font-size="14.00">在组件依赖的顶端有没有一堆</text>
<text text-anchor="middle" x="692" y="-1936.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;经常出 Bug 的状态组件?</text>
</g>
<!-- are_you_using_flux&#45;&gt;is_not_enough_flux -->
<g id="edge7" class="edge"><title>are_you_using_flux&#45;&gt;is_not_enough_flux</title>
<path fill="none" stroke="black" d="M488.182,-2050.11C528.405,-2030.15 585.095,-2002.03 628.48,-1980.51"/>
<polygon fill="black" stroke="black" points="630.122,-1983.6 637.525,-1976.02 627.012,-1977.33 630.122,-1983.6"/>
<text text-anchor="middle" x="588.5" y="-2008.3" font-family="Times,serif" font-size="14.00">否</text>
</g>
<!-- remove_flux -->
<g id="node8" class="node"><title>remove_flux</title>
<polygon fill="none" stroke="black" points="446.25,-1857.5 153.75,-1857.5 153.75,-1804.5 446.25,-1804.5 446.25,-1857.5"/>
<text text-anchor="middle" x="300" y="-1842.3" font-family="Times,serif" font-size="14.00">去掉 Flux 库。通过阅读官方文档</text>
<text text-anchor="middle" x="300" y="-1827.3" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;&#160;“Thinking in React”，来体会用纯生的 React</text>
<text text-anchor="middle" x="300" y="-1812.3" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;&#160;怎么建立一个结构良好的应用。</text>
</g>
<!-- is_too_much_flux&#45;&gt;remove_flux -->
<g id="edge8" class="edge"><title>is_too_much_flux&#45;&gt;remove_flux</title>
<path fill="none" stroke="black" d="M329.031,-1913.43C323.884,-1898.99 317.864,-1882.11 312.645,-1867.47"/>
<polygon fill="black" stroke="black" points="315.835,-1865.99 309.18,-1857.75 309.241,-1868.34 315.835,-1865.99"/>
<text text-anchor="middle" x="328.5" y="-1880.3" font-family="Times,serif" font-size="14.00">是</text>
</g>
<!-- are_you_using_bundler -->
<g id="node9" class="node"><title>are_you_using_bundler</title>
<polygon fill="none" stroke="black" points="508,-1766 299.5,-1728 508,-1690 716.5,-1728 508,-1766"/>
<text text-anchor="middle" x="508" y="-1731.8" font-family="Times,serif" font-size="14.00">你在使用 JavaScript 打包工具么</text>
<text text-anchor="middle" x="508" y="-1716.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;(例如 Webpack, Browserify)?</text>
</g>
<!-- is_too_much_flux&#45;&gt;are_you_using_bundler -->
<g id="edge9" class="edge"><title>is_too_much_flux&#45;&gt;are_you_using_bundler</title>
<path fill="none" stroke="black" d="M382.88,-1922.08C406.632,-1906.2 435.427,-1883.81 455,-1858 473.942,-1833.03 487.28,-1800.32 495.838,-1774.09"/>
<polygon fill="black" stroke="black" points="499.229,-1774.97 498.885,-1764.38 492.55,-1772.88 499.229,-1774.97"/>
<text text-anchor="middle" x="492.5" y="-1827.3" font-family="Times,serif" font-size="14.00">否</text>
</g>
<!-- is_not_enough_flux&#45;&gt;are_you_using_bundler -->
<g id="edge11" class="edge"><title>is_not_enough_flux&#45;&gt;are_you_using_bundler</title>
<path fill="none" stroke="black" d="M627.512,-1922C597.814,-1907.46 564.479,-1886.33 543,-1858 525.055,-1834.33 516.305,-1802.08 512.041,-1775.74"/>
<polygon fill="black" stroke="black" points="515.47,-1775 510.57,-1765.6 508.542,-1776 515.47,-1775"/>
<text text-anchor="middle" x="550.5" y="-1827.3" font-family="Times,serif" font-size="14.00">否</text>
</g>
<!-- add_flux -->
<g id="node10" class="node"><title>add_flux</title>
<polygon fill="none" stroke="black" points="868.25,-1850 567.75,-1850 567.75,-1812 868.25,-1812 868.25,-1850"/>
<text text-anchor="middle" x="718" y="-1834.8" font-family="Times,serif" font-size="14.00">添加 Flux 库。它能够把组件间共享的</text>
<text text-anchor="middle" x="718" y="-1819.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;状态转移到外部，并用一致的方式来更新。</text>
</g>
<!-- is_not_enough_flux&#45;&gt;add_flux -->
<g id="edge10" class="edge"><title>is_not_enough_flux&#45;&gt;add_flux</title>
<path fill="none" stroke="black" d="M700.084,-1911.24C703.815,-1894.74 708.178,-1875.44 711.665,-1860.02"/>
<polygon fill="black" stroke="black" points="715.129,-1860.57 713.921,-1850.04 708.301,-1859.03 715.129,-1860.57"/>
<text text-anchor="middle" x="714.5" y="-1880.3" font-family="Times,serif" font-size="14.00">是</text>
</g>
<!-- remove_flux&#45;&gt;are_you_using_bundler -->
<g id="edge13" class="edge"><title>remove_flux&#45;&gt;are_you_using_bundler</title>
<path fill="none" stroke="black" d="M352.756,-1804.38C380.232,-1791.04 414.071,-1774.61 443.135,-1760.5"/>
<polygon fill="black" stroke="black" points="444.923,-1763.52 452.39,-1756 441.865,-1757.22 444.923,-1763.52"/>
</g>
<!-- are_you_working_on_production_app_with_bundler -->
<g id="node11" class="node"><title>are_you_working_on_production_app_with_bundler</title>
<polygon fill="none" stroke="black" points="405,-1638 227.025,-1620 405,-1602 582.975,-1620 405,-1638"/>
<text text-anchor="middle" x="405" y="-1616.3" font-family="Times,serif" font-size="14.00">正在做一个要上线的项目么?</text>
</g>
<!-- are_you_using_bundler&#45;&gt;are_you_working_on_production_app_with_bundler -->
<g id="edge14" class="edge"><title>are_you_using_bundler&#45;&gt;are_you_working_on_production_app_with_bundler</title>
<path fill="none" stroke="black" d="M477.375,-1695.48C461.317,-1678.96 441.999,-1659.08 427.362,-1644.01"/>
<polygon fill="black" stroke="black" points="429.655,-1641.35 420.176,-1636.62 424.635,-1646.23 429.655,-1641.35"/>
<text text-anchor="middle" x="461.5" y="-1660.3" font-family="Times,serif" font-size="14.00">是</text>
</g>
<!-- are_you_working_on_production_app_without_bundler -->
<g id="node12" class="node"><title>are_you_working_on_production_app_without_bundler</title>
<polygon fill="none" stroke="black" points="780,-1638 602.025,-1620 780,-1602 957.975,-1620 780,-1638"/>
<text text-anchor="middle" x="780" y="-1616.3" font-family="Times,serif" font-size="14.00">正在做一个要上线的项目么?</text>
</g>
<!-- are_you_using_bundler&#45;&gt;are_you_working_on_production_app_without_bundler -->
<g id="edge15" class="edge"><title>are_you_using_bundler&#45;&gt;are_you_working_on_production_app_without_bundler</title>
<path fill="none" stroke="black" d="M572.805,-1701.75C623.164,-1682.12 691.66,-1655.43 735.856,-1638.2"/>
<polygon fill="black" stroke="black" points="737.129,-1641.46 745.175,-1634.57 734.587,-1634.94 737.129,-1641.46"/>
<text text-anchor="middle" x="691.5" y="-1660.3" font-family="Times,serif" font-size="14.00">否</text>
</g>
<!-- add_flux&#45;&gt;are_you_using_bundler -->
<g id="edge12" class="edge"><title>add_flux&#45;&gt;are_you_using_bundler</title>
<path fill="none" stroke="black" d="M680.456,-1811.94C650.674,-1797.62 608.337,-1777.26 573.064,-1760.29"/>
<polygon fill="black" stroke="black" points="574.32,-1757.01 563.791,-1755.83 571.286,-1763.32 574.32,-1757.01"/>
</g>
<!-- do_you_know_es2015 -->
<g id="node13" class="node"><title>do_you_know_es2015</title>
<polygon fill="none" stroke="black" points="680,-1398 489,-1345 680,-1292 871,-1345 680,-1398"/>
<text text-anchor="middle" x="680" y="-1356.3" font-family="Times,serif" font-size="14.00">你了解并且能够接受 ES2015</text>
<text text-anchor="middle" x="680" y="-1341.3" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;的特性吗</text>
<text text-anchor="middle" x="680" y="-1326.3" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;(比如 类和箭头函数)?</text>
</g>
<!-- are_you_working_on_production_app_with_bundler&#45;&gt;do_you_know_es2015 -->
<g id="edge16" class="edge"><title>are_you_working_on_production_app_with_bundler&#45;&gt;do_you_know_es2015</title>
<path fill="none" stroke="black" d="M396.32,-1602.65C379.311,-1568.11 346.393,-1486.74 384,-1436 405.267,-1407.31 484.325,-1384.13 555.388,-1368.49"/>
<polygon fill="black" stroke="black" points="556.322,-1371.87 565.355,-1366.34 554.841,-1365.03 556.322,-1371.87"/>
<text text-anchor="middle" x="391.5" y="-1489.3" font-family="Times,serif" font-size="14.00">是</text>
</g>
<!-- remove_bundler -->
<g id="node14" class="node"><title>remove_bundler</title>
<polygon fill="none" stroke="black" points="695.25,-1549.5 408.75,-1549.5 408.75,-1436.5 695.25,-1436.5 695.25,-1549.5"/>
<text text-anchor="middle" x="552" y="-1534.3" font-family="Times,serif" font-size="14.00">如果你只是学习 React 没有必要</text>
<text text-anchor="middle" x="552" y="-1519.3" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;使用打包工具。直接克隆这个项目</text>
<text text-anchor="middle" x="552" y="-1504.3" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;https://github.com/jarsbe/react&#45;simple</text>
<text text-anchor="middle" x="552" y="-1489.3" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;开始你的学习，还不用考虑打包的问题。</text>
<text text-anchor="middle" x="552" y="-1474.3" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;你可以一直使用 &lt;Script&gt; 标签直到熟悉</text>
<text text-anchor="middle" x="552" y="-1459.3" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;React，然后再了解一下模块系统和不同</text>
<text text-anchor="middle" x="552" y="-1444.3" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;的打包工具。</text>
</g>
<!-- are_you_working_on_production_app_with_bundler&#45;&gt;remove_bundler -->
<g id="edge17" class="edge"><title>are_you_working_on_production_app_with_bundler&#45;&gt;remove_bundler</title>
<path fill="none" stroke="black" d="M423.025,-1603.67C437.228,-1591.6 458.037,-1573.9 478.813,-1556.23"/>
<polygon fill="black" stroke="black" points="481.103,-1558.88 486.453,-1549.74 476.568,-1553.55 481.103,-1558.88"/>
<text text-anchor="middle" x="469.5" y="-1572.3" font-family="Times,serif" font-size="14.00">否</text>
</g>
<!-- are_you_working_on_production_app_without_bundler&#45;&gt;do_you_know_es2015 -->
<g id="edge19" class="edge"><title>are_you_working_on_production_app_without_bundler&#45;&gt;do_you_know_es2015</title>
<path fill="none" stroke="black" d="M769.785,-1602.75C761.494,-1589.07 749.921,-1568.77 742,-1550 730.871,-1523.62 710.555,-1454.64 696.217,-1404.17"/>
<polygon fill="black" stroke="black" points="699.526,-1403.01 693.433,-1394.34 692.79,-1404.91 699.526,-1403.01"/>
<text text-anchor="middle" x="749.5" y="-1489.3" font-family="Times,serif" font-size="14.00">否</text>
</g>
<!-- add_bundler -->
<g id="node15" class="node"><title>add_bundler</title>
<polygon fill="none" stroke="black" points="1052.25,-1534.5 765.75,-1534.5 765.75,-1451.5 1052.25,-1451.5 1052.25,-1534.5"/>
<text text-anchor="middle" x="909" y="-1519.3" font-family="Times,serif" font-size="14.00">在构建步骤添加一个打包的过程</text>
<text text-anchor="middle" x="909" y="-1504.3" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;能够很好的管理依赖并且更有效地传输</text>
<text text-anchor="middle" x="909" y="-1489.3" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;JavaScript 代码。</text>
<text text-anchor="middle" x="909" y="-1474.3" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;使用 Google Page Speed 来测量做得</text>
<text text-anchor="middle" x="909" y="-1459.3" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;怎么样。别忘了压缩和环境化你的代码。</text>
</g>
<!-- are_you_working_on_production_app_without_bundler&#45;&gt;add_bundler -->
<g id="edge18" class="edge"><title>are_you_working_on_production_app_without_bundler&#45;&gt;add_bundler</title>
<path fill="none" stroke="black" d="M796.077,-1603.42C812.045,-1587.95 837.343,-1563.44 859.95,-1541.53"/>
<polygon fill="black" stroke="black" points="862.434,-1544 867.18,-1534.52 857.563,-1538.97 862.434,-1544"/>
<text text-anchor="middle" x="836.5" y="-1572.3" font-family="Times,serif" font-size="14.00">是</text>
</g>
<!-- use_es5 -->
<g id="node16" class="node"><title>use_es5</title>
<polygon fill="none" stroke="black" points="824,-1116 498,-1116 498,-988 824,-988 824,-1116"/>
<text text-anchor="middle" x="661" y="-1100.8" font-family="Times,serif" font-size="14.00">先别用 ES2015。学习 React 不需要它。</text>
<text text-anchor="middle" x="661" y="-1085.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;第三方库在文档里通常使用 ES2015 的语法，</text>
<text text-anchor="middle" x="661" y="-1070.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;但是如果你只是学习 React 还用不到第三方库。</text>
<text text-anchor="middle" x="661" y="-1055.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;当你想要更新你的 JavaScript 知识时：</text>
<text text-anchor="middle" x="661" y="-1040.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;https://leanpub.com/understandinges6/read</text>
<text text-anchor="middle" x="661" y="-1025.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;是超棒的指南.使用在线工具：</text>
<text text-anchor="middle" x="661" y="-1010.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;http://babeljs.io/repl</text>
<text text-anchor="middle" x="661" y="-995.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;来验证你的各种假设。</text>
</g>
<!-- do_you_know_es2015&#45;&gt;use_es5 -->
<g id="edge22" class="edge"><title>do_you_know_es2015&#45;&gt;use_es5</title>
<path fill="none" stroke="black" d="M676.647,-1292.64C673.631,-1246.45 669.166,-1178.06 665.777,-1126.16"/>
<polygon fill="black" stroke="black" points="669.258,-1125.76 665.114,-1116.01 662.273,-1126.21 669.258,-1125.76"/>
<text text-anchor="middle" x="682.5" y="-1262.3" font-family="Times,serif" font-size="14.00">否</text>
</g>
<!-- are_you_using_dangerous_features -->
<g id="node17" class="node"><title>are_you_using_dangerous_features</title>
<polygon fill="none" stroke="black" points="862,-1240 689,-1187 862,-1134 1035,-1187 862,-1240"/>
<text text-anchor="middle" x="862" y="-1198.3" font-family="Times,serif" font-size="14.00">你在使用一些没有加入到</text>
<text text-anchor="middle" x="862" y="-1183.3" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;ES2015 的试验特性吗</text>
<text text-anchor="middle" x="862" y="-1168.3" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;(例如 装饰器)?</text>
</g>
<!-- do_you_know_es2015&#45;&gt;are_you_using_dangerous_features -->
<g id="edge23" class="edge"><title>do_you_know_es2015&#45;&gt;are_you_using_dangerous_features</title>
<path fill="none" stroke="black" d="M725.926,-1304.63C751.325,-1282.86 782.991,-1255.72 809.383,-1233.1"/>
<polygon fill="black" stroke="black" points="811.718,-1235.71 817.033,-1226.54 807.163,-1230.39 811.718,-1235.71"/>
<text text-anchor="middle" x="783.5" y="-1262.3" font-family="Times,serif" font-size="14.00">是</text>
</g>
<!-- remove_bundler&#45;&gt;do_you_know_es2015 -->
<g id="edge21" class="edge"><title>remove_bundler&#45;&gt;do_you_know_es2015</title>
<path fill="none" stroke="black" d="M600.756,-1436.39C612.568,-1422.91 625.116,-1408.6 636.659,-1395.44"/>
<polygon fill="black" stroke="black" points="639.365,-1397.66 643.326,-1387.83 634.102,-1393.04 639.365,-1397.66"/>
</g>
<!-- add_bundler&#45;&gt;do_you_know_es2015 -->
<g id="edge20" class="edge"><title>add_bundler&#45;&gt;do_you_know_es2015</title>
<path fill="none" stroke="black" d="M845.211,-1451.33C814.243,-1431.59 777.073,-1407.89 745.838,-1387.98"/>
<polygon fill="black" stroke="black" points="747.509,-1384.89 737.196,-1382.47 743.746,-1390.79 747.509,-1384.89"/>
</g>
<!-- do_you_update_packages_asap -->
<g id="node18" class="node"><title>do_you_update_packages_asap</title>
<polygon fill="none" stroke="black" points="868,-738 709.5,-700 868,-662 1026.5,-700 868,-738"/>
<text text-anchor="middle" x="868" y="-703.8" font-family="Times,serif" font-size="14.00">当依赖的库有重大版本</text>
<text text-anchor="middle" x="868" y="-688.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;更新时你会跟上么？</text>
</g>
<!-- use_es5&#45;&gt;do_you_update_packages_asap -->
<g id="edge24" class="edge"><title>use_es5&#45;&gt;do_you_update_packages_asap</title>
<path fill="none" stroke="black" d="M692.504,-987.751C723.678,-926.854 774.001,-832.92 825,-756 828.472,-750.763 832.302,-745.391 836.201,-740.154"/>
<polygon fill="black" stroke="black" points="839.078,-742.153 842.346,-732.075 833.506,-737.916 839.078,-742.153"/>
</g>
<!-- are_you_using_dangerous_features&#45;&gt;do_you_update_packages_asap -->
<g id="edge26" class="edge"><title>are_you_using_dangerous_features&#45;&gt;do_you_update_packages_asap</title>
<path fill="none" stroke="black" d="M859.992,-1134.4C857.832,-1070.8 855.076,-959.417 858,-864 859.203,-824.748 862.032,-780.255 864.375,-747.682"/>
<polygon fill="black" stroke="black" points="867.877,-747.776 865.116,-737.547 860.896,-747.265 867.877,-747.776"/>
<text text-anchor="middle" x="866.5" y="-834.3" font-family="Times,serif" font-size="14.00">否</text>
</g>
<!-- can_you_spend_days_on_your_tooling -->
<g id="node19" class="node"><title>can_you_spend_days_on_your_tooling</title>
<polygon fill="none" stroke="black" points="1109,-970 867.5,-917 1109,-864 1350.5,-917 1109,-970"/>
<text text-anchor="middle" x="1109" y="-928.3" font-family="Times,serif" font-size="14.00">您能每隔几周就花上几天时间</text>
<text text-anchor="middle" x="1109" y="-913.3" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;来修复工具链导致的 Bug，不兼容</text>
<text text-anchor="middle" x="1109" y="-898.3" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;和标准的变动么？</text>
</g>
<!-- are_you_using_dangerous_features&#45;&gt;can_you_spend_days_on_your_tooling -->
<g id="edge25" class="edge"><title>are_you_using_dangerous_features&#45;&gt;can_you_spend_days_on_your_tooling</title>
<path fill="none" stroke="black" d="M899.514,-1145.3C943.03,-1098.08 1014.82,-1020.19 1062.02,-968.98"/>
<polygon fill="black" stroke="black" points="1064.88,-971.038 1069.08,-961.312 1059.73,-966.294 1064.88,-971.038"/>
<text text-anchor="middle" x="1049.5" y="-1048.3" font-family="Times,serif" font-size="14.00">是</text>
</g>
<!-- give_it_two_months -->
<g id="node21" class="node"><title>give_it_two_months</title>
<polygon fill="none" stroke="black" points="934.25,-610 609.75,-610 609.75,-482 934.25,-482 934.25,-610"/>
<text text-anchor="middle" x="772" y="-594.8" font-family="Times,serif" font-size="14.00">除非是 React 这种每次发布前经过严格测试的库，</text>
<text text-anchor="middle" x="772" y="-579.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;否则你应该让更新的速度慢下来。</text>
<text text-anchor="middle" x="772" y="-564.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;你可以在分支里尝试依赖库的新版本，</text>
<text text-anchor="middle" x="772" y="-549.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;直到社区发现和修复了绝大部分的问题。</text>
<text text-anchor="middle" x="772" y="-534.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;不要因为怕被落下就做决定。</text>
<text text-anchor="middle" x="772" y="-519.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;要查找旧版本的文档，别忘了查看 Github 上</text>
<text text-anchor="middle" x="772" y="-504.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;带 Tag 的发布版本，比如</text>
<text text-anchor="middle" x="772" y="-489.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;https://github.com/reactjs/react&#45;router/tree/0.13.x/doc</text>
</g>
<!-- do_you_update_packages_asap&#45;&gt;give_it_two_months -->
<g id="edge30" class="edge"><title>do_you_update_packages_asap&#45;&gt;give_it_two_months</title>
<path fill="none" stroke="black" d="M847.641,-666.765C838.783,-652.739 828.019,-635.697 817.424,-618.921"/>
<polygon fill="black" stroke="black" points="820.208,-616.775 811.909,-610.189 814.29,-620.513 820.208,-616.775"/>
<text text-anchor="middle" x="838.5" y="-632.3" font-family="Times,serif" font-size="14.00">会</text>
</g>
<!-- consider_updating_react -->
<g id="node22" class="node"><title>consider_updating_react</title>
<polygon fill="none" stroke="black" points="1283,-595 953,-595 953,-497 1283,-497 1283,-595"/>
<text text-anchor="middle" x="1118" y="-579.8" font-family="Times,serif" font-size="14.00">这是个好决定。</text>
<text text-anchor="middle" x="1118" y="-564.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;不过我们还是鼓励你在 React 新版本出来的时候</text>
<text text-anchor="middle" x="1118" y="-549.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;（在分支里）尝试它。与社区模块不同，React</text>
<text text-anchor="middle" x="1118" y="-534.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;经过了 Facebook 的严格测试。</text>
<text text-anchor="middle" x="1118" y="-519.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;要留意发布日志，因为它们通常连接到能够自动</text>
<text text-anchor="middle" x="1118" y="-504.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;化一部分迁移过程的 codemods。</text>
</g>
<!-- do_you_update_packages_asap&#45;&gt;consider_updating_react -->
<g id="edge31" class="edge"><title>do_you_update_packages_asap&#45;&gt;consider_updating_react</title>
<path fill="none" stroke="black" d="M911.833,-672.35C944.514,-652.479 990.237,-624.68 1030.32,-600.308"/>
<polygon fill="black" stroke="black" points="1032.32,-603.189 1039.05,-595.003 1028.68,-597.208 1032.32,-603.189"/>
<text text-anchor="middle" x="992.5" y="-632.3" font-family="Times,serif" font-size="14.00">不会</text>
</g>
<!-- can_you_spend_days_on_your_tooling&#45;&gt;do_you_update_packages_asap -->
<g id="edge27" class="edge"><title>can_you_spend_days_on_your_tooling&#45;&gt;do_you_update_packages_asap</title>
<path fill="none" stroke="black" d="M1018.16,-883.802C981.565,-867.086 941.385,-843.461 913,-812 896.33,-793.524 885.412,-768.065 878.51,-746.19"/>
<polygon fill="black" stroke="black" points="881.815,-745.022 875.616,-736.429 875.103,-747.012 881.815,-745.022"/>
<text text-anchor="middle" x="920.5" y="-790.3" font-family="Times,serif" font-size="14.00">能</text>
</g>
<!-- stick_to_es2015 -->
<g id="node20" class="node"><title>stick_to_es2015</title>
<polygon fill="none" stroke="black" points="1223.25,-812 936.75,-812 936.75,-776 1223.25,-776 1223.25,-812"/>
<text text-anchor="middle" x="1080" y="-790.3" font-family="Times,serif" font-size="14.00">坚持只用 ES2015，JSX 和属性专递操作符。</text>
</g>
<!-- can_you_spend_days_on_your_tooling&#45;&gt;stick_to_es2015 -->
<g id="edge28" class="edge"><title>can_you_spend_days_on_your_tooling&#45;&gt;stick_to_es2015</title>
<path fill="none" stroke="black" d="M1097.12,-866.436C1093.47,-851.192 1089.58,-834.99 1086.44,-821.877"/>
<polygon fill="black" stroke="black" points="1089.83,-821.009 1084.1,-812.1 1083.03,-822.64 1089.83,-821.009"/>
<text text-anchor="middle" x="1105.5" y="-834.3" font-family="Times,serif" font-size="14.00">不能</text>
</g>
<!-- stick_to_es2015&#45;&gt;do_you_update_packages_asap -->
<g id="edge29" class="edge"><title>stick_to_es2015&#45;&gt;do_you_update_packages_asap</title>
<path fill="none" stroke="black" d="M1040.62,-775.911C1010.28,-762.745 967.701,-744.266 932.421,-728.956"/>
<polygon fill="black" stroke="black" points="933.718,-725.704 923.151,-724.934 930.932,-732.125 933.718,-725.704"/>
</g>
<!-- are_you_still_sad -->
<g id="node23" class="node"><title>are_you_still_sad</title>
<polygon fill="none" stroke="black" points="984,-444 891.747,-426 984,-408 1076.25,-426 984,-444"/>
<text text-anchor="middle" x="984" y="-422.3" font-family="Times,serif" font-size="14.00">你还不爽么？</text>
</g>
<!-- give_it_two_months&#45;&gt;are_you_still_sad -->
<g id="edge32" class="edge"><title>give_it_two_months&#45;&gt;are_you_still_sad</title>
<path fill="none" stroke="black" d="M885.448,-481.855C910.095,-468.136 934.202,-454.718 952.404,-444.586"/>
<polygon fill="black" stroke="black" points="954.321,-447.525 961.356,-439.604 950.916,-441.409 954.321,-447.525"/>
</g>
<!-- consider_updating_react&#45;&gt;are_you_still_sad -->
<g id="edge33" class="edge"><title>consider_updating_react&#45;&gt;are_you_still_sad</title>
<path fill="none" stroke="black" d="M1063.11,-496.664C1043.66,-479.537 1022.8,-461.17 1007.39,-447.597"/>
<polygon fill="black" stroke="black" points="1009.68,-444.951 999.863,-440.969 1005.05,-450.204 1009.68,-444.951"/>
</g>
<!-- rant -->
<g id="node24" class="node"><title>rant</title>
<polygon fill="none" stroke="black" points="992,-355.5 718,-355.5 718,-226.5 992,-226.5 992,-355.5"/>
<text text-anchor="middle" x="855" y="-324.3" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;把你遇到的问题写成有建设性的博客，</text>
<text text-anchor="middle" x="855" y="-309.3" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;避免人身攻击。</text>
<text text-anchor="middle" x="855" y="-294.3" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;有礼貌。</text>
<text text-anchor="middle" x="855" y="-279.3" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;帮助社区来寻找解决方案。</text>
<text text-anchor="middle" x="855" y="-264.3" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;考虑一下其它更符合你的需求的技术栈</text>
<text text-anchor="middle" x="855" y="-249.3" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;（比如 Ember）。</text>
<text text-anchor="middle" x="855" y="-234.3" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;</text>
</g>
<!-- are_you_still_sad&#45;&gt;rant -->
<g id="edge34" class="edge"><title>are_you_still_sad&#45;&gt;rant</title>
<path fill="none" stroke="black" d="M969.949,-410.513C958.477,-398.686 941.344,-381.022 923.786,-362.919"/>
<polygon fill="black" stroke="black" points="926.258,-360.441 916.784,-355.699 921.234,-365.314 926.258,-360.441"/>
<text text-anchor="middle" x="956.5" y="-378.3" font-family="Times,serif" font-size="14.00">是</text>
</g>
<!-- happy -->
<g id="node25" class="node"><title>happy</title>
<polygon fill="none" stroke="black" points="1117,-188 839,-188 839,-152 1117,-152 1117,-188"/>
<text text-anchor="middle" x="978" y="-166.3" font-family="Times,serif" font-size="14.00">React 让你爽歪歪！又或者至少不再不爽。</text>
</g>
<!-- are_you_still_sad&#45;&gt;happy -->
<g id="edge35" class="edge"><title>are_you_still_sad&#45;&gt;happy</title>
<path fill="none" stroke="black" d="M989.183,-408.756C993.317,-394.903 998.77,-374.371 1001,-356 1007.96,-298.643 1012.37,-282.648 1001,-226 999.077,-216.415 995.442,-206.416 991.62,-197.613"/>
<polygon fill="black" stroke="black" points="994.675,-195.881 987.307,-188.268 988.32,-198.815 994.675,-195.881"/>
<text text-anchor="middle" x="1014.5" y="-287.3" font-family="Times,serif" font-size="14.00">否</text>
</g>
<!-- rant&#45;&gt;happy -->
<g id="edge36" class="edge"><title>rant&#45;&gt;happy</title>
<path fill="none" stroke="black" d="M920.821,-226.319C932.359,-215.157 943.693,-204.192 953.188,-195.005"/>
<polygon fill="black" stroke="black" points="955.624,-197.519 960.377,-188.05 950.756,-192.488 955.624,-197.519"/>
</g>
<!-- share -->
<g id="node26" class="node"><title>share</title>
<path fill="none" stroke="black" d="M1121,-113.5C1121,-113.5 835,-113.5 835,-113.5 829,-113.5 823,-107.5 823,-101.5 823,-101.5 823,-12.5 823,-12.5 823,-6.5 829,-0.5 835,-0.5 835,-0.5 1121,-0.5 1121,-0.5 1127,-0.5 1133,-6.5 1133,-12.5 1133,-12.5 1133,-101.5 1133,-101.5 1133,-107.5 1127,-113.5 1121,-113.5"/>
<text text-anchor="middle" x="978" y="-98.3" font-family="Times,serif" font-size="14.00">分享这个流程图</text>
<text text-anchor="middle" x="978" y="-83.3" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;https://github.com/gaearon/react&#45;makes&#45;you&#45;sad</text>
<text text-anchor="middle" x="978" y="-68.3" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;基于和启发</text>
<text text-anchor="middle" x="978" y="-53.3" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;https://github.com/petehunt/react&#45;howto</text>
<text text-anchor="middle" x="978" y="-38.3" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;中文翻译</text>
<text text-anchor="middle" x="978" y="-23.3" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;https://github.com/wyvernnot/react&#45;makes&#45;you&#45;sad</text>
<text text-anchor="middle" x="978" y="-8.3" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;</text>
</g>
<!-- happy&#45;&gt;share -->
<g id="edge37" class="edge"><title>happy&#45;&gt;share</title>
<path fill="none" stroke="black" d="M978,-151.656C978,-143.882 978,-134.172 978,-123.972"/>
<polygon fill="black" stroke="black" points="981.5,-123.663 978,-113.663 974.5,-123.663 981.5,-123.663"/>
</g>
</g>
</svg>