First C4C service Cross4Auth is ready. Here's how to use it.

In 2013, frontend developers were mesmerized by this new framework called React. Because, unlike jQuery, it didn't aim to ease manipulating DOM, but rather, it was bringing DOM to JavaScript. With a technology called JSX (JavaScript XML), you could write HTML or your custom tags in JavaScript. This allowed developers to write client JavaScript code in a declarative way.

In this story, what I will do is, by using the same logic in React, I will write the Express code in a declarative way. Yes, I will use JSX in my backend code and create a web server from scratch. You can read more about Express here.

For this task, I need a parser so that I can convert the JSX o JavaScript. Here’s the holy Babel. It is very capable and can convert almost any flavor of JavaScript. From TypeScript to ES6 and JSX.

How do JSX and Babel Work?

The logic of React is pretty simple and that’s why it is this popular. In React, to create a node in DOM, you have to call React.createElement function over and over with appropriate parameters which are the component name, attributes, and children.

React.createElement("h1", { id: "can" },"This is a header!")

However, since this function is called every time a component is created, React took it out and wrote it itself, under the hood.

So, if you write the JSX code below, Babel converts it to the JavaScript version on top.

<h1 id="can">This is a header!</h1>

However, the use of Babel is not limited to React JSX. Besides, it allows you to create your own version of JSX according to your needs, with a custom pragma. Pragma is the name of the function Babel uses while parsing the JSX.

For instance, in React, the pragma is React.createElement. With a special comment, you can change this and thus, the behavior of JSX.

Integrating JSX To Express

This part is where things get interesting. I will create my own pragma to handle Express code and create my routes in an HTML-like declarative way.

First, I need to create the necessary components, which are,

• App: The root of our application.
• Router: The router of the Express app.
• Get, Post, Delete, Put: Action/Route methods.

These components will be unique strings to pass as the first parameters to the pragma because all of the logic will be encapsulated in the pragma.

So I will simply assign components to strings using array destructuring.

const [App, Router, Get, Post, Delete, Put] = [
	"APP",
	"ROUTER",
	"GET",
	"POST",
	"DELETE",
	"PUT",
];