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;
