react 的基本使用

这里主要使用的都是ES6的语法(阮一峰的<a href="http://es6.ruanyifeng.com">ES6入门</a>)，我自己也在摸索中，在这个项目中会带一些关于语法的解释。可能有错误，如果有发现错误，欢迎指错，谢谢。

现在的前端主要流行工程化，模块化。react就是这样一个框架。框架主要是编程思想的体现。

react的主要的思想就是组件化，模块化。整个项目在之前也说过会使用react和react-reflux来做项目。react充当的是view层的作用，实现view的模块化。react-reflux 来实现代码的解耦，或者说是一个mvc的框架吧。

对于react的学习资源主要是看<a href="http://www.ruanyifeng.com/blog/">阮一峰</a>的文字,这里是<a href="http://www.ruanyifeng.com/blog/2015/03/react.html">react入门实例教程</a>
我这里直接从一个小的项目开始，会涵盖一些react的知识点，碰到了再单独解释。

一、 helloworld

coding的过程都是从helloworld开始的。我们也从helloworld开始。

react component 的class 要大写开头，所以注意要HelloWorld

1、 创建一个名字叫HelloWorld.js 代码

import React from 'react'

export class HelloWorld extends React.Component {  
constructor(props){  
  super(props);  
}  
render(){ 
   return <h1>hello world {this.props.name}</h1>;  
}
};

2、在Main.js

import {HelloWorld} from './HelloWorld.js'

class AppComponent extends React.Component {  
render() {   
return (     
<div className="index">      
<img src={yeomanImage} alt="Yeoman Generator" />    
          <HelloWorld/>     
</div>   
);  
}}

3、查看运行效果

helloworld.png

4、语法解析

// es6 总共有6种创建变量的命令
//如下：
//  let 命令 const 命令 var 命令 function 命令
//  import命令 和 export 命令
//  import {} export{} 导入接口和导出接口的意思，能够很好的实现模块化

import React from 'react'

export class HelloWorld extends React.Component {  

// constructor 就是react的初始化函数

constructor(props){  
  super(props);  
}  

// render就是讲 下面return的模板转换成 HTML语言，把并插入节点，这个例子就是讲先的<h1>标签插入到Main.js的节点下
render(){ 
   return <h1>hello world {this.props.name}</h1>;  
}
};

这样我们就可以最简单的使用了react 创建了一个react 组件并且使用了。