CRA 지원 중단 후 React 애플리케이션을 만드는 방법

안녕하세요, 동료 개발자 여러분! ?

저는 최근 프로젝트를 진행하고 있었는데 React 팀이 2년 전에 CRA(create-react-app)를 더 이상 사용하지 않는다는 것을 알게 되었습니다. ? 당연히 이로 인해 JavaScript 기반 React 애플리케이션을 설정하는 다른 방법에 대해 생각하게 되었습니다.

공식 React 문서를 확인했을 때 이제 Next.js 및 Gatsby와 같은 풀 스택 프레임워크에 초점을 맞추고 있다는 것을 알았습니다. 엔드투엔드 애플리케이션을 구축하는 경우 이는 훌륭하지만 단순한 JSX 기반 프로젝트를 원하는 경우에는 과도할 수 있습니다. ?️

시작하기 전에 - CRA는 어떤 일을 하나요? - Create React App(CRA)은 새로운 React 프로젝트의 설정을 자동화하는 강력한 패키지입니다. 필요한 모든 구성을 처리하고 필요한 종속성을 설치하여 구성이 필요 없는 번들러를 제공합니다. 이를 통해 개발자는 복잡한 도구 및 구성 설정에 대해 걱정하지 않고 애플리케이션 구축을 시작할 수 있습니다.

이제 CRA는 더 이상 사용되지 않습니다. 순수 JSX 앱을 설정하는 방법은 무엇입니까? ?
여기에서는 React 라이브러리를 사용하여 클라이언트 기반 애플리케이션을 생성하기 위해 널리 사용되는 두 가지 선택 사항(Vite 및 Webpack)을 공유하겠습니다. 섹션 아래에서는 이러한 도구를 비교하고 각각에 대한 설정 지침을 제공합니다. 뛰어 들어보세요! ?‍♂️

⚡ Vite vs Webpack ?

Vite

장점:

-즉시 핫 모듈 교체(HMR) 기능을 갖춘 빠른 ​​개발 서버.
-최신 JavaScript 기능이 내장되어 지원됩니다.
-시작하려면 최소한의 구성이 필요합니다.

단점:

-새로운 도구이므로 Webpack에 비해 커뮤니티 지원이 적을 수 있습니다.

웹팩

장점:

-복잡한 빌드 설정을 위한 구성 가능성이 높고 유연합니다.
-광범위한 플러그인 생태계 및 커뮤니티 지원.
- 다수의 대규모 적용으로 검증된 실적.

단점:

-초기 구성은 더 복잡하고 시간이 많이 걸릴 수 있습니다.
-Vite에 비해 빌드 시간이 느립니다.
-Vite로 React 앱 설정

새 Vite 프로젝트 만들기:

1. 터미널에서 Vite 명령을 실행하세요

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install

2. 개발 서버 시작:

npm run dev

Vite 구성:

Vite는 기본적으로 최소한의 구성만 필요합니다. 기본 설정은 대부분의 React 프로젝트에서 작동합니다.
필요한 경우 vite.config.js를 사용자 정의할 수 있습니다.

Webpack으로 React 앱 설정

1. 프로젝트 초기화:

mkdir my-react-app
cd my-react-app
npm init -y
npm install react react-dom
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react

2. 프로젝트 구조 만들기:

 1. Create a src folder and add index.js and App.js files.
 2. Create a public folder and add an index.html file.

3. 웹팩 구성:

• webpack.config.js 파일을 만듭니다.

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install

4. 바벨 구성:

• .babelrc 파일을 만듭니다.

npm run dev

5. 개발 서버 시작:

npx 웹팩 서브

결론
Vite와 Webpack은 모두 CRA 없이 React 애플리케이션을 설정하는 강력한 방법을 제공합니다. Vite는 중형 프로젝트 및 신속한 개발에 이상적인 더 빠르고 간단한 설정을 제공합니다. 반면 Webpack은 광범위한 구성 가능성과 강력한 생태계를 제공하므로 보다 복잡한 프로젝트에 적합합니다.

프로젝트 요구사항과 선호도에 가장 적합한 도구를 선택하세요. 즐거운 코딩하세요!

위 내용은 CRA 지원 중단 후 React 애플리케이션을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!