Pure React

Pure React:
Learn to think in React

You don't know React.

But not for lack of trying!

Tutorials, books, courses, podcasts, blog posts… you've done 'em all, or you've tried to.

You've followed along, and sure, it made at least some kind of sense while you were assiduously reproducing each step, but just when you reach the end, everything you supposedly learned just…

slips…

from your mind into a vast, grey nothingness: The Fog of Uncertainty (or "FU", for short).

It's true that when you do those tutorials, you get a result! But you don't really know how. Or why. Or how you could use what you just learned — pardon me, "learned" — to create your app, from scratch. You sit down to try and it just…

doesn't…

work.

You live in The Fog now.

React has turned you from a living, breathing human capable of learning and doing all kinds of things, into a throbbing question mark:

Where do I start?
What do I do next?
Which pieces should I use?
How will it all hang together?

And the biggest question mark of all…

"Why can't I seem to learn this??"

You don't think you're incapable. You're a developer. Of course you can learn to develop a new way! And of course, other people have managed to learn React. Clearly, it's not impossible.

Maybe if you tried harder…?

Reached back to one of those as-yet-unhelpful tutorials and tried your best to pound it into your brain — again?

But those tutorials really aren't helping.

Rather than making things easier — rather than giving you a calm, clear, simple framework you could use to build yourself out of the Fog of unknowingness — they pile more confusion on.

They don't teach you React.

They've gotta mix it up with Webpack, Babel, Redux, React Router, Apollo, Next.js, Gatsby, SSR, Firebase, Docker… styled-components, emotion, or maybe Tailwind CSS... Plus, of course, ES6 itself, with its Promise and let, and its weird little syntactic sugar like => and {destructuring: {things}}…

Those other tutorials promise that all this overwhelm will be worth it, because you'll learn how to "build a full React app from end to end!"

But the problem with this approach is that you learn very little about a whole lot of things. When you go to apply your knowledge in the real world, you trip across massive holes in your knowledge and understanding. Conveniently hidden in The Fog, so you fall right in.

So maybe, you think, you can find a tutorial that covers your exact use case. Your exact feature set.

Has anyone built a React app that does x, y and z?

Of course, the very fact that you feel that this is your best hope for getting your project off the ground is… well… embarrassing to admit outloud.

It doesn't have to be this way.

And it's not your fault!

If you could learn how React, at its core, actually works…

If you could wrap your hands and brain around the core of React, the technology, the mindset, itself…

You'd know…

where to start
what to do next
which pieces you should use
how it all hangs together

Because you'd have a functional mental model to guide your hypotheses and trials. A strong framework of understanding to hang all the little bits on.

Time to start a new project? No problem! You could sit right down and start from scratch, with confidence and momentum. Free yourself from the hunt-and-pluck tutorial.

Overwhelming ecosystem? You got this. Armed with your mental model, you'd be able to unravel the complexity. You'd… just… get how all those extra libraries, tools, and techniques fit into the React world as a whole, and your needs in specific.

You could see React components when you look at designs for your project.

You could think in React.

You could feel like your savvy, capable self again.

Fog begone. Forever!

Burnt away by the sunlight of comprehension.

Plus, of course, you'd be able to reap all the expected benefits from mastering React — like power, flexibility, jobs… But you already know all about those.

I experienced The Fog myself

When I started learning React, we didn't have Create React App. We had boilerplate projects, with mountains of files.

The sheer volume of stuff required just to say "Hello, World" was enough to make me want to run and hide.

There had to be an easier way, I thought — to pare it down to absolute essentials, and burn off the fog.

No messy boilerplate projects, no dependencies, just vanilla React.

So I set out to create a book, Pure React. I taught the basics of React the same way I had pieced it together… with small steps, and lots of practice exercises.

I knew I had to take a radically different approach than all the tutorials that had failed me (and you!) before.

Their missing ingredient? Focus.

The kind of laser-sharp focus that empowers you to build that mental framework, so you can see in React and think in React.

That's why, when you learn with Pure React…

You dive deep into React, in isolation… focusing on learning the mental models that make React so powerful (and challenging, at first)
You build multiple achievable, standalone projects, each focusing on one small thing… so you can complete each one in a reasonable amount of time, and walk away remembering what you learned (and have a little fun!)
You learn core concepts that don't change, so your new React skills stand the test of time — and the overall ecosystem's rapid churn and growth

The book-only version of Pure React has sold over 2,000 copies and helped so many developers like you (and me!).

Within the first hour of going through the book, I was accomplishing and understanding more than I did after a 35-hour Udemy course, thanks to having loads of opportunities to identify gaps in my knowledge.
Natasha Goodwin

But I knew I could create an even better, more powerful, experience that would make it even easier for you to claim the power of React.

