React 環境構築

今回はReactの環境構築です。

Reactを学習していくにあたり、まずは環境構築が必要だったので実施！！
環境構築って1度やったら滅多にやらない作業で忘れてしまいがちなので、あとから見返せるように備忘録を残しておきたいと思います。

今回はFacebookが提供している「Create React App」というツール(なのかな？)を使う方法です。

環境
　・Ubuntu18.04(Virtual Box)

まずは必要なnpmとnodejsのインストールです。

$sudo apt-get install -y npm
$sudo apt-get install -y nodejs

$sudo npm install n -g
$sudo n stable
$sudo node -v
v12.18.2 ←nodeのバージョンが得られる

次にyarnをインストールしていきます。
npmでも出来るようなのですが、yarnの方が高速かつ信頼性が高いようなので入れておきます。

$sudo npm install --global yarn

こちらでインストール出来ているか確認。
バージョン情報が表示されれば、問題なくインストール出来ています。

$yarn --version

これで、Create React Appを使うための前準備が完了しました。

次に実際にCreate React Appをインストールしていきます。
下記どちらかを実施します。
※実は①の方法で実施したのですが、
yarnでのインストール時にエラーは出なかったのですが、
　create-react-appが実行できない(create-react-app: コマンドが見つかりません)というメッセージが出てしまい、②に方向転換しました。
　もしかしたら今後も同じ状況になるかもしれないため、両方載せておきます。

①

$yarn global add create-react-app
$create-react-app testapp ←testappは作成アプリ名

②

$npm install -g create-react-app
$create-react-app testapp ←testappは作成アプリ名

create-react-app実行後、作成にしばらく時間がかかりますが、下記が表示されればOKです。

Success! Created ~~~ ←作成したディレクトリ名
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd testapp ←testappは作成アプリ名
  yarn start

Happy hacking!

表示された通り、こちらを実行します。

$cd testapp
$sudo yarn start

こちらのメッセージが表示されたら、webブラウザ上で
http://localhost:3000 or http://IPアドレス:3000を実行

Compiled successfully!

こちらのような画面が表示されたら無事環境構築は完了です。

作成したtestapp配下の、src/App.jsをこちらに置き換えると、

import React from 'react';

class App extends React.Component{
  render(){
    return(
      <div>
        <h1>Hello World</h1>
      </div>
    );
  }
}

export default App;

下記のような画面に変わります。

最後に、、、
環境構築は無事完了！！
これから、Reactについて学びながら動くものを作っていきたいと思います！！