React: Considerations and References

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?

https://stackoverflow.com/questions/60134270/react-hooks-stateless-component-vs-class-component-in-the-era-of-hooks-which/60134353#60134353

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.

https://sebastiandedeyne.com/react-for-vue-developers/

If you appreciated the article, give it a like on dev.to.