⚡️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 …


This content originally appeared on DEV Community and was authored by Orkhan Jafarov

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


This content originally appeared on DEV Community and was authored by Orkhan Jafarov


Print Share Comment Cite Upload Translate Updates
APA

Orkhan Jafarov | Sciencx (2021-02-12T11:13:10+00:00) ⚡️Reactend “The story of react.js on backend”. Retrieved from https://www.scien.cx/2021/02/12/%e2%9a%a1%ef%b8%8freactend-the-story-of-react-js-on-backend/

MLA
" » ⚡️Reactend “The story of react.js on backend”." Orkhan Jafarov | Sciencx - Friday February 12, 2021, https://www.scien.cx/2021/02/12/%e2%9a%a1%ef%b8%8freactend-the-story-of-react-js-on-backend/
HARVARD
Orkhan Jafarov | Sciencx Friday February 12, 2021 » ⚡️Reactend “The story of react.js on backend”., viewed ,<https://www.scien.cx/2021/02/12/%e2%9a%a1%ef%b8%8freactend-the-story-of-react-js-on-backend/>
VANCOUVER
Orkhan Jafarov | Sciencx - » ⚡️Reactend “The story of react.js on backend”. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/02/12/%e2%9a%a1%ef%b8%8freactend-the-story-of-react-js-on-backend/
CHICAGO
" » ⚡️Reactend “The story of react.js on backend”." Orkhan Jafarov | Sciencx - Accessed . https://www.scien.cx/2021/02/12/%e2%9a%a1%ef%b8%8freactend-the-story-of-react-js-on-backend/
IEEE
" » ⚡️Reactend “The story of react.js on backend”." Orkhan Jafarov | Sciencx [Online]. Available: https://www.scien.cx/2021/02/12/%e2%9a%a1%ef%b8%8freactend-the-story-of-react-js-on-backend/. [Accessed: ]
rf:citation
» ⚡️Reactend “The story of react.js on backend” | Orkhan Jafarov | Sciencx | https://www.scien.cx/2021/02/12/%e2%9a%a1%ef%b8%8freactend-the-story-of-react-js-on-backend/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts