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"

#webdev #javascript #react #node

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 repl.it

🕹 Playground on repl.it

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="/">
      <Get>
        <Res.Header name="Cache-Control" value="public, max-age=31557600" />
        <Res.Render component={HomePage} />
      </Get>
      <Get path="/components" render={ComponentsPage} />
      <Router path="/api">
        <Post
          path="/status"
          json={{ msg: 'It is okay, bro' }}
          handler={(req) => console.log(req.originalUrl)}
        />
      </Router>
      <Get path="*" text="Not Found" status={404} />
    </Router>
  </App>
);

registerApp(ExpressApp);
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="https://ru.reactjs.org" />
</Get>

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

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

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

Components

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"

Conclusion

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

Latest comments (24)

Collapse
 
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!

Collapse
 
tamarack profile image
Tamarack •

Good stuff!

Collapse
 
skaboy profile image
Ska-boy •

React end, symbolically)

Collapse
 
kaithetrainer profile image
Mr Kai •

Informative and Nice Bro👊

Collapse
 
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

Collapse
 
amansaxena001 profile image
Amansaxena001 •

SSR frameworks be like are we in danger xD

Collapse
 
matjones profile image
Mat Jones •

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

 
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
RaulUrtecho •

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

Collapse
 
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.

View full discussion (24 comments)

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