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.
Today I'm launching a 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 lessons 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
You can 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.
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.
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
anduseCallback
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
andgetDerivedStateFromProps
- 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!