How to switch from React to Preact?

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

React, also called React.js, is a JavaScript library used by the social network internally to make the design of interactive user interfaces less complicated. React's main objective is to manage the interface of a site. Since 2013, this library has been developed by Facebook. It is not only used on computers, React.js is also an essential reference on mobiles in terms of developing user experiences in the web browser. React's performance and flexibility make it one of the easiest libraries to use. This is due to the work on a virtual DOM. The rendering in the browser is only updated when needed. With React, you are free to choose the structure of the interface. Other frameworks (framework used by computer developers to simplify their work) are more capricious in this respect. Let's now detail the advantages of Preact Js.

What you should know about Preact

Preact Js is an alternative to React. This library is able to provide the finest virtual DOM abstraction on the DOM (Document Object Model, a programming interface that allows scripts to modify and examine every content in the web browser). In addition to being able to register actual event handlers, Preact is compatible with other libraries. Most frameworks take up a lot of space in a JavaScript application. Preact is different. Its very small size allows other elements like your code to occupy more space on your application. With Preact, you won't have to download, run and parse more JavaScript. You'll have more time to focus on your code. You can create an experience that you can define without struggling to keep the framework under control. Preact's performance is not to be outdone. 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?

Before knowing the differences between React and Preact, it is good to know that the Preact js JavaScript library does not intend to replace React in any way. You can't fit React into 3kb. The DNA of React is what Preact is based on. Preact has done everything to optimize the weight of React. Preact is much better because it gives you the ability to use a tool that is tailored to meet the needs of an application efficiently. Preact allows you to optimize the performance of your applications with the code you need. React offers several possibilities. For example, it allows you to manipulate the DOM. It also offers excellent graphic rendering such as 3D or VR models. As for Preact, it stands out for its performance in manipulating only the DOM. You can engage in the use of various UX components or create a virtual DOM. Preact has the ability to optimize the performance of a user interface, a site or an application. It makes the code easier to use. When browsing, the number of loaded codes is minimized. It will be easier to boost the loading of JavaScript bundle calls. The js library that is Preact is used by Yahoo, Netflix, Sony, Airbnb, Instagram, Atlassian, Facebook teams and Whatsapp, among others.

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.