Beginner's Guide to Real World React

In this course, you'll learn to build web applications with modern front end techniques using the React JS library

  • 4.9 / 5 (20 ratings)
  • Published
  • Updated
On demand video

8 hrs 7 mins

Video Lessons

50 Videos

Course Instructor
Avatar Image

Rob Kendal

Senior UI Developer, planet Earth 😄

How The Course Works

01Remote

You can take the course from anywhere in the world, as long as you have a computer and an internet connection.

02Self-Paced

Learn at your own pace, whenever it's convenient for you. With no rigid schedule to worry about, you can take the course on your own terms.

03Community

Join a vibrant community of other students who are also learning with Beginner's Guide to Real World React. Ask questions, get feedback and collaborate with others to take your skills to the next level.

04Structured

Learn in a cohesive fashion that's easy to follow. With a clear progression from basic principles to advanced techniques, you'll grow stronger and more skilled with each module.

Course Preview

What You Will Build In This Course

Course Overview

What You Will Learn
  • How to build realistic React applications from scratch

  • How React compares to other front end frameworks

  • How to use React Hooks

  • What React is missing and how to fill in the blanks

  • How to use React with popular libraries like axios

  • What problems React solves

  • How to navigate in complex apps with React-Router

  • How to manage app state with Redux

In this course you'll take a deep dive into core React concepts as you learn more about how React works, how you can use it to build complex web applications, and how to combine it with third-party libraries and frameworks to 'join the dots' and gain a detailed understanding of how you might use React in a real world setting.

Why this course

The Beginner's Guide to Real World React will teach you how to successfully build web applications with modern frontend techniques, using the ReactJS library.

React on its own is only one piece of the puzzle and it doesn't, out of the box, cater for some of the missing pieces of common frontend development. Pieces such as:

  • Connecting to an API or external data source and retrieving data to power your app.
  • Navigating around your app to different pages or areas.
  • Managing the "state" of your application's data at a higher level (i.e. outside of components).

The problem is, these missing pieces are vital parts of any modern web application, as well as any realistic development scenario. It's key to understand both their concepts and how to approach them in React development. Many tutorials only cover one aspect of these and don't bring them together in a realistic setting.

On completion of The Beginner's Guide to Real World React, you'll not only have a knowledge of modern React development, but also the skills required to build real-world apps that talk to real data.

You don't have to be a coding guru or have years of experience as this course is designed for beginners. However, you should be familiar with the basics of frontend development, including HTML, CSS and JavaScript. It would be helpful to have an understanding of basic concepts around RESTful APIs and how to interact with them, but it's not essential.

Course topics

In The Beginners Guide to Real World React you'll join me on a deep dive into core React concepts. As you progress through this course, you will learn more about how React works, how you can use it to build complex web applications, and how to combine it with third-party libraries and frameworks to 'join the dots'. You will gain a detailed understanding of how you might use React in a real world setting.

Part I

In part one of the course, we'll take an end-to-end approach to React. We'll start with taking a look at the library itself and the problems it solves, before moving on to topics such as Hooks and handling data from an API. Finally, we'll talk about how to build and deploy our application to a popular service such as Netlify.

Included in the introductory part one of the course are the following modules:

  • Module 1 - this very introduction.
  • Module 2 - React JS: an introduction to React, a modern UI library.
  • Module 3 - React Hooks: what they are and how to use them.
  • Module 4 - Fetching data: using APIs in your code, and popular helper libraries such as Axios.
  • Module 5 - Deploying your first app: using Netlify to deploy our app to the public.

Part II

In the extended course part two, we'll cover similar topics to the first part but take a deeper dive into them and look at some of the challenges we face as React developers and how to overcome them. We'll also learn about navigating around our application, and managing state across our application using Redux -- a common stumbling block for aspiring React developers.

The outline for part two of the course includes the following modules:

  • Module 6 - Thinking in React: structuring your projects, breaking functionality into components
  • Module 7 - React Hooks deep dive: learn what each Hook does and how to use them
  • Module 8 - Navigation in complex apps: moving users around different areas of your application
  • Module 9 - State management in complex apps: using Redux and useReducer Hooks to manage app state
  • Module 10 - The Dinosaur Search App: putting it altogether by building our very own application

If you've been looking for a way to learn real-world React patterns, then this course is for you.

Our students work at

  • salesforce-seeklogo.com.svgintuit-seeklogo.com.svgAdobe.svgDisney.svgheroku-seeklogo.com.svgAT_and_T.svgvmware-seeklogo.com.svgmicrosoft-seeklogo.com.svgamazon-seeklogo.com.svg

Sample Course Lessons

Course Syllabus and Content

Module 1

Introduction

5 Lessons 8 Minutes

Module 2

React - A modern UI library

