react学习笔记
首先介绍一个fb家的快速开发react的工具 create-react-app
这个东西依赖node6.0或者更高版本。
关于在ubuntu 14.04上安装node ，可以参考这个链接
发现执行nvm install 6.0会没有任何相应…但是实际上已经安装好了。
接下来安装create-react-app
命令是: npm install –global create-react-app
然后创建一个react app
命令为:create-react-app first_react_app
挂着代理大概需要半小时左右。
或者可以使用淘宝npm镜像:
设置方法为：npm config set registry https://registry.npm.taobao.org，设置完成后，重新执行create-react-app first-app
实现的第一个组件，功能是点击按钮增加计数…
1import React, { Component } from 'react';
2class ClickCounter extends Component{
3 constructor(props){
4 super(props);
5 this.onClickButton = this.onClickButton.bind(this);
6 this.state = {count:0};
7 }
8 onClickButton(){
9 this.setState({count: this.state.count+1});
10 }
1 render(){
2 return(
3 <div>
4 <button onClick={this.onClickButton}>Who am I?</button>
5 <div>
6 click Count: {this.state.count}
7 </div>
8 </div>
1 )
2 }
3}
4export default ClickCounter;
JSX是JS的语法扩展。JSX中使用的元素包含html中的元素和React中的组件。React 判断一个元素是 HTML 元素还是 React 组件的原则就是看第一个字母是否大 写。
React设计上的分离是逻辑上的分离，而不是技术上的分离。如果是要实现一件事，就会把CSS,html,JS三种语言混在一起。
React的数据分为prop(property)和state两种。区别是:
* prop 用于定义外部接口, state 用于记录内部状态;
* prop 的赋值在外部世界使用组件时, state 的赋值在组件内部;
* 组件不应该改变 prop 的值,而 state 存在的目的就是让组件来改变的
扩展属性:
1function App1() {
2 return <Greeting firstName="Ben" lastName="Hector" />;
3}
1function App2() {
2 const props = {firstName: 'Ben', lastName: 'Hector'};
3 return <Greeting {...props} />;
4}
参考资料: