React I

Components & Props

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.

Functional Components & Class Components

const Welcome = (props) => {
    return <h1>Hello, {props.name}</h1>;
}

This function is a valid React component because it accepts a single "props" object argument with data and returns a React element. We call such components "functional" because they are literally JavaScript functions.

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

The above two components are equivalent from React's point of view.

Classes have some additional features:

• (Local state) The component needs to maintain state

• The component is re-rendering too much and you need to control that via shouldComponentUpdate

• You need a container component

Source: https://facebook.github.io/react/docs/components-and-props.html