React.js

this - description

class Dog {
  showingThis() {
    console.log(this);
  }
}

const fido = new Dog();
fido.showingThis();
// => Dog {}

scope
fetch
-response (r)
--.ok
--.json()

[if res not ok] - setErrors(Object.entries(e.error).flat()

Events and Event Listeners
Looping
JSX

useEffect - triggers code to be run once component mounts
useState
useNavigate
useParams

We can simplify this process of making requests to the correct port by using create-react-app in development to proxy the requests to our APILinks to an external site.. This will let us write our network requests like this:

fetch("/movies");
// instead of fetch("http://localhost:3000/movies")
To set up this proxy feature, open the package.json file in the client directory and add this line at the top level of the JSON object:

"proxy": "http://localhost:3000"
Let's also update the "start" script in the the package.json file to specify a different port to run our React app in development:

"scripts": {
"start": "PORT=4000 react-scripts start"
}

async function handleSubmit(e) {
e.preventDefault();
// fetch returns a Promise, we must await it
const response = await fetch("/movies", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(formData),
});
// response.json() returns a Promise, we must await it
const data = await response.json();
if (response.ok) {
console.log("Movie created:", data);
} else {
setErrors(data.errors);
}
}