实例中我们引入了三个库： react.min.js 、react-dom.min.js 和 browser.min.js：
　　1，react.min.js -React 的 核心库
　　2，react-dome.min.js - 提供与DOM 相关的功能。
　　3，browser.min.js 用于将JSX 语法转化为JavaScript 语法。

　　　ReactDOM.render(
　　　　　　<h1>Hello, world!</h1>,
　　　　　　document.getElementById('example')
　　);
　　注意：如果我们需要使用 JSX，则 <script> 标签的 type 属性需要设置为 text/babel。

　　React 使用 JSX 来替代常规的 JavaScript。
　　JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
　　我们不需要一定使用 JSX，但它有以下优点：
　　JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
　　它是类型安全的，在编译过程中就能发现错误。
　　使用 JSX 编写模板更加简单快速。

使用 JSX
　　JSX 看起来类似 HTML ，我们可以看下实例:
　　　　　　ReactDOM.render(
　　　　　　　　　　<h1>Hello, world!</h1>,
　　　　　　　　　　document.getElementById('example')
　　　　　　);

我们可以在以上代码中嵌套多个 HTML 标签，需要使用一个 div 元素包裹它，实例中的 p 元素添加了自定义属性 data-myattribute，
添加自定义属性需要使用 data- 前缀。
　　　　ReactDOM.render(
　　　　　　<div>
　　　　　　　　<h1>柠檬先生</h1>
　　　　　　　　<h2>欢迎学习 React</h2>
　　　　　　　　<p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
　　　　　　</div>,
　　　　　　document.getElementById('example')
　　　　);

独立文件

　　　　你的 React JSX 代码可以放在一个独立文件上，例如我们创建一个 helloworld_react.js 文件，代码如下：
　　　　　　ReactDOM.render(
　　　　　　　　<h1>Hello, world!</h1>,
　　　　　　　　document.getElementById('example')
　　　　　　);
　　　　然后在 HTML 文件中引入该 JS 文件：
　　　　　　<body>
　　　　　　　　<div id="example"></div>
　　　　　　　　<script type="text/babel" src="helloworld_react.js"></script>
　　　　　　</body>
　　　　我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。实例如下：
　　　　　　<body>
　　　　　　　　<div id="example"></div>
　　　　　　　　<script type="text/babel">
　　　　　　　　　　ReactDOM.render(
　　　　　　　　　　　　<div>
　　　　　　　　　　　　　　<h1>{1+1}</h1>
　　　　　　　　　　　　</div>,
　　　　　　　　　　　　document.getElementById('example')
　　　　　　　　　　);
　　　　　　　　</script>
　　　　　　</body>

在 JSX 中不能使用 if else 语句，单可以使用 conditional (三元运算) 表达式来替代。以下实例中如果变量 i 等于 1 浏览器将输出 true, 如果修改 i 的值，则会输出 false.

　　　　　　<body>
　　　　　　　　<div id="example"></div>
　　　　　　　　<script type="text/babel">
　　　　　　　　　　　　var i = 1;
　　　　　　　　　　　　ReactDOM.render(
　　　　　　　　　　　　　　　　<div>
　　　　　　　　　　　　　　　　　　<h1>{i == 1 ? 'True!' : 'False'}</h1>
　　　　　　　　　　　　　　　　</div>,
　　　　　　　　　　　　　　　　document.getElementById('example')
　　　　　　　　　　　　);
　　　　　　　　</script>
　　　　　　</body>

样式
React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。以下实例演示了为 h1 元素添加 myStyle 内联样式：

　　　　　　<body>
　　　　　　　　<div id="example"></div>
　　　　　　　　<script type="text/babel">
　　　　　　　　　　var myStyle = {
　　　　　　　　　　　　fontSize: 100,
　　　　　　　　　　　　color: '#FF0000'
　　　　　　　　　　};
　　　　　　　　　　ReactDOM.render(
　　　　　　　　　　　　<h1 style = {myStyle}>柠檬先生</h1>,
　　　　　　　　　　　　document.getElementById('example')
　　　　　　　　　　);
　　　　　　　　</script>
　　　　　　</body>

注释
注释需要写在花括号中，实例如下：
　　　　　　ReactDOM.render(
　　　　　　　　<div>
　　　　　　　　　　<h1>柠檬先生</h1>
　　　　　　　　　　{/*注释...*/}
　　　　　　　　</div>,
　　　　　　　　document.getElementById('example')
　　　　);

数组
JSX 允许在模板中插入数组，数组会自动展开所有成员：
　　　　　　<body>
　　　　　　　　<div id="example"></div>
　　　　　　　　<script type="text/babel">
　　　　　　　　　　var arr = [
　　　　　　　　　　　　<h1>柠檬先生</h1>,
　　　　　　　　　　　　<h2>学的不仅是技术，更是梦想！</h2>,
　　　　　　　　　　　　];
　　　　　　　　　　ReactDOM.render(
　　　　　　　　　　　　<div>{arr}</div>,
　　　　　　　　　　　　document.getElementById('example')
　　　　　　　　　　);
　　　　　　　　</script>
　　　　　　</body>

React 组件
接下来我们封住一个输出 "Hello World！" 的组件，组件名为 HelloMessage：
　　　　var HelloMessage = React.createClass({
　　　　　　　　render: function() {
　　　　　　　　　　　　return <h1>Hello World！</h1>;
　　　　　　　　}
　　　　});

