React useRef() hook introduction 🗳️
Вставка
- Опубліковано 26 чер 2024
- #reactjs #tutorial #course
00:00:00 introduction
00:01:01 setup
00:03:02 useRef()
00:05:11 html ref attribute
00:08:06 multiple useRef()
00:10:10 useState() vs useRef()
00:10:28 conclusion
// useState() = Re-renders the component when the state value changes
// useRef() = Does not cause re-renders when its value changes.
// 1. Accessing/Interacting with DOM elements
// 2. Handling Focus, Animations, and Transitions
// 3. Managing Timers and Intervals
// useState() = Re-renders the component when the state value changes
// useRef() = "use Reference" Does not cause re-renders when its value changes.
// 1. Accessing/Interacting with DOM elements
// 2. Handling Focus, Animations, and Transitions
// 3. Managing Timers and Intervals
import React, {useState, useEffect, useRef} from 'react';
function MyComponent(){
const inputRef1 = useRef(null);
const inputRef2 = useRef(null);
const inputRef3 = useRef(null);
useEffect(() => {
console.log("COMPONENT RENDERED");
});
function handleClick1(){
inputRef1.current.focus();
inputRef1.current.style.backgroundColor = "yellow";
inputRef2.current.style.backgroundColor = "";
inputRef3.current.style.backgroundColor = "";
}
function handleClick2(){
inputRef2.current.focus();
inputRef1.current.style.backgroundColor = "";
inputRef2.current.style.backgroundColor = "yellow";
inputRef3.current.style.backgroundColor = "";
}
function handleClick3(){
inputRef3.current.focus();
inputRef1.current.style.backgroundColor = "";
inputRef2.current.style.backgroundColor = "";
inputRef3.current.style.backgroundColor = "yellow";
}
return (
Click me 1!
Click me 2!
Click me 3!
);
}
export default MyComponent;
Plz make redux and context API videos
Hi BroCode! I'm reaching out because I'd like to contact you further. Could you share your email or Discord or something similar? I have some questions, ideas, and feedback I'd like to discuss. Looking forward to hearing from you!
Bro can you do Kali Linux ?
That's hands on the best explanation of useRef( ). Thanks again Bro
always happy with tutorials from Bro Code. much respect!
i have seen multiple classes and yours is clear and .Thank You
Thank you very much From Uzbekistan Fergana 👍
just 178 likes???? are you kidding me?? This is the best tutorial video on useRef hook🥺
No doubt all the videos from this channel are great but this one is just too clear and simple!
feeling bad for the people who didn't/ couldn't find this video
Really very good content which we needed... useful in our work..thanks buddy....❤
Love it
Need More videos on react hooks as your videos are best.
love it
from vn
thank you
Hi Again
Love from India
Make 2024 java course love from Nepal 💓❤️
Yes plz make it❤
There is a Full Java course on his channel
They don’t teach you the word “please” when you learn English in Nepal? Don’t be rude.
Please make Reactjs projects as well
Bro,plz make a complete vid on React Js n Node Js,sort of full stack application series.
Plzzzz🙏🙏🙏
Hello Bro, I love your tutorials but can you make a updated Java Tutorial? Love from India
what does it mean the component re-render and what's the purpose of it ???
Why your videos doesn't show in my Subscription Section???
i want to use code which there is an text that can be renamed that is on the left down corner of the screen and there is a bigger one in the center of the screen , when the user renames the text to the video urlit will start to make the user choose an video file from the device and when uploaded in the video it will globally display the video there will be a mechanic for the place of the videos uploading , while a video is currently playing being first to be displayed when another user uploads a video the video will be in 1st place before being displayed and if the currently playing video ends the next one uploaded by the other user will be displayed
i need you to fix this code also
UA-cam Video Player
body {
margin: 0;
overflow: hidden;
}
#videoUrlInput {
position: fixed;
bottom: 40px;
left: 40px;
width: 300px;
height: 30px;
padding: 5px;
font-size: 16px;
}
#videoContainer {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 80%;
background-color: black;
overflow: hidden;
}
video {
width: 100%;
height: 100%;
}
let isPlaying = false;
function setVideoSource() {
const videoUrlInput = document.getElementById('videoUrlInput');
const videoPlayer = document.getElementById('videoPlayer');
// Set the video source directly
videoPlayer.src = videoUrlInput.value;
// Play the video if not already playing
if (!isPlaying) {
videoPlayer.play();
isPlaying = true;
}
}
at 1:22 can any want say me that what did he use to tab both the open tag and close tag of button
chief pleace make golang course or nodejs...
Day 2 of asking for an SFML full course (After the react course)
Dear Bro, much support on your videos. I'm learning web development from your channel, if you would do REACT COMPLETE TUTORIAL that would be really helpful. Thanks
Bro can you provide a RUST course????
Code bro... How are u man? Angular start padara
Do u tutor