리엑트 가져오기 부분 헷갈렸어요

처음 만난 리액트(React)

(실습) 직접 리액트 연동하기

작성

949

<script
      src="https://unpkg.com/react@18/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
      crossorigin
    ></script>
 
복붙하세요

HTML/CSS javascript react

답변 3

유승호

소플선생님 저도 왜안되나 해서 body 코드를 복붙해봤는데 작동이 되네요

여기가 오타였네요 <script src="https://unpkg.com/react@17~~-dom~~/umd/react-dom.development.js" crossorigin></script>

그런데 이번엔 버튼 글자가 안바낌니다

코드는

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);

이와 같습니다 뭐가 문제일까요

Inje Lee (소플)

지식공유자

안녕하세요, 유승호님.

혹시 index.html 파일 전체 코드를 올려주실 수 있을까요?

Inje Lee (소플)

지식공유자

안녕하세요, stiger333님.

아래 index.html파일 전체 코드를 올려두었으니, 참고하시기 바랍니다!

<html>
    <head>
        <title>소플의 블로그</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <h1>소플의 블로그에 오신 여러분을 환영합니다!</h1>

        <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>

이성구

onclick

onClick 카멜표기로 써야되네요:)

Inje Lee (소플)

지식공유자

안녕하세요, 이성구님.

매의 눈으로 잘 발견해주셨군요!

댓글 달아주셔서 감사합니다.

인프런 커뮤니티 질문&답변

리엑트 가져오기 부분 헷갈렸어요