JavaScript 3

Innehållsförteckning

• Resurser
• Dokumentation
• Examination
• Schema

Resurser

• React Express
• React Aha Moments
• Awesome React 😎
• Useful React Links
• Learn React with create-react-app (4 parts)
• React composition cheat sheet
• Gist: Patterns in React @ jesperorb
• Handle CORS Client-side
• CSS-Tricks - Firebase + React
• Common Errors in React

Dokumentation

• React Documentation
• Firebase Documentation

Examination

Individuell examination: React + Firebase

---

Schema

Pass 1 - 21/8

• class
• npm
• import & export
• moduler
• webpack

Lektionsmaterial

• webpack - övning

Länkar

• npmjs.com
• Webpack 3
• Intro To Webpack @ CSS-Tricks

Pass 2 -22/8

• React intro
  • create-react-app
  • Components
  • Nested Components
  • JSX
• Props

Lektionsmaterial

• Övningar - React Komponenter
• Genomgång - React Intro PDF
• Genomgång - Props PDF
• Fejk-react i Vanilla
• Dagens kodexempel

Länkar

• Component and props @ React Docs
• JSX @ React Docs
• https://github.com/facebookincubator/create-react-app

Pass 3 - 23/8

• STATE
• Events
• Event handling
• JavaScript binding

Lektionsmaterial

• Övningar - 03 - State & Props
• Genomgång - 03 - State & Props
• Lösningsförlag - Let's go to the mall!
• Kod - State

Länkar

• State @ React Docs
• Handling Events @ React Docs

Pass 4 - 30/8

• Fil & mappstruktur i React
• Styling i React
• Functional components vs. Stateful Components

Lektionsmaterial

• Övning - Component Structure
• Kod - Komponentstruktur @ codesandbox.io

Länkar

• Components & Props @ React Docs
• Functional Components @ React Docs
• DOM Elements @ React Docs

Pass 5 - 31/8

• Component Lifecycle
• Async i React
• async setState

Lektionsmaterial

• Övningar - 05_async_api
• Genomgång - React & Async PDF
• React fetch exempel 1 @ codesandbox.io
• React fetch exempel 2 @ codesandbox.io

Länkar

• Component Lifecycle @ React Docs
• Understanding Component Lifecycle

Pass 6 - 1/9

• Controlled Inputs vs. Uncontrolled inputs
• Formulär i React
• Inputhantering i React
• Refs

Lektionsmaterial

• Genomgång - Forms i React
• Övningar - 06_forms_and_ref
• Kodexempel - LoginForm.js
• Kodexempel - LoginForm_send_state.js

Länkar

• Forms @ React Docs
• Uncontrolled Components @ React Docs
• Refs @ React Docs

Pass 7 - 6/9

• Component Composition
• Higher Order Components

Lektionsmaterial

• Genomgång - Composition
• Övningar - 07_composition
• Kodexempel - composition.js

Länkar

• Higher Order Components @ React Docs
• React composition cheat sheet

Pass 8 - 7/9

• PropTypes
• Context
  • Exempel på när context kan användas

Lektionsmaterial

• Genomgång - Handling Props
• Övningar - 08_propTypes_and_context
• Kodexempel - context.js
• Kodexempel - proptypes.js

Länkar

• PropTypes @ React Docs
• Context @ React Docs

Pass 9 - 13/9

• Firebase
  • Intro
  • Strukturera databasen
  • Läsa och skriva från databasen

Lektionsmaterial

• Genomgång - Firebase
• Övningar - firebase_read_write
• Kodexempel - 09_firebase.js

Länkar

• Get Started @ Firebase
• Data structure @ Firebase
• Read and Write Data @ Firebase

Pass 10 - 14/9

• Firebase
  • Event listeners
  • child_changed, child_added, child_removed

Lektionsmaterial

• Genomgång - Firebase listeners
• Övningar - firebase_listeners
• Kodexempel - 10_firebase2.js

Länkar

• Read & Write @ Firebase
• Working With List of Data @ Firebase
• Ben Schwarz - Beyond The Bubble

Pass 11 - 15/9

• Firebase Autentisering
  • Autentisering med email/password
  • onAuthStateChanged()
  • Hantering av användare

Lektionsmaterial

• Genomgång - Firebase listeners
• Övningar - firebase_listeners
• Kodexempel - 10_firebase2.js

Länkar

• Manage Users @ Firebase
• Auth @ Firebase
• FAKER.JS - Genererar fejkdata

Pass 12 - 18/9

• firebase
  • Databasstruktur

Lektionsmaterial

• Övning - Databasstruktur

Länkar

• Firebase - Structure Your Database

Pass 13 - 19/9

• Firebase Autentisering
  • Autentiseringsregler i databasen

Lektionsmaterial

• Genomgång - Firebase Rules

Länkar

• Auth @ Firebase
• Security Rules @ Firebase

Pass 14 - 21/9

• webpack the return
  • Production vs development
• Deployment
• process.env

Länkar

• Webpack v3
• Deployment @ create-react-app

Pass 15 - 22/9

• En titt på redux för de intresserade
• Eget arbete med slutuppgiften

Pass 16 - 26/9

• Eget arbete med slutuppgiften

Pass 17 - 27/9

• Eget arbete med slutuppgiften

Pass 18 - 28/9

• Eget arbete med slutuppgiften