Functional React With Styled Components (with Shaundai Person) — Learn With Jason

hello everyone and welcome to another episode of learn with jason today on the show we have sunday person thank you so much for hanging out with us today how are you i am great how are you jason i'm doing i'm doing so good i'm so excited to have you on the show uh i i'm also just excited because every time that i meet somebody who has their own name as their twitter handle like no no end initial or anything i'm just like i'm in the presence of a celebrity here like who gets their own name it's like you think beyonce you think uh well so uh but for for folks who are not familiar with your with your work and why you deserve a a just a name um can you give us a little bit of a background yourself yeah so i am shonde person i say if you get confused i think of it like a day of the week friday saturday sunday i'm a ui engineer at a company called salesloft and we build software for salespeople um which is kind of serendipitous because i'm a career switcher so um last year i decided to switch careers i was in sales for 12 years and um made a leap to something that i was passionate about which was engineering and um so i sold software at sales loft and then um taught myself how to code and made the switch into building the product fascinating so you're a career switcher inside of the same company inside the same company that's super cool i think you might be the first person i've heard make that like usually i've i've heard of people who you know they were doing a thing and then they learned to program and then they join a company that like overlaps their skill sets i love this story of of actual like lateral growth like that where you don't have to leave your job to get into a career that sounds more interesting to you that's amazing yeah it was scary and it was a leap um so i'm a mom too and i'm a mom to a three-year-old so sales is something that's secure and people veteran sales in general are doing it for the for the money um i was good at sales and um it had been my career and what i saw my career trajectory going you know sales management or sales enablement or something like that so it was it was a leap and then um you know i consider it a lateral move but some people might say because i was starting at the entry level uh that it might have been a step down where i already had this credibility built as a salesperson now i'm going into kind of an entry-level type uh role or level um in engineering but it was something that i was truly passionate about like i would spend my nights i gave myself half an hour a night to learn to code and then it would turn into four hours five hours maybe up until one am um so i was like i said i can make money doing engineering too but i could also love it so yeah well that i mean that's amazing like i love those types of stories because it it really like i i repeat this phrase over and over again of play until it pays which is kind of find something that's interesting and chase it and then find a way to make that into what you do for a living right and i think that that is not always practical but i love it when it plays out like that when you can just be curious and and let that curiosity guide you towards something that you know that can be a fulfilling career um so i'm so super happy to hear that worked out for you thank you thank you happy to be here part of the space of course of course and what's up chad i see a lot of familiar faces i see i see nikki out there linda luke what's up everybody alan hi um it's good to see you all here thank you for coming and hanging out with us today and why are we hanging out today shaun day what's uh what is our plan today we're gonna reactify today we're gonna react earth day it's earth day happy earth day everybody um we're gonna rectify everything and we're going to style it up so this what we're going to do has nothing to do with earth day um i don't know why i'm talking about it but let's talk about react and styled components today functional um functional react yeah so um i i actually i'm super excited about this because i feel like i get asked uh kind of like i talk about react a lot like you know react is a is a big part of my day to day um but functional react like this idea of of like functional components versus class components and and the the differences that's a that's an interesting conversation because i don't think that we but we talk about it sometimes but um you know what what is the benefit would you say of of choosing one versus the other so um when we're talking about choosing one over the other we're talking about class components versus functional components right class components and i'm speaking as someone who's self-taught so um as part of my curriculum i learned both um it started out with class components and this is the way that things were done back in the day um or are still done now i i shouldn't say that back in ancient times um so with class components class components are kind of like um a template right so it's kind of like a stamp and then you can import these react components into different areas of your project or app and use them and make little tweaks along the way with class components there's also this concept of this uh which sounds very confusing and it was for me as i was learning it um and [Music] back in the day um there was no way to use state in functional components so that's why you needed classes so um functional components were considered it's not nice but it was they're called dumb components right because they couldn't hold state now you can do the same things that you used to be able to do with um class components but you don't have to worry about this you don't have to worry about this concept of binding like binding functions you um will use what's called hooks which i think is a much cleaner um way of expressing the same type of thing to be able to um start with a certain state to manipulate the state to update the state as well um and then uh you can express functions as either a variable or a uh function declaration which would be function parentheses and then um open curlies and we'll talk we'll talk about what that all means um but but yeah so i think the difference really between it you can do the same types of things but the reason why i lean toward in my own code functional components is because it's a lot cleaner and yeah you know when you're working with apps we're working with a company that's building these large apps or even as a learner and trying to just wrap your head around the complexities that is react or javascript um it's i i like to just take the easy route like why not i'm gonna get to the same destination like let's just take the straight breath so right right after my own heart like that i very much feel that like why why make things hard i joke a lot about voluntary suffering and i think that a lot of programs programming is built around this idea of voluntary suffering let's make this hard so that we can prove that we're smart or whatever it is but i really do like the way you describe that and um actually i had a conversation with sunil pai who is he used to be on the the react team and now he's um he's off doing a lot of cool stuff with another thing we actually had him on the show recently uh talking about es build i'll drop a link in the chat for y'all um but he did this really interesting visualization when when hooks came out of how context was grouped in class-based components versus functional components and what he did was he color-coded it so he was like you know this color for state this color for what the ui looks like this color for other things and then he took a class component and he showed like the color was all mixed each line was different colors things were weird and then he moved it to hooks and the colors all grouped and so everything was suddenly like contextually grouped you could see exactly where everything was happening um and i thought that was such a brilliant way to show how hooks clean up react code um amen to that like that's 100 that's my life like i want to clean i want my my color is organized um metaphorically speaking so color code everything always um but yeah so so then the other thing that we were going to talk about today is styled components and so style components can be a little bit of an overloaded term i i see a question in the chat from nikki already um are we talking about a flavor of styled components or are we talking about the library called styled components we were talking about the library called styled components um yeah and so this is also called css in js so they're i'll give you the why this is always critically important um for it for any anybody that's that's trying to learn but um there are a number of different ways that you can style a an app um or a cs file and you're essentially using css but um you have the option traditionally this is the way that i was originally taught is to um in your html you can import or in your js file you can import a separate style sheet uh dot um css file i think it's called um it's been so long since i did it another way to do it is to do your css inside of js and so what this styled components library allows you to do is you're using um what's called temp template literals and we'll talk through what that actually means for those who don't know but really what you're um you're doing is you're using the same type of css the same um descriptors and everything right within your javascript file and you can also because it is a really javascript you can also add in complex functionality where you know you can make your styles more dynamic yeah um so one reason is like added complexity and being able to to navigate that but another reason is um think of any project that you're doing right um or an app that you're working for a company like salesloft and you have a hundreds of different um different js files right so i think you'll have an index.js file and then if you're using css you'll have a matching index.csj index.css file then you'll test it so you'll need an index.spec index.spec.ts5 or js files and so three different files for one component and then as it grows you have your app.js and your form.js and your form input.js um that it's multiplied by three so this helps you to get rid of um one third of those number of files and then for the newbies that come into um your repo they don't have to look around and figure out okay you know i know that shonda i styled this button so perfectly but i cannot for the life of me figure out which style sheet it was or um leverage those files anywhere else so things like that so it just helps um again for making things cleaner for getting all your colors organized so to speak i'm going to keep using that term um we that's that's another reason why we might want to use style components or css and js great i mean i'm i'm into it so i guess this might be a good point to actually start looking at some code because you're you're describing it and i'm interested i want to see how it works so let me switch over into the pair programming view here um so this is this is sunil he did this uh this mock-up but we're not talking about sunil let's talk about shaun day uh go follow her on twitter right now um go make that happen go go get that follow in um and while you're at it make sure you go and check out the learn with jason website we have as always live captioning happening um we have rachel with us today thank you very much rachel she's from white coat captioning and that is made possible by our sponsors we've got netlify fauna author zero and hasura all making the show more accessible to more people if you want to follow along with the captions you can do that right on the home page of learn with jason.dev and don't forget these are linkable go check these sponsors out um so today we're talking about react specifically so let me drop a link to that in the chat so you all can go pull that up if you want and then we're talking about styled components so here is the styled components homepage um so i'm i'm ready now like you've got me sold on this i want to write some functional react i want to do some styled components if i want to get started what should i do first so the first thing is to open up your um vs code or whatever wherever you're writing your code okay actually yeah we can open the terminal too oh my goodness i can't type here we go third time's a charm beautiful okay so yeah we've got vs code and um this was a mistake sorry i should have said the first thing the first thing to do is to install create react app we're going to use a tool for um building putting together our react code so let's go back to the ancient times back before create react app existed um it took a lot of stuff uh to put together a react um file that works in the browser so little known fact react um doesn't right out of the box work in the browser you need different things um webpack you need babble um to make it work and to make it function in the way that it should function and so create react app is this tool that allows you to um just put in one command in the terminal um command line and have all this stuff packaged up beautifully and ready to go so yeah we'll use create react app for this excellent and and in the chat somebody just found sunil's post this is the difference between a this is a class-based component so you can see there's um there's context there's data there's styles more context here and then when we switch this over to a functional component you can see these the context groups up the data groups up the style groups up and suddenly you've got a nicely you know contextually grouped set of code and it it obviously also just gets much shorter right like it's a little easier to read about so i think that is a that is a pretty beautiful um comparison of the two styles and and why they're why they're uh why this move was a good move on the the side of react i think that hooks gets a little bit of flack these days because it um a way that i've heard it described that i liked is that it takes what used to be hidden complexity and brings it right up to the front um and that i i agree is you know it sometimes i don't want to know that all my stuff is broken [Laughter] but it's probably better that we do um okay so i have i have create react app let me see if we want to get started i can just run this right here yep so go to let's just copy yeah the first part i'm gonna put it right in this folder using the dot like that okay yep and so this command is what's going to create the file and then the next um thing is going to be the name for it or that's in the documentation that's that's the thing yeah so this this is saying like it's going to create a folder called my app since i put in a dot i already had a folder and i'm just going to have it use the folder i'm in um which is this uh this one here react and style components we are cooking and here we go all right see the chat has has rediscovered flappy jason um dysfunctional mean hook that's a good question um does it mean hook [Music] really just got back going full blast today [Applause] um i don't know i i don't know the answer to that we can look it up so i i do know the answer to that um the the difference is when you talk about functional components you're talking about writing them as functions hooks make functional components more powerful but they're not like required you can write a component as a function that's what we used to do for uh for stateless components or uh yeah i've heard them called dumb components um but if you didn't need state you could not write a react class you could just write a function and it was simpler to read but then it would lack all of the class life cycle hooks so what hooks did was it let us write class style logic inside of functional components but they they aren't they aren't like you don't need to use hooks to use functional components unless you need to use state and don't want to convert it to a class i assume the question is yeah um but yeah so that's that's that uh let's see here we've got so we've got ourselves a site let me pop this thing open and all right so first and foremost we have installed kind of a basic app here so i'm just kind of looking at what we've got we've got the react scripts we've got the react core some testing so that we can test this thing and then web vitals around performance some basic scripts okay this all seems like what we want and then we've got our source here and some public stuff so these are all like that's favicon yeah and so the the public uh so like i said it gives you everything that you need to kind of go get up and running public folder is just um so webpack is uh i forget the the term for it a module bundler or something like that um but what it what it what it does is it takes all of the dependencies and things that you know the stuff that was in your um json right now and gives it to the browser in a way that the browser can understand it so um what it passes to the browser is something different everything that's in the public folder is stuff that the browser doesn't need or sorry that webpack doesn't need to touch um so you don't really have to worry about too much of the complexities of how to manipulate this or what to put in public um but some things to know is that like the favicon is in there um which is the little icon in the tab the tab browser that's there um and there yes exactly and then your index.html file is in there as well so um one thing to note about create react app is that it allows you to easily create single page react apps and so what i mean by single page is that we are essentially just displaying in every one of these apps um or every app created from this create react app just one html so the way that i think about it is html is kind of like the skeleton of or the frame of the house and then we will paint it or repaint it with react and some styles so um the reason for react is it's a lot faster you don't have to like if you if you click to click a button and the background changes you're not rewriting the entire frame of the house all you're doing is repainting it so it just happens like like that you don't have to flip to another page so um where you know you may be used to building out have like an index.html page and an about um html page and you have to have separate stylings and stuff separate js maybe um this is all just getting rendered from the same one html which has a link um and we can go i think it's down toward the bottom of the same html file sorry um inside the html where we yeah so we're linking there's a div with this id root and that's what we're linking to our js so all of our um react files are going to be connected with um this id root okay right yeah because we're grabbing it here right here exactly exactly and so um this index.js is the parent of all of the react components and i think in metaphors so bear with me this is it non-technical by trade um originally so um this is for my sales people out there so um this is like the family lineage this is like the grand mac daddy right this is the one this is the app this is the component that like sits in the big armchair he gets the big piece of chicken he walks around with no shirt on like this is the daddy of all of you for that components right so everybody all of the other components are just part of this family tree and they stem from this app index.js okay so this um render this react.reactdom.render function it's a um react dom is the html the dom it's like this mystical virtual world this is where we're doing all the painting i'm sorry jason i also think mostly in like metaphor and analogy so this is so in my lane right now i'm so happy that i'm not the only one who does this i sit up at night think about like how is this like a unicorn it sounds so silly um yeah learn the technical terms for stuff but i'm gonna explain it to you like and you'll understand it and then you can find out what the technical terms are that match it react dom is the the frame this is where the skeleton is and then this render is a function that takes two arguments first argument is the element second argument is the container so you have your cookies and then you have the box that the cookies go into you we're saying that um the app is what we want to put and stop laughing the app is what we want to put inside the container and this document.element.id which is root where we're tagging the root tag that's where we want it to go so essentially to explain it a third time sorry um we have the frame and we want this app component to be painted on the frame yes absolutely that's what that is okay so we've got the granddaddy and this is not the one that we're going to change um the one that we're going to change is the um child of granddaddy this is the mama one this is app.js so if we go in yeah um so this is app.js so let's go into this one and this is a functional component already so there are two different ways that you can render a function component some people favor this way um because we're using the word function then we'll say the name of what the component is put the arguments inside these parentheses and then open the curly brackets to put whatever functionality that we want to in there my favorite way of doing it is to declare it like a variable so um this may also be called like a fat arrow function people call but um what i the first thing that i do um with this component in particular is i just kind of like blow it up so what we're going to do is um take the function keyword change that to a const and after app we put um the beginning of an arrow and then after the parentheses but the rest of the fat arrow okay and we have a component that works pretty much how it used to before so this is um the main thing so it's really a matter of personal preference in what you decide um the reason why i like declaring it um as a variable is because i think it looks i think it looks cleaner this is just you know my own personal preference um i like to see the uniformity of all my variables in my um function functions to just start with const um but like i said some people just like to see that actual function keyword and know right away that this is a function but this is what we'll be working with today yeah now this is great i mean and and like you said it all comes down to personal preference right because this you know functionally this is equivalent to the other one but really it's it's whatever makes you feel like you you like the code you're writing and i think that um for me it's always a matter of consistency i don't have a preference of const over function i just like that son of a biscuit what what happened you oh you're mad because the the dumpster fire is not on my head anymore i've watched you chad i'm just trying to ignore you um uh but yeah so we've we've got um you know you can use the you can use the function style you can use the con style just keep it consistent you know make sure that your co-workers know what they're getting into when they dive into this code uh but then so then down here we export that so that we can get it here yeah yeah and there's a number of not a number there's two ways that you can um or three i think but there's two main ways that you can export it and if you want to try something different you can leave it as you as it is right now or instead of the export at the bottom the way that it is one way to do it is to get rid of the export default app at the bottom and then um we'll just add the word export before the const when we make that declaration right there okay okay the difference now though is if you go back to your index.js file is that we um need to add curly brackets around the word app because we're exporting it as um i think the term is a module a named export is the like it's now named instead of a default okay you're right jason i was testing you um yeah no i uh it actually this is one of the things that i really like about the new syntax is that this this type of flexibility is available i think when um you know in the in the ancient days as you called them uh when we had to write common js where everything was like using require and you had to do like module dot exports and stuff that was a huge pain because we're writing node code for the browser this this is es modules this is this is web native so you know these days if you weren't using jsx because that doesn't work in the browser you could ship this much react straight to the browser without transpilation you would just need uh you would need to write this with like the the jsx style function which i don't recommend because it's not fun it's like a lot of work to write out a react tree as a series of nested functions um but so yeah so this i mean i like i'm into this but so i can already see one thing that uh that we talked about which is you you're not a fan of this here this uh this dot css that is correct and so um this is bringing us back to our point where you need a separate cs file um css file and then if i wanted to test this i'm adding a third file for the same component so we're gonna blow it up as well um so we can just uh let's just get rid of the export how do you want to do you want to just ignore the app.css or do you want to just like delete it now let's let's delete it let's get it out of here um should we try let's let's do this though let's get this thing running so we can see what happens as we go so if i can remember what the command is it's we're using yarn and it's start i think yep yep that's right this will give us a dev server and it opened in the wrong window how dare you okay over here disrespect okay indeed okay so uh what we had before is when we have this style we get this is what the page looks like and so i'm going to stick this one to the side we'll stick this one over here and then when i get rid of this we now no longer have any styles so everything starts to to get a little squirrely but we can also do things like hello and it reloads really fast so this is what this is one of the things that i really love about create react app is how quickly we can just like see things happen right right yeah so everything is in real time and if you're one of those instant gratification type of people like me um this is a great way to test and figure out what um what's going on and you can see instantly when something breaks and you'll get like a nice message that yeah let me let me break it and let's let's do that on purpose yeah yeah and it even shows us like what's wrong here that's that's not that doesn't look right let's let's fix that i see see we're testing how long the beard goes you can grow it off the screen y'all um okay so then now we've deleted our our app.css or we're not importing it anymore so at this point i think we need to do we need to install styled components or yeah and so um we can let's go to the documentation i know it by heart but i just want to show you guys where where it is uh documentation probably get it installation yep installation okay and then um it will be yes i'm gonna grab yeah we're using yarn so i'm gonna grab the yarn one so let me do that nope not that button this button oh my goodness try that one more time there we go all right so we're getting styled components added here and then um once that's in like that i will start the server again and let's see if it's gonna use my same window i think it will it did okay that's one thing that i really like about create react app is that it's smart enough to like keep the tab so it doesn't keep opening new windows that makes me really happy yeah um all right and now if i look we've got styled components so behold my bucket indeed so okay so now i'm ready [Laughter] great okay so the first thing that you'll do is import styled components you'll need to do this in any file that you're going to use css in js so where you're actually using your stylings so um import styled from yeah let auto complete do the work beautiful this is great all right amazing all right so now we can add some styles so let's just um let's just play with it so let's change the background color the way that you'll use style components at a very basic level is um and this is up to you how you want to do it i'm giving you the way that i do it so online three um we're going to do this before we do our um function uh declaration and all that good stuff you could do it after it'll still work the same way so we're gonna do const like we're um naming something so let's we're going to replace the the div um so let's do the capital uh yeah we're going to do capital d div is what we're going to name it equals style dot oh look at the autocomplete yes and i'm going to make an assumption that we want to div we do want to do okay what we're doing in just one second and then we'll do um the back text so do two back ticks okay perfect so what you're looking at now is we have declared a variable called div we're going to use the capital word d because um we don't want to and this is the same thing with your react components you need to use a capital letter because um you html tags are all using lowercase letters and to avoid having confusion between the browser and your brain and your app you need to use capital letters for um this is this is really a component so um we want to use capital letters for all of your components so we're using capital d div you could call it whatever you want to so this could be capital d div it could be capital d dog whatever you want it to be what's important though is that you use the word style and then you'll tag it to whatever html element you're using to replace it in this case we're going to be replacing it with a div so or replacing a div with capital d div so we want it style dot div and then i just drop this right in right exactly yeah and so that is how now we have a style div so they're linked they're linked together and i saved it and nothing happened but that's to be expected because we haven't added any style yet right exactly yes now we need to add some style so let's do a background color um so yeah do i just write like plain css in here plain css exactly all right what's our what's our background color what's your favorite what's your favorite color uh okay yeah this is pretty this is like a work of art yes i mean i i don't know i'm getting a little misty this is pretty good so um yeah so you can add any any type of styling that you want in here um let's make a height of ah all right so that's exciting sorry what was the 100 vh uh it's a beautiful thing okay yeah so it looks really good um let's add some more stuff let's do um let's center it let's center everything let's uh display flex this is my magic trick display flex and flex direction is column column and justify content yes content center and align item center line items center beautiful look at it go yeah so we put everything in the middle guys um and also i will say my bucket indeed uh we just vertically centered something in css which i i i know is an old joke but i actually do like to point it out whenever it happens that this is how far we've come where you don't have to like do anything wild you can just say i would like this to be centered please and it just works yeah yeah and like when i was first learning i i know flex had come out uh before then but i hadn't hackers you dirty hackers extreme expense to be able to center divs i was like add a little helper at the top and like make sure it's the same size and then if people scroll down god forbid like um it just got so chaotic so these um you know three or four lines of css is it's present in every single app that i hate that i built um okay so we did that we sent her to div and so same situation if you're trying to do like img a header or anything like that all you have to do is tag whatever html element it is with um the styled style tag and um so if we want to make like we want to make this image uh we'll do a style dot image and then i can uh let's say we want to give this like a set width of we'll say 20 20 of the screen um and then actually that's probably enough to start right and then i can just swap this right on out yeah so you're just replacing the tag and it does the thing so let's make it bigger look at it go uh that's i mean that's great right how how great is it that we can do that sort of thing and then i can also give it a height of 20 oops what's going on there right okay so my i don't know why it doesn't like my actual width it's like my background is doing something weird it's okay everything is fine oh you know what i bet it is i bet they've got some empty space on it so that it doesn't smash against the side of the screen oh like a little bit of padding or something yeah okay we can make it a little bit bigger to kind of yeah accommodate for that hey oh beautiful great awesome awesome so yeah and i think this looks this looks shippable basically right now so um and i'm glad that you did this this one because you can see that even on the um image we're still giving it the same prop so it's still it's extending all of the same image props that an image has like the src the class name and all that um good stuff the alt all the same the only thing that we're replacing is we're turning this into a component now a js or react component and now um we're able to just use our css styles and extend those in here as well yeah for sure i mean this is you know and i can see how this this does get kind of nice if we're talking about you know the the image that we were looking at from sunil where we see the color coding of things like now you're you know we've got this big color block of styles uh and then we've got markup down here and we don't have the the mixture of like doing inline styles uh which you know is and there's no problem with that right like there's a lot of good things to be said about things like tailwind there's a lot to be said about pulling it out to css modules you know you can do this any way you want this is all this all comes down to personal preference and what you and your team decide are the best thing um so you know this isn't uh nobody's telling you what to do do do what you like right i love that yeah so um let's do something um what i was thinking we could do is do like um an input and so like i explained before what uh one of the other advantages of style components is that it allows you to use javascript functionality and make your styles dynamic as well so um we can add some dynamic properties to our styles and test the waters with that so um let's get rid of the contents that we have here the image the hello text the learn react and let's work with like let's do an input and a button so i like that header so we can leave that there okay um let's put a um an input and just one button and yeah we can we can start with just like some beautiful basic stuff and then we can build on that okay so here's our here's our basic button yeah and so all these styles are just the basic you know whatever html it gives us um so let's add some basic styling to the input so let's change that to a styled component so we're going to call it whatever you want let's say input tag the input [Music] there's that and then i can do the same thing for button so we'll do a style button um and chat i see your questions about using this other places we will have a chance to do a little bit of that um shortly so stay tuned um okay so we've got our we've got our style button um and now you were saying you wanted to do some dynamic stuff with this which i am i'm very excited about yeah so um let's first add let's just add some basic sound let's give it a color like uh green or something okay um on the bottom all right the button the button background color is green and we're making this thing pretty okay oh no that's not what i meant to do at all i meant to do border none okay this is so sexy let's make the color white okay beautiful okay so sorry if i get really animated like i said i have a three-year-old so i'm just like you did a good job this is great i live for it i'm like yes please validate me yay all right i love it i love it okay so we've got our button now let's say we want to okay i'll show you this first let's say we want to make a second button and the use case for this right um so at sales loft what um the team that i'm a part of builds our component library for those who aren't familiar with what a component library is you're working on um a giant platform right and marketing comes out with all these beautiful styles this is what our buttons are going to look like they're all going to be green with white letters and that button is going to be used in a million different places in the app yes it may be used just exactly like this but it also may have different scenarios where it's an icon only button or maybe it's just um a different variant of it where it's a red button because it wants to tell you that this is not allowed um but essentially it's all the same thing right um we build the component library where all of that stuff lives so any other engineers on our team can um just pick from and say okay i want this button add in a number of variants and um use it wherever they want instead of rebuilding it and so it's really good when you get the things that are complex like we have um a calendar like a date picker so instead of having to do all that lift of building that from scratch you just pull it out from our component library import it into whatever you're building and start with this um nice foundation yeah um so let's say we're building a component library right so we just started with our basic button this is um what our button is going to look like and any other engineers can use it so let's say another engineer wants to use this same button but they want the color to be blue so let's um just copy and paste this entire button um function thing sorry style component i'm going to start being more technical so and then we're going to change the name blue button yeah okay um and so what we're going to add to the the first line line 24 is um after the word button so style.button add some parentheses before the backtick and put in the word button uh do i need a quote capital b button oh capital b button oh interesting okay so here yeah like how we talked about extending the styles for the image right we're still using the same properties now we're extending the properties of that capital b button on line 17. so i don't need this anymore do i like i just need the thing i'm overriding exactly yeah so you're extending all that border uh the color and all that stuff um but the background color will change so let's uh put the button in so that we can see what it looks like and it's going to be called blue button so we can put another one of these in and then we can just say blue button let's put the text as like yeah something different oh no i did something wrong what have i done uh what did i do default.button is not a function um what did we do wrong does it need is it just like styled without the dot button um no oh yeah sorry it is okay cool yeah let's hey look at it go awesome awesome yeah i like seeing i like i like to make mistakes on on camera so that people can see that even shaun day even beyonce's sister is not perfect so now you guys know the truth okay so we did it we we made a blue button and so yeah so this is our first extension of our um of our component library so yeah guys we're we're cooking um okay and so now let's um let's add some dynamic properties so let's say that this is depend it's gonna change color depending on what's in the input box so um what we're gonna need to do first probably is add some state to the input box okay um [Music] be able to figure out whether have the system be able to figure out whether or not the input box is empty so let's say if it's empty we want to disable the button um and if it's not then we want to disable it we won't make the functionality work but we just want to color it blue okay okay okay so we'll um let's start with uh bringing in state so we're going to use hooks now so go to the top and we'll import use state and it's probably worth explaining like props and state right yeah it probably doesn't hurt to to give it a a quick minute okay all right so um trying to think of a metaphor okay so i'm so ready i got it the react family right we have the granddaddy we have the mama which is our app right um there are different things that i can pass down as the mother app so this is the parent versus the child okay we are separate components because we're separate we're separate people and we can only do so much same thing with components they can only do so much they should only have so much functionality it's really an art um not a science but the way that i separate my components is i just want one component to do one thing right um if you are the parent component you can pass things to your child those things are called props all right so i am the template i am this app declaration export const app on line 28 i can pass things to my child um i can pass features he's going to have curly hair he's going to have chocolatey skin he's going to look cute because he gets all this from me right i'm gonna pass all that down to him but that's natural but if i want to change anything if i want to add any um props and let's say he he has dimples i don't have dimples right but i want to pass that down to him i can pass it down as a prop so i can pass that down but he can't pass dimples up to me because i'm the parent okay right so i can pass props parent to child did it all make sense i you know i honestly i was like how are we gonna bring this one home and you nailed it you stuck the landing it was perfect props is the that's the word so i brought every puppet so i can pass my props down to my baby he cannot pass props to me parent can pass it to child child cannot ask its parents no that's yeah yeah state is something different state is like my emotional state i'm happy i come in as i'm happy that would be the state that i start with i can pass the state to my child i can pass happiness to him i can give him candy and he's happy too he can also he can have a function that manipulates my state so he can throw a temper tantrum and he can make me angry he can change my state to angry okay his state is angry okay and if he wants to change that for any of his siblings he can go through me and change um state as well he can make me angry and i can pass that estate this is so good like this is truly outstanding so good i want to write a speech on that man okay so um that's your hobson state for anybody who's not technical hopefully that's uh nikki wants to know does react strict mode help with temper tantrums i love that i think it creates more um but yes so good we can keep going um the react family i love it so that's the and so we'll keep this analogy going so what we're going to do is we're going to set state right so const this is the way that you this is the syntax right so const and then it's a it's an array okay the first um part of the array is going to be the state um not the actual state this is what we're calling state so yeah that's cool um oh sorry what are we changing um the input value so let's call it input value input camel case input value is going to be our state okay the second um element in the array so we'll do a comma is going to be the set state function so this is the name of a function that we'll use so remember i said my son can change my state this is the function that he's using to make me angry this is the temper tantrum function good god the common syntax is set and then um the name of whatever the state is so set inputs input value set input value okay and then this is the result of this this function that we just imported um yes this you state hook so you state um is what your starter state is going to be so it was for me in this case it was happy but um we don't want we don't want this to be anything right now this is our input value um and we just want to leave that blank so leave it blank okay yeah let's leave it as that we you could put um maybe some parentheses or something if you we could make it like an empty string since it's going to be our our input value we want it to be empty by default i like that yeah okay okay so we have a value how do we make this because right now it's not showing like if i if i save it doesn't say anything and if i made this you know happy so how do i actually get this in here right so we're gonna need to create a function um that handles this um input value or is able to um understand what's inside of it so um on every input the basic html there is and i don't know the technical term for you guys could probably expect that um it's called e.target.value so it is oh the the event yeah the event yeah and so um there's a method on it um that we can pull in to our function um and basically what we'll be doing is saying that if um e.target.value changes or if it exists we're going to change the the color okay okay so i've got my my e my event and then um and yeah and let's let's go back to the arrow function syntax so oh yeah yeah again it's a matter of personal preference we could have did it the same way jason that you were gonna do it but um let's let's stick with what i said yep stay consistent yeah okay and so we'll handle change so um on change um and actually before we go through and add some functionality to the button let's um tag this with let's connect it with our with our input so um on the input there is a prop a method called on change and so basically what that's looking for is anytime the function changes um or anytime a change happens within this input it's going to call this function so we're going to set that equal to this handle change okay beautiful okay and then um let's see so what we want to do is um identify whether or not there's anything inside of the input so um let's say and i had some colors already picked out that i wanted to do so um okay cool so let's say that anytime this changes we want to set the state of the input value to whatever the e dot target that value is so we're going to call in that um state handler set it so we just want to set it straight up whatever whatever the target value is we want to set this yeah yeah okay and so so then to get the value to show up in our input um because right now i think it's it's doing it but is it in the state it's not gonna yeah um we can link it up if you want but because i think what we can do is if we if we just set it like the value equals the input value then when we type it should be there but also now if we set it to like happy it starts as happy and we can edit it around and then i think too if we actually let's just log this right like let's um console.log the e.target.value and then we can see as we type hey awesome oh wait but i did something wrong what did i do wrong changing an uncontrolled do i have to use initial value chat is that what it is now is it going to stop yelling at me changing a controlled input to be uncontrolled but what um default value so the youth but we haven't used oh i see let's uh let's clear this let's just refresh this no more yelling yay okay so that's that's me just forgetting how everything works but by doing this now we can we can set it to be our default state uh which i am very happy about okay so now we have this we have we have our values we um it's it's updating the way that we wanted to which makes me happy um yeah um okay and so now what we want to do is add some dynamic properties to our style components so um let's let's say we're going to manipulate the background color right and um let's start with two different options for colors and we'll we'll clean this up as we go but let's just add maybe um a ternary to the button um so we can do this actually up where we're declaring the styles for the button oh okay yep and we can say um so instead of the c green we're going to do um a dollar sign so we're injecting some javascript gotcha and curly brackets and then so inside of here we can put in some um dynamic styling so we can say um if wait how would i do this um i think this should work but we could play with it so if e dot target dot value or sorry if um input value exists oh and sorry um there are two different ways you can do an if statement as well so you can do the if um you can also do oh this is another way like a ternary yeah so that's what i was thinking like if um input.value and you don't even actually have to put the dot length you can just say if input value it's what it's going to return is a true or false um so we say if what it's asking is if input value exists question mark the first thing is what happens if it's true and the second thing is what's what happens if it's false so um we let's put in um one parentheses a single parenthesis we'll say like see green if it's true like that yeah and then we'll put a colon and we'll put in black let's do that if it's not true okay oh i screwed something up oh we have to get the input value so is that in do we have to get the props here right we do have to get the props yes and so um what we can do i'm just like i have the documentation pulled up too so um i think we can do props ease is um and then do an arrow to it inside of the function oh like this yes okay so then we need to pass this down yeah to the button okay so then if i do input value equals uh input value you got it why are you yelling at me no you're good you're fine you're fine okay so now it shows black which is that's good that means that our code is doing what it's supposed to we don't have an input value but now if i say something it's green if i delete it all it's black again beautiful yeah all right hey we added some functionality right so um so again sorry that was so confusing so um if it's true that's what this function on line 18 is saying if their input value exists it's going to be c green um and then if there's nothing in there we're gonna disable it really we're just changing the style but um it's gonna be black okay yeah now that's great dynamic properties to it and you see that um the other buttons still didn't change so um the blue button that we made doesn't change because the level of specificity uh which is css uses these um rules of specificity to determine what styles are actually rendered in the dom this um declaring it as blue button and then overriding the styles here this makes it more um like these rules rule these are like the number one rules for it so it's gonna be right okay so if but now this one we overrode the background color but like if we take our our regular color here and we say like instead of uh instead of making it it'll be white then but we can make it like gray otherwise so now we can see that like it did inherit there yeah and then type some text inside of it but we're not putting the initial value into the blue button so then if i do exactly this thing right so so you can inherit that logic it's just whether or not you want to exactly yep yep okay so i'll put this back so that we don't have that oh no what have i done oh you don't quote it because it's not okay look at that go i mean this is beautiful i love i love the uh you know the kind of the the proximity that you get with this where you can see you know i'm i'm in my component i can see what's happening um but how do you control for like because i can see here we've already created quite a bit of um of components so you mentioned that you're at sales lock you're using these and you're doing like a design system so how do you keep these from getting overwhelming we would make another component so we can break this up into another component and let's do that so that you can find what that looks like because yeah you're right it is getting kind of um kind of crowded so we'll make a child okay so let's do so i'm just going to create a new file and then what did you want to split out um let's put the buttons in a different folder i'm sorry in a different file so let's just call it button.js okay and we're going to take our button stylings and okay so i'm just pulling those straight out dropping them in here uh which means i also need style components yep okay yep and notice how jason kept styled import in both files because we're going to be using we're using that style for the um for the inputs as well yeah like we're using it here we're using it for the input so we we have to have it available yeah okay okay and then we're gonna take the buttons themselves um and so what we'll need to do is declare a new um name for a component because we where all of those buttons are inside of our app our app component now let's do um export cons capital b button okay and do we do we want to export like both of them like we could just kind of do one of these and one of these oops oh you know yeah i didn't see what you were doing so um yeah so this is one way that we could okay um let me take a step back okay what uh what jason's doing right now is just exporting the colors for the um for the buttons that we did and this is completely valid you can do that and then um export uh button and blue button and then you can import them into app.js and it'll still work this is still kind of like a separate style sheet though because we don't have actual buttons or functionality so what i was thinking um we were on two different paths both totally valid is to add in the buttons um the functionality for the buttons um and then have that have this be its own separate component so what this component is gonna be is its own little package of the button the functionality the styles and we're gonna just pass down state to our children we're going to have our children um so we're exporting funds button yep and you're importing your prop and then we're going to yeah beautiful yeah just renaming so that i don't have the collision with this one okay awesome and then we'll take um from app.js we'll take the uh buttons and the props that were in there just steal the blue button from here okay so how how do you like would you would we kind of take this out and make it something that you would control with like you know a background color of of some sort or like how how would you do this if you were because we probably wouldn't like export two buttons from this this file which i'm realizing we're currently not returning anyways yeah we're really just um we just kind of did that for style sake we don't really need the the blue button if like another way that you could do it to make it cleaner is to have um one file that's dedicated to the basic button so like one default button file that would be the styling for default button and then the functionality for default button then you would have a separate file for a blue button that might um or may not even be a blue button might just be a style that you declare at the top of another file that's only lines 10 to 12 and um import like it just adds the extra styling to it and like we could we we don't have to use just one of these right like if we use default button to make button and then i were to wrap like this button does that like would that work can i yes it would um i just i want to see how it plays out but yes uh it's not going to have any styling on it let's let's see what happens i'm just going to export this and let's see what happens when i do it um so we've got our default button so i'm going to we need to actually change this over to be a default button right okay so now theoretically speaking if i swap out so if i import my default button and blue button from button then i oh wait no i need to actually get button not default button so i get button i get blue button and then down here we're still using button and blue button and assuming uh well let's let's just see what happens let's try it so i'm saving it okay so it kept the default styles it didn't apply the override yeah so let's go uh but it does work i love it yeah and i think if we go back um yes so like i said it's not adding in any additional wait so are we using we're not using blue button anymore we we exported it so the one at the bottom here is is blue button but i think what you were saying is is if you were gonna do this you would just put this at the top but then how would that apply to the background color of the button so yeah so what i was going to do is instead of having these buttons here at all like instead of having um or sorry you would have them them here but um build out the entire button in the button.js file so that's going to be your symbol i got you so okay so we can let's get rid of one of these and then um when we're when we're dealing with the just get rid of that one too and let's look at actually building out the button right so let me get rid of this blue button that we're not using and now we're in here so we're building out the whole button so you're saying like even the the text and stuff you're wanting to pull out um the text all that stuff could stay in here you can you can add it as a prop um i'm not gonna overcomplicate it but yeah so let's for the sake of this um let's just keep everything here uh button wise and then we will use this as our single source of truth and then so this would be this button is going to be a child of app.js so we'll still um need it like this this button will still work and all that stuff but it may not be called button yeah so this is much simpler here we can see like we've we've kind of simplified this down to where we know we need a button we know we need to pass in the input value yeah and then but our styles aren't aren't um working yet so um and the reason why is because we just have like this button doesn't actually uh have any style so if we export instead if we exported um default button um well then this one this one's working um so we're we are getting our like our styles are working oh perfect okay yeah um yeah perfect it was the override which i think to override we'd have to like grab some something from the props and make sure that it like ended up down on this one which i feel like i've seen there's something in the style component stocks about like composing that but we don't have to do that today okay cool yeah so you've got your nice little neat styles and again you can if you have like a big app and you want to use this um you can use it uh in multiple places and then um i i think i don't know if it's if we even have time to go through kind of um there are different ways that you can add different stylings to it so say um or here let's go through this example so let's say we want to um we have a scenario where we have different types of buttons at the company we have our see green button which is our default button um but we may have a disabled button color that's common across the company and a destructive color which is if um you're going to delete everything inside of your app this is what the color is [Music] okay and so what we'll do is we'll change the background color based on whatever this prop is okay so um let's make a new disabled we're going to make a um an object that holds all of the colors sorry it shouldn't be disabled this should just be like background color or something um we're going to change const background color and we'll make it an object that has let's say default is see green so default comma yup see green um let's make a disabled color which would be gray okay and let's make a destructive color which would be red and this is a common situation right um so now what we can do is um pass in these colors as different options for our our colors and there's ways that you can get like really complicated with this like um or not super like you can say like different variants and then all you would have to do is when somebody uses a button from your component library all they would have to do is say this button is default and it would do the background colors the font colors the size the hover colors and all of that based on whatever you have set as your default so we're just doing like a small example of um where you would get started with something like this sure okay so um we will have background color be um one of the props that we uh can pull from for this and should we should we line it up with like what its function is so i can say like by d by my type by default is it's a default button but then i can pass in that it's a destructive type or a disabled type so that you know it's it like that way we're not describing the style we're describing the function and then the style can support that function i like that cool okay so then if i uh i guess i would do the same thing here i would do type equals type and then i guess we can move this thing up above our styled component because we're going to use it in there right and i like to declare things before i use them um so then this changes a little bit right so we can do something like um instead of so yeah one option might be instead of and this is just like the low hanging fruit right instead of saying props.input value see green and black you could say background color dot uh whatever the props is so it's looking for the the props is going to be looking for this term like default um so we could say that if it's default we want um the the default color so it would be background um so we can yeah we could do like background color around props dot type is that what is that what you meant or am i do i am i still doing a check for like the input value um uh no this is fine this is fine just yeah let's keep going this way um and i guess we could like actually if i take this and i um go back to where we were then like if we don't have a value we can go to uh background color dot disabled but here we can do the props type so then theoretically speaking so it's it's disabled now it comes in we get see green but then if i come out here and i mark it as like type destructive then when i start typing it goes red exactly look at that look how slick that is so so we were able to very quickly say you know this is uh and now i know what it is i know that this is the destructive button um instead of having to look at the styles to kind of intuit that a red background probably means destructive so i can yeah i like this i like the descriptiveness of it right and so now like we're just adding um a level of dynamic capabilities to your css so as we're building this component library some nobody has to remember all of the different props that you put on a button or copy and paste all of the um stylings and things like that that you put on the original button that you built for the rest of the company all they have to do is say okay this button and this place should be a destructive button so it's going to be red and it already comes with all of the different props the functions and things like that that make it work um they just have to declare which type of button it is right um yeah and we can take this even a step further like keeping on your um your your mama component um so you can you know you can have like further nested children and so we can just make whatever's in here uh show up as the the button text and then that means that out here we can take our button and say like delete me right and now now it will respond to us but then if we wanted to take this out and then this one's not destructive and maybe this one has we just want it to always be that one always is on um and then we can say like add now we have like buttons that look like what they're supposed to do we can we can kind of see that happening right i love this this is really really cool exactly yeah what is up c sharp fritz thank you for the for the raid welcome everybody we are we're just coming down to the end so stay tuned though because you're in about 10 minutes we're going to go raid somebody else we've been making react components today um what is up y'all ah that's a good i like that raid emote that's a good one um but yeah welcome thank you for hanging out uh so chande what um what else should we look at like are there other resources that that people should dig into like if they want to go further with this is there somewhere that you would recommend for kind of getting stuck in um any anywhere else in the last few minutes we've got yeah good good question so um i did see someone asking like if um style components works with typescript and it does yes um so it it works with javascript i would start with looking at the documentation and i know that it can be a little bit confusing to everybody has different learning styles so um you know start with the documentation look through it i think for style components it's very it's it's very explanatory and i'm more of a video type of person so um i was able to take a lot from it but um i would say start there with sell components um also any js libraries learning react there are so many great courses out there um i'm a big advocate for egghead so um just go ahead and find out uh you know what courses there are um the way that i learned um originally was from codecademy so uh i would also recommend codecademy as well as a good good option for learning that and learning more but yeah if you go to the style components or when you go to the style components documentation there are examples of different ways that you can incorporate style components into different types of scenarios so the things that we talked about just kind of scratch the surface what what style components can do but um you know i think it's important to really understand that there is a huge use case for it and um it's not i'm not saying i'm married to a certain technology or anything like that there's a number of different options for you but um the reasons why i like it it's just a lot cleaner a lot easier to read and for somebody new to your repo if they're coming in it's easy for them to recognize yeah well you know and you bring up a good point which is that when you're when you're writing code it's not just instructions to the computer it's instructions to future maintainers you know code is a communication platform and if if the code that you write is easy for somebody to read and to understand then you've done a good job of communicating to them that that that is how you should dive in and and you know what like i know where to start i know what to edit i know what this thing does i'm significantly better set up to succeed than if i'm if i'm doing this off of guesses and and what i can figure out by breaking it and seeing what changes on the screen right yeah and there's so many stories like um myself every day i'll go back to some code and i'll be like oh my god who wrote this and it was me every developer needs to write code that your future self will love so um really practice getting clean coat or figuring out what syntax works best for you best for your eyes and what you like to see like maybe it is that function keyword or maybe you like the const like i do um but figure out what that is and then stick with it keep practicing um and separate things out as much as as much as possible um but yeah strong strong advocate for all that yeah absolutely i mean it just makes such a big difference so for uh i guess where from here where should somebody go if they want to learn more about you about me i'm always on twitter so you can find me so one of the perks of having a unique name is that my first name is a handle for everything so if you look um and i'm one of the only sean days out there and i'm the only shonde person out there so um if you ever google shonde person you'll find me but um twitter shandae um or sorry at sunday twitter at sean day for dev at sunday for github you can find me i am at salesoft in atlanta and i'm also an egghead instructor as well working on my first course do you know what do you want to have input on what my first course is because i have until midnight tonight to to really what do you what do you think chat what do you want to learn what uh what here's what here's what you're going to do you're going to go follow chande on twitter and you're going to tweet at her what you want to learn from her i want to learn how the react component family gets along like i want to learn i want more of this visual metaphor because it's so so good um yeah i will button that up and yeah your options are either typescript or react or cell components so let me know what you want to hear more about if it is the react family um i think i love that too i think that's a really good idea so i mean it may be the react family i i think it's great i we've got votes for it in the chat uh state yep something with metaphors agreed i think it should definitely have lots of metaphors um no i i can't wait to see what you create i i've had a whole lot of fun learning from you today i think this is going to be um it's going to be a great course so you know make sure make sure to shout about it so that we can all go and watch um and with that chat i think we are in great shape to start wrapping this one up so make sure you remember we've had live captioning this whole show on the learn with jason.dev homepage that's made possible by rachel who's here from whitecoat captioning thank you so much rachel for hanging out with us and uh captioning is made possible through the generous support of our sponsors netlify fauna auth00 and hasura all kicking in to make the show more accessible to more people um shonde any any parting words before we uh send everybody off to the the rest of their collective thursdays happy earth day happy earth day i love it i love it uh shonda you are you are a joy thank you so much for hanging out this was this was such a pleasure uh i hope to see you again and uh chat stay tuned we're gonna go find somebody to raid we'll see you next time

Channel: Jason Lengstorf

Views: 2,687

Rating: 4.7701149 out of 5

Keywords: Functional React, Learn With Jason, React, Shaundai Person, Styled Components

Id: 1-umQCuLtTs

Length: 85min 10sec (5110 seconds)

Published: Fri Apr 23 2021