General questions about create-react-app package

1

Hello,

I have been learning React for pretty much last 1.5 months, but all the projects I worked on so far I have managed to do on codepen and intergrated development environments in some courses that I have taken. Right now, however, I would like to build React apps that I could, for example, deploy on Github pages and eventually on my own portfolio website. I came along this package create-react-app and it is recommended as a starting point.

  1. As I understand it is a package that already contains setup for creating a standalone React app, like it has Babel and many of commonly used packages preinstalled with it, so we, as users, could simply start coding without a need to setup an app before that. Would it be correct?

  2. Also, as I understand, it is something that needs to be installed for each app I’m working and seems to be taking quite a bit of space. Is it sort of just something that we can’t avoid or is there anyway to remove some parts of this package to make our app lighter?

2
  1. Yes
  2. No, you can’t remove parts, and this is normal size for a Node project used to build a frontend app (the size, on average for CRA, is about 250Mb, all comes from development tooling which runs on Node). You can just delete node_modules if you’re not working on it and reinstall when you are working on it. The actual end product, the app, will be measured in kB
1 Like
3

  1. Yes. You develop it in a node environment that allows you to break things apart into separate files. Then you run the ‘npm run build’ script which creates a “build” folder - these are all the files you need for an actual web site bundled up.

  2. You’re going to have to be more specific. Don’t confuse the size of the folder in which you are developing this and the eventual bundle files for the build. There are a lot of things in the CRA folder (like node_modules) that are big but won’t necessarily end up in the final build.

1 Like
4

So then after, for example in VS Code, I have done my development and test it through live server, I would build my React app somehow and it will be much lighter?

5

Right, you’re looking at the dev environment. The “build” folder has the actual build.

6

Oh yes, that’s what I was confused about actually. I thought that it would not be really efficient to upload the whole 200+ MB folder on github for each project :slight_smile:

But makes sense now. So as I understand now my process of creating React app with help of create-react-app would look similar to that:

  1. Install create-react-app via npm
  2. Add any dependencies and packages through my IDE
  3. Write code and test my project through live server
  4. Build the project
  5. Deploy to Github
7

Yeah, that’s basically it. In steps 2 and 3, you’re in a kind of fake Node world - holodeck where you’re developing your app. And then when you build it, it minifies and treeshakes and all that other good stuff to make it as small as possible. There are other things you can do to try to keep it small, but don’t start worrying until you see what is in the build folder - that is what gets put on your site, the contents of that folder. Everything else is just infrastructure for the holodeck simulation.

1 Like