React前端框架简介

React是目前最流行的前端JavaScript库之一，用于构建用户界面。它鼓励开发者采用组件化的开发方式，将UI拆分成一个个独立的、可复用的组件。

安装React项目脚手架

React项目脚手架create-react-app是一个官方提供的工具，用于快速搭建React开发环境。以下是安装和使用步骤：

全局安装create-react-app

使用npm（Node.js的包管理器）全局安装create-react-app，以便在任何地方创建React应用。
lua 复制代码
```
	npm install -g create-react-app
```
安装完成后，你可以通过create-react-app --version来检查其版本。（注意命令是create-react-app而不是creat-react-app）
创建React项目

使用create-react-app命令后跟你的项目名称来创建一个新的React项目。在这里我取名为 my-react
lua 复制代码
```
	create-react-app my-react
```
这个命令会从GitHub拉取一个标准的React项目模板，并设置好所有必要的依赖和配置。

项目结构

创建的项目通常包含以下结构：

src目录：这是你的开发目录，包含所有的源代码。
- 入口文件 ：通常是src/index.js,这是React应用的入口点。
- 组件：在src目录下，你可以创建多个文件夹来组织你的组件components。React组件可以是类组件或函数组件，通常每个组件都对应一个.js或.jsx文件。
- 样式：React组件的样式可以通过CSS文件来实现，并通过import语句引入到组件中。你也可以使用CSS-in-JS解决方案如Styled-components等。

React核心概念

组件化开发

React应用由多个组件组成，每个组件都是UI的一个独立、可复用的部分。组件可以接收props（属性）作为输入，并返回React元素作为输出。
Props

props是一个对象，它允许你将数据从父组件传递到子组件。props是只读的，组件不能修改自身的props。
状态（State）

与props不同，状态是组件内部的数据，它允许组件根据用户的输入、服务器响应等因素动态地改变自己的输出。在React中，状态是通过this.state（在类组件中）或useState Hook（在函数组件中）来管理的。
MVVM（Model-View-ViewModel）模式

MVVM模式是一种强大的软件设计模式，它通过分离UI逻辑与业务逻辑、实现数据的双向绑定和重用视图逻辑等方式，提高了应用程序的可维护性、可测试性和可重用性。在现代前端开发和移动应用开发中，MVVM已经成为一种非常流行的架构模式。vue.js就遵循MVVM模式。

React虽然不直接遵循MVVM模式，但它通过组件化和状态管理（如Redux或Context API）实现了类似的效果。React鼓励开发者关注业务逻辑，而不是直接操作DOM，从而提高了开发效率和应用的性能。

通过以上步骤和概念，我们可以开始使用React和create-react-app来构建我们的前端应用了。

React应用的骨架

完成上面步骤，可以看到我们的文件夹中引入了很多文件，我将为你讲解他的目录结构和文件

目录结构

1. node_modules：

diff 复制代码

-   存放所有通过npm或yarn安装的第三方依赖包。这个目录通常不需要手动更改。

2. public：

markdown 复制代码

-   存放静态资源文件，如HTML文件、图片、字体等。
-   其中，`index.html`是React应用的主HTML文件，它负责加载和渲染React应用。
-   可能还包含`favicon.ico`（网站图标）、`manifest.json`（移动应用配置文件，对于Web应用可选）等文件。

3. src：

markdown 复制代码

-   存放所有源代码文件，是React项目最核心的目录。
-   **components**：存放React组件的目录。每个组件通常由一个独立的文件夹组成，包含组件的JavaScript代码、样式文件（如CSS或SCSS）和其他相关资源。
-   **pages**：存放页面级组件的目录。与components目录类似，但这里的组件通常代表整个页面或页面的一部分。
-   **utils**：存放工具函数或辅助类的目录。这些函数或类可以在项目的多个地方被复用。
-   **App.js/App.tsx**：React应用的主组件文件，通常包含整个应用的路由配置和布局结构。
-   **index.js/index.tsx**：React应用的入口文件，负责渲染App组件到页面上。
-   可能还包含其他目录，如`hooks`（存放自定义Hooks）、`styles`（存放全局样式文件）、`assets`（存放静态资源如图片、字体等）等，具体取决于项目的需求和组织方式。

文件

1. .gitignore：

用于指定哪些文件或目录不需要被Git跟踪，如node_modules、本地配置文件等。

2. package.json：

package.json文件一般位于每个Node.js项目的根目录下,，它定义了项目所需要的各种模块以及项目的配置信息，如名称、版本、许可证、依赖模块等元数据

主要内容

项目信息 ：包括项目名称（name）、版本号（version）、描述（description）、作者（author）、许可证（license）等。
依赖信息 ：分为dependencies（生产环境依赖）和devDependencies（开发环境依赖），分别列出了项目运行和开发所需的所有npm包及其版本号。
脚本：通过scripts字段，可以定义一系列可以在项目根目录下通过npm命令运行的脚本，如启动项目、测试等。
其他配置 ：如repository（代码仓库信息）、bugs（问题跟踪器信息）、homepage（项目主页URL）等。

3. package-lock.json

package-lock.json文件是在执行npm install命令时自动生成的文件，它记录了当前状态下实际安装的各个npm包的具体来源、版本号和依赖关系。