Hey there! One more implemented crazy idea for React
Idea
So, long time ago when I was researching react custom renderer, I had a crazy idea to use it for Node.js server/backend. Finally, I've decided to try.
Disclaimer ⚠️
- It's not fully-ready solution (in process)
- Don't use it for production
- Yes, I know about scalability, architecture and etc. This is just an experimental project. Relax 🛀
How it works?
It works with express.js framework to run Node.js server. Custom renderer is building express-structured app based on React Components.
How it looks like ?
Base code example
import React from "react";
import ReactExpress from "./renderer";
const HomePage = () => <h1>Welcome to home page</h1>;
const AboutPage = () => <><h1>About Company</h1><p>Bla bla</p></>;
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 />);
Instances
There're components for express.js instances like router, static, get, post and etc.
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)
...still in process
Let's go deep into Route Component
Our route components are <get />, <post />, <delete /> and etc.
They have the same structure.
Examples:
// Response json
<get path="/status" content={{ msg: "I\'m okay" }} />
// Response SSR React-Component
<get path="/homepage" content={() => <h1>Welcome to home page</h1>} />
// Response error
<get path="/not-found" content="Page not found" status={404} />
// Response with handler
<get path="/posts/:id" handler={(req,res) => res.send(`id is ${req.params.id}`)} />
// The same for all methods
<post path="/posts/:id" handler={(req,res) => res.send(`id is ${req.params.id}`)} />
React API
Currently it's possible to use React Context API.
For example there's a way to get handler's request and response arguments. It used in the project's demo
import { context } from "../../context";
export const TopNav = () => {
const { req, res } = useContext(context);
return (
<TopWrapper currentPath={req.originalUrl}>
<Logo href="/"> </Logo>
<NavItem href="/">Home</NavItem>
<NavItem href="/components">Components</NavItem>
<NavItem href="https://github.com/gigantz/react-xpress">Github</NavItem>
</TopWrapper>
);
};
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.
Future of the components
I have a plan to make it something like this
// Add components from the lib
import {Router, Middleware, Res, Get, Post} from 'react-xpress';
// Make more component based structure
<Get path="/not-found">
<Res.Status code={404} />
<Res.Content text="Page is not found" />
</Get>
// Using Middlewares
<Get path="/user">
<Middleware handler={checkToken}>
<Res.Status code={401} />
<Res.Content json={{ status: 401, msg: "No access" }} />
</Middleware>
<Res.Content>
<UserPage />
</Res.Content>
</Get>
...
There're more crazy ideas is in process.
Demo
Here's a working prototype - http://react-xpress-demo.herokuapp.com/
Its Github repo - https://github.com/gigantz/react-xpress
Conclusion
Feel free to contact me and contribute the project. It's just on its way and just be followed to get updates. Hopefully we'll deliver better product soon. For now you can easily clone the repo and try it.
I'm also planning to write an article about react custom renderer. I hope you like this kind of experiments.
Cheers 🎉✨,
Orkhan Jafarov
Latest comments (45)
What a horrible day to have eyes.
What's the goal here? Just have a node server serve HTML? Like ReactDomRender?
Forwarded ✨
dev.to/orkhanjafarovr/comment/1bc15
hype post just to trigger people
🧐 Looks Interesting! 😮
How better is compared to Next.js?
This one is http server that described with jsx. It can render regular react dom components when you pass it to get response (like a template engine does)
I’m working on its package and it will be possible to play with that in sandbox.
Oh I see the difference is declaring with JSX... ok.
But at the end will do the same SSR, right?
It gonna do only SSR for now, it's more about backend/http-server part than frontend
I like JSX... looks nice =)
not the same purpose
Considering rendering React in server side, Nextjs does this. What Am I missing?
This is adding another level of abstraction on top of writing vanilla javascript code to generate a server code; so instead of writing the code that looks the your typical functional that looks like an express handler, you'd write this it seems
react-express -> spits out server infrastructure code
Side note: I really appreciated the power of declarative languages and built a better mental model on the when/why you would do this after reading Ch2 of Designing Data Intensive Applications by Martin Kleppman
A declarative query language can be more attractive because:
it is typically more concise and easier to work with than an imperative API
But more importantly, it also hides implementation details of the underlying code making it possible for the system to introduce performance improvements without requiring any changes to userland code Other examples
This is cool! ReactPHP might be a more relevant name thought JK :P
Bdw, What rendering engine did you use?
Yes, that’s exactly as Hammed described. The solution is component based http server and you can pass your regular react dom components and render them. Use useContext hook to get req, res in the components you gonna pass in it
Did you know why you need to use
react
andreact-dom
when building React.js projects?Because React just provides the logic but depends on a renderer to actually output stuff which is where
react-dom
comes in to render the UI to the browser DOM.There is a lesser-known package called
react-reconciler
which is the packagereact-dom
is using and it is what you will use to create your own custom React.js renderers.Good callout @devhammed !
why though
Interesting and really cool! I'm in stars
I am not sure if even yourself are aware of how many problems such a solution solves.
I am working on a similar concept (it's VueJS and neoan3 instead of React and express, but the principal is the same). Maybe once you solved your components this will give you some ideas: youtu.be/FBLR28qquCI
Smart enough i like it. 👏👏
Can you tell me how to start with renderer stuff cuz i wanna dive into those stuff.
Interesting
So you’re turning React into PHP aye?
It’s something like, “build your server with only html skills” lol. Part of the truth, but I’m working on its updates and sandbox. Soon you’ll be able to play with that
The circle of life :)
Such a good banner image
This is so Cool and I have strong interest
Some comments may only be visible to logged-in visitors. Sign in to view all comments.