Sayuj Sehgal

Posted on Mar 8

Building UI Elements with JSX and Components

#react #webdev #javascript #frontend

Welcome back to the React 101 series! In this chapter, we’ll dive into the fundamental building blocks of React: JSX syntax and components. Buckle up and get ready to create your first interactive UI elements!

What is JSX?

JSX stands for JavaScript XML. It’s a syntax extension that allows you to write HTML-like structures directly within your JavaScript code. This makes it easier to visualize and manage your UI components.

Understanding JSX

JSX might look like a strange hybrid of HTML and JavaScript, but it’s a powerful tool that simplifies the process of creating React elements. Let’s break down some key concepts:

1. JSX Elements

JSX allows you to define elements in a way that closely resembles HTML. For example:

const heading = <h1>Hello, JSX!</h1>;

Here, heading is a JSX element representing an <h1> HTML tag.

2. Expressions in JSX

You can embed JavaScript expressions within JSX using curly braces {}. This allows you to dynamically generate content:

const name = "John";
const greeting = <p>Hello, {name}!</p>;

In this example, the variable name is embedded within the JSX element, resulting in a personalized greeting.

3. JSX and HTML Attributes

JSX attributes are similar to HTML attributes but use camelCase naming convention:

const heading = <h1>Hello, JSX!</h1>;

4. JSX Represents Objects

JSX gets transpiled into JavaScript objects. For example, the previous JSX element:

const heading = <h1>Hello, JSX!</h1>;

Gets transformed into:

const heading = React.createElement('h1', null, 'Hello, JSX!');

Building Basic UI Elements with React Components

In React, UIs are built using components – reusable, self-contained pieces of code. Components can be either functional or class-based.

Functional Components

Functional components are JavaScript functions that take props as arguments and return React elements:

const Greeting = (props) => {
  return <p>Hello, {props.name}!</p>;
};

// Usage
const App = () => {
  return <Greeting name="John" />;
};

Class Components

Class components are ES6 classes that extend React.Component:

class Greeting extends React.Component {
  render() {
    return <p>Hello, {this.props.name}!</p>;
  }
}

// Usage
const App = () => {
  return <Greeting name="John" />;
};

JSX Fragments

When a component needs to return multiple elements without a parent wrapper, you can use a JSX fragment (<> ... </> or ... ):

const MultiElementComponent = () => {
  return (
    <>
      <p>Element 1</p>
      <p>Element 2</p>
    </>
  );
};

Remember the Key Points:

JSX makes UI development more intuitive and readable.
Components are reusable and encapsulate UI logic.
Start with basic elements like headings, paragraphs, and images.
Use props to pass data into your components.

Bonus Tip:

Experiment with different JSX elements and components to build interactive prototypes. The more you practice, the more comfortable you’ll become with React’s syntax and component-based approach.

Conclusion

JSX and React components are fundamental concepts for building React applications. They provide a declarative and efficient way to describe UIs, making the development process more intuitive and maintainable. In the next parts of the React 101 series,we’ll explore more advanced concepts like state management, event handling, and styling. Stay tuned for more React 101 adventures!

DEV Community