README
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)
andRes.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
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>
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)
Contact me
Email me if you have any idea and you would like to be contributor orkhanjafarovr@gmail.com
Cheers ✨