Course Description

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.

Code With Tim

Course curriculum

  • 1

    Getting Started

    • What is React?

    • Why React?

    • Getting Started

    • Prerequistes
  • 2

    Hello World

    • Plain JS Hello World

    • JSX Hello World

    • Create Class

    • Aside - The let keyword
  • 3

    Properties

    • Props
  • 4

    State

    • State

    • Challenge

    • Challenge Build

    • Challenge Refactor 1

    • Challenge Refactor 2
  • 5

    Stateless Functional Components

    • Stateless Functional Comps
  • 6

    Component Lifecycle

    • Component Lifecycle Part 1

    • The Component Lifecycle Part 2

    • Component Lifecycle Update Methods
  • 7

    ES6 Classes

    • ES6 Classes

    • ES6 Stateless Functional Components

    • Challenge

    • Challenge Code

    • Higher Order Components
  • 8

    Webpack & Project Setup

    • Project Setup - NodeJS

    • Webpack Configuration
  • 9

    JSX Transformer

    • JSX Transfomer
  • 10

    Create React App

    • Make your life easier with NPM's create-react-app
  • 11

    Pokemon Dashboard

    • MakingApi Calls

    • PokeList Component

    • Poke Pagination

    • Poke Items Per Page Buttons

    • Refactor & PokeIndexList Component

    • Pokemon Stats Modal

    • Radar Chart

    • Image & Tidy Up
  • 12

    React Updates

    • Version 15.5.0+