Wie richte ich eine React-Umgebung ein? Detaillierte Einführung in den Aufbau einer Reaktionsumgebung (mit Beispielen)

<p class="htmledit_views">In diesem Artikel geht es hauptsächlich um einige Erklärungen zum Aufbau einer <a href="http://www.php.cn/course/list/21.html" target="_blank">reagierenden</a>-Umgebung. Schauen wir uns nun gemeinsam diesen Artikel an</p> <h1 class="entry-title" style="font-family:inherit;font-weight:normal;line-height:1.2;color:rgb(34,34,34);border:0px;">Reagieren-Umgebungsaufbau</h1> <p style="border:0px;">Ich habe gelernt Reagiere kürzlich und hoffe, dass ich anfangen kann. Ich kann einige einfache Projekte verstehen und einfach angeben. Nach zwei Tagen Recherche habe ich das Gefühl, dass sich die Technologie zu schnell aktualisiert, wenn ich nicht ständig neue Technologien erlerne und auf den neuesten Stand bringe. Durch die Einrichtung der Umgebung hatte ich das Bedürfnis, einen Artikel zu schreiben, um ihn als Backup für zukünftige Referenzzwecke aufzuzeichnen. Anfänger haben begrenzte Fähigkeiten und ihr Verständnis ist möglicherweise nicht korrekt. </p> <p style="border:0px;"><span style="border:0px;">Einführung in React</span></p> <p style="border:0px;">React ist eine JAVASCRIPT-BIBLIOTHEK ZUM ERSTELLEN VON BENUTZEROBERFLÄCHEN, eine JS-Bibliothek zum Erstellen von Benutzeroberflächen. </p> <p style="border:0px;"><span style="border:0px;">Hallo Welt-Beispiel</span></p> <p style="border:0px;">Nachdem Sie die Installationseinführung auf der offiziellen Website gelesen haben, klicken Sie hier, um React einfach zu lernen. Tatsächlich ist die Umgebung, auf der es basiert, nicht kompliziert. Sie können die offiziell empfohlene Online-Umgebung CodePen verwenden, direkt Code schreiben und die Ergebnisse sehen, ohne etwas zu installieren oder zu konfigurieren. Ich möchte es jedoch trotzdem vor Ort aufbauen und erleben, für den Fall, dass es zu groß wird. </p> <p style="border:0px;">Die offizielle Website bietet einen Hello World-Webseitencode (HTML-Datei), der direkt durch Öffnen des Browsers ausgeführt werden kann. Der Code lautet wie folgt: </p> <table border="0" style="border-collapse:collapse;border-spacing:0px;width:700px;border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-size:14px !important;min-height:auto !important;background:none !important;"><tbody style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;background:none !important;"><tr style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;background:none !important;" class="firstRow"> <td class="gutter" style="border:0px !important;line-height:1.1em !important;vertical-align:baseline !important;overflow:visible !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-size:14px !important;min-height:auto !important;color:rgb(175,175,175) !important;background:none !important;"> <p class="line number1 index0 alt2" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">1 </p> <p class="line number2 index1 alt1" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">2</p> <p class="line number3 index2 alt2" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">3</p> <p class="line number4 index3 alt1" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">4</p> <p class="line number5 index4 alt2" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">5</p> <p class="line number6 index5 alt1" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">6</p> <p class="line number7 index6 alt2" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">7</p> <p class="line number8 index7 alt1" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">8</p> <p class="line number9 index8 alt2" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">9</p> <p class="line number10 index9 alt1" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">10</p> <p class="line number11 index10 alt2" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">11</p> <p class="line number12 index11 alt1" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">12</p> <p class="line number13 index12 alt2" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">13</p> <p class="line number14 index13 alt1" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">14</p> <p class="line number15 index14 alt2" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">15</p> <p class="line number16 index15 alt1" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">16</p> <p class="line number17 index16 alt2" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">17</p> <p class="line number18 index17 alt1" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">18</p> <p class="line number19 index18 alt2" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">19</p> </td> <td class="code" style="width:660px;border:0px !important;line-height:1.1em !important;vertical-align:baseline !important;overflow:visible !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-size:14px !important;min-height:auto !important;background:none !important;"> <p style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;background:none !important;"><br></p> <p class="line number1 index0 alt2" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;"><!DOCTYPE html></code></p> <p class="line number2 index1 alt1" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;"><</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">html</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></code></p> <p class="line number3 index2 alt2" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html spaces" style="color:rgb(221,17,68);border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">  </code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;"><</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">head</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></code></p> <p class="line number4 index3 alt1" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html spaces" style="color:rgb(221,17,68);border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">    </code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;"><</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">meta</code><code class="html color1" style="border:0px !important;color:#808080 !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">charset</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">=</code><code class="html string" style="border:0px !important;color:#0000FF !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">"UTF-8"</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">/></code></p> <p class="line number5 index4 alt2" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html spaces" style="color:rgb(221,17,68);border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">    </code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;"><</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">title</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">>Hello World</</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">title</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></code></p> <p class="line number6 index5 alt1" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html spaces" style="color:rgb(221,17,68);border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">    </code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;"><</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">script</code><code class="html color1" style="border:0px !important;color:#808080 !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">src</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">=</code><code class="html string" style="border:0px !important;color:#0000FF !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">"https://unpkg.com/react@latest/dist/react.js"</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">script</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></code></p> <p class="line number7 index6 alt2" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html spaces" style="color:rgb(221,17,68);border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">    </code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;"><</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">script</code><code class="html color1" style="border:0px !important;color:#808080 !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">src</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">=</code><code class="html string" style="border:0px !important;color:#0000FF !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">"https://unpkg.com/react-dom@latest/dist/react-dom.js"</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">script</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></code></p> <p class="line number8 index7 alt1" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html spaces" style="color:rgb(221,17,68);border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">    </code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;"><</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">script</code><code class="html color1" style="border:0px !important;color:#808080 !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">src</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">=</code><code class="html string" style="border:0px !important;color:#0000FF !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">"https://unpkg.com/babel-standalone@6.15.0/babel.min.js"</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">script</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></code></p> <p class="line number9 index8 alt2" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html spaces" style="color:rgb(221,17,68);border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">  </code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;"></</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">head</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></code></p> <p class="line number10 index9 alt1" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html spaces" style="color:rgb(221,17,68);border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">  </code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;"><</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">body</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></code></p> <p class="line number11 index10 alt2" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html spaces" style="color:rgb(221,17,68);border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">    </code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;"><</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">p</code><code class="html color1" style="border:0px !important;color:#808080 !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">id</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">=</code><code class="html string" style="border:0px !important;color:#0000FF !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">"root"</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">p</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></code></p> <p class="line number12 index11 alt1" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html spaces" style="color:rgb(221,17,68);border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">    </code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;"><</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">script</code><code class="html color1" style="border:0px !important;color:#808080 !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">type</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">=</code><code class="html string" style="border:0px !important;color:#0000FF !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">"text/babel"</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></code></p> <p class="line number13 index12 alt2" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html spaces" style="color:rgb(221,17,68);border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">      </code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">ReactDOM.render(</code></p> <p class="line number14 index13 alt1" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html spaces" style="color:rgb(221,17,68);border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">        </code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;"><</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">h1</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">>Hello, world!</</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">h1</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">>,</code></p> <p class="line number15 index14 alt2" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html spaces" style="color:rgb(221,17,68);border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">        </code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">document.getElementById('root')</code></p> <p class="line number16 index15 alt1" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html spaces" style="color:rgb(221,17,68);border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">      </code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">);</code></p> <p class="line number17 index16 alt2" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html spaces" style="color:rgb(221,17,68);border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">    </code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;"></</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">script</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></code></p> <p class="line number18 index17 alt1" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html spaces" style="color:rgb(221,17,68);border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">  </code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;"></</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">body</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></code></p> <p class="line number19 index18 alt2" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;"></</code><code class="html keyword" style="border:0px !important;color:rgb(0,102,153) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-weight:bold !important;min-height:auto !important;background:none !important;">html</code><code class="html plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">></code></p> </td> </tr></tbody></table> <p><br></p> <p style="border:0px;">Wie Sie sehen, verweist der Code auf die vorgefertigten React-bezogenen Bibliotheksdateien im CDN, sodass der React-Code tatsächlich ziemlich gut geschrieben werden kann Wenn Sie einfach einen lokalen Editor finden (Sublime Text, Notepad++ usw.), können Sie direkt mit der Arbeit beginnen und die Grundlagen von React erlernen. </p> <p style="border:0px;">Am Anfang ging es mir so: Ich habe Sublime Text verwendet, um den Code zu bearbeiten, und habe einfach und grob begonnen (ich habe auch nach React-bezogenen Plug-Ins auf Sublime Text gesucht). Aber als ich den Skriptteil von React in eine externe js-Datei einfügte und einführte, konnte das Beispiel nicht ausgeführt werden (ich habe den Chrome-Browser verwendet). Dann sagten mir alle, dass ich Serverunterstützung benötige, und fragten schnell Gavin um Unterstützung. </p> <p style="border:0px;"><span style="border:0px;">Node.js- und WebStorm-Installation</span></p> <p style="border:0px;">Gavins Projekt ist ungefähr React als Frontend und Java als Backend. Die mir empfohlenen Tools sind auch die dominanten IDEs der JetBrains-Familie. , WebStorm und Intellij IDEA, es sollte so einfach sein, React in WebStorm zu verwenden, also werde ich WebStorm und Node.js herunterladen (naja, ich habe sie noch nie verwendet, also habe ich sie einfach weggenommen). </p> <p style="border:0px;">npm ist ein Node.js-Paketverwaltungs- und -verteilungstool. Wir können React über npm einführen und eine React-Umgebung erstellen. Die neue Version von Node.js hat npm integriert.</p> <p style="border:0px;">Ich habe die neueste Version v7.4.0 für Windows (x64) heruntergeladen. Ich werde nicht auf Details zur Installation eingehen. </p> <p style="border:0px;">Tatsächlich können Sie nach der Installation von Node.js mit dem vorherigen Sublime Text weiterarbeiten, da Node.js Serverunterstützung bereitstellen kann, sodass das vorherige Beispiel in NetEase Cloud kein Problem darstellt Klassenzimmer Die Umgebung ist wie folgt eingerichtet (aber er verwendet den Atom-Editor von Github): </p> <p style="border:0px;"> In diesem Kurs wird auch Browsersync vorgestellt, ein zeitsparendes Tool zum Testen der Browsersynchronisierung (entschuldigen Sie, ich war noch nie damit in Berührung gekommen Klasse, es ist nicht schlecht, nachdem ich es mir angesehen habe. Sie müssen den Code nicht jedes Mal ändern und F5 drücken. (Wenn Sie mehr erfahren möchten, besuchen Sie die Spalte <a href="http://www.php.cn/course/65.html" target="_blank">React Reference Manual </a> der PHP Chinese-Website, um mehr zu erfahren) </p> <p style="border:0px;"> Natürlich bevorzuge ich persönlich immer noch die Verwendung von IDE, daher muss ich WebStorm erleben (Als Java-Webentwickler habe ich leider nur Eclipse JEE verwendet und andere Szenarien ignoriert.) </p> <p style="border:0px;">Es ist kostenpflichtig, aber leistungsstark. Es gilt als die intelligenteste JavaScript-IDE und ein Web-Frontend-Entwicklungstool. Nachdem ich es heruntergeladen, installiert und lizenziert hatte, öffnete ich es aufgeregt und begann, es zu erleben. </p> <p style="border:0px;">Was zum Teufel ist das React Starter Kit auf der linken Seite? Es scheint, als wäre es aus Neugier maßgeschneidert für mich und Weg. Interessierte Freunde können es trotzdem ausprobieren, es kann verwendet werden, nachdem das endgültige Projekt erstellt wurde, aber die Dinge darin sind etwas kompliziert und ich verstehe es nicht ganz, also habe ich beschlossen, zum neuen leeren Projektschritt zurückzukehren Schritt für Schritt. </p> <p style="border:0px;">Nachdem das leere Projekt erstellt wurde, gibt es nichts mehr zum offiziellen Website-Tutorial. Es gibt einen Inhalt zum Erstellen einer Einzelseitenanwendung: </p> <blockquote style="border-width:0px 0px 0px 5px;border-left-style:solid;border-left-color:rgb(51,190,229);background:rgb(250,250,250);"><p style="border:0px;font-size:14px;line-height:1.6;">React App erstellen ist der beste Weg, mit der Erstellung einer neuen React-Einzelseitenanwendung zu beginnen. Es richtet Ihre Entwicklungsumgebung so ein, dass Sie die neuesten JavaScript-Funktionen verwenden können, bietet ein angenehmes Entwicklererlebnis und optimiert Ihre App für die Produktion.</p></blockquote> <p style="border:0px;"> Ich hatte das Gefühl, dass es eine fertige Methode gab, die verwendet werden konnte, also folgte ich ihrem Code: </p> <table border="0" style="border-collapse:collapse;border-spacing:0px;width:640px;border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-size:14px !important;min-height:auto !important;background:none !important;"><tbody style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;background:none !important;"><tr style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;background:none !important;" class="firstRow"> <td class="gutter" style="border:0px !important;line-height:1.1em !important;vertical-align:baseline !important;overflow:visible !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-size:14px !important;min-height:auto !important;color:rgb(175,175,175) !important;background:none !important;"> <p class="line number1 index0 alt2" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">1</p> <p class="line number2 index1 alt1" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">2</p> <p class="line number3 index2 alt2" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">3</p> <p class="line number4 index3 alt1" style="border-width:0px 3px 0px 0px !important;border-right-style:solid !important;border-right-color:rgb(108,226,108) !important;line-height:1.1em !important;overflow:visible !important;text-align:right !important;vertical-align:baseline !important;min-height:auto !important;">4</p> </td> <td class="code" style="width:608px;border:0px !important;line-height:1.1em !important;vertical-align:baseline !important;overflow:visible !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;font-size:14px !important;min-height:auto !important;background:none !important;"> <p style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;background:none !important;"><br></p> <p class="line number1 index0 alt2" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="shell plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">npm </code><code class="shell functions" style="border:0px !important;color:rgb(255,20,147) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">install</code><code class="shell plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">-g create-react-app</code></p> <p class="line number2 index1 alt1" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="shell plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">create-react-app hello-world</code></p> <p class="line number3 index2 alt2" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="shell functions" style="border:0px !important;color:rgb(255,20,147) !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">cd</code><code class="shell plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">hello-world</code></p> <p class="line number4 index3 alt1" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="shell plain" style="border:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;min-height:auto !important;background:none !important;">npm start</code></p> </td> </tr></tbody></table> <p><br></p> <p style="border:0px;">Moment, gibt es ein Problem bei der Eingabe der oben genannten npm-bezogenen Befehle? Nach der Installation von Node.js kann der obige Code über die Befehlszeile ausgeführt werden, wenn die Einstellung auf „ok“ gesetzt ist. In WebStorm scheint es meine Node.js-Umgebung erkannt zu haben, sodass npm direkt im Terminalfenster in der unteren linken Ecke von WebStorm verwendet werden kann, was der Befehlszeile entspricht. Geben Sie es einfach hier nacheinander ein: </p> <p style="border:0px;">Die Ausführung der ersten beiden Befehle, insbesondere des zweiten, wird einige Minuten dauern. Nach Abschluss sollte der React-bezogene Inhalt in unserem Projekt erstellt werden: </p> <p style="border:0px;">Es scheint, dass dies der Fall ist In meinem Hallo-React-Verzeichnis wurde ein neues Hello-World-Verzeichnis erstellt und der React-Inhalt darin installiert. Sehen Sie sich als Nächstes die Vorschläge an und geben Sie die letzten beiden Befehle ein, um das Verzeichnis aufzurufen und zu starten Wird nach Erfolg automatisch geöffnet. Die Seite scheint in Ordnung zu sein, um App.js zu bearbeiten, um in die React-Welt zu gelangen von Code? </p> <p style="border:0px;">Die Umgebung ist eingerichtet, aber ich weiß nicht, was in dieser Blackbox vor sich geht. Lassen Sie uns alles langsam studieren. </p> <p style="border: 0px;">Dieser Artikel endet hier (wenn Sie mehr sehen möchten, besuchen Sie die Spalte „React User Manual“ der PHP-Website, um mehr zu erfahren. Wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen). . </p>

Das obige ist der detaillierte Inhalt vonWie richte ich eine React-Umgebung ein? Detaillierte Einführung in den Aufbau einer Reaktionsumgebung (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!