初识react

react

官网地址http://facebook.hithub.io/react/

---

特点：

1、组件化（所有写法都是组件化）

2、虚拟DOM

3、跨平台--移动端 （自身可以打包  配置需要后台基础）

---

技术栈

react的主体

webpack

Flek布局

react-router路由（做单页面开发的）

redux          view层渲染的技术

……

JSX：增强性的JS语法（增强版JS）

好处：

    HTML代码可以放在JS里面

    不能被浏览器所用 所以要解析JSX

    解析JSX工具：babel

缺点：

    上手难，

    设计思想特别

初级:

下载

bower install react

bower install babel

---

单页面开发

1、引入文件

src:react.js主体文件

src:react-dom.js就是渲染DOM结构的

src:bowser.js解析JSX

script type="text/babel" (在当前script标签里写上这个type才能渲染)

ReactDOM.render(要渲染的组件，要吧组件渲染到哪里)

要渲染的组件 写的是JSX代码

注意：必须也只能有一个根节点

2、写一个头部

创建组件：

React.createClass({

render:function(){

return

}

})

注：如果双标签里面没有东西，可以直接写成单标签闭合

3、可以扩展的组件

可以添加属性

获取属性：this.props.属性名

注：

1、想要用任何变量用{}

2、JSX不是html所以class=>className

3、style={{}}    -----------里面是对象的形式JSON

两种写法

1、const address=this.props.address;

const color=this.props.color;

2、

const {color,address}=this.props;

生命周期

componentWillMonut创建之前

componentDidMonut创建之后

componentWillUpdate更新前

componentDidUpdate更新后

componentWillUnmount卸载前

componentDidUnmount卸载后

react里面搭建项目的工具

create-react-app        facebook官方工具

地址

下载

npm i create-react-app -g（只能用npm下载bower和cnpm不可用）

创建App

create-react-app 项目名称

cd项目名称

npm start