How to write an html element rendered by React to a variable?

Question

JavaScript

I need to write to variables the elements that are rendered and have a className. How to do it? I am migrating my project to React and this is baffling me.

import React, {
    Component
} from 'react';

export default class Header extends Component {
    constructor() {
        super();
        let createText = document.querySelector(".create-page-text"),
            createBtn = document.querySelector(".create-page-btn"),
            headersArea = document.querySelector('.create-page-area');

    }
    render() {
        return ( 
            <header className = "header" >
                    <nav className = "nav" >
                         <input type = "text" className = "create-page-text" ></input> 
                         <button className = "create-page-btn" > Создать страницу </button> 
                    </nav> 
                <div className = "create-page-area" > < /div>
            </header>
        )
    }
}

Answer 1

Using refs
https://learn-reactjs.ru/core/refs-and-the-dom
Example:

class MyComponent extends React.Component {
    constructor(props) {
      super(props);
      this.myRef = React.createRef();
    }
    render() {
      return <div className={"someClass"} ref={this.myRef} />;
    }
  }

this.myRef.current will contain a reference to an element with class someClass