Building User Interfaces with React.js
5.0 (6 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
81 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Building User Interfaces with React.js to your Wishlist.

Add to Wishlist

Building User Interfaces with React.js

Learn how to build Awesome UI's
5.0 (6 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
81 students enrolled
Created by Nelson Djalo
Last updated 5/2017
English
Current price: $10 Original price: $50 Discount: 80% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 2.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build user interfaces using React js
  • Understand React js core concepts
  • Write React apps using ES6
  • Create multiple React components and share data between them
View Curriculum
Requirements
  • Javascript
  • Basics of HTML
  • Basics of CSS
  • Basic understanding of Git helps, but isn't necessary
Description

React is an open-source JavaScript library for building user interfaces. It is maintained by Facebook, Instagram and a community of individual developers and corporations.

Companies are searching for React js developers as it is a very scalable and reliable framework for building front end and mobile apps. Bearing this in mind, taking this course you allow you to add a new skill to your CV.

In this you will fully understand what React js is and how it works. You will build a web app which will be composed of multiple components styled with Bootstrap 4. You will learn the key differences between smart and dumb components, click events, on change events, using forms, dynamic searching with React and much more.

This course is well structured with exercises and whenever you need help just yell for help.

See you inside.

Who is the target audience?
  • Anyone who wants to learn React JS
  • Anyone who wants learn how to create web user interfaces
Compare to Other User Interface Courses
Curriculum For This Course
39 Lectures
02:33:41
+
Introduction
2 Lectures 04:11

Get to know me

Preview 01:07

Learn about the web app we will develop together.

The app we will develop together
03:04
+
Getting started
5 Lectures 17:38

Download and install node js and yarn using Homebrew

Preview 02:50

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

Downloading Source Code
03:25

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

Preview 04:24

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

Running base project (The starting point of our development)
01:34

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

Source Code and Project walkthrough
05:25
+
Understanding React
3 Lectures 06:05

We will learn what the React framework is.

What is react
02:32

We will learn how the virtual dom works with React.

The Virtual DOM
01:51

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

React Developer Tools
01:42
+
Components
7 Lectures 29:01

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

Preview 04:29

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

Our first React Component
06:10

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

The Relationship between State and Render method
01:17

We will learn how to set application state with React.

Setting application state
03:10

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

Understanding Component Life Cycle
01:37

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

Hooks Methods & Setting State
03:45

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

Array.map function and bootstrap 4 cards
08:33
+
Sub (Dumb/Presentational) Components
4 Lectures 18:05

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

Sub (Dumb/Presentational) Components & Props
06:25

Exercise solution

Lets walkthrough the exercise solution together
03:26

We will understand how to update state from sub components.

Understanding how to update state via props (KEYNOTE) u
01:47

We will learn how to update state from sub components.

Updating State from Subcomponents & Click events
06:27
+
Using Forms and Refs
7 Lectures 37:04

We will learn how to add a form component.

Adding forms
04:48

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

Preview 07:01

We will learn how to use react-select component.

Dropdowns with react-select
07:27

Exercise solution.

Country Dropdown Sol Walkthrough
03:43

We will learn how capture text inside input fields.

Preview 04:58

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

Adding new User Cards
06:45

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

Reseting form fields Exercise solution walktrhough
02:22
+
Filtering content
3 Lectures 16:18

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

Creating Dropdown Button with Bootstrap 4
04:40

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

Dowpdown menu item Click events
03:04

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

Filtering cards by gender with lodash
08:34
+
Dynamic Searching
4 Lectures 16:51

We will learn how to create input component.

Creating input field component
03:09

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

On change events
01:43

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

Searching Cards Dynamically
09:03

Emoji exercise solution walkthrough
02:56
+
Conclusion
4 Lectures 08:28

Review of the we application we built.

Review of our web app
03:37

Learn where to find more learning material on React.

React Documentation
01:41

Recommended course that will enhance student skills.

What next ?
01:32

Say good bye and see me on next courses.

Final words
01:38
About the Instructor
Nelson Djalo
4.6 Average rating
699 Reviews
12,511 Students
4 Courses
Software Engineer

Hi my name is Nelson and I am a software developer for a startup. I graduated in London with a 1st class honours in Computer Science and in the past few years I have programmed in various programming languages such as PHP, Python, Ruby, C#. In my day to day job I am a Java and JavaScript developer and primarily write large scale web applications using AngularJS. In my spare time, I love teaching, Photography, Baking, Football and Sewing, Yes I am an all-rounder! :)