웹 프론트엔드 JS 튜토리얼 React 여정을 시작하세요: 첫 번째 React 앱을 만드는 방법!

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

Sep 25, 2024 pm 06:31 PM

Kickstart Your React Journey: How to Create Your First React App!

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

JavaScript로 문자열 문자를 교체하십시오 JavaScript로 문자열 문자를 교체하십시오 Mar 11, 2025 am 12:07 AM

JavaScript로 문자열 문자를 교체하십시오

jQuery는 요소 패딩/마진을 얻습니다 jQuery는 요소 패딩/마진을 얻습니다 Mar 01, 2025 am 08:53 AM

jQuery는 요소 패딩/마진을 얻습니다

jQuery 날짜가 유효한지 확인하십시오 jQuery 날짜가 유효한지 확인하십시오 Mar 01, 2025 am 08:51 AM

jQuery 날짜가 유효한지 확인하십시오

10 JQuery Accordions 탭 10 JQuery Accordions 탭 Mar 01, 2025 am 01:34 AM

10 JQuery Accordions 탭

10 JQuery 플러그인을 확인할 가치가 있습니다 10 JQuery 플러그인을 확인할 가치가 있습니다 Mar 01, 2025 am 01:29 AM

10 JQuery 플러그인을 확인할 가치가 있습니다

노드 및 HTTP 콘솔로 HTTP 디버깅 노드 및 HTTP 콘솔로 HTTP 디버깅 Mar 01, 2025 am 01:37 AM

노드 및 HTTP 콘솔로 HTTP 디버깅

사용자 정의 Google 검색 API 설정 자습서 사용자 정의 Google 검색 API 설정 자습서 Mar 04, 2025 am 01:06 AM

사용자 정의 Google 검색 API 설정 자습서

jQuery div에 스크롤 바를 추가합니다 jQuery div에 스크롤 바를 추가합니다 Mar 01, 2025 am 01:30 AM

jQuery div에 스크롤 바를 추가합니다

See all articles