React Functional Component

Functional Component

2 min readNov 1, 2020

There are two ways to define components. They are Class Component and Functional Component. Functional Component is more simple than Class Component. In this story, I’m gonna show you how to define functional component.

React components are first step to learn react basic and it is essential to create a react app. Components may be a function or a class that return an single element.

for example,

function App() {
    return <h1>Hello World!</h1>;
}

this is simple component that return an h1 element.

With ES6 arrow function

const App = ()=>{
    return <h1>Hello World!</h1>;
}

Before you start

***React component name must be only captalized.

function app() {
    return <h1>Hello World!</h1>;
}

Start Creating functional component

create react app

npx create-react-app react-appcd react-app

In react-app, there is index.js in default src file

src > index.js

In index.js, create a component that return h1 element

import React from 'react';
import ReactDOM from 'react-dom';function App() {
    return <h1>Hello World!</h1>;
}ReactDOM.render(
<App /> ,
document.getElementById('root')
)

output >> Hello React

Creating component with separate file

create a file named App.jsx in a folder of components

src > components > App.jsx

(I have removed all of file in the src folder except index.js and created new components folder in src and put all the components in app)

In App.jsx, create a component and export it

import React from 'react';function App(){
    return <h1>Hello World!</h1>;
}export default App;

In index.js, import App.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App'ReactDOM.render(
    <App />,
  document.getElementById('root')
);

output >> Hello World!

It is easy and simple of creating components.

You can create more.