React Components

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:

import React from 'react'

const ExampleComponent = (props) => {
    return (
        <div>
           <p>Hello from {props.name}</p> 
        </div>
    )
}
export default ExampleComponent

import React from 'react'

const ExampleComponent = (props) => {

return (

<div>

<p>Hello from {props.name}</p>

</div>

)

}

export default ExampleComponent

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):

import React from 'react';
import ExampleComponent from './ExampleComponent';

const App = () => {
  return (
    <div>
      <ExampleComponent name="Den Of Developers" />
    </div>
  )
}
export default App;

ReactDOM.render( <App/>, document.getElementById('root') );

import React from 'react';

import ExampleComponent from './ExampleComponent';

const App = () => {

return (

<div>

</div>

)

}

export default App;

ReactDOM.render( <App/>, document.getElementById('root') );

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.

import React from 'react';
import ExampleComponent from './ExampleComponent'

const App = () => {
  return (
    <div>
      <ExampleComponent name="Den Of Developers"/>
      <ExampleComponent name="Yoda"/>
      <ExampleComponent name="Frank"/>
    </div>
  )
}
export default App

ReactDOM.render( <App/>, document.getElementById('root') );

import React from 'react';

import ExampleComponent from './ExampleComponent'

const App = () => {

return (

<div>

</div>

)

}

export default App

ReactDOM.render( <App/>, document.getElementById('root') );

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.

const Picture = () => <img src="https://i.pravatar.cc/500"/>;

const Title = () => <h4>Card Title</h4>;

const Description = () =>
    <p>
      Lorem ipsum dolor sit amet
    </p>;
 
const Card = () =>
    <div>
      <Picture />
      <Title />
      <Description />
    </div>;

ReactDOM.render(
    <Card />,
    document.getElementById('root')
);

const Picture = () => <img src="https://i.pravatar.cc/500"/>;

const Title = () => <h4>Card Title</h4>;

const Description = () =>

<p>

Lorem ipsum dolor sit amet

</p>;

const Card = () =>

<div>

</div>;

ReactDOM.render(

<Card />,

document.getElementById('root')

);

Lets say we have array with four elements.

//HOC Example
// App component
const App = () => {
  const products = [
    { id: 1, title: "delectus aut autem" },
    { id: 2, title: "quis ut nam facilis et officia qui" },
    { id: 3, title: "fugiat veniam minus" },
    { id: 4, title: "et porro tempora" },
  ];
  return (
    <div>
      {products.map(element => 
      <Product data={element} key={element.id}/>
        )}
    </div>
  );
};
// Product component
const Product = ({data}) => {
  return (
    <div>
      <p>Title: {data.title}</p> 
    </div>
 );
};

ReactDOM.render( <App/>, document.getElementById('root') );

// output

Title: delectus aut autem
Title: quis ut nam facilis et officia qui
Title: fugiat veniam minus
Title: et porro tempora

//HOC Example

// App component

const App = () => {

const products = [

{ id: 1, title: "delectus aut autem" },

{ id: 2, title: "quis ut nam facilis et officia qui" },

{ id: 3, title: "fugiat veniam minus" },

{ id: 4, title: "et porro tempora" },

];

return (

<div>

{products.map(element =>

)}

</div>

);

};

// Product component

const Product = ({data}) => {

return (

<div>

<p>Title: {data.title}</p>

</div>

);

};

ReactDOM.render( <App/>, document.getElementById('root') );

// output

Title: delectus aut autem

Title: quis ut nam facilis et officia qui

Title: fugiat veniam minus

Title: et porro tempora

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:

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

Spread the love

Related

Leave a Reply Cancel reply

React Components

Share this:

Related

Leave a Reply Cancel reply