21-React的学习

React的学习

---

React概述：

• React是一个用于构建用户界面的JavaScript库。

• React主要用于构建UI，很多人认为React是MVC中的V（视图）。

• React起源于Facebook 的内部项目，用来假设Instagram的网站，并与2013年5月开源。

• React拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

React特点：

• 1.声明式设计—React采用声明范式，可以轻松描述应用。

• 2.高效—React通过对DOM的模拟，最大限度地减少与DOM的交互。

• 3.灵活—React可以与已知的库或框架很好的配合。

• 4.JSX—JSX是 JavaScript语法的扩展。React开发不一定使用JSX，但我们建议使用它。

• 5.组件—通过React构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

• 6.单向响应的数据流—React实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

基础准备

在开始学习React之前，您需要具备以下的基础知道：

• ·CSS

• ·HTML5

• ·JavaScript

React资源

1.官网：http://facebook.github.io/react/

2.React中文：http://reactjs.cn/react/docs/getting-started-zh-CN.html

3.React中文资料：http://wiki.jikexueyuan.com/project/react/getting-started.html

4.React可使用的dom组件:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

React开发环境

• 1.node.js环境

• 2.npm install --save react react-dom

• 3.webpack 配置
  
  //react-dom : 作为DOM相关的渲染路径的入口点

代码演示

//es5
let HelloworldEs5 = React.createClass({
    render(){
      return(
        <h2>HelloWorld(es5)</h2>
      )
    }
});
//es6
class Helloworld extends Component{
  construct(){
  }
  render(){
    return (
      <div>
        <h1>这是一个helloworld展示(es6)</h1>
        <HelloworldEs5/>
      </div>
    )
  }
}
ReactDOM.render(
  <Helloworld/>,
  document.getElementById('root')
);