Skip to content

Commit

Permalink
Update templates to use React 18 createRoot (#12220)
Browse files Browse the repository at this point in the history
  • Loading branch information
kyletsang authored Apr 8, 2022
1 parent 213b6a2 commit 2eef1d0
Show file tree
Hide file tree
Showing 5 changed files with 81 additions and 17 deletions.
72 changes: 67 additions & 5 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions packages/cra-template-typescript/template.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
"@testing-library/user-event": "^13.2.1",
"@types/jest": "^27.0.1",
"@types/node": "^16.7.13",
"@types/react": "^17.0.20",
"@types/react-dom": "^17.0.9",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"typescript": "^4.4.2",
"web-vitals": "^2.1.0"
},
Expand Down
10 changes: 6 additions & 4 deletions packages/cra-template-typescript/template/src/index.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import React from 'react';
import ReactDOM from 'react-dom';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
</React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
Expand Down
8 changes: 4 additions & 4 deletions packages/cra-template/template/src/index.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import React from 'react';
import ReactDOM from 'react-dom';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
</React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
Expand Down
4 changes: 2 additions & 2 deletions packages/react-scripts/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -77,8 +77,8 @@
"workbox-webpack-plugin": "^6.4.1"
},
"devDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
"react": "^18.0.0",
"react-dom": "^18.0.0"
},
"optionalDependencies": {
"fsevents": "^2.3.2"
Expand Down

0 comments on commit 2eef1d0

Please sign in to comment.