React Universal Saga 项目教程
1. 项目的目录结构及介绍
react-universal-saga/
├── build/
├── config/
├── src/
│ ├── client/
│ ├── common/
│ ├── server/
│ ├── index.js
│ ├── reducers.js
│ ├── routes.js
│ ├── store.js
│ ├── sagas.js
├── .babelrc
├── .eslintrc
├── .gitignore
├── package.json
├── README.md
├── webpack.config.js
build/
: 存放编译后的文件。config/
: 存放项目的配置文件。src/
: 源代码目录。client/
: 客户端相关代码。common/
: 客户端和服务端共享的代码。server/
: 服务端相关代码。index.js
: 项目入口文件。reducers.js
: Redux reducers 文件。routes.js
: 路由配置文件。store.js
: Redux store 配置文件。sagas.js
: Redux-Saga 配置文件。
.babelrc
: Babel 配置文件。.eslintrc
: ESLint 配置文件。.gitignore
: Git 忽略文件配置。package.json
: 项目依赖和脚本配置。README.md
: 项目说明文档。webpack.config.js
: Webpack 配置文件。
2. 项目的启动文件介绍
src/index.js
是项目的入口文件,负责初始化客户端和服务端的环境,并启动应用。
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { Router, browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import configureStore from './store';
import routes from './routes';
const store = configureStore(browserHistory);
const history = syncHistoryWithStore(browserHistory, store);
render(
<Provider store={store}>
<Router history={history} routes={routes} />
</Provider>,
document.getElementById('root')
);
3. 项目的配置文件介绍
webpack.config.js
Webpack 配置文件,定义了如何打包项目代码。
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};
.babelrc
Babel 配置文件,定义了如何转译 JavaScript 代码。
{
"presets": ["env", "react", "stage-0"]
}
.eslintrc
ESLint 配置文件,定义了代码风格和规则。
{
"parser": "babel-eslint",
"rules": {
"semi": 2
}
}
通过以上配置,可以确保项目代码的规范性和可维护性。