从零搭建React项目框架与基本封装

最新推荐文章于 2024-08-12 19:01:02 发布
最新推荐文章于 2024-08-12 19:01:02 发布
阅读量848 收藏 4
点赞数 2
分类专栏： 前端 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kk12138123/article/details/128639438
版权

一、安装与使用

1、全局安装create-react-app

npm install -g create-react-app

2、创建项目

（your-app）项目名称，注意命名方式

create-react-app your-app

出现以下界面代表成功

在这里插入图片描述
进入项目，项目初始目录结构如下
在这里插入图片描述
在src目录下新建以下目录
其中：api：用来存放调用后台接口的方法；request:是axios 的封装；store:是reducx存放的地方；view:是我们的功能页面；当然还需要建uitl等包，这里基础搭建用不上~

在这里插入图片描述
执行 npm install（安装项目所需依赖）
执行npm run start 启动项目
出现如下界面表示启动成功
在这里插入图片描述

在这里插入图片描述

二、UI框架安装

这里本人选择的 Ant Design
安装命令

npm install antd

这里 antd 采采用按需引入方式；示例如下：

import React, {useEffect, useState} from "react";
//antd按需引入
import {Button, Form, Input, message, Modal, Select} from "antd";
import {queryRoleList, addOrEditUserList} from '../../../api/user/userApi'

