从0到1学习react（四）

由于时间的问题，这个一直没有更新。今天正好在公司，就把之前使用vue写的项目用react实现了一下。

1. 创建项目

 这个应该作为一个前端清清楚楚的了，npm init,然后下载各种依赖，下面是我的依赖文件

{
  "name": "reactregister",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npm run build",
    "dev": "webpack-dev-server --port 9999 --hot --inline --progress --config  src/config/webpack.config.js",
    "start": "npm run dev"
  },
  "dependencies": {
    "@babel/polyfill": "^7.4.4",
    "babel-loader": "^8.0.6",
    "babel-preset-env": "^1.7.0",
    "less": "^3.9.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.1",
    "webpack-cli": "^3.3.5",
    "webpack": "^4.40.2"
  },
  "author": "Visupervi",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.4.4",
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "antd-mobile": "^2.3.1",
    "css-loader": "^3.0.0",
    "file-loader": "^4.0.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "rc-form": "^2.4.8",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-router-dom": "^5.0.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "styled-components": "^4.3.2",
    "url-loader": "^2.0.0",
    "webpack": "^4.40.2",
    "webpack-cli": "^3.3.8",
    "webpack-dev-server": "^3.8.0"
  }
}

 这些都是安装一点然后报错，然后按照错误一个个装起来的，如果你喜欢create-react-app也可以。

2. 配置webpack

按照之前vue的配置还是设置成单页应用，然后配置支持less的插件 下面是webpack的配置文件内容

const path = require('path');
const webpack = require('webpack');
const HtmlwebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: {
    app: path.resolve(__dirname, '../js/index.jsx')
  },
  output: {
    filename: "[name].[hash].js",
    path: path.resolve(__dirname,'dist'),
  },
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets:["@babel/preset-react"]
        }
      },
      {
        test: /\.(css|less)$/,
        loader: ['style-loader','css-loader','less-loader']
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"development"'
    }),
    new HtmlwebpackPlugin({
      title: "react App",
      filename: "index.html",
      template: path.resolve(__dirname, '../index.html'),
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        removeScriptTypeAttributes: true,
        removeStyleLinkTypeAttributes: true,
        removeAttributeQuotes: true
      }
    })
  ]
};

3. 项目目录

 我的目录

4.路由封装

/**
 * @author Visupervi
 * @date 2019/9/16 20:10
 * @name 对路由进行封装，实现类似于vue的路由
 * @param
 * @return
 */
import Register from "../components/RegisterComponent/register"
let router = [
  {
    path:"/",
    componentName:Register,
    exact:true
  },
];
export default router;

  对封装的路由的使用

import React, {Component} from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import router from '../router/Router';
class App extends Component {
  render() {
    return(
      <Router>
        <div className={"app"}>
          {
            router.map((router,key)=>{
              if(router.exact){
                return <Route
                  key={key}
                  exact={router.exact}
                  path={router.path}
                  component={router.componentName}
                />
              //     render={props => (
                //                             //主要是为了传递嵌套路由到子组件
                //                             //类似于 <User {...props} routes={routes} />
                //                             <componentName {...props} routes={routes} />
                //                           )}
              }else{
                return <Route
                  key={key}
                  path={router.path}
                  component={router.componentName}
                />
              }
            })
          }
        </div>
      </Router>
    )
  }
}
export default App

 注释掉的那部分是为了处理路由的子路由或者说子组件

5.剩下的那些就是很基础的了。自己记录一下别到时候忘记了。