0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[React] Reactの学習をします(1-2)コンポーネントの分割

Last updated at Posted at 2021-01-18

#Reactの学習をします(1-2)

Reactの学習をしてみることにしました。
前回の記事 : [React] Reactの学習をします(1-1)

##教材

Reactチュートリアル1:犬画像ギャラリーを作ろう

likr さんが公開している「Reactチュートリアル1:犬画像ギャラリーを作ろう」という記事を教材に学習させて頂きます。

素晴らしい教材をありがとうございます。

##学習日記

本日は「Web アプリをマークアップする」~「コンポーネントの分割」までやりました!

##Web アプリをマークアップする

※ 教材から箇条書き的に抜粋させて頂きます。

src/App.js

・React では、JSX という拡張構文で、 JavaScript の中に HTML のマークアップを記述します

・React では、JSX を返すような関数を特別に コンポーネント と呼びます。

・コンポーネントは、アプリケーションの状態から JSX 式を組み立てて、その結果を HTML としてレンダリングします。

##CSS フレームワークを使う

※ 教材から箇条書き的に抜粋させて頂きます。

・本稿では、CSS フレームワークの一種である Bulma を使用します。

Bulma公式ページ : Bulma公式

##コンポーネントの分割

※ 教材から箇条書き的に抜粋させて頂きます。

・Appコンポーネントの中身が随分長くなってしまいました。こういうときはコンポーネントの分割をしましょう。

・コンポーネントを使う側のコンポーネントを 親コンポーネント、別のコンポーネントから使われる側のコンポーネントを 子コンポーネント と呼びます。

下図のように表示させることができました!

023a.png

0
2
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
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?