01 react中jsx的使用

最新推荐文章于 2025-08-04 20:41:28 发布

原创最新推荐文章于 2025-08-04 20:41:28 发布 · 5.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #前端 #reactjs

react 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了在脚手架中如何快速上手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"));