728x90
JavaScript와 HTML,CSS등에 대해서는 일체 다루지 않는다.
기초 지식은 다른 강의를 참조하도록 하라.
이 강의는 React의 사용법 위주로 작성되어 있다.
왜 React여야는지, React를 써야하는지에 대하지는 논하지 않으므로 그런 자료는 다른 데이터를 참조하라.
참조:
react docsReact를 시작하는 간단한 앱을 만들어보자.
React를 사용하기 위해서는 먼저 3가지의 cdn을 등록하여야한다.
물론 설치해서 사용할 수도 있다. 그건 본인이 알아서 하라.
<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
위에서 부터 2개는 react를 조작하기 위해서 필요한거고 맨 아래는 babel이다.
모르겠으면 그냥 쓰면된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React World!</title>
<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
hi
<script type="text/babel">
ReactDOM.render(
<h1>Hello World</h1>,
document.body
);
</script>
</body>
</html>
전체코드는 위와 같다.
이 코드를 해석해보자.
<script type="text/babel">
ReactDOM.render(
<h1>Hello World</h1>,
document.body
);
</script>
script타입은 바벨로 해준다. 이 타입을 지정하면 바벨이 알아서 컴파일해주게된다.
그다음 아래의 부분을 보면 ReactDOM.render라는 메소드를 호출하게 된다.
이의 정의는 아래와 같다.
element를 container부분에 대체하게된다.
즉 body를 Hello World로 대체하게된다.
이미 body내부에는 hi라는 문자열이 있다.
그런 내용은 깔끔히 무시하게된다.
이렇게 여러분의 첫 React앱이 완성되었다.
'Programming > JavaScript-React' 카테고리의 다른 글
| [React-06]css - react css스타일 (0) | 2018.11.24 |
|---|---|
| [React-05]css - 기존 css스타일 (0) | 2018.11.24 |
| [React-04]props(변수처럼 사용하기) (0) | 2018.11.23 |
| [React-03]React Compnent (0) | 2018.11.12 |
| [React-02]createElement로 dom트리 만들기 (0) | 2018.11.11 |