CoderOne
CoderOne
  • 307
  • 8 683 389
The React Compiler - Better than I Thought!
The React Compiler is here! It will take your poor performance code and turn it into a fast, performant and memoized code automatically for you. In this video, we'll explore the new compiler, what it does, how it works and how it will optimize your React code.
🎉Our Newsletter is live! Join thousands of other developers
islemmaboud.com/join-newsletter
🐦 Follow me on Twitter: ipenywis
🔴 Chapters
00:00 Intro
01:28 The Rules of React
03:08 Understanding how the compiler works
07:57 Optimizing my bad code with the compiler
11:52 Deep Dive into how the compiler works
-- Special Links
✨ Join Figma for Free and start designing now!
psxid.figma.com/69wr7zzb1mxm
👉 ✨ Join Figma For Professionals And Start Designing with your Team ✨
psxid.figma.com/ucwkx28d18fo-cb44ct
-- Watch More Videos
🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize
czcams.com/video/VWEJ-GhjU4U/video.html
🧭 Turn Design into React Code | From prototype to Full website in no time
czcams.com/video/0xhu_vgKZ8k/video.html
🧭 Watch Tutorial on Designing the website on Figma
czcams.com/video/SB3rt-cQZas/video.html
🧭 Watch Create a Modern React Login/Register Form with smooth Animations
czcams.com/video/-bll7l-BKQI/video.html
🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools
czcams.com/video/_rnxOD9NKAs/video.html
🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React
czcams.com/video/M_Oes39FNuk/video.html
🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app
czcams.com/video/_rnxOD9NKAs/video.html
🧭 Introduction to GraphQL with Apollo and React
czcams.com/video/eCO6MvvRhXk/video.html
🐦 Follow me on Twitter: ipenywis
💻 Github Profile: github.com/ipenywis
Made with 💗 by Coderone
zhlédnutí: 1 705

Video

