最近都在使用sass，而javascript的部分，因為專案比較小的關係，也都是用jquery就解決了。正因為如此，已經有好一段時間沒有使用reactjs了。
今天去面試的時候，面試的公司現場出題，直接叫我寫出一個簡單的todolist，並且使用 Belle 和 localForage 這兩個 library。因為有幾個月沒有寫React了，聽到題目的時候，其實有一點點抖抖的，也不知道自己有沒有能力把他弄出來。
先介紹一下這兩個library好了，首先是Belle。這個library包裝了很多基本的html5元件，例如input、button……，並把它們一些event trigger function都給包起來，讓工程師可以更快的寫出很多有用的組件。
至於localForage，他是一個可以把資料存在client端的library。client端儲存資料的方式有很多種，譬如cookie，WebSQL……。而localForage把WebSQLhapi API包裝起來，幾乎是無痛儲存和拿取資料。
這個一小時內完成的app，主要有4個功能：
- 可以新增memo
- 清除所memo（太懶了，直接全清比較快XD）
- 記錄memo在client端
- 得到client端存的memo
回到react的部分。因為完全沒用過這兩個library，加上太久沒寫reactjs了，一開始寫起來抖抖的。不過高興的是，後來很快就上軌道了。放一下code吧！用reactjs和ES6寫的。
[code language=”javascript”]
‘use strict’;
import React from ‘react’;
import belle from ‘belle’;
import localforage from ‘localforage’;
var TextInput = belle.TextInput;
class Main extends React.Component{
constructor(){
super();
this.state={
list:[‘start’],//儲存的memo
now:” //目前在textinput所顯示的字串
};
this.store=localforage.createInstance({
name:’test’
});
}
componentDidMount(){
}
addList(){
this.setState({
list:this.state.list.concat(this.state.now)
});
}
clearList(){
this.setState({
list:[]
});
}
save(){
this.store.setItem(‘list’,this.state.list);
}
getItem(){
this.store.getItem(‘list’,function(err,value){
this.setState({
list: value
});
}.bind(this));
}
update(value){
this.setState({now:value.value});
}
render(){
return(
<div className={‘main’}>
<TextInput ref="input" value={this.state.now} onUpdate={this.update.bind(this)} defaultValue="type"/>
<button onClick={this.addList.bind(this)}>add</button>
<button onClick={this.clearList.bind(this)}>clear</button>
<button onClick={this.save.bind(this)}>save</button>
<button onClick={this.getItem.bind(this)}>get</button>
{this.state.list.map((v)=>
<div>{`${v}`}</div>
)}</div>
);
}
}
export default Main;
[/code]
寫完的時候其實蠻開心的，回頭看一下，發現那50分鐘全神貫注的能量真的很強！
之後面試官還說，喔寫得蠻快的嘛，有點受寵若驚XD，希望是個好預兆:)
關於我：
我是沒一村，專長和興趣是程式、主動投資、科技商業模式。可以參考我的書單和比較熱門的文章：