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 包来 ...

随机推荐

现代JavaScript开发者的工具箱
自从HTML5变得流行以来,整个Web平台取得了长足的进步,人们也开始将JavaScript视为一门能够创建复杂应用的语言.许多新的API纷纷浮现,而关于浏览器如何应用这些技术的文章也大量涌现. 作为 ...
对android应用一些破解的方法
因为需要破解一款应用,找了些资料 Android手机中的程序文件夹拷贝到别的Android手机上还能用么? xx.apk Android个人破解应用新思路安卓手机下xx.apk JAVA破解之旅 s ...
无插件纯web 3D机房（第四季：大型园区、地球仪效果和其他扩展应用）
前言初次见面的朋友们大家好,这篇文章是"无插件纯web 3D机房"系列的第四季,感兴趣的朋友可从头开始观看,以下是正确的阅读顺序: 无插件纯web 3D机房(第一季:从零开始搭建 ...
自动化回归测试案例评价标准 MeRest
自动化回归测试案例评价标准试图定义不同维度来评价自动化案例的优劣,作为后续我们评判讨论测试框架.测试技术和测试案例编写模式的基础.那什么是好的自动化回归测试案例呢?简而言之,就是投资回报率高的案例,因 ...
java模仿qq好友面板的布局（BoxLayout问题）
.............. JLabel ll = new JLabel(dlg.getNameText() + ":" + dlg.getIPText(), ii[index] ...
DDD：四色原型中Role的 “六” 种实现方式
背景一个实体在不同的上下文中具备不同的职责,如:产品在“生产完成上下文”中具备的一些职责,在“质检相关上下文”中具备另外一些职责.四色原型.DIC和“UML事物模式”在不同的维度阐述了这一情况,在代 ...
DDD：建模原语之四象图（转载的神文）
“模型.状态和行为特征.场景”和“四象图”,建模观的命名与立象. 建模原语:四象图作者:achieveidea@gmail.com 命名:模型.结构特征.行为特征.场景(及其规约). 释义:模型,描 ...
二叉查找树(三)之 Java的实现
概要在前面分别介绍了"二叉查找树的相关理论知识,然后给出了二叉查找树的C和C++实现版本".这一章写一写二叉查找树的Java实现版本. 目录 1. 二叉树查找树2. 二叉查找树的 ...
读Java Concurrency in Practice. 第六章.
这一章开讲任务执行.绝大多数并发程序的工作都可以分解为抽象的.互不相关的工作单元,称之为任务(Task). 使用java线程来执行任务以web服务器的实现举例, 此时将用户的一次连接,当做一个独立的 ...
点餐系统mealsystem.sql
/* Navicat MySQL Data Transfer Source Server : localhost Source Server Version : 50162 Source Host : ...

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

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

随机推荐

热门专题