Deno에서 React SSR 애플리케이션 작성
16360 단어 reactdenotypescriptjavascript
As featured in by Ryan Dahl.
Deno v1이 출시되어 JavaScript 커뮤니티에서 많은 관심을 받고 있습니다.
아직 접촉하지 않은 사람들에게 Deno는 웹 브라우저 이외의 자바스크립트와 TypeScript에 사용되는 새로운 실행이다.V8 JavaScript 엔진을 기반으로 하고 Rust로 작성되며 Node의 원래 창시자인 Ryan Dahl에서 만듭니다.js.
Deno와 그 사명에 대한 정보를 더 알고 싶으면 창작자가 작성한 Deno 1.0 launch blogpost을 보십시오.
배경 설명이 끝났습니다. Deno에서 React SSR 응용 프로그램을 작성하십시오!
장치
모든 기본 패키지 설치 프로그램과 공식 설치 스크립트를 사용하여 Deno를 설치할 수 있습니다.다음은 몇 가지 주요 설치 방법입니다.
Shell(Mac、Linux):
curl -fsSL https://deno.land/x/install/install.sh | sh
iwr https://deno.land/x/install/install.ps1 -useb | iex
brew install deno
choco install deno
개시하다
Please note that Deno is rapidly developing, which can quickly make articles like this one become outdated. Always check to see if there are newer versions of the modules used to ensure the code works for the latest version of Deno.
Deno가 설치되면
deno 명령으로 실행할 수 있습니다!deno help을 사용하여 제공된 명령을 탐색합니다.나중에 이 명령을 사용하여 React SSR 응용 프로그램을 실행합니다.우선 프로젝트를 하나 만들자!
새 프로젝트 디렉토리에서는 세 개의 파일을 만듭니다.
.
├── app.tsx
├── client.tsx
└── server.tsx
app.tsx은 우리의React 구성 요소 코드를 포함하고 server.tsx은 우리의 모든 서버 코드를 포함하며 client.tsx은 우리 클라이언트 패키지의 입구점이 될 것입니다.올바른 파일 확장자를 가져오지 않도록 주의하십시오!클라이언트 패키지 작성
client.tsx 파일에 다음 코드를 추가하여 클라이언트 포털을 설정합니다.import React from "https://dev.jspm.io/[email protected]";
import ReactDOM from "https://dev.jspm.io/[email protected]";
import App from "./app.tsx";
(ReactDOM as any).hydrate(
<App />,
//@ts-ignore
document.getElementById("root"),
);
"react"에서 가져오는 것이 아니라 URL에서 가져오는 것입니다...!?그렇습니다. Deno에서는 내보내기 모듈의 URL과 상대 또는 절대 파일 경로에서 모듈을 가져올 수 있습니다.이것은 웹에서 GIST,GitHub 코드를 쉽게 얻을 수 있고 이미 발표된 버전과 연결되지 않는다는 것을 의미합니다. 만약
main 지점에서 당신이 시도해야 할 것이 있다면 직접 가져올 수 있습니다.여기에는 JSPM에서 React와 React DOM을 가져오지만, ES 모듈로 제공하는 모든 CDN을 사용할 수 있습니다.CDN 대안을 보려면 Deno website을 참조하십시오.
React 라이브러리를 가져온 후에 프로그램 구성 요소를 가져왔습니다. (아직 작성하지 않았습니다.)마지막으로 React DOM hydrate 방법으로 코드를 설정하여 우리의 응용 프로그램을 보여 줍니다.
이제 Deno로 첫 번째 React 구성 요소를 작성합시다!
React 구성 요소 작성
app.tsx:// @deno-types="https://raw.githubusercontent.com/Soremwar/deno_types/4a50660/react/v16.13.1/react.d.ts"
import React from "https://dev.jspm.io/[email protected]";
const App = () => {
const [count, setCount] = React.useState(0);
return (
<div>
<h1>Hello Deno Land!</h1>
<button onClick={() => setCount(count + 1)}>Click the 🦕</button>
<p>You clicked the 🦕 {count} times</p>
</div>
);
};
export default App;
우선, 우리는
React을 가져옵니다. 우리가 어떤 React 프로그램에서 사용하듯이. 그러나, 우리도 @deno-types 알림 주석을 사용했습니다.이것은 데노에게 가져오는 모듈의 TypeScript 형식인 깔끔함을 어디서 찾을 수 있는지 알려 줍니다.이 유형의 프롬프트를 생략하도록 선택할 수 있지만 TypeScript에서 직접 유형(가져오거나 사용자 정의)을 요청합니다.또는 파일 확장자를
.jsx으로 변경하면 TypeScript를 완전히 사용하지 않아도 됩니다.Deno는 TypeScript와 JavaScript를 모두 지원합니다.마지막으로, 우리는
App이라는 작은 React 구성 요소를 만들었습니다. 갈고리로 단추를 누르는 계수기를 만들었습니다. 간단합니다.전반적으로 NodeJS에서 React 구성 요소를 작성하는 것은 큰 차이가 없다.쓰기 서버
서버에 대해 Deno 웹 프레임워크 Opine을 사용할 것입니다. 이것은 NodeJS에서 자주 사용하는 ExpressJS 웹 프레임워크의 포트입니다.
다음은
server.tsx에 사용할 코드입니다.// @deno-types="https://raw.githubusercontent.com/Soremwar/deno_types/4a50660/react/v16.13.1/react.d.ts"
import React from "https://dev.jspm.io/[email protected]";
import ReactDOMServer from "https://dev.jspm.io/[email protected]/server";
import { opine } from "https://deno.land/x/[email protected]/mod.ts";
import App from "./app.tsx";
/**
* Create our client bundle - you could split this out into
* a preprocessing step.
*/
const [diagnostics, js] = await Deno.bundle(
"./client.tsx",
undefined,
{ lib: ["dom", "dom.iterable", "esnext"] },
);
if (diagnostics) {
console.log(diagnostics);
}
/**
* Create our Opine server.
*/
const app = opine();
const browserBundlePath = "/browser.js";
const html =
`<html><head><script type="module" src="${browserBundlePath}"></script><style>* { font-family: Helvetica; }</style></head><body><div id="root">${
(ReactDOMServer as any).renderToString(<App />)
}</div></body></html>`;
app.use(browserBundlePath, (req, res, next) => {
res.type("application/javascript").send(js);
});
app.use("/", (req, res, next) => {
res.type("text/html").send(html);
});
app.listen({ port: 3000 });
console.log("React SSR App listening on port 3000");
React, ReactDOMServer과 Opine 웹 프레임워크의 주요 의존항을 도입했다..tsx 확장자를 조심스럽게 포함합니다. NodeJS와 달리 Deno는 파일 확장자가 필요합니다.Deno.bundle() 방법을 사용하여 응용 프로그램에서 클라이언트 JavaScript 패키지를 만듭니다./browser.js 프로그램을 만듭니다.listen()에서 3000 방법으로 서버를 시작했습니다.React SSR 애플리케이션 실행
이제 다음과 같은
deno 명령을 사용하여 React SSR 애플리케이션을 실행할 수 있습니다.deno run --allow-net --allow-read --unstable ./server.tsx
자세한 내용은 Deno 매뉴얼의 Deno permissions 섹션을 참조하십시오.
예제 어플리케이션의 경우 서버가 네트워크에 액세스할 수 있도록 하기 위해
--allow-net이 필요합니다. --allow-read은 Opine 프레임워크에 필요합니다. (따라서 보기 기능을 사용하면 템플릿을 읽을 수 있습니다.) --unstable 로고를 사용하여 Deno.bundle() API를 사용할 수 있습니다. 이 API는 아직 미리보기 중입니다.http://localhost:3000/으로 가자!이제 브라우저에서 React SSR 애플리케이션이 실행되는 것을 볼 수 있습니다.😄
다음 단계
이것은 기본적인 서버와 응용 프로그램 설정일 뿐이지만, 현재까지는 기존 응용 프로그램을 Deno로 전환하는 데 많은 작업이 필요하지 않다는 것을 보고 싶을 것입니다.
모두 길드입니다!나는 너의 생각과 너의 데노에 대한 견해를 듣고 싶다. 너의 평론을 아래에 놓아라.
업데이트 29-06-2020: Deno의 진전이 매우 빠르고 앞에서 언급한 JSX의 모든 오류가 해결되었기 때문에 저는 본문에서 그것들에 대한 인용을 삭제했습니다!
업데이트 20-07-200: 만약에 Deno 1.2.0이 발표되기 전에 이 강좌를 따랐다면 업그레이드 후 URL과 관련된 몇 가지 오류가 발견되었을 것입니다.Deno 1.2.0은 std 라이브러리에 돌파적인 변화를 가져왔기 때문에 0.61.0 이전 std 버전의 모듈을 사용하면 오류가 발생할 수 있습니다!일반적으로 당신이 사용하고 있는 모듈이 더 높은 버전으로 업그레이드될 수 있는지 확인해 보세요. 만약 이것이 문제를 해결할 수 없다면 문제에 부딪힌 환매 협의에서 문제를 열어 보세요!
Reference
이 문제에 관하여(Deno에서 React SSR 애플리케이션 작성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/craigmorten/writing-a-react-ssr-app-in-deno-2m7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
