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:
Javascript
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
Javascript
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
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); ;}h2 { 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/
