網站首頁 編程語言 正文
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 中使用
React?是 React 庫的入口。如果你通過使用?
目前我們的代碼寫在 html 中，所以都通過 script 標簽引入這兩個庫（后續不再贅述）
接著我們在界面上添加一個根元素：
如果我們想給這個根元素添加一段文字比如： Hello,React! ，我們可以這么做：
Hello,React!
現在用 React 的方式來將這個標題渲染到頁面上
我們要用到 ReactDOM 提供的 API ：ReactDOM.render()
ReactDOM.render("Hello, React!", document.getElementById("root"), () => {
console.log("渲染完執行回調函數");
});
事實上，render 方法接受 3 個參數：
- 要渲染的內容（"Hello, React!"）
- 渲染內容的接收容器（此處的根元素）
- 可選的回調函數（回調函數會在內容被渲染后執行）
創建 React 元素
如果我們想要渲染的內容是一個標題 h1 或者一個段落 p ，甚至是更復雜的元素嵌套該怎么辦呢
Hello,React!
第一次學習React，太簡單了吧
Hello,React!
第一次學習React，太簡單了吧
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"));
注意
1.render 方法可以接受 createElement 創建的 React 元素作為渲染對象
2.render 方法屬于 ReactDOM 對象
3.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 =Hello,React!
; const p =第一次學react，太簡單了吧
; const header = (); const section = ( Hello,React!
); const div = ( 第一次學react，太簡單了吧
);Hello,React!
第一次學react，太簡單了吧
這種標簽語法既不是字符串也不是 HTML
它被稱為 JSX，是 JavaScript 的語法擴展
事實上，每個 JSX 元素一個語法糖，它們最終還是會調用React.createElement(component, props, ...children)?方法來創建 React 元素。不過我們寫起來更加簡單且直觀
JSX 初體驗
我們將所有 createElement 創建的元素改寫成 JSX
得到如下完整 HTML 頁面
Static Template
在瀏覽器中打開，會發現頁面上的元素并沒有得到正確的渲染
并且控制臺輸出了錯誤：Uncaught SyntaxError: Unexpected token '<'
這是因為瀏覽器并不認識 JSX，JSX 只是 React 團隊自己造的東西，我們需要把 JSX 轉換成符合 JS 規范的語法，這樣瀏覽器就認識了
這跟將 ES6 語法轉換成 ES5 差不多
什么東西能把 ES6 語法轉換成 ES5 ？
沒錯，Babel
同樣，借助 Babel 我們可以將 JSX 轉換成 JS 語法
在頁面中添加如下 script 標簽
并將 script 標簽（指包含 JSX 語法的 script）的 type 屬性改為：text/babel
現在，元素可以正確的顯示了
總結
原文鏈接：https://www.cnblogs.com/bidong/p/15922831.html
相關推薦
- 2022-03-26 C語言goto語句簡單使用詳解_C 語言
- 2023-02-09 Python去除html標簽的幾種方法總結_python
- 2022-09-25 ECharts如何在pycharm中運行
- 2022-03-26 Android實現調用攝像頭拍照并存儲照片_Android
- 2021-12-12 超快速上手jupyter notebook快捷鍵操作（兩種模式一個快捷鍵）
- 2022-09-26 Shell（希爾）排序算法詳解之C語言版
- 2022-01-13 出現/usr/lib64/erlang/erts-10.3/bin/beam.smp: error
- 2022-05-09 Redis擊穿穿透雪崩產生原因分析及解決思路面試_Redis
提供CDN加速