Getting Started with React and Firebase - Firecasts Firebase English Japanese

Getting Started with React and Firebase - FirecastsYouTube↗ IA↗(long shot)
Science & Technology 95.6K views 1.2K likes 41 dislikes 16 Aug 2016

Firebase 416K subscribers United States YouTube↗

Click to Play Video

[MUSIC PLAYING]

やあ皆さん

DAVID EAST: Hey, everybody. David here, and on today's episode of Firecast,

ディビッドです今回の Firecasts は

we're going to be going over React and Firebase.

React と Firebase です

And just as a reminder, this is just one episode

繰り返しますが

on an entire playlist of Firebase on the web.

これは Firebase on the Web の再生リスト全体の１つなだけです

So make sure to subscribe if you want to keep up to date.

最新情報を得るには是非登録してくださいね

But today we're going to be using the Create React app

今日は Create React App コマンドラインツールを使って

command line tool to freshly start a brand new React app,

新品の React アプリを新しく開始し

and then include Firebase.

Firebase を含めます

So let's get started.

では始めましょう

So to get started with Firebase and React,

まず Firebase and React の始めに

I'm going to use the Create React App command line tool.

Create React App コマンドラインツールを使います

And this tool is created by members of the React team.

このツールは React チームによって作られています

And it's seriously one of the easiest,

冗談抜きで最も簡単なうちの１つです

if not the easiest way I have ever gotten up and running

そうでないとしても React で稼働する最も簡単な方法です

with React. Because all you have to do is install the module globally,

というのはモジュールを全体的にインストールすればいいだけだからです

and then it's just one command to kick off a new app.

すると新しいアプリを開始させるのは１つのコマンドです

So let's go to the command line and type npm

ではコマンドラインに行き

install -g create-react-app.

npm install -g create-react-app とタイプしましょう

So I already have this module installed on my machine,

もうこのモジュールが私のマシンにインストールされているので

so I'm going to skip this step.

この段階は飛ばします

But once you're done, all you have to do

だが皆さんは終わったら

is type create react app, and then the name of your project.

create-react-app と自分のプロジェクト名をタイプするだけです

So I'm calling mine Firebase React Starter,

私のは firebase react starter と呼びますが

but obviously you can use whatever name you want.

明らかにどの名前でも使えます

And once you're done, you hit Enter.

終わったら Enter を押します

It's going to tell you that it's installing packages,

すると「パッケージをインストール中」と表示され

and that this might take a couple of minutes.

これに２分位かかるかもしれません

And in my experience, yeah, this could take a bit.

私の経験では少しでした

So get comfortable.

だから安心してください

All right, it's all installed now.

はいもうインストールされました

So all you have to do is CD into the project it created.

あとはそれが作ったプロジェクトに CD するだけです

So this project gets generated with a local development

このプロジェクトはホットリローディングがデフォルトで有効になっている

server that has hot reloading enabled by default.

ローカルの開発サーバーによって生成されます

So to kick that off, all you have to do is type npm start.

だからそれを開始するには npm start とタイプすればいいだけです

So this will kick you out to your default browser at port

これでポート 3000 でデフォルトのブラウザが立ち上がり

3000 and give us this default page with this React

このデフォルトページが出て

spinning logo that I'm just going to stare at.

今私が見ているこの React ロゴが回っています

And we're back, OK.

戻っていますね

Now that that's done, let's install Firebase.

これが終わったら Firebase をインストールしましょう

So I'm going to go back to the terminal,

ターミナルに戻り

and rather than killing my local server,

ローカルサーバーを終了させずに

I'm actually just going to open up a new tab

新しいタブを開いて

and install Firebase.

Firebase をインストールします

So to install Firebase, I'm going

Firebase をインストールする為に

to do npm install firebase --save.

npm install firebase --save とタイプします

And once that's done, I'm going to open up my editor.

それが終わったらエディターを開きます

So as a web developer, your first instinct

Web 開発者として

might be to open up index.html.

皆さんは直感的に index.html を開くでしょう

And here, you're going to look for script files.

ここでスクリプトファイルを探します

So where is the React library?

React ライブラリはどこでしょう？

