Learn how to use const, object extraction, and single-line function to write a basic functional component in ReactJS. Part of the 1-minute Web Technologies video series.

Hey there, this is Thomas from Macao.
In this video, I’m going to explore the functional components in ReactJS.

function ScoreItem(props) {
  return <div>
    {props.name}
    <span>{props.score}</span>
  </div>
}

Traditionally, we define a function like this. We have literally the function word, the name, the parameters, curly brackets, and then the lines of code inside the brackets scope.

const ScoreItem = ({ name, score }) => (
  <div>
    {name}
    <span>{score}</span>
  </div>
)

We can reduce the code by minimizing the syntax usage. We can turn the function definition into const, function name, an object of attributes we need in properties as the parameters. The fat arrow syntax. Then if this is a simple component with one line of code, we don’t even need the curly brackets and the return wording.

But for better readability, I will wrap the code with a pair of parentheses.

That’s it for a basic functional component syntax.