Lets call this component and will render that element

Lets call this Component and will render that element to the root container.
Save the changes, navigate to the browser.
One can see that as we keep speaking that will be displayed as text in the
textarea.
There are many such hooks are available over npm one can make use of.
Custom Hooks allows us to reuse the stateful logic to the greatest extent.
import React , { useState } from 'react'
import ReactDOM from 'react-dom'
import { useSpeechRecognition } from 'react-speech-kit'
function App (){
const [ text , setText ] = useState ();

const { listen , stop } = useSpeechRecognition ({
onResult : result => setText ( result )
});
return (
< div >
< h2 > Converting the Speech to Text ...</ h2 >
< textarea value = { text } ></ textarea >
< p >
< button onClick = { listen } > Listen </ button >
< button onClick = { stop } > Stop </ button >
</ p >
</ div >
)
}
const element =< App ></ App >
ReactDOM . render ( element , document . getElementById ( "root" ));
Routing
In this article, we will introduce ourselves to a Concept Called as Routing
and we will also understand how to use Routing in our React Projects.
What is Routing?

we know that Components are the basic building blocks of our react
applications. We will be developing multiple components as Part of working
on any Project, like how we have created Employee Component, Department
Component and Project Components.
When we create multiple components, we don’t show all these components
together to the User.
we change what the user sees by showing or hiding portions of the display
that correspond to particular components based on User Activities.
As like in this Example, we will show Employee Component when we are in
Employee Tab, When we Click on Department Tab, we show the Contents of
Department Component and When we Click on Project Tab, we will display
the contents of Project Component.
To implement this kind of navigation within the single page of our
application, we use the concept of Routing.

Routing enables navigation from one view to the next view (within the same
page) as users perform different tasks.
Lets Open index.js file from our demo-project to understand how we can
implement Routing in our demo-Project.
Till now we were creating all our Components in our index.js file for our
ease of access.
We will create three different Components called as Employee, Department
and Project. But now we will create them in separate javascript file.
Lets start with the first One that is Employee Component. Lets create a new
javascript file in our src folder and we will name it as employee.js.
I have the Employee Component Code handy and Pasting it here.
We have to export this function from this script file, so that this function can
be imported in the other script files where it is needed.
So we write export default Employee
We will repeat the Same for rest of the two Components as Well.
As we see here, we have created three different components in three different
js files.