Repository: create-react-app
Issue: Development Server not refreshing -react-app
Labels: stale,needs triage

Issue: Despite restarting server many times with npm start, same old error is showing up.
./src/components/slider.js
  Line 9:25:  Parsing error: Unexpected token

   7 | 
   8 | 	<div>
>  9 | 	<h2 class = "w3-center"<Latest Arrivals></h2>
     | 	                       ^
  10 | 	<div class ="w3-content w3-section" style = {{max-width : "500px"}}>
  11 | 	<img class = "mySlides" src = "./images/banner1.png" style ={{width:"100%"}}></img>
  12 | 	<img class = "mySlides" src = "./images/banner2.jpg" style ={{width:"100%"}}></img>

--------------------------------------------------------------------(The Actual code edited is below)...............................
import React,{Component} from 'react';


class Monty extends React.Component {
	render(){
	return(
	<div>
	<h2 class = "w3-center">Automatic</h2>
	<div class ="w3-content w3-section" style = {{max-width : "500px"}}>
	<img class = "mySlides" src = "./images/banner1.png" style ={{width:"100%"}}></img>
	<img class = "mySlides" src = "./images/banner2.jpg" style ={{width:"100%"}}></img>
	<img class = "mySlides" src = "./images/banner3.jpg" style ={{width:"100%"}}></img>
	<img class = "mySlides" src = "./images/banner4.jpeg" style ={{width:"100%"}}></img>
	<img class = "mySlides" src = "./images/banner1.png" style ={{width:"100%"}}></img>
	</div>
	<script>
var myIndex = 0;
carousel();
kk
function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  myIndex++;
  if (myIndex > x.length) {myIndex = 1}    
  x[myIndex-1].style.display = "block";  
  setTimeout(carousel, 2000); // Change image every 2 seconds
}
</script>



	}
	}
	);
	export default Monty;

	What is troubling me is despite closing the server and refreshing it , same error is showing up.

Already tried following Solutions:
1- Adding REACT_EDITOR=atom ( including .env file )
2- Closing the server and restarting it,
3- Deleting all history from Browser chrome .

I am new to React, so not sure why this error is happening and how i can rectify the same.

Addtional Information: App.js
import React from 'react';
import MyForm from './components/form';
import Imagine from './components/test';
import {Button, Badge} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import Monty from './components/slider';


function App() {



  return (
  <div class="w3-container">        
<div class="w3-bar w3-border w3-blue">
<h1 style ={{color:'white'}}>F L I R T</h1>

<i style ={{color:'yellow'}}><b>Best Offers</b></i>
  
  <MyForm></MyForm>
  <div class="w3-bar w3-black">
  <a href="#" class="w3-bar-item w3-button">Home</a>
  <a href="#" class="w3-bar-item w3-button">Men</a>
  <a href="#" class="w3-bar-item w3-button">Women</a>
  <a href="#" class="w3-bar-item w3-button">Kids</a>
</div>
  
  
        <div class="input-group md-form form-sm form-1 pl-0">
          <div class="input-group-prepend">
            <span class="input-group-text purple lighten-3" id="basic-text1"><i class="fas fa-search text-white"
                aria-hidden="true"></i></span>
          </div>
          <input class="form-control my-0 py-1" type="text" placeholder="Search for Men, Women or kids " aria-label="Search"></input>
        </div>

      </div>
  
  

   

  <div>
     
   <Button variant="primary">Primary</Button>
   </div>


   


  
   
   <Imagine></Imagine>
  
    </div>

    
    
 
    )
    };
    
export default App;