reactjs代码未显示在浏览器中

Question

Thanks fr the great work here. 感谢fr的出色工作。 I'm a newbie in react.js with some limited js skills. 我是react.js的新手，但技能有些局限。 I'm trying to create a basic page with a header , a main and a footer. 我正在尝试创建一个带有页眉，主页面和页脚的基本页面。 I wrote the code , console returned no error but nothing is showing up into browser. 我编写了代码，控制台未返回任何错误，但浏览器未显示任何内容。 Here s the code : 这是代码：

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

html HTML

<body>


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


  </body>

console returned: 控制台返回：

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.

And I got this : 我得到了这个：

What did I do wrong ? 我做错了什么？ codeview here https://codepen.io/anon/pen/mmaxvj 此处查看代码https://codepen.io/anon/pen/mmaxvj

EDIT : I forgot to add index.js. 编辑：我忘了添加index.js。 I edited it and changed ReactDOM.render (<App />, document.getElementById('root')); 我对其进行了编辑并更改了ReactDOM.render (<App />, document.getElementById('root')); />，document.getElementById（'root (<App />, document.getElementById('root')); to ReactDOM.render(<App />, document.getElementById('react')); 到ReactDOM.render(<App />, document.getElementById('react'));

Now I have a blank page showing up and no more error on the browser... Any thoughts ? 现在我有一个空白页显示，浏览器上没有更多错误...有什么想法吗？

Answer 1

Try adding this code before the closing </body> tag: 尝试在</body>标记之前添加以下代码：

<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>

Check to see if you also need jquery.js or any other javascript packages. 检查是否还需要jquery.js或任何其他javascript软件包。

I see on the React doc pages, they give a link to the CodePen "Hello World" React page - you can also use that as a seed template: http://codepen.io/gaearon/pen/ZpvBNJ?editors=0010 我在React doc页面上看到，它们提供了指向CodePen“ Hello World” React页面的链接-您也可以将其用作种子模板： http://codepen.io/gaearon/pen/ZpvBNJ?editors=0010 ://codepen.io/gaearon/pen/ZpvBNJ?editors=0010

This came from the page https://facebook.github.io/react/docs/hello-world.html 这来自页面https://facebook.github.io/react/docs/hello-world.html

Answer 2

The code you provided works. 您提供的代码有效。 However, the screenshot you included in your question shows a document.getElementById('root') line which is not part of your code - you might need to re-build your code or make sure your dev server (eg webpack) is running on the correct source directory. 但是，您包含在问题中的屏幕截图显示了document.getElementById('root')行，该行不属于您的代码-您可能需要重新构建代码或确保您的开发服务器（例如webpack）正在运行正确的源目录。

Also check this answer regarding the placement of the react <script> tag: https://stackoverflow.com/a/26416407/1647737 还要检查有关react <script>标记位置的以下答案： https : //stackoverflow.com/a/26416407/1647737

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="react"></div>

reactjs代码未显示在浏览器中

问题描述

2 个解决方案

解决方案1
0 2017-05-23 02:36:53

解决方案2
0 2017-05-23 02:39:24

reactjs代码未显示在浏览器中

问题描述

2 个解决方案

解决方案1 0 2017-05-23 02:36:53

解决方案2 0 2017-05-23 02:39:24

解决方案1
0 2017-05-23 02:36:53

解决方案2
0 2017-05-23 02:39:24