英文:
react script not being loaded
问题
我有以下脚本：
app.js
import React from 'react'
import ReactDOM from 'react-dom'
import {Stage, Sprite} from '@inlet/react-pixi';
const App = () => (
<Stage>
<Sprite image="assets/baseBike.png" x={100} y={100}/>
</Stage>
);
ReactDOM.render(<App/>, document.body);
以及以下内容：
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<div id="stageContainer">
</div>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script src="node_modules/pixi.js/dist/pixi.min.js"></script>
<script src="app.js" type="text/babel"></script>
</body>
</html>
现在，当我运行时，控制台中没有错误，但没有任何内容被渲染。我也无法找到我的脚本是否真的被加载。
如果我删除 type="text/babel"，然后会抛出错误：
Cannot use import statement outside a module
有人能告诉我可能遗漏了什么吗？
更新 Babel
所以我注意到我缺少了 Babel，但在添加它后，我得到以下错误：
require is not defined
英文:
I have the following script:
app.js
import React from 'react'
import ReactDOM from 'react-dom'
import {Stage, Sprite} from '@inlet/react-pixi';
const App = () => (
<Stage>
<Sprite image="assets/baseBike.png" x={100} y={100}/>
</Stage>
);
ReactDOM.render(<App/>, document.body);
And the following
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<div id="stageContainer">
</div>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<script src="node_modules/pixi.js/dist/pixi.min.js"></script>
<script src="app.js" type="text/babel"></script>
</body>
</html>
Now when I run this there is no error in the console but nothing is being rendered. I am also unable to find that my script is actually loaded.
if i remove the type="text/babel" then it throws me an error:
Cannot use import statement outside a module
Can anyone tell me what I might be missing?
Update babel
So I noticed that I was missing babel however after adding it I get the following error:
require is not defined
答案1
得分: 3
因为你在 ReactDOM.render 中使用了 document.body，所以你意外删除了 app.js 脚本。
尝试使用一个 div 作为你的挂载点，看看是否解决了你的问题。
例如：
ReactDOM.render(<App />, document.getElementById('stageContainer'));
英文:
I think because you are using document.body on your ReactDOM.render, you accidentally delete the app.js script.
Try to use a div as your mount point to see if that resolves your issue.
e.g.
ReactDOM.render(<App />, document.getElementById('stageContainer'));
答案2
得分: 1
由于您正在使用独立的 Babel 与 React，您需要配置您要用来编译脚本的 Babel 预设。
您可能需要类似这样的配置：
<script>
Babel.registerPreset('myPreset', {
presets: [[Babel.availablePresets['es2015-loose'], { modules: false }], [Babel.availablePresets['react']]],
plugins: [[Babel.availablePlugins['transform-modules-umd']]],
});
</script>
<script type="text/babel" src="app.js" data-presets="myPreset"></script>
请注意，脚本标签上的 data-presets 属性告诉 Babel 使用您定义的预设。
英文:
As you are using babel standalone with React, you need to configure the babel preset that you want to compile your scripts.
You probably need something like this:
<script>
Babel.registerPreset('myPreset', {
presets: [[Babel.availablePresets['es2015-loose'], { modules: false }], [Babel.availablePresets['react']]],
plugins: [[Babel.availablePlugins['transform-modules-umd']]],
});
</script>
<script type="text/babel" src="app.js" data-presets="myPreset"></script>
Note that the data-presets property on the script tag tells babel to use your defined preset.
答案3
得分: 1
使用ReactJS与浏览器一起使用Babel时，您不需要使用import语句。以下是我创建的在浏览器中运行的简单应用程序示例（请注意，我没有使用create-react-app）：
// app.js
const App = () => {
return <h1>Test App</h1>;
};
ReactDOM.render(<App />, document.getElementById('root'));
您可以在index.html中使用此组件：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<!-- 一些HTML内容 -->
<div id="root"></div>
<!-- 一些其他HTML内容 -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- 需要babel来解析JSX -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- 导入React.js -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 导入react-dom.js -->
<script type="text/babel" src="/app.js"></script>
<!-- 导入您的JS文件并添加type="text/babel"，否则Babel无法解析它 -->
</body>
</html>
我已经测试过了，对我有效，希望对您有帮助。
英文:
when using reactjs with browser using babel you dont need to use import ,here is how i have created simple app that run with browser (note that i am not using create-react-app ):
app.js
const App = () =>{
return <h1>Test App</h1>
};
ReactDOM.render(<App/>, document.getElementById('root'));
you can use this component in index.html as
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<!-- some HTML -->
<div id="root"></div>
<!-- some other HTML -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- babel is required in order to parse JSX -->
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- import react.js -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"> </script>
<!-- import react-dom.js -->
<script type="text/babel" src="/app.js"></script>
<!-- import your JS and add - type="text/babel" - otherwise babel wont parse it -->
</body>
</html>
i have tested it and its worked for me ,hope it will help you
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论