Learn React Click Events 👆

00:00:00 intro
00:00:15 Button component
00:01:17 onClick attribute
00:02:18 onClick with parameters
00:03:49 onClick + conditions
00:05:50 events
00:08:02 onDoubleClick
00:08:28 ProfilePicture component
00:11:06 Hide an image on click
00:11:58 conclusion

[@BroCodez]

function Button(){
const handleClick = (e) => e.target.textContent = "OUCH! 🤕";
return( handleClick(e)}>Click me 😀);
}
export default Button
function ProfilePicture(){
const imageUrl = './src/assets/profile.jpg';
const handleClick = (e) => e.target.style.display = "none";
return( handleClick(e)} src={imageUrl}>);
}
export default ProfilePicture
import Button from './Button.jsx'
import ProfilePicture from './ProfilePicture.jsx'
function App() {
return(


);
}
export default App

[@mrcoder96]

Do react native videos as well

[@mohammadbakeer4247]

I am learning react this month and ur videos make it very easy to understand. I am currently trying to become a pro at use state

[@nemesisxl6736]

THANK YOU SO MUCH FOR THE REACT CONTENT! 😊

[@KshitizMainaly]

Hey Bro Code love your videos, brother! 🙌 Hoping to see more awesome content on React. Keep up the great work! 👍

[@GiftMthimunye]

Best teacher on the planet. since I started coding no one teaches me better fr

[@tonytodd7011]

Thank you Bro, this lesson is great! Could you please continue making React.js lessons?

[@ShashankJ04]

Ty for your effort and time. More react content and maybe with ts or helping how to migrate to ts would be beneficial.

[@kyawmying224]

Very effective lesson

[@KaungIsHere]

Thanks,mate❤

[@IAmIshanSaxena]

Bro stop clicking me. 🤣
Sounds exciting

[@kl-nj4qo]

Thank bro .

[@shahabz24]

thanks you so much

[@hunin27]

Thanks ❤

[@kathikr9360]

thank You

[@carlosnucette6927]

Nice tutorial. Just a note {handleClick} === {(e) => handleClick(e)} there is no need to wrap the callback in this case.

[@Taptreasure]

Hi my bro, could you please upload more videos on react I love your way of explaining and I have exam ln it soon

[@shivanshuhere]

Noice ❤

[@muhamadrijalfauzi3298]

Hellou brou🙌 i am stevan from indonesia, i am sorry for stoped stream Earlier 🙏🏻

[@Taky_Sensei]

Finally dude

[@andromilk2634]

Is there a reason why you decided to start your file path to your image with "src" instead of just going directly to the folder ./assets/profile.jpg ?

[@Dror101]

because it is straight forward. Even if you put ProfilePIcture.jsx file somewhere else, you won't have to change the path.
Also, the path might be '/src/assests/profile.jpg' with the dot (.) at the beginning.
Sidenotes: If you are moving files within VS Code, it does automatically change the path for you though.

[@jonathanborics4793]

how to add emoji in react?

[@user-mk2md9pu5m]

Django course please

[@rebornlegend1456]

Bro can u plz make a playlist for linux shell script

[@user-cm5ol4ru8l]

I cannot load background image in css in vs code .it is showing error help me

[@Evil_E_ye]

Put it in the public directory and access it as "/image-name"

[@fatkneegar]

what error could you elaborate?

[@benhur221]

What's the emoji extension?

[@hunin27]

windows key + .

[@BroCodez]

Win + ;

[@adamczarny6482]

perfect after gym while eating motherfucking eggs