JSX & Components

Creating React Project

• We can use Nextjs if we are aiming for production grade apps

npx create-next-app@latest

• Use of Vite React tooling for vanilla React apps

npm create vite@latest app-name

• Create React App was used earlier with Webpack bundler but is not recommended anymore

npx create-react-app app-name

JSX

• JSX stands for JavaScript XML which is a syntax extension for JavaScript

• JSX is not valid JS syntax and can’t be directly understood by the browsers

• It is just React.createElement calls internally that is transpiled by Babel or SWC

• As JSX are expressions, they can be stored as values

• We can go back to JS using the {} syntax

const h1 = <h1>Hello world</h1>;

// Translates to this
const h1 = React.createElement(
  "h1",
  null,
  "Hello world"
);

JSX vs HTML

1. All the attributes with dash are camelCased instead (like aria-label will become ariaLabel)

2. The class attribute becomes className (as class is a reserved keyword)

3. Styles are given as object with each key camelCased

4. Add a trailing slash in self closing elements

5. All the event listeners need to follow camelCase

<h1 className="heading">Hello World</h1> // instead of class
<label htmlFor=""></label> // instead of for

<p>This is some text {2 + 2}</p> // Evaluate expression

One outermost element

• There’s one rule in JSX that it should only have one outermost element

• As these are two expressions and a variable can only hold one value

• Solution is to wrap them in a <> Fragment or a parent element

const paragraphs = (
  <p>I am a paragraph.</p> 
  <p>I, too, am a paragraph.</p>
);

Rendering JSX

• React relies on two things: what content to render and where to render it

• The createRoot is used to create a root on which we can render any JSX

• This render only updates what’s changed on the UI with the help of Virtual DOM

const {createRoot) from 'react-dom/client';

const element = <h1>Hello World</h1>; // JSX
const container = document.querySelector("#root");
const root = createRoot(container)

root.render(element);

Events

• Remember we don’t need to invoke the function but just pass its name

<button onClick={handleClick}>Click me</button>

Component

• It is a composable part of the UI. A component can be either small or made using other components

• A component can be created using a function or a class in React. Functional components are the future

• Components names must be PascalCase

• A component is a function that returns some JSX

Resuability

• a component can be used any number of times

• Values can be passed in via props

• Dynamic data can be inserted using {}

Conditionally Render

• We can’t use if-else condtionals directly inside JSX as it doesn’t evaluate into a value

• We can instead make use of if-else condtionals to generate some part of JSX

• Or we can use ternary operator to conditionally show some value instead

• The use of && operator is used to show a value only when a certain condition is true (because of it’s short circuiting power)

const tasty = (
  <ul>
    <li>Applesauce</li>
    { !baby && <li>Pizza</li> }
    { age > 15 && <li>Brussels Sprouts</li> }
    { age > 20 && <li>Oysters</li> }
    { age > 25 && <li>Grappa</li> }
  </ul>
);

• The use of || operator is used to show a value if a value is empty (because of it’s short circuiting power)

// This will render Title Coming...

const title = ""
const animalFacts = <h1>{title || "Title Coming..."}</h1>

.map in JSX

• When we have a collection and we need to return some elements based on it we can make use of .map on arrays

• As .map returns a new array, it is also valid JSX syntax

// This is fine in JSX, not in an explicit array:
<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

// This is also fine!
const liArray = [
  <li>item 1</li>, 
  <li>item 2</li>, 
  <li>item 3</li>
];

<ul>{liArray}</ul>

• We need to also pass some unique value named as key for each element, it’s used by react internally to know which value has updated or changed for effective re-renders

Automatic Semicolon insertion and Multiple returns

Virtual DOM

• DOM Mutations are really expensive and the problem is, we have to do them a lot

• React solves this problem by introducing something called as Virtual DOM, it’s an in memory representation of the actual DOM that tracks what’s changed by the process of Diffing

• Then instead of painting the actual DOM it after checking what has to be changed (diffing) only paints the part that has to be changed (patching)

• React performs real DOM updates in batch, which means instead of updating on every change it waits and performs them in bulk