React 是一款由 Facebook 开发的 JavaScript 库，专门用来开发用户界面。今天我们将学习如何用 React 来开发一个仿豆瓣电影 APP。
代码结构
我们的 React 电影 APP 包含 4 个页面：主页，电影列表页，电影详情页和搜索页。我们可以将这些页面分别储存在名为 HomePage.jsx、MovieListPage.jsx、MovieDetailPage.jsx 和 SearchPage.jsx 的文件中。
在 src 文件夹下，我们还应该创建一个名为 App.jsx 的文件，它将会是我们整个应用程序的起点。
导入必要的库和文件
在 App.jsx 中，我们需要导入 React 和 ReactDOM，以及一些其他的必要库和文件。
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import HomePage from "./HomePage";
import MovieListPage from "./MovieListPage";
import MovieDetailPage from "./MovieDetailPage";
import SearchPage from "./SearchPage";我们将使用 React Router 来处理不同页面之间的导航。
创建我们的应用程序
接下来，我们将在 <router> 标签内创建整个应用程序。我们使用 <switch> 标签和 <route> 标签将各个页面和它们的 URL 路径进行配对。
-- -------------------- ---- -------
----------------
--------
--------
------ ----- -------- -------------------- --
------ -------------------- ------------------------- --
------ ----------------- --------------------------- --
------ -------------- ---------------------- --
---------
----------
-------------------------------
--在这个例子中，我们创建了四个路由，分别是:
- 主页：路由路径为
/，组件为 HomePage - 电影列表页：路由路径为
/movies/:type，组件为 MovieListPage，其中type是电影类型，例如/top、/in_theaters等。 - 电影详情页：路由路径为
/movie/:id，组件为 MovieDetailPage，其中id是电影 ID。 - 搜索页：路由路径为
/search，组件为 SearchPage。
实现页面
接下来我们可以在各个页面中编写页面，并调用导入的 React Router 组件进行导航。在每个页面之间使用导入的 Link 组件进行导航。
由于在这篇文章中，我们只关注以下 4 个页面：
HomePage
在 HomePage 中，我们可以将电影分为正在热映、即将上映和豆瓣高分三种类型。我们将分别在该页面上导入这些类型的电影。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- -------------------
------ - --------- - ---- --------
----- -------- ------- --------------- -
------------------ -
-------------
---------- - -
---------- ---
------------- ---
---------- ---
--
-
------------------- -
---------------------------------------- -- -
--------------- ---------- ----------------- ---
---
---------------------------------------- -- -
--------------- ------------- ----------------- ---
---
----------------------------------- -- -
--------------- ---------- ----------------- ---
---
-
-------- -
------ -
-----
---- -----------------------
-------------
----- ----------------------------------
------
---- -----------------------
--------------------------------- -- -
---- ----------------- ---------------
----- --------------------------
---- ------------------------ --
--------------------
-------
------
---
------
---- -----------------------
-------------
----- ----------------------------------
------
---- -----------------------
------------------------------------ -- -
---- ----------------- ---------------
----- --------------------------
---- ------------------------ --
--------------------
-------
------
---
------
---- -----------------------
-------------
----- -----------------------------
------
---- -----------------------
--------------------------------- -- -
---- ----------------- ---------------
----- --------------------------
---- ------------------------ --
--------------------
-------
------
---
------
------
--
-
-
------ ------- ---------MovieListPage
在 MovieListPage 中，我们将列出相应类型的电影列表。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- -------------------
------ - --------- - ---- --------
----- ------------- ------- --------------- -
------------------ -
-------------
---------- - -
------- ---
--
-
------------------- -
----- ---- - -----------------------------
------------------------------- -- -
--------------- ------- ----------------- ---
---
-
----------------------------- -
----- -------- - ----------------------------
----- ---- - -----------------------------
-- --------- --- ----- -
------------------------------- -- -
--------------- ------- ----------------- ---
---
-
-
-------- -
------ -
-----
------------------------------ -- -
---- ----------------- ---------------
----- --------------------------
---- ------------------------ --
--------------------
-------
------
---
------
--
-
-
------ ------- --------------MovieDetailPage
在 MovieDetailPage 中，我们将显示选定的电影的详细信息。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------
----- --------------- ------- --------------- -
------------------ -
-------------
---------- - -
------ -----
--
-
------------------- -
----- -- - ---------------------------
---------------------------- -- -
--------------- ------ -------- ---
---
-
-------- -
----- - ----- - - -----------
-- -------- -
------ ----------------------
-
------ -
-----
---- ------------------------ --
----------------------
----------------------
------
--
-
-
------ ------- ----------------SearchPage
在 SearchPage 中，用户可以搜索电影名称。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- -------------------
------ - ------------ - ---- --------
----- ---------- ------- --------------- -
------------------ -
-------------
---------- - -
-------- ---
------- ---
--
----------------- - -----------------------------
----------------- - -----------------------------
-
------------------- -
--------------- -------- ------------------ ---
-
------------------- -
----- ------- - -------------------
------------------------------------- -- -
--------------- ------- ----------------- ---
---
-----------------------
-
-------- -
------ -
-----
----- -----------------------------
------
-----------
--------------------
--------------------------
----------------------------
--
-------------------
-------
------------------------------ -- -
---- ----------------- ---------------
----- --------------------------
---- ------------------------ --
--------------------
-------
------
---
------
--
-
-
------ ------- -----------总结
通过该应用程序的开发，我们学习了如何在 React 中使用 React Router 进行导航，以及如何使用 API 来获取电影数据。我们还学会了如何在页面上显示电影列表，电影详情和搜索结果。
如果您想在学习 React 开发中进一步挑战自己，可以尝试添加其他功能，例如登录，评论等。祝您好运！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e0b5a7f6b2d6eab3becaa8