See the Elephant

渋谷でWebプログラマをやっている25歳が書く日常ブログ

Reactの勉強会に行った

Reactとは

勉強会の講師

twitter.com

React とは

  • Componentを作るだけ
  • データの流れは単方向
  • 仮想DOMを扱う

Component

再利用可能なパーツ Componentを作って組み合わせる JSXを使って行く

JSX JSの構文中にXMLをかける

propsとstate

props Component生成時に親から渡されるオブジェクト イミュータブル 外部とのインタフェース

state 動的に値を変化させられる Component内で管理

Componentのライフサイクル

https://qiita.com/kawachi/items/092bfc281f88e3a6e456

Redux

ReduxをつかうことでReactのComponentでは Stateを管理せずにpropsだけを使うようにできる

yarn

パッケージ管理ツール package.jsonで管理する

bable

ecmascriptのトランスコンパイラ ReactはES6で書く ES6はブラウザでそのまま動かない

webpack

アセットを生成するビルドツール 複数のソースを1つにまとめられる

flow

javascriptは動的かたつけ 静的型チェックできる

css modules

cssをComponentごとに持たせられるツール

create-react-appみてみる すぐにreact appのbootupできる

勉強法

公式チュートリアル 自分でちょっとアレンジ Reduxのチュートリアルやる

入門Reactを使用して輪読会 1人React.js Advent Calender 基本的なところが簡潔にまとまっている ライフサイクルの部分は常に見えるところに置いておくとよい

オープンソースにコミット 未マージだけど, 機能追加のコミットを試みた

オープンソースを読む Material-UI

実務での開発 / 実践が一番 手を動かすことが大事 他の人のコードも見れるので良い 教えてもらう

フロントは進化のスピードが早い はてぶ, qiita, SNSを毎日チェック

ランサーズの開発メンバーが書いたブログ公開中