reactjs code not showing up in browser

Question

Thanks fr the great work here. I'm a newbie in react.js with some limited js skills. 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

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

<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

EDIT : I forgot to add index.js. I edited it and changed ReactDOM.render(<App />, document.getElementById('root')); to ReactDOM.render(<App />, document.getElementById('react'));

Now I have a blank page showing up and no more error on the browser... Any thoughts ?

Looks like you are trying to access an element called root that has not been created yet. — Icewine, May 23 '17 at 02:32
Are you including all of the proper libraries, like `react.js` in your code? I might have just missed it or you might not have posted that part, but it is something that needs to be done in order to use React. — Ken H., May 23 '17 at 02:33
@KenH. maybe you are right Im very new with react. Where can i make sure I have everything setup correctly ? — , May 23 '17 at 02:35
in your image that you posted. ReactDom.render(, document.getElementById('root'); It says that the target is not a DOM element and that probably means it has not been created yet or some other problem — Icewine, May 23 '17 at 02:35

score 0 · Answer 1 · answered May 23 '17 at 02:36

Try adding this code before the closing </body> tag:

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

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

This came from the page https://facebook.github.io/react/docs/hello-world.html

le_m · Answer 2 · 2017-05-23T02:44:07.243

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 (e.g. webpack) is running on the correct source directory.

Also check this answer regarding the placement of the react <script> tag: 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>

yes this was from index.js I added the code up there – May 23 '17 at 02:40 — , May 23 '17 at 02:40

reactjs code not showing up in browser

2 Answers2