React.js快速进坑.md 4.0 KB
React.js快速进坑
React 用于构建 Web 和原生交互界面的库 。
1. Vue.js 对比 React
都是构建UI的框架，但关注点不同：
- Vue.js 对 HTML 进行了扩展。各种指令
- React 对 JavaScript 进行了扩展，新增一个语法-JSX
因此，Vue在构建页面上更便捷，而React在构建页面时可以使用全部的JS能力。
2. 安装
与Vue.js一样，有CDN链接；也可以通过npm独立安装；当然也有对应的脚手架工具。
为了更快下载必要js文件，将CDN链接上的js下载本地。
- babel: 转译jsx语法，即将jsx 转换成 js对象（虚拟DOM）
- React核心库：提供核心功能。比如如何定义组件，Hook等等
- React DOM库：提供与DOM相关的功能。比如 将React组件 渲染到页面中，输出信息...
2.1 Hello, world
<!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>Hello</title>
<script src="../babel.min.js"></script>
<script src="../react.development.js"></script>
<script src="../react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<!-- 这个script不能是普通的脚本 -->
<!-- 通过type属性告诉babel这里的代码 是需要它转译 -->
<script type="text/babel">
// 0 创建一个简单 UI：
const element = <h1>Hello, world.</h1>; // 这就是jsx
// 创建root实例，提供一个render方法 可以将构建的UI 渲染到页面中
// 参数 为 一个DOM对象
// 1. 获取容器的dom对象
const containerEle = document.getElementById('root');
// 2. 创建root实例，并指定对应容器DOM
const root = ReactDOM.createRoot(containerEle);
// 3. 将 element 渲染到 指定容器DOM下
root.render(element);
</script>
</body>
</html>
3. JSX
形似
<h1>Hello, World.</h1>这样的语法，看着 既不是 HTML 标签， 也不是 JS中数据类型。它就是jsx.
3.1 渲染数据
在React中，可以使用{}将一个JS表达式的值 绑定到 JSX 中。
let username = 'guoguo';
// 在React中可以使用 "{}" 去 在jsx中渲染数据
// 在"{js表达式}"中，编写的是 JS表达式。类似与 Vue的插值语法"{{}}"
let element = <h3>Hello, {username}.</h3>; // <h3>Hello, daxia.</h3>
3.2 绑定属性
在开发UI时，jsx的操作会像HTML标签那样去指定各种属性。
由于 JSX 最终会被 babel 转译成 JS对象。因此JSX的属性命名规则要遵从JS规范。
- 不能使用js中关键字后者保留字
- 属性名字 推荐使用 驼峰命名法 camelCase
实现时注意以下几点：
- 那些是关键字或保留字的HTML属性需要改名：for => htmlFor; class => className
- 那些包含多个单词的HTML属性需要转换成驼峰命名：rowspan =>rowSpan; colspan => colSpan; ...
剩下那些就无需改变，直接可以使用。
// let element = ( // <h3 id="hello" className="h3-red"> // Hello, React. // </h3> // ); /** *! 1. jsx元素必须闭合 *! 2. 在jsx中注释内容的话 需要使用 绑定语法 */ let element = ( <div> <label htmlFor="name">姓名：</label> {/* jsx元素必须闭合*/} <input id="name" type="text" placeholder="输入姓名..." tabIndex="1" /> <br /> <label htmlFor="xueli">学历：</label> <input id="xueli" type="text" placeholder="输入学历..." tabIndex="3" /> <input type="text" placeholder="干扰..." tabIndex="2" /> </div> ); ReactDOM.createRoot(document.getElementById('root')).render(element);