# Writing First React App

## React Hello World App&#x20;

Render a single `JSX` element into `React DOM`.

{% tabs %}
{% tab title="index.js" %}

```jsx
import React from "react"
import ReactDOM from "react-dom"

// Render JSX - html like syntax extension that produces React elements
ReactDOM.render(
  <h1>Hello world!</h1>, 
  document.getElementById("root")
)
```

{% endtab %}

{% tab title="index.html" %}

```markup
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="root"></div>
        <script src="index.pack.js"></script>
    </body>
</html>
```

{% endtab %}
{% endtabs %}

To render multiple `JSX` element enclose them within a parent `div` element.

{% tabs %}
{% tab title="index.js" %}

```jsx
import React from "react"
import ReactDOM from "react-dom"

// Render JSX - html like syntax extension that produces React elements
ReactDOM.render(
  <div>
    <h1>Hello world!</h1>
    <p>This is a paragraph</p>
  </div>, 
  document.getElementById("root")
)
```

{% endtab %}

{% tab title="index.html" %}

```markup
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="root"></div>
        <script src="index.pack.js"></script>
    </body>
</html>
```

{% endtab %}
{% endtabs %}

We can use `Fragment` instead of `div` in cases where too many nested `div` elements pollute the DOM.

{% tabs %}
{% tab title="Grandchild.js" %}

```jsx
import React, {Fragment} from "react"

function Grandchild() {
    return (
        <Fragment>
            <hr />
            <h3>I'm the Grandchild component</h3>
            <p>I'm also a part of the Grandchild component</p>
        </Fragment>
    )
}

export default Grandchild
```

{% endtab %}

{% tab title="Child.js" %}

```jsx
import React, {Fragment} from "react"
import Grandchild from "./Grandchild"

function Child() {
    return (
        <Fragment>
            <h1>I'm the Child component</h1>
            <Grandchild />
        </Fragment>
    )
}

export default Child
```

{% endtab %}

{% tab title="App.js" %}

```jsx
import React, {Fragment} from "react"
import Child from "./Child"

function App() {
    return (
        <Fragment>
            <Child />
        </Fragment>
    )
}

export default App
```

{% endtab %}

{% tab title="index.js" %}

```jsx
import React from "react"
import ReactDOM from "react-dom"
import App from "./App"

ReactDOM.render(<App />, document.getElementById("root"))
```

{% endtab %}

{% tab title="index.html" %}

```jsx
<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div id="root"></div>
        <script src="index.pack.js"></script>
    </body>
</html>

```

{% endtab %}
{% endtabs %}
