React-1
1. React 是什么？
一个用于构建用户界面的 JavaScript 库
中文手册: https://react.docschina.org/.
2. 命令式编程 和 声明式编程
- 告诉计算机怎么做（How） - 过程
- 告诉计算机我们要什么（What） - 结果
3. 如何使用 React
3.1 基于浏览器的模式
- React.js 提供 React.js 核心功能代码，如：虚拟 dom，组件
React.createElement(type,props,children);
- ReactDOM 提供了与浏览器交互的 DOM 功能，如：dom 渲染
ReactDOM.render(element, container[, callback])- element：要渲染的内容
- container：要渲染的内容存放容器
- callback：渲染后的回调函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
</head>
<body>
<div id="root"></div>
<script>
ReactDOM.render(
"今天天气不错",
document.querySelector("#root"),
()=>{
console.log("渲染成功");
}
);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/react.js"></script>
<script src="js/react-dom.js"></script>
</head>
<body>
<div id="root"></div>
<script>
let h1 = React.createElement("h1",null,"我是一个标题");
let p = React.createElement("p",null,"我是一个段落标签");
let el = React.createElement(
"header",
{
id:"header"},
h1,
p
);
ReactDOM.render(
// React.createElement("h1",null,"我是一个标题"),
el,
document.querySelector("#root"),
()=>{
console.log("渲染成功");
}
);
</script>
</body>
</html>
3.2 babel
babel-standalone.js：在 浏览器中 处理 JSX
记得引入：<script src="js/babel.js"></ script> 和 <script type="text/babel">
https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js
3.3 JSX
JSX 是一个基于 JavaScript + XML 的一个扩展语法
- 它可以作为值使用
- 它并不是字符串
- 它也不是HTML
- 它可以配合JavaScript 表达式一起使用
1). 插值表达式
在 JSX 中可以使用 {表达式} 嵌入表达式
表达式：产生值的一组代码的集合
- 变量
- 算术运算
- 函数调用
- ……
注意：分清楚 表达式 与 语句 的区别，if、for、while 这些都是语句，JSX 不支持语句
各种类型内容在插值中的使用
- 注释
{/ * 注释 * /}
{/*
多行注释
*/}
2). 输出数据类型
- 字符串、数字：原样输出
- 布尔值、空、未定义 会被忽略
<!DOCTYPE html>
<html lang="en">
最低0.47元/天 解锁文章
829
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
