MERN Stack Tutorial #9 - Fetching Data

In this MERN stack tutorial we'll make a request to the backend api to fetch workouts data and output it in the React template.

⭐⭐ Get the full course now (without ads) on the Net Ninja Pro site:

⭐⭐ Get access to all free & PREMIUM courses on Net Ninja Pro:

🥷 Course Files (GitHub):

💻 MongoDB Crash Course:

💻 React Full Courses:

🔥🔥🔥 Other resources:

[kerstenbr]

If his way of fixing the cors policy didn't work for you, just install the cors package in your backend folder with: "npm install cors", then, in the server.js file, import the cors package with "const cors = require("cors"), and then use it app.use(cors())

[yureshmajhi]

I wasted three days on this part not getting my workouts title to show up. finally installed cors and everything was fine. If anybody is not able to fetch the data from the backend use proxy then try using cors. It helped for me hope it helps you too.

[snehel]

Awesome series Shaun. I've almost covered everything related to MERN from your channel, only the JWT authentication is left. Now I badly want a series similar to this one on < (React + Redux or Next) + typescript + Firebase + tailwind > to upskill my frontend skill. I know you have separate courses on each of them, but a mix-up would make us help become production-level developers real soon!

[SteeleMan]

I’m doing a full stack react native app rn and this video is just what I needed! Thanks again!

[lekandar]

Finally, been waiting all day for this😍😍.

I used Axios instead of the fetch api though

[MrBrady]

I used vite instead of creaate-react-app for the front end. For whatever reason, the method shown in the video didn't work. I got it to work when I installed the cors package, then in server.js, I added at the top:

var cors = require("cors");

then, right after the express middleware, app.use(...), I added:

app.use(cors());

That worked for me anyway, hope it helps if you're running into any issues. 🤓

[kimse]

1st time I understand what does proxy field inside package dot json file !!! awesome work

[arielp]

Can someine help me? I did everything in the video right but the workouts won't show up on my web page. I keep getting this error Unexpected token '<', <!doctype "... is not valid JSON. What does this mean and how do I fix it?

[andromilk]

Should we not have used a try/catch in the useEffect in case we were not able to parse the json? Is there not a risk of crash if something went wrong?

[joereeve]

Just following this now. I was also unable to get the json to parse. What worked was installing cors, importing it in the server file, using it as middleware, getting rid of the proxy, then putting the full api path back into the home file

[alonsofrias]

Already waiting for the next series! 😁😁

[LanceSummer]

I'm getting this error "DeprecationWarning: The `util._extend` API is deprecated. Please use Object.assign() instead." but cant find the extend function used anywhere. Any ideas?

[ModsRuleOk]

Just bought the course. A steal at Support your local Dojo ✊

[bhargavkumar]

I am getting this error. Please help - JSON.parse: unexpected character at line 1 column 1 of the JSON data

[ChandanKumar-ofje]

Awesome tut series <3. Hope You create a react-with-typescript in upcoming/future series..

[Omar-zepp]

If you are still getting a proxy error make sure when you run "npm start" from your frontend folder, that the backend is running (npm run dev) at the same time. i.e. you should have two terminals running

[RR-rwbc]

It's a good challenge trying to understand the last lessons using Course Files :-)
If you have seen your video - you understand topics entirely, but if you just read code without a video you start to develop some new skills)

[njw_cs]

" Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 "

I got this error, can you please help me?

[akmedrufa]

hey guys I need your help I keep getting this error
Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
- options.allowedHosts[0] should be a non-empty string

but when I remove the proxy from the package.json in the react it works just fine

[박건태-nk]

finally i got this... thx god and thx net NINJA!!!! /// i really want fullstack developer and make fullstack project.. then you really big help for me . thank you very * 1000 much ♥