React起源和特點及其使用方法(手動安裝和腳手架工具使用)
1.react的起源及其思想(簡單概述)
- facebook內部的一個xhp項目，在頁面上提交一個請求，由後臺計算好數據以及新頁面的結構返回給前端。
- 這種方式沒有異步ajax更新頁面，新頁面完全從後臺返回，這樣頁面的狀態就清晰，但是問題是沒有異步更新，全部是後臺返回這種方案用戶體驗非常不好
- 所以是否能在前端有這麼一個框架，幫我們去計算到底應該更新哪些dom節點，所以產生了react項目，產生虛擬dom的思路，在數據更新前後比對更新前後的虛擬dom，找到其中變化的節點，將這些節點更新到真實的dom中。
- 在react中，視圖就是數據的一種映射 ui(視圖) = React(state數據)，視圖是react組件根據數據渲染而成，所以在組件（渲染規則）沒有問題的情況下，如果視圖出現錯誤，那麼就是數據出了錯誤。這樣問題的追逐變得相當清晰。
- 所以函數組件就是這種思路的最純粹的體現。但是計算機中很多狀態都需要變量去描述，所以使用有狀態組件來做這部分事情
- 在實際的實踐中，劃分組件：smart component (智能組件/狀態組件) + dumb component （笨拙組件/渲染組件）
2.react的特點
1.聲明式:只需要描述UI看起來是什麼樣式,就跟寫HTML一樣,React負責渲染UI
2.基於組件:組件時React最重要的內容,組件表示頁面中的部分內容
3.學習一次隨處使用,使用React可以開發Web應用,使用React可以開發移動端,卡已開發VR應用
3.React基本使用
3.1.react安裝
3.11.手動安裝依賴包啓動react項目
-
初始化一個項目 在新建的項目文件夾下執行
npm init -y生成項目依賴包管理文件package.json -
安裝react react-dom 在項目根目錄下執行
npm i react react-dom -
在項目根目錄下新建index.html文件
<body> <div id="root"></div> <!-- 1.引入js文件 --> <script src="./node_modules/react/umd/react.development.js"></script> <script src="./node_modules/react-dom/umd/react-dom.development.js"></script> <script> /* 2.創建react元素 參數1.元素名稱 參數2.元素屬性 第三個及其以後的參數:元素的子節點 */ const title = React.createElement('h1',null,'Hello,React') //3.渲染react元素 //參數1.要渲染的react元素 //參數2.掛載點 ReactDOM.render(title,document.getElementById('root')) </script> </body>
3.12.使用腳手架工具生成react項目
1.腳手架的意義
1.腳手架是開發現在Web應用的必備;
2.充分利用Webpack,Babel,ESLint等工具輔助項目開發;
3.零配置,無需手動配置繁瑣的工具即可使用;
4.關注業務,而不是工具配置;
2.使用react初始化項目
- 初始化項目，命令：npx create-react-app 項目名稱
- 啓動項目，在項目根目錄執行命令：npm start
3.簡單使用
//導入react和react-dom兩個包
import React from 'react'
import ReactDOM from 'react-dom'
//創建元素
let title = React.createElement('h1',null,'我是標題')
//渲染到頁面
ReactDOM.render(title,document.getElementById('root'))