Using React with different syntax, featuring JSX, Hyperscript, and Hyperscript-helpers.

Source: https://hub.packtpub.com/wp-content/uploads/2018/03/react-jsx.png

This blog will focus on the topic of syntax in React, namely JSX, Hyperscript. Then I will build upon these two methods by introducing Hyperscript-helpers.

JSX (Javascript XML)

JSX is an extension of Javascript commonly used in React to provide a syntactic sugar for what would be a rather convoluted syntax with React.

Despite its potential benefits, there are mixed feelings about JSX, as it essentially combines HTML and Javascript together. As I am not here to convince anyone to use JSX or not, I will simply go over how code in React differs when using JSX and when not.

When using JSX in React, the code is converted to Javascript via compilers, such as Babel.

Let’s take a look at how code looks when JSX is used for React:

This code will render “This summer is really hot!” Fairly straight forward, especially since everything inside of the ‘return’ looks a lot like HTML.

Here is the non-JSX method with the same results:

Let’s break this down a little bit.

React.createElement takes in 3 arguments: (type, props, children)

It will create a type of HTML tag (div), take in any props for the element then any children associated with the element (this.props.weather).

You may be wondering why we don’t simply have ‘{weather: ‘hot!’}’ as a second parameter in the createElement inside the render/return and go through the trouble of writing ${this.props.weather} as a children parameter.

Generally speaking, you do not want to pass the props directly to the element type itself (div). Instead, the props should go down to the component/class where you can more explicitly control which props are utilized where.

This is why at the bottom of the snippet, you see the ReactDOM.render which takes care of passing down the props to the Weather Class and not the div.

Hyperscript

For those of you who hate using JSX due to the HTML nature of it, let’s look at an alternative to JSX: Hyperscript.

Here is an example usage:

You’ll notice that the way we create HTML tags such as div or h1 is already very different.

With the above example, you would essentially have a parent div element, with both h1 and h2 enclosed inside as children.

Also note that you can assign ID or Class to the HTML tags by using # or . respectively, following the conventions of CSS.

As far as the “h” that’s being used to create elements, here are the parameters:

h(componentOrTag, properties, children)

• componentOrTag - Can be a React component OR tag string with optional css class names/id.
• properties - An object containing the properties you'd like to set on the element.
• children - An array of h() children or a string. This will create child elements or a text node, respectively.

Thus, Hyperscript offers a more Javascript-like approach to running React without having to deal with the HTML components.

Hyperscript-Helpers

Hyperscript-helpers are npm extensions that help reduce some of the code syntax in React.

Hyperscript-helpers can be used for Hyperscript and JSX.

Take a look:

Using Hyperscript-helpers, you can define which of the elements/tags you would like to use and set them on the require(‘hyperscript-helpers’). As you can see in this example, because we’re using <ul> and <li> tags, we required these at the top.

Having done so, you can now utilize hyperscript-helpers as seen at the bottom of the code, simply using ul(arguments) or li(arguments) instead of writing them separately inside as parameters.

If you’re interested in trying it out, all you have to do is:

npm install hyperscript-helpers

Then require the necessary assets on the top of the code, and you’re good to go.

In conclusion, there seems to be a mixed crowd between using JSX and using Hyperscript. At the end of the day, the best syntax is the one that you are most comfortable with, as long as you can solve your problems in an efficient, logical way using either of the tools at your disposal.