react document cdn
https://codesandbox.io/
DOM 다루기 Element 생성하기
<!DOCTYPE html>
<html lang="en">
<body>
<script
crossorigin
src="https://unpkg.com/react@17/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
></script>
<div id="root"></div>
<script>
const rootElement = document.getElementById("root");
const elementV = document.createElement("h1");
const element = React.createElement("h1", { children: "Hello, world!" });
console.log(element);
console.log(elementV);
ReactDOM.render(element, rootElement);
// element.textContent = "Hello, world!";
// rootElement.appendChild(element);
</script>
</body>
</html>이렇게 해도 똑같이 동작
const element = React.createElement("h1", null, "Hello, world!");JSX과 Babel, JSX 다루기
const element = React.createElement(
"h1",
{
className: "title",
children: "Hello, world!"
},
"Hello, world!????" //이게 출력됨
);children에 무한히 추가가능
const element = React.createElement("h1", {
className: "title",
children: ["Hello, world!", "It's me!"]
});JSX
const element =<h1>Hello, world!</h1>;문자도 HTML도 아닌 JavaScript의 확장 문법
Babel: JavaScript Compiler
컴파일러: 언어 해석기, 특정 언어를 다른 프로그래밍 언어로 옮기는 프로그램
https://babeljs.io/
babel unpkg cdn link
<!DOCTYPE html>
<html lang="en">
<body>
<script
crossorigin
src="https://unpkg.com/react@17/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const rootElement = document.getElementById("root");
const elementV = document.createElement("h1");
const element = <h1 className="title">Hello, world!</h1>;
ReactDOM.render(element, rootElement);
</script>
</body>
</html>babel, 변수사용
<script type="text/babel">
const rootElement = document.getElementById("root");
const titleClassName = "title"; //변수화
const text = "Hello, world!"; //변수화
const element = <h1 className={titleClassName}>{text}</h1>;
ReactDOM.render(element, rootElement);
</script><script type="text/babel">
const rootElement = document.getElementById("root");
const titleClassName = "title";
const text = "Hello, world!";
const customH1 = <h1 className={titleClassName}>{text}</h1>; //변수화
const element = customH1;
ReactDOM.render(element, rootElement);
</script>children사용
<script type="text/babel">
const rootElement = document.getElementById("root");
const titleClassName = "title";
const text = "Hello, world!";
const customH1 = <h1 className={titleClassName} children={text} />; // children
const element = customH1;
ReactDOM.render(element, rootElement);
</script>spread연산자 사용
<script type="text/babel">
const rootElement = document.getElementById("root");
const titleClassName = "title";
const text = "Hello, world!";
const props = { className: titleClassName, children: text };
const customH1 = <h1 {...props} />;
const element = customH1;
ReactDOM.render(element, rootElement);
</script>두개의 의미가 같다
// const customH1 = <h1 {...props} />;
const customH1 = <h1 className={props.className} children={props.children} />
역시 코딩 천재👍 리액트 천재👍