React

概述 :

• React 是一個用于 構建用戶界面 的 JavaScript 庫
• 因為框架是有一整套解決方案的，React就是純粹寫UI組件的 沒有什么異步處理機制、模塊化、表單驗證這些。React和react-router, react-redux結合起來才叫框架，而React本身只是充當一個前端渲染的庫而已
• 如果從 MVC 的角度來看, React 僅僅是視圖層( V ), 也就是只負責視圖的渲染, 而非并提供了完整的 M 和 C 的功能
• React 起源于 Fackbook 的內部項目, 后又用來架設 Ins 的網站, 并與 2013年 5 月開源

特點

• 聲明式

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

• 基于組件

  • 組件是 React 最重要的內容
  • 組件表示頁面中的部分內容
  • 組合、復用多個組件，可以實現完整的頁面功能

• 學習一次, 隨處使用

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

React 的基本使用

包管理器/工具 npm cnpm yarn

npm 最火的 + 淘寶鏡像

cnpm 國內 (demo => ok 項目=> cnpm 不要弄)

yarn : Facebook

? 使用前必須安裝 yarn 的運行模塊 npm i yarn -g

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

React 的安裝

• 命令 : yarn add react react-dom
• react 包 : 是核心包, 提供 創建元素、組件等功能
• 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-創建 React 元素

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

• 3-渲染 React 元素

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

createElement方法說明

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

屬性的特殊要求

• 不推薦使用class, 而推薦使用 className :
  • class => className => 因為class關鍵字用在創建組件類用了
• 不推薦使用for, 而推薦使用 htmlFor
  • for => htmlFor ==> 遍歷使用了
• 屬性推薦使用 駝峰命名

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

小練習 :

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

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

React 腳手架

使用腳手架的意義

• 腳手架是開發 現代Web 應用的必備。
• 充分利用 Webpack、Babel、ESLint 等工具輔助項目開發。
• 零配置，無需手動配置繁瑣的工具即可使用。
• 關注業務，而不是工具配置。

安裝腳手架-初始化項目-01-npm

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

安裝腳手架-初始化項目- 02 - npx (官網推薦)

• 命令 : npx create-react-app demo2

  • 格式 : npx 腳手架 項目名稱

  • [官網] : npx 不是拼寫錯誤 —— 它是npm 5.2+ 附帶的 package 運行工具。

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

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

• npx 內部執行的操作：

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

我們推薦使用這一種, 因為以后實際上開發,不可能每天都要初始化一個項目, 而是從項目開始到結束只會初始化一個項目而已

• 運行 : yarn start
• 補充說明 :以后react和yarn都是 facebook 出來的,所以以后可以多使用yarn

React 腳手架中使用 react

• 清理結構 :

  • src/ : 內部文件全部 刪除 , 重新創建一個 index.js 入口文件
  • public/ : 內部 文件全部刪除, 重新創建一個 index.html 入口頁面 ,
    • 添加 容器

• 簡單演示 :

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

• 回憶小練習 :

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

• JSX 改造 小練習

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

JSX

####JSX 的介紹

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

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

• 為什么要使用 JSX ？ : 爽

  • 1 簡潔
  • 2 直觀
  • 3 對開發人員友好
  • 4 幾乎沒有增加額外的學習成本

JSX 的基本使用和注意點

• 使用

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

• 注意點
  • 注意點1 : JSX 也只能由一個根節點 可以使用 div 或者 </> 包裹起來. (空標簽)
  • 注意點2 : 如果 結構比較復雜, 建議使用 () 把代碼塊包裹起來
  • 注意點3 : JSX 其實底層還是轉化成了 React.createElement() 運行的 , babel 中文網

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

在 JSX 中嵌入表達式

• 語法 : <div>{ js 表達式 }</div>

  • {} 中可以使用 任意j表達式

• 可以使用表達式

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

• 不能使用

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

• 注意點 : 屬性內可以使用 {}

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。