- JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다.
- JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.
- 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
출처: https://goddaehee.tistory.com/296 [갓대희의 작은공간]
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<!--babel load-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
//JSX js의 확장된 문법 createElement 대신 사용해보기
const root = document.getElementById("root");
const Title = (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello I'm a title
</h3>
);
const Button = (
<button style={{backgroundColor : "tomato",}} onClick={()=> console.log("im clicked.")}>
Click me
</button>
);
const container = React.createElement("div", null, [Title, Button]);
ReactDOM.render(container, root);
</script>
</html>
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
// Container에 Title,Button을 include하려면 함수로 만들어줘야함
// (arrow function : 함수로 만들어 return해주는것과 같음)
function Title() {
return (
<h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
Hello I'm a title
</h3>
);
}
// 위에 함수와 동일한 기능
const Button = () => (
<button style={{backgroundColor : "tomato",}} onClick={()=> console.log("im clicked.")}>
Click me
</button>
);
// 컴포넌트의 첫 글자는 반드시 대문자여야함 (html 태그로 혼동)
const Container = () => (
<div>
<Title />
<Button />
</div>
);
ReactDOM.render(<Container />, root);
</script>
</html>
React docs
https://ko.reactjs.org/docs/introducing-jsx.html
'Dev > React' 카테고리의 다른 글
| [React] #5. Intro- React App 만들기 (0) | 2022.05.27 |
|---|---|
| [React] #4. Props (0) | 2022.05.26 |
| [React] #3.5 Inputs and State (0) | 2022.05.25 |
| [React] #3. State (0) | 2022.05.23 |
| [React] #1. The Basic of React - Events in React (0) | 2022.05.17 |
