React

概述 :

• React 是一個用于 構(gòu)建用戶界面 的 JavaScript 庫
• 因?yàn)榭蚣苁怯幸徽捉鉀Q方案的，React就是純粹寫UI組件的 沒有什么異步處理機(jī)制、模塊化、表單驗(yàn)證這些。React和react-router, react-redux結(jié)合起來才叫框架，而React本身只是充當(dāng)一個前端渲染的庫而已
• 如果從 MVC 的角度來看, React 僅僅是視圖層( V ), 也就是只負(fù)責(zé)視圖的渲染, 而非并提供了完整的 M 和 C 的功能
• React 起源于 Fackbook 的內(nèi)部項(xiàng)目, 后又用來架設(shè) Ins 的網(wǎng)站, 并與 2013年 5 月開源

特點(diǎn)

• 聲明式

  • 你只需要描述UI (HTML) 看起來是什么樣
  • React 負(fù)責(zé)渲染UI , 并在數(shù)據(jù)變化時更新 UI
    • <h1>Hello React! 動態(tài)變化數(shù)據(jù)：{count}</h1>
    • <Child></Child>

• 基于組件

  • 組件是 React 最重要的內(nèi)容
  • 組件表示頁面中的部分內(nèi)容
  • 組合、復(fù)用多個組件，可以實(shí)現(xiàn)完整的頁面功能

• 學(xué)習(xí)一次, 隨處使用

  • 使用 React 可以開發(fā) Web 應(yīng)用
  • 使用 React 可以開發(fā)移動端混合應(yīng)用（react-native）
  • 使用 React 可以開發(fā) VR（虛擬現(xiàn)實(shí)）應(yīng)用（react 360）
  我們現(xiàn)在做的是web頁面 app應(yīng)用 => 原生app + 混合app - 原生app => ios(蘋果)/Android(安卓) - 混合app => 加一個殼子(開發(fā)一套前端代碼生成的app )=> ios/Android殼子(前端代碼) ios/Android 開發(fā)的 => 原生應(yīng)用app ios(web頁面) + Android(web頁面) ==> 混合app + 借助 react-native

React 的基本使用

包管理器/工具 npm cnpm yarn

npm 最火的 + 淘寶鏡像

cnpm 國內(nèi) (demo => ok 項(xiàng)目=> cnpm 不要弄)

yarn : Facebook

? 使用前必須安裝 yarn 的運(yùn)行模塊 npm i yarn -g

• yarn add xxx
• yarn remove xxx
• yarn --version

React 的安裝

• 命令 : yarn add react react-dom
• react 包 : 是核心包, 提供 創(chuàng)建元素、組件等功能
• react-dom包 : 渲染DOM功能

React 的基本使用

需求 :

我是h1

• 1-引入 react 和 react-dom 兩個js 文件

<script src="./node_modules/react/umd/react.development.js"></script> <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

• 2-創(chuàng)建 React 元素

// 參數(shù)1 : 元素名稱 // 參數(shù)2 : 屬性 (對象) // 參數(shù)3+ : 內(nèi)容 const h1 = React.createElement('h1', {title: '啊哈哈' } , '我是h1' )

• 3-渲染 React 元素

//3.1 準(zhǔn)備一個容器<div id="root"></div>// 3.2 開始渲染 // 參數(shù)1 : 需要渲染的react元素/react組件 // 參數(shù)2 : 指定頁面中的DOM容器 ReactDOM.render(h1, document.getElementById('root'))

createElement方法說明

// 參數(shù)1 : 元素名稱 , 表示要創(chuàng)建的標(biāo)簽名稱 (html標(biāo)簽) // 參數(shù)2 : 屬性 (對象), 如果有就傳對象,沒有就傳null // 參數(shù)3+ : 子節(jié)點(diǎn) // 1-文本節(jié)點(diǎn) 字符串 // 2-元素節(jié)點(diǎn) React.createElement() 創(chuàng)建) const h1 = React.createElement('div',null,// spanReact.createElement('span', null, '我是span'),React.createElement('p', null, '我是p') )

屬性的特殊要求

• 不推薦使用class, 而推薦使用 className :
  • class => className => 因?yàn)閏lass關(guān)鍵字用在創(chuàng)建組件類用了
• 不推薦使用for, 而推薦使用 htmlFor
  • for => htmlFor ==> 遍歷使用了
• 屬性推薦使用 駝峰命名

// for 在 label 上的使用 <label for="app">姓名</label> <input id="app" type="text" />

小練習(xí) :

<ul id="list" class='red'><li>蘋果</li><li>香蕉</li><li>橘子</li> </ul>

• 總結(jié) : 使用createElement創(chuàng)建react元素非常的麻煩，推薦您后面使用 JSX
• 因?yàn)?JSX 需要 通過 babel 轉(zhuǎn)化,所以我們使用腳手架(集成babel插件)來初始化項(xiàng)目完成react 的開發(fā)工作

React 腳手架

使用腳手架的意義

