Do in JavaScript in Visual Studio Code.

Proof My Code Please! Take screenshots!!

Also, show how to create a new project from scratch in Visual Studio Code. I keep getting an old project that I worked on earlier.

I am using yarn rather than npm or npx (or whatever). Here is the code:

//App.js import React, { Component } from 'react' import './App.css'; import Validation from './Validation/Validation' import Char from './Char/Char' class App extends Component { state = { text: '', length: 0 } changeHandler = (event) => { let length = event.target.value.length this.setState({ text: event.target.value, length: length }) } deleteCharHandler(index) { let newText = this.state.text.slice(0, index) + this.state.text.slice(index + 1) this.setState({ text: newText }) } render() { let letters = (this.state.text.split('').map((letter, index) => { return  this.deleteCharHandler(index)} key={index} /> })) return ( 
  this.changeHandler(event)} value={this.state.text}> 
{this.state.length}
  {letters} 
 ) } } export default App; // Validation.js import React from 'react' const validation = (props) => { let text if (props.textLen {text} ) } export default validation // import React from 'react' import './Char.css' const char = (props) => { return ( 
 
 
{props.letter}
 
 
 ) } export default char

1. Create an input field (In App component) with a charge listener which outputs the length of the entered text below it (eg, in a paragraph). 2. Create a new component (Validation Component) which receives the text length as a prop 3. Inside the Validation Component, other output Text too short or "Textlong enough depending on the text longth (eg, take 5 as a minimun langth) 4. Create another components CharComponent) and style it is an inline box { display:inline-block padding: 16px; text-align:center margin: 10px; border: 1px solid 1. Render a lot of CharComponents where each CharComponent receives a different letter of the entered text (in the initial input field) as a prop 8. When you click a CharComponent, it should be removed from the entered text Hint: Keep in mind that JavaScript strings are basically arrays! 1. Create an input field (In App component) with a charge listener which outputs the length of the entered text below it (eg, in a paragraph). 2. Create a new component (Validation Component) which receives the text length as a prop 3. Inside the Validation Component, other output Text too short or "Textlong enough depending on the text longth (eg, take 5 as a minimun langth) 4. Create another components CharComponent) and style it is an inline box { display:inline-block padding: 16px; text-align:center margin: 10px; border: 1px solid 1. Render a lot of CharComponents where each CharComponent receives a different letter of the entered text (in the initial input field) as a prop 8. When you click a CharComponent, it should be removed from the entered text Hint: Keep in mind that JavaScript strings are basically arrays