react 也就这么回事 01 —— React 元素的创建和渲染
React 是一个用于构建用户界面的 JavaScript 库
它包括两个库:react.js 和 react-dom.js
react.js
:React 的核心库,提供了 React.js 的核心功能,比如创建 React 组件、组件的生命周期等react-dom.js
:提供了和浏览器交互的 DOM 功能,比如:将组件渲染到页面上
React 和 ReactDOM
我们可以通过官方提供的 CDN 链接引入 react.js 和 react-dom.js 这两个库,从而在 HTML 中使用
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
React
是 React 库的入口。如果你通过使用<script>
标签的方式来加载 React,则可以通过React
全局变量对象来获得 React 的顶层 API如果你使用一个
<script>
标签引入 react-dom,所有的顶层 API 都能在全局ReactDOM
上调用
先来看看 React 和 ReactDOM 是什么:
console.log(React)
console.log(ReactDOM)
React
ReactDOM
可以看到是两个对象,并且拥有很多方法,暂时不必深究每个方法
React 初体验
首先我们在 html 中引入:react.js react-dom.js
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
目前我们的代码写在 html 中,所以都通过 script 标签引入这两个库(后续不再赘述)
接着我们在界面上添加一个根元素:
<div id="root"></div>
如果我们想给这个根元素添加一段文字比如: Hello,React! ,我们可以这么做:
<div id="root">
Hello,React!
</div>
现在用 React 的方式来将这个标题渲染到页面上
我们要用到 ReactDOM 提供的 API :ReactDOM.render()
ReactDOM.render("Hello, React!", document.getElementById("root"), () => {
console.log("渲染完执行回调函数");
});
在线代码(可以点击在线代码查看效果)
事实上,render 方法接受 3 个参数:
- 要渲染的内容("Hello, React!")
- 渲染内容的接收容器(此处的根元素)
- 可选的回调函数(回调函数会在内容被渲染后执行)
创建 React 元素
如果我们想要渲染的内容是一个标题 h1 或者一个段落 p ,甚至是更复杂的元素嵌套该怎么办呢
<!-- 比如 -->
<h1>Hello,React!</h1>
<p>第一次学习React,太简单了吧</p>
<!-- 甚至 -->
<div>
<header>
<h1>Hello,React!</h1>
</header>
<section>
<p>第一次学习React,太简单了吧</p>
</section>
</div>
React 提供了创建并返回 React 元素的 API:
React.createElement(
type,
[props],
[...children]
)
该方法接受 3 个参数:
type:指定元素类型,比如 'h1'、'p'
props:可选参数,元素的属性值对对象,比如
{className: 'bg-red', id: 'title'}
可选参数,元素的子元素
创建元素并渲染到指定容器
const h1 = React.createElement("h1", null, "Hello,React!");
const p = React.createElement("p", null, "第一次学react,太简单了吧");
const header = React.createElement("header", { id: "title" }, h1);
const section = React.createElement("section", null, p);
const div = React.createElement("div", null, header, section);
渲染到根元素:
ReactDOM.render(div, document.querySelector("#root"));
注意
- render 方法可以接受 createElement 创建的 React 元素作为渲染对象
- render 方法属于 ReactDOM 对象
- createElement 方法属于 React 对象
JSX
每个 React 元素都用 createElement 创建有点麻烦啊,有没有简单点的办法
事实上,对于:
const h1 = React.createElement("h1", null, "Hello,React!");
const p = React.createElement("p", null, "第一次学react,太简单了吧");
const header = React.createElement("header", { id: "title" }, h1);
const section = React.createElement("section", null, p);
const div = React.createElement("div", null, header, section);
可以这么写:
const h1 = <h1>Hello,React!</h1>;
const p = <p>第一次学react,太简单了吧</p>;
const header = (
<header>
<h1>Hello,React!</h1>
</header>
);
const section = (
<section>
<p>第一次学react,太简单了吧</p>
</section>
);
const div = (
<div>
<header>
<h1>Hello,React!</h1>
</header>
<section>
<p>第一次学react,太简单了吧</p>
</section>
</div>
);
这种标签语法既不是字符串也不是 HTML
它被称为 JSX,是 JavaScript 的语法扩展
事实上,每个 JSX 元素一个语法糖,它们最终还是会调用React.createElement(component, props, ...children)
方法来创建 React 元素。不过我们写起来更加简单且直观
JSX 初体验
我们将所有 createElement 创建的元素改写成 JSX
得到如下完整 HTML 页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const h1 = <h1>Hello,React!</h1>;
const p = <p>第一次学react,太简单了吧</p>;
const header = (
<header>
<h1>Hello,React!</h1>
</header>
);
const section = (
<section>
<p>第一次学react,太简单了吧</p>
</section>
);
const div = (
<div>
<header>
<h1>Hello,React!</h1>
</header>
<section>
<p>第一次学react,太简单了吧</p>
</section>
</div>
);
ReactDOM.render(div, document.querySelector("#root"));
</script>
</html>
在浏览器中打开,会发现页面上的元素并没有得到正确的渲染
并且控制台输出了错误:Uncaught SyntaxError: Unexpected token '<'
这是因为浏览器并不认识 JSX,JSX 只是 React 团队自己造的东西,我们需要把 JSX 转换成符合 JS 规范的语法,这样浏览器就认识了
这跟将 ES6 语法转换成 ES5 差不多
什么东西能把 ES6 语法转换成 ES5 ?
没错,Babel
同样,借助 Babel 我们可以将 JSX 转换成 JS 语法
在页面中添加如下 script 标签
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
并将 script 标签(指包含 JSX 语法的 script)的 type 属性改为:text/babel
<script type="text/babel">
const h1 = <h1>Hello,React!</h1>;
</script>
现在,元素可以正确的显示了
现在,我们已经学会了如何用 React 来创建元素和渲染元素,也初步了解了创建元素的方法的语法糖 JSX。
公众号【前端嘛】
react 也就这么回事 01 —— React 元素的创建和渲染的更多相关文章
- React 也就这样 01——React 元素的创建和渲染
React 是一个用于构建用户界面的 JavaScript 库 它包括两个库:react.js 和 react-dom.js react.js:React 的核心库,提供了 React.js 的核心功 ...
- react 也就这么回事 02 —— JSX 插值表达式、条件渲染以及列表渲染
我们已经学会了 React 创建元素和渲染元素 ReactDOM.render(<div>Hello React!</div>, document.getElementById ...
- react 也就这么回事 04 —— 元素渲染
为了便于后续理解,我们再来回顾和总结前面几个章节的内容 1 元素及其创建 元素是构成 React 应用的最小砖块. 元素描述了你在屏幕上想看到的内容. const element = <h1&g ...
- react快速上手一(使用js语法,创建虚拟DOM元素)
1.装包,引包 首先需要安装两个包 react ,react-dom cnpm i react react-dom 介绍下这两个包: react:专门用来创建React组件,组件生命周期等这些东西. ...
- react 也就这么回事 05 —— 组件 & Props
什么是组件:用来实现局部功能的可复用代码片段 比如很多界面会用到"分页"功能,因此可以将它封装成独立的组件 这样用到分页的界面只需引入该组件而不必重新写代码 1 定义组件 在 Re ...
- React笔记01——React开发环境准备
1 React简介 2013年由Facebook推出,代码开源,函数式编程.目前使用人数最多的前端框架.健全的文档与完善的社区. 官网:reactjs.org 阅读文档:官网中的Docs React ...
- React系列(一):React入门
React简介 1.由来 React是有Facebook开发出来用于构建前端界面的JS组件库,由于其背后的强大背景,使得这款库在技术开发上完全没有问题. 2.React的优势 解决大规模项目开发中数据 ...
- react.js 从零开始(七)React (虚拟)DOM
React 元素 React 中最主要的类型就是 ReactElement.它有四个属性:type,props,key 和ref.它没有方法,并且原型上什么都没有. 可以通过 React.create ...
- 如何使用TDD和React Testing Library构建健壮的React应用程序
如何使用TDD和React Testing Library构建健壮的React应用程序 当我开始学习React时,我努力的一件事就是以一种既有用又直观的方式来测试我的web应用程序. 每次我想测试它时 ...
随机推荐
- 使用NSSM把任意exe程序注册成Windows服务
1.登录NSSM官网下载最新版本: http://www.nssm.cc/download 2.解压之后可以看到win32和win64位的nssm.exe,根据自己的电脑选择使用 3.拷贝一份nssm ...
- Linux环境下的Docker的安装和部署、学习二
DockerFile体系结构(保留字指令) FROM:基础镜像,当前新镜像是基于哪个镜像的 MAINTAINER:镜像维护者的姓名和邮箱地址 RUN:容器构建时需要运行的命令 EXPOSE:当前容器对 ...
- CSS3 动画3D视角下 旋转圆环
首先是 transform 属性: transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. 加上对应属性则可得到3D透视效果下的形态 本次以圆形( ...
- rocketmq之延迟队列(按照18个等级来发送)
1 启动消费者等待传入的订阅消息 import org.apache.rocketmq.client.consumer.DefaultMQPushConsumer; import org.apache ...
- codeblocks中报错:'to_string' was not declared in this scope解决方案
在windows下使用codeblocks(编译器采用MinGW)时,有时会遇到"'to_string' was not declared in this scope"的错误,这里 ...
- 【记录一个问题】MariaDB 10.1.9 中with rollup的神器问题
我想统计每天数据的处理状态的汇总,于是写了这样一条语句: 1 select * from ( 2 select ifnull(date(update_time),'_30天汇总') as dtm, i ...
- WebGPU图形编程(1):建立开发环境 <学习引自徐博士教程>
首先感谢徐博士提供的视频教程,我的博客记录也是学习徐博士进行的自我总结,老徐B站学习视频链接网址:WebGPU图形编程 - 免费视频教程(1):建立开发环境_哔哩哔哩_bilibili 创建之前你需要 ...
- 数组的sort()排序
1.sort() 方法用于对数组的元素进行排序,并返回数组.默认排序顺序是根据字符串Unicode码点,也就是你不传参进去的话,默认按字符串Unicode码点来排序,而不是按数字大小来排序 2.arr ...
- 用 CSS 让你的文字更有文艺范
透明文字,模糊文字,镂空文字,渐变文字,图片背景文字,用 CSS 让你的文字也有 freestyle- 前言 我们做页面涉及字体的时候,最多就是换个 color 换个 font-family,总是觉得 ...
- SuperPoint: Self-Supervised Interest Point Detection and Description 论文笔记
Introduction 这篇文章设计了一种自监督网络框架,能够同时提取特征点的位置以及描述子.相比于patch-based方法,本文提出的算法能够在原始图像提取到像素级精度的特征点的位置及其描述子. ...