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 make a child component of a sibling component refresh when a button is pressed in ReactJS?

So I have searched for solutions but I cant seem to find one that fits with what I am doing. Here is the structure of my website:
https://ibb.co/Xz27rgK
So as you can see I have my "NavBar" component outside of the Router because I always want it rendered. But I have a Dark mode toggle on the navbar, and when I click it I want it to update the refresh the Chart component (It is a react-chartjs-2 chart).
I know you can use setState(); to rerender, but how tell the Chart component to do that from the NavBar when I run the onClick(); function that I have inside of it?

For one component to trigger a re-render of a sibling component, or a child of a sibling, they must trigger a re-render of some shared parent component. In this case it would make sense for all components to be children of a single root component since the theme should be consistent across the entire project, unless you have some specific use case.
Probably the easiest way to do this is to pass in a callback setTheme as well as a theme attribute from the topmost component. In the setTheme callback, you should call the setState of that topmost parent component, which will then trigger a re-rendering of every child component with the new theme.
Take a look here for a more detailed description of how to change the theme of react components.

What is the defacto way to tell a page to focus an element via anchor?

I have a routable React component that can be linked to from a few different places, some of which are React, some of which are Marionette (which we are in the process of phasing out).
Some of the links will need to automatically focus an input element in that React component, but again, I will be linking outside of React as well, so I can't pass a prop.
Is there a good way to have the link itself be what tells the React component to focus something? My intuition is to use document.location.search and have that read in the component, but I didn't know if anyone could think of a better way. I'd like to not add something to the URL if possible. Thanks!

Change child component in React via ref or prop?

Say I have a child component. Let's say I want to change its height based on information that the parent has.
If I get a reference to it. I can change it with
myChild.changeHeight(newHeight);
(see React.js - access to component methods)
or I could change it with
<Child height={newHeight}/>
Both could be changed in the render() method. But which one should I use?

React team gave few scenarios where we should be using refs.
There are a few good use cases for refs:
Managing focus, text selection, or media playback.
Triggering imperative animations.
Integrating with third-party DOM libraries.
Avoid using refs for anything that can be done declaratively.
If there is a possibility to do some functionality even without using refs, then go ahead and do it. In your case, as you said, you have a way to do it by passing a prop. It would be better if we use props itself rather than ref.

React - Ignore subnodes

Is there a way to stop react from removing/changing nodes embedded in a react component.
For example, I have a react component that acts as a container for a non-react component that manages its DOM on its own. Is there a way to mark such components for reactjs, so that it does not modify its DOM?
In my case, I want my react component to be inline-editable by CKeditor, but react always removes/destroys the editor and all the nodes it has added to the DOM, because they were not defined in the react component itself and so it thinks that those elements should not be there.
Any ideas?

If you return false from a shouldComponentUpdate method on your component, then React will step out of the way and the entire reconciliation process will be skipped for that subtree. Of course, this means that you need to manage all DOM mutations yourself in that area and can't take advantage of React.

Take a look at dangerouslySetInnerHTML on https://facebook.github.io/react/tips/dangerously-set-inner-html.html.
This is the method for adding markup that doesn't sticks to React's update methods and also unsupported tags.
This way you can still update your component, while not updating parts of it.