ReactXpress

React renderer to build Node.js server

Why?

It's the only crazy idea to use React to structure Backend on Node.js.

How it works?

It works with express.js framework to run Node.js server. Custom renderer we have is building express structure app from React Components.

Code Example

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

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

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 />);

How to use

Clone the repo
npm install
Run dev mode - npm run dev
Do all changes in ./src folder as it's not library yet.

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)

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.

Contact me

Email me if you have any idea and you would like to be contributor orkhanjafarovr@gmail.com

Resources:
https://dev.to/orkhanjafarovr/express-in-react-react-backend-whut-4lkg

koussay-khelil/react-xpress