Refactoring Junior React Code to Clean Code - SOLID
zhlédnutí 6KPřed 16 hodinami
Explain how to properly refactor your legacy Junior React code to follow clean-code SOLID principles. We'll go through an old Button component I wrote back in 2020 that was very ugly and bad. 🎉Our Newsletter is live! Join thousands of other developers islemmaboud.com/join-newsletter ⭐ Timestamps ⭐ 00:00 Intro 01:39 Understanding our old code 05:17 Refactoring code 06:37 Refactoring component lo...
Tailwind CSS Plugins I Wish I knew Sooner
zhlédnutí 3,5KPřed 14 dny
You're probably missing out on a lot if you are not using these Tailwind CSS plugins. Tailwind CSS Signals, Mixins, UI Components, Members and more 💻 Tailwind Plugins Repo github.com/ipenywis/awesome-tailwind-plugins ⭐ Timestamps ⭐ 00:00 Intro 00:52 Daisy UI 03:30 Signals 09:15 Mixins 12:20 Members 🔗 Links daisyui.com/ github.com/brandonmcconnell/tailwindcss-signals github.com/brandonmcconnell/...
Everything You Need to Know About React 19
zhlédnutí 10KPřed 21 dnem
React 19 is finally here! Bringing new features and APIs to the frontend world and for all React lovers. Learn about every new React 19 feature and API in one video in 20 minutes. 🎉Our Newsletter is live! Join thousands of other developers islemmaboud.com/join-newsletter 🐦 Follow me on Twitter: ipenywis 🔴 Chapters 00:00 Intro 00:30 useTransition hook 03:18 useStateAction hook 06:14 ...
The Truth About The New Javascript Proposal
zhlédnutí 2,8KPřed 28 dny
The New TC39 Proposal for Standardizing Signals Into Javascript & ECMAScript could change javascript forever and how we build user interfaces forever as we know it. But did you know that Signals were introduced nearly 15 years ago, in 2010. The Framework is called Knockout js. 🎉Our Newsletter is live! Join thousands of other developers islemmaboud.com/join-newsletter 🐦 Follow me on Twitter: twi...
This is going to change React Forever
zhlédnutí 3,7KPřed měsícem
Javascript Signals are finally available on React. The new useSignal hook is a killer hook that allows you to use the new Javascript Signals Proposal to build efficient apps that only re-render when needed and not on every state update. 🎉Our Newsletter is live! Join thousands of other developers islemmaboud.com/join-newsletter 🐦 Follow me on Twitter: ipenywis ✨ Timestamps ✨ 00:00 In...
I Wish I knew about This Authentication Tool Earlier
zhlédnutí 3KPřed měsícem
Authentication is hard! Here's how to make it easy with Authkit. Adding Email/Password, OAuth, SSO, Rest password, Magic links and a lot more all with one tool that takes care of all the headaches and you only need to focus on your App. Start with Authkit here www.authkit.com/ dashboard.workos.com/signup?utm=coderone 🎉Our Newsletter is live! Join thousands of other developers islemmaboud.com/jo...
This New React 19 Hook Will Blow Your Mind
zhlédnutí 7KPřed měsícem
Introducing React 19's useOptimistic hook! Render instant UI updates while waiting for async operations. Say goodbye to loading spinners and hello to seamless user experiences. Try it now and see the difference! 🎉Our Newsletter is live! Join thousands of other developers islemmaboud.com/join-newsletter 🐦 Follow me on Twitter: ipenywis Special Links ✨ Join Figma for Free and start de...
Why I Switched From Figma Dev Mode to This Tool
zhlédnutí 2,1KPřed měsícem
Figma has recently introduced its latest feature called "Dev Mode," aimed at aiding developers in transitioning seamlessly from design to code. However, despite its promising functionality, it lacks some essential features and comes with a relatively high price tag. In my opinion, I've discovered a suitable alternative to streamline your design-to-code workflow: Zeplin. ✨ Get Started with Zepli...
I Got Access to Google's New AI Code Editor | Project IDX
zhlédnutí 10KPřed 2 měsíci
I Got Access to Google's New AI Code Editor! Which is called Project IDX!. Let's explore the new editor and see what Google is cooking for developers. Will this replace or kill VSCode? 🎉Our Newsletter is live! Join thousands of other developers islemmaboud.com/join-newsletter Checkout Project IDX and Join the Waitlist: idx.dev/ Special Links ✨ Join Figma for Free and start designing now! psxid....
I Just Discovered The Most Underrated UI Library for React
zhlédnutí 22KPřed 2 měsíci
Choosing the right UI library for your next project can help you move faster in many aspects. Mantine UI is one of the great UI libraries that can do that and a lot more! 🎉Our Newsletter is live! Join thousands of other developers islemmaboud.com/join-newsletter Checkout Mantine: mantine.dev/ Special Links ✨ Join Figma for Free and start designing now! psxid.figma.com/69wr7zzb1mxm 👉 ✨ Join Figm...
I Got a New Job at an AI Startup!
zhlédnutí 1,5KPřed 2 měsíci
To Join the Discord Server and be among the 10 first people to get exclusive access to the Perigon API. Here are the steps: 1. Join the Perigon Discord Server: discord.gg/perigon. 2. Introduce yourself or say Hi in the #introduce-yourself channel. 3. For the first 10 people, I'll send you an exclusive access link. Check Perigon website: www.goperigon.com/ 🎉Our Newsletter is live! Join thousands...
The Magical React Hook That Makes your Components Smaller
zhlédnutí 5KPřed 3 měsíci
useReducer is one of the most underrated React hooks, instead of writing 3 lines of useState, you can replace it with a single line of code. 🎉Our Newsletter is live! Join thousands of other developers islemmaboud.com/join-newsletter 🐦 Follow me on Twitter: ipenywis Special Links ✨ Join Figma for Free and start designing now! psxid.figma.com/69wr7zzb1mxm 👉 ✨ Join Figma For Profession...
Javascript Gets a New Runtime Every Month Now!
zhlédnutí 2KPřed 3 měsíci
If you are a javascript developer, you would know the pain of having to deal with new libraries or frameworks on almost daily basis, but now, it looks like we are in a new era where a whole Javascript Runtime is invented almost every month. Let me introduce you to the LLRT Javascript Runtime by Amazon & AWS. 🎉Our Newsletter is live! Join thousands of other developers islemmaboud.com/join-newsle...
I Wish I knew This About Typescript & React Sooner
zhlédnutí 37KPřed 3 měsíci
If you are using React with Typescript, this video will help find the hidden React Typescript utility types that will help right better and cleaner code. 🎉Our Newsletter is live! Join thousands of other developers islemmaboud.com/join-newsletter 🐦 Follow me on Twitter: ipenywis ⭐ Timestamps ⭐ 00:00 Intro 00:19 (01) Component Props 03:14 (02) Generic Components 08:31 (03) Type Narrow...
Build a REST API AI SaaS That Generates Magical Images
zhlédnutí 4,8KPřed 3 měsíci
Build a REST API AI SaaS That Generates Magical Images
Git Mistakes Every Junior Developer should Avoid | clean-code
zhlédnutí 3,3KPřed 3 měsíci
Git Mistakes Every Junior Developer should Avoid | clean-code
Stop Doing These Next.js Mistakes
zhlédnutí 8KPřed 4 měsíci
Stop Doing These Next.js Mistakes
Google Will Soon Kill Ad Blockers with Manifest V3 - What’s Next?
zhlédnutí 2,9KPřed 4 měsíci
Google Will Soon Kill Ad Blockers with Manifest V3 - What’s Next?
I Wish I knew These UI Design Aspects Sooner
zhlédnutí 3,6KPřed 4 měsíci
I Wish I knew These UI Design Aspects Sooner
I Can't Believe I Didn't Know these Typescript Hacks
zhlédnutí 11KPřed 4 měsíci
I Can't Believe I Didn't Know these Typescript Hacks
I Wish I knew this CSS Design Trend Sooner
zhlédnutí 2,6KPřed 5 měsíci
I Wish I knew this CSS Design Trend Sooner
Prettier/ESLint to Biome: The Lightning-Fast Rust-Based Tool!
zhlédnutí 15KPřed 5 měsíci
Prettier/ESLint to Biome: The Lightning-Fast Rust-Based Tool!
JSON is Slow
zhlédnutí 3,2KPřed 5 měsíci
JSON is Slow
React Clean Code: Advanced Examples of SOLID Principles
zhlédnutí 21KPřed 5 měsíci
React Clean Code: Advanced Examples of SOLID Principles
The React Interview Questions You need to Know
zhlédnutí 17KPřed 6 měsíci
The React Interview Questions You need to Know
HTMX - What they don't want you to know!
zhlédnutí 77KPřed 6 měsíci
HTMX - What they don't want you to know!
Build React Apps Visually - The Future of React
zhlédnutí 6KPřed 6 měsíci
Build React Apps Visually - The Future of React
Everyone is Complaining about Next.js 14!
zhlédnutí 7KPřed 6 měsíci
Everyone is Complaining about Next.js 14!
The Right Way to Animate SVG in React
zhlédnutí 16KPřed 6 měsíci
The Right Way to Animate SVG in React

