跨越重重关卡，打造个人专属的新闻头条

React 实战篇：打造个人专属的新闻头条

前言

React 是一个强大的前端框架，非常适合构建移动端应用程序。在本教程中，我们将使用 React 框架，一步步构建一个与今日头条类似的移动端项目。

项目规划

在开始构建项目之前，我们需要先规划一下项目的结构和功能。

• 项目结构 ：项目将分为几个主要模块，包括主页、新闻列表、新闻详情、用户中心等。
• 功能 ：项目将具备以下功能：
  • 新闻列表：用户可以浏览新闻列表，并点击新闻标题进入新闻详情页。
  • 新闻详情：用户可以查看新闻详情，并可以对新闻进行评论和点赞。
  • 用户中心：用户可以查看自己的个人信息，并可以修改密码等信息。

技术选型

我们将使用以下技术来构建项目：

• 前端框架 ：React
• 状态管理库 ：Redux
• 路由库 ：React Router
• CSS 预处理器 ：Sass

项目构建

1. 项目初始化

首先，我们需要初始化项目。

npx create-react-app my-news-app

2. 安装依赖

接下来，我们需要安装项目所需的依赖。

npm install redux react-redux react-router-dom sass

3. 项目结构

项目的结构如下：

my-news-app
├── node_modules
├── package.json
├── src
│   ├── components
│   │   ├── Header.js
│   │   ├── NewsList.js
│   │   ├── NewsDetail.js
│   │   ├── UserCenter.js
│   │   └── ...
│   ├── pages
│   │   ├── Home.js
│   │   ├── News.js
│   │   ├── User.js
│   │   └── ...
│   ├── store
│   │   ├── actions.js
│   │   ├── reducers.js
│   │   └── store.js
│   ├── styles
│   │   ├── main.scss
│   │   └── ...
│   ├── App.js
│   ├── index.js
└── package-lock.json

4. 编写代码

接下来，我们需要编写代码。

4.1 App.js

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Header from './components/Header';
import Main from './components/Main';
import Footer from './components/Footer';

function App() {
  return (
    <Provider store={store}>
      <div className="App">
        <Header />
        <Main />
        <Footer />
      </div>
    </Provider>
  );
}

export default App;

4.2 Header.js

import React from 'react';

function Header() {
  return (
    <header className="header">
      <h1>今日头条</h1>
    </header>
  );
}

export default Header;

4.3 Main.js

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './pages/Home';
import News from './pages/News';
import User from './pages/User';

function Main() {
  return (
    <main className="main">
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/news" component={News} />
        <Route path="/user" component={User} />
      </Switch>
    </main>
  );
}

export default Main;

4.4 Home.js

import React from 'react';
import NewsList from '../components/NewsList';

function Home() {
  return (
    <div className="home">
      <NewsList />
    </div>
  );
}

export default Home;

4.5 NewsList.js

import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { getNewsList } from '../store/actions';

function NewsList(props) {
  const [newsList, setNewsList] = useState([]);

  useEffect(() => {
    props.getNewsList();
  }, []);

  useEffect(() => {
    setNewsList(props.newsList);
  }, [props.newsList]);

  return (
    <div className="news-list">
      {newsList.map((news) => (
        <a href={`/news/${news.id}`} key={news.id}>
          {news.title}
        </a>
      ))}
    </div>
  );
}

const mapStateToProps = (state) => ({
  newsList: state.news.newsList,
});

const mapDispatchToProps = (dispatch) => ({
  getNewsList: () => dispatch(getNewsList()),
});

export default connect(mapStateToProps, mapDispatchToProps)(NewsList);

4.6 News.js

import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { getNewsDetail } from '../store/actions';

function News(props) {
  const [newsDetail, setNewsDetail] = useState({});

  useEffect(() => {
    props.getNewsDetail(props.match.params.id);
  }, []);

  useEffect(() => {
    setNewsDetail(props.newsDetail);
  }, [props.newsDetail]);

  return (
    <div className="news">
      <h1>{newsDetail.title}</h1>
      <div className="news-content">
        {newsDetail.content}
      </div>
    </div>
  );
}

const mapStateToProps = (state) => ({
  newsDetail: state.news.newsDetail,
});

const mapDispatchToProps = (dispatch) => ({
  getNewsDetail: (id) => dispatch(getNewsDetail(id)),
});

export default connect(mapStateToProps, mapDispatchToProps)(News);

4.7 User.js

import React from 'react';

function User() {
  return (
    <div className="user">
      <h1>用户中心</h1>
    </div>
  );
}

export default User;

5. 运行项目

最后，我们可以运行项目。

npm start

然后，访问 http://localhost:3000 即可看到项目运行的效果。

结语

在本教程中，我们一步步构建了一个与今日头条类似的移动端项目。我们使用 React 框架，采用高阶组件和 React 路由，处理 Promise 的结果。此外，我们还使用了 React 组件、Redux 和 React Hooks 等技术，优化用户体验，打造独一无二的新闻头条体验。