REACT : Components & Props
React is a popular libray in Javascript which allows developers to create flexible and interactive user interfaces. React implements the use of single-page applications while providing a more sleek transition between the web’s content. Multi-page applications similar to the user interface on Amazon and ebay loads their pages every time a user clicks on different links. There are serveral popular modern applications that were built using React such as Twitter, Facebook, Netflix, Tesla, Github, Codeacdemy and Paypal. The content of these web applications are all dynamically displayed. These dynamic React applications are structured into what are known as components.
What Are Components In React?
Components are the building blocks of web applications . Components seperate the user interface into reusable and independent parts by importing and exporting different components.Components are also functions or classes that have the ability to pass down different data to children components as parameters.
Advantages of using Components:
Performance Enhancement
Reusability
Web Application Designs Made Easier
The many advantages of components help in creating efficient applications . Components can contain multiple components within itsself. This also helps in creating more complex design and interaction within applications. Being that componenets have the ability to receive props this helps with writting cleaner code .
What Are Props?
Props is short for properties and props and we can think of it as an object that carries data with it that can be used in our function component. The parent components pass down data in the form of a prop to its child componenet as arguement. Now Lets talk a little bit more about how we can utilize props within our components.
How to use props within a component:
As shown in the image, the fetched data from the parent component of ListingsContainer is passed down as a prop. The ListingsContainer can now pass down a list of data which is the {listings} prop to the ListingCard component. The <ListingCard /> component will then recieve the itterated list of the original data. The prop of the list of {listings} will then become a parameter of the ListingCard componenet. Now, the Listings Card’s component can render any data from the prop to display within each listing’s card.
Props passed down to its child component as a parameter:
As shown below, with the {listing} prop we are able to create an individual card that displays the listing’s image , description and location.
Conclusion:
To sum everything up components and props work hand in hand in React appliations. Components have the ability to pass down props to children componenets. Props are used within multiple componenets throughout our applications which helps with keeping our code clean .
