## What is React? When **React** was introduced by Facebook in 2013, it was nothing short of revolutionary. It gave developers the power to build highly dynamic and interactive user interfaces using **components** and a **virtual DOM**, which drastically improved performance for large-scale, state-driven applications. The **developer experience** with React was (and still is) smooth, declarative, and expressive. It quickly became one of the most widely adopted libraries in the JavaScript ecosystem, powering platforms like Instagram, Facebook, Airbnb, and many more. - React is a JavaScript library for building user interfaces. - React is used to build single-page applications. - React allows us to create reusable UI components. - 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's goal is in many ways to render HTML in a web page. - React renders HTML to the web page by using a function called `createRoot()` and its method `render()`. --- ## Virtual DOM (Document Object Model) - It's nothing but the replica of the original DOM. - After any changes in the virtual DOM, first the vdom will compare the changes with the odom and then only that changes will be updated and not the whole DOM. --- ## React Lifecycle Methods You can work with them using the `useEffect` hook. It's like a cycle from birth to death: - When your component first gets created it will get attached to the DOM and that is called `componentDidMount` → by writing inside the `useEffect`. - After the completion of the work of the component you can remove them from the DOM and that method is called `componentWillUnmount` → by returning from the `useEffect`. --- ## React JSX - JSX allows you to write HTML tags inside the JavaScript code. - The HTML code must be wrapped in **ONE top level element**. - You can use a "fragment" (`<>`) to wrap multiple lines. - When JSX is rendered, it translates `className` attributes into `class` attributes. - **There are only 3 rules for JSX:** 1. Return a single root element 2. Close all the tags 3. camelCase most of the things! ### Expressions in JSX Write expressions inside curly braces `{ }`. ```jsx const myElement =

React is {5 + 5} times better with JSX

``` ### Multiple Lines in JSX Use parentheses: ```jsx const myElement = (

Apples
Bananas
Cherries

) ``` ### Conditions — if Statements React supports if statements, but not inside JSX. ```jsx const x = 5 let text = "Goodbye" if (x < 10) { text = "Hello" } const myElement =

{text}

``` Use a ternary expression inside JSX: ```jsx const x = 5 const myElement =

{x < 10 ? "Hello" : "Goodbye"}

``` --- ## React Components - When creating a React component, the component's name **MUST** start with an upper case letter. - Two types: **Class components** and **Function components**. - In older React code bases, you may find Class components primarily used. It is now suggested to use Function components along with Hooks. ### Function Component ```jsx function Car() { return

Hi, I am a Car!

} ``` ### Rendering a Component ```jsx ``` ### Props (Properties) Props are like function arguments, and you send them into the component as attributes. ```jsx function Car(props) { return

I am a {props.color} Car!

} ; ``` ### Components in Components We can refer to components inside other components: ```jsx function Car() { return

I am a Car!

} function Garage() { return ( <>

Who lives in my Garage?

) } ``` ### Components in Files ```jsx // file1.js function Car() { return

Hi, I am a Car!

} export default Car // file2.js import Car from "./Car.js" function Garage() { return ( <>

Who lives in my Garage?

) } ``` --- ## React Props - Props are arguments passed into React components. - Props are passed to components via HTML attributes. ```jsx function Car(props) { return

I am a {props.brand}!

} function Garage() { const carName = "Ford" return ( <>

Who lives in my garage?

) } ``` --- ## React Events - React has the same events as HTML: click, change, mouseover, etc. - React events are written in camelCase syntax: `onClick` instead of `onclick`. - React event handlers are written inside curly braces: `onClick={shoot}`. ```jsx function Football() { const shoot = () => { alert("Great Shot!") } return } ``` ### Passing Arguments Send value as a parameter to the function, using arrow function: ```jsx function Football() { const shoot = (a) => { alert(a) } return } ``` ### React Event Object Event handlers have access to the React event that triggered the function. ```jsx function Football() { const shoot = (a) => { alert(a.type) } return } ``` --- ## React Conditional Rendering - if Statement - Logical && Operator - Ternary Operator ### 1. if Statement Two functions will render conditionally: ```jsx function MissedGoal() { return

MISSED!

} function MadeGoal() { return

Goal!

} function Goal(props) { const isGoal = props.isGoal if (isGoal) { return } return } // MissedGoal will run ; ``` ### 2. Logical && Operator If cars have length only then render: ```jsx function Garage(props) { const cars = props.cars return ( <>

