React Function Component

If you want to create smaller & simple reusable UI Elements that don’t need to manage their own state or lifecycle methods, then the React Function component is the best option for you.

Learn Before –

React Components

The function component will be very useful to build things that look good, work fast, and can change when needed. It can make your webpage-building process easier and your users happier because things feel smooth and interactive. It’s like having special building blocks for your website that can do a lot and work well together. 

What is Function Component

A React Function Component works like a regular JavaScript function, But it’s made for creating reusable user interface (UI) elements. It combines regular JavaScript code with JSX, a syntax extension, to define how the UI elements should look on the webpage. 

Create Function Component 

You can create a function component just like a regular JavaScript function, but its name must start with a capital letter

Syntax –

Like regular function

function ComponentName() {
  // return jSX here
}

const componentName = () => {
}

function Tutorial() {
  
}

function Tutorial_12() {
  
}

function Hindi_Tutorial() {
    
}

function HindiTutorial() {
  
}

Return JSX

A Function component in React primarily returns JSX to create user interface elements, but they can also return other components and other data types such as strings, numbers, JavaScript expressions, arrays of elements, null, or false when necessary.

You have to use the return statement for the following points –

You can return single-line JSX in a single-line statement

function Tutorial() {
  return <h3> PHP Tutorial </h3>
}

If you need to return multiple lines of JSX then you will have to wrap them with a parent element or Fragment.

function Tutorial() {
  return (
    <div>
    <h3> React Js Tutorial </h3>
    <p>You will learn Reac Js from basic to advanced level<p>
    <div>
  )
}

You can return a single component in a single-line statement

function Tutorial() {
    return <ReactTutorial />
}

If you need to return multiple lines of JSX then you will have to wrap them with a parent element or Fragment.

function Tutorial() {

    return( 
    <ReactTutorial />
    <NodeTutorial />
   )
}

You can also return components with JSX

function Tutorial() {

    return( 
    <h1>Coding Tutorials<h1>
    <ReactTutorial />
    <NodeTutorial />
   )
}

Export Function Components

If you need to use a function component on other js files then you will have to export that function.

To export, you can create a function component with ‘export default’

export default function Tutorial() {
}

To export, you can also declare export default ComponentName at the end of the file.

export default Tutorial;

Import Function Components

If you want to use a function component in other files, you’ll need to import that component into those files.

Syntax –

import namespace from './directory';

Example –

import Tutorial from './Tutorial';

Note – You should keep the namespace similar to the function component.

Call Function Component 

To call a function component, First of all, import and use the namespace with angle brackets <> and backward slash.

Syntax –

<ComponentNamespace />

Example –

<Tutorial />

Best Practices – Naming Conventions

Naming conventions for function components will make your code easy to read & maintain. So, You should learn the following important naming convention.

Descriptive Name – You can keep the function component name that represents the purpose or role of that component. So that anyone can understand what the component does.

// It represnts the header
function Header() {
}

// It represents the logo
function Logo() {
}

// it represents the sidebar
function Sidebar() {

}

// it represents the Carousel
function Carousel() {

}

Capitalize – You can create a function component capitalize/camelcase, 

function User() {
}

If you need to create a function component with more than one word then keep all words capitalized without using any separators.

function UserProfile() {
}

The suffix – You can create a function component with a ‘Component’ suffix to make it clear that it’s a component.

// Good
function UserListComponent() {
  // ...
}

function TodoItem() {
  // ...
}

function SubmitButton() {
  // ...
}

// Avoid
function User() {
  // ...
}

Contextual Names – If a component is tightly coupled with a specific context or feature, you can include that context in the name.

Example –

Suppose you create a component specifically for administrator users then you can keep the component name ‘AdminUserProfile’ instead of naming it something generic like “UserProfile,” .

function AdminUserProfile() {
   
}

File Name Consistently – You should create a component file name similar to the function component name.

• Header.js
• Footer.js
• UserProfile.js
• AdminUserProfile.js

Suggestion

Next Topic – React Function Component with Props