🌈个人主页:前端青山
🔥系列专栏:React篇
🔖人终将被年少不可得之物困其一生
目录
一、概述
官网:React
中文网(个人翻译站):React 官方中文文档
新版网站:React 官方中文文档
1、介绍
React起源于Facebook的内部项目,它是一个用于构建用户界面的javascript库,Facebook用它来架设公司的Instagram网站,并于2013年5月开源。
React拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。认为它可能是将来Web开发的主流工具之一。
特点:
-
声明式
你只需要描述UI看起来是什么样式,就跟写HTML一样,React负责渲染UI
-
基于组件
组件是React最重要的内容,组件表示页面中的部分内容
-
学习一次,随处使用【react原生生态比vue好】
-
ReactJs:web开发
-
react-native:原生app开发(RN)
-
react360:vr应用
-
2、开发工具的安装
-
Chrome 浏览器扩展:https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=zh-CN
-
vscode安装react开发扩展
3、React初识
目标:实现基于react的hello world的显示。
React开发需要引入多个依赖文件,其中react.js、react-dom.js这两个文件是我们创建react应用程序必须要引入的依赖文件。
-
react.js
-
核心,提供创建元素,组件等功能
-
-
react-dom.js
-
提供DOM相关功能
-
下载对应的react.js和react-dom.js的开发版本的js类库文件到本机中后,通过HTML的script
标签引入到当前的网页中,如下(注意顺序,先引核心文件,再引其他文件):
React的第一个程序:
<!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 world</title>
</head>
<body>
<!-- 1. Add a DOM Container to the HTML -->
<div id="root"></div>
<!-- 2. Add the Script Tags -->
<!-- react封装的一些接口(interface)集合文件 -->
<script src="./js/react.development.js"></script>
<!-- react封装的接口(interface)实现方法 -->
<script src="./js/react-dom.development.js"></script>
<!-- 3. Load our React component(Create a React Component) -->
<script>
// 获取dom容器
const dom = document.getElementById("root")
// React.createElement:创建一个react元素(组件)
// React.createElement语法:React.createElement(标签名,属性对象,子节点)
const el = React.createElement("div", { id: "msg", className: "text" }, "hello world")
// 要求提升:在div中的p标签里面输出hello world
// const el = React.createElement("div", {}, React.createElement("p", {}, "hello world"))
// 进行渲染
ReactDOM.render(el, dom);
</script>
</body>
</html>
二、JSX语法
1、概述
由于通过React.createElement()方法创建的React元素有一些问题:代码比较繁琐,结构不直观,无法一眼看出描述的结构,不优雅,开发时写代码很不友好。
React使用JSX来替代常规的JavaScript,JSX可以理解为的JavaScript语法扩展,它里面的标签申明要符合XML规范要求(必须需要有一个唯一的根元素)。React不一定非要使用JSX,但它有以下优点:
-
JSX执行更快,因为它在编译为JavaScript代码后进行了优化
-
它是类型安全的,在编译过程中就能发现错误
-
声明式语法更加直观,与HTML结构相同,降低了学习成本,提升开发效率速
-
jsx语法中一定要有一个顶级元素包裹(XML一大特点),否则编译报错,程序不能运行
2、JSX重构Hello world
在项目中尝试JSX最快的方法是在页面中添加这个 <script>
标签,引入解析jsx语法的babel类库,注意后续的<script>
标签块中使用了JSX语法,则一定要申明类型type="text/babel"
,否则babel将不进行解析jsx语法。
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
重构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>JSX语法</title>
</head>
<body>
<!-- 1. 创建渲染容器 -->
<div id="root"></div>
<!-- 2. 添加script标签 -->
<!-- jsx语法要求:jsx语法属于js增强语法,浏览器不认识。需要通过babel进行转化,因此需要引入babel.js,要求babel.js文件在最前面 -->
<script src="./js/babel.min.js"></script>
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<!-- 3. 创建react组件 -->
<!-- babel默认不解析script代码段,只解析text/babel属性的script代码段 -->
<script type="text/babel">
// 获取dom
const dom = document.getElementById("root")
// 创建组件(jsx语法)
const el = (
<div>
<p>hello world</p>
</div>
)
// 渲染
ReactDOM.render(el, dom)
</script>
</body>
</html>
3、JSX语法基础
3.1、基础
在JSX语法中,要把JS代码写到{ }中,所有标签必须要闭合。
let num = 100;
let bool = false;
// JSX 语法
var vNode = (
<div>
{/* 我是注释 */}
{num}
<hr />
{/* 三目运算 */}
{bool ? "条件为真" : "条件为假"}
</div>
);
ReactDOM.render(vNode, document.getElementById("app"));
注意:在jsx语法中不支持“//”注释形式以及“<!---->”注释形式,只能使用“{/* */}”注释形式。
const src = "http://www.mobiletrain.org/images/index/new_logo.png";
const style = { fontSize: "20px", color: "red" };
const html = "<a href='http://www.baidu.com'>百度一下</a>";
// 获取元素
const app = document.getElementById("app");
// 创建虚拟DOM
const vNode = (
<div>
{ /*标签的属性如果需要被JSX解析,则属性的值不能加引号*/ }
<img src={src} />
<hr/>
<p style={style}>北川3次地震为汶川地震余震</p>
<hr/>
<p className="cl1">iPhone12开售排队</p>
{ /*
输出HTML字符串(了解)
注意点:react默认不解析html字符串
原因是:安全问题
如果真要输出解析的html字符串请按照以下的语法
*/ }
<p dangerouslySetInnerHTML={{__html:html}}></p>
</div>
);
// 渲染页面
ReactDOM.render(vNode, app);
3.2、数组渲染
3.2.1、直接渲染
let arr = ["张三", "李四", "王五", "赵六"];
// 获取挂载点
const el = document.getElementById("app");
// 创建虚拟DOM
const vNode = (
<div>
{/* 直接输出数据 */}
{arr}
</div>
);
// 渲染
ReactDOM.render(vNode, el);
3.2.2、处理并渲染
let arr = ["张三", "李四", "王五", "赵六"];
// 获取挂载点
const el = document.getElementById("app");
// 创建虚拟DOM
const vNode = (
<div>
{/* 处理并渲染 */}
<ul>
{/* 给循环体包裹一层{},不包就错 */}
{
arr.map((item, index) => {
return <li key={index}>{item}</li>;
})
}
<hr />
{
/*
给循环体包裹一层{},不包就错,如果循环体就1行
{}与return可以被省略(箭头函数)
*/
}
{
arr.map((item, index) => (
<li key={index}>{item}</li>
))
}
</ul>
</div>
);
// 渲染
ReactDOM.render(vNode, el);
React 使用一种名为 JSX 的语法扩展来编写组件的 UI 结构。JSX 看起来类似 HTML,但实际上是 JavaScript 表达式。它可以与 JavaScript 无缝结合,允许在其中嵌入变量、表达式和函数调用!