React筆記01：react基礎、react腳手架、JSX-有解無憂

1 React概述

1.1 什么是react

React 是一個用于構建用戶界面的 JavaScript 庫，

用戶界面：HTML頁面（前端）

React 主要用來寫HTML頁面，或構建Web應用

如果從 MVC 的角度來看，React 僅僅是視圖層（V），也就是只負責視圖的渲染，而并非提供了

完整的 M 和 C 的功能，

React 起源于 Facebook 的內部專案，后又用來架設 Instagram 的網站，并于 2013 年 5 月開源

1.2 react特點

宣告式

你只需要描述 UI（HTML）看起來是什么樣，就跟寫HTML一樣

React 負責渲染 UI，并在資料變化時更新 UI

const jsx = <div className="app">
<h1>Hello React! 動態變化資料：{count}</h1>
</div>

基于組件
學習一次，隨處使用:可以開發web、移動端(React-native)、AR(React360)等等，

2 React基本使用

2.1 react的安裝

npm i react react-dom

react 包是核心，提供創建元素、組件等功能

react-dom 包提供 DOM 相關功能等

2.2 react的使用

第一步：引入依賴

<script src="https://www.cnblogs.com/helf/archive/2021/01/16/node_modules/react/umd/react.development.js"></script>
<script src="https://www.cnblogs.com/helf/archive/2021/01/16/node_modules/react-dom/umd/react-dom.development.js"></script>

第二步：創建react元素
第三步：渲染react元素到頁面中

<div id="root"></div>

<script>
    //創建react元素
const title = React.createElement('h1', null, 'Hello React');
    //渲染react元素
ReactDOM.render(title, document.getElementById('root'))
</script>

2.3 方法說明

React.createElement() 說明（知道）

// 回傳值：React元素
// 第一個引數：要創建的React元素名稱
// 第二個引數：該React元素的屬性
// 第三個及其以后的引數：該React元素的子節點
const el = React.createElement('h1', { title: '標題' }, 'Hello React')

ReactDOM.render()說明 (掌握)

// 第一個引數：要渲染的React元素
// 第二個引數：DOM物件，用于指定渲染到頁面中的位置
ReactDOM.render(el, document.getElementById('root'))

3 React腳手架的使用

3.1 腳手架意義

腳手架是開發現代Web 應用的必備，

充分利用 Webpack、Babel、ESLint 等工具輔助專案開發，

零配置，無需手動配置繁瑣的工具即可使用，

關注業務，而不是工具配置，

3.2 使用 React腳手架初始化專案

第一步：初始化專案

npx create-react-app my-app

第二步：啟動專案

npm start
或者 yarn start

3.3 npx命令介紹

npm v5.2.0 引入的一條命令
目的：提升包內提供的命令列工具的使用體驗
原來：先安裝腳手架包，再使用這個包中提供的命令
現在：無需安裝腳手架包，就可以直接使用這個包提供的命令

3.4 補充說明

推薦使用：npx create-react-app my-app

npm init react-app my-app
yarn create react-app my-app

yarn 是 Facebook 發布的包管理器，可以看做是 npm 的替代品，功能與 npm 相同
yarn 具有快速、可靠和安全的特點
初始化新專案：yarn init
安裝包： yarn add 包名稱
安裝專案依賴項： yarn
其他命令，請參考yarn檔案

3.5 在腳手架中使用react

第一步：匯入 react 和 react-dom 兩個包

import React from 'react'  
import ReactDOM from 'react-dom'

第二步：呼叫 React.createElement() 方法創建 react 元素，

第三步：呼叫 ReactDOM.render() 方法渲染 react 元素到頁面中，

4 jsx的基本使用

4.1 jsx簡介

JSX 是 JavaScript XML 的簡寫，表示在 JavaScript 代碼中寫 XML（HTML）格式的代碼，

優勢：宣告式語法更加直觀、與HTML結構相同，降低了學習成本、提升開發效率

JSX 是 React 的核心內容

4.2 使用步驟

第一步：使用 JSX 語法創建 react 元素

let h1 = <h1>hello React</h1>;

第二步：使用 ReactDOM.render() 方法渲染 react 元素到頁面中

ReactDOM.render(h1,document.getElementById("root"));

4.3 注意點

React元素的屬性名使用駝峰命名法
特殊屬性名：class -> className、for -> htmlFor、tabindex -> tabIndex ，
沒有子節點的React元素可以用 /> 結束，
推薦：使用小括號包裹 JSX ，從而避免 JS 中的自動插入分號陷阱，

// 使用小括號包裹 JSX 
const dv = (
	<div>Helo JSX</div>
)

問題：為什么腳手架中可以使用 JSX 語法？

JSX 不是標準的 ECMAScript 語法，它是 ECMAScript 的語法擴展
需要使用 babel 編譯處理后，才能在瀏覽器環境中使用
create-react-app 腳手架中已經默認有該配置，無需手動配置
編譯 JSX 語法的包為：@babel/preset-react

5 jsx使用js運算式

5.1 嵌入運算式

資料存盤在JS中

語法：{js運算式}

注意：語法中是單大括號，不是雙大括號

const name = 'Jack'
const dv = (
<div>你好，我叫：{name}</div>
)

5.2 注意點

單大括號中可以使用任意的 JavaScript 運算式

JSX 自身也是 JS 運算式

const h1 = <h1>我是JSX</h1> 
const dv = (
<div>嵌入運算式：{h1}</div>
)

注意：JS 中的物件是一個例外，一般只會出現在 style 屬性中

注意：不能在{}中出現陳述句（比如：if/for 等）

6 jsx條件渲染

場景：loading效果

條件渲染：根據條件渲染特定的 JSX 結構

可以使用if/else或三元運算子或邏輯與運算子來實作

import React from "react";
import ReactDOM from "react-dom";

let isLoading = true;

let load = () =>{
  if(isLoading){
    return <h2>加載中，，，</h2>
  }
  return <h2>加載成功</h2>
}

// let load = () => {
//   return isLoading ? <h2>加載中，，，</h2> : <h2>加載成功</h2>;
// };

let el = <div>{load()}</div>;

ReactDOM.render(el, document.getElementById("root"));

7 串列渲染

如果要渲染一組資料，應該使用陣列的 **map() **方法

注意：渲染串列時應該添加 key 屬性，key 屬性的值要保證唯一

原則：map() 遍歷誰，就給誰添加 key 屬性

注意：盡量避免使用索引號作為 key

import React from "react";
import ReactDOM from "react-dom";
//定義資料
const songs = [
  { id: 1, name: "癡心絕對" },
  { id: 2, name: "像我這樣的人" },
  { id: 3, name: "南山南" },
];
//生成react元素
let arr = songs.map(v=><p key={v.id}>{v.id+"---"+v.name}</p>);
let el = <div>{arr}</div>;
//渲染
ReactDOM.render(el, document.getElementById("root"));

8 jsx樣式處理

8.1 行內樣式

<h1 style={{ color: 'red', backgroundColor: 'skyblue' }}> JSX的樣式處理</h1>

注意：屬性名稱駝峰命名,并且屬性值要用引號包裹起來

8.2 類名

// 匯入樣式檔案
import './index.css'
//使用
<h1 className="title"> JSX的樣式處理</h1>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/249765.html

標籤：其他

上一篇：XSS-labs通關挑戰（xss challenge）

下一篇：用js實作列印九九乘法表