add initial structure

src/components/App.jsx

@@ -1,16 +1,22 @@
-export const App = () => {
+import React from 'react';
+import { Route, Routes } from 'react-router-dom';
+
+import Home from '../pages/Home';
+import Movies from '../pages/Movies';
+import MovieDetails from '../pages/MovieDetails';
+import Cast from '../pages/Cast';
+import Reviews from '../pages/Reviews';
+
+const App = () => {
   return (
-    <div
-      style={{
-        height: '100vh',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        fontSize: 40,
-        color: '#010101'
-      }}
-    >
-      React homework template
-    </div>
+    <Routes>
+      <Route path="/" element={<Home />} />
+      <Route path="/movies" element={<Movies />} />
+      <Route path="/movies/:movieId" element={<MovieDetails />} />
+      <Route path="/movies/:movieId/cast" element={<Cast />} />
+      <Route path="/movies/:movieId/reviews" element={<Reviews />} />
+    </Routes>
   );
 };
+
+export default App;

src/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { App } from 'components/App';
+import App from 'components/App';
 import './index.css';
 import { BrowserRouter } from 'react-router-dom';
 

src/pages/Cast.jsx

@@ -0,0 +1,5 @@
+function Cast() {
+  return <div>Cast...</div>;
+}
+
+export default Cast;

src/pages/Home.jsx

@@ -0,0 +1,5 @@
+function Home() {
+  return <div>Home...</div>;
+}
+
+export default Home;

src/pages/MovieDetails.jsx

@@ -0,0 +1,5 @@
+function MovieDetails() {
+  return <div>MovieDetails...</div>;
+}
+
+export default MovieDetails;

src/pages/Movies.jsx

@@ -0,0 +1,5 @@
+function Movies() {
+  return <div>Movies...</div>;
+}
+
+export default Movies;

src/pages/Reviews.jsx

@@ -0,0 +1,5 @@
+function Reviews() {
+  return <div>Reviews...</div>;
+}
+
+export default Reviews;