Develop Reference

Is there a way in React to update components on props change? (while developing at least)

I'm developing a React App using different components to layout the page.
While i Work with these components I usually go back and forth changing some of their props in the code.
What I would like is that when I save the file React sees that I changed some props and rerender the component with new props.
Right now I have to update the page every time and it's really annoying.
EXAMPLE
I have this transform component
function Transform({size, children}) {
return <div style={`transform: scale(${size});`}>{children}</div>
}
And I use it in the app like this
<Interface>
<Transform size={0.25}><Grid layout={'3x4'} /></Transform>
</Interface>
When I change the size prop on the Transform component (just to test if I want the grid bigger) and save the file, React should reRender the component since one prop has changed and so it will appear differently.
How can I set my workspace like this? Any help is really appreciated thanks!
(even automatically updating the whole page would be great!)

I would just check the size in browser dev tools and change them there then once you are happy apply those to your code
IN the bottom left of the picture you see styles and then you can just type what you want.
Edit: As OP mentioned in the comment it will only be usable if you want to change some css properties.

This not exactly what I was looking for but I think it's even better!
https://previewjs.com/
Edit: I also found that this was the solution to my original problem: Hot Reload is not working in my React App

How to go to another page with animations when scroll the window?

I'm creating a portfolio website for a filmmaker.
I would like to know how to go to another page and change the URL when just scroll the window like these websites(http://taotajima.jp/, http://maxxhat.com/). Are these pages in one html document or multiple documents?
I searched and tried to solve it by myself but couldn't find the answer since I'm a junior developer. I would like to know at least what I need to learn to actually do it.
Thank you in advance.

A new feature offers you a way to change the URL displayed in the browser* through javascript without reloading the page. It will also create a back-button event and you even have a state object you can interact with.
You can programmatically invoke the back-function by running:
window.history.back();
If you need to manipulate a state (instead of creating a new one) you can use:
window.history.replaceState(“object or string”, “Title”, “/another-new-url”);
Check the example here LINK
Full Example is Found Here

Blocking navigation in React App

I am having an issue with navigation blocking in React.
I use React + Redux with React Router. I have been using the component in order to prevent navigation from incomplete forms within React. This works fine as long as the navigation is actually within React. What it doesn't block, however, is navigation via URL entry, or clicking on an external hyperlink.
Is there an accepted method in React for handling external hyperlinks and blocking navigation outside of React?

You didn't provide any code here, so I'm trying to guess. If I understand you correctly, you are able to manage you internal redirects thought the React app via react-router without any issues.
As per your statement:
What it doesn't block, however, is navigation via URL entry, or clicking on an external hyperlink.
Let's tackle both questions. First can't prevent a user from going to the navigation bar and enter a new URL, that done by design on the browsers side, it would be bad for the user, and of course invasive!
But regarding your second question about clicking on a link that will send you outside your domain or application, you can do something about it.
You have multiple options here, I will give you three:
First: Use history.block
You can block or better said, ask the user to acknowledge the transition to another page by using history.block
As an example from the history docs:
const unblock = history.block('Are you sure you want to leave this page?')
Second: Use history.push instead of href
Just don't use anchor elements href, but rely on the history of react-router.
You can read more about it here: react-router/history
But basically you can wire your redirection using the push method from history, which will look something like:
onClick() {
//code to control if you want to redirect or not
history.push('http://yoururl.com');
}
Third: Use Redirect component with conditional rendering
Then you have other options like for example using conditional rendering combined with Redirect components, but the other approach would be enough to solve your problem.

I think you are looking for Blocking Transitions under the history api for React Router.
As per the example on react router history github page:
You can register a simple prompt message that will be shown to the user before they navigate away from the current page.
const unblock = history.block('Are you sure you want to leave this page?')
Detailed info at https://github.com/ReactTraining/history#properties

How Angular JS UI-Router changes url in navigation bar without reloading page

I am learning Angular JS ui-router and I was wondering How ui-router manages to change url in navigation bar without reloading entire page?.
I have tried reading this blog and some stackoverflow questions, but couldn't find any proper explaination. Can some one explain properly?
Thanks in advance !

It's based on a simple fact that we can use hyperlinks(<a> tags) to jump to certain sections in a document and bring focus to that section. But if your href attribute points to IDs that do not exist in your page, then the browser will not do anything but change the hash part in the URL.
In modern browsers, everytime, the hash part changes in the URL, a hashchange event will be fired. ui-router or any router can actually listen for this event, get the hash part and use the config to update the view section accordingly.
This works well as long as you trigger a state change by clicking on some link but there are cases where you change the state using methods like $state.go() or $location.path(). In this case, we need to resort to HTML5's History API. There's a pushState method that allows us to change the URL in the address bar without causing the browser to load that resource.

ViewDidAppear-Like Method For JS/React?

Say, there are two tabs with the same webpage open. On one tab, I make some change in localStorage, then, when I go to the other tab, I'd like to see that change without having to reload the page.
One way that I have thought to do this is by using a setInterval method, but for my application I don't really need to check for updates every 3-5 seconds so I don't feel this approach is ideal.
I am using React. TLDR: Is there a good way to update data as soon as I open the tab of a previously-loaded webpage?
Side Note For iOS Folks: On iOS, there is a viewDidLoad method (which from my understanding is similar to componentDidMount), and there is a viewDidAppear method (so I am basically, asking for the React/JS version of viewDidAppear?)
In regards to the possible duplicate question: To me, it seems fairly different, and this question is more React.js focused.

Use the page visibility api or just window's focus event. I recommend having a backup timer set to a minute or so... these events can be finicky.
There's nothing react specific about it other than binding to global events.

You can use jQuery and listen to localStorage on-change events:
$(window).bind('storage', function (e) {
console.log(e.originalEvent.key, e.originalEvent.newValue);
});
This way, once a key in the local storage changes, you can reflect it in the 2nd tab.
If you're using react, then make sure you're rendering a component in your main component's render() function that makes use of you main component's state object. Once local storage has changed, update the state accordingly and react will take care of the rest.

I added the following lines of code to my main component.
In componentDidMount:
document.addEventListener("visibilitychange", this._callbackFunc, false);
In componentWillUnmount:
document.removeEventListener("visibilitychange", this._callbackFunc, false);