实例中我们引入了三个库： 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. Linux内核分析——跟踪分析Linux内核的启动过程

    万子惠 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程 实验部分 menu程序: cd LinuxKernel/ qemu -kernel linux-3.18.6/a ...

  2. java中的final关键词

    参考资料: http://www.cnblogs.com/dolphin0520/p/3736238.html final是个修饰词,可以修饰类.方法.变量. 1. 修饰类 修饰类,就表示这个类不能被 ...

  3. ssh隧道（端口转发）

    本地转发: ssh -Nf -L [bind_address:]port:host:hostport sshServer -Nf 后台运行 -L 本地转发 [bind_address] 绑定本地地址, ...

  4. 蓝牙协议栈中的 OSAL

    蓝牙协议栈里的操作系统叫做 OSAL(操作系统抽象层).它并非一个真正意义上的操作系统,它只是实现了操作系统的一些功能,如任务切换.内存管理. OSAL 产生的根源:基于蓝牙协议栈开发的产品,实际上是 ...

  5. Centreon 监控报警

    1.系统更新:yum update 2.安装组件:yum install -y httpd php-pear php php-mysql php-gd php-ldap php-xml php-mbs ...

  6. next().value和next().done

    function* sayHello() { var first, second; yield first = '111'; yield second = '222'; yield third = ' ...

  7. python---生成随机密码

    #简短地生成随机密码,包括大小写字母.数字,可以指定密码长度 from random import choice import string #python3中为string.ascii_letter ...

  8. Intellij Idea系列之JavaSE项目的创建（一）

    Intellij Idea系列之JavaSE项目的创建(一) 一.Intellij Idea于 Intellij Idea是捷克的Jetbrain公司的一款优秀的针对Java程序员的IDE,其自从问世 ...

  9. UML精粹2 - 开发过程

    迭代和瀑布过程 两者的本质区别是,你如何将一个项目分解为更小块. 瀑布风格基于活动来分解项目.为了构建软件,你不得不做某些活动:需求分析.设计.编码和测试.为期一年的项目可能有2个月的分析阶段,然后是 ...

  10. netbean7.2 改变maven插件的中心库地址

    今天内网安装netbeans 7.2(因为所使用的JDK版本问题),但安装上去之后发现build failure,提示说仓库主机找不到,因为提示上说的是apache的仓库地址.看执行maven的输出可 ...