Introduction to React Native Web

hey how's it going everyone it's lee halliday and today we are looking at react native for web so most people think of react native as a way to build mobile mobile apps but react native for web allows you to use the same react native api and components and stuff like that but to build websites so who would actually do this who is using this so far twitter is actually so if you were to right click into twitter and i've got my um react tool here well if you look it's just just divs for the most part like everything's pretty standard but if you go over to components what you're gonna see is that you've got view text and these are actually different components that come from react native web and we're going to be looking today at how we can convert this simple little scoreboard game i created in a previous video from using standard html to using react native web so everything on this simple app will be converted over and we'll talk about some of the differences between the two approaches you might say so we're going to hop over here and i'll just give you a quick overview of what this thing's actually doing so this was a game where you enter the number of pi digits you've memorized so here is pi here's a little function that calculates your score so how many of the digits did you get correctly so if i were to say lee 3.14 so that would be one two three four submit that you can see that my score is four that's how that works so what we've got down here in the actual component we're loading the scores from uh from a serverless function we have in next.js i'll link to that video if you're interested in in this part of it and storing the scoreboard in redis we've got some state and then we get down to where we'll be spending most of our time where we have divs h1s inputs buttons uls allies stuff like that this is where we're going to be doing a lot of the conversion today so to start with i'm actually just going to get rid of styles and that's probably going to break everything i would imagine yes because styles isn't um isn't used anymore so the first thing we do in react native web is we don't sort of use class names and we don't really use inline styles much either sort of the way it works is you create this thing called a style sheet so that's we're going to import first so we're going to import style sheet from and we're going to import it from react native so i just said we're doing react native web right and if you look in the package.json you're actually going to see react native web yet here you can see i'm just importing from react native that's because i have this little babel plugin called react native web and basically what this does is it looks for you importing from react native and it basically swaps it out for react native web why would you ever want to do that well imagine you're sharing code between your your mobile app and your website you can just import from react native for both of them and the babel plug-in will do the conversion to load those components from react native web instead of the the standard react native so we're going to go down to the bottom and we're going to create some styles so stylesheet.create and the first one here that you can see is a container so and it's a div with a class name of container so if i were to do this in in react native web the first thing i would do is actually convert this to a view divs don't exist what you have that's sort of similar is a view so we need to import this as well i might as well import some of the other things we're using so we're going to be using text text input button and flat list just so i don't have to be hopping up here at the top and importing them every time so instead of a div we now have a view and instead of a class name we have a style and i'm actually going to comment all of this out because otherwise it's going to keep giving me an error and we'll just get this up and running first and then we'll keep moving forward and we'll like uncomment stuff as we go so our styles what we're going to do is we're going to say this is a container and how we're going to style this is we're going to say that it's got a width of 50 percent and we've got a margin left of auto and a margin right of auto so it's a little bit different the the the properties you use it doesn't line up one-to-one with css it's fairly close those you can most of the time just guess and it will be right but look into the react native way of styling and and you'll see some of the differences so we have an empty div right now that's not very helpful so why don't we pop out this h1 and we will convert an h1 to text so you can't just put text inside of react native web you need to actually use the text component and instead of class name we have a style so it does show up but we haven't implemented the heading style yet so why don't we just come down and we'll say heading and we'll give this a font size of 2 rem we'll give it a bit of margin top and and if this is not the way to do things in react native forgive me i am a beginner react native developer i know enough to just fool around but i'm by no means an expert so my apologize please correct me we'll add a bit of margin bottom as well one rem and now we have it showing up for the most part correctly if you were to come in here you'll see that it's not an h1 it's um it's just a div i think there is a way to sort of make these semantic but i'm not that advanced yet so you can do some research on your own we have that showing up next thing we want to do is basically implement our input so you don't use an input you used text input we can probably just get rid of the type so it does have a value still it doesn't have an on change event though or it it may but it's not really the one that we want what we want is actually on change text that just gives us the new value of the text so we can basically replace this with text and then we would want to replace our class name with the a style from our style sheet down here so we can go down and we can add an input and you'll see by default it's it's basically it it strips everything out of these things so we need to go and add some styles back the way that we want them so we're going to give a border color of black we're going to give a border width of one pixel we'll give some padding of one rim and we'll give a margin bottom of one rim as well so there's our input just like that you can change it because it's listening for the uh on change text event and it's updating when the state changes to show that new value so we're we're making some progress we're going to quickly do the same thing for the pi value so i'm just going to change this to a text input we'll change this to on change text which will give us the new value and we'll give this the new style so there we go the game is starting to tape take shape again so next we have our button so i'm going to copy and paste this button and then we're going to have to make a few changes to it because that's not quite how you do it in react native for web so let's just get rid of the class name completely we'll just use the default styling that you get with react native web so you don't do on click you do on press that's the one change here and you don't put the text sort of between the button i'm sure there is a way to put text in there but the easiest way is just to make this self-closing and to add a title so submit like that so i think i messed up something what did i mess up title hmm button title oh okay this is why it's because i was using the html one again so we need to use the actual button from react native web would do it there we go so now we got a button and it's submitting data on press to my backend so now we're going to go down and replace this basically the last thing so i'm just going to get rid of these comments now and right correct um there we go write some correct jsx so we need to replace this ul with a flat list and this is probably the biggest change from what we've seen above so i'm actually just going to do it sort of in addition and then you can see the comparison of one versus the other and then finally i'll just delete this so we want a flat list self closing and the first thing we do with a flat list is we pass in the data that we're going to be converting into a list so data would be this data here so what does data look like it's basically an array where we have name [Music] and then a score and these are repeated like that so that's the data we're working with and the first thing we need is basically we need a way to tell it what the key is so you know how here you typically have a of a key on the thing that you're mapping well flat list does it for us but we need to tell it where to get that key from so for that we're going to implement the key extractor prop and that will give us the item as it's iterating over each element of this data array and we're just going to return item dot name so we would we would want this in unique like that perfect so now it knows how to get each key but how is it going to render each item inside of this flat list so we're going to implement render item which gives the item and then basically we just put a react component like what do we want it to render as it's looping through and rendering each one so we are going to put a view so basically a div and inside of that we are going to put some text just like that and so let me just save this to get some formatting so the text would just be item.name the the person's name on the scoreboard and then item dot score like that and then we can come back and i've messed up something oh i know so you don't get the item directly what you actually get is an object that contains the item like that so you get some other things along with the item and there we go so we've got ebert at 12 smart at six etc so obviously you'd have to add some styling if you want the margin if you want the circle on each one because it doesn't come by default it's just basically a bare bones if you were to actually inspect it's actually just divs many divs inside of each other so i guess that's one complaint of react native web you end up with just like a million divs it's not like semantic html like people are used to writing in so if i were to inspect twitter for example you can see it's just like div on div on div on div just all the way down that's because they're using react native web but what you get in return is the ability to share code with your mobile app so it's it's a trade-off i guess but um it is pretty cool so i'm gonna get rid of that i'm gonna get rid of the old list and you can actually see you're not limited to only writing react native web inside of your so in this case it's a next.js application you can mix and match so here i had a flat list here i'm still using the ul what you couldn't do though is go and use this ul inside your mobile app because the mobile app wouldn't have any clue what a ul and an li is so i'm going to get rid of that and there we go it's not the most beautiful thing but it's more or less looking the same as what we had before and we've converted this h1 um actually what i can do we'll put text here we'll put scoreboard and we'll give it a style of um styles dot heading there we go that's a little bit better so we've converted the h1 and maybe the h2 to just be text with a certain style we converted the input elements to be text input components the button with a lowercase b became the button component from react native web and we used a flat list to render out our scoreboard instead of using uls and li elements and we styled all of them using this stylesheet.create that comes all from react native web but again because i added in this babel plugin called react native web and if you look in the package um this is the one i believe a dev dependency called babel plug-in react native web that i added in and that allows me to just import from here this would also work so if i would just refresh all of this works so you don't really need it if you're just doing web but it allows your code to sort of be closer to the code that you would be writing on a mobile app so that is a very high level introduction on how react native web works a few differences around styling some of the common components you're going to be using like views text text input button flat list etc and i encourage you to give it a try and see what you think about it yourself hope you enjoyed the video take care bye

Channel: Leigh Halliday

Views: 1,643

Rating: 4.9523811 out of 5

Keywords: react, tutorial, nextjs, react native web, react native, flat list

Id: RXwwiZ3OWXE

Length: 16min 25sec (985 seconds)

Published: Mon Sep 27 2021