React Functional Components

React functional components can be any JavaScript function that returns the HTML. These functional components can also accept “props”, meaning properties or data. As these are JavaScript functions or extensions of JavaScript functions, they can also be created from the ES6 convention of the arrow function. These functional components can also accept the props that we can use using JSX syntax and you can also put your normal JavaScript code before the return statement. One thing to notice is that there should only be one return per component.

Syntax:

Javascript




const Greet = (props) => {
    const person = props.name;
    return (
        <div>
            <h1>Hello {person}!!</h1>
        </div>
    )
}


How to create components in ReactJS ?

Components in React JS is are the core of building React applications. Components are the building blocks that contains UI elements and logic, making the development process easier and reusable. In this article we will see how we can create components in React JS.

Table of Content

  • React Functional Components
  • React Class-based Components
  • Rendering the Component

Similar Reads

Prerequisites

HTML and CSS JavaScript classes and functions JSX...

1. React Functional Components:

React functional components can be any JavaScript function that returns the HTML. These functional components can also accept “props”, meaning properties or data. As these are JavaScript functions or extensions of JavaScript functions, they can also be created from the ES6 convention of the arrow function. These functional components can also accept the props that we can use using JSX syntax and you can also put your normal JavaScript code before the return statement. One thing to notice is that there should only be one return per component....

2. React Class-based Components:

...

Rendering the Component:

The class-based components also have almost the same features as React function components. but before we define our class-based component, we need to import the “React. Component” or extract the Component like “{Component}” from React....

Steps to create React Application And Installing Module:

...

Contact Us