React From The Ground Up

Learn all you need in order to use ReactJS in new and existing projects
4.4 (119 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,848 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 42
  • Length 9 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

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

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

About This Course

Published 5/2016 English

Course Description

**** NEW CONTENT ADDED 24th November 2016 ****

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

What 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.

Curriculum

Section 1: Getting started
01:22

Lets find out exactly what ReactJS is.

04:45

Why should you use ReactJS?

01:49

Get setup so you can start to use ReactJS.

00:58

What do you need to know before taking this course?

01:23

Where and how to get help if you get stuck.

Section 2: Hello World
Article

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>


05:18

Build your first ReactJS component using plain JavaScript.

06:56

Rewrite your first component using the JSX syntax.

08:48

Use the createClass method to create your component

11:50

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

Section 3: Properties
18:04

Understand the basics of properties in ReactJS 

Section 4: State
11:22

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

04:15

Take on the State challenge

10:48

Build the State challenge

05:48

Refactor the State challenge code

14:35

More refactoring of the State challenge

Section 5: Stateless Functional Components
13:18

Take a look at building Stateless functional components

Section 6: Component Lifecycle
15:12

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

15:06

Look at some more lifecycle methods for React components

22:44

Look at the update methods in a components lifecycle

Section 7: ES6 Classes
20:27

Dive into ES6 by building React components

06:15

A look at ES6 Stateless functional components

00:53

Take on the ES6 Stateless functional component challenge

12:03

Look at the ES6 challenge and how to build it.

22:35

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

Section 8: Webpack & Project Setup
21:54

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

26:16

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

Section 9: Projects
35:35

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

13:34

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!

28:37

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.

17:51

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

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
Section 10: BONUS! Getting Started With Redux
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

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