りあクト
GW前くらいから朝活の記録をする時間がなかなかとれなくていたのですが、細々と活動は続けています。。 今はりあクト!シリーズ3作目をやっています。 oukayuka.booth.pm Firestore のセッティングではまった 本の通り順調に進めていましたが、 1-2. Firebas…
「りあクト!」続編を読み始めました。 booth.pm React Developer Tools の使い方のところでちょっとはまったのでメモ。 サンプルコードは yarn start でビルドとサーバーたちあげを行うようスクリプトが書かれているのですが、 これが「development モード…
朝活続けていますが、こちらをマメに更新していなかった。。 サンプルコードをいじっているとき Git がやたら重いなぁと思っていたら、 .gitignore がなくて /node_modules を含めてしまっていたことが原因とわかりました。 なんでだろう?と思ったときにち…
サンプルコードを写経途中。 BrowserRouter index.tsx で <App /> を <BrowserRouter> というコンポーネントでラップすることで、 下の階層のコンポーネントで HTML5 の History API を利用した各種 の機能が使えるようになる。 ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('roo</browserrouter></app>…
Effect Hook でライフサイクルを扱う クラスコンポーネントのライフサイクルメソッド componentDidMount(), componentDidUpdate(), componentWillUnmount() に相当する機能を実現するもの クラスコンポーネントのライフサイクルメソッドは、「このタイミング…
Hooks Hooks は様々な React の機能をクラスを使わずに利用 できるようにするもの。 Local State とか Lifecycle とか。 この Hooks の発表が React Conf 2018 の基調講演のなかでされたということなんだけど、ここでずいぶん流れが変わってしまっているんだ…
関数コンポーネント 今後はクラスコンポーネントではなく関数コンポーネントを優先して書いていく流れ、とのこと。 以前書いたクラスコンポーネントのコードを関数コンポーネントに書き換えてみた。 github.com コンポーネントとコンテナ Presentational Com…
github.com ちなみに私のコードはサンプルコードにちょっと変更を加えていて、 componentDidUpdate で timeLeft が 0 のときに「60秒たちました!」というアラートメッセージを出すようにしました。 しかし今の状態だと、カウンターには 1 が表示されている…
コンポーネントのライフサイクル 初期化され、マウントされ、レンダリングされ、再レンダリングされ、アンマウントされ…というサイクルのなかで、 それぞれのフェーズに介入して処理を差し込むメソッドが用意されている。 Mounting フェーズ constructor [vo…
コンポーネントと props コード写したり本文読んでいたんですが、やっぱりちょっと「コンポーネント」という考え方が身についていない。 ja.reactjs.org 概念的には、コンポーネントは JavaScript の関数と似ています。(“props” と呼ばれる)任意の入力を受…
最近運動不足が気になっているので、バランスボールに座りながら仕事できないかな?と考えています。 バランスボールは場所をとりそうなので、こちらを購入検討中。。 バランスワン フィットネスチェア(ワブリー)(GREEN)メディア: その他 新しいReactアプ…
やっと「りあクト!」本文に戻ってきました。。 Props サンプルコード(CharacterList.tsx) interface CharacterListProps { school: string; characters: Character[]; } class CharacterList extends Component<CharacterListProps> { render(){ const { school, characters }</characterlistprops>…
JSX内でのコメント JSX内はあくまでJavaScriptなので、JavaScriptのコメント記述方法を使用します。 chaika.hatenablog.com ジェネリクス 「クラス宣言のとこ、Component と今までComponentクラスを継承するときにな かったジェネリクスみたいなのがあ…
Semantic UI React 簡単にスタイルを適用するためのライブラリ react.semantic-ui.com create-react-appしたディレクトリで、このライブラリを追加します。 >> yarn add semantic-ui-react semantic-ui-css index.tsx に import文を追加します。 import 'sem…
コンポーネントとProps React では、データは必ず親コンポーネントから子コンポーネン トへ一方通行で渡されます。下の階層から上の階層にデータの変更を反映させることはできないの 親コンポーネントから子コンポーネントのデータの…
昨日宣言したポモドーロテクニック作戦はあっさり敗北しました。。 今日はこのアプリを入れて実践してみようと思います↓ Be Focused - 仕事および勉強用の TimerDenys Yevenko仕事効率化無料apps.apple.com スタートするときにタスクを入力するので「よし!…
ポモドーロテクニックは25分間集中して5分休憩する、ということだけど、25分ってけっこうあっという間だよなーと思っていた。 今日「50分集中して10分休憩」というソリューションを教わったので、昼間さっそく実践してみようと思う。 ちなみに朝活も50分間。…
高階関数 // 引数に関数をとる arr = [1, 2, 3] arr.map(n => n * 2); // 戻り値として関数を返す const hof = (ex, fn) => { retrun n => fn(n + ex); }; const plusOneDouble = hof(1, n => n * 2); console.log(plusOneDouble(4)); // (4 + 1) * 2 = 10 /…
朝活が成功するとブログ更新ができるぞ!として、モチベーションを維持。 便利な配列やオブジェクトのリテラル // 分割代入 const [n, m] = [1, 4]; // スプレッド構文 const arr1 = [ 'A', 'B', 'C' ]; const arr2 = [...arr1, 'D', 'E' ]; // [ 'A', '…
夜に活動があったり(Ikejiri.rbオンライン読書会)、夜中にムスメ対応が発生すると、睡眠時間がずれてしまう。。 仕方なし、そういうときは受け入れて、またできるときに、やる。 クラス構文 constructor は継承されないので、継承先で constructor() と明…
週末をはさむと少し「ひさしぶり感」がある。 花粉症がやばくなってきたので病院に行く必要がある。。 package.jsonのscripts npmコマンド、それはつまりyarnコマンド。 package.json の scripts にエントリを記述しておくと、あたかもnpmコマンドとして実行…
VSCodeのプラグインをインストール 本の中でおすすめされているVSCodeプラグインをインストールしたり内容を確認してみたり サンプルコードをチェックアウトすると、 .vscode/extentions.json というファイルがあって、そのなかに同じプラグインが書かれてい…
昨日は大江戸Ruby会議08が開催されて、行けなかった私は起きてからしばらく楽しそうなTLをながめていました。 今朝も「りあクト!」の続きから! npmの特定のバージョンをインストールする npmのバージョンが合っていなかったので、npm i -g npm@6.8.0 でイ…
朝活をはじめてみる きっかけがあって、朝5時から 朝活 をはじめてみました。 いつも夜22時前くらいに娘を寝かしつけて、そのときに一緒に寝てしまい午前2時くらいに起きてすこし活動していることが多かったのですが、 そのまま朝まで寝てしまって、5時から…