So, What is React Anyway?
Now that we’re thinking outside the component, let’s talk about HTML.
JSX and HTML are not the same thing but they are siblings.
React (on the web) takes JSX descriptors and renders them as HTML elements.
HTML is an initialism for HyperText Markup Language. It’s a scripting language baked into every web browser — designed to make the web navigable and interactive.
The cornerstone element of HTML is <a>
(anchor) an element that connects one web document to another with a click or tap. Additional elements like <form>
, <input>
, and <button>
make web documents dynamic.
Unassisted, HTML has a fairly simple event loop:
- You request a document from a server via URL
- The browser renders the returned document
- You click a link or submit a form — requesting another URL
- The browser renders that returned document
- Repeat…
JavaScript and the DOM (Document Object Model) allows you to intercept these browser events and update the existing document without requesting a new document.
React’s role is to make DOM event intercepting and page updating easier with a declarative component model.
Take it home
At the end of the day, React is limited to the HTML elements available in today’s browsers.
Develop a command of HTML and you’ll be a more capable React developer.
Check out this project that Ben Myers shared in Discord: HTML Tags Memory Test.
It’s a fun exercise to see how many HTML elements you can name by memory. After about 2 hours of, I’d reached 74. Then called it quits 😅