Rract是啥？

React 是用于構(gòu)建用戶界面的 JavaScript 庫(kù)

構(gòu)建用戶界面. User Interface，對(duì)咱們前端來說，簡(jiǎn)單理解為：HTML 頁(yè)面

javscrtipt庫(kù)。不是框架，是庫(kù)， react 全家桶才是框架

react 全家桶：

react: 核心庫(kù)react-dom: dom操作react-router：路由,redux：集中狀態(tài)管理

背景

Rract最牛逼！全球使用最多

特點(diǎn)

聲明式
用類似于html的語(yǔ)法來定義頁(yè)面。react中通過數(shù)據(jù)驅(qū)動(dòng)視圖的變化，當(dāng)數(shù)據(jù)發(fā)生改變r(jià)eact能夠高效地更新并渲染DOM。

const list = [
  { id: 1, name: '前端', salary: 100000 },
  { id: 2, name: '后端', salary: 50 }
]

const title = (
  <ul>
    {list.map((item) => (
      <li key={item.id}>
        <h3>班級(jí){item.name}</h3>
        <p>工資{item.salary}</p>
      </li>
    ))}
  </ul>
)

組件化（雖然每個(gè)框架都有）
組件是react中最重要的內(nèi)容
組件用于表示頁(yè)面中的部分內(nèi)容
組合、復(fù)用多個(gè)組件，就可以實(shí)現(xiàn)完整的頁(yè)面功能

學(xué)習(xí)一次，隨處使用
使用react/rect-dom可以開發(fā)Web應(yīng)用
使用react/react-native可以開發(fā)移動(dòng)端原生應(yīng)用（react-native）
使用react可以開發(fā)VR（虛擬現(xiàn)實(shí)）應(yīng)用

 React腳手架

從零開始 創(chuàng)建一個(gè)React項(xiàng)目

先全局安裝腳手架工具包

命令：npm i -g create-react-app

用腳手架工具來創(chuàng)建項(xiàng)目

命令：create-react-app 項(xiàng)目名

執(zhí)行完畢后，我們會(huì)得到這樣一個(gè)文件夾

和Vue框架一樣
1.src目錄是我們寫代碼進(jìn)行項(xiàng)目開發(fā)的目錄
2.index.js是入口文件

在package.json中 有這么個(gè)命令

可以輸入

mpn run start
yarn start

運(yùn)行項(xiàng)目

接下來我們刪除src下的所有文件 新建一個(gè) index.js
里面引入react 和 react-dom

// 導(dǎo)入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'

中間寫我們的結(jié)構(gòu)

// 創(chuàng)建元素
const title = React.createElement('h1', {}, 'hello react（createElement寫的）')

但是createElement的效率太低了，我們可以使用jsx

JSX是什么

JSX：是 JavaScript XML的縮寫。

• 在 JS 代碼中書寫 XML 結(jié)構(gòu)
• 注意：JSX 不是標(biāo)準(zhǔn)的 JS 語(yǔ)法，是 JS 的語(yǔ)法擴(kuò)展。腳手架中內(nèi)置了 @babel/plugin-transform-react-jsx 包，用來解析該語(yǔ)法。
• React用它來創(chuàng)建 UI（HTML）結(jié)構(gòu)

理解：我們之前用html寫頁(yè)面，現(xiàn)在是用jsx來寫頁(yè)面

const title= <h1>HELLO REACT(jsx寫的)</h1>

最終我們的代碼會(huì)在public/index.html 中渲染， 所以我們?cè)诘撞刻砑舆@么一行代碼，渲染到頁(yè)面上 ，webpack會(huì)實(shí)時(shí)自動(dòng)打包，并把代碼嵌入到public/index.html文件中，并執(zhí)行。

// 渲染react元素
ReactDOM.render(title, document.getElementById('root'))

通過上面的代碼 最終我們的頁(yè)面都在 public/index.html里的 id=root 的div中渲染

這樣我們就寫出了自己的第一個(gè)React頁(yè)面

到此這篇關(guān)于如何創(chuàng)建自己的第一個(gè)React 頁(yè)面的文章就介紹到這了,更多相關(guān)React 創(chuàng)建第一個(gè)頁(yè)面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！