Try React 18 with Vite, Typescript and Vercel

What's New In React 18?

Please visit https://nnote.io/s/x4od5/react-18-with-vite-and-vercel for the latest updates for this article.

The new version of React - React 18 alpha has just come out. From ReactJS.org:

• There are no significant out-of-the-box breaking changes to component behavior. You can upgrade to React 18 with minimal or no changes to your application code, with a level of effort comparable to a typical major React release"

New Improvements:

• React.lazy - new streaming server renderer support.
• Automatic batching.
• New APIs (like startTransition).
• Article: What’s coming in React 18 - https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html

This tutorial will demonstrate a step-by-step guide to create your project using React 18 alpha, Typescript, Vite and deploy it to Vercel (freemium).

Create a Vite project

Required tools:

• NodeJS
• Yarn (npm install yarn -g)

Run this command to create your new project:
(Vite is a code generator similar to CRA but it takes < 1s to launch dev mode versus > 45s using CRA)

yarn create @vitejs/app my-project --template react-ts
cd my-project

Install the latest React 18 alpha version:

yarn add react@alpha react-dom@alpha

As @types/react doesn't understand the new React 18's APIs or types yet, we need to update "tsconfig.json" file: after "jsx": "react" add:

"types": ["react/next", "react-dom/next"]

Then run the new project:

yarn dev

vite v2.3.7 dev server running at:
  > Local: http://localhost:3000/
  > Network: use `--host` to expose
  ready in 174ms.

And that's it! We have React 18 up and running with Typescript! Ready to rock.

Deploy to Vercel

First, we need to build this project:

yarn build

Then deploy the build (dist) directory to Vercel:

cd dist
npx vercel .

...
✅  Deployed to: https://react-18-ts-vite-app.vercel.app [copied to clipboard] [11s]

Now, visit the link https://react-18-ts-vite-app.vercel.app, we should have the app up and running there:

Links

• Github repository https://github.com/ngduc/react-18-ts-vite-app
• Please visit https://nnote.io/s/x4od5/react-18-with-vite-and-vercel for the latest updates for this article.