Breaking down your React app into components

we are live welcome welcome everybody debbie.codes here today with the one and only mr tim bix that must have been the coolest intro i've ever had i'm getting it yes i love it i love it i remember when i was choosing that to mean and people were like saying no you need to put your second name because otherwise no one's going to know who you are and i was like i don't think so i just want something easy to remember and debbie dot codes and i want to be known as a programmer someone who codes yeah aren't you coding yeah it's it's better than mine like mine is tim bennex dot dev which also works but actually when i took got it it was like oh that's hip because it's not but now it's like yeah it's a bit boring isn't it yeah everyone's got to have now so it's not cool i love the dark colors hey sassy welcome we have already someone in the house that is great i'm just going to go to youtube and then see this video to see if i can also see some chat that would be fun yeah can you not see the chat in this in this oh wait there's comments here oh i can see some stuff you can see it you should be able to see it yes i just look that way and i can see it and then i'm back yeah okay all right you got to turn your head oh that's so good i'm the same i've got like three screens so you'll see me constantly it's not like i'm not interested it's just i'm checking the chat or checking something out so yeah that's it's okay it's all good uh i'm wondering what just your headphone you mean you can't hear me i thought you were pro i thought tim was a pro but he's not i am back you know why you see these you see those little white ones i actually opened my phone to check our live stream and then do my phone so i shall be putting that phone away now this is actually that happens okay i always i always kind of think like when i'm with you tim live i never think we're live because it's just like me and you and it's just like you know nothing matters we're just having some fun yeah also by the way i cannot show you know but i'm like this is a kitchen that i'm in is not a virtual background right tim this is your real this is an actual fancy yes but the other side is the kitchen because this is crazy right i've been in this farm for a while staying with friends and i decided for some reason to stay downstairs in the living room where everything happens and now for months i didn't realize there's actually a floor above where i am now it's completely empty and fancy why did i torture myself trying to record videos in a busy living room with a lot of people and a dog while i could have been here and a dog exactly cool yes coding garden fun we are also streaming on youtube we're on twitch and youtube uh we've got a few people jumping in here so that's great i like to stream to both places because you know what someone told me that they don't always have access to twitch in certain countries or something oh really um okay yeah so they were like can you also do youtube and i was like okay cool so i'm streaming to both i love um twitch uh because it also helps with like you know the chat kind of stuff or whatever um but youtube is cool if if people can't use twitch then you know you can you can join whatever one is you're more comfortable with it all so so this is the plan right this is the plan tim is a react expert as of two months ago just like me yes look at my hat how about that yeah that's true we both learned uh react together on a live stream uh very badly and had to be rescued uh you can watch that on my channel uh don't watch it because it's terrible um and now now you've created a mini application right and and uh you're gonna we're gonna try and improve it right because apparently you've created a disaster am i am i right i don't know i think i used react hooks i used effect so i kind of feel like i did something with steak something cool something cool that's cool that is great and also the tool i built i actually need so it's like i needed to scratch an itch and i did it so that's first steps have been taken hello we got we got some cool people in here we got sora we got coding garden i love that name coding garden jen yeah it's good great name oh we got sassy as well so you got a good few people in there so welcome anyone else uh who joins you know just say hi so tim i'm gonna i'm gonna have a look at your uh screen and see what's going on here this stuff and i'm gonna show you guys what i built black and white isn't it but okay so let me explain the goal of this thing so i work as a in developer relations right so i'm a deaf advocate just like debbie is and so what i want to know because it's sometimes pretty hard to figure out let's say i shared some contents on twitter or something or on wherever hey hey good morning jason sorry i'm just checking your chat there you go and so kind of what i wanted to do is to be able to track if my links or my posts or whatever have a bit of conversion because i want to know if i post something on twitter with some really fancy title if people actually click on that the way to do that is to generate specific urls which query parameters and to then actually these query parameters they show up in google analytics so you can kind of see that conversion and bounce rate and things like that so what i basically did is this so let's say the url i want to share is let's say it's just my about page right and so what we can do is okay i post this on twitter um about tim and then the campaign is developer relations so what it just did it created for me this url right okay so it says just my about and the utm campaign is developer relations the source is twitter and the medium is about timbanics and so this is pretty long to share on twitter right so you only have certain amounts of characters so i created a create short link and i work at a company called uniform and so we have uniform dot 2 as our short link generator and so this is cool like the thing is if i post this on twitter somebody clicks on it in the analytics often thenx.dev or uniform.com or uniform.dev where i work we can now see that somebody clicked that and i can see hey what i wrote was it interesting or did i post it on the wrong time and so when i now go to this link it actually now goes back to the long one here and you have the campaign stuff inside very cool and so this is what i wanted to build and and you did it and you did it uds in five lines of code and then i thought oh we have react let's build it in react because i can right why not why not exactly and so of course when you look at this like when i type something you see that the field output changes right yeah when i type something here it changes also and so that means we are keeping state that is updated it's reactive it is react and you have react hooks to do that with right and so i thought how do react hooks work well go and see and it looks like a disaster but it works this is like so so oh wait a minute wait wait wait i'm still scrolling what tim i i feel like i need a shower after this coat but it uses react hooks right this looks like this exactly actually looks like view right because there's like you know single file you got everything all in the ones i just basically went this is what i'm used to i went single file look this is like i just put this go run go just build build everything the whole application is there in an index.js file oh and the worst thing is this was like a day i feel sad but i have debbie here and she works at bit right and they do componentization of cool stuff so debbie why don't you explain a bit what you do and then we just take this so we help people like tim who who have built disasters people who need it and um and you know like what i'm like thinking is like what you've built is really cool but um you know i would love to use what you built right so that hook that you built to create that short link for example i'd like to use that so if you were to put that like in the cloud so i can use it that would be really cool right but i don't want to use i don't want your form i don't want all the other stuff i just want that specific hook for example right yeah um so separating separating things out into components means you can share it with other people sharing is caring remember and and you can also share it with yourself because maybe you have another application that wants to do use this as well you know not just your your personal one but maybe the work one wants to use it so this is why we want to separate things out uh make them into components remember components can be react components they can be node components and we react native so you can also have ui components like a button or you can have the hook component that does all that cool fancy work that tim built hey maximilian welcome to the show so you just saw me moving my my my screen because i noticed i had a token here so i had to just quickly remove that sorry continue authorization token on the exactly i just hard coded this thing it's not oh lucy is she's here do i have a discord server like i i'm on like like a personal one oh could you imagine like debbie discord server like you know just go here and listen all the time i think that would be a terrible idea i'm down for it i'll join you yeah the thing is i have so many discord servers at one point you don't keep track no it's too hard it's too hard i have like loads and i'm i'm like i'm still in the next one right and i keep checking that one for any updates and stuff yeah yeah but i can't be involved in them all and i'd love to be involved in them all but yeah okay so sorry right this is cool let's let's just get by the way yeah now that lucy is in the chat she will recognize this because she also built this and she has she gave me the idea actually so she built it first and you copied so basically you're not the cool person here it's lucy is that what you're saying tim that's always the case isn't it lucy now the thing is i asked her how do you solve this she's like of course i solved it that's lucy right so she just showed me this thing it's like here's the code and then uh yeah look she wrote it in the chat she gave me the code for fuji s and then i was like i gave you the code this is lucy from prismic everyone if you don't know lucy she's amazing and um i gave you the code yes i have to be honest do i still have that code no i don't have it here but it's you know what it looks like this also let's be honest sorry lucy it also looks like one badass big file it does the job though right but let's take it to the next level now because we want to be able to reuse this and maybe expand it and maybe make a startup out of it i don't know okay so we we don't have a lot of time so we're not going to get a lot of stuff done but i can get you started and then you can keep going and building on it and maybe like you could also even um yeah you can make it better so maybe like i can show you one or two things that like you can do a bit and then you can continue on that and maybe even do your own live stream of like building on top of that right so it sounds good let's get into your project so the first thing you should do is open the documentation and i know people hate documentation i know but it's just yeah to get started uh i just want you to know where it is in case like you know but it's um yeah this one this one will go to the old one so so we need you to go to the new one um what really oh sorry continue where do what do i click because this is yeah because everybody will click right i know but i mean that's been there for years so we can't just tell google hang on yeah like click on the try new next gen better right so yeah you have to stop and read but yeah obviously the old docs are going to show up because like a lot of people are still using it it's the legacy code it's been around for years the new one is still in beta and it only has react react native and node.js support so like if you're using angular and view you'd be using the other one right this is a harsh version here we go yeah it's it's this is the dark mode this is a little harsh the dark ones it's stuck asaurus it is what it is you know it works okay okay so so we want to like install we want to get started right so we want to yeah we want to install a bit so this is the first thing you've got to do i forgot you don't even have bid on your computer like you're completely i have i'm completely like nothing first timer okay well we to install um what we call bvm it's the bit version manager so it's like you know node version manager but a bit version manager and this will manage your versions of it so it's uh you have to install this globally yes but um then once it's there then it's just easy to like constantly update your version just why don't you use npm for those versions why don't you use what uh because i think the we can handle things better with bvm is a really really cool tool so upgrading makes everything so much easier yeah i guess super power it's yeah it's super powerful it's really cool so um yeah it's what we use okay well almost installed there we go so what if i type bvm now okay so it works awesome yes so you get all this so i'm going to let you kind of like follow the instructions and i'm going to test my documentation you need to change something so i'm now assuming that i'm in the scope of my project so i should be able to just do this unless this is also a global install i don't know bvm let's do it yeah i know this is uh it's just gonna be global right so it's gonna eta eight minutes it's gonna eat some stream that's okay so we're gonna we're gonna talk for a little bit while that's doing so what we're doing is we're installing the um the version manager so then you're able to like you know get bit very very easily and it's just it just makes it easier before this command like when i first started a bit this wasn't even available this tool wasn't available and the problems i had to go through just to get bit up and running with you by doing npm global and doing all this it was a nightmare so we improved the developer experience um by doing this once you install this that's it you never have to install this again but can you why is it so big is that just me or i don't know one megabyte a second for six minutes is kind of a big package yeah i don't know i think also because we're streaming it takes a little bit longer but in general it is of course of course it it's a big package because it's like um i don't know how big the node version manager is for example um if you wanted to compare it but basically like also be big right that's that's what you're comparing remember this is not this is not bit this is bvm which is a completely different thing right but once you install this and you have this up and running you never have to install it again so then it's like it's it's just easy and then it gets um and then after this you can just check what your current bvm version is but not your bid version not yet well bvm will tell you the the version um like this is installing bit like what we're doing right so sorry go up go up a second right so here with bvm bvm install we're installing bit right oh you also yeah okay so you in yeah bvm install means that bvm is now installing bit okay installing bit so then you've got you've got everything uh up and running you've got bit installed uh et cetera and then when you run bvm version you're going to get the version of bit that you've installed right okay now this is an upgrading obviously then is um is upgrading your bit version right yeah but that should also now you there's oh there's still an install here even if you want to upgrade um i don't know why that's there actually that's interesting i need to fix it i think npm is you know what i think npm is smart like now like yarn when you actually do install something you have it already it tries to update it i think that's now a uh yeah this is this is sorry yeah if you read the text not just the code blocks it really helps so this is upgrading bbm i never read i i i know and i wrote it and everything so yeah one thing is upgrading bvm because we do release a lot of versions and the other is upgrading bit which is the most important thing why is it important to upgrade bit because we release a new version every single night which is yeah very modern company i love it yeah because we're constantly doing um doing things we're constantly adding new code we're constantly changing things so the whole idea is is to to get it out as fast as possible so there might be such a minimal change that you won't even notice uh but we like to release you kind of want to do that yeah so should you be updating it every time you you try a project again or i'm assuming that most of those releases are stable enough right oh there yeah i mean we very rarely break something i mean i'm not gonna lie to you we do break stuff sometimes like that happens we are developers and we make mistakes and we break something but then we roll back so it's very easy as well for you to roll back because you have a bit version manager right so you're also able to roll back so you find something not working you just go to the previous version and we'll also kind of roll back and make sure the change and and then send out a new one so i every day like i upgrade my bit version and see what new presence i've got right and yeah and the great thing is work there yeah yeah because we have like um we're spread across the world so we have some people in america right so they're working you know while i'm going to bed and i get up in the morning and there's all these like new stuff like that you know so it's it's really cool yeah that's great okay so maybe while we wait i'm still okay so yeah it's gonna maybe you can just go here and see what this means exactly so like this is um like you have a git rep already so you don't need to initialize the kit repo right and then we have oh we might need to do this though right yeah so you are no workspace or no um i don't know if this is going to i don't know if this is going to work for you because you already have a react project right exactly it's it's basically a next project next year yeah and what it what the bit new command i this is a very experimental feature so it's very new that's why there's a like a nice blue one there it is yeah it's experimental so what this is going to do it's going to create a folder and we already have a folder um and i don't know if you can like say just put it right there so let's just do the manual because i'm assuming it just spawns something with like react scripts right to set everything up as you it's like yeah like the the react the bit new react workspace is just um it's just a way of like doing everything that's underneath it's doing it all for you okay but i think we'll do that ourselves now right yeah because i've never tested out in an actual react application to see like what it would do my camera's being very strange well you seem to be a little out of focus i know like i'll just jump back focus me or go very close yeah it's weird it does weird things it it i don't know why it does that this is the logitech like this is like not a cheap camera you you would think i have to have one too but i'm using my fancy one now with autofocus galore it's awesome this one and i stopped and got back on no no okay never mind it'll figure it out never mind normally and sometimes with those cameras i have it too you can just go really close and focus and then go out and then it should refocus oh i like that you can punch it and now oh i never did that before i'm gonna punch the camera every time it this is basically it's very sad that you have to do that but you kind of force it to refocus because something is so close i move too much this is the problem i constantly move i'm like it tries to follow me and it can't yeah so uh it's almost there right so what we've done we've installed bvm we've installed bit and then what we're going to do is initialize a workspace what is a workspace tim well i'm assuming it's a space you work in with exactly that is exactly what it is this naming is important isn't it so yeah so we just create those files ourselves now and then no no like let it go because no no no no if you go if you followed if you follow the name no no we're we're not doing this we're not doing the fitness do i need to do this though we're going to bit into the workspace so we're going to do this one oh but you have two options oh yeah we have two options right we're going to do this one um like the bit in it dash dash harmony because that's the um the new version this is what we're going to do okay yes and we're going to follow that part of the documentation which is bit in at a workspace so you're ready to hit enter and run are you ready run far your command is not followed what happened okay well we have a vm right wait let me just try this yeah this is um this is something that it's it's really annoying actually um so you have pvm you have to i just have to turn on my terminal again and it puts it on my path yeah restart restart your terminal and if not we've got to add it to that you know what do you call that that bash profile or the zsh profile or something like we might have to add a command there just just just run run bit and see if bit is actually working so we don't have bit right so if we go to the um so at the top of the no no in the documentation oh i'm just going to go to my batch profile so where we've just had install a bit and it says bvm and then it says learn more about bvm and its commands including troubleshooting information right so in here what we want to do is we want to add in here if we if we get the following we didn't get an error but we um if it just well this is the thing i have a csh profile so that's why it's probably not working so oh yeah yeah yeah so um what we need to do if i just do this we're good yeah you can run this and this is basically what it's doing is it's adding that that home and path um and if you have like something similar such as what do you call it what did i have before so just run bit and we see if bit is installed yeah so we have it now i had something else in there i can't remember what it was um i guess no not not nvm but like a really cool one and then like you know my whole kind of like so mine is not cool right nvm isn't cool i had a different nvm when it was a really cool one um so anyway we've done our troubleshooting right so this happens this is cool and i love it oh i can just not read what it's saying they'll do oh here we go help us prioritize new fixes do you no i don't want to give any data i'm such a um tim you're a developer of course you want to give data no it's fine i'm a privacy person yeah you you're you're you're information yeah error information okay okay so we've successfully initialized a bit workspace yeah because the first step is a little bit slow and then it goes fast nice so we got this and now what we want to do is we want to set up a react environment so we need to uncomment the following line in your workspace json c file so if you were in the right directory yes you have a workspace in uh jason and because we're using react um if you scroll down there should be like something at the very bottom that says uh uncomment to apply react environment on all components oh fancy right so that's easily done yeah right um and then if you go back to documentation we want to install react and react dom as a type here um i don't even know if you need to do this explain what type peer means oh so it's like a pure dependency so it's it's not necessary um it's only necessary for a bit to work as a like it's it's here so when you do it in your own application it's not going to be bundled with your code right it's going to be i depend you don't want that of course yeah that makes it if you if you don't have it then i'm going to look for it but if you have it then i don't need it so should i just go for this now i would just install it because i absolutely no idea um if if you need to do this when you're actually doing it inside a next project because i've never done that before i've always just i'm always just using bit on its own right so i have no idea if um if in a next project i need to add this or not i'm guessing you do because then when you export your component like right now we're in the next app but we're not really in the next app we're kind of like secretly in there right yeah exactly we're just putting something in we're learning here shouldn't i have like maybe tell me this like should we have started from scratch and just extract the component and make a bit component well that's what we're going to do but we need a workspace we need somewhere to work um okay right so don't anywhere to work then you don't have anything to do right so that just explains um the you know commenting to get so you don't need that so yeah this is what you're going to do now right now you're going to go okay i'm in the code and you're not going to read the rest of the documentation this is it should have an auto generated mapping between tracked components in the workspace and their physical location on the file system the file structure of your workspace is entirely up to you i like that so there's a bitmap file okay so we don't actually have to edit this so at one point when we create a component with bit that would be mapped here yes okay that's cool and then we have inside git we have bit we have git bit yeah it's cool it's it's quite a technology technology first company it's like they're they're doing such smart things inside of other smart things which is pretty hard to do i think but let's see the magic so let's should we just create a component click on this yeah go for it okay to create an example component and add it to the workspace um or do i just create a component that i want to create like yeah okay bit i'm just gonna like watch and see what happens so it's gonna have to be a react component and then what is the difference between oh yeah should we just what would you do that would we go to typescript or jsx you know what typescript is by default because it's going to give you much better and you know you don't like i i like typescript now i didn't when i didn't know how to work with it um but very often so but that's fine okay so and now we're just gonna call this which one did we wanted to do like the short maybe maybe you want to start with something simple like your actual button component or or or what do you are you what do you want to do because you're you're what company how small should a bit component b what is your vision here um so as small as necessary um so that it's reusable okay i like to think of it as as small as possible but obviously there are moments when you know you don't want to you like you can extract even css as a component right exactly how about we do you remember that input that i created on the top that is just put url and that has a label and an input field and when you type in it something happens and that happening thing that can be somewhere else i guess but that could be our first component right we've got like 20 minutes to get a component into bits so just choose something simple and then we can build on top i was just gonna do this and if it's not good i'll change it later how about that go for it beam so what do you think you're gonna get um a file that i can you do something with potentially a file that has a model inside of it that bit knows something about that's what i'm assuming okay well let's take a look at what you just created okay so i created my school oh i should have sculpted maybe something fancy yeah like you can put and normally what you do is that is the name where you're going to like send it to the cloud so you can create a collection or a screen shoot maybe no no that's a name space right whereas um and you could do that that's just gonna be a folder structure of where that component lives right so if you're a next app maybe you have a components folder for example maybe you have a maybe you want to you want to be outside that and be in bit folder maybe you want a ui component um but this the my scope is where it's going to live in the cloud when you export that so um you can change that later it's fine well i can change it okay all good and you can also put like a path command and change it so yeah it created a my scope folder so if you didn't want it sorry continue yeah if you didn't want that in there if you just scroll up on that file that you have open you mean this one yeah yeah so you can see how um the yeah so that's where that comes from so you could change that to do this i wouldn't but yes yeah normally be your cloud name where you where you want to you know publish that to etc okay and then cloud name means it's on the bitcloud somewhere right yeah well you can host it yourself if you want to i just like it's easier yeah it's easier to so this is what you got okay well this is kind of what i expected i got a bit more which is nice because it gave me a unit test even nice okay so it basically gave me props a type type props and the input itself so url input itself is basically okay so it it export the type props as well oh yeah because it loads it oh sorry no that's also not the right file this one from both from that same okay cool i'm learning typescript as we go also by the way yeah okay cool so we're exporting our type which is input props and we are exporting our function which is actually that url input thing that we just made and currently the props are just one string that we can put in there okay yes this makes complete sense and so yeah this is your component remember react every component is a function right which is different for you i'm learning this now and then if we want to unit test this i just have to install this basically but exactly if i had it this would work yes so do you want to install it why not so do you know how to install it i'm assuming no no no no no no no no no no okay okay okay okay tell me please tell me because we're working in bit right so you want to install it to that component which lives in bit okay so just let me get this straight so if we have a bit component it can be a completely standalone thing right so that's why we need to add the test library into the bit component is that correct yeah wait you're going to install it and like it's going to then depend on if it if it doesn't have it in its you know in its final application where it's consumed but we're building inside a next js project in here yes and when you have yarn and bit together that's two package manager kind of things and i'm not saying package manager but kind of it's a way of managing your packages right um it's going to cause havoc and it's going to go a bit crazy so you should then use for everything and bit will instantly do a bit install and then yeah yeah like if you would no no if yeah if you went back to the actual documentation of creating components it would actually tell you this wouldn't it be nice if i had just read that because we yeah okay namespaces is what you just explained component location that's what you explained the bitmap file i'm going to check that later by the way but i'm assuming there's something like this in it now ah there it is oh and it's even exactly explained i think i already just typed this yes yeah i like you did so it's fine but just to know it's there and you can actually press the copy button so you don't even have to like you know select it and copy oh just just just you know accessibility baby okay i'm gonna check something so when i hit tab there it is good work let's see docusaurus you have it on and and if you if you read the rest of the documentation you might see so another cool command that you might want to run you just might want to run just for fun this one the show yeah but whatever your component is so bit show url input go and it looked like it was loading so it probably had already got it from the cloud is that correct or did it no it's not in the cloud it's in your computer it's only in your computer right now we haven't exported it we haven't created it remember when you when you put it in the cloud it's going to the npm registry as well so it's like it's it's a whole like like like a really good push yeah yeah exactly yeah but it does give you a bunch of things about this this is cool it uses core js probably for things like uh how do you call these things again like polyfills and stuff right yeah and you can see that your pure dependencies react react dumb et cetera and you're adapting oh it's using jest of course cool nice very cool so now now you want to actually see it in your workspace right that would be nice do you know how to do that well i'm going to read if i've learned anything from this live stream if davey tells you to read you read oh there it is that's exactly what i wanted so when i do bit start does this actually map my yarn start or npm start thing so this has nothing to do with your next application exactly it's just basically on its own which is cool this is starting your workspace and your workspace is called my workspace name right which is a very cool name um but you can modify that yeah yeah there it is yeah i mean it's it's it's you know it's up to you whatever yeah you can put your own logo as well like you can put you know you can really customize it oh fancy okay so it's still starting so i'm assuming now right this one this and the first run it takes a little while because it's creating the whole ui right it's creating all that stuff that goes behind it and once you do that on the first run and then after that it's it's a lot faster but the first one it's got to build everything and you know that takes a little bit more time so i'll show you something cool while that's um building if you want to open up an another terminal um yes so if you run bit templates these are all the templates that are uh available to you so this is okay so this is because you haven't created an application can you open it in the actual project you're in so when you run big table plates in an actual pro doesn't that you know a directory that doesn't have a project it would tell you to use bit new so that's what that command was if you're inside the project right this is what's available to you oh i can make like a react hook or react context component from here that is cool yes so it's like builds these so i built these so yeah this is what i did right so did you use like something like plop.js and behind the scenes no so like we just we just used like hardcore javascript typescript just typescript so it's not using hygiene or plop or anything like that okay it's just fancy stuff as you are just just custom oh wait it's low it's loading but let's go to through this for a sec because it's really yeah it's great so like it's just like a react component is what you got it's just a div with some text you got the react context the react took and then you've got things like an environment uh an aspect that's for extending bit so they're kind of like the hardcore things an mdx component right so if you wanted to write mbx files you know content etc and then the first one at the top is my favorite one because i built that literally just released the other day so upgrade your version if you haven't seen this and this is so you can create your own generator um and this will like you could just run that and then you have a generator and then you could create your own react component to how you specifically want to with whatever styles you want configured or something like maybe you just kind of scaffolds it the way you want to be building components basically right yeah so if you don't like how i did it build your own and then you can put that in the cloud and you can share it across the team so everyone on different workspaces and different repos can use it because this is the we're looking at this stuff this is how you did it this is your generator thing yes but imagine if you've never used it like me and i'm slow in the mind sometimes right it takes me some time to to get started with this stuff i would have had to create all this myself and hook it up yeah i had to do it when i first when i first came to bit i had to like manually make deer touch file touch file add this in i was like oh i can't do this anymore so do you want to go to your local host let's go to the local host and see what you got look at that and this is like looks like storybook but fun well there's a lot more to it by the way there's a lot more to it um he's just pressing buttons all over the place i don't know what's going on where am i let me just click some stuff slow down tim slow down say uh i'm gonna go back this this is okay this is your gallery where all your components would live so the react hook component would be here the button component everything in here right and you can see it's a react component by that symbol there so you know it's it's a react component um if you are creating a markdown component then that would have the mdx file right yeah uh okay so you can open that component which remember we didn't do any work for you we just generated stuff for you so this is the documentation and you can add your own labels in here you can add your description in here um and like there's a live playground so you can change the text right see the way it says hello from um in up up up up up up there we go so you can just put tim in there or whatever and and you'll see uh that live see people can play with your component to see how it works um whoa that works really well yeah it's really cool just just react right so you can just put something at the playground yeah exactly so like there's some of the components i've created you can change the color in it you can see that change live so you can see how your component uh works and then like the compositions is how your component is composed so this is just seeing it in it's a very like like this is a very simple component that just renders text so there's nothing here but you could you could like have different compositions right so you can have like basically variations of that component you can add a different prop and see a different composition exactly now your tests um should work so there you go and you can see that it's green so everyone knows that this test and the test set it should render with the correct text so it's a very basic tech uh test you you can write better text we mounted it and it just runs with that text yeah sure so if we did this now it is just updated live so yeah did it just run just in the background and updated this yeah so it's constantly watching so every change you make you don't have to run no you could you it's just not for both here though you could you could run test watch and you could actually watch it in the terminal if you wanted to okay so while you're developing you could do that uh if you just want to do in the ui then you don't need to do anything this is awesome because i know we have a bit of this also in storybook but it takes a bunch of effort to put everything in this is just out of the box and it's almost better i love it yes and then here is like your dependencies right this is what your component what components your component depends on not dependencies like react or testing library if this component had a react took for example and depended on it then you'd see that here and you'll be able to see the connection of all your components and this would potentially depend on my input component because this is a specific i cannot speak specific type let's say url exactly so it has some whatever validations is this url or not and so it could depend on an input that's cool yeah i have a question before you run when can i do this with next and few well not now yeah so if you not for a while yet uh not in this version in the old version you can use it but in this version it's going to take it's going to take a couple of months i'm not going to lie to you and say it's going to be get in there but that's fine yeah yeah we're working on angular right now so uh angular support is coming very soon and then then view is coming after that but we can't do everything at once because like you know there's a lot of development work to do right it's just ridiculous how much stuff you have to do uh work at this point yes yes press that button press that button press that button right this is your code right so you don't even need to actually see my code and this is probably why that bit installer was so big because it it's got it exactly stuff in it yeah and what what this uh you're just opening up there yeah yeah i'm just oh oh oh what the that's core j yes or something you just opened npm chords but you're using an old version that's all good well no idea this is i don't i don't do a lot of stuff it's apparently deprecated there you go anyways anyway scope of this stream yeah we're not going to like update core js in this stream um this stuff is shown inside this most likely yeah yeah so what this means is that you can share that component remember that component will be in the cloud right so when you share that component someone uh will be able to see that um see the code of it inspect the code of it look at the docs look at the composition and it's very good for like you know they can see like what's going on right they can see actually you know what if this component is good i'm going to use it because when you publish your component and make it public you can do private if you want of course but say you're making it public making open source i want to trust your component i want to know that it's good and if it's not good i'm going to be like um i don't like the code that is written i'm not going to use his one i'm going to use someone else's exactly and you best write good development documentation and so people will actually use it and so we can just you write mdx here nice yeah so this is mdx you can you can delete all that and put your own documentation you can do whatever you want in here and yes click on the change log so look at this read that read that i'm so proud of this it got like deployed literally like yesterday oh really yeah so you you created all this this is cool this is like i created the onboarding docs inside the the product and i've got more coming yeah exactly yeah so this is if you wanted to then version that component make a version of it and send it like it's very it's a very terrible right now it's a bit like npm basically how you can version it and push it out and then do it well it uses it uses npm it uses the npm registry to to push it up there right so um your base basically like be able to put it up there and then what happens is when you create a new version so maybe you make a mistake and you make a fix you change it or you improve it then there will be a new version and i might be using version one you've made a new version i can then choose if i want to use version one version two i can inspect um you're not going to see it now because we don't have a change log if we had it but you can see the differences inside this interface then yes wow this is great it's cool isn't it so you've given me so much inspiration because i'm about to rebuild my site with like much better component stuff um but this makes me rethink of maybe doing it in react so i can use this stuff yeah i know it's so cool it's such it's such a cool tool to play with and like the hardest thing here for you now is um just to kind of like figure out the naming how you wanna where you wanna put your components into what kind of namespaces um that's gonna be fine though i think for me the hardest bit is actually the typescript and react itself right how does the app connect but i i i we have like very little time so i'm gonna show you just one more thing really really quickly so if you go to the local host and you saw that package name right where what do you mean yeah it's it's so hard to find i don't i never find it either i want to make this better i'm going to like improve this with the product team are watching right now i want to improve this so no go back to the overview yeah so there's a package name right no this okay this is actually very clear i just didn't see it okay no but i i find it not very clear as well so that's good we're the same right so that's how you install and then this and it works so if you're in like um in your workspace and you want to import a component into another component then it already has that component because we haven't put it into npm yet so you're not going to install it into npm right for an hour it's not there it's local but what bit does not allow you to do is have relative imports okay because things can move around it doesn't make sense so if you want to use that component you would import that component yes i would actually just do now what's it again basically like this oh i think it already knew yeah there it is yeah and and make sure you do like you know the the brackets because it's a named export oh sorry yes okay so it's not a default export because it also outputs uh types right yeah we just check yeah it also outputs the type yeah okay this makes sense and then now i can just use it well basically replace this little ugliness that i built here yeah well you'd have to obviously build that first into the component right because at the moment your component is rendered yeah sure but i would just replace it with this and happy days and add your props in whatever your props are going to be um pass it down and then you can use that um in your application right now if you are using it in an external application like the next.js application react application etc then you need to export that component and then you need to install it imagine this bit workspace was somewhere else and wasn't in your react project maybe somewhere it lived somewhere else then you know you need to make that connection right so you need to um yeah you need to export it yeah install it and use it if let's say i give this to my colleague now and they're not using bit at all but i have published it to npm then they can they can just npm install or yarn ads okay so it kind of eases the pain of creating npm packages and you have your own scope and you have this whole workspace like yeah another way to actually build this myself because the interesting thing is i cannot say much about it but where i work at uniform we are looking at how to orchestrate gemstack stuff and all the you know the architecture around that but potentially also how you deal with your content right and we use react a lot and what if i can connect that thing to this thing where my data components are orchestrated but then also now my code components in bits like this we have happy days and can i also in this overview here do a bit story sorry book like things to maybe put four yeah components together compositions yeah so in compositions you can import one component to another um and you can like have a hero component that imports the title component the button component the i don't know whatever else that makes that here a component right so that's what you call compositions but every component is a separate component and then you're going to use that import statement to import it and if i made a composition can i add some sort of mock data against it so you can actually see it all run yeah so i've got a couple of examples this is going to help you and i've got literally two minutes and i really have to go because i'm already late for call um but if you go to that's okay if you go to uh bit.dev um slash learn harmony and if you spell learn properly it would it would get somewhere if i actually spelled it right there we go right so click on collections because at the moment i don't like this it's just like you don't know where you're going so um we want to go with the um the hook component for example right so this is an example component i've created not for you to use don't use it build your own but this is just to see how it works so if you click on so many banners i just clicked away four banners anyways doesn't matter okay so this is a new component that you created yeah so open that component this is my my hook component so you can you can create your own and this is basically how it works it's just documented um and you can see how you can generate that react component you can make your own and then like you can see like this the count so you press that button and we built this together do you remember tim on one of them streams right was that this thing this is what we built i just made a bit better but yeah that's it and so basically your composition of that thing is here and would it also be possible to have like a compositions tab on the side so i could just say home break is five composition five things yeah composed basically yeah but it's a com it's a component the home page is a component yeah of course so the component home page could have six other components and so now whatever yeah so okay last question because i know you have to go yeah i'm just really excited so if i had data from some api about which components i want and which data comes with that components could i wrap that up and create one of those collections and compositions on the fly with code would that be able to work there should be some sort of mapper i guess somewhere but if i could do that i would be so happy so um i don't even remember i don't know if i actually understood what you said because i was like i was reading a twitter message at the same time saying saying i'm running late go on go go for it okay so again very simple imagine i now query contentful cms right contentful home page gives me back oh okay six component types with their json so component name header json data this can i map that and then create a composition in bit with my components and adding the props from contentful i have no idea i haven't used content for in whatever it just doesn't matter imagine you have a json file you want to get your you want to you want to get data so yeah into a composition yeah so i i built another one but it's not live um and maybe maybe i can show you really quickly i'm really late um let me let me see if i can it's fun because if this works i'm i'm ready i'm going to just switch build my site and react with this okay let me see if i can do this because i haven't because i built something but it's not perfect so i haven't released it so let me see if i share a screen yeah i'll just remove myself from the stream or you you can remove me and then you add yourself yeah okay share so now i've got oh look that worked okay so it's taking a couple of seconds it's connecting and um and i've got way too many tabs open as you can see oh wow we can now see your internal brain structure no it's terrible so this is like something you are looking at right so this is like you can see i've got a couple of things going on here i've got the book i've got this is like a a model right so a mock right oh there you go now you have the pages thing and yeah perfect and then you got the hook which is used books right and you got a book a book list and a theme context so basically like you know this one here uh is gonna get some books right now tim you're gonna laugh at this right right you're to laugh at this let me go to the composition so we can see a bit better so we're going to get some books and because debbie is debbie it actually gets breweries right because i love it we are so alike i would have done the same to be honest because that's going to the brewery api and it's it's getting that right and and you can see i think it's in this one you could see the code in here um where it actually goes did i open the right file where it actually goes to the open brewery one fetches that data and returns it but you can you can do it better i just do it that way you can do it better so this one i'll release this right here right because it's uh it's really cool um but that's that's that's how you do it right and can go through the books and show me the composition of this so obviously like it's it's not very good because i didn't like like really make a very good page it's just literally that's the page right okay but you can see in the dependencies what right so i could use this in combination with amazing stuff that i cannot talk about that is gonna blow people's minds oh my god if we combine this i'm so gonna do a live stream once this stuff is out oh my god i'm done tim i've got to go i've really got to go through we should we talked too much so we didn't build as much as we want to um we should get the tailwind on there right yeah sure but we'll get we could sure yeah we can do another stream uh later or you know tomorrow or something if you want and try and like build on top of this and and make it get a bit more comfortable with it but do play around with it create some more components tell me what you think and um and we'll we'll we'll catch up again and do some more of this because this has been fun so thank you very much for watching and we're like 10 minutes into other meetings already but we're too yeah you know thanks bye everyone thanks for watching bye you

Channel: Debbie O'Brien

Views: 355

Rating: 5 out of 5

Keywords:

Id: 2jojhi5W4BM

Length: 57min 34sec (3454 seconds)

Published: Fri May 14 2021