使用create-react-app+react-router-dom+axios+antd+react-redux构建react项目

1、安装、构建

# 全局安装
npm install -g create-react-app
# 构建一个my-app的项目
npx create-react-app my-app
cd my-app

# 启动编译当前的React项目,并自动打开 http://localhost:3000/
npm start

2、项目目录

//默认

├── package.json ├── public # 这个是webpack的配置的静态目录 │ ├── favicon.ico │ ├── index.html # 默认是单页面应用,这个是最终的html的基础模板 │ └── manifest.json ├── src │ ├── App.css # App根组件的css │ ├── App.js # App组件代码 │ ├── App.test.js │ ├── index.css # 启动文件样式 │ ├── index.js # 启动的文件(开始执行的入口)!!!! │ ├── logo.svg │ └── serviceWorker.js └── yarn.lock
修改
├── package.json
├── public                  # 这个是webpack的配置的静态目录
│   ├── favicon.ico
│   ├── index.html          # 默认是单页面应用,这个是最终的html的基础模板
│   └── manifest.json
├── src
│   ├── assets            # 图片等静态资源
│   ├── redux             # 状态
│   │      ├── action.js                 # action
│   │      ├──reducerjs              # reducer
│   │      └── index.js                 # 主文件
│   ├── router             # 路由
│   │      ├── config.js                 # 配置
│   │      ├── FrontendAuth.js      # 路由守卫
│   │      └── index.js                 # 主文件
│   ├── serve            # 请求
│   │      ├── index.js            # axio
│   ├── views            # 页面
│   ├── App.css             # App根组件的css
│   ├── App.js              # App组件代码
│   ├── App.test.js
│   ├── index.css           # 启动文件样式
│   ├── index.js            # 启动的文件(开始执行的入口)!!!!
│   ├── logo.svg
│   └── serviceWorker.js
└── yarn.lock          

 

3、antd

yarn add antd

修改 src/App.css,在文件顶部引入 antd/dist/antd.css

@import '~antd/dist/antd.css';

.App {
  text-align: center;
}

...

antd 目前的默认文案是英文,如果需要使用其他语言,可以参考下面的方案。

antd 提供了一个 React 组件 ConfigProvider 用于全局配置国际化文案。

import zhCN from 'antd/es/locale/zh_CN';

return (
  <ConfigProvider locale={zhCN}>
    <App />
  </ConfigProvider>
);

4、axios

yarn add axios

/src/serve/index.js,统一配置并绑定到react上

import React from 'react';
import axios from 'axios';
axios.defaults.headers['Content-Type'] = 'application/json';


let config = {
  baseURL: '',timeout: 60 * 1000, Timeout
};
const _axios = axios.create(config);
_axios.interceptors.request.use(
  (config) => {
     Do something before request is sent
    config.headers['Authorization'] = '';
     config;
  },(error) => Do something with request error
     Promise.reject(error);
  }
);

 Add a response interceptor
_axios.interceptors.response.use(
  (response) => Do something with response data
     response
  },1)"> Do something with response error
     Promise.reject();
  }
);
React.Component.prototype.$axios = _axios;

5、router

yarn add react-router-dom

/src/router/config.js

import login from '../views/login';
import record from '../views/record';
import home from '../views/home';


export const routerConfig = [
  {
    path:'/'trueauth:true,
  },{
    path:'/login'
import React,{Component} from 'react';
import {Route,Redirect} from 'react-router-dom';

export class FrontendAuth extends Component {
  render() {
    const {location,config} = this.props;
    const {pathname} = location;
    const isLogin = localStorage.getItem('__config_center_token')

     如果该路由不用进行权限校验,登录状态下登陆页除外
     因为登陆后,无法跳转到登陆页
     这部分代码,是为了在非登陆状态下,访问不需要权限校验的路由
    const targetRouterConfig = config.find((v) => v.path === pathname);
    if (targetRouterConfig && !targetRouterConfig.auth && !isLogin) {
      const {component} = targetRouterConfig;
      return <Route exact path={pathname} component={component}/>
    }

    if (isLogin) {
       如果是登陆状态,想要跳转到登陆,重定向到主页
      if (pathname === '/login') {
        return <Redirect to='/'/>
      } else {
         如果路由合法,就跳转到相应的路由
         (targetRouterConfig) {
          return <Route path={pathname} component={targetRouterConfig.component}/>
        }  {
           如果路由不合法,重定向到 404 页面
          return <Redirect to='/404'/>
        }
      }
    }  {
       非登陆状态下,当路由合法时且需要权限校验时,跳转到登陆页面,要求登陆
      if (targetRouterConfig && targetRouterConfig.auth) {
        return <Redirect to='/login'/>
      }  非登陆状态下,路由不合法时,重定向至 404
              }
    }
  }
}

/src/router/index.js

import React,{ Component } from 'react';
import { Switch} from 'react-router-dom';

import { FrontendAuth } from './FrontendAuth';
import { routerConfig } from './config';


class Routes extends Component {
  render() {
     (
      <Switch>
        <FrontendAuth config={routerConfig} />
      </Switch>
    )
  }
}

export default Routes

app.js

import {BrowserRouter as Router} from 'react-router-dom';
import Routes from './router/index'

class App extends Component  {
  render() {
     (
      <Router>
        <Routes></Routes>
      </Router>
    );
  }
}

export default App;

6、scss

 安装完后,只要把sass文件改成.scss就行了

npm install node-sass sass-loader --save

7、修改端口号

项目默认端口号是3000,如下可以更改:

在package.json中修改
  "start":"react-scripts start"

8、react-redux

redux不是项目必需的,如果你不确定是否需要,那就是不需要,在react无法实现时,再考虑。

npm install react-redux redux --S

 /src/redux/action.js

/*
 * action 类型
 */

export const COUNT = 'COUNT';

 * 初始值
 

export const config = {
    count:1000
};



 * action 创建函数
 

export function setCount(value) {
     { type: COUNT,value }
}

/src/redux/reducer.js

这是action
import {
  COUNT
} from './actions'

这是reducer
const reducer = (state,action) => {
  switch (action.type) {
    case COUNT:
      let count =  action.value;
       {...state,...{count}};
    default:
       state;
  }
};
export default reducer

/src/redux/index.js

import { createStore } from 'redux';
import {config} from './actions';
import reducer from './reducer';
let store = createStore(reducer,config);

export default store

/src/index.js

import { Provider } from 'react-redux'
import store from './redux/index'

ReactDOM.render(
  <ConfigProvider locale={zhCN}>
    <Provider store={store}>
      <App />
    </Provider>
  </ConfigProvider>,document.getElementById('root'));

//页面调用示例

import React,1)">;
import { connect } from 'react-redux';
import {
  setCount,} from '../redux/actions'

