KAEDE Hack blog

JavaScript 中心に ライブラリなどの使い方を解説する技術ブログ。

Djam wareのfirebase tutorialをした

firebase-crud

copy and pasteでは何も身につきません,end of discussion....

result

ほぼコピペだがlocalhost3kでは完全に動いた

f:id:kei_s_lifehack:20200305021835p:plain

logic的にcakeの方がシンプルに見える.Routerは分かりやすそう?

参考サイト.

www.djamware.com

create project

create firebase project まぁfirebase のconsole行って作る

console.firebase.google.com

create firestore database

create collection boards, document with auto id, add column auther, desc, title,

Install React and make React App

Install npm firebase module

ここでfirebaseとつなぐらしい

Add Firebase to your web app のconfig{}とfirebase initを firebase.jsにpaste

Install router DOM, Bootstrap

Touch src/(Create, Show, Edit).js

index.jsのcodeをそのままpaste!w

import Edit from './components/Edit';
...
  <Router>
      <div>
        <Route exact path='/' component={App} />
        <Route path='/edit/:id' component={Edit} />

とかになる

App.jsも丸々paste!w Show.jsも Createも Editも 特に警告もなく,簡単にnpm startしたらcrudになってしまった... 嘘だろ?

f:id:kei_s_lifehack:20200305022911p:plain

書き間違えてる時の類推警告がすごい親切.

f:id:kei_s_lifehack:20200305022026p:plain

だがこのままfirebase init してdeployしてもそのままweb公開は できなかった,当たり前か....明日やろう.

俺はCakeとSQLの方が慣れてるし何も感じないが,このFirestoreってSQLやXAMPPの導入コストないから実は学習コスト超低かったりするのかな. 考えたらphpと違って端末にSQL入れたりXMAPP入れたりしてないよねこれ.

まぁこっちの方がCRUD文法分かりにくいんだけど(それは慣れとjsの問題では)