Development
Web Development
React Hooks
React Hooks TypeScript 超入門 - Firebase を使った素材配布サイトを作ろう！
4.0 (12 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
68 students enrolled

React Hooks TypeScript 超入門 - Firebase を使った素材配布サイトを作ろう！

React Hooks 、TypeScript を学んで Firebase を使った素材配布サイトを作りましょう。つまずきがちな React / TypeScript の環境構築は Cloud9 を使うので簡単にできます。
4.0 (12 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
68 students enrolled
Created by Yoshiki Mogi
Last updated 6/2020
Japanese
Preview this course
React Hooks TypeScript 超入門 - Firebase を使った素材配布サイトを作ろう！
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 3.5 hours on-demand video
  • 6 articles
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Reactの使い方
  • React Hooks(useState, useEffect)の使い方
  • TypeScriptの使い方
  • Firebase(Cloud FireStore,Cloud Storage)の使い方
  • 素材配布サイトの作り方
  • Material UIの使い方
  • React Routerの使い方
  • 検索機能の作り方
Course content
Expand all 32 lectures 03:36:43
+ – はじめに
1 lecture 01:55

コースの概要について説明します。

はじめに
Preview 01:55
+ – React
3 lectures 14:44

Reactについて説明します。

Reactとは
01:05
【推薦】npxコマンドの使用
00:32

実際にReactを使ってみましょう。

Reactを使ってみる
13:07
+ – TypeScript
3 lectures 09:43

TypeScriptについて説明していきましょう。

TypeScriptとは
00:25
【注意】--typescriptオプションの使用について
00:25

TypeScriptを使ってみる。

TypeScriptを使ってみる
Preview 08:53
+ – 【実践】1.環境構築
3 lectures 05:58
【注意】AWSへの課金について
00:29

素材配布サイト作成するための環境を構築をしていきましょう。

1-1.環境構築
05:23
ソースコード
00:05
+ – 【実践】2.トップページを作る
6 lectures 01:11:14

トップページのコンポーネントを作りましょう。

2-1.トップページのコンポーネントを作る
Preview 12:46

ヘッダーを作りましょう。

2-2.トップページのヘッダーを作る
08:50

メインコンテンツの背景を作りましょう。

2-3.メイン: 背景を作る
16:11

メインコンテンツの検索窓を作りましょう。

2-4.メイン:検索窓を作る
15:29

キーワードを保持できるようにしていきましょう。

2-5.メイン:キーワードを保持する
06:07

ページ遷移できるようにしていきましょう。

2-6.メイン:ページ遷移
11:51
+ – 【実践】3.リザルトページを作る
12 lectures 01:24:27
【注意】Reactをインポートできなかったり、ビルドできない場合
00:40

リザルトページのコンポーネントを作りましょう。

3-1.リザルトページのコンポーネントを作る
04:44

ヘッダーを作る。

3-2.リザルトページのヘッダーを作る
01:52

画像を用意する。

3-3.検索結果: 画像を用意する
02:44

Cloud Storageに画像を保存する。

3-4.検索結果:Cloud Storageに画像を格納する
05:40

Databaseに情報を入れる。

3-5.検索結果:Databaseに情報を入れる
08:52

ReactでFirebaseを使えるようにする。

3-6.検索結果:ReactでFirebaseを使えるようにする
04:48

コンポーネントを作っていきましょう。

3-7.検索結果:コンポーネントを作る
02:54

データを取得し配列に格納する関数を作りましょう。

3-8.検索結果:データを取得し配列に格納する関数を作る
23:06

関数を呼び出してみましょう。

3-9.検索結果:関数を呼び出す
08:32

データが格納された配列を表示してみましょう。

3-10.①検索結果:データが格納された配列を表示する
09:59
3-10.②検索結果:データが格納された配列を表示する
10:36
+ – 【実践】4.ダウンロードページを作る
3 lectures 28:36

ダウンロードページのコンポーネントを作りましょう。

4-1.ダウンロードページのコンポーネントを作る
07:02

画像を表示してみましょう。

4-2.画像を表示する
09:55

ダウンロードボタンを作ってみましょう。

4-3.ダウンロードボタンを作る
11:39
+ – ボーナスレクチャー
1 lecture 00:04
さらに学びたい方へ
00:04
Requirements
  • コンピュータの基本操作
Description

【コースの概要】


React Hooks, TypeScript, Firebase(Store, Storage)を用いて、一つの素材配布サイトを作成していく内容となっています。


このコースでは、


1.React

2.React Hooks(useState, useEffect)

3.TypeScript

4.Firebase(Cloud FireStore,Cloud Storage)

5.Material UI

6.React Router


などを扱います。


Who this course is for:
  • React Hooks, TypeScript, FIrebaseを使って実際に何かを作ってみたい方
  • 理論よりも実際に作ることに重きを置く方