• 腳手架是開發(fā) 現(xiàn)代Web 應(yīng)用的必備。
• 充分利用 Webpack、Babel、ESLint 等工具輔助項(xiàng)目開發(fā)。
• 零配置，無需手動配置繁瑣的工具即可使用。
• 關(guān)注業(yè)務(wù)，而不是工具配置。

安裝腳手架-初始化項(xiàng)目-01-npm

• 安裝腳手架 : npm i create-react-app -g
  • 查看版本號 : create-react-app -V
• 初始化項(xiàng)目 : create-react-app demo1

安裝腳手架-初始化項(xiàng)目- 02 - npx (官網(wǎng)推薦)

• 命令 : npx create-react-app demo2

  • 格式 : npx 腳手架 項(xiàng)目名稱

  • [官網(wǎng)] : npx 不是拼寫錯誤 —— 它是npm 5.2+ 附帶的 package 運(yùn)行工具。

• npx : 簡化了工具包中命令的使用方法

  • 原來：1 先全局安裝腳手架的包 2 再使用腳手架中提供的命令，來初始化項(xiàng)目
  • 現(xiàn)在：直接使用腳手架來初始化項(xiàng)目即可

• npx 內(nèi)部執(zhí)行的操作：

  • 1 先臨時安裝腳手架 : npm i create-react-app
  • 2 使用腳手架的命令初始化項(xiàng)目 : create-creat-app demo
  • 3 使用完,刪除臨時安裝的腳手架 : npm un create-react-app

我們推薦使用這一種, 因?yàn)橐院髮?shí)際上開發(fā),不可能每天都要初始化一個項(xiàng)目, 而是從項(xiàng)目開始到結(jié)束只會初始化一個項(xiàng)目而已

• 運(yùn)行 : yarn start
• 補(bǔ)充說明 :以后react和yarn都是 facebook 出來的,所以以后可以多使用yarn

React 腳手架中使用 react

• 清理結(jié)構(gòu) :

  • src/ : 內(nèi)部文件全部 刪除 , 重新創(chuàng)建一個 index.js 入口文件
  • public/ : 內(nèi)部 文件全部刪除, 重新創(chuàng)建一個 index.html 入口頁面 ,
    • 添加 容器

• 簡單演示 :

// 1 導(dǎo)入 react 和 reac-dom import React from 'react' import ReactDOM from 'react-dom'// 2 創(chuàng)建 react 元素 const h1 = React.createElement('h1', null, 'Hello React CLI')// 3 渲染 react 元素 ReactDOM.render(h1, document.getElementById('root'))

• 回憶小練習(xí) :

const ul = React.createElement('ul', {id : 'list',className : 'red' }, React.createElement('li',null,'蘋果'), React.createElement('li',null,'香蕉'), React.createElement('li',null,'橘子') )

• JSX 改造 小練習(xí)

const ul = <ul id="list" className='red'><li>蘋果</li><li>香蕉</li><li>橘子</li></ul>

JSX

####JSX 的介紹

• JSX 是 JavaScript XML 的簡寫, 是一個 JavaScript 的語法擴(kuò)展。表示在 JS 中寫 XML（HTML）格式的代碼

  • xml :
  • html :
  • 注意 , 它既不是 xml, 也不是html, 它就是 JSX

• 為什么要使用 JSX ？ : 爽

  • 1 簡潔
  • 2 直觀
  • 3 對開發(fā)人員友好
  • 4 幾乎沒有增加額外的學(xué)習(xí)成本

JSX 的基本使用和注意點(diǎn)

• 使用

// 使用 JSX 創(chuàng)建 react 元素 const h1 = <h1 className="cls">Hello JSX!</h1>// 渲染 react 元素 ReactDOM.render(h1, document.getElementById('root'))

• 注意點(diǎn)
  • 注意點(diǎn)1 : JSX 也只能由一個根節(jié)點(diǎn) 可以使用 div 或者 </> 包裹起來. (空標(biāo)簽)
  • 注意點(diǎn)2 : 如果 結(jié)構(gòu)比較復(fù)雜, 建議使用 () 把代碼塊包裹起來
  • 注意點(diǎn)3 : JSX 其實(shí)底層還是轉(zhuǎn)化成了 React.createElement() 運(yùn)行的 , babel 中文網(wǎng)

const h1 =(<div><div className='cls'> 我是div</div><div className='cls'> 我是div</div></div>)

在 JSX 中嵌入表達(dá)式

• 語法 : <div>{ js 表達(dá)式 }</div>

  • {} 中可以使用 任意j表達(dá)式

• 可以使用表達(dá)式

  • 讀取變量 : <div > { name }</div>
  • 運(yùn)算 : <div> {1+2}</div>
  • 三元 : <div > { true ? '真' : '假' }</div>
  • 函數(shù) : <div > { [1,4,7].join('-') }</div> `

• 不能使用

  • 不能使用 語句 <div > { if(){} }</div> 報錯

• 注意點(diǎn) : 屬性內(nèi)可以使用 {}

  • <div title={ name } ></div>

總結(jié)

以上是生活随笔為你收集整理的React基础学习（第一天）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。