Garage

{cars.length > 0 &&

You have {cars.length} cars in your garage.

} ) } const cars = ["Ford", "BMW", "Audi"] ; ``` ### 3. Ternary Operator You can directly use ternary operator inside the return: ```jsx function Goal(props) { const isGoal = props.isGoal return <>{isGoal ? : } } ``` --- ## React Lists - The JavaScript `map()` array method is generally the preferred method to render lists. ### Keys Keys allow React to keep track of elements. This way, if an item is updated or removed, only that item will be re-rendered instead of the entire list. Generally, the key should be a unique ID assigned to each item. As a last resort, you can use the array index as a key. ```jsx function Car(props) { return

I am a {props.brand}

} function Garage() { const cars = [ { id: 1, brand: "Ford" }, { id: 2, brand: "BMW" }, { id: 3, brand: "Audi" }, ] return ( <>

Who lives in my garage?

))}

) } ``` --- ## React Forms - In HTML, form data is usually handled by the DOM. - In React, form data is usually handled by the components. - When the data is handled by the components, all the data is stored in the component state. - You can control changes by adding event handlers in the `onChange` attribute. ### 1. Multiple Input Fields ```jsx function MyForm() { const [inputs, setInputs] = useState({}) const handleChange = (event) => { const name = event.target.name const value = event.target.value setInputs((values) => ({ ...values, [name]: value })) } const handleSubmit = (event) => { event.preventDefault() alert(inputs) } return ( ) } ``` ### 2. Textarea ```jsx function MyForm() { const [textarea, setTextarea] = useState( "The content of a textarea goes in the value attribute", ) const handleChange = (event) => { setTextarea(event.target.value) } return (

</form>
  )
}
```

### 3. Select

```jsx
function MyForm() {
  const [myCar, setMyCar] = useState("Volvo")
  const handleChange = (event) => {
    setMyCar(event.target.value)
  }
  return (
    <form>
      <select value={myCar} onChange={handleChange}>
        <option value="Ford">Ford</option>
        <option value="Volvo" selected>
          Volvo
        </option>
        <option value="Fiat">Fiat</option>
      </select>
    </form>
  )
}
```

---

## React Router

React Router is the most popular solution for page routing.

### 1. Main Page

```jsx
import { BrowserRouter, Routes, Route } from "react-router-dom"
import Layout from "./pages/Layout"
import Home from "./pages/Home"
import Blogs from "./pages/Blogs"
import Contact from "./pages/Contact"
import NoPage from "./pages/NoPage"

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="blogs" element={<Blogs />} />
          <Route path="contact" element={<Contact />} />
          <Route path="*" element={<NoPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  )
}
```

### 2. Pages / Components

The Layout component has `<Outlet>` and `<Link>` elements. The `<Outlet>` renders the current route selected. `<Link>` is used to set the URL and keep track of browsing history. Anytime we link to an internal path, we will use `<Link>` instead of `<a href="">`.

```jsx
import { Outlet, Link } from "react-router-dom"

const Layout = () => {
  return (
    <>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/blogs">Blogs</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>

<Outlet />
    </>
  )
}

export default Layout
```

---

## React Memo

Using `memo` will cause React to skip rendering a component if its props have not changed. This can improve performance.

```jsx
// index.js
import { useState } from "react"
import ReactDOM from "react-dom/client"
import Todos from "./Todos"

const App = () => {
  const [count, setCount] = useState(0)
  const [todos, setTodos] = useState(["todo 1", "todo 2"])

const increment = () => {
    setCount((c) => c + 1)
  }

return (
    <>
      <Todos todos={todos} />
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
      </div>
    </>
  )
}
```

```jsx
// Todos.js
import { memo } from "react"

const Todos = ({ todos }) => {
  console.log("child render")
  return (
    <>
      <h2>My Todos</h2>
      {todos.map((todo, index) => {
        return <p key={index}>{todo}</p>
      })}
    </>
  )
}

