리액트란?
React는 Facebook 에서 만든 JavaScript 라이브러리입니다.
React는 UI( 사용자 인터페이스 ) 라이브러리 입니다.
React는 UI 구성 요소 를 빌드하기 위한 도구입니다.
React 빠른 시작 튜토리얼
이것은 빠른 시작 자습서입니다.
시작하기 전에 다음 사항에 대한 기본적인 이해가 있어야 합니다.
전체 자습서:
React 튜토리얼 시작하기 ❯HTML 페이지에 React 추가하기
이 빠른 시작 자습서는 다음과 같은 페이지에 React를 추가합니다.
예시
<!DOCTYPE html>
<html lang="en">
<title>Test React</title>
<!-- Load React API -->
<script src= "https://unpkg.com/react@16/umd/react.production.min.js"></script>
<!-- Load React DOM-->
<script src= "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- Load
Babel Compiler -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<body>
<script type="text/babel">
// JSX Babel code goes here
</script>
</body>
</html>
바벨이란?
Babel은 마크업 또는 프로그래밍 언어를 JavaScript로 번역할 수 있는 JavaScript 컴파일러입니다.
Babel을 사용하면 JavaScript(ES6 - ECMAScript 2015)의 최신 기능을 사용할 수 있습니다.
Babel은 다양한 변환에 사용할 수 있습니다. React는 Babel을 사용하여 JSX를 JavaScript로 변환합니다.
Babel을 사용하려면 <script type="text/babel">이 필요합니다.
JSX 란 무엇입니까?
JSX는 Java S 스크립트 X ML 을 나타 냅니다 .
JSX는 JavaScript의 확장과 같은 XML/HTML입니다.
예시
const element = <h1>Hello World!</h1>
위에서 볼 수 있듯이 JSX는 JavaScript나 HTML이 아닙니다.
JSX는 ES6(ECMAScript 2015)의 모든 기능과 함께 제공되는 JavaScript에 대한 XML 구문 확장입니다.
HTML과 마찬가지로 JSX 태그에는 태그 이름, 속성 및 자식이 있을 수 있습니다. 속성이 중괄호로 묶인 경우 값은 JavaScript 표현식입니다.
JSX는 HTML 텍스트 문자열 주위에 따옴표를 사용하지 않습니다.
반응 DOM 렌더
ReactDom.render() 메서드는 HTML 요소를 렌더링(표시)하는 데 사용됩니다.
예시
<div id="id01">Hello World!</div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello React!</h1>,
document.getElementById('id01'));
</script>
JSX 표현식
표현식은 중괄호로 감싸서 JSX에서 사용할 수 있습니다 .
예시
<div id="id01">Hello World!</div>
<script type="text/babel">
const name = 'John Doe';
ReactDOM.render(
<h1>Hello {name}!</h1>,
document.getElementById('id01'));
</script>
반응 요소
React 애플리케이션은 일반적으로 단일 HTML 요소 를 중심으로 구축됩니다 .
React 개발자는 종종 이것을 루트 노드 (루트 요소)라고 부릅니다.
<div id="root"></div>
React 요소 는 다음과 같습니다.
const element = <h1>Hello React!</h1>
요소는 ReactDOM.render() 메서드 로 렌더링 (표시)됩니다.
ReactDOM.render(element, document.getElementById('root'));
React 요소는 변경할 수 없습니다 . 변경할 수 없습니다.
React 요소를 변경하는 유일한 방법은 매번 새로운 요소를 렌더링하는 것입니다.
예시
function tick() {
const element = (<h1>{new
Date().toLocaleTimeString()}</h1>);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
반응 구성 요소
React 구성 요소는 JavaScript 함수입니다.
이 예에서는 "Welcome"이라는 React 구성 요소 를 만듭니다.
예시
function Welcome() {
return <h1>Hello React!</h1>;
}
ReactDOM.render(<Welcome />, document.getElementById('root'));
React는 ES6 클래스를 사용하여 구성 요소를 생성할 수도 있습니다.
이 예제는 render 메소드 를 사용하여 Welcome이라는 이름의 React 컴포넌트를 생성합니다 :
예시
class Welcome extends React.Component {
render() {
return(<h1>Hello React!</h1>); }
}
ReactDOM.render(<Welcome />,
document.getElementById('root'));
반응 구성 요소 속성
이 예제에서는 속성 인수를 사용하여 "Welcome"이라는 React 구성 요소 를 만듭니다.
예시
function Welcome(props) {
return <h1>Hello
{props.name}!</h1>;
}
ReactDOM.render(<Welcome name="John Doe"/>,
document.getElementById('root'));
React는 ES6 클래스를 사용하여 구성 요소를 생성할 수도 있습니다.
이 예제는 또한 속성 인수를 사용하여 "Welcome"이라는 React 구성 요소를 만듭니다.
예시
class Welcome extends React.Component {
render() {
return(<h1>Hello {this.props.name}</h1>); }
}
ReactDOM.render(<Welcome
name="John Doe"/>, document.getElementById('root'));
JSX 컴파일러
이 페이지의 예제는 브라우저에서 JSX를 컴파일합니다.
프로덕션 코드의 경우 컴파일을 별도로 수행해야 합니다.
React 애플리케이션 생성
Facebook은 React 앱을 구축하는 데 필요한 모든 것을 갖춘 Create React Application 을 만들었습니다.
Webpack을 사용하여 React, JSX 및 ES6, 자동 접두사 CSS 파일을 컴파일하는 개발 서버입니다.
Create React App은 ESLint를 사용하여 코드의 실수를 테스트하고 경고합니다.
Create React App을 생성하려면 터미널에서 다음 코드를 실행하세요.
예시
npx create-react-app react-tutorial
Node.js 5.2 이상이 있는지 확인하십시오. 그렇지 않으면 npx를 설치해야 합니다.
예시
npm i npx
응용 프로그램을 유지하려는 위치에서 한 폴더 위로 시작합니다.
예시
C:\Users\myUser>npx create-react-app react-tutorial
성공 결과:
npx: installed 63
in 10.359s
Creating a new React app in C:\Users\myUser\react-tutorial.
Installing packages. This might take a couple of minutes.
Installing react,
react-dom, and react-scripts...
+ [email protected]
+ [email protected]
+
[email protected]
added 1732 packages from 664 contributors and audited
31900 packages in 355.501s
found 0 vulnerabilities+ [email protected]
Success! Created react-tutorial at C:\Users\myUser\react-tutorial
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can't go back!
We suggest that you begin by typing:
cd react-tutorial
npm start