Try React 18 with Vite, Typescript and Vercel
What's New In React 18?
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"
- 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
- Yarn (npm install yarn -g)
Run this command to create your new Vite 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
@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/ ready in 174ms.
And that's it! We have React 18 up and running with Typescript in less than 1 second! Ready to rock.
Deploy to Vercel
First, we need to build this project:
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:
- 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