React JSX for Beginners: How to Build Dynamic Components

Introduction

One of the main components of React, a popular JavaScript library for creating user interfaces, is JSX, a syntactic extension that enables you to express HTML-like elements in your JavaScript code. This article will assist you in starting to construct dynamic, responsive components if you are new to React and JSX.

Let's look into JSX's operation first. A transpiler like Babel transforms (converts) JSX into JavaScript when it is used in a React component. Here is an illustration of a straightforward React component created with JSX:

import React from 'react';

function Greet(props) {
  return <h1>Good afternoon, {props.name}</h1>;
}

export default Greet;

The 'Greet' function in this example is a fundamental React component that accepts a single 'props' (short for 'properties') object as an input. The return statement's JSX is translated to JavaScript, which appears as follows:

import React from 'react';

function Greet(props) {
  return React.createElement("h1", null, "Good afternoon, ", props.name);
}

export default Greet;

As you can see, JSX is transpiled into a React call. React elements are created using the createElement() function. The type of element to construct (in this case, "h1") is the first argument to the createElement() function. The second argument is an object containing any props that should be supplied to the element.

The definition and rendering of components is one of the key uses of JSX in React. A component is a piece of reusable UI that can accept props and be rendered more than once with various props.

import React from 'react';

function Article(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.body}</p>
    </div>
  );
}

const article = {
  title: 'React JSX for Beginners',
  body: 'How to build dynamic components with React and JSX'
};

ReactDOM.render(<Article {...article} />, document.getElementById('root'));

Title and Body are two props that the Article component in this example accepts in order to render the title and body of an article. The Article component is defined using JSX. The information from a given article is then sent as props to the component, which is then rendered in the HTML root element.

The ability to conditionally render items depending on specific criteria is another way to utilize JSX in React. For Example:

import React from 'react';

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign up.</h1>;
}

Another thing to remember is that JSX elements must have a single parent element in order to function properly; otherwise, an error will occur. When there are several elements, they must be contained within a single element; a div is a frequent example.

Conclusion

JSX helps to build user interfaces and is used to define the structure and content of a React component. It looks similar to HTML, but it's actually a syntax extension for JavaScript. It can return a value or receive a value as props which the conventional HTML code wouldn't let you do.