1、index.js导入的各模块的作用:
// react中是React的核心:基础语法、属性、状态、生命周期、组件等
import React from "react";
// react-dom的作用是把虚拟DOM渲染成真实的DOM
import ReactDOM from "react-dom";
// ReactDOM.render(JSX语法, 容器, 渲染完触发的回调);
ReactDOM.render(<div style={{color:'red'}}>hello world!</div>,
document.getElementById("root"));
2、什么是JSX
JSX: JavaScript And XML[HTML]
3、JSX中使用JS表达式:
// 我们可以使用 {} 在JSX语法中解析 JS表达式;
/**
* {} 的使用注意事项:
* 1、{} 不能直接放入对象(除数组和几种特殊情况除外);
* 2、在使用style时,style的 {} 必须放置一个对象;
* 3、虚拟的DOM对象也可以直接放在 {} 中;
* 4、{} 中放置 null 、undefined 代表空元素,不会渲染在页面中
*/
4、JSX语法中给HTML元素添加属性的几种特殊情况:
// 1、样式类名:className
// 2、style:style中必须放置一个对象
<div style={{fontSize: '20px', color: 'red'}}>Hello World!!!</div>
5、{} 中放置虚拟DOM对象:
<div style={{fontSize: '20px', color: 'red'}}>
Hello World!!!{null}{undefined}
{arr.map(item => {
return <a href="" key={item}>{item}</a>
})}
</div>
网友评论