Creating React components

A React component that will potentially contain state can be created by calling the React.createClass() function. This function takes one argument object used to specify the details of the component. The available component configuration options are listed below (a.k.a., component specifications).







































































render() A required value, typically a function that returns React nodes, other React components, or null/false
getInitialState() Function which returns an object containing initial value of this.state
getDefaultProps() Function which returns an object containing values to be set on this.props
propTypes Object containing validation specifications for props
mixins Array of mixins (object containing methods) that can be share among components
statics Object containing static methods
displayName String, naming the component, used in debugging messages. If using JSX this is set automatically.
componentWillMount() Callback function invoked once immediately before the initial rendering occurs
componentDidMount() Callback function invoked immediately after the initial rendering occurs
componentWillReceiveProps() Callback function invoked when a component is receiving new props
shouldComponentUpdate() Callback function invoked before rendering when new props or state are being received
componentWillUpdate() Callback function invoked immediately before rendering when new props or state are being received.
componentDidUpdate() Callback function invoked immediately after the component's updates are flushed to the DOM
componentWillUnmount() Callback function invoked immediately before a component is unmounted from the DOM

The most important component configuration option is render. This configuration option is required and is a function that returns React nodes and components. All other component configurations are optional.

The following code is an example of creating a Timer React component from React nodes using React.createClass().

Make sure you read the comments in the code.

source code

It looks like a lot of code. However, the bulk of the code simply involves creating a <Timer/> component and then passing the createClass() function creating the component a configuration object containing 5 properties (getInitialState, tick, componentDidMount, componentWillUnmount, render).

Notice that Timer is capitalized. When creating custom React components you need to capitalize the name of the component. Additionally, the value this among the configuration options refers to the component instance created. We’ll discuss the component API in more detail at the end of this chapter. For now, just meditate on the configuration options available when defining a React component and how a reference to the component is achieved using the this keyword. Also note, that in the code example above I added my own custom instance method (i.e., tick) during the creation of the <Timer/> component.

Once a component is mounted (i.e., created) you can use the component API. The api contains four methods.



























API method Example Description
setState()

this.setState({mykey: ‘my new value’});





this.setState(function(previousState, currentProps) {
return {myInteger: previousState.myInteger + 1};
});
Primary method used to re-render a component and sub components.
replaceState()

this.replceState({mykey: ‘my new value’});

 Like setState() but does not merge old state just deletes it uses new object sent.
forceUpdate()

this.forceUpdate(function(){//callback});

 Calling forceUpdate() will cause render() to be called on the component, skipping shouldComponentUpdate().
isMounted()

this.isMounted()

 isMounted() returns true if the component is rendered into the DOM, false otherwise.

The most commonly used component API method is setState(). Its usage will be covered in the React Component State chapter.

Notes

  • The component callback configuration options (componentWillUnmount, componentDidUpdate, componentWillUpdate, shouldComponentUpdate, componentWillReceiveProps, componentDidMount, componentWillMount) are also known as “lifecycle methods” because these various methods are executed at specific points in a component’s life.
  • The React.createClass() function is a convenience function that creates component instances for you (via JavaScript new keyword).
  • The render() function should be a pure function. Which means:

it does not modify component state, it returns the same result each time it’s invoked, and it does not read from or write to the DOM or otherwise interact with the browser (e.g., by using setTimeout). If you need to interact with the browser, perform your work in componentDidMount() or the other lifecycle methods instead. Keeping render() pure makes server rendering more practical and makes components easier to think about.