React is the most popular frontend framework by any standard today. There are in excess of two million developers using it, and a lot has been written about it.
Even though this is great in many regards, it also comes with downside - it's impossible to figure out where to turn for good content! So with a bit of tongue in cheek - here's yet another article on how you could get started with React.
What makes this one a bit different, is that I'm in charge of training hundreds of aspiring (or newly hired) developers every year. I've spent a lot of time researching ways to both teach and learn React, and I think I got it down to a science by now. The list is in order, so if you've touched on some of these topics before, feel free to skip ahead.
So if you're a senior systems engineer that's looking to pick up some frontend skills on the side, or if you're just starting out - this list should help you to get started
Skip Redux, Webpack, Babel et al
React is often coupled with a state management tool called Redux. Redux is a great tool for when you need it, but it's not something you need to know right away. Same goes for other tools you might encounter with React, such as Webpack, Babel, sagas, GraphQL and tons of other ones.
Skip all of that. If you see a tutorial with one of those in the title - Marie Kondo that shit, or save it for later.
Read the React docs from beginning to end
It might sound a bit boring, sure, but it's the best advice you're gonna get. The React documentation has been written, vetted and improved by hundreds of people over the course of half a decade. It's being translated into 48 different languages (!), and is just a fantastic resource in every single way. It's well written, well structured, and is split up into chewable parts you can fly through in a few minutes each.
Read through its main concepts, cool game tutorial, and even some of the advanced guides if you're feeling adventurous.
There's a huge section on the more "modern" way to use React as well - hooks - which you should skim through as well. It's definitely the way forward, so spend the time you need to with this material, too.
Finally, I suggest you get familiar with the API reference. You don't need to go through this one right away, but know that it's there for when you finally need to use one of those exotic APIs you rarely see in the wild.
Check out Kent C. Dodds' Beginners Guide to React
If you're into video courses and screen casts, you're going to love this. Honestly, even if you're not into screen casts, you're going to love this.
You'll find it for free on Egghead, and it's 19 videos totalling a very manageable 77 minutes of content.
Even seasoned React vets have something to learn in this video series. He'll take you through creating and updating nodes in the DOM manually, doing the same with regular JS-based React, and then showing you how to turn that into that mystical super juice called JSX. And tons of other stuff.
Follow along with Michael Chan on his holiday adventures
After reading the docs and watching Dodds' beginner guide, you're starting to really have the good feels for this fantastic little framework we all love and enjoy.
Michael Chan - also known as chantastic - runs the React Podcast, but every holiday season he sits down to do something really cool for the community. This year, he's created a 24 part series, where he's presenting React step by step.
It's perfect for both experienced devs and for people just starting out.
You can watch it on YouTube or on dev.to
Start building something yourself
So you've read the docs, done the tutorials and seen some incredible videos of smart people introducing increasingly complex topics. Congratulations - you've at the end of this road of teaching.
The next step in your learning journey shouldn't be more advanced tutorials and courses, it should be building something yourself. Come up with an app idea, and create something at least you'll use!
This way, you get to get into the real part of learning React - trying to ship features to actual users in a timely manner. You know how props work - now it's time to learn how they'll work after a couple of weeks of adding features and neglecting debt. It's a lot to learn!
Consider a paid course
The React community is lucky in that it has an abundance of free options to get you up to date on the latest and greatest in React. However, some of the most polished content is only available at a premium - as it should be.
If you're employed, ask your employer to shell out a few bucks for your program of choice. There's a lot to choose from, but here's some of my favorite resources:
Egghead
Egghead is an incredible resource, with tons of great, free resources for any skill level. They do have some paid content, though, which can be accessed at a pretty decent price. Check them out at egghead.io
Frontend Masters
Frontend Masters is pretty similar to Egghead, but has different content from different authors. You can browse their catalog and find something you're interested in before you shell out for a monthly subscription. Check them out at frontendmasters.com.
TestingJavaScript
Not directly React related, but still some of the best money I've spent online. This is Kent C. Dodds' opus to front end testing, which has really kicked off a renewed interest in testing my code for me. If you can afford it, check it out at testingjavascript.com.
TylerMcGinnis
A bit smaller than the previous platforms, but known for some of the very best content in the React business. Tyler also happens to be a stand up guy, and I'd be happy to give him my moneys. Check out his courses at tylermcginnis.com/courses
Wes Bos
Finally, Wes Bos. He was listed as an option for "best resource to learn from" in the State of JS survey this year, so you know he's good. He's got a lot of free stuff on YouTube, as well as a long list of paid courses in everything from GraphQL to Markdown. Check them out at wesbos.com/courses
Build your own version of React
As a bonus, I want to share a workshop some colleagues of mine created last year. It's a workshop where you re-implement a basic, yet working version of React and ReactDOM from scratch!
It was an incredible deep dive into why React works the way it works, and how you can leverage that to your advantage. It's completely free, and will probably be held as an actual workshop at a conference near you in 2019.
So that's it - the definite guide to get started with React development in 2020. At least for now.
I hope this will get you started on your React journey. If you have any questions, or need a resource to learn a particular type of React development, leave me a comment and I'll try to help you along. This is - after all - for the community. ❤️
Top comments (17)
The KCD Beginner Course is awesome.
I recommend it to every beginner, because it shows how React works under the hood.
In my own course, I start with building HTML elements in vanilla JS, showing how annoying this actually is, then going to the old React way and finally with JSX.
People go like "Oh, this all makes sense now."
Yeah that's the same approach I've followed as well. However, I feel it works best if the students have used React a little bit at first. People that are totally new to React (or front end development in general) typically respond better to just being served JSX at first, focusing on just "getting stuff on the screen".
But I love the approach in the KCD course - it's a great way to teach.
For newcomers I would suggest to use CreateReactApp, saves a lot of time and you don't need to know how Webpack and bundling works and the start.
Following the same idea, Ionic now supporting React too, could also be an alternative. There is even a Build Your First Ionic React App documentation followed by some interesting chapters about lifecycle and navigation.
Ionic is a great framework, and the guide you link to is really nice, but to be honest I'd try out React by itself for a while before I dove into frameworks like Ionic or Gatsby or Next. If you understand the fundamentals first, it's easier to learn what's a framework and what's React APIs.
Well I would say that using Ionic with React is using React by itself.
Ionic isn't a framework, it's a UI components library.
Therefore the fundamental remains the same. Components, functional components, hooks, react-dom, JSX, state, or even redux and all other subjects, etc. same same.
But of course, what's really important, is to find the way which fits you the best 😃
Well, let's not split hairs. Framework or component library - Ionic is really cool, and it makes it very easy to make cross platform apps. The reason I suggest that you learn React by itself first, is that you don't have to learn the APIs of Ionic at the same time.
But for sure - finding your own path is important ✌️
I understand your point better now, thx for the explanation. All cool 👍
I am a fan of Ionic React.
I've started learning react, I started with their game tutorial and then read the 'main concepts' sections, now I am moving to a video tutorial by Brad Traversey (Traversey Media React Crash Course), after that I'm thinking of taking a project in hand, is this the correct flow?I haven't gone through hooks or API Reference yet.
Very cool! I'd suggest that you'd start your project as fast as possible. It's really where you solidify your learning. There's always going to be a ton of edge cases the tutorials and guides won't cover, where you need to understand what's happening to figure out a solution. Mulling over those kinds of challenges is what really gets you ready real world projects.
It doesn't have to be huge projects either - a bunch of small (albeit varied) ones will do! Create a todo app, an "Add new Tweet" dialog replica, or even a small Twitter client!
If you're looking for projects, I would recommend frontendmentor.io - they give you an idea, an API and some nice looking sketches for you to implement.
Best of luck on your learning journey!
Hey, thank you for such a helpful reply 😃 I'll surely try those
Thanks for this post. Some nice stuff here !
Wes Bos also has a Podcast called Syntax. which is really great. I learned a lot about react and full stack just listening on my way to work.
Oh, don't even get me started on podcasts. There are so many great ones, like The React Podcast, Ladybug Podcast, The Undefined Podcast and - as you mention - Wes Bos' Syntax.
I have started the Create React App from Scratch, step by step tutorial series about React on CodeSpot, feel free to check it
Very cool!