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.

@natnaelghirma2617

3 жыл бұрын

God*

/* create new blog form */ .create { max-width: 400px; margin: 0 auto; text-align: center; } .create label { text-align: left; display: block; } .create h2 { font-size: 20px; color: #f1356d; margin-bottom: 30px; } .create input, .create textarea, .create select { width: 100%; padding: 6px 10px; margin: 10px 0; border: 1px solid #ddd; box-sizing: border-box; display: block; } .create button { background: #f1356d; color: #fff; border: 0; padding: 8px; border-radius: 8px; cursor: pointer; }

@GMBgTTg4d

3 жыл бұрын

thx

@astrix8812

3 жыл бұрын

thanks king

@Ramification

3 жыл бұрын

Thank you good sir!

@stanislausalvajufinto8735

3 жыл бұрын

You dropped this 👑, king

@SM-vo5gj

2 жыл бұрын

thank you

Thank you so much, having such quality content for free is mindblowing

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).

Off-topic, but can you show your desk setup?

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 !!!

@yashrdoshi

3 жыл бұрын

I'm reading your recap in every video. That's really useful !!

@jackw.3978

2 жыл бұрын

@@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...

@carmensandoval5581

2 жыл бұрын

@@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.

@nielfollero5

2 жыл бұрын

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.

even though i watched your videos before and coded with you. this coming back to them shows me more detail. thank you

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!

@juggysingh1470

3 жыл бұрын

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!!!!

@kashmirtechtv2948

2 жыл бұрын

But where to go from here after finishing this series?

I did not know I can understand everything so easy. Thank you so much Shaun!

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.

@shahiqqureshi7652

5 ай бұрын

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.

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

Short and precise , I LOVE IT. 😍😍😍😍

This got to be the simplest explanation I've encountered. Awesome video.. Thanks for sharing 👍

@NetNinja

Жыл бұрын

Thanks for watching Peter :)

Straight to the point. Thanks a lot!

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 KZread 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. 💪

@TheRahulDBZ

3 жыл бұрын

Good luck

@michaelandersen8570

3 жыл бұрын

Got the job! Gonna sign up for the Udemy course.😎

@michaelandersen8570

3 жыл бұрын

@@TheRahulDBZ Thank you. Pretty stoked about it. 🚀

@mistersir3185

3 жыл бұрын

@@michaelandersen8570 any important tips you can give to someone like me who's looking to apply for jobs?

@michaelandersen8570

3 жыл бұрын

@@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.

Extremely useful and simple explanation, thank you!

Not one to comment usually but this might just be the best explanation I've seen. Top quality content!

this is some quality stuff bro, thanks for putting it on youtube for free 🤩

Great tutorial of controlled inputs! I cannot thank you more!

@NetNinja

Жыл бұрын

Thanks Wenlong!

You have no idea how much I love your videos and how much they have helped me. Thank you for your service.

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!

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.

@TimWinfred

2 жыл бұрын

Yes! Literally was just about to say this!!!

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!

@NetNinja

7 ай бұрын

That's brilliant to know :) glad it helped!

@terrencejanairo2675

7 ай бұрын

@@NetNinja do you have router v6 in this project?

splendid narration, neat and clear, top!

awesome mentor. I am sure he is really expert in this field .

I'm proud of net ninja

@CodeRCreatives

3 жыл бұрын

yaa me too...he is amazing at his work

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?

As always many thanks for teaching all these

Extremely helpful. Thank you very much

Net Ninja, You are a Legend!!!! Best of the Best

A complex topic made simple. Very nice video!

@NetNinja

Жыл бұрын

Thanks!

awesome work - once again

This is much better than a paid tutorial..EXCELLENT JOB NET NINJA

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?

Thank you mr for saving me from headache

I really love this accent ,keeps the video interesting

@NetNinja

5 ай бұрын

Thank you! 😃 I made it myself

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

Realy helpful series!!!

@NetNinja

2 жыл бұрын

Thanks Jakub

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

great video man

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 :)

3:07 thats was the best uh uh i heard in my life

This is so Good man 😁😁😁

Very good stuff. Save my day.

@NetNinja

2 жыл бұрын

Glad to hear it! Thanks for watching Adam :)

The best vieo on this subject. I spent 45 min looking until I found you. All others are inferior.

TY Mate

I don't know why I laugh with the yohoo! 😂

Thanks ninja

Thank you so much

@NetNinja

