DEV Community

Cover image for ⚡️Reactend "The story of react.js on backend"
Orkhan Jafarov
Orkhan Jafarov

Posted on

⚡️Reactend "The story of react.js on backend"

Hey guys!

As I promised in my previous article. Here's the project/framework to build your React-like http-server.
@reactend/express repo link

What's that?

  • Node.js http-server based on React-Components
  • Express.js inside
  • Get, Post, Delete and etc. components to use router method
  • Get(render) and Res.Render to render your regular React DOM Components
  • useContext(ReqResContext) hook to access req, res
  • Support styled-components
  • Built-in logger (morgan)
  • Middleware component in Router and its Routes
  • handler prop in Route components to use as regular controller

and many many features that should be documented...

Get started

Run this to create reactend project on your local machine

npx create-reactend my-app
Enter fullscreen mode Exit fullscreen mode

Play with that on

🕹 Playground on

Code Example

import React from 'react';
import { resolve } from 'path';

import { registerApp, App, Static, Router, Get, Post, Res, Logger } from '@reactend/express';

const ExpressApp = () => (
  <App port={process.env.PORT || 8080}>
    <Static publicPath={resolve(__dirname, '/public')} />
    <Logger mode="dev" />
    <Router path="/">
        <Res.Header name="Cache-Control" value="public, max-age=31557600" />
        <Res.Render component={HomePage} />
      <Get path="/components" render={ComponentsPage} />
      <Router path="/api">
          json={{ msg: 'It is okay, bro' }}
          handler={(req) => console.log(req.originalUrl)}
      <Get path="*" text="Not Found" status={404} />

Enter fullscreen mode Exit fullscreen mode

You can use this way too

import cors from 'cors';
<Middleware handler={cors()} />;
Enter fullscreen mode Exit fullscreen mode

Use Res.* components

<Get path="/redirect">
  <Res.Redirect statusCode={301} path="" />

<Post path="/json">
  <Res.Status statusCode={401} />
  <Res.Content json={{ msg: 'No Access' }} contentType="application/json" />

<Get path="/send-file">
  <Res.SendFile path={resolve('public/code-example.png')} onError={console.log} />

<Get path="/render">
  <Res.Render component={() => <h1>Shut Up And Take My Money!</h1>} />
Enter fullscreen mode Exit fullscreen mode


Note. This minor description for now (Docs is on the way)

<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)
<Middleware /> - Middleware (props: handler)
<Logger /> - morgan logger (props: mode, disabled)
<Res /> - Response components
<Res.Render /> - Render (props: component)
<Res.Content /> - Response send (props: json, text, contentType)
<Res.Status /> - Response Status (props: statusCode)
<Res.SendFile /> - Response Send File (props: path, options, onError)
<Res.Redirect /> - Redirect (props: path, statusCode)

What is planning?

  • Done with Docs
  • Work on fixes/updates
  • Write an article about "How it works inside"


Just to be clear. It's not a production-ready product and it's not Next.js or whatever. Reactend is an experimental project to integrate React into Node.js server. But I'm working on it and trying to nail it. Let see :)

Follow me on twitter @orkhanjafarovr

Cheers 🎉✨,
Orkhan Jafarov

Top comments (28)

vonheikemen profile image

Oh, I didn't say I liked it. I find it fascinating (and horrifying) how people these days are trying to use XML-like syntax.

Also, where is that time machine you speak of?

Thread Thread
orkhanjafarovr profile image
Orkhan Jafarov

Exactly! Mobile native apps with XML-like syntax? The worst idea ever, they said

orkhanjafarovr profile image
Orkhan Jafarov

Just an experimental project as I described at Conclusion part. React Native was experimental too and many other uncommon abstractions and ideas. I’m not out of understanding how Nodejs/httpserver/backend works and best practices. Yes, of course it’s not a great idea at all, I didn’t say that. But as uncommon solution it’s interesting to go deeper.

cliffordfajardo profile image
Clifford Fajardo • Edited

Hey Lukas,
Its an experiment 🧪 - the same arguments can be said about other popular declarative languages. Even though this project doesn't have widespread popularity like React or technologies like HTML its a awesome cool project in my opinion

"that aren't suitable for tasks like this"

  • SQL:
    • when first released people initially didn't like declarative code, since it was yet another abstraction. But would you prefer to manually write up the the highly optimized code from hand that SQL (or any other DB) creates for you during the parsing phase, which then gets analyzed re-written by the query optimizer?
  • HTML/CSS: same here. Id prefer writing this declarative code any day then writing the imperative code which would involve tons of loops, if/else statements etc

When you have a higher level abstraction like this, the underlying code can change without the userland code changing. Maybe today this JSX looking code spits out javascript code, but nothing is stopping people from converting the JSX input into Rust or whatever compile target you wish

Many people and companies are already doing stuff like this (abstracting the imperative code with declarative code) at scale ...Google, Facebook you name it

This project is in its infancy; there are pros and cons to imperative and declarative languages

feco2019 profile image
Dimitris Chitas

Nice work mate

devhammed profile image
Hammed Oyedele

Nice work!

Create an organization on GitHub instead.

orkhanjafarovr profile image
Orkhan Jafarov

Thanks mate, On it :)

devhammed profile image
Hammed Oyedele

I would like to be part of this innovation, I have good experience working with react-reconciler.

Thread Thread
orkhanjafarovr profile image
Orkhan Jafarov

oh, that's awesome. Email me pls :)

vonheikemen profile image

Reminds me of this.

We're getting closer. Someday people will find this normal.

myzel394 profile image

This is what we all waited for. Is it on Github?

orkhanjafarovr profile image
Orkhan Jafarov
codebyjustin profile image


taimoorkhan profile image
Taimoor khan

Really man this is what I was looking for❤

orkhanjafarovr profile image
Orkhan Jafarov

I meant XML-like syntax itself, XML elements are just blocks and everything can be block-based, the elements can contain any code inside and for harder solutions you can pass any handler with logic. The main idea (even it's experimental) is to isolate parts of logic in components and put backend in declarative way. Thanks for feedback btw :)

Thread Thread
raulurtecho profile image

That is why I love Flutter the UI and logic are only Dart code.

amansaxena001 profile image

SSR frameworks be like are we in danger xD

nans profile image
Nans Dumortier

That's an interesting approach!
Keep us posted on how you progress with it 😁

matjones profile image
Mat Jones

My only question is: for the sake of all that is holy, why???

djcarrillo6 profile image
David Carrillo Jr.

This is a very interesting idea!! Experimental development can render unexpected surprises! Well Done! Looking forward to reading the docs!

kaithetrainer profile image
Mr Kai

Informative and Nice Bro👊

Some comments may only be visible to logged-in visitors. Sign in to view all comments.