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

本文基于《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中描述的格式。

下载:Pro React 16

Learning React: A Hands-on Guide to Building Maintainable, High-Performing Web Application User Interfaces Using the React JavaScript by Kirupa Chinnathambi English | 15 Nov. 2016 | ISBN: 0134546318 | 240 Pages | AZW3/MOBI/EPUB/PDF (conv) | 47.52 MB A hands-on guide to building maintainable, high-performing web application user interfaces using the React JavaScript library As far as new web frameworks and libraries go, React is quite the runaway success. It not only deals with the most common problems developers face when building complex apps, it throws in a few additional tricks that make building the visuals for such apps much, much easier. What React isn’t, though, is beginner-friendly and approachable. Until now. In Learning React, author Kirupa Chinnathambi brings his fresh, clear, and very personable writing style to help you understand the fundamentals of React and how to use it to build really performant (and awesome) apps. Build your first React app Create components to define parts of your UI Combine components into other components to build more complex UIs Use JSX to specify visuals without writing full-fledged JavaScript Deal with maintaining state Work with React’s way of styling content Make sense of the mysterious component lifecycle Build multi-page apps using routing and views Optimize your React workflow using tools such as Node, Babel, webpack, and others Contents at a Glance Chapter 1 Introducing React Chapter 2 Building Your First React App Chapter 3 Components in React Chapter 4 Styling in React Chapter 5 Creating Complex Components Chapter 6 Transferring Properties (Props) Chapter 7 Meet JSX–Again! Chapter 8 Dealing with State Chapter 9 Going from Data to UI Chapter 10 Working with Events Chapter 11 The Component Lifecycle Chapter 12 Accessing DOM Elements Chapter 13 Creating a Single-Page App Using React Router Chapter 14 Building a Todo List App Chapter 15 Setting Up Your React Development Environment Chapter 16 The End
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值