My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMSĀ for Enterprise.
Upgrade āœØLearn more
Want to learn Reactjs? Here's  the 2021 resource list for you!

Want to learn Reactjs? Here's the 2021 resource list for you!

Alison Haire's photo
Alison Haire
Ā·Jan 13, 2021Ā·

6 min read

#Hello šŸ‘‹

Iā€™ve been a dev for a few years now, and one of the top things I get asked (after what language should I learn and where do I start) is where can I find some good resources for learning ā€˜xā€™. So hereā€™s some of my fave resources for learning ReactjsšŸ™‚!

Learn All The Things Meme

React is an open source javascript library originally developed by Facebook and released in May 2013. It continues to be developed & maintained by a core Facebook React team and the awesome open source dev community.

Itā€™s also MIT licensed (as are all the React products including Jest, Flow, React Native & Immutable) which pretty much means youā€™re able to use it for private and commercial projects freely (thanks to the open source movement).

If youā€™re just getting started in front end development, there are some key skills you want to have a decent idea of before you delve into a library like React. These include what the internet runs on at its most basic level - css, html and javascript and Iā€™d also recommend knowing how to use git versioning.

While these arenā€™t essential to know and you can learn them in combination, if youā€™re serious about your learning, thatā€™s definitely the place Iā€™d start. If you want a React learning pathway to map your studies you can check out this handy React Roadmap

Assuming you have some prior knowledge in these things thoughā€¦ hereā€™s some of the best resources the interwebs has to offer (in my humble dev opinion) for learning React either for free (and one sneaky cheap one - because it's totally worth the dollarydoos) as well as some of the people and sites to subscribe to or follow to stay up to date on all things React.

#Where to start The best idea when learning a new tech language, library or framework is to start with... Yep, the documentation. (Sorry not sorry)

šŸ˜‚šŸ˜‚šŸ˜‚ https://t.co/EmImS4V2cO

ā€” Ally Haire (@DeveloperAlly) July 28, 2020

Weā€™re in luck here though, because React is particularly good on documentation! Itā€™s comprehensive, easy to read and well set out - hurrah. Even better - React has a complete beginners tutorial on their site and even course recommendations (so I guess thereā€™s no need for you to read the rest of this article now huh? šŸ˜œ)

As a quick aside - The React team is working on a major rewrite of the React docs site as we speak and looking for community feedback on how people currently use the docs and what improvements would be most helpful - you can help by taking this survey

The React written walk-through tutorial is really the ultimate place for a beginner to start (canā€™t really beat something written by the developers themselves can you?!). You can find it here.

If you prefer to learn via video or with step by step hand-ons interactions or want some social communities or mail-lists to subscribe to, then read on my friend šŸ˜ƒ !

#Hands-on & Written Beginnerā€™s Tutorials

Codecademy

Codecademy is one of the best free resources for those wanting hands-on learning all in one browser window. You get instant feedback on whatā€™s right (or wrong) with your code and follow one-page tutorials.

Alt Text

Find it here

W3schools

W3schools gets an honourable mention for being one of the oldest (but still relevant!) developer tutorial resources on the web. Founded in 1998, it focuses on being both a tutorial and resource and is continually adding languages and libraries to its site. Itā€™s a great free resource if you prefer to read and run examples.

Find it here

#Video courses

Stephen Grider One of my all-time favourite dev teachers is Stephen Grider. This guy has a way of explaining sometimes complex topics in a simple and easy to understand way.

Not only is he a great teacher - but heā€™s very consistent at updating his content to make sure itā€™s keeping up with current React trends. This guy gets 5/5 hot dogs šŸŒ­ from me (Stephen says this phrase a bit in his videos and I for one am good with it)

My recommendation for starting is his 2020 updated ā€œModern React with Reduxā€. Once youā€™ve mastered that you can move on to his ā€œAdvanced React and Reduxā€ course too (perk!).

You can find his courses on Udemy, and while they arenā€™t entirely free - they are well worth the $10 you can get them for by going through his website for a discount coupon (or you can wait for a very frequent Udemy sale to happen).

Find it here.

FreeCodeCamp

FreeCodeCamp offers a free (obviously) 10 hour hands-on YouTube tutorial series which has recently been updated as of October 2020! This course will take you through the fundamentals of React including how to get setup and teach you modern React concepts (like Hooks - which were introduced in v16 in 2019). This is an awesome free development course and big kudoā€™s to freecodecamp for making coding accessible to all.

Check it out here

{% youtube 4UZrsTqkcW4 %}

PluralSight

For a free video course that takes you through the essential React concepts while you code-along, try out ā€œReact: Getting Startedā€ on PluralSight. This course is completely free and even includes a Javascript crash course if youā€™re a bit rusty or still learning.

Youā€™ll find it here

#React Development Social Communities

Find peers, ask questions and get help in some of these awesome React Dev communities found on Reddit, Discord and Slack.

Discord: The original React discord since 2015 is Reactiflux. Likely named when Flux was still the UI state management system of choice (things move fast in front-end development - which is why Iā€™ve included a people and blogs to follow section!)

Find it here

Reddit: This reddit even has a beginnerā€™s thread - so donā€™t be afraid to ask any and all questions! Most devā€™s I know are happy to help others - after all, we all started somewhere too!

Find it here

Slack: You can find a lively community of react and react-native developers on slack too.

Join the slack here

Meetups: Donā€™t forget about the awesome resource of Meetups! Meetups are often run by passionate developers, and given the popularity of Reactjs - youā€™re pretty likely to find a react meetup near you. Itā€™s also an awesome way to meet other react developers and network.

Check out your local groups here

#People & Blogs to follow

Dan Abramov Dan Abramov is the undisputed down-to-earth King of React (who probably would wince a bit at being called that). Heā€™s so associated with React, that itā€™s a common misconception he created React (it was actually originally created by Jordan Walke).

Dan Abramov Twitter

He did however develop Redux - which you can think of as a UI data storage system that keeps your data values synchronised & consistent and able to be connected to any React UI page. He also continues to be a core member of the React development team and runs the overreacted.io blog.

No React article would be complete without a hat-tip to Dan.

Twitter: @dan_abramov Github: @gaeron

Ryan Florence

Creator of react router (basically used to give your react app the ability to move between pages) and founder of the reacttraining.com learning site. This guy does an awesome workshop and conference talk - check out his chat from ReactSummit - the official React Conference, this year on YouTube.

Ryan Florence Twitter

Twitter: @ryanflorence

Oh, and check out his tongue-in-check 90s website if you're after a chuckle too (Thanks Ryan šŸ˜‚)

Robin Wieruch This guy has been blogging and writing tutorials about React from nearly the start.

Alt Text

Web: Robin Wieruch Twitter: @rwieruch

#Go use your new-found tech powers!

If you're interested in hearing more about opensource or choosing a tech framework - check out The TechJam podcast!

Let me know if Iā€™ve missed an awesome resource, great community or someone to follow and thanks for reading! šŸ’™

Alt Text