So, hi, everyone myself, Rashi Jen and I work as a uh React Js React native developer. I think future technologies. I hope everybody is safe and sound in this difficult pandemic situation.Uh Just one thing I just wanted to let you know guys that uh I will be not able to access the chat box. So if anybody has any questions or comments, please bear with me. I will be able to check the chat box after completing my session. Uh It will be great. Uh Right. OK, perfect, perfect. So hi, everyone. Uh let me start with my introduction first myself, Rashi Jn and I work as a software engineer at think future technologies, India. I majorly work with React Js and React native and I almost have 3.5 to 4 years of experience uh in the industry. Uh Currently, I am working as React native developer. So today's session will be uh around how we can, we can create a mobile application uh using React native itself. So let's get started. So first, uh let me tell you about the topics of discussion which we are going to have today. The first is what is React native, like we'll be talking about what is React, how it works. Uh You know, uh is it a library, is it a framework or what, how things work around uh React native? What is the architecture of React native?

So all these things are coming up in this uh area. After that, I'll be sharing prerequisites to run the React native application on your system. So if a new, you are a newbie to the system and you want to install React native, you want to create your own application in React native, how you can do that? And uh what are the prerequisite software tools which you need to install in your system to get started to create a first React native application. So first after that, I'll also walk you through about uh application which will be running an airway simulator and it will be a simple hello, oil application. I'll just show you and I'll just play some uh play with application to uh tell you about like how the React native application works. And last, we'll be talking about the pros and cons of the React native. Like what are the difficulties which you will face in React native? And what are the good things about React native which uh we'll be discussing in uh today's session? I hope you will enjoy my talk. So let's start with what is React native.

React native is an open source mobile application framework created by Facebook, as I mentioned, it is an open source mobile application framework which is created and used by Facebook itself. It offers fast mobile application development, more efficient code sharing across IOS Android and web.

So what happens is when you create the application in react native, it will work for I OS for Android, both with the same code base. So you do not have to write different code bases in the native languages. It will just you have to write a single source of code and it will get run uh in both Android and I OS. So that will be very good thing. And uh the human efforts are very less, the knowledge is very uh less required. It is built on top of React Js which is a library of web application. So React native is basically a framework which is built on top of React Js. And as we know that React Js is used to create web applications uh like uh if you want to create a single page using React Js and if you have the prior knowledge of React Js React will be very easy to learn because the basic concept how a component works, how how the app renders.

These are the things which are similar in mobile and uh React and Js it is built on a hierarchy of U I components to build the javascript code. So what happens is when you build uh a JA uh when you build a uh application. What happens is uh there are small, small things, suppose there is a login screen which you want to create in your react native application for that. What will you do? We will create a uh text input for uh user name, text input for password. There will be a submit button. So these three things, so these three things you can call them components. And by making a tree like structure of these components internally, it will create a complete application. So we'll work small, small components and we'll combine those components to create a complete screen. And by combining a lot of screens, we'll complete a react native application. This is how React native works. So let's talk about the prerequisites. Like what are the tools, what are the uh S uh Softwares which you need to have in your system? What is the system setup which you need so that you can run your uh react native application smoothly. So first, as we all know, react native will work on Android and for android, we re we re we will be requiring Android SDK, Java and simulator. So Android SDK is something which we require to run uh Android application.

As we all know that Android is worked on the basis of Java. So we should have uh java installed in our system. We, we must have Gresjv MS uh in our system installed and the simulator. So at the time of development what you can do, you can uh install some applications for simulator. Uh There will be a dummy mobile phone which will get installed in your system and you can use that uh simulator to simulate your application to test it. And uh whenever you get satisfied, you can uh release the app. But before that, you need to test it. And for the development purposes, you must have a dummy mobile phone in your system so that you can uh work, work with it under the development phase. And if you want all these things at one place, Android SDK Java simulator, then the easiest way to do all these things get installed in your system is Android Studio. So Android Studio comes with Android SDK, Java simulator platform tools and other dependencies which is required for Android development. Android Studio is a complete package for it. So you do not have to worry about all these things to install separately. You just need to install Android Studio, get it set up and just run the application, react native I I will walk you through how you can do it in Android studio and how you can do it from the terminal.

