12 Great Resources from my Journey in React
Note: This article was originally published on Medium.
Hiking to the Siri Paye in Pakistan 2019 — Taley’a Mirza
I have written this article to list the resources that helped me in the journey of learning React (in conjunction with official documentation).
I am a frontend engineer, active in the React ecosystem for the last four years, and gained expertise in React and frontend by following the official documentations, learning from the community experts, and being aware of the latest changes in the eco-system by reading articles and Twitter.
This is a small effort to help the community by directing them to the excellent resources by community experts as per my own experience.
Disclaimer: It is always advised to hit the official documentation of tools and libraries as your preferred sites. When you feel, you want an extra guide to understanding concepts then you can definitely surf the internet but do it carefully because there are plenty of misleading and deprecated resources on the internet on every topic.
The Beginner’s Guide to React (1)
This is a 2.5 hours free course by Kent C. Dodds on egghead.io
This was my first guide to kick start my journey with React, it takes you from the very minimal foundation to the very essential parts of learning React in a concise way. I have replayed a few lessons to grasp the concepts. This course is now updated with essential hooks.
The tip is to write the difficult parts in a notebook so you can repeat those when needed.
React is a Potato (2)
Data flow in React is often difficult to digest for beginners of React. I am not an exception, it also took me a while to get the concepts.
When I attended this talk in womenofreact.com, I was amazed how Maggie explained in a beautiful way, the flow of data in React as a potato plant with the help of metaphors (visuals).
Here are the slides and video talk on YouTube, if you want to have an overview or a minimal version, go with slides.
Here are some other recommended metaphors that helped me in visualizing the concepts of React by @Mappletons
- What the Fork is the React Virtual DOM (3)
- JSX is a Lovechild (4)
State Management in React
Many people ask me which is the best state management tool or practice and the first reply I give is React itself has its own state management that is sufficient for most simple cases.
All state management tools or practices have their own use cases and tradeoffs and you must know them. I am covering the resources for a few of them.
React State Management Libraries and How to Choose (5)
If you want to know in depth, I found this article a sufficient guide all about state management by Dave Ceddia
Context API
Context API is famous as an alternative for prop drilling but there can be some performance issues if you are not careful about how you use it.
Keeping it simple, if you need to manage some global state like theming, authenticated user, or internationalization objects, Context is considered as the best fit.
It’s not a good practice for all-over prop drilling throughout the app. As per documentation,
Context is primarily used when some data needs to be accessible by many components at different nesting levels. Apply it sparingly because it makes component reuse more difficult.
If you only want to avoid passing some props through many levels, component composition is often a simpler solution than context.
React useContext Hook Tutorial (6)
I would suggest learning both ways to use Context through this article by again Dave Ceddia
Redux
There are many opinions on whether we should redux or not, when to use it, and when to avoid using it. Many medium to large-scale organizations are using it whether you consider using it or not in the future, as a developer you should know the fundamentals and usage for maintenance. Keeping this article to the point, I would not go deep into it, I have listed resources for learning redux.
Fundamentals of Redux Course from Dan Abramov (7)
This is a concise 2-hour long free course to learn the foundation of Redux by the creator of Redux Dan Abramov.
Overreacted (8)
He is very well known in the React community being in the team of ReactJS core team, I would definitely recommend following him on Twitter and reading his articles on his website.
Tip: Because there are many, I would like to give a tried and tested advice. Reading articles is easy but it takes time to absorb them fully. For the articles, you want to read, make an event per week on your calendar when you can spare 20–30 minutes for an article and do write the difficult concepts on paper.
JavaScript
React is the library that is built upon functional concepts of JavaScript. Without having the foundation of JavaScript and learning its advanced topics, in my opinion, a developer cannot be an expert in React.
There are plenty of video tutorials on Youtube for learning JavaScript. You can follow MDN (9) or Web Fundamentals (10) by Google
Key concepts to learn are primitive types, type coercion, scopes, closures, prototypes, promises, asynchronous programming, event loop, pure functions, higher-order functions, currying and Web APIs.
JavaScript: The Advanced Concepts (11)
It’s a paid course I have bought on advanced topics by Andrei Neagoie on Udemy and far most the best if you want to spend on your learning and do not want to surf different sources for different concepts.
Just JavaScript (12)
I have also bought Dan Abramov’s course that is super affordable and explained the JavaScript concepts through the help of mental models and simple words.
This ends the 12 great resources I have curated for my followers and community fellows. I will share some advanced resources of React in my next article.
I am a Google Developer Expert in Web and I feel glad to write useful resources for the community. Let me know how much do you find these resources relevant and comment down if you want to get resources or a guide on any specific topic in React, JavaScript, or Web (frontend).