@rempei

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

React codepen 初心者の質問

解決したいこと

Reactに関する質問です
codepenで以下のようなコード書いてみたのですがエラーが出てしまいます
どうすれば解決できるでしょうか?

発生している問題・エラー

Uncaught SyntaxError: Unexpected token '<'

### 該当するソースコード

https://codepen.io/minator/pen/XWYmPJN

import React from "https://cdn.skypack.dev/react@17.0.1";

class Site extends React.Component{
  render() {
    return (
      <div>
-この行に出てきます-
        <div>
          <h2 className="heading">Page Heading</h2>
        </div>
        <div>
          <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRoYQBxGMQdwvzg_G9DuRHUhCOj2LUhmeDYpg&usqp=CAU" />
        </div>
      </div>
    );
  }
}

### 自分で試したこと

サイトや教科書を見直してみましたがなぜエラーが出るのか見つけられませんでした。
0 likes

1Answer

CodepenでJSX記法を使用するには,Settingsにある「JavaScript Preprocessor」を「Babel」に設定してください.

1Like

Comments

  1. @rempei

    Questioner

    ご回答ありがとうございます。
    エラーは無くなったのですが、h2タグもimgタグも表示されません。
    コードはそのままです。大変恐縮ですが、理由が分かれば教えていただきたいです。
  2. 実際に動作させるには,コンポーネントをどこかしらの要素にrenderする処理が必要です.
    公式ドキュメントをご参照ください.

    下記リンク先はReact 18での記述になっているので,特段の事情が無ければimportのバージョン指定も18にすることをお勧めします.

    https://ja.reactjs.org/docs/rendering-elements.html

Your answer might help someone💌