React.js入门教程：5种方式创建Hello World应用

ReactJS简介与核心概念

一、ReactJS简介

React是目前前端开发领域非常流行的一个框架。它最初源于Facebook的内部项目，由于对市场上现有的JavaScript MVC框架不满意，团队决定自主研发一套用于搭建Instagram网站的工具。开发完成后，因其良好的实用性，Facebook于2013年5月将其开源。React的设计理念极具创新性，在保持高性能的同时，代码逻辑却相对简洁，因此受到越来越多开发者的关注与使用，被视为未来Web开发的重要工具之一。

ReactJS官网地址：http://facebook.github.io/react/

Github地址：https://github.com/facebook/react

ReactJS中文地址：http://reactjs.cn/react/docs/getting-started.html

React是什么？

React是由Facebook团队开发的一款用于构建用户交互界面的JavaScript库。其源代码由Facebook及社区开发者共同维护，拥有强大的技术后盾。React引入了组件化、JSX语法和虚拟DOM等全新概念。其中，虚拟DOM机制使得组件渲染速度极快，让开发者从繁琐的直接DOM操作中解放出来。通常，React主要承担MVC架构中视图（View）层的角色，配合Flux等状态管理库，可以高效构建大型应用。

ReactJS主要特点

二、ReactJS特点

1，虚拟DOM

利用DOM diff算法，仅更新发生变化的部分，避免全页渲染，从而显著提升效率。

2，组件化

将页面拆分为多个独立组件，每个组件包含自身的逻辑结构与样式。

组件仅维护自身逻辑，状态更新可预测，便于后期维护。

页面由多个组件构成，实现了代码的重用性。

3，单向数据流

数据从顶层组件向子组件单向传递。

数据流向可控，便于追踪和管理状态。

JSX与虚拟DOM基础

三、入门React 编写 Hello，world 首先了解下什么是JSX

React的核心机制之一是虚拟DOM：一种可以在内存中创建的虚拟DOM元素。React通过虚拟DOM减少对真实DOM的操作，进而提升性能。虽然可以通过JavaScript直接创建类似原生DOM的结构，例如：


var child1 = React.createElement('li', null, 'First Text Content');
var child2 = React.createElement('li', null, 'Second Text Content');
var root2 = React.createElement('ul', { className: 'my-list' }, child1, child2);
React.render(
<div>{root2}</div>,
document.getElementById('container5')
);

使用这样的机制，我们完全可以用JavaScript构建完整的界面DOM树，正如我们可以用JavaScript创建真实DOM。但这样的代码可读性并不好，于是React发明了JSX，利用我们熟悉的HTML语法来创建虚拟DOM：


var root =(
<ul className="my-list">
<li>First Text Content</li>
<li>Second Text Content</li>
</ul>
);
React.render(
<div>{root}</div>,
document.getElementById('container6')
);

React Hello World的5种实现方式

四、React 编写Hello，world 入门的5种方式

第1种方式


<div id="example1"></div>
<script type="text/jsx">
React.render( //直接html
<h1 className="classN1" >1 hellow 直接 html world </h1>, 
document.getElementById('example1')
);
</script>

第2种方式


<div id="example2"></div>
<script type="text/jsx">
React.render( //直接创建元素
React.createElement('h1', {className:'classN2'}, '2 Hello, 直接创建元素 world!'), 
document.getElementById('example2')
);
</script>

第3种方式


<div id="example3"></div>
<script type="text/jsx">
var CreateEl=React.createClass({
render:function(){
// return <h1>hellow 组件 创建 html world </h1> //有无括号均可 
return (<h1 className='classN3' >3 hellow 组件 创建 html world </h1>);
}
});
React.render( //组件方式创建元素
<CreateEl/>, 
//或者双括号 <CreateEl></CreateEl>
document.getElementById('example3')
);
</script>

第4种方式


<div id="example4"></div> 
<script type="text/jsx">
var JsxCreateEl=React.createClass({ // 直接 jsx 方式 创建
render:function(){
return (
React.createElement('h1', {className: "classN4"},"4 Hello, 直接 jsx 方式 创建 world! ")
)
}
});
React.render( //组件方式创建元素
React.createElement(JsxCreateEl, null), 
document.getElementById('example4')
);
</script>

