新手搭建简洁的Express-React-Redux脚手架

## 新手搭建简洁的Express-React-Redux脚手架

对于新手来说，搭建一个完整的Express-React-Redux脚手架可能是一项具有挑战性的任务。网上有很多教程，但很多都是针对有经验的开发人员，对新手来说可能难以理解。本文将提供一个适合新手学习的脚手架搭建教程，帮助你快速入门。

### 准备工作

在开始搭建脚手架之前，需要准备以下工具：

- Node.js（版本16或以上）
- npm（版本6或以上）
- Visual Studio Code（或其他代码编辑器）

### 创建项目

1. 打开命令行窗口，进入你希望创建项目的工作目录。
2. 执行以下命令创建新的项目：

```
npx create-react-app express-react-redux
```

### 安装依赖

项目创建完成后，需要安装Express、React和Redux等依赖包。在命令行窗口中执行以下命令：

```
cd express-react-redux
npm install express react react-dom redux react-redux
```

### 搭建脚手架

1. 创建服务器文件：
    在项目的`src`目录下，创建一个名为`server.js`的文件。该文件将作为Express服务器的入口文件。
2. 在`server.js`文件中添加以下代码：

```
const express = require('express');
const app = express();

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});
```

3. 创建客户端代码：
    在项目的`src`目录下，创建一个名为`App.js`的文件。该文件将作为React应用程序的入口文件。
4. 在`App.js`文件中添加以下代码：

```
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';

const store = createStore(() => {});

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <div>
          Hello World!
        </div>
      </Provider>
    );
  }
}

export default App;
```

5. 创建Redux store：
    在项目的`src`目录下，创建一个名为`store.js`的文件。该文件将用于创建Redux store。
6. 在`store.js`文件中添加以下代码：

```
import { createStore } from 'redux';

const store = createStore(() => {});

export default store;
```

7. 修改`index.js`文件：
    在项目的根目录下，打开`index.js`文件。该文件将用于启动Express服务器和React应用程序。
8. 在`index.js`文件中添加以下代码：

```
const express = require('express');
const app = express();
const React = require('react');
const ReactDOM = require('react-dom');

const App = require('./src/App').default;
const store = require('./src/store').default;

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.get('/', (req, res) => {
  res.send(ReactDOM.renderToString(<App />));
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});
```

### 运行项目

在命令行窗口中执行以下命令运行项目：

```
npm start
```

项目启动后，你可以在浏览器中访问`http://localhost:3000`查看效果。

## 结语

以上就是新手搭建简洁的Express-React-Redux脚手架的教程。希望对你有帮助。