리액트를 웹사이트에서 연습해보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Static Template</title>
</head>
<body>
<h1>This is a static template, there is no bundler or bundling involved!</h1>
</body>
</html>
<!-- Javascript -->
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
<script>
const rootElement = document.getElementById("root");
const element = document.createElement("h1");
element.textContent = "Hello Javascript!";
rootElement.appendChild(element);
</script>
</body>
</html>
<!-- React -->
<html lang="en">
<body>
<script
src="https://unpkg.com/react@18/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
crossorigin
></script>
<div id="root"></div>
<script>
const rootElement = document.getElementById("root");
const element = React.createElement("h1", {
children: "Hello, React!"
});
ReactDOM.render(element, rootElement);
</script>
</body>
</html>
<!-- JSX -->
<html lang="en">
<body>
<script
src="https://unpkg.com/react@18/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
crossorigin
></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const rootElement = document.getElementById("root");
const text = "Hello JSX!";
const className = "title";
const element = <h1 className={className}>{text}</h1>;
ReactDOM.render(element, rootElement);
</script>
</body>
</html>
JSX를 사용하기 위해서
// 바벨을 추가해주고
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
// 타입을 지정해줘야한다!!
<script type="text/babel">
반응형
'Frontend > React' 카테고리의 다른 글
| [React Swiper] play, stop 버튼 만들기 (0) | 2023.04.13 |
|---|---|
| [React Swiper] 리액트에서 스와이퍼 사용하기 (0) | 2023.04.13 |
| [React] 리액트 순위 매기기 만들기 (ranking) (0) | 2023.02.26 |
| [리액트] JSX란? (0) | 2022.11.16 |
| 리액트 참고하면 좋은 사이트들 (1) | 2022.11.16 |