Redux-Undo-Boilerplate 项目教程

Redux-Undo-Boilerplate 项目教程

redux-undo-boilerplate:recycle: :wrench: a magical boilerplate with hot reloading and awesome error handling™项目地址:https://gitcode.com/gh_mirrors/re/redux-undo-boilerplate

1. 项目的目录结构及介绍

redux-undo-boilerplate/
├── src/
│   ├── index.html
│   ├── index.js
│   ├── reducers/
│   │   ├── rootReducer.js
│   │   ├── someReducer.js
│   ├── actions/
│   │   ├── someAction.js
│   ├── components/
│   │   ├── App.js
│   ├── store/
│   │   ├── configureStore.js
├── test/
│   ├── someTest.js
├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitattributes
├── .gitignore
├── .travis.yml
├── CHANGELOG.md
├── LICENSE
├── README.md
├── package.json
├── server.js
├── webpack.config.js

目录结构介绍

• src/: 项目的主要源代码目录。
  • index.html: 项目的入口HTML文件。
  • index.js: 项目的入口JavaScript文件。
  • reducers/: 包含所有的Redux reducer文件。
  • actions/: 包含所有的Redux action文件。
  • components/: 包含所有的React组件文件。
  • store/: 包含Redux store的配置文件。
• test/: 包含所有的测试文件。
• .babelrc: Babel配置文件。
• .editorconfig: 编辑器配置文件。
• .eslintrc: ESLint配置文件。
• .gitattributes: Git属性配置文件。
• .gitignore: Git忽略配置文件。
• .travis.yml: Travis CI配置文件。
• CHANGELOG.md: 项目更新日志。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• package.json: 项目依赖和脚本配置文件。
• server.js: 开发服务器配置文件。
• webpack.config.js: Webpack配置文件。

2. 项目的启动文件介绍

index.js

index.js 是项目的入口JavaScript文件，负责初始化React应用和Redux store。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';
import App from './components/App';

const store = configureStore();

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

server.js

server.js 是开发服务器的配置文件，负责启动开发服务器并提供热重载功能。

const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
  if (err) {
    return console.log(err);
  }
  console.log('Listening at http://localhost:3000/');
});

3. 项目的配置文件介绍

.babelrc

.babelrc 是Babel的配置文件，用于配置ES6+的转换规则。

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

.eslintrc

.eslintrc 是ESLint的配置文件，用于配置代码风格和错误检查规则。

{
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "browser": true,
    "node": true
  },
  "rules": {
    // 自定义规则
  }
}

webpack.config.js

webpack.config.js 是Webpack的配置文件，用于

redux-undo-boilerplate:recycle: :wrench: a magical boilerplate with hot reloading and awesome error handling™项目地址:https://gitcode.com/gh_mirrors/re/redux-undo-boilerplate