And you might notice that it's nowhere to be found on this page.

このページのどこにも見つからないと気づくでしょう

And that's because this project setup uses module bundling

それはこのプロジェクト設定がモジュールがウェブパックと

バンドルされているからです

So if you go out to the browser, you

だからブラウザに行けば

can see that there actually is a script tag that gets injected

ビルドプロセス中に注入される script タグが実際にあるのが

during the build process.

分かります

And this script is called bundle.js,

このスクリプトは bundle.js と呼ばれます

because it's all of your code bundled into one file.

コード全部が１つのファイルにバンドルされているからです

And that is done through the magic of webpack.

これはウェブパックの魔法で行われます

If you want to learn more about webpack,

ウェブパックについてもっと知りたければ

I have a link to the project in the description.

説明欄にプロジェクトのリンクがあります

So when you're using webpack projects,

ウェブパックプロジェクトを使っている時は

one file is the entry point, and it is usually

1つのファイルがエントリー· ポイントで

either the index.js or the main js file.

それは普通 index.js か main.js ファイルになります

So we're going to click here into index.js,

ではここをクリックして index.js に行きます

and you can see that it has some syntax that some of you

ご覧のようにここにある構文には

might not be familiar with.

馴染みのない人もいるかもしれません

And that's this import from syntax.

それはこの import from 構文です

So a lot of you are probably familiar with using the window

多くの皆さんは多分 window を使用して

to attach objects to.

オブジェクトをアタッチするのには慣れているでしょう

So in ES 2015 land, using the window isn't the preferred way.

ES2015 の地では window を使うのは好まれません

What's preferred is that you actually import from these files, rather than just pulling them off this global window object.

好まれるのはこれらのファイルから実際にインポートすることであってこのグローバル window オブジェクトからプルしないのです

So you might be wondering, how does this app know

ではこのアプリはこれらのファイルがどこにあるか

where these files live.

どうやって知るのでしょう

Because these aren't file paths or anything.

これらはファイルパスや何かではないのに？

And that is also what webpack does for you underneath the hood.

これもウェブパックが陰でやってくれることです

So webpack will take all of these import statements,

ウェブパックはこれらのインポート文を全て受け取って

and it will bundle them into one file.

それらを１つのファイルにバンドルします

So anything imported will be bundled.

インポートされた何でもバンドルされるのです

So what that means is if we go and import star as Firebase

これの意味としては Firebase としての星を Firebase から

from Firebase, it will automatically

インポートすればそれは自動的に

be included into our bundled JavaScript file.

バンドルされた JavaScript ファイルに含まれます

So with Firebase imported, all we have to do

では Firebase がインポートされたら

is type Firebase.initializeApp, and then

あとは firebase.initializeApp とタイプして

provide our config, which you can

それにconfig を提供します

get from the Firebase console.

それは Firebase コンソールから取得できます

And at this point, you are 100,000%

この時点で皆さんは 100%

ready to get started with your React and Firebase app.

React and Firebase アプリを開始する準備ができました

So as you can see, using the Create React App command line

ご覧のように Create React App コマンドラインツールを使うと

tool makes it really easy to get started.

開始するのがとても簡単になります

And that's all for this tutorial.

今回のチュートリアルは以上ですが

But if you want to learn more, make

もっと知りたければ

sure you stay tuned because we're

是非次回も見てください

going to be doing another Firebase and React

また別の Firebase and React 動画を載せて

screencast that actually builds upon this one.

これの上に形成していきます

And it's going to show you how React state management works

そして React 状態管理が

perfectly with the Firebase database's real time data

Firebase データベースのリアルタイムデータ同期と一緒に

synchronization.

完全に動作するのを説明します

So that's all for this episode.

今回のエピソードは以上です

If you like this video, make sure to like and subscribe,

このビデオが気に入ったら「高く評価」して登録してくださいね

and I will see you all next time. [MUSIC PLAYING]

では次回お会いしましょう

Similar videos:

Getting Started with React and Firebase, Part 2 - Firecasts
Firebase
96.8K views 1.1K likes 23 dislikes 18 Aug 2016100% match

