The fact that this react course is completely free is insane, Your way of teaching is really clear and easy to understand. Keep it up my man you are god given.
I would hit the like button every time i watch this if I could. Great way of explaining React my dude. It's been hard for me to understand React, but in the last several months, I've been determined to get really good. I've watched this video like 5 times already easily. And every time I do, I can confirm that it has sunk in way more every time.
@NetNinja Жыл бұрын
That's fantastic to hear Susan, sometimes it takes a while to cement in, but once it does, hopefully it sticks :) I find that application and giving yourself little challenges help aid this even more so! (learn by doing).
@maskman48213 жыл бұрын
recap this episode talks about two-way data binding ( a very important concept in reactjs, usually used in form element ) 1. assign a dynamic value to 'value' attribute of input/textarea/select element. example const [name, setName] = useState('mario') 2. listen 'change' event with a handler (anonomous function) to set value, for example setValue(e.target.name)}> thats it !!!
@yashrdoshi3 жыл бұрын
I'm reading your recap in every video. That's really useful !!
@jackw.39782 жыл бұрын
@@yashrdoshi I still don't understand why exactly the value of the input needs to be set to the the dynamic value. And why it is letting him change the text in the input after he implements the onChange event. Would like to understand what happens in the background...
@carmensandoval55812 жыл бұрын
@@jackw.3978 Great question Jack! The onChange attribute fires everytime the value of the input is changed. And since the onChange event is grabbing a reference of the value attribute's value to set a state variable, we must set the value attribute to a 'dynamic value'. I hope this helps.
@nielfollero52 жыл бұрын
What I don't understand is why do we need to assign the value of an input since we don't use this in anything. When we need the value of that input, we use the state to process it(maybe pass it in the backend or something), not get the actual value reference from the actual element.
@emmanuelamodu23903 жыл бұрын
Thank you so much, having such quality content for free is mindblowing
@michaelandersen85703 жыл бұрын
Honestly you just might get me at job next week. I've got a test coming up this Thursday and this series is just *chef's kiss*. Thank you SO much. I'll be sure to send some money in your direction if it goes well. There is so much content on KZfaq but none that fits my current level better than yours. It is wonderful to know that your content is up-to-date, uses best practices, and is of great production value. The Github repo is also super nice to have. 💪
@TheRahulDBZ3 жыл бұрын
Good luck
@michaelandersen85703 жыл бұрын
Got the job! Gonna sign up for the Udemy course.😎
@michaelandersen85703 жыл бұрын
@@TheRahulDBZ Thank you. Pretty stoked about it. 🚀
@mistersir31853 жыл бұрын
@@michaelandersen8570 any important tips you can give to someone like me who's looking to apply for jobs?
@michaelandersen85703 жыл бұрын
@@mistersir3185 I can only speak for myself, and to be honest a lot of it has to do with pure luck. Best tip I can give is to code as much as you can and put it on Github. Make your own stuff and take inspiration from tutorials in the beginning - but avoid pure copying. When you have built a few small projects you'll have confidence in yourself and it will reflect in the way you write about yourself in your resume. I think recruiters pick up on this. And it will also help tremendously at an interview.
@juggysingh14703 жыл бұрын
If you want to use default text in your input, then have it clear on click, here is an example of how to do it; // input state const [title, setTitle] = useState('Default Text'); // add initial title state value here setTitle(e.target.value)} onClick={(e) => setTitle('')} // clear input on click /> Also, thanks for your great work Net Ninja, I have subbed now, as that's the least I can do for your great tutorials.
@shahiqqureshi76526 ай бұрын
Good suggestion, personally I think it might be better to use the placeholder attribute, because if someone goes back to edit that field it will reset.
@wanyingli2463 жыл бұрын
I watched this series yesterday and I catch up with it today! Shaun is definitely a life saver! I bought some React course in Udemy and I just can't stand the instructor's speaking tone, and I am easily distracted by hearing this, but I love shaun's teaching style!
@juggysingh14703 жыл бұрын
I have done the same, following courses from Udemy, but never fully grasping REACT as I also had issues with the tutors way of explaining too, until that is I found Net Ninja, he is a Legend!!!!
@kashmirtechtv29483 жыл бұрын
But where to go from here after finishing this series?
@gradientO3 жыл бұрын
Off-topic, but can you show your desk setup?
@peterluo1776 Жыл бұрын
This got to be the simplest explanation I've encountered. Awesome video.. Thanks for sharing 👍
@NetNinja Жыл бұрын
Thanks for watching Peter :)
@simonkalu3 жыл бұрын
I'm proud of net ninja
@CodeRCreatives3 жыл бұрын
yaa me too...he is amazing at his work
@melssf7852 Жыл бұрын
have I told you lately that I love you? :D You just took something that was confusing me and simplified it so well. Your free content led me to buy one of your udemy courses and I plan to buy a few more because you explain things in a way that just clicks for me. Thank you Shaun, truly...
@NetNinja Жыл бұрын
That is awesome to hear Mels :) your support is much appreciated!
@jagaroTV7 ай бұрын
This is much better than a paid tutorial..EXCELLENT JOB NET NINJA
@heroinedecheshire70658 ай бұрын
You're amazing! I always thought forms are a pain in React but you cleared them up for me! These videos are amazing and this is what passion looks like!
@NetNinja8 ай бұрын
That's brilliant to know :) glad it helped!
@terrencejanairo26758 ай бұрын
@@NetNinja do you have router v6 in this project?
@wenlongzhang5262 Жыл бұрын
Great tutorial of controlled inputs! I cannot thank you more!
@NetNinja Жыл бұрын
Thanks Wenlong!
@hayoudoing Жыл бұрын
Straight to the point. Thanks a lot!
@ohitsmekirst3 жыл бұрын
Not one to comment usually but this might just be the best explanation I've seen. Top quality content!
@tarekghosn36482 жыл бұрын
even though i watched your videos before and coded with you. this coming back to them shows me more detail. thank you
@averageromanian3940 Жыл бұрын
A complex topic made simple. Very nice video!
@NetNinja Жыл бұрын
Thanks!
@01dicktracy Жыл бұрын
I did not know I can understand everything so easy. Thank you so much Shaun!
@jAMES-xy6wh2 жыл бұрын
I came here to learn about React Router, and I found a goldmine of information. What a fabulous course!! And it is Free? How do I compensate you for your labor?
@ruin96 ай бұрын
I really love this accent ,keeps the video interesting
@NetNinja6 ай бұрын
Thank you! 😃 I made it myself
@adriennegrace24653 жыл бұрын
Thank you - loving this series so far! One comment - for accessibility, you should keep the htmlFor attribute in the label and use the input id attribute, so they are connected.
@TimWinfred3 жыл бұрын
Yes! Literally was just about to say this!!!
@digvijayyamagekar4300 Жыл бұрын
this is some quality stuff bro, thanks for putting it on youtube for free 🤩
awesome mentor. I am sure he is really expert in this field .
@learningit25722 жыл бұрын
Net Ninja, You are a Legend!!!! Best of the Best
@LGgos2 жыл бұрын
thank you it helped me quickly understand how it works after I had an implementation question in an interview that didn't go so well
@arrozfritoo3 жыл бұрын
3:07 thats was the best uh uh i heard in my life
@TripeDemo2 жыл бұрын
Extremely useful and simple explanation, thank you!
@alexmwansa64142 жыл бұрын
You have no idea how much I love your videos and how much they have helped me. Thank you for your service.
@Human_Evolution-3 жыл бұрын
The best vieo on this subject. I spent 45 min looking until I found you. All others are inferior.
@nylivehc9008 Жыл бұрын
I don't know why I laugh with the yohoo! 😂
@rogeclash2631 Жыл бұрын
As always many thanks for teaching all these
@giroda2 жыл бұрын
splendid narration, neat and clear, top!
@chhumchanleak76422 жыл бұрын
Thank you mr for saving me from headache
@BlackDev2 жыл бұрын
remember when this looked foreign fells nice being able to read through so fluently humans are amazing
@meliVinelli3332 жыл бұрын
Extremely helpful. Thank you very much
@jakubbarabasz35602 жыл бұрын
Realy helpful series!!!
@NetNinja2 жыл бұрын
Thanks Jakub
@0x0abb2 жыл бұрын
awesome work - once again
@umuthankuzur31843 жыл бұрын
Hi ninja. Thx for all the playlist again. But i have a question in particular this session. U wrote repetitive code in this file to handle state but u could eliminate code via using a form state object. Why didnt u that? Is because of u dont want trigger updating whole object on all types? Is this for upgrading performance?
@adamksiazkiewicz36432 жыл бұрын
Very good stuff. Save my day.
@NetNinja2 жыл бұрын
Glad to hear it! Thanks for watching Adam :)
@rafaelpereiradias2567Ай бұрын
thanks! this video just helped me !
@NetNinjaАй бұрын
Awesome! thanks for watching Rafael :)
@jamshoot6475 Жыл бұрын
3:08 i really like that woohoo sound at 2x
@GiancarloCarccamo2 жыл бұрын
great video man
@njabulothwala51522 жыл бұрын
This is so Good man 😁😁😁
@kushagramandal15013 жыл бұрын
Hello there, just wanted to know when this playlist will be completed? Awesome work BTW!
@TheRahulDBZ3 жыл бұрын
you sound like my project manager
@kushagramandal15013 жыл бұрын
@@TheRahulDBZ bruh😅
@prashanttanwar32613 жыл бұрын
@@TheRahulDBZ lol😂
@mohityadav212 жыл бұрын
3:05 Wohoo!! I love this small funny things 😍
@pauloferreira40402 жыл бұрын
Maybe a dumb question, but why do you need the code on line 14 (value = {title})? The person typing inside the text field is already changing its value right? Correct me if I am wrong, but I believe that this code would be useful in situations when the {title} is changed (using the setTitle, of course) by some external event (not necessary for this specific blog page example of yours), e.g., a case where we could allow the user to come back to an unfinished blog entry and the title input field would then be populated with the contents of an earlier-entered {title} variable. Is that the right way of seeing this? thanks
It's really awesome having this tutorial for free. Thank you very much. However, I'd like to know if it's possible to use json server for authentication, or if you have any tutorial on user form validation and authentication with json. Thank you
is it wrong to just trigger a onclick when submit button is clicked and just fetch value of all fields. This way we can escape all that react js extra redundant code.
@ahmedpatel408 Жыл бұрын
TY Mate
@Gamerfan20003 жыл бұрын
Hello Shaun, Can you please tell me, what extension you used for the javascript syntax theme? For example yellow for the variable/method declarations and purple for the return method, etc? Thank you in advance, PS. Your tutorials are the best on the internet. Cheers :)
@marek199222097 ай бұрын
Instead of using routing from react we can use fetching from backend ?
@elyeskabous23439 ай бұрын
Thank you so much
@NetNinja9 ай бұрын
No problem :) hope it was helpful
@Invitamu Жыл бұрын
i like your yuuhuu in the video HAHAHA
@Atrainn2344 ай бұрын
Is it possible to set the state for all your inputs at once with the onchange function 🤔?
@belafekete31253 жыл бұрын
Great tutorial! Thanks Ninja How can I use the public folder?
@RajvirSingh13133 жыл бұрын
It is just laying around there but it is handy when you have images and other static stuff that will be okay to be open to see by the public. src and other folders are kinda private or you could say the stuff that only you could see means the source code and one more thing I want to tell you that you should learn next.js too as it would be more good and robust combination with react. And you can learn more about next.js in this video kzfaq.info/get/bejne/idGclsKXtqjRk6c.html&t. I hope I helped you , have a nice day
@emmuoriginals52963 жыл бұрын
Thanks ninja
@timtech93612 жыл бұрын
This is great and all. But what if you have a button that duplicates your Create component. Now you have two input Create components. Your state auto saves the input permanently from the first Create component. How do you reset the state to initial so we can have two Create components producing two DIFFERENT values on render?
@ibrahimkaarich2192 Жыл бұрын
Hey M y prof i wish you're good and having a nice day please i have a question is this the full Tut of REACT i mean is will be more videos about REACT in this is playList
@juliandraudins2662 жыл бұрын
Thanks!
@NetNinja2 жыл бұрын
Thanks for the support Julian! :)
@kashmirtechtv29483 жыл бұрын
Very useful
@westernpigeon2 жыл бұрын
why are there no tutorials on class components? ANYWHERE on the internet?
@dileepbannikatti79003 жыл бұрын
Please cover all scenario like check box radio button and check tree view and complex form validation and getting response ,api crud operation
@nihaljain2463 жыл бұрын
If the state variable is const, how can it be updated? I tried looking at the React docs for the useState hook but they didn't comment on this. I am just starting out with JS & React, so not sure if I was looking at the right places for the answer. It would be nice to know your comments on this, Shaun.
@codewithfarhad85943 жыл бұрын
state is not variable, we are destructing an array when we say const [x, y] = useState(""). and this is the regular behavior of const. const is storing reference to the array which can not be changed/reassigned. but we are not changing/reassigning the array here. We are just changing one of the values/variables stored in the said array, in this case, the value of x. Hope this helps. also if you want to study further just search on youtube for something like "difference between const, var, and let in javascript"
@Colstonewall3 жыл бұрын
If you look at this video (kzfaq.info/get/bejne/muB1nMiIxrWudWQ.html) at about 4:14 it explains this fairly well. As Ali stated in his comment, this is an Array, and an Array (with Const) can be updated. The video doesn't talk about React, but about Const and when/if it can be updated.
@tomasburian65502 жыл бұрын
This is a good tutorial. But I would definitely need to know how to use buttons to set a boolean variable from false to true and vice versa.
@echo991 Жыл бұрын
Is it necessary to set the input value to the dynamic title/author state? It doesn't appear to do anything.
@nizarkadri31092 жыл бұрын
Can we use same id in different components , I mean if I have a in Home and in BlogDetails, is it valid?
@eltoneycomerad87583 жыл бұрын
You are Great
@mohamedchine-ky6yk3 ай бұрын
hey great video , btw is it bad if we get the value of the inputs directly with getelementbyid and we delete all the usestates like for example instead of this : [x,setx]=usestate("") {setx(e.target.value)}} /> we do this : x=document.getelementbyid(x); because tbh i dunno what's the use of the usestates with the form
@MohitRakhade3 жыл бұрын
3:08 ooh wwwoh
@Mahmudulhasan-ts5hm3 жыл бұрын
thanks brow
@shadebinder3599 Жыл бұрын
For some reason my button add blogs isn't in the center, its aligned with the left side of the boxes
@chanandlerbong61763 жыл бұрын
so whenever any input field change happens whole form will be re rendered right? How to avoid that?
@umarislam33153 жыл бұрын
Do we need state management system such as redux for modern reactjs apps?
@user-yz6hr5wd9e9 ай бұрын
When i start type in the input i lost focus like input rerender and can type only once? Why is that?
@kingsleymgbachi5662 Жыл бұрын
which plugin do you use to get the html autocomplete?
@Eslam-ig2gf Жыл бұрын
@TheForestofNoobs5 ай бұрын
"whooohouuu" :D
@Sukaichae11 ай бұрын
woohoo!
@ridl273 жыл бұрын
ty
@lonedruid3360 Жыл бұрын
long live brother
@Shou063 жыл бұрын
why dont you create a course for react along with nextjs in udemy
@nikitalukashuk29783 жыл бұрын
I was a littile bit confused, because i haven't known that select has "value" property
@sinnie.62.3 ай бұрын
It seems i am the only one who is not able to fetch data when clicking on the blog I even copy pasted from repo cause i was not able to find my mistake can some one help
@yman_kh6 ай бұрын
I do not get what is the point of using value={title} in the input form!!!
@GabrielMartinez-ez9ue3 жыл бұрын
Quick question: if we set a state using const, how come later on we can update that value? const values cannot be updated
@kananabdlyv3 жыл бұрын
We create state using const but the state is not a data type so it doesn't act like a simple value. Process is done by state not const directly
@vermusl63162 жыл бұрын
Watch the useState video again, he already explained there
@hoanglongpham59073 жыл бұрын
I have an idiot question but i need to understand? We use Hook to replace props and State in Class Component right? please explain for me, because i don't see Shaun talk about props and state?
@NetNinja3 жыл бұрын
Hooks are another option that can be used to manage state as well as for other things. You can use the useState hook in a functional component for that component to have state, instead of relying on a class-based component for state. Props are not replaced at all by hooks, they are still very relevant and needed to pass data from one component into another. I covered props earlier in the course (lesson 11, 12, 13) :)
@hoanglongpham59073 жыл бұрын
@@NetNinja it means, we don't need create state when using hook like create state in class component, right ? so anyway, thank you a lots for replying me
@prashanttanwar32613 жыл бұрын
@@hoanglongpham5907 Hooks are used with functional components because functional components dont have state like class components do BUT by using hooks we can add state to our functional components.
@user-xb7xp5kj9n Жыл бұрын
wooohooo
@Human_Evolution-3 жыл бұрын
Today I learned, body = bodeh.
@Hustada2 жыл бұрын
Is it possible to use "useState" one time for all inputs?
@oscaralderete81562 жыл бұрын
Actually yes. You need to define an object variable for the new BLOG content, something like: const [blog, setBlog] = setState({ title: '', body: '', author: 'mario' }) then your inputs + textarea something like (take care that every element has a NAME attribute because this is how you can identify them later): mario yoshi now, you can set all of your elements with just one function, handleInput: const handleInput = (e) => { setBlog({ ...blog, [e.target.name]: e.target.value }) } a) You need to be familiarized with the JS concept of destructuring, so "...blog" means we're getting all properties of "blog" (title, body, author) in a new element, not "blog" per se because it's immutable. b) [e.target.name] is basically: title or author or body. You need to understand that (e) is the event on the form elements. "e.target" is every element per se: the input, the select and the textarea. Then, "e.target.name" is the name of the element, so it's respectively: title, author and body. c) e.target.value: is the current value of the input, the select and the textarea. To finalize, when you need to post, you don't have to declare a new variable as in the video, you just post "blog": fetch(url, { method: 'POST', headers: 'Content-Type: application/json', body: JSON.stringify(blog) }) React needs you're familiar with some kind of JS concepts like deconstructuring; in the same way you will use .map() a lot to mapping arrays to construct DOM elements. At the end it's just practice, practice and more practice.
@yashrdoshi3 жыл бұрын
Woohoo !!! 3:08
@karthifairhawn98253 жыл бұрын
3:08 fun Wo wo
@learnwithpikes3 жыл бұрын
great man always like your content. make a playlist on php latest one