ReactJS Tutorial – 28 – Refs
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2023/12/1703646895_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: ReactJS Tutorial – 28 – Refs
In this video let’s learn about the concept of rafts in react basically let’s make it possible to access Dom nodes directly within react for our understanding we will take a look at one of the more common use cases which is focusing a text input for example
Suppose we have a login form as soon as the page is loaded let’s say by default we want the user name input field to be focused let’s see how to achieve that with refs I’m going to start off by creating a new file called refs demo dot Jas
Within the file I am going to use the react stupid RCE to create a class component within the JSX I am going to add an input element I will remove the named export and then import the component in AB component now if you save the files and take a
Look at the browser you should be able to see an input field what we want to achieve is as soon as the page loads we want this input field to be focused using revs we can do this in three simple steps the first step is to create a ref we do
That using react dot create ref method so in the refs demo component I’m going to add a constructor and within the constructor we create a new property this dot input graph and to this property we assign react dot create ref it is common to create refs in the
Constructor so that they can be referenced throughout the component the second step is to attach this ref to our input element in the render method and to attach a ref we make use of the reserved ref attribute so on the input element ref is equal to within curly
Braces the ref we have created which is this dot input ref we now have a reference to the input element the third and final step is to call the focus method on this input element but first let us find out what exactly does the property this dot input ref hold after a
Reference is created so I am going to add the component did mount lifecycle hook and within the hook I will simply log to the console this dot input graph if we now go back to the browser open the console you can see that we have an object
Logged in the console if I expand it you can see a property called current of type input and this current property points to the actual Dom node so to focus on the input element in component dip mount we simply call the focus method on the current property so back
In component edmond this dot input ref dot current dot focus if you now save the file and take a look at the browser I click on refresh and you can see that on page load the input element has the focus if the field was part of a login
Form the focus would be on the user name field and the user can start typing in their name straightaway a second possible use case for using reps would be to fetch the input value so back in vs code right after the input element I’m going to create a button
With the text click and a click event handler on click it’s going to be equal to this dot clickhandler now let’s define the handler after component amount click handler which is going to be equal to an arrow function and we will simply alert this dot in Petra dot current dot value basically we
Are accessing the value property of the input Dom node which is available as the current property if you now go back to the browser enter the text as Vishwas and click on the button you should be able to see vishwas in the other dialog and this is one way to create an access
Refs that is using the create ref method react also supports a second way to set refs which is called as callback refs now this second approach is a slightly older approach to creating graphs but I still want to go through it in case you come across the usage of this approach
In a project at work or when reading some articles or blog posts now to understand the callback refs approach let’s take a look at the same example of focusing an input element this approach has four simple steps the first step is to create the ref in the first approach
We used the create rough method in this approach we create a property and assign a value of null this dot CBF for callback ref is going to be equal to null in the second step though we create a method that will assign a Dom element to the ref we have
Just created in step 1 now I’m going to call this method as set callback ref so this dot set CB ref and it is going to accept an element a Dom element as its parameter and assign it to the callback ref so this dot callback ref is equal to
Element the third step is to attach this ref to the input element I am going to duplicate the input we already have and change the ref attribute to this dot set callback ruff if you remember this is the method that sets our ref the input element is implicitly passed as a
Parameter which is assigned to the callback breath property now for the fourth and final step in component did mount I will comment out the old code and replace it with code for the new call back graph what you have to know about callback graphs is that react will call the ref
Callback with the Dom element when the component mounts and call it with null when it unmount that is the reason it is really important to check if a value exists on the reference property and that it is not null so in component did mount if this dot callback ref so we are
Checking if it is not null only then you are going to access this dot callback Rev and then call the focus method now unlike the previous approach the Dom node is directly accessed using the ref property we don’t need current if you now save the file and take a look at the
Browser refresh and you can see that the second input has the focus on page load so using callback reps we have focused the input element all right let me quickly summarize the two approaches with create Rev approach you create a reference using react dot create graph with callback ref approach you first
Create a property and then create a method that assigns the property with a Dom element passed as a parameter in create ref approach we attach the reference to an element using the ref prop and assigning the property in callback of approach we attach the ref to an element using the method that in
Turn assigns the element to the property finally in create ref approach the element can be accessed using this dot reference variable dot current and in the callback approach it is directly accessed using this dot reference variable alright that is pretty much the basics of using refs in react thank you
Guys for watching feel free to subscribe and I’ll see you guys in the next video
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Hi! Incredible content, I've learned a lot so far! And have been using React for a while. Love the content.
What other uses cases has the React.createRef() method?
Regards
completed video 28. Thank you 🙂
You are an amazing teacher, thank you so much!!
this. bla bla bla but i keep rewinding the vid of what the difference of the two but still cant under stand haha dang
is there function-based component version of this example ?
You're the best teacher.
Thank you for your great content
Hi, I have been using direct DOM manipulation(using document.getElement…). Can someone please point out the pros and cons of this versus using refs to manipulate DOM?
Really very useful.
Thank you Sir..
Very articulate , I have never seen such profound elaboration . Thanks a lot for such valuable content .
This looks WRONG to me, where are we creating ref for this.cbRef?
Like we did for this.inputRef = React.createRef?
Thankyou for such a great playlist 💝❤
Thanks!
first give concept life cycle methods i have no information about life cycle how i can understand
the tutorials are very interesting and the way of expiration looks like what the instructor is amazing, thank you a lot sir. please send the document that helps me as I am a beginner
thanks for good video
Refs To Input element:
Ref – to make autofocus
Steps:
1. Create ref – using React.creatRef() and assign it class variable – reference variable
2. attach to input element using “ref” attribute
What above step does: makes the input element = ‘current’ property, in the class variable.
3. call focus() method on input element. – using the current property
Types/ways:
1. React.createRef – uses “current” property – above
2. callback Ref – without “current” – below
callback Ref:
Steps:
1. create a property with null
2. on function click, call setter of that property and assign the ‘element’
3. call focus method – directly from reference variable
Is ref used for input tags only
5:15 callback refs
4:00 how to fetch input value using ref
2:32 third step is to call focus method on this input element
2:05 second step is to attach ref to input element in render method