React 入门到精通

最新推荐文章于 2025-04-27 14:31:16 发布

吾爱编程哇

最新推荐文章于 2025-04-27 14:31:16 发布

阅读量858

点赞数

文章标签： react.js 前端

本文链接：https://blog.youkuaiyun.com/mq962003298/article/details/129699559

版权

React 入门到精通

01 【react入门】

1.React简介

react是什么？

React 是一个用于构建用户界面的 JavaScript 库。

是一个将数据渲染为 HTML 视图的开源 JS 库
它遵循基于组件的方法，有助于构建可重用的 UI 组件
它用于开发复杂的交互式的 web 和移动 UI

React 有什么特点？

使用虚拟 DOM 而不是真正的 DOM
它可以用服务器渲染
它遵循单向数据流或数据绑定
高效
声明式编码，组件化编码

React 的一些主要优点？

它提高了应用的性能
可以方便在客户端和服务器端使用
由于使用 JSX，代码的可读性更好
使用React，编写 UI 测试用例变得非常容易

为什么学？

1.原生JS操作DOM繁琐，效率低

2.使用JS直接操作DOM,浏览器会进行大量的重绘重排

3.原生JS没有组件化编码方案，代码复用低

在学习之前最好看一下关于npm的知识：下面是我在网上看见的一个写的还不错的npm的文章

npm

2.React 基础案例

首先需要引入几个 react 包

React 核心库、操作 DOM 的 react 扩展库、将 jsx 转为 js 的 babel 库

【先引入react.development.js，后引入react-dom.development.js】

react.development.js

react 是react核心库，只要使用react就必须要引入
下载地址：https://unpkg.com/react@18.0.0/umd/react.development.jsopen in new window

react-dom.development.js

react-dom 是react的dom包，使用react开发web应用时必须引入
下载地址：https://unpkg.com/react-dom@18.0.0/umd/react-dom.development.jsopen in new window

babel.min.js

由于JSX最终需要转换为JS代码执行，所以浏览器并不能正常识别JSX，所以当我们在浏览器中直接使用JSX时，还必须引入babel来完成对代码的编译。
babel下载地址：https://unpkg.com/babel-standalone@6/babel.min.js

react.development.js
react-dom.development.js
babel.min.js

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test">

    </div>
    <!--引入顺序不能变  -->
     <!--引入react核心库  -->
     <script type="text/javascript" src="../js/react.development.js"></script> 
    <!-- 引入react-dom.用于支持react操作dom --><

最低0.47元/天解锁文章