React 入門(mén)第二步：搞懂 JSX 語(yǔ)法

import React from 'react'import ReactDom from 'react-dom'
// 看上去是 HTML，但是實(shí)際是JSX const title = <h1>Hello React</h1>// 調(diào)用 ReactDom.render方法，傳入 jsx和節(jié)點(diǎn)對(duì)象ReactDom.render(title,document.getElementById('root'))

import React from 'react'import ReactDom from 'react-dom'
// 使用括號(hào)包裹jsx ，可以換行，代碼更加整潔const title = (  <div>   <h1>Hello React</h1>    <span>嘿嘿嘿</span>  </div>)
ReactDom.render(title,document.getElementById('root'))

文件--首選項(xiàng)--設(shè)置--用戶設(shè)置
在用戶設(shè)置添加"emmet.includeLanguages": {         "javascript":"javascriptreact"}

import React from 'react';import ReactDOM from 'react-dom';
const name= '西嶺老濕'
function sayHello () {  return '大家好'}
const obj = {  name: '劉備',  age: 100}
const flag = true
// 請(qǐng)開(kāi)始你的表演====const title = (<h2>嘿嘿</h2>) // JSX 本身也是可直接食用的值喲
const App = (    <div>      {/* 注釋在 jsx 中是這么個(gè)熊樣子*/}
     <p>name</p> {/* 這就鴛鴦(原樣)展示了*/}
     <p>{name}</p> {/* 動(dòng)態(tài)獲取變量數(shù)據(jù) */}
     <p>{sayHello()}</p> {/* 調(diào)用個(gè)函數(shù)違法嗎? 不 */}
      {/* 執(zhí)行原生 JS 不合理嗎? 合理 */}     <p>{console.log('1111')}</p>     <p>{Math.random()}</p>     <p>{JSON.stringify(obj)}</p>
      {/* 三元運(yùn)算讓你吃醋了? 沒(méi)有 */}     <p>{flag ? '登錄的狀態(tài)' :'執(zhí)行登錄'}</p>
      {/* 模板字符下,字符串和變量結(jié)婚,可以嗎? 可以 */}     <p>{`hello, ${name}`}</p>
      {/* JSX 也是可直接食用的值喲 */}     <div>{title}</div>    </div>  )
ReactDOM.render(App,document.getElementById('root'));

// 01 jsx 本身就是一個(gè)表達(dá)式const names = <h3>西嶺老濕</h3>
// 02 添加屬性const age =99
// 03 jsx 添加子元素（JSX只有一個(gè)父元素）

// 04 單標(biāo)簽必須閉合
// 組件functionApp() {  return (    // 返回中只能有一個(gè)JSX 塊    // <p></p> // 報(bào)錯(cuò)    <div>      {/* jsx 本身就是一個(gè)表達(dá)式 */}      {names}
      {/* 添加屬性 */}      <page="age">用戶年齡屬性</p>{/* 字符串屬性 */}      <page={age}>用戶年齡屬性</p>{/* 動(dòng)態(tài)屬性 */}
      {/* 單標(biāo)簽必須閉合 */}      {/* <img >   */}{/*報(bào)錯(cuò)*/}      {/* 單標(biāo)簽正確寫(xiě)法 */}      <img/>
    </div>  );}
exportdefault App;

// 事件處理函數(shù)const event1 =function(){  alert('嘿嘿 React')}
functionApp (){  return (    <div>      <h1>事件綁定</h1>      {/* 事件名使用駝峰法命名、直接使用函數(shù)賦值，不是函數(shù)調(diào)用 */}      <buttononClick={event1}>你點(diǎn)啊</button>    </div>  )}
exportdefault App

//事件傳參const event1 =function(name,age){  alert(name)  alert(age)}
functionApp (){  return (    <div>      <h1>事件綁定</h1>      {/* 因?yàn)槭录壎ㄐ枰邮蘸瘮?shù)本身，作為事件處理，不能直接調(diào)用 */}      {/* 因此傳參需要使用箭頭函數(shù)返回事件處理函數(shù),而不能是函數(shù)調(diào)用 */}      <buttononClick={()=>{event1('西嶺',16)}}>你點(diǎn)啊</button>      <br/>      {/* 或者使用 bind等其方式，將函數(shù)本身作為返回值傳入 */}
      <buttononClick={event1.bind(null,'嬴政',999)}>你再點(diǎn)一下試試</button>
      {/* 再次強(qiáng)調(diào) JSX 就是 JS 擴(kuò)展，就是JS  */}    </div>  )}
exportdefault App

// 事件對(duì)象傳參const event1 =function (ev) {  console.log(ev);}
functionApp() {  return (    <div>      <h1>事件綁定</h1>      {/* 01 函數(shù)無(wú)傳參 */}      {/* 事件對(duì)象默認(rèn)傳入，因此直接在事件處理函數(shù)中形參接收即可 */}      <buttononClick={event1}>點(diǎn)一下？</button>  <br/>

      {/* 02 箭頭函數(shù)傳參      因?yàn)槭录?duì)象有默認(rèn)傳入，而使用箭頭函數(shù)時(shí)，則需要在箭頭函數(shù)中傳入后      再在箭頭函數(shù)返回的函數(shù)中傳入 */}      <buttononClick={(ev) => { event1(ev,'西嶺',16) }}>你點(diǎn)啊</button><br/>
      {/* 03 bind 等其方式      將函數(shù)本身作為返回值傳入，事件對(duì)象默認(rèn)會(huì)添加在最后一個(gè)參數(shù)中      無(wú)論有無(wú)參數(shù)傳入，事件對(duì)象都不需要寫(xiě)，事件處理函數(shù)按順序接收即可 */}      <buttononClick={event1.bind(null)}>你再點(diǎn)一下試試</button>
    </div>  )}
exportdefault App

const item1 = [1,3,5]
functionApp() {  return (    <div>      {/* JSX 默認(rèn)會(huì)對(duì)數(shù)組進(jìn)行結(jié)構(gòu) */}      <h1>{item1}</h1>    </div>  )}
exportdefault App

const item1 = [1,3,5]const item2 = [  <p>item1</p>,  <p>item1</p>,  <p>item1</p>]
functionApp() {  return (    <div>      {/* JSX 默認(rèn)會(huì)對(duì)數(shù)組進(jìn)行結(jié)構(gòu) */}      <h1>{item1}</h1>      {/* 數(shù)組值為 jsx 同樣可以直接使用*/}      <div>        {item2}      </div>    </div>  )}
exportdefault App

// 數(shù)組數(shù)據(jù)const arr = [  { id:1,name:'癡心絕對(duì)' },  { id:2,name:'像我這樣的人' },  { id:3,name:'南山南' }]
// === 數(shù)據(jù)遍歷 ===functionloops() {  var a2 = []  // 循環(huán)遍歷數(shù)據(jù)  for (var i =0; i < arr.length; i++) {    // 將數(shù)組內(nèi)容結(jié)構(gòu)為JSX 數(shù)組    a2.push(<h1key={arr[i].id}>{arr[i].name}</h1>)  }  return a2}
functionApp() {  return (    <div>      {/* 調(diào)用遍歷函數(shù)，獲取 JSX 數(shù)組展示 */}      {loops()}    </div>  )}
exportdefault App

// 數(shù)組數(shù)據(jù)const arr = [  { id:1,name:'絕對(duì)癡心' },  { id:2,name:'像我這樣帥的人' },  { id:3,name:'南山難' }]
functionApp() {  return (    <div>      {/* map 方法遍歷數(shù)組 */}      {arr.map(item=><h3>{item.id}--{item.name}</h3> )}    </div>  )}
exportdefault App

//聲明樣式對(duì)象const styles = {  color:'red',  // 樣式的屬性名需要處理,要么  // font-size:'20px', // 直接使用報(bào)錯(cuò)  fontSize:'30px',// 轉(zhuǎn)大寫(xiě) √  'background-color':'pink'// 引號(hào)包裹 √}
functionApp (){  return (    <div>      {/* 內(nèi)聯(lián)樣式需要以對(duì)象形式展示 */}      <h3style={{color:"red"}}>西嶺老濕</h3>      <pstyle={styles}>真的很帥</p>    </div>  )}
exportdefault App

body{  background-color: skyblue;  color: blue;}
.box{  font-size: 30px;}

// 引入外聯(lián)樣式文件import './App.css'
function App (){  return (    <div>      <h3>小藍(lán)同學(xué)</h3>      <pclassName="box">胖藍(lán)</p>    </div>  )}
export default App

import React from 'react'import ReactDom from 'react-dom'
var f = false
const fun1 = ()=>{    if(f){      return(<h1>哈哈哈哈</h1>)    }else{      return(<h2>嘿嘿</h2>)    }}const title = (  // 使用括號(hào)，可以換行，代碼更加整潔  <div>    {fun1()}  </div>)
ReactDom.render(title,document.getElementById('root'))