Estoy desarrollando una aplicación React usando diferentes componentes para diseñar la página. Mientras trabajo con estos componentes, generalmente voy y vengo cambiando algunos de sus accesorios en el código.
Lo que me gustaría es que cuando guarde el archivo, React vea que cambié algunos accesorios y volví a renderizar el componente con nuevos accesorios. En este momento tengo que actualizar la página cada vez y es realmente molesto.
EJEMPLO Tengo este componente de transformación
function Transform({size, children}) { return <div style={`transform: scale(${size});`}>{children}</div> }Y lo uso en la aplicación así
<Interface> <Transform size={0.25}><Grid layout={'3x4'} /></Transform> </Interface>Cuando cambio el accesorio de tamaño en el componente Transform (solo para probar si quiero que la cuadrícula sea más grande) y guardo el archivo, React debería volver a renderizar el componente ya que un accesorio ha cambiado y aparecerá de manera diferente. ¿Cómo puedo configurar mi espacio de trabajo de esta manera? Cualquier ayuda es realmente apreciada gracias! (¡incluso actualizar automáticamente toda la página sería genial!)
Simplemente verificaría el tamaño en las herramientas de desarrollo del navegador y las cambiaría allí, luego, una vez que esté satisfecho, aplíquelas a su código EN la parte inferior izquierda de la imagen, verá los styles y luego podrá escribir lo que desee. 
Editar: como OP mencionó en el comentario, solo se podrá usar si desea cambiar algunas propiedades de css.
Esto no es exactamente lo que estaba buscando, ¡pero creo que es aún mejor! https://previewjs.com/
Editar: también descubrí que esta era la solución a mi problema original: Hot Reload no funciona en mi aplicación React