/web-sprint-challenge-intro-to-react

Primary LanguageJavaScript

Intro to React Sprint Challenge

Read these instructions carefully. Understand exactly what is expected before starting this Sprint Challenge.

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 introductory React. During this sprint, you studied React components and advanced styling.

In your challenge this week, you will demonstrate your mastery of these skills by creating a Star Wars page using data from an API.

This is an individual assessment. All work must be your own. All projects will be submitted to Codegrade for automated review. You will also be given feedback by code reviewers. For more information on the review process click here.

You are not allowed to collaborate during the sprint challenge.

Project Set Up

  • Fork and clone the repo. Delete your old fork from Github first if you are repeating this Unit.
  • Open the assignment in Canvas and click on the "Set up git" option (Or, depending, if you see something along the lines of 'Load Sprint Challenge Submission in a new window' click that).
  • Wire your fork to Codegrade using the "Click here for instructions on setting up Git submissions" link, select Github, authorize Github.
  • Push your first commit: git commit --allow-empty -m "first commit" && git push. MAKE SURE TO PUSH TO MAIN, YOU NO LONGER NEED TO CREATE A NEW BRANCH!!
  • Make commits often! PUSH TO MAIN!!!
  • You can run tests locally by running npm run test.
  • Check to see that Codegrade has accepted your git submission.

Project Instructions

Introduction

In this challenge you will create a web page that presents a styled list of characters obtained from an API. 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.

In meeting the minimum viable product (MVP) specifications listed below, your project might look somewhat similar to the solution examples below:

Example

Another example

Instructions

Your finished project must include all of the following requirements:

  • Use the endpoint [GET] https://swapi.dev/api/people (mocked in msw) to obtain characters.

  • Set the list of characters into state.

  • Render your characters to the DOM:

    1. Build a React component named 'Character' to render an individual character.
    2. Map over the list in state, and for each character render a Character to the page.
    3. Each rendered character must display its name in the DOM (e.g. "Luke Skywalker").
    4. The character's name can't be hard-coded into the HTML. This data must be obtained from the API.
    5. The components must be styled with styled-components.

    Notes:

  • Data obtained from the endpoint using browser-run JavaScript is mocked with msw.

  • If you test the endpoint using HTTPie or Postman you will obtain different results, as msw won't intercept the request.

  • You are welcome to create additional files but do not move or rename existing files or folders.

  • Do not alter your package.json file except to install extra libraries.

  • The start process can sometimes choke after adding new dependencies and may need to be restarted.

  • In your solution, it is essential that you follow best practices and produce clean and professional results.

  • Schedule time to review and polish your work, including spell-checking and grammar-checking.

  • It is better to submit a challenge that meets MVP than one that attempts too much and does not.

Stretch Goals

After finishing your required elements, you can push your work further. These goals may or may not be things you have learned in this module but they build on the material you just studied. Time allowing, stretch your limits and see if you can deliver on any the following optional goals:

  • Make the Character component more complex and break it into several subcomponents.
  • Use the endpoint [GET] https://swapi.dev/api/films (mocked in msw) to obtain movie information to render with the characters.
  • Create a helper function in separate module to remove unneeded information from the API data, before putting it in state.
  • Create transitions or animations with styled-components.
  • Use Promise.all to resolve an array of promises.

Submission format

  • Submit via Codegrade by committing and pushing any new changes to the main branch.
  • Check Codegrade for automated feedback.
  • Check Codegrade in the days following the Sprint Challenge for reviewer feedback.
  • Any changes pushed after the deadline will not receive any feedback.

Interview Questions

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 JS is a Javascript library that solves many problems with writing dynamic web applications. Concepts like virtual DOM, state management and features like useEffect help greatly in solving these problems.

  2. Describe component state. Component state is data/object that is used by Component to represent information about its current state.

  3. Describe props. Props is a mechanism/arguments in React that are used pass Data around from one Component to another.

  4. What are side effects, and how do you sync effects in a React component to changes of certain state or props? Side effects are actions that happen as a result of some activity outside of the scope of current running code/function. For example an API call etc. We sync effects by wrapping the effect in a React useEffect hook.