React 是一个非常流行的 JavaScript 库，它使构建用户界面变得更加简单。在本文中，我们将使用 React 来构建一个响应式的网站应用。
前置知识
在开始之前，您需要掌握以下技术：
- HTML
- CSS
- JavaScript
- React
如果您对这些技术不熟悉，请先学习它们。
目标
我们将构建一个简单的网站应用，它将包括以下页面：
- 首页
- 关于我们
- 产品列表
- 产品详情
我们将使用 React Router 来实现路由，并使用 Bootstrap 框架来构建响应式布局。
步骤
步骤 1：创建新项目
首先，我们需要创建一个新的 React 项目。您可以使用 Create React App 工具来快速创建一个新项目。
npx create-react-app my-app cd my-app
步骤 2：安装依赖
我们需要安装一些依赖项来支持我们的应用程序。首先，我们将安装 React Router。
npm install react-router-dom
接下来，我们将安装 Bootstrap。
npm install bootstrap
步骤 3：创建页面
我们将创建四个页面：Home、About、Products 和 ProductDetail。我们将在 src/pages 目录下创建这些页面。
-- -------------------- ---- -------
-- -----------------
------ ----- ---- --------
----- ---- - -- -- -
------ -
-----
-----------
------
--
--
------ ------- ------- -------------------- ---- -------
-- ------------------
------ ----- ---- --------
----- ----- - -- -- -
------ -
-----
-------------
------
--
--
------ ------- -------- -------------------- ---- -------
-- ---------------------
------ ----- ---- --------
----- -------- - -- -- -
------ -
-----
-------------
------
--
--
------ ------- ----------- -------------------- ---- -------
-- --------------------------
------ ----- ---- --------
----- ------------- - -- -- -
------ -
-----
-------------
------
--
--
------ ------- --------------步骤 4：创建路由
我们将使用 React Router 来实现路由。我们将在 src/App.js 文件中创建路由。
-- -------------------- ---- -------
-- ----------
------ ----- ---- --------
------ - ------------- -- ------- ------- ----- - ---- -------------------
------ ---------------------------------------
------ ---- ---- ---------------
------ ----- ---- ----------------
------ -------- ---- -------------------
------ ------------- ---- ------------------------
----- --- - -- -- -
------ -
--------
-----
---- ----------------- ---------------- ------------ ----------
-- ------------------------ -------------- -------
------- -------------------------- ------------- ---------------------- ------------------------ ------------------------- --------------------- ------------------ ------------
----- ---------------------------------------
---------
---- ------------------- ---------------- ---------------
--- -----------------------
--- ---------------------
-- -------------------- ---------------
-----
--- ---------------------
-- -------------------- ----------------------
-----
--- ---------------------
-- -------------------- -------------------------
-----
-----
------
------
---- -------------------- ------
--------
------ ----- -------- ---------------- --
------ ----- ------------- ----------------- --
------ ----- ---------------- -------------------- --
------ ----- -------------------- ------------------------- --
---------
------
------
---------
--
--
------ ------- ----步骤 5：创建导航
我们需要在应用程序中创建导航。我们将在 src/App.js 文件中创建导航。
-- -------------------- ---- -------
-- ----------
------ ----- ---- --------
------ - ------------- -- ------- ------- ------ ---- - ---- -------------------
------ ---------------------------------------
------ ---- ---- ---------------
------ ----- ---- ----------------
------ -------- ---- -------------------
------ ------------- ---- ------------------------
----- --- - -- -- -
------ -
--------
-----
---- ----------------- ---------------- ------------ ----------
-- ------------------------ -------------- -------
------- -------------------------- ------------- ---------------------- ------------------------ ------------------------- --------------------- ------------------ ------------
----- ---------------------------------------
---------
---- ------------------- ---------------- ---------------
--- -----------------------
--- ---------------------
----- -------------------- ----------------
-----
--- ---------------------
----- -------------------- -----------------------
-----
--- ---------------------
----- -------------------- --------------------------
-----
-----
------
------
---- -------------------- ------
--------
------ ----- -------- ---------------- --
------ ----- ------------- ----------------- --
------ ----- ---------------- -------------------- --
------ ----- -------------------- ------------------------- --
---------
------
------
---------
--
--
------ ------- ----步骤 6：创建产品列表
我们将在 src/pages/Products.js 文件中创建产品列表。
-- -------------------- ---- -------
-- ---------------------
------ ----- ---- --------
------ - ---- - ---- -------------------
----- -------- - -
- --- -- ----- --- --- ------------ ----- - ---- --
- --- -- ----- --- --- ------------ ----- - ---- --
- --- -- ----- --- --- ------------ ----- - ---- --
--
----- -------- - -- -- -
------ -
-----
-------------
----
----------------------- -- -
--- -----------------
----- ----------------------------------------------------
-----
---
-----
------
--
--
------ ------- ---------步骤 7：创建产品详情
我们将在 src/pages/ProductDetail.js 文件中创建产品详情。
-- -------------------- ---- -------
-- --------------------------
------ ----- ---- --------
------ - --------- - ---- -------------------
----- -------- - -
- --- -- ----- --- --- ------------ ----- - ---- --
- --- -- ----- --- --- ------------ ----- - ---- --
- --- -- ----- --- --- ------------ ----- - ---- --
--
----- ------------- - -- -- -
----- - -- - - ------------
----- ------- - ----------------- -- ---- --- --------------
------ -
-----
-----------------------
----------------------------
------
--
--
------ ------- --------------步骤 8：运行应用
现在，我们已经完成了应用程序的构建。我们可以运行应用程序并查看它是否正常工作。
npm start
打开浏览器并访问 http://localhost:3000，您应该可以看到我们的网站应用程序。
结论
在本文中，我们使用 React 和 React Router 构建了一个响应式的网站应用程序。我们还使用了 Bootstrap 框架来构建我们的布局。这个应用程序可以作为一个起点，让您构建更复杂的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6760e6a503c3aa6a56066a06