react-review-challenges.txt

#1 Random user challenge

1. Create a new react app
2. Make the App component a class component that returns "hello world"
3. Fetch data from the random user api https://randomuser.me/, what lifecycle method should you fetch data from

e.g

fetch("https://randomuser.me/api/")
.then((res) => res.json())
.then((data) => console.log(data))

OR

const response = await fetch("https://randomuser.me/api/")
const user = await response.json()

4. Put the full name, email, gender and picture on the page

#2 Change events and forms

1. Create TWO new components: UserInput and UserOutput
2. UserInput should hold an input element, UserOutput two paragraphs
3. Output multiple UserOutput components in the App component (any paragraph texts of your choice)
4. Pass a username (of your choice) to UserOutput via props and display it there
5. Add state to the App component (the username) and pass the username to the UserOutput component
6. Add a method to manipulate the state (an event-handler method)
7. Pass the event-handler method reference to the UserInput component and bind it to the input-change event
8. Ensure that the new input entered by the user overwrites the old username passed to UserOutput
9. Add two-way-binding to your input (in UserInput) to also display the starting username
10. Add styling of your choice to your components/ elements in the components.
 
#3 Lord of the rings challenge

1. Create a new react app
2. Make the App component a class component that returns "hello world"
3. Fetch the movie data from the lord of the rings api https://the-one-api.herokuapp.com/documentation, what lifecycle method should you fetch data from
4. This api is a little more complex as you need to sign up and pass an authorization header, your fetch will look like this

fetch("https://the-one-api.herokuapp.com/v1/movie", {
  headers: {
    'Authorization': Bearer your-api-key-123
  }
})

ask ed or harrison for help if you need help
5. Put the movie data on the page 

#4 Rails and form challenge for albums

1. create a new rails app in api only mode with a postgresql database
2. create a new react app
3. rails app todos
- create the db
- generate an Album model with a name, year and band (strings)
- db migrate
- create 2 albums in rails c
- f an albums controller
- the albums controller should have an index and create action, the index action should get all albums and send them back in json, the create action should create an album using strong params and then send a 200 response
- setup some routes for these actions, maybe "/" and "/create"
- test out this api from postman
4. react app todos
- in the App component implement a form
- the form should have 3 text inputs => name, band and year
- implement an onSubmit event handler function for the form
- make sure you preventDefault()
- get all the values from the form inputs and store them in an object
- send a POST request "/create" to your rails app using fetch, pass the object we created in the step before to the body
- you should get a CORS error, configure CORS on rails to ensure it can receive cross origin requests
5. you will be done when the data you're sending in the request is successfully stored in the database