React環境をセットアップするにはどうすればよいですか? React 環境構築の詳細な紹介 (例付き)-jsチュートリアル-php.cn

この記事では主に <a href="http://www.php.cn/course/list/21.html" target="_blank">react</a> 環境構築について説明します <h1 class="entry-title" style="font-family:inherit;font-weight:normal;line-height:1.2;color:rgb(34,34,34);border:0px;"> React 環境構築</h1> 私は最近 React を学び始めたいと思っています。いくつかの簡単なプロジェクトは理解できますが、クールなふりをするだけです。 2 日間研究を続けた後、テクノロジーの更新が早すぎると感じました。常に新しいテクノロジーを学習して更新しなければ、そのペースに追いつくことができません。この環境設定を見て、今後の参考のためにバックアップとして記事を書いて記録する必要性を感じました。初心者の能力には限界があり、理解が正しくない可能性があります。 React の紹介 React は、ユーザーインターフェイスを構築するための JavaSCRIPT ライブラリ、つまりユーザーインターフェイスを構築するための JS ライブラリです。 Hello World Example 公式 Web サイトでインストールの概要を読んだ後、ここをクリックして React を学習してください。実際、依存する環境は複雑ではなく、公式に推奨されているオンライン環境 CodePen を使用してコードを書くことができます。直接実行して結果を確認します。インストールは必要ありません。ただし、事態が大きくなりすぎた場合に備えて、ローカルで構築して体験したいと考えています。 公式 Web サイトには、ブラウザを開いて直接実行できる Hello World Web ページコード (HTML ファイル) が提供されています。コードは次のとおりです。 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 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 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 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 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 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 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 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 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 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 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 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 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 </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;"> <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><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> <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> <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> <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;">>こんにちは世界</</code><code class="html キーワード" style="border:0px ! important;color:rgb(0,102,153) ! important;line-height:1.1em ! important;overflow:visible ! important;vertical-align:baseline !重要;フォントファミリー:Consolas、'ビットストリーム Vera Sans Mono'、'Courier New'、Courier、等幅 !重要;フォントの重さ:太字 !重要;最小高さ:自動 !重要;背景:なし !重要;" >タイトル<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>>🎜🎜<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> <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> <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> <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> <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> <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> <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> <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> <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;">>こんにちは。世界!</</code><code class="html キーワード" style="border:0px ! important;color:rgb(0,102,153) ! important;line-height:1.1em ! important;overflow:visible ! important;vertical-align :baseline !重要;font-family:Consolas、'Bitstream Vera Sans Mono'、'Courier New'、Courier、等幅 !重要;フォントの重さ:太字 !重要;最小高さ:自動 !重要;背景:なし !重要;">h1<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> <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> <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 スペース" style="color:rgb(221,17,68);ボーダー:0px !重要;行高さ:1.1em !重要; 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 class="html スペース" style="color:rgb(221,17,68);ボーダー:0px !重要;行の高さ: 1.1em !重要;オーバーフロー:可視 !重要;垂直整列:ベースライン !重要;フォントファミリー:Consolas、'ビットストリーム Vera Sans Mono'、'Courier New'、Courier、等幅 !重要;min-height:auto !重要;背景:なし !重要;"> 🎜🎜);🎜🎜<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> <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> <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></code></code> </td> </tr> </tbody></table> コードが CDN 上の既製の React 関連ライブラリファイルを参照していることがわかります。実際、これはローカルエディター (Sublime Text) を見つけるだけで非常に優れています。、Notepad++ など) を使用して、直接作業を開始し、React の基本知識を学ぶことができます。 私も最初はこんな感じで、Sublime Textを使ってコードを編集し、シンプルかつ大雑把に始めました（React関連のプラグインもSublime Textで探しました）。しかし、React のスクリプト部分を外部の js ファイルに入れて導入したところ、(Chrome ブラウザを使用して) サンプルを実行できませんでした。その後、サーバーのサポートが必要だと言われて、すぐに Gavin にサポートを求めました。 Node.js と WebStorm のインストール Gavin のプロジェクトは、大まかに言うと、フロントエンドとして React、バックエンドとして Java です。私に推奨されたツールも、JetBrains ファミリーの横暴な IDE、WebStorm と Intellij IDEA です。 WebStorm はこうあるべきです。とても簡単なので、WebStorm と Node.js をダウンロードします (まあ、まだ使用していないので、そのまま取り出しました)。 npmは、npmを通じてReactを導入し、React環境を構築できるNode.jsパッケージ管理・配布ツールです。 Node.js の新しいバージョンには npm が統合されています Windows (x64) バージョンの最新の v7.4.0 をダウンロードしました。インストールについては詳しく説明しません。 実際、Node.js をインストールした後は、引き続き以前の Sublime Text と組み合わせることができます。Node.js はサーバーサポートを提供できるため、前の例は問題ありません。NetEase Cloud Classroom のこのコースは次のように構築されています。この環境 (ただし、彼は GitHub の Atom エディターを使用しています): このコースでは、時間を節約するブラウザ同期テストツールである Browsersync も紹介します (申し訳ありませんが、私はこの種のものに触れたことはありません。読んだ後は非常に優れています)) 、コードを変更するたびに F5 キーを押す必要はありません。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイト<a href="http://www.php.cn/course/65.html" target="_blank">React Reference Manual</a> のコラムにアクセスして学習してください) もちろん、個人的には依然として IDE を使用することを好むので、WebStorm を経験する必要があります (Java Web 開発者として、残念ながら)私は Eclipse JEE のみを使用しており、他のシーナリーは無視しています)。 これは有料ですが、最もスマートな JavaScript IDE および Web フロントエンド開発ツールとして知られています。ダウンロード、インストール、ライセンス認証を行った後、興奮しながらそれを開いて体験を始めました。 左側の React Starter Kit とは何ですか? これは、私に合わせて作られたもののようです。興味本位でこれを選択し、プロジェクト名とパスを指定し直しました。興味のある友達は試してみてください。とにかく、最終プロジェクトをビルドした後でも使用できますが、中身が少し複雑でよくわからないので、新しい空のプロジェクトのステップに戻ることにしました。一歩ずつ。 空のプロジェクトがビルドされたら、何もありません。公式 Web サイトのチュートリアルに戻ります。「単一ページアプリケーションの作成」に関するコンテンツがあります。 <blockquote style="border-width:0px 0px 0px 5px;border-left-style:solid;border-left-color:rgb(51,190,229);background:rgb(250,250,250);">新しい React の構築を開始するには、React アプリの作成が最適です。シングルページアプリケーション。最新の JavaScript 機能を使用できるように開発環境を設定し、優れた開発者エクスペリエンスを提供し、実稼働用にアプリを最適化します。</blockquote> 既製の使い方があるように感じます。コードに従ってください: <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 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 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 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 </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;"> <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> <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> <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;">cd<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></code> hello-world<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;"></code>npm スタート</td> </tr></tbody> </table>🎜🎜 待って、上記の npm 関連コマンドを入力する場所に問題はありませんか? Node.js をインストールした後、ok に設定すると、コマンドラインで上記のコードを実行できます。 WebStorm では、私の Node.js 環境を認識しているようです。そのため、WebStorm の左下隅にあるターミナルウィンドウで npm を直接使用できます。これは、コマンドラインに相当します。ここに 1 つずつ入力するだけです。 最初の 2 つのコマンド、特に 2 番目のコマンドの実行には数分かかります。完了後、React 関連のコンテンツがプロジェクトに作成されます: 私の hello-react ディレクトリに新しく作成されたようです。 hello-world ディレクトリに React コンテンツがインストールされます。次に、その提案を参照して、最後の 2 つのコマンドを入力してディレクトリに入り、成功すると、ブラウザが自動的に開き、プロジェクトのホームページにアクセスします。 すべて問題ないようです。このページでは、React の世界に入るために src の下の App.js を編集するように求められます。信じられない場合は、2 行のコードを変更してみてください。 環境は整っていますが、このブラックボックスの中で何が起こっているのかわかりません。すべてはまだ始まったばかりです。 この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイトReact ユーザーマニュアル<a href="http://www.php.cn/course/65.html" target="_blank"> の列にアクセスして学習してください)。ご質問がある場合は、以下にメッセージを残してください。 </a>

以上がReact環境をセットアップするにはどうすればよいですか? React 環境構築の詳細な紹介 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。