放一张毫无意义的图。
前言
在github上有很多框架都是用的ES5,对于接触ES5比较多的人,如果想写ES6语法还是要有个参考, 这里用ES5/ES6实现了两段功能完全相同的代码,但是不保证可以正常运行,主要是把区别表现出来。
ES5
```js
// ES 5
var React = require("react-native");
var {
Image,
Text,
} = React;
var MyComponent = React.createClasj ss({
getDefaultProps: function() {
return {
prop1: value1,
继续阅读 »
propTypes 被从 react 包里面分离出来了,如果要用到 propTypes, 则必须要自己安装 prop-types
sh
npm install prop-types --save
那么,对于之前项目里面已经存在的 propTypes 呢,可以使用 facebook 的这个工具 jscodeshift^1 和 codemod^2, 其中 codemod 最好 clone 在当前项目文件夹。
用法像这样:
```shell
jscodeshift
--extensions=js,jsx
-t ./react-codemod/transforms/React-PropTypes-to-prop-typ
继续阅读 »
在组件状态中存储临时数据
在这个步骤,我们会在为应用的客户端添加数据过滤特性,这样用户就可以通过点击’确认选框‘来查看当前进行的任务。我们会去学习如何仅在客户端使用React组件状态来存储临时模板
首先,我们需要在我们的App组件中,添加’确认选框‘
继续阅读 »
Mickey 是一款基于 react、redux、redux-saga 和 react-router 的轻量前端框架,其大部分思路借鉴了 dva,提供了更方便的 model 设计思路和更简单的 actions 管理方案。
more
为什么
基于 redux 的应用避免不了大量的样板代码,还要维护大量的 action-type 常量字符串,这些都是低效和重复的劳动。dva 基于 elm 概念,通过 reducers, effects 和 subscriptions 来组织 model,在减少样本代码层面前进了一大步:
js
{
namespace: 'xxx', // 命名空间,规定了 store 的结构
subscr
继续阅读 »
JSX和HTML
在JSX中,可以像通常使用HTML标签那样使用它们,也可以自定义标签,例如:
javascript
React.render(
welcome to react world,
document.getElementById('example')
);
继续阅读 »
方法的安全性
在这个步骤之前,这款应用的任何用户都可以修改数据库的任何部分,在一个非常有意思的小项目或者演示项目中可能已经不错了,但是任何一个真实的应用都需要对这些数据进行权限控制。
在Meteor上,最好的方法就是通过声明方法。以此来直接取代客户端的代码。这些方法叫做insert, update, 还有remove,这将会替换执行的方法。它将会确认用户是否有权限完成这么一整套操作。那么随后在客户端中做出的任何对客户端的改变都会发给数据库
继续阅读 »
Before
在翻译之前我还是要简要介绍一下Meteor,这是一款跨时代的框架。真的,完全没有骗你。
一开始的网站是纯静态页面搭建的。
后来开始使用动态的脚本语言,比如PHP
后来以此构成了框架。最为出名的自然是Ruby on Rails。
继续阅读 »
事件处理
React中的事件处理方式与HTML方式类似,都是通过为标签添加属性来声明事件处理函数。如下所示:
```javascript
var LikeButton = React.createClass({
getInitialState: function(){
return {like: true};
},
handleClick: function(){
this.setState({like: !this.state.like});
},
render: function(){
return (
继续阅读 »
数据存储
集合(Collection)是Meteor存储持久化数据的方式。Meteor 中的集合比较特殊的是,它可以从服务端,包括客户端接收数据。这使得编写视图逻辑变得更加简单 -- 不用去写太多的服务端的代码。它也可以自动的自我更新,因此一个视图组件受到一个集合的支持,他可以自动的展示最新的数据。
继续阅读 »
Universal React in 24 WAYS by Jack Franklin 这篇文章教我们如何搭建一个简单的应用通过 React, React-Router, Express 和 ejs
继续阅读 »