More

    React Props: Functions and Class Components

    React Props: An Introduction

    As we can observe from our previous experience with React, we can very well understand one thing. The thing is React has an unique approach towards the flow of data and a different way of manipulation.  To enumerate, it is also completely different from any other framework that is present in the market. This can be one of the major reasons why working with React can be a bit overwhelming. Most importantly not to forget that it might feel difficult to use in the beginning. Specifically, understanding some of the concepts such as components, props and states are extremely important. In this article, we are going to mainly focus on React Props. And let’s also see the features and usage. For understanding how props actually work, the knowledge of components also comes very handy. 

    What are React Props?

    React is particularly a component-based library. Consequently, that trait divides the user interface into little reusable prices. In certain scenarios, those components are needed to communicate or send data to each other. Here, the method of sending data in between components is by using the props.

    Props are special keywords in terms of React.  And those keywords particularly stands for the term properties. It is specifically used to transfer the data from one component to another. Here the important thing is that the data with the props passes always in a flow. Secondly, the data is strictly unidirectional or one way that is from the parent to child. Furthermore, the other important thing that we should keep in mind is that props are read-only. To emphasize, that means the date that is coming from the parents must not be changed by the child component.

     

    What are Components?

    As we have previous;y discussed, having the concept of components is essential for understanding the props. So let’s talk about components a little before we again move onto props. So Components are the feature of React that lets you split the user interface into multiple independent and reusable pieces such that each piece we get can be thought of as an isolated piece that is fully functional by itself. If we look at it in a conceptual viewpoint, we can say that components are just like the JavaScript functions where they accept arbitrary inputs known as props and what they return is the React Elements describing that should be displayed on the screen.

    Function and Class Components:

    The simplest way that is for defining a component is by writing a JavaScript function:

    The function above is a correct and valid React component because this function accepts single props that we know stands for properties, with the object arguments with the data that gives a React element in Return. Such components are nothing but function components. This is because they are literally just JavaScript functions. The functions and class components both have their own additional features that we can talk about further.

     

    Rendering a Component: 

    Previously we have only talked about the React elements which represent the DOM tags but elements can also represent the user defined components. When an element is a user defined component and recognized by React, React passes the JSX attributes. Here the children of these components are single objects. These objects are nothing but props.

     

    Steps:

     

    1. We call the ReactDOM.render() with the part <Welcome name=”Alex”/> element.
    2. For this, React calles the Welcome component with the {name: ‘Alex’} as props.
    3. The Welcome component that returns a <h1>Hello, Alex</h1> as a result. 
    4. The ReactDOM updates the DOM to match <h1>Hello, Alex</h1>.

     

    Composition Components:

    Other components are recognized as components too in their output. And this feature lets us use the exact same component abstraction for any level of detailing. If we want a button, form or even a dialogue, all of these are most commonly part of components only. It is typical for new React applications to have a single application component just like the button. Here you would have to gradually work the way to the top of the hierarchy for viewing.

     

    Extracting Components:

    This type of component can be pretty tricky to change because of all the nesting. And also at the same time, it can also be very hard to do the reusing of its individual parts. After all these are done, you are allowed to extract a few components from it.

    Avatar is the first thing which is to be extracted. And the fun fact is that the Avatar doesn’t need to know that it will be rendered inside a comment. Due to this we have given its prop more of a generic name that is ‘user’ and not author. It is very much recommended to name the props from the point of view of the component. It certainly advisable that it should not be named in the context in which it is being used. After that, what we need to do is extract a UserInfo component. This will render an Avatar just next to the name of the user. Extracting components might seem as a very grunt of a work when you are just starting. But after having a taste of it, and a section of many reusable components it pays off the hard work in larger applications.

    A very good rule of thumb has its own statement. It states that the part of our user interface is used multiple times. For example, you can find it in many things such as things like buttons, panels or Avatar. Also, if it is complex enough on its own then extract it as a completely separate component. 

    Props are Read Only:

    It doesn’t really matter where we are declaring a component as a function or a class. The component must never be able to modify the props on its own. Such functions are generally stated as pure functions. This is because there is no attempt of changing the input and they always return the exact same result expected.

    Props differ from state in the fact that prop’s data is immutable. In contrast to pure functions, there are also impure functions that can change their own input. Although all the React components are very flexible, React has one very strict rule. The rule states that all the React components must definitely act like pure functions. This thing most particularly happens when we are talking with respect to their props or properties. It is common sense that the application user interface will be pretty dynamic as it must change overtime for the purpose of adapting. And this dynamic property of React brings us to the concept of states which allows the React components to change their output over the time in response to the user’s actions or maybe even responses from the network or even anything else that does not violate the rule.

    Render Props:

    Render props is a term that refers to a technique of sharing the code in between the React components using a prop that has a function as its value. A component that has a render prop takes a function which gives a React element in return and calls this element instead of implementing the render logic that it has as its own. Now the question remains how we can reuse these behaviours in some other components.

    If we talk in other words, if any other component needs to use it, we can encapsulate this behaviour so that it can be easily shared with any other component. More concretely, a render prop is a function prop that is used by a component for knowing what to render and what not to render. This technique leads the behavior to be extremely portable that needs to be shared. 

    Conclusion

    Understanding the approach of React towards data manipulation may take you some time. We hope that this article will help you get better in React. To summarize, props properties and is a special keyword in React. And also the use of props is to pass the components just like function components. Props are unidirectional and travel from parent to child direction only.

     

    Recent Articles

    React Fragment: Find out what we encountered.!

      React Fragment: Hello Devs, in my journey of learning react I came across some frontend conditions where I had to render multiple react components,...

    React Admin: Documentation | Features | Dahboard | Templates

      React Admin is a framework for the front-end development of data-driven applications. That is operating in a browser over the top of REST or...

    React Hooks

      A hook is a component that allows us to use the features of React and state without defining a class. This feature is added...

    React Animation: A definitive guide

    React Animations Add-ons The ReactTransitionGroup add-on is a lower-level Applications Program Interface (API) component for creating react animations. And the ReactCSSTransitionGroup, is a component used...

    Create React App: A Complete guide for Beginners

      Create React App is the modern way of building an official Single Page React Application. It sets up a comfortable environment for building react...

    Related Stories

    Leave A Reply

    Please enter your comment!
    Please enter your name here