Github GitHub - reactend/reactend-express: React renderer to build Node.js serve...
source link: https://github.com/reactend/reactend-express
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
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 [email protected]
Cheers
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK