DEV Community

SEENUVASAN P
SEENUVASAN P

Posted on

Day 12: What I Learned Today: JSX vs JS, Framework vs Library, and React Hooks

Today was a productive learning day! I explored some fundamental concepts that helped me understand React better. Here's a summary of what I learned:

JSX vs JavaScript (JS)

JavaScript (JS):
JavaScript is the core programming language used to add interactivity to websites. It's what browsers understand and run.

JSX (JavaScript XML):
JSX is a syntax extension for JavaScript used in React. It looks like HTML but is written inside JavaScript. JSX makes it easier to write and visualize the UI structure of React components.

Example

// JSX
const element = <h1>Hello, world!</h1>;

Under the hood, this JSX is converted to regular JavaScript:

// JavaScript
const element = React.createElement('h1', null, 'Hello, world!');
Enter fullscreen mode Exit fullscreen mode

Framework vs Library

This is a common point of confusion, but here's a simple way to remember:

Library: A collection of pre-written code that you can call when needed. You are in control.

    Example: React (You decide how to structure your app)

Framework: A full structure that controls the flow of your application. It tells you what to do.

    Example: Angular or Next.js (especially when used as a full-stack framework)
Enter fullscreen mode Exit fullscreen mode

Think of it like this:

A library is like ordering ingredients; a framework is like getting a meal kit with a recipe you must follow.
Enter fullscreen mode Exit fullscreen mode

Why Hooks in React?

Hooks were introduced in React 16.8 and revolutionized how we write components.

Before hooks, we needed class components to manage state and lifecycle methods. Hooks let us do that in function components, which are cleaner and easier to read.

Some common hooks: 

    useState() – for managing local state

    useEffect() – for handling side effects (e.g., fetching data)

    useContext() – for accessing context API
Enter fullscreen mode Exit fullscreen mode

Example:

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Hooks make it easier to reuse logic, avoid boilerplate, and write cleaner code.

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.