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 UI library, thought of as the View in MVC (Model View Controller). It solves the problem of having multiple files to make a webpage, e.g. html, css, js, and simply combine that into one js file where we can style and manipulate html all from the js file. Some of related concepts include the Virtual DOM, where React compares what is on the DOM vs in the code, then renders the update to the DOM, and JSX, a simple Javascript that processes HTML syntax into JS.

1. Describe component state.

Component state is JS object that describes the state of a particular component at the beginning and that can be changed and managed within the component, similar to variables that are declared within a function. We use useState hooks to set its initial value, then use setState to change/update it.

1. Describe props.

Props are JS objects that serve as properties of a component that can be passed from one to another component so that they can be accessed by other components. They can be in the form of data such as an array, and can be bind with the dot notation.

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 like side events that also take place when a particular event or activity is triggered. They can be sync by using using the useEffect hooks along with the dependency array which may be empty if we just want the event to happen once, or which may be populated with dynamic variables so that effects are only triggered for those particular variables. It is similar to stopPropagation/preventDefault. There are effects that don’t require clean up, like making a network request, and effects that do require clean up, like subscription or setting interval or using eventListeners.