본문 바로가기
React/React Basic

React and ReactDOM | HTML안에 리액트 코드 바로 작성해보기

by CodeMia 2022. 6. 1.

pure react 

 

pure-react 폴더를 만들고

그 안에 index.html을 만든다. 

vs code에서 열어보자. 

 

 

html 파일에서

html을 치면 html:5가 뜬다. 

html:5를 눌러 보일러 플레이트를 완성한다. 

 

 

 

 

div 태그에 id를 root으로 하고 

React is NOT rendered 문구를 넣는다 

 

 

 

터미널로 html 을 열어보면 

 

html이 브라우저가 열린다.

 

여기서 React와 ReactDOM 라이브러리를 불러온다. 

React Library는 엔진이다. 

무엇을 렌더링하고 어떻게 렌더링 할 것인지 결정한다

 

ReactDOM도 우리가 무엇을 렌더하려고 하는지 정한다. 

React는 ReactDOM을 써서 브라우저에 

React Native면 Native element를 써서 폰에

React VR은 VR element를 쓴다. 

특정 디바이스나 플랫폼에 맞는 것을 사용한다. 

이 모든 라이브러리들은 React Engine code를 사용한다. 

 

ReactDOM renders to the DOM what you're building is DOM elements.

React Native allows you to build Native elements.

React VR allows you to build VR elements.

There's different ways that you might be building specific UI for some device or some platform.

ReactDOM is the one that we use for the browser,

but multiple of these different libraries all levers React engine code under the hood. 

 

 

React 소스 코드 모음 연결 

UnPackage (UNPKG) 사이트 

React Engine 소스 코드 모음 사이트의 주소를 복사해 html에 연결한다. 

This site hosts all the actual source code for a lot of these different libraries that we use. 

this points you directly to the source code of React. 

https://unpkg.com/react@18.0.0-rc.0/umd/react.development.js

 

 

 

React-dom 소스 코드 모음 연결 

UNPKG / react-dom 

그 다음 ReactDOM 주소도 script로 연결한다. 

https://unpkg.com/react-dom@18.0.0-rc.0/umd/react-dom.development.js

 

 

html 

html에서 React 와 ReactDOM 연결하기 

 

 

 

브라우저를 리프레쉬하고 콘솔을 보면 React가 다운 되었다는 내용이 뜬다. 

React와 ReactDOM을 쓰면 다운 받아져서 뭔가 내용들이 나온다. 

 

 

 

html 안 React 코드 작성 

html 안에서 react 코드를 작성해 보자.

 

 

 

jsx 는 리액트를 편하게 쓸 수 있게 해주는 syntax suger이다 

여기서는 jsx를 쓸 수 없다. 

 

 

 

 

 

App element를 새로 만들어 render 한다. 

 

 

 

 

 

 

 

 

 

 

html 안에 모든 코드가 있으니 보기 불편하다. 

html script 안에는 주소를 적어주고 

 

 

App.js 파일을 만들어 script 안에 있는 코드를 모두 옮긴다. 

 

 

 

내용이 그대로 잘 나오는 것을 볼 수 있다.

 

 

React v18 로 업데이트 하기 

 

 

새 버젼 

 

 

 

index.html 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="root">React is NOT rendered</div>
<script src="./App.js"></script>
</body>
</html>

 

 

App.js 

const Person = (props) => {
return React.createElement('div', {}, [
React.createElement('h1', {}, props.name),
React.createElement('p', {}, props.occupation),
]);
};
const App = () => {
return React.createElement('div', {}, [
React.createElement('h1', { class: 'title' }, 'React IS rendered.'),
React.createElement(
Person,
{ name: 'Jane', occupation: 'instructor' },
null
),
React.createElement(
Person,
{ name: 'Mia', occupation: 'instructor' },
null
),
React.createElement(
Person,
{ name: 'Doa', occupation: 'instructor' },
null
),
]);
};

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(React.createElement(App));

 

'React > React Basic' 카테고리의 다른 글

Monsters-Rolodex 2-4 | destructuring | 끝  (0) 2022.05.31
Monsters-Rolodex 2-3 | useEffect | Fetch API  (0) 2022.05.29
Monsters-Rolodex 2-2 | useState 설치  (0) 2022.05.29
[React] Object 특징  (0) 2022.05.18
[React] Lifecycle Method 라이프 사이클  (0) 2022.05.18

관련글

댓글

티스토리툴바