A look at React without JSX : Part One

Introduction

Recently, as part of a new project in my day job, I had to use React more frequently that I was used to. I never really spent much time thinking about the why? behind this library. What problems React is trying to solve? I decided to spend some of my free time understanding React a little bit deeper.

What is it ?

React is a Javascript library. The problem faced by Javascript developers and their SPA ( Single Page Apps ) was how slow the DOM API is. To update the user interface, we used the DOM API ( document.createElement, document.appendChild …). This is slow. So, by being more careful about how we update the UI, we can improve performance. This is where React comes in. React takes care of updating the UI for us.

If you’ve used React with JSX, it looks like HTML. But React is nothing more than Javascript. Then, the ReactDOM library is charged to generate HTML from our React elements ( our virtual DOM ) in the browser with the render function.

I think it is interesting to look a what Pure React is because, in the end, this is what runs in the browser.

This series of posts will look at the pure Javascript side of React ( no JSX ). We won’t bother with any transpiling in these posts, so make sure that your browser supports ES6 features ( such as Chrome ).

Getting Started

Since we won’t be using any fancy stuff, and since React is just Javascript, here is the file you can use to start writing pure React.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="main"></div>

        <script src="https://unpkg.com/react@15.4.2/dist/react.js"></script>
        <script src="https://unpkg.com/react-dom@15.4.2/dist/react-dom.js"></script>
        <script>
        // Our custom Javascript here
        </script>
    </body>
</html>

And that’s all you need to start writing Pure React!!

Our first Element

React elements are Javascript objects. Here is how you would create one:

React.createElement( tagName, attributes, elementChildren )

Let’s create a header:

const myHeader = React.createElement( "h1", {"className": "header"}, "Hello World")

That’s it. Now, we need to use the ReactDOM library and its render function to generate our HTML and insert it into our browser. The render method takes two parameters, a single React element to render, and the target of the render, like so in our case :

ReactDOM.render( myHeader, document.getElementById('main'))

If you look into your page now, you’ll have your h1 tag, with a header class and a ‘Hello World’ text.

Children Elements

Now, let’s assume we want to render a list. In HTML, our markup would end up like this :

<ul class="superheroes">
    <li>Spiderman</li>
    <li>Batman</li>
    <li>Superman</li>
</ul>

In order to achieve this sort of generated HTML with React, you need to tell the ‘ul’ element about all its children. For example:

const list = React.createElement(
    'ul', 
    {"className": "superheroes"},
    React.createElement('li', null, 'Spiderman'),
    React.createElement('li', null, 'Batman'),
    React.createElement('li', null', 'Superman' )
)

Make sure you indicate to your render method the proper element to generate in your browser. You just made a list with React!

But we can make this more efficient! One advantage of React is that it makes the difference between data and UI elements. Remember that React is just Javascript. Let’s create an array for our superheroes.

const superheroes = ["Batman", "Superman", "Spiderman", "Wonderwoman"]

Let’s update our list React element in order to map through the superheroes array:

const list = React.createElement(
    'ul',
    {"className": "superheroes", superheroes},
    superheroes.map( ( hero, i ) => React.createElement('li', {key: i}, hero)
) 

Notice the { key: i } in the attributes. If you omit this, React will give you a warning: each item in a iterator must have a unique key. This helps React keeping track of UI updates. For our example, giving the array key is enough.

Let’s try to see the list object, add this:

console.log(list)

In your console, you’ll see an object with several properties. If you look at props.children, you will see our list items with each their own properties and their very own props.children.

So, our list has 4 children ( props.children), the first child is a li element ( props.children[0].type ) and this element’s children is composed of a string “Batman” ( props.children[0].props.children ). Just another Javascript object!!

Hopefully, this little explanation about Pure React gives you a better understanding of what React is trying to accomplish and what problems it tries to solve. In the next post of this series, we will look at ways to create React Components, with React.createClass and the class feature of ES6.

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

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

*