实例中我们引入了三个库： 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. js 对象深复制，创建对象和继承

    js 对象深复制,创建对象和继承.主要参考高级编程第三版,总结网上部分资料和自己的代码测试心得.每走一小步,就做一个小结. 1.对象/数组深复制 一般的=号传递的都是对象/数组的引用,如在控制台输入 ...

  2. 使用Object.observe 实现数据绑定

    Object.observe API概述 最近,JavaScript的MVC框架在Web开发届非常盛行.在实现MVC框架的时候,一个非常重要的技术就是数据绑定技术.如果要实现模型与视图的分离,就必须要 ...

  3. Docker SSH+NGHINX+MYSQL

    1.添加创建镜像的配置文件      vim Dockerfile      输入以下内容: FROM jdeathe/centos-sshMAINTAINER baxk"xxx@hongh ...

  4. MySQL物理文件组成

    日志文件 错误日志:Error Log 错误日志记录了MySQL运行过程中所有较为严重的警告和错误信息,以及MySQL Server每次启动和关闭的详细信息.在默认情况下,系统记录错误日志的功能是关闭 ...

  5. Unity Shader——Writing Surface Shaders(3)——Surface Shader Lighting Examples

    Surface Shader 光照例子 这里有一些自定义光照模型和Surface Shaders的例子.通常的Surface Shader例子在这里. 由于延迟光照在某些自定义的逐材质光照模型中表现得 ...

  6. Mac 下 Intellij IDEA 2016.1.2+maven+jetty+ JRebel 6.4.3 破解+spring mvc

    准备阶段:  Intellij IDEA 2016.1.2 (官方下载,作者下载的是社区版): JRebel for IntelliJ插件安装,可选择在线安装,在线安装的是最新版,我选择本地安装, 下 ...

  7. .NET软件工程师面试总结

    1.手写画出系统架构图,系统代码架构,有什么技术难点?  2.手写画出系统部署图 CDN(一般购买别人的服务器会自动CDN,他们自己配置就OK啦) 3.asp.net 的session怎么实现会话共享 ...

  8. linux 下 文件权限和文件主

    文件与文件夹的权限和所有者 1.chmod -R 755 file 777 含义与来源: 777含义:分别为:所有者.同组用户.其他用户 7的来源:文件有三种操作模式:读4.写2.执行1,分别值为42 ...

  9. mfc_Demo

    内涵图

  10. C++11：POD数据类型

    版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 啥是POD类型? POD全称Plain Old Data.通俗的讲,一个类或结构体通过二进制拷贝后还能保持其数据不变,那么它就是 ...