Upload 1.1+1.2

part1/courseinfo/src/App.js

@@ -0,0 +1,49 @@
+const Header = (props) => {
+  return <h1>{props.course}</h1>;
+};
+
+const Part = (props) => {
+  return (
+    <p>
+      {props.part} {props.exercises}
+    </p>
+  );
+};
+
+const Content = (props) => {
+  return (
+    <div>
+      <Part part={props.part1} />
+      <Part part={props.part2} />
+      <Part part={props.part3} />
+    </div>
+  );
+};
+
+const Total = (props) => {
+  return <p>Number of exercises {props.part}</p>;
+};
+
+const App = () => {
+  const course = "Half Stack application development";
+  const part1 = "Fundamentals of React";
+  const exercises1 = 10;
+  const part2 = "Using props to pass data";
+  const exercises2 = 7;
+  const part3 = "State of a component";
+  const exercises3 = 14;
+
+  return (
+    <div>
+      <Header course={course} />
+      <Content
+        part1={part1 + " " + exercises1}
+        part2={part2 + " " + exercises2}
+        part3={part3 + " " + exercises3}
+      />
+      <Total part={exercises1 + exercises2 + exercises3} />
+    </div>
+  );
+};
+
+export default App;

part1/courseinfo/src/index.js

@@ -0,0 +1,6 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+import App from "./App";
+
+ReactDOM.createRoot(document.getElementById("root")).render(<App />);

part1/courseinfo/src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';