创建第一个React应用,并在页面上显示“Hello React”字样。
本文致力于使用标签的方式,实现最基础的React应用。
编写React应用时,至少需要引入以上三个JS库,其中,react.development.js是React的核心库,react-deom.development.js属于扩展库,用于操作DOM,babel.min.js可以将ES6语法转为ES5,同时支持JSX转为JS。
在html文件的
前以形式引入以上三个JS库。
注意:标签引入React相关JS库时,需要先引入React核心库(*)!
<script src="./js/react.development.js">script>
<script src="./js/react-dom.development.js">script>
<script src="./js/babel.min.js">script>
也可以使用CDN方式引入,避免下载React相关文件。
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js">script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js">script>
React容器
React会将所有的组件内容挂载到一个容器中,我们通常使用一个ID为“root”的 在 引入React代码 使用 创建虚拟DOM React不直接修改DOM,而是在内存中创建一个虚拟DOM,所有操作都是针对虚拟DOM的。 渲染虚拟DOM 将虚拟DOM渲染到真实页面上,实现页面的展示。html文件的<html>
<head>
head>
<body>
<div id='root'>
div>
body>
html>
标签引入React代码,必须指明type='text/babel'。<script type='text/babel'> script>
// 1. 创建虚拟DOM
const VDOM = hello react
//此处不需要加引号,这是JSX语法
// 2. 渲染虚拟DOM
ReactDOM.render(VDOM, document.getElementById('root'))
4. 完整文件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="root"> div>
<script src="./js/react.development.js">script>
<script src="./js/react-dom.development.js">script>
<script src="./js/babel.min.js">script>
<script type="text/babel">
/* 此处标签必须指明 text/babel 否则不识别JSX语法 */
// 1. 创建虚拟DOM
const VDOM = <h1>hello react</h1> //此处不需要加引号,这是JSX语法
// 2. 渲染虚拟DOM
ReactDOM.render(VDOM, document.getElementById('root'))
script>
body>
html>
重定向与转发的几种方式
Java安全之Spring内存马
Topic 19. 临床预测模型之输出每个患者列线图得分 (nomogramFormula)
solidity开发环境配置,vscode搭配remix
中考后还有一条路可选,很多家长还不知道,盐城北大青鸟告诉你
GBase 8c在结果集中定位方法
带头双向循环链表的实现
监听DIV元素尺寸变化
OpenHarmony 社区运营报告(2023 年 10 月)