Presentational vs container

components

Presentational components:

• Mainly concerned with how things look.

• Have no major dependencies on the rest of the app.
• No connection with the specification of the data that is outside the component.
• Mainly receives data and callbacks exclusively via props.
• May contain both presentational and container components inside it considering the
fact that it contains DOM markup and styles of their own.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 // presentational component
const Users = props =>
(<ul>
{props.users.map(user =>
(<li>{itr}</li> ))
}
</ul>)

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 Container components:

• Mainly concerned with how things work.

• May contain both presentational and container component but does not have DOM
and markup of their own.
• Provide the data and behaviour to presentational or other container components.
• Call flux actions and provides these as callbacks to the presentational component.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 // container component
classUsersContainerextendsReact.Component{constructor()
{
this.state = {
itr: []
}
}
componentDidMount() {
axios.get('/users').then(itr=>this.setState({ users: itr}))
)}
render() {
return<Usersusers={this.state.itr} />
}}

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 ReactJS | Methods as Props

ReactJS is a front-end JavaScript library for building user interfaces written and
maintained by Facebook.

We know that everything in ReactJS is a component and to pass in data to these

components, props are used.

For example, we cannot let the child communicate with the parent in this way. This,
nonetheless, can be done by passing methods as props in ReactJS.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 Project Structure:

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 Step 1: To do this let’s make a new component
named ParentComponent.js. Now let’s make the basic layout for a class
component in this file.

Step 2: Now let’s set a state to greet our parent whenever this component is rendered,
setting a state is not necessary, but we will do it just to make an application more
dynamic. Also, let’s make an event that gives an alert whenever the parent component
is rendered. Do not forget to bind the event so that the this keyword won’t return
“undefined“.

Step 3: Let’s not forget to import this into our App.js file.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 Step 4: Now let’s make a new component. Let’s call this ChildComponent.js, and make
a simple functional component. Let’s make a simple button, and then pass the
method greetParent() as a property. Essentially, the button must greet the parent
when it is clicked.

Step 5: Don’t forget to import the ChildComponent in ParentComponent.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 ReactJS | PropTypes

We had passed different types of information like integers, strings, arrays, etc. as props to
the components.

We can either create defaultProps or have passed props directly as attributes to the
components. We were passing props from outside a component and using them inside
that component.

It’s totally upon us whether we validate the data we are getting using props inside a
Component or not. But for larger Apps, it is always a good practice to validate the data
we are getting through props.

This will help in debugging and also helps in avoiding bugs in the future.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 propTypes in React

Before the release of React 15.5.0 version propTypes is available in the react package but
in later versions of React have to add a dependency in your project.

You can add the dependency in your project by using the command given below:

npm install prop-types --save

We can use the propType for validating any data we are receiving from props. But before
using it we will have to import it.

import PropTypes from 'prop-types';

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 Below syntax shows how to use propTypes:

ComponentClassName.propTypes{

propName1 : PropTypes.string,
propName2 : PropTypes.bool,
propName3 : PropTypes.array,
.
.
.
.
propNamen : PropTypes.anyOtherType
}

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 Note:

Props are read-only.

We are not allowed to modify the content of a prop.

Whatever the type of Component is – functional or class-based, none of them is

allowed to modify their props.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
 If we want to pass some default information using props to our components.

React allows us to do so.

React provides us with something called defaultProps for this purpose.

This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video