React + Redux + Firebase 项目教程

React + Redux + Firebase 项目教程

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

react-hot-redux-firebase-starter/
├── src/
│   ├── actions/
│   ├── components/
│   ├── config/
│   ├── reducers/
│   ├── store/
│   ├── styles/
│   ├── tests/
│   ├── utils/
│   ├── index.js
│   └── routes.js
├── tools/
│   ├── webpack/
│   └── ...
├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── .jshintrc
├── LICENSE
├── README.md
├── package.json
└── webpack.config.dev.js

目录结构介绍

• src/: 包含项目的源代码。
  • actions/: Redux 动作文件。
  • components/: React 组件。
  • config/: 项目配置文件。
  • reducers/: Redux 减速器文件。
  • store/: Redux 存储配置。
  • styles/: 样式文件。
  • tests/: 测试文件。
  • utils/: 工具函数。
  • index.js: 项目入口文件。
  • routes.js: 路由配置文件。
• tools/: 包含构建工具和配置文件。
  • webpack/: Webpack 配置文件。
• .babelrc: Babel 配置文件。
• .editorconfig: 编辑器配置文件。
• .eslintrc: ESLint 配置文件。
• .gitignore: Git 忽略文件配置。
• .jshintrc: JSHint 配置文件。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• package.json: 项目依赖和脚本配置。
• webpack.config.dev.js: Webpack 开发环境配置文件。

2. 项目的启动文件介绍

index.js

index.js 是项目的入口文件，负责初始化 React 应用并将其挂载到 DOM 中。以下是 index.js 的主要内容：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Router, browserHistory } from 'react-router';
import routes from './routes';
import configureStore from './store/configureStore';

const store = configureStore();

ReactDOM.render(
  <Provider store={store}>
    <Router history={browserHistory} routes={routes} />
  </Provider>,
  document.getElementById('root')
);

主要功能

• 导入必要的模块和组件。
• 配置 Redux 存储。
• 使用 Provider 组件将存储传递给 React 应用。
• 使用 Router 组件配置路由。
• 将应用挂载到 DOM 中的 root 元素。

3. 项目的配置文件介绍

webpack.config.dev.js

webpack.config.dev.js 是 Webpack 的开发环境配置文件，负责配置开发服务器、加载器和插件。以下是 webpack.config.dev.js 的主要内容：

const webpack = require('webpack');
const path = require('path');

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-hot-middleware/client?reload=true',
    path.join(__dirname, 'src/index.js')
  ],
  output: {
    path: path.join(__dirname, '/dist/'),
    filename: '[name].js',
    publicPath: '/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        loader: 'babel'
      },
      {
        test: /\.css?$/,
        loader: 'style!css'
      }
    ]
  }
};

主要功能

• 配置开发工具和入口点。
• 设置输出路径和文件名。
• 配置热模块