Just Learn Code

Mastering React Components: Types Props and Composing Techniques

Introduction to React Components

When building a web application, the user interface is one of the most crucial aspects because it determines how users interact with your application. And that’s where React comes into play.

React is a JavaScript library that simplifies the creation of user interfaces by breaking them down into self-contained components. In this article, we’ll explore the different types of React components and how to use them to compose an interactive user interface.

Types of Components

There are two primary types of components in React: function components and class components.

Function Components

Function components are the simplest components in React. You define them using JavaScript functions that return JSX.

JSX is a syntax extension that allows you to write HTML-like code in your JavaScript files. Here’s an example of a function component that displays a “Hello, World!” message:

“`

function HelloWorld() {

return

Hello, World!

;

}

“`

Class Components

Class components, on the other hand, are more complex than function components. You define them using JavaScript classes that extend the React.Component class.

They have more advanced features such as state and lifecycle methods. Here’s an example of a class component that displays a clock:

“`

class Clock extends React.Component {

constructor(props) {

super(props);

this.state = { date: new Date() };

}

componentDidMount() {

this.timerID = setInterval(() => this.tick(), 1000);

}

componentWillUnmount() {

clearInterval(this.timerID);

}

tick() {

this.setState({ date: new Date() });

}

render() {

return

It is {this.state.date.toLocaleTimeString()}.

;

}

}

“`

Composing Components

Now that we know the two types of components, let’s see how we can compose them to create an interactive user interface.

Nesting Components

One of the essential features of React is the ability to nest components. You can use function components or class components inside other components.

The parent component passes data to the child components through props. Here’s an example of how to nest components.

Suppose we have a parent component called App that displays a list of people and their details. Inside this component, we have two child components, CardList and Card, that display the information.

“`

function Card(props) {

return (

{props.name}

{props.email}

);

}

function CardList(props) {

const cards = props.people.map((person) => (

));

return

{cards}

;

}

function App() {

const people = [

{ id: 1, name: “John Doe”, email: “[email protected]” },

{ id: 2, name: “Jane Doe”, email: “[email protected]” },

];

return ;

}

“`

In the above code, we’ve created a Card component that displays the name and email of an individual. We’ve also created a CardList component that accepts an array of people and maps over the array to create Card components for each person.

Finally, we’ve created an App component that passes the array of people to the CardList component.

Card Component

The Card component is a function component that accepts a props object with two properties: name and email. It returns a div element with the name and email displayed.

CardList Component

The CardList component is also a function component that accepts a props object with one property: people. It maps over the people array and creates a Card component for each person.

It then returns a div element with all the Card components.

App Component

The App component is a function component that creates an array of people and passes it to the CardList component. Finally, it returns the CardList component.

Props

What are

Props?

Props (short for properties) are a way of sending data from one component to another in React. They’re similar to parameters in a JavaScript function.

Using

Props in Components

When you pass props from a parent component to a child component, the data becomes read-only in the child component. The child component cannot change the props directly.

Here’s an example of how to use props. Suppose we have a parent component called Greeting that displays a greeting message.

The message is passed as props to a child component called Message. “`

function Message(props) {

return

{props.message}

;

}

function Greeting() {

const message = “Hello, world!”;

return ;

}

“`

In this code, we have a Message component that accepts a message prop and displays it.

We also have a Greeting component that creates a message and passes it as a prop to the Message component.

Props and Read-Only

Props are immutable, which means that once you pass data as props to a child component, you can’t change it directly in the child component. Suppose we have a component that looks like this:

“`

function Name(props) {

return

{props.name}

;

}

“`

If we try to change the value of the name prop in the Name component, we’ll get a warning in the console saying that we shouldn’t do that.

To change the value of a prop, you need to lift the state up to a parent component and pass the changed value as a new prop.

Conclusion

In this article, we’ve explored the different types of React components and how to compose them to create an interactive user interface. We also discussed props, how to use them to send data between components, and their read-only nature.

By using React components and props effectively, you can build robust, flexible, and reusable user interfaces for your web applications. Writing

Props in Components

In React, props are a powerful way to pass data from a parent component to a child component.

They allow you to have more control over the flow of data in your application and help to keep your code organized and maintainable. In this article, we will explore how to use props in class components and provide an example of a

Card Component that uses multiple props.

Using Class Declaration for Components

In React, you can define components using both function declaration and class declaration. Function declaration is ideal for creating simple components that don’t require state and lifecycle methods, while class declaration is suitable for more complex components with state and lifecycle methods.

To define class components, we use the `class` keyword followed by the name of the component and extend it from the `React.Component` class. Here’s an example of a class component that accepts props:

“`

class Greeting extends React.Component {

render() {

return

Hello {this.props.name}!

;

}

}

ReactDOM.render(

,

document.getElementById(‘root’)

);

“`

In this example, we created a class component called Greeting that extends the `React.Component` class.

The `render` method of the component returns an h1 element with the props value of name. In the `render` method, we access the name prop using the `this.props.name` syntax.

Example of a

Card Component with Multiple

Props

To demonstrate how to use multiple props in a component, we will now create a Card component that receives four props: `featureImage`, `title`, `description`, and `link`. “`

class Card extends React.Component {

render() {

const { featureImage, title, description, link } = this.props;

return (

{title}

{title}

{description}

Learn More

);

}

}

ReactDOM.render(

featureImage=”https://via.placeholder.com/150″

title=”Card Title”

description=”This is a sample description.”

link=”#”

/>,

document.getElementById(‘root’)

);

“`

In this example, we created a class component called Card that receives four props: `featureImage`, `title`, `description`, and `link`.

Inside the `render` method, we use destructuring assignment to create four constants from the props to make them more readable. The Card component returns a `div` element with the class `card`.

Inside the `div`, we have an `img` element that displays the `featureImage` prop. We also have a `div` element with the class `card-body` that contains the title, description, and link of the card.

Finally, we use an `a` element to create a button that links to the `link` prop. Note that the props can be of any data type, including strings, numbers, and objects.

You can use objects as props to pass a group of related data as a single prop. For example:

“`

const cardData = {

featureImage: “https://via.placeholder.com/150”,

title: “Card Title”,

description: “This is a sample description.”,

link: “#”,

};

ReactDOM.render(

,

document.getElementById(‘root’)

);

“`

In this example, we created an object called cardData that contains the four props.

We then passed the object to the Card component using the spread operator (`…`) to spread the object’s properties as props.

Conclusion

Using

Props in React Components is a powerful way to create flexible and reusable components in your application. You can use both function declaration and class declaration to define your components, and you can pass any data type as props.

Hopefully, this article has given you a better understanding of how to use props in class components and how to pass multiple props to a component. In this article, we explored the topic of using props in React components.

We discussed the two types of component declarations – function and class, and how to use class declaration for components with multiple props. Then, we provided an example of a card component that uses four props to create a card with an image, title, description, and link, and also demonstrated how to pass an object as props.

The ability to pass data from a parent to a child component using props is a powerful feature in React, and it allows for creating more flexible and reusable components. By utilizing props effectively in your React application, you can improve its architecture, maintainability, and scalability.

Popular Posts