Deno에서 React Server Side Rendering 한 이야기

5344 단어 ReactTypeScript에서프런트 엔드자바스크립트

개요



최근 무언가와 주목이 모여 있는 Deno입니다만, 무려 Deno에서 jsx가 움직이는 것 같기 때문에 Deno에서 React가 움직일까 해 보았습니다.

Deno는 무엇입니까?



이것에 대해서는, 지금 Deno Advent Calendar에서 @kt3k

Deno 설치



어쨌든 Deno를 소개합시다!
brew install deno

설치가 완료되면, deno -v 로 아래와 같은 화면이 나오면 설치 완료입니다.
Deno 란 무엇입니까?

코드를 작성해 보자.



조속히 코드를 써 가고 싶습니다만, 이번 2개 파일을 만듭니다.
  • index.tsx
  • App.tsx

    • App.tsx



    여기는 평소와 같이 react 컴포넌트입니다. 하나 다른 것은 Deno는 node_modules가 아니라 직접 다운로드하는 방식이군요. 나중의 코드는 항상 그렇습니다.

    Apptsx
    import React from 'https://dev.jspm.io/react';

const App = () => <div>Hello Deno React</div>;
export default App;

    index.tsx



    다음으로 index 파일이지만,

    index.tsx
    import { createRouter } from 'https://denopkg.com/keroxp/servest/router.ts';
import React from 'https://dev.jspm.io/react';
import ReactDOMServer from 'https://dev.jspm.io/react-dom/server';

import App from './app.tsx';

const router = createRouter();
router.handle('/', async req => {
  await req.respond({
    headers: new Headers({
      'content-type': 'text/html; charset=UTF-8',
      status: 200,
    }),
    body: ReactDOMServer.renderToString(
      <html>
    <head>
          <title>deno react ssr</title>
    </head>
    <body>
          <App />
    </body>
      </html>
    )
  })
});

router.listen(':8000');

    파일 준비는 이상입니다.
    이제 다음 명령을 실행한 다음 http://localhost:8000/에 액세스해 봅시다!
    deno index.tsx --allow-net // denoの起動

    이제 화면에 Hello Deno React가 나오면 성공입니다!
    Deno, 미래가 있습니다! 그럼!
    Tensorflow.js를 사용하여 프런트 엔드에서 이미지 분석
    Hello, OpenGL - OpenGL × GLFW3 × C++의 기억.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage