什么是React
- React是一個(gè)構(gòu)建用戶界面的JavaScript庫(kù)
- 用戶界面：Html界面（前端開(kāi)發(fā)）
- React主要用來(lái)編寫(xiě)HTML頁(yè)面或構(gòu)建Web應(yīng)用
- React起源于Facebook內(nèi)部項(xiàng)目迅栅，于13年5月開(kāi)源，并一直維護(hù)至今。
React的特點(diǎn)
- 聲明式
以聲明式編寫(xiě)UI跟寫(xiě)HTML一樣
React負(fù)責(zé)渲染UI乃戈，根據(jù)數(shù)據(jù)更新UI
- 組件化
組件表示頁(yè)面中的部分內(nèi)容靶衍，就像是一個(gè)積木
組合踩窖、復(fù)用多個(gè)組件就可以堆積木式的實(shí)現(xiàn)一個(gè)完整一個(gè)頁(yè)面
組件是React中最重要的知識(shí)
- 一次學(xué)習(xí)势就，隨處編寫(xiě)
使用React可以編寫(xiě)Web應(yīng)用
使用React可以編寫(xiě)原生App
......
基本使用
1.React安裝
安裝命令：npm i react react-dom
react是核心包杀饵，提供創(chuàng)建元素和組件能力
react-dom負(fù)責(zé)將元素和組件渲染到界面
- React使用
- 導(dǎo)入react和react-dom兩個(gè)js文件
<!-- 提供創(chuàng)建元素和組件能力的核心庫(kù) -->
<script src="../node_modules/react/umd/react.development.js"></script>
<!-- 將元素和組件能力渲染界面能力 -->
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
- 創(chuàng)建React元素并渲染React元素到頁(yè)面中
// React.createElement()參數(shù)說(shuō)明-了解就行
// 第一個(gè)參數(shù):創(chuàng)建React元素標(biāo)簽
// 第二個(gè)參數(shù):該React元素的屬性
// 第三個(gè)參數(shù):更改元素的子節(jié)點(diǎn)
const title = React.createElement('h1',{id:'title'},'hello react')
// ReactDOM.render()參數(shù)說(shuō)明-了解就行
// 第一個(gè)參數(shù):需要渲染的React元素
// 第二個(gè)參數(shù):掛載點(diǎn)
ReactDOM.render(title,document.getElementById('app'))
React JSX
什么是JSX
- 是一個(gè)JavaScript的語(yǔ)法擴(kuò)展底哥，用來(lái)創(chuàng)建一個(gè)React元素咙鞍，建議在React中使用JSX來(lái)替代React.createElement()
- JSX讓我們更加適應(yīng)HTML的編寫(xiě)習(xí)慣
- JSX可以在開(kāi)發(fā)React應(yīng)用時(shí)顯示更多有用的錯(cuò)誤提示和警告信息，提高開(kāi)發(fā)體驗(yàn)
JSX基本使用
1. JSX解析器安裝
- 安裝命令：
npm i babel-standalone -
babel-standalone是JSX語(yǔ)法的解析器趾徽，通過(guò)它可以將JSX轉(zhuǎn)換成瀏覽器能夠執(zhí)行的代碼
2. JSX創(chuàng)建一個(gè)H1元素渲染到頁(yè)面上
<!-- 導(dǎo)入react续滋、react-dom、babel 三個(gè)js文件 -->
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="../node_modules/babel-standalone/babel.min.js"></script>
<div id="app"></div>
<script type="text/babel">
// 創(chuàng)建react元素
const H1 = <h1 id='title'>Hello React</h1>
// 渲染React元素到頁(yè)面中
ReactDOM.render(H1,document.getElementById('app'))
</script>
React腳手架搭建
1. 腳手架的意義
- 腳手架是開(kāi)發(fā)現(xiàn)代Web的必備工具
- 充分利用Webpack孵奶、Babel等工具輔助開(kāi)發(fā)
- 關(guān)注業(yè)務(wù)疲酌，無(wú)需關(guān)注繁瑣的工具配置
- Vue中的Vue-cli,React中的create-react-app都是腳手架
2. 使用腳手架初始化React項(xiàng)目（create-react-app）
- 初始化項(xiàng)目命令：
npx create-react-app my-app - 啟動(dòng)項(xiàng)目步驟：
1、cd my-app
2了袁、npm run start 或者 yarn start 啟動(dòng)項(xiàng)目
3. npx 命令介紹
- npm v5.2.0 引入的一條命令
- 目的：提升命令行工具的使用體驗(yàn)
- 原來(lái)：先安裝腳手架全局包朗恳，再使用它初始化項(xiàng)目
- 現(xiàn)在：無(wú)需安裝腳手架全局包，就可以直接使用它初始化項(xiàng)目
4. 組件導(dǎo)出導(dǎo)入并使用
- 創(chuàng)建src/MyFirstReact.js
- 編寫(xiě)組件代碼载绿，創(chuàng)建想要的界面元素
- 導(dǎo)出組件（Tips：組件類型必須是class或者function類型粥诫，并且首字母必須大寫(xiě)）
function MyFirstReact() {
// 編寫(xiě)組件代碼，創(chuàng)建想要的界面
return <div>第一個(gè)react組件</div>;
}
// 導(dǎo)出組件
export default MyFirstReact
- 在src/App.js中導(dǎo)入并使用組件
import MyFirstReact from './MyFirstReact'
function App() {
return (
<div>
{/* 使用MyFirstReact組件 */}
<MyFirstReact></MyFirstReact>
</div>
);
}
