updated React templates to use react 18 new root api

[spaceFitzpa]

• Updated react and react-with-storybook example and test files to use React 18's new root API
• This gets rid of the ReactDOM.render is no longer supported in React 18 error.

[spaceFitzpa]

Are the int & Deduplicate deps on node 10.x and ubuntu-latest and Test on Node 12.x and ubuntu-latest checks done automatically or do I need to do something more here. I updated and ran tests locally and every thing is passing.

[azigler]

This did not work for me, I got stuck with a jest error when trying to run tests after updating to React 18. Instead, I made these changes to successfully update everything to React 18:

/package.json:

"devDependencies": {
    "@babel/core": "^7.18.13",
    "@rollup/plugin-image": "^2.1.1",
    "@rollup/plugin-replace": "^4.0.0",
    "@rollup/plugin-url": "^7.0.0",
    "@size-limit/preset-small-lib": "^8.0.1",
    "@storybook/addon-essentials": "^6.5.10",
    "@storybook/addon-info": "^5.3.21",
    "@storybook/addon-links": "^6.5.10",
    "@storybook/addons": "^6.5.10",
    "@storybook/react": "^6.5.10",
    "@svgr/rollup": "^6.3.1",
    "@types/react": "^18.0.18",
    "@types/react-dom": "^18.0.6",
    "babel-loader": "^8.2.5",
    "eslint-plugin-jsx-a11y": "^6.6.1",
    "husky": "^8.0.1",
    "jest-transform-stub": "^2.0.0",
    "pinst": "^3.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-is": "^18.2.0",
    "size-limit": "^8.0.1",
    "tsdx": "^0.14.1",
    "tslib": "^2.4.0",
    "typescript": "^4.8.2"
  }

jest config:

"jest": {
    "moduleNameMapper": {
      "^.+.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2|svg|mdx)$": "jest-transform-stub"
    },
    "globals": {
      "IS_REACT_ACT_ENVIRONMENT": true
    }
  }

/example/package.json: You need to put a $ in front of the alias because it'll conflict with react-dom/client when trying to using React 18. If you remove the alias entirely, hotreloading stops working. You can use the latest parcel if you include parcel-bundler. The dist folder fills up over time, so I added a soft check to delete it.

{
  "name": "example",
  "version": "1.0.0",
  "license": "MIT",
  "scripts": {
    "start": "parcel index.html",
    "build": "rm -r ./dist | parcel build index.html"
  },
  "alias": {
    "$react-dom": "../node_modules/react-dom/profiling"
  },
  "devDependencies": {
    "parcel": "^2.7.0",
    "parcel-bundler": "^1.12.5"
  }
}

/example/index.tsx:

import * as React from "react"
import { createRoot } from "react-dom/client"
import { Thing } from "../."

const App = () => {
  return (
    <div>
      <Thing />
    </div>
  )
}

const container = document.getElementById("root")
const root = createRoot(container!)
root.render(<App />)

blah.test.tsx: now using React 18. We're using the act method to trigger the jest render to avoid a null error.

import React from "react"
import { createRoot } from "react-dom/client"
import { act } from "react-dom/test-utils"
import { Default as Thing } from "../stories/Thing.stories"

describe("Thing", () => {
  it("renders without crashing", () => {
    const container = document.createElement("div")
    const root = createRoot(container!)
    act(() => root.render(<Thing />))
  })
})