01 React 文法基礎（一）之表達式和jsx

react負責邏輯控制    reactdom負責渲染

本節知識點  有 
1)變量的使用，簡單使用。

1==》jsx中的注釋
 {/*  */}

2===》 簡單的渲染
app.js
ps==>定義變量  使用變量

import React from 'react';
function App() {
  const namet="我是表頭";//定義變量
  return (
    <div>
       {/*我是注釋  下面使用變量  它是表達式 */}       
       {namet} 
    </div>
  );
}
export default App;      

我的了解1==》return 裡面是寫jsx的；return外面是寫變量或者是函數的。

2==》return 裡面隻能夠有一個根元素的哈。

3變量的使用方法就是==>單括号變量名 {varName}

4調用函數就是{functionName()}

5如何引入靜态圖檔

 import login from "./logo.svg" //導入圖檔

 <img src={login}/>

jsx 裡面支援出絕大多數的js  你當jsx當做js就好了

04==》在表達式{ }裡面不要去寫for循環和if else哈

05==》在表達式裡面去調用函數 

import React from 'react';
function getsay(a,b){
   return  a+b;
}
function App() {
  return (
    <div>
       {/*我是注釋  下面使用變量  它是表達式 */}
       {getsay(10,20)}
    </div>
  );
}
export default      

06===>屬性也是表達式
 {/* 屬性也是表達式 */}
 <img src={login} title="我是圖" style={{width:'50px'}}/>

完整代碼如下
import React from 'react';
import login from "./logo.svg" //導入圖檔

function App() {
  return (
    <div>
       
        {/* 屬性也是表達式 */}
        <img src={login} title="我是圖" style={{width:'50px'}}/>

    </div>
  );
}
export default      

07==>jsx也是表達式

import React from 'react';
import login from "./logo.svg"
const jsx=<p>我是p</p>

function App() {
  return (
    <div>
       
        {/* 屬性也是表達式 */}
        <img src={login} title="我是圖" style={{width:'50px'}}/>

        {/* js也是表達式 */}
        {jsx}

    </div>
  );
}
export default App;


總結==》屬性也是表達式   jsx也是表達式      

遇見問題，這是你成長的機會，如果你能夠解決，這就是收獲。