React入门--------JSX

React学习网站

一、html模板

使用React的网页源码，结构大致如下：

    <!DOCTYPE html>

    <html>

      <head>

        <script src="../build/react.js"></script>

        <script src="../build/react-dom.js"></script>

        <script src="../build/browser.min.js"></script>

      </head>

      <body>

        <div id="example"></div>

        <script type="text/babel">

          // ** Our code goes here! **

        </script>

      </body>

    </html>

1、上面代码一共用了三个库：react.js、react-dom.js和browser.min.js。它们必须首先加载。其中，react.js是React的核心库，react-dom.js是提供与DOM相关的功能，browser.min.js的作用是将JSX语法转化为JS语法。

2、如果使用了jsx语法，那么script标签的type属性必须为text/babel。

二、JSX语法

html语言直接写在js语言中，不加任何引号，就是jsx的语法。

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

ReactDOM.render(

  <div>

  {

    names.map(function (name) {

      return <div>Hello, {name}!</div>

    })

  }

  </div>,

  document.getElementById('example')

);

上面代码体现了jsx的基本语法规则：遇到html标签,就用html规则解析；遇到代码块(以{开头)，就用js规则解析。

jsx允许直接在模板插入js变量。如果这个变量是一个数组，则会展开这个数组的所有成员。

    var arr = [

      <h1>Hello world!</h1>,

      <h2>React is awesome</h2>,

    ];

    ReactDOM.render(

      <div>{arr}</div>,

      document.getElementById('example')

    );

React入门--------JSX的更多相关文章

React入门---JSX内置表达式-6
个人理解:接触的JSX就是在React中render方法里面的js,因为里面只能有一个节点,所以你写的东西都在一个div中,要有js所以通过JSX来表达.(个人菜鸟理解,欢迎指正) React 使用 ...
React入门-JSX和虚拟dom
1.JSX理解举例: const element = <h1>Hello, world!</h1>; 这被称为 JSX,是一个 JavaScript 的语法扩展.建议在 Re ...
react入门（3）
在第一篇文章里我们介绍了jsx.组件.css写法点击查看react入门(1) 第二篇文章里我们介绍了事件.this.props.children.props....other.map循环点击查 ...
react入门（1）
这篇文章也不能算教程咯,就算是自己学习整理的笔记把. 关于react一些相关的简介.优势之类的,随便百度一下一大堆,我就不多说了,可以去官网(http://reactjs.cn/)看一下. 这片主要讲 ...
react入门（4）
首先还是来回顾一下前三篇讲的内容 react入门(1): jsx,组件,css写法 react入门(2):事件,this.props.children,props,...other react入门(3 ...
React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
React入门 (1)—使用指南（包括ES5和ES6对比）
前言本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...
2015年最热门前端框架React 入门实例教程
现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...
React入门2
React 入门实例教程最简单开始学习 JSX 的方法就是使用浏览器端的 JSXTransformer.我们强烈建议你不要在生产环境中使用它.你可以通过我们的命令行工具 react-tools 包来 ...

随机推荐

基于Eclipse搭建Hadoop源码环境
Hadoop使用ant+ivy组织工程,无法直接导入Eclipse中.本文将介绍如何基于Eclipse搭建Hadoop源码环境. 准备工作本文使用的操作系统为CentOS.需要的软件版本:hadoo ...
osgi: HttpService A null service reference is not allowed.
最近在学习osgi,在练习HttpService的过程中,一直出现“A null service reference is not allowed”这样的报错,代码本身没有问题,在网上也搜了不少地方, ...
【PRML读书笔记-Chapter1-Introduction】1.2 Probability Theory
一个例子: 两个盒子: 一个红色:2个苹果,6个橘子; 一个蓝色:3个苹果,1个橘子; 如下图: 现在假设随机选取1个盒子,从中.取一个水果,观察它是属于哪一种水果之后,我们把它从原来的盒子中替换掉. ...
暴力清除Android中的短信
有些短信程序有bug,当短信(特别是彩信)没有接收完整,或者是一些异常情况下,你会收到一条短信但是看不到或者看不了. 此时郁闷的事情就来了,系统会提醒你还有1条未读短信,但是你满世界都找不到这条短信. ...
JS基础回顾，小练习（克隆对象，数组）
对象的克隆: var srcObj = { a: 1, b: { b1: ["hello", "hi"], b2: "JavaScript" ...
Knockout 新版应用开发教程之Observable Arrays
假如你想到侦测和相应一个对象的改变,假如你想要侦测和响应一一组合集的改变,就要用observableArray 在许多场景都是很有用的,比如你要在UI上需要显示/编辑的一个列表数据集合,然后对集合进行 ...
Lua面向对象设计
首先对于Lua语言,它没有打算被用来进行大型的程序设计,相反,Lua目标定于小型到中型的程序设计,通常是作为大型系统的一部分,所以它只提供了一套精简的元素,很多高级语言的概念都没有.这样Lua就成为了 ...
左倾堆(一)之图文解析和 C语言的实现
概要本章介绍左倾堆,它和二叉堆一样,都是堆结构中的一员.和以往一样,本文会先对左倾堆的理论知识进行简单介绍,然后给出C语言的实现.后续再分别给出C++和Java版本的实现:实现的语言虽不同,但是原理 ...
斜堆(一)之 C语言的实现
概要本章介绍斜堆.和以往一样,本文会先对斜堆的理论知识进行简单介绍,然后给出C语言的实现.后续再分别给出C++和Java版本的实现:实现的语言虽不同,但是原理如出一辙,选择其中之一进行了解即可.若文 ...
WCF回顾一、基本概念和应用场景
一.WCF描述 wcf是一款基于面向服务的架构的通讯框架平台,在分布式框架中得到了广泛使用. wcf入门非常简单,只要花几分钟就能编写一个完整的wcf程序,而实际上WCF是概念非常多的一门技术,需要花 ...

React入门--------JSX

React入门--------JSX的更多相关文章

随机推荐

热门专题