React is built on a Component-Based Architecture meaning a lot revolves around components. In a practical sense, everything you see on the User Interface of a website or application is most likely a component.

Components can be buttons, forms, logos, headers, images, sections on a website and so on. The collection of components make up the entire UI in a React application.

Functional components in React are basically JavaScript functions that return JSX. They contain their own data, logic and appearance.

Functional components are simpler to write and maintain compared to class components and are widely used in modern React applications.

Defining and Rendering a Functional Component

In React, functional components are invoked using JSX tags. As you learned, JSX allows you to use HTML-like syntax within your JavaScript code, making component rendering easier.

Here’s a simple example:

function Greeting() {
  return <h1>Hello, Alice!</h1>;
}

The Greeting component simply returns a message ("Hello, Alice!") wrapped in an <h1> tag. This is a basic functional component that will display some content when it is rendered.

Now, let’s see how to use the Greeting component inside another component:

export default function App() {
  return <Greeting />;
}

Here, we are calling (or rendering) the Greeting component inside the App component. When we render the App component, React will go through its JSX and render the Greeting component as well.

What happens when the App component is rendered?

• The App component renders.
• Inside it, the Greeting component is called.
• The Greeting component renders its content, which is the message 'Hello, Alice!'.

So, on rendering the App component, the message 'Hello, Alice!' will be displayed on the screen because the Greeting component gets invoked inside App.

Key Benefits of Functional Components

Using functional components comes with some advantages such as:

• Simplicity: They are lightweight and easier to read.
• Hooks Support: Functional components can use React Hooks.
• Performance: Functional components avoid the overhead of React’s class component lifecycle methods.

Rules to using functional components

There are a couple of key rules to follow when working with functional components:

• Function names must start with an uppercase.
• Components must return some markup like JSX.

Reusing Components

One big advantage of components is its modular nature which enables it to be easily called within another component. This makes components highly reusable. More than one component can be called within a component.

For example, we have an App component:

function App(){
  return <h1>Shirt Collections</h1>
}

And another component called VintageShirts:

function VintageShirts(){
return (
    <>
      <img src="./carlos-torres-fouVDmGXoPI-unsplash.jpg" alt="vintage shirts"/>
      <h3>Vintage Shirt Collections</h3>
      <p>The available colors in this collection are gray, brown, red, orange and maroon colors</p>
    </>
)

We have successfully created two seperate presentational components.

Presentational components are components that primarily render UI elements.

Both the App and VintageShirts components render and display headings, images and paragraph combined.

We want the VintageShirts collection to be nested and rendered with the App component.

To achieve this, we call the VintageShirts component in the App component:

function App(){
  return (
   <>
    <h1>Shirt Collections</h1>
    <VintageShirts />
   </>
}

function VintageShirts(){
return (
    <>
      <img src="./carlos-torres-fouVDmGXoPI-unsplash.jpg" alt="vintage shirts"/>
      <h3>Vintage Shirt Collections</h3>
      <p>The available colors in this collection are gray, brown, red, orange and maroon colors</p>
    </>
)

We have successfully reused the VintageShirts collection in our application by just calling it within the App component.

Output:

Additionally, components can be reused multiple times in an application.

Using the example above, we can reuse the VintageShirts component multiple times:

function App(){
  return (
   <>
    <h1>Shirt Collections</h1>
    <VintageShirts />
    <VintageShirts />
   </>
}

Output: