PROPS in React explained 📧

#React #JavaScript #tutorial

00:00:00 introduction
00:00:56 props
00:06:28 multiple components
00:07:49 propType
00:10:18 defaultProps
00:11:47 conclusion

// props = read-only properties that are shared between components.
// A parent component can send data to a child component.
// key=value

// propTypes = a mechanism that ensures that the passed value
// is of the correct datatype.

// defaultProps = default values for props in case they are not
// passed from the parent component
// name: "Guest"

[BroCodez]

import Student from './Student.jsx'

function App() {
return(
<>
<Student name="Spongebob" age={30} isStudent={true}/>
<Student name="Patrick" age={42} isStudent={false}/>
<Student name="Squidward" age={50} isStudent={false}/>
<Student name="Sandy" age={27} isStudent={true}/>
<Student/>
</>
);
}
export default App

import PropTypes from 'prop-types';

function Student(props){
return(
<div className="student">
<p>Name: {props.name}</p>
<p>Age: {props.age}</p>
<p>Student: {props.isStudent ? "Yes" : "No"}</p>
</div>
);
}
Student.propTypes ={
name: PropTypes.string,
age: PropTypes.number,
isStudent: PropTypes.bool,
}
Student.defaultProps = {
name: "Guest",
age: 0,
isStudent: false,
};
export default Student

.student{
font-family: Arial, sans-serif;
font-size: 2em;
padding: 10px;
border: 1px solid hsla(0, 0%, 50%, 0.8);
}
.student p{
margin: 0;
}

[andredubbs]

I really cannot express how much of a positive impact you’re having on the world. Your videos helped me immensely, the education is poor in my country and i can make it up alot with your videos

[codewithdahir]

You are so good man, keep going.
My whole front end development belongs to you.
Thanks a lot.

[ursusrursus]

Thanks Bro! You are one of those about whom philosophers have said: "The obvious is something that no one sees until someone expresses it in the simplest way."

[malikgulraiz]

We want more React tutorials from bro
👇

[tonytodd]

Thanks Bro! You are really an awesome teacher, and your way of dividing the topic into small lessons are great! That is very much more practical for people to learn than watching a dozens of hours video!

[AC_Music]

blessed to have you as a mentor. A thank you is not enough! Much love ❤

[ff]

Excellent overview of PROPS!!! Very clear and concise! Please keep going.

[abdulkadiraminu]

😭dude idk how u knew I was just learning react but thank you for the videos.

[frankmccann]

Hey, appreciate you popping in with a great video. Saved it.

[aroshm]

Broo!!! I learned crazy loads of stuff in this 12 mins than I try to learn past 24 hours. Damn good content bro!! Thank you!!

[sarahwbas]

You are an amazing teacher!! No one should teach coding after you!! 👏🏼👏🏼 Thank you for existing!

[hunin]

Thanks!
I just finished watching and I learned a lot from this ❤

[wilmermedina]

Bro, just 12 minutes was enough to perfectly understand this topic. I've watched several videos about it, but this one is just perfect. Thanks a lot!

[sulaimanmisri]

I am relatively new to React.js and your explanation make sense and easy to follow. Kudos Bro!

[magomihaly]

Love your vids, focus on essence, easy to understand. Thank you Bro!

[vishalboudhh]

I love your videos ❤
Very simple easy to understand
And not to much time taking

[mohamedreda]

This series is awe-inspiring thank you a lot!❤❤❤❤❤❤

[romyt]

The first video I see that explains clearly that props are an OBJECT and defines them with a punctual sentence and not with a vague terms or with comparisons like "parameter of a function" or "pseudo HTML attribute".
Thanks, now I understand them better, I'll follow the serie.

[cubingwithshine]

Thank you so much for this awesome tutorial