반응형
Notice
Recent Posts
Recent Comments
Link
«   2025/07   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

me made it !

[React] #2 THE BASICS OF REACT 본문

TIL/React

[React] #2 THE BASICS OF REACT

yeoney 2023. 9. 3. 17:02
반응형

https://nomadcoders.co/react-for-beginners

render() : 사용자에게 보여준다는 의미

 

 

<!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>
        const root = document.getElementById("root");
        const h3 = React.createElement("h3", 
            {
                id : "title",
                onMouseEnter: () => console.log("mouse enter"), 
            }, 
            "Hello I'm a span"
        );
        const btn = React.createElement("button", 
            {
                onClick: () => console.log("i'm clicked"),
                style: {
                    backgroundColor: "tomato",
                }
            },
            "Click me"
        );
    
        const container = React.createElement("div", null, [h3, btn]);
        ReactDOM.render(container, root);
    </script>
</html>

 

 

 

1 . import  React JS , React-DOM 

React JS : element 생성, event listener 더하는 것 도와주는 역할, interactive power

React-DOM : react element을 가져다가 HTML 로 바꿈

 

이 곳 비어있는 div 는 React-DOM이 React element 들을 가져다놓을 곳임

root 는 여기

막줄 :

   ReactDOM.render(container, root);

이 코드의 의미는 react element 들을 root div 안에서 보여주라는 뜻

 

 

 

react 는 element 에 event listener 를 달수 있다는 점에서 굉장히 cool 하다 ! 

property object 에 event listener 를 등록할 수 있다!

반응형
저작자표시 비영리 변경금지 (새창열림)

'TIL > React' 카테고리의 다른 글

[React]  (0) 2023.09.04
[React] Snack을 아시나요..?  (0) 2023.09.03
[React] component 사용  (0) 2023.06.28
[React] state 변경  (0) 2023.06.28
[React] state  (0) 2023.06.28
'TIL/React' Related Articles more