Function Component

Simply put, a function component in React is a JavaScript function that returns JSX.

A simple HelloWorld function component is shown below:

function HelloWorld() {
  return <div>Hello, World!</div>;
}

The function can receive variable objects as props from the parent component that can be used for evaluation and rendering.

A Hello function with props is shown below:

function Hello(props) {
  return <div>Hello, {props.name}!</div>;
}

The preceding syntax can be simplified further with ES6.

Here's the function component written in ES6:

const Hello = (props) => (<div>Hello, {props.name}!</div>);

Let's examine the code we have written here to understand how this works.

const Hello

We are defining a new constant here and initializing it with a value. We have seen the const statement earlier as well. ES6 introduced block-scoped variables that can be defined with let and...