我将我学习《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,将显示入下图所示的占位符内容:
了解React项目结构
在开始新项目时,我们首先要了解我的React项目文件、占位符内容以及我们所需要的开发工具,下图显示了我们项目的内容文件:
接下来中我们将进一步详细地讲解这些文件有什么用。
名称 | 解释 |
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中描述的格式。