React + Material-UIの初期設定方法

はじめに

Qiita初投稿です。
プログラミングは始めたばかりですが、備忘録、アウトプットを兼ねてQiitaへの投稿を初めてみようと思いました。最近、React、Materialデザインのカッコいいサイトを作成したくなってきたので、初期設定からmaterial-uiの読み込みまでを書いてみようと思います。

React環境構築

この記事はNode.jsがインストールされている前提で書いていきます。
Nodeのインストールが済んでない方は以下のサイトからダウンロードしてみてください。
因みに僕のNodeのバージョンはv10.15.0です。
※version4以上のNode.jsが必要です。

Node.js Foundation.
https://nodejs.org/ja/

さて、Reactの環境構築ですがだいぶビルドが面倒だと聞いていたのですが、
最近はFackbook謹製のcreate-react-appで簡単に作成できるようです。

npm i -g create-react-app

でモジュールをインストールして

create-react-app {ファイル名}

で終了です。
Happy Hacking!を確認したら作成したファイルへ移動して、

npm start

これでlocalhost:3000でReactのデモページが確認できれば成功です。

Material-UIの読み込み

続いてmaterial-uiの読み込みです。

npm i @material-ui/core
npm i @material-ui/icons

でモジュールを読み込めばこんな感じで使えます。

App.js

import React, { Component } from 'react';
import Button from '@material-ui/core/Button';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
        <meta
          name="viewport"
          content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no">
        </meta>
          <Button variant="contained" color="secondary">
            Hello World!
          </Button>
        </header>
      </div>
    );
  }
}

export default App;

以上です！

Happy Hacking!