DEV Community

Cover image for #1 Getting started with Preact - Preact Series
Karthikeyan
Karthikeyan

Posted on β€’ Originally published at karthi.me

5 3

#1 Getting started with Preact - Preact Series

This is going to be three part tutorial series. In the first part , I will be explaining about Preact and how to get started.

We will be building a preact app which will make use of API to get the images from unsplash and renders the same on the browser.

Preact:

Preact is a fast 3kb javascript library, alternative to React with same ES6 API. Highly optimized diff implementation makes it one of the fastest Virtual DOM libraries.

Since Preact only includes the subset of React's features, it makes the size of library smaller.

With regards to the browser support, all mordern browsers are supported including IE 11.

Advantages :

  1. Lightweight , faster and smaller when compared to React. You can also run performance tests in your browser via this link

  2. Official Preact's CLI makes it easier to create projects without babel or webpack configuration.

  3. We can easily migrate from React to Preact with preact/compat aliasing. Below is the link to preactjs documentation about switching from react.

Switching from React to Preact

What is missing in Preact ? :

  1. Proptypes validation.

  2. Preact uses browser's native addEventlistener for event handling ignoring the synthetic events.

Note:

Synthetic events are wrapper around the browser's native event which forms React event system.

Link to Synthetic events

Let's create our preact app.

giphy

Installing Preact in local

Run the below command in your terminal to install preact-cli

npm install -g preact-cli
Enter fullscreen mode Exit fullscreen mode

image.png

You should be able to access the preact command after the successful installation of the cli.

Run the below command to create a new preact create project

preact create default preact-unsplash
Enter fullscreen mode Exit fullscreen mode

The above command will create a preact project named preact-unsplash with default settings

image.png

Now run yarn dev and visit http://0.0.0.0:8080 the link in your browser.

image.png

πŸŽ‰ Nicely done. Thanks for following along. Let me know in the comments if I have missed something.

Stay tuned for part #2 of the tutorial series.

Happy Coding πŸ™‚

giphy

Resources:

  1. Official documentation of Preact
  2. Introduction to Preact

Heroku

Built for developers, by developers.

Whether you're building a simple prototype or a business-critical product, Heroku's fully-managed platform gives you the simplest path to delivering apps quickly β€” using the tools and languages you already love!

Learn More

Top comments (0)

Image of Stellar post

How a Hackathon Win Led to My Startup Getting Funded

In this episode, you'll see:

  • The hackathon wins that sparked the journey.
  • The moment JosΓ© and Joseph decided to go all-in.
  • Building a working prototype on Stellar.
  • Using the PassKeys feature of Soroban.
  • Getting funded via the Stellar Community Fund.

Watch the video

πŸ‘‹ Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay