React入門
ReactはWebサイトやWebアプリケーションの見た目（UI）を構築するためのJavaScriptライブラリです。 Metaが開発し、再利用性の高いコンポーネント設計と高速な描画性能によって、世界中のエンジニアから支持を集めています。
Reactレッスンを学習されるみなさんへ
Reactが学べるレッスン一覧
環境構築不要ですぐに学び始められるReactのレッスン一覧です。
学習レッスン
React state編
目安時間 1h40m
0%
Reactはサイトの見た目を作ることができるJavaScriptのライブラリです。React Ⅰでは、「state」というReactの最も大事な機能を学びましょう。
このレッスンで学べること
-
1. Reactに触れてみよう
-
Reactを学ぼう
-
ブラウザに表示しよう
-
-
2. JSXを学ぼう
-
JSX
-
imgタグ
-
App.jsの構成
-
JSXとJS
-
-
3. stateとイベントを学ぼう
-
表示切り替えの準備
-
onClickイベント
-
state
-
stateの表示
-
stateの変更
-
メソッドの作成
-
-
4. カウントアップ機能を作ろう
-
カウントアップ機能を作ろう（1）
-
カウントアップ機能を作ろう（2）
-
学習レッスン
React props編
目安時間 1h30m
0%
React Ⅱでは、Reactの基本を習得します。「コンポーネント」や「props」といった大事な機能を学びましょう！
このレッスンで学べること
-
1. Reactの表示の仕組みを学ぼう
-
Reactの表示の仕組み
-
CSSをつけよう
-
-
2. コンポーネントについて学ぼう
-
コンポーネントの作成
-
コンポーネントの表示
-
コンポーネントの使い方
-
-
3. propsについて学ぼう
-
props
-
propsの使い方
-
mapメソッド
-
学習レッスン
React Webサイト制作基礎編
目安時間 1h40m
0%
このレッスンでは、学習コースⅠ・Ⅱで学んだstateやコンポーネント・propsなどを復習しながら、本格的なWebサイトを作りましょう。
このレッスンで学べること
-
1. 目標物を確認しよう
-
Reactで Webサイトを作ろう
-
-
2. コンポーネントを作ろう
-
コンポーネントの作成
-
コンポーネントの表示（1つ）
-
コンポーネントの表示（複数）
-
-
3. モーダルを準備しよう
-
モーダルのJSX
-
モーダルを隠そう（1）
-
モーダルを隠そう（2）
-
-
4. モーダルを完成させよう
-
モーダルを表示する
-
モーダルを非表示にする
-
学習レッスン
React Webサイト制作応用編
目安時間 2h
0%
React Ⅳではお問い合わせフォームの作り方について学びます。入力チェック機能なども備えた本格的なフォームを作りましょう。
このレッスンで学べること
-
1. 目標物を確認しよう
-
お問い合わせフォームの確認
-
-
2. 送信完了メッセージを表示しよう
-
inputとtextarea
-
送信完了メッセージの作成
-
onSubmitとstateの更新
-
-
3. 入力値をstateで管理しよう
-
入力値のstate管理
-
onChangeと入力値の取得
-
stateの更新
-
-
4. 入力チェックをしよう
-
エラーメッセージの作成
-
onChangeと入力チェック
-
-
5. チャレンジ問題
-
お問い合わせ内容のstate管理
-
React学習後に取り組む実践ステップ
学習したReactを活かして、環境構築や応用的なアウトプットに挑戦してみましょう。
Reactの基礎理解とTipsまとめ
Reactに関する知識や実践的なTipsを学び、理解をさらに深めましょう。
Reactを学ぶ前に知っておきたい学びのコツ
学ぶときの心構えやAIの活用方法を知っておくことで、自分のペースに合わせてより効率的に学習を進められます。
Reactに関連するコース
関連するコースを通じて、Reactで学んだ知識を他の分野にも広げていきましょう。
あなたの書いたコードは削除され、
最初の状態から学習し直すことができます。
あなたの書いたコードを残したまま、
レッスンの内容を見直すことができます。