reactjs

发布时间: 2015-12-12 20:45:34 作者: 大象笔记

为何学习 React

实在无法忍受 BackboneJS View 的 “原始”,于是决定学习一下 Facebook 出品的 React, 然后用 React 替换掉 BackboneJS 的 View。

React 的目标是创建可复用的 UI 组件,类似于 AngularJS 的 directive 的概念。 这点非常好,我对 BackboneJS 最大的不满来自于 View 过于自由,团队合作的时候容易写出无法维护的 View, 且不可单元测试。 因为这点,我对 React 一见钟情;React 的文档放在 github 上,避免了被墙,好感再次增加。

读完 颠覆式前端UI开发框架:React 之后我更加坚信,React 就是我想要的。

使用 React 实现 UI View 的合理步骤

使用 React 的目标是创建模块化的、可重用的、可任意组合的 UI View。

以官网入门教程中的评论列表为例.

第一步需要做的是,规划出 component structure, 即 "庖丁解牛"

以无厚入有间,恢恢乎其于游刃必有余地矣

使用 Markdown 即可形象的描述出组件结构

- CommentBox
  - CommentList
    - Comment
  - CommentForm

使用 processon.com 绘制的结构图

首先将架构实现,具体的 render 可以先使用 hello world 代替。 然后逐一细化实现。

React 的调试方法

学习 React 入门教程中的评论组件过程中,无意加了一行有问题的代码

var Comment = React.createClass({});

然后在 Chrome 的 console 中看到了如下错误提示

Uncaught Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.

此时展开错误,就能看到对应的出错代码行数。

Hello World

// main.js
var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

执行

npm init 
npm install --save react react-oom
npm install -g browserify
npm install --save-dev babelify
browserify -t babelify main.js -o bundle.js

注意,不要漏了安装 babelify, 否则会报错

Error: Cannot find module 'babelify'

工具

发现一个类似 JSFiddle 的国内服务 RunJS, 可以方便的练习 React 编码。

参考

我是一名山东烟台的开发者,联系作者