First Component

선언

컴포넌트 생성

function Greeting() {
    return <h2>My First Component</h2>
}

const Greeting = () => {
    return <h2>My First Component</h2>
}
export default Greeting;

화살표 함수의 경우 es6 부터 제공함
(기호에 맞게 사용하면 된다.)
외부에서 해당 컴포넌트를 사용하기 위해서는 export 구문을 사용하여 외부접근을 허용해줘야하 한다.

라이브러리

import React from 'react';
import ReactDOM from 'react-dom/client';

라이브러리를 사용하기 위해서는 import 구문을 사용하면 된다.
(통상 최상단에 배치)

ReactDOM

const root = ReactDOM.createRoot(document.getElementById('root'));

root (index.html) 부분에 ReactDOM 가상돔을 생성해준다.

렌더링

root.render(<Greeting/>)

리액트돔을 생성한 변수에 render 함수안에 컴포넌트를 넣어

결과

src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';

function Greeting() {
    return <h2>My First Component</h2>
}
export default Greeting;

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Greeting/>)

화면에서 잘 나타나는것을 알 수 있다.