从零开始--react脚手架搭建银行APP项目(持续更新)

浅浅的花香味﹌ 2024-04-17 05:53 68阅读 0赞

## 项目介绍以及开发的动机 ##

首先贴出改项目的git地址：https://github.com/xiarongwen/bankApp  
这个项目是一个某银行的银行APP项目，在此之前以及用vue全家桶和vantUI库开发了第一期版本，主要功能有用户的**登录，开户，绑定银行卡，解绑银行卡，提现，充值**等基本功能，由于之前的开发者引入的插件过多和没有考虑性能优化的原因，所以我想利用我的空余时间把整个项目重构一遍，就是我这个项目的一个动机

## 第一步 利用create-react-app搭建项目基本架构 ##

由于我对webpack不是特别的熟系所以构建项目我就直接用react自带的脚手架工具搭建了

npx create-react-app bank-app

在cmd输入好命令回车 等待它安装就可以了，安装成功之后 `cd bank-app`进入项目的文件夹  
开始安装项目要用到的插件  
1.css预编译器 我选择了sass `npm i sass`  
2.由于是单页面应用所以要用到 react-router `npm i react-router`  
3. 我选择了用最常见的redux  
4. 还有其他的等等就不一一介绍了

最后安装好插件和依赖后使用`npm run server`启动项目.

## 第二步 文件夹的命名和项目的路由 ##

### 项目的文件夹我是这样来划分的： ###

**components**文件夹用于存放**可复用高的全局组件**  
**pages**文件夹用于存放页面的jsx文件 在这里因为我之后要用到rudex所以我把每一个页面的ui层和数据交互层都用了connect高阶组件分离  
**store**文件夹用一个仓库用来存放数据的  
**style**文件夹是用来放全局css的  
App.jsx：项目入口文件  
index.js：根文件  
…  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDE2Njc3_size_16_color_FFFFFF_t_70]

### 路由配置 ###

1.安装好react-router

npm install react-router-dom --save-dev

在App.jsx文件中引入

import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom'

这里我还用到了react的组件懒加载所以还要引入lazy组件

import React, { Component, lazy ,Suspense } from 'react'

添加路由懒加载必须用使用Suspense组件  
现在我在页面中添加了一个tab底栏来进行路由切换，现在整体的App.jsx的代码如下：

import React, { Component, lazy ,Suspense } from 'react'
    import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom'
    //引入样式重置
    import './style/base.scss'
    //全局样式
    import './style/index.scss'
    // 引入组件
    import Loading from './components/Loading'
    import Tab from './components/Tab/Tab'
    // 页面组件引入
    const HomePage = lazy(()=>import('./pages/home-page/index'))
    const MainIndex = lazy(()=>import('./pages/main/index'))
    class App extends Component {
      render() {
        return (
          <div>
            <Router>
              <div id='app'>
              <Suspense fallback={Loading}>
                <Switch>
                    {/* 路由重定向 */}
                    <Route path="/" exact render={()=><Redirect to="/index"/>}/> 
                    <Route path='/index' component={HomePage}></Route>
                    <Route path='/main' component={MainIndex}></Route>
                </Switch>
                </Suspense>
                <Tab></Tab>
              </div>
            </Router>
          </div>
        );
      }
    }
    
    export default App;

接下来还会要用到子路由跳转，这些之后再写…

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MDE2Njc3_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/11/2ce626fb155c4b4f8d4c98195252591b.png