React Slingshot 项目教程

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

React Slingshot 是一个 React + Redux 的 starter kit，提供了快速开发应用的基础框架。以下是项目的目录结构及其介绍：

react-slingshot/
├── src/                  # 源代码目录
│   ├── actions/          # Redux actions
│   ├── components/       # React 组件
│   ├── containers/       # React 容器组件
│   ├── images/           # 图片资源
│   ├── reducers/         # Redux reducers
│   ├── store/            # Redux store 配置
│   ├── styles/           # 样式文件
│   ├── tests/            # 测试文件
│   ├── index.js          # 应用入口文件
│   └── routes.js         # 路由配置
├── public/               # 公共资源目录
│   ├── index.html        # HTML 模板
│   └── favicon.ico       # 网站图标
├── tools/                # 构建工具和配置
│   ├── build.js          # 生产环境构建脚本
│   ├── start.js          # 开发环境启动脚本
│   ├── test.js           # 测试脚本
│   └── webpack.config.js # Webpack 配置文件
├── .babelrc              # Babel 配置文件
├── .eslintrc             # ESLint 配置文件
├── .gitignore            # Git 忽略文件配置
├── package.json          # 项目依赖和脚本配置
└── README.md             # 项目说明文档

2. 项目的启动文件介绍

项目的启动文件主要包括 src/index.js 和 tools/start.js。

src/index.js

这是应用的入口文件，负责初始化 Redux store 并渲染根组件到 DOM 中。

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';
import App from './containers/App';
import './styles/styles.scss';

const store = configureStore();

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

tools/start.js

这是开发环境的启动脚本，负责启动开发服务器并监听文件变化，实现热重载等功能。

// 部分代码示例
const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
  if (err) {
    return console.log(err);
  }
  console.log('Listening at http://localhost:3000/');
});

3. 项目的配置文件介绍

项目的配置文件主要包括 webpack.config.js、.babelrc 和 .eslintrc。

webpack.config.js

这是 Webpack 的配置文件，定义了如何打包和构建项目。

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

module.exports = {
  devtool: 'eval',
  entry: [
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
        include: path.join(__dirname, 'src')
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  }
};

.babelrc

这是 B