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 by Example Setting up With Create React App Setting up the Project

Neil Bircumshaw
Neil Bircumshaw
Full Stack JavaScript Techdegree Student 14,597 Points

In this video Guil uses a folder called "Public" which also has an index.html file in it. Also, great tutor!

I was wondering why Guil had two index.html files, one in the "public" folder and one in the src folder. Obviously he copied the html file over so that he could extract the html code over into the app.js file and turn it into JSX, does the other index.html file located in "public" just act as a way to implement styles? Is it okay then to name two files the same?

Cheers guys :)

Struggling getting my head around React a little, mainly when state is implemented, but I'm sure I'll get there!

2 Answers

Gabbie Metheny
Gabbie Metheny
33,709 Points

The index.html in the src folder is the one that Guil copied over from his project assets to build the App Component, and the index.html in the public folder is the one that is actually being loaded onto the page. The index.js file, in turn, loads the App Component into the DOM via the #root div in the public folder's index.html.

If you're still getting a handle on React, I think it's really difficult to work with create-react-app. While it does so much of the behind-the-scenes work for you, you're at a disadvantage trying to manipulate all the templates without understanding how the whole thing is put together. I'd highly recommend checking out The Net Ninja's React playlist on YouTube, he's amazingly talented at being both concise and thorough in his explanations. I followed along with that whole playlist between Guil's Create React App course and this one, and while I had to do some extra legwork to get everything to work with ES6, he explains the concepts so well that I feel much more confident now.

I thing he's asking 'cause un the video at a moment Guil had two copies of index.html: one in ./public, the other in ./src. He deleted the one in ./src after copying part of it content to index.js (and two lines to ./public/index.html).

At the end of the video wi'll have just one index.html.