未分類

React2

投稿日:

簡単なtodoアプリでコンポネーネント間でデータの受け渡しをしました。reactはコンポネーネントという部品を連結させてwebページに動的な動きをつけます。複数のコンポーネントで構成するのですが、この複数のコンポーネントは親子関係をそれぞれのコンポーネントで持ちます。まず最初に一番親であるコンポーネントを作成して、そのコンポーネントで返す仮想DOMツリーの要素の中に子コンポーネントを呼び出します。その際に子コンポーネントを呼び出す記述のところに渡したいデータを記述することで子コンポーネント内のpropsで受け取ることができます。一つのコンポーネントで全部を記述することもできるのですが複数のコンポーネントを作成してそれを組み合わせることが一般的です。ではなぜそのような方式が取られるのでしょうか。

複数のコンポーネントに分ける理由

機能ごとで分けた方が修正する時に楽

一つのコンポーネントでプログラムを書いてしまうとエラーがおきた場合にどの時点でエラーが起きているのか探すのが大変です。これは時間的コストも認知的コストもかかって効率がとても悪くなってしまうのです。機能ごとでコードを分けた場合にはその機能ごとでメンテナンスをすることができるので対象を絞ることができ、修正するスピードが速いのです。

コードが見やすい

一つのコンポーネントだと単純にコードが長くなってしまうので効率が悪いのです。

パッケージ管理

上のと関係ないのですがパッケージのことも学んだのでまとめます。reactではパッケージ管理ソフトからファイルをダウンロードしてアプリケーションを作成します。そもそもパッケージとはどのアプリケーションでも共通で使うプログラムをいちいち記述する必要が内容にファイルにまとめてそのファイルを読み込無ことで簡単に処理を実装することが可能になります。そのパッケージを管理するソフトウェアにnpmを使っていまして、そのパッケージ管理ソフトをダウンロードすることによって使えるようになるコマンドを実行することでそのソフトで管理しているパッケージのプログラムをダウンロードして使うことができるのです。importの記述で読み込無ことでその読み込んだパッケージ内で定義されているメソッドを読み込んだファイル内で使うことができるようになり、効率的にプログラムを書くことができます。

まとめ

今のところこの程度の理解なのですがやっていくうちにどんどん理解していきたいと思います。とりあえず今やっているtodoリストを1から作り直してみて、次はカレンダーのアプリを作っていきたいと思います。

-未分類

執筆者:


comment

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

関連記事

no image

ビンゴゲーム

明日は企業さんの面接で自分の作ったプログラムを説明しなければいけないのでその練習をします。 1、ビンゴカードの作成 BingoCardクラスを作成し、その中でinitializeメソッドでインスタンス …

no image

linux

 今日はLinuxの学習をしていました。ファイルの中身をいじったり、ファイルを移動させたり、作ったりとデータを格納していくコマンドをやりました。結局コンピュータはコマンドを覚えればなんとなく使いこなす …

no image

初投稿!

ブログを始めることにしました。理由は単純で、アウトプットをして知識を深め、もっと楽しくなるように考えることができるようになりたいと思ったのと、何より新しいことを始めたいと思ったからです。 文学、プログ …

no image

ロックンロール2

 今日は朝は全くやる気が起こらず、だらだらしてしまいました。そこから履歴書と職務経歴書を書いていました。久々に文字を書いたので楽しかったのですが、途中から飽きてなかなか進みませんでした。そんなときには …

no image

キャッチボール

今日はとてもいい日で、数年ぶりにキャッチボールをしました。ひょんな事から父と一緒に姫路城にいくことになったのですが、父のバッグの中にはなんとグローブが入っていたのです。久しぶりにちゃんと見た姫路城はと …