Jackblog React 版项目教程

Jackblog React 版项目教程

jackblog-react Jackblog react 版, 个人博客系统, 使用服务端渲染(Universal / Isomorphic), react, redux, react-router, react-bootstrap, immutablejs, redux-form等 项目地址: https://gitcode.com/gh_mirrors/ja/jackblog-react

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

jackblog-react/
├── README.md
├── dist/          // 项目构建后的输出目录
├── logs/          // 生产环境日志目录
├── src/           // 源代码目录
│   ├── actions/   // Redux action 目录
│   ├── api/       // API 请求
│   ├── assets/    // CSS 和图片资源
│   ├── components/ // 组件
│   ├── reducers/  // Redux reducer 目录
│   ├── store/     // Store 配置
│   ├── util/      // 工具函数
│   ├── client.js  // 客户端入口文件
│   ├── config.js  // API URL, Cookie domain 等配置文件
│   ├── index.html // 生产环境生成的 ejs 文件
│   ├── routes.js  // 路由配置
│   └── server.js  // 服务端渲染文件
├── webpack/       // Webpack 配置目录
│   ├── webpack.config.dev.client.js // 开发的客户端 Webpack 配置文件
│   ├── webpack.config.dev.server.js // 开发的服务端渲染 Webpack 配置文件
│   └── webpack-config-prod.js       // 生产的 Webpack 配置文件
├── History.md     // 更新日志
├── nodemon.json   // nodemon 配置文件
├── process.json   // pm2 配置文件
├── server.js      // 项目 server 入口文件
├── package.json   // 项目依赖和脚本配置
└── yarn.lock      // Yarn 锁定文件

2. 项目的启动文件介绍

server.js

server.js 是项目的入口文件，负责启动服务端渲染。它包含了服务端渲染的逻辑，并且会根据配置文件加载相应的路由和组件。

client.js

client.js 是客户端的入口文件，负责初始化客户端的 Redux store 和 React 应用。它会在浏览器中运行，并接管服务端渲染的内容。

3. 项目的配置文件介绍

config.js

config.js 文件包含了项目的配置信息，如 API 的 URL、Cookie 的 domain 等。这些配置信息在开发和生产环境中可能会有所不同。

webpack.config.dev.client.js

webpack.config.dev.client.js 是开发环境下的客户端 Webpack 配置文件。它定义了如何打包客户端的 JavaScript 和 CSS 文件，并且包含了开发环境下的调试工具配置。

webpack.config.dev.server.js

webpack.config.dev.server.js 是开发环境下的服务端渲染 Webpack 配置文件。它定义了如何打包服务端的 JavaScript 文件，并且包含了服务端渲染的相关配置。

webpack-config-prod.js

webpack-config-prod.js 是生产环境下的 Webpack 配置文件。它定义了如何打包生产环境下的 JavaScript 和 CSS 文件，并且包含了优化和压缩的配置。

nodemon.json

nodemon.json 是 nodemon 的配置文件，用于在开发环境下自动重启服务器。它定义了监听的文件和目录，以及重启服务器的命令。

process.json

process.json 是 pm2 的配置文件，用于在生产环境下管理 Node.js 应用。它定义了应用的名称、脚本路径、环境变量等。

package.json

package.json 是项目的依赖和脚本配置文件。它包含了项目的名称、版本、依赖库、脚本命令等信息。

yarn.lock

yarn.lock 是 Yarn 的锁定文件，用于确保项目在不同环境下安装的依赖版本一致。

jackblog-react Jackblog react 版, 个人博客系统, 使用服务端渲染(Universal / Isomorphic), react, redux, react-router, react-bootstrap, immutablejs, redux-form等 项目地址: https://gitcode.com/gh_mirrors/ja/jackblog-react