Try React 18 RC with TypeScript

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! 😊

Learn React with TypeScript - 3rd Edition

New

A comprehensive guide to building modern React applications with TypeScript. Learn best practices, advanced patterns, and real-world development techniques.

View on Amazon