JavaScript React Basics (retired) First Steps in React Our First Application

Christian Sverrhag
Christian Sverrhag
12,143 Points

Where to place the downloaded files?

The Learn React track is so confusing to get started with. I'm having the following issues.

  1. In the first course "React Basics" there is no explanation on how to run the application on my local machine. Just downloading the files that works in pretty much all other courses does not work. Sure I could use the workspaces for the course but then I wouldn't learn how to do it myself.

  2. After a while I realize that you need to use the create-react-app that is explained in the second course of the track. It's very confusing that this course was not first.

  3. Once I have installed create-react-app globally I created a "react-basics" project to put my downloaded files in. Now the next problem comes, where should the files be put? From the start an empty React project contains the folders:

node_modules public src

npm start works without problems here. However the file structure of the downloaded files does not match this structure. In the downloaded files the following exists:

\vendor\babel-browser-min.js \vendor\react.js \vendor\react-dom.js app.css app.jsx index.html

There is no guidance on how these files should be placed in the react project I have already created. I tried replacing the index.html with the same file in the \public folder, putting the vendor folder at the top level and putting the app.css and app.jsx in the \src folder and then changing the paths in index.html to match but I only get the error "Target container is not a DOM element."

The instructions of this course is very unclear compared to the other Team Treehouse courses, and I've taken many courses now.

Please advice. Thanks!

3 Answers

Christian Sverrhag
Christian Sverrhag
12,143 Points

Hi Jonathan,

I have no problem with running the server. I have problems with where the downloaded files should be placed inside the react project created by create-react-app to work?

Thanks in advance!

Joshua Burcham
Joshua Burcham
1,251 Points

I think we're meant to click on the "Launch Workspace" link near the bottom right of the video panel. That opens up a development environment where you can follow along without having to do the heaving lifting of setting up a local development environment just yet.

I agree... it would be nice if the video pointed this out.

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 87,415 Points

As I understand it you would run node from the command line which will then open up a connection to localhost. Usually this is on port 3000, so to access the project you would type localhost:3000 in your browser.

Or if that doesn't work or is not possible, simply download a local server such as DesktopServer or XAMPP, and work on your React Project there. :-)

Thawsitt Naing
Thawsitt Naing
87 Points
  • Go to your downloaded folder.

cd ~/project_folder

  • If you have Python 3 installed, you can start a local http server with

python -m http.server

  • Hope it helps. It worked for me. See more here