Files and folders in React Native project
Hi guys!!! Welcome back for my article series on React Native for Beginners. In the previous article named How to set up the first React Native project, we created our first React Native project using expo CLI. Let’s look at what our project looks like.
First of all, I open the code of our project. To view and edit our code I recommended using visual studio code. You can download and install it using the following link.
Let’s open our project in visual studio code.
Okay, this our React Native app manage by the expo. First quickly look at what we have in our project and then we can look into what we can change in code to change something in our app. Let’s talk about the files in our project. In our React Native project, we have a couple of folders and files.
Folders and files in our React Native project
.expo — this folder contains some configuration for expo. You don’t need to touch that folder
assets — this folder holds some images in this project like an icon in your app. This is the folder which we use to hold all assets of our project like images, videos, fonts, etc. It is not compulsory to store our assets in this folder but we do that as a practice because then we can manage files in our app in a proper way.
node_modules — this folder contains all the dependencies of our project like react, react-native, etc. this folder will automatically manage for you and you don’t have to touch that folder.
Then we have some files in our project. Let’s look at what are the files in our project.
.gitignore — this is the file that helps with git which is the source code management system. We will talk about .gitignore file in the future article. For now, leave it as it.
App.js — at the moment this is the most important file for us. This file contains code that is responsible for rendering what we saw on the screen.
app.json — this file holds some configuration of our React Native app powered by expo.
Babel.config.js — this file configures how the JavaScript code is optimized and compiled. You can leave it as default.
Package.json — this is the file manage your dependencies. There you can see some dependencies like expo, react, react-native, react-dom, etc which you are using in your project.
That is the format of our React Native project.
As I told before at the moment the most important file is App.js because it is the file responsible for rendering what we saw on the screen. This is the file that we are going to edit to change what we are seeing on the mobile screen.
Thank you for reading. I hope you learned something. In my next article, let’s talk about how to customize our app provided by expo. Hope to see you with the next article in the near future.
Happy coding…!!!
