A look at React without JSX: Part Two

This is part 2 of the series on React without JSX, where we look at how Pure React is written and ultimately run in the browser.

Here is the part one if you haven’t read it : Part one

We’ll pick where we left off in the first part. In this article, we’ll see how to create Components in pure React. In order, to use Pure React, please refer to the first part to see the boilerplate code.

Elements are useful, but user interfaces are made up of parts. Components are a collection of elements. It allows the developer to re-use the same components in different parts of an application. By changing a component’s props, we can modify our components to suit our needs.

You can create two sorts of components, Stateless Functional Components and Stateful Components. As their name indicates, the first doesn’t use any state or component lifecycle, the second does. Let’s start with a stateless component:

What are the characteristics of a stateless functional component :

  • is an object, not a function
  • doesn’t have a this scope
  • simple and pure functions

Because of their simplicity, try to use them as much as possible.

Here is a simple stateless functional component in Pure React

const fruits = [‘Strawberry’, ‘Pears’, ‘Apples’ ]

const FruitList = ([fruits]) => {
    return (
        React.createElement(‘ul’, { className: ‘fruits’},
        fruits.map( ( fruit, i ) => (
            React.createElement(‘li’, {key: i}, fruit)
        ))
    )
}

ReactDOM.render(FruitList([fruits]), document.getElementById(‘main’))

We start by creating our array of fruits we want to display. Then, we create our function. As you can see, we use ES6 restructuring to make our arguments more terse. Our function returns a ul and map through the array given in its arguments. For each item in the array, it render a li with a key attribute and the item’s value as text.

Now we can use our FruitList component in different places and adapt what we want to display by changing the props ( the array given as an argument ). Remember, stateless functional components are just functions that returns some UI.

The second way to create a React component is to use the class keyword in ES6. Those components must be used when your component holds some state and/or must use component life cycles. You can use stateless functional components in this case.

Note: You can also use React.createClass to create those components. However, this will soon be deprecated at the time of this writing so I will not be covering it. For more information, please refer to : Facebook Docs

In order to properly use classes in Pure React, we must use Factories to create React Elements. A Factory is a special object that helps us create React element instances. React has some built-in factories for commonly supported HTML and SVG DOM elements and React.createFactory can be used to create your own factories around specific components.

For example, you can create an h1 like this:
React.DOM.h1(null, ‘My Header’)

Let’s create a class component.

class FruitsList extends React.Component {
    this.renderFruitItem( fruit, i ) {
        return React.createElement( ‘li’, {key: i}, fruit)
    }
    render(){
        return (
            React.createElement(‘ul’, {className: ‘fruits’},
                this.props.fruits.map(this.renderFruitItem))
            )
        )
    }
}

Nothing fancy here, this is the same component we use before, but as a class. Let’s now wrap our factory around this:
const MyList = React.createFactory(FruitsList)

Pretty simple huh ?
Finally, let’s render!

ReactDOM.render(MyList({fruits}), document.getElementById(‘main’))

And that’s it, we just created a class component. This component can hold state and use the component life cycles (componentDidMount, componentWillReceiveProps …)

I hope this article helps you understand better what React looks like under the hood of JSX, and how it is given to the browser.

Feel free to share and comment.
Have a nice day!

Your email address will not be published. Required fields are marked *

*