Arslan
Arslan
  • 223
  • 2 359 164
Mantine UI V7 Course #4 | Routing and Navigation Using React Router
Yo, welcome to the updated version of the mantine course inthis course i wanted to update all the out of date tutorials i hope you enjoy :D. Today we're gonna learn how to work with Routing and Navigation
0:00 Introduction
0:39 Code Portion of Tutorial
10:55 Testing Routing and Navigation
LINKS: linktr.ee/arslan99
Please don't forget Like, Comment and Subscribe if you're new!
Переглядів: 2 776

Відео

Mantine UI V7 Course #3 | Dark Mode / Light Mode
Переглядів 2,5 тис.10 місяців тому
Yo, welcome to the updated version of the mantine ui course. I wanted to make this update because the previous course is so out of date. so enjoy :D. We're gonna learn how to work with light mode and dark mode 0:00 Introduction To Tutorial 0:13 Documentation Walkthrough 1:22 Coding Portion of Tutorial 4:22 Testing Github: github.com/arslanah99/mantine_course_v7/tree/main/mantinecoursev7 LINKS: ...
Mantine UI V7 Course #2 | AppShell
Переглядів 4,6 тис.10 місяців тому
Yo, welcome to the updated version of the mantine ui course. I wanted to make this update because the previous course is so out of date. so enjoy :D. In this video we're learning how to work with AppShell Chapters: 0:00 Introduction & Demonstration 0:35 Documentation Walkthrough 5:00 Working With AppShell In React 17:56 Testing 20:04 End Github: github.com/arslanah99/mantine_course_v7/tree/main...
Mantine UI V7 Course #1 | Installation
Переглядів 7 тис.10 місяців тому
Yo, welcome to the updated version of the mantine ui course. I wanted to make this update because the previous course is so out of date. so enjoy :D Chapters: 0:00 Introduction 4:44 Installing Mantine V7 in React Typescript Github: github.com/arslanah99/mantine_course_v7/tree/main/mantinecoursev7 LINKS: linktr.ee/arslan99 Docs: mantine.dev/getting-started/ Please don't forget Like, Comment and ...
Easily Connect Firebase Emulators with Expo or React Native
Переглядів 84511 місяців тому
👋 what up y'all! Welcome to this comprehensive guide on setting up and using Firebase Emulators in an Expo React Native project. Say goodbye to all the guesswork and make your development process a breeze! 🚀 🔍 What Will You Learn? - How to initialize a new Expo React Native project - Installing necessary packages like Firebase SDK - Setting up Firebase services and connecting them to local emul...
Electron Course #5 | Light/Dark Mode + Card Styling
Переглядів 873Рік тому
Electron Course #5 | Light/Dark Mode Card Styling
Styling React-PDF with Custom Fonts & Dynamic Page Styles
Переглядів 11 тис.Рік тому
Styling React-PDF with Custom Fonts & Dynamic Page Styles
Electron Course #4 | Setup React Query With Anime API
Переглядів 769Рік тому
Electron Course #4 | Setup React Query With Anime API
Electron Course #3 | Building a Responsive Navbar with React Router in Electron
Переглядів 4,9 тис.Рік тому
Electron Course #3 | Building a Responsive Navbar with React Router in Electron
Electron Course #2 | Setup Material UI & Typography
Переглядів 2 тис.Рік тому
Electron Course #2 | Setup Material UI & Typography
Electron Course With React | Introduction #1
Переглядів 1,5 тис.Рік тому
Electron Course With React | Introduction #1
React Day-Picker Basic Setup
Переглядів 2,5 тис.Рік тому
React Day-Picker Basic Setup
Fetching and Displaying REST API Data with Axios, Apollo, GraphQL, and React
Переглядів 3,3 тис.Рік тому
Fetching and Displaying REST API Data with Axios, Apollo, GraphQL, and React
Setup a Dynamic Table with Chakra UI
Переглядів 3,9 тис.Рік тому
Setup a Dynamic Table with Chakra UI
Full React Native Course | Build An Anime App
Переглядів 1,4 тис.Рік тому
Full React Native Course | Build An Anime App
React Native Flash List Basic Setup
Переглядів 4,1 тис.Рік тому
React Native Flash List Basic Setup
The Only React Icon Library You Need | React-icons
Переглядів 6 тис.Рік тому
The Only React Icon Library You Need | React-icons
Detect Internet In React Native | React Native Course #22 #reactnative
Переглядів 4,5 тис.Рік тому
Detect Internet In React Native | React Native Course #22 #reactnative
Create React Native Android Release Build On MacOS | React Native Course #21
Переглядів 3,5 тис.Рік тому
Create React Native Android Release Build On MacOS | React Native Course #21
Style Props In Chakra UI | #2
Переглядів 100Рік тому
Style Props In Chakra UI | #2
Chakra UI Introduction | Chakra UI Course #1
Переглядів 173Рік тому
Chakra UI Introduction | Chakra UI Course #1
Setup React Native Tab-View | React Native Course #20 #reactnative
Переглядів 2,6 тис.Рік тому
Setup React Native Tab-View | React Native Course #20 #reactnative
Display CSV Data in a Chart In ReactJS | ChartJS And PapaParse
Переглядів 4,2 тис.Рік тому
Display CSV Data in a Chart In ReactJS | ChartJS And PapaParse
Setup React Router V6 With a Navbar In React
Переглядів 4,4 тис.Рік тому
Setup React Router V6 With a Navbar In React
Setup PDFMake in ReactJS
Переглядів 8 тис.Рік тому
Setup PDFMake in ReactJS
Setup React Native Vector Icons For Both Android & iOS
Переглядів 20 тис.Рік тому
Setup React Native Vector Icons For Both Android & iOS
Buttons In NativeBase | NativeBase Tutorial #3 #reactnative #nativebase
Переглядів 1,2 тис.Рік тому
Buttons In NativeBase | NativeBase Tutorial #3 #reactnative #nativebase
Setup React Navigation With Native Base | NativeBase Tutorial #2
Переглядів 2,4 тис.Рік тому
Setup React Navigation With Native Base | NativeBase Tutorial #2
NativeBase Introduction & Installation In React Native | NativeBase #1
Переглядів 6 тис.Рік тому
NativeBase Introduction & Installation In React Native | NativeBase #1
How to Use, useHash Hook in Mantine UI | Mantine UI Course #16
Переглядів 783Рік тому
How to Use, useHash Hook in Mantine UI | Mantine UI Course #16

