Components are the building blocks of React. They help you divide the functionality of the UI into several pieces which can be reused throughout the application. You can inject value into props as given below:
First, we define our Component (this is a functional, stateless component). It takes a single argument, `props`, and from this object, only the value `name` is ever used. We could replace this with a `firstName` and `lastName` if we wanted. But we don't right now.
Second, the Welcome component is called with the value ```name="Faisal Arkan"```. This will be assigned to ```{props.name}``` in our component. The Welcome component called with this name returns the element ```<h1>Hello, Faisal Arkan</h1>```. We save this into the const variable ```element```.
The value `name="Faisal Arkan"` will be assigned to `{props.name}` from `function Welcome(props)` and returns a component `<h1>Hello, Faisal Arkan</h1>` which is saved into the const variable `element`. The component can then be rendered via `ReactDOM.render(element, document.getElementById('root'));`. `document.getElementById('root')` in this case is the target location you would like the `element` component to be rendered.
There are many ways to declare components when using React.js, but there are two kinds of components, ***stateless*** components and ***stateful*** components.
Briefly, stateful components are clever. They can hold their own information (in the `state` object) *and* inherit `props` (as seen above) from parents. Stateless components can *only* inherit `props`, so if they need to update they have to be told by their parent.
See the below examples of af Cat component. The stateful Cat component is aware of its feeling, the stateless one is not.