Javascript 未加载脚本_Javascript_Reactjs_React Dom

Javascript 未加载脚本

javascript reactjs

Javascript 未加载脚本,javascript,reactjs,react-dom,Javascript,Reactjs,React Dom,我有以下脚本： 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>

我有以下脚本：

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);

谁能告诉我我可能遗漏了什么

更新巴别塔

    <!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>

因此，我注意到我缺少了babel，但是在添加它之后，我得到了以下错误：

 require is not defined

我认为，因为您在

ReactDOM.render

上使用了

document.body

，所以您意外地删除了

app.js

脚本

尝试使用div作为挂载点，看看这是否解决了您的问题

e、 g

ReactDOM.render（，document.getElementById（'stageContainer'）；

当您将babel standalone与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>


Babel.registerPreset（'myPreset'{
预设值：[[Babel.availablePresets['es2015-loose']，{modules:false}]，[Babel.availablePresets['react']]，
插件：[[Babel.availablePlugins['transform-modules-umd']]，
});

请注意，脚本标记上的数据预设属性告诉babel使用您定义的预设。

使用babel将reactjs与浏览器一起使用时，您不需要使用导入，以下是我如何创建使用浏览器运行的简单应用程序（请注意，我没有使用create react app）： app.js

const-App=（）=>{
返回测试应用程序
};
ReactDOM.render（，document.getElementById（'root'））；

您可以在index.html中将此组件用作

<!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>


你好，世界

我已经对它进行了测试，它对我很有用，希望它能帮助您

您需要使用bable将jsx转换为普通javascript，这不包括在您的源代码索引中。html@JatinParmar我更新了我的邮箱你能提供一些密码笔吗？我不明白你是怎么用的react@JatinParmar我提高了我的英语水平question@JatinParmar我也不确定我能不能添加一个提琴，因为我不能导入节点模块，导入是个问题，我现在还没有得到：require不是从Babelth定义的，这很奇怪。您的捆绑包中不应该有任何

require

关键字。这可能与您的webpack/babel配置有关。您可能需要此配置

{modules:false}

是否有一种更干净的方法来代替使用babel standalone？当然，很少有合理需要babel standalone的情况。由于您使用的是node，请尝试按照这样的教程为您的应用正确配置babel和webpack@MarcRasmussen另外，如果您只需要一个基本配置的话。为什么不试着用CreateReact应用程序启动你的项目呢？这是facebook提供的，也是目前最快的启动和运行一切的方法。

const App = () =>{
return <h1>Test App</h1>
 };
ReactDOM.render(<App/>, document.getElementById('root'));

<!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>