reactjs

更新日期: 2015-12-12 阅读次数: 7728 分类: 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 聊聊。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

相关文章

爱评论不评论

近期节日

2020年04月07日 世界卫生日
2020年04月11日 世界帕金森病日
2020年04月19日 谷雨
2020年04月21日 复活节
2020年04月22日 世界地球日
2020年04月23日 世界读书日
2020年04月26日 知识产权日
2020年04月30日 佛诞
2020年04月30日 全国交通安全反思日
2020年05月01日 国际劳动节
2020年05月04日 五四青年节
2020年05月05日 立夏
查看更多节日