Wlsepf
120
2022-02-21 21:15:04
1
215

안녕하세요 이번에 리엑트 공부를 시작했는데


방금전에 강의를 듣고 있었는데

강의에 나온대로 따라 해도 계속 안되는거에요

콘솔을 봐도 뭔지를 모르겠어서 질문 남깁니다.


<!DOCTYPE html>
<html lang="en">
  <body>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <div id="root"></div>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

      const Text = ({ text }) => (
          // text가 대문자로 시작하면 h1, 소문자로 시작하면 h3
          if (text.charAt(0) === text.charAt(0).toUpperCase()) {
             return <h1>{text}</h1>;
          } else {
             return <h3>{text}</h3>;
          }
      );
      const element = (
        <>
          <Text text="Text" />
          <Text text="text" />
        </>
      );
      ReactDOM.render(element, rootElement);
    </script>
  </body>
</html>


오류는 다음과 같습니다.


babel.min.js:1 Uncaught SyntaxError: /Inline Babel script: Unexpected token (6:10)

  4 |       const Text = ({ text }) => (
  5 |           // text媛� ��臾몄옄濡� �쒖옉�섎㈃ h1, �뚮Ц�먮줈 �쒖옉�섎㈃ h3
> 6 |           if (text.charAt(0) === text.charAt(0).toUpperCase()) {
    |           ^
  7 |              return <h1>{text}</h1>;
  8 |           } else {
  9 |              return <h3>{text}</h3>;
    at t.a._raise (VM3162 babel.min.js:1)
    at t.a.raiseWithData (VM3162 babel.min.js:1)
    at t.a.raise (VM3162 babel.min.js:1)
    at t.a.unexpected (VM3162 babel.min.js:1)
    at t.a.parseExprAtom (VM3162 babel.min.js:1)
    at t.a.parseExprAtom (VM3162 babel.min.js:1)
    at t.a.parseExprSubscripts (VM3162 babel.min.js:1)
    at t.a.parseUpdate (VM3162 babel.min.js:1)
    at t.a.parseMaybeUnary (VM3162 babel.min.js:1)
    at t.a.parseMaybeUnaryOrPrivate (VM3162 babel.min.js:1)


0
  • 답변 1

  • suka
    2022-02-21 21:47:17
    const Text = ({ text }) => {
    // text가 대문자로 시작하면 h1, 소문자로 시작하면 h3
    if (text.charAt(0) === text.charAt(0).toUpperCase()) {
    return <h1>{text}</h1>;
    } else {
    return <h3>{text}</h3>;
    }
    };
  • 로그인을 하시면 답변을 등록할 수 있습니다.