dapps開発を行なっており、フロントエンドはReactで開発することになったのでReactを勉強します。
ちなみにプログラミングに関してはRailsを少しできるくらいで全くの素人です。
勉強した内容に関して簡単にまとめたいと思います。
Reactとは
2013年、Facebookが開発した、Webアプリの User Interface を構築するための Java Script ライブラリです。
仮想DOMなどを利用して余計な機能を排除し、View部分に特化しています。
ソースコード
JSX
JSXとは（Java Script XML）
ReactのコンポーネントないでHTMLのような可読性の高く記述できる構文です
メリット：よく知られている、意味的にわかりやすい、構造の可視化
コンポーネント
Reactの中心概念です。
基本的な書き方
class diver extends Component {
render() {
return (
<div>
<p>Hello world</p>
</div>
);
}
}
JSXとHTMLの違い
JSXとHTMLは基本的に同じですが若干異なるところがあります。
・HTMLのclassは、JSXではclassName
・属性値を{}で括ることにより動的な属性値を記述できます
var classId = this.props.id
...
<div class = {classId}>...</div>
・条件分岐はif elseなどではできない。
・三項演算子
・変数に値を代入し参照する
・条件文を別の関数として呼び出し
・&&
といったものを利用します
・三項演算子を使った例
{ this.state.loading
? <div id="loader"><p>Loading...</p></div>
: <p>Done!</p>
}
・key ref dangerouslySetInnerHTMLといった属性がある
render() {
return (
<div>
<input ref="textInput" ... /></input>
</div>
);
}
このrefの設定により、{this.refs.textInput}で参照できるようになっています。
・スタイルはキャメルケースで参照
<div style={styles}>
<p>Hello world</p>
</div>
var styles= {
width: 350px,
margin-bottom: 10px,
}
コンポーネントのライフサイクル
コンポーネントは作成時、作成後、破棄時の３つのイベントで処理を登録する手段があります。
データフロー
Reactでのデータの流れは基本的に親から子への一方通行です
そして、propsとstateの２つで、データの流れは扱えます。
props
propTypes
データをバインディングできます
getDefaultProps
state
コンポーネントの内部状態を示すものです。
stateの更新
replaceStateとsetStateの２種類ありますが、setStateが使いやすいのでsetStateを主に使います。
this.setState({ update: ---- })
イベントの処理
ReactのイベントはJavaScriptのイベントと基本的に同じです
例えば、
・MouseEvent：ユーザーがクリックした時の通知
・change：要素の内容が変わった場合の通知
SystematicEvent
class diver extends Component {
handleCreate (event) => {
this.setState({ update: event.target.value })
}
render() {
return (
<div>
<input onChange={this.handleCrate} />
</div>
);
}
}
コンポーネントの合成
Mixin
複数のコンポーネント間で共有できるメソッドを定義できます。
DOM操作
どうしてもDOMにアクセスしたい場合は、ref属性を設定することで特定のコンポーネントにアクセスできます。
フォーム
Uncontrolled Component
複雑なフォームの作成に向いており、直接DOMノードへアクセスします。
そのため特殊なパターンであると言えます。
class UncontrolledComponent extend component {
render () {
return (
<input
type="text"
defaultValue="Hello world" />;
)
}
}
このように、UncontrolledComponentのコンポーネントとは関係なく、Inputは独自の値を保有しています。
class UncontrolledComponent extend component {
submitHandler: function (event) {
event.preventDefault();
var hello = React.findDOMNode(this.refs.hello).value;
}
render () {
return (
<form onSubmit={this.submitHandler}>
<input
type="text"
defaultValue="Hello world"
ref="hello" />;
)
}
}
Inputにref属性を記述することによって、this.refsでアクセス可能になっています。
Controlled component
下記のInputはstateにより保持されているのでControlled componentと言えます。
class ControlledComponent extend component {
handleChange = e => {
this.setState({ hello: e.target.value})
}
submitHandler = e => {
event.preventDefault();
....
}
render () {
return (
<form onSubmit={this.submitHandler}>
<input
type="text"
defaultValue="Hello world"
value={this.state.hello}
onChange={this.handleChange} />;
</form>
)
}
}
ラベル
フォームが何を意味しているかを、ユーザーに伝えるため利用します。
<label htmlFor="name">名前</label>
select
<select value={this.state.hoge} onChange={this.handleChange}>
<option value="A">選択肢A</option>
<option value="B">選択肢B</option>
<option value="C">選択肢C</option>
</select>
Checkbox
class SampleCheckBox extend component {
constructor(props) {
super(props)
this.state = {
checked: true,
}
handleChange = e => {
this.setState({ checked: e.target.checked})
}
submitHandler = e => {
event.preventDefault();
console.log("checked:", this.state.checked)
....
}
render () {
return (
<form onSubmit={this.submitHandler}>
<input
type="checkbox"
checked={this.state.checked}
onChange={this.handleChange} />;
</form>
)
}
}
フォーカス
Autodocusを使うと、ユーザーがブラウザを開いた時に、
クリックする必要なくformを入力できるようになります。
<input type="text" autoFocus={true} />
ユーザビリティー
ユーザビリティーの向上には下記の５つを考えると良いです。
ユーザーのやることが明確である
placeholder、label等を使って何をやれば良いのか明確にする
ユーザーの入力に即座に応答する
処理に時間がかかる場合、「ロード中」と出すだけでもユーザーの忍耐力は変化する
予測可能であること
アクセシビリティー
マウスだけ、タッチだけ、といった一定の制約下でテストを行ってみる
入力項目をなるべく少なくする
オートコンプリートなどを利用して、「たくさん入力する必要がある」とユーザーに感じさせない
Java Script
アロー関数、スプレッド構文、に関してはReactを勉強する際に覚えておくよいJavaScriptの概念になります。
アロー関数
functionを省略して書くことができる
// 一般的な関数
var func = function(str) {
console.log(str);
}
// アロー関数
var func = (str) => {
console.log(str);
}
スプレッド構文
// 従来の書き方
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction.apply(null, args);
// スプレッド構文
function myFunction(x, y, z) { }
var args = [0, 1, 2];
myFunction(...args);
参考サイト
JavascriptがわかってないとReactもわからないことが多くなるため
ES2015(ES6) 入門
イベントリスナー
イベントパンドラ
DOMノード