Today I would like to share with you this roadmap guide to learn React. I put up this material based on my own experience so far and what I've been advised by senior developers. Let's start!
π― Strengthen/solid understanding of JavaScript
To succeed in React (and any other JS framework), having solid foundations of JavaScript is really important. Here are a few of my favorite sites with really good source material:
π― Having a HTML, CSS solid understanding
Understanding these two languages is key for building web applications, here are some good resources you could learn or reinforce your knowledge from:
π― Get familiar with popular Javascript array operations like map, filter and reduce
There are also others you could check like pop, slice, find, push, and many others!
π Here's a post from another member here in dev.to that created a really cool cheatsheet explaining some of the most commonly used: JavaScript Array Methods Cheatsheet by Code of Relevancy
π― Learn about Object Destructuring
Object destructuring is a useful JavaScript feature to extract properties from objects and bind them to variables. There are a handful of things you could do from it so make sure to get familiar with how this works.
You can have a quickstart with my article about it here π Learning Object Destructuring
π― CSS/Styling Frameworks
CSS frameworks can be really helpful to save us time when building applications. These are my favorites (and the populars):
π― API's
Having a solid understanding about how to use and create an API will allow you to gather, crunch, and make sense of the data you will need to display across your application.
If you only want to focus on frontend then at least consider understanding the basics of how to consume Restful APIs.
π Here's a list of free public APIs you could for your next React project.
π― The actual React learning
Make sure to give a look to the official documentation, that's always important and then continue with any other tutos that suit better to your own needs and likes.
Quick start π official tuto
Other topics of interest around the React world you should definitely give a look are Functional Components, Arrow Function Components and React Hooks.
ββ Bonus: GraphQL
Graphql is a very powerful tool and it makes queries and requests much easier. After learning the basics with APIs and everything around that, I suggest you to give a look on how to use GraphQL.
ββ Bonus: Styled Components
Styled components is a CSS-in-JS tool that bridges the gap between components and styling. The main goal of this tool is to provide us a flexible way to add custom styling to our components in a functional and reusable way.
Final Thoughts
There is so much more to learn about React but I hope this guideline will be a good starting point for you and help you on your own journey. If you know somebody whom this could be of help please share! π
If there's an item you would like to share to complement this, feel free to go and post a comment about it! π
Happy learning and thank you for reading!
Don't forget to hit that π button if you liked this article and support me with a follow, i will keep posting more content about tech, programming, career development and more! :)
Top comments (1)
Thank you! Great Roadmap! π₯