React Native File Structure: Best Practices and Tips

hey there everyone daesh here back again with another video and welcome to another video in the series of react native in case you are not aware of it we are putting up a full-fledged series with the portfolio apps right here on the YouTube sponsored by hash nerd more about them in a minute but first welcome to the series and in this video we are going to explore the file structure and all the files that are given to us by react native in case you haven't watched the previous video go watch previously all those videos we have helped everyone so that they can do a setup of the environment regardless if you're on a Mac windows or Linux we have held each other out and in fact we have a very helpful Community as well in fact our community has gone ahead and written a lot of articles about how you can get started with this on hash node with the react native app how you can install them on Linux Ubuntu and whole lot of them and they are constantly writing these articles so I would love to Feature A lot of them here all of these are articles written by the people who are watching this series and I highly recommend you to create an account on hash node and just write an article with the hashtag react native that's all the price that you have to pay for this particular series now moving back in this video we are going to explore the file system and the file architecture that is given to us by react native that is absolutely simple and we're going to make this one so again go ahead and check out our hash node as well I'll talk about them later on as well but first let's come here so so far in this journey we were able to generate a basic react native project and we were able to run it on our classic old Android device in case you want to run it on emulator iOS device Android device that is also 100 fine but one thing I would like to mention that throughout this series I will be using react native CLI and not the Expo in case you want to go with your Expo path feel free you are welcome but in majority of the cases and high-end apps CLI is used so throughout this application throughout this course I will be using react native CLI Expo is easy to set up but in the longer run you should be struggling a little bit so go ahead head and work on the CLI in this video Let's explore the file that are all given to us now at the very first time if anybody sees all of this file structure that we have in react native he's going to see oh that's too much will I able to see this will I able to be able to understand what is all going on but trust me after watching this video it will be all super easy the best part about the react native is you don't have to mess around too much with all the files in fact we'll be removing all the major important files and we'll be recreating them eventually so let's explore one by one and try to understand which are the key files where you should keep your eye on and which one you can totally ignore the first one being the test folders now of course every application need to be tested out so this is something where the testers are going to work through react native by default these days provide a typescript support so that's why you're going to see all the file at TSX now again the best part about the TSX file is even if you don't know typescript you can still work on with them because your JavaScript knowledge is only required so we're gonna be working through that here are some of the test cases that you can write renderer if it properly renders the app if it properly renders the buttons or the layout same all these things are test and these tests are being written by the testers throughout the series at least in the starting of the series we won't be focusing too much on the test because that's a different case and different course all together so we won't be focusing on that then we have these bundles we don't have to worry about that these are just configuration files we never ever touch this the two major folder that we have is the Android and the iOS since in the react native world you write your code once in just the app.js or the app TSX file and that code is finally being moved into the iOS world and the Android world it's kind of a simulated version there but don't worry it's not a webview app it's a proper full-fledged app so first let's explore the Android now the Android there are chances that probably like 95 percent of the time you will never go into this folder this is just there so that all the configuration can be linked by your react native app and your Android app works fine but there are special cases where you will be coming into this folder and will be checking few things for example the first one being build.gradle this is the pi this is the file where you simply go ahead and check your dependencies uh your build which is the minimum version of the SDK you are supporting and all of that so sometimes in the longer run you might have to come up here and to check out these things especially what version of a minimum you are supporting and what is your targeted SDK version for the device you are working on so this is one thing where you'll be coming another place where you might be coming up here is this dependencies sometimes we have to add dependencies manually based on what packages we are installing so because of that we have to come in this file and sometimes I remember I repeat this again only sometimes we have to come and repeat the this again another file which is important to run the Android apps is locale.properties so make sure you always come here sometimes in some system these files are not directly generated so you have to manually come this and as we saw in the Discord Community some people already got this file so they don't have to do anything people have discussed greatly in depth about what to do when it is Android what it's to do in Windows and Mac and Linux all of them and we have written great articles there in case you need support check out our Discord server all right so this is all you need in case apart from this you never ever touch anything for example in the app we have this source and we have main we have Java files and we have main activity and application we never touch this everything is linked via our app.js so through this all the things are being fetched into the architecture we never ever touch these files in the react native so that's a good news you don't have to worry too much similarly in case you are working for the iOS specific apps and you're very much worried about that you can simply open up the iOS and the only file which you will be touching majorly is the Pod file now pod file in the world of iOS is the file where you install all of your dependencies all of your new packages everything comes up here so that's why this file is important this pod file is everything meat and part of the IOS app in case you haven't checked out I do have an iOS course as well on your device so make sure in case you want you can check it out otherwise we never come on to this one so again iOS is really simple only just one file nothing else rest is all taken care of by react native then we have this node module folder since our entire application is based on node and the JavaScript we require node modules a lot of dependencies are there and that's all dependencies is installed in the node modules we have also noticed in our Discord server that sometimes there are issues while updating all these files so in case there are some issues go ahead and remove the node modules file and then reinstall the package how we can do that it's really simple go ahead and first open this up make sure when you do PWD present working directory then you simply are inside this folder and that simply means if you do an LS you should be able to see the package.json file this is really important I saw a lot of people struggling with that on our Discord so make sure when you do an LS you are able to see this file some people were running these commands outside of this project folder so please make sure you are aware of that all you have to do is simply say npm and then install that's all and this node underscore module folder will be recreated for you so that's all you have to do that's all you have to worry about so I told you these folders looks really long and really big but they are not really they are super easy to work on with now after that we have got some limiting configuration and some ignore files what happens is obviously you want to put these files into portfolio as well now during this portfolio a lot of these files can be regenerated as well so in that case we really don't want some files to be pushed up for example the bundlers we really don't want to push the node.js module folder we don't want to be pushed up there some files like locale.properties also should be avoided totally so these all are mentioned in the git ignore so that they don't go on to git repository maybe you're using GitHub gitlab whatever you're using now after that we have got some prettier configuration as of now there is nothing inside the prettier configuration that is too much heavy it's just simply saying that hey uh some parenthesis are there some spacing configuration this is just for the developer specification this has nothing to do when the code files actually goes into production this is just for the ease of the developer then we have some Ruby versioning a lot of this has to do with the IOS versioning as well so just for the specific iOS use case these Ruby versioning are being used you can go ahead and change them as well no problem at all then we don't have any Watchman configuration like Watchman is simply a simple tool which constantly re-updates your UI or re uh kind of loads your application whatever the code you are writing and shows that on the devices right now we don't have any but surely in the major case we can actually provide some configuration then we have this app Json now this is where all the files are linked your Android takes the name of the application from here your iOS also takes your name of the application from here so this is the major configuration file in react native majority of the configuration files are with the Json and hence here is the same case that we have so simply really nothing much to be worried about then we have this app.tsx not to be confused with app.json app.json is a simple display configuration that we have and app.tsx is the file where all the meat and potato of this in the next video we'll be having directly talk onto this one really in depth in fact we'll be removing everything and we'll be talking with that and this is the file which actually brings everything on the screen yes this only one file so I told you there are so many files but we all care about is just one file this is the major file which actually does every of the views and whatever is available there now we have this Babel configuration now what happens in the world of JavaScript is Javascript doesn't know that how these files are being run on these mobile devices or even how these files are being splitted into different files and we have to combine them so for that we need some kind of a bundler which actually combines all of our file and just make them one file available to everyone so this is where react native use Babel configuration and in the bevel we use Metro configuration I'll talk about that in the later on videos as well and I'll definitely give you a brief documentation too about the Metro as well all you need to know for the interview purpose later on as well that just like there are lot of bundlers which combines all of your Javascript file and make it available and runnable for the browsers and for mobile we use Metro in react native that's all you have to do right now now same file goes for the gem file it's again a ruby based file majorly for the cocoa pods and for iOS development we again never touch this file as well then we have this index file now obviously right now our out of the box your react native doesn't know which file to load up app.js component.js or component.tsx doesn't really know so the first file the Metro Builder when you open up this config it opens up this Metro Builder is this index.js file it simply says that hey react native the first file that I'll open up is app name and I'll open this up from App this app is coming up from this dot slash app the TSX file that we just saw and notice here it Imports the file name from the app.json this is where all the namings are coming up and from line number six this is where all of your app configuration buttons what to load on the screen all these app is actually coming up and simply the app registry this is where the magic happens this is where all the interaction happen the main diagram that we saw on the react native homepage that how it converts one file into IOS and Android Yep this app registry is actually responsible for doing that then we have these Metro configuration there is nothing too much that we actually come up and change in that in fact in all of the apps that we'll be building we'll never change that only thing we should be aware of it is that Metro is the bundler which will help us to do all of that all right and the last file that we have is the TSX a TS config which is a typescript configuration file typescript allows you to have a strong types so somebody needs to tell me from where should I bring all these types and this file actually tells me that hey this is where you need to bring all the types after that we have simply the package.json just like in our regular react app or the node app we have a lot of packages and dependencies as you can see there's a lot of Dev dependencies here but if you look at the dependencies there is very less of the dependencies and that's why when you have this file up here this is such a really big file but when you export the build of the app then it's a comparatively less of a file size and yes there are a lot of ways how you can reduce the file sizes maybe we can talk about them later on but right now I think this is a good start to get started and here are all the scripts that we want to run in case you want to run our file on the iOS or Android or everything so really uh it looks really big and gigantic but once you have the look on this video that hey it's not really too much it's really very manageable it doesn't look that much scary now in the next video what we're going to do is we're going to explore a little bit about the Metro configuration not too much but we'll read some of the documentation about the Metro as well as will come and talk majorly about the app.tsx this is the file which actually brings all the things which are available on the screen so it would be a great idea that we completely entirely removed this uh all the details in the file and try to recreate it that's all what we'll be doing now coming back on to the part of the sponsor in case you have enjoyed this video have understood a little bit go ahead and try to write an article about the file structure of the react native app and share it with the hashtag of react native so that we can track it up here join our Discord server where a lot of people are helping each other to run these Android apps IOS app through the react native and it's a great Vibrant Community that we were able to build and again a big shout out and thanks to hashnode for sponsoring this entire series and putting it on YouTube so that everybody can learn mobile development that's all for this video and I'm gonna catch you up in the next video

Channel: Hitesh Choudhary

Views: 78,203

Keywords: Programming, javascript, react native, mobile app

Id: PjmAVh4Syvk

Length: 14min 2sec (842 seconds)

Published: Tue Jan 31 2023