React From The Ground Up
4.4 (423 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.
3,334 students enrolled
Wishlisted Wishlist

Please confirm that you want to add React From The Ground Up to your Wishlist.

Add to Wishlist

React From The Ground Up

Learn React JS - this course covers all you need in order to use ReactJS in new and existing projects
4.4 (423 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.
3,334 students enrolled
Created by Tim Knight
Last updated 7/2017
English
Current price: $10 Original price: $150 Discount: 93% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 12.5 hours on-demand video
  • 3 Articles
  • 4 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Understand how ReactJS works and how to use it
  • Develop amazing React and Redux applications from the ground up - with full understaning
  • Build a React application using an external API
  • Build ReactJS components
  • Use ReactJS in existing projects
  • The confidence to tackle any challenge with React
View Curriculum
Requirements
  • Basic JavaScript
  • HTML
  • CSS
Description

**** NEW REACT REDUX CONTENT ADDED 10th JULY 2017!!  ****

React version 15.5.4 update now included!

Now with BONUS Redux tutorial!

AND Bonus React Router tutorial!

New content added every month - Just ask for a topic to be covered and I will do a video on it!

Join over 2000 satisfied students taking the best ReactJS course out there.

Over 100 5 star reviews!! 

⭐⭐⭐⭐⭐  I never leave comments but thought I should share that this is best tutorial i've done on Udemy so far. Besides the great job of teaching react from the basics to advanced he goes really slow and explains every additional tool used, even things most should know. If you already know about the tools you might even learn something new like I did.

-- Chiedu Okpala

⭐⭐⭐⭐⭐  So I needed to learn React in order to build and pitch a prototype to the business I work for. We are trying to take our current offline application online and in talks we decided React would be a good choice for taking the next steps. Tim is very articulate and easy to understand and takes the time necessary to explain things in lamens terms. Would highly recommend this to anyone looking to learn React and/or Redux, especially if you're not an experienced Javascript developer. Glad that he takes the time to show how each thing works by itself and then ties them all together in the end into a full working app that can become your template for a new project. Thank you so much, Tim!

-- Brett Connolly

⭐⭐⭐⭐⭐  This course is a great place to start with ReactJS. Well laid out and easy to setup and start producing ReactJS sites. Instructor walks you through what is happening in the background and explains in terms that make it simple to understand.

-- Doug Brown

⭐⭐⭐⭐⭐  I really like how the course steps through everything and clearly shows how everything connects. The pacing was perfect for me and my favorite part was the transition to ES6.

-- Sarah Huynh

⭐⭐⭐⭐⭐  As a beginner, I found this course to be extremely easy to pick up and much less intimidating than I thought it would be. Tim is great at leading you along the way, while still giving out challenges that make you think.

-- Brent Busby

⭐⭐⭐⭐⭐  Amazing course that covers a large amount of material very well. I never knew all of the power that React had until now. I recommend this course for anyone who knows none/a little about React. Great foundation course and is still being updated. Great job!

-- Benjamin Glunz

This tutorial will take you through everything you need to know to master web development using ReactJS.

React is a hugely in demand framework and having the knowledge of React that this course will teach you will set you apart from other candidates. If you've got a great idea that you want to turn into a business React is a great choice to build your application with and React From The Ground Up will teach you everything you need to make amazing applications with React.

We will cover ReactJS, ES6, Webpack, Redux and build some fantastic projects that demonstrate exactly how to use ReactJS in modern web development.

Getting a great understanding of React JS will get you into a position to build fantastic, well built personal and professional projects. It will also put you in high demand for employers where knowing and understanding ReactJS will put you ahead of everyone else.  

This course starts from the beginning of ReactJS and is done in a way that means from the first video you start building with React. Only when we enter the projects section will you need to setup your environment, but by then you will know exactly what you're doing.

We'll start by mastering the fundamentals of React, including JSX, “props", “state", and eventing. Source code is provided for each lecture, so you will always stay up-to-date with the course pacing. 

Throughout the course you will build mini projects with React then move onto build a Pokemon dashboard application that will put your new found React skills into practice. We will then build an application that teaches you all the principles behind Redux and how you can confidently and easily use React with Redux to build applications.

If you are new to React or maybe you've been struggling to learn and truly understand whats going on then this course is for you. You will be confident in using ReactJS in no time at all and if you ever get stuck I will be there to help.

I built this course as I felt the current resources out there expected you to already have a great understanding of how React works to even get started so I've made this course as simple as possible in order to take you through step by step so you can feel confident and get a truly good understanding of how to utilise ReactJS.

By the end of this course you will be more than confident in using ReactJS in any project!

Who is the target audience?
  • People looking to move on from JQuery
  • Ideally you will know some JavaScript, HTML & CSS but are wanting to learn some more advanced JavaScript
  • Experienced developers looking to learn a new framework
  • All levels are welcome however if you're an absolute beginner & aren't familiar with HTML and JavaScript you should cover the basics in those topics first
  • Front End developers
  • Those learning more advanced JavaScript
  • Those wanting to learn a front end framework
Students Who Viewed This Course Also Viewed
Curriculum For This Course
62 Lectures
12:35:13
+
Getting started
5 Lectures 10:17

Lets find out exactly what ReactJS is.

Preview 01:22

Why should you use ReactJS?

Why ReactJS?
04:45

Get setup so you can start to use ReactJS.

Getting setup
01:49

What do you need to know before taking this course?

Prerequisites
00:58

Where and how to get help if you get stuck.

Getting Help
01:23
+
Hello World
5 Lectures 33:09

The script url required to include React have been changed by Facebook - the you will see that the required scripts are currently https://fb.me/react-0.14.7.js & https://fb.me/react-dom-0.14.7.js these will no longer work.

The correct scripts are https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js & https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js. So simply replace the two scripts in the head tag with and React will now be loaded.

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>

I've also attached the scripts as a resource so that if the cdn goes down you can use react & react-dom.

I recommend using this version rather than a newer one until we get onto setting up our project. These early videos are designed to teach you exactly how React works before we jump into using the ES6 classes. If you do choose to use a newer version, anything from 15.5.0 (the versioning jumped from 0.14.8 to 15, so we aren't 15 versions behind!)  and above you will get a deprecation warning about React.createClass and prop-types. You don't need to worry about these as we will be using the newer ways later on. 

Update to the required scripts!
00:17

Build your first ReactJS component using plain JavaScript.

Preview 05:18

Rewrite your first component using the JSX syntax.

Preview 06:56

Use the createClass method to create your component

Create Class
08:48

Learn about the ES6 let keyword and how to use it in ReactJS

Aside - The let keyword
11:50
+
Properties
1 Lecture 18:04

Understand the basics of properties in ReactJS 

Props
18:04
+
State
5 Lectures 46:48

Take a look at State in React components and how to utilise it.

State within React components
11:22

Take on the State challenge

State Challenge
04:15

Build the State challenge

State Challenge Build
10:48

Refactor the State challenge code

State Challenge Refactor 1
05:48

More refactoring of the State challenge

State Challenge Refactor 2
14:35
+
Stateless Functional Components
1 Lecture 13:18

Take a look at building Stateless functional components

Stateless functional components
13:18
+
Component Lifecycle
3 Lectures 53:02

Examine the lifecycle of a React component and all the methods involved

The component lifecycle part 1
15:12

Look at some more lifecycle methods for React components

The component lifecycle part 2
15:06

Look at the update methods in a components lifecycle

Component lifecycle update methods
22:44
+
ES6 Classes
5 Lectures 01:02:13

Dive into ES6 by building React components

Preview 20:27

A look at ES6 Stateless functional components

Stateless functional components in ES6
06:15

Take on the ES6 Stateless functional component challenge

ES6 Challenge
00:53

Look at the ES6 challenge and how to build it.

ES6 Challenge build
12:03

Higher order components in React allow you to reuse functionality in other components - lets take a look

Higher Order Components
22:35
+
Webpack & Project Setup
3 Lectures 48:21

In the videos we are using Webpack version 1 so if you just npm install webpack you're likely to get version 2 and this may cause some errors! To install version 1 use the command npm install webpack@1.13.0 this will give you the exact same version as I'm using.

I've also attached my package.json so you can see the versions I'm using and install the matching version. 

Please note we are using Webpack Version 1 Not version 2
00:11

Learn what Webpack & NodeJS are and how we are going to use them and start to get our project template setup.

Project setup - nodejs
21:54

Configure our Webpack.config.js & take a look at some React source code.

Webpack Configuration
26:16
+
Projects
10 Lectures 03:27:39

Build a live JSX transformer so we can gain a better understanding of JSX and how to build a React project.

JSX Transformer
35:35

Take a look at the new create-react-app tool from the React team. This is going to make getting your React project setup a breeze!

Create React App
13:34

Lets begin our big project - creating a Pokemon dashboard. In this video we learn how to make the API calls to get the Pokemon data.

PokeDashboard Making API Calls
28:37

Learn how to use an external component and list the Pokemon using React-Bootstrap

PokeDashboard PokeList
17:51

PokeDashboard Pagination
18:21

PokeDashboard Items Per Page
22:26

PokeDashboard Refactor & Pokemon Index List
20:39

PokemonDashboard Pokemon Modal
14:18

PokemonDashboard Radar Chart
25:27

PokemonDashboard Image & Tidy Up
10:51
+
BONUS! Getting Started With Redux
22 Lectures 04:06:17
Redux What Is It & Why Should You Use It?
01:45

Single Source Of Truth
05:20

State is Read-Only
06:58

Changes Are Made With Pure Functions
13:55

Plain JavaScript & Redux Example
26:12

Recap And Some Best Practice
12:23

Using Multiple Reducers
20:54

ES6 Setup for Redux
11:05

Middleware
10:22

External Middleware
03:02

Async Actions
16:21

Async Actions With Promises
05:42

Getting Setup With React
10:49

Redux Containers
13:25

Ajax Calls In Redux Containers
11:49

User List React Component
10:35

Please install React Router version 3 using npm install react-router@3.0.2 to get the exact same version as me. I will add some videos covering version 4 soon. You're code will not work if you use version 4 as there have been some breaking changes.

Please note we are using React Router version 3
00:01

React Router
10:49

User Profile Container & Component
15:01

Implementing React Router Part 1
10:56

Implementing React Router Part 2
13:28

Implementing React Router Part 3
15:25
2 More Sections
About the Instructor
Tim Knight
4.4 Average rating
420 Reviews
3,334 Students
1 Course
Web developer & designer with a passion for teaching coding.

I'm a web developer who has always been frustrated with the lack of quality and well explained tutorials on new technologies. I'm here to change that by giving you great tutorials on the technologies you want to learn. I strive to produce the best content and to always support my students.