reactjs

更新日期: 2015-12-12 阅读次数: 8743 分类: ReactJS

为何学习 React

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

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

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

  • 以评论区为例,对 view 的不断拆分,就是我在使用 backbone 时不断思考的问题
  • 自动化了 DOM 的更新操作,相对 backbone 要时刻考虑局部重绘,开发效率大为提升。而且比 Angular 的实现更加透明
  • 组件天生具有可复用性。任何框架都能轻易复用 react 所实现的组件。
  • 自带的类模板实现,直接在 jsx 文件中编写,避免了与后端模板冲突的问题

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

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

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

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

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

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

- CommentBox
  - CommentList
    - Comment
  - CommentForm

使用 processon.com 绘制的结构图

react 评论组件结构图 by 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 编码。

参考

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊, 查看更多联系方式。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。

相关文章

爱评论不评论