React Native Crash Course 2020

[Music] this video is sponsored by Ella node anyone can build on the node whether you need a development portfolio to land your next job or you're ready to put your app into production lonoa can get you there for $20 in free hosting credit click the link below or sign up at lynda.com / traversée hey what's going on guys welcome to my react native crash course so I did one of these maybe three years ago or so and it's it's out of date now and a lot of people have asked me to update it so in this video it's gonna probably gonna be about an hour long or so we're gonna talk about what react native is we'll look at some slides and then we'll jump in we'll install it we'll get set up with react native CLI and then we'll look at some fundamentals look at the built in components that it offers and we'll build a small shopping list application so this is an introductory course to react native however I would suggest that you have some experience with the react.js library before taking this course because I'm not gonna not gonna explain every little thing about react I do have a react crash course and plenty of videos where we build small projects with react as well as a couple udemy courses as well so first off what is react native now do we have the the react jeaious library and then we have the react native library and they work together so when you build a web app with react j/s the part of it that displays it out to the browser is actually a separate library called react dom and react and react dom worked together to allow you to build front-end browser client-side applications well react native is something that you use along with the react library that can render out native components to a mobile device like an iOS device or an android device so it's important to understand that whether you're building a web app with react dom or you're building a mobile app with react native if you're using the same react j/s library now one of the biggest advantages to using something like react native is that you have a single code base and what I mean by that is if you have a company that wants to be the mobile app in a lot of cases they want their app to work on iOS and Android however if you're just building it with the native languages it's there two completely separate projects so you might have Swift project for iOS and then a Java or a Kotlin project for an Android app and they're two completely different code bases you might have different developers it's very expensive so it's definitely a huge advantage to just have one single code base that can compile to both platforms so you save not not only do you save a ton of time but you also save the company a lot of money so that's one of the biggest advantages to using react native so as far as requirements go if you have a Mac you can build compile and test iOS apps and Android apps if you're on Windows you can build for Android and iOS but you can't compile and you can't test for our iOS I mean there's ways around it you can use physical device and there's some other software and stuff like that but usually if you're building with react native on Windows you're gonna be building and testing in Android so just be aware of that and then if you're on a Mac you can build and compile and test for iOS and Android and I'm gonna show you how to get set up and even if you're on Windows you can completely follow along with this tutorial all the code is gonna be you know it's gonna it's gonna run whether you're on Windows with the Android emulator or on a Mac with the iOS simulator ok so just like when you build a web app with react and react Dom with react native you also have a concept of components you have your own components that you create but there's a whole boatload of built-in components to help you create native apps and native UI you have different categories like basic components which include things like the view which is like basically a container component a text component image text input scroll view stylesheet these are all basic components and you can look in the documentation for a full list as well for the UI of buttons you have Pickers sliders switches list views so flat lists if you want to just a bunch of items like will be displaying shopping items section list and then you also have components that are platform specific so action sheet iOS alert iOS these are these are components for the iOS platform and then you have components like back Handler the date picker Android component for the Android platform okay so you have both agnostic and platform specific components and then everything else that you can do and react like props and state and all that stuff that's all valid in react native hooks will actually be using functional components with hooks but you can also use classes as well alright so I don't want to bore you too much with slides so let's jump in and get started with react native so I'm at the react native website which is Facebook github do slash react native and if we go to the docs here you'll see this getting started page and you can use these Doc's as kind of a supplement to go along with this crash course now there's two basic ways we can get started one is the expose CLI which is kind of a wrapper that will run your it'll abstract out and run your react native application and all you really need is no js' and you can even use your physical device to test with and run your app however I'm going to be using the react native CLI and when we use the react native CLI we need to have a couple things set up on our systems so one is Android studio along with the Android SDK you definitely want this if you're on Windows because that's most likely what you'll be using and testing in and if you're on a Mac and you want to test for you know Android devices you also want to download and install it so you just want to go to developer.android.com slash studio and download and install it and I'll get into it in a second show you how to create an emulator and so on now if you're on a Mac and you want to test for iOS then you're also going to need Xcode installed and the best way to install that is just through the app store and then once you install Xcode you should have access to the iOS simulator so let's first go over how to get set up for Android so you definitely want to do this if you're on Windows so I'm going to open up Android studio so you want to download stall it open it up and if you go to configure you can go to the SDK manager and you should have the SDK installed right now I have Android 1010 installed API level 29 so that's what I have on my system you just want to make sure you have the SDK installed and you might want to take note of where it's installed as well and this is a lot easier now you had to do a whole lot more back you know three years when I created the first crash course but now you know you have the SDK you download it and that's pretty much it you have everything you need and then you need to create an emulator so if we go back here to configure and then AVD manager which is the Android virtual device manager you can see I already have a pixel two here but if you want to create a new device because you probably won't have one by default you just click here pick a device I'll just go with the pixel two which is the default click next choose your SDK so mine is this Q Android 10 and then click Next and you can rename it if you want click finish and it's just gonna create a virtual device and you can actually click the play button here and it will launch the emulator all right so it's basically just an Android device it's a pixel to write on your desktop and it'll show the home screen and everything so if you're on Windows you're most likely going to be testing with your Android device your Android emulator but I'm gonna go ahead and just close this up because I don't need it and close that up and now for iOS like I said you need to have Xcode installed and once you do that you can either go into Xcode and open your simulator to try it out or you can just go to your terminal and type in open - a simulator and that'll start up the iPhone 11 simulator and there we go we just have a home screen so it's basically like an iPhone right on your machine but again I'm gonna close this up because we don't need to open it manually like that we can open it when it comes time to run our app so now let's get the react native CLI installed so let's see I'm gonna go into my dev folder here and then from here I'm going to install the react native CLI globally so I'm gonna use sudo since I'm on a Mac and then we need to install it with NPM which is the node package manager so make sure you have no js' installed and then install - g4 global because we're installing this global so we can access it from anywhere and then react - native - CLI okay so I already had it installed anyway so that's probably why I went so quick but now that's installed globally so I can now initialize an application and I can do that by saying react - native in it and I'm just gonna call this shopping list we'll be really creative here okay so now after that finishes in 15-20 seconds or so it's gonna tell you how to run your application on both for iOS and Android so for iOS you want to just go into the folder and then you can run react native run iOS you don't need npx because we actually installed react does the CLI if you didn't install it you can still run it using npx and then for android so if you're on Windows you're gonna want to go into the shopping list folder and run react native run Android or I mean you could do it you could run your Android emulator on a Mac as well so let's CD into shop shopping list and clear this up and before we actually run our application I'm gonna do a couple of things I'm gonna open up visual studio code in this folder so you can see I have all my files over here which we'll go over in a second okay I want to do that I also want to install a couple dependencies that we'll be using so we're gonna npm install here and we're gonna have we're gonna be using some icons and there's a bunch of packages that you can use if you want to use icons with react native the one we're going to use is called react native vector icons so we're going to go ahead and install react - native - vector - icons I just want to get this over with so we don't have to stop so you know stop the server later and install it later okay so once we do that we just have to link the assets the icons by doing react native - I'm sorry react native and then we want to link the assets from react - native - vector - icons okay and then you should see this here success assets have been successfully linked to your project and then the only other thing that I want to install is UUID version 4 I believe that's it and what this will do is just generate IDs for us because we're gonna have shopping list items and I want to just have IDs and you know I mean it's not something you need you could just use math dot random and use a random number but I figured that we use this this package okay so now we want to run our application and we do that with react - native and then we're gonna do run - and then either Android or iOS I'm gonna run iOS and it should just automatically open this up here ok so that took about 15 seconds or so and what happened or it was two things happen and it opened up my emulator with whoops I don't want to do that let's get that back so we should be able to just slide up yeah so it opened up the emulator with the boilerplate application which looks like this and it also opened up this window which just it's basically our console so we can do console logs and it'll show up here and it also runs the Metro bundler on port 8081 it compiles any of the JavaScript that the device doesn't understand so this will constantly run in the background all right now let's let's actually just minimize that and we don't really need this we'll just minimize that and now we have vs code open on the left and we have our simulator running react native on right so over here in the files I want to look at the package.json first just so you can see what this entails now the only two regular dependencies that come right out of the box is the react library and the react native library so this right here is the same exact react that you would run to to build a web app you would just have react Dom instead of react native and then these two I just installed separately so we have the icons and then we have the UUID package and then for dev dependencies it's just development stuff like babel to compile JavaScript yes lint jest for testing and then for scripts we can run android iOS with with these scripts here we can test with jest and we can use es Lin so there's not actually much that's included in here now there's a lot of config files like prettier and he s lint babble and stuff like that I'm not gonna go over that stuff and then these the Android and iOS folders these are the native apps here okay so all the native stuff goes in there what we really want to focus on is our lips our app.js file because this is the entry point to our application just like it is with a standard react app you have your app J S which is your root component and then you have other components that you create and you bring in and you basically embed them okay so this has you know all this stuff that you're seeing on the screen here and just to show you how fast it reloads let's replace this step one here with hello world and I'm just gonna save and you'll see automatically it refreshes and now we see hello world here okay so it's auto reload once you save now instead of going over all this I'm just going to get rid of it and we're just going to start from scratch now just as if we were using the react library to create a web app we can use either functional components or class-based components so if you use classes you use life cycle methods like component did Montand stuff like that if you use functional components you can use hooks so I'm gonna go with functional components with hooks so first thing we're going to do here either way you wouldn't have to you would import react so let's do that import react from react and then we're gonna create our component in this case a function so I'm going to use an arrow function so we'll call it app and inside here I'm going to return now with the react library when you're using react Dom you would probably have a fragment or even a div or an h1 or something like that now you can't use HTML tags like I can't I can't use a div here we have to use react native components so up here I'm going to import two things one is the view component and one is the text component and that's going to be from react native and then down here in the return I'm going to output a view and inside here I'm gonna put a text component that just says hello world and then we just have to export this so we want to do export default and then the name of the component which is app so I'm gonna go ahead and save this and you can see that way up in the corner here it says hello world ok so there's there's no styling by default or anything like that we have to style everything ourselves so the view component here let me just open up the docs real quick and it's actually search for react native View component so this is the most fundamental component for building a UI it's a container that supports layout with Flex box so we can style our layouts using flexbox and it maps directly to the native view equivalent on whatever platform react native is running on and we can embed other components within the view so just to show you a little bit about flexbox let's say react native flex cuz it works a little different what we do is we set a view to flex 1 or flex 2 in this this example right here this is flex 1 flex 2 flex 3 and instead of being a row by default like it is with CSS it's a column so when you use flexbox with CSS like you say display flex it makes all the Flex items aligned in a row horizontal but in this case it's gonna be a column by default instead of a row okay so it's gonna go vertically by default and we can set justify content and align items so we can align things within it so what I'm gonna do here is set a style to double curly braces just like you would with a web app and let's set this to flex one and then we can use justify content and we'll set that to Center let's actually close a sidebar up and then set a line items and set that to Center as well and save and now you can see the hello world the text that's inside the view here is put right in the middle okay so we can use flexbox with the view view component and then for the text we can also style that so what I'll do is set that to let's do color we'll set that to dark slate blue and let's set the font size and notice with this with these properties it's not like the CSS where we do font - sighs we can't do that it has to be camel case and then we also don't do like 20 pixels or anything like that we just simply do 20 so I'll save that let's do 30 actually so save that and you can see that the style has now changed now this is inline styling this can get quite messy if you when you start to build a larger UI so you probably want to use the stylesheet component and separate your Styles out so we're gonna bring in stylesheet and then what we'll do is go down here and say Const styles and set this to stylesheet dot create and then in here we just pass in some curly braces and we can create styles so for instance let's do for the view we'll say container and what I'll do is grab the three styles we have in here and paste them in here just put them on separate lines here to make it neater and then instead of doing what we did here let's just have single curly braces like that and then we can say styles dot container and if I save we get the same result and then I'll take the textiles the color and the font size and let's create styles dot text and then we'll go down here say text and paste those in okay save that we have the same result so now we've separated our styles from what we're returning from the component okay makes it a little neater now before we start on the shopping list stuff I just want to show you a couple things one is gonna be the image component so I'm gonna bring that in from react native and then we're just gonna put that right here and this actually takes in a source prop so we need to pass in an object so double curly braces with a URI on an rui u RI and we can set this to an image you are I'm gonna do HTTP and I'm just gonna use the random user dot me API so we can say slash API slash portraits slash men slash 1 dot jpg and then we're gonna add a style and set that to Styles dot IMG and then we'll go down here and let's add in IMG and set a oops we need a colon here let's set a width of 100 and a height of 100 so if I save that you can see that it's grabbing this image and it's putting in here putting it in here with the image component now if I wanted to make this round it I could use border radius however we can't use percentages like I can't do 50% if I do that I'm gonna get an error you might think well maybe just put quotes around it and that also doesn't work so as far as I know what we would have to do is just take the the width and the height and then divide that by two and that will make it rounded now I'm gonna get rid of this stuff like the image styling in the text styling here and then get rid of the justify and align items I just want the container to be flex one and then get rid of the image and we'll keep the text but just get rid of the style we're gonna replace this with our header component in a second and then get rid of that image we're not we don't need that anymore all right so we're just back to square one so now let's create a new folder in our you want to make sure you're in your route here and we'll create a folder called components just like you would building a web app and then we'll create a file called heterogeneity our header component and like I said you could use a class or you could use a function I'm gonna use a functional component and I guess let's see we could just call halo just copy this I guess and then in here paste it in and change this and this down at the bottom to header okay so that's the name of our component and then we want to change let's say we want to bring in these three and then we'll call this styles dots header and then down here for header we don't need to set Flex one we're gonna set a height let's do height sixty and let's say padding padding I'm gonna do 15 and then let's add a background color okay and this is on the view that's around the text so the background color I'm going to set to dark slate blue and then on the text let's add a style as well so we'll say style equals Styles dot text and then we'll go down here and let's make the color for this white and then I'm also going to set the font size to 23 and then let's also text a line to the center all right so we have our header component now it's not showing here because we need to bring it into app KS so let's import header from this is going to be from dot slash components slash and then our header file and then let's replace this right here this text with our header component and save and now we can see the header but it's blocked by this little panel right here so I'm gonna go into my my main app container style here and set a padding top to the same as the height of the header which is 60 so that'll push it down now we don't want hello world displayed so let's change that to a shopping list all right now you can also do you know props you can use props and stain anything you can do with react within a web app so let's actually add let's make this a prop this text right here so in our app j/s where we're embedding the header let's call this title this prop so we'll set title - what's a shopping list okay and then to actually take that in here it depends if you're using a class or not if using a class just going to be this dot props if you're using a function like this then you're gonna pass in props here and then you can replace this with props dot title and if I save now we get shopping list and we can take it a step further and we can just destructure and pull out from the props by using raises here pull out the title and then down here and set a props dot title just to title so all the same stuff you can do with reacts with react Dom you can do with react native we can even set a default prop so if we go down here and say header dot default props and set our title to a shopping list so now if I don't pass anything in here if I don't pass in the title and I save it's still gonna give us shopping list because that's the default prop and you can bring in prop types and do that as well I'm not gonna waste time on that though but yeah you can do all that stuff so we have our header I think we're we're all set to close that for now and the next thing I want to do is start to deal with state and I want to deal with the flat list component to list out all the items in our state now I'm using functional components with hooks so I need to bring in the u s-- state hook okay so we want to bring that in and then right above the return inside the app function here we're gonna have our state so we do this by setting some brackets and I'm gonna call this items so the piece of state is called items and then we need a function to actually manipulate the state and that's going to be called set items and we want to take that from you state and in here we have our default which is going to be an array and I'm just gonna have some hard-coded items in here shopping items so let's set an ID now remember I installed that UUID component we can actually bring that in here so we can import UUID I think it's version 4 we do from let me just check this out so NPM UUID there's a bunch of different ones I use the version 4 so oh we just we bring it in like like this right here so I'll just grab that and then we can simply call you UID with parentheses and it'll generate I D like that okay so import it like that and then we'll set this to UUID and then we'll set a text value and let's set this to milk okay and then we'll just copy this down a few times we'll have four different ones here so we'll say milk eggs bread and juice all right so that's our state so if I save that just make sure we have no errors good so I want to use what's called a flat list to display these in our UI so let's bring in from react native flat list and we're gonna go down here let's go right below the header okay we want to still be within the main view here and let's say flat list and then I'm gonna just go to the docs real quick so react native flat list and it gives us an example very ugly example but you can see that there's they have some data here and where they're embedding the flat list they pass in a data prop with that data and then also a render item function so they can render whatever they want for each item in this case they have another component called item so that's what we need is a data attribute and a render item function that takes in a function with item and then you structuring it notice the the curly braces so let's go ahead and do that in our application so with flat list we'll say data and let's set our data to items which is our state the items in our state and then render item we're gonna set that to an arrow function and inside here we want to put curly braces with item okay so for each item then we have an arrow and we're just going to put some parentheses here and then let's render out a text component with the item dot and then we can access the ID or the text field I want the text field so we'll save that and now you can see that these are being rendered out now there's no default styling so we have to handle that ourselves now instead of having this just just outputting text here I want to have a separate component for each list item so what I'll do is import let's go up here and import the component we haven't created yet which is going to be list item and that's going to be from components slash list item again I have we haven't created this yet but we will and then let's replace this with our list item and this list item it's gonna have to know you know what this item is so we're gonna pass that in as a prop so let's say item equals and then set that to whatever the current item is now if I save that it's gonna break and it says unable to resolve module list item so let's create that I'm going to go over to components and create list item capital L capital I dot J s and from here let's just copy what we have in header and paste that in here and we'll change we don't need the props here get rid of default props and change this to lists item and change this down here to list item I'm gonna clear these styles out and let's see what else so as far as what we want to bring in here we want to bring in all the stuff that we have but we also want to bring in something called touchable opacity and this is basically a touch element where you know if you put your finger on it it it'll have some opacity for a second as you touch it so it'll give you that that flicker effect that you see on in native mobile apps and that's going to be the outermost component of this list item component so I'm going to replace this view right here with that touchable opacity and then the style name here let's call this list item and within here we're gonna have a view okay and for view let's say style equals and we'll call this styles dot list let's say list item view and then in here we're gonna have a text component and give that a style of styles and let's do dot list item text and the text is gonna be the item which is if you remember we passed it in as a prop right here so we could either do oops this is yeah we don't want this we could just do item like that okay because we're pulled we're using D structuring with the curly braces otherwise we could do props so we could do that and then in here we could say props dot item and then we want the text property so we could do that but it's better off to butt off just to structuring text sorry not text item and that way we can just do item dot text all right now we also want a Delete icon actually before we do that let's just try and render this so if I save this this is what its gonna look like we can dismiss that now we don't have any styles so let's start to add some of those so when here we'll take the list item and let's set padding to 15 and as soon as I save it you can see the padding gets added will set a background color let's set that to a light grey will do f/8 three times and we're gonna do a border let's do board our bottom width and we'll set that to one and let's do border color and we'll set that to Tripoli okay so we have a very light border and then for the list item view I'm actually going to set the Flex direction to row because remember it's column by default which goes this way which goes vertical we want it horizontal because we're gonna have a delete icon we want it to go this way we also want to put any remaining space in between the two items which is gonna be the text and the icon so to do that let's add justify content and let's set that to space between and then I just want to align items to the center okay and then for the text so we have list item text and I'm just gonna set the font size to let's do 18 all right now let's add the icons hopefully this works hopefully the assets who are linked correctly so we can import icon from and this is gonna be from react native vector icon and slash dist and then you can use material icons you can see all the options we're gonna use font awesome and then right under the text so we want to be within the view because remember the view is the Flex Direction row so we have the text which is one flex item and then we have the icon and this takes in a bunch of props like the name of the icon and we want which is remove we can add a size which I'm gonna set to 20 a color which I'm gonna set to firebrick and if I save that now you can see we have our delete icons all right cool so though that's our list item component we're rendering it you know as many times as we have items now let's work on the delete so we want the delete to happen when we click here and you notice when I click on this we get that opacity effect that's because of this touchable opacity but I want to click on the icon and then delete from the state now the state is not in the list item component it's in the app component so this is where ultimately where we want to call the delete item function and then what we'll do is we'll pass it in as a prop just like we would in just a regular react app so let's create a function here called delete item and this is gonna take in as a parameter the ID so we know which one we're deleting and we want to call set items because that's the function that's what we need to call if we want to manipulate this state which is what we want to do we want to delete one of these now this set items is going to take in a function with a parameter of previous items so we call this what we want and just going to call it pre vitamin and then we have an arrow function here and this previous items is just going to be the state before we do anything to it okay so it'll have all these items in it and what we need to do is delete the one with this ID so we can use filter for that so let's return the previous items however we want to dot filter which takes in a function you can use an arrow function here and it takes in item so basically loop through and then we're gonna filter out we want to say if the item dot ID is not equal to the ID that's what we want to return so basically we don't want to return the one that has this ID because we want that deleted and then we just want to pass in to list item as a prop delete item and set that to the delete item function now if we go back into list item we can go on to the icon here and say for the on press event you want to call an arrow function and we want to call the delete item prop which is that function and we want to pass in the item dot ID now right now it's not going to know what this is because since it's a prop we have to bring it in here just like we did the item like that so let's save that let's go over here and I'll click this and there we go we can see that juice goes away now I want to be able to add an item as well so now we're gonna let's close that up close that up and create a new component called add item dot j/s all right and then we'll just copy I guess we'll copy the header again oops so copy all that paste that in so let's see for add item let's change this to add item and we'll just get rid of everything in the return for now we'll get rid of this and clear out these styles and change this to add item now as far as the components we want to bring in from react native we want view text style sheet we also want text input because we need a way to type in our item and then we also want touchable opacity here as well because we're going to use that basically as a button to submit and then we're also going to bring in the icon because I want to have a little plus icon so I'm gonna copy that from the list item this import right here so we'll grab that and put that here okay so for the the return here we're going to have a view that wraps everything and then we'll have our text input so our text input is gonna have a placeholder so just like with HTML we can have a placeholder we'll say add item and then set the style to let's say Styles dot input I'm not going to put the event in here yet the on change event and then under that under the text input we want our touchable opacity and we actually want an ending tag to this because inside of here we're gonna have a text but let's first add style prop and set that to styles and I'm gonna call this BTN styles dot button and then in here we'll have text and for the text we'll say add item and for the style let's say styled Styles dot BTN text a lot of the stuff you're going to be doing in react native is styling unless you use something like react native elements are some kind of UI framework type thing I also want the icon in here the plus icon so we'll go ahead and put that in so in here let's say name is gonna be plus and the size is gonna be 20 okay and then for the Styles I'm just gonna paste these in just to save some time we actually don't need this so the input is gonna be 60 high it's gonna be have eight padding font size 16 the button will have a light purple background some padding button text so nothing special pretty easy and then we'll go ahead and save this and then we need to bring it into our app j/s let's actually put this up here and then I'll copy this down and we'll go ahead and take that and that and we want to bring in add item okay and then we want to put this let's see where do we want to put this let's put it right below the header so between the header and the flat list I believe actually yeah let's try that so add item okay so now we have a little text box and we have our button we can type in here we can use this keyboard cool now this add item we have to do a couple things we have to have a piece of state for the text that is in here okay so we're gonna bring in you state if you've ever dealt with forms and react this should be very familiar and then we're gonna go down here and let's say cons so text will be our state and then set text to manipulate it set that to use state and the default is just gonna be an empty string and then what we'll do is go to our text input and whenever you have an input you have to have an on change or an on change text which is what we're going to use and whenever that fires off so whenever we type anything in here we're gonna call a function called on change so we'll just pass that in there and then up here and create Const on change and that's gonna take in a text value or whatever you want to call this and then actually don't even need that we just want to set text and set it to whatever that text value is okay so as we're typing and here it's changing whatever that text value is I don't know why I keep typing defend oh it's oh you know what it's using this down here well just like it would on an actual phone so that changes the state as we type in now when we click this add item we actually want to manipulate this state right this this these items we want to add to it so we're gonna do the same thing we did with delete and create a function called add item and let's pass in item okay so for this add item I just want to do actually will do the validation after I guess so let's just do set items okay because that's what we want to do we want to want to manipulate the state we're gonna pass in creve items with a function just like we did for the delete and then we want to return an array and we want everything that was already there so let's pass in here an object with the actually we don't want the object just yet we just want the previous items so we can use a spread operator with pre vitamin I'll do is it'll take everything within the items and put it in here and then we want to add in the front of it a new object with a new ID will use UUID and the text which is gonna be the item that's passed in here actually well let's call this text that makes more sense and then we don't even have to do this we can just do that because this is the same as saying you know text text okay so that should add it now we have to pass this in as a prop to add item so set that a time just like we did with the delete item for the list item component so we'll save that and then in add item let's go to the button or the the touchable opacity thing here and we're gonna add an on press okay so instead of on click it's it's on press and then we want to set that to an arrow function and then run add item which is a prop that we passed in oops pointed to that lower case a add item oh it's because that's the component name yeah so let's actually bring in add item right here because it's a prop and then this should be lower case a so we're gonna call add item and then pass in whatever the text value is so the text state which is getting updated each time we type in so it's going to know what this is so let's save that and then I'm gonna go over here and let's type in I don't know steak and then click add item and it gets added cool we can remove it as well now I don't want to be able to add nothing you can see just add an empty string and I don't want to be able to do that excuse me and I wanted to show an alert when we try to do that so back in our add item here actually let's bring in up at the top here from react native let's bring in alert and we're gonna go right in here and let's say if else and we'll take this set items right here and just move this into the else and let's say if not text so basically if nothing is typed in we're gonna use the alert component which has a method called alert and this takes in a few things first is the title which will just say error and then the message so we'll say please enter an item and then an object that has to do with what we want on the button and we just want the text of the button to say okay so now let's go over here and click add item and we get this little pop-up this alert that says error please enter an item okay and type in steak and there we go alright so I think that's gonna be it and you know I know this is a small application and it doesn't do much but at least we went over the fundamentals we went over how to set up react native a lot of the different you know built-in components the really important ones like view textile sheet a flat list and all that stuff so obviously you could have some kind of back-end where you could make requests to to get data and insert data and all that you could use a sink storage which is kind of like local storage for react native you could use something like firebase so you could make this app much more complicated you could add update functionality and I would I would encourage you to do something like that you know either create something based on what you've learned along with the docs or take this application and add on to it and make it better but I will have the source code in the description if you want to check that out and that's it thank you for watching I hope you learned something from this and I'll see you in the next video

Channel: Traversy Media

Views: 471,115

Rating: 4.9577131 out of 5

Keywords:

Id: Hf4MJH0jDb4

Length: 51min 27sec (3087 seconds)

Published: Tue Feb 04 2020

Reddit Comments

[u/OMDB-PiLoT]

You have great content Brad and I really like your style. Your redux tutorial was super helpful to me. Keep it up.

[u/jjssjj71]

Huge fan of your work.

Also, I love the idea of learning programming skills from Mark Mark! 🤣

Keep up the great work!

[u/dakubeaner]

Keep it up Brad

[u/spooklordpoo]

Brads content is always appreciated

[u/atwarog]

Very nice tutorial.

[u/Viper3110]

Awesome. Really love your tutorials.

[u/jnildes]

Always great to see an Brad course!

[u/downeastkid]

great stuff, do you have any plans on doing any more advance react native courses?