Building User Interfaces with React.js

Course Curriculum

Chapter 1: Introduction

Lecture 1: Hi

Lecture 2: The app we will develop together

Chapter 2: Getting started

Lecture 1: Enviroment setup node and yarn

Lecture 2: Downloading Source Code

Lecture 3: Running final project

Lecture 4: Running base project (The starting point of our development)

Lecture 5: Source Code and Project walkthrough

Chapter 3: Understanding React

Lecture 1: What is react

Lecture 2: The Virtual DOM

Lecture 3: React Developer Tools

Chapter 4: Components

Lecture 1: What is a component

Lecture 2: Our first React Component

Lecture 3: The Relationship between State and Render method

Lecture 4: Setting application state

Lecture 5: Understanding Component Life Cycle

Lecture 6: Hooks Methods & Setting State

Lecture 7: Array.map function and bootstrap 4 cards

Chapter 5: Sub (Dumb/Presentational) Components

Lecture 1: Sub (Dumb/Presentational) Components & Props

Lecture 2: Lets walkthrough the exercise solution together

Lecture 3: Understanding how to update state via props (KEYNOTE) u

Lecture 4: Updating State from Subcomponents & Click events

Chapter 6: Using Forms and Refs

Lecture 1: Adding forms

Lecture 2: Hiding and Showing forms

Lecture 3: Dropdowns with react-select

Lecture 4: Country Dropdown Sol Walkthrough

Lecture 5: Refs, Ref and Form Submission

Lecture 6: Adding new User Cards

Lecture 7: Reseting form fields Exercise solution walktrhough

Chapter 7: Filtering content

Lecture 1: Creating Dropdown Button with Bootstrap 4

Lecture 2: Dowpdown menu item Click events

Lecture 3: Filtering cards by gender with lodash

Chapter 8: Dynamic Searching

Lecture 1: Creating input field component

Lecture 2: On change events

Lecture 3: Searching Cards Dynamically

Lecture 4: Emoji exercise solution walkthrough

Chapter 9: Conclusion

Lecture 1: Review of our web app

Lecture 2: React Documentation

Lecture 3: What next ?

Lecture 4: Final words