REACTはなぜ私には分かりませんかいくつかのエラーを示します

私はREACTを習得しようとしています。私はチュートリアルに従っています。私はチュートリアルに従ってすべてを作ったが、私は私が次のエラーメッセージを受け取る代わりに、私が見たいものを正確に見ていない。ここREACTはなぜ私には分かりませんかいくつかのエラーを示します

SyntaxError: '.container.' is not a valid selector 
<anonymous>    http://localhost:8080/bundle.js:7875:70 
__webpack_require__  http://localhost:8080/bundle.js:20:12 
<anonymous>    http://localhost:8080/bundle.js:48:19 
__webpack_require__  http://localhost:8080/bundle.js:20:12 
<anonymous>    http://localhost:8080/bundle.js:40:18 
<anonymous>

私のindex.jsコードです： //がインクルードが反応node_modulesからライブラリを反応させ、それを変数に割り当てる探しに行くこれは私が取得していますエラーです。

import React from 'react'; 
import ReactDOM from 'react-dom'; 

//Create a new component. This component should produce some HTML 
//const = create some variable 
const App = function(){ 
    return <div>Hey!</div>; 
} 

//web pack and babel translate for the browser. 
//Take this component's generated HTML and put it on the page (in the DOM) 
ReactDOM.render(<App />, document.querySelector('.container'));

私は間違っていることを理解していません、なぜ「。コンテナ」と言っているのですか？私のコードでそれは.container "

をされながら、これはまた、私は私のコードで何かを変更するたびに、私は、サーバーを停止してから見て、再びそれを実行する必要があり、私のindex.html

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="/style/style.css"> 
    <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css"> 
    <script src="https://maps.googleapis.com/maps/api/js"></script> 
    </head> 
    <body> 
    random stuff 
    <div class="container"></div> 
    </body> 
    <script src="/bundle.js"></script> 
</html>

ですここではドットのように変更すると、エラーを取り除くためにサーバーを再起動する必要がありましたが、クラス名の代わりにIDを使用しています。これにより問題の種類が解決されます。しかし、サーバーを使用するたびに、何か良いことがありますか？

出典

2017-11-29 S. N

'.container.''エラーテキストには' container'単語の後に余分なドットがありますが、レンダリングメソッドには余分なドットがありません。レンダリングの方法を再度確認してください。 –

'App'は' React.Component'を拡張する必要があります。 –

@PrameshBajracharya拡張する必要はありません。OPは機能的なReactコンポーネントを使用しています。彼の質問には含まれていないので、 '.container.'もおそらくタイプミスです。 –

ではなく、クラスのIDをターゲットにしてみてください。

ReactDOM.render(<App />, document.getElementById("app"));

HTMLファイル：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="/style/style.css"> 
    <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css"> 
    <script src="https://maps.googleapis.com/maps/api/js"></script> 
    </head> 
    <body> 
    random stuff 
    <div id="app"></div> 
    </body> 
    <script src="/bundle.js"></script> 
</html>

出典

2017-11-29 12:42:39 Dyo

これは私のためにwrokedありがとう！ –

index.jsの中身を変更してlocalhostに行ったときに保存すると、すぐに変更を見ることができません。サーバーを停止してからもう一度実行しなければ、これは正常ですか？ –

ホットリロードを行うにはwebpack-dev-serverが必要です。あなたはこれをあなたのために扱う 'create-react-app'で新しい反応アプリを作成することができます。 – Dyo

あなたがFunctional Componentを作成している場合は、関数のパラメータとしてpropsを渡す必要が反応します。

const App = function(props){ 
    return <div>Hey!</div>; 
}

出典

2017-11-29 12:46:23

REACTはなぜ私には分かりませんかいくつかのエラーを示します

答えて

関連する問題