Develop Reference

React Js: After update touches are not working

Whenever I update the code in react js the updates are reflected on the browser but the clicks are not working. When I look into the browser element it is not creating the updated HTML code, instead I am seeing the js bundle in the script. Is this a normal thing in React js? Or is it a bug and how to solve it?

Force re-render the react component in the jquery single page application or in static html site?

I have created one spa using JQuery. SPA is done via writing a custom router where we add visible classname to a page div to make that page visible and we remove the same classname from all the other pages using jquery like this,
$(".main-content .page").removeClass("visible");
const page = $(`#${pageId}`);
page.addClass("visible");
Now I am migrating this site to use react components here and there through out the website. I have one component on one of the page that shows product data based on the id in the URL but the problem is that it doesn't rerender even if I change the URL. It is not able to detect the change as state or props are not changing.
is there a way to force rerender this component from my other JS code?

The solution was pretty straight forward but it is not mentioned anywhere.
The official guide says to use this below code at the end of the file so that when our js file will be loaded by the browser and run then it will render our react code but the thing is we can call this method from anywhere to force rerender our component/ replace our component with the new instance.
To force rerender it, calling below method that adds the react code to the div worked.
ReactDOM.render(<ProductDetails />, document.getElementById("product-details"));
Using this we can even pass the new props also if we want to.

How does Vue.js render page happens?

It really scares me that I might want to know this thing so much. That's the whole essence of SPA (Single-Page Application). I am curious about Vue.js rendering pages. I will list some of my knowledge and If I'm wrong, please correct me. Things I think I know:
There's a which might be a tree-structure parsed from html.
Then, DOM RENDER TREE IS constructoted from css and that DOM-TREE
After that, rendering page means data is shown on the screen.
What about Vue.js? I know it has virtual DOM. If I change something with Javascript in Vue.js, the real change happens in virtual DOM because it's faster and then syncing with the real template happens. If all that is right(if wrong, please tell me) then my question is the following:
When I use Vue Router and click some link to change the page, When new page gets shown, beforeMount() is called, then if i click back button to go the previous page, beforeMount() is called also. When using Vue Router and back button, does page rendering happens again or it's saved somewhere and to make it faster, it gets all the html from cache? So If I go to some page, then click back or Vue Router link, and page rendering starts from scratch, why would it be fast?
In my opinion, page rendering happens when there's some data changed or it's the first time I am accessing that specific URL. For the second time accessing, if data has not changed, it doesn't render the page from scratch. What do you think ? Thank you.

Refresh Page upon React Component Update

I have few React Components in my app which sends ajax calls. All works fine except one thing. I want to refresh the page when a particular component gets updated. So I used location.reload() in componentWillReceiveProps method. Though it works, unfortunately the whole page reloads whenever a component gets an update instead of just the component that has location.reload() code.
Why this is happening and how can I prevent / solve this?
Update and clarification: Thanks for the answers. I'm very much aware that state change re-renders the component. This is not a standalone React app and refreshing page is a requirement.
This react app is part of WP settings page which is tabbed one. One tab of settings is a react app. Upon enabling a button, corresponding tab should be visible and that needs page refresh (as it is not react, but WP backend code).
My question is If I add location.reload() in componentWillReceiveProps method of a single component, then why other components also refreshes page even though they don't have such code. Is componentWillReceiveProps a static method that is shared between all components? Why does other component state changes picks up location.reload() and refresh pages?

use a state variable and whenever you get any changes then setState which will only update your component instead of updating the whole page.
for more reference see this:https://reactjs.org/docs/react-component.html

wrap location.reload() with some condition (eg. if block) and choose that condition according to your component state change, don't write location.reload() directly because it will run for any state change that passed to that component.

React Components not working

I have a page created using React. Up until now everything was working great. But now the page loads and as soon as the page is loaded all components freeze and I cannot interact with them. It is important to note that the browser is working fine and it is not the browser that freezes.
If it helps, I am using webpack to host the page.
Here is a sample.
Basically I have a component that is like a parent to all other components. The parent component gets data from a server and passes along to other components.
The parent also passes along methods that I can use to call from children component and interact with server again and this is basically the pattern through all the project. I have sadly no idea why it started freezing even though everything including styles loads perfectly. I just cannot interact with it and press buttons and such

One thing that can freeze things is if in the onClicks you do:
<button onClick={this.setSector('legal')}>
rather than:
<button onClick={() => this.setSector('legal')}>