DEV Community

loading...
Cover image for Try React 18 with Vite, Typescript and Vercel

Try React 18 with Vite, Typescript and Vercel

Duc Ng
JS enthusiast / 17y tinkering with screens & code.
・2 min read

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:

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
Enter fullscreen mode Exit fullscreen mode

Install the latest React 18 alpha version:

yarn add react@alpha react-dom@alpha
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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

Links

Discussion (0)