Reactend / Express

React-like http-server on Nodejs

🕹 Playground on repl.it

📄 Reactend Template

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

You choose template (default: basic)

npx create-reactend my-app --template faker

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()} />;

<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>

<Get path="/faker">
  <Res.Faker
    length={10}
    locale="az"
    map={{
      fullName: "name.findName",
      avatar: "image.people",
      registeredAt: "date.past",
    }}
  />
</Get>

Components

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) <Res.Faker /> - Redirect (props: length, locale, map)

Contact me

Email me if you have any idea and you would like to be contributor [email protected]

Cheers ✨