React

DOM 다루기, Element 생성하기

CodeSandBox -> 리액트 맛보기 동안 사용할 도구

Vanilla js Dom -> W3Schools/ createElement

const rootElement = document.getElementById('root');
const element = document.createElement('h1');
element.textContent = 'Hello, world!'
rootElement.appendChild(element);

CDN -> unpkg

<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>

React / React-dom -> element 생성, appendChild

// Vanilla js
const rootElement = document.getElementById('root');
const element = document.createElement('h1');
element.textContent = 'Hello, world!'
rootElement.appendChild(element);

// React
const element = React.createElement('h1', { children:'Hello world!' })
ReactDOM.render(element, rootElement)

JSX와 Babel, JSX 다루기

JSX -> React.createElement 표현식

Babel -> Javascript Compiler

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel"></script>

JSX 다루기 -> Spread 연산자

const rootElement = document.getElementById("root");

const text = "Hello, world!";
const titleClassName = "title";
const props = { className: titleClassName, children: text };
// const customH1 = <h1 className={props.className} children={props.children} />
const customH1 = <h1 {...props} />; // 위 주석코드를 spread로 축약
const element = customH1
ReactDOM.render(element, rootElement);