Fatal编程技术网
  • javascript/
  • Javascript reactjs代码未显示在浏览器中

Javascript reactjs代码未显示在浏览器中

javascript reactjs

Javascript reactjs代码未显示在浏览器中,javascript,reactjs,Javascript,Reactjs,谢谢你在这里的出色工作。我是react.js的新手，有一些有限的js 技能。我正在尝试创建一个包含页眉、主页面和页脚的基本页面。我写了代码，控制台没有返回任何错误，但浏览器中没有显示任何内容。代码如下： js 我得到了这个： 我做错了什么？这里是代码视图 编辑：我忘了添加index.js。我编辑了它并更改了ReactDOM.render（，document.getElementById（'root'））toReactDOM.render（，document.getElementById（'re

谢谢你在这里的出色工作。我是react.js的新手，有一些有限的js 技能。我正在尝试创建一个包含页眉、主页面和页脚的基本页面。我写了代码，控制台没有返回任何错误，但浏览器中没有显示任何内容。代码如下：

js

我得到了这个：

我做错了什么？这里是代码视图

编辑：我忘了添加index.js。我编辑了它并更改了ReactDOM.render
（，document.getElementById（'root'））
to
ReactDOM.render（，document.getElementById（'react'）


现在我有一个空白页显示，没有更多的浏览器上的错误。。。有什么想法吗？
尝试在结束标记之前添加此代码：



检查是否还需要jquery.js或任何其他javascript包

我在React文档页面上看到，它们提供了一个指向CodePen“Hello World”React页面的链接-您也可以将其用作种子模板：
http://codepen.io/gaearon/pen/ZpvBNJ?editors=0010


这来自于页面
您提供的代码有效。但是，您在问题中包含的屏幕截图显示了一个
文档.getElementById（'root'）
行，该行不是您的代码的一部分-您可能需要重新构建代码或确保您的开发服务器（例如webpack）在正确的源目录下运行

另外，请检查关于react
标记位置的回答：



const头=（{title}）=>（{title}）；
常量Main=（{title}）=>（{title}）；
常量页脚=（{title}）=>（{title}）；
类应用程序扩展了React.Component{
render（）{
const{header，main，footer}=this.props；
返回(
);
}
};
ReactDOM.render(
,
document.getElementById（'react'）
);



看起来您正在尝试访问一个名为root的元素，该元素尚未创建。您的代码中是否包含了所有适当的库，如
react.js
？我可能只是错过了它，或者你可能没有发布那个部分，但这是需要做的事情，以使用冰酒，我没有看到根。。。您在哪里看到它？它可能是
语句中的类似URL:
https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js
@KenH。也许你是对的，我对react很陌生。我在哪里可以确保所有的设置都正确？是的，这是从index.js我在那里添加的代码

const Header = ({title}) => (<header>{title}</header>);
const Main = ({title}) => (<main>{title}</main>);
const Footer = ({title}) => (<footer>{title}</footer>);

class App extends React.Component {
    render() {
        const {header,main,footer} = this.props;
        return (
            <div className="app">
                <Header title={header} />
                <Main title={main} />
                <Footer title={footer}/>
            </div>
        );
    }
};

ReactDOM.render(
    <App
        header="I am the header"
        main="I am the main"
        footer="I am the footer" />,
    document.getElementById('react')
);




export default App;



<body>


  <div id="react"></div>


  </body>



Compiled successfully!

You can now view wp in the browser.

  http://localhost:38867/

Note that the development build is not optimized.
To create a production build, use npm run build.