React: The great Abstraction
Tags: javascript, deno, servers, madscience
Published: 2021-03-17 22:32:02

---
title: React: The great Abstraction
published: true
date: 2021-03-04 21:34:01 UTC
tags: javascript,deno,servers,madscience
canonical_url: https://medium.com/@hyper63/react-the-great-abstraction-c2c67131746b
---

React + JSX was launched at JSConf in 2013, I was one of the fortunate Javascript developers to attend the conference, and I will say the reaction and response on the initial announcement was pessimistic at best. The JS nation revolted against this XML like syntax in their JS for like 6 months, then the rest is history. React has grown into the most popular front-end library in the community.

#### React the planet! 🌎

> Hack the planet was the nerd rallying cry in the movie Hackers 1995

Over the last 8 years, we have seen React implemented in just about every presentation layer you can think of, mobile, tvs, terminal, etc. We have also seen React implement music, animations, and more. React creates a declarative composable model on top of Javascript.

#### Why not servers? 🖥️

There is a project called React-Nil, this project simply lets you create react components that return null. What? What good does that do? Well, this allows developers to use React on the server.

#### Mad Science 🧬

> Disclaimer: I have no idea if this is a good idea or not, but lets have some fun! 🤓

What if we could use React to express our server API?

```
render(
  <App>
    <Request path="/" handler={hello} />
    <Listen port={3000} />
  </App>
)
```

Why not? 🤷

With React-Nil we can!

> In this demo we are using Deno 1.8 with Opine web framework

create new folder called :hyper-sauce

```
mkdir hyper-sauce
cd hyper-saurce
touch hyper.js
touch mod.jsx
touch import_map.json
```

setup our dependencies in import\_map.json

```
{
  "imports": {
    "react": "https://cdn.skypack.dev/react?dts",
    "react-nil": "https://cdn.skypack.dev/react-nil?dts",
    "opine": "https://deno.land/x/opine@1.1.0/mod.ts"
  }
}
```

modify hyper.js with our server components

```
import React from 'react'
import opine from 'opine'

export function Listen({app, port}) {
  app.listen(port)
  console.log('server listening on port ', port)
  return null
}

export function Request({app, method='get', path="/", handler}) { 
  app[method](path, handler)
  return null
}
```

pretty cool, we are writing react functional components

```
export function App(props) {
  const app = opine()
  return React.Children.map(props.children, child => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { app })
    }
    return child
  })
}
```

save hyper.js

#### mod.jsx

> NOTE: Deno automatically handles JSX or TSX, just name your file with .jsx or .tsx extension. ✨

```
import React from 'react'
import { render } from 'react-nil'
import { App, Request, Listen } from './hyper.js'

render(
  <App>
    <Request path="/" handler={hello} />
    <Listen port={3000} />
  </App>
)

function hello(req, res) {
  res.send('Hello from React on the Server!')
}
```

Let’s run it!

```
deno run --allow-read --allow-net --import-map=./import_map.json mod.js
```

Open up a browser and navigate to [http://localhost:3000](http://localhost:3000)

You should see ‘Hello World’!

#### One step further

How about we take this a step further, and instead of passing a handler function, lets use a child component.

```
render(
  <App>
    <Request path="/">
      <Show />
    </Request>
    <Request path="/_add" method="POST">
      <Inc />
    </Request>
    <Request path="/_sub" method="POST">
      <Dec />
    </Request>
  </App>
)
```

We can modify the Request component to pass a handler function to the child components.

```
export function Request({app, method="get", path="/", children}) {
  return React.Children.map(children, 
    child => {
      if (React.isValidElement(child)) {
        return React.cloneElement(child, { 
          handler: fn => app[method](path, fn)
        })
      }
      return child
    })
}
```

Then we can implement our handlers using components:

```
function Hello({handler}) {
  handler((req, res) => res.send('Hello!'))
  return null
}
```

You can run the full demo at [https://github.com/hyper63/react-server-demo.git](https://github.com/hyper63/react-server-demo.git)

#### Summary

React is a powerful abstraction, with context, hooks, suspense, and so much more, it could possibly be useful on the server, with the React-Nil library we can experiment and push the boundaries and see what shakes out!