React JS Interview Questions ( Dark mode Light mode ) - Frontend Machine Coding Interview Experience

➡️ Book an Interview Preparation call with me ( 20% OFF for limited time ) - topmate.io/roadsidecoder
🟪 Follow me on Instagram and u will clear your interview 🤓 - / roadsidecoder
React Interview Question on implementing Dark mode and Light mode using Context API will be created in this video along with tips and tricks to tackle your React JS and JavaScript Questions in Frontend Machine Coding Interviews.
➡️ Book an Interview Preparation call with me ( 20% OFF for limited time ) -
topmate.io/roadsidecoder
👤 Join the RoadsideCoder Community Discord -
/ discord
🔗 React JS Interview Series -
• Frontend Machine Codin...
➡️ Source Code -
github.com/piyush-eon/fronten...
🔗 Complete Data Structures and Algorithms with JS Course - • Data Structures and Al...
🔗 JS Interview Series -
• Javascript Interview Q...
🔗 Cars24 Interview Experience -
• Frontend Interview Exp...
🔗 Unacademy Interview Experience -
• Frontend Interview Exp...
🔗 Tazorpay Interview Experience -
• Frontend Interview Exp...
🔗 MERN Stack Tutorial with Redux -
• MERN Stack Project Tut...
🔗 React Beginner's Project Tutorials -
• React JS Project Tutor...
#JavascriptInterview #ReactInterview #ReactJS
-------------------------------------------------------------------------
00:00 Intro
00:35 Setup New React App
00:45 Creating a Multi Page App
07:54 Implementing Light/Dark Mode
09:33 Setup Context API
10:39 Dark Theme Global State
14:43 Light and Dark Theme Styles
18:41 Theme Switcher
-------------------------------------------------------------------------
⭐ Support the channel -
/ @roadsidecoder
Special Thanks to our members -

