Building User Interfaces with React.js

Download and install node js and yarn using Homebrew

We will clone the repository using git and checkout both master and base branches.

We will use some yarn commands to be able to run the final application that we will develop in this course.

We will use some yarn commands to be able to run the base branch. This branch will be the starting point of development.

We will learn how this project is set up using Webpack 2 and learn about the folder structure.

We will learn what the React framework is.

We will learn how the virtual dom works with React.

We will learn how to debug and inspect web apps written with React.

We will learn what a component is and the difference between container/smart component and presentational/dumb component.

We will learn how to create our first component and render some html to the dom.

We will learn the key relationship between the state and the render method,

We will learn how to set application state with React.

We will learn the different stages a component goes through from the moment it is created until it gets removed from the dom.

We will learn how to use hook methods to set the state after components get mounted to the dom.

We will learn how to use Array.map to create repeatable content.

We will learn how to create sub components and how to we send send data down from smart components to dumb components.

Exercise solution

We will understand how to update state from sub components.

We will learn how to update state from sub components.

We will learn how to add a form component.

We will learn how use the ternary operation in javascript to hide and show form content.

We will learn how to use react-select component.

Exercise solution.

We will learn how capture text inside input fields.

We will learn how take what's entered in the form and create a new Bootstrap 4 card.

In this exercise solution we will learn how to reset forms.

We will learn how to create bootstrap 4 dropdown button component.

We will learn how to add click event to menu items inside bootstrap 4 dropdown button.

We will learn how to use the lodash.filter method to filter cards by male, female or to show all.

We will learn how to create input component.

We will learn how to capture the value with on change events when a user is typing.

We will learn how to take the value from input field and search through some data.

Review of the we application we built.

Learn where to find more learning material on React.

Recommended course that will enhance student skills.

Say good bye and see me on next courses.