react入门基础

React 简介

React ------- 用于构建用户界面的JavaScript库/一个将数据渲染为HTML视图的开源JavaScript库

`React`历史

【经典水时长/水字数】

由Facebook开发，且开源

起初由Facebook的软件工程师 Jordan Walke 创建【 膜拜 React 祖师爷】
于2011年部署于 Facebook的 newsfeed
在2012年部署于 Instagram
2013年5月开源

. . . . . .【这里应该加句：我们的故事还在继续...】

为什么要学 `React`

【生活所迫】

原生JavaScript操作DOM繁琐、效率低（DOM-API操作UI）
使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排
原生JavaScript没有组件化编码方案，代码复用率低

【我JUBAO，老师你上vue也是这么说的】

`React`特点

【经典喝水案例，典典典典典典典典典典典典典典典典典典典】

采用组件化模式、声明式编程，提高开发效率及组件复用率
在React Native中可以使用React语法进行移动端开发*【出现了，家人们】*
使用虚拟DOM+优秀的diffing算法，尽量减少与真实DOM的交互*【基操勿六】*

React的基本使用

`hello react` 案例

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello_react</title>
</head>
<body>
    <!-- 准备好一个容器-->
    <div id="test"></div>
    <!-- 引入react库 -->
    <script  src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel，将jsx转换成js -->
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
        // 1.创建虚拟DOM
        const VDOM = <h1>Hello,React</h1>
        // 2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById("test"));
    </script>
</body>
</html>

为什么使用JSX？

使用jsx和js创建虚拟DOM的方式对比*【用js也能创建虚拟* DOM*?涨姿势了（烂梗）】*

创建形式

html 复制代码

<h1 id='title'>
  <span>Hello,React</span>
</h1>

使用jsx

html 复制代码

 <script type="text/babel">
        // 1.创建虚拟DOM
        const VDOM = (<h1 id='title'>
          <span>Hello,React</span>
        </h1>
        )
        // 2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById("test"));
    </script>

使用js

api:React.createElement(标签名,标签属性,标签内容)：用于创建虚拟dom

【原来是使用react内部的方法进行创建的】

html 复制代码

 <script type="text/javascript">
        // 1.创建虚拟DOM
        const VDOM = React.creatElement('h1',{id:'title'},React.creatElement('span',{},'Hello,React'))
        // 2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById("test"));
    </script>

总结：

jsx****是 js****在 react****方面的语法糖 【特别好，等于没说 😒 】

虚拟DOM

虚拟DOM的本质就是object对象*【还以为是啥高级玩意】*

关于虚拟DOM*【我有以下几点要说】*

本质是Object类型的对象（一般对象）
虚拟DOM比较"轻"，真实DOM比较重，因为虚拟DOM是React内部在用，无需真实DOM上这么多的属性
虚拟DOM最终会转换成真实DOM，呈现到页面上

JSX语法规则

【前方高能】

javascript 复制代码

//   创建虚拟DOM
const VDOM = (
  <div>
  <h1>JSX语法规则</h1>
  <div>
  <h2>JSX是什么</h2>
  <p>
  JSX是一种轻量级的标记语言，它允许你在HTML中定义一个组件，然后在页面中使用这个组件。
  </p>
  <input type="text"/>
  </div>
  </div>
);
//  渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById("test"));

规则：

定义虚拟DOM，不要写引号" "
标签中混入JS表达式时要用{}
样式的类名指定不要用class,要用className

【小尤，你是不是借鉴了】

内敛样式，要用style={``{key:value}}的形式写
只有一个根标签
标签必须闭合

总结

最近在用vue3写项目，抽空看了点关于react的教学视频，感觉vue和react的相似之处还是挺多的，希望后面能够再接再厉把项目写好，把react学的更完善一些

React 简介

React历史

为什么要学 React

React特点

React的基本使用

hello react 案例

为什么使用JSX？

虚拟DOM

JSX语法规则

总结

`React`历史

为什么要学 `React`

`React`特点

`hello react` 案例