Understanding React Native File Structure Quickly

We are going to see the important folders and files in the file structure of react-native first, then we will see other files which are important but not that much.

These are some important files and folders

• node_modules

• .gitignore file

• app.json

• App.tsx or App.js

• index.tsx or index.js

• metro.config.js

• package.json

These above-mentioned are the main files you must know what they do and why they are here in the file structure. So, we are going to look at them one by one:

1. node_modules

   • It is the folder that has all the dependencies and packages we have installed or react-native needs.

   • It is not pushed to GitHub when we upload our source code because it is a heavy file and we can easily make another node_modules with the help of just one command which is npm install and package.json which knows the dependencies and packages we need to run our react-native app.

   • We can get errors sometimes and we try a lot of stuff to debug and do many silly things like removing or adding semi-colons you must also have done it right 😂. But reinstalling node_modules could help to remove errors and run our project so just run the above-mentioned command.

2. .gitignore

   Whenever we push code which means when we upload or store our source code in platforms like GitHub or GitLab or some other platforms. It might not be a good idea to upload that files which can be downloaded or generated by anyone using just one command like node_modules we discussed above. So we just add that file names in a file named .gitignore so git using which we upload our files to code sharing platforms just ignore those files and don't upload that files only because they can be generated so it may be time-wasting and a waste of resources.

3. app.json

   • This file is as important as writing code because these files have your app name using which ios and android just know basic info about our app like name, display name and other stuff which we might want to add shortly when we write some code and make big apps like tesla and uber.

4. App.tsx

   • It is like the main file which represents our app just like its name App.tsx, it gets rendered and we see our app.

   • It contains all that stuff we see like buttons, text, and styles.

5. index.tsx

   • The first while the metro opens up is index.tsx . If you don't know metro, it's nothing but the bundler which takes all the files and makes your app that runs on your device. It's similar to web-pack but that works for web apps.

   • The app component is imported from App.tsx and passed into a function so that it can be rendered for ios and android devices. If you don't know what a component is you should learn to react library or just search on google you might understand it.

6. metro.config.js

   It gives metro the configuration of the react-native project that's all you need to know if you just started with this new technology. With time, you might have to change it or modify it according to your app.

7. package.json

   • It is also an important file not like you have to edit something by yourself but for the project.

   • Because it contains all the records of the dependencies and packages which are being used in the project.

   • It also has scripts or we can say commands which we execute for example npm run android which is a command for installing the app on our android device similar ios command for ios devices

   • And also we can add our commands but you don't have to edit this file that much.

This was pretty much everything you must need to know about the react-native file structure which is important to know.

We know there are more files and folders in the file structure but they are the type of files that you will not need to open 99% time so don't waste your time to know about them now definitely, when you get to that level you will get to know about them.

Yeah, there are two more folders which are android and ios these are important these are the real app that is being converted from js files and converted to java files for android and maybe swift for ios. And like android folder contains some important files that you might need to edit like build. gradle but of course not now because it's just your start. So, you don't need to care about them now.

Thanks for reading the article please leave a like and comment so that I can improve my writing skill.

Follow me on Twitter.