JSX(JavaScript XML) is recommended for writing HTML in React Apps. Although, browsers cannot understand JSX syntax, hence there is a need to transform JSX into simple JavaScript function. This is an in-depth article on the topic.

Contents:

  1. Simple “Hello React” App
  2. Parameters for ReactDOM.render()
  3. Extending “Hello React” App with JSX
  4. JSX transformation through Babel

Simple “Hello React” App

Before looking at JSX , let’s first try to create our very first and very simple React App. We will just render “Hello React” on the browser through React. Go ahead and create a react app , we chose create-react-app to create the app. Now to create our “Hello React” app is just as simple as writing the below code at src/index.js:

import ReactDOM from 'react-dom';
ReactDOM.render(
"Hello React!",
document.getElementById('root')
)

Chaitanya Srivastav

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store