The Beginner's Guide To React: Components and Props
Tags: react, beginners, webdev
Published: 2020-04-01 02:33:05

> **Note:** Component is the most important concept in React.

#**What are the Components?**
Components are the building block of any React application and a typical React application is made up of these components. Simply putting, a component is like JavaScript **function** or **class** that takes **optional** inputs called **props** and returns a React element.

![](https://res.cloudinary.com/dqhskqqa6/image/upload/v1585667364/the-begineer%27s-guide-to-react/b5g4wte3q6rljw5p69lk.png)

#**What is Props?**
A React Component takes an optional input called **props** and returns a React Element.

A React Component can be created in two ways. You can use either a *class** or a **function**. A Function Component is also called **functional component**.

> **Note:** In this tutorial, we will focus on functional Component.

> **Note:** The component name must be in **CAPITAL LETTER** otherwise it will give an **error**.

**JSX Code:**
```javascript
// functional component
function Message() {
  return <h1>hello, world</h1>;
}
```

In the code given below, we created a functional component called ``Message`` and to use this functional component, use the similar syntax as normal **HTML** ``<Message />``

**JSX Code:**
```html
<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

      // functional component
      function Message() {
        return <h1>hello, world</h1>;
      }

      ReactDOM.render(<Message />, rootElement);
    </script>
</body>
```

**Output:**
![](https://res.cloudinary.com/dqhskqqa6/image/upload/v1585462098/the-begineer%27s-guide-to-react/y2um3bfwjtebodspk6sc.png)

In the code given below, we pass the ``message`` attribute as property to the ``Message`` component and to access the ``message`` property we use the syntax ``props.msg`` because props are an **Object**.

**JSX Code:**
```html
<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

      // functional component with props
      function Message(props) {
        return <h1>{props.message}</h1>;
      }

      ReactDOM.render(<Message message="Hello, World" />, rootElement);
    </script>
</body>
```

**Output:**
![](https://res.cloudinary.com/dqhskqqa6/image/upload/v1585462098/the-begineer%27s-guide-to-react/y2um3bfwjtebodspk6sc.png)

In the code give below, we wrap the ``HelloWorld`` component inside the ``Message`` component and to access the **children** of the ``Message`` component we used ``props.children`` syntax because props are an **Object**. You can wrap one or more components inside another component.

**JSX Code:**
```html
<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

      // functional component with props
      function Message(props) {
        return <h1>{props.children}</h1>;
      }

      // functional component without props
      function HelloWorld() {
        return <span>Hello, World</span>;
      }

      const element = (
        <Message>
          <HelloWorld />
        </Message>
      );

      ReactDOM.render(element, rootElement);
    </script>
</body>
```

In the code given below, we pass the ``HelloWorld`` component as an **expression** in the ``Message`` component using the ``children`` attribute.

**JSX Code:**
```html
<body>
    <div id="root">This will be replace by React</div>

    <script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.9.4/babel.js"></script>
    <script type="text/babel">
      const rootElement = document.getElementById("root");

      // functional component with props
      function Message(props) {
        return <h1>{props.children}</h1>;
      }

      function HelloWorld() {
        return <span>Hello, World</span>;
      }

      ReactDOM.render(<Message children={<HelloWorld />} />, rootElement);
    </script>
</body>
```

![](https://res.cloudinary.com/dqhskqqa6/image/upload/v1585671131/the-begineer%27s-guide-to-react/p06ga5lz2udzqtikch44.png)