React Native CLI: Getting started

okay as i told you before react native is similar to react but it's built for developing mobile application so as we can say that building native applications using javascript so you can use your skills in javascript to build application for phones like ios and android and they are really native application they are not web application which are responsive that they are working on desktop and also on mobile phone using some css skills to make it responsive as an application to work on the phone no they are really really native so as you see we can build two applications by using one language which is or for example one framework using javascript which will work on android as a native application on ios as a native application as well so most of companies nowadays are going forward react native because in that case you are saving money for hiring a team on ios to know for example xcode or the language which are related to ios and also to hire another team which knows java which is also used to build android application no you need just to hire one team who knows javascript and basics of react to build two applications in the same time using react native so in that way the company will save a lot of money that's why it's going forward that okay maybe you will tell me okay this is dangerous like how i can depend uh on javascript what if my application is built and has a lot of security and it must be accurate so i need really to build it as native okay i will give you example of top companies using react native for example facebook instagram and also discord skype pinterest tesla so all of those companies are using nowadays react native for their applications on both platforms android and ios so in that way you don't need to hire a lot of knowledge about ios or android if you know javascript i guarantee to you that you can deploy some back-end applications for example using node.js and also mobile application using react native and react i'm sure when you were reading about react native you heard about expo expo is also command line interface to build projects of react native and it's providing with many tools and components which are ready to be used in react native the main difference between react native and expo is in the code structure for example as you see on the left we have a react native project and we see that we have two folders which contains android project and ios this is the project the real project of android which is inside it java or kotlin and also we have the ios which is written with swift so in this case when you create a react native project you are creating as well the android and ios project and in this way you will have access in your project to those modules inside android and ios this what gives react native cli the reality of using the native libraries but in expo you will generate only a very pure javascript project and you can use only the javascript here because expo is used also to build its own native libraries and own native components many people nowadays prefer using react native react native is more stable and more like efficient and we will see what are the benefits of react native expo is for beginners as i will tell you at the end of this lecture so if we go to the react native cli you can add native modules which are written java objective c also with swift and also you can add them to your project directly and you can use them in javascript as a javascript library and also setting up a project is easy and it can be done in a minutes but of course setting up the environment takes a little bit of time more third libraries are supported you will have a lot of third libraries written with react native cli and you guys view them in your project the most benefit and the nice benefit of react native cli that you have less size of production files for example if you have building an application with react native cli you will see that you have for example 10 megabytes of the apk file and as well for the ios file but when you build a project with expo the file or the production file will come very bigger and it has mostly 60 or 70 megabyte in front of the react native cli which has 10 megabyte only this because expo is also adding the files and the modules and the components inside the apk file so it can be used in the application but here when we are using native modules which are already in your system or on your phone then you don't need to have a big file of production as well i have built a project which is made as an eshop ecommerce build with expo and also there are a lot of courses about expo and there is not so much uh courses about react native cli so i prefer to make this course with react native cli to see the benefit at the difference between it and expo and of course if you want you can enroll to our course which is talking and build totally with expo which is building an e-shop on mobile phone so here there is some like recommendation from react native project as you see it says that if you are new on mobile development the easiest way to get started is with expo cli but if you are already familiar with mobile development you may want to use react native cli okay maybe you will ask me you said at the beginning that i don't need any requirement of mobile development okay yeah really you don't need for example for this project which we are going to build you don't need so much skills in mobile development i will just teach you the most important things how to import modules native libraries and use them in your project that's it we are not going to edit a lot of things in the native libraries we are just going to call them to our project and of course there is a one not good benefit of like using react native cli that you need to install xcode or android studio to run your project on your phone but in this way you guarantee that you are really testing your tool without like a middleware which is built in not native way some days ago i asked on react native community on facebook what you prefer for development of mobile application using react native and most of the answers and votes came with react native cli and as you see in some answers of experts they said expo is like using training wheel for a bicycle you will eventually have to take them off and also another answer was i keep seeing expo is for beginners and of course as i told you if you are beginner you can just enroll to the other course where we are building eshop so you can learn really practical using expo okay to start building our environment we need first node.js node.js is a tool for providing and installing libraries which we need for our project to install node.js you just need to go to the website nodejs.org and here you will find two installation methods one is latest features which is called current and also recommended for most users always i go always for recommended for most users which is like more stable and it's providing me with the most important tools which i need for my development and which is fit with the most updated libraries which are available and of course node.js is available for all systems like not only for windows or mac it's available for linux for all other like operating systems so you just select yours and then make sure that you have install it here after that we open the installation and we just go like next next with it like installing any application and it will be installed on your machine so that's it i have it already on my machine and i have it already installed so i don't need to install it again so after that you open the terminal so the terminal you can open it like a terminal in macbook is you can open the applications and you check for terminal or in windows you can run and then find command line which is called command line then the standard command line and then you need to check what version of node.js you have so the most important thing that i want you to be sure that you have the right version of node so otherwise you will not be able to run most of the commands if you have old version so how we can know the version which we have after installation we can go to the terminal as i told you and you put like node minus v and with that you can see the version which you have it's better to develop with react native cli to use the version which is 12 and above so make sure that you have the version 12 and more and then you will be able to code without any problem with react native cli ok now we are going to set up our environment i advise you always to follow the documentation which is provided by react native formally so when you go there you will see all the steps which you need for installation of your environment so first of all you go to react native.dev and then you go to the docs here you will see something which is called environment setup and this will be up to date always based on the versions based on the operating systems of android and ios based on that you will see always the latest documentation i will show you how we can follow it first of all as i told you we have to follow not expo cli we are going to work with react native cli which is most preferred by most mobile developers but of course if you are beginner i prefer to you to go to my course which is related about working with expo and i have built there all the environment which you need for working with expo but now we will work with react native cli then we go to the operating system the operating system as you see it's available for mac os windows and linux i will work here with mac os of course you can follow windows as well all of them are the same but with small differences like setting up the paths which we want for running our commands but as i told you it's always better to follow the documentation for the versions and as well you need to target also the operating system which you are going to deploy for of course we are going to work with android and ios in the same time and both of them has a different installation i will start now with android so first of all we will go to the mac os then we go to the target android and then we install the dependencies like we have here node and we need to install other stuff which i am going to explain it by detail so first of all we will work with the android as you see here in the documentation and in the lecture after that we are going to work with ios to see how we can also run the ios unfortunately like on windows when you want to work on windows and you have ios you cannot support deployment or development of ios application this because that ios application need to run something called xcode and xcode is required and is only installed on mac system so for that i am using sometimes vm vmware virtual machine i'm installing mac os on my windows and then i am able to work with ios in that way if you don't have macbook you can install the virtual machine there are a lot of ways to run a virtual machine just google it and you will find it immediately and you will see how you can install virtual machine of mac os on windows so that's why i'm making this course with mac os currently so it's more general so we can work with android and ios in the same time so in the next lecture i am going to show you how we can start installation for android systems okay in this lecture we are going to talk how to set up our android environment so first of all we go as we said to the documentation and then we go to mac os and then android and in android there is tool which is called a brew or homebrew which is helping for installation of a application or some tools easily to your mac system so if you didn't install homebrew it's better to install it it will help you to install a lot of like applications without bothering yourself to find the installation for it so for that for example i want to install node as i showed you previously i just go to my terminal and i run brew install node as i told you previously so if you go here you will see that brew install node and also there is another tool which is called uh watchman this is very great tool it's made by facebook it's going to watch your changes on your file system and it's highly recommended because it's better performance for your application and watching the updates on the files so let's try to install this because before we installed already node as i showed you manually without brew but now i am going to install this with a brew so after installation of homebrew it's exactly the same you just copy the command to the terminal and you will have homebrew after that you will be able to use the command brew so you can install any program which is available in that package so let's try for example to install watchman so i will go to the terminal and then i will paste brew install watchman and then we will wait for installation and we will see that it's installing all the program for me including the paths including all the information which are needed for development to use this tool okay as you see the installation have been done so i was like skipping the video because it takes some time so now it's installed let's go to the documentation again and see what we have here so as well we need for that a java development kit this is required for android systems so we need also to install that so the same thing we are going to copy this command which is called brew install and then we can see open jdk which is required for that and if you they said if you have already installed jdk on your system just make sure that you have jdk 8 or newer so you have to be sure that you have version 8 but let's install that with also homebrew so i will paste this command again and wait for the installation as we saw previously with the watchman sometimes when you need like some privileges for administrator it's asking you for password so you just need to put the password for your like mac system and then it will be installed easily for your machine so as you see here that it's successfully installed so we go again to the next step so we have here after that installation of android studio android studio we are not going to use it as editor but we need the sdk from it we need sdk sdk platform and also virtual device because we need also to see our changes of the application like as any application you run it on android we need to see our changes on the on on some phone some virtual phone so it's better to install android sdk and also the sdk is required as a modules part of react native because as we said the ad native is using the modules which are available in android projects and ios as we explained previously so first of all we need to install and download android studio so to install android studio it's also the same process we need to download android studio it's available as well for all operating systems like for example windows and also linux and also chrome os for all operating systems so it's better to choose the one which is suitable for your system and then you download it and the installation process is very easy you just go next next next and then you it will be installed on your machine and we are going to run the android studio and we have to specify some options as i will show you so as you see here i have the download button it takes about 900 megabyte and after that you install it and then run the application i have it installed already on my operating system and when you run android studio you will see this window like you will need create new project a new floater project or you want as well to some other types of projects what we need to do here to go to configure and here we are going to work as the instructions of setting up the development using react native so let's go there as you see here it says like install the android sdk so after we have to go to the uh you see this window we need to click on configure and then sdk manager and sdk manager is always updated here you have always to follow the versions which are available here so it's better to install them exactly how they are described here always so when you see a different version in the documentation then this video you have to follow that documentation as well so i go to the configure i go to sdk manager and then we have to check that we have android 10 queue so we need to install this one as you see here so first we need to have android 10 q of course you can as well check out the default installed one because when you install android studio it comes by default with this one so it's better to follow the documentation and say android 10 queue okay uh what else it says that uh you need make sure the following items are checked so we need to expand this android 10 and we check android sdk platform so how we can do that you go again to this window and then you say show package detail so when we click on show package detail we will see more details about this so it says to us make sure that android sdk platform 29 is available or checked and also as you see here we have something else which is intel x86 atom 64 system image so we need also to check that one you see it's by default is not checked so we need to check that as well so it's important to check show package detail you will be able to see all the detail of the package as well there is something else we need to be sure of that a google api intel x x86 atom system we have also to check that as well so when we go here so we have this one so it's very important to follow that recommendation next it says that select the sdk tools and check the box show package detail as well and expand android sdk build tools so let's do that so we go here and then we exp go to sdk tools and then we go here and again we say check packages like as we see it show detail of the package and then we will see like some version let's say which version it says that we need to select make sure that you have 2902 so we have to go here and we check 2902 you have to be sure that you install this package as well of course you have freedom to keep all of this or you can remove them based on the space which is available on your machine after that we have selected everything as you see here we click on apply so we selected everything as documentation we click on apply and it's going to install the things which we have uh selected installed our estimation is two gigabytes so you have to make sure that you have really the space because they are big and you have to be sure that everything is installed properly because it will take about 8 gigabytes so we click ok and it's going uh to download all the things i am going to fast this video uh for you to not take so much time okay the installation now successful and as you see here we have android 10 as requirement is installed and also the sdk tools as we saw previously if we go to show packages we make sure that everything got installed as described in the documentation okay we click ok we go away from android studio and then we go to the next step where it's written configure android home environment variable and in mac you do it differently from windows so we need to make sure that android commands are working fine on my machine so depends on the type of your terminal i am now talking about mac okay so if you want to see windows you can skip a little bit the video i will show you on windows so first for mac you need to go add the following lines to your this home bash profile and here we need to edit this file and add those lines so first of all we need to make sure that we have really installed android sdk on this path so how we can do that first you go to the finder in mac and then you click go and then you will see here library so when you click on library it will open for you the library on finder so you can find it here and you will go and see that there is android folder and inside this android folder there is sdk so here what we need to have so we make sure that we have really this path home library android sdk okay so that's all nice so we have now two types of terminals in mac so as you see here i am using the one which is prefixed with zsh so this one is my terminal which i am using for my applications so you can do the both steps which i am going to do now so to make sure that all your terminals works fine so first i will edit home dot bash profile so how we can do that i will open the terminal again and as you see i tried previously i have a command which is called sudo nano and then edit some file so i am going to put this command again so why i have sudo because i have sudo because i need permissions for that you cannot edit this file without privilege nano is editor which is internally installed on mac system or terminals so you can edit files through it so you can say sudo nano as we say here and it will open the file for you and then you need to export and copy and paste what is written in the documentation so let's copy all of this as we see here and then go back to the terminal again and paste them here okay nice we have all of them after that you need to quit you need to exit so here there are some shortcuts you need to say that we need control x so you need to press ctrl x in mac and it will offer you that save modify modified buffer so you can say yes i want to save them so after that file name to write so it will ask you overwrite this so you just press enter and it will be saved to be sure that you can you have all the edits done you just click it again you will see that or open the comment again you will see that all of them already uh done so i go again i control x i go back to the command line or command terminal i go to the next command where i am using zsh editor so we can then edit this file so you go to the terminal and exactly the same sudo nano and the same and then you paste this and it will open for you again some editor you can export also the paths which are required here so again we need to copy all of those commands and go to the terminal and then we paste those we can say here you can paste them under it and then you press save or you can say control x to save it exactly how we did previously okay overwrite the data and everything is saved fine so to make sure that our command line is accepting that you can just need to run this command which is called echo android home so we go again to the terminal and then we paste this command and you will see that we got empty this is because you need to restart the terminal to see the changes which are done uh on your uh on your like terminal otherwise if still doesn't work you need to check again this zit profile as we saw previously and make sure if you have export path uh at the end so previously have you see here i made it it was like here so this export path was here so i just move it down to be at the end to the last so in that case we can export all the passes which are defined here so just make sure this is like troubleshooting you can do so you can make sure that your terminal is working so i'm going to close this terminal and open it again to see if i am really able to see android home path so we close it open the terminal again i will make zoom so i will paste the command echo android home nice as you see i have it now the path like i am copying or echoing uh this uh or printing the command or the path which is uh like saved in my comment file which is for zsh so here as you see that everything is working fine so we are sure that our paths are set right here so it's written here that you can make sure that everything is working fine so after that there is react native command line interface we will see this step after we finish as well for ios so i will keep this step for now for windows if i go to the windows setting the paths is very easy go to environment variables which are set in windows and it's all explained here so you just go to the control panel and then user accounts and then user accounts again change my environment variable and you need to add the path which is installed on your machine for android sdk normally it comes from users and then your username comes here and then app data local android sdk that's it and you need then to make sure that all that path is are set fine so you need to open powershell or command line copy and paste git child item and and then verify that uh ad or android home is added it's exactly like how we make sure that we have android home variable is set so this is the way how we set up the android environment for windows and mac next we are going to explain about ios and after that unfortunately as i told you that ios is only available on mac so i am going to explain it only on mac we will not have explanation for windows so mac os and also the ios system which will be in the next lecture and after that we will start our react native or firstly native application okay in this lecture we are going to talk about installation for environment development for ios system so we have worked with mac os android and i am going to move to ios system installing for ios system is exactly the same steps how we did previously with watchman and the other tools but we need as well to install some application which is called xcode xcode is available on mac app store and when you install it just make sure that you have the version 10 and newer so this is the most important information that you have to know after installation of the uh xcode there is something which is called uh like you have to check the command line tools so after the installation i have installed uh xcode previously on my app on my operating system i go to the xcode and then i click on preferences so when you go to preferences you will see here like some two some tabs one of them is locations just make sure that command line tool is selected that xcode based on the version which you installed so after that we need to install as well simulator simulator is existing in components so when you go to components you need to install some simulator i am installing now the latest simulator of ios version for mobile phones of ios so i am installing 14.4 of course when you see higher version is better to install it so your application can work with the latest version of ios systems so normally these sizes are available here you need as well to have space on your pc to obey the size of the simulator after that we go to the next step after installation the cocoa pods cocoa pods is like ruby installation and it's available for mac os it's providing us with a lot of like um how to say libraries uh for ios or packages for ios you have optionally you can install it so i'm going as well to install it through this command i will open my terminal and then i will paste this command here and then it will ask me for password i will paste my password as well and it will install for me something called cocoapods if you want to know more about it there is like a link here you can check it so you go to cocoa pods there are a lot of packages and libraries for objective c projects so you can have them for like your applications we will talk about that later uh when we are going to use uh these cocoa pods in our course but currently we are going to use react native components but it's better to use this so for more information you can take a look at this link you can see getting started with cocoa pods you can as well install it as instructions which we have here but currently we don't need it we will need it later the editor which i am going to use in this course will be visual studio code as i told you we installed xcode and we installed also android studio but we are not going to use them as editors we are going to use a visual studio code which is very fast and dynamic and it's very uh good for development of react native so as you see here we have a code.visualstudio.com you go here and then you click on download mac universal and you will have the version for mac and as well if you click on this arrow you will see other version for windows and linux so installation of visual studio code will end up with a installation of visual studio code on your machine and you will have something like this so in the next lecture we will see how we are going to add some extensions to rapid up our coding skills on windows it will be a normal installation file and also on mac you can install it and it will be downloaded as a zip file and when you open this zip file it will be extracted and you will have here visual studio code dot app so you can move this application to your applications uh in mac os so it will be located here i have installed it already so i don't need to do that so as you see here we have visual studio code app and when you open it you will see the visual studio editor installed on your machine so as you see here i have here my visual studio code is installed on my machine for windows it will be exactly the same but it will be executable file so you can install it like any application on windows visual studio code comes with extra extensions that you can install them for some specific behavior of your visual studio code so to visit the libraries or the like for example the market for those extensions you just need to click on extensions on visual studio code as you see here from this icon i will click on it and then you will see a lot of suggested extensions so let's search first for our first extension which it will be react native tools and this extension is very helpful for our react native application as we will see later so for example it will help us to create like some snippets so as you see it's very helpful and it's rapiding up our coding and it has a lot of features like autocomplete of the things so we will see the benefit of this extension later but now let's install it so i click on installation and it will be installed in my extensions another extension which we need to install as well to speed up our performance is called react native react slash redox snippets for es6 es7 so this we are going to use in this course so what is this uh like extension this one is like making for us some shortcuts which we can write and it will generate for us the full code for example as you see here i have some imports for example i run emr and then it will run it will code for me import react from react so it's like a shortcuts which we can write and it will import for us based on the things for example i have imr pc it will import for me a pure component from react so it's some shortcuts which we need to use as we will see later in the course and it will speed up productivity the next extension which we need to install is called prettier prettier is uh like a very nice extension which is used for code formatting so when you save a file it will automatically format your code based on some configuration which will come with react native installation as we will see later so first you just need to install this extension and make sure that you have the option which is called safe or format on save so how you can find this option you just need to go to the settings of vs code so you just go to code and then you will get select preferences and then settings so when you click on settings you can find something called format on save so that's the command so you just need to be sure that format on save this option is activated otherwise the format on save will not work for you so that's it for now we will see how we will use prettier as i told you it will be installed automatically the configuration with the react native project uh the last thing or the last extension which we need is something like optional if you want you can install it or not it's called material and then icon theme so this is like giving you like when you have a file structure it will put the icons of the files based on the type of the file so it's better also to install it to make like very eye comfortable for the file list which you have here after installation it will give you a select file icon theme you just need to use this one so i will use uh material icon theme or seti let's use uh this one and then you will see like your file list will be with a specific icons of the files in the editor so those icons you see them for example like this so every file finish with css it will have icon like this every file finish for example with mpm will have like this javascript and etc so a lot of icons are available which will make for you easy to take a look to your file structure and pick up the file which you want so those extensions which we need for now we are going to build our first project or react native project and we will see all the effectiveness of all of those extensions later okay now we are ready for starting a new application with react native in the documentation there is a tool which is called mpx which providing ability to create applications like a boilerplates and this mpx is part of mpm it comes always with the newest version of node so make sure that you have the latest version of node install so when we execute this command we are going to create a new project in react native so to make sure that everything is working fine let's execute this command first of all i will go to my terminal so if you remember we have this terminal or the command line which can be available on windows so make sure that you are on desktop or any folder where you prefer for example on your hard disk so here i used the desktop so i am going to use this folder to create my project so i am going to copy this command as you see like mpx react native init and then you specify the name of the project which you are going to work with so let's try that so i will go first to the terminal and then i will paste this command but i will give for example name we can say course project so just like for now to make sure that everything is working fine for us it's better to have always like the capitalized letters of the like the name of the project so we can have course project like this so now i'm going to press enter and then it will create for me on the desktop a folder where it will be called course project so if i go to my desktop as you see here it will create for me a new project but this process will take a little bit of time because it's going to download some resources to create the project so as you see here it's on progress i am going to skip this video because it takes about five minutes so i am going to skip this video and i will show you when it's ready so as you see here the installation is done so it's downloading some templates copying template processing the template and then some cocoa powder step dependencies as we saw previously and here are some instructions for running the project on android and also instruction to run it on ios so now as you see here is installed if i go now to my desktop i will see the project is already here so as you see that i here i have here the course project so let's go to visual studio code and open the project there so as you see we have here the folder and we can click on this folder explorer or file explorer and then you will see icon or button which is called open folder and here we are going to open the folder of our project where we have located on desktop so i will go here course project and i will open this folder as you see here so if you take a look we will have all the file here so we are ready for programming let's have a quick look to the file structure of the project let's start from up to down so first we will have a test which will be like a test file for testing the application like end-to-end test or unit test which will be created here as well we are going to have a vs code setting so always when you want to have a settings specific settings with your project you can add those settings of visual studio code if your all team is using visual studio code for example the font size of the code as you see here so you can override the settings which are default in your editor by the settings which are specified inside this file or this folder and we will see that later and now we have android project this will be a pure android project so it will be written in java you will see here gradle we are not going to handle or work with this project because as i told you that react native is interacting with android and ios project to generate for us and native apps so we are not going to work so much with these two folders only when we want to add or delete some specific modules as i will show you later node module is the node.js libraries so where we are going to install the libraries in javascript which we need for running our project for example if you open this folder you will see that you have react native library you have typescript you have a lot of libraries which are needed for to run this project buck config is something like for maven is a server which can be run for android so we also going to work with it if we need it editor config is something like if you remember i talked about prettier you can also set some configuration for your editor uh in the in the like here so you can have a config for this editor but it will be overrided by the prettier i rc as i will talk about it later eslint is also something important for the project eslint is a tool which comes with an extension if you want you can install it which is called eslint and when you install eslint it will show you live the code errors which you have in your project for example if i go here to app.js i will have some error which is showing me that okay there is this can be used only in typescript but cannot be used in javascript file so i mean the import so in that case you can as well skip this rule you can edit the rule in eslint rc file so eslint rc file is like a file where contain the rules for your code so in that case okay the project will run but you will have some typings error for example if i put here double quotation it's the project will not like it or es needn't will not like it it will say it's better to have a single quotation as it's set in the rules of the project so to look more about eslint you can just go to eslint and you can check the rules there are a lot of rules that you can set for your project so for example i will take one of them for example no console console log is heavy for the browser when you forget them in your project the project will run with console log and then it will make for you some issues in performance so it's better always to remove the console log from the project here there is a law or rule for eslint whenever there is a console log it will show under it error so you have to show that okay please uh remove the the console log so when you want to work on one of those rules for example as we see here that we took this one i just go here and check at the end something called rules and then you can specify the rule which is called no console off or you can set it to one or zero so in react we can use that as well this rules so if you go to the project and go eslint rc you just need to add a field which is called rules and these rules will be an object and inside this object you put your rule for example i am going to put the no console as you see here for example if i go and we copy this one so we will say or we will have no console so here we put this one but as we said this will like only a single quotation so we put it in single quotation and we say here that on like turn it on for me or this error console turn it on when you save as you see here it's already formatted as i told you previously because we put on save format so prettier already formatted it for me so when i go to app for example i want to add here a console console.log so we can add like some console log here like as you see so it will give me the error unexpected console statement so it's better to turn it on always to remember that i have console log error in my application so if you want to disable it just go again to the rule and just put here off as it's written in the description of the project and as you see now the error is not showing or the warning is not showing anymore so that's it so you can specify the rule which you want you have to search for rules and then you can do what you want with those rules and you can make your project stable and unified codewise from all the team which he is which are sharing the code base so let's keep this rule for example and let's remove the console.log and let's continue with the file structure flow config you don't need it for now it's just about how the flow of exporting and building the project will behave uh git attributes also we don't need it for now git ignore is very important file where you are going for example when you link the project to some git repository then you don't need to push some files for example node modules is very huge so is this folder about 300 megabyte when you start a new react native project so you don't need to push this code or this folder to git repository you just need to push the libraries which you are using inside your project so i am excluding node modules from the git to be pushed with my commits and pushes to the code base on github prettier as i told you there are prettier configuration already which are configuring this prettier and as you see here that we have prettier is defined here like down and it will show you always the errors and the rules which are following based on this file app.json is the file which is entry point for our project like for example we can say the home page of the application as we will see later when we will run the application we will see how all of this rendered in our phone and we will see how we can edit it and adjust it to make our application we will talk about this file later app.json is just like some properties for the application like the name and display name so you can add the properties which you want bubble config is something for es or es6 es5 is a builder which converting the javascript es6 es5 to vanilla javascript and you can uh the browser or any browser can understand it index.js it's also the main entry point of your application so here the application is specified i say like index.js when i start the project it will start from here index.js and i specify the name of the file which is called app name and here it will start for me the app name from the app which i have that is imported from here so the app.js actually is called inside index.js which is the root root main point of your project and now we have metroconfig which is transferring the the project from javascript base to a native code base as we saw later and it's also used as a compiler and it's showing you the errors when you are doing some mistakes in the code uh when we are doing uh like development packet json is used for libraries which we need so we can uh install libraries remove libraries also like only javascript libraries so we can add or remove them based on packet json and as we will see later how we are going to call multiple libraries which we need to build our project so this is a quick overview over the file structure of the react native project we will see later more and more detail about all of those files when we are going to build our project okay in this lecture we are going to see how we can run the project on ios simulator so as you see here we have the instructions about ios that we need to navigate to our project and then we have to run the command mpx react native run ios let's try that but i would try it from our vs code or visual studio code we are not going to use this terminal anymore because you know that vhs code contain already the command line which is used for using or inserting commands which we need for our project okay so let's take this recommendation and copy this command first and then we go to visual studio code so when we close this command line we go to visual studio code so to open the terminal in visual studio code you have to just press ctrl j on windows or command j on mac so let's try that and you will see that you will get the terminal and the bash file or you can have as well the zsh in mac so now we are going to paste the command which we had previously but remember you have installed already the xcode and also the simulator so we will see automatically that we have simulator which is will be on iphone so let's try that it would take some time to run the project and include the packages and as you see here it's launching the iphone 12 is the simulator which i have installed previously and now it's getting loading so as you see here the simulator got launched and now we are building the application so what we have here that the simulator or the compiler is trying to build the project using the ios project which we have created previously using our react native command and as you see this process can take some time so you need to be patient on it it's depend on your memory of your pc and also the processor maybe you will notice the fan of the pc will get higher and the processor will get overloaded but no problem it will get calm when when everything gets launched so now after the build got success as you see here we opened for us a new terminal and in this terminal is showing us that bundle project index.js got executed and as i told you previously that index gs contain the entry point for our application and as you see here we have all the compiler which is called metro and as well here we have the simulator and the application which is default comes by react native boilerplate so now when you are going to make a change in the code for example i am going to change this step 1 this sentence to something else so let's go there to the code and find in app.js as i told you it will be the entry point for our project so here our app.js so as you see here the the terminal which we opened previously it's done and made its own job so we don't need it anymore here so when i go and search for step one it doesn't matter the code how you see it here i'm going to explain it step by step but let's change this step one sentence here so i will change it for example to react native course and when i save we will see the changes are immediately reflected to the phone and this app will be a really native app it's bridged by metro to ios project to execute javascript in ios and convert it to a native application as you see here so every time i change something it will be reflected here so it will be very helpful for us for coding you don't have to reload all the application again because this is called hot reloading so it's directly reflecting the changes which we are going to do so when we are building the application we don't need to reload on every change we are doing so just save it and it will get directly immediately executed here so this is the way how we are running the application so when you there is like for example some mistake as you see here i'm going to make mistake it will show you the error directly here so on the phone itself and also on metro the terminal which automatically opened it will show you the exact line where the error happened so you don't have to worry about the errors so you can see them directly when you press save and you have a mistake already so i put it back and the project runs again so after you are making sure that you installed xcode and as well you have downloaded a simulator as i showed you previously now we are able to run the project very easily and smoothly so in this way you will be able to run the application on ios phone okay now in this lecture we are going to run our project on android device this device will be emulator like a virtual device how we did exactly with ios device so now i am going to go to the documentation of android or running on android so the same documentation which we were following i want to say target android so now if we go down we will see the command where we are going to run the project so we have created a project previously as you saw and now we are going to run the project on a device but here there are some instructions we have to do first so first of all we need to create a physical device or a virtual device in this lecture i am going to show you how to create a virtual device so we have to follow the instructions which are written here and also maybe they will get updated in the future after recording this course but now you can follow this instruction which exists here it will be the same always for the future so first let's create a new avd it's called virtual device android virtual device so first we go to android studio as you see here and we click on configure and then avd manager we click on it and we will have another window and in this window as you see you can add your devices as you want so there is default device which is used in already in android studio but we are going to use a default one or one which is recommended by react native documentation so i will click on create virtual device and of course it will be a phone of course if you are developing for tablet or for example automotive or tv it will be different but still the operating system will be the same so now we are going to select one of those devices so i recommend for example to use the pixel 3 or pixel 2 no problem so you can have a proper sizing of your application so now we click on next and then as you see in the documentation they said that it's better to use q system where we have 29 image so if we go to the android studio we have to search for x86 images we have to go for images and then we will select the one which is called q this one we have downloaded previously as you remember when we were installing android studio and after that you click next and you give a name for this device and you can choose if it's landscape or portrait but it doesn't matter you can change it during running time of the device and then you click finish after that you will have the device is here so now we need to run the device which we have installed so after that we can go here and we click on play button so if you see this play button then it will it's going to run the abd it will open a phone for you virtual phone exactly how we have done in ios the difference here that we have to run the phone manually here and then we have to wait until the phone is taking off or it's launching then we have to do something to run our application on that device so as you see here we have now the device is running everything is fine we have like a real phone as you see here it has camera it has applications and it's exactly like a real phone so now we need to run the application which we have created previously with react native on this phone what we have to do first first of all they are recommending to find the device by avd or command line of android so how we can do that so for that we need to make sure that really the device is attached to android i mean that react native can see the device that we can run the application on it so how we can do that we can open a new terminal window in visual studio code and run the command adb devices so adb is like the command line which we have created at the at the beginning when we were installing android studio so here when we run the command adb it will have some options one of them is devices so when we click enter we will see that we have emulator 5554 device if you don't see anything here you have to make sure that you are running the emulator otherwise you will not be able to run your application with react nate after that we need to run the application using uh also how we did previously with when we were running or we installed the application so if you remember we had this command which is called mpx react native run android you can skip this step because this command is going to run this command automatically after that which is like running metro as we talked previously so now let's run the command which we have run android when you want to run ios you just replace it with run ios so let's run now the application again it's going to build it and it will take some time until it run the application on this device you don't have to do anything you just need to wait and when it's finished it will open a new terminal for metro and also you will see the application is created here so i am going to put two simulators one is the iphone which we made previously and here the one with android and i am going to skip this video to make fast for loading and running the application so as you see here the building is finished and it's building the application on the phone slowly and it's going to run the application install it on the phone and we will see exactly how we did with ios so as you see here metro is still running and bridging to the both devices so now it's converting the javascript code to android code and ios and it shows us this implementation here so let's change something in the code i am going just to make this smaller here and then we can close this and i am going to put for example react native course and i will click save and we will see that the changes applied on both phones so without any issue and without any problem and as you see here we have all the updates immediately which is coming like hot reloading so to see our application running and we can do our changes immediately so this is the way how to run the android device if you have any issues you can go always to troubleshoot which is located here in troubleshooting page so here they were collecting some like common issues and they are fixing them through this troubleshooting which you need always if you have some issues so that's it you just need if you have problem just go to troubleshooting or ask me in q and a or you can also ask on their github repository for issues and you can open a new issue and they will reply to you about how to fix it but i hope if you follow my steps which i explained to you you will not have any issues when running your application some functionality which we are using on our android device or emulator will not be available like how we have a read device so also some people are suffering that android studio is very heavy for their computer and they have limited amount of ram so you know that android studio need a lot of ram and a lot of resources so for that you can also develop on your own mobile phone so either it can be iphone or android i'm going to show you how i am going to connect my android device and i am going to develop on it but first step we have to do that to make sure that the emulator is turned off so we must turn off the emulator which is running on android studio so you can click on this button which is called power and then it will turn off for you the device totally so after turning off the device you need as well to close it from here so you need to close the device totally from your machine and also from your emulator you have to be sure that on android studio you have not anything running in your virtual devices after that we are going to move and install some program or application which is called visor and this visor you can go to the website visor.io and you can download it for all your operating systems windows mac linux and also you can install it on the browser using some extension okay how we can use this visor i already downloaded this application and as you see here i am running it on my device so we have here two options android devices and ios devices i'm going to show how we can develop on android device so i am going to show you myself and then i am showing you how i am connecting my device and enabling the debugging mode usb debugging mode as it's mentioned here hello and welcome i am fadi and i am going to show you how to connect your android device to your computer first of all you need to use the original cable usb cable which is coming with the phone originally so otherwise you will have some troubles with connecting to your pc first i am going to connect it using this usb and then you will have on the phone multiple options when you slide down or when you have the drop down the drop down is saying like charging via usb as you see here but now what i'm going i'm going to click on this charging via usb you will have multiple options so this is different from mobile to mobile so some devices they are having only transfer photos uh transfer files charge only and reverse charge and input midi so some devices works directly with the computer when you say transfer files but some of them you need to have something called input midi as my device saying here i have huawei phone and it's i have this option here so i'm going to select this option at the end so as you see here and then the behavior of the device will be changed so till now as you see that visor didn't detect anything because we need to enable the debugging mode or developer mode how we can do that first of all you need to go to settings on your phone so i will go to settings and in the settings at the end you will see something about the phone you click on it and then you will have something called build number and as you see here in the build number i am going to click multiple times on it like i will put my finger and do it like in a way that i will have option like it will tell me down that you are now behaving as developer okay now everything is fine my device got as a developer but we need to enable the usb android debugging so as you see here we can as well search in the settings so when i go to my setting on my device as you see here we have a search on the top so we can search in the setting and in this search you can type android or usb debugging and it will be found directly at the second option of your options in the in the settings we click on it and then it will take you to something called developer options and in this developer option you need to enable the debugging mode so you just scroll down and you will see usb debugging as you see here so in usb debugging you just need to allow it so i'm going to allow that and click ok and you will have like some some notifications saying that visor is trying to connect to your device then you have to allow it so you have to press in this case okay so i am press ok and now everything is gone and it's fine and as you see on visor that my device got detected so when we go to my device on the laptop or computer when i click on play i will see that my device is running on the emulator here so i will have something exactly like the emulator which we had previously with android studio and it will show a mirroring of my device here so now as you see i have all the information or showing my phone totally live with this application so with that you can then deploy the application to your device to your mobile and then it will run on your mobile device and then i think it will be installed on your application and it will be saved here so you don't have to bother yourself to install the application again or deploy it and then put it on your device it will be already deployed on the device so if you didn't see those options which i talked about before it's here so when i click as you see i have transfer photos transfer files some mobiles have input midi so something which is like a music equipment it doesn't work in other way but some devices works with transfer files so in that way you need just to switch until your advisor application detect this change and in that case you can select what you want so let's continue and deploy our application to the mobile phone see you then okay so now as you see here my phone is connected already to this visor and we are going to deploy the application to this device as i told you you must make sure that the android emulator which we installed with android studio it must be turned off so to make sure as well we need to do the same steps as we did previously so first we need first to run the adb devices as you remember here so when i run adb devices my device will be detected automatically this is the code of my device and then it will be here so please make sure that you have only one device in the list otherwise the react application will not work properly so let's run again the application using android i'm going to put the command again so as you see it's installing the application it's going to install the application to my phone uh to the physical phone which is connected to so it will take also a little bit of time of building but as you see here that it's getting faster than the emulator because here the application got installed and got deployed directly to the device and it's using the resources of the device we don't have to use resources of the pc to debug the code and then deploy it there so every time i do something with my application i'm going to change here again course and save and we will see the directly the change will be detected here and also the simulator of iphone is working and still working fine so as you see here you have a freedom you can use emulator or ios emulator or simulator and also you can use your device and as you see you can also go offline you can turn off the totally the development of the application and you will see the application is deployed to your device so i will show you quickly and as you see the application is here course project so when i click on this application i will see it directly opened and also when i disconnect the phone i will see still the application running without any problems it's like installed to my phone so this is a great feature because it's using the native android that's why i prefer to use react native cli than expo expo as well okay you can run the application but over some bridging which is called expo application you must have it installed on your phone and also on your pc but here the application is getting installed directly and you can use it on your device the easiest way to debug the application or mobile application is doing a logging logging i mean that i do a console log as i show you before that we have console.log and then we have a data so console.log it will log for me in the terminal but which terminal the terminal which is running under metro the metro bundler is going to show me all the console logs which i am doing and it's like our console so in this way if you console log something and save the application it's going to log the data there but let's make this code simpler you know that this is a little bit complicated so we need to make this simpler so we can go step by step if you go in the application itself you will see something called the basics it's like hello world application so let's click on this link and it will take us to something like introduction and we will have here some example which we will be full application for hello world so let's copy all of this code i'm going to explain it later so we go again to our application in app.js as i told you it's the entry point of our application we delete everything and then we put this code let's open again the simulator and then we press save so we are going to save our code as you see it's automatically formatted and as you see here i have here my application is debugged and loaded so if i change this i will say for example here hello world so just to be sure that everything is working fine okay nice we have here hello world if we go to the parts of the application you will see that it's very simple so first we have to import react from react library and also we need to import some components those components are used always in the application as you know react native is not an html or css no it's something like we can say components we are using a components and then we call those components and place some data inside them to display them in our application we will go in our course for the components which we will need to build our application so for that i am going to explain the components which we need for the course itself so for example we have here this view this view is something like you can say in html is a div and div which will contain for example something else components inside or for example texts or buttons or text boxes so here as you see that this view is implementing as a div inside my application also i can have view inside a view so we can use uh like div inside div exactly the same way text if you want to place a text you can use it as well like you can place any text it's like a span or we can say paragraph and then you can place the text inside the tag here so now after that we can say that our component app is called your app we can say that this one your app is loaded here so when i create my own component and place it here then the component will be called inside my entry point of my application so let's rename all of this we can say this is app and this is up it shows that this is a function and this function return for me the react native template and this function will be exported and called in the index.js as you see here and it will be loaded and register the main component as app and app registry will do for me the running of the application and this app registry if we go to it it's communicating with android and also with ios libraries to run the application and change it to a native app we are not going to go in detail of this we are going to do a practical things i don't like to do many theory i like also to do always something practical that's why my whole courses are impractical because actually i like to learn from practical thing i need to see something in front of me so let's do a console log as i told you we are going to do a console log so that logging can be like we can say the entry point of my application will be inside this function so this function will return for me this template but before that you can write any javascript code as i told you so javascript code we can say console.log and we can say hello world so we can console log our things and where i will see this will appear it will appear in my terminal which is called metro as i showed you that it will run immediately after bundling the application so let's zoom that i want to make it bigger and as you see here we have hello world nice so now if i go again to my application and change this like we can say here hello world so we will see that the login is still log here and there is information which is called log okay great so let's define for example constant find it up constant and i say x and this x will have for example value my course and then i will put this and now i am going to console this x so we can remove this one save everything auto formatting is working fine and as i go to the terminal again i will see my course nice so this is javascript actually we are writing here javascript which we are going to use inside our components for this part which is called styling it's like styling but not css it's react native styling and we will see later how we are going to style our application i will talk about all the things which we need to style for our components so in that way you can console log and debug your application using the console of your application okay in this lecture i am going to show you how to debug our application of course debugging is a very great feature so we can use it to track our problems as i told you ok we can use console log but it's better as well to use the debugging there are two ways for debugging in react native first of them is using google chrome yes using the browser of course you can as well use a browser to debug your application how we can do that first you need to click on your simulator and then there is a shortcut you have to make it which is ctrl d on windows or command d on mac so when you click ctrl d you will have a menu like this one so you will have multiple options one of them debug with chrome so when you click on debug with chrome it will open for you a debugger so a debugging page so as you see here we can see that we have some debugging page and this page contained some information so you can start debugging okay so i'm going to create the debugger how i can see like how i can place a breakpoints in my chrome so first we have to open the dev tools so how to open the dev tools you just press f12 by pressing f12 as you see i have here the inspector the dev tools of chrome okay now i need to place uh for example a breakpoint but where how i can get to the file which is for example for me the app.js file so first if you remember we have a console log here so i'm sure if you open this one and open the console as well you will see the message which we have printed it will be located in the console here so i put it like this so when i press reload i will see that my application got reloaded so now we can see this message so when i click on this app dot js 6 it will show me in the code where i have placed this command where i have placed this console log and it will open for me the code exactly how i have it in visual studio code so in that way you can create a breakpoint you know in chrome you can create a breakpoint by clicking on the line number so when i click here i created a breakpoint okay let's reload now the app and as we see that we have stopped on the breakpoint automatically so now i can see and check the value of x for example by just putting the mouse over it and i can see what's going on here so when i want to go one more step i click on this arrow so we can go one more step and then i will see that x has value my course so in that way we are doing debugging via chrome and of course after you finish debugging you press play and the application continue loading so you cannot reach the app.js file exactly from the sources here as you know always but you need to place a console log or you can enable this one enabling the and pause on code exceptions so when there is exception it will show you in your application code where the exception is placed another way to debug our application is using visual studio code debugger visual studio also provide with a debugger tool which we can use as well how we did with chrome but first of all and very important information that you have to do before setting up the debugger in visual studio code you have to turn off metro the metro how it's opened in our terminal automatically when we run ios react native app so in that case we need to close metro the same thing can happen with android so let's close that so i will just stop it here like by pressing ctrl c or command c and then i'm going to close it totally and as you see here that we don't have any debugging anymore and our application cannot be loaded and we have now normal phone so in that case we are going now to set up a debugger using visual studio code so how we can do that first you need to go to this button we can say run and debug and then you will find here something like create a john json file and learn json file is the file where we are going to put the configuration for our debugger so when you click on this link then you will get some options one of them must be react native but as you see here i don't have this option because i must install the react native tool extension which i have told you before this is react native tools so in a case that it doesn't work sometimes it's ask you for reload so you can just reload the application again or clicking on reload or for example you can just disable and enable it again and you will have that option so for example i have here again just to be sure that it's working okay it's fine now i will click on debugging tool and i will create a create long json file now i have react native option so if you don't have this option just restart the extension and you will have it again okay you click on react native then you will get another options one of them is attached to packager there are multiple debugging way but for example attaching to budget packager is the easiest one so we can uncheck this one and add attach to packager now i am clicking ok and it will generate for me a file json file where it has some configuration called attach to packager and this attached to project packager has some commands where it will work with my debugger okay now we need to run our application we are not going to run our application in a way how we did before like i will not go to command line and i will say mpx react native run ios no we are going to let the attach to packager to run the application for me so if i go here to the debug of course like if you are on the file list you go again to the debugger you will have button here and this button is called run and debug and you will have multiple options one of them is attach to packager it's based on the configuration which we have here in the long json and if you are curious to know where is this long json is created as you see it will be in dot vs code folder as i told you before that inside this folder we are putting some configuration which we share with the team like a settings like launch like for example some recommendation for extensions etc so now we can add and run our application so let's click on run and as you see it's going to run the application exactly how metro is doing if you remember that we have the same sign here and now the packager got started okay nice but now my application didn't start automatically so you need to do that and run it automatically or manually sorry so you just click on it and you have of course as i told you the application will be installed on your machine or on your device and you just run it and as you see like the attacher is already knows that there is some phone is running the application so now we can start debugging it okay let's try to place a breakpoint i'm going to put here a breakpoint on our constant which we create before for example this one and then save so as you see the debugging start to work so i am going now step by step and here i have the value of x exactly how we had with chrome okay sometimes the breakpoint will not work for you because we need to activate the debug with chrome so i don't know they are calling it activate debug with chrome but it should be like only activate debugging so how we can activate debugging if you remember we pressed shortcut which is ctrl d or command d on mac and sometimes you need to press multiple times ctrl d because it doesn't appear fast so you have to do it multiple times until it get appear so now after that you see here start debugging with chrome and then you click on it if you don't click on that for example i'm going to stop the debugging and then okay i need to continue my application okay let's continue you see there is no any response anymore because it's not attached to the debugging because i cannot now debug my application this pro breakpoint cannot see what's happening in the application so it's very important to activate debug with chrome okay it's written with chrome but it's with anything which is like attached to packager so we can just write here attached debugger or debug with chrome now i can place my breakpoint reload the application i stopped on the breakpoint so you must be sure that of two things first close the metro the terminal which we closed at the beginning second you must enable the debugging here in the dev tools of the application how we have it here another important information if you want to stop debugging because you know that debugging is making the application very slow so you need to stop the debugging you have to stop the debugging by doing many things first you need to click on this stop debugger and also stop debugging in the dev tools as you see here and as well you need to find a command by pressing f1 and in the f1 you need to search for react native stop packager it's very important to do that because otherwise the packager is still running in the background and when you run the packager again or you run a new application it will tell you the packager is already running and you will not know because you stopped everything and you stopped it from here and it's still running and you don't know from where to stop it so the best way to do that is by doing and pressing f1 and finding stop packager from react native command and then it will stop the packager totally and you will be able to run for example the application again as normal as we saw in the terminal or you can run it again with attach to packager by mentioning the error which i told you maybe you will get this issue as you see here that you would get the some another debugger is already connected to packager please close it before trying to be debug with vs code so this is very important so you need as well to stop the packager as i told you here stop the packager package are stopped and you need also to check the terminal everything is fine you don't have anything running and also the terminal which we have used here so you need to know that or close it totally so i have it here quit okay you have now on your phone disconnected from metro and then you run attach to packager and the application will run again so as you see i have it running again but i don't have any application so you just need to open the devtools again and for example maybe you can say reload the application just to get it connected again and as well debug with chrome to activate the debugging with breaking points so all of this troubleshooting you have to take care watch this video multiple times if you have problems then you will know how to build debug with vs code you

Channel: BlueBits Academy

Views: 8,980

Keywords: react, reactnative, 100DaysOfCode, beginners, code, coding, mobile

Id: WAs20_f6rtc

Length: 95min 35sec (5735 seconds)

Published: Tue Jun 01 2021