use plugin International Telephone Input in react - reactjs

Question

I'm very new to react and I just want to use this https://github.com/jackocnr/intl-tel-input plugin in my form. But in the documentation says to use pure js input id query selector to use plugin. But how can I change this kind of code to react usage.
code example in doc:
<input type="tel" id="phone">
<script src="path/to/intlTelInput.js"></script>
<script>
var input = document.querySelector("#phone");
window.intlTelInput(input);
</script>

Answer 1

You should avoid to use Jquery in React projects. You can do it React way.
For intl-tel-input, there is react-intl-tel-input and react-intl-tel-input-v2 packages are available.
import ReactIntlTelInput from 'react-intl-tel-input-v2';
import 'intl-tel-input/build/css/intlTelInput.css';
<ReactIntlTelInput
value={this.state.value}
onChange={this.onChange}
/>
Demo

Answer 2

It's not a good idea to manipulate the DOM manually since react creates a virtual DOM for performance issues
React creates a tree of custom objects representing a part of the DOM.
For example, instead of creating an actual DIV element containing a UL
element, it creates a React.div object that contains a React.ul
object. It can manipulate these objects very quickly without actually
touching the real DOM or going through the DOM API. Then, when it
renders a component, it uses this virtual DOM to figure out what it
needs to do with the real DOM to get the two trees to match.
You can think of the virtual DOM like a blueprint. It contains all the
details needed to construct the DOM, but because it doesn't require
all the heavyweight parts that go into a real DOM, it can be created
and changed much more easily.
source
There's a lot of "ready-made" react components that you can use. You can use react-phone-number-input for example like this:
import React, { useState } from "react";
import ReactDOM from "react-dom";
import "react-phone-number-input/style.css";
import PhoneInput from "react-phone-number-input";
import "./styles.css";
function App() {
const [inputValue, setInputValue] = useState("");
return (
<div className="App">
<h1>International phone number</h1>
<PhoneInput
placeholder="Enter phone number"
value={inputValue}
onChange={inputValue => setInputValue(inputValue)}
/>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Take a look at codesandbox
If you want to learn more about how React manipulates the DOM, you can read this article.