Functional Components and JSX

What Are Components?

In React, we don't build monolithic pages. Instead, we break down the user interface into small, self-contained, and reusable parts called components. Think of them like custom HTML tags you invent for your application. A button, a user profile card, a search bar—each of these can be a component.

Your experience with traditional web development involved creating structured HTML documents. React takes this a step further by allowing you to encapsulate that structure, along with its associated styles and logic, into a single, reusable JavaScript function. This modular approach is what makes building complex applications manageable and is the essence of creating a component library like Material UI or Chakra UI.

The official React documentation provides an excellent introduction to this core concept.

Defining a Functional Component

At its heart, a React functional component is a JavaScript function with two simple rules:

1. Its name must start with a capital letter (e.g., MyComponent, not myComponent). This convention is crucial because it allows the JSX transpiler to distinguish between your custom components and standard HTML tags (like div or p).
2. It must return a block of JSX that describes the UI it should render.

Let's look at the anatomy of a basic component.

The process looks like this: you write a JavaScript function that returns some JSX, and React takes care of rendering that JSX into actual DOM elements in the browser.

A Practical Walkthrough

Theory is great, but seeing it in action makes it click. The following video demonstrates how to create a functional component in a separate file, import it into the main application, and render it. It also introduces the common convention of using ES6 arrow functions.

Let's Code: Your First Component

Now it's your turn to apply what you've learned in your own project.

1. Open the Vite project you created in our first lesson.

2. Inside the src folder, create a new folder named components. This is a standard convention for organizing reusable components.

3. Inside src/components, create a new file named Welcome.jsx.

4. In Welcome.jsx, write your first component using the arrow function syntax:

   const Welcome = () => {
     return (
       <div>
         <h2>Welcome to Your Component Library!</h2>
         <p>This is the first reusable piece of our project.</p>
       </div>
     );
   };
   
   export default Welcome;
   

5. Now, open src/App.jsx. Remove the boilerplate content inside the return statement.

6. Import your new Welcome component at the top of the file:

   import Welcome from './components/Welcome';
   

7. Finally, render your component inside the App component's JSX, just like a custom HTML tag:

   function App() {
     return (
       <>
         <h1>My App</h1>
         <Welcome />
       </>
     );
   }
   
   export default App;
   

Run your development server (npm run dev) and you should see your new component rendered on the page! Try rendering the <Welcome /> component multiple times to see reusability in action.

Component Composition and Key Rules

As you just saw, you can use components inside other components. This is called composition, and it's one of React's most powerful features. The App component is the "parent," and each <Welcome /> instance is a "child."

While writing your component, you also followed a key JSX rule: returning a single root element. Your h2 and p tags were wrapped in a div. What if you don't want to add an extra div to the DOM? React provides a special syntax called a Fragment.

Finally, the real power of components comes from making them dynamic. You can embed JavaScript variables and expressions directly into your JSX using curly braces {}.

Try it yourself! In your Welcome.jsx component, add a variable and display it:

const Welcome = () => {
  const learnerName = "your name here"; // Change this!
  return (
    <div>
      <h2>Welcome to Your Component Library, {learnerName}!</h2>
      <p>The current year is {new Date().getFullYear()}.</p>
    </div>
  );
};

export default Welcome;

Conclusion

You've made significant progress today, moving from the theory of JSX to the practical application of building components. This is the core workflow of a React developer and the first step toward building your component library.

Here are your key takeaways:

• Components are reusable UI building blocks, defined as JavaScript functions.
• A component's name must begin with a capital letter.
• A component must return a single root JSX element, using a wrapper div or a Fragment (<>...</>).
• Components are composed by nesting them within each other, like HTML tags.
• You can use curly braces {} to embed dynamic JavaScript expressions directly in your JSX.
• Using ES6 arrow functions and default exports is the modern convention for defining components.

In our next lesson, we'll explore how to make our components even more powerful and reusable by passing data to them from a parent component using a mechanism called props.