React的安装配置

npx create-react-app app_name

材料界面

以下是中文的同义词表达：
在 app_name 的 package.json 文件中追加了以下内容：
– @material-ui/core
– @material-ui/icons
– @material-ui/system

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

为了正确显示字体，请添加以下内容。

<!-- フォント -->
<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命令的一种，使用npm可以执行文件或项目。
可以执行package.json中的scripts.start指定的内容。

npm start

展示图像

①展示使用import导入的方法

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;

直接访问静态文件的方法

import React from 'react';

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

export default Header;

ReactRouter 可以用作一个用于 React 应用程序的常用路由库。

在装有React的目录中执行React Router的安装。

npm i -S react-router-dom

在App.js中导入react-router模块。

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

将以下代码添加到App.js文件中，用于设置首页页面

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

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

材料 UI KIT 安装

进行webpack的安装。

npm i -D webpack webpack-cli

创建webpack的配置文件。
在这里，我们将主文件命名为webpack.config.js，并指定它要读取development.js文件的详细信息。

请在设置文件中按照以下方式进行记录。

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

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名