React syntax errorが出る

Question

Javascript/React 学習中です。

returnの次の行で、
下記エラーが表示されますが、ググってみましたが、エラー原因が自分でわかりませんでした。
ご指摘または、確認すべき場所をアドバイス頂けますと幸いです。

SyntaxError: Unexpected token '<'

const React = require('react');
const DefaultLayout = require('./layouts/Default');
class New extends React.Component {
  render() {
    return (
      <DefaultLayout title={'Add New Pokemon'}>
        <div>
          <h1>New Pokemon</h1>
          <from action="/pokemon" method="POST">
            Name: <input type="text" name="name" /><br />
            Img: <input type="text" name="img" /><br />
            <input type="submit" name="" value="New Pokemon" />
    </form> 
    </div>);
    </DefaultLayout>
}
}

module.exports = New;

Comments

[maisumakun]

そのファイルは、どこからどのような形で参照していますか？

Answer 1

パッと見ただけでも問題はいくつか見つかります。

• <formが<fromになっている
• </div>);と、JSXが終わりきっていないところでカッコを閉じてしまっている

Comments

[maisumakun]

エラーメッセージからすると、上記の問題に加えて「JSXを認識できない環境からコードを読み込んでいる」という可能性も考えられます。

[hiro_ike]

とりあえず、上記直しただけで参照したかったページは見れました！
こんな初歩的なところを間違えていたとは、ありがとうございました。

コメントいただい皆様、ありがとうございました。

Answer 2

JSX要素を追う限りでは、おそらくこうです。

const React = require('react');
const DefaultLayout = require('./layouts/Default');
class New extends React.Component {
  render() {
    return (
      <DefaultLayout title={'Add New Pokemon'}>
        <div>
          <h1>New Pokemon</h1>
          <from action="/pokemon" method="POST">
            Name: <input type="text" name="name" /><br />
            Img: <input type="text" name="img" /><br />
            <input type="submit" name="" value="New Pokemon" />
    </form> 
-    </div>);
-    </DefaultLayout>
+    </div>
+    </DefaultLayout>);
}
}

module.exports = New;

</div>);によってreturnが終わっている中で、</DefaultLayout>が出てきているせいだと思います。

Answer 3

実行環境がないので検証はしてませんが、

    </DefaultLayout>
} //←ここは')'なのでは？
}