I am unable to host my app in my local server as vite version 3.1.4 has vulnerabilities in server hosting. Here is a link to the issue GHSA-353f-5xf4-qw67. The link is from the vsCode terminal. Can I get some help with this?

i am currently trying to understand something which i am just not getting, so we called the pet api in our pets app,

 async function requestPets() {
    const res = await fetch(`http://pets-v2.dev-apis.com/pets?animal=${animal}&location=${location}&breed=${breed}`
   
    );
    const json = await res.json();
    setPets(json.pets);

how we are able to preload the api data using the useEffect, as during preload we are not passing the animal location and breed so how we are getting the data

There is a Parcel reference in the file:
https://github.com/btholt/complete-intro-to-react-v8/blob/main/lessons/10-tailwindcss/A-css-and-react.md

But the course uses Vite.

Requests like https://pets-v2.dev-apis.com/breeds?animal=cat are responding with 403s.

Not sure what this line should say, but may need correction

Prop types are allow you to runtime type props to a component. In general if you're interested in doing that just use TypeScript.

In the Hooks Q&A video, we run:
npm install -D [email protected].

This found a vulnerability in one of the dependencies (see below).

link:
GHSA-9c47-m6qq-7p4h

Hi,

I am watching the course replay. I think there is a missing video(s).

Day 2 - Part 5 ends abruptly while talking about pgAmin.
Day 2 - Part 6 picks up at GIN.

Missing under Query Performance:

• Explain
• Indexes
• Create an Index

https://react-v8.holt.courses/lessons/core-react-concepts/effects
In our case, we want the user to see our UI first then we want to make a request to the API so we can that initial list of pets.
should be
In our case, we want the user to see our UI first then we want to make a request to the API so we can initialize a list of pets.

https://react-v8.holt.courses/lessons/react-capabilities/react-router
Details page where you can out more about each animal.
should be
Details page where you can output more about each animal.

Let's quickly make a second page so we can switch between the two. Make file called Details.jsx.
should be
Let's quickly make a second page so we can switch between the two. Make a file called Details.jsx.

Link that is currently used: reactjs.org/docs/error-boundaries.html
Link to new React docs for Error Bounding: https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary

index.html:26 Uncaught ReferenceError: ReactDom is not defined
at index.html:26:22
(anonymous) @ index.html:26

Hello, I am in on the React Dev Tools videos of this course and I have coded up to this point and I am getting an error. The error I am getting is the "Uncaught ReferenceError: process is not defined" and google is telling me to fix it exactly how Brian is saying not to. I have not come across a way to fix this and still having issues, has anyone else had this error and how did you fix it? I do not have webpack installed or any of the ones Brian said in the video ...
Uncaught ReferenceError: process is not defined at node_modules/@babel/types/lib/definitions/core.js (core.ts:40:17) at __require (chunk-RSJERJUL.js?v=29b6a201:3:50) at node_modules/@babel/types/lib/definitions/index.js (index.ts:2:1) at __require (chunk-RSJERJUL.js?v=29b6a201:3:50) at node_modules/@babel/types/lib/validators/validate.js (validate.ts:1:1) at __require (chunk-RSJERJUL.js?v=29b6a201:3:50) at node_modules/@babel/types/lib/builders/validateNode.js (validateNode.ts:1:1) at __require (chunk-RSJERJUL.js?v=29b6a201:3:50) at node_modules/@babel/types/lib/builders/generated/index.js (index.ts:5:1) at __require (chunk-RSJERJUL.js?v=29b6a201:3:50)

https://github.com/btholt/complete-intro-to-react-v8/blob/main/lessons/11-advance-react-performance/A-code-splitting.md

On the page Hooks, the code snippets are using the "update" convention rather than the "set" convention.

It was working in the beginning, when loading from the actual file, but after finishing the setup, I get a 404 on localhost:5173. I don't really know what I am missing. My code is identical to the repo.

https://react-v8.holt.courses/lessons/advance-react-performance/server-side-rendering

In B-Hooks.md there is a paragraph:

Now navigate to [http://localhost:5173/](https://react-v8.holt.courses/lessons/core-react-concepts/hooks) and see that your have one input box that says "Seattle, WA". Try and type in it. You'll see that you can't modify it. Why? Let's think about how React works: when you type in the input, React detects that a DOM event happens. When that happens, React thinks something may have changed so it runs a re-render. Providing your render functions are fast, this is a very quick operation. It then diffs what's currently there and what its render pass came up with. It then updates the minimum amount of DOM necessary.

and

So if we type in our input and it re-renders, what gets out in the input tag? Well, its value is tied to location and nothing changed that, so it remains the same. In other words, two way data binding is not free in React. I say this is a feature because it makes you explicit on how you handle your data. Let's go make it work.

But React doesn't run a rerender when state doesn't change. In this example it simply doesn't rerender.

I've just finished the Uncontrolled Forms video and was curious why we use formData.get("animal") when creating the object for setRequestParams. I believe this is a mistake in the video, but Brian says to leave value={animal}, however I had to change this to name="animal" to get the formData.get() to work properly. Apologies if I missed where he mentioned to change to name, I watched a few times and couldn't see it in the video, but did find it in the lecture notes.

This leads me to my main question - rather than using formData for animal, would it make more sense to pass in the animal state since we are tracking it? I'm imagining the object changing to:

const obj = {
            animal: animal,
            breed: formData.get("breed") ?? "",
            location: formData.get("location") ?? "",
          }

Mostly, I am just curious what the best practice would be / pitfalls of the two different ways. To me, it seems like using the state, and leaving value={animal} would make the most sense, that way the form is correctly showing the tracked state, and the submission is correctly using the state, but would love to hear other thoughts.

https://react-v8.holt.courses/lessons/js-tools/prettier

In the last paragraph in the blue box we see
Note the the @2.7.1 portion. For the purposes of making this course not break
it should be
Note the @2.7.1 portion. For the purposes of making this course not break...

During this session 03-js-tools/B-prettier.md, someone asked, "If it's working when we run the script, but not working when we save the file, what might be a troubleshooting step?"

This was my issue as well. I searched and found this Stack Overflow post: https://stackoverflow.com/questions/52586965/why-does-prettier-not-format-code-in-vs-code

We also must set the Editor: Default Formatter setting to use Prettier, as in the following image:

Then formatting on save works properly. I probably have way too many extensions installed in my VS Code!

When I run NPM run dev in my terminal it looks correct and seems like the server is running but when I navigate to http://localhost:5173/ I can't connect.

This is during the Vite Setup video.

Calls to the Petfinder API are failing (200) and I'm seeing the following error in console:

Access to fetch at 'http://pets-v2.dev-apis.com/pets?animal=&location=&breed=' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disable

I've searched past issues and tried emptying browser cache as well as multiple browsers but I'm still seeing the same error. It was working previously and now I've just started seeing these errors today.

Hi - First off, this is a great course!

Question on the Custom Hooks section. When I try and run the code the way it is written, I get an error in the console stating:

Cannot access 'requestBreedList' before initialization

I assume this is happening because the function is being invoked within the useEffect hook before it is declared in the following lines. I was able to fix this by moving the function definition up, but am having trouble understanding why this wasn't causing an error in the live workshop.

After installing vite and running the vite server, I try to run my code, but get an error message:

Uncaught ReferenceError: React is not defined
at App.jsx:19:13

I've attached my code

adopt_me.zip

Hello! So, while taking the course on FrontEnd Masters, I realized that my webpage (while using Vite) was not refreshing when I made changes to my files. For example going from useState("Seattle, WA") to useState(""). On searching around a little, I noticed that with wsl (as we are using npm, which runs with wsl), changing the config file to this allows for page refresh:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  root: "src",
  server: {
    watch: {
        usePolling: true
    }
  }
});