第5种方式


<div id="example5"></div> 
<script type="text/jsx">
var Hello=React.createClass({ // 模板 Hello 
render:function(){
return (<span>{this.props.data}</span>)
}
});
var World=React.createClass({ // 模板 world 
render:function(){
return (<span> 和 World 模板拼接</span>)
}
});
React.render( // 2个 模板 组件方式创建元素
<h1 className="classN5" >
<Hello data='5 hello' />
<World />
</h1>, 
document.getElementById('example5')
);
</script>

代码示例与结果展示

五、上结果图

附上代码：


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />
</head>
<body>
<style>
*{ margin:0; padding:0;}
body{ background:#333;}
#box{ background:url(loveImg/QioA-fxehfqi8208393.jpg) no-repeat center top; width:550px; border:8px solid #fff; -webkit-box-sizing:border-box; margin:50px auto;}
#example1,#example2,#example3,#example4,#example5{ margin:20px auto; width:100%; background:rgba(255,255,255,.3); padding:5px 10px; font-size:13px; color:#f1f1f1;-webkit-box-sizing:border-box; }
</style>
<div id="box">
<div id="example1"></div>
<script type="text/jsx">
React.render( //直接html
<h1 className="classN1" >1 hellow 直接 html world </h1>, 
document.getElementById('example1')
);
</script>
<div id="example2"></div>
<script type="text/jsx">
React.render( //直接创建元素
React.createElement('h1', {className:'classN2'}, '2 Hello, 直接创建元素 world!'), 
document.getElementById('example2')
);
</script>
<div id="example3"></div>
<script type="text/jsx">
var CreateEl=React.createClass({
render:function(){
// return <h1>hellow 组件 创建 html world </h1> //有无括号均可 
return (<h1 className='classN3' >3 hellow 组件 创建 html world </h1>);
}
});
React.render( //组件方式创建元素
<CreateEl/>, 
//或者双括号 <CreateEl></CreateEl>
document.getElementById('example3')
);
</script>
<div id="example4"></div> 
<script type="text/jsx">
var JsxCreateEl=React.createClass({ // 直接 jsx 方式 创建
render:function(){
return (
React.createElement('h1', {className: "classN4"},"4 Hello, 直接 jsx 方式 创建 world! ")
)
}
});
React.render( //组件方式创建元素
React.createElement(JsxCreateEl, null), 
document.getElementById('example4')
);
</script>
<div id="example5"></div> 
<script type="text/jsx">
var Hello=React.createClass({ // 模板 Hello 
render:function(){
return (<span>{this.props.data}</span>)
}
});
var World=React.createClass({ // 模板 world 
render:function(){
return (<span> 和 World 模板拼接</span>)
}
});
React.render( // 2个 模板 组件方式创建元素
<h1 className="classN5" >
<Hello data='5 hello' />
<World />
</h1>, 
document.getElementById('example5')
);
</script>
</div>
<script src="build/react.min.js"></script>
<script src="build/JSXTransformer.js"></script>
</body>
</html>

React核心术语解析

下面给大家补充点知识：

React 术语

React Elements

代表 HTML 元素的 JavaScript 对象。这些 JavaScript 对象最后被编译成对应的 HTML 元素。

Components

封装 React Elements，包含一个或者多个 React Elements。 Components 用于创建可以复用的 UI 模块，例如分页，侧栏导航等。

JSX

JSX 是 React 定义的一种 JavaScript 语法扩展，类似于 XML 。 JSX 是可选的，我们完全可以使用 JavaScript 来编写 React 应用，不过 JSX 提供了一套更为简便的方式来写 React 应用。

Virtual DOM

Virtual DOM 是一个模拟 DOM 树的 JavaScript 对象。 React 使用 Virtual DOM 来渲染 UI，同时监听 Virtual DOM 上数据的变化并自动迁移这些变化到 UI 上。

React.js入门：创建Hello World的5种实现方式详解