未分類

jsx

投稿日:

reactではdomツリーに要素を埋め込むためにJSXという記述方法を採用しています。このJSXはhtmlの書き方と限りなく近いので直感的にわかりやすいです。それでもJSXは本来のjavascriptの記述ではなく、その正体はReactオブジェクトのelementとして格納され、それがDOM ツリーに埋め込まれるという仕組みです。なのでJSXを使用する際はreactライブラリからReactをimportしてやる必要があります。

connect関数

connect関数はProviderコンポーネントで引数にstoreを持たせ、その子要素としてstoreの値をpropsとして渡す際にその子要素がそのままではstoreの値を受け取ることができないので、storeの値を受け取ることができるようにする関数です。connect関数は高階関数の形をとっていて、引数に渡した関数を実行するためにさらにその関数のための引数が与えられています。connectの引数に渡した関数内でstoreから値を持ってきたり、新しい値に置き換えたりして、その帰ってきた関数の引数にstoreの値を持たせたいコンポーネントを渡してやることで最終的にconnect関数が返す値はstoreの値をpropsで受け取った形のコンポーネントです。ざっくりとした認識なのでさらに内部の仕組みを理解することでreduxを理解することができると思うので少しずつ理解を深めていきたいと思います。

-未分類

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

1日バイト2

 今日は久しぶりに納得のいくタイピングができていい感じでバイトの行きにもミツメのアルバムを聴きながらいい気持ちでいたのですが、1日バイトは流石にきついです。今日の配達中は新しいことに挑戦していて、ヒラ …

no image

プログラミングについて

プログラミングの本を読みました。今回は実際の処理の裏側で動いている処理を学びました。コンピュータは0と1しか認識できません。人間がプログラムで書く文章を0と1に変換する機能をアセンブラやコンパイラが担 …

no image

typescript、電気

今日は昨日学習したtypescriptの復習と今日読んだ本の内容について書いていこうと思います。 抽象メソッド abstract class クラス名で抽象クラスを定義し、その中で抽象メソッドを定義し …

no image

チャットアプリ

今回のアプリではまず最初にユーザーのニックネームをフォームに入れて「はじめる」を押すとチャットの画面に遷移します。そのチャット画面の中でメッセージとしてテキストフィールドにメッセージを送るとチャット画 …

no image

デプロイ

firebaseからデータを取り出す firebaseを使ってそこの保存しているデータを受け取り、MessageListコンポーネントで表示させるように実装しました。firebaseから受け取るデータ …