Done.

src/components/Actors.js

@@ -4,7 +4,14 @@ import { actors } from '../data';
 const Actors = () => {
  return (
  <div>
- {/*{code here}*/}
+ <h1>Actors Page</h1>
+ {actors.map((actor, i) =>
+ <div key={i}>
+ <h2>Name: {actor.name}</h2>
+ <p>Movies:</p>
+ <ul>{actor.movies.map((movie, i) => <li key={i}>{movie}</li>)}</ul>
+ </div>
+ )}
  </div>
  );
 };

src/components/Directors.js

@@ -4,7 +4,14 @@ import { directors } from '../data';
 const Directors = () => {
  return (
  <div>
- {/*{code here}*/}
+ <h1>Directors Page</h1>
+ {directors.map((director, i) =>
+ <div key={i}>
+ <h2>Name: {director.name}</h2>
+ <p>Movies:</p>
+ <ul>{director.movies.map((movie, i) => <li key={i}>{movie}</li>)}</ul>
+ </div>
+ )}
  </div>
  );
 }

src/components/Home.js

@@ -3,7 +3,7 @@ import React from 'react';
 const Home = () => {
  return (
  <div>
- {/*{code here}*/}
+ <h1>Home Page</h1>
  </div>
  );
 };

src/components/Movies.js

@@ -1,10 +1,19 @@
 import React from 'react';
 import { movies } from '../data';
 
+
 const Movies = () => {
  return (
  <div>
- {/*{code here}*/}
+ <h1>Movies Page</h1>
+ {movies.map((movie, i) =>
+ <div key={i}>
+ <h2>Name: {movie.title}</h2>
+ <p>Time: {movie.time}</p>
+ <p>Genres:</p>
+ <ul>{movie.genres.map((genre, i) => <li key={i}>{genre}</li>)}</ul>
+ </div>
+ )}
  </div>
  );
 };

src/components/NavBar.js

@@ -3,8 +3,13 @@ import { NavLink } from 'react-router-dom';
 
 const NavBar = () => {
  return (
- <div>
- {/*{code here}*/}
+ <div className="navbar">
+ <ul>
+ <li><NavLink to="/" exact>Home</NavLink></li>
+ <li><NavLink to="/movies" exact>Movies</NavLink></li>
+ <li><NavLink to="/directors" exact>Directors</NavLink></li>
+ <li><NavLink to="/actors" exact>Actors</NavLink></li>
+ </ul>
  </div>
  );
 };

src/containers/App.js

@@ -13,7 +13,13 @@ import Movies from '../components/Movies';
 const App = (props) => {
  return (
  <Router>
- {/*{code here}*/}
+ <div>
+ <NavBar />
+ <Route exact path="/" component={Home} />
+ <Route exact path="/movies" component={Movies} />
+ <Route exact path="/directors" component={Directors} />
+ <Route exact path="/actors" component={Actors} />
+ </div>
  </Router>
  );
 };