To read the article in other languages go to it on my website: React: considerations and references
Miscellaneous guides on the main aspects and patterns of React
React Hooks VS Class component: Opinion
Starting with version 16.8 React Hooks have been introduced. Hooks allow functional components (which already existed) to access state and other features of React. For this reason, class components are generally no longer needed. However, Facebook does not formalize the "death" of Class components because, quoting verbatim:
At Facebook, we have tens of thousands of components written as classes, and we have absolutely no plans to rewrite them. Instead, we are starting to use Hooks in the new code side by side with classes.
So who wins?
Use React Hooks Instead of Classes
I strongly believe in the necessary general change in React's philosophy by totally abandoning Class components. Although class components are more conducive to routing management, there are many reasons for a radical change. I believe that for React to remain a good competitor, it must favor the ease of learning its syntax and handling written code with simplicity. Vue takes this into account by handling all of its major releases as a new chapther. If you have to refactor a technology, you have to refactor it, whatever it costs. Here are six more practical reasons to switch to React hooks:
https://blog.bitsrc.io/6-reasons-to-use-react-hooks-instead-of-classes-7e3ee745fe04
Class Component
Although with React hooks we are already in the future, it does not mean that we must exclude the past. In my opinion, it is important to know the Class components well, at least as well as the hooks. Knowing the logic of the this concept, clashing with its redundancies to understand firsthand what React is in its entirety.
https://dev.to/samirasaad/class-component-with-react-typescript-3948
Folder Structure
Each technology has its own best practice regarding folder structure. Below I add a good starting point for a mid-sized React project.
https://profy.dev/article/react-folder-structure
PropTypes: Validation
One of the fundamental patterns of any frontend technology is the passing of data between parent and child components. React uses the concept of "prop" which, for those who do not know, means property. As a property, it is strongly recommended to define certain aspects of it, for example, the type or need for existence of that property. To do this, in my opinion the best solution is directly using TypeScript, but for obvious reasons sometimes it cannot be done. So in these cases I recommend the use of PropTypes. Below I add an article where it carefully explains the use of this tool.
https://blog.logrocket.com/validate-react-props-proptypes/
Nested Routes
Understanding how routing works in React is fairly easy. In this sense, I like the fact that React Router frequently changes the game with the addition of new features in almost every release. Despite its easy understanding, React Router may have dichotomies about nested routes. I add below a guide on how to handle nested routes.
https://ui.dev/react-router-nested-routes
React with TypeScript
Working with TypeScript rather than JavaScript in a React project means choosing short-term pain and long-term reward. When starting a TypeScript project, you may find it very difficult and time-consuming to establish all the authoring tools. However, as your application grows, you will find that these boilerplates are enormously helpful and speed up and reduce the likelihood of errors.
https://www.sitepoint.com/react-with-typescript-best-practices/
React for Vue developers
I don't believe in choosing between technologies, React or Vue, I do not belong to either team. In the end, they are like different windows of the same house. It is a fact though, that one of my first approaches to the world of frameworks and frontend libraries was with Vue, so my foundation comes from there. So I add below a guide for Vue developers and aspiring React developers.
Top comments (1)
Nice and helpful one!