Welcome back to part 3 of our React Native series. In this part we will be viewing all the individual files and folders. After that we will be diving deeper into different types of components provided by React Native. Then finally adding in our own custom fonts into the project. Let’s go ahead and get started!
Reviewing our Files and Folders
Now before we begin, please go ahead and open the location of your React Native project. We will be viewing each one from top down. Once you have opened it go ahead and follow along! Let’s continue.
First we have __tests__. Inside this folder is where tests are located. This is auto added as we initialize the project from the cli. This is specific for the packages called react-test-renderer and jest. What this does is to test our App, and make sure that it can be rendered correctly. We are able to run all the scripts by using the command ‘yarn test’ or ‘npm test’. Yarn is just another package manager similar to npm. One question you may be asking me is how did I know the command to run the test. Once we get into the package.json file. It will make more sense there but let's continue on!
ANDROID AND IOS:
Next we have our android folder, this will basically have our android related files and folders. I won’t be going into detail of what's inside in this series but just know that this is for android! Next up is our ios folder. You probably guessed it, it's for our iOS side of course! Again we won’t be going into detail of the contents inside the folder.
Moving on, we have our node_modules folder. This is probably one of the most important folders we have. This contains all our packages and dependencies for React Native. When I say packages and dependencies what exactly do i mean. Let’s go ahead and break it down.
Packages are written libraries that we are able to use without the need to do it from scratch. Dependencies are basically other packages that another package may use. They contain many different types of things we can use, like methods and classes and so much more. Pre-written code that makes our life easier! This folder contains all of that. When we install any new packages it will go inside this folder. In the previous video, when we did the command ‘npm install’ this basically looked inside our package.json and package-lock file. And grab everything we need from the npm repository. React Native uses all of these pre written code in conjunction to create what we see and work with, pretty amazing.
We have the .buckconfig file, Buck is a build tool that allows for faster iterations when compiling and seeing changes quickly.
Next up we have .editorconfig and eslintrc.js. These two files are in charge of containing consistent coding styles between different IDE and editors. Eslintrc.js is ESLint. ESLint is a tool that helps us developers find issues with our code before it even gets executed. It allows us to create our own rules and customize it completely to our liking. I won’t be going into detail of all the rules we can use in this video, but look forward to a future video that will cover this! Let’s keep going.
Next we have prettierrc.js. This just helps with formatting when coding. Like adding single quotes instead of double, brackets spacing etc.. We can customize this as well.
Moving on, we have .flowconfig. This is Facebook's flow. It is very similar to typescript. All it does is to check for correct formatting when dealing with types.
Git ignore and git attributes:
Next, we have our .gitattributes and .gitignore. These will be related to github repos.
Gitignore are the files that we don’t want pushed or tracked by github
Gitattributes are for the files that are tracked and what to do with them.
Finally the last config file. This is a configuration for watchman. Again the watchman checks for changes and updates. So any custom configurations go in here.
Next up is App.js. This is one of the most important files we have in our project. This is the main file that is being rendered. Later when we create the component. We will dive deeper into this.
Moving on we have an app.json. This is a manifest format for describing web apps. It includes any environmental variables, add ons and other information.
Next up is index.js. Another important file in our project. This file is the starting point for all react native applications. If we quickly take a look inside.