Learn and Understand React
4.8 (140 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.
5,006 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learn and Understand React to your Wishlist.

Add to Wishlist

Learn and Understand React

React & ES6 covered in course. In-depth explanations on foundational concepts of React and helps understand Redux better
4.8 (140 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.
5,006 students enrolled
Created by Sam Nxstack
Last updated 7/2017
English
English
Current price: $10 Original price: $30 Discount: 67% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 16.5 hours on-demand video
  • 15 Articles
  • 67 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Learn and understand concepts of React.js
  • Build Amazing Applications with React.js
  • Ecmascript 2015 or ES6 Features
  • Understand Power of Components, Composition and Reusable Components
View Curriculum
Requirements
  • Mac or Windows PC
  • Basic knowledge of HTML, CSS, and JavaScript
Description

Important Note:

First Part of series only covers React.js and ES6, not Redux.                                                                        

React Router, Webpack 2 and Redux will be covered in next courses and not in this course.


First time you open this course, you might think to yourself, Oh!! no. Not another React.js course. There are already so many courses of React and Redux that it's hard to count. Then why another course?

The motivation for this course is not to just to teach you how to use React, Redux and other libraries. There are already plenty of courses out there that are doing this job very well. My problem is that I feel that in most of the books and courses out there, concentration is given mostly on just how to use libraries and sometimes they explain things from a very high level view. Most fundamental problem that I have with existing courses is that they try to explain the solution before explaining the problem.  Solutions have absolutely no meaning until you actually understand the problems they solve.

Other thing that I hate about most of the tutorials is that they start with developing simple apps which is a very good thing but they end up with same silly applications. At beginning, you feel pretty comfortable and starts to think that you have a grip on the subject but when you go out in real world and start solving real world problems that  requires understanding and knowledge and thought, at that point you start to falter because of very little understanding and practice of real world problems.

This course will be based on project based approach, meaning we are going to learn and truly understand React  and Redux while developing applications and covering each and every concepts gradually and incrementally in a 3 part series (in 3 different courses).

We are going to start with very simple applications at the start and then build fairly complex and medium size applications as we progress through the course.

Through out this three part series, we are going to understand React, ES6, React-Router and Redux and many more and practice so many apps starting from simple to medium size apps.



Who is the target audience?
  • Programmers/Web Developers looking to learn and understand React as beginners
  • Basic to Intermediate Level React Programmers who want to understand React and not just learn how to use React
  • Web and Frontend Developers
Students Who Viewed This Course Also Viewed
Curriculum For This Course
123 Lectures
16:32:59
+
React Basics and Shows App
18 Lectures 02:44:01
+
ES6 Class and Refactor Shows
8 Lectures 01:09:14
Function Constructor
08:21

ES6 Class
08:31

ES5 Prototypal Inheritance
09:30

ES6 Class Inheritance
07:53

constructor, super and static
10:38

Refactor Shows App
11:23

Refactor Shows App continued
09:26

+
React concepts with Pet Game App
26 Lectures 04:30:15
Initial Setup and Pet Game App Introduction
16:16

Iniline Styling
05:52

Nested Components
08:35

Adding react element img and button
11:21

Add Event Listener
06:28

Reusable Components with props
11:18

Bind Callbacks
06:19

state And setState
13:31


Using setState correctly
13:42

Access children state using Ref
14:44

Lifting State up
18:32

Why props are immutable in React and Ref vs Lifting State Up
09:06

Class Components vs Functional Components
05:07

Display game winner on UI
19:33

Conditional JSX
06:04

setState shallow merge
12:25

render method is a pure function
08:29

Lifecycle methods
07:06

Find right place for sending network request
04:39

API Setup and Axios
12:30

Network Request with axios
11:15

Single Responsibility Principle
10:07

Refactoring - Keeping state minimal
05:12

Refactoring - Remove duplicate code
13:55

+
React Internals with Todo App
29 Lectures 04:13:16
Introduction
05:24

App Setup and Bootstrap
09:11

Uncontrolled input
08:27

Uncontrolled input continued
07:40

Add Todos using setState correctly
06:53

Rendering Todos List and Styling with Bootstrap
04:31

Separating out components TodoItemList and TodoItem
05:54

Delete Todos
07:40

Delete Todos continued
11:38

Render Todos count
04:35

Goal - Component Tree to DOM Tree
09:32

Initial Render Process
15:53

Initial Render Process continued
06:45

Render Tree or Virtual DOM(old term)
16:38

Why Keys?
07:26

Refactor TodoItem Component to add priority
05:03

List and Keys
10:12

List Items and Keys continued
09:59

List Items and Keys Review
02:25

Using key correctly with List items
09:31

Focus input using ref
06:23

Controlled Component
11:17

Controlled Component continued
09:23

Add Controlled Checkbox Input
16:48

FilterTodos
10:00

FilterTodos continued
09:40

FilterTodos Final
04:17

props.children
08:04

Search Todos
12:07
+
ES6 Features and Refactor Apps to ES6
32 Lectures 03:35:51
ES6 Introduction
05:17

Pet Game App and Todo App ES5 Source Code
00:09

forEach
08:16

map
12:07

map - Refactor Todo App
03:00

filter
08:36

filter - Refactor Todo App
07:09

find and findIndex
08:45

findIndex - Refactor Todo App
02:26

Block scoping - let and const
14:01

let and const - Refactor Todo App
07:42

Exercise - let and const - Refactor PetGame App
00:04

Destructuring
12:05

Destructuring - Refactor Todo App
12:49

Multiple levels of Destructuring
07:06

Multiple levels of Destructuring - Refactor Todo App
02:59

Exercise - Destructuring - Refactor PetGame App
00:04

ES6 Modules
16:48

ES6 Modules - Refactor Todo App
08:19

Exercise - ES6 Modules - Refactor PetGame App
00:03

Rest and Spread
17:50

Spread and Rest - Refactor Todo App
05:55

Exercise - Spread and Rest - Refactor PetGame App
00:04

Object Literal Shorthand and Concise Object Method
05:00

Object Literal Shorthand - Refactor Todo App
03:06

Exercise - Object Literal Shorthand - Refactor PetGame App
00:04

Arrow Function
14:23

Arrow Function continued
09:37

Arrow Functions - Refactor Todo App
13:00

Exercise - Arrow Functions - Refactor PetGame App
00:03

ES.next class features
08:58

Exercise - ES.next Arrow Function Class Feature - Refactor PetGame App
00:04
+
Next Steps
1 Lecture 00:19
Next Steps
00:19
About the Instructor
Sam Nxstack
4.8 Average rating
140 Reviews
5,006 Students
1 Course
Software Developer and Architect

Sam has been working in software industry since 2012 and  has a master's degree in Mathematics and Computing. Since 2016, Sam has focused on server-side and web technologies like Node.js, React and Redux . Sam has been helping engineers as well as learning from really smart people in software development for years.