Reactと宣言的UI、JSX、コンポーネント、props、children、ファイル分割を学ぶ全22レッスンの入門コースです。モダンJavaScript復習7レッスンは、既習または診断合格で免除できます。最後はプロフィールカードを再利用可能なコンポーネントへ分割します。stateやフォームは次のコースで扱います。
レッスン
22件
所要時間
約5.5時間
ランク
初級
学習環境
ブラウザ完結
10分・登録なしで読めます
動く図解・JSX
動く図解・JSX
プロフィールカードを複数の再利用可能なReactコンポーネントへ分けて表示する
JSXのルールを理解し、式を埋め込んだUIを書ける
コンポーネント・props・childrenを使って表示を再利用できる
画面を部品へ分解し、ファイル単位で整理できる
ブラウザ完結（インストール不要）
触れる図解
10本
導入スライド
78枚
手を動かす演習
19問
理解度クイズ
3問
ゆめさくコード編集部
プログラミング学習をもっと身近に。初心者から実務レベルまで、わかりやすいコンテンツをお届けします。
ゆめさくエンジニア / 現役ソフトウェアエンジニア。Ruby on Rails・Nuxt.js・Next.js・CakePHPなどの実務の開発をベースに、学習コンテンツを作成しています。
宣言的UIとJSXに触れ、自分のコンポーネントを画面に出すところまで進みます。
Reactで毎日使うJavaScriptの記法を、本編の伏線として先に置き直します。
画面を部品として定義し、propsで値を渡して使い回せるようにします。
このコースを終えると取れるバッジ
React 第3コース
0 / 22 レッスン
レッスンの最初に、図と短い言葉で学ぶ内容をつかみます。
左は「どうやって画面を組み立てるか」の手順、右は「どうなっていてほしいか」を書いています。
命令的：手順を書く
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
export default は「このファイルの代表はこれです」という印です。この印がないと、React はどの関数を表示すればよいか分かりません。
export default を書き忘れる
function App() {
return <h1>あおいのプロフィールサイト</h1>;
}export default を書いている
export default function App() {
return <h1>あおいのプロフィールサイト</h1>;
}React はファイル名だけを知っていて、中の関数の名前までは知りません。だから代表に印を付けます。
1 / 4
return のうしろに h1 のタグがそのまま書けます。クォートで囲むと、ただの文字列になってしまいます。
文字列として書くと
export default function App() {
return "<h1>あおいのプロフィール</h1>";
}JSXとして書くと
export default function App() {
return <h1>あおいのプロフィール</h1>;
}文字列は画面にそのまま表示され、要素にはなりません。
1 / 5
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
動かしながら、仕組みや変化を目で確かめられます。
陽葵「注文ウィジェット、今風にできる?」
1問目は無料で解けます。
教材を見ないで、依頼と完成条件だけを読んで書いてみてください。
React道場 ハレノヒ珈琲をモダン化する10問
このコースを終えたあとに進むと、無理なく続けられます
