일반적인 JS문법을 좀더 사용하기 편리하게 한 버전을 JSX문법이라고 한다.
그리고 이러한 문법을 그대로 js로 사용하면 당연히 브라우저가 못알아듣기 때문에 다음과 같은 설치가 필요하다.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<!-- How to import React(engine) -->
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<!-- How to import React-dom(put elements into HTML) -->
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<!-- How to make browser read JSX syntax (using babel)-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
const Title = (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello I'm a title
</h3>
);
const btn = (
<button
style={{ backgroundColor: "tomato" }}
onClick={() => console.log("I am clicked!")}
>
Click me
</button>
);
const container = React.createElement("div", null, [Title, btn]);
// put container into root
ReactDOM.render(container, root);
</script>
</html>집중해야 할 부분은 아랫 부분인데,
bable에서 제공하는 JSX신텍스 해독기와
매 script마다 type="text/label"을 넣어줘야하는 번거로움이 있다.
<!-- How to make browser read JSX syntax (using babel)-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">'FrontEnd > React' 카테고리의 다른 글
| [ReactJS] render, rerender (0) | 2023.01.05 |
|---|---|
| [ReactJS] JSX 문법 (0) | 2023.01.05 |
| [ReactJS] React에서 EventLister 구현하기 (0) | 2023.01.04 |
| [ReactJS] React에서 Element 만들기 (0) | 2023.01.04 |
| [ReactJS] React 설치하기 (0) | 2023.01.04 |
