Components are:

  • The main building blocks of React. React exist to help you create components and then also have those components comunicate, pass data, pass information and methods between one another. There is a paragraph in React documentation that says: Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. To be honest one of the hardest parts of React is figuring out what to make component. If you take a large application, how many peaces do you break it down into.

Simply put, a component is a JavaScript class or function that optionally accepts inputs i.e. properties(props) and returns a React element that describes how a section of the UI (User Interface) should appear.

Functional components are some of the more common components that will come across while working in React. These functions may or may not receive data as parameters. In the functional Components, the return value is the JSX code to render to the DOM tree.

Example:

This function is a valid React component because it accepts a single “props” object argument with data and returns a React element.

Now we render the ExampleComponent (dont forget to import it):

This renders the text “Hello from Den Of Developers” to the screen. Go ahead and play around with this by switching out the name for yours.

Up until now, you’ve only created a single component, however, when building real products, you will often have to build multiple components.

For example a card component. We could write this component’s structure like so:

Card
|=> Picture
|=> Title
|=> Description

Here Card, Picture, Title and  Description are all components.

Lets say we have array with four elements.

This is a function that returns one or multiple components, depending on the number of elements in the array, also known as Higher Order Component. This function takes an array, usually from state which was retrieved from backend with fetch or from props passed down from parent component, and maps each element in the array, transforming each element in the array into a React component.

Higher-Order Component Simple Rundown:

  1. Get data from state or props (should be an array).
  2. Map over that array and return a React component for each element.

 

 

 

 

 

Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *