JSX介绍

全称：JavaScript XML。
react 定义的一种类似于 XML 的 JS 扩展语法：JS + XML。
本质是 React.createElement(component, props, ...children)方法的语法糖。
作用：用来简化创建虚拟 DOM
- 写法： var ele = <h1>Hello JSX!</h1>
- 注意 1：它不是字符串，也不是 HTML/XML 标签。
- 注意 2：它最终产生的就是一个 JS 对象。

标签名任意：HTML 标签或其他标签。

JSX语法规则

定义虚拟 DOM 时，不要写引号；
标签中混入 JS 表达式时要用 {} 包起来（一定要区分【js 语句（代码）】与【js 表达式】）；
- 什么是表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方。
- js 中表单式的情况：
  - a
  - a + b
  - demo(1)
  - arr.map()
  - function text() {}
- 语句（代码）：
  - if(){}
  - for(){}
  - switch(){}
标签的样式类名指定不能用 class（因为 class 与 ES6 中声明类的关键字 class 冲突），要用 className;
内联样式要用 style={{key:value}} 的形式去写，如果 key 包含连字符（如”font-size”），需要按照小驼峰形式来写（如 fontSize）；
只能有一个根标签；
标签必须闭合；
标签首字母：
- 若小写字母开头，则将该标签转为 html 中同名元素，若 html 中无该标签对应的同名元素，则报错；
- 若大写字母开头，React 就去渲染对应的组件，若组件没有定义，则报错。

JSX练习

结合上面总结的 JSX 的语法规则，阅读并运行下面的示例代码，以加深理解。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>jsx语法规则</title><style>.sub-title {color: #595959;padding: 0;margin: 0;font-size: 12px;}</style>
</head><body><!-- 准备好一个容器 --><div id="app"></div><!-- step01: 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- step02: 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- step03: 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel"> /* 此处一定要写babel */// 1.创建虚拟DOMconst myId = 'todo-list';const title = 'Todo List';const subTitleClass = 'sub-title';const myTodoList = [{id: 1, title: '9:30 参加部分晨例会'},{id: 2, title: '10:30 参加XXXX项目产品需求评审'},{id: 3, title: '16:30 提交XXXX项目开发计划'},];const VDOM = (<div><h2 className="title" id={myId.toLowerCase()}><span style={{ color: 'red', fontSize: '28px' }}>{title.toUpperCase()}</span></h2><p className={subTitleClass}>这是一个简单的 Todo List。</p><input type="text" placeholder="请输入……" style={{height: '28px', lineHeight: '28px', padding: "0 10px"}} /><button style={{marginLeft: '10px', height: '32px', lineHeight: '32px'}}>提交</button><h4 className={subTitleClass} style={{marginTop: '20px'}}>我的待办</h4><ul style={{fontSize: '12px', listStyle: 'none'}}>{myTodoList.map((item, index) => {return <li key={index}> {item.id}. {item.title}</li>})}    </ul></div>)// 2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById('app'))</script>
</body></html>

上面的示例代码，纯粹为了验证 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入门jsx
JSX其实是React.createElement的语法糖想要将一个 React 元素渲染到根 DOM 节点中,只需把它们一起传入 ReactDOM.render(): React DOM 会将元素 ...
React入门第一个程序及使用JS和JSX的区别
JS和JSX都能用来写React 但是JSX相对来说会简便些,语法规则只是在JS的基础上多了一点点,还是比较推荐使用JSX,以下用代码举例二者区别. 使用JSX创建React: <!DOCTYP ...
react入门代码_如何在React中构建温度控制应用程序-包括提示和入门代码
react入门代码我们正在建立的 (What we're building) In this beginner React project, we're going to learn how to ...
React入门看这篇就够了
2019独角兽企业重金招聘Python工程师标准>>> 摘要: 很多值得了解的细节. 原文:React入门看这篇就够了作者:Random Fundebug经授权转载,版权归原作者所 ...
《慕课React入门》总结
React 入门与实战 react组件虚拟DOM的概念这是React性能高效的核心算法 React为此引入了虚拟DOM(Virtual DOM)的机制.基于React进行开发时所有的DOM构造都是 ...
React入门指引与实战
React是Facebook公司推出的前端组件化解决方案,目的在于解决前端开发中存在的各个痛点.目前,前端框架与库层出不穷,形成了异常繁荣的局面,那么Facebook为何还要重复造轮子呢?究其原因,F ...
React 入门手册
大家好,我是若川.推荐这篇可收藏的React入门手册.也推荐之前一篇类似的文章<如何使用 React 和 React Hooks 创建一个天气应用>. 点击下方卡片关注我.加个星标 Rea ...
第一章：React入门
第一章:React入门 1.1. React 1.1.1. 官网英文官网: https://reactjs.org/ 中文官网: https://doc.react-china.org/ 1.1.2 ...
react入门（1）之阮一峰react教程
阮一峰老师的github地址:React Demos React 入门实例教程 1.HTML模板 <!DOCTYPE html> <html><head>// re ...

React 入门：JSX

文章目录

JSX介绍

JSX语法规则

JSX练习

React 入门：JSX相关推荐

最新文章

热门文章