React 01: JSX and Printing Value in JSX

PREVIOUS BLOG:
Overview of REACT

As we all know React is a JavaScript library for building user interfaces, particularly single-page applications where you need a fast, interactive user experience. Primarly in react we will be using JSX. OKAYYY…

What is JSX?

JSX, or JavaScript XML, is a syntax extension for JavaScript. It allows you to write HTML directly within JavaScript, which makes it easier to create and render React components. With JSX, you can structure component render outputs using syntax that looks similar to HTML, making the code more readable and expressive. Under the hood, JSX gets compiled to React.createElement() calls, which produce React “elements” — JavaScript objects that describe a component’s structure.

In the Below Stackblitz Project in App js we added HTML Element in in javascript file, that’s all JSX is!, This will allow us to focus on logic building than template.

Okay, Now that we have basic understanding about JSX, Let’s move forward printing variables.
So in the below code snippet we are trying to print all the values in the JSX. That includes number, String, boolean, undefined, null.

import React from "react";
import "./style.css";

export default function App() {
  const num = 1;
  const string = 'string';
  const boolean = true;
  const undef = undefined;
  const nul = null;

  return (
    <div>
      <h1>Hello React</h1>
      <p>This is the JSX </p>
      <p>Number printing: {num}</p>
      <p>String : {string}</p>
      <p>Boolean : {boolean} </p>
      <p>Undefined : {undef}</p>
      <p>null : {nul}</p>

    </div>
  );
}

So here we are trying to print these, excpet number and string we won’t get to see the values in the DOM.
For a Note, to see those values in DOM we will have to convert into string.

STACKBLITZ LINK : https://stackblitz.com/edit/react-ne3gqu

UP NEXT BLOG:
React 02: React Components and Props 🚀

— — — —— — — FULL BLOG series will update soon :) one by one— — — — — — — — —