Figma to React with CSS Modules (Dashboard App)

[@garrett2635]

mousewheel scrolling on the style properties absolutely blew my mind, thanks!

[@frankberry184]

I think you should do more this videos...You really solve my problem boss

[@computerscience962]

Man this was excellent, I love the way you explain things and I find your workflow very realistic too, you show us how a web dev thinks, while at the same time teaching us. Not many are capable to make tutorials this way, it's usually one or the other. Would definitely love to see more, free or paid. Keep it up!

[@druashley]

I really like the way you talk through everything and explain your methodology. I don't know anyone else in my life who programs, so it is difficult to know if I am 'thinkin' in the right way. Cheers!

[@TechbaseDev]

Thanks Dru! Every developer has a bit of their own style, especially when it comes to styling. Things get easier with time, especially when you have some coworkers / programming friends to spar with :)

[@ozzyfromspace]

You're an absolute rockstar, @Techbase! Thank you so much for putting this together for KZbin. I learned the frontend first, but ultimately put way more effort into the backend. Now that I'm trying to do full stack with react, this video was the perfect way to show me how I could go about building a UI with CSS Modules. I spent the last two weeks working learning Material UI, and it's quick, but some parts of it are somewhat irritating (example, how their grid system glitches when you nest grids). The module approach is far more appealing! Again, you're awesome bro, thank you!

[@TechbaseDev]

Thanks so much Ozzy! Material UI is great for personal projects or clients that do not insist custom design. With CSS (Modules) the sky is the limit :)

[@adoyez9]

03:06 - actually node-sass is deprecated (as i know), so u just need to install "sass" and restart vscode.

[@TechbaseDev]

Good catch! The package "sass" should definitely be preferred above "node-sass" (since it's indeed deprecated). Strange that this hasn't been changed yet in the CRA documentation... Thanks for letting us know!

[@adoyez9]

@@TechbaseDev Also with element u've done a condition to use active class name (~19:28). You can simply use with activeClassName prop like that:

[@djaalabahmed2038]

great project we need more of this , starting from handling the design from Figma to React , thank you

[@motadaymane3262]

Cool stuff man, maybe more of this Figma to code videos? I find these tutorials to be more realistic in the real world, thanks man. Subscribed

[@TechbaseDev]

Thanks a lot! I'll definitely do more of these videos in the near future 🙂

[@chamithfernando2663]

awsome tutorial hope more in future.

[@abdurahmansaadeldin7156]

i really enjoyed this , thank you man for preparing such an amazing tutorial

[@yusefess]

It was a very good tutorial. If possible, add more videos like this that turn Figma into a react code.

[@TechbaseDev]

Thanks Yusef! Will do 🙂

[@sumanthprabhu11]

I really like the way you explain . Most youtube just start coding . Please do more tutorials like these for React

[@TechbaseDev]

Thanks & will do!

[@ThunderstruckElectronix]

Nice video. I like seeing your process

[@sarmanzmale]

Do you need to do something in VS Code settings to enable the color picker in the inline styles (see 47:00 mark in video for example). The color picker doesn't appear for me when the color is typed in a string.

[@TechbaseDev]

This should actually be build in; it came with an VSC update in August 2017. You should hover over either the string or the squared colored box in front of it in order for it to show up :)

[@garrett2635]

Alternate solution to hard-coding the pixel of the two images in the save money div: .topIcons { display: flex; align-items: baseline; justify-content: space-between; position: relative; top: -4rem; margin-bottom: -5rem; max-height: 225px; } putting them in their own flexbox and aligning baseline will align the bottoms with a negative top value to push them out of the container edit: max-height of 225 because you assume the copywriters will make new ads and they will want to insert different size images - this gives them flexibility to put any size image into the framework although I might set a max-width of 100px or so on the img div separately just as a failsafe

[@TechbaseDev]

Nice one Garett, definitely a more robust solution! 🪨

[@ThunderstruckElectronix]

22:07 hold on. Why slice[1]? Wouldn't that refer to the second object in the array?

[@ThunderstruckElectronix]

