React: JSX & Rendering
If you’re new to React, you’ll likely have heard about JSX, or JavaScript XML — it’s an XML-like code for elements and components. In this article, we’re going to take a look at what JSX is & why we should use it in our React applications. We’ll also take a look at what elements are, and how we can render them to the DOM.
🤓 Want to stay up to date with web dev?
🚀 Want the latest news delivered right to your inbox?
🎉 Join a growing community of designers & developers!
Subscribe to my newsletter here → https://easeout.eo.page
What is JSX?
As mentioned, JSX is an XML-like code which we can use when coding with React. It was developed by the team at Facebook & is mean’t to provide a more concise syntax, helping to simplify the developer experience. Let’s take a look at our first example:
const greeting = <h1>Hello, World!</h1>;Simple, right?
What we have here is neither a String nor HTML. It’s JSX! We can use it to harness the full power of JavaScript when building our UI elements. And while it’s not mandatory, it’s certainly an extremely useful tool — it does a great job of making it clear when we’re working with UI inside of our JavaScript code.
