从零开始搭建react项目

首先说明为什么要写这个文章呢？是为了方便以后用react创建项目更方便不用做重复的事。

一、最熟悉的操作利用create-react-app搭建项目
1、全局安装create-react-app，执行：npm install -g create-react-app 命令进行安装
2、进入要安装项目的文件夹，执行：npx create-react-app react-blog 创建一个react-blog项目
3、进入项目cd react-blog，执行：npm start 编译启动项目即可
4、在项目src目录创建views文件夹，放置页面组件，这里我创建了login和main两个文件夹并创建了对应的Login.js、Main.js页面组件

// Login.js
import React from 'react'
export default function Login() { 
 return (  
  <div>Login</div>  
)
}

// Main.jsimport React from 'react'export default function Main() {  return (    <div>Main</div>  )}

5、在项目src目录创建components文件夹，放置公共组件

二、安装配置路由
1、首先安装路由组件,这里我使用的是5.0版本的配置：npm install react-router-dom@5 --save-dev
2、在src目录创建路由文件夹router并创建index,js
3、这里我做了token判断是否登陆，显示对应页面组件

import React from 'react';import { BrowserRouter ,Route, Switch, Redirect} from "react-router-dom";import Login from '@/views/login/Login';  //  导入登陆组件import Main from '@/views/main/Main';  // 导入登陆后要显示的main组件export default function IndexRouter() {  return (    <BrowserRouter>        <Switch>            <Route path='/login'  component={Login}></Route>            {/* <Route path='/'  component={Main}></Route> */}            <Route path='/'  render={()=>{                return localStorage.getItem('token')? <Main></Main> :  <Redirect to='/login'></Redirect>            }}></Route>        </Switch>    </BrowserRouter>  )}

3、修改src/App.js,引入我们的路由入口文件@/router/index

import React from 'react';import './App.css';import RouterView from '@/router/index';function App() {  return (    <RouterView></RouterView>  );}export default App;

好了，这样就可以访问我们的views目录下的login和sandbox页面组件了，哈哈哈～

三、提供将src根路径替换成@的方法
1、安装react-app-rewired：npm install react-app-rewired --save-dev
修改package.json文件

{  // ...  "scripts": {    "start": "react-app-rewired start",    "build": "react-app-rewired build",    "test": "react-app-rewired test",    "eject": "react-scripts eject"  },  // ...}

2、根路径下，添加config-overrides.js

const { resolve } = require('path')module.exports  =  function override(config, env){    config.resolve.alias = {        ...config.resolve.alias,        '@':resolve(__dirname, 'src')    }    return config;}

3、配置好上面文件后，npm start重启项目，在项目里就可以直接使用@符号来代理src目录路径了

四、这里引入的是Ant Design框架，也可以引入其他的UI框架
1、安装框架：npm install antd -D
2、修改 src/App.css，在文件顶部引入 antd/dist/antd.css
@import '~antd/dist/antd.css';
3、我们可以测试一下antd是否引入成功生效，修改 src/view/login/Login.js，引入 antd 的按钮组件

import React from 'react'import { Button } from 'antd';export default function Login() {  return (    <div>        <Button type="primary">Button</Button>    </div>  )}

好了，现在你应该能看到页面上已经有了 antd 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。

五、配置main页面组件实现登陆后的布局
1、在components目录创建SideMenu.js菜单组件

import React from 'react';import { withRouter } from 'react-router-dom'; // 使用高阶函数 才能使用props.historyimport { Layout, Menu } from 'antd';import {    UserOutlined} from '@ant-design/icons';const { SubMenu } = Menu;const { Sider } = Layout;function SideMenu(props) {    const menu = [  // 这里一般是后台请求接口获取，这里只做了简单的展示        {            id: 1,            title: "首页",            key: "/home",            children: []        },        {            id: 2,            title: "用户管理",            key: "/user-manage",            children: [                {                    id: 6,                    title: "用户列表",                    key: "/user-manage/list"                }            ]        },    ]    const renderMenu = (menulist) => {        return menulist.map((item) => {            if (item.children?.length > 0) {                return (                    <SubMenu key={item.key} icon={<UserOutlined />} title={item.title}>                        {renderMenu(item.children)}                    </SubMenu>                )            }            return (                <Menu.Item key={item.key} icon={<UserOutlined />} onClick={() => {                    props.history.push(item.key)                }}>{item.title}</Menu.Item>            )        })    }    const selectKey = props.location.pathname    const openkey = '/' + props.location.pathname.split('/')[1]    return (        <Sider trigger={null} collapsible>            <div style={{ display: 'flex', height: '100%', flexDirection: 'column' }}>                <div className="logo">后台管理系统</div>                <Menu theme="dark" mode="inline" style={{ flex: 1, overflow: 'auto' }} selectedKeys={selectKey} defaultOpenKeys={[openkey]}>                    {renderMenu(menu)}                </Menu>            </div>        </Sider>    );}export default withRouter(SideMenu);

2、在components目录创建TopHeader.js公共头部组件

import React, { useState } from 'react';import { Layout ,Dropdown,Avatar,Menu} from 'antd';import {  MenuUnfoldOutlined,  MenuFoldOutlined,  UserOutlined} from '@ant-design/icons';import { withRouter } from 'react-router-dom';const { Header } = Layout;function TopHeader(props) {  const [collapsed,setCollapsed]  =  useState(false)  const changeCollapse = ()=>{    setCollapsed(!collapsed)  }  const menu = (    <Menu>      <Menu.Item  key={'1'}>        超级管理员      </Menu.Item>      <Menu.Item  key={'2'} danger onClick={()=>{        localStorage.removeItem("token")        props.history.replace('/login')      }}>        退出      </Menu.Item>    </Menu>  );  return (        <Header className="site-layout-background" style={{ padding: '0 16px'}}>            {collapsed?<MenuUnfoldOutlined  onClick={changeCollapse}/>:<MenuFoldOutlined  onClick={changeCollapse}/>}            <div  style={{float:'right'}}>              <span style={{paddingRight:'10px'}}>欢迎<span  style={{color:'#1890ff'}}>admin</span>回来</span>              <Dropdown overlay={menu} placement="bottomRight" arrow>                  <Avatar size="large" icon={<UserOutlined />} />              </Dropdown>            </div>        </Header>  );}export default withRouter(TopHeader);

3、在src/router创建其他路由配置MainRouter.js

import React from 'react'import { Switch,Route ,Redirect} from 'react-router-dom';import Home from '@/views/home/Home';import UserList from '@/views/user-manage/UserList';export default function MainRouter() {  return (    <Switch>        <Route  path='/home' component={Home}></Route>        <Route  path='/user-manage/list' component={UserList}></Route>        <Redirect from="/"  to="/home" exact></Redirect>    </Switch>  )}

4、实现Main.js页面组件

import React from 'react';import SideMenu from '@/components/SideMenu';import TopHeader from '@/components/TopHeader';import MainRouter from '@/router/MainRouter';import { Layout } from 'antd';const {Content } = Layout;export default function Main() {  return(    <Layout>      <SideMenu></SideMenu>      <Layout className='site-layout'>          <TopHeader></TopHeader>          <Content            className="site-layout-background"            style={{              margin: '24px 16px',              padding: 24,              minHeight: 280,              overflow:'auto'            }}          >              <MainRouter></MainRouter>          </Content>      </Layout>          </Layout>  );}

5、所用到的css样式，这里我全部写在了App.css里

@import '~antd/dist/antd.css';html,body{  width: 100%;  height: 100%;}#root,.ant-layout{  height: 100%;}.ant-layout-header{  background-color: #fff;}.site-layout .site-layout-background{  background-color: #fff;}.logo{  background-color: rgba(255, 255, 255, 0.3);  color: #fff;  font-size: 20px;  line-height: 35px;  text-align: center;  margin: 10px;}

6、完成以上配置搭建后显示出来的效果

首页面