props are how components get their properties.

e.g.

1
2
3
4
5
6
7
8
function Greeting(props) {
  return <h1>Hello, {props.username}!</h1>;
}
const element = <Greet username="Lei" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

What is happening here?

  1. ReactDOM.render() is called with the <Greet username="Lei" /> element.
  2. React calls the Greet component with {name: 'Lei'} as the props.
  3. Our Greet component returns a <h1>Hello, Lei!</h1> element as the result.
  4. React DOM updates the DOM to match <h1>Hello, Lei!</h1>.

props in function components
e.g.

1
2
3
4
5
6
7
8
const BlogPostInfo = props => {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  )
}

props in class components

In a class component, props are passed by default. They’re accessible as this.props in a component instance.

1
2
3
4
5
6
7
8
9
10
11
12
import React, { Component } from 'react'

class BlogPostInfo extends Component {
  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>{this.props.description}</p>
      </div>
    )
  }
}

“state” is not discussed here.

For state and lifecycle information, go here