7. React レベル1

簡易Webサイト・アプリをつくろう!

なぜ学ぶのか

Why Learn

このコースでは、Reactについて学んでいきます!Reactはライブラリの1つです。そしてライブラリとは、「誰かが作った、プログラムの寄せ集め」です。このReactを習得すれば、転職においてはかなり有利になります。また、モダン(現代的)かつ、世界的な普及率も高いライブラリです。現時点では何か分からなくても大丈夫なので、実際にWebサイト・アプリを作成しながら、Reactを理解していきましょう!

ゴール

ES6、JSX、コンポーネントが理解できること。Class ComponentとFunctional Componentの違いが理解できること。propsとstateが理解できること。これらがゴールです!

何ができるようになるのか

実際の現場で多く採用されているReactの基礎がわかるようになります。

学べること

Reactとは?
1.Reactって何?
START
2.そもそも、WebサイトとWebアプリの違いって何?
START
3.フレームワークとライブラリの違いとは?
START
4.SPAって何?
START
Reactを使いこなすための基礎知識
5.ES6とは?
START
6.Babelとは?
START
7.JSXとは?
START
8.コンポーネントとは?
START
9.Class ComponentとFunctional Component
START
10.propsとstate
START
11.ライフサイクルメソッドとは?
START
早速、Webサイト・アプリを作ってみよう!
12.reactを使うための環境構築に必要な知識
START
13.(環境構築)まずは「nvm」のインストールと環境パスを通そう!
START
14.(環境構築)nvmを使って「node.js」をインストールしよう!
START
15.(環境構築)npmに包括されている「npx」でcreate react appコマンドを使ってみよう!
START
16.create react appコマンドでreactを立ち上げよう!
START
17.成果物を確認しよう!
START
18.成果物作りに必要なフォルダとファイルを作ろう!
START
19.Homeクラスコンポーネントを作成しよう!
START
20.Homeクラスコンポーネントの中身を追加しよう!
START
21.ReactにおけるCSSの使い方を学ぼう!
START
22.HomeコンポーネントをCSSで装飾しよう!
START
23.Header関数コンポーネントを作成しよう!
START
24.Footer関数コンポーネントを作成しよう!
START
25.Button関数コンポーネントを作成して、親コンポーネントで位置を調整しよう!
START
26.Buttonコンポーネントでpropsを使おう!
START
27.Buttonコンポーネントで関数を実行しよう!
START
28.三項演算子を使って、Buttonコンポーネントのスタイルを調整しよう!
START
29.stateを使ってHomeクラスコンポーネントのタイトルを表示させよう!
START
30.最終の全体確認をしよう!React Developer Tools
START
Tips 1.console.logによるデバッグ
START
【課題に挑戦!】同じデザインのWebサイトを自分で作ってみよう!
START