React 환경을 설정하는 방법은 무엇입니까? 리액트 환경 구축에 대한 자세한 소개(예시 포함)

<p class="htmledit_views">이 글은 주로 <a href="http://www.php.cn/course/list/21.html" target="_blank">react</a>환경 구축에 대한 몇 가지 설명을 다루고 있습니다. 이제 이 글을 함께 살펴보겠습니다.</p> <h1 class="entry-title" style="font-family:inherit;font-weight:normal;line-height:1.2;color:rgb(34,34,34);border:0px;">React 환경 구축</h1> <p style="border:0px;">저는 최근에 React를 배웠고 시작하고 싶습니다. 몇 가지 간단한 프로젝트를 이해할 수 있고, 그냥 쿨한 척 하면 됩니다. 이틀 동안 연구한 결과 기술이 너무 빨리 업데이트된다는 느낌이 들었습니다. 새로운 기술을 계속 배우고 업데이트하지 않으면 정말 속도를 따라갈 수 없습니다. 환경 설정으로 인해 향후 참조를 위한 백업으로 이를 기록하기 위한 기사를 작성해야 할 필요성을 느꼈습니다. 초보자는 능력이 제한되어 있어 이해가 정확하지 않을 수 있습니다. </p> <p style="border:0px;"><span style="border:0px;">React 소개</span></p> <p style="border:0px;">React는 사용자 인터페이스 구축을 위한 JAVASCRIPT 라이브러리이자 사용자 인터페이스 구축을 위한 JS 라이브러리입니다. </p> <p style="border:0px;"><span style="border:0px;">Hello World 예제</span></p> <p style="border:0px;">공식 홈페이지에서 설치 소개를 읽은 후 여기를 클릭하면 React를 간단히 배울 수 있습니다. 실제로 그것이 의존하는 환경은 공식적으로 권장되는 온라인 환경인 CodePen을 사용하여 코드를 작성할 수 있습니다. 직접 결과를 확인하세요. 아무것도 구성할 필요가 없습니다. 하지만 상황이 너무 커지는 경우를 대비해 여전히 로컬에서 경험을 구축하고 싶습니다. </p> <p style="border:0px;">공식 홈페이지에서는 브라우저를 열어서 바로 실행할 수 있는 Hello World 웹페이지 코드(html 파일)를 제공하고 있습니다. </p>5<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;">6<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;">7<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;"></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;">보시다시피 코드는 이미 CDN에 있는 React 관련 라이브러리 파일을 참조하기 때문에 React 코드를 직접 작성할 수 있습니다. 사실 이건 로컬 에디터(Sublime)만 찾아도 꽤 괜찮습니다. Text, Notepad++ 등)을 통해 직접 작업을 시작하고 React의 기본 지식을 배울 수 있습니다. </p> <p style="border:0px;">처음에는 Sublime Text를 사용하여 코드를 편집하고 간단하고 투박하게 시작했습니다. (저도 Sublime Text에서 React 관련 플러그인을 찾아봤습니다.) 그런데 React의 스크립트 부분을 외부 js 파일에 넣어서 도입했더니 예제가 실행이 안 되더라구요(크롬 브라우저를 사용했어요). 그러자 다들 서버 지원이 필요하다고 하셔서 빨리 Gavin에게 지원을 요청하셨어요. </p> <p style="border:0px;"><span style="border:0px;">Node.js 및 WebStorm 설치</span></p> <p style="border:0px;">Gavin의 프로젝트는 대략적으로 프론트 엔드는 React이고 백엔드는 Java입니다. 저에게 추천하는 도구도 JetBrains 제품군의 주요 IDE인 WebStorm 및 Intellij IDEA입니다. WebStorm이 있어야 합니다. 너무 쉽기 때문에 WebStorm과 Node.js를 다운로드하겠습니다(글쎄, 아직 사용해본 적이 없어서 그냥 가져갔습니다). </p> <p style="border:0px;">npm은 Node.js 패키지 관리 및 배포 도구입니다. npm을 통해 React를 도입하고 React 환경을 구축할 수 있습니다. Node.js의 새 버전에는 npm이 통합되었습니다</p> <p style="border:0px;">Windows(x64) 버전용 최신 v7.4.0을 다운로드했습니다. 설치에 대한 자세한 내용은 온라인에 설명하지 않겠습니다. </p> <p style="border:0px;">실제로 Node.js를 설치한 후에도 이전 Sublime Text와 계속 결합할 수 있습니다. Node.js가 서버 지원을 제공할 수 있으므로 이전 예제는 문제가 되지 않습니다. NetEase Cloud Classroom의 이 과정은 다음과 같이 구성됩니다. 이 환경(그러나 그는 Github의 Atom 편집기를 사용합니다): </p> <p style="border:0px;">이 과정에서는 시간을 절약해 주는 브라우저 동기화 테스트 도구인 Browsersync도 소개합니다(죄송합니다. 저는 이런 유형에 노출된 적이 없습니다. 읽고 나면 꽤 좋습니다) ) , 코드를 변경할 때마다 F5를 누를 필요가 없습니다. (자세한 내용을 알고 싶으면 PHP 중국어 홈페이지<a href="http://www.php.cn/course/65.html" target="_blank">React Reference Manual</a> 칼럼을 참고하세요)</p> <p style="border:0px;">물론 개인적으로는 아직 IDE를 선호하기 때문에 WebStorm을 경험해 보아야 합니다(Java 웹 개발자로서 아쉽게도 나는 다른 풍경을 무시하고 Eclipse JEE만 사용했습니다. </p> <p style="border:0px;">유료이지만 강력합니다. 가장 똑똑한 JavaScript IDE이자 웹 프런트엔드 개발 도구로 알려져 있습니다. 다운로드하고, 설치하고, 라이센스를 부여한 후, 신나게 열어서 체험하기 시작했습니다. </p> <p style="border:0px;">왼쪽에 있는 React Starter Kit는 대체 뭔가요? React 스타터 키트인 것 같아요. 호기심에 선택해서 프로젝트 이름과 경로를 다시 지정했어요. 관심 있는 친구들은 한번 해볼 수도 있겠네요. 어쨌든 최종 프로젝트가 완성된 후에 사용할 수는 있겠지만, 내부 내용이 좀 복잡하고 잘 이해가 되지 않아서 빈 프로젝트 단계로 다시 돌아가기로 했습니다. 단계별로. </p> <p style="border:0px;">빈 프로젝트가 빌드된 후에는 아무것도 없습니다. 공식 웹사이트 튜토리얼로 돌아가세요. 단일 페이지 애플리케이션 만들기에 대한 내용이 있습니다: </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;">Create React App은 새로운 React 빌드를 시작하는 가장 좋은 방법입니다. 단일 페이지 애플리케이션입니다. 최신 JavaScript 기능을 사용할 수 있도록 개발 환경을 설정하고, 멋진 개발자 경험을 제공하며, 프로덕션에 맞게 앱을 최적화합니다.</p></blockquote> <p style="border:0px;">사용할 수 있는 방법이 미리 만들어져 있는 것 같으니 코드를 따르세요:</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 function" 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;">설치</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><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> <p class="line number2 index1 alt1" style="테두리:0px !important;line-height:1.1em !important;overflow:visible !important;vertical-align:baseline !important;min-height:auto !important;"><code class="shell plain" vera sans mono new courier>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 function" 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;배경: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> </td> <p class="line number4 index3 alt1">npm 시작</p> </tr></tbody> </table>🎜🎜<p><br></p> <p style="border:0px;">wait, 위의 npm 관련 명령어를 어디에 입력해야 하는지 문제가 있는 걸까요? Node.js를 설치한 후 ok로 설정하면 명령줄에서 위 코드를 실행할 수 있습니다. WebStorm에서는 내 Node.js 환경을 인식한 것 같으므로 WebStorm 왼쪽 하단에 있는 터미널 창에서 npm을 직접 사용할 수 있습니다. 이는 명령줄에 하나씩 입력하면 됩니다. # 🎜🎜#</p>처음 두 명령, 특히 두 번째 명령을 실행하는 데 몇 분 정도 걸립니다. 완료 후 React 관련 콘텐츠가 프로젝트에 생성되어야 합니다. <p style="border:0px;"></p>것 같습니다. , 내 hello-react 디렉토리에 새로운 hello-world 디렉토리를 생성하고 그 안에 React 콘텐츠를 설치했습니다. 다음으로 제안 사항을 참조하고 마지막 두 명령을 입력하여 디렉토리를 입력하고 시작하면 자동으로 브라우저가 열립니다. 그리고 프로젝트 홈페이지를 방문했습니다: <p style="border:0px;"></p> 모든 ​​것이 괜찮은 것 같았습니다. 페이지에서 React 세계로 들어가려면 src 아래의 App.js를 편집하라는 메시지가 표시되었습니다. <p style="border:0px;"></p> 환경은 마련됐지만 상황을 모르겠습니다. 이 블랙박스에는 뭔가가 있습니다. 이제 모든 것이 시작되었습니다. <p style="border: 0px;"></p>이 기사는 여기에서 끝납니다. (자세한 내용을 보려면 PHP 중국어 웹사이트 <p style="border: 0px;">React 사용자 매뉴얼 <a href="http://www.php.cn/course/65.html" target="_blank"> 열을 참조하세요.) 아래에 메시지를 남겨주세요. </a></p>

위 내용은 React 환경을 설정하는 방법은 무엇입니까? 리액트 환경 구축에 대한 자세한 소개(예시 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!