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 Setting up with Create React App

Gabbie Metheny
Gabbie Metheny
33,778 Points
Posted by Gabbie Metheny
Gabbie Metheny
33,778 Points

Starting from React Basics project files using create-react-app

In case anyone else wants to use their finished project files from React Basics to make sure they understand the changes Guil made off-screen, and know what React is doing behind the scenes in create-react-app, I recommend watching (or rewatching, in my case) Guil's videos on Using Create React App and following along, copying and pasting from your React Basics files and making any other needed changes.

Guil explains things really well in those videos, and you'll have a headstart on understanding the React Components course. Just use npx create-react-app scoreboard like Guil starts typing out in the video, as installing via npx is the current recommendation for using create-react-app.

There will obviously be a bit of a learning curve vs. downloading the project files, and create-react-app did release a new major version (v2) right as this course was launched (though I haven't encountered any breaking changes yet), but I recommend giving it a shot! If everything breaks, you can always just download the project files ¯\_(ツ)_/¯

Scott Appolon
Scott Appolon
686 Points

Hi, I'm kind of stuck. When you download the project files, how do I add it to the folders in my text editor?

3 Answers

Gabbie Metheny
Gabbie Metheny
33,778 Points
Gabbie Metheny
Gabbie Metheny
33,778 Points

I posted my finished "starter" files on Github, too, and I'll continue pushing code there from this course on separate branches.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Great stuff, Gabbie.

Can I recommend that Guil Hernandez links this post to the Teachers notes or updates them directly there? React does seem to update very frequently.. this might help people newer to React stay up to date. :)

Alex Hadimulya
PLUS
Alex Hadimulya
Courses Plus Student 3,718 Points
Alex Hadimulya
Alex Hadimulya
Courses Plus Student 3,718 Points

Hi there, just a quick question, after running create-react-app do i just replace the "src" folder contents with the project files "src" folder?

Thanks for your help!

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi there,

Yes, you can structure your files the way you please, so long as you use the .src folder. Convention dictates you use a Components folder inside this as well where you'd put all your individual component files. The rest in your .src folder which is kind of like your project root! :)

Scott Appolon
Scott Appolon
686 Points
Scott Appolon
Scott Appolon
686 Points

When you create a components folder, are you supposed to put all of the .js files inside of it?

Gabbie Metheny
Gabbie Metheny
33,778 Points
Gabbie Metheny
Gabbie Metheny
33,778 Points

The convention with React is to place all of your component JS files in a Components folder, but as long as they're located somewhere inside of the src folder, you'll be fine!