框架简介

本开发框架集成了前端工程化和模块化用到的各个技术，对想要学习前端开发的同学非常友好！可以说是前端入门非常经典的一个框架。使用webpack 4 打包构建，集成react 16.x 、 react-router 3.x 、redux-saga 0.13.x 、babel 6等。

掌握了此框架，基本就能对react技术栈有了一个比较完整的认识，可以使用react的技术栈进行开发。对后续掌握其他框架也会有一个比较好的参考依据，对其他框架的原理也会有更深刻的认识。例如umijs、dvajs、mirrorjs等，他们的设计思想都万变不离其中。

演示地址

https://ruolong.wang/react/

安装

检查npm版本要大于v6.4.0 ，node版本要大于v8.11.4 。确认无误后执行安装命令。

npm install

启动

npm start // 默认启动，配置文件使用server.js，可以通过ip访问。
npm run dev // 用package.json文件中的脚本启动，配置文件使用webpack.dev.js，无法通过ip访问。
npm run dist // 用package.json文件中的脚本启动，使用http-server访问，用于本地测试编译打包后的文件。

打包

npm run build:development // 打包开发环境，环境变量APP_ENV=development
npm run build:test // 打包测试环境，环境变量APP_ENV=test
npm run build:preproduction // 打包预生产环境，环境变量APP_ENV=preproduction
npm run build:product // 打包生产环境，环境变量APP_ENV=product

特性

集成 react 全家桶（react、react-router、redux）
集成 middleware （使用saga处理复杂的业务逻辑）
集成服务端 api 接口（通过api与服务端进行通信）
集成 babel 7（详细介绍.babelrc配置文件）
集成本地服务（三种本地服务启动方式）
使用 webpack 4 打包构建（打包优化、集成多种插件、集成babel、sass、less等相关的loader）
方便DevOps自动构建（在服务器上自动根据不同的环境选择配置文件进行打包）
集成 React 调试工具 DevTools （开发环境可以按 H 键打开redux状态预览窗口，按 W 键切换预览窗口的位置。）

还有很多细小的技术点 eslint、fetch 等...

目录结构

本框架主要还是采用分层组件化思想，把视图和数据分开。

components是纯组件，不用去管数据的业务逻辑，只负责把页面展示出来。

container是给components提供数据的，它把redux中的数据取出来按照预定要求组装好，然后传递给components。

saga监听redux的事件，当redux上面有dispatch事件的时候，saga也会监听到。并且saga提供了串行执行、互相调用等方法。用来处理复杂的业务逻辑，也可以通过service调用服务端的API，最终再把状态改写到redux中。

actions 改变redux状态的方法。
assets 图片等资源。
components dump组件，纯组件。
containers smart组件，提供状态和改变状态的方法，以及一些全局范围内的数据和函数等。
reducers 纯函数，用来改变redux中的值。
sagas 中间件，用来处理与服务端交互的复杂逻辑。
services 服务层，用于存放服务端的接口。
styles 公共样式文件
utils 工具类

使用

支持按需加载，import自己需要的组件，则只加载该组件和样式。

import React,{Component} from 'react'
import Button from 'bayd/lib/button'

export default class Welcome extends Component{
    render(){
        return(<div >
            <Button text='开始使用'/>
        </div>)
    }
}

大大白 / react-framework

框架简介

演示地址

安装

启动

打包

特性

目录结构

使用

简介

发行版

贡献者

近期动态

大大白 / react-framework .gitee-modal { width: 500px !important; }

框架简介

演示地址

安装

启动

打包

特性

目录结构

使用

简介

发行版

贡献者

近期动态

搜索帮助

大大白 / react-framework