Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript React Components Build Modular Interfaces with Components Setting up with Create React App

Why can't I view React app in browser?

I set it up exactly as the video is telling me to, but for some reason when my app runs in the browser I see the React logo and then a message underneath that says "Edit src/App.js and save to reload." Instead of actually seeing the app in the browser.

Did I do something wrong or miss a step? I've rewatched the video a thousand times and can't seem to figure out what the problem is.

Dane Parchment
Dane Parchment
Treehouse Moderator 11,003 Points

Can I see your code? It's possible you are editing the wrong file, and so you aren't seeing the results change.

William Wei Luan Ting
William Wei Luan Ting
4,254 Points

I seem to remember having a similar issue when I started with React. I can't seem to remember the exact solution I did for this. If you post your code it will help. But here are my exact steps I use to setup a react environment from scratch.

Install Node.js Install VisualStudio Code from vs code's terminal install react by tying ins "npm install -g create-react-app" from any directory you can then type in "create-react-app my-app" a folder named my-app will be created, navigate to this directory and then type in "npm start"

if you do all the steps above it should work.

it sounds like your code is working just fine. when you run npm start at first that is your first thing you see in react. when you run create-react-app you see the react logo and edit src/App.js next you need to delete the stuff inside of App.js and add your own content inside of App.js you import your components, and add them to the App.js file

import React from 'react';
import Header from './components/Header';

class App extends React.Component {
   render() {
        return (
         <div>
            <Header />
         </div>
      )
  }
export default App;

something similar to this... to kick it off. best of luck.

2 Answers

Johnny Austen
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Johnny Austen
Front End Web Development Techdegree Graduate 35,456 Points

So my solution to this was to create the app, remove all files and folders within the scoreboard folder created by create-react-app, replace them with the project files, then run npm install, and then npm start.

Nancy Melucci
seal-mask
.a{fill-rule:evenodd;}techdegree
Nancy Melucci
Front End Web Development Techdegree Student 34,491 Points

I tried this and it identified my first react component as an unexpected token. (<header>)

I love Treehouse tutorials but so often the installs of additional software or other crucial IDE/software/files goes off the rails locally, and then you can't really follow along by doing the coding. It makes me sad. Really.

Nancy Melucci
seal-mask
.a{fill-rule:evenodd;}techdegree
Nancy Melucci
Front End Web Development Techdegree Student 34,491 Points

Update: I gave up on using npm-create-react and just started using my Atom IDE and local development server from the first tutorial. I would like to use this method (above) but I don't want to spend hours figuring out how to make it work when I can just keep on the tutorial.