jsx在脚手架安装好后自动配置了, 可直接使用
创建好项目之后
路径如下:
使用
// index.js
// 简单使用
import React from "react";
import ReactDOM from "react-dom";
const title = <h1>hellow React! JSX</h1>
ReactDOM.render(title, document.getElementById("root"))
条件渲染
// index.js
// 这里暂时不支持 更新数据的时候自动更新视图
import React from "react";
import ReactDOM from "react-dom";
let lod = true;
function loading() {
if (lod) {
return <div>loading...</div>;
} else {
return <div>加载ok</div>;
}
}
const title = <h1>
hellow React! JSX
{loading()}
</h1>;
ReactDOM.render(title, document.getElementById("root"));
遍历
// index.js
// 遍历
// map()
import React from "react";
import ReactDOM from "react-dom";
let arr = [
{ id: 1, name: "dwp" },
{ id: 2, name: "dwp1" },
{ id: 3, name: "dwp2" },
];
let ul = <ul>{arr.map(item => <li key={item.id}>{item.id}-{item.name}</li>)}</ul>;
ReactDOM.render(ul, document.getElementById("root"));
样式使用
// index.js
import './css/index.css' // 引入 class
import React from "react";
import ReactDOM from "react-dom";
// 内联样式
let h1 = <h1 className="title" style={ {color: "red"} }>我就是h1</h1>
ReactDOM.render(h1, document.getElementById("root"));