Understanding Props and PropTypes in React | Complete React Course in Hindi #6
Summary
TLDRIn this video, the instructor demonstrates how to work with React props by creating a custom Navbar component. They explain how to pass properties (props) to components, set default prop values, and enforce prop types using PropTypes. The video also covers the importance of organizing code, using extensions for efficiency, and understanding JavaScript export concepts. The focus is on building a clear and maintainable React application, with an emphasis on learning and implementing essential React concepts.
Takeaways
- 1. The video initializes a TextUtils website using Bootstrap and frequently commits code changes to track progress.
- 2. Git commands such as `git add .` and `git commit -m` are used to commit changes; familiarity with Git is not required to follow along.
- 3. The video focuses on creating and understanding React components, specifically function-based components and the concept of props (properties).
- 4. Props are used to pass data to custom components, making them dynamic and reusable.
- 5. The video demonstrates the use of the ES7 React/Redux/GraphQL/React-Native snippets extension to speed up coding with shortcuts like `imr` for imports.
- 6. The importance of keeping comments in the create-react-app template is emphasized, as they contain useful information.
- 7. The video explains the difference between named exports and default exports in JavaScript modules.
- 8. React component creation is demonstrated, including moving code to a separate Navbar component for cleaner structure.
- 9. Prop types and default props are introduced to define expected types and default values for props, ensuring component robustness.
- 10. A brief overview of state management is provided, with a promise to delve deeper into the concept in future videos.
Q & A
What is the purpose of making frequent commits in the video?
-Frequent commits are made to keep track of the code changes after each video, making it easier to reference specific versions of the code related to each video segment.
What is a 'prop' in React, and how is it used?
-A 'prop' (short for properties) is a mechanism for passing data from a parent component to a child component in React. It allows components to be reusable by customizing their behavior or appearance based on the data passed to them.
How do you add Bootstrap to a React project as mentioned in the video?
-Bootstrap can be added to a React project by including it in the project’s dependencies and importing it in the appropriate files. The video doesn't detail the exact steps, but it involves modifying the `app.js` to use Bootstrap classes.
What is the ES7 React/Redux/GraphQL/React Native snippets extension, and why is it recommended?
-The ES7 React/Redux/GraphQL/React Native snippets extension provides shortcuts for commonly used code snippets in React development, making coding more efficient by reducing the amount of repetitive typing.
How do you import modules in JavaScript, and what are named and default exports?
-Modules in JavaScript can be imported using either named exports or default exports. Named exports allow you to export multiple items from a module by name, while default exports allow you to export a single item without naming it, making it the default export of that module.
How can you create and use a custom React component?
-You can create a custom React component by defining a function that returns JSX. This component can be used in other parts of the application by importing it and including it in the JSX of another component.
How do you pass props to a React component, and how are they accessed within the component?
-Props are passed to a React component by including them as attributes in the JSX tag. Inside the component, props are accessed through the `props` object, typically by using `props.<propName>`.
What are prop types in React, and why are they useful?
-Prop types in React are used to specify the expected types for props that a component should receive. They help catch bugs by providing type-checking and ensuring that components receive the correct type of data.
What are default props in React, and how do you set them?
-Default props are fallback values for props that a component can use if no value is provided. They are set using the `defaultProps` property of the component.
Why is it important not to modify props directly in a React component?
-Props should be read-only and not modified directly because they are meant to represent data passed from a parent component. Changing them directly can lead to unexpected behavior and makes the component's behavior harder to predict.
Outlines
📦 Initializing Textutils with Bootstrap and Git
The speaker reviews the initialization of the Textutils website with Bootstrap and demonstrates Git commands (`git add .` and `git commit -m`) to manage versions of the code. The video aims to explain 'props' in React, a shorthand for properties, which allows components to receive data. The speaker shows how to create a custom component and install the ES7 React/Redux/GraphQL/React Native snippets extension to simplify coding with shortcuts.
📚 Understanding Default and Named Exports in JavaScript
This section covers JavaScript module exports, focusing on default and named exports. The speaker explains how to create constants and export them, illustrating the difference between exporting by default and named exports. They run code examples, highlighting common errors and solutions, like using `.mjs` for modules. The importance of understanding these concepts before diving deeper into props is emphasized.
🔄 Creating and Using a Navbar Component with Props
The speaker demonstrates creating a Navbar component in React, explaining how to pass and use props within it. They emphasize organizing code by moving component-specific code out of `App.js` into its own file. The example shows passing a title to the Navbar component via props, illustrating how props can make components reusable with different data. The importance of referring to official React documentation is also mentioned.
📝 Prop Types and Default Props in React
This section explains how to use PropTypes in React to define expected prop types and default props to set default values. The speaker demonstrates how to specify prop types and make props required, showing how this can prevent errors by ensuring components receive the correct data types. They illustrate setting default props and emphasize the importance of defining prop types for maintaining code quality and preventing runtime errors.
🔧 Advanced Prop Handling: Default Values and Prop Validation
The speaker delves into setting default prop values and using the `isRequired` attribute to enforce prop requirements. They show examples of how missing required props result in errors, which can be mitigated by setting default values. The importance of prop validation for ensuring components function correctly and as intended is emphasized, along with the usage of default props for fallback values.
📘 Conclusion and Encouragement to Explore More
The speaker concludes the video by addressing the perceived time investment in building the app, emphasizing the learning value of each small concept. They encourage viewers to explore more videos in the playlist, practice the concepts covered, and appreciate the step-by-step learning approach. The video ends with a thank you note and an invitation to watch the next video.
Mindmap
Keywords
💡Bootstrap
💡git add .
💡git commit -m
💡props
💡React
💡npm start
💡ES7 React/Redux/GraphQL/React-Native Snippets
💡default export
💡named export
💡prop types
💡default props
Highlights
Initialization of textutils website with Bootstrap.
Explanation of git commands: `git add .` and `git commit -m` for version control.
Introduction to props in React and how they are used in custom components.
Using npm to start the project with `npm run start` or `npm start`.
Importance of keeping comments when using create-react-app for useful information.
Demonstration of default and named exports in JavaScript modules.
Creating and using a new React functional component (Navbar) and passing props to it.
Using the ES7 React/Redux/GraphQL/React Native snippets extension for code shortcuts.
Setting up prop types and default props for React components to ensure proper data types.
Explanation of the significance of using default props and required props in React components.
Introduction to the concept of state in React (to be covered in later videos).
Emphasis on the importance of understanding props before moving to more advanced concepts.
Example of passing and utilizing props such as strings and objects in components.
Detailed process of creating organized and reusable components in React.
Encouragement to refer to React documentation for understanding syntax and best practices.
Transcripts
So, in previous video we have initialise textutils website
by adding Bootstrap. I'll open it with code again
And I will do one thing which you don't have to think about
Is that I will add git add .
and I'll write git commit -m "Video 5 completed"
So this is the code when our video 5 was completed
So I will make this kind of commits again and again
So that you get code after which video which code we have written
Hence I am making so many commits. Many will ask what is this
git add . and git commit -m what is this?
you don't have to see this for now.
if you don't know git, then you can learn react without git too
I wrote this because I need to give the code to you.
Now, as we know we are editing in app.js
We'll talk about props in this video
What is props? Props is short for properties
Overall, if I make a custom component
Which I am going to make right now
I can send some things to a custom component
Which it can use inside it
For example what can I send inside navbar?
I will quickly do npm Run start
or npm start and will wait till it up
So here it is compile successful and I can see my website here too
So if I make a custom component
And suppose that custom component is navbar
Then I can send this string textutils
An object or a Boolean
And using all these values component will render itself
I will show you this in a while if you didn't understood
Before that I want to tell you we have installed an extension
Which was ES7 react/redux/graphQL/react native snippets
This extension is superb
in a way that here many shortcuts are given
if you write imp then this will come
imn will give this
so if you stick this extension and there are many more like this
for example, simple react snippets, if i am not wrong
but i feel this the best and use this only
So, you will learn all this thing
for example, you want to add prop types, I will tell you what that is
but if you want to use, or want to import react
imr will do that, you don't need to write this whole.
with that class based components or
function based component all these things
if you want to create, see for prototype write pta, if you write ptar
array and is required will come too, if you write ptpr
prop types Boolean and is required will come.
so you will remember all these things.
and you can do things easily.
there are many things for ES7 too in this
like for console.log write clg, it will come
and whatever you are using just go through it once
for example, you are writing console.log as whole
don't write whole, write clg
oops where I clicked?
write clg and see this once what are mentioned in this,
and the extension here,
if you search it on net too, I clicked here directly
and here all code of its is given which you can see
you don't need to see in VS code you can see here too
and there are many things written in it of react's
class based component, react's function based component.
there are many things which you can't mug up but once you go through
on writing hoc redux you get this whole thing.
imagine the time you save while typing a component.
if you are using this.
This you have to keep in mind.
This is the one thing, one more thing which I want to tell you is
That whenever you are using create react app
Means the utility which we used
To create this whole folder structure If you are using that
Then try to not remove the comments
Because that comments contain Useful information
Suppose if you are making this app as tenth react app
Then you might know what is written in comment and you can remove them
But go through it once there are many useful things written in comment
I have removed because I have already told you all those thing
But just in case if you want to read those comment do read
With that one more thing which I want to tell you is
There is no need to import react now
Example if I write Imr here
Then I can import react but its not needed
Because I am using function based component
And I'm not using react in it
So this is what you should know
One more concept which I wanted to tell you
Which is a concept of JavaScript
Is of named export and Default export
And to understand this is very important
Before I move ahead and tell you about props
It is necessary to understand this
And I can't ignore all these things
If I don't tell you this then there will be problem
Hence understand this
Suppose I created a file named module1.JS
And with that a file named module2.JS
And then later on I delete this both module is because we don't want it
Suppose I have written here const a ="Harry";
and here const b="Rohan";
and with that here const c ="Akash";
and with that here const d ="Priyanka";
So I created this four constants here
Now if I write here export default c;
import ui from module then you will ask what this ui is?
I will write it like this ./ means inside current directory.
and I'll write here module2
Here I am basically saying that from module2
Import UI and I will write here console.log(UI);
Now if I try to run it
Then I will get an error and we will talk about it too
But for now I want to run it and click on +
I will write here node and I will run module1 here
On pressing enter there will be an error which will say
Either you make type = module in your package.JSON
or you make it MJS
Means I will make it module1.mjs and module2.mjs
So what I will do by making it MJS that
If I mport it now then my import will work so I will make it mjs quickly
Now if I run it then it will run successfully
So, it is saying module not found
What it is saying module1.js, so I have to write MJS here too
So I will write MJS and as its name is changed
it is module1.mjs, so if I run it then
Akash is being printed here,
Because I exported Akash by default
Suppose if I write d here then we will get Priyanka why
Because Priyanka is being exported by default
Priyanka have to come as a she is exported by default
I have written here export default d so it have to come to module1
Now if I write here export default b
Then I will get Rohan here you have to know this
And this is true you can see here Rohan
So this was default export now I will show you what is named export
Here by default and exporting b which is Rohan
so if I write here import dz from module2.MJS
Then I will get Rohan printed on screen
Because by default that is being exported if I write dza here
so if I call it by name of dza too then also it is by default exporting it
If I want to export A,C and D too then how I will do it?
I will write export {a}
And C and D too here.
If I want to bring A, C and D here
Then it is not being exported by default
I have to bring it here so what I will do
Suppose I want to bring dza too and A, C and D too
Then I will bring something like this a, c and d
And if I do console.log C and D
And will run it so you can see Akash and Priyanka too
I will write a too so Harry will print too
Now here I have to say it as a only if I write A1 I will get error
Because it is not being exported by default there is no a1 so it shows error
There is no A1 in module2 so this is what it is saying
Now if I want I can do only a, c and d
But I have to use {} when I am using which is not exported by default
This is how module works if you feel it confusing
So it is basically a JavaScript concept
And if you are facing problem you can go back in video and watch
But in most of the cases you won't face the problem
So what I will do is, module1.mjs and module2.mjs
I will keep them only for this video and will delete for next video
I want to keep them just for your reference
I hope you have understood module
Now we will understand props for which we will make a new component
And this is our first react component so have sweets
Will make a folder named components, folder is not needed
But by making folder we can find our custom components at one place
And things stay organised
I will write components here and after that I will make component
You have to always write C capital in component like in navbar.JS
Written N capital of Navbar
and always write it in capital.
Now listen carefully what you need to do
I need react functions based component I'll write rfc
And my react function based component came here
Now I can write my coding here like I've written hello I am navbar
Suppose I wrote this and what I will do here
I'll write navbar anywhere in fact after navbar I will right navbar
Navbar as I have written it got imported
it found automatically navbar is inside components
and it Imported automatically
I will write something like this let me show you by zooming
Navbar, now see what changes have come in my website
Hello I am a navbar came here
Which means the component I made is loading
You should understood this
But why I made Navbar component?
I made it because the coding here don't get messy
My whole application will be seen in my app.js
I don't want the whole navbar to be Messy in this
So what I will do is cut this navbar code
I will make this navbar as navbar which means
I will make it a navbar which I can use in future too
So I cut it I will come in navbar.JS
I will remove hello I am a navbar and div
And I will return this nav
So my navbar is returning this
And here in my app I am only returning navbar
So my app is clean and it shows I am importing navbar
So you can see here nothing changed
Now I can use this navbar in another website or in the same website
But with some other title for example
If my website is a blog I will write blog
Suppose I want to make textutils blog instead of textutils
So I want to pass it like a variable
I want to use this component
But keep some things which changes according to me in this component
For example let me show you then you will understand
I want I pass textutils here
Will pass textutils like this I want to write
Title = textutils
I want to pass textutils something like this
Is this possible?
If I write title=textutils something like this
So basically I am passing props
I hope you understood props
I will open documentation of react again here
And this is the source
If someone find this boring then change your opinion
This is not boring you have to come here only
This is the source of the information on react
So I am searching props here of components
So basically our function based component will get this props
So I will accept this inside this function
I'll write props and I will get this props here
Now I can write here props.title
Obviously this is JavaScript so I won't write directly props.title
will write inside {}
will write props.tile inside {}
And by doing this, this title will come here lets see.
See textutils, you won't see difference I will show you by doing textutils2
If I make it textutils2 like this then it will show textutils2
It means I made a react component of which I can change title
Means if I need to make another website
Then I can utilise this navbar by changing title
or if I want to change any other thing I can pass it using prop
And will accept their by using props.
Let me show you an example of about text
Suppose I want to write it by using props.aboutText
will make T capital of text for clear understanding
If I write aboutText something like this
I want to write about us or about textutils instead of about
And I will change this textutils2 to textutils
So I am using aboutText here
Props.aboutText so will it change here?
About textutils yes will definitely change
So what is props? nothing else but properties
You made a component and you want to pass some things in it
You say that this is the component with some variables in it
Which I will tell what it will be is props
Understood what props is? props is
That you are giving some things to this component
This component needs these 2 things
You are giving it that two things and asking it to render
For example if I give your blank paper then it is a blank paper
But if I give you some information in that blank paper
Then that can be an application an leave application
If I write job application in it, it can be job application
So it becomes a useful thing because it has that information
Which is required without which it is a blank paper
Same way the component is empty without this two required props
Because without title and aboutText this component is incomplete
So I hope you understood this thing
Textutils the text here came here
About textutils this text came here,
its not compulsory that this needs to be string
I can pass an object too
I can pass anything even a link
It can be I can pass about's link
and Use this about link here
Prop.aboutLink I can send as many props as I want
And if there are many props I can group them in object and pass object
Then render those objects value
So this is props you will never change the props in this function
This is even written in react documentation let me show you
You will not change props directly
Props should be read only, at any cost
You won't change props in your function
Overall if you set props once it will stay same always
But its not compulsory the text will stay the same
And here a concept of state comes which I will tell you later
Not right now because I want you to learn about props properly
Now because of props concept
you have to learn about props type concept too
So what I will do this function is named navbar
I'll write here navbar.proptype.
And first of all I will import proptype
So it's impt according to me so import proptypes impt
import proptypes from proptypes
now I'll write here navbar.proptypes =pts
pts is proptype.string
and I will put it in an object like this.
And it is going to be an object so first of all
I was set prototype for my first proptype which is
title. So, I'll say my title proptype should be string
With that I will say my second proptype which is
AboutText I want it to be proptype.string too
So this is an object. suppose you forgot the syntax
You don't remember how to write function based component are different
to write and class based component are different to write
So let me tell you search here react proptype
Everything is inside react JS documentation
Let me show you where the syntax is written
This is the syntax they imported proptype first
Then the name of function means the name of function based component
.proptypes = this they have written
Never make this P capital like
I did capital here, we have to keep it small
Now I will save it in show you one thing
See if I inspect it there is no error
And why there should be you must be thinking
But imagine if my prop here
I send it like a number suppose like
Title=3
Suppose I send a number in title
Then see it is saying failed proptype
Invalid prop title of type number
It is saying you mention the proptype of it as string
And you are sending number
Your dog is Tommy my dog is dog
So I will change it back to string
I will come back here and make it string
I will make it back to textutils
And will save it
Now this error will go when I reload it
You will ask where we do it we will never send number
I will always send string so why this
Why this is needed this long coding
you won't send it you are saying it now
But later you will send an ask why error is coming
You will send object instead of string
And then you will say I send object by mistake I need to send string
And you won't be able to track your mistake
Hence we use this to make a check beforehand
You say the proptype here
The title will remain .string
AboutText will be string too. if it was array I would write array
If it was an object I would write object
If it was number I would write number
So react documentation have written about proptypes properly
Now there is one more thing defaultprops
Now how will you write defaultprops in your function components
Let me show you that too
Now what will happen in function based component
What you can do if you can set default prop
You can set default prop like this and say
That make something of my default prop value
Let me show you can write something like this
Navbar.defaultprops and the title suppose
I want it to set title here
And I want to write about text here in aboutText and I'll save it
Then what will happen right now you are saying textutils and about textutils
Because we have passed values
But if I don't pass this value I will show this by ctrl+d
I will comment this out
and will remove this both things which I have passed
And if I save it you can see about text here and set title here
So what I did is I set default prop
What I say this I will pass prop
But if I don't pass the prop
At that time use this values
now I have set default prop here
I can do one more thing I can use is required here
I will do is required here and after that for title
Right now I am sending and no error showing I will show you by inspect
If I did is required and I didn't send it afterwards
Let me show you suppose I didn't send it
So error will come here
we have set defaultprops then error will not come
we have to remove it for seeing error
Now title is required but see here
I will reload it and it is saying you have marked title as required
But this is undefined but if I set default prop and then load
Then that error is gone because by default it got prop
So it is satisfied and it got is required
Means it should get some title it shouldn't be undefined
It will show an error if it is undefined
So if you want to ensure that your props
Shouldn't be undefined for example title
Title is important about can be undefined there is no problem
If I want this then I will add is required in title
By the way in most of the props do add is required because
In most of the component there are things which you want to use
Without them your component will be incomplete
Like without title and aboutText this navbar component is incomplete
So if I reload it set title here and this has come
Because I am not passing anything
So I will pass title and about text both
If I pass then here textutils and about textutils came
And my console is happy too not showing anything red
No error is coming I will close this now
So we understood what props is for now
Props is nothing but we are basically passing values
We are passing it from here and this component is accepting from here
Prop.aboutText and with that props.title
Where is title I can find it yes props.title
So you can send props like this it can be objects too
We also learnt about proptypes and defaultprops
Proptypes tell us the types of prop
If you try to use any other type then that you will see an error in console
You will see a warning in red colour
It will tell you even if you do it is required
That it was required and you haven't do it so fix your code
React will tell you that
This is proptypes and what is default prop means
Which value to use if nothing is passed.
For example if I write this then which value will be used for Title and aboutText
These two values will be used
As you can see but in most of the cases when you are using component
Then you will write something like this
If you want to set another default title or aboutText or any other prop
or if I say in broad terms defaultprops
Should be set to something always and in most of the cases
It will be useful for example any about section or title
Then I will not change aboutText I will only write about
or about us or only about
And if I don't send about my work will be done I will do it
And if I don't send about I will do ctrl+d
I will do it backspace and comment out and like this
Basically if you want to refer the code later
So it took about from defaultprops type
I have given in defaultprops
I have given this in Navbar.defaultprops
I had sent title so it took my title which was
Textutils which I sent
Now this thing should be clear to all
If it's not means you were sleeping when I was making video
You don't have to sleep you have to see
By going back again if you have not seen properly
And if you have seen then you will know
I don't think anyone will face problem
Don't think about state right now I will tell you later
You just have to learn props in this video
I hope you have become the master of props
In the coming video we will see how they will take this app forward
I know you will think so much time is taken in making such a small app
This will be our first app in which we will take so much time
We are learning small concept with the help of this app
So you might feel a lot of time is being taken
Do access playlist
There will be many videos when you will accept this playlist
So watch them and try this
Go to the channel playlist and you will see many things
That's it for this video
Thank you so much for watching this video
And I will see you next time
浏览更多相关视频
Components, Props and JSX in React | Sigma Web Development Course - Tutorial #106
useContext Hook | Mastering React: An In-Depth Zero to Hero Video Series
Props | Mastering React: An In-Depth Zero to Hero Video Series
Communication between components | Mastering React: An In-Depth Zero to Hero Video Series
Creating our first react app using create-react-app | Complete React Course in Hindi #2
How to render LISTS in React 📃
5.0 / 5 (0 votes)