import React from "react";
import "./App.css";
function SecretComponent() {
return <p>Secret2 information for authorised users only </p>;
}
function RegularComponent() {
return <p>Everyone1 can see this component</p>;
}
function App(props) {
if (props.authorized) {
return <SecretComponent />;
} else {
return <RegularComponent />;
}
}
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
ReactDOM.render(<App authorized={false} />, document.getElementById("root"));In my react project in Visual Studio Code when I make a change the browser page refreshes only if a change is made in the App.js file but doesn't refresh when a change is made in the index.js file. I have to refresh the page manually to show the change.
Try this:
npm install react-hot-loader
In app.js , add import { hot } from 'react-hot-loader/root' .
Wrap the App component while exporting export default hot(App) like this.