- React JS는 UI를 interactive하게 만들어줌

 

나는 이거보고 환경구축해볼거임

https://looplian.tistory.com/entry/MacOs%EC%97%90%EC%84%9C-nodejs-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0-with-VS-Code

 

MacOs에서 node.js 개발 환경 구축하기. with VS Code

1. 우선 MacOs 에서 node.js 를 설치한다. https://looplian.tistory.com/entry/MacOs-%EC%97%90%EC%84%9C-nodejs-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0-homebrew MacOs 에서 node.js 설치하기 homebrew Homebrew가 설치되어 있을 때의 방법. 터

looplian.tistory.com

 

movie/index.html

! 단축키로 내용 시작

오타가 있어도 아무도 알려주지 않기에 꼼꼼히 작성해야할듯

★ 벡틱은 맥북 기준 option+₩ 

<!DOCTYPE html>
<html>
	//2. 자바스크립트에서 가져온다
    <body>
        <span>Total clicks: 0</span>
        <button id="btn">Click me</button>
    </body>
    
    <script>
        let counter = 0;
        const button = document.getElementById("btn");
        const span = document.querySelector("span");
        function handleClick(){
            counter = counter + 1;	//데이터업데이트
            span.innerText = `Total clicks: ${counter}`;	//여기서 따옴표 아닌 벡틱임
        }
        button.addEventListener("click", handleClick)	//이벤트감지
    </script>
</html>
//2. 자바스크립트에서 가져온다 Total clicks: 0

템플릿 리터럴 기능 

1. 백틱(`)으로 템플릿 리터럴을 사용하면, 줄바꿈 등을 쉽게 표현 가능 → ""로는 안됨

2. ${ } 사이에 변수나 연산 등을 삽입 가능

react JS element 

html 사용하지 않고 js와 reactJS로만 코드 작성

=> 개발자들이 작업하는 방식은 아님

<!DOCTYPE html>
<html lang="en">
<head>
</head>
    <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");
        //span은 생성되어있지만 화면에는 보이지 않기 떼문에 body안에 작성해주어야함
        const span = React.createElement(
            "span", 
            {id:"sexy-span", style : {color: "red"}}, 
            "Hello I'm a span");   //생성하고자 하는 html태그이름과 같아야함
        ReactDOM.render(span, root);
    </script>
</html>

결과

<!DOCTYPE html>
<html lang="en">
<head>
</head>
    <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>
        //아직 필요가 없을 때는 null을 둔다
        const root = document.getElementById("root");
        //span을 h3로 바꿈으로써 
        const span = React.createElement("h3", null, "Hello I'm a span")
        const btn = React.createElement("button", null, "Click me"); 
        const container = React.createElement("div", null, [span, btn]);
        ReactDOM.render(container, root); //btn 렌더링
    </script>
</html>

span을 h3로 바꿈으로써 한줄에 둘다 기입되 있던걸 이렇게 바꿀 수 있음

→위 과정까지 해서 2개의 component를 가지는 component를 생성한거임 

 

코드는 이렇게 작성할거지만 createElement를 쓸일은 없다 react 쓰니까 

<!DOCTYPE html>
<html lang="en">
<head>
</head>
    <body>
        <div id="root"></div>
    </body>
    <!-- reactJS, reactDOM 설치한거임 -->
    <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>
        //아직 필요가 없을 때는 null을 둔다
        const root = document.getElementById("root");
        //span을 h3로 바꿈으로써 
        const span = React.createElement(
            "h3",   //header3
            //reatJS에서는 아래 코드들 쓸 일 없음 creatElement자체 안씀
            //property  
            {
                id: "title",
                onMouseEnter: () => console.log("mouse enter"),
            }, 
            //content
            "Hello I'm a span"
        );
        const btn = React.createElement(
            "button",
            {
                onClick: () => console.log("im clicked"),
                //
                style: {
                    backgroundColor:"tomato",
                    

                }
            },
            "Click me"
        ); 
        const container = React.createElement("div", null, [span, btn]);
        ReactDOM.render(container, root); //btn 렌더링 : react element들을 root div안에서 보여줘라
    </script>
</html>

😀JSX : JavaScript를 화장한 문법 → 생김새 html이랑 비슷

1 5 JSX 3:17 부터 다시하면 됨 

 

'개발 > react' 카테고리의 다른 글

react.js  (0) 2023.04.03
[reactJS] tuk-oj  (0) 2023.03.30

+ Recent posts

티스토리툴바