КОМЕНТАРІ

  • @AkashRaj-zc6vc
    @AkashRaj-zc6vc 7 днів тому

    what to do for non webkit browsers?

  • @aymangouda9708
    @aymangouda9708 10 днів тому

    ❤❤❤❤❤🎉

  • @PreciousOsonwa
    @PreciousOsonwa 20 днів тому

    wow this is my first time commenting thanks a lot I understood everything you thought I wont be writing plenty states again material ui is so nice @Arslan you did a very nice job thanks a lot

    • @arslan99
      @arslan99 20 днів тому

      @@PreciousOsonwa i appreciate your comment thank you I'm glad you got a good understanding of it all

  • @andrejkling3886
    @andrejkling3886 27 днів тому

    Thank you...👍

  • @jihyukyoon7902
    @jihyukyoon7902 Місяць тому

    Jk dynamic link is being deprecated

  • @jihyukyoon7902
    @jihyukyoon7902 Місяць тому

    Fire

  • @hyoukaisherelol
    @hyoukaisherelol Місяць тому

    Hey nice vid, im just a newbie and i just found this very helpful

    • @arslan99
      @arslan99 Місяць тому

      I'm glad I could help ya out

  • @electroheadfx
    @electroheadfx Місяць тому

    its good but who is not writting in typescript ? sorry

    • @arslan99
      @arslan99 6 днів тому

      Sorry for a late response. Unfortunately I don't actually remember 😅

  • @mangkoeboemie
    @mangkoeboemie Місяць тому

    im rendering a booking receipt that sometime is really long how to break to new pages automatically?

    • @arslan99
      @arslan99 Місяць тому

      @@mangkoeboemie hmmm you could try asynchronous await

  • @bekiGYD
    @bekiGYD 2 місяці тому

    you are the Best. keep it up

  • @divyanshsingh1347
    @divyanshsingh1347 2 місяці тому

    man you literally saved me , i was having the "style property undefined issue " , but after installing this beta version , the problem is gone . Thankyou so much mate .

    • @arslan99
      @arslan99 6 днів тому

      Glad I could help

  • @wilsonmateo6346
    @wilsonmateo6346 2 місяці тому

    how can i do it when the screen shot needs to be in more than one page, but i want to have some margin just to void to have spaces on the document, i try many things but it does not work here is some part of the code. const generatePDF = () => { const input = pageRef.current; if (input) { //toma la escala a la que se tomara la imagen html2canvas(input, {scale: 2, useCORS: true, allowTaint: true}).then((canvas) => { const imgData = canvas.toDataURL('image/png') const pdf = new jsPDF('landscape', 'mm', 'A4'); const imgWidth = 280; const pageHeight = 210; const margin = 10; const imgHeight = (canvas.height * (imgWidth - margin * 2)) / canvas.width; let heightLeft = imgHeight; let position = 0; pdf.addImage(imgData, 'PNG', margin, position, imgWidth - margin * 2, imgHeight); heightLeft -= pageHeight; while (heightLeft >= 0) { position = heightLeft - imgHeight; pdf.addPage(); pdf.addImage(imgData, 'PNG', margin, position, imgWidth - margin * 2, imgHeight); heightLeft -=pageHeight; } //toma el formato de la fecha const date = new Date(); const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`; const fileName = `cotizacion ${selectedClientName} ${formattedDate}.pdf`; //el formato de como se llamara el archivo al ser descargado pdf.save(fileName); //aqui se descarga el pdf }); } };

  • @CollinMeCrazy
    @CollinMeCrazy 2 місяці тому

    goated video fr, i tried doing this a while ago and was struggling but this worked like a charm thanks man !

  • @Dencell
    @Dencell 2 місяці тому

    Can you do this running expo go on a physical device?

    • @arslan99
      @arslan99 2 місяці тому

      @@Dencell hmmm I am not you sure I've never tried

    • @chrishyde952
      @chrishyde952 2 місяці тому

      Having trouble with this as well. doesn't seem to connect.

    • @arslan99
      @arslan99 2 місяці тому

      @@chrishyde952 hmmm maybe do you have USB debugging enabled?

  • @Lorenzo01179
    @Lorenzo01179 2 місяці тому

    What is I wanted a footer to also always display? (Edit) I think I got it but if u know a for sure way I'd appreciate a explanation

  • @Diduty
    @Diduty 2 місяці тому

    thank you

  • @NKardan
    @NKardan 2 місяці тому

    thank you so much it's work perfect but in the console i have the error : Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>. any advice to solve this error ????

  • @Lo0k-z1s
    @Lo0k-z1s 3 місяці тому

    I can’t seem to customize the hover effect despite following the video.

  • @j.villasmil9575
    @j.villasmil9575 3 місяці тому

    Hello Arslan, I see you couldn't set the page number on each page, I have the same problem, only show it at the end of the entire document

  • @mutiaraayun6062
    @mutiaraayun6062 3 місяці тому

    i try your video and implement using next.js 14 but some how image not show when i'm using components image in react-pdf also path of image using local. any suggestion for my problem

  • @bfrAliShettima
    @bfrAliShettima 3 місяці тому

    Nice tutorial

  • @prajwal1341
    @prajwal1341 3 місяці тому

    thanks bro..

  • @ketanpatel4273
    @ketanpatel4273 3 місяці тому

    Thanks for this Arslan. How can I get the drawer/overlay to close in mobile view and show the relevant component.

  • @jeetray11
    @jeetray11 3 місяці тому

    Bro. I was looking for a course on Mantine and didn't find any but this. So Thank you. But before I start this course I have a quick question for you. I am a newbie React dev. Still learning. I am doing a project and I almost decided to go with react-bootstrap library. The idea is I don't want to use any CSS at all, whatever comes out of the box. But a couple days ago somebody threw at me Material UI, Chakra UI, Mantine. I already knew about Tailwind and I decided to not go with it. Chakra I didn't bother looking at. Don't have time. between the two Ms I didn't like the Material UI documentation site's visual aspects and Mantine looked much cleaner to me. I want to jump at it but fear that it being new the path of it is unknown, there is less support, less tutorials/courses etc. where react-bootstrap may be more stable and has a very long history. Is my concern about Mantine baseless. Please share your thoughts.

  • @italobuitron1165
    @italobuitron1165 3 місяці тому

    This is the old version, is there any new version?

    • @arslan99
      @arslan99 3 місяці тому

      I think I might've made a new one on my channel like Mantine V2 or somethin

  • @jameskarlapas1999
    @jameskarlapas1999 3 місяці тому

    Thanks man

  • @jameskarlapas1999
    @jameskarlapas1999 3 місяці тому

    Thanks man

  • @bfrAliShettima
    @bfrAliShettima 3 місяці тому

    Nice tutorial

  • @ntchindagiscard3870
    @ntchindagiscard3870 3 місяці тому

    Can there be one with just reactjs ?

  • @AnitaR-q5l
    @AnitaR-q5l 3 місяці тому

    Thank you very much.. This is what I actually searching for.

    • @arslan99
      @arslan99 6 днів тому

      Glad I could help!

  • @ignaciodipaolo8293
    @ignaciodipaolo8293 3 місяці тому

    thx man !

  • @KousseilaMd
    @KousseilaMd 3 місяці тому

    but how would u use that return to do other stuff like give it as a parameter for another function or smth like that

  • @abdulrahmanhussamaldin6523
    @abdulrahmanhussamaldin6523 4 місяці тому

    Is this Still Work I Tired From FireBase Please Tell If This Still Work

  • @SulavNiroula-wg6gw
    @SulavNiroula-wg6gw 4 місяці тому

    If i have paginated data how to search the data that has not been loaded yet??

  • @monoq_
    @monoq_ 4 місяці тому

    Oh thank you so much man. I've been searching for this in the docs and I can't found how to do it.

  • @ahmedAshraf-xo7mj
    @ahmedAshraf-xo7mj 4 місяці тому

    I was watching this video in a library and they told me to raise the volume.

  • @HassanMohamed-317
    @HassanMohamed-317 5 місяців тому

    Can React Query be used instead of Redux?

    • @arslan99
      @arslan99 5 місяців тому

      I'm not really sure what redux does haha

  • @bangunny
    @bangunny 5 місяців тому

    man your mic too low, i can't hear a thing

    • @arslan99
      @arslan99 5 місяців тому

      Ah darn for future videos I'll increase it

  • @NelsonMunthe-xk9ne
    @NelsonMunthe-xk9ne 5 місяців тому

    i got his error message, "error Failed to install the app. Command failed with EACCES: ./gradlew app:installDebug -PreactNativeDevServerPort=8081 spawn ./gradlew EACCES." anybody can help me?

  • @abduraaahim
    @abduraaahim 5 місяців тому

    damn, it didn't work

    • @arslan99
      @arslan99 5 місяців тому

      What error did you get

  • @maxalejandrocamacho6163
    @maxalejandrocamacho6163 5 місяців тому

    Thank u!!! you really help me to much! i was looking this answer for a while!

    • @arslan99
      @arslan99 5 місяців тому

      I'm glad I could help 😄

  • @rebrod06
    @rebrod06 5 місяців тому

    Great video!!

    • @arslan99
      @arslan99 6 днів тому

      Glad you enjoyed it

  • @AtharvaSadavarte-lt3kt
    @AtharvaSadavarte-lt3kt 5 місяців тому

    how to make this background animation in react native?

  • @r4v1
    @r4v1 5 місяців тому

    Thanks for the video. How do I disable the video controls? And prevent video from going to fullscreen player when it starts playing on mobile?

  • @dawidwraga
    @dawidwraga 5 місяців тому

    Hey I've made a react library called @davstack/sound which makes using howler with global config settings like volume super easy. I'm curious to hear what you think!

  • @mujahidali8691
    @mujahidali8691 5 місяців тому

    What is the name of this song or background music

  • @ravi_verma31
    @ravi_verma31 5 місяців тому

    How to take screenshot of the content which is scrollable and have height more than the viewport also that div can be scaled (transform: scale()) using input range, but what i want the preview of the div with default scale value so that even user zoomed it up and clicks on preview it should get fixedsize of the div as an image no matter what the current state of scale is.

  • @Qwerty20121
    @Qwerty20121 5 місяців тому

    Nise job :D I lyk it :3 Haha, but your oldest video is actually awesome!

  • @Qwerty20121
    @Qwerty20121 5 місяців тому

    Kewl 😀👍🍦

  • @sreenivasreddykick4503
    @sreenivasreddykick4503 5 місяців тому

    do i need to replace store file path? in app build.gradle