Building Enterprise JavaScript Applications

Functional and class components

A React component takes in props (input data) and returns a React element(s). In React, you can define a component in two ways:

• Functional components
• Class components

For instance, we can define an Input React component using the functional component syntax.

function Input(props) {  return <label>{props.label}<input type={props.type} /></label>}

The curly braces ({}) are JSX syntax. Whatever is between the braces are evaluated as JavaScript, and the value substituted in place.

Alternatively, we can define the same Input component using the class syntax, which uses ES6 classes.

class Input extends React.Component {  render() {    return <label>{this.props.label}<input type={this.props.type} /></label>  }}

Both are ...