Understanding Components and Props in React.

[Sascha]

Introduction

My quest into React began with these two very special words: components and props. If you went to ask any expert in the field of software development, they would probably give you some scientific meaning of the two words that they learned, maybe from their university or an online lesson on a platform like YouTube. On the other hand, I decided to provide a straightforward explanation of these two terms. These are the definitions that I learned from my instructors at Moringa School

Components
They are building blocks that make up a React app.
They are useful as :

• 
  They help developers split their apps into separate files.
  
  
• 
  They help keep the code clean and easily maintainable.
  
  
• 
  Enable one to build apps from scratch.
  
  
• 
  You can be able to reuse parts of the app in different places.
  

You can have components such as ;

1.<Header/>
2. <Instruction/>
3.<Movie/>
and so much more.

Props.
They are a short form of 'Properties'. These are messages that you pass into components. They enable one to customize the output. You can write one component, but you can use it in many different ways using props. An example is as such;

1.<Movie name='The Sandman'/>
2<Header Title='Learnig React/>

To simplify them even further, think of components as an ice cream truck, while props are a different flavour of ice cream.

What I learned
I realized that when you make a component, you have to use knowledge based on JavaScript, and that you have to render it for it to function. For now, that is a different topic from the one that I am talking about, but to explain it briefly, rendering is showing something on the screen.

Источник:

Пожалуйста Авторизируйтесь или Зарегистрируйтесь для просмотра скрытого текста.