Reactの新規環境構築

  1. 最新の Node.js がインストールされていることを確かめる
  2. Create React App のインストールガイドに従って新しいプロジェクトを作成する。

    npx create-react-app my-app

    ※以下でも同じらしい

    npm init react-app プロジェクト名

    そのあとでプロジェクト名に入り、npm install

  3. 新しく作ったプロジェクトの src/ 内にあるファイルをすべて削除する

    補足:src フォルダ自体をまるごと消すのではなく、中にあるソースファイルを削除してください。この次のステップで、デフォルトのソースファイルをこのプロジェクト用の例に置き換えます。

    cd my-app

    cd src

    # If you're using a Mac or Linux:

    rm -f *

    # Or, if you're on Windows:

    del *

    # Then, switch back to the project folder

    cd

  4. ..src/ フォルダ内に index.css という名前のファイルを作り、ここの CSS コードを記入する。

  5. src/ フォルダ内に index.js という名前のファイルを作り、ここの JS コードを記入する。
  6. src/ フォルダ内の index.js ファイルの先頭に以下の 3 行のコードを加える。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

これでプロジェクトフォルダ内で npm start を実行し、ブラウザで http://localhost:3000 を開く