웹사이트에 React 추가하기
공식 문서를 보면 쉽게 따라할 수 있다.
cdn을 넣어주면 웹사이트에서 react를 사용할 수 있다.
https://ko.reactjs.org/docs/add-react-to-a-website.html#gatsby-focus-wrapper
1. cdn 추가
html에 아래의 코드를 추가한다.
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>2. React를 통해 원하는 내용을 표시할 수 있는 위치 설정
-body태그 내에 비어있는 <div>태그 추가
- 이
<div>태그에 유일한 HTML 속성인 id를 부여 - 이를 통해 JavaScript가 태그를 찾고 찾은 태그 안에 React 컴포넌트를 표시할 수 있게 됨
<div id="root"></div>3. React 사용하기
- id가 root인 것을 찾아 변수 rootElement에 넣고
- h1태그를 만들고 태그 안에 Hello World를 넣어 변수 element에 넣는다
- rootElement에 element를 추가한다.
<script>
// id가 root인 것을 찾아 변수 rootElement에 넣고
const rootElement = document.getElementById("root");
// h1태그를 만들고 태그 안에 Hello World를 넣어 변수 element에 넣는다
const element = React.createElement("h1", { children: "Hello World" });
// rootElement에 element를 추가한다.
ReactDOM.render(element, rootElement);
</script>
예시코드 요소 1개 불러오기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 불러오기</title>
</head>
<body>
<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>
<div id="root"></div>
<script>
const rootElement = document.getElementById("root");
// const element = document.createElement("h1");
// element.innerText = "Hello World";
const element = React.createElement("h1", { children: "Hello World" });
// rootElement.appendChild(element);
ReactDOM.render(element, rootElement);
</script>
</body>
</html>주석 처리 한 부분은 javascript로 썼을 때!
예시 코드 여러 요소 불러오기
- 폼이라는 변수를 만들어서 여러 가지 요소들을 담아주고 render해줌
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 불러오기</title>
</head>
<body>
<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>
<div id="root"></div>
<script>
const rootElement = document.getElementById("root");
const element1 = React.createElement("h1", { children: "Hello World" });
const element2 = React.createElement("p", null, "bye");
const element3 = React.createElement("h3", null, "bye world");
const form = React.createElement("div", null, [
element1,
element2,
element3
]);
ReactDOM.render(form, rootElement);
</script>
</body>
</html>
The only thing worse than starting something and failing...is not starting something