React DOM

React DOM vs JavaScript DOM

The primary difference is that the JavaScript DOM (Real DOM) is the browser's live, structural representation of a webpage. In contrast, React DOM is a software library that uses an in-memory Virtual DOM to update the Real DOM efficiently. Vanilla JavaScript directly manipulates the browser's elements, while React abstracts this process away to minimise heavy browser recalculations.

Understanding React DOM (The Virtual DOM)

// React Declarative Approach
const [clicked, setClicked] = useState(false);
return (
<button onClick={() => setClicked(true)}>
{clicked? 'Clicked!': 'Click Me'}
</button>
);

Understanding JavaScript DOM (The Real DOM)

// JavaScript Imperative Approach
const button = document.querySelector('#myBtn');
button.textContent = 'Clicked!';
button.style.backgroundColor = 'blue';

---

React Components

React components are reusable UI units that handle their own logic, accept data through props, manage state, and efficiently update only the parts of the UI that change

syntax

function ComponentName() {
return (
<JSX />
);
}

Types of React Components

There are two primary types of React components:

1. Functional Components

Functional components are JavaScript functions that return React elements and are the preferred way to build modern React applications.

Can manage state and lifecycle logic using React Hooks.
Use a simpler syntax, making them ideal for reusable components.
Offer better performance by avoiding the use of the this keyword.

function Greet(props) {
return <h1>Hello, {props.name}!</h1>;
}

2. Class Components

Class components are ES6 classes in React that extend React. Component and support state and lifecycle handling.

Manage component data using this. the state property.
Use lifecycle methods such as componentDidMount and componentDidUpdate.

class Greet extends React. Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}