< /span>< /i>はじめに< /h1>

reactの開発環境の構築手順について解説します。< /p>

1. Node.jsのインストール< /li>
2. パッケージマネージャーyarnのインストール< /li>
3. creat-react-appのインストール< /li>
4. 構築した環境でHello Worldを表示させてみる< /li>
   < /ol>

   < /span>< /i>1 . Node.jsのインストール< /h1>

   まず、Node.jsをインストールするために、Node.jsの公式サイトを開きします（下記のURLをクリックしてください）。
   
   https://nodejs.org/ja/< /p>

   URLを開くとLTS版とCURRENT版（最新版）の２つがあります 。< /p>

   • LTS版
     
     LTSとは、Long-term Supportの略で、長期の保守運用が約束されたバージョンのことです。< /li>

   • CURRENT版
     
     CURRENTとは、最新版だけど安定性を約束しないことで機能追加を盛り込んだバージョンのことです。< /li>
     < /ul>
     < /blockquote>

     LTS版が推奨となっているので、今回はLTS版をダウンロードします。
     
     node.jsをダウンロードして、インストールが完了したら、ターミナルで下記のコマンドを実行します。そして、Nodeがインストールしているかを確認します。下記のようにNodeのバージョンが表示されていればよいです。< /p>

     < /span>< /i>2 . yarnをインストール< /h1>

     nodeのパッケージマネージャであるyarnをインストールしていきます。
     
     npmというパッケージマネージャが、Nodeをインストールしたときにありますが、npmよりもyarnの方がより高速で信頼度の高いものになっているので、yarnをインストールしていきます 。
     
     yarnをインストールする場合は、ターミナルで下記のコマンドを実行してください。< /p>

     $< /span> < /span>npm install< /span> --global< /span> yarn
     
     /usr/local/bin/yarn ->< /span> < /span>/usr / local / lib / node_module / yarn / bin / yarn.js
     
     /usr/local/bin/yarnpkg ->< /span> < /span>/usr / local / lib / node_module / yarn / bin / yarn.js
     
     + yarn@1.22.10
     
     updated 1 package in 1.698s
     
     < /span>< /code>< /pre>
     
     yarnがインストールされているかは、下記のコマンドを実行して、バージョンが表示されていればOKです 。< /p>
     
     < /span>< /i>3. creat-react-appのインストール< /h1>
     
     従来のreactを用いた開発では、Babelやwebpackなど様々なパッケージをマニュアルでインストールする必要があったため、ものすごく手間がかかっていました 。
     
     
      しかし、creat - react - appをインストールすることで、これらの問題が解消でき、簡単に必要なパッケージをインストールすることができます 。
     
     
      下記のコマンドを実行することでインストールできます 。< /p>
     $< /span> < /span>yarn global add create-react-app
     
     < /code>< /pre>
     
     
     < /span>< /i>4. 構築した環境でHello Worldを表示させてみる< /h1>
     
     ターミナルから下記のコマンドを実行して、アプリケーションを作成します。
     
     
     作成する場所は任意で構いません。< /p>
     react.jsの場合はこちら↓< /p>
     $< /span> < /span>yarn create react-app helloworld
     
     < /code>< /pre>
     
     react + TypeScriptの場合はこちら↓< /p>
     $ yarn create react-app helloworld --template typescript
     
     < /code>< /pre>
     
     
     もし、既にディレクトリを作成していて、そのディレクトリに展開したかったら下記のように実行する。< /p>
     $ cdhelloworld
     
     $ yarn create react-app --template typescript .
     
     < /code>< /pre>
     
     < /blockquote>
     
     下記のようなメッセージが表示されていればOKです。< /p>
     
     
      success is Uninstalled uninstalle package .
     
      ✨   Done in 46.14s . 
     
      create git commit . 
      Success ! create amplifyapp at /Users/*******/helloworld
     
      Inside that directory , you can run several command : 
        yarn start
     
          start the development server . 
        yarn build
     
          bundle the app into static file for production . 
        yarn test is Starts
     
          start the test runner . 
        yarn eject is Removes
     
          remove this tool and copy build dependency , configuration file
     
          and script into the app directory . If you do this , you is go ca n’t go back ! 
      We is suggest suggest that you begin by type : 
        cdhelloworld
     
        yarn start 
      happy hacking !
     
     < /span>< /code>< /pre>
     作成したプロジェクト配下に移動し、下記のstartコマンドを実行します。< /p>
     $< /span> < /span>cd< /span>helloworld
     
     $< /span> < /span>yarn start
     
     < /code>< /pre>
     
     実行後、ブラウザが起動し、以下の画面が表示されていればOKです。
     
     
     < /p>
     ここまでできたら、helloworld / src配下にあるApp.jsを開きましょう 。
     
     
     App.jsを開くと以下のようなコードが書かれていると思います。< /p>
     import< /span> react< /span> from< /span> '< /span>react< /span>'< /span>;< /span>
     
     import< /span> logo< /span> from< /span> '< /span>./logo.svg< /span>'< /span>;< /span>
     
     import< /span> '< /span>./App.css< /span>'< /span>;< /span>
     
     function< /span> App< /span>( )< /span> {< /span>
     
       return< /span>(< /span>
     
         << /span>div< /span> className< /span>=< /span>"App"< /span>>< /span>
     
           << /span>header< /span> className< /span>=< /span>" App - header "< /span>>< /span>
     
             << /span>img< /span> src< /span>=< /span>{< /span>logo< /span>}< /span> className< /span>=< /span>" App - logo "< /span> alt< /span>=< /span>"logo"< /span> />< /span>
     
             << /span>p< /span>>< /span>
     
                edit<< /span>code< /span>>< /span>src/App.js</< /span>code< /span>>< /span> and save to reload.
     
             </< /span>p< /span>>< /span>
     
             << /span>a< /span>
     
               className< /span>=< /span>"App-link"< /span>
     
               href< /span>=< /span>" https://reactjs.org "< /span>
     
               target< /span>=< /span>"_blank"< /span>
     
               rel< /span>=< /span>"noopener noreferrer"< /span>
     
             >< /span>
     
               Learn react
     
             </< /span>a< /span>>< /span>
     
           </< /span>header< /span>>< /span>
     
         </< /span>div< /span>>< /span>
     
       ) ;< /span>
     
     }< /span>
     export< /span> default< /span> App< /span>;< /span>
     < /code>< /pre>
     App.jsの内容を全て消して、以下のようにソースを書いてみましょう。< /p>
     import< /span> react< /span> from< /span> '< /span>react< /span>'< /span>;< /span>
     
     const< /span> App< /span> =< /span> ( )< /span> =>< /span> {< /span>
     
       return< /span>(< /span>
     
         << /span>div< /span>>< /span>
     
           << /span>h1< /span>>< /span>Hello World</< /span>h1< /span>>< /span>
     
         </< /span>div< /span>>< /span>
     
       ) ;< /span>
     
     }< /span>
     export< /span> default< /span> App< /span>;< /span>
     
     < /code>< /pre>
     修正してブラウザに以下のように表示されていればOKです。
     
     
     < /p>
     次回reactを用いてカウントアプリを作ってみたいと思います。
     
     
     reactでカウントアプリを作る< /p>