React is the most widely used frontend framework in the world and it's using the same APIs that you're using when it creates DOM nodes.
In fact, [here's where that happens in the React source code](https://github.com/facebook/react/blob/fb10a2c66a923d218471b535fdaf0dbc530417ee/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js#L480) at the time of this writing.React abstracts away the imperative browser API from you to give you a much more declarative API to work with.
Learn more about the difference between those two concepts here: [Imperative vs Declarative Programming](https://ui.dev/imperative-vs-declarative-programming/)One important thing to know about React is that it supports multiple platforms (for example, native mobile, native desktop, web, and even terminal and VR). Each of these platforms has its own code necessary for interacting with that platform, and then there's shared code between the platforms.
With that in mind, you need two JavaScript files to write React applications for the web:
- React: responsible for creating React elements (kinda like
document.createElement()) - ReactDOM: responsible for rendering React elements to the DOM (kinda like
rootElement.append())
You can learn more about this in the react docs.
We'll also be loading these files into our application from the ./public
directory. This works great for our purposes of keeping this as simple as
possible so you can learn React and not get distracted by a bunch of tools
(don't worry, those will come later).
Finally, from now on, as you save your work, the browser will reload
automatically thanks to the epic_ws.js file we'll be including at the top of
the index.html file. You're welcome 😊.