Full-Stack React Projects

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 a stateless component does not modify state and 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>   }}

The same 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 React components as pure functions enforces creation of smaller, more defined, and self-contained ...