Note: This article is available in Chinese only. 本文暂无英文版本。
View original
首先介绍一个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 }
11
12 render(){
13 return(
14 <div>
15 <button onClick={this.onClickButton}>Who am I?</button>
16 <div>
17 click Count: {this.state.count}
18 </div>
19 </div>
20
21 )
22 }
23}
24export 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}
4
5function App2() {
6 const props = {firstName: 'Ben', lastName: 'Hector'};
7 return <Greeting {...props} />;
8}参考资料: