feat: support React 18 (#763)

Author: adamstankiewicz

example/AuthenticatedPage.jsx

@@ -1,7 +1,9 @@
 import React, { useContext } from 'react';
 import { Link } from 'react-router-dom';
 
+/* eslint-disable import/no-extraneous-dependencies */
 import { AppContext } from '@edx/frontend-platform/react';
+/* eslint-enable import/no-extraneous-dependencies */
 
 export default function AuthenticatedPage() {
   const { authenticatedUser, config } = useContext(AppContext);

example/ExamplePage.jsx

@@ -1,10 +1,12 @@
-import React, { Component } from 'react';
+import { useContext, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+/* eslint-disable import/no-extraneous-dependencies */
+import { injectIntl, useIntl } from '@edx/frontend-platform/i18n';
 import { logInfo } from '@edx/frontend-platform/logging';
 import { AppContext } from '@edx/frontend-platform/react';
 import { ensureConfig, mergeConfig, getConfig } from '@edx/frontend-platform';
+/* eslint-enable import/no-extraneous-dependencies */
 import messages from './messages';
 
 mergeConfig({
@@ -16,48 +18,41 @@ ensureConfig([
   'JS_FILE_VAR',
 ], 'ExamplePage');
 
-class ExamplePage extends Component {
-  constructor(props, context) {
-    super(props, context);
-
-    logInfo('The example page can log info, which means logging is configured correctly.');
-  }
-
-  renderAuthenticatedUser() {
-    if (this.context.authenticatedUser === null) {
-      return null;
-    }
-    return (
-      <div>
-        <p>Authenticated Username: <strong>{this.context.authenticatedUser.username}</strong></p>
-        <p>
-          Authenticated user&apos;s name:
-          <strong>{this.context.authenticatedUser.name}</strong>
-          (Only available if user account has been fetched)
-        </p>
-      </div>
-    );
-  }
-
-  render() {
-    return (
-      <div>
-        <h1>{this.context.config.SITE_NAME} example page.</h1>
-        <p>{this.props.intl.formatMessage(messages['example.message'])}</p>
-        {this.renderAuthenticatedUser()}
-        <p>EXAMPLE_VAR env var came through: <strong>{getConfig().EXAMPLE_VAR}</strong></p>
-        <p>JS_FILE_VAR var came through: <strong>{getConfig().JS_FILE_VAR}</strong></p>
-        <p>Visit <Link to="/authenticated">authenticated page</Link>.</p>
-        <p>Visit <Link to="/error_example">error page</Link>.</p>
-      </div>
-    );
+function AuthenticatedUser() {
+  const { authenticatedUser } = useContext(AppContext);
+  if (authenticatedUser === null) {
+    return null;
   }
+  return (
+    <div>
+      <p>Authenticated Username: <strong>{authenticatedUser.username}</strong></p>
+      <p>
+        Authenticated user&apos;s name:
+        <strong>{authenticatedUser.name}</strong>
+        (Only available if user account has been fetched)
+      </p>
+    </div>
+  );
 }
 
-ExamplePage.contextType = AppContext;
+function ExamplePage() {
+  const intl = useIntl();
 
-ExamplePage.propTypes = {
-  intl: intlShape.isRequired,
-};
+  useEffect(() => {
+    logInfo('The example page can log info, which means logging is configured correctly.');
+  }, []);
+
+  return (
+    <div>
+      <h1>{getConfig().SITE_NAME} example page.</h1>
+      <p>{intl.formatMessage(messages['example.message'])}</p>
+      <AuthenticatedUser />
+      <p>EXAMPLE_VAR env var came through: <strong>{getConfig().EXAMPLE_VAR}</strong></p>
+      <p>JS_FILE_VAR var came through: <strong>{getConfig().JS_FILE_VAR}</strong></p>
+      <p>Visit <Link to="/authenticated">authenticated page</Link>.</p>
+      <p>Visit <Link to="/error_example">error page</Link>.</p>
+    </div>
+  );
+}
 
 export default injectIntl(ExamplePage);

example/index.jsx

@@ -1,5 +1,6 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+/* eslint-disable import/no-extraneous-dependencies */
 import {
   AppProvider,
   AuthenticatedPageRoute,
@@ -8,30 +9,35 @@ import {
 } from '@edx/frontend-platform/react';
 import { APP_INIT_ERROR, APP_READY, initialize } from '@edx/frontend-platform';
 import { subscribe } from '@edx/frontend-platform/pubSub';
+/* eslint-enable import/no-extraneous-dependencies */
 import { Routes, Route } from 'react-router-dom';
 
 import './index.scss';
 import ExamplePage from './ExamplePage';
 import AuthenticatedPage from './AuthenticatedPage';
 
+const container = document.getElementById('root');
+const root = createRoot(container);
+
 subscribe(APP_READY, () => {
-  ReactDOM.render(
-    <AppProvider>
-      <Routes>
-        <Route path="/" element={<PageWrap><ExamplePage /></PageWrap>} />
-        <Route
-          path="/error_example"
-          element={<PageWrap><ErrorPage message="Test error message" /></PageWrap>}
-        />
-        <Route path="/authenticated" element={<AuthenticatedPageRoute><AuthenticatedPage /></AuthenticatedPageRoute>} />
-      </Routes>
-    </AppProvider>,
-    document.getElementById('root'),
+  root.render(
+    <StrictMode>
+      <AppProvider>
+        <Routes>
+          <Route path="/" element={<PageWrap><ExamplePage /></PageWrap>} />
+          <Route
+            path="/error_example"
+            element={<PageWrap><ErrorPage message="Test error message" /></PageWrap>}
+          />
+          <Route path="/authenticated" element={<AuthenticatedPageRoute><AuthenticatedPage /></AuthenticatedPageRoute>} />
+        </Routes>
+      </AppProvider>
+    </StrictMode>,
   );
 });
 
 subscribe(APP_INIT_ERROR, (error) => {
-  ReactDOM.render(<ErrorPage message={error.message} />, document.getElementById('root'));
+  root.render(<ErrorPage message={error.message} />);
 });
 
 initialize({

example/messages.js

@@ -1,4 +1,6 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import { defineMessages } from '@edx/frontend-platform/i18n';
+/* eslint-enable import/no-extraneous-dependencies */
 
 const messages = defineMessages({
   'example.message': {

jest.config.js

@@ -4,5 +4,8 @@ module.exports = createConfig('jest', {
   setupFilesAfterEnv: [
     '<rootDir>/src/setupTest.js',
   ],
+  modulePathIgnorePatterns: [
+    '<rootDir>/dist/',
+  ],
   testTimeout: 20000,
 });