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).

renderA required value, typically a function that returns React nodes, other React components, or null/false getInitialStateObject containing initial value of this.state getDefaultPropsObject containing values to be set on this.props propTypesObject containing validation specifications for props mixinsArray of mixins (object containing methods) that can be share among components staticsObject containing static methodsdisplayNameString, naming the component, used in debugging messages. If using JSX this is set automatically.componentWillMountCallback function invoked once immediately before the initial rendering occurscomponentDidMountCallback function invoked immediately after the initial rendering occurscomponentWillReceivePropsCallback function invoked when a component is receiving new propsshouldComponentUpdateCallback function invoked before rendering when new props or state are being receivedcomponentWillUpdateCallback function invoked immediately before rendering when new props or state are being received.componentDidUpdateCallback function invoked immediately after the component's updates are flushed to the DOMcomponentWillUnmountCallback 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.

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 methodExampleDescription 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 used will 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 (via JavaScript new keyword) for you.
• 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.

‍