【React学习笔记】第一章：React入门

Mae_cpski

已于 2025-01-17 11:22:59 修改

阅读量1.1k

点赞数 23

分类专栏：前端-React 文章标签： react.js 学习笔记

于 2025-01-16 15:58:03 首次发布

本文链接：https://blog.csdn.net/cpsxn/article/details/145183052

版权

1.React介绍

中文官网： https://react.docschina.org/
英文官网：https://reactjs.org/

1.1 React是什么

react是一个用于构建用户界面的开源JavaScript库。（操作DOM呈现页面）
由Facebook的软件工程师 Jordan Walke创建，于2011年部署于Facebook 的 newsfeed；2012年部署于 Instagram；2013年 5 月宣布开源。

1.2 React的特点：

1.采用组件化模式、声明式编码，提高开发效率及组件复用率。

声明式： 只需要描述UI（HTML）看起来是什么样，就和写HTML一样。React负责渲染UI，并在数据变化时更新UI
基于组件： 组件是react最重要的内容，组件表示页面中的部分内容。组合、复用多个组件，可以实现完整的页面功能

2.在React Native中可以使用 React 语法进行移动端开发。(JS可以写出来IOS\Android)
两种手机平台： IOS（OC Swift）、Android（java）
3.高效：使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互。

2.React的基本使用

2.1 相关JS库

1.babel.min.js：作用是将jsx 转为 js 
2.react.development.js：react的核心库，引入后全局有React对象
3.react-dom.development.js：react的扩展库，引入后全局有ReactDOM对象

用React官网CDN链接下载 react库
常用js库下载BootCDM

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> 
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

2.2 Hello react

注意：
1.react核心库要在react-dom之前引入
2.<script type="text/babel"></script> 一定要写babel
3.创建虚拟DOM时不写引号，这是jsx的写法
4.渲染虚拟DOM的语法：ReactDOM.render(虚拟DOM, 容器)

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=

最低0.47元/天解锁文章