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，
公眾號【前端嘛】
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/431028.html
標籤：其他