前言
在近期对前端学习中对前端的基础知识熟悉了之后，在html、css、js前端三剑客的海洋中深入转了不少圈之后，已经感觉到在js与html标签这个模块中许多的操作让我觉得繁杂，而且对数据操作起来并不方便，要想get data或者change data操作标签中的innerText，由于原始的前端三剑客中没有响应式的变量，都要进行很多获取DOM 结构的操作，这只是其一，以及还有很多方面都操作起来很不方便，但是在React 框架中，不需要获取DOM再修改标签的value值，所以现在已经迫不及待地想要用框架写项目了。
React介绍
-- React是什么？
React 是一个用于构建用户界面的、 声明式、组件化的 JavaScript 库。（官方）
但是这样解释我觉得应该更好小白们理解：
是让我们在大多数情况下不再需要直接操作 DOM API。取而代之的是，我们只需要编写相对简单的代码，而 React 将其翻译为 DOM 理解的语言。
-- React的几大关键特性
- 虚拟 DOM：React 使用虚拟 DOM 来提高渲染效率而不是真的 DOM。当组件属性改变时，只需要将该虚拟的DOM属性值进行修改，从而大大提高了性能。
- 声明式编程：React 鼓励使用声明式的编程方式，即描述你想要的 UI 状态，而 React 会自动处理如何从当前状态过渡到目标状态。
- 单向数据流：React 推崇单向数据流，数据流可以从父组件流向子组件，简化追踪数据变化的操作。
- JSX：React 使用 JSX，这是一种 JavaScript 的语法扩展，允许在 JavaScript 文件中直接写 HTML 样式的标签，提高可读性。
如何使用React
①首先打开我们的编辑器，这里我们使用vscode，并创建项目文件夹（react）。
②在该文件夹下打开TERMINAL命令行界面，输入npm init vite或npm init create-react-app(前提是在vscode上安装好了npm包管理器) ---> 进行项目初始化
(此过程会让你输入项目文件夹名称，还有一些选择，按需选择，注意有一个选择要选react )
安装完成后，可以在文件夹中看到添加了一些文件夹的结构
③在命令行中输入cd (你输入的项目文件夹名称) -->改变命令行所在文件夹位置
④在命令行输入npm i ---> 下载相应需要的工具包，在node_modules目录下
⑤在命令行中输入npm run dev ---> 让项目启动，run起来
⑥得到一个React给的一个域名，打开就能看到我们的首页面index.html
react资源的结构
用react创建的文件夹结构如下
1、node_modules文件夹
主要是用来存储项目依赖包的地方
2、public
主要是放一些静态的资源，所有文件能够共享的资源
3、src
这就是我们代码的主战场了，主要存放我们项目的源码
而src内部也有两个子文件夹
①assets-->存放静态资源
②components-->主要存放react框架中的核心概念"组件" 还有一些其他的App.css(根组件css样式文件)、App.jsx(根组件)、index.css(首页css样式文件)、main.jsx(入口文件)、index.html(首页html)以及一些配置文件和README.md
小结
这样介绍完之后我们就可以直接写代码了，写相关组件的代码就在components文件夹中，入口文件就在main.jsx中写。只不过要注意先了解jsx这种具有强大表现力的语法。