- front-end development
You can use Preact, the React alternative, for entire apps, or just abstract out parts of an app, depending entirely on the scope, size, and requirements of your project.
Preact has not been designed to be an exact replacement for React, however this is possible through the use of preact-compat, a layer over the top of React to make it entirely compatible - converting existing React projects in a flash.
React license issues and resolution
One of the reasons that people have been choosing to switch from React to Preact is due to Preact’s MIT licensing. This is in contrast to the BSD + patents licensing that has always come with React, as it is a product of Facebook. Preact offered a sidestep to this issue that worked better for business and commercial products.
MIT licensed products are available to be used freely for commercial use, without any fees or copyright concerns, so long as the license itself is included somewhere in the project. This is opposed to the original BSD + patents licensing of React. This setup meant that, say, a company produced a patented product and then Facebook produced a very similar product using React. If that company then sued Facebook over the similar product (because the company had already patented it), Facebook could counter-sue, because of the React code used in the product. Litigation, however unlikely, caused businesses such as Apache and WordPress to remove React from their stack.
However, a turn around from Facebook (as of September 22, 2017) means that React is now switching over to MIT Licensing too - they don’t want big businesses leaving the project behind, after all. React 16 will now be available under MIT Licensing.
How to convert a React + Redux Preact application to Preact
In this example we will show you how to convert an existing React + Redux application to Preact without changing any code. You’ll then be able to continue on with Preact development.
We will take the official TodoMVC from Redux examples.
Let’s download the directory from GitHub:
curl https://codeload.github.com/reactjs/redux/tar.gz/master | tar -xz --strip=2 redux-master/examples/todomvc
and install all dependencies:
Since this project uses Create React App we need to use eject to have access to the Webpack config file. We can do that by running the command:
npm run eject
To ensure the application works fine, run it to check:
npm run start
Replacing React with Preact
Let’s start by trimming our `package.json` file down by removing `React`:
"react": "^15.5.0", "react-dom": "^15.5.0",
Now go back to your terminal and install Preact:
npm prune npm i -S preact preact-compat
Then open `config/webpack.config.dev.js` and add:
"react": "preact-compat", "react-dom": "preact-compat"
to the `resolve.alias` section. Repeat this step for the `config/webpack.config.prod.js` file.
This will basically import `preact` and `preact-compat` wherever you import `react` or `react-dom` in your code.
After that try to run the app again:
npm run start
You should see the same app working. We replaced `react` with `preact` and the app works the same as before. Easy like that!