LoginSignup
0
0

More than 1 year has passed since last update.

React チュートリアル パート7 (コンポーネント&props)

Posted at

image.png

目標:military_medal:

ReactJSの超重要知識:bangbang:
コンポーネントとpropsを見ていきましょう:muscle::muscle:

ディレクトリ構造

新しくcomponentsフォルダを作成し、そこにList.jsを作ります。

image.png

List.jsを作成

作業は2つだけです:point_up:
まずはじめに、List.jsを作成します!下記の様に記述してください!後ほど説明します:blush:
image.png
:blush:
次に、App.jsを下記の様に変更してください。

image.png

【4行目】import 文を追加

【26行目】<List/>コンポーネントに変更

➪①<List/>コンポーネントに、keyとdocumentを渡しています
➪②document={document}を解説すると、document(右)という値に、document(左)という名前を付けて<List/>コンポーネントに渡しています
➪③App.jsから渡された、documentをList.jsが受け取りそれをdocumentとして受けています(List.js 【3行目】)。これがpropsになります!

ブラウザで確認:fire::fire:

プラウザの表示には特に変わりありません!
コンポーネントを作ることによって、役割を分担することができより読みやすいコードになったかと思います:heart_eyes:

image.png

次回:bell:

ReactJSで簡単な、CRUDシステムを構築してみます!
そこで登場するのがfilter()メソッドです:bangbang:
map()メソッドと同様とても大事なメソッドになるのでしっかり学んでいきましょう:blush:

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0