React 项目搭建

目标：学习React基本语法，实现照片墙效果。重温ES6的Class

使用react

yarn add react react-dom
yarn add  @babel/preset-react -D
yarn add @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties -D // react中使用了装饰器
// 修改.babelrc
{
    "presets": [
      [
        "@babel/preset-env",
        {
          "modules": "false",
          "targets": {
            "browsers": [
              "> 1%",
              "last 2 versions",
              "ie >= 10",
              "iOS >= 8",
              "Android >= 4"
            ]
          }
        }
    ],
    ["@babel/preset-react"]
  ],
    "plugins": [
        [
            "@babel/plugin-transform-runtime", {
              "helpers": true,
              "corejs": 3,
              "regenerator": true
            }
        ],
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        ["@babel/plugin-proposal-class-properties"]
    ],
    // "ignore": ["./src/three.min.js", "./src/panolens.js"]
  }
// 修改index.js为index.jsx
import React from "react";
import ReactDom from "react-dom";
import './index.less';
import 'utils/svgIcon.js';
import cakeImg from 'assets/img/cake.png';

ReactDom.render(
    <div>
        <h4>hello webpack!</h4>
        <p>hello loader!</p>
        <img src={cakeImg} alt="cake"/>
    </div>,
    document.getElementById("root")
);

我们已经可以正常的写react组件了，但是一般开发中我们不会每次去执行build然后看结果，这样效率很低，而且如果用到router的话，直接运行index.html也没有效果，所以我们需要再本地起一个服务，随时更改就能看到效果。

yarn add react-redux react-router-dom

React Hot Loader is a plugin for Webpack that allows instantaneous live refresh without losing state while editing React components.
react-router-dom会自动安装react-router

赏

谢谢打赏

支付宝

微信