JavaScript 1, dag 35 – React Basics – Intermediary Components and Firestore

Vi gjorde om TODO-appen till att använda TodoList som blir en s.k. Intermediary Component som skickar data mellan App och TodoItem. Sen gick vi igenom lösningsförslag på fredagens workshop, följt av lite tenta-snack och intro till att använda Firebase Firestore i React.

---

<code>

Add Firebase to React

npm install firebase --save-dev

src/modules/firebase.js

import firebase from 'firebase/app';
import 'firebase/firestore';

const config = {
	apiKey: "AIzaSyD4xtlHcpBkLYqnskwWM949FwNTHMw84lk",
	authDomain: "awesome-todos-a6c59.firebaseapp.com",
	databaseURL: "https://awesome-todos-a6c59.firebaseio.com",
	projectId: "awesome-todos-a6c59",
	storageBucket: "awesome-todos-a6c59.appspot.com",
	messagingSenderId: "283405509159",
	appId: "1:283405509159:web:3a1f61013218902ddea402",
}

// Initialize Firebase
firebase.initializeApp(config);

const db = firebase.firestore();

export { db }

---

Länkar

Firebase Firestore Quickstart

https://firebase.google.com/docs/firestore/quickstart?authuser=0#read_data

---

Workshop

Lägg till funktionalitet i vår TODO-app för att spara nya Todos i Firestore. Se därefter om du kan få rätt på att uppdatera en todo när man toggle:ar den, och om du kan ta bort den när man klickar på Delete.