三、JSX 语法

上一节的代码, HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写(查看 Demo02 )。

var names = [‘Alice‘, ‘Emily‘, ‘Kate‘];

ReactDOM.render(
  <div>
  {
    names.map(function (name) {
      return <div>Hello, {name}!</div>
    })
  }
  </div>,
  document.getElementById(‘example‘)
);

上面代码体现了 JSX 的基本语法规则:遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析。上面代码的运行结果如下。

JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组,则会展开这个数组的所有成员(查看 demo03 )。

var arr = [
<h1>Hello world!</h1>,
<h2>React is awesome</h2>,
];

ReactDOM.render(
<div>{arr}</div>,
document.getElementById(‘example‘)
);

时间: 2024-10-12 14:53:54

三、JSX 语法的相关文章

React JSX语法说明

什么是JSX? 在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代码里直接写起了XML标签,实质上这只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,当然你想直接使用纯Javascript代码写也是可以的,只是利用JSX,组件的结构和组件之间的关系看上去更加清晰. var MyComponent = React.createClass({/*...*/}); var myElement = <MyComponent som

React之JSX语法

1. JSX的介绍 ??JSX(JavaScript XML)--一种在React组件内部构建标签的类XML语法.react在不使用JSX的情况下一样可以工作,然而使用JSX可以提高组件的可读性,因此推荐使用JSX. 基于ECMAScript的一种新特性 一种定义带属性树结构的语法 ??JSX的特性: ??它具备以下好处: 更加熟悉 更加语义化 更加直观 抽象化 关注分离点 2.JSX的使用 React对大小写敏感,如果是自定义组件,则必须首字母大写,如果是DOM自带的标签,则要小写(比如div

关于React之JSX语法理解

**理解:**javascript和HTML的结合,碰到<就按照HTML来解析,碰到{}就按照js来解析.也可以理解为可以在js代码书写HTML标签,每个标签最终都会转化为js代码来运行.他的语法规则大致如下: 1.必须有根元素,即最外层有且只有一个标签:2.所有的标签必须闭合:3.对大小写敏感,区分是组件还是Html标签:4.属性值必须加引号或者加{};5.标签内放"<"会报错,因为他会按照Html来解析:7.数组的循环(每个元素都会返回一个react组件);8.JSX允

JSX语法及特点介绍

一.JSX语法 1.1 基本语法 1)首字母大小写:元素名即组件名,首字母需要大写.首字母小写时React会以为这是HTML的标准标签,因此自定义的组件名需要首字母大写,否则会报错. 2)嵌套:在render函数中return返回的只能包含一个顶层标签,否则也会报错.如: var HelloWorld=React.createClass({ render:function(){ /* return ( <h1>title</h1> <p>Hello world</

Webstorm 不识别es6 import React from ‘react’——webstorm不支持jsx语法怎么办

webstorm不支持jsx语法怎么办? 参考:webstorm不支持jsx语法怎么办 I spent ages trying to fix this. Every solution talks about 'setting options'. I don't know what that means. Finally, I figured it out. You can just include a commented out line at the top of the file /*jsh

react入门-----(jsx语法,在react中获取真实的dom节点)

1.jsx语法 1 var names = ['Alice', 'Emily', 'Kate']; 2 <!-- HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写 --> 3 ReactDOM.render( 4 <div> 5 { 6 names.map(function (name) { 7 return <div>Hello, {name}!</div> 8

JSX 语法

jsx 不能直接运行,是被 babel-loader 中的 react 这个 preset 翻译的 需要注意: 1.必须被一个单独的大标签包裹,比如:div 或者 section 2.标签必须封闭 3.class 要写成 className, for 要写成 htmlFor 4.HTML 注释不能使用,只能使用 JS 注释 5.原生标签,比如:p.li.div 如果要使用自定义属性,必须用 data- 前缀. <p data-a="10"></p> 如果是自定义

[转] ReactJS之JSX语法

JSX 语法的本质目的是为了使用基于 xml 的方式表达组件的嵌套,保持和 HTML 一致的结构,语法上除了在描述组件上比较特别以外,其它和普通的 Javascript 没有区别. 并且最终所有的 JSX 都会编译为原生 Javascript. JSX = JavaScript XMLJSX 是一个看起来很像 XML 的 JavaScript 语法扩展. 特点 类XML语法:有固定的标签开启和闭合.这能让复杂的树更易于阅读,优于方法调用和对象字面量的形式. 增强JS语义:不是模板,模板与页面是分

react的jsx语法

在webpack.config.js中配置解析的loader { test:/\.jsx?$/, use:{ loader:"babel-loader", options:{ presets:["@babel/env","@babel/react"] } } }, jsx对象就是js对象!只不过jsx需要事先编译,才转为js对象! 在默认情况下,React DOM会将所有嵌入JSX的值进行编码.这样可以有效避免xss攻击. sx有个强大的地方就是

react实战项目开发(2) react几个重要概念以及JSX语法

前言 前面我们已经学习了利用官方脚手架搭建一套可以应用在生产环境下的React开发环境.那么今天这篇文章主要先了解几个react重要的概念,以及讲解本文的重要知识JSX语法 React重要概念 [思想] React 的核心思想是:封装组件,各个组件维护自己的状态和 UI,当状态变更,自动重新渲染整个组件. 如果我们使用react编写的话,会把他拆分成一个一个的小组件进行编写方便管理复用性高,例如我们把登录拆分成一个组件编写,如果以后公司其它地方需要用到,那么就可以直接使用. 看一段代码感受下: