fjhansen / Sprint-Challenge-Advanced-React

Sprint Challenge - Advanced React (Web: Unit 3, Sprint 1)

Sprint Challenge: Advanced React - Women's World Cup

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 class components, custom hooks, and testing. In your challenge for this Sprint, you will demonstrate proficiency by creating an application that consumes data from an API using a custom hook, displays that data on the DOM, and tests your React components.

The data you will get back from the server will be the Women's World Cup players ranked by search interest from Google Trends, June-July 2019, worldwide - https://googletrends.github.io/data/.

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 with ReactJS Fundamentals and your command of the concepts and techniques in the Functional 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 Team Lead.

Self-Study/Essay Questions

Demonstrate your understanding of this Sprint's concepts by answering the following free-form questions. Edit the ANSWERS.md file 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.

• Why would you use class component over function components (removing hooks from the question)?

legacy code is everywhere! Some people also still prefer using class components as well. You may work with a team who still uses class components or who has not refractored. So they are important to know.

• Name three lifecycle methods and their purposes.

1. constructor purpose: to create a component with state for the initial render.

2. render purpose: returns DOM elements to display. called in two phases, mounting and updating phases.

3. componentDidMount purpose: fetches data. features this.setState. data fetched must be loaded after the constructor.

• What is the purpose of a custom hook?

custom hooks make it possible to reuse stateful logic throughout different projects. very convenient.

• Why is it important to test our apps?

to save development teams time in the log run through preventing easily avoidable/common bugs.

Project Set Up

Follow these steps to set up and work on your project:

• Create a forked copy of this project.
• Add TL as collaborator on Github.
• Clone your OWN version of Repo. (Not Lambda's by mistake!)
• Create a new Branch locally: git checkout -b <firstName-lastName>.
• Run npm install to download dependencies.
• Run the server using npm start or node server.js.
• In a separate terminal cd into the client folder and run npm install to download dependencies.
• Still inside the client folder run npm start to run the client application.
• Implement the project on this Branch, committing progress & changes often.
• Push commits: git push origin <firstName-lastName>.

Follow these steps for completing your project:

• Submit a Pull-Request to merge 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.

Minimum Viable Product

Your finished project must include all of the following requirements:

• Class component that fetches data from the server you now have running - the data can be fetched from http://localhost:5000/api/players
• Display the player data you receive from the API
• Build a custom hook and use it in your app - this can be a localStorage hook, a fetch hook, a dark mode hook, or any other hook you would like
• Write a "reasonable" amount of unit tests for your React components. What does "reasonable amount" mean? That is up to you to decide. Be ready to defend your choice to your TL 👍 //tough!

Stretch Problems

• Implement another custom hook
• Use a graphing library to graph the data you received from the API