inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

처음 만난 리액트(React)

섹션 2 리액트 시작하기 (실습) 직접 리액트 연동하기

815

이민준

작성한 질문수 3

1

click 버튼이 나타나지 않습니다.

코드는 정상적으로 오타가 없는지 여러 번 확인했습니다.

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

    return React.createElement(
        'button', 
        {onClick: () => setIsClicked(true)},
        isClicked ? 'Clicked!' : 'Click here!'
    )
}
<html>
    <head>
        <title>민준의 블로그</title>
        <link rel="stylesheet" href="sylesj.css">
    </head>
    <body>
        <h1>민준의 블로그에 오신 여러분들 환영합니다</h1>

        <div id="root"></div>

        <!--리액트 가져오기-->
        <script src="https://unpkg.com/react@17/umd/react.decelopment.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@17/umd/react.decelopment.js" crossorigin></script>

        <!--리액트 컴포넌트 가져오기-->
        <script src="MyButtonj.js"></script>
    </body>
</html>

HTML/CSS javascript react

답변 2

0

이민준

development로 고쳐도 버튼이 나오지 않습니다 ㅠ

0

Inje Lee (소플)

다시 자세히 보니 아래쪽 react-dom을 가져오는 부분이 잘못되어 있네요~

아래와 같이 수정해서 다시 해보시기 바랍니다~

<script src="https://unpkg.com/react-dom@17.0.0/umd/react-dom.development.js" crossorigin></script>

 

0

Inje Lee (소플)

안녕하세요, 소플입니다.

리액트 가져오기 부분에 오타가 있습니다.

아래와 같이 수정해서 다시 한 번 해보시기 바랍니다!

decelopment => development

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@17/umd/react.development.js" crossorigin></script>

 

감사합니다.

0

이민준

상단에 질문 남겨주신것처럼 했는데도 여전히 버튼이 나오지 않습니다 ㅠ

<html>
    <head>
        <title>민준의 블로그</title>
        <link rel="stylesheet" href="sylesj.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.0.0/umd/react-dom.development.js" crossorigin></script>

        <!--리액트 컴포넌트 가져오기-->
        <script src="MyButtonj.js"></script>
    </body>
</html>

0

Inje Lee (소플)

제가 한 곳만 집중해서 보다보니 아래쪽에 오타가 있는 것을 못봤네요~

아래 파일 이름에도 오타가 있습니다.

MyButtonj.js => MyButton.js

수정한 이후에 한 번 해보시고, 그래도 안되면 크롬 개발자 도구를 열어서 console 탭에 에러메시지가 혹시 나오는지 확인해보시기 바랍니다!

강의가 삭제되었다고 합니다

0

106

1

이거 왜 존재하지 않는다고 뜨는건가요

0

133

1

존재하지 않는 수업이라고 떠요

0

182

1

안드로이드 에뮬레이터 오류

0

100

1

교재 구입해서 강의 들으려고 하는데 커리큘럼이 없어졌어요.

0

125

1

prevIsConfiromed 질문

1

141

2

chapter14 잘이해가 되지않습니다..

1

135

2

2025년 3월 리액트버전

1

201

2

npm 설치 오류

1

174

1

chapter_07 콘솔로그 질문드려요~!

1

127

2

안녕하세요 미니블로그 실습 질문드립니다.

1

178

3

에러가 떠요

1

218

3

Chapter6 질문 드립니다

1

209

2

실습 코드 있을까요?

1

205

2

상태가 업데이트될때 컴포넌트 최상단의 console.log 코드가 두번 실행되는 이유가 궁금합니다.

1

233

2

npx create-react-app my-app 명령어 입력이 잘못된 것 같습니다

0

307

3

이름과 코멘트 줄바꿈이 안 됩니다.

0

139

1

버튼이 안 뜹니다

0

303

2

npx create-react-app my-app

1

470

2

jsx 코드 작성해보기에서 index.js 수정 후 에러 뜹니다.

1

375

3

Chapter_05 터미널, 리액트 에러

0

193

2

npx create-react-app my-app 명령어 반응없음

1

432

3

import 코드 에러

1

214

1

백틱

1

121

1