Advanced Node and Express, but with React

I finished the course and I’m right now trying to build a React app with login/authorisation. So, I went back to this challenge because I liked its implementation, till I realised it used pug and I can’t quite figure out how to do the same for a React app.

I’ve searched online and here, all I’ve come across is neither here or there. Haven’t found anything extensive such as this challenge but for React, they usually use cookies or localStorage etc.

Can someone with more wisdom, share a resource that explains authorisation for React implemented like this challenge? Or if there’s a better way that suits React, then point me in the right direction to learn that please?

TL;DR - How do I implement React in place of Pug from the advanced node and express challenge?

1 Like

You don’t, it’s not that simple. React isn’t like Pug, what you are doing with a React (or any other SPA library/framework) app is moving logic from the server side to the client side. Pug is literally just a way to define the HTML your app returns when a user hits a route in your app. React is going is going to be a seperate application. So for example, you have a server and a client folder in your project. The server is your Express app, and instead of HTML, you render JSON. If a user goes to http://example.com/products/product1 for example, they don’t get an HTML page with the product, they get something like { "id": 1, "name": "Some Product", "description": "this is an example" }.

Then in the client folder, you have a React app. When that runs, it makes requests to your Express-driven API.

1 Like

Hello there,

Here are some popular resources commonly used:

Otherwise, ditto to what Dan said.

1 Like