I Code It
I Code It
  • Видео 58
  • Просмотров 85 832
React Clean Code - Simplify Complex UI with Headless Components Pattern
In this walk-through, we tackle a common issue with reusable UI components: an overgrown template selector that’s become difficult to manage, maintain, and customize. Originally built to be generic, this component has evolved into a complex structure weighed down by customizations. Watch as I refactor it using the headless component pattern with React Context.
By moving all logic into a central, UI-free context and breaking out visual elements-like Tiles, Categories, and Search Bars-into reusable atomic components, we unlock a flexible solution that’s easy to adapt. Whether building from scratch or using the default setup, this approach brings simplicity, power, and ultimate composability...
Просмотров: 625

Видео

Enhance user experience with Pragmatic drag-and-drop in React: Monitoring all drag-and-drop events
Просмотров 8172 месяца назад
In the third installment of our drag-and-drop series, we delve into the crucial aspect of monitoring drag-and-drop interactions within your React applications. Monitoring these interactions ensures a responsive and intuitive user experience, giving you the ability to track and react to drag events as they unfold. We’ll start by reviewing what we’ve implemented so far, then explore how to visual...
Enhance user experience with Pragmatic drag-and-drop in React: Introduce Drop Operation
Просмотров 7803 месяца назад
In this continuation of our drag-and-drop series, we shift our focus to the drop operation, an essential part of creating a seamless drag-and-drop experience in React applications. We start by reviewing what we've accomplished so far, then dive into setting up drop targets with `dropTargetForElements`, handling drop events, and effectively passing data from the source to the target. By the end ...
Enhance user experience with Pragmatic drag-and-drop in React: Introduce Draggable API
Просмотров 1,5 тыс.3 месяца назад
In this video, we dive into the fundamentals of drag-and-drop interactions within React applications, using the Pragmatic Drag-and-Drop (pdnd) library. We'll start by building a simple board application and explore key features like draggable components, handling drag events, and managing states. Learn how to create a custom drag preview UI to improve user experience. Timeline: - 01:26 - Introd...
React Clean Code - Implementing Headless Components for Flexibility and Reusability
Просмотров 5443 месяца назад
Join me in this episode as we delve into the Headless Component pattern in React (www.martinfowler.com/articles/headless-component.html). We'll explore its benefits and see how it can help create more flexible and reusable components. This video walks you through a real-world example, showcasing different implementations to solve the same problem efficiently. Table of Contents: 01:17 - The Head...
Codemod Crash Course: Automate Refactoring with jscodeshift
Просмотров 5344 месяца назад
In this video, we explore how to use jscodeshift for automated code transformations, following a Test-Driven Development (TDD) approach. We start with an introduction to codemods and then dive into writing and testing transformations with jscodeshift. We also cover Abstract Syntax Trees (ASTs) and the AST Explorer tool. By the end of this video, you'll know how to use the jscodeshift CLI to app...
Understanding Abstract Syntax Trees with ASTExplorer
Просмотров 3524 месяца назад
In this video, we dive into the basics of Abstract Syntax Trees (ASTs) and how they can be incredibly useful in understanding and transforming your code. We’ll start with simple examples like variable declarations and arrow function declarations, using ASTExplorer.net to visualize and dissect these structures. This is the first video in a series where we'll also explore codemods and jscodeshift...
React Clean Code - Advanced Context Menu Refactoring with ACL
Просмотров 4924 месяца назад
Join me in this episode as we explore how to refactor a context menu component in React using clean code principles. This time, we'll enhance our approach with the Anti-Corruption Layer (ACL) pattern. We'll take backend data, reformat it, and generate menu items efficiently. This video demonstrates the power of the collection pipeline technique, the ACL pattern. Table of Contents: 00:00 - Intro...
React Clean Code - Refactoring a User Dashboard with Composition
Просмотров 7065 месяцев назад
In this video, we explore the concept of composition and how it can help you write cleaner, more maintainable code in React. Composition is a fundamental principle in React that allows you to build complex UIs from small, reusable components. Join me as I guide you through the process of refactoring a User Dashboard component to use composition. We'll break down the original, monolithic compone...
React Clean Code - Refactoring a Request Type Builder with Dependency Inversion Principle
Просмотров 5075 месяцев назад
In this video, we dive into the Dependency Inversion Principle (DIP) and how it can help you write cleaner, more maintainable code in React. The Dependency Inversion Principle is one of the five SOLID principles of object-oriented design, and it focuses on reversing the direction of dependency in a way that high-level modules do not depend on low-level modules. Instead, both should depend on ab...
React Clean Code - Refactoring a Context Menu with Collection Pipeline
Просмотров 4815 месяцев назад
Join me in this episode as we explore how to refactor a context menu component in React using clean code principles. We'll take backend data, reformat it, and generate menu items efficiently. This video demonstrates the power of the collection pipeline technique and the importance of a test-driven development (TDD) approach. Table of Contents: 02:50 - The main content starts 07:01 - Understand ...
Top Five Tips for Code Interviews for Frontend Developers
Просмотров 3088 месяцев назад
Join me in exploring essential tips for navigating frontend developer code interviews with my latest video, 'Top 5 Tips for Code Interviews for Frontend Developers.' This video isn't just about coding-it delves into the broader skills and habits that can make a difference in your interview outcomes. I share insights on good coding practices, such as using keyboard shortcuts and command lines, t...
Enhancing Data-Fetching with React Suspense and Error Boundaries
Просмотров 6059 месяцев назад
Unveil the power of React Suspense and SWR in data fetching with our latest tutorial! This quick, insightful video guide demonstrates how to leverage React's Suspense feature and SWR's suspense mode to create more declarative and readable code in your React applications. leanpub.com/react-data-fetching-patterns/c/icodeit (50% off) Key Highlights: Learn how to effectively implement Suspense and ...
Build a Tailwind CSS Shimmering Skeleton: Live Coding Session
Просмотров 67410 месяцев назад
We will build a skeleton loader using Tailwind CSS, as part of our data fetching tutorial series. We'll start with an introduction to skeleton screens, showcasing their role in improving user experience during data loading. Then, we'll dive into setting up a project with Vite and Tailwind CSS, and step by step, create a shimmering skeleton loader. Highlights include: - Grasp the role of skeleto...
Exploring Lazy Loading: Native Import vs React Suspense with Practical Demos
Просмотров 33710 месяцев назад
Join me in this detailed walkthrough of lazy loading techniques in modern web development. In this video, we'll compare two different approaches: using native import in a framework-agnostic setup, and implementing lazy loading with React's Suspense feature, alongside the Parcel bundler. 🔍 Inside This Video: A clear explanation of lazy loading and its significance in frontend development. A prac...
Quick Chrome Tip: Stub Network Requests with Chrome’s Network Overrides
Просмотров 325Год назад
Quick Chrome Tip: Stub Network Requests with Chrome’s Network Overrides
Evolving Your React App Safely with Feature Toggles and Branch By Abstraction
Просмотров 915Год назад
Evolving Your React App Safely with Feature Toggles and Branch By Abstraction
How Tasking Leads to Simple, Maintainable React Code
Просмотров 364Год назад
How Tasking Leads to Simple, Maintainable React Code
Explore the Power of ChatGPT's Code Interpreter in 10 minutes!
Просмотров 677Год назад
Explore the Power of ChatGPT's Code Interpreter in 10 minutes!
How to prepare your Frontend System Design Interview
Просмотров 29 тыс.Год назад
How to prepare your Frontend System Design Interview
Automate Your Workflow: Learn GitHub Actions in 10 Minutes!
Просмотров 1 тыс.Год назад
Automate Your Workflow: Learn GitHub Actions in 10 Minutes!
Demystifying Continuous Integration and Delivery in 10 minutes
Просмотров 166Год назад
Demystifying Continuous Integration and Delivery in 10 minutes
Master Build Scripts in 10 Minutes: A Quick Guide for React Developers
Просмотров 838Год назад
Master Build Scripts in 10 Minutes: A Quick Guide for React Developers
A Beginner's Guide to Cypress Testing Framework with a Weather Application | React
Просмотров 290Год назад
A Beginner's Guide to Cypress Testing Framework with a Weather Application | React
Apply Separation of Command and Query Principle (CQRS) in React Application
Просмотров 625Год назад
Apply Separation of Command and Query Principle (CQRS) in React Application
Think in Interfaces, Not Implementation: Using React Context API for Better Code Design
Просмотров 472Год назад
Think in Interfaces, Not Implementation: Using React Context API for Better Code Design
How ChatGPT Helped Me Build a Shortcuts App in Record Time
Просмотров 389Год назад
How ChatGPT Helped Me Build a Shortcuts App in Record Time
The evolution of a React application - 5 architecture styles you need to know
Просмотров 1,7 тыс.Год назад
The evolution of a React application - 5 architecture styles you need to know
Clean Code vs. Performance Code: Which One Should You Choose?
Просмотров 2,3 тыс.Год назад
Clean Code vs. Performance Code: Which One Should You Choose?
My Productivity Shell Settings | oh-my-zsh, auto-suggestions and more
Просмотров 433Год назад
My Productivity Shell Settings | oh-my-zsh, auto-suggestions and more

