はじめに
ACCESS Advent Calendar 2018 の23日目です。
18日目ぶり @naohikowatanabe です。無事いきなりステーキゴールドカードになりました。
注
※社内勉強会の内容転記です。
※もちろんお客さんの情報部分は削除しています。
React 未経験から運良く3案件連続で React に触れたので React 初心者あるある2018言いたい
2018/07/24 渡邉直彦
動機
- React 初めて触って結構悩んだので、次初めて触る人が少しでも楽になれば。。！
- 勉強時間は減らせないだろうけど悩む時間は減らしたい
- React 上級者の方へは
- 「最近の初心者はこの辺で悩んでいるのか」と感じていただければ。。
- 正確性より分かりやすさ重視にしたので温かい目で見て頂ければ幸いです
復習：React って何だっけ？
- Facebook 謹製 UI ライブラリ https://reactjs.org/
- JSX という「HTML と JS が悪魔合体」したスタイルらしい
初心者あるある1：どう始めたらいいかわからない
- create-react-appで始めるのが楽
- React 公式も勧めてる
- 利点: コマンド一発で環境構築
- 慣れたら babel + webpack
- babel: ES2015(6)やJSXをES5へトランスパイラ
- webpack: 開発時の JS を1つにまとめる
create-react-app
$ npm install create-react-app
$ mkdir sample
$ cd sample
$ create-react-app hello-react
$ cd hello-react
$ npm start
// メインの JS ファイル
$ cat src/App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
$
案件1: AAAプロジェクト 2018/1~3
略
あるある2：概念が多くて理解するのが大変
- 概念少しかい摘むのとサンプル書くのを繰り返した方が理解が進む
- component?
- ≒ HTML のタグ。div とかとか
- state? props?
- state = component 内での状態。変更可
- props = 親から子への渡す状態のデータ。子では不変
- container と component?
- container: ロジックを記述
- component: 見た目を記述
案件2: XXXXプロジェクト 2018/4~5
略
あるある3：web に(古い)情報多過ぎ
- 問題：進化が早い故に軽くググっても古い情報が多い
- 「書き方が違う」
- 「あれ、警告出る。。」
- →公式か「React verXX の変更点」とバージョンを明記してまとめてる人の情報が頼りになる
案件3: XXXXプロジェクト 2018/6
略
あるある4: 子から親、親から子の関数を呼びたい
- → 関数自体を props として持ち回る
- 参考
- コンポーネント間で情報の受け渡し – React入門
- props を親から子へ 例→
- props を子から親へ
- 関数を親から子へ
- 関数を子から親へ
- コンポーネント間で情報の受け渡し – React入門
あるある5: props の管理がめんどくさくなってくる
- → Redux(状態管理ライブラリ)を導入して管理する場所を一か所に
- Redux: Action, ActionCreator, Store, Reducer
- Redux サンプルのお勧め。2回写経すれば大丈夫
- 電卓アプリで学ぶReact/Redux入門(基礎知識編)
あるある6: window.onload的な読込完了時の処理は?
- →それ用の関数があるのでその中に書く
- componentDidMount() : マウント時(≒window.onload)
- componentDidUpdate() : 更新時
- componentWillUnmount() : アンマウント時
腕試し
- 一日で何かアプリ作ってみたい
- 作るもの
- 毎年やってる同期BBQの開催場所を決めるツールを作りたい
- 各自の最寄駅から公平な(等距離な)開催場所を決める
- みんな少しずつ引越すので毎年中心が分からなくなる。。
- 一日と言いつつ結果的には準備2.5日+実装0.5日の計土日3人日。。
- 準備
- google map api key : 2018/6 より多少変更(要クレジットカード登録(月200ドル分は無料))
- React 用 google map library 選定 : 種類多くて悩む。。
- React & github pages の設定方法
- 準備
作ったアプリ デモ
今年のBBQ結果
- 江東区木場駅の木場公園まじでおすすめ(初使用)
- 利点
- 都心、駅近、スーパー近、区画広い、無料
- 欠点
- 競争率が高い
- 予約サイト募集開始30分で埋まる(8時開始、8時半には埋まってた)。。
- 今年はXX君と寝ぼけ眼でF5アタック頑張ったので、次回は自動化したい。。
- 利点
まとめ
- React 3案件やって得られた悩みポイントまとめました
- 初めて触れるときは create-react-app が楽
- 概念多くて大変だけど、少し読んでサンプル書いて、を繰り返すのが理解が早い
- Web に古い情報多いので、公式か「React verXX まとめ」のサイトを見るのが良い
- ここ10年ちょいちょい基本ブラウザ組込周りやってきましたけど、実機いじりから Web フロントエンドまでやれる会社ってそうないと思うので弊社の良さを実感（優等生的コメント）
- 実装したらすぐ結果が分かるフロントエンド楽しい！ React 楽しい！（正直感想）
おわりに
明日の担当は @rheza_h です。お楽しみに！🎉