React Universal Saga 项目教程

React Universal Saga 项目教程

react-universal-sagaUniversal React Starter Kit ft. Redux Saga项目地址:https://gitcode.com/gh_mirrors/re/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
  }
}

通过以上配置，可以确保项目代码的规范性和可维护性。

react-universal-sagaUniversal React Starter Kit ft. Redux Saga项目地址:https://gitcode.com/gh_mirrors/re/react-universal-saga