2. 리액트 시작하기

chaen-ing·2023년 3월 19일

📌 html, css파일 생성 및 수동 리액트 연동

.html
웹사이트 뼈대 구성

<html>
    <head>
        <title>My Blog!</title>
        <!--html파일과 css파일이 동일 디렉터리에 위치해야함-->
        <link rel="stylesheet" href="style.css"> 
    </head>
    <body>
        <h1>Welcome to My blog!</h1>
        <!--DOM Contatiner(Root Dom Node)-->
        <div id="root"></div>

        <!-- 리액트 가져오기-->
        <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
        <!--리액트 컴포넌트 가져오기-->
        <script src="MyButton.js"></script>
    </body>
</html>

.css
스타일 설정

h1{
	color : green;
	font-style : italic;
}

.js
수동으로 리액트 연동

function MyButton(props){
    const [isClicked, setIsClicked] = React.useState(false);

    return React.createElement(
        'button',
        {onClick : () => setIsClicked(true)},
        isClicked ? 'Clicked!' : 'Click here!'

    )
}

const domContainer = document.querySelector('#root');
ReactDOM.render(React.createElement(MyButton),domContainer);