04.Components.md

Jam3 Lessons - React

Components

Components allows you to split UI into small independent and reusable pieces.

Functional Components

This is simplest way of defining Components. Lesson is function that always returns an <div> tag with a text node as its children.

function Lesson() {
  return <div>This is a lesson!</div>;
}

Pure (Stateless) Functional Components

This type of components has no state, and just shows received props. Therefore, it allows a developer to have loosely coupled component, which is more reusable and unit testing friendly.

const Lesson = (props) => {
  return (
    <div>{ props.text }</div>
  );
};

Class Components

You can also create a new component by extending the React.Component class which comes with useful methods to grasp more control while the component is alive.

class Lesson extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>{ this.props.text }</div>
    );
  }
}

Not mandatory, but it's recommended for class based components to call super passing down the received props.

References

• Components references
• Stateless Components