[React] 다양한 방법으로 Hello World 띄우기

App.jsx 파일 내 수정

import * as React from 'react';

const title = 'World';

function App() {
    return (
        <div>
            <h1>Hello {title}</h1>
        </div>
    );
}

export default App;

검색창 띄우기

import * as React from 'react';

const title = 'World';

function App() {
    return (
        <div>
            <h1>Hello {title}</h1>
            
// 여긴 검색창 띄우기 용도
            <label htmlFor="search">Search: </label>
            <input id="search" type="text" />
        </div>
    );
}

export default App;

리액트 구조) 코드 > 내부 작업 > 브라우저에 띄

아래는 구조체 사용

import * as React from 'react';

const welcome = {
    greeting: 'Hey',
    title: 'React',
};

function App() {
    return (
        <div>
            <h1> {welcome.greeting} {welcome.title}</h1>

            <label htmlFor="search">Search: </label>
            <input id="search" type="text" />
        </div>
    );
}

export default App;

반환형 있는 함수로 출력

import * as React from 'react';

function getTitle(title) {
    return title;
}

function App() {
    return (
        <div>
            <h1> {getTitle('Hello World')}</h1>

            <label htmlFor="search">Search: </label>
            <input id="search" type="text" />
        </div>
    );
}

export default App;