在当今前端开发的领域中，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打开该文件夹，并且打开集成终端输入相关的命令行。以下是具体的命令行操作：

1. 使用以下命令创建一个名为my-react的项目，该命令会在我们的创建的React文件夹内自动创建一个my-react文件夹：
2. lua
3. 代码解读
4. 复制代码
5. create-react-app my-react

2. 进入创建好的项目目录：
3. bash
4. 代码解读
5. 复制代码
6. cd my-react

3. 启动项目:
4. arduino
5. 代码解读
6. 复制代码
7. npm run start
8. 
   
9. 其中的 `Local:` 和 `On Your Network: ` 所对应的就是你的项目网址，用浏览器打开后可以看到你的项目
10. 
    

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）中。
• src目录：这是开发的主要区域，代码的主战场，包括：
• 
  
• App.css : 这是一个CSS样式表文件，用于定义App.js组件的外观和布局。
• App.js：这是项目的主要组件，通常是整个应用的根组件，负责页面的主要布局和内容展示。App.js会导入并使用其他组件来构建整个应用程序。
• App.test.js : 这是一个测试文件，用于编写针对App.js组件的功能性和单元测试。通过运行这些测试，可以确保组件的行为符合预期，并且在进行更改时不会引入新的错误。
• index.js：项目的入口文件，React项目的起点，用于渲染APP组件到页面。
• index.css：全局样式文件。

结语

通过对React框架的这些基础了解，我们已经迈出了使用React进行前端开发的重要一步，我后续将不断深入学习React的组件通信，状态管理等知识，并且分享给你们，让我们一起加油，这样才能构建出功能丰富、性能卓越的前端应用。

ps：React的学习文档（中文）：zh-hans.react.dev/learn

原文链接：https://juejin.cn/post/7385752495534522383