PROPS in React explained 📧

#React #JavaScript #tutorial
00:00:00 introduction
00:00:56 props
00:04:49 index.css
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.
// age: PropTypes.number
// 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( ); } export default App import PropTypes from 'prop-types'; function Student(props){ return( Name: {props.name} Age: {props.age} Student: {props.isStudent ? "Yes" : "No"} ); } 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; }

[@thecoder1694]

No word you man priceless help!

[@arpanshah355]

@BroCodez !!!! nice to know your not dead :D also, could you do a toutorial for C/C++ windows (kinda like tkinter for python) thx good job on your vids though, helped me a lot. :) super simple and easy to understand otherwise, the perfect combo for beginers

[@andredubbs4854]

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.

[@malikgulraiz3659]

We want more React tutorials from bro 👇

[@ursusrursus9325]

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

[@ff4937]

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

[@sarahwbas]

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

[@tonytodd7011]

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 ❤

[@frankmccann29]

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

[@sulaimanmisri6411]

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

[@magomihaly1741]

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

[@hunin27]

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

[@mohamedreda6299]

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

[@aroshm1682]

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

[@vishalboudhh]

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

[@deitunegold4593]

First tutorial i watched and i understood thoroughly 🔥

[@dark_camper83]

Nice explanation buddy. Thank You!!!

[@cubingwithshine180]

Thank you so much for this awesome tutorial

[@Coder_263]

Wow 😮so easy to understand! Thank you so much ☺️ I just subscribed ❤

[@SatyabrataOjha-mr5nr]

Wow, just nice explanation, love it

[@romyt9816]

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.

[@keisha7586]

Thanks! clear presentation

[@DrClappinCh33ks]

Extremely great presentation ❤

[@keisergg8701]

thanks a ton! u are amazing pls keep uploading.

[@user-qj5bg3fp3r]

Amazing content, Thank you. God bless

[@JoseSanchez-wg7pe]

tysm, you really helped me with this topic

[@balusubramaniam2335]

nice viedo very infornative ✌

[@wisdomsamuel-pe2fm]

God 🎉 bless you.. This is excellently explained 😊

[@piouf9850]

easy to understand , thank u

[@malikgulraiz3659]

My understanding for programming after watching Bros videos 📈📈📈❤

[@abdulkadiraminu262]

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

[@BroCodez]

I'm from the future

[@ImAbbasious]

pls make 10hours tutorial of React.js from Beginner to Expart please and please sir, can't pay for tuitions fee but bro code on KZbin bring more than Degrees@@BroCodez

[@ulbiomanzano7395]

Que fácil se hace aprender react con BroCode, muchas gracias, excelente trabajo.

[@ykfazzz]

please a full React course, even though i'm intermediate in React, your videos are ones i learn the most from

[@AH_FS]

Thank you soo much i love ur videos

[@shivanshuhere]

clean and simple , loved it 🌮

[@hongdevp]

Thanks your tutorial ❤

[@rabaa9352]

Thank you very much .. Like number 870.. Regards from Yemen

[@volodyslove]

Nice lesson!😁

[@Odidi_Bee6ix]

Exquisite 🙌🏾

[@techguykay]

over 2 year ago i decided to change careers and learn coding, i started with your python videos, and today im an intern swe (mobile application development), currently learning react-native and still watch you Bro-Code. My programming Kinng 😤🙌 i wanna see more of this new seriesssss!!!

[@HimanshuVermayohoho]

hey bro how did you get the job, can help me to know how you did it

[@hunin27]

Thanks Bro! I really needed this playlist completed as i need to learn react and you arrived just in time ! Respect ❤

[@d1ce966]

Thank you bro more react videos

[@nihongo_]

thanks a million bro

[@Rae_895]

After this pls make a typescript version since typescript is mostly used with popular js frameworks

[@juanmacias5922]

I mean, I"ve been using TS, you just have to add the right typing, when the IDE screams at you. :D

[@juanmacias5922]

This was my final code for Student.tsx: interface StudentProps { name?: string; age?: number; isStudent?: boolean; } const Student = ({ name = "Guest", age = 0, isStudent = false, }: StudentProps) => { return ( Name: {name} Age: {age} Student: {isStudent ? "Yes" : "No"} ); }; export default Student;

