React Native IDE BETA 🔥

it's no secret that software menion is working on a react native IDE and now I finally got beta access to their IDE so in this video I want to share you my first impression of installing setting up the IDE and using it in a react native project so you can get a feeling for what they're cooking if you're interested you can also request beta access I think they're currently adding like 200 people per day because they're getting really a lot of interest in this so let's see how we can install this first of all the react native IDE is simp a visual studio code extension see here on the getting started page it is a visual studio code or cursor extension so I actually haven't used cursor I'm kind of interested in trying that out as well but anyway we're going to use it for vs code and we're going to see what we can do so the current version supports developing on meos for Android and iOS managing the simulator automatically build and launch debugger element inspector integrated console preview package expor outter integration and easy access so I definitely want to see how this works so I downloaded the package now uh looks like we have to go into vs code uh so let's open vs code let's go to extensions say install from okay going to probably put that a bit up here so you can see this install from whatever file going to drop that file and install the extension completed installing Rec native IDE extension so where can I find this now react native ID e does it show up somewhere uh I feel like it should at least be somewhere anyway um okay install for Cura okay I think we can go ahead after installing you should be able to start using the extension by opening your re native Expo project in Visual Studio okay uh open your project I did this when you open any file of your project you can launch the extension from open ID panel button in the editor toolbar okay I got that button that looks good so let's see I'm here in my application I will open the react native IDE uh you can add a new device using the quick action um can we just use like a simulator uh oh this is good this is good I like it I like everything that just works when I click on it and I click on it and nothing happens I'm I'm kind of sad but this looks good so I think what's going on right now is that this is booting up my iOS simulator maybe do a little bit smaller because we're not really writing code we're here to look at the stuff uh and we get this integrated preview up here uh we should be able to see some locks probably we don't see the build locks so maybe let's wait until building has finished okay quick note I thought I was stuck on this screen but turns out clicking on this actually shows me down here the locks and something is still going on so let's wait a second more all right the app is loading I'm so excited because I just pressed the this button and it seems to work uh meanwhile I read through the documentation to actually most of it so what I want to do is first of all I want to place this view somewhere else um it looks like here I can change the location so I can actually bring this to a completely new window as you can see here's my application or I could and I want to bring this back in here uh I should be able to change the location to the secondary side panel uh no that's actually exactly not not where I wanted it to be I wanted it to be on the left hand side uh maybe it's just messed up in my case uh okay where am I Rec of view to display here no I wanted this to be on the left hand side I don't know I will just place it here uh and so we can have a split view and then I can have my other code up here okay now I completely I think I'm doing exactly what I should do uh when you're trying something new initially and that is like playing around with it way too fast because now it looks like it's also no please don't do this to me don't do another build you already had the build everything was fine can we just run that okay good news it didn't take that long so let's see here is my app this is what I usually see when I'm using this inside the iOS simulator which is so far pretty pretty cool because I don't have to run the iOS simulator um looks like here are my locks okay that's cool what else do we have I think I can directly navigate somewhere so in my Chad GPT clone for example I do have a page called login so I would love to go to SL login how could I do that it seems like it's not detecting my stack uh layout correctly um okay it's showing me probably have to go there once at least so let me try to lock in all right had some problems using the keyboard especially doing like an add sign or pasting stuff from here so a little bit of confusion here with the simulator and it didn't work exactly as I expected it but now we're back here in my application and what I noticed is that I can actually click somewhere uh what was the shortcut so at least I do this right here ah this is so cool this is like exactly like web development I can expect and I dive straight into that component I really love that this click to inspect is I don't know it's like going to be that important but it is so helpful especially in new projects and like figuring out okay what is this oh okay it's in the explore. TSX so it's the header component stuff that's uh I'm working on here that is so so helpful um also we see now I do have the different URLs so I am actually able to go through these and navigate with that almost like in history that is it's it's really good it's really good okay uh let's see if I do something here in my chat view uh I can kind of somehow trigger a function uh let's see let's just do a breakpoint here in use effect if I do a breakpoint um I think it should okay this is not but if I click here uh how can I trigger that break point um maybe I should do a breakpoint in some other place uh oh this is actually the explore page so maybe we already got there no we're not we're not having the breakpoints yet uh we can also by the way switch the device text size okay this is interesting I don't know if I want this um but this by the way caused my breakpoint to hit so if you're a fan of debugging with break points which I'm honestly I got to confess I'm not really I used this a few times in the past but usually I just put in my console lock and lock this stuff I know uh the break points and whatever I can access here is a lot better usually but I don't know I let me know in the comments are you a fan of breakpoint or are you doing the poorman's logging with console lck I honestly don't know um okay let's continue uh because I don't want to pause in the debugger so as highlights we had click to inspect which worked definitely thumbs up uh we have routing through the URL bar which I can confirm does work as well we've seen break points working uh we do have a locks integration um do we see the locks really let's put a lock here uh does this work okay so I should probably put this in actual stuff that works okay like this um okay where are my locks oh yeah here's the lock um it's coming from the explore page that is pretty cool cool I think um I honestly think this is pretty good because this gives me exactly the location of that lock and I can jump into this I don't know if this works I just use like Expo run and debugging this could also be potentially really helpful now um what we can do as well is develop components in isolation so I want to test that feature as well we've already seen a few um and I don't know which combin exactly helped me to like ah it was yeah exactly when I right click on my view here you see this I get like the um the hierarchy of that view so I see that image component or can I click up here that should give me the icon and I can click here and go this is so good this is so good I love it this is going to be really really great um I go here this is helping so many people because this is exactly what they need like um let's just imagine you have the simulator and you think oh this image here is maybe misplaced I want to put this somewhere else I'm right here at the image otherwise I would have to go like okay it is which file and which line and where's the image it's just completely a game changer for debugging and building my application I honestly I'm already sold software mention shut up and take my money but there's one more thing that I want to try so uh as I said we've seen most of that stuff but we haven't seen develop components in isolation so there's a preview package that I can use to preview a component I'm honestly super excited how that works so let's see I will do a new Simon uh. TSX react native functional export component this is my Simon component okay um something by the way is messed up I should have put this in a new window or something it's just always opening uh the wrong page Maybe we should do this meanwhile so I will change this to a new window and I can just like put a new window to the side and do it pretty much like I would do with a simulator as well maybe that counteracts the point of it but maybe not let's see what happens if I know like do my right click here yeah then it goes here that is way more helpful so if I now go here icon and I changes in here that feels a lot better but back to my Simon component you see I'm getting too excited about this stuff um let's give this a style of background color uh red I don't know and text signon so I want to test this component in isolation it's a bit what story book can do as well but they say it's easier okay so let's put in import preview from react native IDE that probably means I should install this um as probably a development dependency uh am I allowed to do this that's going to be interesting well it looks like I am so that also means we should be able at this point to find the re native IDE let's see I will open this up again and we got it okay and now let's see if we can do magic so I want to use the preview function from react native IDE and I want to preview my Simon component okay this is not assignable to whatever but it should be like this okay preview let's do the magic um open preview um what exactly happened I don't know um okay I finally figured that one out that was an interesting one there's actually an open discussion here on geta preview functionally does not work when the file with preview call isn't included in the bundle so I had to randomly include my component in some page but of course that is a beta and this is going to get fixed but what I can do now is develop this component in isolation so uh I could do oh my goodness this is going to be so much fun developing stuff and like just using preview and doing I'm I'm I'm you know that I'm getting overly excited about new stuff but this is just so cool it's not like this is completely groundbreaking but it's definitely a big step forward in terms of how you can potentially develop your react native applications so just looking at this I think we covered everything you can add your uh iOS or Android emulator um we included this we use click to inspect we use breakpoints the URL bar for routing we've seen the locks integration we've developed components in isolation and we can also adjust the device settings on the fly so the rest of this is just uh creating a launch file um talking about about how you set up your Android and iOS simulator and then also development of the package itself but what I've seen so far and my first impression is that first of all there are definitely some bucks so if you get invited to the beta expect that it's maybe a bit slow you need to Tinker a bit around as you've seen I in this video cut out most of the things but it took me like an hour or so to uh figure out stuff to get the preview things to work um to get the window being the right position and stuff like that so this is a beta and expect to be bucks in that beta however that brings me to your point number two is that this represents a really really really great idea for react native developers click to inspect this is something web developers love and take us granted and if we can have this for react native development once again a big step forward just like bringing Tailwind to react native bringing click to inspect to development IOS and Android developers would love to have that feature then of course we had the breakpoint stuff and yeah all of that is cool but what I found impressive as well is the development of components in isolation I've seen this before and I had no idea if this could work but it turns out yes it can actually work and I think if you're probably not yet working with storybook this is a great uh chance to focus on creating specific components in isolation isolated from the rest of your page and of course we got all of the stuff like navigating around using the routes from Expo router that are integrated so you can like quickly go there I think they maybe going to integrate something that will automatically find all the routes that shouldn't be too hard based on the Expo folder in your project so you don't need to like go to the page once and then it turns up in the menu so I think the react native ID is really impressive uh awesome job at uh software mention I talked with Kristoff on the galaxies on the rocket ship podcast before so I will link to that episode that was like somewhere fall or December last year when he first announced this uh and now it's finally looking like this is becoming an actual thing I wasn't sure at that point because it was an early project and I thought maybe this is not going to happen but it looks like the react native IDE is happening so what are your thoughts have you tried out the re native IDE what uh do you think about everything that You' seen in the video please let me know in the comments I'm pretty sure Kristoff and the team of software mention will also mention uh will monitor the comments and questions you might have below this video so put them down and let me know what you think and don't forget hit the Subscribe button check out galaxies. deev if you want great react native courses and I will catch you in the next one so until then Happy coding Simon

Channel: Simon Grimm

Views: 28,676

Keywords: react native ide, reac native editor, debug react native

Id: eOWxKkHakyY

Length: 15min 55sec (955 seconds)

Published: Tue May 07 2024