class ReduxTest extends Component {

  componentDidMount() {
    console.log(.props)
  }
  render() {
    const { PayIncrease,tiger } = .props;
     (
      <div className="App">
        <h2>当月工资为{tiger}</h2>
        <button onClick={PayIncrease}>升职加薪</button>
      </div>
    );
  }
}
需要渲染什么数据
 mapStateToProps(state) {
   {
    tiger: state.count
  }
}
需要触发什么行为
 mapDispatchToProps(dispatch) {
   {
    PayIncrease: () => dispatch(setCount(99999)),}
}

export default ReduxTest = connect(mapStateToProps,mapDispatchToProps)(ReduxTest)

 

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如果组件之中有复用的代码,需要重新创建一个父类,父类中存储公共代码,返回子类,同时把公用属性...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例如我们的 setState 函数式同步执行的,我们的事件处理直接绑定在了 dom 元素上,这些都跟 re...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom 转为真实 dom 进行挂载。其实函数是组件和类组件也是在这个基础上包裹了一层,一个是调...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使用,可能是不了解。我公司的项目就没有使用,但是在很多三方库中都有使用。本小节我们来学习下如果使用该...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接触 react 就一直使用 mobx 库,上手简单不复杂。
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc 端可以使用分页进行渲染数限制,在移动端可以使用下拉加载更多。但是对于大量的列表渲染,特别像有实时数据...
本小节开始前,我们先答复下一个同学的问题。上一小节发布后,有小伙伴后台来信问到:‘小编你只讲了类组件中怎么使用 ref,那在函数式组件中怎么使用呢?’。确实我们...
上一小节我们了解了固定高度的滚动列表实现,因为是固定高度所以容器总高度和每个元素的 size、offset 很容易得到,这种场景也适合我们常见的大部分场景,例如...
上一小节我们处理了 setState 的批量更新机制,但是我们有两个遗漏点,一个是源码中的 setState 可以传入函数,同时 setState 可以传入第二...
我们知道 react 进行页面渲染或者刷新的时候,会从根节点到子节点全部执行一遍,即使子组件中没有状态的改变,也会执行。这就造成了性能不必要的浪费。之前我们了解...
在平时工作中的某些场景下,你可能想在整个组件树中传递数据,但却不想手动地通过 props 属性在每一层传递属性,contextAPI 应用而生。
楼主最近入职新单位了,恰好新单位使用的技术栈是 react,因为之前一直进行的是 vue2/vue3 和小程序开发,对于这些技术栈实现机制也有一些了解,最少面试...
我们上一节了了解了函数式组件和类组件的处理方式,本质就是处理基于 babel 处理后的 type 类型,最后还是要处理虚拟 dom。本小节我们学习下组件的更新机...
前面几节我们学习了解了 react 的渲染机制和生命周期,本节我们正式进入基本面试必考的核心地带 -- diff 算法,了解如何优化和复用 dom 操作的,还有...
我们在之前已经学习过 react 生命周期,但是在 16 版本中 will 类的生命周期进行了废除,虽然依然可以用,但是需要加上 UNSAFE 开头,表示是不安...
上一小节我们学习了 react 中类组件的优化方式,对于 hooks 为主流的函数式编程,react 也提供了优化方式 memo 方法,本小节我们来了解下它的用...
开源不易,感谢你的支持,❤ star me if you like concent ^_^
hel-micro,模块联邦sdk化,免构建、热更新、工具链无关的微模块方案 ,欢迎关注与了解
本文主题围绕concent的setup和react的五把钩子来展开,既然提到了setup就离不开composition api这个关键词,准确的说setup是由...
ReactsetState的执行是异步还是同步官方文档是这么说的setState()doesnotalwaysimmediatelyupdatethecomponent.Itmaybatchordefertheupdateuntillater.Thismakesreadingthis.staterightaftercallingsetState()apotentialpitfall.Instead,usecom