React - 01 기본문법

React 기본 문법을 알아봐요 ! 

 

1. Hellow World 출력

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

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

//Hello World

위와 같이 root에 리엑트돔을 생성해서 root에 render 시키면 출력이 됩니다. 

 

 

2. JSX

JSX는 React에서 사용되는 자바스크립트 문법 확장입니다. JSX는 HTML과 유사한 구문을 사용하여 UI 구성 요소를 만들 수 있게 해줍니다.

스크립트 안에 h1같은 태그도 사용을 할수 있어요 ! 

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

const name = "getgrovy";

const hello = <h1>hellow {name}</h1>;;

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

//Hello getgrovy

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

function helloName(){
    return name.nick
}

const name = {
    nick : "getgrovy",
}

const hello = <h1>Hello, {helloName()}</h1>;
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(hello);
//Hello getgrovy

 

3. 랜더링

ReactDOM.render으로 랜더링을 했어요 !

import React from 'react'
import ReactDOM from 'react-dom'

function clock(){
    const element = (
        <div>
            <div>hello, getgrovy</div>
            <h2>지금은 {new Date().toLocaleDateString()}입니다.</h2>
        </div>
    );
}
ReactDOM.render(element, document.getElementById('root'));


export default clock;

//hello, getgrovy

//지금은 2023. 5. 8.입니다.

4. 컴포넌트를 사용하기

function 대문자+### 형식으로 컴포넌트로 생성 문법으로 생성함 쓸때는 < > 안에 넣어서 쓴다

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

function Hello(){
    return <h1>hello, getgrovy</h1>
}
const element = <Hello/>;

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

5. props

컴포넌트에 props라는 변수를 object타입으로 받아와서 실행할수있어요 ! 

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

function Hello(props){
    return <h1>hello, {props.name}</h1>
}
const element = <Hello name="getgrovy1"/>;

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

//hello, getgrovy1