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

Posted by Michael Fazekas
Michael Fazekas
Courses Plus Student 1,256 Points

React Scoreboard Npx/Npm Start

I have downloaded and installed npx create-react-app scoreboard. it doubles my files and only seeing the react screen. tried header component and nothing trying to figure out what i am doing wrong.... -.-

1 Answer

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

It would be helpful if you posted the code of your App.js here, but for starters the command, "npx create-react-app scoreboard" will in itself create a new app/directory called "scoreboard". This will be empty other than App.js, index.js, and some other basic files. You'll want to copy the component files you downloaded from Treehouse (Header.js, etc.) into the src folder so you have access to them. If Treehouse also has an App.js, you should be able to replace the one in your directory. If you're only seeing the react screen, then your App.js is rendering the default page and you aren't returning your own components in that file. Check your App.js. Your return method should contain the components you want to render (in JSX format). Make sure these are also imported at the top of the file. Here's an example of what your App.js might look like. 

import React from 'react';
import './App.css';
import Header from './Header';
import Body from './Body';

function App() {
  return (
     <>
        <Header />
        <Body />
     </>
  );
}
export default App