Pro React 16 学习笔记附下载：了解 React 项目

最新推荐文章于 2022-09-27 09:47:25 发布

iebukes

最新推荐文章于 2022-09-27 09:47:25 发布

阅读量680

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript React 文章标签： react javascript web开发

本文链接：https://blog.youkuaiyun.com/qq_37606925/article/details/109745604

JavaScript 同时被 2 个专栏收录

4 篇文章

订阅专栏

React

2 篇文章

订阅专栏

本文基于《Pro React 16》分享了创建React项目的过程，详细介绍了项目结构，包括src文件夹的重要性和node_modules文件夹的依赖管理。讨论了如何使用npx create-react-app初始化项目，npm安装依赖，以及如何引入和使用Bootstrap。同时，解释了dependencies和devDependencies在package.json中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我将我学习《Pro React 16》第九章“了解 React 项目”的心得体会整理成这篇文章，希望对正在啃《Pro React 16》的读者有所帮助。

创建项目

我们首先需要使用npx create-react-app命令创建我们的React项目，然后使用npm start启动项目。

在命令行提示符中，使用CD命令进入项目文件夹创建项目：

npx create-react-app projecttools

然后使用npm安装其他项目依赖包也就是package，因为我们这个项目中要使用BootStrap，所以我们用以下命令安装bootstrap包：

CD projecttools

npm install bootstrap

这里要要注意，创建项目使用npx命令，npm命令用于安装项目依赖包。

在bootstrap安装完成后，我们可以在src文件夹中的 index.js 文件中添加如下代码将bootstrap引入到我们的项目中：

import 'bootstrap/dist/css/bootstrap.css';

我们的bootstrap路径使用bootstap开始，使用反斜杠并用引号包裹，使用分号结尾，引入其他软件包的路径也是同样如此。

index.js中完整代码：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

项目创建完成后，在提示符中使用下面的代码启动项目：

npm start

项目的初始化准备完成后，在浏览器中打开网址 http://localhost：3000，将显示入下图所示的占位符内容：

www.iebukes.com

了解React项目结构

在开始新项目时，我们首先要了解我的React项目文件、占位符内容以及我们所需要的开发工具，下图显示了我们项目的内容文件：

www.iebukes.com

接下来中我们将进一步详细地讲解这些文件有什么用。

名称	解释
node_modules	该文件夹包含应用程序和开发工具所需的依赖包，详见《Pro React 16》 “了解 Packages 文件夹” 部分。
public	此文件夹用于存放静态内容，包括用于响应HTTP请求的index.html文件，详见《Pro React 16》 “了解静态内容”部分。
src	此文件夹包含应用程序代码和内容，详见《Pro React 16》“了解源码文件夹” 部分
.gitignore	此文件用于从Git修订控制包中排除文件和文件夹。
package.json	此文件用于设置项目的顶级依赖包依赖项集，详见《Pro React 16》“了解 Packages 文件夹”部分
package-lock.json	此文件包含项目的包依赖项的完整列表，详见《Pro React 16》“了解 Packages 文件夹”部分。
README.md	此文件包含有关项目工具的信息，可以在https://github.com/facebook/createreact-app中找到相同的内容。

了解源代码文件夹

src文件夹是文件中最重要的，因为我们的应用程序代码和内容就存放在这个文件夹中，同时也是存放我们自定义项目文件的位置。create-react-app 依赖包将文件添加到快速启动开发中.。下面我们来详细了解一下src文件夹中的文件：

名称	描述
index.js	此文件负责配置和启动应用程序。
index.css	此文件包含应用程序的全局CSS样式。有关使用CSS文件的详细信息，请参阅“理解静态内容”部分。
App.js	此文件是React顶层组件，《Pro React 16》第10章和第11章描述了组件。
App.css	此文件是新项目的占位符CSS样式。有关详细信息，详见《Pro React 16》“了解静态内容”部分。
App.test.js	此文件包含顶级组件的单元测试。有关单元测试的详细信息，详见《Pro React 16》第17章。
registerServiceWorker.js	此文件由渐进式web应用程序使用，它可以脱机工作。因为我们这里不涉及渐进式应用程序，你可以在https://facebook.github.io/ create-react-app/docs/making-a-progressive-web-app中进一步了解。
logo.svg	此图像文件包含 React logo，在创建项目时将被添加到项目中的占位符组件中显示。请参阅“了解静态内容部分”。

了解依赖包文件夹

JavaScript应用程序开发依赖于一个丰富的依赖包生态系统，从将代码发送到浏览器的依赖包，到在开发过程中用于特定任务的小型依赖包。React项目需要很多依赖包：例如，本章开头创建的示例项目需要900多个依赖包。在这些依赖包之间又存在复杂的依赖关系层次结构，很难手动管理，因此使用依赖包管理器来管理。可以使用两个不同的依赖包管理器来创建React项目：NPM，它是Node依赖包管理器，在第一章中这个依赖包管理器是Node自带。还一个是Yarn，这是NPM最新的竞争对手，Yarn旨在改善依赖包管理。为了简单起见，我在本书中使用了NPM。

当创建项目时，依赖包管理器会获取React开发所需的初始依赖包列表，每个依赖包都会被检查以获得项目所依赖的依赖包集。再次执行该过程以获取这些依赖包的依赖关系，并重复该过程，直到建立了一个完整的依赖包列表。依赖包管理器下载并安装所有依赖包，并将它们安装到node_modules文件夹中。在package.json文件中使用dependencies和devDependencies属性定义初始依赖包集。dependencies 部分用于列出应用程序运行所需的依赖包。devDependencies部分用于列出开发所需但不作为应用程序一部分部署的依赖包。您可能会在您的项目中看到不同的详细信息，但这是依赖包中的 dependencies 部分。我的示例项目中的json文件：

"dependencies": {
 "bootstrap": "^4.1.2",
 "react": "^16.7.0",
 "react-dom": "^16.7.0",
 "react-scripts": "2.1.2"
},

React项目的依赖项部分只需要三个依赖包：React依赖包包是React框架的主要功能，React-dom依赖包包含web应用程序所需的功能，react-scripts依赖包包含我在本章中描述的开发工具命令。第四个包是Bootstrap CSS框架，添加到清单9-2中的项目中。对于每个依赖，package.json 件都有可使用版本的详细信息，使用表9-5中描述的格式。