𝗨𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱𝗶𝗻𝗴 𝗥𝗲𝗮𝗰𝘁 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀 𝗮𝗻𝗱 𝗣𝗿𝗼𝗽𝘀

𝗨𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱𝗶𝗻𝗴 𝗥𝗲𝗮𝗰𝘁 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀 𝗮𝗻𝗱 𝗣𝗿𝗼𝗽𝘀

Learn React components and props. This is part two of the intro series.

Components are small building blocks for your page. They create buttons and input boxes.

Use .jsx files to define them. Export your components to use them across your app.

You have two options for functions:

• Regular functions
• Arrow functions Both give the same result.

Import components into your App.jsx file to see them work.

Props are properties. They pass data between components. Props work like HTML attributes.

Use destructuring to access props. Use {color, make, model} instead of props.color.

Props send data from parent to child. They also send functions from parent to child.

Avoid prop drilling. Prop drilling happens when you pass props through too many levels. It causes unnecessary rerenders.

Try these tasks:

• Build a child component with a button to increment a counter on the parent.
• Build a color changer using an input field and a box.

Source: https://dev.to/silaslelei/understanding-components-and-props-94o