Debbie and Tim learn React and Docusauras

are streaming in the channel of my work okay we are live welcome everyone so today we're gonna have so much fun because it's friday and i love fridays so i have with me a very special person someone who's a bit crazy i know but that's okay um and we're gonna try and continue what we did last week which was completely fail live on a stream uh we're gonna try and learn react again because we failed last time so everyone welcome mr timberlakes no we shall be learning some react we shall we shall so hopefully we shall be learning hopefully it's gonna all be okay um hopefully we'll we'll do better than we did the last time because we kind of really didn't do good um well we started with some stuff but it felt like at one point we were sharing some state we used the hook we kind of did some stuff though we did we got we got far but it's it's not always easy to learn is it especially when you've come from a certain framework come into something else and everything's different and it's kind of like it's it's like when you move to a new country and you're going to learn a language right and you've got to like yeah and then you're like freaking out because you're like i can't speak it so yeah um you know what tim i was thinking we should call this the fridays of debbie and tim or something or debbie and tim friday challenges or something and we should just challenge ourselves every week and i don't know you know what i would actually enjoy that because that will mean that means on my friday i will be rebuilding my own website in in next it will stay in next but i will also do it in react and then learn from that and if it's better i don't know i might use that as my live site but it means that every friday i actually do this and learn otherwise my calendar is full i'm just too busy i just yeah i'm doing the same i'm gonna rebuild my website in react it's still gonna stay in nooks because you know come on like next is super fast and super cool and super popular yeah but i want to rebuild it and react just because i know my website and i know how to what i built so it's easier to kind of rebuild that than here quickly okay so first of all let's have a look at what we've learned like what have you do you feel you've progressed in a week like have you got i personally feel like i think i did because i learned more about the fact that react is just functions and of course view is also but in react it's it's very um how do you say that like it's it feels like fairy for both you can see everything and you can control it in the way you want and that's pretty cool and because of that you can use some typescript so at work i've had to do that a bit and i did another stream myself just on my own channel just trying to figure stuff out where i used next.js and i've learned that is it works but it's not as easy as using nuxt in my opinion there are some magical functions you have to put into a fo to into a file to make it work but they're never called somewhere they're auto magically called and to me that's a little bit strange so yes so there's it's more for bose and interesting to see how it works but it's also more magic when you add next js and one last thing hot module reload in react seems to be super fast with webpack and then that's very interesting to me wow okay maybe but i'm not sure if i learned a lot it's just i formed more opinions that might be opinions are good pedro hey pedro pedro's in the house uh can i see the chat here yes i can wait let me just i'll add them constantly to the um to the [Music] to the what you call it the stream so people can see that pedro's here as well hey pedro good what's up thank you for joining yeah you know what actually um i i've been i've been really lucky this week um i've managed to have a lot of time where i've been pair programming with other people right and when you pair a program with react developers with people actually know what they're doing you move a lot faster so i learned a lot i think i learned more from pair programming than i did from just reading or doing a workshop or doing a course etc i mean when i do a workshop and i've done some some really really really good ones and they're amazing but my brain kind of takes it in and then it kind of like um it doesn't know what to do with it right it's just all there and when i see it and watch it i kind of like yeah i get that right and i do get it so i understand it but i don't know how to actually program it i have that same thing that's why i never really do workshops i did one once in bulgaria i think nowhere was it far away and natalia was actually showing us a graphql in view and there i did learn a lot yeah but then i did learn enough to actually do it myself so i've had to work build my website in gritsim and then suddenly i learned so i guess i'm a bit the same as you but i did have one cool thing happened this week where come who was there last sprint or large sprint last stream he had to do few gs for our core product where i work and he was like what is happening here i don't understand so i actually went into a meeting and helped him out with the few gs related thing and so he had to kind of understand and now i'm also learning how different view is with managing of data and reactive properties as react and we had to like dive in because it was view two so a few two options api but it was a generated component and it was so completely different than our react code so it was a nice way to well for me to help him for a change and also to understand that it's so different in react yeah pedro had a great question there in the in the chat um like how is it your process of pair programming on remote working so it's a very good question right because we're pair programming we're not even in the same country right and it's exactly what we were doing today and we're going to do that today we're going to pair a program today so we're going to show you exactly how we do it um but i've found it so like it's not been a problem that the person is not in the same room as me uh they don't need to like we have such great channels you can see the person you can hear the person you can share the same screen you can share the same vs code um coding um everything even the terminals you can share everything so pair programming is just about actually spending time with each other remotely and it works it works just perfect for us yeah and well for the last couple of years i have worked like this because i work globally and so everybody is in a different office anyway so all our meetings have been like this our pair program chromium sessions are actually better remote because you'll see what debbie has set up for us yes where we're basically coding this together you're going to see that it's really fun okay so let's let's open the code right so we can actually i don't know talk through what we've learned and that's not your fantastic default one so do you know what you know the first thing i did actually uh what i've learned uh which is really interesting i learned that the theme i was using was not react theme therefore things were turning different colors and the react developers were like why is it in red and i was like i don't know really yeah so obviously obviously i'm a massive fan of sarah drasner and her night owl theme is the same yeah but it's not designed for react oh you've got to cut it really so um so yeah this is an issue because then it kind of throws you off and you think it's an error so they were kind of saying that that that's an error but it's not an error right so um yeah so hey ma ma oh this is a really good thing sorry i i say people's names really badly so apologies so yes hey you've learned a lot from us both you really love next um yeah i love nux too uh i love next loop pedro says very cool he's from a startup there's only four with specific roles front end and i'm alone oh pedro you're never alone you're never alone right now you have the whole world we're all here um so yeah basically um i've changed my theme to just the default thing but if there's any react developers out there that have a really cool theme that want to share with me that's as cool as they're addressing this night owl theme please send it to me because um i don't like default themes i like to be a little bit cooler you are certainly cooler so um things i learned um which is quite interesting right is um just like the little brackets right so putting putting this you know one pair of brackets i'm now in javascript land right so once i put one kernel i'm in javascript right and i have to learn that too i like it but it's also not bad it's just different and strange because this jsx is a language basically it's like a template language kind of thing so i have to get used to that i'm kind of not finding it strange anymore i don't know i mean what i like about react is it's very simple to understand like we come in here right and this is what we did before and if you were here last week you would have seen it um and basically like we're just importing react here right and we're we're saying uh import con theme context because we kind of went all funky and try to make a theme and try to you know do cool things but it's basically just a function and we're just creating a function and passing in props once we pass in props then we can just like you know spread these props so we can use whatever props that that button is going to get and then we're just like playing the props.children right which is you know um oh it's friday day thanks miguel yes friday do you like that could be fry tim debbie day or debbie tim day something like that yeah we're not there yet our names we will figure something out what i really think is nice that in react props is more strong it has more things it has children and it has more context to it and so you have more freedom with it this is kind of nice and i was always afraid right i i mean i started with react like four years ago right and my wreck skills were so bad um and react has changed it has evolved a lot now i was very afraid to go back to react because for me react was more difficult and i'm so used to vue and nooks and nooks is easy come on nooks makes your life easy anyone can use nuts oh yeah and anyone can build an application in a day with nooks and that that's amazing right but we all think oh my god i don't want to work in react because it's too difficult and it's not that it's too difficult it's just that it's more javascripty so if you have the basis of javascript it will make your life easier and once you can kind of understand those things understanding what spread is what destructuring is things like that which is the javascript that i didn't learn four years ago because it wasn't even there right it's all the new kind of funky javascript that's that's kind of come out oh look pedro's given us a name um and also a good question before it yes you prefer they use context as react have or composition api in my opinion it's more easy to understand view um i only started learning the composition api so i'm not an expert in it um and i've only started learning use context so i'm not an expert in that either so i don't really know what i prefer because i haven't used them enough what about you tim have you in an opinion i think well they're probably not similar but the used context thing is something you kind of have to wrap your head around but it's a really cool thing that gives you a getter and a setter kind of thing and but i think isn't it similar also with the composition api i don't know um i've used both but more extensively right because no i can't i can't comment on to be honest because all the projects i work on are generally enterprisey big fancy projects and they're not just not going to use view three yet it's just it's not it's too scary hey hey dude what's up it's very nice to see all these lovely people join us do you know what i found out that i didn't know and i learned this yesterday this is really interesting right if we return right we have like this is a very basic uh function called welcome uh we're returning a h1 that says hello and passing in the props.name and the props.name two right so very simple yeah but um if we put this in brackets like this and don't remove now this tells me right it's gonna actually tell me unexpected token right so it's really cool um yeah but i was leaving it in there and this caused an error right you have to actually remove well is that because it's jsx or is that because it's just javascript i don't know i don't know but i just found that out yesterday i was like why is it working why is it not working this is driving me mad and then i was like oh you don't like me we could have some kind of eslint here right well it did pick it up didn't it i mean like literally yeah it did right but i didn't have it like i had it on a smaller screen so i wasn't scrolling enough and i didn't see it so yeah uh it's similar but have more let me just throw pedro's what pedro's saying in there it's similar but have more few steps than view that's the thing yeah few is just it's a little bit more magical it just works because behind closed doors you just make it a ref or you make it dynamic and then it's all reactive and then it's just this proxy that it uses that is jsx pedro says thank you that's a json okay so this is excellent okay cool that's good to know and obviously then i also learned which are kind of new but you know simple things that you know if you want it on another line you just got to wrap it in you know exactly because you're returning a function that is a string that is parsed by jsx exactly whereas if you do that i mean it's telling me right which is good unreachable code to take i like that unreachable it's unreachable you can't get there that's cool right but when you hit save now does it fix it for you in your editor you know what i didn't set it up um on this app so i don't have an auto i haven't set up prettier or anything remember we built this up in like a second right so it's it's kind of yeah this is true last week this was like click let's go yeah so here it's like hello hello javascript and literally i could just put in any javascript i want in here right i could say two plus two plus two can i do that i mean i didn't try that before um this must be possible you think that works i mean because it's not a string it's javascript right so let's look at our funky app and hello folks right you see that look at that look at that hello four i lost my name because i i changed my name to two plus two but that's that's the thing right you're actually able to do any kind of javascript cool functionality once you put that and that's kind of like i'm in a string i'm in h1 and now i'm like oh give me some javascript and oh and like in and out right yeah and it's kind of funny that we are like so so happy about the basics but that is it's just where we are i know but this is like when you understand the basics you can build on top of that whereas if you build something and it's like what you tried to show me last week right you went look what i've got this this whole application right and then you're like but i don't know how to do anything right and that's the thing yeah i'm really good at assuming something that works and then just hack it but it doesn't mean you actually understand it that's why it was good that we went back to basics because we know code right and we can read code so me and you could read angular or react code get the gist of it know it understand it because we have experience but if you ask me to build it from scratch i'd be like how do i do that right and that's that's the thing you need to learn is the basics of being able to do it so we have uh 45 minutes more or less exactly right and pedro's asking me is recruiting and do you need international experience um what do you call international experience come on everything is like you know there's no there's no borders nowadays right so i guess maybe cultural differences understanding them no problem we're all i mean yeah i think the world is no borders now so i wouldn't worry about things like that yeah you should better if you want to go somewhere be bold yeah yeah this is i always do everybody um i haven't really learned more hooks or anything like that like i've literally do you know what i did actually i i should show you this i i built a component look at that hello this works however i want to see how you did that i don't know if i want to show you because it's very complex but [Laughter] it's too high level for youtube that's true then what i did was what i did was i actually used um i use bit to build my components right because i work at bits really yeah so you got to use bit so i actually built my component in my bit workspace and when we work with bit we think about components so i'm thinking about a component a hero component what is a hero component made up of it's made up of e tell me tim go on say it to me how would you describe that component how would you build that component it's a title okay and i don't know what you want me to do so a hero component generally has an image a title and a description in the cta okay and you did almost all of those cool and are they all in the one component it depends how granular you want to be you can do atomic design so you can have a title that's an atom and then you can reuse the title everywhere like the number is zero could be that same atomic title so potentially in bit you can make atoms and then put those together through some magic that is bit to make another component that then becomes a molecule which has multiple atoms in it and that molecule is then the hero is that the answer you're looking for more or less you're just taking it all sciency on me right let's just think about oh okay yeah sure it's just a component this is a component this is a component okay so you made separate components and then put them together that's the the one sentence version of what i just said exactly that's a simplified word them just went all science um but yes so this is a hero component composed of three components which means if i want to change my title across my application i change it one place and my title gets updated um yeah and then like in here i think what we're in up are we in up i think we're not i'm still figuring out the react things so here i just imported my hero from this is like my published uh package and you can all steal my hero if you want right you can all just like steal it if you actually take that this one didn't hurt right now or is this on npm well it's um it's on bit oh i'm gonna have to learn this okay so this is actually so how does react know that this is bit and not uh github for example with the slash and the username and stuff well yeah you kind of you install it with npm as well like i said but it's living on the big cloud not you know it's not living in the npm registry it's living on the big cloud sorry my buddy just joined so i had to say hi oh let's put him up there hey hey so yeah so basically i just i'm importing it from here and this is like it's going into my node modules it's finding it from there because that's where it is that's where i've imported it and then i can just use it and and this is where we get our props right so i'm gonna say is it react component that you got from bit or is this like a native javascript component or something so i built this myself this is my learning task it took me a week to do it right this was this is what i did in a whole week i built a component composed of three components um and like putting in things like this so i passed in a lot of kind of children and props and i'm able to like change it like you know we are live and like um and we can put on a friday right and then the id and i just put like ideas to him and the class is debbie like stupid things but just to show that you can add because i added these as like extra props i can add whatever i want in here so maybe you want to do cypress testing and you want to do like a data id like a cypress test id um yeah so being able to pass in like those kind of props um then that's kind of yeah what else props and now i'm just going to ask and try to learn so oh sorry uh like a tractor just drove by that's okay so if i save this right if i save this then we are live on friday oh cool right now so now i want to know those props did you type them inside the hero that it has to be a string or something or how does that work of course because i use typescript and that's something else i'm learning so i basically said that it has to be a string so if i don't if i pass in an object it should break i mean i don't know because i never actually tried this and i don't even know how to pass in an object in here like would i just do that um but that's not just like it just prints out a string right yeah it makes you string because it probably forces the string yeah i mean oh no remove the quotes okay if i yeah because i'm in string because i'm in quotes if i remove this this should be javascript but i think that's going to be yeah but this is not a javascript anyways no so it's just going to be a key right so that doesn't work but but if you make this a key in a value it will probably be actual javascript and it might oh let me do that again i know you mean i know you're trying to say you're trying to do things properly right so like not properly i just want to see how it breaks if it breaks you know what i mean still no but life needs to be a string because i'm sorry it's not com yeah let's try it like this no breaks oh no no nothing is happy no unexpected token so that's like us not understanding how to do it but either way okay um either way i can pass in in these on i'm gonna do a whole like i think next week maybe i'll i'll be able to do a live stream and teach you how to build your components with bit i will be there because i'm very interested in this because i've got to this stage and i've built this and i'm really proud of this like seriously like it's took a week right like it is super cool like look at that that's cool and uh it's taken from my website right if you go to debbie.codes that's my hero and i've just reacted really quick yeah like let me show you is there any way you can show the code of the hero yeah i'm sure i can like that's my hero this one there we go next is uh is is i haven't put in the font right i haven't like you know that's my component right so the idea is because this component is used across all my um pages right just with like different text and stuff um but when i first created that component i created as one component that has all these three things so now in react i've kind of like oh double curly something yeah i love when people help us out yeah i think that actually oh yeah javascript object that's it tim oh boy rocks [Laughter] thank you musab dabble curly dub i need to i need to read this is what it is that right so now this is um it's in objects are not valid as react child it found an object with keys tim if you're meant to render a collection of children use an array instead there we go nice right so actually super cool error message so anyway um why do you not go backwards well anyway let me just go back and put another title in and just say yay and now we've broke it because i've left that in go away okay cool okay we're back in business you're going to pay you thank you right so uh that's basically that's basically it let me see i'm going to see if i have it here because i don't want to open another application because um because because i just oh yeah of course because that hero comes actually from look at this look at this look at this look at this i am in a node module i live in a node module is that cool this is like this coolest thing ever i've never been a node module before right now my component is very complex so this wasn't my plan to show you this but anyway we're here now so um i'm trying to render an object that's the area exactly and i can't render an object because it's a string so that's what pedro is saying so cool so basically yeah this is me um in here in my node modules that's lots of sub components yes i know right because i went a bit hardcore um so in my hero component let me just open up my hero tsx right and this is this is as simple as it is like this is basically like you know my heading one my h1 my subtitle which is a component and i'm i just kind of flexed you know use a flex whatever to kind of like you know make that all funky yeah and then my line break i don't even know it should be called a line break right it's probably a terrible name naming is hard so well the fact that you name the component heading one which then has the allies of heading if you now make it a heading two would break so naming is hard yes but if i make it if i wanted to make it a heading two i'd have to just change heading to an important that would work right if you put it if you now made that at two and the other yeah so that that okay that's cool yeah because i just have to import from the heading and my heading component contains heading up to six because we have six heading components oh cool okay that actually okay so it actually made a lot of sense and i was being silly nice you see you learn every day and then here i've put in like you know that it's got to be a string this is my typescript thing i've learned what the question mark is so it's like you know you don't have to put it in because i've put a default in as title and subtitle i don't even know if that makes sense to put it in right so if i actually remove um my props i will just get title and subtitle oh that's cool and then the rest right passing in the rest you know what that does i learned this yeah so this is the rest of all the props that you get in and then you just pass it through yeah right so the rest is like my id or my cyprus id or whatever so i'm allowed at that yeah anything you want you put here i like it exactly and it's really cool right because it's you're allowed do it so you know on this div like this is where my rest stuff are going right my cyprus id my my my class if i wanted to put another class for example or whatever i want so it's kind of like when you look at that it doesn't look that scary anymore i don't know let's be honest you learned more than me this week yeah really yeah you did i'm not using the theme context here so ignore that i haven't actually got to use it yet um oh hang on hang on uh you can delete the div wrapper of line break and pass as props the class name um yeah but i d i wanted it to be i think that was just my css kind of thing like i know i could pass in a style in here but i wanted this to be flex and separated from that and that's why i did it because the line break is just a span it's just a yeah but yeah that's just positioning and cssing but yeah basically passing in title subtitle and adding in my htr this is something that's new to us right adding in the https and the fact that like in few when you add other props they automatically get added and in react you have to actually say add the other stuff also yes it's like it's a little bit more hands-on but also more control yes because like the div knows he can have like you know i don't know things whatever the div can have so it's basically saying yeah i'm going to use a div and i want to get all the attributes that i gave and has so it's just about learning this right and then this is like my typescript right so i go in here and i go typescript um these are my hero props so these are my hero props and what i've defined here and so now that you learn typescript because i've had to look at that also at work this week and they use an interface and you're using a type yeah do you know the difference um i've i've learned it on a course on a workshop thing right but i haven't actually played enough with it to describe it on a live stream right don't put me under that pressure tim come on i think i have learned recently that there are people who do types and there are people who do interfaces okay i think that's like a tribe selection kind of thing okay so but let's not say too much because i don't know enough about it to actually judge but yeah tim what do you think this is cool right i love this i i want to try bit now well this is yeah this is just a way of like being able to like share your component and use your component in any application and i can actually you could just import that and you could use that in your application and you could create tim dot codes and be exactly the same as me but you could also just like change change it by using the theme context right you could just tell me how this is different than an npm package oh now we're going hardcore and that should be for next week but it's very it's okay next week no no next week because we have an hour left like it's very different um oh thank you marcel there's no difference between type and interface it's very different to an npm package because um i'm i'm able to right this is the cool thing and i'm not gonna do this now i'm going to show you all this next week because i'm only just learning because i'm still learning everything so like you know but i can import this into my application and actually actually modify it in here so that's not in my node modules i could just import it in here right yeah into my components import it see it edit it and then i could export it oh you make your own version of it or something yes right like a pork style thing yeah i guess so it's but it's like you just like bump up a new version but you can actually see it in the application that's what makes it really powerful but that's something let's do that next week because yeah this is a bit too much yeah okay sure i need to fully learn it properly like play with it more and i've only imported i've only done it once so i'm kind of like yeah let's not do it right now but that's the kind of full power of it and i'm going to show you next week how bit works yeah i'm going to show you how it works next week let's do that next okay so maybe what i should then do next week is actually make my own bit component no we'll do it live we can also make one live oh boy yeah i'm going to put you under pressure right because we can we can do live and i'll talk you through it and i'll teach you it and we'll do it live and we'll export it and i'll import it into my application um okay so what i want to do yeah there is actually different people thinking different things about types and yeah we i go types for functions interfaces for everything else okay so this is all new to us so you know like yeah we're learning this like types types works for me i'm just going to stick with types until someone throws me an interface and then i'll be like you know um yeah exactly pedro mind blowing seriously right so tim you know what i want to do yeah no i don't i wanna have you ever heard of dockasaurus i heard the word i have never seen it you know about could spell it right i was hello google what do you want me to do i agree i so agree with you um brock you thought goku source right so i have heard that this is very like uh nook's content okay right so i want to create a website like a docs kind of website and docker source is apparently the react way of doing things um compared to next content right um this is the document for version one and i want version two yeah let's go to two here we go so um we can build optimized websites quickly and focus on your content right so you get not just documentation you can build whatever right so it's kind of like you know viewpress right ah yeah exactly okay so viewpress next content that kind of thing powered by markdown built using react and ready for translations right document versioning content search so uh yeah these guys love it and let's build it let's build this right you're gonna have to help me because i have absolutely no idea um what i'm doing so this seemed like the stuff that like the tailwind docks are made out of for yeah which is nook stock snook's content oh yeah okay like the tailwind module for next so let's get started now this is like we're gonna read different documentation today let's see if we can actually do something more productive than last week um it's still an alpha that's fine i can live in alpha but it's already quite stable so since mid 2019 come on it's now 2021. never mind get a very long alpha okay um right so let's get started we want to get started introduction design principles ah get started right installation let's let's do this let's do this tim um i'm already i'm just looking at the screen to see what you're reading requirement we are good with that probably okay we can just go and do i need a name and template what is the name and template oh let's just do this example i like examples i hate when they give me brackets and things like that right so i don't know but what is that template um it's classic let's just go classic i'm just going classic i'm not gonna get all funky here um right so do we build this we don't build this inside of react app right so i need to create a new a new application right yeah let's make a whole new thing and leave this one behind rocky sorry workspace um make deer um what we call this live docs live docs that sounds good i like this silly live docs and then we're just going to go npx dogosaurus init latest init my website classic let's run should we ch should we call it live docs but then you're going to make a live docs folder inside your live docs folder all right it's fine let's do it like i know this gets all i get yeah i should have done it on the outside oh need to install the following packages well yeah of course i want to install the packages well the fact that it wants to install it that's nice let me bump that up a bit so you can see what's going on uh okay to proceed oh i didn't enter okay we're proceeding so we're installing right so let that install um that's gonna do all its kind of cool things i'm installing with yarn that's cool because i like yarn um and let's see what else if you do not specify a name or template it will prompt you one okay that's cool so we got that anyway right okay let's go down you see how i read docs i just jump from one to the other this is how i read two from code block to code block let me see the fun things right the project structure okay running the development server yep cd and so this is still building so basically that's cool we want a cd and we want an npm run and that should give us what we want right yeah let's just let this thing finish and see what we get when we run it yeah and i'm going to stop this because we don't need to see that website anymore no exactly it's taking a little bit long because you know live streaming doing everything downloading stuff maybe there's a lot of dependencies for this uh template i've seen no idea i mean it's obviously installing react no and mdx i think it is mdx have you used mdx npx is just mdx mdx no i haven't sorry so i'm guessing but i'm just i'm just speaking out loud so maybe you know don't quote me on this because this is the first time i've opened this documentation and this the first time i'm doing anything with it so until now look at that look at that look at that okay we're good i love it success created react docs inside that directory you can run several commands okay cool um so i'm gonna do cd react docs right so now i'm in in there and then i'm gonna do something really stupid which is i'm just gonna open another um you're not gonna open another code from here we are behind our cameras by the way sorry i just did it there i'm just i'm just running another opening another browser code insiders. oh you're an insider right yeah exactly i'm an insider i live on the edge which means i get all the latest versions and if something breaks i see it first which is great but i like living on the edge so that's why it's insiders and not code uh oh now we can't we gotta do um you're not gonna be like no just continue it's fine okay will you just help me with with talking to her yeah i'll just shout out some stuff it's all good so uh the the command was start wasn't it um yarn start yep let's do it let's see what we get and if i need your help i'll just send you the the live share if anyone has out there and hasn't used live share you should seriously try it it's really really cool tim just seen it for the first time tim is it cool yes we haven't actually used it much but it is cool bye-bye debbie and tim oh look say bye-bye to that beautiful website recreation i can see debbie's local host on my machine because of the live stream with tim look look what we got whoa it looks really really good this is nice let me just refresh this here this is all i did i just did an ins like but i have it on my screen now also because we are still live sharing something somewhere wow seriously you can see my local host yeah that is cool okay so this looks really cool okay so let's just close the terminal and let's let's see what we've got in here right so we've got a dot dockasaurus anything with a dot is probably just ignoring stuff that's that's doing its business right i think that is basically the dot next folder yeah exactly we've got a blog oh my god we've got a blog called hola oh how do they know i speak spanish yeah exactly so i'm gonna change this and go hola this is our first blog post live right let's see just where that changes right this is um this is exactly the same as nook's contact content right this is my yaml i'm putting in um all my you know yaml stuff and then this is my yeah exactly this is the similar approach right if i do this it's going to give me a heading header yeah sorry okay let's save this and see if it actually did something hey felix what's up hey well blog is on the top here so oh my god but it didn't does it show your stuff hola there it is but it doesn't have your content where is my stuff right let's finish it's the hola one it's the ola one which is this well is it still let's check the um oh nice blog post it's just but go back to the blog and then you don't source core team because that's here back to the blog overview page you don't actually see it this is um hello from me and the author is debbie uh i'm not going to change the avatar for now oh i can't even spell my name oh my god um right and if i change that yeah this works nicely oh look it's gonna go to github and everything i can actually put my github name in there this is interesting it's just actually given me a whole complete blog oh my god can you go to the blog overview page because there we didn't see your update you scroll down no no it is okay now it works it just needed some time maybe no i think we just were looking at the wrong thing we were looking at we we were looking at the yaml and not the actual md maybe yeah so let me let me click on hola and look we got our heading right and you can see it's oh and it's so cool it just works this is and also it was fast i like this this is cool right like it's view press basically yeah but it's split it up into blog and docs right which is good one is like like this and look it's giving you a whole markdown kind of like um like a way to you know see everything in markdown if you don't have a markdown within there that's cool even tables like this is actually giving you yeah it's giving you everything so that if you just wanna this is probably the github markdown right yeah i'd say so um and this one is just like an empty one and and we can look if we go to the second one again you can see how you can link to other docs pages yeah because it's cool it's a local link right so it's a local link background and then externally this is really well do you think this might be based on like next or something or is it it's a completely custom thing i don't know no idea no i don't know um let's just call it doc four dot md and we're gonna put it oh no don't do that what did you do vs code i didn't ask you to do that what what just happened i don't know just through some weird stuff in there um so when you start up you add in this i don't know i don't know what it's doing this is for id for and put what do they put in here name title title um debbie and tim try i can't even spell dockasaurus.com no it's actually not the easiest yeah that'll do right um and we can have a sidebar label oh i like this right and also a slug which is cool sidebar label is the label is going to go on the side so we're going to call this let's just call it debbie and tim right yeah cool cool and you said there's a slug right that's that's the root slug and this has no slug so this one doesn't have a plug because maybe you know another one or something now i want you out of here get out of my life that's better yeah and now escape click escape yes okay and then with like this is really cool and very quick to create content so now i go to docs we have where's my where's my number four do we maybe need to do a hard refresh of the page or do we need to oh you know what we might have to link to it do you think okay so this this is something super fancy that this is interesting you can write jsx you can write jsx and use react components within your markdown yeah that's cool that's what knucks has also i like it yeah so this is cool this is like you know your component but i want to know why my yeah okay let's refresh it and see come on number four you should be in there you're not there why are you not there um let's see this is interesting maybe you do need to link to it somehow is in the house hello felix anyone know dockasaurus why is this not working doc4.md what did i do wrong let me just have a look i got an id doc3 oh look my id is just four maybe that could be something maybe a number is not cool yeah yeah let's try this by the way my cat just laid down on my keyboard it's still working but okay let's refresh then maybe this is strange dog4.md i like doctor iii has id title oh we didn't put a title we did put a title uh let's remove the sidebar by label just so we don't get like you know i don't know refresh um [Music] this should work maybe it's a feature and not a dock no the future i don't know but it should just should we read the documentation you know what it might have not picked up the fact that there's a new file can you try to restart it in your console well that's true because we didn't do a document oh marco checkpoint if you read the documentation you can figure out how to do things if not you try on your own and then you come across um yeah things okay so in here oh yeah but where is where is my i don't know well inside docs there's here so there's an item called docs and there's an item blog but go to sidebars there's a sidebar still jason we really should start looking at things yeah start reading oh look at that i thought it would be automated like audrey met out auto magical well maybe yeah because nook's content does it automatically for us doesn't it right yeah we're used to all the magic stuff yeah but this this is good because that means you can create as many as you want and choose exactly what is where and put it where you want to put it so even if it's in that folder because here what we're doing is we're only adding it to the sidebar so i reckon it would have worked if we hadn't gone to the extension like to the slug of it because this is like like this this should have worked right it is working now it's lovely but it's it's putting it oh now it's gone again no it's there right so the problem was we didn't add it to the sidebar it was actually there it just wasn't in the sidebar so viewpress does that actually right you have to add it to the sidebar of your press you have to actually manually add in those things so look at that click on edit this page what happens if you click on edit you go to github oh oh that's that's not bad it's i don't have rights to go to facebook and edit the docusaurus master of the website nope [Laughter] so but obviously you would put in your own link to you exactly that's actually really decent yeah which is what we do in next content right we have that edit button and you can actually go in and edit the github page um actually with next content you can also double click and edit the form field well that's different that's in actually editing in here that's the cool thing about nook's content you can click here and edit and that's amazing is my most favorite feature so this doesn't have i do that all the time but um but this is really cool so if there's anyone out there in the chat today who does not have a blog like you have absolutely no excuse now because you could actually create one like we've created in 10 minutes right this is ridiculously easy you can just get rid of that if you don't want docs and you can change can we change your mic so can you statically render this do you know can we just go jam stack i want to just change this to um i'm going to change it to debbie and tim see look the organization named facebook so that would be like here you can actually put yes yeah and um project name usually your repo name so i'd create a repo for on github called docosaurus right i could pop this uh i could change this to debbie tim for example debbie tim react right um on the nav bar i want to put the title being deleted [Music] oops here we go and we can put our logo right this is really cool items so we can go to doc so i could add another item there if i wanted to let's do that in a second we're gonna break something in a minute look debbie and tim woohoo look at that isn't that nice beautiful i really love the home page like it's it's very similar to viewpress right yeah like you know but all these things are because this is the the right way to do it basically you just use different tools to get there it's just quick and easy though isn't it obviously like look we've automatically got you know dark mode yeah that's cool yeah that's cool github can we figure out if you can um output this as a gemstack website um because then suddenly you have everything that you want you need to build i've seen i've seen it i've seen a thing i've seen a thing introduction maybe installation installation uh i've seen a bill come on we we could potentially look at the package jason we could there it is um connors will be generated in the build directory which can be copied to any static file hosting service like netflix yes you rock so yeah okay so making your blog is now no longer complicated yes and i like this because it's um like it's giving you it's not just docs right and i think that's one thing we focus on with the nooks content we focus on docs and this is kind of focusing on hey like what viewers it's like focusing on hey actually where's blog you don't it's it's just on how it's perceived because i use next content for an e-commerce website look at this look at this look at this hello hello it's already like oh my god it's giving me all these tags oh my god this is so cool like you don't even have to program this right this is all done for you is that be based on this kind of thing we will not have a job anymore in two three years i really like this this is really cool can we try and do something really weird and different right let's try the mdx thing i want to do this i want no i want to do this i want to add another one so let's call it i don't know what we call it uh live for example right and this is going to be our live imagine we were to put all our live streams here right so now we need to create a folder called live this is what i'm guessing i have absolutely no idea we're really assuming things here but let's try um i need to put it let me just you know what i'll do yes root level right and call it live oops spell it right right and i mean it doesn't matter we'll just call it one this this could be enough well you have this slug thing there that might screw it up right let me remove those right just so it don't get complicated delete delete delete debbie delete all right okay yes move that trash and let me call this live one just so we don't get like you know hang on if i click in here and press enter i can change that yeah you found that out recently right on windows and okay so now this is going to be live one and it's going to be we are live and let's just yeah the same live on the slug i'm just guessing because it's a homestead let's remove all this um and let's put in uh oh oops oop there we go this is our live page for all of our live stuff right okay now i'm guessing if anyone is in the chat it's gonna help we have to go to sidebar exactly to add another sidebar right oh maybe not wait maybe not because this is not the sidebar this is on the top we did it in the config let's just run it and see let's have a look look at this look at this does this work oh my god oh my god oh my god watch this what's this page nothing oh yeah i was so close i was so close no but that's because of the slug thing maybe yeah i think so let's go back to live one oh you know what maybe if we open the source folder we'll see a docs and a blog file oh come on i was so old let's open the code i think if we open the code you'll see a blog jsx or something in source pages oh maybe not what does index say this is the home page features this is how you change those um like i graphics and stuff right and icon okay so this is not the way because i thought maybe you had to specify the live page as like a js file this is this is the home page oh spell it right debbie uh anyone in the chat know how to do this i want to just add another link um just guess what the link was added for sure maybe we have to do something else in the convict then okay let's have a look we added our items all right uh which is blog we added live that's the same um hi gary um we are changing the style to dark that's the footer the footer is you know not we don't want to worry about the footer presets okay blog show reading time oh look we can just show reading time as well so we could add that to our live we might have to yeah do we have to add a live property in that theme thing below like where you would where you just copied something don't we have to add live here also or is that just links for the footer this is their items and it should just go to live like this is exactly the same yeah so it doesn't know the route that we have and maybe because i created a folder do you think it might just need to reset it um should we just restart it maybe maybe it needs to just i'm not sure i have no idea but we're just gonna like you know if in doubt we start the server that's my thing yes that generally reboots something right we'll leave that to run and see if it picked up the fact that i created a new folder um okay it's building let's give it a second because if not if not oh i have an interactive dock in here but that should make yeah we might want to remove that remove that so we don't get confused exactly no conf do we maybe need oh no i was thinking maybe something that's called life.md so it's like we can put it in here in the sidebar but this doesn't make a difference this is like live i mean this is something else i think yeah it's just adding it to sci-fi i just want to do it anyway well let's do it anyways because you know it's cool right yeah we'll learn as we fail blog live no no damage we could not find what you're look i like that i like to get a page not found that's cool so what are we doing wrong here what are we doing oh boy i have three minutes left we better fix it no way should we look at the documentation yes um configuration maybe guides guides to add another page creating pages yes so creating pages there we go uh ah you do need to add a page in the the source in the source hey norbert what's up thanks for joining i'm not sure if like because this is like blog and it's just to set up to set it to set up your site's blog start by creating a blog directory like we kind of did that right um but you know what maybe they make docs and block their special types and everything else we have to do ourselves yeah this is kind of what it looks like to me yeah so if we do a page let's just okay we might not want to add a react page ah go down add a markdown page it says next chapter right top you can check this is it okay oh you have to do it in source pages that's weird yeah and maybe copy some oh you know what that folder might just be only sidebar things do we need to rebuild something no idea absolutely no idea um we just created live or we created live not live md well we have already the live one id somewhere else right like we're gonna we're gonna mess up this a little bit so we should rename it oh no no you can keep this and put the slug slash live in it oh i'm just going off all the assumptions i'm i'm allowed to make here here you see slug yeah and now we might add slug life something like slash live and maybe make the id something else because we have a duplicate id now uh live live 2 live stream so we're not mixing up any lives right so now we go in here we should get live yeah but now that's not gonna work because that thing on the top that if you click on the live link on the top it will go to slash live yes you see so if we now make a markdown file that connects to slash live it might work the slug should be live so it connects up from what you have in the url i'm just assuming here you think no i don't know no okay we failed again can you believe it we started out really well right we did really well um yeah we need to study i do have another meeting starting asap no however i think it was fun the the one piece of feedback i might have for the stream is that we didn't actually do much react well we just built an application in react without using react that's cool which is not bad i mean that's kind of fun it's kind of just showing you how easy react is that you actually don't need to know react to reality well the ecosystem is so wide like the one thing i'd love to say is like yesterday i was invited to a clubhouse how do you call those like panel discussion yeah and it was just about javascript and there were some american people who invited me and like cool i'm a panelist in clubhouse now and then they proceeded to only talk about react and i had zero to to add and this is like there's so much in react and all of the us basically uses it and so it's a nice world for us to dive into right but this is a great start to get interact right what we've just done um and then like um you can just like start in that and build an application and then learn react a little by little i think that's a great way to start if you're just starting like you know just take dougasaurus and start building um and add your jsx components in there and kind of like figure it out a little bit and you can visually see it in a very quick and easy way i think well something if we use more react and you need to do some sort of docs or whatever or it's the quick block this is clearly with the way to go you want to see more about it thank you matthias actually mattias me too because but he and i used to work together let's program it let's actually let's actually organize it and and actually put it like a time on it so people know that we're going to go live instead of just going let's go i like it right let's do that next week right yeah we could have really used it where we work we i used to work with him and yeah we were like that would be cool nope it is amazing and and you know um when the new version the new um version is out um like it's actually it's actually in public bed at the moment so you could actually try it out but don't tell anyone because we're still fixing things right um but next week it's gonna be so solid and we're gonna do a live stream on i'm gonna show you all it's gonna be amazing you're gonna love it um but yeah this has been fun tim thank you again um definitely debbie and tim fridays have got to stay we've got to do this always i think it's cool and thank you everyone in the chat for being here for watching for helping us and you all rock so i'd love to see you all create a docusaurus website and then tweet it and tell me all about how your experiences and if you figure out how to add a folder let me know and i'll do it this has been great thank you everyone and uh

Channel: Debbie O'Brien

Views: 303

Rating: 5 out of 5

Keywords: react, docusaurus

Id: JMa-NtYVKXg

Length: 60min 55sec (3655 seconds)

Published: Fri Mar 12 2021