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)andRes.Renderto 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
-
handlerprop 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
Play with that 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);
You can use this way too
import cors from 'cors';
<Middleware handler={cors()} />;
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>
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)
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?
Exactly! Mobile native apps with XML-like syntax? The worst idea ever, they said
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.
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"
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
Nice work mate
Nice work!
Create an organization on GitHub instead.
Thanks mate, On it :)
I would like to be part of this innovation, I have good experience working with react-reconciler.
oh, that's awesome. Email me pls :)
Reminds me of this.
We're getting closer. Someday people will find this normal.
This is what we all waited for. Is it on Github?
✨ github.com/gigantz/reactend-express
interesting.
Really man this is what I was looking for❤
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 :)
That is why I love Flutter the UI and logic are only Dart code.
SSR frameworks be like are we in danger xD
That's an interesting approach!
Keep us posted on how you progress with it 😁
My only question is: for the sake of all that is holy, why???
This is a very interesting idea!! Experimental development can render unexpected surprises! Well Done! Looking forward to reading the docs!
Informative and Nice Bro👊
Some comments may only be visible to logged-in visitors. Sign in to view all comments.