JenniferFuBook

const MyTextInput = React.forwardRef((props, ref) => {
  console.log(props);
  console.log(ref);
  return (
    <input ref={ref} {...props}/>
  );
});

const App = () => {
  const [value, setValue] = React.useState('highlight and copy me');

JenniferFuBook

const MyTextInput = React.forwardRef((props, ref) => {
  const childRef = React.useRef();
  
  React.useImperativeHandle(ref, () => ({
    select: () => {
      childRef.current.select();
      console.log('Special select is called');
    },
    log: () => {
      console.log('log is invoked inside MyTextInput');

JenniferFuBook

const useMyName = initialName => `My name is ${initialName}.`;

const App = () => {
  const myHook = useMyName('Larry');
  
  return (
    <div>{myHook}</div>
  );
};

JenniferFuBook

const useMyName = initialName => {
  const [currentName, setCurrentName] = React.useState(initialName);
  
  return {
    setName: newName => setCurrentName(newName),
    message: `My name is ${currentName}.`
  };
}

const App = () => {

JenniferFuBook

const useMyName = initialName => {
  const [currentName, setCurrentName] = React.useState(initialName);
  
  return {
    setName: newName => setCurrentName(newName),
    message: `My name is ${currentName}.`
  };
}

const App = () => {

JenniferFuBook

const useMyName = initialName => {
  const [currentName, setCurrentName] = React.useState(initialName);
  
  return {
    setName: newName => setCurrentName(newName),
    message: `My name is ${currentName}.`,
    display: ['Jack', 'Larry', 'Tom'].map(item =>[
      <label key={item}>
        <input
          type="radio"

JenniferFuBook

const useMyName = initialName => {
  const [currentName, setCurrentName] = React.useState(initialName);
  
  return [
    newName => setCurrentName(newName),
    `My name is ${currentName}.`,
    ['Jack', 'Larry', 'Tom'].map(item =>[
      <label key={item}>
        <input
          type="radio"

JenniferFuBook

module.exports = {
  webpack: (config, env) => {
    config.optimization.runtimeChunk = false;
    config.optimization.splitChunks = {
      cacheGroups: {
        default: false,
      },
    };
    return config;
  },

JenniferFuBook

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",

JenniferFuBook

import React from 'react';

class MicroFrontend extends React.Component {
  componentDidMount() {
    const { name, host, document } = this.props;
    const scriptId = `micro-frontend-script-${name}`;

    if (document.getElementById(scriptId)) {
      this.renderMicroFrontend();
      return;