JSX

JSX 是 JavaScript XML 的简写，表示了在 JavaScript 中书写 XML 格式的代码。它可以让我们在 React 中创建元素更加简单，并且保留 HTML 代码的结构更直观，提高开发效率。

注意：JSX 是 JavaScript 的语法扩展，无法在浏览器中直接使用，在 create-react-app 脚手架中内置了 @babel/plugin-transform-react-jsx 插件来解析它，成为 JavaScript 的标准语法。

JSX 语法规则

定义虚拟DOM时，不要写引号。
标签中混入JS表达式时要用{}。
类名指定不能用 class，要用 className。label 标签的 for 属性要写成 htmlFor
内联样式，要用style={{key:value}}的形式去写。
必须只能有一个根标签，可以使用 <></> 幽灵标签，其实是 <React.Fragment></React.Fragment> 简写
标签必须闭合，可以写单标签，例<span />
标签首字母
- 若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
- 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
如果 JSX 有换行，最好使用 () 包裹

JSX 使用

使用表达式

进行运算
三元运算
使用函数
使用 JSX
使用注释，格式{/* 注释*/}

<body><div id="root"></div><script type="text/javascript" src="./js/react.development.js"></script><script type="text/javascript" src="./js/react-dom.development.js"></script><script type="text/javascript" src="./js/babel.min.js"></script><script type="text/babel">// 数据const data = {name: '孤城浪人',age: 18,};// 函数const ageAdd = () => {return ++data.age;};// jsx表达式const list = (<ul><li>姓：{data.name.substring(0, 2)}</li><li>名：{data.name.substring(2)}</li></ul>);// 创建虚拟domconst Vdom = (<div>{/* 使用数据 */}<div>姓名：{data.name}</div><div>年龄：{data.age}</div>{/* 使用三元 */}<div>是否成年：{data.age >= 18 ? '是' : '否'}</div>{/* 使用函数 */}<div>年龄加一：{ageAdd()}</div>{/* 使用JSX(jsx也是表达式) */}<div>{list}</div></div>);// 渲染虚拟domReactDOM.render(Vdom, document.getElementById('root'));</script>
</body>

条件渲染

使用分支语句 if/else 完成条件渲染
使用三元运算符完成条件渲染
使用逻辑运算符完成条件渲染

<body><div id="root"></div><script type="text/javascript" src="./js/react.development.js"></script><script type="text/javascript" src="./js/react-dom.development.js"></script><script type="text/javascript" src="./js/babel.min.js"></script><script type="text/babel">// 数据const data = {name: '孤城浪人',age: 18,};// 分支语句const getDom = () => {if (data.age >= 18) {return <span>是</span>;} else {return <span>否</span>;}}const Vdom1 = getDom();// 三元表达式const Vdom2 = <div>（三元表达式判断）是否成年：{data.age >= 18 ? <span>是</span> : <span>否</span>} </div>// 逻辑运算const Vdom3 = <div>（逻辑判断判断）是否成年：{data.age >= 18 && <span>是</span>}{data.age < 18 && <span>否</span>} </div>// 创建虚拟domconst Vdom = (<div>{/* 使用数据 */}<div>姓名：{data.name}</div><div>年龄：{data.age}</div><div> （分支语句）是否成年：{Vdom1}</div>{Vdom2}{Vdom3}</div>)// 渲染虚拟domReactDOM.render(Vdom, document.getElementById('root'));</script>
</body>

列表渲染

<body><div id="root"></div><script type="text/javascript" src="./js/react.development.js"></script><script type="text/javascript" src="./js/react-dom.development.js"></script><script type="text/javascript" src="./js/babel.min.js"></script><script type="text/babel">// 数据const data = [{name: '孤城浪人',age: 18,}, {name: '孤城',age: 19,}, {name: '孤城',age: 20,}, {name: 'xxxx',age: 21,}];// 创建虚拟domconst Vdom = (<ul>{data.map((item) => (<li><span>姓名：{item.name}</span><br /><span>年龄：{item.age}</span></li>))}</ul>)// 创建虚拟domconst Vdom1 = []data.map((item) => {Vdom1.push(<li><span>姓名：{item.name}</span><br /><span>年龄：{item.age}</span></li>)})// 渲染虚拟domReactDOM.render(<ul>{Vdom1}</ul>, document.getElementById('root'));</script>
</body>

style

style 接受一个采用小驼峰命名属性的 JavaScript 对象，而不是 CSS 字符串
React 会自动添加 ”px” 后缀到内联样式为数字的属性后，其他单位需要手动添加

<body><div id="root"></div><script type="text/javascript" src="./js/react.development.js"></script><script type="text/javascript" src="./js/react-dom.development.js"></script><script type="text/javascript" src="./js/babel.min.js"></script><script type="text/babel">// 数据const data = {name: '孤城浪人',age: 18,};// // 函数const ageAdd = () => {return ++data.age;};const Vdom = (<div>{/*类名*/}<div className="name">姓名：{data.name}</div>{/*行内样式驼峰key值*/}<div style={{ backgroundColor: 'red' }}>年龄：{data.age}</div>{/*动态类名*/}<div className={data.age >= 18 ? 'old' : 'young'}>是否成年：{data.age >= 18 ? '是' : '否'}</div>{/*动态样式*/}<div style={{ color: data.age >= 18 ? 'aqua' : 'antiquewhite' }}>年龄加一：{ageAdd()}</div></div>);// 渲染虚拟domReactDOM.render(Vdom, document.getElementById('root'));</script>
</body>

JSX 的使用基本就这些内容了，我是孤城浪人，一名正在前端路上摸爬滚打的菜鸟，欢迎你的关注。

React 学习笔记：JSX 语法相关推荐

React学习笔记一(React入门+JSX+脚手架)
文章目录 1. React介绍和特点 1.1 React是什么 1.2 React的特点 2. React的开发依赖 2.1 React的三个依赖 2.2 Babel和React的关系 2.3 Rea ...
react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
react render没更新_web前端教程分享React学习笔记（一）
web前端教程分享React学习笔记(一),React的起源和发展:React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写 ...
react组件卸载调用的方法_好程序员web前端培训分享React学习笔记（三）
好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...
React学习笔记 - 组件Props
React Learn Note 4 React学习笔记(四) 标签(空格分隔): React JavaScript 三.组件&Props 组件可以将UI切分成一些独立的.可复用的部件,这样你 ...
React学习笔记：入门案例
React学习笔记:入门案例 React 起源于 Facebook 内部项目,因为市场上所有 JavaScript MVC 框架都不令人满意,公司就决定自己写一套,用来架设 Instagram 的网站 ...
React学习笔记(五) 状态提升
状态提升究竟是什么东西呢?别急,下面让我们一步一步来看看究竟要怎么使用状态提升假设我们有这样一个需求,提供两个输入框(分别属于两个组件),保证输入框里面的内容同步好,下面我们先来封装一个输入框组件 ...
Postgresql学习笔记-高级语法篇
Postgresql学习笔记-高级语法篇 Postgresql 约束 Postgresql约束用于规定表中的数据规则. 如果存在违反约束的数据行为,行为会被约束终止. 约束可以在创建表的时候就规定(通 ...
React 简介及 JSX语法
文章目录 React 简介 React 概述及特点 React 虚拟DOM React 渲染机制 React 基本使用 JSX 语法 createElement()方法深究 JSX语法规则 React ...
React学习笔记一 JSX语法组件
JSX语法 1.标签不能添加引号,换行用括号包裹,并且只有一个根标签 const H1 = <h1>标题</h1> const Div = (<div><h1 ...

React 学习笔记：JSX 语法

JSX