If you prefer to watch the video …

Be sure to order the official Corner code Youtube channel adds videos.

Table of contents

  1. Introduction
  2. React installation and installation using Snowpack
  3. Folder structure
  4. Code overview
  5. Running the application
  6. Deployment process at Vercel
  7. Conclusion

Introduction

Earlier this month, the React team released some updates on the release of React 18. These updates include the following:

  • React 18, the next major version, has been launched.
  • A working group has been set up to prepare the Community for the gradual introduction of new features.
  • An Alpha version has already been released for library authors to try and provide valuable feedback.

The purpose of this tutorial is to configure the React 18 Alpha version Snow pack, a lightning-fast front-end assembly tool designed for the modern network. Then we move on Vercel.

React 18 Alpha installation and installation with Snowpack

First, you have to have Node.js installed, once it is done, you can now install Snow bag. You can use the command below to install Snowpack.

npm install snowpack

After installation, you can go to the directory where you want to put the new project.

Run the following command on your terminal to create a new directory named react-snowpack. This automatically creates a minimal Boiler Plater model.

npx create-snowpack-app react-snowpack --template @snowpack/app-template-minimal

You can now move to the new directory with the following command:

cd react-snowpack

Once inside this directory, we can finally install the React 18 Alpha version by running the command below.

npm i react@alpha react-dom@alpha

Once this is done, you can check your package.json file to confirm React 18 Alpha has been installed. It should look something like the one we have below.

  "dependencies": {
    "react": "^18.0.0-alpha-cb8afda18-20210708",
    "react-dom": "^18.0.0-alpha-cb8afda18-20210708"
  }
}

Folder structure

React uses model languages ​​called JSX. JSX means JavaScript XML. It has an embedded entry that looks like HTML which changes JavaScript during the drive.

The first step towards a folder structure is to rename the folder index.js file a jsx such an extension index.jsx. Doing this allows Snow bag know we have an ongoing React project.

After all, we should have the folder structure below.

> public
  > index.css
  > index.html
> src
  > App.jsx
  > index.jsx
.gitignore
 package-lock.json
 package.json
 snowpack.config.mjs

Code overview

The code change takes place in four files (index.html, App.jsx, index.jsx and snowpack.config.mjs) before launching the application and installing it on Vercel.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Starter Snowpack App" />
  <link rel="stylesheet" type="text/css" href="https://dzone.com/index.css" />
  <title>Starter Snowpack App</title>
</head>

<body>
  <div id="root"></div>
  <script type="module" src="/dist/index.js"></script>
</body>

</html>

There are three things to consider in the Index.html code:

  • id Is be called just to which we refer in the index.jsx file.
  • In the command tag we have a type called module so that the snowshoe knows that we are using ES6 syntax.
  • Also in the command tag we have an src attribute that indicates the path to our deployment directory that is specified snowpack.config.mjs file.

App.jsx

import React from "react";

function App() {
  return (
    <div>
      <header>
        <img
          src="https://res.cloudinary.com/dz4tt9omp/image/upload/v1625528354/react.png"
          alt="logo"
        />
        <p>React 18 Alpha Setup Deployed on Vercel with SnowPack</p>
      </header>
    </div>
  );
}
export default App;

Above app.jsx file, we create a simple React boiler model with functional component.

index.jsx

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

const rootElement = document.getElementById("root");
const root = ReactDOM.createRoot(rootElement);
root.render(<App />);

in index.jsx file, we did three things so we could launch the application.

  • First, we bring React, ReactDOM, and App.jsx file.
  • Then we created a variable to get the id index.html file.
  • Finally, we used a new one createRoot API in React 18 make an application.

snowpack.config.mjs

/** @type {import("snowpack").SnowpackUserConfig } */
export default {
  mount: {
    /* ... */
    public: "https://dzone.com/",
    src: '/dist'
  },
  plugins: [
    /* ... */
  ],
  routes: [
    /* Enable an SPA Fallback in development: */
    // {"match": "routes", "src": ".*", "dest": "/index.html"},
  ],
  optimize: {
    /* Example: Bundle your final build: */
    // "bundle": true,
  },
  packageOptions: {
    /* ... */
  },
  devOptions: {
    /* ... */
  },
  buildOptions: {
    /* ... */
  },
};

Every Snowpack app uses snowpack.config.mjs file for all configurations, such as the deployment process. In this project, we only modify the attachment object by adding public and src keys.

These serve as a pointer to the path where the deployment folder will be built when we execute the build command.

Running the application

Now that all our files have been saved, we can go back to our terminal and execute the boot command npm run start, which produces the page below in the browser.

The running screen of the application in the browser

Now ours Reacts with 18 alpha the application is running successfully.

Deployment process at Vercel

“Vercel allows developers to host websites and web services that are deployed immediately and automatically scaled without configuration.” -Vercel Documentation

The first step towards deployment is to run the command below at the root of the project.

npm run build

This produces a build directory. Indoors build the directory is a dist the folder that contains the code we are pushing Vercel.

Next, we do the following:

1. Install Vercel

To do this, we execute the command npm i -g vercel

2. Log in to Vercel

Once you have installed Vercel globally on your machine. Type vercel at the terminal. This will prompt you to sign in to your account if you haven’t already.

3. Project definition and implementationProject definition and implementation

To summarize the quick question in the picture above, the following questions are asked:

Vercel now builds the application by installing all the process dependencies. When the installation is complete, an inspection link is available for the terminal. This link allows us to use the Vercel control panel to see our installed application.

Application used in the Vercel Dashboard

4. Open the implemented project

You can now visit a recently launched project by clicking the “visit” button on the dashboard shown in the image above.

Opening an implemented project

Conclusion

You can find the code used in your own GitHub account.

.

LEAVE A REPLY

Please enter your comment!
Please enter your name here