Getting Started with React

🚀 My React Learning Journey Begins!

Heyy Everyone! I’m Manya Mehta, a passionate learner currently diving into the world of frontend development - and i just started learning React JS!

What is React?

React is a Javascript library which is created by “FACEBOOK” and used to make dynamic UI's ( User Interfaces).

It is SPA (Single Page Application) Which means Web Application that loads a Single HTML page and dynamically updates the content without reloading the entrire page.

What is Imperative and Declarative Programming?

Imperative - Step by Step Instructions on how to perform any task. In simple language, here we manually define each step. for example, looping through numbers, squaring them, and adding it to a new array

const numbers = [1, 2, 3, 4];
const squares = []; //Empty array

for(let i = 0; i < numbers.length; i++) {    
  squares.push(numbers[i] * numbers[i]);
}

console.log(squares);  //output [1, 4, 9, 16]

Declarative - Describing what outcome we want without specifying each step. In simple language, we just have to tell what to do instead of manually defining a each step. for example, use .map for squaring and creating new array.

const numbers = [1, 2, 3, 4];
const squares = numbers.map(num => num * num);

console.log(squares); //output [1, 4, 9, 16]

In short:

• Imperative = How to do it (manual steps)

• Declarative = What to do (focus on outcome)

React is Declarative Programming

  React is Declarative Programming -- where you describe what you want to
        happen and and React takes care of the rest behind the scenes.

JSX ( Javascript XML )

JSX stands for Javascript XML used in react to describe what the UI should look like.
It allows us to write HTML like syntax inside javascript files.

Important - Browser do not understand JSX… that’s why we need BABEL.
BABEL - Babel is a javascript compiler that convert JSX into plain javascript, so that browser can understand it

Virtual DOM ( Document Object Model )

Virtual DOM is a lightweight copy of real DOM that exists in memory.

Why Does this matter ?
Direct manipulations of the real DOM is slow because broswer re-render the entire UI even for small changes.
That’s why React uses the VDOM to minimizes these re-renders and make updates faster .

How it works:
1. React first makees all UI changes in the VDOM
2. Then it compares the new VDOM with the previous one ( The old VDOM )~ This process is called diffing.
3. It identifies what has changed.
4. Only the changed elements are updated in real DOM ~ this Process in knows as Reconcillation.

Components in React

What are components?

Component is like a reusable block of code that represents a part of UI.

There are two main types of components:-
1. Functional Components (Mostly used)
2. Class Components

Functional Component Example-

function Welcome() {
  return <h2>Welcome to Manya's Blog!</h2>;
}

# Functional component - A Functional Component in React is a JavaScript function that returns JSX

Important Rule:
The name of the function must start with a capital letter, so React knows it's a component.

PROPS

What are Props in react?

Props are short of (Properties) which is used to pass data from one component to another, usually from parent to child.

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

function App() {
  return <Greeting name="Manya" />;
}

Output: Hello, Manya!

Here name="Manya" is a prop being passed to the Greeting component.