A Functional Component is basically a JavaScript/ES6 function that returns a React element (JSX). This is a special and valid syntax extension for React which is called JSX. We keep HTML, CSS, and JavaScript code in separate files.
React is an open-source, front-end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.
React Function Component Example
import React from 'react';
function App() {
const greeting = 'Hello Function Component!';
return <h1>{greeting}</h1>;
{greeting}
; }
export default App;
That’s already the essential React Function Component Syntax. The definition of the component happens with just a JavaScript Function which has to return JSX — React syntax for defining a mix of HTML and JavaScript whereas JavaScript is used with curly braces within the HTML. In our case, we render a variable called a greeting, which is defined in the component’s function body and is returned as an HTML headline in JSX.
React Function Component: Props
Let’s learn about a React Function Component with props. In React, props are used to pass information from component to component. If you don’t know about props in React, cross-read the linked article. Essentially props in React are always passed down the component tree:
import React from 'react';
function App() {
const greeting = 'Hello Function Component!';
return <Headline value=>{greeting}/>;
}
function Headline(props){
return<h1>{props.value}</h1>;
}
export default App;
React Arrow Function Component
With the introduction of JavaScript ES6, new coding concepts were introduced to JavaScript and therefore to React. For instance, a JavaScript function can be expressed as lambda (arrow function). That’s why a Function Component is sometimes called Arrow Function Component (or maybe also Lambda Function Component). Let’s see our refactored React Component with an Arrow Function:
import React from 'react'; const App = () => { const greeting = 'Hello Function Component!'; return <Headline value=>{greeting}/>;; }; const Headline = ({ value }) => { return <h1>{value}</h1>; }; export default App;
React Function Component: State
React Hooks made it possible to use state (and side-effects) in Function Components. Finally, we can create a React Function Component with the state! Let’s say we moved all logic to our other Function Component and don’t pass any props to it:
import React,{ useState } from 'react'; const App = () => { return <Headline />; }; const Headline = () => { const [greeting, setGreeting] = useState( 'Hello Function Component!' ); return <h1>{greeting}</h1>; }; export default App;
React Function Component: Event Handler
we have used an arrow function to inline the event handler for our input field. What about extracting it as a standalone function inside the component? It would become a named function then:
import React, { useState } from 'react';
const App = () => {
return <Headline />;
};
const Headline = () => {
const [greeting, setGreeting] = useState(
'Hello Function Component!'
);
const handleChange = event => setGreeting(event.target.value);
return (
<div>
<h1>{greeting}</h1>
<input type="text" value={greeting} onChange={handleChange} />
</div>
);
};
export default App;