React - The Beginner's Practical Guide for ES6 & React Apps
0.0 (0 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.
8 students enrolled
Wishlisted Wishlist

Please confirm that you want to add React - The Beginner's Practical Guide for ES6 & React Apps to your Wishlist.

Add to Wishlist

React - The Beginner's Practical Guide for ES6 & React Apps

Building a React Application the Modern Way, From the Ground Up, for Beginners
0.0 (0 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.
8 students enrolled
Created by Daniel Stern
Last updated 8/2017
Current price: $12 Original price: $20 Discount: 40% off
4 days left at this price!
30-Day Money-Back Guarantee
  • 1 hour on-demand video
  • 3 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion

Training 5 or more people?

Get your team access to Udemy's top 2,000 courses anytime, anywhere.

Try Udemy for Business
What Will I Learn?
  • Build a website using React
  • Understand the advantages of React vs Angular
View Curriculum
  • Working knowledge of JavaScript

React is an extremely useful library - no one would deny that.

But the courses that typically teach it are a) expensive, b) complicated. I set out to make a course that was not like either of those.

This is a React course that is easy and intuitive. We'll learn the following key things:

1) What's JSX?

2) How do we compile React?

3) How do we add interactivity to React?

4) What are some ways we might organize our application?

5) A heck of a lot more

Throughout, we'll be building a Reddit-reading app that will blow all your other home projects away!

Don't delay, sign up now.

Who is the target audience?
  • Beginner web developers who do not know how to use React
  • Software trainers who have teams that need to learn React
Compare to Other React Courses
Curriculum For This Course
Course Promo
1 Lecture 01:20

Get Excited About React!

Preview 01:20
3 Lectures 05:00

Be introduced to the course and the tone of the React learning.

Preview 01:28

•Teaches practical React skills

•Learn to compile React and generate real websites

•Does not get into popular add-ons like React-Redux

•Create components

•Focus on user experience

Preview 02:02

We have a look at the application ( a newsfeed ) that we will be building over the course of this curriculum.

Preview 01:30
Getting Started with React
4 Lectures 05:12

•Supported by Facebook

•Highly performance-oriented

•Least confusing

•Widespread and popular

•Markup language

•Like a mix of HTML with JavaScript

React components can, but don’t have to be, written in it

Preview 00:33


•Only one “flavor”

•Simply an engine for rendering views

•Supported by Facebook


•Numerous different kinds (Angular 1, Angular @2, etc.)

•The banana, the gorilla holding the banana, and the whole jungle


Preview 01:34

•React compiles components in a “virtual DOM”, faster than using the real DOM

•When changes occur, they are computed first in virtual DOM

•DOM is updated in most performance-sensitive way possible

•Data is passed between components using props

Preview 01:15

•React is written in JSX which isn’t supported by browsers

•Tool (JSX transformer or Babel) is used to turn React into JavaScript

•React applications require a special workflow where changes are compiled automatically

•Webpack can wrap JSX transformers for fast development, ES6 features

Preview 01:50
Build a React App
9 Lectures 35:30

In this demo we set up the application that we will be building.

Set Up The Application

•Modular building blocks which make up the application

•Written in JSX

•Can be “stateful” or “stateless”

•Not unlike HTML tags

React Components

•Add a list component to be main entry point of our application

Creating Stateless Components

•Data is passed from parent elements to children via “props”

•Props can be any kind of data type

•Data can be passed down through multiple layers of child components with props


•We will pass the application state to the child component using props

Creating Props

•Lists (repeat elements) are created by mapping an array of primitive values into an array of React components

•Each element must have a unique key

Adding a List Element to the App

•Stateless components do not keep track of user activities

•Actions that would update application state must be passed back to top level via props

•Render method must be called every time state changes (but, page redraw will be optimized automatically)

Updating React Applications

•Add all the functionality necessary to have a fully operable newsfeed reader

Adding the Finishing Touches

We Learned:

•How to compile JSX

•How to render React applications

•How to create components

•How to update application state

•How to update the application

•How to create lists


Do You 'Member?

React Revue
5 questions
About the Instructor
Daniel Stern
4.2 Average rating
3,899 Reviews
41,951 Students
10 Courses
The Code Whisperer

Known in development circles as “the Code Whisperer," Daniel Stern has been believed to possess a supernatural connection to computers ever since he talked the supercomputer Deep Blue off the roof of a twelve-story St. Petersburg apartment building, following its shameful loss to Gary Kasparov.

He can often be found singing softly to his tablet, or gently caressing his aluminum keyboard in his arms.

Daniel has been working as a front end and full stack developer in the tech industry since 2011. He's developed single-page applications for banks like CIBC, charities like the Ontario Institute for Cancer Research, and at ad agencies like McLaren McCann, TraffikGroup and Olson. Throughout his labors, he's worked on computer programming in his spare time because, well, he's obsessed with it.

In addition to being featured in both CSS Weekly and JavaScript weekly, Daniel is well-known throughout the open-source community for maintaining several open-source tools, most notably the Angular.js and LESS-based tool, Range .css and the Angular .js audio tool, ngAudio.

In addition to being trusted by the open source community to develop top-quality, functional code, Daniel has also been invited to speak at numerous conferences including Full Stack Conference 2014 in London, England.

Daniel is an active learner and very passionate about the following technologies,

- Node.js
- Angular.js
- TypeScript
- MongoDB
- Brackets, the Open Source Code Editor
- Esprima
- Grunt
- Yeoman
- Many, many, many more