初识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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • react官网:https://facebook.github.io/react/内容来源:http://www....
    Lusia_阅读 520评论 0 0
  • 深入JSX date:20170412笔记原文其实JSX是React.createElement(componen...
    gaoer1938阅读 8,100评论 2 35
  • 最近看了一本关于学习方法论的书,强调了记笔记和坚持的重要性。这几天也刚好在学习React,所以我打算每天坚持一篇R...
    gaoer1938阅读 1,717评论 0 5
  • React is an engine for building composable user interface...
    赛亚人之神阅读 137评论 0 0
  • 1、虚拟DOM:降低了算法复杂度,提升速度,主要是diff computation 2、组件(快速复用) 3、学会...
    94小辉阅读 242评论 0 0