Angel prats

starwars/Answers.md

@@ -0,0 +1,19 @@
+# Answers
+
+1.  What is React JS and what problems does it try and solve?
+
+React is a UI library whose main purpose is to build powerful web applications.
+React was created by the facebook team as a solution to deal with the high demand and overload of data and fat changes.
+
+1.  What does it mean to _think_ in react?
+To be able to plan and structure your apps in ways that you can properly manage state.
+
+1.  Briefly describe some of the differences between a Class/Stateful component and a Functional/Presentational component.
+
+Class statefull components manage state data, Functional components handle presentational data.
+
+1.  Describe state.
+State is the data that our components can hold on to and pass to other components.
+
+1.  Describe props.
+Props is used to pass data from parent to child componenets.

starwars/README.md

@@ -0,0 +1,126 @@
+# Sprint Challenge: React - Star Wars
+
+This challenge allows you to practice the concepts and techniques learned over the past Sprint and apply them in a concrete project. This Sprint explored ReactJS, Functional Components and Class Components. In your challenge for this Sprint, you will demonstrate proficiency by creating an application that uses ReactJS to consume live data retrieved from the World Wide Web and style that data nicely on the page.
+
+## Instructions
+
+**Read these instructions carefully. Understand exactly what is expected _before_ starting this Sprint Challenge.**
+
+This is an individual assessment. All work must be your own. Your challenge score is a measure of your ability to work independently using the material covered through this sprint. You need to demonstrate proficiency in the concepts and objectives introduced and practiced in preceding days.
+
+You are not allowed to collaborate during the Sprint Challenge. However, you are encouraged to follow the twenty-minute rule and seek support from your PM and Instructor in your cohort help channel on Slack. Your work reflects your proficiency ReactJS Fundamentals and your command of the concepts and techniques in the Function Components and Class Components.
+
+You have three hours to complete this challenge. Plan your time accordingly.
+
+## Commits
+
+Commit your code regularly and meaningfully. This helps both you (in case you ever need to return to old code for any number of reasons and your project manager.
+
+## Description
+
+In this challenge, create a web page that presents a styled list of Star Wars characters. Being able to render out data to a web page is a large part of what JavaScript developers do, this challenge assesses your ability to achieve such a task.
+
+## Self-Study/Essay Questions
+
+Demonstrate your understanding of this Sprint's concepts by answering the following free-form questions. Edit this document to include your answers after each question. Make sure to leave a blank line above and below your answer so it is clear and easy to read by your project manager.
+
+- [ ] What is React JS and what problems does it try and solve? Support your answer with concepts introduced in class and from your personal research on the web.
+
+- [ ] What does it mean to _think_ in react?
+
+- [ ] Describe state.
+
+- [ ] Describe props.
+
+## Project Set Up
+
+Follow these steps to set up and work on your project:
+
+- [ ] Create a forked copy of this project.
+- [ ] Add PM as collaborator on Github.
+- [ ] Clone your OWN version of Repo (Not Lambda's by mistake!)
+- [ ] Create a new Branch on the clone: git checkout -b `<firstName-lastName>`.
+- [ ] Change directories into `./starwars` (`cd starwars`) and run `yarn install` to retrieve all needed dependencies.
+- [ ] Once you have installed the _node_modules_, run `yarn start or` to get your server up and running.
+- [ ] With the server up and running, open Chrome and head over to `localhost:3000` and view your beautiful app. Maybe it's not _that_ pretty... _yet_, your goal is to ensure this project becomes a thing of beauty.
+Follow these steps for completing your project.
+- [ ] Implement the project on this Branch, committing changes regularly.
+- [ ] Push commits: git push origin `<firstName-lastName>`.
+
+Follow these steps for completing your project:
+
+- [ ] Submit a Pull-Request to merge <firstName-lastName> Branch into master (student's  Repo).
+- [ ] Add your Project Manager as a Reviewer on the Pull-request.
+- [ ] PM then will count the HW as done by  merging the branch back into master.
+
+Please note:
+
+- In `App.js`'s `componentDidMount()` method we call the public Star Wars API, which stores the result in the component state.
+- Here's an excerpt of that logic:
+
+```js
+componentDidMount() {
+  this.getCharacters('https://swapi.co/api/people');
+}
+
+getCharacters = URL => {
+  fetch(URL)
+    .then(res => {
+      return res.json();
+    })
+    .then(data => {
+      this.setState({ starwarsChars: data.results });
+    })
+    .catch(err => {
+      throw new Error(err);
+    });
+};
+```
+
+- At a high level, this code is a common way to automatically load data from a remote server into a component.
+- View your `App` component's `state` by opening the Chrome `React Dev Tools` to peek at the data set. At this point you will know what to do from here.
+
+Your data set will look like this:
+
+![Star Wars state data](starwars_data.png)
+
+
+## Minimum Viable Product
+
+Your finished project must include all of the following requirements:
+
+- [ ] A list of Star Wars Characters rendered to the screen.
+- [ ] You must have at least one list element for each star wars character in the data set.
+- [ ] The list elements must all be minimally styled. (Don't rely on browser default styles.)
+
+Required best practices:
+
+- [ ] Consistent naming. Examples: variables, functions, classes, and files.
+- [ ] Consistent spacing. Examples: line breaks, around arguments and before/after functions.
+- [ ] Consistent quotation usage.
+- [ ] Spell-check.
+- [ ] Schedule time to review, refine and reassess your work.
+
+
+It is better to submit a challenge that meets [MVP](https://en.wikipedia.org/wiki/Minimum_viable_product) than one that attempts too much and fails.
+
+## Stretch Problems
+
+- [ ] Build a pagination system that will allow you to load the next page of data
+
+- Take note on the data that's coming back from the server call in our `getCharacters()`.
+- console.log() the data coming back from the server.
+- Notice that there are `next` `previous` fields that give you a URL.
+- You have a function that will get chars called `getCharacters` you'll want to just call this function and supply it with the proper fields. You'll need to set this up on state to do this.
+
+```js
+ .then(data => {
+    console.log(data); <-- Log data here to find the fields you will need.
+    this.setState({ starwarsChars: data.results });
+  })
+```
+
+- [ ] Build another app from scratch that looks very similar to this one. Inside of your main `App` component fetch some data in this same fashion from this url `https://dog.ceo/dog-api/#all` you'll have to follow the documentation at that website and figure out how to change up the code you've seen here in this Star Wars app in order to properly fetch the data and store it on Component State.
+
+- Be mindful of the `fetch API` that is now built into most modern browsers [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch).
+- Your data coming back from Dogs should be formatted in JSON format.

starwars/src/App.css

@@ -4,5 +4,8 @@
 .Header {
   color: #443e3e;
   text-shadow: 1px 1px 5px #fff;
+  font-size: 5rem;
+  text-shadow: 1px 4px black;
+  /* outline-color: crimson; */
 }
 /* write your parent styles in here for your App.js */

starwars/src/App.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import StarWarsList from './components/StarWarsList';
 import './App.css';
 
 class App extends Component {
@@ -33,6 +34,7 @@ class App extends Component {
     return (
       <div className="App">
         <h1 className="Header">React Wars</h1>
+        <StarWarsList starwarsChars={this.state.starwarsChars} />
       </div>
     );
   }

starwars/src/components/Character.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import './StarWars.css';
+
+
+const Character = props => {
+  return (
+    <div className='card'>
+      <div className='name'>
+        <h1>
+          {props.charProp.name}
+        </h1>
+      </div>
+
+
+      <div className='info'>
+        <h2>BirthDate: {props.charProp.birth_year}</h2>
+        <h2>Hair Color: {props.charProp.color}</h2>
+        <h2>Height: {props.charProp.height}</h2>
+        <h2>Gender: {props.charProp.gender}</h2>
+      </div>
+
+    </div>
+  );
+}
+
+
+export default Character;

starwars/src/components/StarWars.css

@@ -0,0 +1,32 @@
+
+
+.card {
+  background: #443e3e;
+  display: flex;
+  justify-content: space-between;
+  border: 3px solid black;
+  color: rgb(254, 233, 233);
+  width: 60%;
+  padding: 10px;
+  border-radius: 50px;
+  margin-bottom: 10px;
+  margin-left: 260px;
+}
+
+.name {
+  font-family: arial;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: red;
+  font-size: 1.5rem;
+  text-shadow: 2px 5px black;
+  padding: 10px;
+}
+
+.info {
+  text-shadow: 1px 3px black;
+  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
+  color: rgb(206, 160, 249);
+
+}

starwars/src/components/StarWarsList.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Character from './Character';
+
+const StarWarsList = props => {
+  console.log(props.starwarsChars)
+  return (
+    <div>
+      {props.starwarsChars.map(charsMap => (
+        <Character key={charsMap.name}
+          charProp={charsMap} />
+      ))};
+    </div>
+  )
+}
+
+
+export default StarWarsList;