출력하기

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(<h1>HELLO WEBS</h1>, document.getElementById("root"));

변수 출력

<aside> 💡 javascript + html = jsx

</aside>

import React from "react";
import ReactDOM from "react-dom";

const name= <h1>westsilver</h1>;

ReactDOM.render(name, document.getElementById("root"));

변수화

import React from "react";
import ReactDOM from "react-dom";

const name = "westsilver";
const hello = <h1>hello {name}</h1>;

ReactDOM.render(hello, document.getElementById("root"));

함수로 출력 (매개변수 / 리턴값 / 객체 등 매우 중요 !)

<aside> 💡 react에서 함수의 return 값 입력은 필수 !

DOM 구조 자체가 다르기 때문에, javascript로 쓴 코드를 react에 그대로 가져와서 쓸 수 없음

</aside>

import React from "react";
import ReactDOM from "react-dom";

function helloName(name){
  return name.nick;
}

const name = {
  nick : "westsilver"
}

const hello = <h1>hello {helloName(name)}</h1>;

ReactDOM.render(hello, document.getElementById('root'));

렌더링

javascript 구조 html을 다 읽고 난 후, javascript를 해석하고 실행

let clock = document.getElementById("clock");

setInterval(function(){
	clock.innerHTML = new Date().toLocaleTimeString();
},1000);

react DOM 구조 html과 javascript를 동시에 해석하고 실행