1、安裝包(js庫)

• yarn add babel-standalone react react-dom
  
  

  示例圖.png

2、通過依賴包導入js庫文件

<script src="../node_modules/babel-standalone/babel.js"></script>
<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>

3、開始react的基本語法的使用

- 1.數據的定義

    /* 數據定義 */const data ={state:'關閉'}/* 數據的使用 */{data.state}

- 2.元素節點的樣式添加

方法一：在內部使用style去添加

    const ele = (<div className="demo" data-id="自定義id屬性" title="標題" style={{color:'red',fontSize:'24px'}}><p>tab欄標簽是否打開{data.state}</p></div>)ReactDOM.render(ele,document.querySelector('#root'))

示例圖.png

<script type="text/babel">/* 數據定義 */const data ={state:'關閉'}/* 樣式的定義 */const pStyle = {color:'gold',fontSize: '28px',border:'1px solid #ccc'}const ele = (<div className="demo" data-id="自定義id屬性" title="標題" style={pStyle}><p>tab欄標簽是否打開<span style={{color:'blue'}}>{data.state}</span></p></div>)ReactDOM.render(ele,document.querySelector('#root'))
</script>

示例圖.png

- 3.代碼的注釋

在react中注釋代碼時，不能直接使用//去單行注釋，需要先使用{ }包裹起來，再去單行注釋或者多行注釋

    const ele = (<div className="demo" data-id="自定義id屬性" title="標題" style={pStyle}><p>tab欄標簽是否打開{/* <span style={{color: 'blue'}}>{data.state}</span> */}</p></div>)ReactDOM.render(ele,document.querySelector('#root'))

上面是將span標簽注釋了，檢查元素：

示例圖.png

可以看到只有一個p標簽，并沒有span標簽了。

- 4.不同數據類型使用插值去渲染

字符串

    /* 字符串 */const str = 'xiaochen';/* 插入到標簽內 */const ele = (<div className="demo">{/*插入字符串*/}<h5 style={{color:'orange'}}>{str}</h5></div>)ReactDOM.render(ele,document.querySelector('#root'))

數組

    /* 數組 */const arr = [1,2,3,4,5];/* 插入到標簽內 */const ele = (<div className="demo">{/* 插入數組 */}<h5 style={{color:'red'}}>{arr}</h5></div>)ReactDOM.render(ele,document.querySelector('#root'))

注意：{ } 插值不能插入對象！

    /* 對象 */const obj = {name:'xiao',age:10}/* 插入到標簽內 */const ele = (<div className="demo">{/* 插入對象 */}<h5 style={{color:'green'}}>{obj}</h5></div>)ReactDOM.render(ele,document.querySelector('#root'))

注意！在使用{ }時，不可以使用這個插值去渲染對象數據，會出現報錯

image.png

4、遍歷數據列表

使用基本的插值去遍歷，注意：在react中，{ }表達式是必須要有返回值的，否則會出現錯誤。

<script type="text/babel">
/* 新聞列表數據 */
const news = [{id:'1001',title:'俄戰斗機器人首次展示自動射擊：靶標上打出“烏拉”',content:'報道稱，該基金會發布視頻，展示在操作員控制武器的條件下發現目標和射擊，對靜態和移動目標進行自動射擊，還展示了在靶場內自動機動行駛。在視頻結尾，這款戰斗機器人利用自動武器連續射擊，在靶標上打出了“烏拉”一詞。'},{id:'1002',title:'美媒：海軍建設用力過猛 上個十年初造艦存嚴重問題',content:'美海軍的“瀕海戰斗艦”出現了推進故障；由于彈藥昂貴，朱姆沃爾特級隱身驅逐艦上的艦炮“無彈可用”；最新福特級航母的電磁彈射系統存在問題。'},{id:'1003',title:'加拿大軍官號召士兵不要接種新冠疫苗被指控叛亂',content:'據“今日俄羅斯”25日報道，拉迪斯拉斯·肯德雷西是安大略省預備役軍官，他曾在2020年12月5日舉行反封鎖集會，并在集會上公開發表演講，號召人們不要接種疫苗。'}
]/* 創建dom元素節點*/const ele = (<ul>{news.map((item)=>{return <li key={item.id}><h5>{item.title}</h5><span>{item.content}</span></li>})}</ul>)ReactDOM.render(ele,document.querySelector('#root'))
</script>

渲染展示效果.png