jsx를 사용할때 변수,함수 이름은 대문자로 시작해야함
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js">
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js">
<script src ="https://unpkg.com/@babel/standalone/babel.min.js">
<script type = "text/babel">
const root = document.getElementById("root");
const Title = () => ( <h3 style = {{color : "red"}} id = "Title" onMouseEnter={() => console.log("mouse enter")}> hello im a title </h3> )
const Button = () => ( <button style = {{backgroundColor: "orange"}}id = "btn" onClick = {()=> console.log("i am clicked")}>click me</button> )
const Container = () => ( <div> <Title /> <Button /> </div>)
/* <Title />) 는 ${``} 이것과 같다고 이해 */
ReactDOM.render(<Container />, root)
</script>
'코딩 > React.js' 카테고리의 다른 글
| 4. React.js effects (1) | 2024.02.15 |
|---|---|
| 3. React.js props (0) | 2024.02.14 |
| 2. setState, setState 예제 (0) | 2024.02.08 |