实例中我们引入了三个库： 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. 从零开始学习Node.js例子四 多页面实现数学运算

    app-node.js ; var http = require('http'); var htutil = require('./htutil'); var server = http.create ...

  2. 从零开始学习Node.js例子三 图片上传和显示

    index.js var server = require("./server"); var router = require("./router"); var ...

  3. Linux中查看文件编码

    在Linux中查看文件编码可以通过以下几种方式:1.在Vim中可以直接查看文件编码:set fileencoding即可显示文件编码格式.如果你只是想查看其它编码格式的文件或者想解决用Vim查看文件乱 ...

  4. XML Schema的基本语法(转)

    XML Schema的基本语法(转) XSDL(XML Schema定义语言)由元素.属性.命名空间和XML文档种的其他节点构成的. 一.XSD中的元素 XSD文档至少要包含:schema根元素和XM ...

  5. How to browse the entire documentation using XCode 5 Documentation and API Reference ?

    file:///Users/yangiori/Library/Developer/Shared/Documentation/DocSets/com.apple.adc.documentation.Ap ...

  6. java 代码的细节优化

    前言 代码优化,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑 的,就像大海里面的鲸鱼一样,它吃一条小虾米有用吗?没用 ...

  7. 关于配置服务器（IIS7）

    服务器Server2003 ,无限开机动画慢动作重播,一怒而重装server2008 然,重点就是系统装好了 IIS装好了 ,发布网站 开始各种错了!!! 1.第一个错 额,错误信息说 :由于权限不足 ...

  8. frame和bounds区别

    学习ios开发有一段时间了,项目也做了两个了,今天看视频,突然发现view的frame和bound两个属性,发现bound怎么也想不明白,好像饶你了死胡同里,经过一番尝试和思考,终于弄明白bound的 ...

  9. XPath注入笔记

    XPath注入 XQuery注入 测试语句:'or '1'='1 利用工具: Xcat介绍 Xcat是python的命令行程序利用Xpath的注入漏洞在Web应用中检索XML文档 下载地址:https ...

  10. Java 报表之JFreeChart(第二讲)

    1.利用 JFreeChart 创建按颜色分类的水果销售报表 package com.wcy.chart.bar; import javax.servlet.http.HttpSession; imp ...