React.jsの理解促進のために、問に答える形でここまでの理解を書き出してみる。logs妄想技術録この広告は、90日以上更新していないブログに表示しています。2019-03-08React.jsの理解促進のために、問に答える形でここまでの理解を書き出してみる。SPAはじめにアウトプットによる理解度の確認を目的としてます。情報の正確性を保証するものではないです。Reactとはなにか。それにまつわる技術は。React.jsはUIを簡単に構築するためのFacebook製のUIフレームワーク。思っていたが早速違うようで、React.jsはフレームワークではなくライブラリ。interfaces」との記載がある。NativeWebpackリアクティブとは...よくわからない。Application)を制作する際に重要になってくる概念。SPAとは旧来のWebサイトで主流だったページ遷移を行わない。ページ遷移を行わないというよりかは複数のHTMLファイルを利用しないといったほうがいいのか。そのかわりに、表示されている要素(ブロック、ヘッダーやコンテンツなどなど)を細かく部品として捉え、その部品化された各要素をなんらかのアクションによって入れ替えてアプリの状態・表示を変更する。このときの部品をコンポーネントという。このコンポーネントごとにファイルを作成する。ヘッダーだったら「Header.tsx」のようになる。コンポーネントの中にもコンポーネントは存在できる。ヘッダー内にログインコンポーネント、メニューコンポーネントなど...(実際のコンポーネント分割)Reactを使う際にはReactのコアライブラリとReactDomをインポートする必要がある。別れているのかは現時点では不明。Reactはコアライブラリなので必須なのはわかる。ReactDOMが必須かどうかは不明。Reduxは必須ではない。大規模アプリでは入れたほうがいいっぽい。Reduxは何かという話だが、これは状態管理に特化したライブラリという認識。必須ではないといったのは、ReactのコアライブラリだけでコンポーネントないにState項目を設けて、そこに状態を保持できるから。どのくらいの規模ならReduxが必要になってくるのかは不明。傾向があるだけでこれと行った正解はないはず。ReduxはFluxから影響をうけて作成されている。Fluxと何が違うかはよくわかっていない。「状態」の概念が重要になってくる。ここでいうところの状態とは、例えばユーザー(ユーザーオブジェクト)がログインしている/していないことやJestはフロントエンドのテストツールであり、公式ドキュメントのチュートリアルでも使われているテストツール(テストフレームワーク?)。テストしたいDOM要素を選択し、入力と予想結果を決められた形で書く。チュートリアルのデフォルトだとhoge.test.tsxのようにテストしたいファイル名の拡張子の直前に.testを入れるとファイル保存時にテストが走るようになる。コケるとコンソールにエラーが出る。実際はEnzymeと一緒に使う。詳しくは下記記事参照。mae.chab.inTypeScriptについてはJavaScriptで書くかTypeScriptで書くかという話で、自分はTypeScriptを選択している。理由としては保守フェーズで型の恩恵が得られるということ。ソフトウェアには開発だけでなく保守がつきものだと思っているので、よっぽど開発速度を争うような自体でなければ、開発規模にもよるが多少開発速度が落ちても運用・保守・拡張をしやすいほうがいいといえる。実際にTypeScriptのほうが良いのかという話は、見聞きした中でとりあえず採用して実感してみるという段階なので正直不明。不明点メモ(順不同)リアクティブそういえばリアクティブがよくわかっていない。わかっていなくても雑には書けそうだが、基礎概念を理解することでより理解度を上げたい。コンポーネントを分割する単位、分割の基準コンポーネントを分割する単位がよくわからない。コンポーネント設計」とかで検索すれば出てきそう。Reduxが必要/不必要の基準Reduxは必須ではない。どのようなときに必要で、どのようなときにいらないのかが分からない。何を基準にするのかが分からず、その閾値も不明。予想ではアプリのの規模、特にStateやコンポーネントの複雑性が高くなってくると必要になりそう。StateとPropの違いStateは状態で、ログインしてるかなどの情報を管理する概念だということはなんとなく把握できている。Propは?一般的にデータモデルはこのPropで管理され、ここに値をセット/ゲットしていくことで表示を変えたりDBに値を書き込んだりするのか?Reduxの使い方これは実際にどうコードとして書いていくかみたいなところ。マッピー氏の記事にいいのがありそう。不明点解消...?に向けてリアクティブ下記を参照にした。抽象的でまだわからないのでこれは保留。コードもあって具体的。ヘッダー、ボディ、とDOMのブロックごとにComponentを分けている。これが個人的には分かりやすい。medium.comただし、下記3.の記事に「Reactを少し使ってみれば、Reactのデータフローが親コンポーネントから子コンポーネントにpropsを渡す作業であることがわかります。」とあるので分けまくると実装がだるいことになりそう。