Day 3: React Native folder structure
Welcome to day 3 of my #ReactNativeIn30Days series where I spend at least two hours a day learning the fundamentals of this wonderful mobile application framework.
In this post, I will touch on the following:
- Familiarizing yourself with the folder structures
- A traditional hello world program
- Understanding the Code
Abbreviations
JSX: Javascript XML
HTML: Hypertext Markup Language
Familiarizing yourself with the folder structures
Below is the folder structure I bootstrapped by running the command expo init.
Knowing the project structure and understanding where to look is very crucial because it improves one’s workflow and increases productivity. Below are some of the important files and folders in the project folder you should know:
- assets: This folder contains app assets such as icons, images, etc.
- node_modules: a folder that contains all the packages installed through npm is stored.
- .gitignore: This file determines what folders and files to ignore when making a commit in a repository. One of the folders you will find in this file is the node_modules folder. This is because all the libraries or packages needed to run the mobile application are listed in a package.json file. Running the command npm install will create the folder again (ie node_modules) with all the pages in there.
- App.js: the main project file. This is where you start developing your mobile applications and any changes made here are reflected. We’ ll see an example at the end of this post.
- app.json: is a file that allows us to configure parts of our application. From changing the name of your app to adding a short description of what your app is about or setting a primary user for publishing and creating builds.
- package.json: This is where the name and versions of the libraries you installed for this project are added.
I will not touch on folders such as .expo, .expo-shared, etc. We will not use them for now.
A traditional Hello World program
As tradition demands, we run a simple hello world program that outputs a message “Hello world!” on our phones. A hello world program is often used to explain the basic syntax of a programming language.
Understanding the code
Line 1: First of all, we import React. As I said in the previous post, React Native is built on top of React.
Line 4: we create a functional component called App. A component is a Javascript class or function that accepts input and returns a React element that describes some part of the User Interface or view.
Line 6: we return some JSX. JSX is a syntax for embedding XML within JavaScript. JSX looks like HTML on the web, except React Native uses in-built components like the <View> which is just like a <div> or <span> in web and <Text> for displaying text.
Wrapping up
I did not cover the entire code because some are outside today’s scope and that they will be treated later in other posts. Feel free to give me your feedback as well :).
Github repo: https://github.com/victorbruce/react-native30