Komentáře

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd Před 3 hodinami

    Thanks for sharing this infos

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd Před 3 hodinami

    good news

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd Před 4 hodinami

    Thank you

  • @AnthonyCandaele
    @AnthonyCandaele Před 4 hodinami

    Thanks for your elaborate explanation of the React compiler.

  • @nguyenhauthanh4559
    @nguyenhauthanh4559 Před 7 hodinami

    Can share link code for me ?

  • @airixxxx
    @airixxxx Před 10 hodinami

    8:23 That's not a Context problem, and React Context doesn't have any "bad implementation" problem. That's just bad coding from your example, if you update a state there the re-rendering is inevitable, that's just bad usage of the context API. The new compiler seems to be great for automatic optimizing but the problem I'm seeing is that people will start to write bad code and expect the compiler to save them.

  • @kamalkamals
    @kamalkamals Před 14 hodinami

    why every time react team inspire from svelte team ideas !!

  • @chlbri
    @chlbri Před 15 hodinami

    Can we have your vscode theme

  • @karaghofrane4696
    @karaghofrane4696 Před 16 hodinami

    Thanks 🤍

  • @rishiraj2548
    @rishiraj2548 Před 17 hodinami

    Thanks

  • @ulrich-tonmoy
    @ulrich-tonmoy Před 17 hodinami

    Whats the effect of this on memory

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd Před 18 hodinami

    Thanks man

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd Před 23 hodinami

    thank you, keep posting videos like this

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd Před 23 hodinami

    Thak You

  • @aymenbachiri-yh2hd

    great video

  • @aymenbachiri-yh2hd

    Thanks , keep posting content like this

  • @aymenbachiri-yh2hd

    Thank You

  • @aymenbachiri-yh2hd

    Thank you

  • @gillesashley9314
    @gillesashley9314 Před dnem

    Just perfect vanilla javascript and use whatever library or framework your company demands. Done.

  • @TwoThreeFour
    @TwoThreeFour Před dnem

    Based 😂

  • @Hunter_Bidens_Crackpipe_

    Diiita and chaaaald are not english words

  • @MrSIVA-uy4bx
    @MrSIVA-uy4bx Před 2 dny

    hi bro please expalin the tanstack/reactQuery and how to use and benfits

  • @lucassrt007
    @lucassrt007 Před 2 dny

    too bad its its not the selfhosted version, nice tutorial though

  • @AhmadNasriya
    @AhmadNasriya Před 3 dny

    I'm super new to TypeScript, but I use all the tips you just mentioned. Does that make me a senior developer?

  • @CrashPreinsertion
    @CrashPreinsertion Před 3 dny

    I was very tempted to give this video a thumbs down until about 7:00 when you mention the IDX commands in the command palette. I don't like your mumbling voice. Please annunciate more clearly. And I don't like your stream of consciousness style of talking. Please take some time to put your verbiage into clearly delineated sections. Use space. Google made a Project IDX video six months prior to yours & it's far superior. But! You had content about the IDX commands in the command palette (ie you showed how comments can be automated), & for that you reluctantly get a thumbs up.

  • @RayzenHunt
    @RayzenHunt Před 3 dny

    Why do you suggest changing the style component to tailwind? What is better about it? You are only changing the tool to one you know yourself. If the project is large and doesn't use tailwind but own styled components what then?

  • @trevorwylie5882
    @trevorwylie5882 Před 4 dny

    wise up chrome is outdated crap our office stopped using chrome for good over a year ago for the better.

  • @abcess124
    @abcess124 Před 4 dny

    سطايفي 😳☺️

  • @hollengrhen1
    @hollengrhen1 Před 4 dny

    Never trust someone who shortens department to demp.

  • @KylanHurt
    @KylanHurt Před 4 dny

    Meh, Copilot seems better IMO

  • @jordixboy
    @jordixboy Před 4 dny

    these doesn't necesarily have to be junior mistakes. If you are a generalist, I code in any language that's needed, this might be just due to not having all the language knowledge.

  • @brandonsheffield9873

    What if an AD Blocker created several processes, and each process runs the 30,000 to 50,000 rules maximum?

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd Před 5 dny

    🎉

  • @chillbackground4935

    the most important part and you hide it by the camera then process to do nothing

  • @gobs3701
    @gobs3701 Před 6 dny

    There is a free community edition in their github but I don't it's limitations

  • @airixxxx
    @airixxxx Před 6 dny

    Great, the only thing I would change is either remove the icon property and let the dev put the icon in the position they want via children, or make the icon property a type with icon and slot: "start | end" for positioning, I feel like passing an icon prop and having to position the children passing a class is not very clean.

  • @SabujArefin
    @SabujArefin Před 6 dny

    Great explanation. Thanks

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd Před 7 dny

    Thank you , keep posting content like this

    • @CoderOne
      @CoderOne Před 7 dny

      Glad this kind of videos is helping ^^

  • @morale3056
    @morale3056 Před 7 dny

    Even I haven't written this kinda react code lol. But props for putting this out there and making an example without shame. 🫡

  • @mohammadtoficmohammad3594

    Thank you

  • @rishiraj2548
    @rishiraj2548 Před 7 dny

    Great approach

  • @antisocial6974
    @antisocial6974 Před 7 dny

    Guys, you can throw me links to the git for these projects, or to those where you can apply new products (such as the react 18 feature in question at 7:20 or 7:50), I was given the task at the university to compare react 17 and react 18 with examples.I will be very grateful for your help.Now there is simply not enough time to study, the lights are constantly turned off due to shelling.

  • @akshatsamdani
    @akshatsamdani Před 8 dny

    Which extension are you using for indentation coloring

  • @abdellah_ali
    @abdellah_ali Před 8 dny

    Islam why you don't speak Arabic at least one video please

    • @CoderOne
      @CoderOne Před 7 dny

      It would be a little hard for me to explain technical terms in arabic. Hopefully in the future

    • @abdellah_ali
      @abdellah_ali Před 2 dny

      @@CoderOne i meant any subject not specifically your content.and thanks a lot

  • @magicalTom
    @magicalTom Před 8 dny

    这是什么主题

  • @havvacoban4875
    @havvacoban4875 Před 9 dny

    I have a question , how can I use no moon for error scenarios. Which section do I do the modification

  • @karrantza
    @karrantza Před 10 dny

    4 minutes and still nothing said bla bla bla bla

  • @waleedrehman9779
    @waleedrehman9779 Před 11 dny

    Something wrong with video keeps crashing

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd Před 12 dny

    i'am glad you give this valuable informations

  • @aymenbachiri-yh2hd
    @aymenbachiri-yh2hd Před 12 dny

    Thank You, keep posting videos like this, with more tutorials