Next is node, node is nothing but uh uh javascript uh framework which is used to create, you know, it is it has a great dependency. So whatever NP MS you are going to install whatever javascript you are going to return, it will uh finally be converted into node. So that is why you have to have node in your system uh for installing node. What you can do is you just install uh via going to the node uh website. There is a link you just need to download. There will be AD MG or file which you can download in your Macbook. Next is X code. So X code is uh what X code is just an editor which we can use to create uh and develop the I OS part of the application. So uh X code you can install in your application from app store and in uh X code, what you will do X code will also come with a simulator X code will have uh the ability to release your application. If you want to run the application on various devices, you can do that. It will get built in uh X code as well. If you want to even uh deploy your application to test flight directly. X code will help you with that. Uh The signing of the application uh can be done on X code. So X code is very important. If uh it comes to I os development and uh in react native also, we should uh we need to have uh do some kind of I OS development.

Uh So X code is a kind of necessity. I must say otherwise you have to learn all the commands from the terminal and you have to run uh export commands also from there. Next one is React native cli tools. So React native cli cli stands for uh command line interface. What happens is there are some of the uh commands which you need to run and for that those commands to work. There is an N PM called React native cli. So N PM is nothing. It's a package which is already built for you. You can just download by N PM, install React native cli and after installing it uh in your system, you can do. What you can do is you will just run the commands of React native. Like there are commands like react native innate, react native run android, react native uh run I OS. So these commands will only work if you, if you have React native CL A will installed in your system. Uh It is not necessary to have uh but it is good to have if you do not have React native cli tool in your system, what you can do is you can use NPX for it. So NPX give you the provision that you do not need to install that particular package for which command you are using, you just write NPX React native and the command which you want to perform after that.

Uh There is a boiler plate which you can create from uh uh for react native. For that you have uh also need to install a N PM called Create React native app. So this N PM is uh easily available. This is also an open source uh N PM which you can download in your system. And for this uh N PM, what it gives you, it will give you a uh a boilerplate. Like there are various kind of modules which are already there. You just need to add your javascript code into it. And if there is any requirement of uh native code development, then you can also do that. I hope I am audible and visible. Yes. OK, great. So let's move forward. Next is Cocoa pods. So as I also mentioned that uh there is a requirement of node for the NP MS which we are going to use. Uh NP MS are nothing but the projects which are already there in the market and you want to install it and use it in your system, you can do it directly. Cocoa pods are like the small projects itself which work only for I OS. So uh Coco pods is also uh uh not necessary thing but good to have because Coco pods are like small projects. Uh If you want to integrate them into your app, suppose you want to add push notifications in your project.

What you will do, you will use the Google Firebase service for that. And for that uh Google Pay Firebase service, you will have an N PM and a Cocoa pod uh to access uh the uh react native firebase uh module, right? So that is why Cocoa pods is uh not necessary but good to have the, if you do not install the Cocoa pods, then it is OK. Uh You need to link the libraries and all. But uh Cocoa pods I think is uh very much better. You do not have to do anything. Uh After installing Cocoa pods and last but not the least. Uh we should have the basic knowledge of javascript and React. So uh as we all know that React native works uh with javascript, we have to write the code of javascript or jsx to be precise. And we also know that React is a library on which React native framework is created. So under the hood, react uh uh react things like the render, how the app is rendering, how the uh component is working, how the life cycle of a component is working. What is the hierarchy of the components and some of the basic stuffs which are similar like React Js. So if you have that knowledge well and good, but if you do not have it javascript and React can be learned simultaneously.

So these are the prerequisites which you need to have in your system to get started with the React native project. So let's go with the steps for android. Like if you want to work with Android and what are the steps, what are the first steps which you need to take to start your application in android. So first of all, uh as we all know, there is a terminal in every computer, we'll open that terminal and we go to the location wherever we want to create our project. Right after moving to the location where we want to create a project, what we'll do, we'll uh write a command react native in it with a project name. So uh here I have mentioned project name in capitals because this is the name wha whatever you like to give to your project, there are some uh constraints over the name like you cannot add capital letters in it and you cannot add space to it. So there are some constraint by choosing the project name, but this is the command which will re uh uh create a boiler fate for you react native in it and the project name. So uh as I was telling you previously that we need to have cli tools.

