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

Gabbie Metheny
Gabbie Metheny
33,670 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 ¯\_(ツ)_/¯

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,670 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 82,455 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
PRO
Alex Hadimulya
Pro Student 3,504 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 82,455 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! :)

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

Gabbie Metheny
Gabbie Metheny
33,670 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!