Learn
Learn
Learn web development from expert teachers. Build real projects, join our community, and accelerate your career
Get Started
Fullstack Rust Fullstack Node.js Fullstack D3 Fullstack React Fullstack React with TypeScript more →
The newline Guide to Building Your First GraphQL Server with Node and TypeScript
In this course, we'll show you how to create your first GraphQL server with Node.js and TypeScript
Enroll for free
Teach
Teach
Share your knowledge with others, earn money, and help people with their career
Apply Now
Apply To Teach A Course What Our Teachers Say
Amelia Wattenberger
Author of Fullstack D3
"Writing Fullstack D3 was a thoroughly enjoyable, fun process.

The writing was over before I knew it, and we've sold way more copies than I expected! Plus, the compliments from my peers have been really amazing."
Community
Community
Get help with programming projects, find collaborators, and make friends
Join Now
Join our Discord Server What Our Students Say
Tutorials

This video is available to students only

How to Refactor a React App into Components

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.

This page is a preview of Beginner's Guide to Real World React

Previous Lesson:

Getting Started with React - Building Your First App

Next Lesson:

Beginner's Guide to Managing Data in React

New
25:152

Start a new discussion. All notification go to the author.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Beginner's Guide to Real World React

WELCOMEIntroduction

Introduction:

Start Here

Module 1: Introduction

Introduction: (3:45)

Course introduction

Lesson 1: (2:01)

About Rob Kendal, Author of Beginner's Guide to Real World React

Lesson 2: (1:48)

Conventions used and helpful links

Lesson 3: (0:37)

Reporting errors and getting support

Lesson 4: (0:46)

Downloading the course code

Module 2: React - A modern UI library

Introduction: (4:03)

What is React? A Comparison to JavaScript and HTML

Lesson 1: (4:11)

React vs Angular vs Vue - Benefits and Drawbacks

Lesson 2: (1:36)

React Pros and Cons

Lesson 3: (0:47)

First React app - The Greeting App

Lesson 4: (24:16)

Getting Started with React - Building Your First App

Lesson 5: (25:30)

How to Refactor a React App into Components

Lesson 6: (3:30)

Beginner's Guide to Managing Data in React

Module 3: Introducing React Hooks

Introduction: (3:55)

Intro to React Hooks [with examples]

Lesson 1: (26:53)

React useState and useEffect - A Beginner's Guide

Lesson 2: (0:43)

Furry Friend Gallery app

Lesson 3: (18:55)

Build Your First Functional React App with Create React App

Module 4: Fetching data with React

Introduction: (5:06)

How to Fetch API Data in React with JavaScript Fetch and Axios

Lesson 1: (1:16)

Furry Friends Gallery Mark II

Lesson 2: (30:47)

Build Your First API-Powered React App with Axios

Module 5: Deploying an app to the world

Introduction: (9:12)

The Best Hosting Environments to Deploy a React App

Lesson 1: (4:04)

How to Set Up a React App for Continuous Integration

Lesson 2: (13:55)

How to Deploy Your First React App on Netlify

Module 6: Thinking in React

Introduction: (10:10)

Thinking in React with Higher Order and Functional Components

Lesson 1: (5:55)

When Should You Split Up React Components?

Lesson 2: (4:14)

How to Structure a React Project

Lesson 3: (0:47)

Form Builder project

Lesson 4: (23:54)

How to Build a Dynamic Form Builder in React with JSON Data

Module 7: React Hooks Deep Dive

Introduction: (6:29)

The 7 Core React Hooks [with examples]

Lesson 1: (5:28)

Hooks project setup

Lesson 2: (11:24)

Beginner's Guide to React useContext Hook

Lesson 3: (7:55)

Beginner's Guide to React useRef Hook

Lesson 4: (8:48)