What is Preact?
Preact is a Javascript library, although similar to React, but tiny. At the moment of writing, the main Preact library is around 4Kb. This is small enough that it’s possible to add React-like features to web pages in barely more code than is required to write native JavaScript.
Preact is not React. It is a separate library, but it is designed to be as close to React as possible while much smaller. Preact lets you choose how to use it: a small JavaScript library included in a web page (the no tools approach) or as a full-blown JavaScript application.
Why use Preact over React?
React applications can be large. There are times when you might wish to construct an app with React-like attributes, however, without needing to download a massive amount of JavaScript code.
If you want React-features but don’t want to pay the expense of a React-size JavaScript bundle, you might prefer to consider using Preact. However, it does have a downside. React’s virtual DOM requires a lot of code to keep it up to date. It needs to manage an entire synthetic event model, which parallels the one in the browser.
In this article, we will build a To-do app using Preact with Full Crud Functionality.
Live demo
Prerequisites
Sequel to the preceding, we should possess a basic knowledge of JavaScript and Preact to aid easy comprehension of the steps to be followed in this article.
If you are new to Preact, consider reading it’s documentation first.
Step 1 – Setting up the Preact project
Now let’s start by installing Preact CLI into our machine.
We will Now use the Preact CLI to build a simple application. To do that open up your terminal and type the following:
After installation, move into the folder using the cd testapp
and run the application by executing following command:
Your application will be live at localhost:8090
like below:
Let’s get started by adding typescript support, Add the following configuration to your tsconfig.json
to transpile JSX to Preact-compatible JavaScript:
and Rename your .jsx
files to .tsx
for TypeScript to correctly parse your JSX.
Step 2 – Creating the required components
Let’s get started by creating directories, files and initializing the project.
to create the required components, execute the following commands in the terminal:
Now open up CrudItem/index.tsx
and add the following code:
In the code snippet above, we are importing FunctionalComponent, h, & Fragment from Preact. Functional components are plain functions that receive props as the first argument, The code snippet above will be responsible for actions on our todo items.
update the CrudItem/style.scss
with the following:
similarly open up EDitItem/index.tsx
and add the following code:
similarly, Here we are also receiving props as the first argument, after that, we are defining a variable EditedTodoItem
with the functional component which will be responsible for adding and editing to-do item.
update the EditItem/style.scss
with the following:
Now update the src\components\header
file with the following code:
the code snippet above is the header for our Preact crud application. after that update the src\components\header\style.scss
with the following:
Now open \src\components\app.tsx
and update the code with following:
next, we will create a file .tsx
in \src\components
folder to add global state management in our app. execute the following command,
and add the following code to it:
As we can see in the code snippet above we have imported CreateContext
method which allows us to pass a value to a child deep down the tree without having to pass it through every component in-between via props.
Step 3 – Working with Routes
to create the required Routes, execute the following commands in terminal:
Now open up Listpage/index.tsx
and add the following code:
the default theme comes with Preact router preloaded you can learn more about Preact Router here.
update the ListPage/style.scss
with the following:
update the routes\home\index.tsx
with the following:
and update routes\home\style.scss
with the following:
Step – 4 Run build the app
the size of the Preact application in dev mode is over 300Kb. That’s pretty large, To see the real power of Preact, stop the dev server and then run the build
script:
Conclusion
Preact is a remarkable project. Despite working in a very different way to React, it provides virtually the same power, at a fraction of the size. And the fact that it can be used for anything between the lowliest inline code to a full-blown SPA means it is well worth considering if code-size is critical to your project.
I hope you learned a few things about Preact. Every article can be made better, so please leave your suggestions and contributions in the comments below. If you have questions about any of the steps, please do also ask in the comments section below.
You can Checkout Source Code on Github