Javascript React js将js链接到html时出错_Javascript_Reactjs

Javascript React js将js链接到html时出错

javascript reactjs

Javascript React js将js链接到html时出错,javascript,reactjs,Javascript,Reactjs,我按照facebook的教程学习react。我使用npm create react app创建了一个react app。Html文件位于名为public的文件夹中。JS和CSS文件位于名为src的文件夹中这是我的index.html: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" conte

我按照facebook的教程学习react。我使用npm create react app创建了一个react app。Html文件位于名为public的文件夹中。JS和CSS文件位于名为src的文件夹中

这是我的index.html:

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>React App</title>
  </head>
  <body>
    <a href="login.html">Link</a>
    <div id="root"></div>

  </body>
</html>

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>React App</title>
  </head>
  <body>

    <div id="app"></div>

  </body>
</html>


反应应用程序

这是我的索引.js：

    import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';


ReactDOM.render(
  <App  name="Sumanth Jois"/>,
  document.getElementById('root')
);

从“React”导入React；
从“react dom”导入react dom；
从“./App”导入应用程序；
ReactDOM.render(
,
document.getElementById（'root'））
);

html工作正常<代码>正在屏幕上呈现。我有另一个文件login.html

这是login.html:

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>React App</title>
  </head>
  <body>
    <a href="login.html">Link</a>
    <div id="root"></div>

  </body>
</html>

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>React App</title>
  </head>
  <body>

    <div id="app"></div>

  </body>
</html>


反应应用程序

这是我的login.js：

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



ReactDOM.render(
  <App  name="Sumanth Jois"/>,
  document.getElementById('app')
);

从“React”导入React；
从“react dom”导入react dom；
ReactDOM.render(
,
document.getElementById（'app'）
);

但是这次login.html不显示任何内容，它是空的。谁能告诉我哪里出了问题？我已经被这个问题困扰了好几个小时。

我怀疑你还没有配置你的transpiler。@mehulmpt这不会阻止

login.html

呈现，如果出现生成问题，应用程序可能不会呈现到

index.html

的DOM中。@DaveNewton你说得对。To op：控制台中有什么？>第1行login.js上有意外的标记import语句之前有哪些空格？实际空间？或者一些看起来像空格的随机Unicode东西？我怀疑您没有配置transpiler。@mehulmpt这不会阻止

login.html

呈现，如果出现生成问题，应用程序可能不会呈现到

index.html

的DOM中。@DaveNewton您是对的。To op：控制台中有什么？>第1行login.js上有意外的标记import语句之前有哪些空格？实际空间？或者一些看起来像空格的随机Unicode东西？