vite 및 netlify를 사용한 반응 18의 첫 번째 모습

React 18이 출시되면 다음과 같은 기본 개선 사항이 포함됩니다.

Automatic batching

startTransition 과 같은 새 API

React.lazy에 대한 지원이 내장된 A new streaming server renderer

React 팀은 릴리스에 대한 피드백을 제공하고 질문하고 협업하기 위해 React 18 Working Group을 생성하여 새로운 단계를 밟았습니다. 워킹 그룹은 GitHub Discussions에서 호스팅되며 대중이 읽을 수 있습니다.

React 18 워킹 그룹

작업 그룹의 구성원은 피드백을 남기고 질문하고 아이디어를 공유할 수 있습니다. 핵심 팀은 또한 연구 결과를 공유하기 위해 토론 저장소를 사용할 것입니다. 안정적인 릴리스가 가까워지면 중요한 정보도 React blog에 게시됩니다.

워킹 그룹에 대한 초기 관심이 급증할 것으로 예상되므로 초대된 구성원만 스레드를 작성하거나 댓글을 달 수 있습니다. 그러나 스레드는 대중에게 완전히 공개되므로 모든 사람이 동일한 정보에 액세스할 수 있습니다. 팀은 이것이 작업 그룹 구성원을 위한 생산적인 환경을 조성하는 동시에 더 넓은 커뮤니티와 투명성을 유지하는 것 사이의 좋은 절충안이라고 생각합니다.

특정 릴리스 날짜는 예정되어 있지 않지만 팀은 React 18이 대부분의 프로덕션 애플리케이션에 준비되기 전에 몇 개월의 피드백과 반복이 필요할 것으로 예상합니다.

라이브러리 알파: 오늘 사용 가능

공개 베타: 최소 몇 개월

릴리스 후보(RC): 베타

후 최소 몇 주 후

일반 공급: RC

후 최소 몇 주 후

예상 출시 일정에 대한 자세한 내용은 available in the Working Group을 참조하십시오.

Vite의 React 템플릿으로 React 앱 만들기

yarn create @vitejs/app ajcwebdev-react18 --template react

종속성 설치

cd ajcwebdev-react18
yarn

개발 서버 시작

yarn dev

react@beta 및 react-dom@beta 설치

패키지.json

package.json를 보면 Vite 템플릿에서 포함된 다음 종속성을 볼 수 있습니다.

"dependencies": {
  "react": "^17.0.0",
  "react-dom": "^17.0.0"
},

beta 버전을 설치합니다.

yarn add react@beta react-dom@beta

dependencies에서 새 버전을 확인하십시오.

"dependencies": {
  "react": "^18.0.0-beta-96ca8d915-20211115",
  "react-dom": "^18.0.0-beta-96ca8d915-20211115"
},

esbuild.jsxInject를 사용하여 ESBuild로 변환된 모든 파일에 대해 JSX 도우미 가져오기를 자동으로 삽입합니다.

// vite.config.js

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'

export default defineConfig({
  plugins: [reactRefresh()],
  esbuild: {
    jsxInject: `import React from 'react'`
  }
})

main.jsx

// src/main.jsx

import ReactDOM from 'react-dom'
import './index.css'
import App from './App'

const root = ReactDOM.createRoot(
  document.getElementById('root')
)

root.render(<App />)

App.jsx

// src/App.jsx

import logo from './logo.svg'
import './App.css'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img
          src={logo}
          className="App-logo"
          alt="logo"
        />

        <p>
          React 18 Deployed on Netlify with Vite
        </p>
      </header>
    </div>
  )
}

export default App

Netlify에 배포

touch netlify.toml

[build]
  publish = "dist"
  command = "yarn build"

github.new 에서 빈 GitHub 리포지토리를 만듭니다.

git init
git add README.md
git commit -m "first commit"
git remote add origin https://github.com/ajcwebdev/ajcwebdev-react18.git
git push -u origin main

GitHub 리포지토리를 Netlify에 연결합니다.



빌드 명령은 netlify.toml 에서 포함됩니다.

$ yarn build
yarn run v1.22.4
warning package.json: No license field

$ vite build
vite v2.3.7 building for production...
transforming...
✓ 26 modules transformed.
rendering chunks...

dist/assets/favicon.17e50649.svg   1.49kb
dist/assets/logo.ecc203fb.svg      2.61kb
dist/index.html                    0.51kb
dist/assets/index.7cb030a3.js      0.39kb / brotli: 0.20kb
dist/assets/index.0673ce28.css     0.76kb / brotli: 0.40kb
dist/assets/vendor.9aeda92c.js     134.00kb / brotli: 37.26kb

Done in 4.86s.
​
(build.command completed in 5.1s)

사용자 지정 도메인을 설정합니다.



귀하의 new domain로 이동하십시오.



이 문서on my GitHub의 모든 코드를 찾을 수 있습니다.