React Introduction

What is React?
React is a front-end JavaScript library.

React was developed by the Facebook Software Engineer Jordan Walke.

React is also known as React.js or ReactJS.

React is a tool for building UI components.

How does React Work?
React creates a VIRTUAL DOM in memory.

Instead of manipulating the browser's DOM directly, React creates a virtual DOM in memory, where it does all the necessary manipulating, before making the changes in the browser DOM.

React only changes what needs to be changed!

React finds out what changes have been made, and changes only what needs to be changed.

You will learn the various aspects of how React does this in the rest of this tutorial.

What You Should Already Know
Before you continue you should have a basic understanding of the following:

HTML
CSS
JavaScript
If you want to study these subjects first, find the tutorials on our Home page.

React.JS History
Latest version of React.JS is 19.0.0 (December 2024).

Initial release to the Public (version 0.3.0) was in July 2013.

React.JS was first used in 2011 for Facebook's Newsfeed feature.

Facebook Software Engineer, Jordan Walke, created it.

. Virtual DOM
React uses a Virtual DOM to optimize UI rendering. Instead of updating the entire real DOM directly, React:

Creates a lightweight copy of the DOM (Virtual DOM).
Compares it with the previous version to detect changes (diffing).
Updates only the changed parts in the actual DOM (reconciliation), improving performance.

1. Component-Based Architecture React follows a component-based approach, where the UI is broken down into reusable components. These components:

Can be functional or class-based.
It allows code reusability, maintainability, and scalability.

1. JSX (JavaScript XML) React usesJSX, a syntax extension that allows developers to write HTML inside JavaScript. JSX makes the code:

More readable and expressive.
Easier to understand and debug.

1. One-Way Data Binding
   React uses one-way data binding, meaning data flows in a single direction from parent components to child components via props. This provides better control over data and helps maintain predictable behavior.

2. State Management
   React manages component state efficiently using the useState hook (for functional components) or this.state (for class components). State allows dynamic updates without reloading the page.

3. React Hooks
   Hooks allow functional components to use state and lifecycle features without needing class components. Common hooks include:

useState: for managing local state.
useEffect: for handling side effects like API calls.
useContext: for global state management.

1. React Router React provides React Router for managing navigation in single-page applications (SPAs). It enables dynamic routing without requiring full-page reloads.