7 Lessons1 Hours 3 Minutes

  • React is a declarative JavaScript library introduced by Facebook in 2013. We'll look at how React came about and determine some of the skills you'll need as a React developer.

  • This lesson takes a deeper look at React in comparison with other, similar frameworks such as Vue and Angular

  • 03React Pros and Cons
    Sneak Peek00:01:36

    React does have a few drawbacks and caveats to working with it. We'll explore some of those in this lesson.

  • Before we dive into more deep and challenging topics, we'll have some fun by building an app. Our first React app will present our users with an input and send them a friendly greeting message.

  • Now that we've introduced our very first app, the Greeting App, this lesson will cover the actual building of it, step by step.

  • With our Greeting App built, we're going to learn how to 'think in React' by breaking down our small App into components and refactoring it to use them.

  • So far, we've built and refactored a great React app. Now, it's time to talk about the fundamental principles of React components and its core concepts.

Module 3

Introducing React Hooks

4 Lessons 50 Minutes

Module 4

Fetching data with React

3 Lessons 37 Minutes

  • This lesson introduces the concepts and approaches you can use to deal with fetching data within React, including the JavaScript Fetch API.

  • 02Furry Friends Gallery Mark II
    Sneak Peek00:01:16

    Our code-along project for this module is to build a new Furry Friends Gallery. This time, we'll be using a new API and common UI patterns such as a sidebar filter. In this lesson, we'll take a look at what we'll be building.

  • We've seen the finished app, so now it's time to build it! This lesson will take you, step by step, through creating a brand new app, the Furry Friends Gallery Mark II.

Module 5

Deploying an app to the world

3 Lessons 27 Minutes

  • Deploying your React apps is a vital step and this module will help you learn just how to do that. We cover some hosting history as well as your options for deployment in modern hosting ecosystems.

  • React apps need to be built and packaged up for deployment before we can think about sending them off to a hosting platform. This lessons covers how to build your React apps, ready for deployment.

  • In this final lesson of the module, we'll walkthrough the deployment process to host our Furry Friends Gallery Mark II app on the Netlify hosting platform.

Module 6

Thinking in React

5 Lessons 45 Minutes

  • Successful React development involves being able to 'think in React'. We'll look at breaking down UI's into components and their relationships.

  • React components are modular, isolated slices of functionality that connect together to build user interfaces. This lesson discusses the relationships between components.

  • There are many different ways to structure your apps' code. This lesson introduces some different approaches, including how I structure my projects and suggestions from the Facebook team themselves.

  • 04Form Builder project
    Sneak Peek00:00:47

    The big project in this module is a Form Builder. Let's take a look at what we'll be building.

  • The Form Builder app is the most complex we've built so far. It builds on concepts from earlier modules and reenforces the idea of building modular, component-driven UIs. We'll walk through the app build together to create a dynamic form powered from a set of JSON objects.

Module 7

React Hooks Deep Dive

6 Lessons 48 Minutes

Module 8

Navigation in complex apps

5 Lessons 48 Minutes

Module 9

State management with Redux

6 Lessons1 Hours 12 Minutes

Module 10

The Dinosaur Search App

6 Lessons1 Hours 26 Minutes

Subscribe for a Free Lesson

By subscribing to the newline newsletter, you will also receive weekly, hands-on tutorials and updates on upcoming courses in your inbox.

What Students are Saying

        Meet the Course Instructor

        Rob Kendal

        Rob Kendal

        👋 Hey there! I'm Rob. I'm a front end engineer, podcast host and coding mentor. I've been a developer for over 15 years and have built all sorts of websites and applications using modern front end frameworks, including React.

        Purchase the course today

        One-Time Purchase

        Beginner's Guide to Real World React

        $69$79$10.00 off
        Beginner's Guide to Real World React
        • Learn to use React
        • Build realistic projects
        • 100% beginner friendly
        • Discord Community Access
        • Full Transcripts
        • Project Completion Guarantee
        • Lifetime Access

        newline Pro Subscription

        $18/MO

        Get unlimited access to the course, plus 60+ newline books, guides and courses. Learn More

        Beginner's Guide to Real World React

        Billed annually or $40/mo billed monthly. Free to cancel anytime.

        • Discord Community Access
        • Full Transcripts
        • Project Completion Guarantee
        • Lifetime Access

        Plus:

        • Unlimited access to 60+ newline Books, Guides and Courses
        • Interactive, Live Project Demos for Every newline Book, Guide and Course
        • Complete Project Source Code for Every newline Book, Guide and Course
        • Best Value 🏆

        Frequently Asked Questions

        Who is this course for?

        This course is designed for anyone who's gained a solid foundation in modern front end development and is looking to move onto learning React from the ground up.

        Is it really suitable for beginners?

        Yep, sure is! You don’t have to be a coding guru or have years of experience as this course is designed for those who are new to React. However, you should be familiar with the basics of front end development, including HTML, CSS and JavaScript.

        What if I need help?

        You can ask us questions anytime through the community Discord channel (#reactbeginners) or by sending us a message.

        Newline Image

        Beginner's Guide to Real World React

        $69

        $79