listitem, list,header,assets

1-basics/package.json

@@ -2,6 +2,7 @@
   "name": "my-app",
   "version": "0.1.0",
   "dependencies": {
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

1-basics/src/components/App.css

@@ -1,4 +1,16 @@
 main {
   flex: 1;
   display: flex;
+  background-color: brown;
 }
+h1 {
+text-align: center;
+}
+.btn{
+  size-adjust: 
+}
+
+body {
+  text-align: center;
+}
+

1-basics/src/components/App.jsx

@@ -1,14 +1,14 @@
 import { List } from './List';
-import { Button } from './Button';
+import { Header } from './header';
 
 import './App.css';
 
 export const App = () => (
   <>
-    <header>
-      <h1>Pokemon app</h1>
-      <Button>Click me</Button>
-    </header>
+
+     <Header/>
+
+
     <main>
       <List />
     </main>

1-basics/src/components/Button.css

@@ -5,3 +5,4 @@
   border-radius: 5px;
   padding: 5px 15px;
 }
+

1-basics/src/components/Button.jsx

@@ -1,7 +1,11 @@
+import PropTypes from 'prop-types';
 import './Button.css';
 
-export const Button = (props) => {
-  console.log('props', props);
+export const Button = ({text}) => {
+  //console.log('props', props);
 
-  return <button className='btn'>{props.children}</button>;
+  return <button className='btn'>{text}</button>;
+};
+Button.prototype={
+  text: PropTypes.string.isRequired
 };

1-basics/src/components/List.jsx

@@ -1,19 +1,17 @@
 import { Button } from './Button';
+import {Listitem} from './Listitem';
 
 const list = ['Pikachu', 'Bulbazaur', 'Charmander', 'Squirtle']
 
 export const List = () => (
   <div>
     <ul>
       {list.map((listItem) => (
-        <li key={listItem}>{listItem}</li>
+        <Listitem ListItem={listItem}key={listItem}/>
       ))}
     </ul>
-    <ul>
-      <li>{list[0]}</li>
-      <li>{list[1]}</li>
-      <li>{list[2]}</li>
-    </ul>
-    <Button>Do it!</Button>
+
+    <Button text = 'Do it!'/>
+
   </div>
 );

1-basics/src/components/Listitem.jsx

@@ -0,0 +1,12 @@
+//import Pikachu from '../assets/Pikachu.jpg';
+
+export const Listitem= ({ListItem, fileSrc, id})=>{
+    return(
+     <>
+     <h1 className="item">{ListItem}</h1>
+     <img src={`../assets/${ListItem}.jpg`}/>
+
+
+     </> 
+    )
+}

1-basics/src/components/header.jsx

@@ -0,0 +1,12 @@
+import { Button } from './Button';
+import './header.css';
+
+export const Header = () => {
+
+
+    return ( <header> <h1>Pokemon App</h1> 
+      <Button text="Click Me"/>
+      </header>)
+
+  };
+