React.js: React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It’s ‘V’ in MVC. ReactJS is an open-source, component-based front-end library responsible only for the view layer of the application. It is maintained by Facebook.
Steps to Create Line Charts using Recharts in React JS :
Step 1: Create React Project
npx create-react-app my-app
Step 2: Change your directory and enter your main folder charting as
cd my-app
The project Structure is as follows:
Step 2: Installing react-speech-kit by the below command:
npm i react-speech-kit
Step 3: Write code on App.js:
import './App.css' ;
import Speech from './speech' ;
function App() {
return (
<div className= "App" >
<Speech />
</div>
);
} export default App;
|
Step 4: Write code in the Speech.js file
import React from "react" ;
import { useSpeechSynthesis } from "react-speech-kit" ;
const Speech = () => { const [value, setValue] = React.useState( "" );
const { speak } = useSpeechSynthesis();
return (
<div className= "speech" >
<div className= "group" >
<h2>Text To Speech Converter Using React Js</h2>
</div>
<div className= "group" >
<textarea
rows= "10"
value={value}
onChange={(e) => setValue(e.target.value)}
></textarea>
</div>
<div className= "group" >
<button onClick={() => speak({ text: value })}>
Speech
</button>
</div>
</div>
);
}; export default Speech;
|
Step 5: Write code on App.css
* { margin : 0 ;
padding : 20px ;
box-sizing: border-box;
} body { font-family : sans-serif ;
} .Speech { width : 50px ;
} .group { margin : 7px 0 ;
} textarea { width : 100% ;
padding : 5px 10px ;
border : 1px solid rgb ( 228 , 20 , 20 );
outline : none ;
border-radius: 3px ;
} button { width : 100% ;
display : block ;
padding : 10px 22px ;
color : rgb ( 10 , 10 , 10 );
font-weight : bold ;
cursor : pointer ;
outline : none ;
background : rgb ( 227 , 240 , 219 );
;
} h 2 {
margin-bottom : 10px ;
text-align : center ;
} |
Step 6: Step to run the application: Open the terminal and type the following command.
npm start
Output: Open the browser and our project is shown in the URL http://localhost:3000/