8
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@seira(seira)

create-react-appでReact（+Material-UI V4）の開発環境を準備する

Last updated at Posted at 2020-11-23

Create React AppでReact（+Material-UI V4）の開発環境を準備した時のメモ

Create React Appって何？

Create React AppはFacebookが公開したReactの環境構築ツールで、Reactを利用した開発環境を簡単に作成することが出来る。

Create React Appをインストール

Create React Appのインストールはnode及びnpmの環境が必要で、バージョンが適合しないとインストール出来ないので注意。パッケージマネージャーにyarnも利用したいのでインストールしておいた。

node -vコマンドでnodeのバージョンを表示してみる。

$ node -v
//nodeのバージョンが表示される
v14.15.1

//yarnをグローバルにインストール
$ npm install -g yarn

$ yarn -v
//yarnのバージョンが表示される
1.7.0

node公式サイトから安定版をインストールできる。LTSがついているversionが安定版。

$ npx create-react-app react-practice
$ cd react-practice
$ yarn start

react-practiceの部分は任意のディレクトリ名（プロジェクト名）。
作成したreact-practiceに移動し、yarn startでアプリを起動。

http://localhost:3000/にアクセスして次の画面が表示されていればインストール成功。
バージョン指定なしインストールしたら最新版（2020/11現在）V17.0.1であることを確認。
あっという間に開発環境ができた:hugging:

初期ファイル構成 画面
  • public/index.html はページテンプレート
  • src/index.js はJavaScriptのentryPoint
  • srcディレクトリはソースコードが配置されており、開発ではsrc以下のファイルを編集。
  • src/App.js は初期画面表示のAppコンポーネントが作成さている。

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</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

まずはsrc/App.jsを編集していくことで表示内容を変更してみる。不要そうなファイルを削除して開発準備完了。

参考： Create React App公式

簡単な表示テストをしてみる

まずは不要なロゴを削除し、src/App.js と src/App.css を編集。

react-practice
├── public
│   ├── logo192.png <= 削除 ×
│   ├── logo512.png <= 削除 ×
└── src
    ├── App.css   <= 編集 Material UIを追加後不要なので削除した
    ├── App.js    <= 編集
    ├── theme.js  <= Material UI用に追加
    ├── reportWebVitals.js  <= 削除 × 計測ツール、今回は不要なので削除した
    └── logo.svg  <= 削除 ×
App.jsx
import './App.css';

const App = () => {
  return (
    <div className="App">
      準備完了しました
    </div>
  );
}

export default App;

.App {
  text-align: center;
}

保存したタイミングでブラウザがリロードされ、文字列が 「準備完了！」に変更される。

こんな感じ。

Material-UIって何？

web開発をより高速かつ簡単なものにするGoogleMaterialデザインをベースに開発されたReactコンポーネントライブラリ。
手軽にMaterialDesignを取り入ることが出来、用意された多くのコンポーネントを組み合わせるだけで、デザイン工数をかけることなく見栄えのするサイトを構築出来る。

Material-UIをinstall

Material-UIをinstallしたら、公式ページで使いたいコンポーネントをすぐ見つけられるし、勝手にスタイリングしてくれるからテンションあがる😁

$ yarn add @material-ui/core

Material Iconsも使いたい。
表示が早くてキレイなSVGアイコンを利用できる。

$ yarn add @material-ui/icons

参考: Material-UI公式

theme.jsの作成例

サイト全体のベースになるテーマを作成

import { createMuiTheme } from '@material-ui/core/styles';

// サイトのベースとなる独自のテーマを作成する
const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#1976d2', //サイト内で使える任意のprimary color
    },
    secondary: {
      main: '#dc004e',//サイト内で使える任意のsecondary color
    },
    background: {
      default: '#fffafa', // 背景色を設定出来る。何も設定しなければ白
    },
  },
  typography: {
    fontFamily: [
      'sans-serif',
    ].join(','),
    fontSize: 12,
    h1: {
      fontSize: "1.75rem"
    },
    h2: {
      fontSize: "1.5rem"
    },
    h3: {
      fontSize: "1.25rem"
    },
    h4: {
      fontSize: "1.125rem"
    },
    h5: {
      fontSize: "1rem"
    },
    h6: {
      fontSize: "1rem"
    },
  }
});

export default theme;

index.jsの作成例

import React from 'react';
import ReactDOM from 'react-dom';
import CssBaseline from '@material-ui/core/CssBaseline';
import { ThemeProvider } from '@material-ui/core/styles';
import './index.css';
import App from './App';
import theme from './theme'; //作成した独自テーマをimport

ReactDOM.render(
  <ThemeProvider theme={theme}> {/*サイト全体でthemeを利用できるようにする*/}
    <CssBaseline /> {/*サイト全体で表示差異をなくして一貫性をもたせる*/}
    <App />
  </ThemeProvider>,
  document.getElementById('root')
);

CssBaselineブラウザ間の表示差異をなくして一貫性をもたせる。いわゆるnormalize.cssの役割。

参考： css-baseline

App.jsの作成例

import React from 'react'
import { makeStyles, createStyles } from '@material-ui/core/styles';
// 使いたいMaterial UIのコンポーネントをimport
import {Container, Box, Typography, Button, ButtonGroup} from '@material-ui/core';
// 使いたいMaterial Iconsをimport
import FavoriteIcon from '@material-ui/icons/Favorite';

// スタイルを適用する
// 引数に作成したthemeを受け取る
const useStyles = makeStyles((theme) =>({
    root: {
      padding: theme.spacing(2),
      textAlign: 'center',
    },
  }))

const App = () => {
  const classes = useStyles()
  return (
    <Container maxWidth="lg" className={classes.root}>
      <Typography variant="h1" component="h1">
        <FavoriteIcon color="secondary"/>
          Material UIも準備完了
        <FavoriteIcon color="secondary"/>
      </Typography>
      <Box m={4} >
        <Typography variant="body1" >
          ここにコンテンツが入ります。
        </Typography>
      </Box>
      <ButtonGroup color="primary" aria-label="outlined button group">
        <Button variant="contained" color="primary">Primary</Button>
        <Button variant="contained" color="secondary">Secondary</Button>
      </ButtonGroup>
    </Container>
  );
}

export default App;

見た目はこんな感じになった。

App.jsで使ったコンポーネント例

各コンポーネントのAPIドキュメントで、CSSカスタマイズポイントや使い方などが書かれている。

用意されているコンポーネントを組み合わせて、最速でReactサイトを構築できそう:heart_eyes_cat:

8
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
8
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?