{"id":6303,"date":"2020-05-21T11:57:44","date_gmt":"2020-05-21T11:57:44","guid":{"rendered":"https:\/\/max-drake.cc\/?p=6303"},"modified":"2020-05-21T11:57:47","modified_gmt":"2020-05-21T11:57:47","slug":"react-firebase-crud-tutorial-by-maksim-ivanov","status":"publish","type":"post","link":"https:\/\/max-drake.cc\/?p=6303","title":{"rendered":"React Firebase CRUD tutorial by Maksim Ivanov"},"content":{"rendered":"\n<p>This seems a practical tutorial to do. It does the basic things that yuou want, Create, Read, Update &amp; Delete. He does a script upload for database populating, but I&#8217;m interested in using it as a web app for a to do list or project list.  Github repository for code <strong><a href=\"https:\/\/github.com\/satansdeer\/react-firebase\" target=\"_blank\" rel=\"noreferrer noopener\">HERE.<\/a><\/strong> <\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How to use Firebase Firestore with ReactJS. Firebase CRUD tutorial.\" width=\"678\" height=\"381\" data-src=\"https:\/\/www.youtube.com\/embed\/yyo_TcZCrS4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"React Firebase CRUD Tutorial - Subscribe To Firestore Changes\" width=\"678\" height=\"381\" data-src=\"https:\/\/www.youtube.com\/embed\/ugAgovxfX1U?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>After downloading his code from github, I linked to a firebase project of my own. I wanted to make an expences app so used the code to link to that. On starting I got errors and couldn&#8217;t resolve them with evein import expressons being highlighted as errors. So i loaded up a new react folder with :<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">npx create-react-app crud-expenses<\/pre>\n\n\n\n<p>Then ran &gt;npm start to check the localhost server was running. I finally rebuilt the app, what was happening was I&#8217;d downloaded and installed a few extensions in VS Code and typescript was one of them, so it was being difficult, after I went to settings and disabled these the code looked ok. <\/p>\n\n\n\n<p>I also had to re-write names so I could map to expenses rather than spells and after a bit of debugging I got that sorted, <\/p>\n\n\n\n<p>Next there was an error of :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.\/src\/firebase.jsModule not found: Can't resolve 'firebase' in....... '<\/code><\/pre>\n\n\n\n<p>Although I&#8217;d done <strong><span style=\"color:#cf2e2e\" class=\"color\">&gt;firebase init<\/span><\/strong>, I hadn&#8217;t done<strong><span style=\"color:#cf2e2e\" class=\"color\"> &gt;yarn install firebase<\/span><\/strong>, and aftwer this was done : Trala!!!<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"523\" height=\"205\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-21-12_37_51-React-App.jpg\" alt=\"\" class=\"wp-image-6320 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-21-12_37_51-React-App.jpg 523w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-21-12_37_51-React-App-300x118.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-21-12_37_51-React-App-50x20.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-21-12_37_51-React-App-128x50.jpg 128w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-21-12_37_51-React-App-100x39.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-21-12_37_51-React-App-255x100.jpg 255w\" data-sizes=\"(max-width: 523px) 100vw, 523px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 523px; --smush-placeholder-aspect-ratio: 523\/205;\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"447\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-21-12_42_13-CRUD-react-firebase-\u2013-Database-\u2013-Firebase-console-1024x447.jpg\" alt=\"\" class=\"wp-image-6321 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-21-12_42_13-CRUD-react-firebase-\u2013-Database-\u2013-Firebase-console-1024x447.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-21-12_42_13-CRUD-react-firebase-\u2013-Database-\u2013-Firebase-console-300x131.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-21-12_42_13-CRUD-react-firebase-\u2013-Database-\u2013-Firebase-console-768x335.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-21-12_42_13-CRUD-react-firebase-\u2013-Database-\u2013-Firebase-console-50x22.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-21-12_42_13-CRUD-react-firebase-\u2013-Database-\u2013-Firebase-console-115x50.jpg 115w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-21-12_42_13-CRUD-react-firebase-\u2013-Database-\u2013-Firebase-console-100x44.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-21-12_42_13-CRUD-react-firebase-\u2013-Database-\u2013-Firebase-console-229x100.jpg 229w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-21-12_42_13-CRUD-react-firebase-\u2013-Database-\u2013-Firebase-console-640x279.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-21-12_42_13-CRUD-react-firebase-\u2013-Database-\u2013-Firebase-console.jpg 1164w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/447;\" \/><\/figure>\n\n\n\n<p>So I have the Sum showing, now I need to get the rest of the data on the screen in the app. This is the bit I stuff up.  <\/p>\n\n\n\n<p>I can now display all the fields but it isn&#8217;t updating the database. I&#8217;ve been fiddling with it and have now sorted it out. <\/p>\n\n\n\n<p>For a new item I use the new Date() and then force it to a string , which is fine, as long as I have a good structure format. I think I can export and pull into a spreadsheet and convert back to a date if I need to. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const dt = new Date();\nconst date1 = dt.getDate() + \"\/\" + (dt.getMonth() + 1) + \"\/\" + dt.getFullYear();<\/code><\/pre>\n\n\n\n<p>So, not the prettiest, I can now do CRUD operations on the fields and create a new instance. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"356\" data-src=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-21-18_55_05-React-App-1024x356.jpg\" alt=\"\" class=\"wp-image-6322 lazyload\" data-srcset=\"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-21-18_55_05-React-App-1024x356.jpg 1024w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-21-18_55_05-React-App-300x104.jpg 300w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-21-18_55_05-React-App-768x267.jpg 768w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-21-18_55_05-React-App-50x17.jpg 50w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-21-18_55_05-React-App-144x50.jpg 144w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-21-18_55_05-React-App-100x35.jpg 100w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-21-18_55_05-React-App-288x100.jpg 288w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-21-18_55_05-React-App-640x223.jpg 640w, https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-21-18_55_05-React-App.jpg 1363w\" data-sizes=\"(max-width: 1024px) 100vw, 1024px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/356;\" \/><\/figure>\n\n\n\n<p>Not pretty, but operates, although<span style=\"color:#cf2e2e\" class=\"color\"> I still have to refresh the page <\/span>to see the updates. I will have to watch video 2 to see if I can get it to automatically refresh. <\/p>\n\n\n\n<p>Also <span style=\"color:#cf2e2e\" class=\"color\">a pull down list<\/span> <span style=\"color:#cf2e2e\" class=\"color\">would be good<\/span>. That is another challenge. The video below talks about different alternatives to dropdown lists:<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"How to Create a Simple React Dropdown | Part 1\" width=\"678\" height=\"381\" data-src=\"https:\/\/www.youtube.com\/embed\/AcOjmZrcxfM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>The other thing is the <span style=\"color:#cf2e2e\" class=\"color\">input to database is not fixed by<\/span><strong><span style=\"color:#cf2e2e\" class=\"color\"> type<\/span><\/strong>! I need to check on that to stop bad data getting in. Currently I have a boolean for&#8221;billable&#8221; wanting a true\/false but it accepts Y\/N and changes type to string in the database. I suppose you can use type to force type in React, I saw a video today showing a react package fixing type , but there didn&#8217;t seem to be anything in the database, also no &#8220;CATCH&#8221; on the data input to stop\/show error so not taking data in.  The video below talks about types &#8211; about 18 minutes in:<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"React Tutorial - Learn ReactJS and build a simple CRUD app\" width=\"678\" height=\"381\" data-src=\"https:\/\/www.youtube.com\/embed\/S66rHpyU-Eg?start=1087&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">End comment<\/h3>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<h4 class=\"has-luminous-vivid-orange-color has-text-color wp-block-heading\">This project on hold- learnings<\/h4>\n\n\n\n<p>There are another couple of things I&#8217;ve found out about that I want to persue, so will put this project on hold. havent deployed it or done the drop downs or fixed type. Maybe later.<\/p>\n\n\n\n<p>I&#8217;m happy with what I&#8217;ve done to date on this project. I&#8217;ve been able to have, after using the boilerplate from the main video (thank you <a href=\"https:\/\/www.youtube.com\/channel\/UC5hby9iDkwOTQM7PIjyjbgw\">Maksim Ivanov<\/a> ) I&#8217;ve been able to:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>change from spells to expense<\/li><li>Connect to my Firebase database (there was a problenm as I had not installed firebase with &gt;npm install firebase<\/li><li> modified the create to allow for more fields to be created at the same time to put into the database<\/li><li>made date a hidden field so it creates a timestamp when the record is created.<\/li><li>Modified the timestamp to a string so that it looks like a normal date eg 27\/5\/2020.<\/li><li>modified the fields in the database so that they display multiple fields including date (so it can be modified too)<\/li><\/ul>\n\n\n\n<p>What I havent done which would be good : <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>havent deployed it as a webapp<\/li><li>No drop down loists (this will allow cleaner data entry)<\/li><li>No fixed type of data in the database, so if you have a boolean field and put in &#8220;Y&#8221; it changes that field to a string, which is not good. So fixing the type of input and handling the error when it does not occur needs to be looked at.<\/li><li>Auto refresh. At this point, you update a field or create a record, you have to refresh the browser to show the changes. Maksim deals with this in the 2nd video.<\/li><li>Inside the iput boxes I&#8217;d like a &#8220;gray text&#8221; indicationg what the field should have eg &#8220;sum&#8221;, &#8220;payee&#8221; &#8230;.. etc<\/li><li>It would be nice to make a nicely formatted page using something like materials-ui to learn a bit about that and chage buttons and maybe even use &#8220;table&#8221; component for listing the records. <\/li><\/ul>\n<\/div><\/div>\n\n\n\n<h4 class=\"has-luminous-vivid-orange-color has-text-color wp-block-heading\">Next exploration projects- Sanity.io, Jamstack, Gatsby <\/h4>\n\n\n\n<p>I started to explore using Material-UI templates, that led me on to learning about forking in Github and how to partially download a repository folder. I was seeing if there is a simple way to deploy to the web <\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\">Sanity.io<\/h4>\n\n\n\n<p>This has a great interface and templates for trying to quickly get a tidy react website up and running. There is a template blog but maybe use gatsby. <\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\">Gatsby <\/h4>\n\n\n\n<p>Simple template site that has Jamstack logic of static page, API &amp; Markdown. I need to explore this as I&#8217;ve read a lot about it. No backend (or little- I have to figure this out<\/p>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\">Jamstack<\/h4>\n\n\n\n<p>This is what the above tow items are based on, it speeds up webpages by making them use API and has templating that you do in React and other JS (and PHP?) things-<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h4 class=\"wp-block-heading\">Material UI<\/h4>\n\n\n\n<p>This has good templating. I need to test\/deploy simple pages <\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">Netlify <\/h2>\n\n\n\n<p>This is used to deploy your web apps. There is a free version that I need to explore. <\/p>\n\n\n\n\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading\">Git partial cloner a directory &amp; fork<\/h2>\n\n\n\n<p>I need to do a post on this using tortois SVN<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>This seems a practical tutorial to do. It does the basic things that yuou want, Create, Read, Update &amp; Delete. He does a script upload for database populating, but I&#8217;m interested in using it as a web app for a to do list or project list. Github repository for code HERE. After downloading his code [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6322,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[41,36,39,446,29],"tags":[],"class_list":["post-6303","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aws-gc-az-free-tier","category-databases","category-nosql-databases","category-react_js","category-web"],"featured_image_src":"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-21-18_55_05-React-App.jpg","featured_image_src_square":"https:\/\/max-drake.cc\/wp-content\/uploads\/2020\/05\/2020-05-21-18_55_05-React-App.jpg","author_info":{"display_name":"Max Drake","author_link":"https:\/\/max-drake.cc\/?author=1"},"_links":{"self":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts\/6303","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6303"}],"version-history":[{"count":0,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/posts\/6303\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=\/wp\/v2\/media\/6322"}],"wp:attachment":[{"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6303"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/max-drake.cc\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}