什么是React

• React是一個(gè)構(gòu)建用戶界面的JavaScript庫
• 用戶界面：Html界面（前端開發(fā)）
• React主要用來編寫HTML頁面或構(gòu)建Web應(yīng)用
• React起源于Facebook內(nèi)部項(xiàng)目，于13年5月開源，并一直維護(hù)至今。

React的特點(diǎn)

• 聲明式

以聲明式編寫UI跟寫HTML一樣
React負(fù)責(zé)渲染UI，根據(jù)數(shù)據(jù)更新UI

• 組件化

組件表示頁面中的部分內(nèi)容，就像是一個(gè)積木
組合、復(fù)用多個(gè)組件就可以堆積木式的實(shí)現(xiàn)一個(gè)完整一個(gè)頁面
組件是React中最重要的知識(shí)

• 一次學(xué)習(xí)，隨處編寫

使用React可以編寫Web應(yīng)用
使用React可以編寫原生App
......

基本使用

1.React安裝
安裝命令：npm i react react-dom
react是核心包，提供創(chuàng)建元素和組件能力
react-dom負(fù)責(zé)將元素和組件渲染到界面

2. React使用

• 導(dǎo)入react和react-dom兩個(gè)js文件

<!-- 提供創(chuàng)建元素和組件能力的核心庫 -->
<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元素到頁面中

    // React.createElement()參數(shù)說明-了解就行
    // 第一個(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ù)說明-了解就行
    // 第一個(gè)參數(shù):需要渲染的React元素
    // 第二個(gè)參數(shù):掛載點(diǎn)
    ReactDOM.render(title,document.getElementById('app'))

React JSX

什么是JSX

• 是一個(gè)JavaScript的語法擴(kuò)展，用來創(chuàng)建一個(gè)React元素，建議在React中使用JSX來替代React.createElement()
• JSX讓我們更加適應(yīng)HTML的編寫習(xí)慣
• JSX可以在開發(fā)React應(yīng)用時(shí)顯示更多有用的錯(cuò)誤提示和警告信息，提高開發(fā)體驗(yàn)

JSX基本使用

1. JSX解析器安裝

• 安裝命令：npm i babel-standalone
• babel-standalone是JSX語法的解析器，通過它可以將JSX轉(zhuǎn)換成瀏覽器能夠執(zhí)行的代碼

2. JSX創(chuàng)建一個(gè)H1元素渲染到頁面上

<!-- 導(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元素到頁面中
  ReactDOM.render(H1,document.getElementById('app'))
</script>

React腳手架搭建

1. 腳手架的意義

• 腳手架是開發(fā)現(xiàn)代Web的必備工具
• 充分利用Webpack、Babel等工具輔助開發(fā)
• 關(guān)注業(yè)務(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)
• 原來：先安裝腳手架全局包，再使用它初始化項(xiàng)目
• 現(xiàn)在：無需安裝腳手架全局包，就可以直接使用它初始化項(xiàng)目

• 創(chuàng)建src/MyFirstReact.js
• 編寫組件代碼，創(chuàng)建想要的界面元素
• 導(dǎo)出組件（Tips：組件類型必須是class或者function類型，并且首字母必須大寫）

function MyFirstReact() {
    // 編寫組件代碼，創(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>
  );
}