Learning React-Native in 5 Days

react native this tech has been on my radar for a while now as a viable option for building cross-platform mobile apps i've been doing native mobile development for a minute now but lately i've had the urge to expand my skill set outside of the native domain i recently learned flutter and now it's time to dive into this framework to complete the holy trinity of mobile app development i wanted to see how long it would take me to build my first ever mobile app with this framework the thing is i need an app idea the problem here is i don't have any good app ideas and let's be real if i did i want to be making a youtube video about it but what i do have is a react js web app that i built a few months ago of a simple blog i thought this would be the perfect opportunity for me to convert this web app into a react native mobile app now i'll admit because i've never really looked into the react native framework i thought this was going to be a pretty easy task maybe just some configuration changes and boom i have myself a mobile app but yeah i was i was wrong very wrong so instead i rebuilt my blog from the ground up in react native so i could have the mobile version of that blog so i gave myself a five day time limit to do this because i am working a full-time job i decided that i would dedicate three to four hours each night over the course of five days to work on this app the night before starting this app i got my laptop all set up with the environment and i watched about 30 minutes of a react native crash course so my preferred method of learning is by attempting to write some code if i get stuck i google for the answer this probably isn't a good method for somebody new now if you're new i would recommend watching a full course or reading a book but i've done this a million times before so usually i know what i need to look for anyways day one i hit the ground running and i started to work on the blog list page this is the home screen of the blog where you can see all the blog posts with the most recent one being featured at the top this was probably the most challenging day because i was getting used to react native and i was getting used to how to layout things uh with the framework i built the feature card which displays at the top of the list as well as the cards for the previous posts underneath after flushing out the ui for the home screen i added the toolbar and then i hooked up my app to my firestore instance to read an actual blog post data lastly i hooked up navigation in my app so that when you click on one of the blog cards on the home screen you are navigated to a detail page and that is the end of day one day two i built out the blog detail page and i added a section list to separate the blog post content from the other posts section of the detail page and at this point i'm getting very familiar with style sheets and how to layout things in react native day three was the darkest day of them all i made the app theme dark mode only i thought about adding support for light and dark mode but then i realized only psychopaths use light mode and obviously i don't want psychopaths using my app so dark mode only it is so i started out with this completely dark gray color scheme i didn't really like that so i went with a more bluish gray theme and i think that fits the app a lot better mind you i'm pretty bad at designing uis usually i leave that up to the ui designers but when i don't have one i try to do my best which is pretty mediocre lastly i wanted to add comment section support for each blog post so i stubbed out what that ui would look like day four i finished creating the ui for my comment section and i loaded actual comment data from my firestore instance the comments that you see here are the comments from my web blog that i built out a few months ago after loading in comment data i started working on the ui for a user to actually leave a comment i played around with a couple different versions of how this would look such as placing the leave a comment box at the top of the comment section but this looked really out of place so ultimately i went with a fab or a floating action button on the bottom right of the screen and when a user clicks that button they are navigated to uh the leave a comment uh page of the app the ui for this page is pretty bare there's a lot of white space but it gets the job done day five and this was my last day working on my app last thing i needed to do for this to be a complete one-to-one clone of my web app blog was the ability for a user to leave a comment at this point i had the ui all stubbed out for leaving a comment the last thing i needed to do was hook this up with my back end now this requires a user authentication to work originally i wanted to have a user signup page or a more formal ui for creating an account but because this was my final day i needed to make this as simple as possible so i ended up adding some logic to this fab to authenticate the user with their google account if the user was already authenticated then they would just be navigated to the leave a comment page and if they weren't authenticated they would be prompted to sign in with their google account once they're logged in they can drop a spicy comment which is shown on the blog detail page and that my friends is it so let me run you through a quick demo of the full app i can view all the existing blog posts on this home screen again this is coming from my firestore instance you can then click on one of these blog posts and view the full detail of each blog post and then i can view the comments from the other users and even leave my own comment in real time nothing crazy but mind you this was my first time ever building a react native mobile app this is what i was able to accomplish in five days so what was the point of building this app now as a mobile developer i wanted to add this technology to my tool belt you could say i think cross-platform technologies have dramatically improved since i started using them back in 2016 and i have to say that i am pretty happy with react native for freelance projects or even personal projects i think this is a great technology to have under my belt quickly i want to address the question that i've gotten asked a few times which is should i learn cross-platform or should i learn native for mobile app development and in the context of react native versus native mobile development here's my opinion on that so having a solid understanding of native mobile development will help you understand what's happening under the hood in react native so to speak when using components in react native these components are being compiled to their native views for each platform for example if you're using the text component in react native this is the equivalent of using the text view field in android also you may have to do some things where you configure gradle which is android's build system and you may have to use cocoapods which is a dependency manager for ios projects for this project specifically i did have to configure gradle a little bit when adding firebase as well as add some dependencies and cocoapods for ios but because of my native mobile development it wasn't really too difficult diving into both of those things and to be honest having a basic understanding of native gradle and cocoapods is probably enough to get you started or to build out most applications and react native but there may be instances where you run into some limitations with the framework and you have to implement some platform specific code and this is where native mobile development experience really shines anyways with all the support for react native i do think it's one of the best options for developing cross-platform apps and i'm really happy i dived into this especially if i take on freelancing again because it does seem like a lot of smaller projects are taking advantage of react native anyways with all that being said i hope you enjoyed the video if you did make sure you like and sub and i'll see you guys in the next one [Music] peace you

Channel: Kenny Gunderman

Views: 34,682

Rating: 4.9783435 out of 5

Keywords: react-native, reactjs, javascript, mobile development, learn react, reactjs tutorial, cross-platform, programming, code, software engineer, web development, learn react-native, learn mobile development, mobile dev, android programming, ios programming, kenny gunderman

Id: gCg2avzXUmI

Length: 8min 2sec (482 seconds)

Published: Fri May 21 2021