Exercise 2.3

src/components/Course.js

+import React from 'react';
+
+const Contents = ({ parts }) => {
+    return (
+        parts.map(part =>
+            <Part key={part.id} name={part.name} exercises={part.exercises} />
+        )
+    )
+}
+
+const Header = ({ name }) => {
+    return (
+        <h1>{name}</h1>
+    )
+}
+
+const Part = (props) => {
+    return (
+        <p>{props.name} {props.exercises}</p>
+    )
+}
+
+const Total = ({ parts }) => {
+    let totalExercises = 0
+    parts.map(part =>
+        totalExercises += part.exercises
+    )
+
+    return (
+        <p>Total {totalExercises}</p>
+    )
+}
+
+const Course = ({ course }) => {
+    return (
+        <div>
+            <Header course={course.name} />
+            <Contents parts={course.parts} />
+            <Total parts={course.parts} />
+        </div>
+    )
+}
+
+export default Course
\ No newline at end of file

src/index.js

 import React from 'react'
 import ReactDOM from 'react-dom'
-
-const Contents = ({ parts }) => {
-    return (
-        parts.map(part =>
-            <Part key={part.id} name={part.name} exercises={part.exercises} />
-        )
-    )
-}
-
-const Course = ({ course }) => {
-    return (
-        <div>
-            <Header course={course.name} />
-            <Contents parts={course.parts} />
-            <Total parts={course.parts} />
-        </div>
-    )
-}
-
-const Header = ({ name }) => {
-    return (
-        <h1>{name}</h1>
-    )
-}
-
-const Part = (props) => {
-    return (
-        <p>{props.name} {props.exercises}</p>
-    )
-}
-
-const Total = ({ parts }) => {
-    let totalExercises = 0
-    parts.map(part =>
-        totalExercises += part.exercises
-    )
-
-    return (
-        <p>Total {totalExercises}</p>
-    )
-}
+import Course from './components/Course'
 
 const App = () => {
     const course = {