在React.js的开始示例教程中创建hello world的五种方法

一、ReactJS简介。

React是最近非常流行的前端开发框架。React源于脸书的内部项目，因为公司对市场上所有的JavaScript MVC框架都不满意，所以决定写一套建立Instagram网站的方案。做好之后发现这套东西很好用，2013年5月就开了。因为React的设计思路极其独特，是革命性的创新，性能出众，但代码逻辑非常简单。因此，越来越多的人开始关注和使用它，认为它可能是未来Web开发的主流工具。

反应堆的官方网站地址：http://facebook.github.io/react/.

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

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

什么是反应？

React是一个JS库，由在脸书工作的优秀程序员开发，用于开发用户界面。源代码由脸书和社区中优秀的程序员维护，因此背后有非常强大的技术团队提供技术支持。React带来了很多新的东西，比如组件化、JSX、虚拟DOM等等。它提供的虚拟DOM让我们的渲染组件呈现得非常快，让我们从频繁操作DOM的繁重工作中解脱出来。了解React的人都知道，它的工作更侧重于MVC中的V层，您可以通过组合Flux等其他应用程序轻松构建强大的应用程序。

第二，反应堆的特点。

1、虚拟DOM。

使用DOM diff算法，只更新区分部分，不渲染整个页面，提高了效率。

2.组件化。

页面分为几个组件，包含逻辑结构和样式。

组件只包含自己的逻辑，在更新组件时可以预测，有利于维护。

可以通过拆分多个组件来重用该页面。

3.单向数据流。

数据从顶层组件传递到子组件。

可控数据

第三，词条React写道Hello，世界首先了解JSX是什么。

React的核心机制之一是虚拟DOM:可以在内存中创建的虚拟DOM元素。React使用虚拟DOM来减少对实际DOM的操作，提高性能。与真实的原生DOM类似，虚拟DOM也可以由JavaScript创建，例如：

var child 1=react . create element(' Li '，null，'第一个文本内容')；var child 2=react . create element(' Li '，null，'第二个文本内容')；var root 2=react . create element(' ul '，{ className: 'my-list' }，child1，child 2)；React.render(div{root2}/div，document . getelementbyid(' container 5 '))；有了这个机制，我们可以用JavaScript构建一个完整的接口DOM树，就像我们可以用JavaScript创建一个真实的DOM一样。然而，这段代码的可读性并不好，所以React发明了JSX，它使用熟悉的HTML语法来创建虚拟DOM:

var root=(ul class name=' my-list ' Li第一个文本内容/li第二个文本内容/Li/ul)；React.render(div{root}/div，document . getelementbyid(' container 6 '))；4.五种方式写你好，世界条目由反应。

第一条路。

Div id=' example1'/div脚本类型=' text/jsx ' react . render(//direct html h1 class name=' class n1 ' 1 hellow direct html world/h1，document . getelementbyid(' example 1 '))；/编写第二种方法。

Div id=' example2'/div脚本类型=' text/jsx ' react . render(//直接创建元素react.createelement ('h1 '，{classname:' classn2'}，' 2hello，直接创建元素世界！')，document . getelementbyid(' example 2 ')；/编写第三种方式的脚本。

div id=' example 3 '/div script type=' text/jsx ' var createel=react . createclass({ render : function(){//return h1 hellow组件创建html world /h1 //可以不带括号返回(h1类名=' classn3 ' 3hellow组件创建html world/h1)；}});react . render(//create element CreateEl/，//或双括号CreateEl/createddocument . getelementbyid(' example 3 '))；/编写第四种方式的脚本。

div id='example4'/div脚本类型=' text/jsx ' var JsxCreateEl=react。createclass({//直接小艾方式创建render :函数(){ return(react。createelement(' h1 '，{className: 'classN4'}，' 4 Hello，直接小艾方式创建世界!'))}});React.render(//组件方式创建元素做出反应。创建元素(JsxCreateEl，null)，文档。getelementbyid('示例4 ')；/script第5种方式

div id='example5'/div脚本类型=' text/jsx ' var Hello=react。创建类({//模板hello render :函数(){ return(span { this。道具。data }/span)} })；var World=React.createClass({ //模板world render :函数(){ return(span和世界模板拼接/span)} })；React.render(//2)个模板组件方式创建元素h1 ' Hello数据=' 5 Hello '/World//h1，文档。getelementbyid('示例5 ')；/script五、上结果图

附上代码：

！doctype html html ownerta charset=' utf-8 '标题无标题文档/title meta name=' viewport ' content=' initial-scale=1.0，user-scale=no，max-scale=1，width=device-width '/header dystyle * { margin :0；划水：0;}正文{ background: # 333} #框{ background : URL(LoVeimg/QiOa-fxehfqi 8208393。jpg)无重复中心顶部；宽度宽度：550像素边界：8像素实心# fff-web套件-盒子-尺寸：边框-盒子；余量：50px汽车；} #范例1、#范例2、#范例3、#范例4、#范例{ margin:20px auto宽度：100%;背景技术：rgba(255，255，255，3);padd :5 px 10px font-size :13 px；颜色： # f1 f1-web套件-盒子-尺寸为：边框-盒子；}/style div id=' box ' div id=' example 1 '/div脚本类型=' text/jsx ' react。渲染(//直接html h1 CLaSS name=' CLaSS n1 ' 1 hellow直接html world /h1，文档。getelementbyid('示例1 ')；/script div id=' example 2 '/div script type=' text/jsx ' react。渲染(//直接创建元素React.createElement('h1 '，{className:'classN2'}，' 2 Hello，直接创建元素世界！)，文档。getelementbyid('示例2 ')；/script div id=' example 3 '/div script type=' text/jsx ' var CreateEl=react。create class({ render : function(){//返回h1 hellow组件创建html world /h1 //有无括号均可返回(h1类名你好组件创建html world/h1)；}});React.render(//组件方式创建元素CreateEl/，//或者双括号CreateEl/createddocument。getelementbyid('示例3 ')；/scriptdiv id='example4'/div脚本类型=' text/jsx ' var JsxCreateEl=react。创建类({//直接小艾方式创建render :函数(){ return(react。createelement(' h1 '，{className: 'classN4'}，' 4 Hello，直接小艾方式创建世界！'))}});React.render(//组件方式创建元素做出反应。创建元素(JsxCreateEl，null)，文档。getelementbyid('示例4 ')；/scriptdiv id='example5'/div脚本类型=' text/jsx ' var Hello=react。创建类({//模板hello render :函数(){ return(span { this。道具。data }/span)} })；var World=React.createClass({ //模板world render :函数(){ return(span和世界模板拼接/span)} })；React.render(//2)个模板组件方式创建元素h1 ' Hello数据=' 5 Hello '/World//h1，文档。getelementbyid('示例5 ')；/script/div script src=' http : build/react。量滴js '/script script src=' http : build/jsxtransformer。js '/脚本/正文/html下面给大家补充点知识：

反应术语

反应元素

代表超文本标记语言元素的Java脚本语言对象。这些Java脚本语言对象最后被编译成对应的超文本标记语言元素。

成分

封装反应元素，包含一个或者多个反应元素。成分用于创建可以复用的用户界面模块，例如分页，侧栏导航等。

小艾

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

虚拟数字正射影像图

虚拟数字正射影像图是一个模拟数字正射影像图树的Java脚本语言对象做出反应使用虚拟数字正射影像图来渲染UI，同时监听虚拟数字正射影像图上数据的变化并自动迁移这些变化到用户界面上。