Function Components in React

Creating a React Function Component

A function component is a simple JavaScript function that returns JSX.

Example

function NavBar() {
  return (
    <nav>
      <h1>Pet App</h1>
      <ul>
        <li className="selected">
          <a href="/pets">Pets</a>
        </li>
        <li>
          <a href="/owners">Owners</a>
        </li>
      </ul>
    </nav>
  );
}

This function returns a JSX structure that represents a navigation bar.

Rendering the Component

To convert the JSX into real DOM, use React's render method.

// Get the root DOM node
const rootElement = document.getElementById('root');

// Render the component
ReactDOM.createRoot(rootElement).render(<NavBar />);
    

This renders the NavBar component inside the real DOM element with the ID root.

Handling Empty Component Returns

React requires components to return something. If a component does not need to render anything, return null instead of undefined.

Example

const str = "hello";

function ExampleComponent() {
  if (str === "hello") return null;
  return <div>World!</div>;
}

If str is "hello", the component returns null and renders nothing.

Conditional Rendering in Function Components

React allows conditional rendering using ternary operators or logical && operators.

Example

function ConditionalRender({ condition }) {
  return (
    <>
      {condition ? 
        <h1>Shows when condition is truthy.</h1> :
        <h1>Shows when condition is falsy.</h1>
      }
      
      {condition && 
        <p>You will see this only if condition is truthy.</p>
      }
    </>
  );
}

JSX evaluates condition and dynamically renders the appropriate content.

Be careful: falsy values like 0 will still render, so ensure your conditions explicitly check for booleans.

Nesting Function Components

React allows components to be composed by nesting them inside each other.

Example

function NavLinks() {
  return (
    <ul>
      <li className="selected">
        <a href="/pets">Pets</a>
      </li>
      <li>
        <a href="/owners">Owners</a>
      </li>
    </ul>
  );
}

function NavBar() {
  return (
    <nav>
      <h1>Pet App</h1>
      <NavLinks />
    </nav>
  );
}

Here, NavBar renders the NavLinks component inside of it, keeping the code modular and readable.

Organizing Components into Separate Files

As applications grow, it’s best to keep each component in its own file for better organization.

Example: NavLinks.jsx

function NavLinks() {
  return (
    <ul>
      <li className="selected">
        <a href="/pets">Pets</a>
      </li>
      <li>
        <a href="/owners">Owners</a>
      </li>
    </ul>
  );
}

export default NavLinks;
    

Example: NavBar.jsx

import NavLinks from './NavLinks';

function NavBar() {
  return (
    <nav>
      <h1>Pet App</h1>
      <NavLinks />
    </nav>
  );
}

export default NavBar;
    

Using separate files for components improves maintainability and reusability.

Best Practices for Component Organization

• Use PascalCase for component names (NavBar, NavLinks).
• Break down large components into smaller, reusable ones.
• Store each component in its own file for better organization.
• Use export default for a single component per file.

While keeping one component per file is a common practice, some cases may require multiple related components in one file.

Wrapping Up

In this tutorial, you learned:

• How to create and render function components in React.
• How to return JSX elements from a function component.
• How to conditionally render components using ternary operators and logical &&.
• How to nest function components to create modular UIs.
• How to organize components into separate files for maintainability.

By structuring your components well, you can build efficient and reusable React applications.