Skip to content

JSX in Depth

  1. React.createElement is like document.createElement()
  2. document.append(element) is like ReactDOM.render(reactComponent, document.body)
    1. ReactDOM because React can be rendered in many environments (like React Native)

React 18: createRoot

no more ReactDOM.render

// Before
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);

// After
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(<App tab="home" />);

What JSX is converted into

<MyButton color="blue" shadowSize={2}>
    Click Me
</MyButton>

syntactic sugar for

React.createElement(
    MyButton, // component name
    { color: "blue", shadowSize: 2 }, // props
    "Click Me" // children
);

Dot notation

It can be an object of Components

const MyComponents = {
    DatePicker: function DatePicker(props) {
        return <div>Imagine a {props.color} datepicker here.</div>;
    },
};

function BlueDatePicker() {
    return <MyComponents.DatePicker color="blue" />;
}

or a class Component???


Last update: 2022-09-23