export default function AddOrEditForm(props) {
    const {Option} = Select;
    const [form] = Form.useForm();
    const {title, record, open, close} = props
    const [roleList, setroleList] = useState([])
    const handleCancel = () => {
        close()
    }
    const onFinish = (values) => {
        console.log('Success:', values);
        if (title === "新增") {
            let portalRoleList = values.portalRoleList.map(ele => {
                return {
                    ROLE_ID: ele
                }
            })

            let params = {
                ...values,
                "portalRoleList": portalRoleList
            }
            addOrEditUserList(params).then(res => {
                if (res.code === 200) {
                    message.success("新增成功")
                    handleCancel()
                }
            })

        } else {
            let portalRoleList = values.portalRoleList.map(ele => {
                return {
                    ROLE_ID: ele
                }
            })
            let params = {
                ...values,
                "portalRoleList": portalRoleList,
                userId: record.userId
            }
            addOrEditUserList(params).then(res => {
                if (res.code === 200) {
                    message.success("编辑成功")
                    handleCancel()
                }
            })
        }
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    const queryRole = () => {
        queryRoleList().then(res => {
            if (res.code === 200) {
                setroleList(res.data)
            }
        })

    }
    useEffect(() => {
        if (open) {
            queryRole()
            let portalRoleList = record.portalRoleList.map(ele => {
                return ele.ROLE_ID
            })
            let valeus = {
                ...record,
                "portalRoleList": portalRoleList
            }
            form.setFieldsValue(valeus)
        }
    }, [open, form, record])

    return (<div>
        <Modal title={title} open={open} onCancel={handleCancel} footer={null}>
            <Form
                form={form}
                name="basic"
                labelCol={{
                    span: 8,
                }}
                wrapperCol={{
                    span: 16,
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item
                    label="用户名"
                    name="userName"
                    rules={[
                        {
                            required: true,
                            message: '请输入用户名',
                        },
                    ]}
                >
                    <Input/>
                </Form.Item>
                <Form.Item
                    label="姓名"
                    name="name"
                    rules={[
                        {
                            required: true,
                            message: '请输入姓名',
                        },
                    ]}
                >
                    <Input/>
                </Form.Item>

                <Form.Item
                    label="邮箱"
                    name="email"
                    rules={[
                        {
                            required: true,
                            message: '请输入邮箱',
                        },
                    ]}
                >
                    <Input/>
                </Form.Item>
                <Form.Item
                    label="电话"
                    name="phone"
                    rules={[
                        {
                            required: true,
                            message: '请输入电话',
                        },
                    ]}
                >
                    <Input/>
                </Form.Item>
                <Form.Item
                    label="所属角色"
                    name="portalRoleList"
                    rules={[
                        {
                            required: true,
                            message: '请选择所属角色',
                        },
                    ]}
                >
                    <Select
                        mode="multiple"
                        style={{
                            width: 120,
                        }}
                    >
                        {roleList.map((ele, index) => {
                            return <Option key={index} value={ele.ROLE_ID}>{ele.ROLE_NAME}</Option>
                        })}

                    </Select>
                </Form.Item>
                <Form.Item
                    wrapperCol={{
                        offset: 8,
                        span: 16,
                    }}
                >
                    <Button onClick={handleCancel} style={{marginRight: 15}}>取消</Button>
                    <Button type="primary" htmlType="submit">
                        确认
                    </Button>
                </Form.Item>
            </Form>
        </Modal>
    </div>)
}

三、封装axios

可以参考博主这篇文章，封装稍作修改UI即可

四、路由

1、安装命令

npm install react-router-dom

2、修改index.js文件中内容

import React from 'react'
import ReactDOM from 'react-dom'
import {BrowserRouter} from "react-router-dom";
import App from "./App";

ReactDOM.render(
    <BrowserRouter>
        <App></App>
    </BrowserRouter>, document.getElementById('root'))

3、src下创建路由配置文件routes.js

import Index from './view/index/Index'
import User from './view/User/Index'

const routes=[
    {
        title:"首页",
        path:"/index",
        element:Index
    },
    {
        title:"用户管理",
        path:"/user",
        element:User
    }
]
export default routes

4、修改App.js文件中内容

import { Routes, Route} from 'react-router-dom'
//登录页面
import Login from '../src/view/login/Login'
import routes from "./routes";
//布局页面
import LayoutIndex from './view/Layout/LayoutIndex'
function App () {
  return (
      <Routes>
        <Route path='/' element={<LayoutIndex/>}>
          {
            routes.map((ele,index)=>{
              let Element = ele.element
              return (<Route key={ index } path={ele.path} element={ <Element/>}></Route>)
            })
          }
        </Route>
        <Route path='/login' element={<Login />}></Route>
      </Routes>
  );
}
export default App;

5、创建页面布局组件与菜单组件

页面布局组件-LayoutIndex.jsx

其中Outlet 非常关键相当于vue中的router-view

import React from 'react'
import {Layout} from 'antd';
import LayoutMenu from './LayoutMenu'
import { Outlet } from 'react-router-dom'
const {Header, Sider, Content} = Layout;
export default function LayoutIndex() {
    return (
        <Layout style={{width: "100%", height: "100%"}}>
            <Header>
                <div style={{color:"white"}}>
                    智慧物业系统
                </div>

            </Header>
            <Layout>
                <Sider>
                    <LayoutMenu></LayoutMenu>
                </Sider>
                <Content style={{padding:5}}>
                    <Outlet/>
                </Content>
            </Layout>
        </Layout>
    )

}

右侧菜单组件-LayoutMenu.jsx

import React from "react";
import {Menu} from "antd";
import {Link} from "react-router-dom";
import routes from "../../routes";

export  default  function LayoutMenu(){
    return(<div>
        <Menu
            style={{
                width: 200,
                height:600
            }}
            mode="inline">
            {
                routes.map((ele,index)=>{
                    return (<Menu.Item className="Item" key={index}> <Link key={index} to={ele.path}>{ele.title}</Link></Menu.Item>)
                })
            }

        </Menu>
    </div>)
}

效果图如下：
在这里插入图片描述
最后附上源码链接：https://pan.baidu.com/s/1_5O70aIKBFvVJYNBiVVwoQ?pwd=6n1x
提取码：6n1x

陆仁丶
关注
专栏目录
React项目框架搭建
小小鲸鱼的后花园
09-22 2952
react项目
REACT实战项目从0到1搭建（仅供参考）
热门推荐
不怕麻烦的鹿丸的博客
12-06 2万+
按照。
从 0 开始搭建 React 框架
sinat_39145919的博客
01-26 1900
从 0 开始搭建 react 框架：webpack、react、redux toolkit、react-router、eslint、antd5、主题色切换
从零搭建React全家桶框架教程：快速搭建react+react-router+redux项目
最新发布
qq_24428851的博客
08-12 806
本文中没有对react-router和redux做什么原理性和概念性的介绍，纯粹作为傻瓜式的教程，由react基本项目，到接入react-router，最后接入redux完成一个基本的react全家桶项目搭建，目的是让初学者能够体验一下完整的react全家桶基本项目。之前的教程是搭建一个常见jsx版react项目，最近在新项目中使用了ts语言，组件编写全面拥抱了hooks，redux使用reduxjs/toolkit，而不是thunk。接下来我们稍稍调整下项目的目录结构和页面内容，新增About页面。
react项目级应用框架搭建
stars的博客
05-03 670
react项目级应用框架搭建项目目录结构记录自己的每个学习足迹1. 第一步创建项目2. 引入 antd 组件库3. 接下来是加入redux状态管理4. 路由的配置5. http请求6. proxy代理7.引入路经问题8. 最终的的package.json文件 项目目录结构 记录自己的每个学习足迹 做项目,学习技术,学习框架都少不了项目框架的搭建;这里记录下自己搭建框架的过程。框架技术点react...
采用React框架搭建项目
u012716788的专栏
07-17 777
使用vue框架也做了很多项目，基本的需求业务逻辑都没可满足，可是依然对框架内部工作原理不是很熟悉，只是套用一些指令方法去应用，做开发越接近本质收入越大。 原生的一些写法可能已经很过时了，但是仍然要熟悉原理，否则一直停留在业务层，而非技术层。 花了一点时间，了解了下react框架。 react框架其实更注重原生思路，也偏原生的写法，而vue框架不关注底层原理，只使用方法。 讲效率的话若降低成本可以选vue，如果开发大型项目选react会更灵活。 开始搭建react项目 安装 1、安装react 安装两种方式，
【React进阶-1】从0搭建一个完整的React项目（入门篇）
jsjxxx的博客
06-29 1万+
这篇文章带领大家从零开始手动撸一个React项目的基础框架，集成React全家桶。万字长文，请各位有足够的时间时再来阅读和学习。概述 平时工作中一直在用React提供的脚手架工具搭建React项目，一行命令全都搞定，自己只管做需求开发即可，从来没仔细研究过各个模块代码怎么去配置，相互之间怎么去进行交互。这周正好有时间，所以决定仔细研究下React项目中的各个功能模块，所以我们来讲解下如何从零搭建一个完整的React项目。目录 项目初始化 安装NodeJS环境和初始化项目安装webpack新建项目目录和文件
从零开始使用 webpack5.x 搭建 react 项目
木槿小凡的博客
06-26 1328
搭建一个react-webpack框架 环境： webpack 5.x 疑问：明明已经有create-react-app脚手架了，为何还要自己去用webpack去重新做一个脚手架？ 当然，create-react-app是一个很棒的脚手架了，我们查看其源码，知道其也是在webpack基础上封装的一个脚手架工具，再细看其配置内容，就知道为何需要自己封装一个自己的框架了。 1.因为其在打包时，是将node_module目录下所有包都打包到一个vender.chunk里的，而所有自定义的js部分，都打包到一
从零开始搭建react项目
weixin_44156701的博客
02-20 406
零基础写react
粗略从0搭建react webpack框架
ljlhnick的博客
03-31 302
第一步 在新目录里用npm init命令生成一个package.json 写一些基础的配置 第二步 安装webpack 我用webpack5， 注意webpack5和webpack-cli搭配时 后者需要指定在3.3.12版本，不然会有报错 npm i webpack webpack-cli@3.3.12 -D 第三步 根目录下建立src 在src下建立index.js 在根目录下建立webpack.config.js 配置webpack.config.js 针对入口 打包出口进行配置..
react 框架搭建
01-25
react 框架搭建，包含react,react-redux,expession等等等
react框架搭建源码
04-11
根据react+mobx+antd搭建的项目，新手学习react可用，配套文字说明请另行下载
从零开始React项目架构(一)
weixin_34153893的博客
06-06 239
前言 零零散散也做过不少项目了，有基于jquery、bootstrap的，有基于jquery、easyui的，有基于react的。 项目多了总会有一些自己感悟和经验，所以分享出来，肯定有不对和不合适的地方，欢迎批评指正。 好了，废话不多说了，让我们从零开始，一步一步的折腾吧。 概述 我暂时分成5各部分来介绍： 开发环境创建 配置eslint，创建项目文件和目录结构 mock本地数据模拟接口 ...
搭建react框架
weixin_61608271的博客
06-20 251
react框架的搭建
自己动手搭建一个React框架——toyReact
yfm120750310的博客
09-05 955
toyReact框架搭建环境配置JSX 原理和关键实现 我们之前在博客上有提到 react的教程中tic-tac-toe游戏的案例，那么在篇博客中，我们主要要实现的是搭建自己的toyReact框架，将tic-tac-toe在toyReact框架中跑起来。 环境配置 包安装： npm install --save-dev webpack webpack-cli npm install --save-dev babel-loader @babel/core @babel/preset-env npm insta
React框架创建项目详细流程-项目的基本配置-项目的代码规范
m0_71485750的博客
11-02 1万+
文件夹、文件名称统一小写、多个单词以连接符(-)连接, 组件采用大驼峰;JavaScript变量名称采用小驼峰标识，常量全部使用大写字母;CSS采用普通CSS和styled-component结合来编写(全局采用普通CSS或Less、局部采用styled-component);整个项目不再使用class组件，统一使用函数式组件，并且全面拥抱Hooks;所有的函数式组件，为了避免不必要的渲染，全部使用memo进行包裹;组件内部的状态，使用useState、业务数据全部放在redux中管理;
React从零开始搭建项目
QZ9420的博客
09-03 427
const {override , fixBabelImports } = require('customize-cra') module . exports = override(// 针对antd实现按需打包：根据import进行打包（使用babel-plugin-import） fixBabelImports('import' , {libraryName : 'antd' , libraryDirectory : 'es' , style : 'css' // 自动打包相关的样式 }))
react 前端项目搭建
weixin_44254297的博客
06-03 395
react eslint prettier
react 项目框架的搭建(一)
boke的博客
03-07 1548
1.下载和安装create-react-app faceback 提供的基础手脚架 在本地新建一个文件夹，然后启动powershell,敲 yarn create react-app my-app 如果安装失败，应该就是墙的问题。这时可以考虑切换npm的源。 方法一： npm config set registry https://registry.npm.taobao.org 方法二：在同层目录下新建一个.npmrc 的文件，里面写上 sass_binary_site=https://npm.taob
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值