Introduction to React

React is a popular JavaScript library for building user interfaces. To create complex and efficient web applications, you need to understand its fundamental concepts.

In this discussion, we’ll cover three essential React concepts: JSX, components, and props.

Before we begin, you should be familiar with:

JavaScript basics
Array and object destructuring
ES6 modules

If you’re new to React or want to brush up on the basics, you’re in the right place.

Let’s start by learning about JSX – the syntax you’ll use to write React code.

What is JSX?

JSX, which stands for JavaScript XML, is an extension of the JavaScript language based on ES6. It’s translated into regular JavaScript at runtime.

With JSX, we can write HTML-like code in our React applications, making it much easier to create and manage user interfaces.

Why use JSX?

While JSX isn’t mandatory, it offers significant advantages over plain HTML when working with React. The code examples I’ll share below will illustrate the differences between plain HTML and JSX, highlighting why JSX is often the preferred choice.

// Plain HTML
const myElement = React.createElement('h1', { style:{color:"green"} }, 'I do not use JSX!');
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement)

// JSX
const myElement = <h1>I Love JSX!</h1>;
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

As evident in the first example, creating elements with plain HTML is more cumbersome. It requires using the createElement method and passing the element, its style, and value as separate arguments.

JSX, however, simplifies this process significantly. It allows us to use element tags just like in HTML, making it more intuitive to write and read.

Given these advantages, I strongly recommend using JSX in your React projects.

Setting up your Dev Environment JSX Rules