react编写的照片墙

趁国庆有小假期，动手弄一个照片墙熟悉react开发流程以及领悟组件化的魅力
演示demo
源码

照片墙分为4个基本组件

• 照片基本展示组件
• 照片控制组件
• 照片上下拉刷新组件
• 照片分类导航组件

从到开始构建demo到完成demo，体会最深的是动手前要了解各个组件的基本功能，各种取值范围，必要的了解以及清晰的思路可以事半功倍，减少动手所做的无用功。

范围取值

左侧:

• 最左到偏离舞台一半图片宽度
• 最右到一半舞台宽度 - 一半图片宽度 - 一整张图片宽度
• 最上到偏离舞台一半图片高度
• 最下到整个舞台高度 - 一半图片宽度

右侧

• 最左到一半舞台宽度 + 一半图片宽度
• 最右到舞台宽度 - 一半图片宽度
• 最上到偏离舞台一半图片高度
• 最下到整个舞台高度 - 一半图片宽度

上侧图片

• 最左到一半舞台宽度 - 整张图片宽度
• 最右到一半舞台宽度
• 最上到一半图片高度
• 最下到一半舞台高度 - 一半图片高度 -整张图片高度

• 刷新点 = 当前舞台相对于顶端额距离
• 下拉刷新更新当前舞台index的点 = 刷新点 + 当前舞台一半的高度
• 上拉刷新更新当前舞台index的点 = 刷新点 - 当前舞台一半的高度

webpack-project

一个简单的webpack构建bootstrap自动化例子

github仓库

目的

• 希望通过该项目实现快速搭建bootstrap自动化开发环境
• 通过该项目熟悉webpack的使用方法
• 专注写业务流程,把重复的工作交给webpack完成，提高开发效率

注意

请务必更新node.js (version>=5.x)

开始

• 复制项目

  1	$ git clone https://github.com/timmyLan/webpack-project.git

• 进入项目并安装包

  1	$ cd webpack-project && npm install

• 全局安装rimraf(兼容linux,windows删除文件夹命令)

  1	$ npm install rimraf -g

• 生产环境

  1	$ npm run build

• 开发环境

  1	$ npm start

环境说明

• 生产环境
  1.生成文件均放置到public目录
  2.对文件进行混淆压缩

• 开发环境
  1.运用热加载，自动刷新
  2.添加sourceMap方便调试

react-native Android 真机测试

我并不喜欢吐槽，但系理论上虚拟机上跑起的程序到真机不可以开飞机？然而:( 我还是图样图森破

———————————————————————————————————————————————————————————————————————吐槽分割线

真机测试遇到的bug

1.

1
2
3
4
5
6
7
8

:app:installDebug FAILED
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException:  Unable to upload some APKs
...

解决方案: 将{YourProduct}\android\build.gradle 改成

1
2
3
4
5
6
7
8
9
10
11
12
13

...
buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:1.2.3'
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}
...

2.解决上述问题再跑react-native run-android，红色error界面 提示Unable to download JS bundle
解决方案：

1
2

adb reverse tcp:8081 tcp:8081
react-native run-android

3.测试界面出来了，与虚拟机的一模一样，弹出开发者菜单

1
2

#摇一摇:) 使劲摇 or
adb shell input keyevent 82

点击Enable Hot Reloading，改改index.android.js代码，红色error界面
解决方案：

• 查出本机内网ip百度方法
• 弹出开发者菜单->Dev Settings->Debug server host & port for device
• 输入本机ip:8081

真机测试结果

react-native初次踩坑

有一段时间无写blog了，其实是我懒了:(
不对，是我遇到瓶颈了:)
发现用react写了个管理系统之后没有东西再创新了，缺少了一幅蓝图…
今日尝试搭建react-native,我要在手机端找到激情:)
——————————————————————————————————————————————————————————————我是吐槽完毕的分割线

直接参考官网react-native getting-started

与官网安装方式不同点

1.我用的是babun控制台，安装python,node,git不用官网建议的chocolatey
安装python

1
2
3
4
5
6

#pact是babun的包管理器
$ pact install python-setuptools python-ming
$ pact install libxml2-devel libxslt-devel libyaml-devel
$ curl -skS https://bootstrap.pypa.io/get-pip.py | python
$ pip install virtualenv
$ curl -skS https://raw.githubusercontent.com/mitsuhiko/pipsi/master/get-pipsi.py | python

2.我只用过windows node,github 直接安装.exe

提升搭建速度的方法

1.react-native init AwesomeProject 需要利用npm 安装包，所以在天朝会有一堵’隐形’的墙阻碍，可以改镜像地址

1

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

2.react-native run-android 需要下载gradle-2.4-all.zip，这个不管是不是’天朝墙’的威力，这个包都有62.4M，用迅雷下快多了。下载完修改{YourProduct}\android\gradle\wrapper\gradle-wrapper.properties,将distributionUrl改为本地路径

