jsxファイルをjsファイルにコンパイルする方法

Question

私はjsに反応するのが新しく、私は反応プロジェクトを作成するためにcreate-react-app npmパッケージを使用します。 ターミナルでnpm startコマンドを実行すると、コンソールに表示されたブラウザエラーUncaught SyntaxError: Unexpected token <の開発者コンソールが表示されます。これは、jsxファイルがjsファイルにコンパイルされないことを示しています。

私のJavaScriptファイルのコードのいずれかが.jsx拡張子を持つ

class ProductsList extends React.Component{ 
    render(){ 
     return (
     <div class=""> 
     Hello 
     </div> 
     ); 
    } 
} 

ReactDOM.render(
    <ProductsList/>, 
    document.getElementById('content') 
); 

Answer 1

ファイルでは、すでにJavaScriptのファイルです。それは.jsファイルと同じでなければなりません。 jsxの使用は、ファイルにJSX構文砂糖を使って書かれたコードが含まれていることを強調することに過ぎません。

create-react-appでプロジェクトを生成するには、既定でwebpackを設定しておく必要があります。コードはすでにES6からES5に移行されているはずです。問題はありません。

あなたのコードで気づいたことの1つは、classを小道具として使用することです。デフォルトでは、Reactでは代わりにclassNameを使用する必要があります。

<div className="some-class"> 
    Hello 
</div>