If we do not have React native cli installed in our system, then this command react native in it will not work. Rather what you can do is you can add NPX in front of this command NPX, react native in it. And the project name, what the command will do is it will create a, a folder for you whatever name suppose I I gave the name of my app. So what happens is it will give you a project uh folder with the name which you have provided for your application. Great. Now we have to navigate to that folder. So to navigate to that folder, we have to run another command in the terminal, which is CD with the name of the folder which we have given in the previous command. Like if you have given the name my underscore app, then you will write CD my underscore app. It will navigate to the uh your project folder after that, after navigating to your project folder. What you need to do, you need to run another command says react native run android. So this command will create will uh will uh start that emulator and uh it will start building up the uh application on your emulator, right?

If you do not want to do uh a right react native run Android and you have Android studio installed in your system rather than installing the things separately like the Android SDK java simulator separately. What you can do is you can uh open the android folder, there is a folder called android folder inside your project. You can open that Android folder in your Android studio and you can just run a play button from the Android studio. It will start building up the project in your simulator and the simulator will get open automatically. You do not have to do anything. You just need to open that Android folder into the Android studio. That is it. So these are the things which is required to start our application in android. Next is I OS same. The first two steps are, will be similar for android I OS both because uh uh in the same, uh we'll be running the same command reactive in it with a project name, it will create a folder for us. We'll navigate to that folder and apart from running the command, react native run android, now we will run the command react native run I OS. So this command will create a simulator for you.

And if you have X code installed in your system or what you can do is you can just simply open. There is a file uh with the project name dot XC workspace in your system in your project folder. What you can do, you can just simply open that file in the X code and press the play button. So this is the easiest way to create a I OS application. And uh you are good to go with your first React native application which will be running in your I OS simulator. So here if I give you a live demo about the project. So uh I was talking about the folder which created I have created application my underscore app. So this this is the folder structure which get created for you by the command React native in it. So what happens is this folder structure get created in itself. As you can see there is an Android folder, this android folder, you can open directly into the Android studio and run the play button. It will work successfully for you. If you want to run the I OS project in the application, what you can do is we will run the I OS app. You will navigate to this. There is another folder with the name of my underscore app.

And here you can see there is a XC workspace file, this file you can open in the uh X code and it will get and play the and hit the play button. It will get uh start building up your application in the I Os simulator. So these are the easy steps. Uh And if you want to do any kind of native coding, suppose you want to write any native module in your react native application. What you can do is you can just simply start working on these Android or I OS folders directly if you want to add some native kind of stuff in your uh application. And here also you can see there are various GS uh J dot Js dot Js files. So these are javascript files which is required to have. So first file which uh works uh with javascript is this file. So this, this is the prebuilt file. I have written an uh not a single line of code. This is already return file when you run the react native in it uh command, this file is automatically get created and the content of this file will look like this. If I reload this application, a PX react native start, I will just run this command and I will start when I will start uh the application again. There is an option to reload. So when you press on reload button, it will start building in itself.

I have already done the uh react native run I OS and react native run uh android uh because it will take a lot of time. So it will uh take a lot of time. That is why I just made a, a file for myself. I just made an application for myself. And this is the first look which you will get in your application. So this is the pre built page which you will get in the boilerplate. And let me show you this is the application. There is no icon till now, but we can add icon to it uh in future, right? If you want to add the icon, you have to do it for Android and I OS separately. It is just a easy step. And one more thing which I want to show you suppose if you want to add something like there are various tags which is over here, like the section tag, header, tag, safe area view, status, bar tag. These are the built in tags and you can create your own tags as well. So what I'm doing here is I'm commenting this out and I'm adding a text component over here and I'm just saving this file. What happens is this hello is automatically get created. We haven't done anything. This hello is automatically added and all the part which I have commented from here is get uh removed from the application. You do not have to reload, you do not have to build it again. You do not have to wait for a long time.

