I might have forgotten how react js or SPAs in general work

1

Hey, I had forcefully taken a break from development because of a few commitments and I was developing in react native so I totally lost touch of react js, now 1 month after when I revised react js and learned vue I have this question in mind which I can’t find the answer on google.

If i take a single page application, for eg fcc forum. There is a header, then a list of articles. But if I want to open the article it opens up in another component, right? And if that were an HTML page that would be linked by an <a href = ""> tag. I guess there is something called react-router to behave like an <a href = ""> tag for components on the front end. So is that how i should link components if i am building an fcc like website using react? Having the react router switch in the main App.js?

Also, what are your opinions on having Vue as a preference compared to react? I still feel that vue is younger compared to react.

2

Hello :grin:!

Yes, that should be the way to do it.

Correct! The router is the one in charge of doing the transitions between views. A single switch is required and used to load the view contents.

I find them quite similar. Even though react is defined as a library and vue a framework, they share most of the design (and the *ways of developing" apps).

One could argue that learning react has more benefits because it allows you to build mobile apps too, but using NativeScript you can develop apps using vue too, so that’s not exclusive to react now.

Hope it helps :slight_smile:!

Regards!

1 Like
3

You are rendering data. For forum (as a simplified example, assuming a REST-like API) there will be router module on the backend, which simply checks incoming HTTP requests and matches them to some function in the backend that returns data. You, as a user, hit “forum.com” then that’s going to trigger getting a list of posts on the backend, loke

[
  { "id": 1, "title": "Post 1" },
  { "id": 2, "title": "Post 2" },
  ... etc
]

Then for each of those when you click on a post, you go to “forum.com/posts/1”. And thats going to return a single post, data like:

{
  "id": 1,
  "title": "Post 1",
  "body": "Text of post 1"
}

How it’s rendered:

If it’s server-side, then it’s going to take that data on the back end and return HTML to the client. So in some backend template engine, map over the list of posts, build an HTML index page. Then each <a> on each of those posts has the individual post url as an href. Which, when clicked, will cause a new HTML page to be built for each individual post.

For a single page app, just need the data, and only a single HTML page for the entire forum. When the index page is opened, use the SPA app to map the list and render the UI for it. For clicking on a post, same thing, but prevent normal HTML behaviour (don’t open a new page), and load in the post data, and rerender UI for a single post.

To make the SPA app behave like a “normal” site (so you can use the URLs, and use back buttons and so on), that’s when a router is used – it allows you to cheat a bit by making the browser behave as if you were navigating to different URLs without reloading the (single) page.

Vue or React are both fine, React is more popular by quite a way but they both work great and have large amounts of resources available.

1 Like