Components And Props
Tags: react, javascript, beginners, tutorial
Published: 2020-10-30 03:55:20

**What is a component?**
In simple words, a component is just a function that returns something that is renderable (React Element, String, Number, etc.).

>  *Component name must start with capital letters*.

```js
// functional component
function Greeting() {
  return null;
}
```

**What is Props?**
Props are optional arguments that you can use to pass the data to the component.

```js
// functional component with props
function Greeting(props) {
  return <em>{props.greeting}, {props.subject}</em>;
}
```

Let's create a reusable Greeting component.

**Sample Code**
```js
function Greeting(props) {
  // jsx
  return <em>{props.greeting}, {props.subject}</em>;
}
```

**Example 1**
{% codepen https://codepen.io/bipinrajbhar/pen/oNLEbag %}

**What is PropTypes?**
PropTypes allows you to validate the property of the component at runtime.

> *PropTypes validation feature is only available in the development.*

Let's validate the ``greeting`` and ``subject`` property of the Greeting component.

**Sample Code**
```html
<script type="text/babel">
  function Greeting(props) {
    return <em>{props.greeting}, {props.subject}</em>
  }
  
  // propType validation
  const PropTypes = {
    string(props, propName, componentName) {
      console.log()
      if(typeof props[propName] !== 'string') {
        console.log()
        throw new Error(`${propName} must be string for the ${componentName} component but you have passed ${typeof props[propName]}.`);
      }
    }
  }
  
  Greeting.propTypes = {
    greeting: PropTypes.string,
    subject: PropTypes.string
  }
      
  ReactDOM.render(<Greeting greeting="Hello" subject="Bipin Rajbhar"/>, document.getElementById('root'));
</script>
```
> *If the type of ``greeting`` and ``subject`` is other than the string, it will throw an error.*

**Example 2**
{% codepen https://codepen.io/bipinrajbhar/pen/QWEQezO %}

**Using the prop-types package**
As it turns out, you want to validate some pretty common things, so the React team maintains a package called **[props-types](https://www.npmjs.com/package/prop-types)**.

To use the prop-types package, we need to add a JavaScript file.

```html
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
```

> *Now, you have a global Object available called ``PropTypes``*.

**Sample Code**
```html
<script type="text/babel">
  function Greeting(props) {
    return <em>{props.greeting}, {props.subject}</em>
  }
  
  Greeting.propTypes = {
    greeting: PropTypes.string,
    subject: PropTypes.string
  }
      
  ReactDOM.render(<Greeting greeting="Hello" subject="Bipin Rajbhar"/>, document.getElementById('root'));
</script>
```

**Example 3**
{% codepen https://codepen.io/bipinrajbhar/pen/xxOWxGg %}

I hope you learned something from this article and if you have any doubts, please leave a comment. I will be delighted to answer all of your questions.

My name is **Bipin Rajbhar** and I am a software engineer at [QuikieApps](https://www.quikieapps.com/); and you can follow or connect to me on [Twitter](https://twitter.com/Bipin_1598) and [Linked In](https://www.linkedin.com/in/bipinrajbhar1598/)


**Read more**
* [prop-types](https://reactjs.org/docs/typechecking-with-proptypes.html)

**Resources**
[The Beginner's Guide to React](https://egghead.io/courses/the-beginner-s-guide-to-react)
[Epic React](https://epicreact.dev/)