What is props in React

Components allow you to split the UI into independent and reusable pieces of code. Components are like JavaScript functions. They accept inputs called “props” and return React elements describing what should appear on the screen. Props stands for properties.

React is all about components, components can be called as custom HTML elements. Which you can later use to build your application. Components are the core building block of React apps. React is just a library for creating components. You can write JSX code with JavaScript code to build components. JSX is not HTML but it looks like it.  JSX allow you to write HTML like syntax code. There is a slight difference between JSX and HTML, such as className in JSX vs class in HTML. In below examples whatever you see in HTML kind of syntax, is JSX.

We will have a look at props with some examples in this post.

props allow you to pass data from a parent(wrapping) component to a child(embedded) component.

Example : Here name and profession are custom properties(props).

We can access props like below :

You can write components in two different ways

Functional (Stateless) Component

Below is a react component, it accepts a single props argument with data and returns React element. Such components are called as function components, because they are javascript functions. This is the simplest way to define a component.

Class(Stateful) Component

The below code is same for react as above. In below example Welcome class extends Component, so React will understand that this Welcome class is a component

React class Component is an ES6 class, and will be called component when it extends Component, it must have a render() method

, can accepts props if needed, it can maintain its own data with state