⚡️Reactend "The story of react.js on backend"
Tags: javascript, webdev, react, node
Published: 2021-02-12 11:13:10

---
title: ⚡️Reactend "The story of react.js on backend"
published: true
description: React-like http-server on Nodejs
tags: #javascript #webdev, #reactjs, #nodejs
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/1wvutowtou1l10cuen0n.png
---
Hey guys!

As I promised in [my previous article](https://dev.to/orkhanjafarovr/express-in-react-react-backend-whut-4lkg). Here's the project/framework to build your **React-like http-server**.
@reactend/express repo [link](https://github.com/gigantz/reactend-express)
<br />
## 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
```

<br />
### Play with that on repl.it
🕹 [Playground on repl.it](https://repl.it/@orkhanjafarov/reactend-playground?v=1)
<br />
## Code Example

```js
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);
```

<br />
## You can use this way too

```js
import cors from 'cors';
<Middleware handler={cors()} />;
```

## Use Res.* components
```js
<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>
```

<br/><br/>

## Components
_Note. This minor description for now (Docs is on the way)_<br/>
`<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](https://twitter.com/orkhanjafarovr)

Cheers 🎉✨,
Orkhan Jafarov