바닐라 JS 크롬앱
리액트 만들기 전에 미리 바닐라 JS로 크롬앱 만들기 클리어 하고 와라... 바로 갑니다
근데 JS는 이미 어느정도 아니까, 안되겠다 싶으면 돌아가는거로 할까...
생활코딩 말고 노마드코딩으로 시작을 했어도 좋았을것같다는 생각이 조금 들긴 하는데
도움 엄청많이 됬었으니까 후회는 없는듯
일단
function handleClick(){
counter += 1;
span.innerHTML = `Total clicks: ${counter}`;
}
js에서 문자열 내에 변수 쓰는 방법인듯.
리눅스에서 본것과 비슷한 느낌?
근데 환경구축은 해줘야될듯. 내꺼는 그냥 쌩파일 느낌이네
ReactJS 영화 웹 강의는 일단 2.1까지 봤고,
바닐라JS가서 환경구축까지만 보고 나중에 돌아오자.. 라고 생각했는데 환경설정 딱히 없는듯
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script>
const root = document.getElementById("root");
const span = React.createElement(
"span",
{id:"sexy-span", style:{color:"red;" } },
"Hello, I'm a span"
);
ReactDOM.render(span, root); //render : 사용자에게 보여준다
</script>
</html>
계속 진행중...
React에서 createElement
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<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); //render : 사용자에게 보여준다
</script>
</html>
========
JSX?
JS 확장?
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <!-- JSX 를 컴퓨터가 이해하게 하기 위해 필요, type="text/babel" 로 해줘야 동작함-->
<script type="text/babel">
const root = document.getElementById("root");
const Title = (
<h3 id="title" onMouseEnter={ () => console.log('mouse enter')}>
Hello I'm a Title
</h3>
);
const Button = (
<button
style={{
backgroundColor:"tomato",
}}
onClick={() => console.log("im clicked")}
>
Click me
</button>
);
const container = React.createElement("div", null, [Title, Button]);
ReactDOM.render(container, root); //render : 사용자에게 보여준다
</script>
</html>
#2.6 JSX part Two
arrow function?
const Title = () => (
<h3 id="title" onMouseEnter={ () => console.log('mouse enter')}>
Hello I'm a Title
</h3>
);
function Title(){
return (
<h3 id="title" onMouseEnter={ () => console.log('mouse enter')}>
Hello I'm a Title
</h3>
);
}
동일한 코드라고 함
const Container = (
<div>
<Title />
<Button />
</div>
);
JSX만의 함수실행방법이라고...
컴포넌트(위 코드에서는 Title, Button)의 첫글자는 반드시 대문자로!
그렇게 안하면 위에서 선언했던 태그가 생성되는것이 아닌, 일반 html 태그가 생성된다.
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <!-- JSX 를 컴퓨터가 이해하게 하기 위해 필요, type="text/babel" 로 해줘야 동작함-->
<script type="text/babel">
const root = document.getElementById("root");
/*const Title = () => (
<h3 id="title" onMouseEnter={ () => console.log('mouse enter')}>
Hello I'm a Title
</h3>
);*/
function Title(){
return (
<h3 id="title" onMouseEnter={ () => console.log('mouse enter')}>
Hello I'm a Title
</h3>
);
}
const Button = () => (
<button
style={{
backgroundColor:"tomato",
}}
onClick={() => console.log("im clicked")}
>
Click me
</button>
);
const Container = () => (
<div>
<Title />
<Button />
</div>
);
ReactDOM.render(<Container />, root); //render : 사용자에게 보여준다
</script>
</html>
'공부 > ReactJS' 카테고리의 다른 글
| 노마드코딩 수강일지 07 / ReactJS #7 PRACTICE MOVIE APP (1) | 2022.12.24 |
|---|---|
| 노마드코딩 수강일지 06 / ReactJS #6 EFFECTS (0) | 2022.11.27 |
| 노마드코딩 수강일지 04 / ReactJS #5 노드 JS 설치, 환경 세팅 (0) | 2022.11.26 |
| 노마드코딩 수강일지 03 / ReactJS #4 PROPS, Memo (0) | 2022.11.20 |
| 노마드코딩 수강일지 02 / ReactJS #3 STATE, Modifier (0) | 2022.11.13 |
