用 React 和 Redux 构建一个 Hacker News 克隆

2023-11-30 03:10:09

React 和 Redux 教程——构建一个 Hacker News 克隆

引言

准备踏上激动人心的旅程，我们将构建一个与众不同的 Hacker News 克隆！在本教程中，我们将深入探讨 React 和 Redux 的世界，逐步了解如何构建一个全面且具有产品级别的应用程序。

设置阶段

首先，让我们初始化我们的项目。使用 create-react-app 创建一个新项目，并安装 Redux 及其相关依赖项。完成后，我们的项目结构将为：

├── node_modules
├── public
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── serviceWorker.js
├── .gitignore
├── package-lock.json
├── package.json
└── README.md

引入 Redux

Redux 是一个用于管理应用程序状态的强大工具。让我们在项目中引入它：

// src/store.js
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));
export default store;

构建 UI

接下来，使用 React 构建我们的 UI。我们将创建一个 App.js 组件作为应用程序的入口点：

// src/App.js
import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>Hacker News Clone</h1>
    </div>
  );
}

export default App;

整合 Redux

为了将 Redux 与 React 连接起来，我们需要在 App.js 中使用 Provider 组件：

// src/App.js
import React from 'react';
import './App.css';
import { Provider } from 'react-redux';
import store from './store';

function App() {
  return (
    <Provider store={store}>
      <div className="App">
        <h1>Hacker News Clone</h1>
      </div>
    </Provider>
  );
}

export default App;