This article is part of a web development series from Microsoft. Thank you for supporting the partners who make SitePoint possible.
To get started with React.js, let’s setup a Hello World demonstration with CodePen. To view the demonstration, and edit the code, please click on the graphic link in the upper left hand corner “Edit on CodePen”
Screenshots are from Visual Studio Code
To create React Components, use the
createClass function of the
React object. The
createClass function expects an object configuring the component to be passed in. The
createClass function is a helper function for creating new components which inherit from
React.Component. If you are using using ES2015 natively in the browser or through a transpiler such as Babel, then it’s possible to inherit directly from
React.Component using the new
Regardless of the approach to creating the class structure for the component, the result is the same.
The only required property for a component is the
render property, which points to a function object which is used to actually render the DOM of the component. The implementation of the
render function introduces a new function,
createElement, that is provided by the
React object. The
createElement function is used to create new DOM elements with React. The function expects up to three parameters.
The first parameter is the name of the HTML element or React Component to create. HTML elements should be a lowercase string containing only the name of the element without the angle brackets and no attributes. Examples of acceptable HTML element arguments include “h1”, “p”, etc. In addition to HTML element names, React Component objects can be passed in. For React Components, the object itself, not a string name of the object, is passed in.
The second parameter is an object of the properties to pass in. For HTML elements, these properties correspond to the attributes of the HTML element. For React Components, these properties correspond to stateless (state will be covered in a future blog post) data for use when rendering the component.
Finally, the third parameter represents the child elements of the element being created. In the “Hello World” example, the child content of the h1 element is the content “Hello World!” In addition to textual content, element objects can be passed in.
Or by using an array, multiple child elements can be passed in as well.
To utilize the React Components in a web page, the
render function is used. It expects an element object, and a root element to which the DOM of the element object will be appended. In the code demonstration, the
createElement function is used to create an instance of the
HelloWorld component, while
document.querySelector is used to select the
main element to which the instantiated and rendered
HelloWorld component is appended. Once appended, the component appears in the web page, and the React demonstration is complete.
createElement function quickly becomes tedious.
One of the goals of React is to eschew the template-driven UI solutions such as Angular.js or Handlebars. Many developers consider such template-driven UI approaches to be antithetical to proper UI design because they can allow XSS exploits, are difficult to update when data changes occur, and can be difficult to extend/reuse. Many of the complaints center around the usage of logic in the template itself. React offers an alternative of a composable (discussed later), code-driven approach for building UIs. The function
To view the demonstration and edit the code, please click on the graphic link in the upper left hand corner “Edit on CodePen”.
The React web site recommends the use of JSX, and many developers use it. Nevertheless, using JSX is not required, and React.js applications work the same regardless of its usage. The remaining code demonstrations in this post will feature JSX (unless otherwise noted).
React Components have two kinds of data: state and properties. State data represents data that will be updated by a user or from the server. While state is important, it should be limited to as little as needed, with emphasis put on the properties which can be passed data (including state data from a component which manages state) to be rendered in the DOM. A future post will cover state data, as properties are the preferred way of configuring and managing data for a component. Also, as a side note for now, React does not support two-way data binding by default.
Earlier in this post, properties were discussed in conjunction with the
createElement function. Within React Components, properties passed to the component can be accessed through the
propsproperty of the component.
To see a demonstration of the
props property and edit the code, please click on the graphic link in the upper left hand corner “Edit on CodePen”.
When component properties (or state) change, React performs a process called Reconciliation to determine what DOM updates are needed to render the updated property and state information. React’s mechanism for this is quite sophisticated and even involves the use of virtual DOM to compare changes to make selective and fast updates to the DOM without having to re-render everything. Reconciliation will be thoroughly discussed in a future post.
React Components are designed to be composable, they can be combined together to build larger more sophisticated components. Consider the example of an HTML table. Typically, tables include a header and body sections. The header row is static while there are a variable number of body rows dependent upon the data available at any given moment. Such a table is a perfect example of composable component. The table itself can be a component with each row of data being a different component as shown in the demonstration below. To view the demonstration and edit the code, please click on the graphic link in the upper left hand corner “Edit on CodePen”.