React初步学习

一、了解ReactJS：

现在最热门的前端框架有AngularJS、React、Bootstrap等，其中ReactJS独特的Virtual DOM，很具有创新性。

React 起源于 Facebook的内部项目，因为该公司对市场上所有 JavaScript MVC框架，都不满意，就决定自己写一套，用来架设 Instagram的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web开发的主流工具。

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

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

 

下载ReactJs地址：http://facebook.github.io/react/downloads.html,将下载下来的压缩包解压后，我们新建一个html文件，引用react.js和JSXTransformer.js这两个js文件。html模板如下

  
    
    
  
  
    

    
      //在此处编写代码
    
  

 

其中引用JSXTransformer.js是将JSX语法转换成JavaScript语法。凡是使用JSX 的地方，都要加上 type="text/jsx" 。

 

 

 

二、深入了解

1、

以上代码为简单的页面中展示Hello,world!的代码。

 

在JavaScript 代码里写着 XML 格式的代码称为 JSX；可以去 JSX 语法 里学习更多JSX 相关的知识。为了把 JSX 转成标准的 JavaScript，我们用 

PS:某些浏览器无法加载该文件，除非它通过HTTP服务。

 

3、离线转换

要先安装命令行工具（依赖npm）

Npm instal -g react-tools

 

安装完成命令行工具就可以使用

jsx --watch src/ build/

修改build/helloworld.js文件自动转换成标准的JavaScript文件。

 

 

三、制作组件

1、封装第一个commentBox：

var CommentBox =React.createClass({
render: function(){
return(
Hello,我是发表评论的组件

); } }); React.render( , docuement.getElementById('content') );

 

原生HTML元素名小写字母开头，而自定义的React类名以大写字母开头。

 

React.creatClass()来创建一个新的React组件，Render为重要的方法，其返回一个React组件树，这个渲染的组件最终会被渲染成一个HTML。其中的div标签并不是真正的DOM节点，而是React div的实例，所以React是安全的，不操作HTML，默认阻止了XSS攻击。所以说React并不是返回基本的HTML而是返回创建的组件，然React组件化，这个有点类似于angularJS。

ReactDOM.render()实例化根组件，启动框架把标记注入到第二个参数指定的原声的DOM中。

ReactDOM模块提供了一些DOM相关的方法，而React模块包含了React团队分享的不同平台上的核心工具，如React Native。

 

2、制作组件

//CommentList组件
  var CommentList = React.createClass({
        render: function() {
          return (
            
              Hello, world! I am a CommentList.
            

); } }); //CommentForm组件 var CommentForm = React.createClass({ render: function() { return ( Hello, world! I am a CommentForm.

); } }); //CommentBox包含CommentList和CommentForm var CommentBox = React.createClass({ render: function() { return (

Comments