React From The Ground Up

Learn all you need in order to use ReactJS in new and existing projects
4.5 (142 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.
1,924 students enrolled
90% off
Take This Course
  • Lectures 49
  • Length 10.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 5/2016 English

Course Description

**** NEW CONTENT ADDED 21st January 2017!!  ****

Now with BONUS Redux tutorial!

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

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

Getting a great understanding of ReactJs 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. 

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.

What are the requirements?

  • Basic JavaScript
  • HTML
  • CSS

What am I going to get from this course?

  • Build ReactJS components
  • Use ReactJS in existing projects
  • Understand how ReactJS works and how to use it

Who is the target audience?

  • People looking to move on from JQuery
  • Front End developers
  • Those learning more advanced JavaScript
  • Those wanting to learn a front end framework
  • Not for absolute beginners

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Getting started

Lets find out exactly what ReactJS is.


Why should you use ReactJS?


Get setup so you can start to use ReactJS.


What do you need to know before taking this course?


Where and how to get help if you get stuck.

Section 2: Hello World

The script url required to include React have been changed by Facebook - the you will see that the required scripts are currently & these will no longer work.

The correct scripts are & So simply replace the two scripts in the head tag with and React will now be loaded.

<script src=""></script>

<script src=""></script>


Build your first ReactJS component using plain JavaScript.


Rewrite your first component using the JSX syntax.


Use the createClass method to create your component


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

Section 3: Properties

Understand the basics of properties in ReactJS 

Section 4: State

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


Take on the State challenge


Build the State challenge


Refactor the State challenge code


More refactoring of the State challenge

Section 5: Stateless Functional Components

Take a look at building Stateless functional components

Section 6: Component Lifecycle

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


Look at some more lifecycle methods for React components


Look at the update methods in a components lifecycle

Section 7: ES6 Classes

Dive into ES6 by building React components


A look at ES6 Stateless functional components


Take on the ES6 Stateless functional component challenge


Look at the ES6 challenge and how to build it.


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

Section 8: Webpack & Project Setup

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


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

Section 9: Projects

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


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!


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.


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

PokeDashboard Pagination
PokeDashboard Items Per Page
PokeDashboard Refactor & Pokemon Index List
PokemonDashboard Pokemon Modal
PokemonDashboard Radar Chart
PokemonDashboard Image & Tidy Up
Section 10: BONUS! Getting Started With Redux
Redux What Is It & Why Should You Use It?
Single Source Of Truth
State is Read-Only
Changes Are Made With Pure Functions
Plain JavaScript & Redux Example
Recap And Some Best Practice
Using Multiple Reducers
ES6 Setup for Redux
External Middleware
Async Actions
Async Actions With Promises

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Tim Knight, 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.

Ready to start learning?
Take This Course