React.js入门笔记 创建hello world 的6种方式

一、ReactJS简介

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

二、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(
     
{root2}
,
   document.getElementById('container5')
 );

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

var root =(
  

    
First Text Content
    
Second Text Content
  
);


 React.render(
     
{root}
,
   document.getElementById('container6')
 );

 上图2块 代码生成的 Dom 结构视图预览；

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

      首先 引入js 类库 或者点击此处 使用 在线CND   注意一下版本  我的是 v0.13.0

  第1种方式       直接html

第2种方式     直接创建元素

第3种方式   直接  JSX 方式

第4种方式    jsx + createElement

第5种方式  两个组件  叠加方式 

第6种方式  补充说明 用的不多，需要  browser.min.js 类库 

五、上结果图

附上代码：