Switching from React to Preact has many advantages for web developers. What is React/Preact? What are their strengths? What to do if you want to switch from React to Preact? Your answers are in this article.
Learn more about React
What you should know about Preact
With Preact, you can take DOM to new places that are otherwise inaccessible to it. Want to build a complete application? You don’t need to do complex integration to create parts of an application with Preact. Just integrate Preact into a widget and then apply the same tools and techniques to create a complete application. Let’s talk about productivity. According to the community, Preact uses standard HTML attributes like class and for. It works very well with React developer tools and allows state, props and context parameters to be passed to the render method. Regarding licensing, Preact is licensed under the MIT license (software license for open source and free software from the Massachusetts Institute of Technology).
So what are the points that differentiate Preact from React?
Techniques to switch from React to Preact
Already using React? You can replace names that start with React with preact-compat in your code. Using the preact-compat alias will allow you to do this easily. This way you can continue coding without having to change your habits. The other advantage of this method is that your codebase will not be disturbed. The installation of preact and preact-compat will be done through the npm module manager. Once these installations are done, you can set up the build system. The idea is that react imports and react-dom point to preact-compat. Switching from React to Preact allows you to enjoy the benefits of the different React modules available on npm. No need to modify your code. It is also possible to make React and React-Dom work properly in a single module. The only problem with this technique is that you have to add 2 kb to the size of your final bundle. Let’s move on to the second method allowing you to switch from React to Preact. This second technique is also called: “à la mano”. You just have to redirect your imports to preact. This will remove the non-compatible code. To do this, install the library. Then replace npm i – S preact, i.e. React.createElement with h, the one from preact. The JSX pragma is the name given to the function for transpiling JSX. Preact uses the Hyperscript library. This will imply pragma h. In turn, <h1/> transpiles to h (‘h1’).
Are you so used to using React that you don’t want to leave your comfort zone? That’s fine, React and Preact are both compatible libraries. You can always rely on React if Preact doesn’t have the specific functionality in its component catalog. A React component adapted to your needs will always be available if you need it. You just need to install a specific module thanks to npm.