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