export default memo(Todos)
```

---

## Styling React Using CSS

There are many ways to use CSS in React. You can also create and import CSS modules. **Use Tailwind for it.**

### Inline Styling

**CamelCased Property Names:** Use `backgroundColor` instead of `background-color`.

```jsx
const Header = () => {
  return (
    <>
      <h1 style={{ backgroundColor: "lightblue" }}>Hello Style!</h1>
      <p>Add a little style!</p>
    </>
  )
}
```

### JavaScript Object

Create a style object named `myStyle`:

```jsx
const Header = () => {
  const myStyle = {
    color: "white",
    backgroundColor: "DodgerBlue",
    padding: "10px",
    fontFamily: "Sans-Serif",
  }
  return (
    <>
      <h1 style={myStyle}>Hello Style!</h1>
      <p>Add a little style!</p>
    </>
  )
}
```

---

## React Hooks

Hooks allow us to "hook" into React features such as state and lifecycle methods. You must import Hooks from react.

**3 rules for hooks:**

1. Hooks can only be called inside React function components.
2. Hooks can only be called at the top level of a component.
3. Hooks cannot be conditional.

---

## React useState Hook

The React `useState` Hook allows us to track state in a function component.

- **Initialize:** `const [color, setColor] = useState("red");`
- **Read:** The value of `color` is `"red"`.
- **Update:** Use the state updater function. Never directly update state (e.g., `color = "red"` is not allowed).

```jsx
import { useState } from "react"

function FavoriteColor() {
  const [color, setColor] = useState("red")

return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button type="button" onClick={() => setColor("blue")}>
        Blue
      </button>
    </>
  )
}
```

### Updating Objects and Arrays in State

When state is updated, the entire state gets overwritten. Use the JavaScript spread operator to update nested properties.

```jsx
function Car() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red",
  })

const updateColor = () => {
    setCar((previousState) => {
      return { ...previousState, color: "blue" }
    })
  }

return (
    <>
      <h1>My {car.brand}</h1>
      <p>
        It is a {car.color} {car.model} from {car.year}.
      </p>
      <button type="button" onClick={updateColor}>
        Blue
      </button>
    </>
  )
}
```

---

## React useEffect Hook

The `useEffect` Hook allows you to perform side effects in your components. Some examples of side effects are: fetching data, directly updating the DOM, and timers. `useEffect` accepts two arguments. The second argument is optional.

```jsx
useEffect(() => {}, [dependency])
```

### Three dependency scenarios:

1. **No dependency passed:** Runs on every render.
2. **An empty array:** Runs only on the first render.
3. **Props or state values:** Runs on the first render and any time any dependency value changes.

```jsx
import { useState, useEffect } from "react"

function Timer() {
  const [count, setCount] = useState(0)

useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1)
    }, 1000)
  }, [])

return <h1>I have rendered {count} times!</h1>
}
```

### Effect Cleanup

Some effects require cleanup to reduce memory leaks. Timeouts, subscriptions, event listeners, and other effects that are no longer needed should be disposed. We do this by including a return function at the end of the `useEffect` Hook.

```jsx
import { useState, useEffect } from "react"

function Timer() {
  const [count, setCount] = useState(0)

useEffect(() => {
    let timer = setTimeout(() => {
      setCount((count) => count + 1)
    }, 1000)

return () => clearTimeout(timer)
  }, [])

return <h1>I've rendered {count} times!</h1>
}
```

---

## React useContext Hook

React Context is a way to manage state globally. It can be used together with the `useState` Hook to share state between deeply nested components more easily than with `useState` alone.

### The Problem

State should be held by the highest parent component in the stack that requires access to the state. Without Context, you need to pass state as "props" through each nested component — this is called "prop drilling".

### The Solution

Create context. Use the Context Provider to wrap the tree of components that need the state. All components in this tree will have access to the user Context.

```jsx
import { useState, createContext } from "react"

const UserContext = createContext()

function Component1() {
  const [user, setUser] = useState("Jesse Hall")

return (
    <UserContext.Provider value={user}>
      <h1>{`Hello ${user}!`}</h1>
      <Component2 user={user} />
    </UserContext.Provider>
  )
}
```

```jsx
import { useContext } from "react"

function Component5() {
  const user = useContext(UserContext)

return (
    <>
      <h1>Component 5</h1>
      <h2>{`Hello ${user} again!`}</h2>
    </>
  )
}
```

---

## React useRef Hook

The `useRef` Hook allows you to persist values between renders. It can be used to store a mutable value that does not cause a re-render when updated. It can be used to access a DOM element directly.

### 1. Does Not Cause Re-renders

```jsx
import { useState, useEffect, useRef } from "react"

