Component Rendering In Action - Browser Won't Display Content


#1

Exercise:
https://www.codecademy.com/courses/react-101/lessons/components-render-each-other/exercises/component-render-action?action=lesson_resume

I see someone else asked this back in April, and the person who answered said you had to add module.exports = NavBar; to the bottom of the file, but I don’t see that anywhere in the instructions (like they claim), and it doesn’t work anyway. So what gives? Why is the browser not displaying anything?

Here is my code:

ProfilePage.js

import React from 'react';
import ReactDOM from 'react-dom';
import {NavBar} from './NavBar.js';


class ProfilePage extends React.Component {
  render() {
    return (
      <div>
        <NavBar />
        <h1>All About Me!</h1>
        <p>I like movies and blah blah blah blah blah</p>
        <img src="https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-monkeyselfie.jpg" />
      </div>
    );
  }
}

ReactDOM.render(
	<ProfilePage />
  document.getElementById('app')
);

NavBar.js

import React from 'react';

export class NavBar extends React.Component {
  render() {
    const pages = ['home', 'blog', 'pics', 'bio', 'art', 'shop', 'about', 'contact'];
    const navLinks = pages.map(page => {
      return (
        <a href={'/' + page}>
          {page}
        </a>
      )
    });

    return <nav>{navLinks}</nav>;
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="./styles.css">
	<title>Learn ReactJS</title>
</head>

<body>
  <main id="app">
  </main>
	<script src="https://s3.amazonaws.com/codecademy-content/courses/React/react-course-bundle.min.js"></script>
  <script src="/ProfilePage.compiled.js"></script>
</body>

</html>

#2

I just noticed that the React is not compiling to ProfilePage.compiled.js (click on the file browser). So that’s why nothing’s displaying, but is this a bug or did I do something wrong?


#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.