第一个简单的APP：React-Native实践之路（一）

Posted on 2016-03-11 |

一、环境搭建

//注：本教程以mac环境下搭建ios开发环境为例

1、安装Xcode
在app store中下载安装Xcode 7.0以上版本

2、安装homebrew

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

3、安装Node.js 4.0或更高版本

$ brew install node

4、安装watchman

$ brew install watchman

5、安装react-native全局依赖

$ npm install -g react-native-cli

二、快速开始

选择一个目录，初始化一个react-native项目

$ react-native init MyProject

由于网络原因，从npm官网源下载依赖包速度很慢，可以先将npm仓库源转为国内镜像，先在控制台执行

$ npm config set registry https://registry.npm.taobao.org
$ npm config set disturl https://npm.taobao.org/dist

然后在初始化项目

$ react-native init MyProject

进入项目目录

$ cd Myproject

运行

$ react-native run-ios

成功编译后模拟器自动启动，如果看到以下界面，说明环境配置已经成功

随意修改index.ios.js入口文件，在模拟器中按⌘+R刷新查看效果，也可⌘+D 在开发菜单中选择Enable Live Reload，开启模拟器自动刷新，这样保存代码时模拟器立即自动刷新

至此已完成OS X环境下react-native ios项目环境的配置和项目初始化

用React编写一款简单的赛车游戏

Posted on 2016-03-01 |

最近研究egret引擎时，在论坛看到了用egret引擎写的一款赛车游戏
玩法其实很简单，双车道左右躲避来车，碰撞即游戏失败，用egret编写这样一款游戏较为复杂，我们尝试用React来编写这款简单的赛车游戏

本教程更多在于展示React的特性和游戏编写过程中的思维逻辑，如有错误欢迎拍砖。
下面将为大家一步步讲解，如何用React写出一款纯js+css的小游戏。

准备工作

本教程游戏素材下载：素材下载

本教程使用React 0.14版本，对React不熟悉的童鞋可以先看下阮一峰React入门，或者极客学院的视频教程

一、React基本结构

<!DOCTYPE html>
<html>
<head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
</head>
<body>
<div id="reactGame"></div>
<script type="text/babel">
     // ** code **
</script>
</body>
</html>

可以看到Html代码非常简单，我们只留了一个

<div id="reactGame"></div>

作为React渲染后插入的节点，所有的代码均写在JS中。
大家注意到script标签的type为text/babel，由于React使用JSX语法，browser.min.js用于将JSX语法转化为javascript语法。

二、创建第一个React组件

<script type="text/babel">
var GameBoard = React.createClass({
    getInitialState : function(){
        return {
            gameState : 0
        }
    },
    render : function(){
        return <div className="board">
            <div className="roadbed"></div>
            <div className="road"}>
                <div className="hero"></div>
                <div className="enemy"></div>
            </div>
            <span className="start"></span>
            <span className="kilo"></span>
            <div className="failbub">
                <span className="failtext"></span>
                <span className="retry"></span>
            </div>
        </div>
    }
});
ReactDOM.render(<GameBoard/>,document.getElementById("reactGame"));
</script>

turbo.css -- 高质量css模块化设计

Posted on 2015-03-09 |

css也要模块化？

css命名对html的模块化，标准化与网站维护成本起到决定性的作用，特别对于很多大型复杂站点来说，在经过大量的后期需求变更与维护后，css已然变得面目全非。没有前期合理的架构，导致后期无法灵活的适应需求变更，让维护工作成为“打补丁”、“填漏洞”。还在为 box_right，color_yellow这种命名方式头疼吗？ html模块化，从css模块化开始！

css模块化优点

减少页面样式与通用或外部插件样式冲突的几率
分组管理，解放命名局限性
提高多人协作时代码可阅读性
仅通过css结构即可大致了解html结构与模块划分
降低后期维护成本
解放html，用css掌控一切！

命名分隔符

首先，严格规范分隔符用法，可以用-或_作为命名分隔符，以下以-为例：

.[分组]-[类型]-[描述]

在turboCSS中，分隔符不再随意的用来做单词分隔，而是赋予了关键性作用。例如：

.f-search-md

[f]表示该样式所处的分组（后面会详细介绍），[search] 表示该样式的类型，[md]则为该类型的描述。在同一个类型出现第一次时，我们一般只需使用 f-search 即可。而中间的 [类型] 尽量避免使用一些具体的业务命名，如

.g-newslist //错误写法，如果同样的样式用在攻略，排行榜等，则与news新闻意义不符

尽量使用描述该类型最本质的单词

.g-textlist //文字列表

第二个-后的 [描述] 也尽量不要用到具体的业务命名，如

.f-search-hot //错误写法，当前搜索模块用于热门搜索，可同样的样式后期可能用于任何地方

使用数字或字母区分多种不同的search类型，摆脱业务限制，如

.f-search-2

或者

.f-search-a

当你十分确定一个样式只可能用于一个具体业务时，才可使用 f-search-hot 这样的命名（不推荐）

手把手教你快速搭建Hexo+Github静态博客

Posted on 2015-03-06 |

安装GIT

下载 msysgit 安装。

安装Node.js

windows环境下，下载 nodeJS 安装。

安装hexo

利用 npm 命令安装hexo。（在任意位置点击鼠标右键，选择Git bash）

npm install -g hexo

创建hexo文件夹

在你喜欢的位置新建hexo文件夹（如F:/hexoblog），在文件夹内右键Git Bash，初始化hexo

hexo init

安装依赖包

npm install

本地预览

至此hexo的全部本地环境已搭建完毕，在项目文件根目录执行以下命令，在localhost:4000预览效果

hexo generate
hexo server

深夜的办公室

Posted on 2015-03-05 |

(2015/03/23 - 厦门 4399-UED)

ReactJS 快速入门

Posted on 2015-03-04 |

React 是近期非常热门的一个前端开发框架。这篇文章将介绍如何使用 React 来创建用户界面，希望能够起到抛砖引玉的效果。

相对于其他框架来说，React 提供了非常少的 API，如同 Gulp，越是少量的 API 同时意味着越多的可能性。正如那句名言所说：

Less is more.

但是，精简的 API 不是意味着没有一定的学习成本，我们还是需要对此框架进行一定的理解。闲话不多说，让我们进入正题。首先，让我们来了解下 React 中使用到的一些术语。

React 术语

React Elements

代表 HTML 元素的 JavaScript 对象。这些 JavaScript 对象最后被编译成对应的 HTML 元素。
Components

封装 React Elements，包含一个或者多个 React Elements。 Components 用于创建可以复用的 UI 模块，例如分页，侧栏导航等。

JSX

JSX 是 React 定义的一种 JavaScript 语法扩展，类似于 XML 。 JSX 是可选的，我们完全可以使用 JavaScript 来编写 React 应用，不过 JSX 提供了一套更为简便的方式来写 React 应用。

Virtual DOM

Virtual DOM 是一个模拟 DOM 树的 JavaScript 对象。 React 使用 Virtual DOM 来渲染 UI，同时监听 Virtual DOM 上数据的变化并自动迁移这些变化到 UI 上。

Hello World

Posted on 2015-02-09 |

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1	$ hexo new "My New Post"

More info: Writing

Run server

1	$ hexo server

More info: Server

Generate static files

1	$ hexo generate

More info: Generating

Deploy to remote sites

1	$ hexo deploy

More info: Deployment