質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.50%

  • React.js

    832questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

react.jsにてHelloWorldがでてこない汗

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 628

kazoogon

score 214

<!DOCTYPE html>
<html>
    <head>
        <title>react.js practice</title>
        <script src="https://fb.me/react-0.13.3.js"></script>
        <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
    </head>
<body>
<div id="content"></div>

<script>
var HelloWorld = React.createClass({
  render: function() {
    return (
      <p className="hello">Hello!World!</p>
    );
  }
});

React.render(
  <HelloWorld />,
  document.getElementById('content')
);
</script>
</body>
</html>

consoleを調べてみると15行目(<p className=~~の行)でUncaught SyntaxError: Unexpected token < とエラーが出ます。scriptタグにtype = "text/babel"などを足しても結果が同じです。何が違うのでしょうか??

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • s8_chu

    2017/02/25 09:40

    こちら(https://teratail.com/questions/67053)も同じ質問に見えますが、解決したのでしょうか?

    キャンセル

回答 1

+6

このようにしてはいかがでしょうか?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>react.js practice</title>
    <script src="https://fb.me/react-0.13.3.js"></script>
    <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
    var HelloWorld = React.createClass({
        render: function () {
            return (
                    <p className="hello">Hello!World!</p>
            )
        }
    });
    React.render(
            <HelloWorld />,
        document.getElementById('content')
    );
</script>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    React.jsを用いてラジオボタンで選択されている項目を取得

    現在、webアプリケーションの制作を行っており、React.jsを用いて、ラジオボタンで選択されている項目を取得したいと考えています。 以下のサイトを読んでみたのですが、ラジオボ

  • 解決済

    React.js dangerouslySetInnerHTML内のDOM操作について

    React.jsのdangerouslySetInnerHTMLの中からDOM要素を(className,ref)等を使って複数の要素を取得したいのですが、可能でしょうか。 また

  • 解決済

    react+reduxで作成しているソースファイルの肥大化をなんとかしたい

    前提・実現したいこと react+reduxで開発しているclassの肥大化をなんとかしたい 発生している問題・エラーメッセージ es6(babel)+react+red

  • 解決済

    react.jsにてHelloWorldがでてこない汗

    react.jsでHelloWorld!出力させるだけのコード書いてみましたが、何も出てきません。 何が違うんでしょうか?? <!DOCTYPE html> <html>

  • 解決済

    【react.js】onClickを機能させたい

    前提・実現したいこと React.jsを使ってページングを実現したいと思いっています。 まずテストとしてliをクリックしたらalertを出力させようと思ったのですが なかなか

  • 解決済

    helloworldしたい

    以下のようなコードを手始めに書いたのですが、まったく動かず、アドバイスをいただけたらとおもいまうs。 <!DOCTYPE html> <html lang="ja"> <he

  • 解決済

    >>react<< 文字を表示できないエラー

    前提・実現したいこと このようなプログラミングを組みました。文字が表示されないエラーにあっています。babelというのを使っています 文字だけでなく、hrなどすら表示されず、戸惑っ

  • 解決済

    React の Class 呼出に失敗します

     障害 React の Class を呼ぼうとすると、ブラウザ環境でエラーが発生し、呼出に失敗します。  環境 firefox 56 & chrome 62 babel-cor

同じタグがついた質問を見る

  • React.js

    832questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。