Building UI with Functional Components and JSX

What are React Components?

Think of a complex web page, like a social media feed. It's made up of many smaller, repeatable pieces: a navigation bar, a profile sidebar, individual posts, comment sections, like buttons, and so on. In React, each of these self-contained UI pieces is a component.

A component is essentially a reusable, independent snippet of your user interface. It's a JavaScript function that returns a description of the UI. This approach allows you to break down a complex UI into manageable, isolated parts.

To get a solid grasp on this idea, the official React documentation provides the best introduction.

What is JSX?

You've now read that a component is a function that returns "markup". But what we write isn't standard HTML. It's JSX (JavaScript XML).

JSX is a syntax extension for JavaScript that lets you write HTML-like code directly inside your JavaScript files. While you can write React without JSX, it's far more verbose and less intuitive. JSX makes your code more readable and declarative.

Under the hood, a build tool like Vite transforms your JSX into standard JavaScript function calls that the browser can understand, specifically React.createElement(). You almost never need to write these calls yourself, but seeing the comparison makes it crystal clear why JSX is so popular.

This video does an excellent job of demonstrating the difference.

As you saw, the React.createElement() version quickly becomes cumbersome, while JSX remains clean and readable.

The Rules of JSX

Because JSX is stricter than HTML, there are a few key rules you must follow:

1. Return a single root element: A component can only return one top-level element. If you have multiple elements, you must wrap them in a single parent, like a <div>, or use a Fragment (<>...</>), which is an invisible wrapper.
2. Close all tags: Self-closing tags in HTML like <br> or <img> must be explicitly closed in JSX: <br /> and <img />.
3. Use className for CSS classes: Since class is a reserved keyword in JavaScript (for creating classes), you must use className to assign CSS classes to elements.
4. Use camelCase for most attributes: HTML attributes with hyphens, like tab-index or onclick, become camelCased in JSX: tabIndex and onClick.

The React documentation provides a concise guide to these rules. It's a great reference.

Hands-On: Creating and Using Your First Component

Now it's time to apply this knowledge in your Vite project. The best way to learn is by doing. We will create a new, separate component and then use it inside our main App component.

The following video provides a clear, step-by-step walkthrough of this exact process. Please follow along in your own code editor.

By completing that walkthrough, you've practiced the entire component lifecycle:

• Creation: Defining a function that returns JSX.
• Exporting: Making the component available to other files.
• Importing: Bringing the component into the file where you want to use it.
• Rendering: Using the component like an HTML tag (<MyComponent />).
• Dynamic Content: Using {} to make your component's output depend on JavaScript variables and logic.

// src/Greeting.jsx

function Greeting() {
  const userName = "Alex";
  return <h1>Hello, {userName}!</h1>;
}

export default Greeting;

// src/App.jsx

import Greeting from './Greeting'; // Add this import at the top
// ... other imports

function App() {
  // ... existing code
  return (
    <>
      {/* ... existing JSX ... */}
      <Greeting /> {/* Add this line */}
    </>
  );
}

export default App;

Conclusion

Excellent work! You've just mastered the fundamental building blocks of every React application. You now understand that React apps are built by composing small, reusable components, and that we use JSX to describe the UI for those components in a declarative, readable way.

Key Takeaways:

• A Component is a JavaScript function that returns UI. Its name must always be capitalized.
• JSX is a syntax extension that allows us to write HTML-like markup in our JavaScript files.
• JSX has a few key rules: you must return a single root element, close all tags, and use className instead of class.
• You can embed any JavaScript expression inside JSX by wrapping it in curly braces {}.
• Components are used by importing them and then rendering them like custom HTML tags (e.g., <MyComponent />).

In the next lesson, we will explore one of the most powerful features of components: props. You'll learn how to pass data from a parent component to a child component, making your components even more flexible and dynamic. This is how you'll go from a static <Greeting /> to a reusable one you can greet anyone with.