Getting Started with Firebase Storage on the Web - Firecasts
Firebase
125.6K views 1.2K likes 21 dislikes 07 Jul 201680% match

Getting Started with the Firebase Realtime Database on the Web, Part 2 - Firecasts
Firebase
164.8K views 1.2K likes 19 dislikes 09 Aug 201677% match

Getting Started with the Firebase Realtime Database on the Web, Part 1 - Firecasts
Firebase
369.8K views 3.1K likes 74 dislikes 02 Aug 201677% match

Getting started with Firebase Auth on the Web - Firecasts
Firebase
368.2K views 6.3K likes 118 dislikes 26 Jul 201675% match

Getting Started with Firebase Hosting on the Web - Firecasts
Firebase
133.5K views 771 likes 38 dislikes 12 Jul 201673% match

Getting started with Firebase and Android - Firecasts #1
Google for Developers
113.8K views 1.1K likes 19 dislikes 16 Feb 201667% match

Getting started with Firebase on Flutter - Firecasts
Firebase
12.9K views 467 likes 5 dislikes 03 Dec 202067% match

[NEWER VERSION AVAILABLE] Getting Started with Firebase on iOS - Firecasts
Firebase
139.3K views 451 likes 19 dislikes 03 Jun 201667% match

Getting Started with Firebase on the Web - Firecasts
Firebase
321.6K views 1.9K likes 59 dislikes 27 Jun 201667% match

Getting Started with Firebase for Unity - Firecasts
Firebase
121.7K views 703 likes 36 dislikes 02 Mar 201767% match

Getting Started with the Firebase Realtime Database on Android - Firecasts
Firebase
161.4K views 1.4K likes 23 dislikes 19 May 201660% match

The beginner's guide to AngularJS and Firebase on the Web - Firecasts
Firebase
62.3K views 659 likes 25 dislikes 11 Aug 201658% match

Introducing Firebase Analytics
Firebase
176.7K views 428 likes 26 dislikes 18 May 201656% match

Introducing Firebase Invites
Firebase
125.6K views 393 likes 10 dislikes 18 May 201656% match

Getting Started with Firebase Auth on Android - Firecasts
Firebase
91.8K views 509 likes 45 dislikes 20 May 201656% match

[OUTDATED] Getting Started with Firebase on Android - Firecasts
Firebase
573.9K views 1.6K likes 85 dislikes 09 Jun 201655% match

Introducing Firebase Hosting
Firebase
562.2K views 546 likes 49 dislikes 18 May 201651% match

Introducing Firebase Notifications
Firebase
93.5K views 115 likes 11 dislikes 18 May 201646% match

Introducing Firebase App Indexing
Firebase
158.9K views 352 likes 16 dislikes 18 May 201644% match

Introducing Firebase
Firebase
1.8M views 1.3K likes -1 dislikes 24 May 202144% match

Introducing Cloud Storage for Firebase
Firebase
148.8K views 210 likes 15 dislikes 18 May 201644% match

Introducing Firebase Remote Config
Firebase
3.1M views 718 likes 32 dislikes 18 May 201643% match

Introducing Firebase and AdMob by Google
Firebase
121.2K views 258 likes 11 dislikes 18 May 201643% match

Introducing Firebase Dynamic Links
Firebase
573.3K views 1.1K likes 71 dislikes 18 May 201643% match

Introducing Firebase Test Lab
Firebase
159.1K views 227 likes 9 dislikes 18 May 201642% match

Getting Started with Firebase Cloud Messaging on the Web - Firecasts
Firebase
312.5K views 1.9K likes 128 dislikes 17 Oct 201639% match

SQL Databases and the Firebase Database - The Firebase Database For SQL Developers #1
Firebase
174K views 4.9K likes 34 dislikes 18 Nov 201633% match

Introducing Cloud Functions for Firebase
Firebase
1.2M views 2.6K likes 540 dislikes 09 Mar 201732% match

Converting SQL structures to Firebase structures - The Firebase Database For SQL Developers #2
Firebase
119K views 1.4K likes 38 dislikes 22 Nov 201631% match

Settings Privacy About Contact Donate