Name: React入門：JSX・コンポーネント・props
Availability: InStock

React入門：JSX・コンポーネント・props

Reactと宣言的UI、JSX、コンポーネント、props、children、ファイル分割を学ぶ全22レッスンの入門コースです。モダンJavaScript復習7レッスンは、既習または診断合格で免除できます。最後はプロフィールカードを再利用可能なコンポーネントへ分割します。stateやフォームは次のコースで扱います。

レッスン

22件

所要時間

約5.5時間

ランク

初級

学習環境

ブラウザ完結

このコースの導入スライド

レッスンの最初に、図と短い言葉で学ぶ内容をつかみます。

導入スライドをすべて見る

同じ表示、書くものが違う

左は「どうやって画面を組み立てるか」の手順、右は「どうなっていてほしいか」を書いています。

命令的：手順を書く

const box = document.getElementById("profile");
const title = document.createElement("h1");
title.textContent = "あおいのプロフィール";
box.appendChild(title);

宣言的 UI：完成形を書く

export default function App() {
  return <h1>あおいのプロフィール</h1>;
}

DOM をどの順番で組み立てるかは React がやります。

1 / 4

Reactとは

代表の印がないと表示されない

export default は「このファイルの代表はこれです」という印です。この印がないと、React はどの関数を表示すればよいか分かりません。

export default を書き忘れる

function App() {
  return <h1>あおいのプロフィールサイト</h1>;
}

export default を書いている

export default function App() {
  return <h1>あおいのプロフィールサイト</h1>;
}

React はファイル名だけを知っていて、中の関数の名前までは知りません。だから代表に印を付けます。

1 / 4

最初の表示

JSXは文字列ではない

return のうしろに h1 のタグがそのまま書けます。クォートで囲むと、ただの文字列になってしまいます。

文字列として書くと

export default function App() {
  return "<h1>あおいのプロフィール</h1>";
}

JSXとして書くと

export default function App() {
  return <h1>あおいのプロフィール</h1>;
}

文字列は画面にそのまま表示され、要素にはなりません。

1 / 5

JSX

class でなく className

JSX の属性名は、ブラウザの DOM API に合わせます。CSS の class は JSX では className です。

HTMLの感覚で書く

<div class="profile">
  <h2>あおい</h2>
</div>

JSXの書き方

<div className="profile">
  <h2>あおい</h2>
</div>

class と書いても画面には出ますが、開発中に className へ直すよう警告されます。

1 / 5

JSXの決まり

このコースの動く図解

動かしながら、仕組みや変化を目で確かめられます。

JSX

JSXのルール

式の埋め込み

アロー関数の復習

React入門：JSX・コンポーネント・props

目標

概要

できるようになること

前提知識・必要な環境

必須

推奨

環境

内容

監修