로컬에서 React 애플리케이션 실행
로컬에서 실행되는 React 앱은 웹 개발 기술을 연습할 수 있는 귀중한 기회가 될 수 있습니다. 이를 통해 Webpack, Babbel 및 기타 필요한 도구 설정과 같은 시간 소모적인 구성 대신 코드 작성에 집중할 수 있습니다.
단일 HTML 페이지로 로컬에서 React 애플리케이션 실행
React 공식 docs은 React를 로컬에서 실행할 수 있는 미리 만들어진 HTML 파일을 제공합니다. HTML 파일을 다운로드하고 코드 편집기로 열고 필요한 사항을 변경한 다음 브라우저에서 파일을 열기만 하면 됩니다.
이 HTML 파일에는 <head> 및 <body> 섹션이 있습니다. 전자에서는 CDN 링크를 사용하여 React를 가져오고 후자는 id 속성 root가 있는 <div>를 포함합니다.
그런 다음 HTML 파일에서 JavaScript를 실행할 수 있는 <script> 여는 태그와 닫는 태그가 있습니다. 여기에서 document.getElementById() 메서드를 사용하여 DOM 요소를 참조하고 ReactDOM.createRoot() 메서드를 사용하여 이 특정 컨테이너에 대한 React를 시작합니다.
마지막으로 render() 메서드를 사용하여 HTML 파일에서 구성 요소를 실행합니다.
create-react-app을 사용하여 로컬에서 React 애플리케이션 실행
React 라이브러리를 개발하고 유지 관리하는 조직인 Facebook은 create-react-app 패키지를 만들었습니다. 몇 가지 npm 명령으로 SPA(단일 페이지 응용 프로그램)를 만들 수 있습니다.
React에서 앱을 구축하기 위한 거의 이상적인 환경을 설정합니다. 컴파일러, 변환기 및 Webpack과 같은 도구를 포함하여 프로젝트가 설정됩니다.
이러한 도구는 필수이며 JSX 템플릿 언어와 같은 고급 React 기능을 사용할 수 있습니다. 또한 Destructuring, 화살표 함수 등과 같은 최신 JavaScript 기능을 사용해야 합니다.
이를 통해 React 개발자는 환경 설정보다 코드 학습에 집중할 수 있습니다. 프로젝트를 만들려면 필요한 파일을 저장할 디렉터리를 만들려는 폴더를 찾습니다.
그런 다음 명령 프롬프트를 열고 해당 폴더로 이동합니다(Windows에서 cd 명령 사용). 이 명령을 사용하여 프로젝트를 생성합니다.
npx create-react-app app-name
여기서 npx create-react-app은 명령이고 마지막 부분은 React 애플리케이션에 대해 선택한 이름입니다.
그런 다음 다음 명령을 사용하여 새로 생성된 프로젝트의 폴더로 이동합니다.
cd app-name
마지막으로 이 명령을 사용하여 구성 요소의 실시간 미리보기를 시작할 수 있습니다.
npm start
일반적으로 JavaScript 파일은 프로젝트의 src 폴더에 있습니다. App.js 파일은 기본 상위 구성 요소 파일이지만 각각의 새 구성 요소에 대해 다른 파일을 만들 수 있습니다.
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn