¿Cuál es el equivalente de document.getElementById() en React?

En React tenemos un concepto de Refs que es equivalente a document.getElementById() en Javascript. Las referencias proporcionan una forma de acceder a los Nodes DOM o a los elementos React creados en el método de representación.

Creación de referencias

Las referencias se crean utilizando React.createRef() y se adjuntan a los elementos de React a través del atributo ref. 

class App extends React.Component {
 constructor(props) {
   super(props);
   //creating ref
   this.myRef= React.createRef();
 }
 render() {
 //assigning ref
   return <div ref={this.myRef} />;
 }
}

Acceso a referencias

Cuando asignamos una referencia a un elemento en el renderizado, podemos acceder al elemento usando el atributo actual de la referencia.

const node = this.myRef.current;

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

filepathe-src/App.js:

import React from 'react'
  
class App extends React.Component {
  
    constructor(props) {
        super(props);
        this.myRef = React.createRef();
      }
    onFocus() {
      this.myRef.current.value ="focus"
    }
    
    onBlur() {
      this.myRef.current.value = "blur"
    }
    
    render() {
      return (
        <div>
          <input
            ref= {this.myRef}
            onFocus={this.onFocus.bind(this)}
            onBlur={this.onBlur.bind(this)}
          />
        </div>
      );
    }
  }
  
  export default App;

Producción: