React で Hello World

Reactのインストールと最初のプロジェクト作成をします。

Node.jsのインストール

Node.jsをインストールし、バージョンが確認できればOKです。

$ node -v
V16.15.1

今回の環境では、v16.15.1でした。

Yarnのインストール

パッケージマネージャとしてyarnを使います。 下記コマンドでインストールします。

$ npm install -g yarn

バージョン情報が出てくればOKです。

$yarn -v
1.22.5

Reactプロジェクトの作成

create-react-appを使って、プロジェクトのひな型を生成します。 今回はtest-appというプロジェクト名とします。

$ npx create-react-app test-app

以下のような表示がされれば成功です。

Success! Created test-app at <プロジェクトパス>
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run 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 test-app
  npm start

Happy hacking!

プロジェクトディレクトリに移動し、yarn startでサーバーを起動します。

$ cd test-app
$ yarn start

ブラウザが起動され、下のような画面が表示されれば成功です。