반응 튜토리얼

[+:

React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다.

React는 단일 페이지 애플리케이션을 빌드하는 데 사용됩니다.

React를 사용하면 재사용 가능한 UI 구성 요소를 만들 수 있습니다.

지금 React 배우기 시작하세요 ❯

사례를 통한 학습

"Show React" 도구를 사용하면 React를 쉽게 시연할 수 있습니다. 코드와 결과를 모두 보여줍니다.

예시:

import React from 'react';
import ReactDOM from 'react-dom';

function Hello(props) {
  return <h1>Hello World!</h1>;
}

ReactDOM.render(<Hello />, document.getElementById('root'));


연습으로 배우기

반응 연습

연습:

React 요소를 DOM에 렌더링하려면 올바른 ReactDOM 메서드를 입력하세요.

ReactDOM.(myElement, document.getElementById('root'));



반응 퀴즈

퀴즈로 React 기술을 테스트하세요.

반응 퀴즈


React 앱 만들기

React를 배우고 테스트하려면 컴퓨터에 React Environment를 설정해야 합니다.

이 튜토리얼에서는 create-react-app.

create-react-app도구는 공식적으로 지원되는 React 애플리케이션 생성 방법입니다.

Node.js 를 사용하려면 create-react-app.

애플리케이션을 생성하려는 디렉토리에서 터미널을 엽니다.

이 명령을 실행하여 다음과 같은 React 애플리케이션을 생성합니다 my-react-app.

npx create-react-app my-react-app

create-react-app React 애플리케이션을 실행하는 데 필요한 모든 것을 설정합니다.

참고: 이전에 create-react-app전역으로 설치한 경우 npx가 항상 최신 버전의 create-react-app. 제거하려면 다음 명령을 실행하십시오 npm uninstall -g create-react-app.


React 애플리케이션 실행

my-react-app다음 명령을 실행하여 디렉터리 로 이동합니다 .

cd my-react-app

다음 명령을 실행하여 React 애플리케이션을 실행합니다 my-react-app.

npm start

새로 만든 React 앱과 함께 새 브라우저 창이 나타납니다! 그렇지 않은 경우 브라우저를 열고 localhost:3000주소 표시줄에 입력하십시오.

결과:


React 시작하기create-react-app에서 더 자세히 배울 것 입니다.


이미 알고 있어야 할 사항

React.JS를 시작하기 전에 다음과 같은 중급 경험이 있어야 합니다.

  • HTML
  • CSS
  • 자바스크립트

또한 ECMAScript 6(ES6)에 도입된 새로운 JavaScript 기능에 대한 경험이 있어야 합니다. React ES6에서 이에 대해 배울 것입니다 .