So this is very great thing about React native that uh it is very fast for development. You do not have to wait for the bill and you do not have to refresh it by pressing any kind of button or something. If in some cases, it may happen that it won't reload in itself. Then in that case, we have command R. So what we can do, we can just run command R and it will get restart again. So this is how the application works. Let me take you back to the uh presentation. So the pros let's talk about some of the pros of the application and working with React native to create mobile application first, it is fast to build because as we all know that only single source code is required to uh build the android and I OS application. Rather than creating and increasing the development time, we can uh use single source code. So we have to write only once and it will get compiled to android and it will get compiled to a native code for Android I OS as well. So it is very fast to will it decrease approx 30 to 40% of time apart from some of the native things which we need to implement, of course in react native as well.

But uh even that even doing that, it will decrease 30 40% of our time uh for the development. So which is very great uh in terms of, you know, if you want to decrease your uh time uh of uh completion of the project, and if you are on a deadline, you can definitely think of working with React native multiple platform with single code base. As I've already mentioned that if uh we are creating a React native application, we'll be only having a single code base. We have to maintain a single repository. We had, we, we do not need to go for a different repository. We do not need to go for, you know, creating different projects in our system. We just need to set up one single project and it will run for both Android and I OS. Next is fast, refreshing. As I told you, fast, refreshing is nothing but a feature which comes with React native. So you do not have to uh wait or do anything. If there is any javascript change which you are doing in your application, then it will get automatically reflected to the simulator without doing anything. You are making any change in javascript file. As I showed you that I create, I commented some part and I ordered some part.

But that part is uh reflected in the mobile simulator in itself by doing nothing. I have done nothing. But if you are doing some uh native code, like there is some N PM installs, you are adding some NP MS. Then in that case, definitely you have to start your application and you have to build your application again. But in case of javascript, no, you do not have to do anything. Next is small and easy learning path. So yes, this is true. Uh Because we do not have to learn and we do not have to worry about javascript co lens objective C swift. We just need to know one thing which is javascript and some basic concept of React and we are good to go. We are good to create a basic mobile application if you want to add some uh more feed, which is, which cannot be done in React native, which are uh very less. But there are cases where we need to have the, you know, android and uh uh I OS uh experience. But that is an eventual phase of the application. If you are going uh if you are starting small, then uh the learning path is very less sometimes. What happens is uh people try to start learning from uh start learning Android, the things that uh we to learn with react native, we need to learn Android, we need to learn objective c we need to learn Courtland. Uh But this is not the case.

Uh If you know javascript, then uh you can definitely start with react native. And eventually, when your react native horizon increases, you can go for android and you, you can go for I OS so that you can use those technologies to create your react native application, more uh efficient, more uh usable, more uh interactive and uh more complex. And last but not the least, the large community as we all know that React native is so much large. The React community is so much large that if you have any issue, if you have any uh problem, there is a large community on stack overflow on red, red, they have their own uh com uh communities, they have their own uh channels on which you can post your queries. So if, if you ha if you find anything difficult, you can just post it on stack overflow and it will get just answered in a uh you know, blink of an eye. So these are some of the pros uh of React native. If I talk about the cons difficulty to create very hard animations, yes.

Uh As we all know that React native is something which build on javascript, but javascript not run on uh Android and I OS, we have to create like we have to, you know, uh it will get converted into android and coin. So that is why there is a slight uh delay in animations which you can uh sometimes feel in react native. So if the animations are very hard, very complex, then uh the smoothness and the performance may hamper uh the application. But this is a very rare scenario in reactive but it is their lack of custom modules. So sometimes what happens is if your application demand is that you have to create complex modules and uh that module is not available in N PM in Cocoa pods. Then what you do, you will have to create the custom native modules. Like for Android, you have to make some development for I OS. You have to do some uh separate development in that case. Yes, you should have the knowledge of Android and I OS separately. It will be required. But these are the cases of very complex applications where uh the kind of work which you want to do is not available in the market itself and you cannot achieve it with javascript itself, you have to do some native coding for it. In that case, uh the custom modules you have to create. And yeah, these are the case good to have native development knowledge. That is why if you have uh Android and I OS development knowledge, it will be very great, it will be very smooth work for you.

