React 앱을 만드는 방법

React는 Facebook에서 개발한 사용자 인터페이스 구축을 위한 강력한 JavaScript 라이브러리입니다. 이는 동적인 대화형 웹 애플리케이션을 만드는 프로세스를 단순화합니다. 이 가이드는 처음부터 React 애플리케이션을 만드는 과정을 안내합니다.

전제조건

시작하기 전에 시스템에 다음이 설치되어 있는지 확인하세요.

1. Node.js 및 npm:

   • Node.js를 다운로드하고 설치합니다(npm은 Node.js에 포함되어 있습니다).
   • 설치 확인:

    node -v
    npm -v
   

2. 텍스트 편집기:
   
   Visual Studio Code 등 원하는 코드 편집기를 사용하세요.

1단계: create-react-app 설치

create-react-app은 좋은 기본 구성으로 새 React 프로젝트를 빠르게 설정하기 위한 React 팀의 공식 도구입니다.

• 터미널이나 명령 프롬프트를 열고 create-react-app을 전역적으로 설치합니다.

  npm install -g create-react-app

2단계: 새 React 앱 만들기

1. 프로젝트 디렉토리로 이동: 프로젝트를 저장할 위치를 선택하세요. 예를 들어:

   cd Desktop

1. React 앱 만들기: todolist를 원하는 프로젝트 이름으로 바꾸세요.

   npx create-react-app todolist

• 이 명령은 필요한 모든 파일과 종속성을 포함하는 새 폴더(todolist)를 생성합니다.

1. 프로젝트 폴더로 이동하세요:

   cd todolist

3단계: 개발 서버 시작

개발 서버를 시작하려면 다음 명령을 실행하세요.

npm start

• 기본 브라우저가 자동으로 열리고 http://localhost:3000에 React 앱이 표시됩니다.
• 그렇지 않다면 수동으로 브라우저를 열고 해당 주소로 이동하세요.

4단계: 프로젝트 구조 탐색

다음은 create-react-app으로 생성된 파일과 폴더에 대한 개요입니다.

 node -v
 npm -v

5단계: React 앱 수정

1. 주요 구성 요소(App.js) 편집: 텍스트 편집기에서 src/App.js를 열고 JSX를 맞춤설정하여 콘텐츠를 변경하세요.

  npm install -g create-react-app

1. 변경 사항 저장 및 업데이트 보기: 저장 후에는 변경 사항을 반영하기 위해 브라우저가 자동으로 새로 고쳐집니다.

결론

축하합니다! 첫 번째 React 앱을 성공적으로 만들고 실행했습니다. 이 설정은 강력한 구성 요소 기반 웹 애플리케이션을 구축하기 위한 견고한 기반을 제공합니다. React 구성요소, 상태 관리 및 후크를 탐색하여 기술을 더욱 향상시키세요!

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