全域性安裝 react 腳手架  :  npm i  create-react-app  -g

安裝專案  create-react-app  專案名 

JSX語法 : 

　　1.JSX可以看做是JS語言的擴充套件,它既不是一個字串也不是一個HTML

　　2.它具備了JS所有的功能,同時還可以轉為HTML在介面上進行展示

一.JSX的語法使用 : 

// JSX只能有一個父元素 , 使用單標籤的時候必須正確關閉

// 1.動態顯示資料
const name = '吳宇騰'

// 2.呼叫方法 + 內建
function hello() {
  return '大家好'
}

// 3.表示式 : 支援三元表示式 , 不能寫if  else 
 

const trueB = false

// 4.模板字串
const muban = '你好'

// 5.新增屬性
const shuxing = 'hello'

// 5.新增屬性  字串屬性,直接用雙引號包括

// 6.註釋內容

function App() {
  return (
    <div >
      <p>1.動態顯示資料 :  {name} </p>
      <p>2.呼叫方法 : {hello()}</p>
      <p>2.呼叫內建方法 : {console.log('111')}{Math.random()}</p>
      <p>3.表示式 :
 
 {trueB  ? '真的' : '假的'}</p>
      <p>4.模板字串 : {`hello , ${muban}`}</p>
      <p title="123">5.普通新增屬性 : 直接用雙引號包括 </p>
      <p title={shuxing}>5.動態新增屬性</p>
      <p>6.註釋內容 : {/*註釋內容*/}</p>
    </div>
  );
}

export default App;

二 . 事件

// 1.事件繫結
const onclick = ()=>{
  console.log(
 
'事件繫結');
}
// 2.事件監聽傳參
const onclick2 = (a,b)=>{
  console.log(a,b)
}
const onclickBind = (a,b)=>{
  console.log(a,b)
}
// 3.獲取事件物件
const onclickev = (a,b,ev)=>{
  console.log(a,b,ev)
}

const onclickBind2 = (a,b,ev)=>{
  console.log(a,b,ev)
}


function App() {
  return (
    <div >
      <button onClick={onclick}>1.事件繫結</button> 
        <hr></hr>
      <button onClick={()=>{onclick2(111,222)}}>2.事件監聽傳參:箭頭函式</button>
      <button onClick={(ev)=>{onclickev(333,444,ev)}}>3.事件監聽傳參:箭頭函式+事件對象</button>
        <hr></hr>
      <button onClick={onclickBind.bind(null,555,666)}>2.事件監聽傳參:bind函式</button>
      <button onClick={onclickBind2.bind(null,555,666)}>3.事件監聽傳參:bind函式+事件物件</button>
    </div>
  );
}

export default App;