React V2 D4.md

React Day 4

WIFI: Penguine House

Password: Penguin2019

Agenda

First Day

• Introduction
• JS Catch Up
• Kahoot Quiz: https://kahoot.it/
• React Project Setup
• Creating React Elements
• Creating React Components
• Passing Props
• Reusing Components

Second Day

• Checkin
• Kahoot Quiz: https://kahoot.it/
• Handling Events
• Conditional Rendering
• Rendering Lists
• Using State

Third-Day

• Checkin
• Importing / Exporting in JS
• Firebase Setup
• Promises
• useEffect
• Hooks
• Todo App Interaction with Backend
  • Get Todos
  • Create Todo
  • Update Todos
  • Delete Todo

Fourth Day

• Checkin
• Kahoot Quiz: https://kahoot.it/
• Authentication with Firebase
• Tab
• Login / Signup Forms
• Form Validation
• Custom Hooks
• Cleaning up Memory Leaks
• Routing

General Info

1. Have a recent version of node installed or download it now from nodejs

   • (If you are on windows you probably also want to install windows bash)

2. Join Whatsapp Group link: https://chat.whatsapp.com/HhEbt2Sb3ClJNfHFPttnn5

3. Join Penguin Academy: https://tribe.penguin.academy/

4. Create your solutions on CodeSandbox. You can log in with your Github account. https://codesandbox.io/

5. Download VS Code Life Share

Let's Continue

• Starting Point: Repository

git clone https://github.com/dominikkaegi/react-todo
git cd react-todo

npm install

npm run start

Tab

Login / Signup Forms

Adding Authentication to our App

1. Adding Authentication with firebase

// utils/base.js
import * as firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";

const app = firebase.initializeApp({
  apiKey: "AIzaSyCTFRvAtPrPiMUTP4Oi8gMion_jSK1gHfA",
  authDomain: "todo2-1bc55.firebaseapp.com",
  databaseURL: "https://todo2-1bc55.firebaseio.com",
  projectId: "todo2-1bc55",
  storageBucket: "todo2-1bc55.appspot.com",
  messagingSenderId: "903174892597",
  appId: "1:903174892597:web:208366efb28ce905d3957c"
});

const db = firebase.firestore();
const auth = () => firebase.auth();

export { db, auth };

export default app;

// utils/user.js
import { db, auth } from "./base";

export function login(email, password) {
  return auth().signInWithEmailAndPassword(email, password);
}

export function logout() {
  return auth().signOut();
}

export function onAuthStateChanged(callback) {
  return auth().onAuthStateChanged(callback);
}

export async function signup({ email, password, displayName = "No Name" }) {
  try {
    const { user } = await auth().createUserWithEmailAndPassword(
      email,
      password
    );
    await user.updateProfile({ displayName });

    await db.doc(`users/${user.uid}`).set({
      displayName: displayName,
      uid: user.uid
    });

  } catch (e) {
    throw e;
  }
}

Form Validation

Custom Hooks

Cleaning up Memory Leaks

Routing

Additional Content:

Daily Challenges

1. Build a Tab Component

2. Build your own Calculator

3. Fetch Data