01 react中jsx的使用

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