私の最初のReactプロジェクトに取り組んでいて、JSにとっては初めてのことですが、非常に基本的な問題に取り組んでいます。これをデバッグするためのベストプラクティスは何ですか?
create-react-app
でアプリを作成しました外部スクリプトのロードに成功しません。驚くべきことに、これまでのところオンラインやドキュメントでヘルプを見つけることができませんでした。むしろ、これが問題であるという言及はありません。
public/index.html
の下部
、私が書いた場合:
<script>
console.log('Hello World!');
</script>
=> コンソール表示
'Hello World!'
、通常、すべて良い!
しかし、代わりに私がする場合:
<script type="text/babel" src="../src/js/helloworld.js"></script>
そして、
helloworld.js
ファイルには
console.log('Hello World!');
のみが含まれます
=> コンソールには何も表示されません!
どうやら、
type
「
text/babel"
」である必要がありますまたは、構文エラーが表示されます。
私は何を間違えていますか?
私のフォルダ構造は次のとおりです。
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ └── favicon.ico
│ └── index.html
│ └── manifest.json
└── src
└── App.css
└── App.js
└── App.test.js
└── index.css
└── index.js
└── logo.svg
└── js
└── helloworld.js
helloworld.js
を移動した場合も機能させることができますpublic
内のファイルcreate-react-app
が使用するサーバーとしてのフォルダーpublic
のすべてのアセットを提供します フォルダーがsrc
を提供しません 。ここにドキュメントがありますあなたの
index.html
で<script type="text/javascript" src="js/helloworld.js"></script>
プロジェクトに
js
を入れます パブリックpublic/js/helloworld.js
内のフォルダータイプは
text/javascript
である必要があります ブラウザにファイルの解釈方法を知らせるためです。構文エラー、あなたが得ているのは、create-react-app
ファイルが見つからない場合はindex.htmlをレンダリングし、ブラウザにはjavascriptではなくhtmlが表示されるため、エラー:Uncaught SyntaxError: Unexpected token <
また、
create-react-app
複雑さを隠してしまい、舞台裏で何が起こるかをすべて理解するのが難しくなります。完全なツーリングシステムを所定の場所に移動する場合は、npm run eject
を実行できます (ただし、ドキュメントを最初に読んでください:)デバッガで[ネットワーク]タブを確認すると、実際には負荷 あなたのために。ただし、画面上の効果は表示されません。これは、create-react-appが機能する方法ではないためです。空のインデックスページを提供するのではなく、Reactアプリを挿入するdivを提供するように設定されています。このツールが機能する方法ではないため、インターネット上でこれを見つけることはできません。ドキュメントを読んで、それがどのように機能するのかを学び、あなたがやったことをとても幸せに思うでしょう。 :)
関連記事
- カバールなしで外部依存関係を持つhaskellスクリプトをコンパイルする
- ReactNativeカスタムフォントの問題0634
- indexhtmlに外部jsスクリプトを追加する方法
- 現在のコンポーネントの下にあるコンポーネントの読み込みに反応する
- 外部スタイルシートがロードされない
- Action Script30でTXTファイルからコードをロードする
- 基本的なreactアプリケーションをロードする際のエクスポートエラー
- APIからデータをロードするときにreactフックに設定して状態を保存するときに問題が発生しますか?
- Javassistを使用した外部classファイルのロード
- @ Reach/Routerの問題に対応するスイッチケースを機能させる方法
- Uberはスクロール矢印付きのタイプHorizontalScrollSpyを食べます
- Webpack DevServerが遅すぎますか、それとも何か問題がありますか?
- カスタムデータベースのクエリ(Mongodb)
- React-Redux:インポート試行エラー: '/ components/Score'にデフォルトのエクスポートが含まれていません( 'Score'としてインポートされました)
- divターゲットにアクセスして、reactでリストグループアイテムのスタイルを切り替える方法は?
- React Nativeエラー失敗したプロップタイプ:タイプ `array`の無効なプロップ` children`が `Overlay`に提供されました。
- svg要素の幅と高さを制御する方法
- 別のページにあるボタンの値を呼び出すにはどうすればよいですか?
- jsonから特定のコンテンツをレンダリングする
- JavaScriptを使用したスライドショーを使用したReactJSの画像モーダル
プロジェクトの作成に使用したボイラープレート(create-react-app)は、node.js開発環境を利用するため、ノードモジュールを作成することにより、その開発ワークフローに固執する必要があります。
したがって、helloworld.jsをノードモジュールに変換する必要があります。
次に、アプリケーションの他のモジュール(つまり、index.js)で使用します。
node.jsモジュールの仕組みについて読む必要があります。