Комментарии

  • @marketingpower
    @marketingpower 4 дня назад

    Amazing serie. Thank you so much!

  • @Jeevansarees
    @Jeevansarees 10 дней назад

    Can you share the repository?

  • @sunitjoshi3573
    @sunitjoshi3573 18 дней назад

    Awesome work! If guy could make a detailed step-by-step 1<>2hr tutorial on this that would really help newbies like me. :)

    • @icodeit.juntao
      @icodeit.juntao 15 дней назад

      Thanks for the comment Sunit Joshi, I'll see what example I can use to make a longer version with more details 😄

  • @muizuvais
    @muizuvais 23 дня назад

    3:04 what is Alex's video? do you have a link?

    • @icodeit.juntao
      @icodeit.juntao 21 день назад

      Sorry, should have said it more clearly, I'm referring the author of the pdnd Alex Rearadon. The video can be found here: ruclips.net/video/5SQkOyzZLHM/видео.html

  • @andrednb1
    @andrednb1 Месяц назад

    Awsome content !!

    • @icodeit.juntao
      @icodeit.juntao Месяц назад

      Thanks, do let me know if you need more specific related topics.

  • @rattapumputtaraksa368
    @rattapumputtaraksa368 Месяц назад

    Thank you for your video, I get to know more about how to separate the topics 🎉

  • @ShahidShafi-s4c
    @ShahidShafi-s4c Месяц назад

    Thanks for this great turtorial You should add a github link in description

  • @sweLogan
    @sweLogan 2 месяца назад

    Thanks this helped a lot, but think you should have use Edge (top / bottom) so you can rearange the list

    • @icodeit.juntao
      @icodeit.juntao 2 месяца назад

      Hi @sweLogan, thanks for the comment. If I'm reordering by calling a backend API, do I still need the edge?

  • @akashm4157
    @akashm4157 2 месяца назад

    Hi! your explanation is too good. can you make a video for react virtualized(grid) with PND . it would be great then

    • @icodeit.juntao
      @icodeit.juntao 2 месяца назад

      Hi Akash, thanks for the feedback. I'll have a look at the grid and virtualiser.

  • @ucarn5246
    @ucarn5246 2 месяца назад

    Dude... The music is to much.

    • @icodeit.juntao
      @icodeit.juntao 2 месяца назад

      Thanks for letting me know, I have get rid of them since I got some feedback.

  • @JasonHughes-in7xo
    @JasonHughes-in7xo 2 месяца назад

    Thank you for this tutorial, would love to see a repo to play with

    • @icodeit.juntao
      @icodeit.juntao 2 месяца назад

      Sorry I forgot to post it, you can find the code here: github.com/abruzzi/pdnd-demo

  • @JasonHughes-in7xo
    @JasonHughes-in7xo 2 месяца назад

    Is there a repo for this example ?

  • @bonoliu8336
    @bonoliu8336 2 месяца назад

    Thanks mate. So does that means Suspense should always pair up with Error Boundaries as Suspense will not handle errors.

    • @icodeit.juntao
      @icodeit.juntao 2 месяца назад

      Yeah, that's the idea. Suspense handles data fetching and when it failed to do so it throws. It's up to you to handle the error, you could ignore it in cases (like send analysis data to backend and you don't care the response).

  • @Eric-hh6qc
    @Eric-hh6qc 3 месяца назад

    Thank you for this awesome videos 👏👏,

  • @harryd7602
    @harryd7602 3 месяца назад

    This is great! Do you think there would be an easy way to use this library to make a nested drag and drop container? For example so you could have nested to-do's within a todo? I've tried personally but im struggling to get a placeholder for it.

    • @antonwiklund6727
      @antonwiklund6727 3 месяца назад

      I know there is like tree support if that would help you :)

    • @icodeit.juntao
      @icodeit.juntao 3 месяца назад

      Yeah the nested structure is well supported, there is an example here actually: codesandbox.io/s/386kzf?module=/example.tsx (from the Atlassian Design System document)

    • @harryd7602
      @harryd7602 3 месяца назад

      @@icodeit.juntao great thanks i'll have a look

  • @bonoliu8336
    @bonoliu8336 3 месяца назад

    Watching this after one whole year😂this is still relevant and helpful 👍 nice diagram

  • @VivekAgarwal-n8i
    @VivekAgarwal-n8i 3 месяца назад

    Hi juntao, you videos are amazing, I am not sure if I can watch it with filtering with your image, looks like your image is cutting some contents for me, Thank you

    • @icodeit.juntao
      @icodeit.juntao 3 месяца назад

      Thanks for raising it here, I will check if I have the original file as I just recently did some clean up (it's very easy to run out of space when you make videos). Which part are you particularly looking for? - if I can find the original file I'll edit and republish the video.

  • @hoangtranvanhuy6154
    @hoangtranvanhuy6154 3 месяца назад

    Thank you :D

  • @sambacarlson
    @sambacarlson 3 месяца назад

    Thanks man

  • @amirtorabi3978
    @amirtorabi3978 3 месяца назад

    Thanks for your prqctical contents, please create some contents about handling global state management through services

    • @icodeit.juntao
      @icodeit.juntao 3 месяца назад

      Noted, I think I just have an example about that.

  • @alishok9199
    @alishok9199 3 месяца назад

    ❤nice

  • @DojoDyo
    @DojoDyo 4 месяца назад

    thank you so much !

  • @argasaragih
    @argasaragih 4 месяца назад

    Thanks for sharing this principle, my man. Keep it up!😊

  • @Danielo515
    @Danielo515 4 месяца назад

    Using JS for such a task is not a good idea. I mean, TS will be a better option, since the data structures are well known, and making mistakes is very easy without a type system

  • @thealpha_9
    @thealpha_9 4 месяца назад

    Thanks!

  • @qwexzcy
    @qwexzcy 4 месяца назад

    Nice video, I always wanted to try the codemod, this video spark my curiosity and I think I'll use it for my migration, thanks for sharing 🙌

  • @FreddyRangel85
    @FreddyRangel85 4 месяца назад

    Your channel is criminally under-subscribed. This is fantastic content.

    • @icodeit.juntao
      @icodeit.juntao 4 месяца назад

      Thank you so much for your feedback, really appreciate it.

  • @ssaai
    @ssaai 5 месяцев назад

    excellent

  • @passionately_curip
    @passionately_curip 5 месяцев назад

    Amazing explanation bro!

  • @davearonmwan5800
    @davearonmwan5800 5 месяцев назад

    Great one, I have been enjoying these your design pattern videos and it's been good. Please can you be increasing your zoom level maybe 2 or 3 more times of your code editor when recording, it's pretty hard to read your code even on 1080p as the size is small. Thank you, keep up the great work

    • @icodeit.juntao
      @icodeit.juntao 5 месяцев назад

      Thank you so much for the feedback, I'll make the font bigger next time.

  • @wilbertcaba
    @wilbertcaba 5 месяцев назад

    Thanks for the simple explanation. Good job! Keep on it!

  • @denishclarke4470
    @denishclarke4470 5 месяцев назад

    Please, provide the github code

    • @icodeit.juntao
      @icodeit.juntao 5 месяцев назад

      Sure, here is the github repo for the whole series: github.com/abruzzi/the-pragmatic-developer

  • @lesg1987
    @lesg1987 5 месяцев назад

    Amazing working mate, thank you so much for sharing

  • @jianlyu700
    @jianlyu700 5 месяцев назад

    Translation? OMG! This is so gorgeous

  • @MrBumbo90
    @MrBumbo90 6 месяцев назад

    I am a humble junior dev and I thank you so much for the very helpful work.

  • @PetunenkoDV
    @PetunenkoDV 6 месяцев назад

    Thank you for the video. One comment, I would disable Webstorm types hints to be more ide agnostic

    • @icodeit.juntao
      @icodeit.juntao 5 месяцев назад

      Hi 👋, thanks for letting me know, I'll try it in my next video.

  • @ecbacs
    @ecbacs 6 месяцев назад

    does not matter in most of cases, but i would place all filtering pipes as close to start of the pipeline as possible to first eliminate items and then mapping them. sometimes it helps not only performance-wise, but more of even in obtaining narrower types down the line. thank you for video

    • @icodeit.juntao
      @icodeit.juntao 5 месяцев назад

      Yeah, that's a great tip too. Thanks for sharing it!

  • @hatemabushaala
    @hatemabushaala 6 месяцев назад

    Thanks for sharing

  • @Travelmoo
    @Travelmoo 6 месяцев назад

    the mind map is top-notch, I think thats how one must go about every problem statement on systems design. Thanks !

  • @marco.garofalo
    @marco.garofalo 6 месяцев назад

    Thanks for sharing this, really appreciated! One tip if I may, while refactoring, instead of moving the original component, it would be cleaner (and smoother) to extract its content into another component and move that one into another file. That is to say leave "MenuList" where it is, extract the content into a "MenuListOld" component that you will move into another file, then return it from the "MenuList" straightaway. This will basically leave the same behaviour as before and create the space for the branching logic without having to change the consumer side. Hope that makes sense :)

    • @icodeit.juntao
      @icodeit.juntao 6 месяцев назад

      Hi Marco, thanks for sharing that here, and I think it's better!

  • @mario-cu6gq
    @mario-cu6gq 6 месяцев назад

    thanks for the content

  • @enzoportela4631
    @enzoportela4631 6 месяцев назад

    Excellent! What extension are you using to show function usage?

    • @icodeit.juntao
      @icodeit.juntao 6 месяцев назад

      Thanks mate, I'm using WebStorm as my main IDE.

  • @ALEKS09FMF
    @ALEKS09FMF 7 месяцев назад

    Thank you

  • @jamimaston2564
    @jamimaston2564 7 месяцев назад

    promo sm 💖

  • @havefun5519
    @havefun5519 7 месяцев назад

    这里感觉不需要useEffect(主要用在有副作用或者某些生命周期) ? total是基于checked和传进来的amount计算的,total不是应该完全可以当一个const total = 。。。。。来计算吗? tip也是. 每一次checked或者props的改变,这个组件都会rerender, 那么tip, total都会重新计算. 不知道我的理解对不对啦.感觉有点绕. ``` function Detail({ amount }) { const [checked, setCheck] = useState(true); const tip = parseFloat(Math.floor(amount + 1) - amount).toPrecision(2); // 直接计算 const total = checked ? Math.floor(amount + 1) : amount; // 直接计算 const handleOnChange = (e) => setCheck(e.target.checked); return (); } ```

    • @icodeit.juntao
      @icodeit.juntao 7 месяцев назад

      I think you're correct, thanks for pointing out and sharing your learnings.

  • @uladzimirluhautsou8235
    @uladzimirluhautsou8235 8 месяцев назад

    Thanks man, extremely useful!

  • @tenaciousbali
    @tenaciousbali 8 месяцев назад

    Please keep continuing teaching like this...I've seen so many system design videos but none of them had the clarity of the mind- map you gave. Kudos!!!

  • @nikolamiticdev
    @nikolamiticdev 8 месяцев назад

    Am I the only one asking himself how is this frontend? I there are 5 topics on which I do not need to be an expert on, but there are expecting me to actually know what I am talking about HOW is this not fullstack or backend?

    • @icodeit.juntao
      @icodeit.juntao 8 месяцев назад

      I think that's a valid point, but like many other things in the industry there isn't a clear boundary between FE or BE or fullstack, especially in current circumstances where the employer has more choice than people who are looking for opportunities (not saying I agree with it but that's what it is). From my experience, for the same position, you will have a higher chance if you have the whole picture in your mind, or if you have some experience on integrate with other parts of software development lifecycle than the pure FE experts. Hope it helps.

    • @anveio
      @anveio 2 месяца назад

      Many companies treat front end engineers as a superset of an SDE, as in you're expected to meet the average bar for an SDE at the same level but show exceptional strength in frontend skills. So you'll need to know all this at a minimum. To show your frontend chops you can expound on the user experience portion: how are you managing state? How are error messages being surfaced? How are you implementing routing? Cross browser compatibility? Different screen sizes? And there's much more to dive into for accessibility

  • @peakpotential9
    @peakpotential9 8 месяцев назад

    Can we mock POST api too with this tool

    • @icodeit.juntao
      @icodeit.juntao 8 месяцев назад

      Yes you can, pretty much the same thing. You can also define models to simulate a backend service to manipulate data in frontend purely - which is pretty handy for some small projects.