jsx的模板

1、react.js

function createElement(type,config={},...children){

    return {

        $$typeof:Symbol.for('react.element'),

        type,

        props:{...config,children}

    }

}

 

// jsx更像js 不是html

// react 如何区分是jsx元素 还是表达式

// < 开头的就是jsx元素  {} 表达式

// 给jsx赋值的时候 避免使用js的关键字   class   className

// react 元素属性名是class的话，如果是关键字 for if ，要改名for =>htmlFor 

// jsx 也是一个对象，

 

function greeting(name){

    if(name){

    return <h1>hello {name}</h1>

    }else{

        return <h1>hello stranger</h1>

    }

}

 

let element =greeting('name');

ReactDOM.render(

    element,document.getElementById('root')

)

 

let names=['zhangsan','lisi','wangwu'];

let elements=names.map((item,index)=>{

return <li key={index}>{item}</li>

})

 

let elements2=names.reverse().map((item,index)=>{

    return <li key={index}>{item}</li>

})

 

// 当你map的时候，是把一个字符串数组映射为了一个li的React元素数组

// 在列表中的每一个子元素都应该有一个唯一的key属性

// 原因是为了高效的dom diff

// 尽量复用老DOM DOM-Diff  React对象是不可变的对象 创建一个新的元素重新渲染

// React 只会更新必要的部分。

 

function tick(){

    element.props.children=new Date().toLocaleDateString();

    const element=<div>{new Date().toLocaleDateString()}</div>

    ReactDOM.render(

        element,document.getElementById('root')

    );

}

 

setInterval(()=>{

    tick();

},1000);

 

 

2、index.js

 

import React from 'react';

import ReactDOM from 'react-dom';

 

/*****

 * 在webpack打包的时候，会把这种jsx语法转成纯的js代码，所以在浏览器就可以运行了。

 * React 元素的本质是一个普通的js对象

 * ReactDOM 会保证浏览器中的DOM和你的React元素一致。

 * jsx表达式：变量和操作符的集合，可以计算结果 表达式要放在{}中。

 * 

 */

 

ReactDOM.render(

    <h1>hello</h1>,document.getElementById('root')

)

 

function createElement(type,config={},...children){

    return {

        $$typeof:Symbol.for('react.element'),

        type,

        props:{...config,children}

    }

}

 

var element =createElement("h1",{id:'title'},"hello",createElement("h2",null,"world"));

console.log(element);