Components are the building blocks of React.
These components use props to enhance their functionality and to reuse code.
React props store primitive values, arrays, or functions.
What Is the Purpose of React Props?
React is one of the manyJavaScript frameworks worth learning.
React props have a very important function; they pass data from one component to another.
They provide a channel through which components communicate.
This simply means that a React component should never change the value of any of its props.
This ensures that props only contain uncompromised data.
Then youll have access to the prop and its data within the component.
This header component will include the title of the app, among other elements.
Therefore, the header component can use a prop to get the title of the app.
The App.js File
The code above shows ReactsApp.jsfile, which renders to the UI.
TheAppcomponent displays theHeadercomponent in the UI by using thetag.
Therefore, theHeadercomponent now has access to a titlepropthat it can use in its section of the UI.
However, if you remove thepropthats passed through theHeader component tag (like in the example below).
Fortunately, theres a simple way to mitigate this problem.
By adding adefault propvale to the component that uses theprop, youll effectively remove this problem.
This will ensure that even if the component doesnt receive apropit will still have apropvalue to work with.
Therefore, theHeadercomponent only uses thedefault propif it doesnt receive an externalprop.
For example, the title of a React app is a string value.
Using PropTypes Example
TheHeadercomponent above now uses thepropTypeproperty.
Reacts composite module makes this functionality possible.
It takes a generic component and configures it (with props), to create a more specific component.
Related:What Is ReactJS, and What Can It Be Used For?
First, youll need to create the task component.
But this is only the beginning.
