React学习网站

React官方英文网站：http://reactjs.cn/react/docs/top-level-api.html

React官方中文网站：http://www.css88.com/react/docs/getting-started.html

阮一峰关于React的网站：http://www.ruanyifeng.com/blog/2015/03/react.html

极客学院：http://wiki.jikexueyuan.com/project/react/animation.html

简单的入门文章：http://www.tuicool.com/articles/eQ3yQzi

一、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的更多相关文章

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

    个人理解:接触的JSX就是在React中render方法里面的js,因为里面只能有一个节点,所以你写的东西都在一个div中,要有js所以通过JSX来表达.(个人菜鸟理解,欢迎指正) React 使用 ...

  2. React入门-JSX和虚拟dom

    1.JSX理解 举例: const element = <h1>Hello, world!</h1>; 这被称为 JSX,是一个 JavaScript 的语法扩展.建议在 Re ...

  3. react入门（3）

    在第一篇文章里我们介绍了jsx.组件.css写法  点击查看react入门(1) 第二篇文章里我们介绍了事件.this.props.children.props....other.map循环  点击查 ...

  4. react入门（1）

    这篇文章也不能算教程咯,就算是自己学习整理的笔记把. 关于react一些相关的简介.优势之类的,随便百度一下一大堆,我就不多说了,可以去官网(http://reactjs.cn/)看一下. 这片主要讲 ...

  5. react入门（4）

    首先还是来回顾一下前三篇讲的内容 react入门(1): jsx,组件,css写法 react入门(2):事件,this.props.children,props,...other react入门(3 ...

  6. React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  7. React入门 (1)—使用指南（包括ES5和ES6对比）

    前言 本篇会简明扼要的介绍一下React的使用方法.代码会用JSX+ES5和JSX+ES6两种方式实现. React简介 React来自Facebook,于2013年开源.至今不断修改完善,现在已经到 ...

  8. 2015年最热门前端框架React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  9. React入门2

    React 入门实例教程 最简单开始学习 JSX 的方法就是使用浏览器端的 JSXTransformer.我们强烈建议你不要在生产环境中使用它.你可以通过我们的命令行工具 react-tools 包来 ...

随机推荐

  1. 十家国内知名的EDM服务提供商

    国内的EDM服务商多若繁星.下面博主为大家介绍十家国内知名的EDM服务提供商. 一.Webpower 威勃庞尔. 官方网站是:www.webpower.asia.作为全球领先的邮件营销解决方案提供商, ...

  2. SharePoint 2010中重置windows 活动目录(AD)域用户密码的WebPart（免费下载）

    由于SharePoint 2013推出不久,并非所有的企业都会升级到SharePoint 2013的,毕竟升级不是打打补丁这么简单,更多的企业还是使用Sharepoint 2010版本的,因此本人自行 ...

  3. 【C语言】zz优先队列的实现

    做一个题目时,看见解法中使用了优先队列,http://hawstein.com/posts/3.6.html . 颇为好奇,找资料学习了一下,顺便做个摘要. c++的用法: 转自:http://blo ...

  4. 破解android手机图形锁

    安卓手机的图形锁包括3*3,4*4,5*5的点阵,按次序连接数个点从而达到锁定/解锁的功能.以3*3为例,最少需要连接4个点,最多能连接9个点.在我们进行绘制图形的过程中,每选中这9个点中的一个点,实 ...

  5. 编译Libgdiplus遇到的问题

    https://github.com/mono/libgdiplus/releases 下载最新版本 解压并执行  ./autogen.sh,在执行此步时遇到如下问题,并帖出解决办法   问题:执行  ...

  6. selenium webdriver (python) 第二版

    前言 对于大多软件测试人员来讲缺乏编程经验(指项目开发经验,大学的C 语言算很基础的编程知识)一直是难以逾越的鸿沟,并不是说测试比开发人员智商低,是国内的大多测试岗位是功能测试为主,在工作时间中,我们 ...

  7. django 快速实现文件上传

    前言 对于web开来说,用户登陆.注册.文件上传等是最基础的功能,针对不同的web框架,相关的文章非常多,但搜索之后发现大多都不具有完整性,对于想学习web开发的新手来说就没办法一步一步的操作练习:对 ...

  8. Jellycons – iOS 8 图标下载（PNG, SKETCH）

    Jellycons 这套由 LoveUI.co 设计图标包括30款扁平化,圆滑,丰富多彩的 iOS 8 应用程序图标,可以用于于个人和商业项目的使用.另外,PNG 格式包含11种尺寸(1024px, ...

  9. SSL握手步骤【收藏】

    http://www.codeweblog.com/ssl-handshake-process-of-interaction-and/ SSL to send a message in the fol ...

  10. 第一次接触终极事务处理——Hekaton

    在这篇文章里,我想给出如何与终极事务处理(Extreme Transaction Processing (XTP) )的第一次接触,即大家熟知的Hakaton.如果你想对XTP有个很好的概况认识,我推 ...