从0开始搭建react项目_从0搭建react项目

一、项目创建+插件安装

前端项目的创建有三种方式：
参考https://juejin.cn/post/6844903953524588552

1. 在html中引入react, react-dom,Babel（使浏览器识别JSX语法）等
2. 使用官方脚手架create-react-app创建
3. 使用Webpack创建
   个人认为第二种方式最简单，目前只介绍第二种方式

创建create-react-app脚手架

yarn global add create-react-app

创建react项目文件

npx create-react-app react-demo

启动后，可以通过3000端口进行访问

//Mac中自定义启动端口 Package.json文件中，将start命令中修改成 “PORT=1234 react-scripts start"

安装react的路由react-router-dom

yarn add react-router-dom —-save-dev

安装发送请求的axios.

yarn add axis

安装状态管理的react-redux

yarn add react-redux

二、设置项目目录结构

Api:接口文件
Components：相关组件文件
router：路由文件
static：静态资源文件
Store：react-redux状态管理文件
utils：各工具类文件
Views：页面视图层文件

三、配置按需加载（打包切片）

其他几种方式可以参考https://blog.csdn.net/qzf_hainenggaima/article/details/103163062

1. 目的意义：
   单页应用只有一个html,一个主要的css,js 传统打包是全打包成一个文件后引入，用户每次浏览都需要将整个项目都拉下来，因此引入按需加载方式
2. 简单高效的配置：
   通过webpack的import模块来实现按需加载

首先封装一个 异步加载模块 的组件asyncComponent.js，然后用该组件去引入要加载的模块

//异步加载组件
import React, {Component} from "react";

const asyncComponent = (importComponent) => {
    return class extends Component {

        constructor(){
            super();
            this.state = {
                component: null
            }
        }


        // 或者可以用async/await
        // async componentDidMount(){
        // const {default:component} = await importComponent();//解    构
        // this.setState({
        // component
        // });
        // }
        componentDidMount(){
            importComponent().then(cmp=>{
                this.setState({
                    //模块有default输出接口
                    component:cmp.default
                });
            })
        }


        render(){
            const Com = this.state.component;
            return Com ? <Com {...this.props}/> : null;
        }
    }
};


export default asyncComponent;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

然后在router.js中使用 注意react-router-dom在v6以后的版本中将Switch删除了，代替使用Routes

参考https://stackoverflow.com/questions/69854011/matched-leaf-route-at-location-does-not-have-an-element

import asyncComponent from "../asyncComponent";
import {BrowserRouter, Routes, Route} from 'react-router-dom'

const App = asyncComponent(() => import('../App.js'))
const Login = asyncComponent(() => import('../views/login'))
const Register = asyncComponent(() => import('../views/register.js'))

const BasicRoute = () => (
    <BrowserRouter>
        <Routes>
            <Route path='/' exact element={<App/>}/>
            <Route path='/login' exact element={<Login/>}/>
            <Route path='/register' exact element={<Register/>}/>
        </Routes>
    </BrowserRouter>
)

export default BasicRoute;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

还有另一种更简洁的方法是使用React.lazy搭配React.Suspense函数直接达到asyncComponnet的效果,还可以优化加载速度

Import React, {Suspense,lazy} from ‘react’;

const App =lazy(() => import('../App.js'))
const Login =lazy(() => import('../views/login'))
const Register =lazy(() => import('../views/register.js’))

const BasicRoute = () => (
    <BrowserRouter>
        <Suspense fallback={<div>Loding…</div>}>
            <Routes>
                <Route path='/' exact element={<App/>}/>
                <Route path='/login' exact element={<Login/>}/>
                <Route path='/register' exact element={<Register/>}/>
            </Routes>
        </Suspense>
    </BrowserRouter>
)

export default BasicRoute;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

App.js

import './App.css';
import {Link} from 'react-router-dom';
import React from 'react';

class App extends React.Component {
    render() {
        return (
            <div>
                123
                <Link to='/login'>login</Link>
                <Link to='/register'>register</Link>
            </div>
        )
    }
}


export default App;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

login.js

import React from "react”;

export default function Login(){
    return(
        <div>Login</div>
    )
}
1
2
3
4
5
6
7

最后在src/index.js文件中引入我们的路由文件router.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import BasicRoute from './router/router';
// import store from './store'

ReactDOM.render(
    <BasicRoute/>,
    document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
// reportWebVitals();


//If you want your app to work offline and load faster,you can change
//unregister() to register() below.Note this.comes with some pitfalls.
//Learn more about service workers:http://bit.ly/CRA_PWA
// serviceWorker.unregister()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

路由和路由的按需加载就ok了

执行yarn run build后查看build文件夹，可以看到build/static/js已经实现切片打包了

四、配置react-redux及redux-sagas

1. Redux:react为单页面应用，当涉及到大量数据如用户信息时，组件中每次数据传输都很费力，利用redux可以实现将变量统一管理，就像件一个仓库，当每个组件需要数据时，直接通过仓库读取或修改这些数据就行，不用再传过来传过去了
2. Redux-saga：redux的一个中间件，主要集中处理react架构中的异步处理工作，也可以不安装，按自己喜好来
   安装

yarn add redux -—save        //安装redux 
yarn add react-redux —save.  //安装react的绑定库
yarn add redux-saga          //安装sagas
1
2
3

写不完啦，下次分解

参考文章：
https://codeantenna.com/a/Q6CxihpQRP
https://www.1024sou.com/article/504944.html
https://blog.csdn.net/qzf_hainenggaima/article/details/103163062
https://www.jianshu.com/p/324fd1c124ad
https://cloud.tencent.com/developer/article/1680193
https://segmentfault.com/a/1190000010543507
https://www.appblog.cn/2019/06/22/React+Redux%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8%E6%B5%81%E7%A8%8B/