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. java常量池存放在哪里

    运行以下方法: public class Test { public static void main(String[] args) { String str = "abc"; c ...

  2. hdu3397 Sequence operation

    感觉自己好像搞定了一个不得了得题呢.. 对于这种区间性质合并的线段树,对于每个节点保存一下当前区间内1的个数,左右边界相邻的1个的个数与0的个数,还有当前区间最大连续的1和0的个数. 合并的时候的细节 ...

  3. xxxx-xx-xx的时间的加减

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  4. django重定向是如何实现的,用的什么状态码?

    1,使用HTTPresponseredirect from django,http,import HttpResponseRedirect 2,使用redirct 和reverse 状态码:301和3 ...

  5. 前端、数据库、Django简单的练习

    一.前端 1.前端页面由哪几层构成,分别是什么,作用是什么? 分为:结构层(html),表示层(css),行为层(js). 结构层 超文本标记语言.由HTML或XHTML之类的标记语言负责创建.标签, ...

  6. MySql 链接字符串

    MySql连接字符串总结 1.本地数据库连接    <connectionStrings>        <add name="ConnectionString" ...

  7. C#内存流示例----->用内存流来读取图片

    背景:一个窗体.一个pictureBox.一个lable[没有选择图片,lable的text为"图片未选择"],在pictureBox1的Click事件中添加如下代码: priva ...

  8. Telerik 控件本地化

    一共四种方式: Localization using built-in resources Resource keys Localization using ResourceManager Local ...

  9. apache出现You don't have permission to access / on this server. 提示

    今天在新的linux上跑原来的代码,使用的虚拟主机的模式进行操作.几个相关的网站放在一个文件里,想法是通过网站列出的目录进行相应的网站进行操作.一切设置完成后,在浏览器中运行出现在You don't ...

  10. java二叉排序树

    二叉排序树又称二叉查找树.它或者是一颗空树,或者是具有如下性质的二叉树: 1.如果左子树不空,那么左子树上的所有节点均小于它的根节点的值: 2.如果右子树不空,那么右子树上的所有节点均大于它的根节点的 ...