前端基础框架之react（持续更新中）

左手的ㄟ右手 2023-03-03 11:26 4阅读 0赞

自从三年前开发过react之后，就再没有用过了，三年后的今天react越来越火热，RA开发原生app，AntD UI框架，Hooks，函数组件,Redux都快忘光了，版本也更新迭代了n版，话不多说，捡起react的记忆吧。

1.配置环境并自动化创建react项目

安装node.js;安装create-react-app;

安装前需要安装node和npm（node版本不能低于8.xx，不然会报错）;

npm install -g create-react-app

创建react项目

create-react-app my-app

启动服务

npm start

安装elementUI

官网地址[https://elemefe.github.io/element-react/\#/zh-CN/quick-start][https_elemefe.github.io_element-react_zh-CN_quick-start]

npm i element-react --save//安装element-react UI
    npm install element-theme-default --save    //安装主题

使用 elementUI

在脚手架的App.js 中引入elementUI

import React, { Component } from 'react';
    import logo from './logo.svg';
    import './App.css';
    
    import { Button } from 'element-react';  //引入element-react
    import 'element-theme-default';          //引入主题

代码中添加elementUI组价件

class App extends Component {
      render() {
        return (
          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h1 className="App-title">Welcome to React</h1>
              <p className="App-intro">
               Hello react!!!
             </p>
             <Button type="primary">element按钮</Button>   // 按钮组件
             </header>
          </div>
        )
      }
    }

如果报以下错误，

Module not found: Can't resolve 'react-hot-loader' in 'd:\react\react-elementui\
    node_modules\element-react\dist\npm\es5\libs\animate'

就执行热加载配置

npm install react-hot-loader@next --save

然后继续npm start ，这样初步的项目就有了。

2.具体的开发配置

如果用Ant Design，sass，react-router-dom（路由）

npm install antd --save
    npm install node-sass --save
    npm install react-router-dom --save

创建一个路由router.js文件并在index.js里应用

import Router from './router';
    import { Button,Input } from 'antd';
    import 'antd/dist/antd.css';

配置路由

import React from 'react';
    import { HashRouter as Router,Route,Switch } from 'react-router-dom'
    import App from './pages/app'
    import Login from './pages/login'
    import Home from './pages/home'
    export default function IRouter(){
        return <Router>
            <Switch>
                <Route exact path="/" component={App}></Route>
                <Route exact path="/login" component={Login}></Route>
                <Route exact path="/home" component={Home}></Route>
            </Switch>
        </Router>
    }

[https_elemefe.github.io_element-react_zh-CN_quick-start]: https://elemefe.github.io/element-react/#/zh-CN/quick-start