「Web制作を始めたい」 「今はReactも勉強しないといけないらしい」 「Progateという学習サイトで無料で始められるらしい」 |
今やWeb制作は人気の職業なので始めてみようと思う人が増えています。
Progateという学習サイトも知られるようになり、気になる人も多いでしょう。
ゲームプログラミング経験者がReact 1(無料)をやってみた感想です。参考にしてください。
以下「JQuery(無料)」の続きです。
Progate React1コース
Progateにログインすると、Progateが提供する学習コースの一覧が見れます。
コース詳細はいずれまとめ記事に書くとして、無料のReact 1を受けてみました。
レッスン内容
開始するとレッスンのスライドが開きます。
項目ごとに、
- 解説を読んで内容を理解
- 課題で手を動かして覚える
で進めていきます。
課題はProgateのサイト上でできます。
このようにコードを入力し、右のプレビュー画面で動作を確認できます。
タブの見本と見比べながら進めます。
特徴をまとめるとこんな感じです。
(利点)
- 開発環境の設定は必要ないので簡単
- コードにコメントで何をすれば良いか書かれているので簡単
- 命令は自動補完してくれるので楽
- 入力する値は画面左の値をコピペするだけで楽
- さっき学習した文法だけ一から入力するので記憶できる
- 文法を忘れたらスライドを戻るだけなので簡単に思い出せる
- 課題で記述中のコードは自動保存してくれるので安心
- コードを入力すると即座に右画面にプレビュー表示なので分かりやすい
- 右下に見本の完成と見比べながら学習できて間違いにすぐ気づく
- 入力中のコードは常時エラーチェックされてるので間違いにすぐ気づく
初心者に超やさしい学習サイトです。
初心者向けにおいて欠点は特にないです。
学習した項目は一覧で確認できます。
Reactコースは4章、14項目、学習にかかる時間目安1時間40分の構成です。
Web制作はほぼ初心者の僕がこのコースにかかった時間は1時間以下です。
ここからReact 2に進みます。
コンポーネントのレッスンから有料です。(2020年6月)
レッスン内容 ポイント
最初のレッスンはReactについての説明です。
Reactで使う用語と概要の説明です。
- Reactとは
- JSXと書き方、注意点
- App.jsの構成
- JSXとJavaScriptの記述
等
HTML、CSS、JavaScriptの知識が必要ですが、基礎知識があればこのReact 1のレッスンもだいたい理解できます。
React 1で学んだ内容と手順はだいたいこんな感じです。
- 表示するためのHTMLタグをJSXに記述
- JSXはApp.jsのrenderメソッドのreturn内記述する
- JavaScriptはreturn外に記述する
- JavaScriptを中括弧{}で囲めば、JSXにJavaScriptを埋め込める
- return内に複数の要素があるとエラー。divで1つにまとめる
- JSXでは閉じタグが必要。<img>は<img/>のようにする
- JSX内のコメントは{/* */}で囲む、または、//
- ボタン作成 は<button イベント名 = {() => {処理}}>ボタン名</button>
- 保持する変数はstateで定義。初期値はconstractor内で定義。
- stateの変更はthis.setState({プロパティ名: 変更する値});
- 追加したいメソッド(処理)はclass App内に記述
学習のまとめに簡単なカウントアップのコードを書きます。
感想 Progate React 1コース
とにかく、初心者に超やさしい学習サイトです。
優しすぎると感じる場合、JavaScriptは別の学習サイト、ドットインストールから始めてみるのも良いでしょう。
(執筆中)
このReact 1で「Reactを使うと何ができるか?」は分かるようになりますが、無料で学べることはほとんどないので有料版の登録が必須です。
なお、Web制作でAdobe製品(XD、Dreamweaver、Adobe Photoshop、Illustratorなど)を使う場合はAdobe Creative Cloudが必要です。
社会人やAdobeオンライン講座を受けたい場合はヒューマンアカデミーから購入するとお得です。