1. renderToString()
2. renderToStaticMarkup()

For example, you generally run a Node-based web server like Express, Hapi, or Koa, and you call renderToString to render your root component to a string, which you then send as response.

If the optional callback is provided, it will be executed after the component is rendered or updated.

1. render()
2. hydrate()
3. unmountComponentAtNode()
4. findDOMNode()
5. createPortal()

A class component becomes an error boundary if it defines a new lifecycle method called componentDidCatch(error, info) or static getDerivedStateFromError() :

After that use it as a regular component:

JSX makes code easy to read and write.

It renders both on client and server side (SSR).

Easy to integrate with frameworks (Angular, Backbone) since it is only a view library.

Easy to write unit and integration tests with tools such as Jest.

There is a learning curve for beginners who are new to web development.

Integrating React into a traditional MVC framework requires some additional configuration.

The code complexity increases with inline templating and JSX.

Too many smaller components leading to over engineering or boilerplate.

The set of predefined prop types:

1. PropTypes.number
2. PropTypes.string
3. PropTypes.array
4. PropTypes.object
5. PropTypes.func
6. PropTypes.node
7. PropTypes.element
8. PropTypes.bool
9. PropTypes.symbol
10. PropTypes.any

We can define propTypes for User component as below:

Note: In React v15.5 PropTypes were moved from React.PropTypes to prop-types library.

React 16.8 Update: Hooks let you use state and other React features without writing classes.

The Equivalent Functional Component