【React】npmでプロジェクトを作成する方法

2022年11月19日React

npmでReactのプロジェクトを作成する方法を紹介します。

npmでReactプロジェクトを作成する方法

# PC全体でインストール
(windows) npm i -g create-react-app
(Mac)     sudo npm i -g create-react-app

# プロジェクトの作成方法
create-react-app {フォルダ名}

create-react-appをPC全体で利用できるようにインストールし終えたら、
たとえば　create-react-app react-projectのようにしてコマンドを実行すると、
react-projectフォルダが作成され、その中に一式ファイルが生成されます。

scriptについて

package.jsonに以下の記述があります。

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

npm startでプロジェクトを作成していけます。
npm buildは最終的な成果物を作成するときに使います。
npm testはtestするときに使います。
npm ejectは隠しファイルを表示するときに使います。

まずはいじってみる

src/App.jsというファイルがあります。

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js and save to reload.
        

          Learn React