Component Rendering In Action - Browser Won't Display Content


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:


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

class ProfilePage extends React.Component {
  render() {
    return (
        <NavBar />
        <h1>All About Me!</h1>
        <p>I like movies and blah blah blah blah blah</p>
        <img src="" />

	<ProfilePage />


import React from 'react';

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

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


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

  <main id="app">
	<script src=""></script>
  <script src="/ProfilePage.compiled.js"></script>


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?

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