728x90
ReactJS : 어플리케이션이 아주 interactive하도록 만들어주는 library
ReactJS는 element를 생성하고 event listener를 더하는 것을 도와줌
ReactDOM : 모든 React element들을 HTML body에 둘 수 있도록 해줌
render의 의미 : 사용자에게 보여주는 것. React element를 가지고 HTML을 만들어 배치한다는 것
JSX
- Javascript를 확장한 문법
- 기본적으로 React요소를 만들 수 있게 해주는데 HTML에서 사용한 것과 비슷하게.
Babel : JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꾸어짐
<!DOCTYPE html>
<html lang="en">
<body>
<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script> //react import
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script> //react-dom import
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> //babel import
<script type="text/babel">
const root = document.getElementById("root"); //root
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("i'm clicked")}>Click me</button>
);
const Container = () => (
<div>
<h3>Total clicks: {counter}</h3>
<button onClick={countUp}>Click me</button>
</div>
);
ReactDOM.render(Container, root) //root안에 Container을 넣어서 보여줘
</script>
<div id="root">
</div>
</body>
</html>
div에 const를 넣기 위해서는
1. const를 함수로 만들어줘야 함. const Btn = () => ();
-> arrow function
2. = () => (); 이건 function Btn() {return (); }랑 같음
3. HTML태그처럼 만들어서 넣어줌
4. 컴포넌트의 첫글자는 대문자
반응형
'React' 카테고리의 다른 글
| [React] create react 설치 후 (0) | 2022.11.09 |
|---|---|
| [React] props (0) | 2022.11.09 |
| [React] state3 - 분/시간, 킬로미터/마일 (0) | 2022.11.09 |
| [React] State2 (0) | 2022.11.09 |
| [React] State1 (1) | 2022.11.09 |
댓글