前言
React它是由Meta公司(就是大名鼎鼎的FaceBook)研发的,是一个用于构建Web和原生交互界面的库。
虽然他通常被称为库,但更准确的说,他是用于构建用户界面的JavaScript 框架,虽然它们提供了库的功能(即一组可以被应用程序使用的工具或模块),但它们也提供了一套完整的开发框架,包括数据绑定、组件化、路由管理、状态管理等功能,这些都超出了传统意义上“库”的范畴。
为什么要学习React?
这里我们可以基于对比的手法去认识拥抱React开发带来的优势。
-
组件化的开发可以让我们开发效率变得更高,更容易构建大型的项目。通过组件化,引入模块化思维,让开发者可以将复杂的界面分解成更小、更易管理的部分,使得项目结构更加清晰,开发过程更加高效。
-
不错的性能得益于我们的虚拟DOM,如果学过VUE的兄弟肯定知道它,它可以使用虚拟 DOM 来最小化与真实 DOM 的直接交互。它通过比较虚拟 DOM 和实际 DOM 的差异(Diffing 算法),只更新必要的部分,从而提高应用的性能。(直接操作实际DOM是会频繁的导致重绘和回流的,这样会导致性能瓶颈。)
一起来拥抱React
使用 create-react-app 快速搭建开发环境
create-react-app 是一个快速创建 React 开发环境的工具,底层由 Webpack 构建,封装了配置细节,开箱即用。
在你的项目根目录中输入 npx create-react-app react-basic
npx
Node.js工具命令,查找并执行后续的包命令,用npm也可以。create-react-app
核心包(固定写法),用于创建React项目react-basic
React项目的名称(可以自定义)
输入之后,等待一下即可。然后你就会发现你的项目根目录中多了一个文件夹 react-basic
.
然后是在 react-basic
的目录下,输入 npm start 或 npm run start .
你会看到这个画面
然后他会自动跳转到浏览器中,成功启动了我们的项目!
package.json
首先我们来介绍一下package.json
,package.json
就像是你项目的“说明书”和“购物清单”。它告诉计算机你的项目叫什么名字、是做什么的、需要哪些工具(依赖项)才能运行,以及如何执行一些常用的命令(比如启动项目或运行测试)。简单来说,它是 npm(Node.js 的包管理工具)用来管理和配置你项目的所有重要信息的地方。
我们可以打开看看,里面都有些什么。现在我标蓝的地方就是我们的依赖项
"react": "^19.0.0",
"react-dom": "^19.0.0",
其中他俩是我们React依赖的两个最最重要的包。
上面我标蓝的地方就是Script就是我们的常用的命令,我们刚刚用的就是 npm start
启动了整个的项目.下面的 build
是我们开发完打包的一个命令。
其他的东西咱们可以先不用关注了,我们只需关注上面的两个核心依赖和命令即可。
了解一下我们新手要用到的主要文件
Src是我们的源码目录,我们每天的核心工作都会在这里进行,但这里的很多文件我们目前是用不到的,我们就保留两个文件,一个是 index.js 另一个是 app.js
然后把这两个文件的代码删减一下,成为下面这样,这样方便我们开始零基础学习!
其中index.js是我们项目的入口,项目从这里开始运行,它在这里导入了我们上面提到了React必要的两个核心包。再往下面看你会发现,它和我们的App.js发生关联了,然后是剩下的几行代码,他们总共做的是将App根组件渲染到id为root的节点上面。
然后看向App.js,他是我们项目的根组件,它常常作为应用的顶级组件,负责组织和呈现其他子组件。
他们的路径就是 App.js 引入到 index.js 中 ,然后挂载到 root节点上 ,我们可以在public文件夹中找到 index.html
在这里面你可以看到root到底是在哪里的,在这里我们可以把上面的路向抽象成App -> index -> public/index.html(root)
介绍一下JSX
概念:JSX 是 JavaScript 和 XML(HTML)的缩写,表示在 JS 代码中编写 HTML 模版结构,它是 React 中编写 UI 模版的方式。
上面框住的地方这就是我们的JSX,你会发现它是在一个函数的内部,而且和我们的Html非常之像!它有着JS和Html两方面的优势,采用了HTML的声明式模板写法,还加入了JS的可编程能力!呢他到底是何方神圣,浏览器能识别这样的语言吗?
JSX的本质 JSX 并不是标准的 JS 语法,它是 JS 的语法扩展,浏览器本身不能识别,需要通过解析工具做解析之后才能在浏览器中运行。就类似如下
上图的意思就是 Babel 将 JSX 代码转换为标准的 JavaScript,使其能在浏览器中运行。至于Babel就是一个编译器,用来做中间的转换。这里我可以给大家Babel的网站,大家可以去玩一下Babel · Babel,在这里你可以体验到他们之间的关系
输入我们上面的代码
你会发现他们之间的转换,右边是输入的JSX,左边就是浏览器运行要用的代码!
总结
通过以上内容,你已经了解了 React 的基本概念、如何快速搭建开发环境、项目的文件结构以及 JSX 的作用。接下来,你可以开始探索更多 React 的高级特性,如状态管理、路由、 Hooks 等,逐步提升你的开发技能。React 的灵活性和强大的生态系统将为你带来更多的开发乐趣和效率提升!勇敢的走出第一步,满满的你就会发现“攀登”的乐趣!