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