end of lesson 1

01_components_and_props/project_showcase/src/App.js

@@ -1,5 +1,15 @@
+import Header from "./components/Header";
+import ProjectForm from "./components/ProjectForm";
+import ProjectList from "./components/ProjectList";
+
 function App() {
-  return <div className="App">Project showcase</div>;
+  return (
+    <div className="App">
+      <Header />
+      <ProjectForm />
+      <ProjectList />
+    </div>
+  );
 }
 
 export default App;

01_components_and_props/project_showcase/src/components/Header.js

@@ -0,0 +1,15 @@
+const Header = () => {
+  return (
+    <header>
+      <h1>
+        <span className="logo">{"//"}</span>
+        Project Showcase
+      </h1>
+      <nav>
+        <button>Light Mode</button>
+      </nav>
+    </header>
+  )
+}
+
+export default Header;

01_components_and_props/project_showcase/src/components/ProjectForm.js

@@ -0,0 +1,9 @@
+const ProjectForm = () => {
+  return (
+    <form>
+      <h3>Add Project</h3>
+    </form>
+  )
+}
+
+export default ProjectForm;

01_components_and_props/project_showcase/src/components/ProjectList.js

@@ -0,0 +1,26 @@
+import projects from "../projects";
+import ProjectListItem from "./ProjectListItem";
+
+const ProjectList = () => {
+  console.log('projects', projects);
+
+  // mapping over an array of objects to create an array of react components
+  // is a very common pattern that you'll see across react projects
+  // there is a component to render each item in a list and it will accept
+  // one element in the array (an object) as a prop and then use it to render
+  // the contents of that object in the JSX.
+  const renderedProjects = projects.map(projectObj => {
+    return <ProjectListItem project={projectObj} />
+  })
+  return (
+    <section>
+      <h1>All Projects</h1>
+      <ul className="cards">
+
+        {renderedProjects}
+      </ul>
+    </section>
+  )
+}
+
+export default ProjectList

01_components_and_props/project_showcase/src/components/ProjectListItem.js

@@ -0,0 +1,25 @@
+const ProjectListItem = ({ project }) => {
+  console.log('project', project)
+  const { name, image, about, link, phase } = project;
+  return (
+    <li className="card">
+      <figure className="image">
+        <img src={image} alt={name} />
+        <button className="claps">👏0</button>
+      </figure>
+      <section className="details">
+        <h4>{name}</h4>
+        <p>{about}</p>
+        <p>
+          <a href={link}>Link
+          </a>
+        </p>
+      </section>
+      <footer className="extra">
+        <span className="badge blue">Phase {phase}</span>
+      </footer>
+    </li>
+  )
+}
+
+export default ProjectListItem;