React之JSX

上次我们主要讨论了React最基本的ReactDOM.render()(

);

现在看看JSX语法

JSX语法就是XML与JS的相结合,HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写;

看一组案例‘

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="build/browser.min.js"></script>
</head>
<body>
<div id="exam"></div>
<script type="text/babel">

   var names=[‘杨幂‘,‘迪丽热巴‘,‘周星‘];
     ReactDOM.render(
            <div>
            {
                  names.map(function(name){
                       return <div> Hello ,{name}
                       </div>

               })

            }

            </div>,
            document.getElementById("exam")//此处结束不应该+;

         );

</script>

</body>
</html>

以上案例我们看出JSX遇到<开头就已HTML解析,遇到{}开头就用JS规则来解析.

时间: 2024-10-28 20:58:57

React之JSX的相关文章

React Native JSX value should be expression or a quoted JSX text.

问题描述:  我在使用props时候, 我的写法是这样的 ... <View> <Person name='john' age=32 gender=true></Person> </View> ... class Person Extension Component{ render(){ <View> <Text>my name is {this.name}</Text> <Text> my age is {t

React入门---JSX内置表达式-6

个人理解:接触的JSX就是在React中render方法里面的js,因为里面只能有一个节点,所以你写的东西都在一个div中,要有js所以通过JSX来表达.(个人菜鸟理解,欢迎指正) React 使用 JSX 来替代常规的 JavaScript. JSX 是一个看起来很像 XML 的 JavaScript 语法扩展. 1.在JSX中注释需要下载花括号中,语法  {/*注释*/} 2.在 JSX 中不能使用 if else 语句,但可以使用 conditional (三元运算) 表达式来替代. 例:

【02】react 之 jsx

React与ReactDOM是react中核心对象,React为核心功能,ReactDOM提供对DOM的操作,以前的老版本中只有React没有ReactDOM,新版本中分离出ReactDOM提供两种渲染方式:浏览器渲染(react-dom.js)和服务器渲染(react-dom-server.js). 所以程序使用react,首先先引入: var React = require('react'); var ReactDOM = require('react-dom'); ES6(ES2015)

React + Webpack (jsx +less)

React项目的初始化.webpack的安装.如何使用jsx和less. 一.初始 React 项目 react项目的初始化比较简单,我用的就是react的脚手架.三种方式: 1.NPM npm init react-app my-app 2.NPX npx create-react-app my-app 3.Yarn yarn create react-app my-app my-app 是项目的名字,运行命令时会在当前目录下自动创建一个名字叫作 my-app 的项目文件夹.命令运行完毕,简单

React Without JSX

此文章是翻译React Without JSX这篇React(版本v15.4.0)官方文档. React Without JSX JSX 对使用React 不是必须的.当你不想在你的构建环境中设置编译,使用不带JSX 的React 是非常方便的. 每一个JSX element 只是调用React.createElement(component, props, ...children) 的语法糖(syntactic sugar).所以,任何你使用JSX 可以做的事情都可以使用纯JavaScript

React的JSX语法及组件

最近一个同事很急没有做任何交接就请了陪产假,然后我来维护.说实在的我一开始是一脸懵逼的.因为MV*项目里用的最多的还是Vue:React听说也了解过,但毕竟不熟... 不过不管如何这也是工作:同事也恭喜同事当爸了,打心理为他感到高兴! 代码down下来后开始查看的时候语法基本上使用的都是CMD,ES6还有本文讲的JSX,React组件.CMD,ES6这不难毕竟平常也经常用.但是JSX,React组件一开始就有点懵逼, 不过多看几遍加百度Google就懂了. (好像废话有点多,好了,开始讲重点..

初学React:JSX语法

这是本人初学React做的学习笔记;讲的不是很深,只算是简单的进行介绍. 这是一个小系列.都是在同一个模板中搭建的,但是代码是不能正常执行的. >>第一个组件.js 'use strick' /*===========================JavaScript的XML语法========================*/ var CommentBox = React.createClass({ render:function () { return ( <div classN

React之JSX学习教程

在学习React的过程中,我们总想让搭建 React 应用更加简单,那么我们就该学会使用JSX. 什么是JSX? JSX 是一个看起来很像 XML 的 JavaScript语法扩展.React 可以用来做简单的 JSX 句法转换. 下面看一段React组件的代码: //  未使用JSX React.render( React.createElement('ul', { className: 'list' }, React.createElement('li', null, 'fist li'),

react之jsx的使用

import React from "react" export default class jsx extends React.Component{ render(){ var name = '接受变量' var bool = true var html = 'sd\u0020sd' //解析空格第一种办法转码 var htmls ='sd&nbsphd' return( <div>bian'l <p>{name===''? 'haha':''}<

React之jsx转js

参考于:http://lib.csdn.net/article/react/22694 1.npm install  -g babel-tools 2. 运行: jsx hello/jsx/ hello/build/ Note:jsx的文件后缀名也应为.js,否则无法识别. 如果要实时转化,则添加 --watch 选项.