Introduction

A JS lib for building UI, mostly for web apps.

• It’s declarative, means telling React what the UI should look like, not exactly how to update the DOM step by step.
• Components are the building blocks of React.
• Use JSX (JS+ XML) to write the component.
  • To write HTML in JS.
  • Must return a single parent element.
  • Under the hood, JSX compiles to React.createElement() calls.

<aside> 💡

Like Lego blocks: small pieces (components) can reuse to build a bigger app.

</aside>

React and Single Page Applications (SPA)

React is commonly used to create SPA:

• Faster navigation since no full page reloads.
• Better control, can manage the UI entirely with React components.
• Page state (like input values, counters) can stay persist across views without reloading.

Workflow:

1. React apps only have a HTML page (empty shell)
   1. The root, public/index.html.
2. React renders the entire UI in a single DOM element, usually <div id="root"></div>.