How to build a todo app with React and Firebase Database

Day 2 - To the infinity and beyond

📅 28-06-2019
🕐 2h
🏁 Mocking the application state, implementing some action handlers and restyle the app

It's been a long time since my last publishing. I've been quite busy (not just for watching Toy Story 4 in loop, of course).

Anyway, I invite you to continue this reading on the GDG Galway forum, where I published all the code for my first DevTalk.

I introduced React to our followers in Galway and we've been followed by some friends in Italy, via Google Hangouts. It's been a great experience and we are scheduling future dates.

Don't worry, I will implement Firebase to save some data. For the moment the mock is enough. But if you don't want to wait.. Hey buddy! Do it by yourself! The best way to learn is "learn by doing", don't you know?

---

On the forum you can find another nice codelab by Julien, my colleague at the GDG Galway. He introduced NodeJS.

React tutorial https://github.com/gdg-galway/codelab-react-introduction
GDG Galway Official forum https://forum.gdg-galway.com/

Check out the code here

gdg-galway / codelab-react-introduction

A simple Single Page Application built with React at the GDG Galway React Codelab.

Welcome to React Codelab 👋

Through this codelab we will develop a simple to-do application with React, learning the basic concepts of this library and some ES6 features.

Initial setup

First of all, make sure you have NodeJS and npm installed on your machine Open your terminal and run node --version and npm --version: if everything is ok, you should see something like this

rossanos-mbp-2:codelab-react-introduction rossanodangelo$ node --version
v11.14.0
rossanos-mbp-2:codelab-react-introduction rossanodangelo$ npm --version
6.9.0

To easily scaffold the project I'm going to use create-react-app, a tool provided by Facebook.

npx create-react-app codelab-react-introduction
cd codelab-react-introduction
npm start

The npm start command will run your starter project to http://localhost:3000/.

What's inside the box

Using your favourite text editor (I recommend Visual Studio Code), open the project to see the default structure:

./node_modules
./public
./src
App.js
App.test.js
App.css
.gitignore
package-lock.json
package.json
README.md

In this codelab we're going to…

View on GitHub