리엑트 기본구조에 대해 알아보자

hello world 출력하기

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>hello. world</h1>);

1.JSX

JSX는 자바스크립트(XML-like) 확장 문법으로, 리액트(React) 라이브러리에서 사용되는 구문입니다. JSX는 UI 컴포넌트를 생성하고 렌더링하는 데 사용됩니다. JSX는 일반적인 자바스크립트와 유사하지만, XML과 비슷한 구문을 사용하여 UI를 기술할 수 있습니다. 이는 UI를 작성하는 데 있어서 가독성과 유지 보수성을 높여줍니다. 또한, JSX를 사용하면 컴파일 시점에 문법 오류를 찾을 수 있어 개발자가 코드를 보다 안정적으로 유지할 수 있습니다.

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

const name = "webstroyboy";
const hello = <h1<hello {name}</h1<

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

2.JSX

객체와 함수를 같이 사용한 경우

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

function helloName(){
    return name.nick;
}

const name = {
    nick : "webstroyboy"
}

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

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

3.랜더링

// function clock(){
//   const element = (
//     <div>
//       <div>hello, webstroyboy</div>
//       <h2>지금은 {new Date().toLocaleDateString()}입니다.</h2>
//     </div>
//   );

//   ReactDOM.render(element, document.getElementById("root"));
// }
// export default clock

function App(){
    return (
    <div>
        <h1>리엑트</h1>
    </div>
    )
}
export default App;

4.컴포넌트

function Hello() {
return  <h1>hello. juneyungi</h1>

}
const element = <Hello />

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


export default Hello

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

function Welcome(props){
    return <h1>hello, {props.name}</h1>
}

function App(){
    return (
    <div>
        <Welcome name="web`s" />
        <Welcome name ="webstoryboy" />
        <Welcome name = "webss" />
    </div>
    )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

5.props

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

function Hello(props){
    return <h1>hello, {props.name}</h1>
}

const element = <Hello name="webstoryboy" />;

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

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

function formatDate(date){
    return date.toLocaleDateString();
}
function Comment(props){
    return (
    <div>
        <div>{formatDate(props.date)}</div>
        <div>{props.text}</div>
        <div>3</div>
        <div>4</div>
    </div>
    )
}

const comment = {
    data : new Date(),
    text : "이해했니?"

}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Comment date={comment.data} text={comment.text}/>);