文章目录

• 一、react的一次使用
• • react.development.js
  • react-dom.development.js
  • React.createElement()
• 二、三个API
• • React.createElement()
  • ReactDOM.createRoot()
  • root.render() 渲染页面
• 三、JSX（JavaScript Syntax Extension）、babel
• • babel
  • JSX使用注意事项

一、react的一次使用

react.development.js

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

react-dom.development.js

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

注意引用先后顺序 先引用react核心库，再引用react-dom

React.createElement()

用来创建一个react元素

• 参数1：元素名（组件名）

• 参数2：元素中的属性
  设置事件的时候 需要使用驼峰和箭头函数 {onClick:()=>{alert('123')}}
  class属性设置 需要使用className

• 参数3：元素的子元素

    // 创建一个React元素const button = React.createElement('button', {type: 'button',className: 'hello',onClick: () => {alert('你点我干嘛')}}, '点我一下');

二、三个API

React.createElement()

• React.createElement(type, [props], […children])
  • 用来创建React元素
  • React元素无法修改

ReactDOM.createRoot()

• createRoot(container[, options])
  • 用来创建React的根容器，容器用来放置React元素

root.render() 渲染页面

• root.render(element)
  • 当首次调用时，容器节点里的所有 DOM 元素都会被替换，后续的调用则会使用 React 的 DOM 差分算法（DOM diffing algorithm）进行高效的更新。
  • 不会修改容器节点（只会修改容器的子节点）。可以在不覆盖现有子节点的情况下，将组件插入已有的 DOM 节点中。

    // 创建第一个divconst div = React.createElement('div', {}, '我是一个div', button);// 获取根元素const root = ReactDOM.createRoot(document.getElementById('root'));// 将元素在根元素中显示root.render(div);// 老版本的React中使用方法// ReactDOM.render(div, document.getElementById('root')); 

三、JSX（JavaScript Syntax Extension）、babel

React.createElement()语法糖

JSX 是 JavaScript 的语法扩展，JSX 使得我们可以以类似于 HTML 的形式去使用 JS。JSX便是React中声明式编程的体现方式。声明式编程，简单理解就是以结果为导向的编程。使用JSX将我们所期望的网页结构编写出来，然后React再根据JSX自动生成JS代码。所以我们所编写的JSX代码，最终都会转换为以调用React.createElement()创建元素的代码。

需要配合babel使用，babel转换jsx为react元素

babel

babel下载地址：https://unpkg.com/babel-standalone@6/babel.min.js

JSX使用注意事项

1. JSX不是字符串，不要加引号
2. JSX中html标签应该小写，React组件应该大写开头
3. JSX中最外层有且只有一个根标签
4. JSX的标签必须正确结束（自结束标签必须写/）
5. 在JSX中可以使用{}嵌入表达式

• 有值的语句的就是表达式

const name = '孙悟空';
const ele = 
Hello {name}
;
const ele2 = 
Hello {孙悟空}
;
const ele3 = 
1 + 1 = {1 + 1}
;

• {} 中也可以调用函数

function fn(){return '哈哈';
}
​
const ele = 
{fn()}

没有返回值的语句，像if、for等语句是不能出现在JSX中的！但是在if、for等里边写JSX是可以的：

let ele;
let isLogin = true;
if(isLogin){ele = 
欢迎光临！
;
}else{ele = 
请登录！
}

let eles = [];
for(let i=0; i<5; i++){eles.push(
我是第{i}个h2
);
}

6. 如果表达式是空值、布尔值、undefined，将不会显示
7. 在JSX中，属性可以直接在标签中设置
   • 注意：
   • class需要使用className代替
   • style中必须使用对象设置
   • style={{background:‘red’}}