DEV Community

loading...
Cover image for How to learn React - The Effective way

How to learn React - The Effective way

Shaan Alam
I am a self taught programmer currently learning Web Development. I work in JavaScript.
Updated on ・4 min read

What is React?

React is a free and Open Source Front End JavaScript Library for building complex User Interfaces by dividing your application into smaller components. It is maintained by Facebook and a community of Developers.

Pre-requisites for learning React

Before learning React or trying to learn React, I would say to familiarize yourself with HTML, CSS, & JavaScript.You can learn HTML and CSS within 2-3 weeks as they are used for creating layouts for your web application. JavaScript takes some time to lean as it is a programming language. Spend at least a month or two learning JavaScript. Don't just learn and learn, but also create small projects to implement the knowledge that you have gained. You can create some mini projects like To-Do Lists, Calculator, Random Jokes Generator etc.

JavaScript

While learning JavaScript, you have to avoid some mistakes that I made. When I was learning JavaScript, I thought that I have to become a absolute master of JavaScript to write React code (which is non-sense). I started learning advanced concepts (as a beginner), failing which, I thought I am not good enough. But, let me tell you, as a beginner you need to learn just enough ,so that you can create basic projects in vanilla JavaScript. Some topic to learn and understand deeply are

  • Variables
  • if/else conditions and switch statements
  • Difference between var, let & const
  • Functions
  • Arrays
  • Array methods like filter, map, reduce etc.
  • ES6 Concepts
  • Promises
  • Callbacks
  • Async/await
  • Classes and OOPs Concepts
  • Working with APIs Again, don't just learn, APPLY!!

React

At this point of time, when you have learned JavaScript essentials, it is time for you to dive into React. You can start learning React by taking a look at React Official Docs or by taking their React Official Tutorial to get some idea of how React works. React Docs are very well written covering the fundamentals of React. Learn these topics very well to understand React fundamentally.

  • JSX
  • Components (Functional and Class based)
  • Lifecycle Methods
  • State
  • Props
  • Handling events
  • Forms
  • Conditional Rendering
  • Working with third-party APIs. Once you have gained understanding of these topics, it is time for you to create projects in order to implement them. You can create new projects or the remake the ones you made while learning vanilla JavaScript using React.

React Router

Learn about React router. React router is a routing library for react which will help you to navigate through different pages in your React App. Learn about loading specific page's content, passing params in the URL, redirecting etc. Also, understand that react router is not a part of React, it's a routing library made for React.

Advanced React

Now, that you have basic React knowledge and also created some basic projects, it is time to learn some advanced concepts like Hooks, Context etc. Take a look at React Docs and learn these concepts.

  • Context
  • Hooks
  • Error Boundaries
  • Higher Order Components
  • Code Splitting
  • Refs
  • Forwarding Refs
  • Render props

Some extra stuff!

You can also learn some extra libraries like Material UI, reactstrap, tailwindcss, Semantic UI etc, once you have learned the basics of React. These libraries will help you in your day-to-day React Dev life. However, it is not compulsory to learn everything, you can try and learn them once you are done with React basics and can make projects.

Congratulations 🥳

You are a React Developer. Now you just have to hone you skills by creating projects and visiting React Docs often and learning new things.

Some resources to learn React -

Some useful tips

  • Don't try to learn everything at once, understand and accept the fact that you a beginner and spend enough amount of time to learn these concepts.

  • Don't be afraid of writing bad code. Like I mentioned earlier, you are a beginner, at some point everyone is. Understand that Progress >>>> Perfection

  • Avoid Tutorial Hell 🤯. Tutorial Hell refers to the term when you follow a tutorial after tutorial, and you think you are learning, when in fact you learn nothing. If you watching Youtube tutorials, don't just watch video after video. Realize that you are stuck in Tutorial Hell and stop watching more videos and start creating your own projects.

  • Make Google, StackOverflow, articles & blogs your best friend. Start googling your questions, there is a high probability that your problem/error has already been solved by someone else on the internet.

Find me here -
Github - shaan-alam
Twitter - shaancodes
Instagram - shaancodes
LinkedIn - Shaan Alam

Discussion (37)

Collapse
anitanwright profile image
Anita Wright

This is super helpful! Thank you for writing it all out like this. Especially the part about JavaScript and which parts to focus on. I’ve been overwhelmed trying to understand it all at once but this gives me the necessities and then what to focus on once those are mastered.
Thanks again!