1

distributionUrl=file:///E:/gradle-2.4-all.zip

跑官方例子遇到的坑

1
2
3

#adb 无启动
Execution failed for task ':app:installDebug'.
> com.android.builder.testing.api.DeviceException: Timeout getting device list.

解决方法：
启动Genymotion->settings->ADB->Use custom Android SDK tools

成功跑起官网例子

——————————————————————————————————————————————————————————————我是继续吐槽分割线

跑起了手机端的应用有那么一些激动:)，毕竟过去一年一直在web端跑程序，偶尔用chrome看手机端页面效果。现在这个是虚拟机的反馈，感觉很有新鲜感。

测试驱动开发 TDD - react

因为每次测试需要点击界面才能看出效果，某些效果需要多步操作，测试时间浪费，所以想研究tdd开发。

因为该文章为学习记录，所以详情去看阮一峰老师教程

本项目地址，相比阮一峰老师的教程只改了自己熟悉的webpack启动部分。

后续改进:
为项目添加redux
结合实际开发写多点测试用例

react-route使用

redux 单一数据源原则对于多页面应用有点找不着北的感觉，所以配合react-route使用可以完美解决该问题。

用redux首先保证单一数据源

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

import React from 'react';
import ReactDOM from 'react-dom';
import route from './containers/route' //react-route文件夹
import { Provider } from 'react-redux'
import configureStore from './configureStore'
injectTapEventPlugin();
const store = configureStore();
const App = () => (
    <Provider store={store}>
        {route}
    </Provider>
);
ReactDOM.render(
    <App />,
    document.getElementById('app')
);

react-route 运用
假设程序拥有
-App主体负责navbar&footer
-Home主页负责welcome信息
-Detail负责详细信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

import React from 'react';
/*react-route*/
import { Router, Route, IndexRoute , hashHistory } from 'react-router';
import App from './App';
import Home from './Home';
import Detail from './Detail';
const route = (
    <Router history={hashHistory}>
        <Route path="/" component={App}>
            <IndexRoute component={Home} />
            <Route path="detail" component={Detail} />
        </Route>
    </Router>
);
export default route;

这样路由和所需组件就绑定了，并且也能遵守redux单一数据源原则。

项目完整代码 ：github

nodejs 配合 nginx 部署

首先安装express并创建一个server

参考搭建express+mysql项目(一)

安装nginx

1

$ sudo add-apt-repository ppa:nginx/stable

如果 add-apt-repository 不可用
Ubuntu <=12.04.xx

1

$ sudo apt-get install python-software-properties

Ubuntu >12.04

1

$ sudo apt-get install software-properties-common

1
2

$ sudo apt-get update
$ sudo apt-get install nginx

配置nginx

删除default文件

1

$ sudo rm /etc/nginx/sites-enabled/default

新建一个example(自定义)文件

1
2
3
4
5
6
7
8
9
10
11
12
13

server {
  server_name your.domain.com;
  listen 80;
  location / {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-NginX-Proxy true;
    proxy_pass http://127.0.0.1:3000;
    proxy_redirect off;
  }
}

创建软连接

1

$ sudo ln -s /etc/nginx/sites-available/example /etc/nginx/sites-enabled

重启

1

$ sudo service nginx reload

配合pm2

安装pm2

1

$ npm install pm2 -g

用例:

1

$ pm2 start app.js

keystone快速搭建简单项目

公司需要一个拥有管理页面的主页用来展示产品

重点讲下安装/使用过程中的坑

1.报Cannot find module ‘unicode/category/So’

1
2
3
4
5
6

 # debian
$  sudo apt-get install unicode-data # optional
  # gentoo
$  sudo emerge unicode-data # optional
$  npm install unicode

2.虽然官网有强调,但这里当一个坑列出: 在执行以下命令之前要装yeoman

1

$ yo keystone

3.使用模板的concat页面提交数据时,server中断

其实就是调用了email功能，而安装模板没有带email-ak设置
修改 \models\Enquiry.js

1
2
3
4
5

Enquiry.schema.post('save', function() {
	if (this.wasNew) {
		this.sendNotificationEmail();
	}
});

to

1
2
3
4
5

Enquiry.schema.post('save', function() {
	if (this.wasNew) {
		//this.sendNotificationEmail();
	}
});

4.模板后台管理界面不能作修改
PS：可以hack入源码进行修改~~

附上最终修改效果:

redux-example

react项目上越来越多状态需要管理,所以选择用redux

写了一个易于理解的example,具体代码见github

VM 无法访问

问题：

出现原因：

安装homestead忘记将config.vm.box_version = settings[“version”] ||= “>= 0.4.0”设置为>=0,导致VirtualBox重新下载。
强制关闭,导致VM重复无法访问。

解决办法：

将项目中的.vagrant 删除 并执行 vagrant up即可