Introduction To Reactjs

What is React?

React (aka React.js or ReactJS) is an open-source front-end JavaScript library.

It is used for handling view layer for web and mobile apps based on components in a declarative approach.

It is used for building composable user interfaces, especially for single-page applications.

---

Key Features of React

The major features of React are:

1. Component-Based Architecture: React uses reusable components to simplify UI development and enhance scalability.
2. Declarative Syntax: Developers define the UI based on state, and React manages DOM updates automatically.
3. JSX (JavaScript XML): JSX combines HTML-like syntax with JavaScript for defining component structures.
4. Virtual DOM: React improves performance by efficiently updating the real DOM using a virtual DOM.
5. One-Way Data Binding: Data flows predictably from parent to child components via props.
6. State Management: React components manage dynamic data using state, triggering re-renders on updates.
7. Component Lifecycle: Lifecycle methods let developers run code at specific stages of a component’s existence.
8. React Router: Enables seamless navigation in single-page applications.
9. Server-Side Rendering (SSR): SSR improves performance and SEO by rendering React components on the server.
10. Ecosystem: Includes tools for state management, styling, and server-side rendering.
11. Community and Support: A large community offers resources, tutorials, and libraries for React development.

---

Declarative Approach in React

A declarative approach in programming is a style where you specify what you want to achieve, rather than providing detailed instructions on how to achieve it.

It focuses on the desired outcomes or results, leaving the implementation details to the underlying system or framework.

Example

Imagine a simple UI component, such as a "Like" button. When you tap it, it turns blue if it was previously grey, and grey if it was previously blue.

The imperative way of doing this would be:

if (user.likes()) {
  if (hasBlue()) {
    removeBlue();
    addGrey();
  } else {
    removeGrey();
    addBlue();
  }
}

Basically, you have to check what is currently on the screen and handle all the changes necessary to redraw it with the current state, including undoing the changes from the previous state. You can imagine how complex this could be in a real-world scenario.

In contrast, the declarative approach would be:

if (this.state.liked) {
  return <blueLike />;
} else {
  return <greyLike />;
}

Because the declarative approach separates concerns, this part of it only needs to handle how the UI should look in a specific state, and is therefore much simpler to understand.

Difference between Declarative and Imperative approach

Aspect	Declarative	Imperative
Definition	Describes what to do	Describes how to do it
Focus	Focuses on the outcome	Focuses on step-by-step instructions
Example (UI)	React: render() renders the view	Vanilla JS: DOM manipulation with loops/events
Flexibility	Abstract and concise	Offers fine-grained control