CODEWITHSUNDEEP
javascriptreactjs
Swapnil Dadamode
Swapnil Dadamode

Reputation: 55

Which folders are useless and which if them are important in ReactJS?

I ran this command to create a ReactJS app

npx create-react-app learningapp

This created several folders now, I dont know which of them are important. I mean I dont know their purpose.

Can anyone explain their purpose in short?

For your reference

Upvotes: 1

Views: 3580

Answers (1)

Jay Pillai
Jay Pillai

Reputation: 178

  • node_modules -- very important, as this will contain all the npm packages and their entire list of dependencies installed.

  • public -- very important, contains the static files served by your web server.

    • Index.html -- the index.html file where your react app will inject elements into. I believe this is the only "essential" file.
    • The other files in this folder will contain logos and manifests if you'd like your webpage to be able to be installed as a mobile app seamlessly. The manifest.json file holds the information about what the app icon and such will look like.
    • Favicon is the tiny logo you see in your tab title
    • robots.txt will have the instructions for bots visiting your website. Read about it here if you'd like (https://www.cloudflare.com/learning/bots/what-is-robots.txt/)

  • src -- very important, will contain your source code. If you want your app to do anything at all, it wouldn't be very wise to delete this folder. If you want to rename this to something else, you can, but you'd have to mess with the webpack configurations. So, not worth the little extra effort. However, you may alter the folder contents.

    • Unless you want performance monitoring and are writing tests for your app, you can safely delete the test file and the report webvitals stuff. You can make your test files somewhere else too, it doesn't matter if it's here. Just make sure you configure your testing library so that it looks for the correct files.
    • The rest of the files in this folder can be modified all you like, but try not to touch index.js unless you want to go mess with the webpack configs to change the entry point. Webpack looks for index.js as an entry point to build its dependency tree during compilation.

  • .gitignore -- this is the files/folders you can tell git to ignore when tracking your folder. A usual candidate for this file is the node_modules folder.

  • package.json/package.json -- very important, don't directly mess with these unless you know what you're doing. This contains the info about npm packages which your require to run your project properly. A situation where you will need to mess with package.json is when you want to add some custom npm scripts, which is often quite useful.

  • README.md -- just your readme file which is used to display info about the project on your github repo for example. You can delete it, but just put something on there containing basic info about the repo/ what it does.

Upvotes: 5

Related Questions