JSX学习

JSX执行更快，编译为JavaScript代码时进行优化(DOM虚拟化)，编译时可以及时发现错误，有着快速的编写模板

必须有根节点， HTML元素小写，大写默认是组件

index.js 学习源码

import React from 'react';
import ReactDOM, { render } from 'react-dom';
import './App.css';

let time=new Date().toLocaleTimeString()
let str= '当前时刻'

let man='正常'

//支持表达式 ，传参变量
let element1 =(

  <div>
    <h1>helloworld</h1>
    <h2>{1+1}</h2>          
    <h3>{time+str}</h3>

  </div>


)
let element2=(

  <div>
    <span>横着</span>
    <span>竖着</span>
  </div>
)
//支持三元运算  添加元素、组件
let element3=(

    <div>
      <h1>今天是否隔离</h1>
      <h2>{man=="发热"? "隔离":"躺床上"}</h2>
      <h2>{man=="发热"?<button>隔离</button>:element2}</h2>
    </div>
)

//插入样式和图片
let color='bgblue'
let logo='https://xiaozhuvideo.oss-cn-qingdao.aliyuncs.com/picture/67studio/20200701/20709181.jpg'
let element4=(

    <div className={color}>
         蓝色背景
        <img src={logo}/>
    </div>

)


ReactDOM.render(

//element4,
//element3,
element1,

  document.getElementById('root')

)

App.css 样式文件源码

1
2
3

.bgblue{
    background-color: blue;
}

element1

element2

element3

If you like this blog or find it useful for you, you are welcome to comment on it. You are also welcome to share this blog, so that more people can participate in it. If the images used in the blog infringe your copyright, please contact the author to delete them. Thank you !

learn the React

index.js 学习源码

App.css 样式文件源码

FEATURED TAGS

FRIENDS