CODEWITHSUNDEEP
reactjsdjango-react
sam rafiei
sam rafiei

Reputation: 71

React App.js doesn't update when making change but other components do

This is my first time using react and I'm using it with Django. I have an index.js that renders the Component App into an id=root element and in the App's body, I have placed an h1 tag and another Component called HomePage which has been imported. When I first start the server and the webpack, the App component updates normally for about 10 seconds but after that, any changes to the App.js doesn't update. The component HomePage however does update when the App component doesn't. My guess is that main.js isn't updating, any help would be appreciated. index.js

//index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
// import { render } from 'react-dom';
import App from './components/App';


ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
);

App.js

import React, { Component } from 'react';
import HomePage from './HomePage';

function App(){
    
    return(
        <div>
            <HomePage />
            <h1>Welcome</h1>
            
        </div>
    );
}
export default App;

HomePage.js

import React, { Component } from 'react';


const HomePage = () => {
    return (
        <div>
            <h1>Home </h1>
        </div>
    );
}

export default HomePage;

Upvotes: 1

Views: 7057

Answers (3)

luiz Henrique reis
luiz Henrique reis

Reputation: 1

Bro, I had the exact same problem and, in my case, to solve it was pretty easy

I was saving the files of the components with CAPS LOCKS ON and importing them with CAPS LOCKS OFF

I saw a similiar error over here in your code:

import App from './components/App';

In windows, those kinds of problem are pretty common since we are dealing in a system there is not case sensitive

I hope I helped you!

Upvotes: 0

AnatuGreen
AnatuGreen

Reputation: 895

This issue took me a while to resolve yesterday. These are some troubleshooting you may try:

  • Try going to a new directory and initiating another react app. You could also, compare files, boilerplate codes, and folder structure of another working app to see what might have gone wrong.

  • In your index.js, you could also try:

    import React from "react"; import ReactDOM from "react-dom"; ReactDOM.render(, document.getElementById("root"));

  • You could also try using a third-party react initialization tool like viteJs.

Upvotes: 0

sam rafiei
sam rafiei

Reputation: 71

I solved my issue, seems that react is looking for the App.js in the src folder alongside index.js and I had mine in the Components folder with the other Components. after moving it to the src folder and updating the imports my App started updating normally.

Upvotes: 1

Related Questions