This is the new, improved, and expanded Pure React Workshop

I took the best parts of the Pure React book and turned them into a series of concise, self-paced video workshops that'll help you learn deeper, further, and faster.

Every lesson was battle-tested with a live audience — over 500 people in total! — and refined based on that feedback.

Every single video lesson has been professionally edited, reviewed, and play-tested to ensure the absolute highest quality learning materials for you to use to advance your skills as a web developer.

The lessons aren't the typical rambling, um-filled slog. They're short, easily digestible, and to-the-point.

And they're all built around small, achievable projects. We start small and work our way up.

You'll build a series of self-contained projects:

a Tweet component to learn all about JSX
a GitHub-style file list to practice using props
a Shopping site with 3 pages to learn to use state, including...
a Checkout page to learn forms and input controls
an Email client with popup notifications, to learn the Context API
a Pet Store to learn API requests, including...
modal dialogs with forms and error handling, and...
CRUD operations to create, list, update, and delete (er, adopt) pets

And through these bite-sized tutorials, you'll learn all the core skills you need to get started thinking and seeing in React. (Full list of modules below!)

Here's what you'll receive:

90+ screencast lessons (5 hours 42 mins) you can refer to again and again
the Pure React book (and all included goodies)
full transcripts and closed captions
all the code from the lessons
exercises to get you going

And you get all of this for the cost of one night in a moderately fancy hotel in a major city.

If you're ready to banish the Fog and claim the clarity and power of React for yourself, BUY NOW.

Start learning Pure React now!

Why do I keep calling Pure React a "workshop"?

There's a lot of React material out there, and it spans the gamut from "a guy sat down and recorded himself live coding and uploaded it to Udemy for $10" to "professionally designed live events in major cities that cost $1,000 a day."

Pure React sits firmly in the second camp:

I designed it with help from learning experts.
I planned each lesson carefully to be just the right length and complexity for learning and retention.
Each lesson then went through a rigorous editorial process.
Each project is standalone and achievable within hours… so you'll make progress fast.
You'll be able to draw on complete transcripts to read, search, and refresh your memory.
Exercises and cheat sheets will help you get started and keep going.

Compare to a live workshop…

no rush — you can rewind and revisit lessons as many times as you like, take a break to let it sink in, and still have time to run your actual life
no pressure — you can learn in the privacy of your own home, and ask questions in text at my live Q&A
no post-workshop-slump — you can refresh your knowledge any time with transcripts, exercises and cheat sheets
no need to leave your home; no lodging or hotel expenses
it's less than a third the price of popular live workshops

With Pure React, you can learn how, where, and when you like without disrupting your life!

Plus you get all the material to keep forever, including the recordings themselves, full transcripts, the code, and the exercises.

At the current price, Pure React it a heckuva lot cheaper, too! If you have to travel for an in-person, all-day, butt- and brain-numbing workshop, $349 might just cover your hotel.

Start learning Pure React now!

If you're the kind who loves the details, here's a complete list of what you'll learn:

JavaScript/ES6:

All the parts you'll need for React: arrow functions, let/const, destructuring, rest & spread operators, and more
Master the common Array functions like map, filter, and reduce. (you'll finally understand reduce!)
Learn to use imports and exports

Hands-On React Basics:

Master React's JSX template syntax including loops and conditionals
Learn to turn sketches into components
Create components that render dynamic content with props and children

Hooks:

Learn to develop with React's new Hooks: useState, useReducer, useEffect, useContext, and more.
Demystify the "magic" behind how Hooks actually work
Learn to handle both simple and complex state

And more Hooks!

Create your own reusable, composable code with Custom Hooks
Optimize components for performance with the useMemo and useCallback hooks
Learn how to refactor simple and complex class components to Hooks
Ways to deal with stale data and closures

Effects:

Learn how to think in "effects", the Hooks-y replacement for lifecycle methods
I'll show you the right way to use useEffect
Avoid common mistakes with useEffect's (confusing) "dependency array" argument
Learn to fetch data inside effects, with both async/await and Promises

Classes:

Create stateful components with React classes
Learn how to setState the right way to avoid bugs
Create forms with multiple input controls

Lifecycles:

Learn to think in lifecycles, including when and where to fetch data
Optimize components with shouldComponentUpdate
Real-world examples of less common lifecycles like getSnapshotBeforeUpdate and getDerivedStateFromProps
Implement error handling with componentDidCatch and multiple error boundaries

State management:

Manage simple and complex state within components
Learn to share state between components with the Context API
Immutability: how to work with it effectively on arrays and objects (and why it matters)

The React Context API:

Context can replace complex solutions like Redux when your app is simple
Learn when the Context API is the right choice
Learn to use multiple Contexts in a single app
Learn to optimize Contexts to avoid common performance pitfalls
Create a notification system and display popup notifications

API calls and forms:

Make API calls the "React way" and display data from a server
Create forms to persist data to a server, including error handling
Learn to debug API calls when things stop working

Tools, but minimal:

Set up projects quickly & easily with Create React App (skip the complex Webpack config)
Use the React DevTools to debug live apps in the browser
Measure and improve your app's performance with the DevTools Profiler

That's a lot of skills you'll pick up!

Pure React includes:

Modern JavaScript Essentials for React

Can't tell which parts of the code are React, and which are JavaScript? Before you can work effectively with modern frameworks like React, you've gotta understand the language it's based on (or at least things will go much more smoothly if you do!). In this module you'll learn the essential syntax of modern JavaScript that's necessary to work with React.

We'll cover arrow functions and how they differ from regular functions, statements vs. expressions (which will come in handy when you start working with React's JSX syntax), and the ...rest and ...spread operators (two names for three dots that look the same). Then we'll get into immutability and why it matters (super important to understand for avoiding weird bugs in your apps). You'll learn how to use the map, filter, and reduce functions — those three paragons of functional programing — with a special focus on making sure you truly (finally!) understand the reduce function. And we'll close out by learning how to import and export modules.

Easing into React: An Introduction

Welcome to React! In this module you'll write your first React app, and learn how to build apps using React's JSX syntax. We're intentionally starting simple, with hard-coded data and no "state" to worry about. After working through these lessons you'll understand enough of React's fundamental concepts to be able to build static apps, just as you would with plain HTML.

Classic React with Class Components

Until this point, the components we've built have all been stateless and pretty much static. In this module, you'll learn how to write class components in React to handle state, which will allow us to create interactive components.

Up until React 16.8, classes were the only way to add state to components. Today, we have Hooks that allow us to add state to function components without writing a class. So you might wonder, why learn classes at all?

The reality is that there is a mountain of React code that existed before Hooks, and plenty of companies aren't fond of rewriting code that already works. Having a full understanding of class components will give you an advantage when it comes to finding a React job, and it'll also help when looking for answers on StackOverflow and the like.

Using React Hooks

React version 16.8 added Hooks, a set of functions that allow you to add state and side effects to function components. In this module you'll learn how to use Hooks in your components! Starting with useState, we'll cover how to add simple and complex state to your functions. From there we'll look at using useReducer to handle more complex state. You'll learn how to write reusable custom hooks, too. And we'll talk about how hooks work behind the scenes to demystify the "magic". Finally we'll look at useEffect and learn how to "think in effects" by converting a few class components to functions with hooks, and learn how to use the useMemo and useCallback hooks to optimize your components.

API Requests in React

Not long after getting started with React, you'll want to pull in some data from an external source, whether that's your own API or someone else's. In this module we'll be building a Pet Store where we can view a list of pets in the adoption center, add new pets, edit their names and photos, and delete (er, adopt) them.

We'll start with a static app with hardcoded data and refactor it piece-by-piece until all the data is coming and going from an API server.

React Context for Application State

In many cases, teams reach for Redux as the de facto choice for state management. But sometimes, Redux is overkill. In those cases, the React Context API might suit your needs perfectly.

In this module, we’ll build a simple email client using the React Context API to pass data throughout the app. You’ll learn how to create a context, how to pass data deeply through an app without manually passing props all over the place, and how to group related data and logic using simple wrapper components. We’ll also cover practical applications like using Context to display and manage notifications and how to maximize performance with Context.

Pure React Book v4.3

This book has been designed to get you from zero to React quickly, and with maximum understanding.

Pure React: The core concepts of React, in isolation, without Redux, Webpack, and the rest.

Learning everything at once is massively overwhelming. So in this book, we will take a different approach. A more sane approach. We will learn Pure React.

Pure React Pro Club Exclusive

Developer Interviews

Purchasers of Pure React Pro will get access to video interviews with industry experts on topics that will help you go beyond Pure React.

Ali Spittel on teaching yourself, teaching others, and getting yourself unstuck

Emma Wedekind on landing a dev job (in a foreign country, no less)

Kent C. Dodds on strategies for testing your apps

Shawn "swyx" Wang on marketing yourself as a developer

Eve Porcello and Alex Banks on getting started with GraphQL

Mark Erikson on Redux, the Context API, and which to choose

Swizec Teller on keeping up with front end tech and what's coming next

Stream Recordings Archive

I spent hours teaching all of this material to a live audience and honing it before ever recording a lesson. Those sessions were recorded, but the recordings haven't been available to the public until now. As a special bonus, included with the Pro package you'll get access to view those live events!