⚡️Reactend“后端 React.js 的故事”

嘿，大家好！

正如我在上一篇文章中承诺的那样。这是构建类似 React 的 http 服务器的项目/框架。
@reactend/express 仓库链接

那是什么？

基于 React-Components 的 Node.js http 服务器
内部的 Express.js
Get、Post、Delete 等组件使用路由器方法
Get(render)并Res.Render渲染常规的 React DOM 组件
useContext(ReqResContext) 钩子来访问req, res
支持styled-components
内置记录器（morgan）
路由器中的中间件组件及其路由
handler路由组件中的 prop 用作常规控制器

还有很多很多需要记录的功能......

开始

运行此命令在本地机器上创建 reactend 项目

npx create-reactend my-app

在 repl.it 上玩一下

🕹 repl.it 上的游乐场

代码示例

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

你也可以使用这种方法

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

使用 Res.* 组件

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

成分

注意：目前这只是一些小描述（文档正在制作中）

<App /> - 应用实例（props：port）
<Static />- 静态路由（props：publicPath、path、options）
<Router />- 路由器提供商（props：path）
<Get />, <Post /> and ...- 路由组件（props：path、content、handler、status）
<Middleware />- 中间件（props：handler）
<Logger />- morgan 日志记录器（props：mode、disabled）
<Res />- 响应组件
<Res.Render />- 渲染（props：component）
<Res.Content />- 响应发送（props：json、text、contentType）
<Res.Status />- 响应状态（props：statusCode）
<Res.SendFile />- 响应发送文件（props：path、options、onError）
<Res.Redirect />- 重定向（props：path、statusCode）

什么是规划？

文档已完成
修复/更新工作
写一篇关于“它内部是如何运作的”的文章

结论

需要说明的是，它并非生产级产品，也不是 Next.js 之类的。Reactend是一个实验性项目，旨在将 React 集成到 Node.js 服务器中。我正在努力完善它，希望一切顺利。拭目以待吧 :)

在 Twitter 上关注我@orkhanjafarovr

干杯🎉✨，
Orkhan Jafarov

文章来源：https://dev.to/orkhanjafarovr/reactend-the-story-of-react-js-on-backend-103h