function App() {
  const [inputValue, setInputValue] = useState("")
  const count = useRef(0)

useEffect(() => {
    count.current = count.current + 1
  })

return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h1>Render Count: {count.current}</h1>
    </>
  )
}
```

### 2. Accessing DOM Elements

```jsx
import { useRef } from "react"

function App() {
  const inputElement = useRef()

const focusInput = () => {
    inputElement.current.focus()
  }

return (
    <>
      <input type="text" ref={inputElement} />
      <button onClick={focusInput}>Focus Input</button>
    </>
  )
}
```

### 3. Tracking State Changes

```jsx
import { useState, useEffect, useRef } from "react"

function App() {
  const [inputValue, setInputValue] = useState("")
  const previousInputValue = useRef("")

useEffect(() => {
    previousInputValue.current = inputValue
  }, [inputValue])

return (
    <>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <h2>Current Value: {inputValue}</h2>
      <h2>Previous Value: {previousInputValue.current}</h2>
    </>
  )
}
```

---

## React useReducer Hook

The `useReducer` Hook is similar to the `useState` Hook. It is useful for managing complex state logic in functional components.

`useReducer` accepts two arguments: `useReducer(<reducer>, <initialState>)`. The reducer function contains your custom state logic and the initialState can be a simple value but generally will contain an object. It returns the current state and a dispatch method.

```jsx
import { useReducer } from "react"

const initialTodos = [
  { id: 1, title: "Todo 1", complete: false },
  { id: 2, title: "Todo 2", complete: false },
]

const reducer = (state, action) => {
  switch (action.type) {
    case "COMPLETE":
      return state.map((todo) => {
        if (todo.id === action.id) {
          return { ...todo, complete: !todo.complete }
        } else {
          return todo
        }
      })
    default:
      return state
  }
}

function Todos() {
  const [todos, dispatch] = useReducer(reducer, initialTodos)

const handleComplete = (todo) => {
    dispatch({ type: "COMPLETE", id: todo.id })
  }

return (
    <>
      {todos.map((todo) => (
        <div key={todo.id}>
          <label>
            <input
              type="checkbox"
              checked={todo.complete}
              onChange={() => handleComplete(todo)}
            />
            {todo.title}
          </label>
        </div>
      ))}
    </>
  )
}
```

---

## React useCallback Hook

The React `useCallback` Hook returns a memoized callback function. Think of memoization as caching a value so that it does not need to be recalculated. This allows us to isolate resource intensive functions so that they will not automatically run on every render. The `useCallback` Hook only runs when one of its dependencies update.

```jsx
// main component
import { useState, useCallback } from "react"
import Todos from "./Todos"

const App = () => {
  const [count, setCount] = useState(0)
  const [todos, setTodos] = useState([])

const increment = () => {
    setCount((c) => c + 1)
  }

const addTodo = useCallback(() => {
    setTodos((t) => [...t, "New Todo"])
  }, [todos])

return (
    <>
      <Todos todos={todos} addTodo={addTodo} />
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
      </div>
    </>
  )
}
```

```jsx
// Todo component
import { memo } from "react"

const Todos = ({ todos, addTodo }) => {
  console.log("child render")
  return (
    <>
      <h2>My Todos</h2>
      {todos.map((todo, index) => {
        return <p key={index}>{todo}</p>
      })}
      <button onClick={addTodo}>Add Todo</button>
    </>
  )
}

export default memo(Todos)
```

> Every time a component re-renders, its functions get recreated. Because of this, the `addTodo` function has actually changed — and the `addTodo` prop change causes `memo` to not prevent re-rendering. `useCallback` fixes this by memoizing the function.

---

## React useMemo Hook

The `useCallback` and `useMemo` Hooks are similar. The main difference is that `useMemo` returns a memoized value and `useCallback` returns a memoized function.

```jsx
import { useState, useMemo } from "react"

const App = () => {
  const [count, setCount] = useState(0)
  const [todos, setTodos] = useState([])

const calculation = useMemo(() => expensiveCalculation(count), [count])

const increment = () => {
    setCount((c) => c + 1)
  }

const addTodo = () => {
    setTodos((t) => [...t, "New Todo"])
  }

return (
    <div>
      <div>
        <h2>My Todos</h2>
        {todos.map((todo, index) => {
          return <p key={index}>{todo}</p>
        })}
        <button onClick={addTodo}>Add Todo</button>
      </div>
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
        <h2>Expensive Calculation</h2>
        {calculation}
      </div>
    </div>
  )
}

const expensiveCalculation = (num) => {
  console.log("Calculating...")
  for (let i = 0; i < 1000000000; i++) {
    num += 1
  }
  return num
}
```

---

## React Custom Hooks

Hooks are reusable functions. When you have component logic that needs to be used by multiple components, we can extract that logic to a custom Hook. Custom Hooks start with `"use"`. Example: `useFetch`.

```jsx
// useFetch.js
import { useState, useEffect } from "react"

const useFetch = (url) => {
  const [data, setData] = useState(null)

useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => setData(data))
  }, [url])

return [data]
}

export default useFetch
```

```jsx
// index.js
import useFetch from "./useFetch"

const Home = () => {
  const [data] = useFetch("https://jsonplaceholder.typicode.com/todos")

return (
    <>
      {data &&
        data.map((item) => {
          return <p key={item.id}>{item.title}</p>
        })}
    </>
  )
}
```

---

## React Limitations: SEO and Performance

While React apps offer **great interactivity**, they do so by rendering content **on the client-side**. This means that when a user (or a web crawler) visits a React-powered site, the browser initially receives:

```html
<html>
  <head>
    
  </head>
  <body>
    <div id="root"></div>
    <script src="/static/js/bundle.js"></script>
  </body>
</html>
```

What's missing? The **actual page content**.

For a search engine crawler (like Googlebot or DuckDuckBot), this is problematic. These crawlers ideally need to see your actual content — **headings, paragraphs, links, metadata** — right away to **index and rank** the page properly.

### Common issues with React in traditional setups:

1. **No Server-Side Rendering (SSR) by default**
   React renders the page content in the browser after loading JavaScript. By the time content appears, crawlers may have already skipped or misinterpreted the page.

2. **Poor SEO performance**
   Since crawlers often don't wait for JavaScript to fully execute, your React app might not display any meaningful content to them, leading to **low search rankings**.

3. **Excessive Re-rendering**
   If not carefully architected, React components can **re-render too frequently**, causing performance issues, jankiness, or memory leaks — especially in large applications.

### What Crawlers See in a Basic React App

```html
<html>
  <head>
    <title>My Website</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="/static/js/main.js"></script>
  </body>
</html>
```

There's **no meaningful content** for the crawler to index — only a `<div id="root">`, waiting for JavaScript to render the rest of the app. This results in:

- Lower rankings in search engines
- Poor previews in social media sharing
- Weak initial performance for users on slow networks

---

## Solutions and Best Practices

To overcome these limitations, developers turned to **enhanced frameworks** or returned to **simpler stacks** for specific use cases.

### 1. Write in Plain HTML, CSS, and JavaScript

For **simple static websites**, such as blogs, documentation, or portfolios, sticking to the basics ensures full SEO support and fast load times.

**Pros:**

- Full control
- Zero client-side dependencies
- SEO-friendly
- Blazingly fast performance

### 2. Use Next.js — React with SSR and SSG Built-In

[Next.js](https://nextjs.org) is a powerful React framework built by Vercel that solves many of React's shortcomings:

- Server-Side Rendering (SSR)
- Static Site Generation (SSG)
- Built-in routing
- File-based structure
- Automatic code splitting

It combines the flexibility of React with the **performance and SEO-friendliness** of server-rendered pages.

### 3. Use Astro — Best for Static Sites

[Astro](https://astro.build) is a modern static site builder designed for content-heavy websites. It allows you to write in multiple frameworks (React, Vue, Svelte, etc.) but **renders the site as static HTML** with **zero JavaScript by default**.

Ideal for:

- Blogs
- Marketing websites
- Documentation

Astro delivers the **best of both worlds**: SEO-optimized static output, while still letting you opt-in to JavaScript for interactivity when needed.

---

## Conclusion

React is still a **powerful tool**, but it's not a one-size-fits-all solution — especially when it comes to SEO and performance. Understanding its limitations and pairing it with the right architecture or framework is key to building fast, scalable, and discoverable websites.

Whether you go with:

- **Plain HTML/CSS/JS** for simplicity and speed,
- **Next.js** for dynamic but SEO-friendly React apps, or
- **Astro** for blazing-fast static sites,

...you'll be making a more informed and strategic choice depending on your project's needs.</article></body></html>

things & thoughts