Writing First React App

React Hello World App

Render a single JSX element into React DOM.

index.js

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")
)

index.html

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

index.js

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")
)

index.html

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

Grandchild.js

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

Child.js

App.js

index.js

index.html