Preact Setup: A Beginner's Guide
Tags: preact, javascript, tutorial, beginners
Published: 2024-04-23 13:39:23

<p>In the <a href="https://dev.to/rezaghorbani/preact-vs-react-a-comparative-guide-mbg" target="_blank" rel="noopener">previous post</a>, we explored Preact,
    compared its features with React, and examined the pros and cons of each. Now, let&rsquo;s get started with Preact's
    command-line to create our first project.</p>
<h2>Creating a New Preact Application</h2>
<p>It's very straightforward to set up your Preact project, and I'll show you exactly how in the following. However,
    before that, I think it's essential to understand how frameworks like Angular, Vue, React, and Preact compile and
    build web applications.</p>
<h3>How Web Development Frameworks Function?</h3>
<p>Web frameworks have their own syntax and code structure. For example, React uses <strong>JSX syntax</strong> which
    allows you to write HTML and even CSS within your JavaScript code. Browsers cannot interpret this natively. So we
    need a tool to translate and compile our code into formats that browsers can read and execute, which are HTML, CSS,
    and JavaScript. Powerful tools for this include <strong>Webpack and Vite (which are more popular)</strong>, as well
    as Parcel and Rollup. These tools are commonly referred to as <strong>module bundlers</strong>.</p>
<figure class="image"><img src="https://rezaghorbani.dev/img/blog/module-builder-workflow.webp" alt="Module bundlers workflow"><figcaption>Module bundlers workflow</figcaption>
</figure>
<p>Module bundlers allow us to break our application into separate, independent components/modules. They use appropriate
    compilers for each language and bundle the project into one or multiple files depending on our needs. Using a local
    development server, they can run our project, detect changes to automatically refresh the result, and help with
    debugging and developing our applications.</p>
<p>Preact, just like React, can be used with a variety of these module bundlers.</p>
<h3>Preact and Vite: The Ultimate Duo</h3>
<p>By default, Preact uses Vite to set up a development environment. I'll explain more about Vite in another post, but
    for now, all you need to know is that Vite is a fast build tool designed to enhance the modern web development
    experience. It uses <strong>native ES modules (ESM)</strong> and provides features like <strong>Hot Module
        Replacement (HMR)</strong>, which allows you to see instant updates in the browser without a full page refresh.
</p>
<figure class="image"><img src="https://rezaghorbani.dev/img/blog/preact-vite.webp" alt="The fast combination of Preact and Vite"><figcaption>The fast combination of Preact and Vite</figcaption>
</figure>
<p>&nbsp;</p>
<h2>Initializing Preact Using Vite</h2>
<p>We will use Preact's default initializer, <code>create-preact</code>, which is the <strong>command-line interface
        (CLI)</strong> to scaffold our Preact application using Vite as the build tool.</p>
<p>Open a terminal window on your device and navigate to the folder where you want to set up your project. Now run this
    command:</p>
<pre class="language-bash"><code>npm init preact</code></pre>
<p>Or if you prefer <code>yarn</code>:</p>
<pre class="language-bash"><code>yarn create preact</code></pre>
<p>This command will install create-preact if it is not already installed on your device. You will then be prompted for
    the app name and some initial configuration options:</p>
<figure class="image"><img src="https://rezaghorbani.dev/img/blog/preact-cli.webp" alt="Initializing Preact using create-preact CLI"><figcaption>Initializing Preact using create-preact CLI</figcaption>
</figure>
<p>Now let's explian some points in that configuration:</p>
<ul>
    <li><strong>Server-Side Generation (SSG)</strong>: You can use server-side generation (SSG) alongside Preact's
        client-side rendering features. SSG allows desired content to be pre-rendered on the server, speeding up load
        times and improving <strong>SEO (search engine optimization)</strong>.<br>I'll allocate a post to explain how to
        implement SSG in both preact and react.</li>
    <li><strong>ESLint</strong>:&nbsp;is a tool that performs static code analysis on your JavaScript/Typescript code.
        It checks for typical issues like syntax errors, formatting issues, style violations, and potential bugs.</li>
</ul>
<h2>Seamless React Compatibility</h2>
<p>The good news is that the <code>preact/compat</code> alias features have already been applied to our application
    through the initialization process. Therefore, no additional configuration is needed in our project to benefit
    Preact's compatibility with the React ecosystem. So for instance, you can
    <code>import {useState} from 'react'</code>.As mentioned in the <a href="https://dev.to/rezaghorbani/preact-vs-react-a-comparative-guide-mbg" target="_blank">previous post</a>, this seamless compatibility means migrating the codebase to React would be
    straightforward if ever needed in the future.</p>
<p>We now have our basic Preact project initialized and ready to start developing!</p>
<h2>Final Thoughts</h2>
<p>I chose not to cover creating a Preact project based on Webpack in order to keep this post short and straightforward.
    Additionally, the Preact development team recommends using Vite instead of webpack. However, if you prefer Webpack,
    you can use <code>preact-cli</code>. This also gives you access to more <a
        href="https://github.com/preactjs-templates" target="_blank" rel="noopener">templates and boilerplates</a> for
    starting your project.</p>
<p>In my next post, I'll explain how to migrate your current React project to Preact, whether it is built with Webpack
    or Vite.</p>
<p>Thank you for your time.✌️</p>

<p>
<blockquote>
    This article was originally published on <a href="https://rezaghorbani.dev/blog" target="_blank">my blog</a>. Please
    feel free to explore more of my writings.
</blockquote>
</p>