React.js入门实例教程之创建hello world 的5种方式


Posted in Javascript onMay 11, 2016

一、ReactJS简介

React 是近期非常热门的一个前端开发框架。React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在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的优秀程序员开发出来的用于开发用户交互界面的JS库。其源码由Facebook和社区优秀的程序员维护,因此其背后有着非常强大的技术团队给予技术支持。React带来了很多新的东西,例如组件化、JSX、虚拟DOM等。其提供的虚拟DOM使得我们渲染组件呈现非常之快,让我们从频繁操作DOM的繁重工作之中解脱。了解React的人都知道,它做的工作更多偏重于MVC中的V层,结合其它如Flux等一起,你可以非常容易构建强大的应用。

二、ReactJS特点

1,虚拟DOM

通过DOM diff算法,只会更新有差异化的部分,不用渲染整个页面,从而提高效率

2,组件化

把页面分成若干个组件,组件中包含逻辑结构和样式

组件只包含自身逻辑,更新组件的时候可以预测,利于维护

页面拆分多个组件,可以做到重用

3,单向数据流

数据是从顶层组件传递到子组件中

数据可控

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

React的核心机制之一就是虚拟DOM:可以在内存中创建的虚拟DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。类似于真实的原生DOM,虚拟DOM也可以通过JavaScript来创建,例如:

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种方式

第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>

五、上结果图

React.js入门实例教程之创建hello world 的5种方式

附上代码:

<!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 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 上。

Javascript 相关文章推荐
javascript 数字格式化输出的实现代码
Dec 10 Javascript
javascript中数组的concat()方法使用介绍
Dec 18 Javascript
JavaScript数据结构与算法之链表
Jan 29 Javascript
Angular ng-class详解及实例代码
Sep 19 Javascript
js获取元素的标签名实现方法
Oct 08 Javascript
flexslider.js实现移动端轮播
Feb 05 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
Feb 09 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
Aug 09 Javascript
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
layui实现左侧菜单点击右侧内容区显示
Jul 26 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 #Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 #Javascript
使用JavaScript实现ajax的实例代码
May 11 #Javascript
jQuery的框架介绍
May 11 #Javascript
jQuery链式调用与show知识浅析
May 11 #Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
May 11 #Javascript
Extjs4.0 ComboBox如何实现三级联动
May 11 #Javascript
You might like
php 魔术函数使用说明
2010/02/21 PHP
php短域名转换为实际域名函数
2011/01/17 PHP
如何使用PHP计算上一个月的今天
2013/05/23 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
jQuery.Autocomplete实现自动完成功能(详解)
2010/07/13 Javascript
JS控制输入框内字符串长度
2014/05/21 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
2016/06/17 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
在Vue项目中,防止页面被缩放和放大示例
2019/10/28 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
2020/12/04 Vue.js
[02:12]探秘2016国际邀请赛中国区预选赛选手房间
2016/06/25 DOTA
Python Web框架Flask信号机制(signals)介绍
2015/01/01 Python
PYTHON基础-时间日期处理小结
2018/05/05 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
Python运行异常管理解决方案
2020/03/09 Python
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
英国假睫毛购买网站:FalseEyelashes.co.uk
2018/05/23 全球购物
蔻驰英国官网:COACH英国
2020/07/19 全球购物
几道Web/Ajax的面试题
2016/11/05 面试题
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
编辑硕士自荐信范文
2013/11/27 职场文书
大学生冰淇淋店商业计划书
2014/01/14 职场文书
霸气队列口号
2014/06/18 职场文书
法定代表人身份证明书
2014/09/10 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
redis 限制内存使用大小的实现
2021/05/08 Redis
MySQL如何解决幻读问题
2021/08/07 MySQL
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python