first commit

README.md

@@ -79,6 +79,10 @@ After finishing your required elements, you can push your work further. These go
 Be prepared to demonstrate your understanding of this week's concepts by answering questions on the following topics. Put your answers underneath the questions:
 
 1. What is React JS and what problems does it solve? Support your answer with concepts introduced in class and from your personal research on the web.
+react uses coding to fill in javascript and create javascript code for us
 1. Describe component state.
+state is a staus, it can be changed or updated, like a button being closed or opened
 1. Describe props.
+props are a placeholder or variable
 1. What are side effects, and how do you sync effects in a React component to changes of certain state or props?
+side effects are secondary actions that happen when a function is called. for instance a change in state

package.json

@@ -6,7 +6,7 @@
     "@testing-library/jest-dom": "^5.12.0",
     "@testing-library/react": "^11.2.6",
     "@testing-library/user-event": "^13.1.8",
-    "axios": "^0.21.1",
+    "axios": "^0.21.4",
     "msw": "^0.28.2",
     "mutationobserver-shim": "^0.3.7",
     "react": "^17.0.2",
@@ -15,7 +15,7 @@
     "styled-components": "^5.3.0"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "react-scripts --openssl-legacy-provider start",
     "build": "react-scripts build",
     "test": "react-scripts test --silent --verbose",
     "eject": "react-scripts eject"

src/App.js

@@ -1,19 +1,69 @@
-import React from 'react';
+import React,{ useState, useEffect } from 'react';
 import './App.css';
+import axios from 'axios';
+import Character from './components/Character';
+// import characterData from 'https://swapi.dev/api/films/results';
+ const initialCharacters = [
+  {
+  name: "mike",
+  id:0,
+  height: 172, 
+  mass: 77, 
+  hair_color: "blond", 
+  skin_color: "fair", 
+  eye_color: "blue", 
+  birth_year: "19BBY", 
+  gender: "male", 
+},
+{
+  name: "carly",
+  id:1,
+  height: 172, 
+  mass: 77, 
+  birth_year: "19BBY", 
+  gender: "male", 
+}
+
+]
+
+
 
 const App = () => {
+  const [characters, setCharacter] = useState(initialCharacters)
+
+
+  const [currentCharacterId, setCurrentCharacterId] = useState(null)
   // Try to think through what state you'll need for this app before starting. Then build out
   // the state properties here.
 
   // Fetch characters from the API in an effect hook. Remember, anytime you have a 
   // side effect in a component, you want to think about which state and/or props it should
   // sync up with, if any.
+  useEffect(() => {
+    axios('https://swapi.dev/api/people')
+    .then((res) => {
+      setCharacter(res.data)
+    })
+    .catch((err) =>{
+      console.log('please come back soon')
+    })
+  }, []
+  )
+
+
 
-  return (
+  return ( 
     <div className="App">
-      <h1 className="Header">Characters</h1>
+      <h1 className="Header">
+
+        {characters.map((character) => {
+          return <Character key={`App-characterMap-character${character.name}`} character={character}/>; })}
+
+
+
+      </h1>
     </div>
-  );
-}
+          
+        )}
 
 export default App;

src/components/Character.js

@@ -1 +1,18 @@
+import React from "react";
+
+
+const Character = ({character}) => {
+
+    return(
+        <article > 
+        <h2>{character.name}</h2>
+        <p>{character.height}</p>
+        <p>{character.mass}</p>
+        <p>{character.birth_year}</p>  
+        <p>{character.gender}</p>  
+        </article>
+    )
+}
+
 // Write your Character component here
+export default Character