javascript

react-redux でカウンターを作る - IssueOverflow を TypeScript 版を作成してみた。 yuya-matsushima/react-redux-counter-ts 作ってみてどうだったか vim は外部ライブラリの types (型) 情報が厳しいので素直に Visual Studio Code を使った @types で追加されている型情報はある程度頭に入れないと手間取る 慣れるまで大変そう

React と組み合わせて使う Redux, 特に react-redux の取り扱いがいまいちわからず困ってしまう自体が発生したので基本的な使い方を確認するためにカウンターを作ってみました。 yuya-matsushima/react-redux-counter カウンターの動作自体は + ボタンででインクリメント, - ボタンでデクリメントするだけの簡単なものです。 参考 React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで（穴井宏幸 石井直矢 柴田和祈 三宮肇）｜翔泳社の本 ReactとReduxを結ぶパッケージ「react-redux」についてconnectの実装パターンを試す - Qiita 何がわからなかったのか ファイルの分割と機能 components ディレクトリと containers ディレクトリに配置するファイルの違い connect まわり mapStateToProps mapDispatchToProps 書籍と Qiita 記事のおかげでどうにか解決しましたが, もう少し使ってみる必要がありそうです。便利な機能がまだまだあるようなのでドキュメントの読み直しも必要です。 サーバサイドからクライアントサイド, フロントエンドへ 私のスキルセットのほとんどはサーバサイドに降って来たため, フロントエンドのキャッチアップが全体的に遅れています。短期間で集中してフロント側のスキルセットやツール, サービス利用方法を身につけていきたいと思っています。 ただし, react + redux + Rails or Go みたいな案件で一緒にコードがかける人が群馬にいないのでかなり問題だ。

React を使うにあたり, というか最近の JS の開発を行う場合 WebPack + Babel の環境を用意して, さらに JS フレームワークを追加し設定を書いて…といった煩雑な手続きが必要です。 React の場合 create-react-app という便利コマンドでサクッと開発環境を作ることができます。ただし, create-react-app でプロジェクトを始めた場合, 余計なファイルを同時に作ってしまい練習用にはお節介がすぎる感があります。 そこで create-react-app で採用されている react-scripts を使って必要なところだけ楽をする。をしてみました。 手順 初期化を適当に実行。 $ npm init npm で必要なパッケージを追加します。 $ npm i -D react-scripts $ npm i react react-dom npm に必要なコマンド定義を追加します。 "scripts": { "start": "react-scripts start", "build": "react-scripts build", "eject": "react-scripts eject", "test": "react-scripts test" }, react-scripts には特定のディレクトリやファイルが必要らしいので最低限作ります。 $ mkdir -p public src $ touch public/index.html $ touch src/index....