[React] 03 - Intro: react.js in twelve demos

Ref: React 入门实例教程

这算什么，react学习例子的十二门徒？哈哈

---

 

如何运行别人的react项目?

Ref: 【React全家桶入门之CODE】项目代码与使用方法

使用git克隆项目到本地：git clone https://github.com/awaw00/react-curd.git。

如今你获得的是整个项目最新版本的代码。

(1) 执行npm i roadhog json-server -g 安装全局工具。

(2) 执行npm i 来安装项目依赖。

(3) 执行npm run server 启动服务器，而后再执行npm run dev 启动客户端。

 

【npm start启动服务器便可】

 

HTML 模板，以及ReactDOM.render()

 

能够将 src 子目录的 js 文件进行语法转换，转码后的文件所有放在 build 子目录

$ babel src --out-dir build

 

  

JSX 语法

遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；

遇到代码块（以 { 开头），就用 JavaScript 规则解析。

 

 

数组变量

 

 

组件

组件类的第一个字母必须大写，不然会报错，好比HelloMessage不能写成helloMessage。

组件类只能包含一个顶层标签，不然也会报错。

由于 class 和 for 是 JavaScript 的保留字，因此：

(1) class 属性须要写成 className ;

(2) for 属性须要写成 htmlFor ;

 

 

this.props.children

这里须要注意， this.props.children 的值有三种可能：

(1) 若是当前组件没有子节点，它就是 undefined ;

(2) 若是有一个子节点，数据类型是 object ；

(3) 若是有多个子节点，数据类型就是 array 。

因此，处理 this.props.children 的时候要当心。

 

 

 

PropTypes

 

 

获取真实的DOM节点

获取用户的输入，必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。

为了作到这一点，文本输入框必须有一个 ref 属性，

而后 this.refs.[refName] 就会返回这个真实的 DOM 节点。 

除了 Click 事件之外，还有 KeyDown 、Copy、Scroll 等，完整的事件清单请查看官方文档。

 

 

this.state

将组件当作是一个状态机，(1) 一开始有一个初始状态，(2) 而后用户互动，致使状态变化，(3) 从而触发从新渲染 UI 。

(1) this.props 表示那些一旦定义，就再也不改变的特性；

(2) this.state 表示会随着用户互动而产生变化的特性；【liked】

 

 

表单

用户在表单填入的内容，因此不能用 this.props 读取。

textarea 元素、select元素、radio元素都属于这种状况，更多介绍请参考官方文档。

 

 

组件的生命周期

will 函数在进入状态以前调用，did 函数在进入状态以后调用。

componentWillMount()
componentDidMount()

componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)

componentWillUnmount() 

此外，React 还提供两种特殊状态的处理函数。

componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)：组件判断是否从新渲染时调用

 

 

Ajax

组件的数据来源，一般是经过 Ajax 请求从服务器获取，

能够使用 componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法从新渲染 UI。

上面代码使用 jQuery 完成 Ajax 请求，这是为了便于说明。React 自己没有任何依赖，彻底能够不用jQuery，而使用其余库。

 

咱们甚至能够把一个Promise对象传入组件。

ReactDOM.render(
 // 从Github的API抓取数据，而后将Promise对象做为属性，
 // 传给 组件 <RepoList
    promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')}
  />,
  document.body
);RepoList

组件代码：

var RepoList = React.createClass({
  getInitialState: function() {
    return { loading: true, error: null, data: null};
  },

  componentDidMount() {
    this.props.promise.then(
      value => this.setState({loading: false, data: value}),
      error => this.setState({loading: false, error: error}));
  },

  render: function() {

　　// 若是Promise对象正在抓取数据（pending状态），组件显示"正在加载"；
　　// 若是Promise对象报错（rejected状态），组件显示报错信息；
　　// 若是Promise对象抓取数据成功（fulfilled状态），组件显示获取的数据。

    if (this.state.loading) {
      return <span>Loading...</span>;
    }
    else if (this.state.error !== null) {
      return <span>Error: {this.state.error.message}</span>;
    }
    else {
      var repos = this.state.data.items;
      var repoList = repos.map(function (repo) {
        return (
          <li>
            <a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}
          </li>
        );
      });
      return (
        <main>
          <h1>Most Popular JavaScript Projects in Github</h1>
          <ol>{repoList}</ol>
        </main>
      );
    }
  }
});