从零开始搭建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、完成以上配置搭建后显示出来的效果
首页面