React について簡単なまとめ 1

コンポーネント

React アプリはコンポーネントで構成されています。

コンポーネントとは・・・

独自のロジックと外見を持つ UI（ユーザインターフェース）の部品

• コンポーネントは、ボタンのような小さなものである場合も、ページ全体を表す大きなものである場合もある

React におけるコンポーネントとは、マークアップを返す JavaScript 関数

※ React のコンポーネント大文字で始まる（例. など）、HTML タグは小文字

JSX

JSX は HTML より構文が厳格。
<br /> のようにタグは閉じる必要があります。

• コンポーネントは複数の JSX タグを return することはできません。
  • <div>...</div> または、空の <>...</> で囲む

スタイル

CSS クラスを className で指定、 HTML の class 属性と同じ方法で動作。
CSS ルールは、別の CSS ファイルに記述する。

データ表示

JSX の利用によって、JavaScript 内にマークアップを入れることができる。

JSX の中から JavaScript に戻る場合は、波括弧を使う。

• コード内の変数を埋め込んで表示

return (
  <h1>
    {user.name}
  </h1>
);

参考