I am not sure if this is the case with other PCs, but I found this useful.
Happy learning!

Hello,

I am continuting to get this error message from my fetchSearch and fetchBreedList files: Error: pet search not okay , ,
at Object.fetchSearch [as queryFn] (fetchSearch.jsx:13:15)

I've tried changing the 'http' in the urls to 'https' and that did not work. I also just made all my files .jsx and that didn't work either. I've been on this error for over a month now and haven't found any answers. I finished the entire lesson and got the entire code written but cannot render my pet searches. Any suggestions?

https://github.com/btholt/complete-intro-to-react-v8/blob/main/lessons/12-low-priority-rerendering/A-deferred-values.md

Line 20 'We're going to write for this and it's going to feel like it does nothing.'

Hi Brain! I love the React course! :)

One question in part Error Boundaries. When I try the ErrorBoundary as you suggested like this:

root.render(
  <ErrorBoundary>
    <App />
  </ErrorBoundary>
);

then it does not work. It doesn't catch any errors.

In DEV tools, there is only an uncaught Error:

The following API url is giving me a CORS error when I try to make a call from the SearchParams component

http://pets-v2.dev-apis.com/pets?animal=${animal}&location=${location}&breed=${breed}

The link here is throwing an error.

https://github.com/btholt/complete-intro-to-react-v8/blob/main/lessons/05-react-capabilities/A-react-router.md#:~:text=If%20you%27re%20upset%20about%20the%20element%20prop%20vs%20children%2C%20read%20their%20rationale%20here