ReactJS Tutorial - 28 - Refs

📱 Follow Codevolution

Refs make it possible to access DOM nodes directly within React.

[iUmerFarooq]

You're the best teacher.
Thank you for your great content and waiting for *NodeJs* Course.

[lollilolli]

I will recommend your course to whoever wants to learn React!"! A lot of thank you!

[pashish]

Very articulate, I have never seen such profound elaboration . Thanks a lot for such valuable content .

[vigneshgvs]

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

[anshulsinghla]

Omg, I can literally pay any amount for such quality content. I hope you could do a series where you build a complete project using ReactJS + NodeJs.

[allansarion]

I like your videos because you provide summary at the end.

[Hermioneswand]

You are an amazing teacher, thank you so much!! 🙏

[tuatkiep]

You're the best teacher.
Thank you for your great content

[marcofriso]

best explanation of React Ref that I found

[prisinha]

2:05 second step is to attach ref to input element in render method

[rajeevbhosle]

you are blessing to the all programmer

[prisinha]

0:05 Refs help to access DOM nodes directly

[prisinha]

2:32 third step is to call focus method on this input element

[vigneshtamizh]

functionality is working fine with adding the callback function outside of there any reason to add the callback function inside of constructor ?

[lightninginmyhands]

I looked up Vishwas and went into a Bollywood rabbit hole. Cheers

[MaheshKumar-qxdy]

Great job, please keep doing
Thank you very much 😊

[minthep]

Using React.createRef

Create ref: Use React.createRef(), assign to variable in component.
Attach to input: Use ref property on input.
Call focus(): Access input via current of ref, call focus().
Using Callback Ref

Create property: Create property, initialize to null.
Assign callback: In input's ref, pass callback function.
Call focus(): In callback, save input to property, call focus() on it.

[beneasmare]

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

[jreema]

We can use autoFocus property on the element right? Why do we need Refs?

[ינוןאלבז-כז]

Wow its amazing explanation and very valuable content!!! Thanks a lot