I'm a newbie and your solution is much cleaner than mine. I would use a counter that goes ++ for every item in the array, and use the value of the counter to say what index I want to pick out. I don't understand how your version works?

[@TechbaseDev]

@@ThunderstruckElectronix good question! Slice returns a shallow copy, but can also be used for strings. So let's say we have the following variable: const animal = "cat" Then with slice I can grab cat without the first letter (so "at"): animal.slice(1) === "at" slice(2) === "t", etc.

[@ThunderstruckElectronix]

@Techbase oh ok, you make it sound so easy:) If you don't an assign an end, then it takes the rest of the string. Thank you so much for taking your time to answer!

[@pushkarsaraf524]

Great video!! Could you please make a series on React testing with Jest and Enzyme. Thanks! Subscribed 🙏🏼

[@TechbaseDev]

Thans Pushkar! Unfortunately I do not plan to make any videos about Enzyme. Albeit it's still popular, React Testing Library is (becoming) the better choice for most React developers. I wouldn't mind making some video's about older technologies, however, Enzyme has the tendency to introduce bad testing practices. Have you perhaps seen my videos about the React Testing Library? kzbin.info/www/bejne/o5zCn3eKiJhsg7s

[@garrett2635]

Please tell us what extension/settings.json config is causing you to be able to use the color picker in a .tsx file

[@TechbaseDev]

It think this is actually a build in feature in my version of VSC, but since someone else also noticed; I'm not fully sure if that really is the case. I don't have any specific extension or rule in my settings.json, however, it seems there are quite a few extensions out there that provide this functionality: marketplace.visualstudio.com/search?term=color%20picker&target=VSCode&category=All%20categories&sortBy=Relevance Hope that helps!

[@ibrohimyusupov8217]

Thank you so much bro

[@Lioncodes]

Okay, share the goods with us! What is your audio setup?? What mic are you using? It sounds so crisp 🔥

[@TechbaseDev]

Haha, thanks ^^ The mic is a FIFINE-T669 USB mic (so definitely nothing special). In OBS I have the following settings (with default presets) enabled: noise reduction, compressor, limiter, gain. For the videophiles: SONY A6100 with a Sigma 16mm f1.4 lens.

[@codewithyt]

why not u used normal css for designing?

[@l3aIIin23]

if I know react and JavaScript, how long does typescript take to learn ?

[@TechbaseDev]

If you want to learn all the nitty gritty about TypeScript: weeks / months. Just want to learn the stuff that you will actually use in React: a day or a few. I've made a 7-part TypeScript series which you can check out here: kzbin.info/aero/PLG-Mk4wQm9_LyKE5EwoZz2_GGXR-zJ5Ml 😀

[@frankberry184]

Hello bro, trust you good? Is like you haven't released any new videos right. was thinking or suggesting you create more tutorials on website and web apps using react with api's etc...

[@frankberry184]

But first of all, if you can try complete the dashboard tutorial, or give us a full video on dashboard using api to fetch and display data with CRUD etc.., hope you get what i mean pls

[@herbertk9266]

Thank you

[@redefamatv]

sorry for my ignorance but instead of using style. Could i be using classes?...as well as style? being honest i prefer the way you did it.

[@TechbaseDev]

Do you mean instead of "styles.userName" something like "classes.userName"?

[@redefamatv]

@@TechbaseDev yes...you guessed right..I'm learning a lot with you man, thank you for all the efforts you put on it to spread the knowledge...Thanks.

[@yasirzubair20]

That would be fantastic if you show how we can make it mobile responsive

[@TechbaseDev]

I'll definitely go into that in future video's :)

[@Michael-ru3wr]

This is cool

[@codewithyt]

nice

[@livb4139]

how do i git gud with css

[@juanguirao]

jist stedy it

[@juanguirao]

and prectise it.

[@farooqali8997]

use text-transform:capitalize; instead of sidebarnavlink.charat(0) ....

[@TechbaseDev]

Much cleaner indeed!

[@mo-fo]

id personally just change the original array. it saves sooo much on the load time