그래서... 저는 오늘 아침에 아이디어를 가지고 일어났습니다. "반응으로 반응 가능한 노드 HTTP/s 서버를 만드는 것은 매우 흥미로울 수 있습니다."make - 이제 express.js의 React warp를 사용하여 반응 가능한 HTTP/s 서버를 만들 수 있습니다.

참고: 이 게시물을 읽는 데 관심이 없고 완전히 괜찮은 React를 사용하여 HTTP/s 서버를 만들고 싶다면 슬림 버전의 경우 npm install @react-express/server 또는 npm install @react-express/server-core를 사용하여 지금 설치할 수 있으며 예제를 찾을 수 있습니다. react-express github에서 사용하십시오.

❓ 유용한 이유

React의 마법은 모든 것이 상태 기반 반응 가능하다는 것입니다.
반응에 익숙하지 않다면 check it out 가장 큰 웹 라이브러리/프레임워크(사용자 기반 측면에서)이고 제 생각에는 최고의 것입니다 :)
그래서... - 내가 보기에 React의 모든 이점(상태 저장, 반응 가능, 멋진 구문, 구성 요소 기반 등...)은 서버 세계에도 적용될 수 있습니다.
익스프레스 서버는 훌륭하지만 제 생각에는 너무 정적이고 React가 그것을 바꿀 수 있다고 생각합니다!!

❗ 시작하기

프로젝트 내에서 npm install @react-express/server를 실행하여 서버에 "@react-express/server"를 설치하는 것으로 시작하겠습니다.

우리는 JSX를 사용하고 있으므로 프로젝트 내에서 JSX를 활성화하도록 합시다. 방법을 배울 수 있습니다using bable 및 using typescript.

이제 코딩을 시작하겠습니다! 프로젝트 내에 http 서버를 마운트하려면 코드에 다음 줄을 추가해야 합니다.

import React from "react";
import { Render, Server, Route } from "@react-express/server"; // import the Render method and all the simple routing components 

Render(
  <Server listen port={2345 /* the port we want to listen on */}>
    <Route path={"/" /* the path we cant to handle requests from */} get={(req, res) => res.send("hello world") /* send "hellow world" response to every request at "http://localhost:2345/" */} />
  </Server>

이제 막 hello-world HTTP/s 서버를 만들었습니다.

고급 라우팅:

...
import {..., Router } from "@react-express/server"; // import the Router component

const posts = ["hello", "world 🗺"];

// applay middlewares
const use = (app) => {
  app.use(express.json(), express.urlencoded({ extended: true }));
};

Render(
  <Server listen port={2345}>
    <Router reference={use} path="/posts">
      <Route path="/" get={(req, res) => res.send(posts) /* get all posts*/} />
      <Route
        path="/:id"
        get={(req, res) => res.send(posts[req.params.id])}
        delete={(req, res) => posts[req.params.id] = "empty"}
        />
    </Router>
  </Server>

이제 가능하기 때문에 반응 구성 요소를 클라이언트에 렌더링합니다.

...
import {..., ReactRoute } from "@react-express/server"; // import the Render method and all the simple routing components 

const posts = ["hey", "bey", "hello", "world 🗺"];

// applay middlewares
...

Render(
  <Server listen port={2345 /* the port we want to listen on */}>
    <Router reference={use} path="/posts">
      <ReactRoute >{
         () => (
           {posts.map((post, index) => (
             <li
              style={{
                color: `#${Math.floor(Math.random() *16777215).toString(16)}`,
                     }}
                key={index}
            >
               <h1>{post}</h1>
            </li>
          ))}
         )}
      </ReactRoute>
      <Route
        path="/:id"
        get={(req, res) => res.send(posts[req.params.id])}
        delete={(req, res) => posts[req.params.id] = "empty"}
        />
    </Router>
  </Server>

결과:

☯ 기여하거나 레포를 확인하십시오.

React에서 서버를 작성한다는 아이디어가 매력적이라면 언제든지 다음 저장소를 확인하십시오.

슈무엘히즈미 / 반응 풀스택

전체 스택 React 애플리케이션을 만들기 위한 패키지 세트

리액트 풀스택

"React Fullstack"은 React를 기반으로 하는 풀스택 애플리케이션을 만들기 위한 라이브러리 모음입니다!
"React Fullstack"메인 패키지는

Fullstack 또는 npm i @react-fullstack/fullstack

express server npm i @react-fullstack/server-express

View on GitHub


코드 베이스는 매우 작고 간단하므로 기여하고 싶다면 자유롭게 풀 리퀘스트를 열 수 있습니다 :)