feat(templates): update react instantsearch web templates to react 18 (#576)

Author: dhayab

e2e/__snapshots__/templates.test.js.snap

@@ -5821,11 +5821,11 @@ body {
 
 exports[`Templates React InstantSearch File content: src/index.js 1`] = `
 "import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import './index.css';
 import App from './App';
 
-ReactDOM.render(<App />, document.getElementById('root'));"
+createRoot(document.getElementById('root')).render(<App />);"
 `;
 
 exports[`Templates React InstantSearch Folder structure: contains the right files 1`] = `
@@ -6037,7 +6037,8 @@ em {
 `;
 
 exports[`Templates React InstantSearch Hooks File content: src/App.tsx 1`] = `
-"import algoliasearch from 'algoliasearch/lite';
+"import React from 'react';
+import algoliasearch from 'algoliasearch/lite';
 import {
   Configure,
   DynamicWidgets,
@@ -6124,7 +6125,9 @@ function Hit({ hit }: HitProps) {
 `;
 
 exports[`Templates React InstantSearch Hooks File content: src/Panel.tsx 1`] = `
-"type PanelProps = React.PropsWithChildren<{
+"import React from 'react';
+
+type PanelProps = React.PropsWithChildren<{
   header: string;
 }>;
 
@@ -6141,11 +6144,12 @@ export function Panel({ header, children }: PanelProps) {
 `;
 
 exports[`Templates React InstantSearch Hooks File content: src/index.tsx 1`] = `
-"import ReactDOM from 'react-dom';
+"import React from 'react';
+import { createRoot } from 'react-dom/client';
 
 import { App } from './App';
 
-ReactDOM.render(<App />, document.getElementById('root'));"
+createRoot(document.getElementById('root')!).render(<App />);"
 `;
 
 exports[`Templates React InstantSearch Hooks Folder structure: contains the right files 1`] = `

src/templates/React InstantSearch Hooks/package.json

@@ -8,13 +8,15 @@
   },
   "dependencies": {
     "algoliasearch": "4",
-    "instantsearch.js": "4.40.5",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "instantsearch.js": "4.43.1",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
     "react-instantsearch-hooks-web": "{{libraryVersion}}"
   },
   "devDependencies": {
-    "@types/react": "17.0.45",
-    "parcel": "2.5.0"
+    "@types/react": "18.0.15",
+    "@types/react-dom": "18.0.6",
+    "parcel": "2.5.0",
+    "typescript": "4.7.4"
   }
 }

src/templates/React InstantSearch Hooks/src/App.tsx.hbs

@@ -1,3 +1,4 @@
+import React from 'react';
 import algoliasearch from 'algoliasearch/lite';
 import {
   Configure,

src/templates/React InstantSearch Hooks/src/Panel.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 type PanelProps = React.PropsWithChildren<{
   header: string;
 }>;

src/templates/React InstantSearch Hooks/src/index.tsx

@@ -1,5 +1,6 @@
-import ReactDOM from 'react-dom';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
 
 import { App } from './App';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+createRoot(document.getElementById('root')!).render(<App />);

src/templates/React InstantSearch/package.json

@@ -10,8 +10,8 @@
   },
   "dependencies": {
     "algoliasearch": "4",
-    "react": "16.12.0",
-    "react-dom": "16.12.0",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
     "react-instantsearch-dom": "{{libraryVersion}}",
     "react-scripts": "2.1.1"
   },

src/templates/React InstantSearch/src/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import './index.css';
 import App from './App';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+createRoot(document.getElementById('root')).render(<App />);