DEV Community

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

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

orkhanjafarovr profile image Orkhan Jafarov ・2 min read

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

Discussion (28)

pic
Editor guide
Collapse
feco2019 profile image
Dimitris Chitas

Nice work mate

Collapse
lukaszahradnik profile image
Lukáš Zahradník

Why do you think this is a great idea? You are introducing another layer of abstraction with constructs (JSX), that aren't suitable for tasks like this.

As an experiment/joke/esoteric solution it's alright I guess.

Collapse
orkhanjafarovr profile image
Orkhan Jafarov Author

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
vonheikemen profile image
Heiker

Reminds me of this.

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

Collapse
lukaszahradnik profile image
Lukáš Zahradník

Nope, you can go back to year 2000 and use xml instead, if you like syntax like this.

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 Author

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

Thread Thread
lukaszahradnik profile image
Lukáš Zahradník • Edited

It's not really a fair comparison. Your XML-like syntax is used for presentation/view layer which I have nothing against and it is a suitable use-case, for logic components it's a terrible idea.

Thread Thread
orkhanjafarovr profile image
Orkhan Jafarov Author

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
devpato profile image
Comment marked as low quality/non-constructive by the community. View Code of Conduct
Pato • Edited

Dude, if you don't like it, then don't make negative comments. Nobody is telling you to use it! Orkhan decided to create something interesting. In the conclusion says "experimental" meaning he is playing with this and learning a lot in the process. You have posted 103 comments on dev.to and not even one is a positive one. All your comments seems to try to show that you are "smarter" than others. I invite you to start contributing to the community instead of just providing negativity. I don't know if you are confusing negative comments with feedback.

Collapse
devhammed profile image
Hammed Oyedele

Nice work!

Create an organization on GitHub instead.

Collapse
orkhanjafarovr profile image
Orkhan Jafarov Author

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 Author

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

Collapse
myzel394 profile image
Myzel394

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

Collapse
orkhanjafarovr profile image
Collapse
pjotre86 profile image
pjotre86

Nice experiment. But.
Why on earth? 😂

Collapse
codebyjustin profile image
Justin

interesting.

Collapse
taimoorkhan profile image
Taimoor khan

Really man this is what I was looking for❤

Collapse
amansaxena001 profile image
Amansaxena001

SSR frameworks be like are we in danger xD

Collapse
nans profile image
Nans Dumortier

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

Collapse
matjones profile image
Mat Jones

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

Collapse
kaithetrainer profile image
Mr Kai

Informative and Nice Bro👊

Collapse
skaboy profile image
Ska-boy

React end, symbolically)

Collapse
tamaraabells profile image
TamaraAbells

Good stuff!

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!