반응 튜토리얼
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 기술을 테스트하세요.
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 장 에서 이에 대해 배울 것입니다 .