Пікірлер: 55

  • @RoadsideCoder
    @RoadsideCoder5 ай бұрын

    🔴 Get my Complete Frontend Interview Prep course - roadsidecoder.com/course-details ➡ Book an Interview Preparation call with me ( 20% OFF for limited time ) - topmate.io/roadsidecoder 🟪 Follow me on Instagram and u will clear your interview 🤓 - instagram.com/roadsidecoder/

  • @rayyanabdulwajid7681

    @rayyanabdulwajid7681

    5 ай бұрын

    What all beginner javascript projects should we do before moving on to react?

  • @arshad402

    @arshad402

    5 ай бұрын

    .

  • @VIVEKGUPTA-zc5ui
    @VIVEKGUPTA-zc5ui5 ай бұрын

    yes we want a video for this dark and light feature using the redux toolkit please share with us

  • @RoadsideCoder

    @RoadsideCoder

    5 ай бұрын

    Alright!

  • @mdanas0007

    @mdanas0007

    4 ай бұрын

    Very simple with redux just dispatch action in payload dark or light. Fetch value using useSelector from store and base on light and dark string output you can remove and add classes conditionally using ternary operator thats it. Whit javaScript its a bit cumbersome.

  • @curlyfried3117
    @curlyfried31175 ай бұрын

    Dude your content has helped me so much. Thank you!

  • @meryemOuyouss2002
    @meryemOuyouss20023 ай бұрын

    You're implementation is really amazing

  • @sankhojjalchatterjee
    @sankhojjalchatterjee3 ай бұрын

    Thanks, bro, for the video. I think in a real-world application, storing the light/mode into local Storage would be better as context/ or any state would set to default value once the page is reloaded. So, i used similar approach for UI and created a custom Hook for storing the state.

  • @streetfoodworld8569
    @streetfoodworld85694 ай бұрын

    Great learning with you bhaiya! yes we do want a video on redux also

  • @devin3944
    @devin39443 ай бұрын

    Thank you so much. Although I used tsx for my context, this method works perfectly.

  • @RoadsideCoder

    @RoadsideCoder

    3 ай бұрын

    Excellent!

  • @abhishekchaurasia_
    @abhishekchaurasia_5 ай бұрын

    Excellent stuff awesome

  • @Aviralsingh-yw7xx
    @Aviralsingh-yw7xx5 ай бұрын

    Thanks a lot sir. I have shared your playlist with all my friends.

  • @RoadsideCoder

    @RoadsideCoder

    5 ай бұрын

    Thanks a lot brother 💖

  • @sharmilak5109
    @sharmilak51095 ай бұрын

    nice video helps to learn Lot!! thank you

  • @zeeshan4341
    @zeeshan43415 ай бұрын

    Excellent stuff. Learned a lot. Love from Pakistan ❤ keep it up bro 😊

  • @prafuldeoghare1904
    @prafuldeoghare19045 ай бұрын

    Maza aa gaya guru!!!

  • @PallaviNagarkar
    @PallaviNagarkar5 ай бұрын

    awesome!!

  • @jayanand8068
    @jayanand80683 ай бұрын

    I think for styling we can use tailwind css that would much easy to apply and it is getting adapted very fast, would recommend to use tailwind next time.

  • @priyanshujha777
    @priyanshujha7775 ай бұрын

    yes bhaiya, please make video on light and dark mode using redux toolkit or zustand

  • @zaidansari9302
    @zaidansari93025 ай бұрын

    Yes we want video for dark and light mode using redux,redux toolkit but also with backend we can store app configurations light and dark mode also in backend if we load the browser dark and light mode will remains same local storage user can easily remove use backend api only .

  • @The_Developer_
    @The_Developer_2 ай бұрын

    it was really great

  • @RavindraSingh-lp9pl
    @RavindraSingh-lp9pl5 ай бұрын

    Kudos to your efforts ❤❤ superb video

  • @RoadsideCoder

    @RoadsideCoder

    5 ай бұрын

    Thanks ✌️

  • @MuhammadTalha-ez3hr
    @MuhammadTalha-ez3hr5 ай бұрын

    please video in how to make breadcrumbs navigation

  • @manishkhandagale26b15
    @manishkhandagale26b155 ай бұрын

    Please tell me in detail of all process during interview?examples of machine coding test

  • @RavindraSingh-lp9pl
    @RavindraSingh-lp9pl5 ай бұрын

    please implement this using plain redux and also with redux toolkit

  • @FaisalKhan-oy4zz
    @FaisalKhan-oy4zz5 ай бұрын

    no premiere today @6pm

  • @RoadsideCoder

    @RoadsideCoder

    5 ай бұрын

    I thought you all will be busy in new year

  • @furqan6644
    @furqan66445 ай бұрын

    How are you so good with hooks and everything. Please help me.

  • @nandjijayaswal3077
    @nandjijayaswal30775 ай бұрын

    SIr please make a video to implement dark with redux and redux toolkit

  • @bhupindersinghmalhotra
    @bhupindersinghmalhotra2 ай бұрын

    it would be much appreciated if u make light and dark mode using redux and redux toolkit

  • @brave364
    @brave3645 ай бұрын

    Bro didn't hesitate to just display photos while video call 💀💀💀, but great content bro...

  • @RoadsideCoder

    @RoadsideCoder

    5 ай бұрын

    I had their concent don't worry

  • @brave364

    @brave364

    5 ай бұрын

    @@RoadsideCoder BRO YOUR CONTENTS ARE WAY BETTER THEN FANG KZreadR... THANKS FOR THAT...

  • @Khedhar108
    @Khedhar1085 ай бұрын

    yes redux dark mode video with standardised way

  • @RoadsideCoder

    @RoadsideCoder

    5 ай бұрын

    Okay!

  • @eleah2665
    @eleah26655 ай бұрын

    Please do this in remix. Should be very similar Thanks.

  • @Manojkumar-bh8os
    @Manojkumar-bh8os4 ай бұрын

    Redux toolkit...light and dark mood

  • @tarundurbha5398
    @tarundurbha53984 ай бұрын

    please continue machine coding round interview questions

  • @RoadsideCoder

    @RoadsideCoder

    4 ай бұрын

    I have uploaded it yesterday

  • @rishiraj2548
    @rishiraj25485 ай бұрын

    ❤💯🙂👍

  • @AquibSayyed-wv2mj
    @AquibSayyed-wv2mj5 ай бұрын

    make using redux as well

  • @user-ny2hm9kc3v
    @user-ny2hm9kc3v4 ай бұрын

    i intersted in your front end domination course but it is very costly INN TO PKR

  • @RoadsideCoder

    @RoadsideCoder

    4 ай бұрын

    bro its not mine 😂

  • @AzadKumar-zi5lm
    @AzadKumar-zi5lm5 ай бұрын

    Sir, I implemented light dark theme without context api My approach 1. I made a light class in css and added light theme color 2. then i made another class dark and added dark theme color 3. when someone click on button then i added those class on body tag is it okay or there is any problem let me know ! 😮😮😮😮😮

  • @RoadsideCoder

    @RoadsideCoder

    5 ай бұрын

    but what if a deeply nested component needs to know the current theme, then u will need to know by using the useContext hook

  • @AzadKumar-zi5lm

    @AzadKumar-zi5lm

    5 ай бұрын

    @@RoadsideCoder but i am using css variables value to design components styling. then i am changing value according to theme but variables name will be same

  • @AzadKumar-zi5lm

    @AzadKumar-zi5lm

    5 ай бұрын

    By the way thanks sir i try to implement it using context api right now ☺️☺️☺️ so bye i am gonna open my laptop... have a good night!

  • @wisamkayani9634
    @wisamkayani96345 ай бұрын

    Nextjs making it easy with tailwind 😂

  • @krish8847
    @krish88475 ай бұрын

    Superb

  • @narendrapanchal7499
    @narendrapanchal74995 ай бұрын

    Bro I want to learn the same way you write css with variables and and all this way you implemented css please reffer me somehthing @RoadsideCoder

  • @RoadsideCoder

    @RoadsideCoder

    5 ай бұрын

    Will soon bring a tutorial!

Келесі