Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/javaluo/react-luo
React Automatically - 保持最新技术 react18 hooks router6 webpack5 babel7 antd4
https://github.com/javaluo/react-luo
antdesign babel7 es10 prettier react-router-v5 reactjs redux webpack5
Last synced: 6 days ago
JSON representation
React Automatically - 保持最新技术 react18 hooks router6 webpack5 babel7 antd4
- Host: GitHub
- URL: https://github.com/javaluo/react-luo
- Owner: javaLuo
- License: mit
- Created: 2017-05-29T06:51:06.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-11-14T05:20:17.000Z (almost 2 years ago)
- Last Synced: 2024-10-30T21:05:08.813Z (6 days ago)
- Topics: antdesign, babel7, es10, prettier, react-router-v5, reactjs, redux, webpack5
- Language: JavaScript
- Homepage: https://isluo.com/work/pwa/
- Size: 6.43 MB
- Stars: 312
- Watchers: 13
- Forks: 70
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React-Luo
[![Build Status](https://travis-ci.org/javaLuo/react-luo.svg?branch=master)](https://travis-ci.org/javaLuo/react-luo)
[![codebeat badge](https://codebeat.co/badges/eb91ca34-7c1b-424f-be1c-a5d79fd3d269)](https://codebeat.co/projects/github-com-javaluo-react-luo-master)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) ![GitHub last commit](https://img.shields.io/github/last-commit/javaLuo/react-luo.svg?style=popout)## what is this?
react automatically
这是一个 React 脚手架,没有使用 create-react-app
标准的 React+Redux 分层结构
经过了多个项目的实践,不停的更新和优化出来的。目前自己做项目也在用。- PWA、Hooks、代码分割、热替换、HappyPack 多线程构建、ES6+语法
## 构建 Start
```
yarn install # 安装依赖模块yarn start # 运行开发环境: http://localhost:8888
yarn build # 正式打包,用于生产环境yarn dist # 运行正式打包后的最终文件(build目录下的文件): http://localhost:8889
yarn distmac # MAC下运行最终文件:http://localhost:8889yarn prettier # 自动格式化src、mock目录下的所有.js/.css/.scss/.less文件
```## 更新日志 Update log
见Wiki
## 目录结构 Structure
```
.
├── build # 正式打包后,会自动生成该文件夹,其中会包含最终用于生产环境的文件
│ ├── dist # 编译后的资源文件
│ ├── icons # 编译后自动生成的各尺寸favicon图标,有的会用于PWA配置
│ ├── asset-manifets.json # 记录了将会被缓存的资源
│ ├── index.html # 编译后的主页html
│ ├── manifest.json # PWA配置文件,配置了桌面图标,以APP方式启动时的启动页面相关参数
│ └── service-worker.js # PWA核心worker, 用于离线访问,缓存不变的资源文件
├── mock # mock测试数据
├── public # 静态文件,index.html等
├── src # 项目代码目录
│ ├── component # 所有的公共类UI组件
│ ├── container # 所有的页面级容器组件
| ├── ...
| └── router # 根组件,里面配置了顶级的路由
| ├── models # 模块(包含store数据/reducers/actions)
│ ├── assets # 所有的图片、文件等静态资源
│ ├── styles # 所有的样式文件
│ ├── store # store数据中心
│ ├── root # 根页
│ ├── store # store数据中心
│ ├── util # 自定义工具
│ ├── index.js # 项目入口JS
│ └── index.html # 主页html文件,开发环境和生产打包共用
├── server.js # 用于开发环境的服务部署
├── webpack.dev.config.js # 用于开发环境的webpack配置
└── webpack.production.config.js # 用于生产环境正式打包的webpack配置
```## 预览地址 Demo
https://isluo.com/work/pwa/
## 参阅资料
React 英文官网:https://reactjs.org
React 中文文档:https://doc.react-china.org
React GitHub 地址:https://github.com/facebook/react
React 官方更新日志:https://github.com/facebook/react/releases
React 生命周期:https://reactjs.org/docs/react-component.html
mockjs 官网:http://mockjs.com/
Eslint 中文站:http://eslint.cn/
Babel GitHub 地址:https://github.com/babel/babel