　　　　ReactDOM.render(
　　　　　　　　<HelloMessage />,
　　　　　　　　document.getElementById('example')
　　　　);

注意，原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。
除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。

Reactjs 入门基础(一)的更多相关文章

  1. ReactJS入门基础

    渲染这俩字可能在很多地方都见过.但可能不太理解是啥意思. 那么首先我们来理解一下渲染. 渲染 我觉得这样理解比较通俗. 我们做一个汽车,开始是没有喷漆的(没有css) 只是些框框架架(HTML标签). ...

  2. Reactjs 入门基础(三)

    State 和 Props以下实例演示了如何在应用中组合使用 state 和 props .我们可以在父组件中设置 state, 并通过在子组件上使用 props 将其传递到子组件上.在 render ...

  3. Reactjs 入门基础(二)

    如果我们需要向组件传递参数,可以使用 this.props 对象,实例如下: <body> <div id="example"></div> & ...

  4. ReactJS入门指南

    ReactJS入门指南 本文旨在介绍ReactJS的基本知识,并一步步详细介绍React的基本概念和使用方法等,以及相应的Demo.本文在很大程度上参考了React官方文档和官方指南.如果你英语还不错 ...

  5. mybatis入门基础(二)----原始dao的开发和mapper代理开发

    承接上一篇 mybatis入门基础(一) 看过上一篇的朋友,肯定可以看出,里面的MybatisService中存在大量的重复代码,看起来不是很清楚,但第一次那样写,是为了解mybatis的执行步骤,先 ...

  6. 01shell入门基础

    01shell入门基础 为什么学习和使用shell编程 shell是一种脚本语言,脚本语言是相对于编译语言而言的.脚本语言不需要编译,由解释器读取程序并且执行其中的语句,而编译语言需要编译成可执行代码 ...

  7. Markdown入门基础

    // Markdown入门基础 最近准备开始强迫自己写博文,以治疗严重的拖延症,再不治疗就“病入骨髓,司命之所属,无奈何”了啊.正所谓“工欲善其事,必先利其器”,于是乎在写博文前,博主特地研究了下博文 ...

  8. ReactJS入门学习二

    ReactJS入门学习二 阅读目录 React的背景和基本原理 理解React.render() 什么是JSX? 为什么要使用JSX? JSX的语法 如何在JSX中如何使用事件 如何在JSX中如何使用 ...

  9. ReactJS入门学习一

    ReactJS入门学习一 阅读目录 React是什么? React如何制作组件? 理解组件属性props 理解页面中如何渲染数据的 理解从服务器端获取数据及理解state的 回到顶部 React是什么 ...

随机推荐

  1. 一些sql语句的常用总结（重要）

    select primary_flag from tc_contact where primary_flag !=0 select dept_id,dept_name,tree_level,tree_ ...

  2. C&C++ recap

    大一时候学过C++,可惜忘得差不多了,之后也很少用过.当时使用的是windows系统,使用的还是visual C++.当时对计算机并不感冒,也没好好学.最近在R的学习中遇到瓶颈,觉得要捡起曾经的C/C ...

  3. Thrift 个人实战--Thrift 网络服务模型

    前言: Thrift作为Facebook开源的RPC框架, 通过IDL中间语言, 并借助代码生成引擎生成各种主流语言的rpc框架服务端/客户端代码. 不过Thrift的实现, 简单使用离实际生产环境还 ...

  4. 二叉排序树（BST）的建立

    给一个非递归的吧. /* 已知,二叉树存储结构定义见bstree.h,请编写一个算法函数bstree creatBstree(int a[],int n), 以数组a中的数据作为输入建立一棵二叉排序树 ...

  5. Jquery 中的$(this) 和javascript中的this

    this 是 JavaScript 中的关键字. $(this) 可以认为是用 jQuery 包装过 JavaScript 中的 this,包装后 $(this) 就会继承 jQuery 的方法. 本 ...

  6. Java--RuntimeException（运行时异常）

    [转载自]:http://blog.csdn.net/qq7342272/article/details/7940741 java运行时异常是可能在java虚拟机正常工作时抛出的异常. java提供了 ...

  7. nginx配置rewrite

    1. uri  和 url读取区别 区别就是URI定义资源,而URL不单定义这个资源,还定义了如何找到这个资源. 比如说,一个服务器上,到一个文件夹/网页的绝对地址(absolute path)就是U ...

  8. javascript中的this指向问题

    在深入学习JavaScript之后,我们越来越多的会遇到函数或者在对象内部中,对于this的指向问题的疑惑,其实基本上每一个编程语言中都有一个this,这个this的指向都是大同小异,你也可以汉化它的 ...

  9. wdcp的安装扩展模块

    其实就是官方包里面的所有附加模块全部支持啦.~~是在官方的基础上修改的优化了每次都解压缩php源码包,按需解压缩使用方法如下wget http://git.oschina.net/loblog/mem ...

  10. [转]N种内核注入DLL的思路及实现

    内核注入,技术古老但很实用.现在部分RK趋向无进程,玩的是SYS+DLL,有的无文件,全部存在于内存中.可能有部分人会说:“都进内核了.什么不能干?”.是啊,要是内核中可以做包括R3上所有能做的事,软 ...