React Redux Styled Hot Universal 项目教程

React Redux Styled Hot Universal 项目教程

react-redux-styled-hot-universalreact boilerplate used best practices and focus on performance项目地址:https://gitcode.com/gh_mirrors/re/react-redux-styled-hot-universal

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

react-redux-styled-hot-universal/
├── src/
│   ├── components/
│   ├── containers/
│   ├── redux/
│   ├── routes/
│   ├── server/
│   ├── client.js
│   ├── server.js
│   └── index.js
├── static/
├── webpack/
├── .babelrc
├── .eslintrc
├── .gitignore
├── .stylelintrc
├── LICENSE
├── README.md
├── package.json
└── yarn.lock

目录结构介绍

• src/: 包含项目的主要源代码。
  • components/: 存放React组件。
  • containers/: 存放React容器组件。
  • redux/: 存放Redux相关的文件，如actions、reducers等。
  • routes/: 存放路由配置文件。
  • server/: 存放服务器端代码。
  • client.js: 客户端入口文件。
  • server.js: 服务器端入口文件。
  • index.js: 项目的主入口文件。
• static/: 存放静态资源文件。
• webpack/: 存放Webpack配置文件。
• .babelrc: Babel配置文件。
• .eslintrc: ESLint配置文件。
• .gitignore: Git忽略文件配置。
• .stylelintrc: Stylelint配置文件。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• package.json: 项目依赖和脚本配置。
• yarn.lock: Yarn锁定文件。

2. 项目的启动文件介绍

src/client.js

客户端入口文件，负责初始化客户端的React应用。

src/server.js

服务器端入口文件，负责启动服务器并渲染React应用。

src/index.js

项目的主入口文件，通常用于配置和启动整个应用。

3. 项目的配置文件介绍

.babelrc

Babel配置文件，用于配置Babel编译器，支持ES6+语法。

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

.eslintrc

ESLint配置文件，用于代码风格检查和错误检测。

{
  "parser": "babel-eslint",
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "rules": {
    // 自定义规则
  }
}

.gitignore

Git忽略文件配置，指定哪些文件和目录不需要被Git管理。

node_modules/
dist/
.env

.stylelintrc

Stylelint配置文件，用于CSS/SCSS代码风格检查。

{
  "extends": "stylelint-config-standard",
  "rules": {
    // 自定义规则
  }
}

webpack/

Webpack配置文件目录，包含客户端和服务器端的Webpack配置。

webpack/
├── client.js
└── server.js

package.json

项目依赖和脚本配置文件。

{
  "name": "react-redux-styled-hot-universal",
  "version": "1.0.0",
  "scripts": {
    "dev:start": "npm run start:client & npm run start:server",
    "start:client": "webpack-dev-server --config webpack/client.js",
    "start:server": "node src/server.js",
    "build": "npm run build:client && npm run build:server",
    "build:client": "webpack --config webpack/client.js",
    "build:server": "webpack --config webpack/server.js"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.4",
    "redux": "^4.1.0",
    "styled

react-redux-styled-hot-universalreact boilerplate used best practices and focus on performance项目地址:https://gitcode.com/gh_mirrors/re/react-redux-styled-hot-universal