Vite, Typescript 및 Vercel로 React 18 사용해 보기

React 18의 새로운 기능은 무엇입니까?

이 기사의 최신 업데이트를 보려면 https://nnote.io/s/x4od5/react-18-with-vite-and-vercel을 방문하십시오.

새로운 버전의 React - React 18 alpha가 나왔습니다. ReactJS.org에서:

구성 요소 동작에 대한 기본 주요 변경 사항이 없습니다. 일반적인 주요 React 릴리스와 비슷한 수준의 노력으로 응용 프로그램 코드를 최소한으로 변경하거나 전혀 변경하지 않고 React 18로 업그레이드할 수 있습니다."

새로운 개선 사항:

React.lazy - 새로운 스트리밍 서버 렌더러 지원.

자동 일괄 처리.

새 API(예: startTransition).

기사: React 18의 기능 - https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html

이 튜토리얼은 React 18 alpha, Typescript, Vite를 사용하여 프로젝트를 생성하고 Vercel(프리미엄)에 배포하는 단계별 가이드를 보여줍니다.

Vite 프로젝트 만들기

필요한 도구:

노드JS

원사(npm install yarn -g)

다음 명령어를 실행하여 새 프로젝트를 만듭니다.
(Vite는 CRA와 유사한 코드 생성기이지만 개발 모드를 시작하는 데 1초 미만이 걸리는 반면 CRA를 사용하면 45초 이상 소요됩니다.)

yarn create @vitejs/app my-project --template react-ts
cd my-project

최신 React 18 알파 버전을 설치합니다.

yarn add react@alpha react-dom@alpha

@types/react가 새로운 React 18의 API 또는 유형을 아직 이해하지 못하므로 "tsconfig.json"파일을 업데이트해야 합니다. "jsx": "react" 추가:

"types": ["react/next", "react-dom/next"]

그런 다음 새 프로젝트를 실행합니다.

yarn dev

vite v2.3.7 dev server running at:
  > Local: http://localhost:3000/
  > Network: use `--host` to expose
  ready in 174ms.

그리고 그게 다야! Typescript로 React 18을 실행하고 있습니다! 흔들 준비가되었습니다.

Vercel에 배포

먼저 이 프로젝트를 빌드해야 합니다.

yarn build

그런 다음 빌드(dist) 디렉터리를 Vercel에 배포합니다.

cd dist
npx vercel .

...
✅  Deployed to: https://react-18-ts-vite-app.vercel.app [copied to clipboard] [11s]

이제 링크https://react-18-ts-vite-app.vercel.app를 방문하여 앱을 실행해야 합니다.

연결

React 18의 기능 - https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html

Github 리포지토리https://github.com/ngduc/react-18-ts-vite-app

이 문서의 최신 업데이트를 보려면 https://nnote.io/s/x4od5/react-18-with-vite-and-vercel을 방문하십시오.