[@riticklath6413]

Waiting for it Thanks a lot bro ❤ Please make it bit quick 🙏

[@alwaysgrowww]

cool video bro!

[@CodingChannel1]

Amazing 👏

[@syramoran9270]

TY ❤

[@ThatOnlyArab]

YOUR BACK 🎉🎉🎉🎉

[@oussemaelmzergui7055]

You never miss

[@ahamedsha_jr]

not gonna start the series until you complete it anyways for the algorithm 🔥🔥🔥

[@shadownerverdie]

so great

[@benhur221]

props to you Bro

[@primordialatom1478]

Nice

[@arealmemeist6421]

'props' to you for making this video lol

[@BroCodez]

I loled at that one

[@3X1Z3]

Love u brooo❤

[@user-cs6rz9jn8n]

Perfect

[@_sf_editz1870]

sensei waiting for the next video

[@LoveandPeace1111]

Live it

[@tukkinum]

i love this, but i have a question. how would we go about different images for each student? ive tried to figure it out myself but to no avail. thanks!

[@drididali1755]

hoooks bro

[@antoniobanderas1287]

perfect ;P

[@namesjeff5213]

👑

[@user-ni9rs2wk4g]

Can you do a video with a full course of Visual BASIC Programming language??

[@user-dz3lq5hb8m]

Be like bro code Absolutely legendary BROgramer

[@Yesterday_i_ate_rat]

❤❤

[@silverfoxcr5194]

Bro you have to finish the Playlist in less than 3 months I'm doing my final computer science proj using React and I need your explanation ❤

[@_sf_editz1870]

sensei

[@GATIF786]

Kindly, make a complete video on React Js and React Native (Including User Login Authention from Mysqli database).

[@tonich81]

Can you do nodejs tutorial 😆 Your videos its easy to understand

[@tee-hee9553]

The proptypes and the defaultprops does not have any color, beside white on my visual studio code what should I do ?, I know it's working but I want color to check if I type wrong or not please help

[@acosmic7841]

Are you making a longer react tutorial slated to release in 2024?😊

[@aureusvisions]

wow

[@21Kqaile-]

W

[@thashreef2125]

waiting for react Hooks and CRUD operations

[@jiazhiong8273]

bro, pls make a full course on android mobile application programming, maybe with Java or Kotlin. Thank you for your courses!

[@lf00t]

Bro, is there a way to enable autocomplete/ intellisense for prop.[dot] ... ? coming from java, this is really annoying and easy to make silly typos

[@tavidev]

could you also make a deno fresh series?

[@animatsuki5345]

кайф!

[@ABM200_]

assalomu alaykum qales Muhiddin aka

[@user-cs6rz9jn8n]

Lessons

[@Delicatamente]

huge thanks!

[@chakrounmohamedslim8748]

Please give us a blazor tutoriel after. Net 8

[@pastuh]

Strange why not called propDefaults

[@darkworldgaming5580]

bro bros voice change a lot in 2years

[@Gunz1234]

I think yt spies me cuz I am on a course and I'm on the props part n this shows up

[@rodeotcd]

This is

[@fatouz5104]

How do you know I have a react project for college😭thank you

[@noicefrog]

bro code is da besstt

[@adonissss1881]

Hi! I have a python project. And i want to create a gui for it. How do i? I dont know. Can you teach me or how do i learn it?

[@hunin27]

use a gui library for python

[@adonissss1881]

@@hunin27 how?

[@dwwe-xt5ys]

make a full couse on x86 assembly language

[@focusedstudent464]

16th comment

[@ImAbbasious]

Sir, we need 10Hours React for total Begnner please

[@protibadimon4169]

Hey bro, can you help me by coding chess game?

[@noicefrog]

bro code pls colab

[@kaungkinzone2448]

random comment 3.0

[@aletondaX]

Do you still love pizza?

[@BroCodez]

always and forever

[@noicefrog]

what

[@emanueleconte506]

i'll ask you a full Java Spring Boot course