Understanding Props and PropTypes in React | Complete React Course in Hindi #6

Summary

In 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

00:00

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

05:01

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

10:05

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

15:07

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

20:09

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

25:10

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

Keywords

💡Bootstrap

Bootstrap is a popular front-end framework used to create responsive and mobile-first websites. In the video, Bootstrap is added to the textutils website to improve its appearance and functionality by providing pre-designed components and CSS styles.

💡git add .

The command 'git add .' is used in Git to stage all the changes in the working directory for the next commit. This is mentioned in the video as a way to prepare the code for committing, ensuring that all changes are included in the version control history.

💡git commit -m

The command 'git commit -m' is used to commit staged changes in Git with a message describing the changes. In the video, the instructor commits the code with the message 'Video 5 completed' to mark the progress of the tutorial series.

💡props

Props (short for properties) are a way to pass data from a parent component to a child component in React. The video explains that props allow customization of components by passing different values, like a title or boolean, which the component can then use to render itself.

💡React

React is a JavaScript library for building user interfaces. The video focuses on teaching concepts related to React, such as creating components, passing props, and using various extensions to streamline React development.

💡npm start

The command 'npm start' is used to run the React application. It compiles the code and starts a local development server, allowing the developer to see changes in real-time. The video demonstrates running this command to view the website in the browser.

💡ES7 React/Redux/GraphQL/React-Native Snippets

This is a Visual Studio Code extension that provides shortcuts for common React and Redux code snippets. The video highlights its usefulness in speeding up development by auto-generating code patterns, such as imports and component structures, with simple abbreviations.

💡default export

Default export allows a single value to be exported from a module in JavaScript. The video explains this concept using examples, showing how to export a constant by default and import it in another module, emphasizing the importance of understanding default exports in JavaScript.

💡named export

Named export allows multiple values to be exported from a module in JavaScript. The video contrasts this with default export, demonstrating how to export and import multiple constants using named exports, and explaining the syntax and use cases for each.

💡prop types

Prop types are a way to specify the expected types of props in a React component. The video shows how to use the 'prop-types' library to enforce type checking, ensuring that the component receives props of the correct type, and highlights the importance of this for catching bugs early.

💡default props

Default props are values that are used when no props are provided to a React component. The video demonstrates how to set default props for a component, ensuring that it has fallback values and behaves correctly even if some props are not passed.

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