Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript React Components (2018) Build Modular Interfaces with Components Separating Function Components Into Modules

Damian Szymanski
Damian Szymanski
11,843 Points
Posted by Damian Szymanski
Damian Szymanski
11,843 Points

Keep getting "Edit src/App.js and save to reload." screen

Hello! I keep getting the "Edit src/App.js and save to reload." on my screen when I type npm start. How can I fix this so the same screen pops up as the video?

Thanks!

Noelle Szombathy
Noelle Szombathy
10,043 Points
Noelle Szombathy
Noelle Szombathy
10,043 Points

If you go into your directory in the code editor that you're using, you should see a src folder. Inside that should be an App.js file that will have some very basic react in it. That is the file that create-react-app renders in the browser, and by default it is set to display the information that you're seeing that says "edit src/App.js and save to reload".

If you have created other components (as different JS files) then you need to import them into this App.js file and 'render' them with JSX tags. For example your final App.js file might look like this if you have a header and a body component in different files (i.e. Header.js and Body.js). Once this file is saved you should see the 

import React, {Component} from 'react';
import './App.css';
import Header from './Header';
import Body from './Body';

class App extends Component  {

  render(){
    return (
      <div>
        <Header />
        <Body />  
      </div>
    );
  }
}

export default App;

The div is used as a wrapper if you have more than one component that you need to render.

Mahmoud Talass
Mahmoud Talass
9,274 Points
Mahmoud Talass
Mahmoud Talass
9,274 Points

I am confused too please help

2 Answers

kasu0270
seal-mask
.a{fill-rule:evenodd;}techdegree
kasu0270
Full Stack JavaScript Techdegree Student 10,071 Points
kasu0270
.a{fill-rule:evenodd;}techdegree
kasu0270
Full Stack JavaScript Techdegree Student 10,071 Points

Hi there, even with this edits or by loading the files from the teachers note it is not working.

Is there an other trick to get the react app started?

jim felli
jim felli
13,401 Points
jim felli
jim felli
13,401 Points

Did you ever figure this out? I'm confused about the same thing and can't seem to work it out