Try React 18 with Vite, Typescript and Vercel

This content originally appeared on DEV Community and was authored by Duc Ng

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:

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

• What’s coming in React 18 - https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html
• 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.

This content originally appeared on DEV Community and was authored by Duc Ng

Print Share Comment Cite Upload Translate Updates

APA

Duc Ng | Sciencx (2021-06-17T00:45:00+00:00) Try React 18 with Vite, Typescript and Vercel. Retrieved from https://www.scien.cx/2021/06/17/try-react-18-with-vite-typescript-and-vercel/

MLA

" » Try React 18 with Vite, Typescript and Vercel." Duc Ng | Sciencx - Thursday June 17, 2021, https://www.scien.cx/2021/06/17/try-react-18-with-vite-typescript-and-vercel/

HARVARD

Duc Ng | Sciencx Thursday June 17, 2021 » Try React 18 with Vite, Typescript and Vercel., viewed ,<https://www.scien.cx/2021/06/17/try-react-18-with-vite-typescript-and-vercel/>

VANCOUVER

Duc Ng | Sciencx - » Try React 18 with Vite, Typescript and Vercel. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/06/17/try-react-18-with-vite-typescript-and-vercel/

CHICAGO

" » Try React 18 with Vite, Typescript and Vercel." Duc Ng | Sciencx - Accessed . https://www.scien.cx/2021/06/17/try-react-18-with-vite-typescript-and-vercel/

IEEE

" » Try React 18 with Vite, Typescript and Vercel." Duc Ng | Sciencx [Online]. Available: https://www.scien.cx/2021/06/17/try-react-18-with-vite-typescript-and-vercel/. [Accessed: ]

rf:citation

» Try React 18 with Vite, Typescript and Vercel | Duc Ng | Sciencx | https://www.scien.cx/2021/06/17/try-react-18-with-vite-typescript-and-vercel/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.