在当今前端开发的领域中,React框架以其高效、灵活和强大的性能备受前端开发者的青睐。本文将带你走进React框架的初识之旅,详细介绍React的环境准备、创建项目的命令行操作以及项目文件框架的结构。
什么是React
React
是一个开源的JavaScript
库,由Facebook
官方推出的项目脚手架,主要用于构建用户界面,特别是对于中大型项目开发来说,它因高效、灵活且具有强大的组件化能力而被誉为"前端第一框架"。它由Facebook
于2013年首次开源,并迅速成为前端开发领域中最受欢迎的技术之一。React
的核心理念是声明式编程和组件化,这使得开发者可以更高效地构建和维护用户界面。
React的安装环境
在踏上React
的开发之路前,我们首先需要确保具备以下环境:
- 安装node.js: 因为
node.js
是运行React
应用的基础。可以去Node.js
官方网站中,根据自己的操作系统选择相应的安装包进行下载和安装。安装完成后,可以在命令行输入node -v
和npm -v
来检查是否安装成功和查看版本信息。
- 安装React的脚手架:
Create React App
是官方推出的脚手架。打开命令行终端,输入以下命令来安装Create React App
:
css
npm i -g create-react-app
从该命令行中可以看出为什么我们要先安装node.js
,因为npm
是随Node.js
一起安装的包管理器,我们需要通过npm i或npm install
来安装一个新的包create-react-app
,而-g
则是告诉npm
全局安装这个包,以至于该包可以在系统的任何位置访问,而不是仅限于某个文件夹。可以通过npm config ls
来查看 全局安装包的位置,在其中我们可以看到prefix所对应的就是在电脑中的位置,在里面可以看到刚刚安装的包
创建React项目 使用`Create React App `这个便捷的脚手架工具,我们可以快速创建一个`React`项目。首先,我们可以先创建一个属于`React`的文件夹来存放我们用`React`项目,以便于管理。用`VSCODE`打开该文件夹,并且打开集成终端输入相关的命令行。以下是具体的命令行操作:
-
使用以下命令创建一个名为my-react的项目,该命令会在我们的创建的
React
文件夹内自动创建一个my-react文件夹:luacreate-react-app my-react
-
进入创建好的项目目录:
bashcd my-react
-
启动项目:
arduinonpm run start
其中的 `Local:` 和 `On Your Network: ` 所对应的就是你的项目网址,用浏览器打开后可以看到你的项目
React项目文件框架结构
成功创建项目后,让我们来了解一下其文件框架结构以及各部分的作用:
-
node_modules 目录:是用来存放项目所有依赖包(或称为模块)的地方。当使用npm命令安装一个包时,该包及其所有依赖都会被放置在
node_modules
目录下。该目录包含成百上千个依赖包,每个包又可能包含多个文件,因此这个目录通常很大。 -
.gitignore : 是一个在Git版本控制系统中使用的文本文件,用于列出应当被Git忽略而不被版本控制跟踪的文件或文件夹模式。由于
node_modules
目录很大,在版本控制(如Git)中会被忽略,以避免仓库体积过大。 -
package.json和package-lock.json:项目元数据和脚本配置文件,记录了项目依赖、脚本命令等信息。
-
public目录:该目录通常用于放置静态资源
- index.html :这是项目的入口HTML文件,也就是项目的HTML首页,里面包含页面的基本结构和加载React项目的脚本,React项目最终会被插入到这个页面的特定元素(
<div id="root"></div>
--根节点root
)中。
- index.html :这是项目的入口HTML文件,也就是项目的HTML首页,里面包含页面的基本结构和加载React项目的脚本,React项目最终会被插入到这个页面的特定元素(
-
src目录:这是开发的主要区域,代码的主战场,包括:
- App.css : 这是一个CSS样式表文件,用于定义
App.js
组件的外观和布局。 - App.js :这是项目的主要组件,通常是整个应用的根组件,负责页面的主要布局和内容展示。
App.js
会导入并使用其他组件来构建整个应用程序。 - App.test.js : 这是一个测试文件,用于编写针对
App.js
组件的功能性和单元测试。通过运行这些测试,可以确保组件的行为符合预期,并且在进行更改时不会引入新的错误。 - index.js:项目的入口文件,React项目的起点,用于渲染APP组件到页面。
- index.css:全局样式文件。
- App.css : 这是一个CSS样式表文件,用于定义
结语
通过对React框架的这些基础了解,我们已经迈出了使用React进行前端开发的重要一步,我后续将不断深入学习React的组件通信,状态管理等知识,并且分享给你们,让我们一起加油,这样才能构建出功能丰富、性能卓越的前端应用。
ps:React的学习文档(中文):zh-hans.react.dev/learn