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.
Top comments (2)
Doesn't work when the app changes URL and you refresh..
You need to set your ui routes in the vite config file to index.html then it will work.