Pretty-Zhihu 项目使用教程

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

Pretty-Zhihu/
├── src/
│   ├── components/      # React 组件
│   ├── containers/      # 容器组件
│   ├── actions/         # Redux 动作
│   ├── reducers/        # Redux 减速器
│   ├── store/           # Redux 存储
│   ├── styles/          # 样式文件
│   ├── utils/           # 工具函数
│   ├── index.js         # 入口文件
├── public/
│   ├── manifest.json    # 扩展清单文件
│   ├── icons/           # 扩展图标
├── config/
│   ├── webpack.config.js# Webpack 配置文件
├── package.json         # 项目依赖和脚本
├── README.md            # 项目说明文档

目录结构介绍

• src/：包含项目的所有源代码。
  • components/：存放 React 组件。
  • containers/：存放容器组件。
  • actions/：存放 Redux 动作。
  • reducers/：存放 Redux 减速器。
  • store/：存放 Redux 存储。
  • styles/：存放样式文件。
  • utils/：存放工具函数。
  • index.js：项目的入口文件。
• public/：包含公共资源。
  • manifest.json：扩展的清单文件。
  • icons/：扩展的图标。
• config/：包含配置文件。
  • webpack.config.js：Webpack 配置文件。
• package.json：项目依赖和脚本。
• README.md：项目说明文档。

2. 项目的启动文件介绍

入口文件 index.js

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

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

文件介绍

• index.js 是项目的入口文件，负责渲染根组件并提供 Redux 存储。
• 使用 ReactDOM.render 方法将根组件 App 渲染到 DOM 中的 root 元素。
• Provider 组件将 Redux 存储 store 传递给所有子组件。

3. 项目的配置文件介绍

Webpack 配置文件 webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html',
    }),
  ],
};

文件介绍

• webpack.config.js 是 Webpack 的配置文件，负责项目的打包和构建。
• entry 指定入口文件为 ./src/index.js。
• output 指定输出目录为 dist，输出文件名为 bundle.js。
• module 配置加载器规则，处理 JavaScript 和 SCSS 文件。
• plugins 配置插件，使用 HtmlWebpackPlugin 生成 HTML 文件。

以上是 Pretty-Zhihu 项目的目录结构、启动文件和配置文件的介绍。希望这份教程能帮助你更好地理解和使用该项目。