Versions Compared

Version Old Version 2 New Version Current
Changes made by

Selvyn Wright

Selvyn Wright

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.



title
Info

note

In React, function components are  are a simpler way to write components that only contain a a render method  method and don’t have their own state. Instead of defining a class which extends extends React.Component, we can write a function that takes takes props as  as input and returns what should be rendered. Function components are less tedious to write than classes, and many components can be expressed this way.

The square class can be converted to:

Code Block
languagejs
function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}

...

  </button>
  );
}

In actual fact, we can go further and use the fat arrow function

Code Block
languagejs
const Square = (props) => {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </

...

button>
  );
}