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

Top comments (24)

Collapse
 
vonheikemen profile image
Heiker

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

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.

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
 
feco2019 profile image
Dimitris Chitas

Nice work mate

Collapse
 
devhammed profile image
Hammed Oyedele

Nice work!

Create an organization on GitHub instead.

Collapse
 
orkhanjafarovr profile image
Orkhan Jafarov

Thanks mate, On it :)

Collapse
 
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 :)

Collapse
 
vonheikemen profile image
Heiker

Reminds me of this.

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

Collapse
 
myzel394 profile image
Myzel394

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

Collapse
 
orkhanjafarovr profile image
Orkhan Jafarov
Collapse
 
codebyjustin profile image
Justin

interesting.

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

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

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