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}/>

 

 
03==>
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 App;

 

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 App;

 

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也是表达式