#Reactの学習をします(1-2)
Reactの学習をしてみることにしました。
前回の記事 : [React] Reactの学習をします(1-1)
##教材
likr さんが公開している「Reactチュートリアル1:犬画像ギャラリーを作ろう」という記事を教材に学習させて頂きます。
素晴らしい教材をありがとうございます。
##学習日記
本日は「Web アプリをマークアップする」~「コンポーネントの分割」までやりました!
##Web アプリをマークアップする
※ 教材から箇条書き的に抜粋させて頂きます。
src/App.js
・React では、JSX という拡張構文で、 JavaScript の中に HTML のマークアップを記述します
・React では、JSX を返すような関数を特別に コンポーネント と呼びます。
・コンポーネントは、アプリケーションの状態から JSX 式を組み立てて、その結果を HTML としてレンダリングします。
##CSS フレームワークを使う
※ 教材から箇条書き的に抜粋させて頂きます。
・本稿では、CSS フレームワークの一種である Bulma を使用します。
Bulma公式ページ : Bulma公式
##コンポーネントの分割
※ 教材から箇条書き的に抜粋させて頂きます。
・Appコンポーネントの中身が随分長くなってしまいました。こういうときはコンポーネントの分割をしましょう。
・コンポーネントを使う側のコンポーネントを 親コンポーネント、別のコンポーネントから使われる側のコンポーネントを 子コンポーネント と呼びます。
下図のように表示させることができました!