npm create-react-app my-app을 통해서 리액트를 실행하지 않고 리액트를 띄워보면서 npmcreate-react-app이 어떤 작업들을 처리해주는지 알아보자.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<html>
<head>
<meta charset="UTF-8">
<!-- 1. 리액트 라이브러리 추가 -->
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<script>
//2. 리액트 컴포넌트
const e = React.createElement;
class Hello extends React.Component{
constructor(props){
super(props);
}
render() {
return e('h1',null,'Hello, React!');
}
}
</script>
<script>
//3. ReactDOM을 사용하여 root에 컴포넌트 렌더링
ReactDOM.render(e(Hello),document.querySelector('#root'));
</script>
</body>
</html>
|
cs |
우선 리액트의 경우는 자바 스크립트 라이브러리므로 위의 코드처럼 react와 react-dom의 CDN을 import한 뒤 script에 react 컴포넌트를 작성하고 ReactDOM을 통해 원하는 곳에 해당 컴포넌트를 render할 수 있다. 위의 코드는 javascript만을 이용한 방식이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<html>
<head>
<meta charset="UTF-8">
<!-- 1. 리액트 라이브러리 추가 -->
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- 2. 바벨 추가 -->
<script src="https://unpkg.com/@babel/standalone@7.12.6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// 3. 리액트 컴포넌트
class Hello extends React.Component{
constructor(props){
super(props);
}
render() {
return (
<React.Fragment>
<h1>Hello, React!</h1>
</React.Fragment>
);
}
}
</script>
<script type="text/babel">
// 4. ReactDOM을 사용하여 root에 컴포넌트 렌더링
ReactDOM.render(<Hello/>,document.querySelector('#root'));
</script>
</body>
</html>
|
cs |
이 코드는 JSX 문법을 사용한 방식이다. 이때 JSX를 읽고 브라우저가 이해할 수 있도록 바꿔주는 Babel을 사용한다. babel CDN을 추가해주고 script의 type을 "text/babel"로 지정해주면 babel이 해당 script를 브라우저가 jsx로 작성된 리액액트 코드를 이해할 수 있도록 해준다.
