React 여정을 시작하세요: 첫 번째 React 앱을 만드는 방법!

React는 Meta의 소프트웨어 엔지니어인 Jordan Walke가 만든 오픈 소스 JavaScript 라이브러리입니다. 단일 페이지 애플리케이션에서 사용자 인터페이스(UI) 구성 요소를 구축하는 데 사용됩니다. React는 2011년 Facebook 뉴스피드에서 처음 사용되었고 2012년 Facebook이 앱을 구매한 후 Instagram에 추가되었습니다. React는 2013년 말 오픈 소스 라이선스로 대중에게 출시되었으며 엄청난 인기를 얻었습니다. 지난해 Stack Overflow 설문조사에 따르면 React는 가장 널리 사용되는 JavaScript 라이브러리로, 개발자의 40% 이상이 사용하고 있습니다.

React가 왜 그렇게 인기가 있습니까?

웹 개발자에게 서비스 사용 시 이점에 대해 문의하면 긴 목록을 받게 됩니다. 그들은 가상 DOM, JSX 및 단방향 데이터 바인딩이라는 구성 요소에 대해 이야기합니다. 이것은 개발자 생활을 더 쉽게 만듭니다. 이것이 바로 웹 개발자들 사이에서 React가 인기를 끄는 이유입니다

환경 설정

이제 우리는 React가 무엇이고 왜 인기가 있는지 이해했습니다.

로컬 머신에서 React를 실행할 수 있는 환경을 설정하는 과정을 살펴보겠습니다.

먼저 선호하는 웹 브라우저를 열고 Node.js를 검색하세요. 공식 Node.js 웹사이트를 찾으면 다운로드 탭으로 이동하여 컴퓨터의 운영 체제와 아키텍처(32비트/64비트)에 따라 적절한 Node.js 파일을 선택하세요. 파일을 다운로드한 후 실행하고 로컬 컴퓨터에 Node.js 설치를 진행하세요. Node.js가 컴퓨터에 성공적으로 설치되었는지 확인하려면 터미널을 열고 다음 명령을 실행하세요.

node -v
npm -v

버전을 제공하면 Node.js가 성공적으로 설치된 것입니다.

반응 프로젝트 만들기

React 프로젝트를 설정하려면 원하는 웹 브라우저를 열고 "Vite"를 검색하세요. Vite 공식 웹사이트를 방문하여 "npm create vite@latest" 명령을 복사하세요. 그런 다음 이 명령을 터미널에 붙여넣으세요. 프로젝트 이름, 라이브러리, React 라이브러리의 기본 언어 등 일부 정보를 제공하라는 메시지가 표시됩니다. 질문에 답한 후 프로젝트 폴더로 이동하여 이 폴더에서 터미널을 엽니다. "npm i" 명령을 실행하여 필요한 패키지를 다운로드합니다. 프로젝트를 실행하려면 "npm run dev" 명령을 사용하세요. 그러면 프로젝트가 localhost:5137에서 실행됩니다. 축하해요! 첫 번째 프로젝트를 성공적으로 설정했습니다. ?

파일 구조 이해

React 프로젝트를 설정한 후 즐겨 사용하는 코드 편집기에서 엽니다. 프로젝트를 열면 일부 파일과 폴더가 표시됩니다. 웹 브라우저에서 HTML을 렌더링하기 위한 기본 파일인 index.html 파일을 찾을 수 있습니다. src 폴더 내에서 폴더와 파일을 생성하여 웹 애플리케이션이 작동하고 원하는 방식으로 보이도록 할 수 있습니다. 두 가지 주요 파일이 있습니다. React에서 구성 요소 렌더링을 담당하는 main.js와 구성 요소의 진입점 역할을 하는 app.js입니다.

결론

축하합니다! 방금 첫 번째 React 앱을 처음부터 구축했습니다. 이 여정을 통해 환경을 설정하고, Vite를 사용하여 프로젝트를 생성하고, 파일 구조를 이해하는 방법을 배웠습니다. React의 유연성과 구성 요소 기반 구조는 React를 현대적이고 동적인 웹 애플리케이션을 구축하기 위한 강력한 도구로 만듭니다. 이제 기본 사항을 마스터했으므로 더 고급 기능을 탐색하고 React 기술을 다음 단계로 끌어올릴 준비가 되었습니다. 계속해서 실험하고, 구축하고, 학습하세요. React의 가능성은 무궁무진합니다!

위 내용은 React 여정을 시작하세요: 첫 번째 React 앱을 만드는 방법!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!