Collapse
shaan_alam profile image
Shaan Alam Author

Thanks @anitawright75 for your kind words!! Glad you found it useful :)

Collapse
miketalbot profile image
Mike Talbot

Nice article, I'd only say - I started coding React 2 years ago and I've never written a class based Component, only ever Hooks. So I'd say Hooks are now a basic requirement and the big complexity of class components is only necessary if you are maintaining someone else's code base. For me useState and useEffect are the core part of hooks.

Collapse
shaan_alam profile image
Shaan Alam Author

Yeah, you are right. I too use hooks mostly over the classes in my projects.

Collapse
kbalthom profile image
Petter_Nicely

Very helpful and thanks you.

Collapse
shaan_alam profile image
Shaan Alam Author • Edited

Glad you found it helpful 😊

Collapse
prasad2gavande profile image
Prasad

Thank you for tips

github.com/Asabeneh/30-Days-Of-React
this is also good resource to learn react.

Collapse
shaan_alam profile image
Shaan Alam Author

Thanks for sharing the repo!! 😉

Collapse
lovah profile image
Lovah

Good evening lady's and gentlemen, I would like to thank for your support by that time, struggling to recover what I have done.

I really appreciate your support wish you the best.
I feel welcome now .

Collapse
shruthi818 profile image
Shruthi818

Pls suggest any tutorials to learn JavaScript for the topics mentioned here.

Thanks

Collapse
amrishpandey profile image
amrishpandey

i suggest wesbos.com/javascript
or for further depth look into javascript.info , but i guess 1st one is sufficient for learning react.

Collapse
shaan_alam profile image
Shaan Alam Author

You can learn all these topics from MDN Docs. They are really great for learning javascript.

Collapse
leodesanmiguel profile image
Leonardo Martinez

Excelente Tips

Collapse
shaan_alam profile image
Shaan Alam Author

Thanks man!!!

Collapse
drfcozapata profile image
Francisco Zapata

Thanks a lot bro!!!
I'll take de course of FreeCodeCamp.
Greetings and blessings from Venezuela.

Collapse
shaan_alam profile image
Shaan Alam Author

😊

Collapse
izdesigner profile image
Lại Văn Đức

Very helpful and thanks you.

Collapse
shaan_alam profile image
Shaan Alam Author

Glad you found it helpful 😊

Collapse
debarshi97 profile image
debarshi97

Absolutely agree with you on this article.

Collapse
shaan_alam profile image
Shaan Alam Author

Thank you!!

Collapse
bk_973 profile image
Benjamin Kalungi

Good resources, Thank you for sharing...

Collapse
shaan_alam profile image
Shaan Alam Author

Glad you found it useful!!

Collapse
iamhtmldeveloper profile image
Amol Bhandare

This really helpful article for who's learning not only react or any other all programming languages.... thanks for sharing your knowledge with us!
All the best bro

Collapse
shaan_alam profile image
Shaan Alam Author

Thanks man 😁

Collapse
enetojara profile image
Ernesto Jara Olveda

An Image/example tells more than 1000 words

Collapse
shaan_alam profile image
Shaan Alam Author

Yeah, you are right. But I couldn't find any relevant images for this.

Collapse
macho777 profile image
Machiavelli

Thanks for volunteering to make one 👍

Collapse
shaan_alam profile image
Shaan Alam Author

You're welcome 😀

Collapse
darshitdev profile image
Darshit-dev

Thanks for Giving roadmap of React.

Collapse
shaan_alam profile image
Shaan Alam Author

You're welcome 😁

Collapse
hima_khaitan profile image
Himanshu

This is helpful for those for those trying or in middle of learning react. Great Work Man!

Collapse
shaan_alam profile image
Shaan Alam Author

Thanks 👍

Collapse
kanamitomato profile image
Kanami

I am the same one who thought "I have to become a absolute master of JavaScript" but your post opened my eyes! Thank you Shaan

Collapse
shaan_alam profile image
Shaan Alam Author

Glad you found it useful!!

Collapse
alfredoej profile image
Alfredo Echeverria Junior

Valeu Shaan, sou iniciante também. E estou sofrendo de Tutorial Hell. Parar com isso e começar a praticar.

Collapse
longyc profile image
LongYC

I'd like to add this article by Kent C. Dodds as well for some of the most common JS things to know for React: kentcdodds.com/blog/javascript-to-...

Collapse
shaan_alam profile image
Shaan Alam Author

Thanks for sharing the resource!