From b99478746cc005c7f136217afd878ea46c7756dc Mon Sep 17 00:00:00 2001 From: Mike Lovell Date: Thu, 17 Feb 2022 17:16:48 -0800 Subject: [PATCH 1/8] first commit --- package-lock.json | 1 + package.json | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 79208da2a..1ca867df7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "web-sprint-challenge-intro-to-react", "version": "0.1.1", "dependencies": { "@testing-library/jest-dom": "^5.12.0", diff --git a/package.json b/package.json index 7dbb6e8bd..e59f7ac29 100644 --- a/package.json +++ b/package.json @@ -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" From 1f0cf06728c82bb01a4f497adeb77407146c32fc Mon Sep 17 00:00:00 2001 From: Mike Lovell Date: Fri, 18 Feb 2022 09:56:19 -0800 Subject: [PATCH 2/8] added axios, usestate --- src/App.js | 7 ++++++- src/components/Character.js | 5 +++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 5e69e9fdd..eff5f190c 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,12 @@ -import React from 'react'; +import React,{ useState} from 'react'; import './App.css'; +import axios from 'axios'; +import Character from './components/Character'; + const App = () => { + const [characters, setCharacter] = useState([]) + 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. diff --git a/src/components/Character.js b/src/components/Character.js index 4083249c0..f58840dd2 100644 --- a/src/components/Character.js +++ b/src/components/Character.js @@ -1 +1,6 @@ +import React from "react"; + + + + // Write your Character component here From c9317ccd2cb44621fddf2be8e3a127c43d84fd5d Mon Sep 17 00:00:00 2001 From: Mike Lovell Date: Fri, 18 Feb 2022 11:34:23 -0800 Subject: [PATCH 3/8] added map function --- src/App.js | 45 ++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 40 insertions(+), 5 deletions(-) diff --git a/src/App.js b/src/App.js index eff5f190c..e77496c2c 100644 --- a/src/App.js +++ b/src/App.js @@ -1,11 +1,34 @@ -import React,{ useState} 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'; const App = () => { - const [characters, setCharacter] = useState([]) + const [characters, setCharacter] = useState([ + { + name: "Luke Skywalker", + id:0, + height: 172, + mass: 77, + hair_color: "blond", + skin_color: "fair", + eye_color: "blue", + birth_year: "19BBY", + gender: "male", +}, +{ + name: "Luke Skywalkerrr", + id:1, + height: 172, + mass: 77, + birth_year: "19BBY", + gender: "male", +} + +]) + +console.log(characters) 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. @@ -16,9 +39,21 @@ const App = () => { return (
-

Characters

+

+ { + characters.map(character =>
+

{character.name}

+

{character.id}

+

{character.height}

+

{character.mass}

+

{character.birth_year}

+

{character.gender}

+
+ ) + } +

- ); + ); } export default App; From 3e4cea25ff261a1a2c9a84176cced2889331280d Mon Sep 17 00:00:00 2001 From: Mike Lovell Date: Fri, 18 Feb 2022 12:31:19 -0800 Subject: [PATCH 4/8] created axios call --- package-lock.json | 18 +++++++++--------- package.json | 2 +- src/App.js | 21 +++++++++++++++------ 3 files changed, 25 insertions(+), 16 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1ca867df7..1f9f69df0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,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", @@ -3532,11 +3532,11 @@ } }, "node_modules/axios": { - "version": "0.21.1", - "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz", - "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==", + "version": "0.21.4", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz", + "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==", "dependencies": { - "follow-redirects": "^1.10.0" + "follow-redirects": "^1.14.0" } }, "node_modules/axobject-query": { @@ -23349,11 +23349,11 @@ "integrity": "sha512-1uIESzroqpaTzt9uX48HO+6gfnKu3RwvWdCcWSrX4csMInJfCo1yvKPNXCwXFRpJqRW25tiASb6No0YH57PXqg==" }, "axios": { - "version": "0.21.1", - "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz", - "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==", + "version": "0.21.4", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz", + "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==", "requires": { - "follow-redirects": "^1.10.0" + "follow-redirects": "^1.14.0" } }, "axobject-query": { diff --git a/package.json b/package.json index e59f7ac29..c2f672945 100644 --- a/package.json +++ b/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", diff --git a/src/App.js b/src/App.js index e77496c2c..eca44506f 100644 --- a/src/App.js +++ b/src/App.js @@ -2,10 +2,8 @@ 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'; - -const App = () => { - const [characters, setCharacter] = useState([ +// import characterData from 'https://swapi.dev/api/films/results'; + const initialCharacters = [ { name: "Luke Skywalker", id:0, @@ -26,9 +24,11 @@ const App = () => { gender: "male", } -]) +] +const App = () => { + const [characters, setCharacter] = useState(initialCharacters) + -console.log(characters) 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. @@ -36,6 +36,15 @@ console.log(characters) // 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) => { + console.log(res.data) + }) + }, [] + ) + + return (
From 92087d32c7dc4816e678ef7248e4ee413510833e Mon Sep 17 00:00:00 2001 From: Mike Lovell Date: Fri, 18 Feb 2022 12:37:08 -0800 Subject: [PATCH 5/8] imported character data to dom --- src/App.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index eca44506f..73e3b253c 100644 --- a/src/App.js +++ b/src/App.js @@ -39,14 +39,14 @@ const App = () => { useEffect(() => { axios('https://swapi.dev/api/people') .then((res) => { - console.log(res.data) + setCharacter(res.data) }) }, [] ) - return ( + return (

{ From 085674b089b26423855a674232ee57e99223dd28 Mon Sep 17 00:00:00 2001 From: Mike Lovell Date: Fri, 18 Feb 2022 12:49:21 -0800 Subject: [PATCH 6/8] all tests passing --- src/App.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index 73e3b253c..90d6ec1ab 100644 --- a/src/App.js +++ b/src/App.js @@ -5,7 +5,7 @@ import Character from './components/Character'; // import characterData from 'https://swapi.dev/api/films/results'; const initialCharacters = [ { - name: "Luke Skywalker", + name: "mike", id:0, height: 172, mass: 77, @@ -16,7 +16,7 @@ import Character from './components/Character'; gender: "male", }, { - name: "Luke Skywalkerrr", + name: "carly", id:1, height: 172, mass: 77, From 2b4f09079fc8a75b8d846ef5323914d5d8897e8d Mon Sep 17 00:00:00 2001 From: Mike Lovell Date: Fri, 18 Feb 2022 15:51:10 -0800 Subject: [PATCH 7/8] answered readme, alltests passing working on styled componenets --- README.md | 4 ++++ src/App.js | 24 +++++++++++------------- src/components/Character.js | 12 ++++++++++++ 3 files changed, 27 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index feab27c3a..4b979d3b4 100644 --- a/README.md +++ b/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 diff --git a/src/App.js b/src/App.js index 90d6ec1ab..d8e126e38 100644 --- a/src/App.js +++ b/src/App.js @@ -41,6 +41,9 @@ const App = () => { .then((res) => { setCharacter(res.data) }) + .catch((err) =>{ + console.log('please come back soon') + }) }, [] ) @@ -49,20 +52,15 @@ const App = () => { return (

- { - characters.map(character =>
-

{character.name}

-

{character.id}

-

{character.height}

-

{character.mass}

-

{character.birth_year}

-

{character.gender}

-
- ) - } + + {characters.map((character) => { + return ; })} + + +

- ); -} + + )} export default App; diff --git a/src/components/Character.js b/src/components/Character.js index f58840dd2..eb55908e3 100644 --- a/src/components/Character.js +++ b/src/components/Character.js @@ -1,6 +1,18 @@ import React from "react"; +const Character = ({character}) => { + return( +
+

{character.name}

+

{character.height}

+

{character.mass}

+

{character.birth_year}

+

{character.gender}

+
+ ) +} // Write your Character component here +export default Character \ No newline at end of file From bf28eaa9455c420daab3a2119c391f5241cc2abb Mon Sep 17 00:00:00 2001 From: Mike Lovell Date: Fri, 18 Feb 2022 16:12:03 -0800 Subject: [PATCH 8/8] finshed --- src/App.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/App.js b/src/App.js index d8e126e38..6104a7c20 100644 --- a/src/App.js +++ b/src/App.js @@ -25,6 +25,9 @@ import Character from './components/Character'; } ] + + + const App = () => { const [characters, setCharacter] = useState(initialCharacters)