https://github.com/lijinke666/react-project-template
React+Redux+ES6+Webpack4+React-Router4+Babe7 项目模板 By: Dawdler :)
https://github.com/lijinke666/react-project-template
babel7 cli dev nodejs react react-router-v4 tempalte webpack4
Last synced: 3 months ago
JSON representation
React+Redux+ES6+Webpack4+React-Router4+Babe7 项目模板 By: Dawdler :)
- Host: GitHub
- URL: https://github.com/lijinke666/react-project-template
- Owner: lijinke666
- License: mit
- Created: 2017-02-07T01:59:26.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T15:15:26.000Z (over 2 years ago)
- Last Synced: 2025-03-20T01:04:25.282Z (3 months ago)
- Topics: babel7, cli, dev, nodejs, react, react-router-v4, tempalte, webpack4
- Language: JavaScript
- Homepage: https://github.com/lijinke666/dawdler
- Size: 6.61 MB
- Stars: 12
- Watchers: 0
- Forks: 1
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-project-template
[](https://github.com/facebook/jest)
[email protected][email protected] 项目模板,支持按需加载
推荐直接使用脚手架生成 [dawdler](https://github.com/lijinke666/dawdler)
如需使用 TypeScript, 请使用 `typescript` 分支
Have Fun !
> 文件目录 参考 之前公司架构师 `seth` 大牛
## 本地开发
```
git clone https://github.com/lijinke666/react-project-template.git
npm install or yarn
npm start
访问(自动打开) http://localhost:8080/
```
## 基本的 npm scripts
* 开始 `npm start`
* 启动开发服务器 `npm run dev`
* 打包 `npm run build`
* 升级所有包 `npm run upgrade`
* 代码风格检查 `npm run lint`
* 测试 `npm run test`
* 覆盖率 `npm run ci`
## 相关技术栈
* react@16
* webpack@4
* babel@7
* connected-react-router@4
* react-router-dom@4
* react-router@4
* react-redux@5
* antd@3
* docker
## 关于 jest
> 由于使用的babel7 为了保持兼容 安装了一个
```
yarn add --dev [email protected] @babel/core babel-jest
```
请选择桥接模式(bridge) `[email protected]`
否则 `npm run test`可能出现以下报错
```
Requires Babel "^7.0.0-0", but was loaded with "6.26.0". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel.
```
[https://github.com/babel/babel-bridge](https://github.com/babel/babel-bridge)
## 网络请求
> 基于 axios 封装
```js
import request from "libs/request"
request.get()
request.post()
request.put()
request.delete()
```
## 默认高阶组件
> 错误边界
```jsx
import ErrorBoundary from "shared/components/ErrorBoundary"
@ErrorBoundary
export default class App extends React.PureComponent{
...
}
```
## 默认组件
> 1200px 包裹容器
```jsx
import Container from "shared/components/Container";
export default class App extends React.PureComponent {
render() {
return(xxxx);
}
}
```
## 项目目录
```
├── Dockerfile
├── LICENSE
├── README.md
├── __tests__
│ ├── __mocks__
│ │ ├── fileMock.js
│ │ └── styleMock.js
│ ├── setup.js
│ └── tests
│ ├── __snapshots__
│ │ └── components.test.js.snap
│ └── components.test.js
├── config
│ ├── development.config.js
│ ├── http.config.js
│ ├── index.js
│ └── production.config.js
├── deploy
│ ├── app.conf
│ └── nginx.conf
├── dist
│ ├── css
│ │ ├── app.a759184c.css
│ │ └── runtime.99a9ba82.css
│ ├── images
│ │ └── logo8501194e.png
│ ├── index.html
│ ├── js
│ │ ├── 5.e1db4215.js
│ │ ├── app.a759184c.js
│ │ ├── home.026a90d5.js
│ │ ├── runtime.99a9ba82.js
│ │ ├── testPage.8d9b912c.js
│ │ └── vendors.1fe3c3e5.js
│ └── vendor.b740a114.js
├── logo.png
├── package.json
├── postcss.config.js
├── rest-mock
│ └── dawdler.json
├── src
│ ├── Home
│ │ ├── index.js
│ │ └── styles.less
│ ├── app
│ │ ├── components
│ │ │ └── NotFound
│ │ │ ├── index.js
│ │ │ └── styles.less
│ │ ├── index.js
│ │ ├── styles.less
│ ├── icons.js
│ ├── index.html
│ ├── index.js
│ ├── polyfills.js
│ ├── shared
│ │ ├── components
│ │ │ ├── Container
│ │ │ │ ├── index.js
│ │ │ │ └── index.less
│ │ │ └── ErrorBoundary
│ │ │ └── index.js
│ │ ├── libs
│ │ │ ├── component.js
│ │ │ ├── history.js
│ │ │ ├── request.js
│ │ │ └── routes.js
│ │ └── styles
│ │ ├── fonts.less
│ │ ├── mixin.less
│ │ └── vars.less
│ └── style.less
├── webpack.config.js
└── yarn.lock
```
## License
[MIT](https://github.com/lijinke666/react-project-template/blob/master/LICENCE)