Full-Stack React Projects - Second Edition

Stateless React components as pure functions

React components can be defined as stateless functional components using the ES6 class syntax or as pure functions. The main idea is that a stateless component does not modify state and only receives props.

The following code defines a stateless component using the ES6 class syntax:

class Greeting extends React.Component {  render() {    return <h1>Hello, {this.props.name}</h1>   }}

This component, although defined with a class, does not use state. The same component can also be defined using JavaScript pure functions, as follows:

function Greeting(props) {  return <h1>Hello, {props.name}</h1> }

A pure function always gives the same output when given the same input without any side effects. Modeling ...