Try React 18 RC with TypeScript
December 13, 2021
reacttypescript
React 18 release candidate has just been released!
Here’s how we can try this out with TypeScript and Create React App:
First, create an app, as usual, using Create React App:
npx create-react-app app --template typescript
Then update the version of React:
npm install react@rc react-dom@rc --force
The --force
flag gets around a dependency issue with React Testing Library at the moment.
- In
index.tsx
, replace the following lines:
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
with:
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLDivElement
);
root.render(<App />);
This will give type error:
Property 'createRoot' does not exist on type 'typeof import("/...")'
… which can be resolved by adding the following to tsconfig.json
:
{
"compilerOptions": {
...,
"types": ["react/next", "react-dom/next"] },
...
}
That’s it; you can now start playing with React 18! 😊
Did you find this post useful?
Let me know by sharing it on Twitter.If you to learn more about using TypeScript with React, you may find my course useful:
Using TypeScript with React
You might find some of my other posts interesting: