Props in React: Simple explanation for beginners

Опубликовано: 22 Апрель 2023
на канале: Konstantyn's coding

1,103

In this video we will talk about props in React.
Props is one of the most fundamental concepts in React. They are the way of passing the information from parent components to child components. This information or data could be anything - primitive values, arrays, objects, functions.

--------------------------------
Hello, my name is Konstantyn, I'm a Frontend Engineer working in a lovely city of Warsaw. My main technology stack is React. Please ask me questions in comments and subscribe for more tutorials like this!

✅ Follow Me:
LinkedIn: / kostiantyn-burlai
Github: https://github.com/burlai

☕ Buy Me A Coffee: https://www.buymeacoffee.com/konstantyn
--------------------------------

Props inside the component look the same as attributes in HTML:
The main difference is that you can create any prop as you want.

When there is a component with props, they should be placed as a function parameter of this component. Please note that we should place props in curly braces: {}, because it a JavaScript object.

We can also define the default value for the prop:
So if `greetingTwo` will not be provided while using `SayHello` component this default value will be used.

Props are not static, so they can change over time. For example you have some interactive logic in parent component and in result some variables passed to props of the child component could be changed. Then, when those props are changed, child component rerenders according to those changes.
Example - clock component on this page:
https://react.dev/learn/passing-props...
There are two dynamic props: time prop change every second and we can change color prop manually.

This is a bit more complicated concept, but keep in mind, that props are immutable. This term means "unchangeable". It means that we can't change the prop, even if it looks like this. What React actually does, when we passing new props to the component - is replacing the whole props object with the new one.

#react #reactjs #reactjstutorial