前のパートに戻る 完了して次のパートへ  

  2-1 Reactのインストール

このパートのゴール


  • create-react-appライブラリを使用して、Reactのアプリを立ち上げよう

Reactのインストール


任意のフォルダを用意してください。

筆者は、Desktop/workspace/配下にアプリケーションを作成しています。

以下の公式ドキュメントを参考にしました。

https://ja.reactjs.org/docs/create-a-new-react-app.html

まずは、nodeとnpxがインストールされているか確認します。

ターミナルを開いて、以下のコマンドを打ってバージョンが確認できるか試してください。

nodeとnpxがインストールされていない場合、以下のドキュメントを参考にして導入してください。

参考サイト)nodeインストール参考記事

参考サイト)npxインストール参考記事

Desktop/workspace ❯ node -v
v12.12.0
Desktop/workspace ❯ npx -v
6.11.3

続いて、create-react-appライブラリを使ってReactのアプリケーションを作成します。

Desktop/workspace ❯ npx create-react-app search-golf-app
... 
...
success Uninstalled packages.
✨  Done in 4.61s.

Initialized a git repository.

Success! Created search-golf-app at /Users/miyamizu/Desktop/works/rakuraku-golf/search-golf-app
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 search-golf-app
  yarn start

Happy hacking!

これでインストールが完了しました。

作成したアプリケーションのディレクトリに移動し、サーバーを立ち上げましょう。

Desktop/workspace ❯ cd search-golf-app
Desktop/workspace ❯ npm start

localhost:3000 にアクセスして、以下の画面が立ち上がれば成功です!

Control + Cを押すとサーバーを落とすことができます。

お疲れ様でした。

議論

4 質問

このコースの評価は?