前言：

前端現行主流的JS庫當然是React框架，它在當下受到越來越多的開發者和專案小組的喜愛，我們可以使用它高效的開發出一系列前端的專案，還有基于react的react-native用來開發原生應用，如果我們想學習react-native之前必須要學習react的內容，接下來的時間我們將學習react框架的基礎內容，

一、認識

當我們接觸一個新的知識，我們需要了解三個問題：

$\bullet$ 它是什么？

$\bullet$ 我們可以用它干啥？

$\bullet$ 它有什么特點？

react是一個用于構建用戶界面的JavaScript庫，主要用于構建UI，很多人認為React是MVC中的V（視圖）我們可以使用React高效的開發出一個前端專案，還可以使用Node進行服務器渲染，或使用react-native開發原生移動應用，

react具有以下特點：

$\bullet$ 宣告式設計

$\bullet$ 組件化：組件化設計，更易復用

$\bullet$ 高效：React通過對Dom的模擬，最大限度的減少與Dom的互動

$\bullet$ 靈活：可以與已知的框架或庫很好的配合

$\bullet$ JSX：是js語法的擴展，

$\bullet$ 單向回應資料流：React實作了單向回應的資料流，從而減少了重復代碼，這也是解釋了它為什么比傳統資料系結更簡單，

初步了解了React之后，我們現在通過實體進行慢慢了解，

二、準備作業

首先我們來創建一個react框架：

首先我們打開vscode，打開你學習的一個檔案夾，進入vscode的終端模式，就是命令列，然后輸入下面代碼，

你需要在你的機器上安裝 Node.js,可以再官網下載安裝：https://nodejs.org/en/，然后執行：

npx create-react-app my-app   my-app是你的專案名字，可以自己定義
cd my-app            進入到你的專案中
npm start            啟動專案

Create React App 不會處理后端邏輯或操縱資料庫；它只是創建一個前端構建流水線（build pipeline），所以你可以使用它來配合任何你想使用的后端，

如果你成功了，vs的終端將會出現下面這個界面，這里如果你有package管理器yarn就會出現yarn start、yarn build、yarn test、yarn eject，如果你沒有將會出現npm start、npm build、npm test、npm eject???????，其實效果都一樣，只不過yarn會更快一點，相關安裝可以參考官方檔案，

來看看我們安裝完的界面：

我們來做個小改動，然后運行看效果，運行命令：yarn start 或者 npm start，注意運行之前要進入你創建的hello-react目錄下哦，

現在我們將框架洗掉到我們能接受最簡單的框架，然后不用JSX語法的方式來創建一個簡單的react界面：

React 中提供了 React.createElement() 方法來創建一個 react 元素，然后通過 react-dom 提供的 render 方法將元素渲染到頁面，

注意引數‘root’，這個是你在index.html中定義的，可以改，一般情況不改變，

運行專案，應該可以看到成功的效果了

三、react的JSX語法

如果我們直接使用前面原生的方式取生成react元素，對于簡單的嵌套完全滿足，但是當我們的專案十分復雜，這種方式就難以讓我們開發者進行開發和維護，

于是一種JSX語法出現了，它是JavaScript的語法擴展，建議在react中配合使用JSX，它可以很好的描述UI應該呈現出它應有互動的本質形式，

實際上，JSX 僅僅只是 React.createElement() 函式的語法糖,也就是說，我們所寫的 JSX 最終也會被 React 轉義為 React.createElement() 的方式，

// 創建react元素
//使用JSX語法來創建react元素
//注意點：
//    1、在JSX中可以直接使用JS代碼，語法：{}，只有一個花括號
//    2、在JSX的花括號中，可以出現：任意的js運算式，但是不能使用陳述句（for、if、switch-case）
//    3、在遍歷元素的時候，需要為每一個兄弟元素指定key的屬性
//    4、JSX創建的元素中，屬性也可以通過{}語法，比如：key={index}
//    5、JSX語法中的注釋寫法：{/*注釋內容*/}，就是注釋外面加上一層大括號
let tadpole ={
  name:'tadpole',
  age:18
}
let arr = [1,2,3,4]
const dv = (
  <div title='Hello react'>
    <p>Hello,React! JSX! 我叫{tadpole.name},今年{tadpole.age}歲了</p>
    <p>{arr.join('-')}</p>
    <p>
      {
        arr.map( (res, index) => {
          return(
            <span key={ index }>{ res }</span>
          )
        })
      }</p>
  </div>
)

ReactDOM.render( dv, document.getElementById('root'));

結果如下：

重要記住：
1、在JSX中可以直接使用JS代碼，語法：{}，只有一個花括號
2、在JSX的花括號中，可以出現：任意的js運算式，但是不能使用陳述句（for、if、switch-case）
3、在遍歷元素的時候，需要為每一個兄弟元素指定key的屬性
4、JSX創建的元素中，屬性也可以通過{}語法，比如：key={index}
5、JSX語法中的注釋寫法：{/*注釋內容*/}，就是注釋外面加上一層大括號

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/294728.html

標籤：其他

上一篇：VenoBox jQuery插件使用教程

下一篇：JavaScript轉碼和解碼知識

前端框架react----初識react+JSX語法

前言：

一、認識

二、準備作業

三、react的JSX語法