- The purpose of this exercise is to get you used to being quizzed on Interview Questions commonly asked about ReactJS.
- Answers to your written questions will be recorded in Answers.md
- This is to be worked on alone but you can use outside resources. You can reference any old code you may have, and the React Documentation, however, please refrain from copying and pasting any of your answers. Try and understand the question and put your responses in your own words. Be as thorough as possible when explaining something.
- Don't fret or get anxious about this, this is a no-pressure assessment that is only going to help guide you here in the near future. This is NOT a pass/fail situation.
- What is React JS? How does it differ from other JavaScript frameworks?
- Explain briefly the React Component Lifecycle. Name three of the methods that are a part of the lifecycle and what they do.
- Briefly describe some of the differences between a
Class/Stateful component
and aFunctional/Presentational component
. - Briefly describe PropTypes and what we use them for when building react applications.
- You're going to be building an application starwars that consumes live data that we're retrieving across the world wide web!
- cd into starwars and run
npm install
to retrieve all the needed dependancies. - Once you have installed all the node_modules you should be able to run
npm start
to get your server up and running. - Once your server is up and running open Chrome and head over to
localhost:3000
to see your beautiful app. Ok, maybe it's not THAT pretty yet, but it's your goal to ensure this project becomes a thing of beauty.
If you notice inside of App.js
we're calling an open sourced API from within componentDidMount()
and saving the results of that API on state.
- You should see something like this:
- Your goal here is to build an app that displays the data provided in whatever way you see fit! Don't worry about the fields whose values are URLs. You'll figure out what to do with data like that later on in the course.
- For now, just build a react app that displays this fun Star Wars data. Build a card for each object and style it to make it nice and fancy.
- Feel free to integrate Bootstrap with whichever
Bootstrap React Component Library
you're comfortable with.
- Ensure that all data coming into your child component is validated using the
prop-types
library. - Build another app from scratch that looks very similiar to this one. Inside of your main
App
component fetch some data in this same fashion from this urlhttps://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. - Your data coming back from Dogs should be formatted in JSON format.