I normally use 'npx create react app' but I was just wondering if there is a way to do something like this.

<div id="root"></div>
<script type="text/babel">

    import { useState } from 'react' // you can't do it like this, adding script tag and adding babel and react on the top 

    const TodoList = () => {

        const [todos, setTodos] = useState([]);
        return (
            <h1>Todo App</h1>
        )
    }

    const App = () => {
        return (
         <TodoList/>   
        )
    }

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

</script>