But if you do not have the knowledge you can gain it, you can learn about Android and I OS paraly and you can just uh start writing up your modules. You will get to use uh Android and uh I OS itself. So these uh I won't call it as a con but I will call it as uh you know, downfall of react native. Like uh if you do not know about android and I OS, you definitely, you have to work upon it. These are some important links uh which if you want to, if you have any questions uh about the documentation about the environment, set up, how you can do it. There is a complete guide which is written on React native documentation in itself and it is very informative. If you have any kind of query, you can just reach out to that uh and uh reach out to the uh you know uh documentation and it is very well constructed. You can also follow me in linkedin. If you have any query anytime anywhere you can, it will get resolved and I will try to help you as much as I can. Um So, yeah, so if anybody has any kind of questions or any uh queries, I can take up them into the chat box. Uh Let's uh start collecting some of the queries. I know it is kind of a very heavy session and very technical one. I'm happy to help if anyone has any query. Yes, publishing an application for uh publishing an application in react native.

You have to have uh published in two different formats like for android, you have to CRE create a production bill and there are some separate uh uh uh commands which you need to have and it will create a separate A PK file for you. Then you have to go to the Play store and upload it, upload that A PK over there. And uh if you want to publish the I OS application, you have to do it separately. You can do it from Exco directly. Uh You can create a production bill from Exco after signing the application um and uh getting all the certificates and if you get uh there will be uh a file um IP A file uh which you can uh download from X code and put that on the app store manually. Yes, you can do it from Exco directly as well. So there is an option if you archive your application from Exco directly and there is an option uh to publish your application to test flight. And if the test flight is successful, then you can directly uh release your application from ex coded itself. So next question is so you can do the C I CD. Yes, we can do the C I CD part uh in react native but uh to and set up the en uh environment.

You uh there are various uh you know, there are various platforms which provide you the C I CD for reactive because we have to set up the application uh in Android and I OS both. So that is why there are some paid things you can also use, get actions for that. So yeah, you can implement C I CD for that. For sure. Uh I hope uh these things are get, are getting answered. Well, if you have any query more, then we can discuss it more. Not sure if I missed it before. When should I use angular and when can I think of using React? So uh in React native, you will be working with only react native, not angular and react native is the library which uh React native is a framework which works on uh React Js itself. So you will be working with javascript code and uh you will be using React Js uh uh methodologies like the render function, the life cycle, the mounting un mounting phase of the component and the hierarchy of the component will be similar to react Js. I hope uh this answers your question, Zack, thanks Olia and Jak for asking the questions uh happy to answer. And uh one more thing which I want to mention over here uh I use visual studio code for the I uh for the development like writing code. I.

Uh I use visual studio code as the editor. You can also use the uh you can also use the uh editor of uh Android and X code for uh using the writing the native modules and just for writing the javascript code you can use directly vs code. I pretty much like it. Do you thi do, do you do things with GS workers or that's only for PWD GS workers are used for PW DS. And uh in React, we can use GS workers but in React native no in React definitely, we can create our service workers which uh like if you want to add notification in your web application, then you can use service workers. You can create a service for it and you can use that for the notifications in React native. There is a different scenario for notifications itself. I am just pasting my Linden. Uh Let me just paste my linkedin account over here. If anybody has any questions, if anybody has any query uh do follow me on linkedin, do send me request and uh your queries, I would be more than happy to help. I hope uh the women's and the amount of women in the women in tech uh will reach and will break all the records in this 24th century, 21st century. Thank you Z Zuck. OK. Yes. You can also reach me on Twitter. Let me also share my Twitter profile.

OK. I'll be more than happy to connect. Do we have any more questions or are we good? I hope you everybody like my session. Uh You can drop a thumbs up if you like it. And any suggestions would you would be very appreciable? Thanks everyone. Thanks for joining. I hope you enjoyed and it's worth investing your time. Uh uh My time has been up and I was, it was a pleasure meeting you all. Thank you, everyone. Bye.