React Native Fundamentals Workshop

hey welcome to react native schools react native fundamentals workshop my name is spencer i'll be teaching this and uh just wanted to welcome you to this workshop basically the goal of this online self-paced workshop is to get you really really comfortable with the fundamentals of react native so that as you're going through different tutorials or working on your own app you kind of know what are these different pieces of the puzzle that you've got to use when building it so i've created 12 exercises that i think really cover that foundational stuff so that you're comfortable going through those situations they just outlined and basically the way it works is each exercise has a markdown file which i'll go ahead and outline any background information about what we're covering in that exercise it'll then go ahead and give you the exercise that you'll be doing and potentially any extra credit if you really want to stretch and learn a little bit more and then finally any helpful links to kind of fill in any information that you may need to accomplish that task and then finally what will happen is you've got a dedicated file that you'll work in for that exercise so we're not going to be creating a unique new react native app at this point i just want you to get comfortable with these different foundational pieces of the puzzle so with that next section is we're actually going to go ahead and i'll get this project for this workshop up and running on your machine so that you can go ahead and just jump right into each one of these exercises now i do want to note before you go ahead and do that is for each exercise we're going to have a quick little intro i'll give you the background that stuff and then there's going to be a screen which will tell you the files that you should be looking at we'll have the the project file and then the the background information the markdown file pause at that point and try to do the exercise yourself you'll get way more from this workshop if you go and try to do that yourself even if it's you can't figure it out if you take 10 15 20 minutes to go ahead and try that it's going to help you a ton when we actually do in the next section go through the solution for the exercise and any extra credit so take that time try to give it a shot even if you struggle that's perfectly fine we're learning here then go ahead and watch that solution so you can take a little bit more from it okay let's go ahead and get this project up and running on your machine and start writing some code okay to get started with this workshop you're going to want to go to reactnativeschool.com react native fundamentals on github i've got a link down below so you can just click that now in here you'll see our actual project file and we'll run through how it's actually organized in a moment but basically what we need to do well one read through this if you ever get stuck i've got links in here each lesson has links as well but just general links are here in the project readme but looking at the system setup this is what's really really at the core of it basically the way this project is built is using expo which is a tool cell tool set built on top of react native to just make development super super easy it's also great for building larger apps but this is just going to be for the sample so that we can actually just set things up on our device as quickly as possible so what you're going to want to do go check out the expo install docs which are very straightforward first you need to have node installed on your system once you have node installed you're going to have node and npm and npm is then going to be used to install the expo cli which we'll use to actually run our app and once you've got that set up then something else you need to do is install git it's likely you already have it but if not i have a link to how to go ahead and install it on your machine so make sure you do that so once you've gone through these steps of following the expo installation and the git installation basically jump over to your terminal and from here we could say node version we'll get a version back if you don't get one back go through those node install steps again we can do the same thing for npm git and expo itself okay so if you've got versions greater than or equal to mine you're good to go to continue on now the next thing you want to do is actually go ahead and clone the project so i'll go ahead and do that just copy this clone script here go ahead put this in my download folder put it wherever you want go ahead and clone it then i'll cd into that directory and run npm install but before i do that i'm going to go ahead and open this up in my editor go ahead and use whatever editor you'd like and i'll go ahead and say npm install and while it's doing that i'll give you a quick tour of the project so you've always got the readme to come back to you can go through it in your editor editor or you can go through it in github itself if you want to see it rendered so basically the project is split up source don't worry about this this is just kind of the app that's building the app you're going to be interacting with solutions is going to be solutions to the actual projects or the exercises we're going to be working on i encourage you not to look it's not cheating you know reading code is a great way to learn code but i want you to really think and try and figure these out on your own now the final directory is the exercises directory and this is where you're really going to be spending most of your time so if we look at helloworld.js you can see that we've got this js file code comments walk you through it and then the background file or the markdown file which will give you all kinds of information on how to kind of approach this project or this exercise so you could go ahead look at it in your text editor of choice or you could go ahead and actually look at it in github and the nice thing about looking at it in github is that you're going to be able to see that markdown rendered and it just looks a little bit nicer so whatever your choice is will work perfectly fine okay so something else i want to show you in the project is going to be exercises.js and all this file is is basically just walking through all the exercises in order so we're going to do a hello world capturing tabs custom component it's just a way to see how everything's organized in order and i'll also point you to the different exercises final solution instructions any extra credit all that stuff so if you ever kind of get disorganized or you just want to see what's coming up next this is a good way to do it okay so we've got everything installed i'm slightly behind on npm versions that's not a big deal but what i want to do now if we actually go to our package.json there's a few scripts that we can run we can run a start android ios web or eject ignore eject for now we're also not going to be touching web at all ios and android are going to need the ios or android simulator or emulator installed on your device we're not going to be covering that right now if you already have them installed perfect go ahead and use them if not just go ahead and look at the start script so all i'm going to do is say npm start and then something else i should note is and this will be in the github documentation but basically you're going to want to go to the app store on ios or android and download the expo app and with the expo app installed what you're going to want to do so i'm just going to do this on ios basically you can see we've got this big qr code that's being rendered in our terminal once we start this and if you've got everything installed you should be seeing this installed correctly so i'm going to go ahead and open up the camera app on my phone i'm just going to scan this qr code and you can see it's going to prompt me to open it in expo and if you're connected to the same network on your computer and your device it'll then go ahead and start building the javascript bundle you can see that downloading down at the bottom and then here we see our exercise list we're going to have all of our incomplete exercises that we can go ahead and scroll through then you can go through and tap into any of them we can look at the final solution we can look at the instructions for that it's going to be that same markdown file we could go back we can go to a different one check out the content here whatever it may be we can go ahead and just quickly look at that and get a sense of what's going on for that and again look at the instructions for that once you finish up an exercise feel free to go ahead and check it off that'll go ahead just move it down to the bottom pretty easy to go ahead and navigate this now an interesting thing let's go ahead and look at the hello world example is if you go ahead and shake your device it's going to go ahead and yeah i mean literally shake your device it's going to go ahead and open up this development menu what you want to make sure you see is it should say disable fast refresh that means that fast refresh is set up and that means that when i go ahead and make some change in my project don't worry we'll cover how to actually do all of this but let's just say gone ahead and added an app i'm just going to go ahead and return text that says hello make sure we import this and this okay so if i go ahead and do that you can see it automatically refreshed as soon as i save this and that's one of those great things about react native and expo as well so if you've got fast refresh enabled whenever you save something it'll go ahead and refresh on your app so if you've got the expo app installed if you've got it running in terminal and you see this giant qr code then you're good to go and we can go ahead and dive into exercise one okay exercise one hello world let's go ahead open up our project files you can go find those in exercises helloworld.js and helloworld.md now in this lesson if we take a look at the final down here in the tab bar you can see we're going to be rendering a square with text inside of it background color doesn't matter that's just the end goal now to do this read the background check out the exercise render square with the background color inside of us and inside of that square render the text hello world and if you feel stuck while going through this check out these helpful links to try and help you along alright let's get to it okay to actually accomplish our hello world here let's just go ahead and delete this and first thing we need to do whenever we're working with react native is import react from react and we have to do this because we're using jsx whenever we're using jsx at the moment of recording that is we need to import react where it needs to be in scope for us to use jsx the next thing we need to do is actually import the components we're going to use to render our app and for right now all of our components are coming from react native so i'm going to use it named imports and we'll go over named versus default imports later on but we're going to import two components from react native called a view and a text and if you've got a web background a view is synonymous with a div and a text component is synonymous with a p tag or an h1 a div is going or a div or a view is going to allow us to kind of build out the layout of our app and then the text component is going to allow us to render text the next thing we want to do is actually create our component and a component is simply a function and in this case i'm going to create that function with the name of app and from this function we're going to go ahead and return our component now typically components are multiple lines and whenever our components have multiple lines you're going to want to wrap it in parentheses to contain it and just to make it valid syntax so to render a view inside of our component we're going to go ahead and use the less than sign view and then a closing bracket and to close a component you're going to go ahead and do the less than sign forward slash view and then the greater than sign and that's just the way jsx is it's very much it's very similar to html it's very similar to xml that's what it's based on so if you're familiar with that this should be pretty familiar to you now inside of our view which is going to be our square i want to render our text and text is going to be the same thing in this case we're going to go ahead and render hello world now if i save this and go to my exercise file i'm not seeing anything and that's because we're not actually exporting our component outside of this file and we'll cover exports later on just like we'll cover imports later on but for now all we need to do now and for the rest of the exercises in this workshop is just say export default and the variable name that we assign a component to in this case app so if i save this we can see hello world being rendered now what if i want to style this box around it well we can do that via the style property and the style property or prop as it's commonly called is just a prop or variable assigned inside of a component and when you want to change the style you're going to go ahead and say style is equal to curly braces and then in this case we're using an object to render our styles so i'll go ahead and put those in there now we can go ahead and say our square is going to be a width and height of 100 and it's going to have a background color of blue now you can see this is very much like css it's just css in js and in that case we need to change a couple properties so instead of a background dash color we're using background with a background color with a capital c or camel case because using dashes in a key for an object is not valid javascript so we can see we've got our background color over there and our square with the correct size let's just say we want to center the text i can say align items center and justify content center as well that's going to vertically and horizontally lay out our content we'll cover layout later on now we can do the same thing with our text we can go ahead and apply a style component here i'm going to add a color of white or fff and hex and we can see we've got our square with our text inside of it very similar to what we've got over here in our final example okay let's move on to exercise two capturing tabs i'll go into the project over here and then we'll go into our exercise file and find capturing tabs dot md and dot js now go ahead read the background try out the exercise try out the extra credit and if you get stuck at all go ahead and look over the helpful links the final product we're looking for is a button that upon press we have an alert that says hello and for our extra credit we're going to create a customize button where upon press we also get a alert with a separate hello okay let's go ahead and walk through this final and extra credit so inside of my capturing files.js first off let's go ahead and import react from react we're also going to need to import our components from react native so easiest way to do button is via the button component from react native to render this all we need to do is say button and then we need to know its props which were covered in that documentation so we know we need a title property this title is just going to be button one then we need to also pass a prop that is called when the actual button is pressed and that's our on press prop in this case we're just going to go ahead and alert hello one save this and if we go to our exercise tab we can see we've got our button one i press it we get an alert that says hello one what about a custom button well first off let's go ahead and import a touchable opacity now touchable opacity is just like a button component except it doesn't render text it allows us to make a view touchable or whatever we want touchable it wraps that and in our buttons case we want to wrap our text and make that touchable and because of that i'm also going to import text so we want to render both of these buttons so i'm going to use my parentheses i'll put my button back in here then let's go ahead and create our customized button so i use touch full opacity and then i'll go ahead and inside of there put my text i'll just say button two now if i save this we can see we've got a warning here and it says adjacent jsx elements must be wrapped in an enclosing tag did you want to use a jsx fragment and a jsx fragment is just an empty opening and closing or greater than and less than and then below that below the actual component we want to wrap it's going to be an empty greater than and less than with a forward slash inside of it and that's just going to allow us to wrap our component inside of a single element that's going to return because whenever we're returning a component it needs to be a single element and by doing using a react fragment it's a way to wrap that without adding an extra ui element within the component hierarchy now wrapping it in a view is also perfectly acceptable all we have to do is add that view in there and then make sure we import it and you can see it renders perfectly fine let's go ahead and handle our press of this touchable opacity all we have to do is pass in on press which also takes a function and we can just say hello to now if we test it it works what about customizing the way it looks well let's go ahead and add a style property we'll set a background color of blue you can see it fills out that area we can also say padding horizontal is 10 and maybe padding vertical is also 10. and you can see we get a little bit more space but i want this to be aligned in the center so i can use the flex box styling of a line self and i can just specify center looking good but if we look at our extra credit 1 we can see we also want to change the text color so we'll go down to our text element down here apply style we'll set the color to be white and we'll set the font size to be a little bit bigger at 18 pixels and now if we look at our exercise looks very similar to our extra one with a little extra padding and when i press it it alerts and if i press button one that also alerts all right let's go ahead get started on exercise 3 building a custom component let's open up the files we'll go into our exercises directory custom component.js and customcomponent.md and if we take a look at the final example here you can see we've got two identical buttons when we press it we get an alert hello when we press say goodbye we'll get an alert that says goodbye if we take a look at extra one we can see it's the same thing but our second button has a different background color now background will give you information on background information you need to know how to do this and then the actual exercise here is you want to build this button component that accepts a text and an on press prop so we can customize what it says and what happens when that button is pressed once you've built this button go ahead use that reusable button that you've created to render this say hello and say goodbye if you've got time or you want to try the extra credit you can go ahead and customize what the button styling is by passing a custom button style prop which we can then use to override any of the styles for that second button so with that i'll see you after you've given it a shot and we'll go over the solution okay let's jump over to the exercise tab and we can see here looking at the custom component.js file you can see basically the api that we want to emulate while building our component so i'll go ahead and uncomment this we'll just change this to say hello and we know we also want a say goodbye so to do this we need to go ahead and wrap our component we're going to use a react fragment because we can only return one component from this component file we're gonna put our first button in there and we'll put our second one say goodbye and we'll change the alert to say goodbye okay now we've got a lot of red here we need to actually go ahead and implement this component first thing we need to do because we're doing a react we're using jsx here we need to import react from react next we need to import any components we're going to use to actually build our custom component now we know we want to build a button that renders text and is touchable so we'll want to import the touchable opacity and the text components from react native okay so now we need to actually go ahead and define our component now everything we've been working with so far we've actually been creating our own component we're just exporting it as the default export now we just want to use it as a variable so i'm going to go ahead it's a const button is equal to a new function which is then going to return a component itself just like we've got down here this time though it's going to be a touchable opacity and we're going to be rendering text inside of it now this text is going to come from the props that we've passed here and the way we actually access those is those props are going to be passed as the first argument to our function we can go ahead and use object destructuring to go ahead and pull that value off so we know we have a text on our props so we can go ahead and pull it off like that we can do the same thing for our on press now you can go ahead and make this even shorter by just using that object destructuring right up here in the function where that argument's actually defined we can just go ahead and destructure it right up there that's very common practice that you'll see okay we can go ahead and pass these on so we know that text is going to be a child of the text component and on press will be passed to the on press of our touch below opacity if we save this we can see we see the say hello and say goodbye okay let's go ahead and add some styling to this we're going to say the style is equal to an object we're going to have a background color equal to this pink color and we want to align the button itself to the center okay let's add a little bit of padding vertically just so the buttons aren't on top of each other and i'll also add some padding vertical as well as horizontal okay let's go ahead and actually add some styles to the text itself we'll just set the background or the actual text color to white compare that we can see it's pretty similar to what we've got over in our final now what about the extra credit how do we override the style but still have everything else maintained and a way we can customize that background color is by going ahead and specifying a background color on this and if i go ahead and pass the hex for this kind of teal color and then if we go to our button we can see we've got a new prop here so we could go ahead and pull this off of our background or off of our props we can pull that background color and we could do something like background color or use our default one here so if they pass a background color we'll use it otherwise we'll go ahead and use this pink or salmon color so if i save this and go to exercise you can see it's working but what if i want to change the padding of this well we could go and add a custom prop for each style property but that's going to get pretty overwhelming pretty quickly so what if we change this to just being a object of styles that we can pass down so we can go ahead and say button styles i'm going to equal an object and let's set that background color to once again be this teal color then we can remove background color from here so now with this button style prop we go ahead and grab our button style from props up here go ahead and remove this and the way we can actually override this or combine our styles is by saying we can use an object spread here basically to say any button styles to this object go ahead and take those properties and spread them onto the style object we've defined and that'll go ahead and override any properties that have been set here with our custom value so now if i save this you can see we're not actually getting what we wanted because i set the wrong property down here but if i set this to background color you can see we get that background color and if i want to increase the padding of that one let's just set the padding vertical to 20. you can see we're now able to customize any of those properties but still have those default styles for our app so that we can reduce the work we have to do and we just got this reusable button component that works within our app for us and with that we've gone ahead and built a customized component and then used that custom component we created inside of our actual app or our screen here okay exercise four is going to be covering state and props and if we take a look in here we can see if we look at the final solution if we press the button we're going to count how many times this button has been pressed in the extra credit it's the same thing we're just also updating the text of the button itself now if we take a look at the project files we'll open up we'll go over to our exercises directory take a look at state dashprops.js and the md file now there's a lot of information in the background so i definitely suggest you read this and take a look at the helpful links to give you more information now the exercises i've covered we're going to track how many times that button has been pressed we're going to do that via using state and props and this is really really at the core of what makes a react native app dynamic so it's a really important thing to get a grasp on and thus i would really suggest taking some time to read through the links in the background because though this exercise is simple it's really really the foundation of building react native apps so with that i'll let you get started okay to work with state in react or react native it's the same thing the first thing we need to do is actually import the use state hook from react and this is a named export so you need to go ahead and use those curly braces to actually grab that value now the next thing we need to do is actually go ahead and initialize our state variable so the way we do that is by saying use state and then we pass it our default value and in this case they haven't pressed the button at all so we're going to say the default value is zero now to actually grab this value so we can say output is equal to use state with a default value of zero now this output here is actually an array so from this array we're going to get the value at the first element so output at 0 is going to be the value and then output at 1 is going to be the function we use to actually change that value now rather than trying to remember that the easiest thing to do is use array destructuring to go ahead and just grab those values so we can say the first value we know is going to be the press count and then the second value is going to be a function to change that so the way i like to name it is set press count okay so we've got these values now with press count that's what we're actually going to be displaying and to display this how do we replace those question marks with the actual value well in the case of a text element or within a component itself all you need to do is place the value you want to return inside of curly braces so we'll just go ahead and put our press count in here and you can see we're now seeing zero times up here okay now to change this value what do we do well we'll take this setpress count function and then in our on press go ahead and replace this function and we'll go ahead and call setpresscount now the setpress count is going to take a new value for that argument and the easiest way to do this would be to say press count plus one we'll take we're taking the existing press count and adding one to it if i save this and we press press me you can see that value incrementally each or incrementing each time we press that button okay considering the extra credit we want to render the number of times button has been pressed inside of the button title here like we have here so pressed zero times we want to update that well let's go ahead and update the text for what we know what to do we got pressed question question question mark times okay now this time if i were to just go ahead and do the curly braces and drop my press count in here switch over to my exercise tab you can see it's not working right what we want to do here because title is a string it's slightly different we need to use what's called string interpolation which is a javascript feature and basically all we need to do is use backticks here for our string and where we have our curly braces basically we need to prefix this with a dollar sign now if i save this you're going to see we've got a syntax error and that's because we're actually doing some interpolation here or some work it's not just rendering a string and because of that for this prop we need to go ahead and wrap it in curly braces just like we have in our on press further below so now if we look at our exercise we have pressed zero times you can see we're using that pressed value to update both pieces of state and really this is the core of how we make a dynamic react or react native app all right exercise five basics of styling let's go ahead and take a look at our final example and pull up the project files for this so we've got styling.js and styling.md a bunch of information here basically to sum it all up styling and react native is css in js so if you're familiar with those principles you'll be set if you're familiar with css it's a pretty easy switch though you'll make some silly typos for a while if you're not familiar with either it's okay it's pretty straightforward and as always i have helpful links to learn about these different properties of styling and also layout and in the case of react native layout is done via flexbox automatically it's awesome now looking over at our final and our extra extra credit you can see we're rendering three squares we want them to be spaced vertically and horizontally sharing that area around the screen and then we've got three different squares each one having their own color and the important thing here is each one of these styles only write those styles once don't write it for each box and then looking at the extra credit basically all i want you to do for the extra credit it's the exact same output but the way you structure code is slightly different i want you to build a square component and maybe you'll do this in the exercise itself but basically you want to maximize code reuse here to accomplish this task let's go ahead and dive into this we'll switch over to our exercise tab going to import react from react i'm also going to import view text and style sheet from react native okay let's go ahead do our export default of our function and then we know we're going to have to return a component we can only return one component so we'll wrap everything in a view we're also going to have a view which has text inside of it and we're going to say square one if i save this we see that square one let's go ahead and do the same thing for our next couple of squares square three and square two okay let's go ahead we're going to create some styles now you could create objects for your styles but as the background and the helpful link said it's always best to go ahead and use the stylesheet api so to do that go ahead and create a styles variable that's going to equal a stylesheet.create and in here let's go ahead and write our styles going to have a box we'll set the width to 100 and the height to 100. we'll also give it a background color of blue to start let's go ahead and assign this property so style is equal to styles.box and we can do that for each one of our properties because we want to reuse these styles okay we're getting there one that text is hard to read so let's go ahead and change the background color to this light blue and then we want to center our text inside of our square vertically and horizontally to do that we can use flexbox first off the property of align items to be center you can see that's horizontally centering them next we can do the justify content center which will go ahead and vertically center our properties okay what about overriding the styles in this case we want to override the background color to do this when using the style sheet api rather than using object spread to spread those properties before what we can do here with the style property it's actually passed an array which will go ahead and basically just apply styles from left to right so i'll use the ones on the left for the base and then basically anything on the right of it it'll just continue to override any previous properties so for this first one we're actually not going to override anything we'll just leave it as is for our second square though let's go ahead and pass an array to this and then we're going to pass an object here with a background color equal to kind of a blue green and if i save this you can see we've got this green color here likewise down on square three we can go ahead pass an array to it we'll set a background color and we'll set it to this pink color okay cool so we've got the right background colors for our squares but they're not rendered correctly right they're in a column rather than a row and then they're all on top of each other so let's go ahead and create a container style so call this styles dot container and we'll put this on the outside containing view we can go ahead and define this and what we want to do here because we're already using flexbox which is equivalent to just saying display flex on the web we don't need to do that here what we can do is go ahead and start customizing it well first off this is in a column we want it to be in a row so let's go ahead and say the flex direction should be row okay that looks good now we want things to be vertically and horizontally aligned well let's first do align items and you can see that's not actually doing anything because if we add a background color of red to our container you can see it's only taking up as much space as our squares are so if we go ahead and add a flex of one you can see it's now taking up the whole area and our items are vertically centered let's go ahead and get rid of this red background and what about spacing these out evenly well we could say justify content center and that gets our squares centered but we actually want them to be split across the area so another value we have for justify content is space between and that's going to maximize the space between our elements you can see we've got the maximum space possible between the elements but we've got nothing horizontally or on the left or the right side of square one and square three respectively to do that we can say we want to justify content to maximize the space around each element and that will go ahead and give us the properties we want okay that takes care of our final code but it's not perfect you can see we've got a lot of repetition here and we can customize this or improve our code and simplify it a little bit so let's go ahead and create a square component and i'll go ahead and use an implicit return which is basically just going to automatically return so basically an implicit return takes this and simplifies it down into this and just automatically returns and from here we're going to go ahead and return our squares well if we go ahead and copy one of our customized ones and we look at it we can see what values are here that we're going to need to use well we've got custom text so let's go ahead and replace this and we'll pull this text value off of props likewise we've got a custom background color and in this case it's only a background color that's going to be customizable so that's all we'll pass to it we'll go ahead and set the background color pull that from props and the background color can either be our default value or if we're past a background color we'll go ahead and use that value so let's go ahead and start replacing our squares with this we've got square a square with the prop of text this is going to be square one and we're just going to render it as is switch over to the exercise tab and you can see we've got two square ones they both look exactly the same so that's looking right likewise for square two go ahead change the text to square two this time though we've got a custom background color so if we look at this we'll set the background color prop save it and we've got two square twos so looks like we're all good to go we'll do the same thing for square three pass the custom color and we're all set we've got simple code being rendered here but we can see we've got custom text and custom background color here and up here we've gone ahead to use the style sheet api to create customized reusable styles as well as started to use flexbox to actually determine the layout of our react native app okay exercise six in this one we're going to be making our content scrollable so if we take a look at our final example code here we can see we've just got some squares that can scroll very basic interaction to work on this one we'll go ahead go into our exercises directory and open up the scrollable content.js as well as the md file gives you some background information on how it actually works and how to think about it and then it'll give you the exercise which again just 15 squares in a scrollable list so with that let's get started all right let's start writing some code we've got everything imported we need to start so first thing i'm going to do is actually create an array that's just going to be what we iterate over so i'm just going to call this a arr and then i'll just create an array with 15 items in it are there other ways to do this absolutely but this is the most straightforward way and it's not a huge array so it's not a big deal to create those 15 items okay next thing we want to do is actually loop over this i'm going to go ahead and put these in a view to start just so we can get those squares onto our screen also go over into the actual exercise file in the simulator so the way we can render these is by mapping over the array and if you're not familiar with map it's a basic js array function that's basically going to allow us to iterate over each element in the array and return an item from so essentially it's going to be returning a new array and the way react works react nato works is it's going to see that array and go ahead and render those items so i'll then go ahead and just pull a argument off of this which is going to be item which is going to represent each one of the items in the array then again i'll use an implicit return which is just returning parentheses rather than curly braces and then we'll go ahead and render the square that we want to render now if we take a look at the text up here or at the the props for the square we can see we get text so we'll just go ahead and pass the text prop to it in which we'll go ahead and just specify the square and then whatever number it is which is just going to be item so i render this we see we've got a square we can't scroll in this and we've also got this warning down here this warning is really easy to take care of all we have to do is pass the key prop to our item and then go ahead and specify unique value for each item in this case each element in our array is going to be unique value so we can pass that to it there's more information in the helpful links if you want to learn more about that but just know for now that's all we need to do to take care of this little warning down here okay so we've got things rendered but we can't scroll so we can't see everything the way we would accomplish a basic scrolling view it's not the most efficient way but it works a bunch of the time and it's really really easy all we have to do is from react native import the scroll view and then go ahead and replace our view that's containing our elements with a scroll view and now looks exactly the same but as we try to scroll you can see we're able to easily scroll so the most basic way to make something scrolling is a scroll view there's more efficient ways which we'll cover later but just the basics scroll views what you want to use okay in exercise seven we're going to be building a very basic form we take a look at the final demonstration here we can see we can type into it we can say hello and we'll echo out essentially what our user input and if we take a look at the extra one all that's changing is after we go ahead and say hello it's going ahead and removing that value from the input so the project files are going to be in exercises building a form.js and buildingaform.md give you some information on the components to use as well as different thought process processes behind different components especially the text input and as i said we're going to be using a text input component to capture the user's input through the keyboard and then upon a button press we're going to alert hello whatever they entered and basically your starting point is completely blank file here so you're going to be building a complete screen with the knowledge that you've used previously everything you need to know to accomplish this has been covered in previous lessons as well as the buildingaform.md and then of course there are a few helpful links if you need them to get unstuck so let's get to it okay to accomplish this we can remember what our final code is looking like over here and we'll hop over to our exercise tab and get started first thing i'm going to import react from react i'm also going to import from react native a view text we're going to need a style sheet and we also know we're going to need the text input to capture the text input next we'll go ahead and export default our component and we'll go ahead and return from this a view which is going to wrap a text input because we've got our text input at top at the top we jump over we can see we also need a text element which is going to say what's actually what is your name that's going to be a label so let's go ahead add a style to it style is equal to styles.label and we're also going to need a button which we forgot to import so i'll import the button so if we take a look here we know that we're going to have an on press we're also going to have a title for our button which is going to be say hello on press we know we're going to do an alert but for now it's just going to be a to do final thing we need to do to set things up let's go ahead and create our styles object which is going to be count styles equal to stylesheet.create and we know we're going to have a label style and then we can render this and see what we've got okay so we know we need some padding around this so let's go ahead add a container style as well styles.container and i'll go ahead add this property and we'll just add a padding of 20 around everything okay looking better for our label let's go ahead bump the font size up to let's say 18 and the font weight to 700 or 800 that works okay so we've got our label up here but we can't see our text input at all if we click around in the area we know it is we can see we can actually see that value now what we want to do is go ahead and add a style property to this because text inputs have no styles by default so it's obviously really hard to see them so i'll add that input we'll go ahead and add a background color and i'll go ahead and set this to rgba 000 and then we'll just set it to a 10 opacity we need to make sure we remember to pass this value in a string okay so we can see it but it's not looking great let's go ahead and add a border radius to it of 5 and we'll also add some padding let's just say of 10 to it okay so we've got some breathing room around our value that's looking better let's also add some vertical space okay so things are looking a lot better now what do we want to do about this input well we need to interact with it via the props of a text input now there's a whole bunch of props we can actually pass to it but one thing we could start with is say a placeholder and our placeholder will be a placeholder for our text until we type something in so if we put in john doe there we can see it's there until we start typing in the input now that's not the easiest thing to see so we can go ahead and customize that placeholder text color by passing a placeholder text color prop to it and in this case let's go ahead and do that same rgba black but this time we'll do a 50 opacity on it so if we take a look now it's a little bit easier to read okay so we've gone ahead and done all this but when i press say hello obviously it's not doing anything we need to actually capture that input and the way we do that is via the unchanged text prop and this is going to be a function and the function is going to have one argument and that's the text of whatever they've typed in it's going to be the total text not just the latest element so with that in mind how do we actually store this value well state's going to be a great way to do that so what we'll do is go ahead from react we'll import use state and we'll go ahead and put it down here so we know from using state we get a name and a set name function and we're going to default this to just an empty string so now we can set the name to be the text and now down here in our alert we can actually go hello name so now if i type in a name spencer say hello we can see hello spence because i forgot the r but we can see everything's functioning correctly because we're using the appropriate props on our text input we're saving that value in state and then we're accessing that state from the alert on our button press now right now this is an uncontrolled component that means that all we're doing is listening to the input we're never interacting with or telling the input what it should be and this works great most the time it's the most efficient way to do it because there's no telling it what to do as well as having to listen to that value but let's say that upon an alert we want to go ahead and reset that value so that's a blank text input once again well just like we can pass an unchanged text to listen to the value we can also pass a value to it to tell it what to render and we want it to render whatever the name value is now if i go ahead and delete this and if i type something in you can see it works exactly the same but what's interesting is if we go ahead and change this on press so after our alert actually we can do it before we'll go ahead and set the name value to just be an empty string once again so now when i type in a value press say hello you can see we alert that value but we go ahead and reset this and that's because we've turned our text input into a controlled component which means we're telling it the value that it should be rendering now in the past there were some performance issues but in the last few years of using react native i haven't really seen any issues at all with passing a value to a text input so pretty much all of my components use this pattern there are other ways and that's kind of beyond scope of this lesson beyond scope of this workshop because it's more advanced but typically if you ever need to set or change a value of a text input using the value prop is the way you'll want to do it and with that we've learned how to build a very basic form using react native with the text input component all right moving on to exercise eight creating long lists now we've covered the scroll view before and the scroll view works but once you get to a lot of data like we see here in our final example we've got quite a few names we're rendering here you can start to run into performance issues and you want to be cognizant of that because you want your users to have a really good experience so we'll cover how to handle long lists as well as in the extra credit one you can see in this one we're actually taking all of these names and breaking them up by last name and putting them into sections with these cool section headers that stick to the top all kinds of stuff so to get started with this one go ahead and go into your exercise file or exercises directory and find the longlists.js longlist dot md in here you'll learn about the flat list and the section list how they work kind of the basis behind them and how to actually use them and then at the end we've got our exercise which we're building this final screen and the extra credit where we're just breaking it all up into sections there's a lot to these ones it's important to know how to use basic to start but you can really customize a lot so of course check out the helpful links and kind of have these ones know where to find these flat lesson section lists because i guarantee you'll be using them all of the time and it's really powerful component to learn how to use so let's get started all right let's get started on this so all we've got here is a basic array of data so we need to actually build our component first off i'll import react from react i'll also import from react native a view text the flat list i'll also import the style sheet let's go ahead and create a styles styles object so stylesheet.create we'll just pass it an empty object for now then go ahead to our export default of our component we'll actually go ahead and do a normal component here and then inside of here let's go ahead and render our flat list now looking at the flat list api we know it expects a data prop in which we'll go ahead and just render the people so nothing happens because we're not actually telling it how to render yet and we also see this warning down here we'll come back and take care of that in a minute so the second prop that you need to have in a flat list is going to be your render item and this is going to be a function that returns a component we're going to go ahead and return a component with a view and a text and if we look at the data we see each piece of data is an object which has a another object called name and then the data so we're going to go ahead and render a user's name we'll just go ahead and say item.name.first now item is actually going to come from the first argument which we could just call section data or something along those lines it's an object and we want to go ahead and pull the item off of that object to actually render what's being rendered for this single item and since we're using object destruction here the name does matter so it needs to be item let's also go ahead and render the last name so we'll do item.name.last okay and we see our full list of people showing up and if we scroll down we can go all the way down to the bottom we've got everything we need now we have that warning if i go ahead and refresh this go into my exercise we see this warning down here and basically what this is saying is that there's no way for our list to know what is a unique piece of data so anytime our array changes it's going to go ahead and re-render everything that's not necessary if we only add one person we only need to render that one new element we don't need to re-render the rest of the list so the way we do this is by passing a key extractor prop to this and in this key extractor prop we're going to have a function which takes an item and that item is going to be the first argument it's not an object it's just the item as that first argument and then we need to return something unique so very common you'll see an id on a piece of data most likely you're going to be returning that key as or sorry that id as your key in this case what we'll do is go ahead and actually return the first and last name which will be unique in this data set as our unique key so i'll use string interpolation here and i'll go ahead and just grab the item.name.first append that with a dash to the item.name.last and if we render this and refresh the app go into it we can see we're still rendering our list but we don't have that warning now let's go ahead and add some styles to this just to make it look a little bit better so i'm going to go ahead and add a style equal to styles.name here so we can render or style that name we'll also add a styles.row to this view so if we go up to our styles object we'll add a row i'm just going to add some padding of 10 to this and then for our name we'll just go ahead and bump the font size up to 16 so that we can see it a little bit better now everything's rendered with a bit more space what about actually adding an element to separate components one way we could do this is let's go ahead and create a separator style we'll give it this a background color of rgba zero zero zero with a fifty percent opacity and we'll give it a height of one now we could render the separator as just a view let's say below the actual row so if we render this we can see we get a separator element for each item just below it now this is perfectly fine but it's not the best way to do it for example we don't have a separator at the top but we do have one at the bottom of the list what if we don't want a separator element at each end of this well what we could do is we've got a prop called the render separator sorry it's actually the item separator component which will render a component in between each item and in here we could just go ahead and drop this separator component that we made remove those react fragments and return this oh and this item separator component should actually be a function as well and if we render it then we see it is being rendered and we see we've got all these separator components between each element but if we go to the bottom we don't have one because that's the end of the list now if you wanted to add components or separators at the very top and bottom you could say the list header component is going to equal this view and we could do the same thing for the list footer component and now you can see we've got that separator at the very top and at the very bottom so using the flat list just makes rendering a larger list of data more simple and then to actually customize the way it looks we've got the render item for each item and then we can specify separators between each piece of data okay now jumping over to our extra credit one which if we look over at it we can see all of our data is grouped into sections the hardest part of this is actually going to be rendering that content into sections or breaking that content into sections rendering it's really quite simple all we need to do is replace our flat list with a section list and then we need to switch out our data prop to sections and the sections is actually going to take an array but in this array we're going to have say a title here we'll call this group one for right now and then each section is going to have a data array itself and this one is going to be oops this should actually be our people array now if we render it and go back to our exercise we see everything is rendering exactly the same because we have a section list with one section a flat list is exactly that it's a section section list with a single section now let's say we want to add a title to this well just like we did with our render item we have access to a render section header and a section footer but we'll just work with the header right now now in here just like we access the item via object destructuring we can do the same thing with the section here and that'll give us the entirety of that section that's being rendered all we care about is the title so let's go ahead and return a view that wraps text and we'll just go ahead and render the section title and here you see group 1 being rendered i'm going to go ahead and remove this list header and footer component just so we can focus on what we're working on here okay so we see group 1 being rendered up there let's go ahead add some styles to this so i'm just going to go ahead and to my view at a styles.section header and in this section header i'm going to also add a padding of 10 and a background color equal to rgb 170 170 170. so just a light gray background and then we can see we've got our group and we see that that group title or that section header actually sits at the top of our list until we would actually hit the next one okay now that we've got the section list part done let's actually write a function that will take our people array and break that into groups or sections based off of the user's last name so i'm going to create a function and call this group people by last name and that's going to take a data array which i'll do underscore data for now and then i'm going to set a default value to be an empty array just in case no argument is actually passed to this function just a little bit of defensive programming there now we know we're going to return an array so i'll just go ahead and return an array for right now and then we can replace our sections down here with a call to our group people by last name and i'll go ahead and just pass the people array to that function so if i return this we should see nothing showing up because we just have a array of empty sections so let's go ahead and group things now what i want to do is go ahead and copy data into a separate array and the reason i'm doing that is because i never want to mutate data outside of this function so i don't want to mutate the actual data that's being passed in or the people array because that could have side effects so by using this array spread if i i think that's what it's called basically we're making a shallow copy of the the data so we don't have to worry about mutating it okay with that said let's go ahead and group our data so i'm going to create another variable called grouped data and in this i'm going to say data.reduce now reduce is an array function much like map or for each but we're going to be able to accumulate values together so the way this works is our our array reduce is going to take a function and we're going to have an accumulator argument as well as an item our accumulator is going to accumulate the data we return and our item is going to be the item that's currently being looked at and then as a second argument to reduce so we've got our first argument which is the function and then as a second one we want to give an initial value for our accumulator which is just going to be an empty object okay so let's go ahead and grab the first letter of the last name so i'll say the way we get this is by saying item.name dot last at the first character and then i'm going to go ahead and convert that dot to upper case and i'll just call that the group so now if we look at this we should see group when we look at our console and we can see we do indeed see all the first letter of all the last names okay with that information in mind what we want to do is say if our accumulator already has an item for this group so we've already seen a last name that starts with c for example then all we want to do is at that item we know that we're going to have a data element and we're just going to go ahead and push the item to it now we're making some assumptions here how do we know there's going to be a data array there that we can push the item to well if we don't already have a group there what we're going to do is specify that the accumulator at the group is going to equal an object where the title is going to equal the group or the first letter of the last name and it's going to have a array of data a data property with an array that's going to have the current item so if we don't already have the letter c we're going to add a title with the name of c and then we're going to have a data array and we're going to put that item we're currently looking at into that array so let's look at what our grouped data actually looks like and i guess i should actually return something from this first so we'll just go ahead and return our accumulator from this function okay so if i swap over to the terminal we can see we've got an object and we've got multiple objects within that object for each section now this is an object in an object or multiple objects in an object we need it to be an array so let's go ahead and convert that into an array of our sections so i'll go ahead and say const sections is going to equal object dot keys on our grouped data and then i'll go ahead and map over that so object.keys is going to give us all the keys for this object and i'm going to get a key from this and basically all i want to do is return the grouped data at that key then if we return the sections that we have we can see we get all of our data grouped by the section so all we did was take this so say we've got the letter s we look at that we map over each key one of those keys being s we see that and all we do is return the grouped data at that key and we just go ahead and drop that into an array because map will go ahead and return an array now one problem we have with this is our data is not sorted h becomes comes before s so we need to go ahead and order our data correctly so to do that we'll go ahead and say sections.sort we're going to get an a and a b as our arguments to our sort function and all we have to do is say if a dot title is greater than b dot title go ahead return 1 otherwise we'll return negative 1. and that'll just go ahead and sort our array in the correct order you can go ahead and look at sort as a array function and how it all works typically i don't use sort directly i like to use like low dash sort by but that's kind of beyond scope what we've done here is taken our people array which is a single array containing a bunch of data various last names then we've gone ahead and used a section list put that into sections via our group people by last name which i think you'll agree was the most difficult part of this was just grouping our data and then we take those sections and we render it we can determine what our section header looks like by the render section header function and we can determine each item we have via the render item prop so with that we've gone ahead and covered two ways to cover large lists efficiently in react native okay moving on to exercise nine working with an api basically all we're going to do is basically expand on rendering with the long list or a flat list like we covered in the last exercise but instead of having a bunch of local data we're going to go ahead and get that data from a remote api so if i go over to the final tab all of this data that was just rendered is actually coming from an api and then if we look at extra credit 1 all we're doing is adding a loading state there and then finally for extra credit too exactly the same as extra credit one except we're going to go ahead and pull that out and write our own custom hook so to grab our files we'll go into our exercises directory and go down to our working with api.js and md as always there's some background information on how to actually work with remote apis in react native and some important information you may need to know to actually do that effectively as i said the exercise is going to be getting data from a remote api and i have an api that you can use here to go ahead and get that list of data so you don't have to go and search for anything and then the extra credit is listed below and we're going to be touching on a handful of different apis here so if you get stuck as always we've got those helpful links down at the bottom so you can go ahead and help yourself get unstuck so let's dive in okay let's go ahead and dive into this before we can do so we need to import two things from react first off we're going to grab the use effect hook and the use estate state hook from react now you state basically we've used this before so we know this is a way we can update data and by default we're not going to have any data in our array but we need to be able to update it once our api resolves and we have that data so we know our people are going to live in state so that we can update that information so i'm going to create a use state with the default value of an empty array because that's what we'll have by default and then i'll go ahead and pull the values off of the return of our use state we're going to have an array of people and we're also going to have a function to update that array of people we'll then use that people array down here as the data prop for our flat list so we see nothing being rendered now if we go ahead and grab our api over here api url from the md file what we can do is now call this api and we're going to go ahead and use the use effect hook to do so the first function of the or the first argument of the use effect hook is going to be the function that should be called and then the second is going to be an array of dependencies that will cause that to be recalled now we only want to call this api initially when this component first renders so we're just going to pass an empty array to our use effect so what's the function we're actually calling well we want to go ahead and fetch this url our api url and then we want to grab the response so i can go ahead and say dot then response and we'll go ahead and take a look at the response and if we look at this we can see we have data but nothing valuable we don't see any information we would use to actually render and that's because we're using fetch we need to go ahead and actually convert this value into json and this is all information that's covered in the fetch documentation i link to basically all we need to do is add a res a dot then before this one where we're logging things and we're going to convert that response to json we're going to return that which is also a promise function so once that resolves we'll go ahead and go down to our console.log and now if we look at our response we see we've got an info object which we don't care about and results array which has the name with the first and last name on there that we're interested in so to render this all we need to do is say set people to equal response dot results and we've got all the data that we need to here now fetch is promise based and we need to take into consideration that our api may fail maybe it'll timeout maybe something else will go wrong and we want to make sure we catch that error and do something with it so we can just add a catch to our promise chain and that will return an error and all we could do is say we can log that error if we get one and we can also say alert sorry something went wrong so this will prevent the app from crashing because it's a handled error and then we can also log it to crashlytics or something and we can also give the user some notification that something went wrong we don't know what can't really fix it but something went wrong so that's the basics of grabbing information from our api okay for extra credit one if we look at it we can see we basically have a quick loading state and first thing we need to do is implement some sort of loading state i'm on a fast internet connection so i get a response from this very quickly so all i'm going to do is go ahead and wrap my fetch call and a set timeout which set timeout is going to take a function and a delay in this case i'm going to throw in one millisecond or sorry 1000 milliseconds one second and once that completes i'm going to go ahead and call my function and just out of best practice something you should always do is set timeouts going to return a timeout which if something were to go wrong and before this completed we want to cancel this timeout so this component unmounts say we go back we want to unmount that so with a use effect if we return from this use effect function this function will get called when this component unmounts or this use effect instance is complete and it's being recalled whatever it may be so basically this initial part is going to be the build up and then the return function from our use effect is going to be the breakdown of that and in this case all we want to do is say clear timeout and pass that timeout that's returned from our set timeout to that that way it helps us prevent any memory leaks this is really important whenever you're using a set interval but back to the point of this so if we do this now and we go back to our exercise tab we can see nothing's showing up for a while and that's because we have that one second delay that artificial delay in here so if we want to show the user a loading indicator all we need to do is from react native we're going to import an activity indicator from react native and then what we can do is actually track a loading state in addition to our people state so let's go ahead and grab a loading and a set loading and we're going to default this value to be true so by default our app is loading data and if we're loading data what we want to do is if the list is empty and we can know the list is empty by using the list empty component which is going to take a function and in here we can say if loading is true let's go ahead and return our activity indicator we'll go ahead and add a size of large to it otherwise we're just going to return null so if we're loading and we have no data show an activity indicator if we're not loading and we have an empty array that means we got a response we just didn't get any data back we're just going to return null so i'll save this and now we can see that loading indicator showing up when we're waiting for our data and then once our data shows up we no longer have an empty list and our loading indicator goes away now one problem we have with the code we currently have is if say we set people when we get a response to be an empty array we're no longer waiting for our data but we just continue to see that loading indicator because we're never getting out of this loading state so what we want to do is whenever we resolve this promise chain we want to set our loading to be false also if an error occurs we want to set loading to false because we're no longer waiting for any data to come back and if i do that we can see even though we're getting no response back from our api we're just getting an empty array our loading indicator still goes away once we resolve fetching our data and rendering it now way you could shorten this is by saying dot finally which is also another function which will be called after our catch after our then and we can just go ahead and drop our set loading to false because it's the same whether the api everything works as it it should or if it fails if we go back in here we can see it showing and then it disappears let's go ahead get our correct result showing up and we can see everything showing up correctly now we see right now that sometimes we don't have a loading indicator and just to be safe say something changes we can go ahead and add a set loading to be true whenever this effect is called okay last thing extra credit too wrapping this into its own component basically the reason we would want to do this is this is a lot of code in our component our working with api component that though it pertains to this it's not directly related to our rendering of this individual component maybe we want to render this stuff somewhere else we don't want to have to copy this or alternatively we just want to separate our concerns separate our code a little bit and pull this out into a separate function to make it a little bit easier to read now creating a your own component is very straightforward all we need to do is go ahead and define it so we're going to call this our use people api okay so this is going to be a function do we need any arguments to it no we don't because there's nothing we need to pass to it it's just calling a static api and it's returning information now what all we want to do in this is basically all of our people getting and setting and all we want to do at the end is get the people and the loading state so i'm going to go ahead and remove this entire use effect from the component itself and drop it in our custom hook now we also need to get our loading information in our people which is our state so i'll pull those out into our custom hook as well okay now we're not using people and loading in this custom hook anymore and that's because that's where we actually want to use that within our component so we need to return those items from our custom hook so all i'm going to do is at the bottom of my custom hook is return an object which has the people and the loading state now to use our custom hook all we have to do is say use people doesn't take any argument so we'll just call that function and we know it's going to return an object with people and loading so i'll just go ahead and pull those values off of it save it look at our exercise and we can see everything works exactly the same but the actual component itself is much more simple we just know we're using a hook called use people which returns people and loading we don't care about the implementation in this file so it allows us to really focus on okay does my flat list do what i need it to when we have items or when we don't have items or when we're in a loading state i don't care how that information gets there i just need to focus on rendering it and this kind of just a larger principle of building react react native apps in general on how to structure your code to make it easy and maintainable and testable as well once you get further along so with that we have completed working with a remote api in react native okay exercise 10 is going to be much more simple much faster than exercise nine and this is just going to be about breaking files up or breaking components and a file up into multiple files to make it more easy to kind of read and understand and test things out so for example like that use people hook we wrote in the last exercise that could be in its own file so that that one component file can be much more focused this is important once things get more complex and you're doing more things for example measuring when things change if the app is open or closed or what the state is previously all kinds of different stuff you can have a lot going on in a single component so you want to break things up where it's more easy to look at it so getting back to this exercise if we look at the files for this lesson so going into our exercises and then multiple files.js and multiple files.md basically what this is all going to be about is understanding imports and exports in react native because an import and export is how we're going to get a function or a component from another file into the file we're interested in it so we'll give some information about that background and then the exercise is basically just take this component which we're seeing here just says hello just like the exercise before and the final looks 100 the same but this button now lives in a separate file so go ahead read through the import and export explanations the difference between named imports or exports and default imports or exports and then i've got a link that goes into the details on modules which is the overarching concept of imports and exports that you can read more about so let's dive into exercise 10. okay so we've got our multiple files.js and we can see we have this component button i'm just going to go ahead and remove this export shouldn't have been there in the first place but anyways so we've got this component button and we're using that button component to render our say hello text okay now let's actually switch over to exercises we want this component to live elsewhere so what we'll have to do first off is create a new component put it wherever you want that makes sense in your directory structure we're just going to go ahead and put it in exercises so i'm going to create a button dot js and then i'll go ahead and grab my button component and cut it from this file and i'll go ahead and paste it in here now you can see there's a bunch of errors going on and this is one of the nice things about eslint it tells you exactly what you need to do once you start breaking your code up now first thing is we need to import react because we're using react now we also need to import from react native a touchable opacity and text component and then if we look here in our button.js we see button is assigned value but never used and that's because we're never using the button component inside of our button.js that's because it's not meant to be used here we want to import this from somewhere else now we could go ahead and say at the very bottom of this file we can say export default button okay that's going to get rid of that warning because we're saying this button is meant to be consumed elsewhere then if we go over to our multiple files dot js we can see one we no longer need our touchable opacity and text here because that's handled by our button but our button component if we look here button is not defined we need to grab that so what we can do just like we have our imports up here we can go ahead and import our button from dot forward slash button.js because multiple files.js is in our exercises file and we just need to specify the path to the file we want to do or the file we want to access if it was up a directory say in the solutions directory we could change this to dot dot forward slash that dot is going to go up a directory into our solutions directory and we could access this from say multiple files.component.js but we want to use our one that we just wrote so i'm going to say dot forward slash button now why am i using the button without the curly braces around it well that's because we used well first off let's save this and make sure it works okay we still see our button so why am i using this variable name without any curly braces around it that's because i'm using an export default from this function so another thing with this is we can name this whatever we want we could call this our asdf component and then just drop in asdf for our button and it's going to work the same we can only ever have one default export from a component excuse me from a file so we can name it whatever we want now if i were to change this to be export const button this is going to be a named export so in this case if i save this and i want to access this i need to wrap it by curly braces and go ahead and grab that button component and then this naming does matter so i'm going to go ahead and change this back to button typically you're going to want to reach for a named export and import it just gives you more flexibility moving forward and it lets you be more explicit right now you don't have to necessarily choose between a named import or a default import or rather i guess you would specify that on the export side so if we look at our button.js you can see we've got a named export and a default export well i can grab both here by just saying we'll do the default export as the asdf component and we've also got our named component and then i could go ahead and copy this and i could have an instance of each and we'll see the exact same thing because it's the same component just being exported differently so you've got a lot of flexibility in choosing how you want to do your imports and exports and if it's your component you're exporting you can decide do i want to do a default export or do i want to do a named export so with that you can figure out basically how to extrapolate a single file or a single component and break that up into more and more files as you need to to make understanding and writing your app a bit easier okay exercise 11 we're going to be taking a look at class components our files are going to exist in the exercises directory with the class dash component.js in the class component.md now if you're just getting started with react react native all you've seen so far is basically using functions as components historically though this hasn't always been the case especially with components that have state in them or tracking you know how many times has a button been pressed for example historically there have been react class components and we can see an example here in the documentation and basically the background will cover all of this but the reason i want to cover class components even though it may not be the default case that you reach for is as you work on older projects or you look at older documentation or you look at different implementations of doing things you may see this syntax used so although you may not use it much in the code you write i want you to be familiar with it so that as you look at older tutorials or older examples you can still get a sense of what's going on so go ahead read through the background information check out the exercise which is just basically going to be building a button that counts number of times we press it and then if you get stuck or you want to learn more go ahead check out the helpful links and good luck okay let's go ahead and get started so looking at class components.js first and foremost we know we're going to need to import react from react and if we look at our final example we know we're going to need a button component from react native we're also going to grab a view and a text just to wrap it all up and that should be all we need from react native so let's jump over to the exercise and take a look first off what do we want to do well let's define our component so i'm just going to call this screen and the way we do this is class screen and we're going to say it extends a react dot component and by extending react.component basically it knows how to manage state updating it knows what a render function is it knows what all the things are that we're going to be interacting with and before i forget we're going to make sure we go ahead and export default screen okay first off let's go ahead and render the button that doesn't actually function yet so to do this with a class component we're going to have a render function every react component is going every react class component is going to have a render function it's basically the one guarantee and from this render function we're going to go ahead and return our component so go ahead and render a view which has text we're going to have the press count and then we'll also go ahead and render our button which we'll go ahead and give a title press me and then an on press which will be a function that will just say alert to do for right now so now if we look at our exercise tab we see our button let's go ahead center so it looks the same rather this should be align items center and we'll put a little margin at the top as well okay so we want to start tracking our state now because we're rendering it right it's just a normal component just slightly different syntax now to track state what we need to do is go ahead and access the constructor prop on a class and it's just a normal class thing and what we want to do is actually initialize state on this component and to do so we'll say this dot state is equal to an object and then we can go ahead and pass the properties we want to access on it in this case we're going to have a press count property state property and we'll default that value to 0. now you can see we're throwing an error here and basically with this constructor something you always want to do is call super at the top and this is just a syntax thing we won't cover it too much here but basically it's just something that we're going to need to call and something you'll also often see is props and these are props that are passed to this component going ahead and calling super and passing those props to that but again just understand the syntax basically all that really matters here is this dot state so the way we would actually go ahead and access this is down here in our text we will go ahead and use our curly braces and say this that state dot press count and now we can see zero showing up now to update it we can go ahead and down here a special function that's coming from a react component we're extending is this dot set state right because we don't want to access or change state directly otherwise we won't go through the correct rendering process so what we could do is down here say set state this is going to be an object because we're changing the entire state object and we only need to pass the properties we're changing we don't have to worry about the rest of it we just need to send the press count in this case and if we had other properties it will go ahead and maintain those and only update the properties that we've passed in the object to set state so here we can go ahead and add our press count and we can say our press count is going to equal this dot state dot press count plus one so now if we press this button we can see it's going ahead and incrementing it now you're seeing a warning down here and basically this is kind of an anti-pattern when using set state or even use state in react native whenever you're actually accessing the state to ensure you're using the latest state variable independent of the rendering you want to go ahead and actually pass a function to set state so if we go ahead and pass a function to it this function is going to take the present state as an argument to that function and then from this function we can go ahead and return our object which will go ahead and update the state so we'll want to go ahead and update our press count and this press count is now going to equal state.press count plus one we can save this and if we press our button we can see it increments so the process is the same it's a little bit more verbose but there are some benefits or it's it's just a different way of building component and i want you to be familiar with it because you may very well see this in tutorials i write other people write whatever it may be i want you to be familiar with this syntax so with that we've gone ahead and done a quick intro to the class component in react native okay exercise 12 the final exercise in this workshop basically what we're going to be exploring is the component life cycle and if we go ahead and actually open up our project files component lifecycle.md you can find that in the exercises folder component lifecyclemd will also open up the js file and what the component lifecycle is is basically just like we have a lifecycle of we're born things change we die components the exact same thing it mounts it updates it unmounts and the component life cycle is how we tap into that and i'll give you a bunch of information on the background the use effect hook is really how we're going to do it uh tap into it which is what we've talked about before on a more basic level but basically here what we're going to be doing if we take a look at the final tab is we're going to be updating state based off of it off of an automatic listener and this listener function you don't need to worry about how it's implemented all you need to know is that it's a function that you call and this initial listener function will take one argument and that argument's going to be a function that's called whenever it updates something else that's important to know is that to unsubscribe from this or to stop the listener you're going to return an unsubscribe function that when you want to stop this listener from running all you would do is say unsubscribe and call that function listener two which is going to be for the extra credit and if we take a look at the extra credit basically what this is adding in here is that when you pass press the button it's going ahead changing the listener name from cat to dog or dog to cat and restarting the update count timer and the only difference for listener 2 is that it takes two arguments the first one is going to be a listener name like dog and then the second argument is going to be that function that's called at the given interval now something else to note is that if we look at the console if i go back to exercise and clear this you can see that when we go to final we're going to see subscribe to listener it's going to give us a console.log every time the update listener or that update function is called which is also what's calling this updating state and then when we leave that tab or go back to the previous screen we're unsubscribing from that listener so this is a way to verify that it is in fact unsubscribing successfully so that you don't have a memory leak going on so that's a long intro go ahead read through the documentation or the the lesson information the background and all of that check out the exercise and extra credit as always i've got helpful links if you get stuck or want to learn more and then i'll see you as we work through the solution okay let's go ahead and get started so first thing we need to do is figure out how are we going to detect when we land on this screen and we've used this component or this hook before and it's the use effect hook so if we go ahead and call our use effect hook we know that takes a function as a first argument and an array of dependencies as the second argument well initially for this first solution we don't need this to rerun it just needs to start when we land on this screen and it needs to stop when we leave this screen so we know this use effect will call when we need it to so i can go ahead and say listener it's going to be a function and we know that this function is going to be called at some increment we don't care what it is we don't care how it works we just know this function is going to get called so if i go ahead and update my state whenever this is called all i would need to do is say set update count i'm going to get the current count and all we need to do is go ahead and return current count plus 1. so if i save this we'll also open up the console we can see our listener is updating well first off we subscribe to the listener and we're updating but if i go back to the previous tab we can see this is still updating and this listener is still running we also get a warning can't perform a react state update on an unmounted component this is a good hint that you've got some sort of memory leak going on or something happening that once this component is unmounted there's still some code running from that screen so we have a problem here now as i said before this listener is going to return a function that's going to allow us to unsubscribe and we just need to call this function when our component unmounts well with this use effect hook we know that if we return a function from this use effect that once this component stops running or breaks down then this function will be called well all we need to do is then call that unsubscribe function when this component unmounts so if i save this i'm going to go ahead and refresh the app do a hard refresh just so that this memory leak does stop and then if i go ahead go into my component we can see okay we're subscribing to the listener it's updating as we expect it to we see that in the state and then if i go back we see that unsubscribe from listener happening and that's because we're using the essentially on component mount or when it mounted we're going to go ahead and call this listener start and it's only ever going to happen when we first mount because we don't have any dependencies to listen to and then when this component or this effect unmounts or it stops we're going to go ahead call this function in which we unsubscribe from our listener so that we no longer have a memory leak once we're not on the screen anymore we don't need this listener anymore go ahead and remove it okay for our extra credit this one's a little bit different first off we need to go ahead and grab our listener to function and basically the only difference between listener one and listener two is that listener 2 will go ahead and take a listener name here okay and basically the first argument is going to be the listener name the second argument is going to be the function that should be called whenever that listener updates so we've got a few issues here listener name we need to go ahead and define now if we look at our extra credit one basically this is what this listener chain this listener name is what's changing whenever we press this button so we know we're using it down here in our component state so let's go ahead and define this or we're using it in our component so we need to define it in state so i'll go ahead and add my listener name and set listener name functions we'll use state and we'll default this to a value of cap okay so we also need to add some text that specifies which listener they're currently listening to so we're currently listening to the listener name listener okay i'll save this we'll look at our exercises tab that's looking good now we need a button to actually change the listener name so i'll add a button these are all things we've covered previously title is equal to change listener name and on press what's going to happen well we've got a function we're going to call our set listener i'm struggling to spell listener now set listener name and basically if the value of cat if the value is cat we're going to change it to dog if it's dog we'll change it to cat so we can go ahead and use a function here and we'll just say if the name is equal to cat go ahead and return dog otherwise return cat so if i press change cat change listener name we see cat turn into dog oh actually i'm looking at the wrong tab we'll switch over to exercise and we see we need to actually define buttons so i'll import that from react native so now if we look at it we see our cat and dog showing up but we see that as we're pressing this button we're just running the same listener again and again and if we look at the state we can see cat listener updating if i press this nothing's happening if i go back it unsubscribes from the cat listener that's perfect but we need to figure out how to detect that state change now previously i talked about how we've got in a use effect the second argument which is an array of dependencies that when one of those dependencies changes this effect will be called and if we're breaking it down the breakdown function will also be called so to basically restart our listener for this whenever we change our listener name we just need to pass the listener name as a dependency to our use effect so if i save this go back to our tabs let's go back and just restart this whole thing okay so we'll go into it we're listening to our cat listener if i press change cat listener name we can see okay we're listening to dog listener we unsubscribe from the cat listener we're subscribing to the dog listener and we're updating that the problem is we're still seeing the same update count so whenever our listener name changes we're also needing to update our state count and the way we can update our update count is basically whenever this effect is called we'll go ahead and call set update count to be zero so now if we look anytime we change our listener it's going ahead and restarting that listener update count from zero now you may be thinking well this is going to cause an extra render when my app first loads the value 0 we're then calling set 0 set update count to 0 as soon as it loads fortunately react being smart react being what it is it's going to c0 is equal to 0 that value hasn't changed so there's no need to do a re-render so there's nothing to be worried about by doing this set update count that just ensures that any time use effect starts it's going to go ahead and set that value back to our default state so with that we've looked at the component life cycle for updating unmounting as well as the initial amount all right and with that we're done with the react native fundamentals workshop i hope it was super valuable for you and you learned a lot from it you're comfortable going forward and actually building all kinds of cool react native apps what's crazy as an online educator is seeing the drop-off rate that people have in online courses so if you made it this far you're in a very very small group of people who've actually gone through invested the time to learning this skill and i hope that it was a valuable use of your time i do have one ask of you is that down below there's going to be a link to a survey i'd love to learn what you learned from this what you were struggled with and what you'd like to learn in the future regarding react native and until i can actually get through all of those survey responses if you're interested in learning more about react native i have created react native school which is kind of your one stop shop for learning everything reacting and we've got hundreds of tutorials uh dozens of courses slash classes that you may find interesting so go ahead and check that out at reactnativeschool.com and yeah with that just want to say congratulations one more time and i hope to see you in the future see ya

Channel: React Native School

Views: 20,378

Keywords: React Native, React, JavaScript, Fundamentals, 100 Days of Code

Id: rLmdmLhfwvQ

Length: 110min 18sec (6618 seconds)

Published: Wed Sep 30 2020