環境構築

React

node.jsのインストール

下記URLからnode.jsをインストールします

(https://nodejs.org/en/)

インストールしたら「node -v」でバージョン確認します

npmのインストール

つぎにnpmをグローバルインストールします

sudo pip install -g npm

同様に「npm -v」でバージョン確認します

アプリフォルダをつくる

npx create-react-app [任意のアプリ名]

ローカルサーバーを起動する（Reactアプリの表示）

cd app
npm start  // localhost:3000が立ち上がる（ホットリロード）

material UIのインストール

cd app

// インストールできたらpackage.jsonのdependenciesで確認
npm install @mui/material @emotion/react @emotion/style

// ROBOTフォントとICONSをCDNで使うために、publicディレクトリ内に下記コードを記述
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
/>
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>

本番環境用ファイルをつくる

npm run build  // buildディレクトリが作成される

※srcディレクトリには開発段階のファイルが入っています

BACK