Carl Rippon

Building SPAs

Carl Rippon
BlogBooks / CoursesAbout
This site uses cookies. Click here to find out more

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.
Click here to share this post on Twitter

If you to learn more about using TypeScript with React, you may find my course useful:

Using TypeScript with React

Using TypeScript with React
Find out more