- 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 부터 다시하면 됨
