리액트를 활용하여 코드를 작성하기

728x90

1. 리액트 다운하기

Javascript 코드를 import하기

<html>
    <body>
    </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>
</html>

- 콘솔에서 React를 입력 해 보면 코드가 잘 적용 되었는지 확인이 가능하다.

- React JS는 어플리케이션이 interactive하도록 만들어주는 라이브러리이고 react-dom은 라이브버리, 또는 패키지인데 모든 React element 들을 html body에 둘 수 있도록 해주는 역할을 한다.

2. React JS element 생성하고 배치하기

<!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>
        //1. createElement에 들어가는 이름은 생성하고자 하는 HTML 태그와 같은 이름이어야 한다.
        const span = React.createElement("span");

        //2. span을 페이지에 배치한다.
        const root = document.getElementById("root");
        ReactDOM.render(span, root);  // 스판을 root에 배치하겠다.

    </script>
</html>

3. 프로퍼티 추가하기

- 프로퍼티에는 class 이름이나 id 등이 올 수 있다.

    <script>
        const span = React.createElement("span", {id:"test"});
        const root = document.getElementById("root");
        ReactDOM.render(span, root);  
    </script>

4. 내용 넣어주기

    <script>
        const span = React.createElement("span", {id:"test"},  "hello");
        const root = document.getElementById("root");
        ReactDOM.render(span, root);  
    </script>

5. 스타일 추가 해 주기

 const span = React.createElement("span", {id:"test", style:{color:'red'}}, "hello");

6. 버튼 만들기

<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 span = React.createElement("span", null, "hello");
        const root = document.getElementById("root");
        const btn = React.createElement("Button",null, "Click me");

        //span과 btn 둘 다 render하고 싶으면 div를 추가 
        const container = React.createElement("div", null, [span, btn]);
        ReactDOM.render(container, root);  

    </script>
</html>

7. 버튼에 이벤트리스너 추가

<!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", 
            {
                onMouseEnter: () => console.log("mouse enter"),
            }, 
            "hello i'm span"
        );
        const btn = React.createElement(
            "button",
            {
                onClick: () => console.log("i'm cliked"),
            }, 
        "Click me");

        //span과 btn 둘 다 render하고 싶으면 div를 추가 
        const container = React.createElement("div", null, [h3, btn]);
        ReactDOM.render(container, root);  

    </script>
</html>

8. 스타일 적용하기

        const btn = React.createElement(
            "button",
            {
                onClick: () => console.log("i'm cliked"),
                style:{
                    backgroundColor:"tomato",
                }
            }, 
        "Click me");

9. count 적용하기

2024.04.03 - [React/영화웹서비스만들기] - 리액트를 활용하여 코드를 간단하게 만들기