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.39.20160226.1245 (20160226.1245)
 -->
<!-- Title: %3 Pages: 1 -->
<svg width="1264pt" height="2716pt"
 viewBox="0.00 0.00 1264.29 2716.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 2712)">
<title>%3</title>
<polygon fill="white" stroke="transparent" points="-4,4 -4,-2712 1260.29,-2712 1260.29,4 -4,4"/>
<!-- unhappy -->
<g id="node1" class="node">
<title>unhappy</title>
<path fill="none" stroke="black" d="M362.522,-2708C362.522,-2708 248.927,-2708 248.927,-2708 242.927,-2708 236.927,-2702 236.927,-2696 236.927,-2696 236.927,-2684 236.927,-2684 236.927,-2678 242.927,-2672 248.927,-2672 248.927,-2672 362.522,-2672 362.522,-2672 368.522,-2672 374.522,-2678 374.522,-2684 374.522,-2684 374.522,-2696 374.522,-2696 374.522,-2702 368.522,-2708 362.522,-2708"/>
<text text-anchor="middle" x="305.725" y="-2685.8" font-family="Times,serif" font-size="14.00">React makes you sad.</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="305.725,-2635 126.644,-2585 305.725,-2535 484.805,-2585 305.725,-2635"/>
<text text-anchor="middle" x="305.725" y="-2594.8" font-family="Times,serif" font-size="14.00">Are you learning</text>
<text text-anchor="middle" x="305.725" y="-2580.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;React by copying from the</text>
<text text-anchor="middle" x="305.725" y="-2566.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;boilerplate projects?</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="M305.725,-2671.71C305.725,-2664.12 305.725,-2654.85 305.725,-2645.22"/>
<polygon fill="black" stroke="black" points="309.225,-2645.11 305.725,-2635.11 302.225,-2645.11 309.225,-2645.11"/>
</g>
<!-- boilerplates_dont_teach -->
<g id="node3" class="node">
<title>boilerplates_dont_teach</title>
<polygon fill="none" stroke="black" points="297.674,-2485 -0.224949,-2485 -0.224949,-2267 297.674,-2267 297.674,-2485"/>
<text text-anchor="middle" x="148.725" y="-2469.8" font-family="Times,serif" font-size="14.00">Learning React by copying boilerplates</text>
<text text-anchor="middle" x="148.725" y="-2455.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;is like learning to cook by eating food in</text>
<text text-anchor="middle" x="148.725" y="-2441.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;fancy restaurants. It doesn’t work. You need</text>
<text text-anchor="middle" x="148.725" y="-2427.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;to start with basics and ignore the fear of</text>
<text text-anchor="middle" x="148.725" y="-2413.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;missing out. It’s unfounded. People create</text>
<text text-anchor="middle" x="148.725" y="-2399.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;boilerplates to show off what they built</text>
<text text-anchor="middle" x="148.725" y="-2385.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;or learned, not to help you learn. They are</text>
<text text-anchor="middle" x="148.725" y="-2371.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;created by and for power users, and are often</text>
<text text-anchor="middle" x="148.725" y="-2357.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;way more experimental than they care to admit.</text>
<text text-anchor="middle" x="148.725" y="-2343.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;Boilerplates compete for attention which leads</text>
<text text-anchor="middle" x="148.725" y="-2329.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;to more bloat. If you’re in it for React, learn</text>
<text text-anchor="middle" x="148.725" y="-2315.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;it in the order Pete Hunt described in his guide:</text>
<text text-anchor="middle" x="148.725" y="-2301.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="148.725" y="-2287.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;Look at boilerplates no sooner than you can</text>
<text text-anchor="middle" x="148.725" y="-2273.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;create your own.</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="M274.519,-2543.46C263.429,-2528.7 250.332,-2511.26 236.851,-2493.31"/>
<polygon fill="black" stroke="black" points="239.44,-2490.93 230.635,-2485.04 233.843,-2495.14 239.44,-2490.93"/>
<text text-anchor="middle" x="260.056" y="-2505.8" font-family="Times,serif" font-size="14.00">yes</text>
</g>
<!-- steal_from_boilerplates -->
<g id="node4" class="node">
<title>steal_from_boilerplates</title>
<polygon fill="none" stroke="black" points="610.043,-2450 315.406,-2450 315.406,-2302 610.043,-2302 610.043,-2450"/>
<text text-anchor="middle" x="462.725" y="-2434.8" font-family="Times,serif" font-size="14.00">While boilerplates are not a good</text>
<text text-anchor="middle" x="462.725" y="-2420.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;way to learn the technologies they combine,</text>
<text text-anchor="middle" x="462.725" y="-2406.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;they are useful to see how these technologies</text>
<text text-anchor="middle" x="462.725" y="-2392.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;can be tied together *after* you’re comfortable</text>
<text text-anchor="middle" x="462.725" y="-2378.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;with each of them independently. It’s a great</text>
<text text-anchor="middle" x="462.725" y="-2364.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;way to discover new technologies but you</text>
<text text-anchor="middle" x="462.725" y="-2350.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;shouldn’t feel obligated to use them at all.</text>
<text text-anchor="middle" x="462.725" y="-2336.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;Don’t give up on boilerplates completely.</text>
<text text-anchor="middle" x="462.725" y="-2322.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;Just keep in mind that a boilerplate is</text>
<text text-anchor="middle" x="462.725" y="-2308.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;a bag of tricks, not a solid base for your app.</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="M336.93,-2543.46C355.24,-2519.08 379.023,-2487.42 400.973,-2458.2"/>
<polygon fill="black" stroke="black" points="403.902,-2460.13 407.11,-2450.03 398.305,-2455.93 403.902,-2460.13"/>
<text text-anchor="middle" x="372.725" y="-2505.8" font-family="Times,serif" font-size="14.00">no</text>
</g>
<!-- are_you_using_flux -->
<g id="node5" class="node">
<title>are_you_using_flux</title>
<polygon fill="none" stroke="black" points="340.725,-2230 234.31,-2180 340.725,-2130 447.139,-2180 340.725,-2230"/>
<text text-anchor="middle" x="340.725" y="-2189.8" font-family="Times,serif" font-size="14.00">Are you using</text>
<text text-anchor="middle" x="340.725" y="-2175.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;a Flux library</text>
<text text-anchor="middle" x="340.725" y="-2161.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;(or 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="M255.672,-2266.82C271.365,-2250.8 286.663,-2235.19 299.858,-2221.72"/>
<polygon fill="black" stroke="black" points="302.464,-2224.06 306.961,-2214.47 297.463,-2219.16 302.464,-2224.06"/>
</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="M416.602,-2301.9C401.054,-2276.92 384.133,-2249.74 370.224,-2227.39"/>
<polygon fill="black" stroke="black" points="373.11,-2225.41 364.854,-2218.77 367.167,-2229.1 373.11,-2225.41"/>
</g>
<!-- is_too_much_flux -->
<g id="node6" class="node">
<title>is_too_much_flux</title>
<polygon fill="none" stroke="black" points="228.725,-2066 83.2656,-2016 228.725,-1966 374.184,-2016 228.725,-2066"/>
<text text-anchor="middle" x="228.725" y="-2025.8" font-family="Times,serif" font-size="14.00">Does it add</text>
<text text-anchor="middle" x="228.725" y="-2011.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;a lot of boilerplate</text>
<text text-anchor="middle" x="228.725" y="-1997.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;for no obvious gain?</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="M314.748,-2141.96C299.141,-2119.11 279.116,-2089.79 262.314,-2065.18"/>
<polygon fill="black" stroke="black" points="265.048,-2062.98 256.518,-2056.7 259.267,-2066.93 265.048,-2062.98"/>
<text text-anchor="middle" x="301.056" y="-2100.8" font-family="Times,serif" font-size="14.00">yes</text>
</g>
<!-- is_not_enough_flux -->
<g id="node7" class="node">
<title>is_not_enough_flux</title>
<polygon fill="none" stroke="black" points="634.725,-2080 391.892,-2016 634.725,-1952 877.557,-2016 634.725,-2080"/>
<text text-anchor="middle" x="634.725" y="-2032.8" font-family="Times,serif" font-size="14.00">Do you have a few</text>
<text text-anchor="middle" x="634.725" y="-2018.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;bloated stateful components at the top</text>
<text text-anchor="middle" x="634.725" y="-2004.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;of your component hierarchy that are</text>
<text text-anchor="middle" x="634.725" y="-1990.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;often the source of bugs?</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="M389.603,-2152.73C432.59,-2128.76 496.179,-2093.28 547.818,-2064.48"/>
<polygon fill="black" stroke="black" points="549.626,-2067.48 556.654,-2059.55 546.216,-2061.36 549.626,-2067.48"/>
<text text-anchor="middle" x="494.725" y="-2100.8" font-family="Times,serif" font-size="14.00">no</text>
</g>
<!-- remove_flux -->
<g id="node8" class="node">
<title>remove_flux</title>
<polygon fill="none" stroke="black" points="387.053,-1902 132.396,-1902 132.396,-1838 387.053,-1838 387.053,-1902"/>
<text text-anchor="middle" x="259.725" y="-1886.8" font-family="Times,serif" font-size="14.00">Remove the Flux library.</text>
<text text-anchor="middle" x="259.725" y="-1872.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;Get a good feel for structuring</text>
<text text-anchor="middle" x="259.725" y="-1858.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;apps in vanilla React by reading</text>
<text text-anchor="middle" x="259.725" y="-1844.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;“Thinking in React” in the official docs.</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="M238.704,-1969C242.58,-1950.74 246.987,-1929.99 250.761,-1912.22"/>
<polygon fill="black" stroke="black" points="254.247,-1912.65 252.901,-1902.14 247.4,-1911.19 254.247,-1912.65"/>
<text text-anchor="middle" x="259.056" y="-1922.8" font-family="Times,serif" font-size="14.00">yes</text>
</g>
<!-- are_you_using_bundler -->
<g id="node9" class="node">
<title>are_you_using_bundler</title>
<polygon fill="none" stroke="black" points="451.725,-1801 260.758,-1751 451.725,-1701 642.692,-1751 451.725,-1801"/>
<text text-anchor="middle" x="451.725" y="-1760.8" font-family="Times,serif" font-size="14.00">Are you using</text>
<text text-anchor="middle" x="451.725" y="-1746.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;a JavaScript bundler</text>
<text text-anchor="middle" x="451.725" y="-1732.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;(e.g. 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="M289.437,-1986.69C324.666,-1967.01 367.511,-1938.09 395.725,-1902 416.997,-1874.79 430.779,-1838.68 439.347,-1808.59"/>
<polygon fill="black" stroke="black" points="442.806,-1809.21 442.056,-1798.64 436.052,-1807.37 442.806,-1809.21"/>
<text text-anchor="middle" x="436.725" y="-1865.8" font-family="Times,serif" font-size="14.00">no</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="M558.515,-1971.93C532.535,-1953.41 505.573,-1929.69 487.725,-1902 470.156,-1874.75 461.15,-1839.76 456.538,-1810.32"/>
<polygon fill="black" stroke="black" points="459.965,-1809.57 455.083,-1800.17 453.036,-1810.56 459.965,-1809.57"/>
<text text-anchor="middle" x="494.725" y="-1865.8" font-family="Times,serif" font-size="14.00">no</text>
</g>
<!-- add_flux -->
<g id="node10" class="node">
<title>add_flux</title>
<polygon fill="none" stroke="black" points="733.164,-1902 510.286,-1902 510.286,-1838 733.164,-1838 733.164,-1902"/>
<text text-anchor="middle" x="621.725" y="-1886.8" font-family="Times,serif" font-size="14.00">Consider adding a Flux library.</text>
<text text-anchor="middle" x="621.725" y="-1872.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;It can help externalize the state</text>
<text text-anchor="middle" x="621.725" y="-1858.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;shared between many components</text>
<text text-anchor="middle" x="621.725" y="-1844.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;and update it consistently.</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="M629.136,-1953.24C627.91,-1939.47 626.64,-1925.21 625.505,-1912.46"/>
<polygon fill="black" stroke="black" points="628.961,-1911.8 624.588,-1902.15 621.988,-1912.42 628.961,-1911.8"/>
<text text-anchor="middle" x="636.056" y="-1922.8" font-family="Times,serif" font-size="14.00">yes</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="M311.43,-1837.95C334.48,-1823.67 361.894,-1806.68 386.347,-1791.52"/>
<polygon fill="black" stroke="black" points="388.205,-1794.49 394.861,-1786.24 384.517,-1788.54 388.205,-1794.49"/>
</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="362.725,-1651 215.131,-1615 362.725,-1579 510.319,-1615 362.725,-1651"/>
<text text-anchor="middle" x="362.725" y="-1617.8" font-family="Times,serif" font-size="14.00">Are you working</text>
<text text-anchor="middle" x="362.725" y="-1603.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;on a production app?</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="M423.564,-1707.97C412.376,-1690.87 399.587,-1671.33 388.631,-1654.59"/>
<polygon fill="black" stroke="black" points="391.492,-1652.57 383.087,-1646.12 385.634,-1656.4 391.492,-1652.57"/>
<text text-anchor="middle" x="417.056" y="-1671.8" font-family="Times,serif" font-size="14.00">yes</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="676.725,-1651 529.131,-1615 676.725,-1579 824.319,-1615 676.725,-1651"/>
<text text-anchor="middle" x="676.725" y="-1617.8" font-family="Times,serif" font-size="14.00">Are you working</text>
<text text-anchor="middle" x="676.725" y="-1603.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;on a production app?</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="M509.668,-1715.98C545.406,-1694.37 590.836,-1666.91 625.296,-1646.09"/>
<polygon fill="black" stroke="black" points="627.51,-1648.84 634.257,-1640.67 623.889,-1642.85 627.51,-1648.84"/>
<text text-anchor="middle" x="590.725" y="-1671.8" font-family="Times,serif" font-size="14.00">no</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="M575.72,-1837.8C556.101,-1824.06 532.944,-1807.85 511.985,-1793.18"/>
<polygon fill="black" stroke="black" points="513.967,-1790.3 503.768,-1787.43 509.953,-1796.03 513.967,-1790.3"/>
</g>
<!-- do_you_know_es2015 -->
<g id="node13" class="node">
<title>do_you_know_es2015</title>
<polygon fill="none" stroke="black" points="595.725,-1386 368.496,-1336 595.725,-1286 822.953,-1336 595.725,-1386"/>
<text text-anchor="middle" x="595.725" y="-1345.8" font-family="Times,serif" font-size="14.00">Do you feel</text>
<text text-anchor="middle" x="595.725" y="-1331.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;comfortable using ES2015 features</text>
<text text-anchor="middle" x="595.725" y="-1317.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;(e.g. classes and fat arrows)?</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="M327.127,-1587.6C310.338,-1572.39 292.05,-1551.93 283.062,-1529 265.869,-1485.14 254.563,-1460.51 283.062,-1423 304.507,-1394.77 380.41,-1373.28 452.055,-1358.71"/>
<polygon fill="black" stroke="black" points="453.007,-1362.09 462.13,-1356.7 451.638,-1355.23 453.007,-1362.09"/>
<text text-anchor="middle" x="293.056" y="-1471.8" font-family="Times,serif" font-size="14.00">yes</text>
</g>
<!-- remove_bundler -->
<g id="node14" class="node">
<title>remove_bundler</title>
<polygon fill="none" stroke="black" points="613.143,-1529 310.307,-1529 310.307,-1423 613.143,-1423 613.143,-1529"/>
<text text-anchor="middle" x="461.725" y="-1513.8" font-family="Times,serif" font-size="14.00">There is no need for a bundler</text>
<text text-anchor="middle" x="461.725" y="-1499.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;if you are just learning React.</text>
<text text-anchor="middle" x="461.725" y="-1485.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;Copy https://github.com/jarsbe/react&#45;simple</text>
<text text-anchor="middle" x="461.725" y="-1471.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;and start hacking with no build step.</text>
<text text-anchor="middle" x="461.725" y="-1457.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;Use &lt;script&gt; tags until you are comfortable</text>
<text text-anchor="middle" x="461.725" y="-1443.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;with React and want to learn more about module</text>
<text text-anchor="middle" x="461.725" y="-1429.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;systems and different bundlers.</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="M384.696,-1584.15C394.495,-1570.39 406.404,-1553.67 417.9,-1537.53"/>
<polygon fill="black" stroke="black" points="420.909,-1539.34 423.86,-1529.16 415.208,-1535.28 420.909,-1539.34"/>
<text text-anchor="middle" x="416.725" y="-1549.8" font-family="Times,serif" font-size="14.00">no</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="M667.105,-1580.98C656.217,-1542.57 637.891,-1478.24 621.725,-1423 618.839,-1413.14 615.738,-1402.66 612.717,-1392.52"/>
<polygon fill="black" stroke="black" points="616.069,-1391.51 609.856,-1382.93 609.361,-1393.51 616.069,-1391.51"/>
<text text-anchor="middle" x="658.725" y="-1471.8" font-family="Times,serif" font-size="14.00">no</text>
</g>
<!-- add_bundler -->
<g id="node15" class="node">
<title>add_bundler</title>
<polygon fill="none" stroke="black" points="939.175,-1529 680.274,-1529 680.274,-1423 939.175,-1423 939.175,-1529"/>
<text text-anchor="middle" x="809.725" y="-1513.8" font-family="Times,serif" font-size="14.00">Add a bundler as a build step</text>
<text text-anchor="middle" x="809.725" y="-1499.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;to keep dependencies manageable</text>
<text text-anchor="middle" x="809.725" y="-1485.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;and serve the JavaScript code efficiently.</text>
<text text-anchor="middle" x="809.725" y="-1471.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;Use Google Page Speed insights tool</text>
<text text-anchor="middle" x="809.725" y="-1457.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;to gauge how well you are doing.</text>
<text text-anchor="middle" x="809.725" y="-1443.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;Remember to minify and envify</text>
<text text-anchor="middle" x="809.725" y="-1429.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;your code.</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="M704.93,-1585.52C718.675,-1571.16 735.73,-1553.33 752.061,-1536.26"/>
<polygon fill="black" stroke="black" points="754.62,-1538.65 759.004,-1529.01 749.562,-1533.81 754.62,-1538.65"/>
<text text-anchor="middle" x="748.056" y="-1549.8" font-family="Times,serif" font-size="14.00">yes</text>
</g>
<!-- use_es5 -->
<g id="node16" class="node">
<title>use_es5</title>
<polygon fill="none" stroke="black" points="747.318,-1090 408.131,-1090 408.131,-942 747.318,-942 747.318,-1090"/>
<text text-anchor="middle" x="577.725" y="-1074.8" font-family="Times,serif" font-size="14.00">Don’t use ES2015 yet.</text>
<text text-anchor="middle" x="577.725" y="-1060.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;You don’t need it to learn React.</text>
<text text-anchor="middle" x="577.725" y="-1046.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;Third&#45;party libraries will often use</text>
<text text-anchor="middle" x="577.725" y="-1032.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;ES2015 syntax in their documentation but</text>
<text text-anchor="middle" x="577.725" y="-1018.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;you don’t need third&#45;party libraries when</text>
<text text-anchor="middle" x="577.725" y="-1004.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;you are just learning React itself.</text>
<text text-anchor="middle" x="577.725" y="-990.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;When you feel like updating your JavaScript</text>
<text text-anchor="middle" x="577.725" y="-976.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;knowledge, https://leanpub.com/understandinges6/read</text>
<text text-anchor="middle" x="577.725" y="-962.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;is an amazing guide. Use http://babeljs.io/repl</text>
<text text-anchor="middle" x="577.725" y="-948.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;to verify your assumptions.</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="M592.932,-1286.35C590.141,-1236.73 585.797,-1159.51 582.465,-1100.28"/>
<polygon fill="black" stroke="black" points="585.954,-1099.97 581.898,-1090.18 578.965,-1100.37 585.954,-1099.97"/>
<text text-anchor="middle" x="598.725" y="-1256.8" font-family="Times,serif" font-size="14.00">no</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="811.725,-1236 605.92,-1172 811.725,-1108 1017.53,-1172 811.725,-1236"/>
<text text-anchor="middle" x="811.725" y="-1188.8" font-family="Times,serif" font-size="14.00">Are you using</text>
<text text-anchor="middle" x="811.725" y="-1174.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;experimental language features</text>
<text text-anchor="middle" x="811.725" y="-1160.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;that didn’t make it into ES2015</text>
<text text-anchor="middle" x="811.725" y="-1146.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;(e.g. decorators)?</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="M646.914,-1297.13C675.773,-1275.22 712.198,-1247.57 743.461,-1223.83"/>
<polygon fill="black" stroke="black" points="745.861,-1226.4 751.709,-1217.57 741.628,-1220.83 745.861,-1226.4"/>
<text text-anchor="middle" x="713.056" y="-1256.8" font-family="Times,serif" font-size="14.00">yes</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="M512.767,-1422.67C524.649,-1410.26 537.242,-1397.1 548.931,-1384.89"/>
<polygon fill="black" stroke="black" points="551.691,-1387.07 556.077,-1377.42 546.634,-1382.23 551.691,-1387.07"/>
</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="M728.515,-1422.87C706.38,-1408.39 682.679,-1392.89 661.516,-1379.04"/>
<polygon fill="black" stroke="black" points="663.208,-1375.97 652.924,-1373.42 659.376,-1381.82 663.208,-1375.97"/>
</g>
<!-- do_you_update_packages_asap -->
<g id="node18" class="node">
<title>do_you_update_packages_asap</title>
<polygon fill="none" stroke="black" points="794.725,-673 558.627,-623 794.725,-573 1030.82,-623 794.725,-673"/>
<text text-anchor="middle" x="794.725" y="-632.8" font-family="Times,serif" font-size="14.00">Do you update to new</text>
<text text-anchor="middle" x="794.725" y="-618.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;major versions of your dependencies</text>
<text text-anchor="middle" x="794.725" y="-604.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;as they come out?</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="M613.831,-941.799C646.982,-875.084 698.445,-774.964 748.725,-691 751.774,-685.908 755.048,-680.674 758.394,-675.477"/>
<polygon fill="black" stroke="black" points="761.523,-677.087 764.064,-666.801 755.663,-673.257 761.523,-677.087"/>
</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="M802.236,-1110.78C794.977,-1060.7 785.579,-987.962 781.725,-924 778.302,-867.214 779.592,-852.849 781.725,-796 783.147,-758.086 786.317,-715.596 789.171,-682.213"/>
<polygon fill="black" stroke="black" points="792.666,-682.426 790.044,-672.161 785.692,-681.821 792.666,-682.426"/>
<text text-anchor="middle" x="789.725" y="-766.8" font-family="Times,serif" font-size="14.00">no</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="1023.72,-924 791.086,-860 1023.72,-796 1256.36,-860 1023.72,-924"/>
<text text-anchor="middle" x="1023.72" y="-876.8" font-family="Times,serif" font-size="14.00">Can you spend days on</text>
<text text-anchor="middle" x="1023.72" y="-862.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;fixing your tooling every few weeks</text>
<text text-anchor="middle" x="1023.72" y="-848.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;due to bugs, incompatibilities,</text>
<text text-anchor="middle" x="1023.72" y="-834.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;and standard changes?</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="M847.688,-1119.07C884.675,-1064.64 942.257,-979.896 981.413,-922.271"/>
<polygon fill="black" stroke="black" points="984.326,-924.21 987.051,-913.972 978.536,-920.276 984.326,-924.21"/>
<text text-anchor="middle" x="976.056" y="-1011.8" font-family="Times,serif" font-size="14.00">yes</text>
</g>
<!-- give_it_two_months -->
<g id="node21" class="node">
<title>give_it_two_months</title>
<polygon fill="none" stroke="black" points="872.46,-523 542.989,-523 542.989,-375 872.46,-375 872.46,-523"/>
<text text-anchor="middle" x="707.725" y="-507.8" font-family="Times,serif" font-size="14.00">Unless we are talking about React</text>
<text text-anchor="middle" x="707.725" y="-493.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;which is tested heavily before every release,</text>
<text text-anchor="middle" x="707.725" y="-479.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;consider slowing down rate of package updates.</text>
<text text-anchor="middle" x="707.725" y="-465.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;You can try new versions of the dependencies but</text>
<text text-anchor="middle" x="707.725" y="-451.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;it’s best to keep them in a branch for a couple of</text>
<text text-anchor="middle" x="707.725" y="-437.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;months until the community finds and fixes the</text>
<text text-anchor="middle" x="707.725" y="-423.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;most common issues. Don’t make decisions based on</text>
<text text-anchor="middle" x="707.725" y="-409.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;the fear of missing out! When looking for older docs,</text>
<text text-anchor="middle" x="707.725" y="-395.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;don’t forget to check tagged releases on GitHub, e.g.</text>
<text text-anchor="middle" x="707.725" y="-381.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="M772.093,-577.738C765.107,-563.765 757.179,-547.91 749.334,-532.219"/>
<polygon fill="black" stroke="black" points="752.334,-530.393 744.732,-523.014 746.073,-533.524 752.334,-530.393"/>
<text text-anchor="middle" x="768.056" y="-543.8" font-family="Times,serif" font-size="14.00">yes</text>
</g>
<!-- consider_updating_react -->
<g id="node22" class="node">
<title>consider_updating_react</title>
<polygon fill="none" stroke="black" points="1141.44,-523 890.014,-523 890.014,-375 1141.44,-375 1141.44,-523"/>
<text text-anchor="middle" x="1015.72" y="-507.8" font-family="Times,serif" font-size="14.00">This is a good call.</text>
<text text-anchor="middle" x="1015.72" y="-493.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;However we encourage you to</text>
<text text-anchor="middle" x="1015.72" y="-479.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;try (in a branch!) new versions of</text>
<text text-anchor="middle" x="1015.72" y="-465.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;React as soon as they come out.</text>
<text text-anchor="middle" x="1015.72" y="-451.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;Unlike many community packages,</text>
<text text-anchor="middle" x="1015.72" y="-437.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;they are tested heavily by Facebook.</text>
<text text-anchor="middle" x="1015.72" y="-423.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;Keep an eye on the release notes</text>
<text text-anchor="middle" x="1015.72" y="-409.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;as they link to the codemods that</text>
<text text-anchor="middle" x="1015.72" y="-395.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;automate parts of the migration process</text>
<text text-anchor="middle" x="1015.72" y="-381.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;for you.</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="M844.873,-583.517C865.239,-567.482 889.551,-548.34 913.357,-529.597"/>
<polygon fill="black" stroke="black" points="915.713,-532.197 921.405,-523.261 911.383,-526.697 915.713,-532.197"/>
<text text-anchor="middle" x="904.725" y="-543.8" font-family="Times,serif" font-size="14.00">no</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="M937.201,-819.729C904.526,-801.068 869.209,-776.256 844.062,-746 828.37,-727.118 817.187,-702.606 809.481,-680.439"/>
<polygon fill="black" stroke="black" points="812.749,-679.172 806.285,-670.777 806.103,-681.371 812.749,-679.172"/>
<text text-anchor="middle" x="853.056" y="-723.8" font-family="Times,serif" font-size="14.00">yes</text>
</g>
<!-- stick_to_es2015 -->
<g id="node20" class="node">
<title>stick_to_es2015</title>
<polygon fill="none" stroke="black" points="1083.4,-746 872.045,-746 872.045,-710 1083.4,-710 1083.4,-746"/>
<text text-anchor="middle" x="977.725" y="-730.8" font-family="Times,serif" font-size="14.00">Stick to using at most ES2015,</text>
<text text-anchor="middle" x="977.725" y="-716.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;JSX, and object spread operator.</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="M1003.28,-801.334C997.735,-785.422 991.99,-768.934 987.354,-755.632"/>
<polygon fill="black" stroke="black" points="990.643,-754.434 984.047,-746.143 984.033,-756.738 990.643,-754.434"/>
<text text-anchor="middle" x="1000.72" y="-766.8" font-family="Times,serif" font-size="14.00">no</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="M946.266,-709.95C924.596,-697.516 894.882,-680.467 867.504,-664.759"/>
<polygon fill="black" stroke="black" points="869.126,-661.654 858.71,-659.713 865.642,-667.725 869.126,-661.654"/>
</g>
<!-- are_you_still_sad -->
<g id="node23" class="node">
<title>are_you_still_sad</title>
<polygon fill="none" stroke="black" points="896.725,-338 794.387,-320 896.725,-302 999.063,-320 896.725,-338"/>
<text text-anchor="middle" x="896.725" y="-315.8" font-family="Times,serif" font-size="14.00">Are you still sad?</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="M816.298,-374.895C835.101,-362.061 853.144,-349.745 867.358,-340.044"/>
<polygon fill="black" stroke="black" points="869.4,-342.888 875.687,-334.359 865.454,-337.106 869.4,-342.888"/>
</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="M947.191,-374.708C936.642,-363.272 926.48,-352.256 918.075,-343.145"/>
<polygon fill="black" stroke="black" points="920.528,-340.642 911.175,-335.665 915.383,-345.388 920.528,-340.642"/>
</g>
<!-- rant -->
<g id="node24" class="node">
<title>rant</title>
<polygon fill="none" stroke="black" points="899.442,-252 662.007,-252 662.007,-146 899.442,-146 899.442,-252"/>
<text text-anchor="middle" x="780.725" y="-236.8" font-family="Times,serif" font-size="14.00">Write a constructive blog post</text>
<text text-anchor="middle" x="780.725" y="-222.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;about the problems you encountered.</text>
<text text-anchor="middle" x="780.725" y="-208.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;Refrain from personal attacks.</text>
<text text-anchor="middle" x="780.725" y="-194.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;Be polite. Help the community</text>
<text text-anchor="middle" x="780.725" y="-180.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;figure out the solutions. Consider</text>
<text text-anchor="middle" x="780.725" y="-166.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;another stack that better suites</text>
<text text-anchor="middle" x="780.725" y="-152.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;your needs (e.g. Ember).</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="M881.56,-304.181C870.482,-292.627 854.695,-276.159 838.892,-259.674"/>
<polygon fill="black" stroke="black" points="841.093,-256.913 831.646,-252.116 836.04,-261.757 841.093,-256.913"/>
<text text-anchor="middle" x="868.056" y="-272.8" font-family="Times,serif" font-size="14.00">yes</text>
</g>
<!-- happy -->
<g id="node25" class="node">
<title>happy</title>
<polygon fill="none" stroke="black" points="1045.9,-109 735.548,-109 735.548,-73 1045.9,-73 1045.9,-109"/>
<text text-anchor="middle" x="890.725" y="-93.8" font-family="Times,serif" font-size="14.00">React makes you happy!</text>
<text text-anchor="middle" x="890.725" y="-79.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;Or, at least, it doesn’t make you that sad anymore.</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="M900.681,-302.5C903.56,-288.832 907.208,-269.316 908.725,-252 912.834,-205.068 916.144,-192.523 908.725,-146 907.28,-136.943 904.577,-127.353 901.697,-118.76"/>
<polygon fill="black" stroke="black" points="904.953,-117.469 898.299,-109.224 898.359,-119.818 904.953,-117.469"/>
<text text-anchor="middle" x="919.725" y="-194.8" font-family="Times,serif" font-size="14.00">no</text>
</g>
<!-- rant&#45;&gt;happy -->
<g id="edge36" class="edge">
<title>rant&#45;&gt;happy</title>
<path fill="none" stroke="black" d="M834.758,-145.949C845.285,-135.614 855.859,-125.232 864.937,-116.318"/>
<polygon fill="black" stroke="black" points="867.494,-118.713 872.177,-109.21 862.59,-113.718 867.494,-118.713"/>
</g>
<!-- share -->
<g id="node26" class="node">
<title>share</title>
<path fill="none" stroke="black" d="M1080.38,-36C1080.38,-36 701.072,-36 701.072,-36 695.072,-36 689.072,-30 689.072,-24 689.072,-24 689.072,-12 689.072,-12 689.072,-6 695.072,-0 701.072,-0 701.072,-0 1080.38,-0 1080.38,-0 1086.38,-0 1092.38,-6 1092.38,-12 1092.38,-12 1092.38,-24 1092.38,-24 1092.38,-30 1086.38,-36 1080.38,-36"/>
<text text-anchor="middle" x="890.725" y="-20.8" font-family="Times,serif" font-size="14.00">Share this flowchart: http://bit.ly/react&#45;makes&#45;you&#45;sad.</text>
<text text-anchor="middle" x="890.725" y="-6.8" font-family="Times,serif" font-size="14.00"> &#160;&#160;&#160;Based on and inspired by https://github.com/petehunt/react&#45;howto.</text>
</g>
<!-- happy&#45;&gt;share -->
<g id="edge37" class="edge">
<title>happy&#45;&gt;share</title>
<path fill="none" stroke="black" d="M890.725,-72.9551C890.725,-64.8828 890.725,-55.1764 890.725,-46.1817"/>
<polygon fill="black" stroke="black" points="894.225,-46.0903 890.725,-36.0904 887.225,-46.0904 894.225,-46.0903"/>
</g>
</g>
</svg>