Master React in Webflow - Components

// index.js
import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

const element = document.getElementsByClassName('react')[0];
const root = ReactDOM.createRoot(element);
root.render(<App />);

/* ------------ */
// App.js
import React from 'react';
import HeadingOne from './HeadingOne';
import List from './List';

export default function App() {
    const list = [
        { text: "hello" }
        { text: "goodbye" }
        { text: "wombats" }
    ];

    return (
        <>
            <HeadingOne text="Hello Wombats!" />
            <List list={list} />
        </>
    );
}

/* ------------ */
// HeadingOne.js
import React from 'react';

export default function HeadingOne({ text = "Hello world" }) {
    return <h1>{text}</h1>
}

/* ------------ */
// List.js
import React from 'react';

export default function List({ list = [] }) {
    return (
        <ul>
            {list.map(listItem => <li>{listItem.text}</li>}
        </ul>
    );
}