8 ай бұрын

No problem :) hope it was helpful

Form Styles: /* create new blog form */ .create { max-width: 400px; margin: 0 auto; text-align: center; } .create label { text-align: left; display: block; } .create h2 { font-size: 20px; color: #f1356d; margin-bottom: 30px; } .create input, .create textarea, .create select { width: 100%; padding: 6px 10px; margin: 10px 0; border: 1px solid #ddd; box-sizing: border-box; display: block; } .create button { background: #f1356d; color: #fff; border: 0; padding: 8px; border-radius: 8px; cursor: pointer; }

Do we need state management system such as redux for modern reactjs apps?

You're the goat

remember when this looked foreign fells nice being able to read through so fluently humans are amazing

Please cover all scenario like check box radio button and check tree view and complex form validation and getting response ,api crud operation

3:05 Wohoo!! I love this small funny things 😍

Thanks!

@NetNinja

Жыл бұрын

Thanks for your support Jochen, it's much appreciated!

Very useful

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.

thanks brow

which plugin do you use to get the html autocomplete?

Is it necessary to set the input value to the dynamic title/author state? It doesn't appear to do anything.

Great tutorial! Thanks Ninja How can I use the public folder?

@RajvirSingh1313

3 жыл бұрын

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 kzread.info/dash/bejne/hZ-gxcGfgaXTk9Y.html&t. I hope I helped you , have a nice day

You are Great

Instead of using routing from react we can use fetching from backend ?

ty

Is it possible to set the state for all your inputs at once with the onchange function 🤔?

Can we use same id in different components , I mean if I have a in Home and in BlogDetails, is it valid?

woohoo!

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

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?

Hello there, just wanted to know when this playlist will be completed? Awesome work BTW!

@TheRahulDBZ

3 жыл бұрын

you sound like my project manager

@kushagramandal1501

3 жыл бұрын

@@TheRahulDBZ bruh😅

@prashanttanwar3261

3 жыл бұрын

@@TheRahulDBZ lol😂

3:08 i really like that woohoo sound at 2x

For some reason my button add blogs isn't in the center, its aligned with the left side of the boxes

so whenever any input field change happens whole form will be re rendered right? How to avoid that?

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

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.

@codewithfarhad8594

3 жыл бұрын

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"

@Colstonewall

3 жыл бұрын

If you look at this video (kzread.info/dash/bejne/lq55y8eQkbKwdZM.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.

"whooohouuu" :D

const [title, setTitle] = useState('') const [body, setBody] = useState('') const [author, setAuthor] = useState('mario')

wooohooo

When i start type in the input i lost focus like input rerender and can type only once? Why is that?

i like your yuuhuu in the video HAHAHA

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.

3:08 ooh wwwoh

why are there no tutorials on class components? ANYWHERE on the internet?

I was a littile bit confused, because i haven't known that select has "value" property

Quick question: if we set a state using const, how come later on we can update that value? const values cannot be updated

@kananabdlyv

2 жыл бұрын

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

@vermusl6316

2 жыл бұрын

Watch the useState video again, he already explained there

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?

@NetNinja

3 жыл бұрын

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) :)

@hoanglongpham5907

3 жыл бұрын

@@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

@prashanttanwar3261

3 жыл бұрын

@@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.

why dont you create a course for react along with nextjs in udemy

Why do we need value then if we have state that gets the value onChange?

@marcisberzins7246

2 жыл бұрын

That is because when you make UseState(initialValue) in form you see initial Value in that field.

.create { max-width: 400px; margin: 0 auto; text-align: center; } .create label { text-align: left; display: block; } .create h2 { font-size: 20px; color: #f1356d; margin-bottom: 30px; } .create input, .create textarea, .create select { width: 100%; padding: 6px 10px; margin: 10px 0; border: 1px solid #ddd; box-sizing: border-box; display: block; } .create button { background: #f1356d; color: #fff; border: 0; padding: 8px; border-radius: 8px; cursor: pointer; }

Is it possible to use "useState" one time for all inputs?

@oscaralderete8156

2 жыл бұрын

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.

long live brother

3:08 fun Wo wo

Thanks Shaun🖤. But I think those react concepts very very basic which you told about it, I don't understand what is the main difference those two tutorials. Please prepare modern Redux tutorial that cover of the all topics in the documentation

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

3:08 😄

woohoo

Today I learned, body = bodeh.

pls where is the next tutorial and does it only stop at 27?