Hey there! One more implemented crazy idea for React

Idea

So, long time ago when I was researching react custom renderer, I had a crazy idea to use it for Node.js server/backend. Finally, I've decided to try.

Disclaimer ⚠️

• It's not fully-ready solution (in process)
• Don't use it for production
• Yes, I know about scalability, architecture and etc. This is just an experimental project. Relax 🛀

How it works?

It works with express.js framework to run Node.js server. Custom renderer is building express-structured app based on React Components.

How it looks like ?

Base code example

import React from "react";
import ReactExpress from "./renderer";

const HomePage = () => <h1>Welcome to home page</h1>;
const AboutPage = () => <><h1>About Company</h1><p>Bla bla</p></>;

const ExpressApp = () => (
  <app port={8080}>
    <router path="/">
      <get content={<HomePage />} />
      <get path="*" content="Not Found" status={404} />
    </router>
    <router path="/company">
      <get path="/about" content={<AboutPage />} />
    </router>
    <router path="/api">
      <post path="/status" content={{ msg: "It is okay, bro" }} />
    </router>
  </app>
);

ReactExpress.render(<ExpressApp />);

Instances

There're components for express.js instances like router, static, get, post and etc.

Components

<app /> - App Instance (props: port)

<static /> - Static route (props: publicPath, path, options)

<router /> - Router-Provider (props: path)

<get />, <post /> and ... - Route component (props: path, content, handler, status)

...still in process

Let's go deep into Route Component

Our route components are <get />, <post />, <delete /> and etc.

They have the same structure.

Examples:

// Response json
<get path="/status" content={{ msg: "I\'m okay" }} />

// Response SSR React-Component
<get path="/homepage" content={() => <h1>Welcome to home page</h1>} />

// Response error
<get path="/not-found" content="Page not found" status={404} />

// Response with handler
<get path="/posts/:id" handler={(req,res) => res.send(`id is ${req.params.id}`)} />

// The same for all methods
<post path="/posts/:id" handler={(req,res) => res.send(`id is ${req.params.id}`)} />

React API

Currently it's possible to use React Context API.
For example there's a way to get handler's request and response arguments. It used in the project's demo

import { context } from "../../context";

export const TopNav = () => {
  const { req, res } = useContext(context);
  return (
    <TopWrapper currentPath={req.originalUrl}>
      <Logo href="/"> </Logo>
      <NavItem href="/">Home</NavItem>
      <NavItem href="/components">Components</NavItem>
      <NavItem href="https://github.com/gigantz/react-xpress">Github</NavItem>
    </TopWrapper>
  );
};

What is planning?

I work on it and I'm trying to improve it, even it's not a good idea to use this kinda renderer for real-world app. But It would be awesome to have contributors to make its DX much better.

Future of the components

I have a plan to make it something like this

// Add components from the lib
import {Router, Middleware, Res, Get, Post} from 'react-xpress';

// Make more component based structure
<Get path="/not-found">
  <Res.Status code={404} />
  <Res.Content text="Page is not found" />
</Get>

// Using Middlewares
<Get path="/user">
  <Middleware handler={checkToken}>
    <Res.Status code={401} />
    <Res.Content json={{ status: 401, msg: "No access" }} />
  </Middleware>
  <Res.Content>
    <UserPage />
  </Res.Content>
</Get>
...

There're more crazy ideas is in process.

Demo

Here's a working prototype - http://react-xpress-demo.herokuapp.com/
Its Github repo - https://github.com/gigantz/react-xpress

Conclusion

Feel free to contact me and contribute the project. It's just on its way and just be followed to get updates. Hopefully we'll deliver better product soon. For now you can easily clone the repo and try it.

I'm also planning to write an article about react custom renderer. I hope you like this kind of experiments.

Cheers 🎉✨,
Orkhan Jafarov