RavenJS
RavenJS
  • 32
  • 504 021
Need performance in React? useRef ✅ | useState ❌
In this video, we'll discuss when to use useState vs useRef. I'll also demonstrate how to handle events in React, and use 3rd party Javascript libraries in React using useRef.
Finished code:
- Coming Soon (comment if it's urgent)
Timestamps:
0:00 Introduction
0:24 Problem Statement
1:15 useState
5:38 useRef
8:33 Mouse Events
10:45 3rd party libraries
zhlédnutí: 689

Video

Basic CRUD App using HTMX and Flask - Learn HTMX and Flask in 1 hour!
zhlédnutí 6KPřed 7 měsíci
No prerequisite knowledge required! In this video, we'll build a simple CRUD app using HTMX and Flask from scratch. Finished code: github.com/voidranjer/htmx-flask-crudapp Timestamps: 0:00 Introduction 4:12 Installing Flask 7:32 Templates 8:40 Macros 12:41 Making the Navbar 16:45 Extending Templates 21:56 `url_for` function 26:00 Database 29:48 Passing data into templates 30:53 For loops 33:14 ...
Protected Routes and Redirect on Login with NextJS 13 + Firebase Auth
zhlédnutí 6KPřed 8 měsíci
Learn how to leverage the App Router feature in Next.js 13 to create routes that are protected and accessible only to authenticated users. 💡 Key Topics Covered: 1. Setting up Firebase Authentication with Next.js 13. 2. Creating Protected Routes with the App Router. 3. Implementing Redirect on Login for a seamless user experience. 4. Use URL Query Parameters [/login?continueTo=] to redirect user...
The proper way to do GLOBAL STATE in React - Jotai, Boiletplate-free Redux
zhlédnutí 5KPřed rokem
Global State Variables in React without Redux or boilerplate. Jotai takes an atomic approach to global React state management inspired by Recoil. PocketBase Crash Course Playlist: czcams.com/play/PLqFvlDFoiZ-0ixIS8D4JTHRuVy_rkfROY.html Jotai Docs: jotai.org/ Hostinger Promo Code: RAVENJS hostinger.com/ravenjs (use code RAVENJS for 10% off all products/plans)
PocketBase Tutorial #6 - Automatic Refetching with the useQuery hook (react-query)
zhlédnutí 4,2KPřed rokem
How to build a full-stack React App with PocketBase. PocketBase Crash Course Playlist: czcams.com/play/PLqFvlDFoiZ-0ixIS8D4JTHRuVy_rkfROY.html PocketBase Docs: pocketbase.io/docs Hostinger Promo Code: RAVENJS hostinger.com/ravenjs (use code RAVENJS for 10% off all products/plans)
PocketBase Tutorial #5 - Sending Verification Emails (with Sendinblue SMTP)
zhlédnutí 6KPřed rokem
How to build a full-stack React App with PocketBase. PocketBase Crash Course Playlist: czcams.com/play/PLqFvlDFoiZ-0ixIS8D4JTHRuVy_rkfROY.html PocketBase Docs: pocketbase.io/docs Hostinger Promo Code: RAVENJS hostinger.com/ravenjs (use code RAVENJS for 10% off all products/plans)
PocketBase Tutorial #4 - Auth Hooks (with react-query)
zhlédnutí 7KPřed rokem
How to build a full-stack React App with PocketBase. PocketBase Crash Course Playlist: czcams.com/play/PLqFvlDFoiZ-0ixIS8D4JTHRuVy_rkfROY.html PocketBase Docs: pocketbase.io/docs Hostinger Promo Code: RAVENJS hostinger.com/ravenjs (use code RAVENJS for 10% off all products/plans)
PocketBase Tutorial #3 - Authentication (with react-hook-form)
zhlédnutí 14KPřed rokem
How to build a full-stack React App with PocketBase. PocketBase Crash Course Playlist: czcams.com/play/PLqFvlDFoiZ-0ixIS8D4JTHRuVy_rkfROY.html PocketBase Docs: pocketbase.io/docs Hostinger Promo Code: RAVENJS hostinger.com/ravenjs (use code RAVENJS for 10% off all products/plans)
PocketBase Tutorial #2 - React & PocketBase SDK Setup
zhlédnutí 12KPřed rokem
How to build a full-stack React App with PocketBase. PocketBase Crash Course Playlist: czcams.com/play/PLqFvlDFoiZ-0ixIS8D4JTHRuVy_rkfROY.html PocketBase Docs: pocketbase.io/docs Hostinger Promo Code: RAVENJS hostinger.com/ravenjs (use code RAVENJS for 10% off all products/plans)
PocketBase Tutorial #1 - Intro to PocketBase
zhlédnutí 24KPřed rokem
How to build a full-stack React App with PocketBase. PocketBase Crash Course Playlist: czcams.com/play/PLqFvlDFoiZ-0ixIS8D4JTHRuVy_rkfROY.html PocketBase Docs: pocketbase.io/docs Hostinger Promo Code: RAVENJS hostinger.com/ravenjs (use code RAVENJS for 10% off all products/plans)
Build and Deploy a Full Stack Social Media App (ReactJS + Firebase v9 + Chakra UI)
zhlédnutí 22KPřed rokem
Deploy your websites or project NOW for $1.99/month: hostinger.com/ravenjs (get extra 10% off with code RAVENJS at checkout) Build and deploy a React full stack social media app from scratch with Firebase Hooks, React Hook Form, and React Router. The code used in this video (with the .htaccess snippet): github.com/LogicismX/social-media-app Firebase Auth Playlist: czcams.com/play/PLqFvlDFoiZ-3H...
Subcollections in Firebase/Firestore v9 (with React.js)
zhlédnutí 20KPřed 2 lety
Learn how to create and access subcollections in Cloud Firestore. React Firebase v9 The code used in this video: github.com/LogicismX/firebase-subcollections Cloud Firestore Playlist: czcams.com/play/PLqFvlDFoiZ-2SAX7YXCYtb28K4IooCIlS.html Firebase Auth Playlist: czcams.com/play/PLqFvlDFoiZ-3HoHuYfqc4SrId1JbrtTnA.html Supabase Playlist: czcams.com/play/PLqFvlDFoiZ-3c2rkeQDhKXn7h27TDlQL7.html Cl...
Supabase React Tutorial - Building a Full Stack Todo App with Supabase and ReactJS (with realtime)
zhlédnutí 12KPřed 2 lety
Learn how to build a full stack React App with Supabase. Live Demo: todo.yapsh.com The code used in this video: github.com/LogicismX/supabase-todo Supabase Playlist: czcams.com/play/PLqFvlDFoiZ-3c2rkeQDhKXn7h27TDlQL7.html Firebase Auth Playlist: czcams.com/play/PLqFvlDFoiZ-3HoHuYfqc4SrId1JbrtTnA.html Cloud Firestore Playlist: czcams.com/play/PLqFvlDFoiZ-2SAX7YXCYtb28K4IooCIlS.html Supabase Docu...
Full Stack React Chat App Tutorial (Firebase v9 + ChakraUI + NextJS)
zhlédnutí 17KPřed 2 lety
Build a chat app from scratch with ReactJS. Live Demo: chat.yapsh.com The code used in this video: github.com/LogicismX/fullstack-chatapp Firebase Auth Playlist: czcams.com/play/PLqFvlDFoiZ-3HoHuYfqc4SrId1JbrtTnA.html Cloud Firestore Playlist: czcams.com/play/PLqFvlDFoiZ-2SAX7YXCYtb28K4IooCIlS.html Flexbox CSS Guide: css-tricks.com/snippets/css/a-guide-to-flexbox/ Timestamps: 0:00 Introduction ...
User Profile Pictures with React Authentication and Cloud Storage (with Firebase v9)
zhlédnutí 34KPřed 2 lety
Upload user profile pictures to Firebase Cloud Storage. Link Authentication with Cloud Storage with Firebase Web v9 Modular. The code used in this video: github.com/LogicismX/React-Firebase-Auth/tree/Part-2 Firebase Auth Documentation: firebase.google.com/docs/auth/web/start Firebase Auth Playlist: czcams.com/play/PLqFvlDFoiZ-3HoHuYfqc4SrId1JbrtTnA.html Timestamps:
React Authentication Crash Course (with Firebase v9)
zhlédnutí 44KPřed 2 lety
React Authentication Crash Course (with Firebase v9)
How to set up React with Firebase/Firestore v9 (Part 5 | Order documents by timestamp)
zhlédnutí 10KPřed 2 lety
How to set up React with Firebase/Firestore v9 (Part 5 | Order documents by timestamp)
How to set up React with Firebase/Firestore v9 (Part 4 | Query delete multiple documents)
zhlédnutí 8KPřed 2 lety
How to set up React with Firebase/Firestore v9 (Part 4 | Query delete multiple documents)
How to set up React with Firebase/Firestore v9 (Part 3 | setDoc)
zhlédnutí 11KPřed 2 lety
How to set up React with Firebase/Firestore v9 (Part 3 | setDoc)
How to set up React with Firebase/Firestore v9 (Part 2 | addDoc)
zhlédnutí 20KPřed 2 lety
How to set up React with Firebase/Firestore v9 (Part 2 | addDoc)
How to set up React with Firebase/Firestore v9 (Part 1 | onSnapshot)
zhlédnutí 56KPřed 2 lety
How to set up React with Firebase/Firestore v9 (Part 1 | onSnapshot)
Javascript Bar Charts with ChartJS
zhlédnutí 19KPřed 2 lety
Javascript Bar Charts with ChartJS
Dividers & Spacing - Ant Design Tutorial || #4
zhlédnutí 3,1KPřed 3 lety
Dividers & Spacing - Ant Design Tutorial || #4
Typography & Text - Ant Design Tutorial || #3
zhlédnutí 3,2KPřed 3 lety
Typography & Text - Ant Design Tutorial || #3
Buttons & Icons - Ant Design Tutorial || #2
zhlédnutí 4,1KPřed 3 lety
Buttons & Icons - Ant Design Tutorial || #2
Intro & Setup - Ant Design Tutorial || #1
zhlédnutí 7KPřed 3 lety
Intro & Setup - Ant Design Tutorial || #1
Input date and time in HTML and Javascript || (flatpickr.js)
zhlédnutí 104KPřed 3 lety
Input date and time in HTML and Javascript || (flatpickr.js)
Automatic deployment from GitHub to server via SFTP (GitHub Actions)
zhlédnutí 15KPřed 3 lety
Automatic deployment from GitHub to server via SFTP (GitHub Actions)
How to host websites for free with GitHub Pages
zhlédnutí 265Před 3 lety
How to host websites for free with GitHub Pages
4 ways to kill Linux processes - kill, killall, pkill, xkill
zhlédnutí 4,8KPřed 3 lety
4 ways to kill Linux processes - kill, killall, pkill, xkill

Komentáře

  • @ZeroTrunks
    @ZeroTrunks Před 2 dny

    I am glad I found your channel, that was awesome! Does useEffect not have the same performance issues as useState?

  • @apokalupsis116
    @apokalupsis116 Před 12 dny

    Hope Raven is OK he hasn't made a commit since December 2023

  • @tejasvmaheshwari5658
    @tejasvmaheshwari5658 Před 13 dny

    Thanks for this tutorial it was really really helpful

  • @aV5d9nlUBQ9
    @aV5d9nlUBQ9 Před měsícem

    Proved to be useful. Thanks!

  • @sinki3322
    @sinki3322 Před měsícem

    I don't even know where to start to thank you. You have just unstuck me from the problem I was trying to fix for the past weeks without receiving any help. You have just allowed me to pass my final exam I've been struggling on so much, and finish my studies. You have just allowed me to get my diploma and start looking for a job. I will never be able to thank you enough. Crazy how people accross the world can literally change your life. Thank you for explaning so well, taking the time and walking us through this. Thank you!

  • @Innesb
    @Innesb Před měsícem

    SMTP2GO is another good option for smtp server. 1,000 emails per month for free and then very reasonable pricing beyond that.

  • @billionaireempire3852
    @billionaireempire3852 Před měsícem

    Thank you brother. Exactly what I needed

  • @chriskeo392
    @chriskeo392 Před 2 měsíci

    My guy. You are meant to teach Respect 100 Looking forward to advanced flask htmx series Or fastapi htmx series

  • @adeebkhanpathan6854
    @adeebkhanpathan6854 Před 2 měsíci

    thanks a lot i got help from your tutorial

  • @martinesche6749
    @martinesche6749 Před 2 měsíci

    Simple, quick, working: only 1 out of 100 youtube tutorials are like this! Thanks!!!

  • @malcomk
    @malcomk Před 2 měsíci

    16:15 the webpage shows "404 Not found" when I go to "/posts". Any idea...? Seems like the folder's name become a part of url on his instruction but not on my codes. Is it because I am using windows computer..?

  • @ThanhNguyen-ho7yo
    @ThanhNguyen-ho7yo Před 2 měsíci

    very clear!

  • @Titan-ey2wj
    @Titan-ey2wj Před 2 měsíci

    Great video, thank you. After finishing this tutorial, everything works fine. However, I noticed that you forgot something: when clicking on the comment icon and navigating to the post's comments, if you delete the post on that page, it becomes blank because the page depends on the post ID, which has been deleted. Do you have any solutions for this issue?

  • @DanielJoshua-ck3ui
    @DanielJoshua-ck3ui Před 2 měsíci

    Is it responsive for Al screen?

  • @jhonygrillo
    @jhonygrillo Před 2 měsíci

    Bro, your explanations are really awesome, its a shame you stopped 😢

  • @chris7263
    @chris7263 Před 3 měsíci

    There are great, man, what a public service.

  • @64revolt
    @64revolt Před 3 měsíci

    To make the consol logs bigger (on brave at the least), open the dev-tools and then zoom using ctrl+ :) Also, awesome tutorial :D

  • @mi-oi7zv
    @mi-oi7zv Před 3 měsíci

    спасибо брат, помог

  • @SalomatQalb
    @SalomatQalb Před 3 měsíci

    react-supabase is not working. That's the issue with adding all kinds of dependencies to make it easy. They stop maintaining it and your updated code won't work.

  • @TheRolldone
    @TheRolldone Před 3 měsíci

    i read article about 7 top react state management. and jotai is easy to learn.

  • @thivankawaduge509
    @thivankawaduge509 Před 3 měsíci

    Thank you so much for save my time. I have been searching this for complete an assignment.

  • @devzaks8912
    @devzaks8912 Před 3 měsíci

    the whole thing is in client component? 🙄 We'll appreciate so much more if we can get a server component technique. Thta's the point of app router

  • @isagive
    @isagive Před 3 měsíci

    תודה רבה, הסבר מועיל מאוד ❤️👍

  • @parmetra
    @parmetra Před 3 měsíci

    Thanks for the review! Everything is very well explained. But I still have one question: what is the difference between Jotai and Zustand, and also in which case should one or the other be used?

  • @aman4069
    @aman4069 Před 3 měsíci

    i think you forgot to put the post validation

  • @gigxr
    @gigxr Před 3 měsíci

    whoever encounters error "Uncaught (in promise) FirebaseError: Missing or insufficient permissions." 1. go to rules in Cloud Firestore 2. in "allow read, write: false" , replace it to allow read, write: if request.auth != null;

  • @TechDesignWithMJ
    @TechDesignWithMJ Před 4 měsíci

    Can you make the demo for password reset as well

  • @viggoskitchen3155
    @viggoskitchen3155 Před 4 měsíci

    Right on mate - you're like the only React + Pocketbase tutorial out there! Much love, thanks.

  • @Raghunadh9
    @Raghunadh9 Před 4 měsíci

    Thank you sir

  • @alexandrgidrevich986
    @alexandrgidrevich986 Před 4 měsíci

    First 50 mins - very good presented and logically sound tutorial. Last 30 mins tutorial feels rushed and become hard to follow. Ganbatte Kudasai!

  • @alexandrgidrevich986
    @alexandrgidrevich986 Před 4 měsíci

    Error with DB import: File "/home/**/flasky/server.py", line 2, in <module> from .db import sample_db ImportError: attempted relative import with no known parent package

    • @alexandrgidrevich986
      @alexandrgidrevich986 Před 4 měsíci

      Solution: import sys sys.path.append("/home/**/flasky/") from db import sample_db

    • @gintokisakata9148
      @gintokisakata9148 Před 3 měsíci

      @@alexandrgidrevich986Thank You so much for this ! I ran into the same issue... your solution worked😊

    • @gintokisakata9148
      @gintokisakata9148 Před 3 měsíci

      Also for anyone using windows, point sys.path to the root folder where db is saved for example db was in folder crud-htmx-flask, so import sys sys.path.append("C:\crud-htmx-flask") from db import sample_db

  • @KodyWright-od2tb
    @KodyWright-od2tb Před 4 měsíci

    You are a game changer!

  • @ErnestoConfused
    @ErnestoConfused Před 4 měsíci

    you look like you've got impeccable taste in anime

  • @faisalshaikh7994
    @faisalshaikh7994 Před 4 měsíci

    This helped me even after 2 years of uploading. Great work, you guys are real heros

  • @mychromebook9935
    @mychromebook9935 Před 4 měsíci

    The best tutorial i've seen using flask + htmx. Thank you

  • @anarmammadhasanov7987
    @anarmammadhasanov7987 Před 4 měsíci

    amazing, thanks a lot for lessons

  • @ALex-ts1gu
    @ALex-ts1gu Před 4 měsíci

    Thank you for the videos about Pocketbase. Can you also make a video about self hosting on a static server please. And also highlight security aspects. Thank you so much.

  • @Strategic.
    @Strategic. Před 5 měsíci

    I have a problem when I navigate through different pages, the profileImageSrc state gets set to the default picture for a little bit till the actual one gets loaded, it's feeling weird how can I fix it

  • @alaqmar6534
    @alaqmar6534 Před 5 měsíci

    Simple and straight to point, Thanks 👍

  • @williamhunt5440
    @williamhunt5440 Před 5 měsíci

    Great tutorial, really appreciate it. Was able to learn how to build an online marketplace app for a cohort project, which helped me just land my first CS job at a local startup making a mobile marketplace app. Much thanks and wish you all the best!!

  • @Mullheimer
    @Mullheimer Před 5 měsíci

    Been struggling with this. You explained it so well. Thanks!

  • @koniakara
    @koniakara Před 5 měsíci

    Great explanation, really helped me take on new projects!

  • @angladephil
    @angladephil Před 5 měsíci

    A nice "toy" DBMS for learning/prototyping ... but not for production. Thx for these tutorials.

  • @babatundetaiwo5184
    @babatundetaiwo5184 Před 5 měsíci

    Fantastic video. This video helped a really big project I am working on. I appreciate it

  • @jairathore9092
    @jairathore9092 Před 5 měsíci

    Thanks a lot man, it was really helpful❤

  • @marcosissler
    @marcosissler Před 6 měsíci

    Tks James! Was a nice project. What you think about Svelte and HTMX? I was studying and in love with Svelte but now I saw a lot of people talking about HTMX. I am not sure if study HTMX now for some nice basic website solutions. I am a Golang Backend Developer. Cheers.

  • @hooho491
    @hooho491 Před 6 měsíci

    this is my first time learning firebase, you explained everything very well, thank you so much!

  • @rahulshah1408
    @rahulshah1408 Před 6 měsíci

    Your tutorial got me 95% there. The only reason for the missing 5% is time. I had to update checkout version and will have to create encryption key pair without a password as the sftp code cannot handle key and pass together. Thank you!

  • @ChiefRemoteOfficer
    @ChiefRemoteOfficer Před 6 měsíci

    Such a useful video. Thank you! But it ends so anti-climactic... :)

  • @Barnooo
    @Barnooo Před 6 měsíci

    I appreciate your knowledge friend. After watching three videos in this playlist I learned valuable things about Pocketbase SDK. However, Can you please stop going tooo fast. We're humans and some of us has some delay to process information. I wanted to learn how to implement PocketBase in the backend of my WebService mini-project but found myself in tutorial hell. So please take your time making future videos and pleeease elaborate. Thank you