Home/

...

/

Composition

Composition

You will learn a key principle 'Composition' in this article. It let's you compose bigger react-components using smaller self-contained components.

We will make slow progress towards building a reasonable size component but before that we need to understand and employ some concepts to build smaller components. Let’s markup a classic landing page which will have the following sections:

  • menu
  • products
  • team
  • about

Also, our customer gave us content that he wants to be displayed on the site in the following format:

Press + to interact
{
	menu: [
		'Main',
		'Products',
		'Team',
		'About'		  		
	],
	products: [
	  	{
	  		name: 'Apple',
	  		image: 'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSwrBajv_F7ZPPzcqzoiC5oixHg84qg3UupZfaFXp_X4ZDuinnCRQ'
	  	},
	  	{
	  		name: 'Orange',
	  		image: 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTW3NSNIUKG55QARuAPfK1MrfhIyJf9_kuEmxhzaNot53Rk94hVNw'
	  	},
	  	{
	  		name: 'Peach',
	  		image: 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ_miM9U4mx8rzuQ6cY6NNHycdlMwhrWFRQ3i3R6qqLJPHqfQym'
	  	}
	],
	team: [
	  	{
	  		name: 'Big Boss',
	  		image: 'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTrn9qwF2FxHKgqkVzjq5uZlodlg4M93gGWVa1Z1jaQbkHmVGhXYQ',
	  		description: 'CEO'
	  	},
	  	{
	  		name: 'Tech Big Boss',
	  		image: 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTkjrLvNVhBZzDM5yRURfCZJLtFbPHr2A0_itlR-TafpEz36Aad',
	  		description: 'CTO'
	  	}
	],
	about: "Some words about company"
}

Let's just write a simple component that dumps the given input on screen. Click Run to ...

Access this course and 1200+ top-rated courses and projects.

Create a free account to view this lesson.

By signing up, you agree to Educative's Terms of Service and Privacy Policy