React 18 is now available on npm!
This React App is created using of the official CRA template by default with version 18. For more information you can visit:
React 18 will include out-of-the-box improvements:
For client apps, upgrading to React 18 is straightforward:
Upgrade to the latest React 18 release Switch to the New root API
// Before
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);
// After
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App tab="home" />);''
Note: React 18 is a major version of React. As any major version will have, there are semantic changes that may impact your app
If the app is significantly broken after switching to createRoot
, see if you have <StrictMode>
on. If you do, try removing it and see if that fixes it. If it does, a library you're using (or, less likely, you app code) is not compatible with Strict Effects.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify