React メモ

React セットアップ

npx create-react-app app_name

Material-UI

app_nameのpackage.jsonに、
・@material-ui/core
・@material-ui/icons
・@material-ui/system
が追加される

terminal

npm install --save @material-ui/core @material-ui/icons @material-ui/system

フォントを正しく反映できるように下記を追加

index.html

<!-- フォント -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<!-- アイコン -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

プロジェクトを実行

npm startとは、npmコマンドの1つで、npmを使用してファイルやプロジェクトを実行することができます。
package.json の scripts.start に指定された内容を実行することができます。

terminal

npm start

画像の表示

①importして表示する方法

jsx

import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image

console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt=
"Logo" />;
}

export default Header;

②静的ファイルを直接参照する方法

jsx

import React from 'react';

function Header() {
  return <img src={`${process.env.PUBLIC_URL}/logo.png`} alt="Logo" />;
}

export default Header;

ReactRouter

①react routerのインストール
※Reactが入っているディレクトリで実行する

terminal

npm i -S react-router-dom

②App.jsでreact-routerのインポート

App.js

import { BrowserRouter, Router, Link } from "react-router-dom";

③App.jsにトップページを設定するコードを書き込む

App.js

const App = () => (
  <BrowserRouter>
    <div>
      <Route exact path="/" component={Home} />
    </div>
  </BrowserRouter>
)

const Home = () => {
  return (
    <div>
      <h1>Welcome</h1>
    </div>
  )
}

Material UI KIT セットアップ

①webpackのインストール

npm i -D webpack webpack-cli

②webpackのコンフィグファイルを作成します。
ここでは、親ファイルをwebpack.config.jsとし、詳細はdevelopment.jsを読ませることにします。

touch webpack.config.js development.js

③設定ファイルには以下のように記述します。

webpack.config.js

webpack.config.js
require('@babel/register'); // development.jsでES6を使えるようにする
module.exports = require('./development');

development.js

import path from 'path'

const src  = path.resolve(__dirname, 'src')
const dist = path.resolve(__dirname, 'dist')

export default {
  mode: 'development',
  entry: src + '/index.jsx',

  output: {
    path: dist,
    filename: 'bundle.js'
  },

  module: {
    rules: [
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },

  resolve: {
    extensions: ['.js', '.jsx']
  },

  plugins: []
}

PIDの消し方

$ ps l
$ kill ID名