¿Cómo acercar y alejar la imagen usando ReactJS?

React es una biblioteca de JavaScript para crear interfaces de usuario. React hace que sea sencillo crear interfaces de usuario interactivas. Diseñe vistas simples para cada estado en su aplicación, y React actualizará y renderizará de manera eficiente solo los componentes correctos cuando cambien sus datos.

En ReactJS, cualquier cosa que escribamos que parezca HTML no es HTML puro en realidad. Todas las cosas que parecen HTML son JSX, Detrás de la escena, se convierten a JavaScript estándar usando babel. Todos estos funcionan de esta manera para facilitar la vida del desarrollador. Dado que JSX no es HTML, es por eso que tenemos una referencia directa a los elementos HTML y es por eso que no podemos obtener directamente las propiedades de ningún elemento HTML. Para obtener la propiedad de los elementos, React da algo llamado ‘ref’. Usando ref podemos crear una referencia directa a cualquier elemento HTML y controlar las propiedades de los elementos HTML. Aquí usamos el sistema ‘ref’ para obtener la altura y el ancho de la imagen. Después de obtener la altura y el ancho de la imagen, configuramos un controlador de clic y aumentamos la dimensión de la imagen que se desvanece en la propiedad DOM.

Ejemplo: Este ejemplo ilustra cómo hacer zoom en una imagen usando reaccionar

• índice.js:

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
 
ReactDOM.render(<App />, document.querySelector('#root'))

• Aplicación.js:

import React, { Component } from 'react'
class App extends Component{
  constructor(props){
    super(props)
     
    // Initializing states
    this.state = {height:null, width:null}
     
    // Bind context of 'this'
    this.handleZoomIn = this.handleZoomIn.bind(this)
    this.handleZoomOut = this.handleZoomOut.bind(this)
     
    // Create reference of DOM object
    this.imgRef = React.createRef()
  }
 
  componentDidMount(){
    // Saving initial dimension of image as class properties
    this.initialHeight = this.imgRef.current.clientHeight
    this.initialWidth = this.imgRef.current.clientWidth
  }
 
  // Event handler callback for zoom in
  handleZoomIn(){
   
    // Fetching current height and width
    const height = this.imgRef.current.clientHeight
    const width = this.imgRef.current.clientWidth
     
    // Increase dimension(Zooming)
    this.setState({
      height : height + 10,
      width : width + 10,
    }) 
  }
 
  // Event handler callback zoom out
  handleZoomOut(){
   
    // Assigning original height and width
    this.setState({
      height : this.initialHeight,
      width : this.initialWidth,
    })
  }
 
  render(){
    // Assign current height and width to the image
    const imgStyle = { height : this.state.height, width: this.state.width}
    return(
      <div>
        <h2>GeeksforGeeks</h2>
        {/* Assign reference to DOM element     */}
        <img style={imgStyle} ref={this.imgRef} src=
'https://media.geeksforgeeks.org/wp-content/uploads/20200923125643/download.png' alt='gfg' />
        <div>
          <button onClick={this.handleZoomIn}>Zoom In</button>
          <button onClick={this.handleZoomOut}>Zoom Out</button>
        </div>
      </div>   
    ) 
  }
}
export default App

Producción :