Props - a beginners guide.

Before getting to know what props are, lets have a basic understanding of what React elements and components are. Also, in this article I’ll be explaining props in the simplest way possible, for all beginners out there who can't get a good grasp around this concept.
So lets get started 💫

React components vs. Elements

As we all know, React uses JSX (JavaScript XML) instead of HTML. JSX allows you to write HTML elements in javascript files, and then translate those HTML tags to React elements.

// This is a React element, not a component
const title = <h1> Heading  </h1>;

This is how a plain <h1> tag looks inside jsx.
So basically, a React element is the smallest building block, and more elements put together form a component

Okay, lets move on to components. A React component is a javascript function which also returns the markup that we want to see (like the elements), but through classical function syntax.

function Component() {
  return <h1>This is the Text</h1>;
}

Here, the component is created as a javascript function, so it is referred to as functional component.
This component is rendered in the same way as an element, by using the render() method of the ReactDOM. But, instead of calling the function name like we do in javascript, we call the React component.

//In React
ReactDOM.render(<Component/>, document.getElementById('id'));
//In Javascript
ReactDOM.render(Component(), document.getElementById('id'));

So, a React element uses regular HTML tags, while in a React component, the function name gives the name of the tag.

Props

Props are the arguments you pass into a React component that then render a React element.It can be a string, object, array or a function used to pass dynamic data between components. React has a uni-directional data flow meaning props get passed from parent to child. Props actually gets passed into React components.

I guess that was not really helpful, so let me reword a little bit to simple language 🔍

Props are like parameters of a function. We use these to make our component dynamic like we use parameters to make our function dynamic.

Was that better? Now with this definition in mind, let me show you a quick example.
Lets look at a component to display a Welcome message to a friend in your channel.

const WelcomeFriend = () => (
    <span>Welcome to my channel, Kiran</span>
)

Now If I want to welcome to any person not just Kiran, I can refactor my component to take in a prop i.e the name of person and rename the component to any common name because now I can use this component to welcome anyone in my channel.

const Welcome = ({name}) => (
    <span>Welcome to my channel, {name}</span>
)

And Now I can Welcome many of my friends like 👇🏻

const App = () => (
    <Welcome name="Sumesh">
    <Welcome name="Keshav">
    <Welcome name="Roger">
)

I hope you found this guide helpful! ✌🏻
I welcome feedback, discussion, and suggestions for concepts you'd like to see me tackle. If you have any question regarding this or anything I should add, correct or remove, feel free to comment, email or DM me 📥.
Thanks ✨!