Create React functional component


Components is the basic building blocks of React UI. Every React project consist of different type of components which can communicate each other, manage its own state and they are reusable.

There two types components, functional components and class components. We are focusing on the first in this post.

A functional component is a JavaScript functions which return some web element such as <Div> or it can be any HTML element. Lets create our first functional component

Create a React project from scratch and locate the App.js file under src folder and delete everything within <div className = “App” > If you don’t know how to start a React Project here is the Guide for you.

Create Reactjs app in a 3 minute - How to create react sample app in Windows/Mac/Linux

Create functional component

Create new folder named components under src folder and create a file called Message.js with following content. (You can do this easily with VS Code and ES7 React extension by using rfce command)

import React from 'react'
....
function Message() {
   return (<div>
       <h1 > Hellow < /h1>        
       </div>)
}

The component simply return a Hello message. In App.js which is the main component , we can use inside the App Div as


import Message from './components/Message'
.....
....
function App() {
  return (
      < div className = "App" >
      <Message >      
      </div>
  );

Run the project using npm start

Props or properties

What about passing some values to the component which make it more dynamic. With the help props we can pass some values to the component like

<Message/>
<Message person='Chris'/>

We have to modify the component as

import React from 'react'
....
function Message(props) {
  return (<div>
      <h1 > Hellow {props.person} < /h1>        
      </div>)
}

Child components

May be you already noticed that component inside <Message> <p>This is a functional component </p> </Message> didn’t show up yet. For this we have specify the props children ( variable always specified inside the { } , curly braces in React. ).

import React from 'react'
....
function Message(props) {
   return (<div>
       <h1 > Hellow {props.person} < /h1>    
            {props.children}
       </div>)
}

Now you know how to create a functional component in React. It can be a piece of input box with awesome styles or it can be simple box, it us up to you , the developer

Published by

Manoj

A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.