Function Components

Before React version 16.8 function components didn't have the flexibility and functionality they have now, so they weren't used that much. In "modern" React, these are now the "go to" methodology.

If we refactor the class-component example to a function component, thing get more "lean":

const App = () => {

  const name = "Function Component"

  return (
    <div>{ name }</div>
  )
  
}

export default App

Breakdown

Line 1: define a const which holds our function. (function App() is also valid syntax)
Line 1: We don't need to import React (it's used by default) or any other functions or methods from the library (yet)
Line 5: we can return a JSX snippet without a render function
Line 11: We still need to export the function

Breakdown​

Breakdown