Day-33 Understanding JS vs JSX & a Gentle Intro to Hooks in React

When you're starting your journey in React, you'll come across two important terms—JS and JSX, and soon after, you'll meet Hooks. Today, I’m sharing what I learned about the difference between JS and JSX, and a simple introduction to React Hooks.

What is JavaScript (JS)?

JavaScript is a popular, high-level programming language used for making web pages interactive. It’s the core language that powers logic in web development.

Examples:

const name = "Tamil";
console.log("Hello " + name);

You can use JS to:

• Create variables and functions
• Manipulate the DOM
• Handle events
• Make API calls

What is JSX?

JSX stands for JavaScript XML. It's a syntax extension for JavaScript used with React. JSX allows you to write HTML-like code inside your JavaScript files.

Example:

const element = <h1>Hello, Tamil!</h1>;

This looks like HTML, but it's actually JavaScript under the hood!

JS vs JSX – Key Differences

In short: JS is the brain, JSX is the body in a React application.

Introduction to React Hooks

React Hooks are functions that let you “hook into” React features in function components. Before hooks, only class components could use things like state or lifecycle methods.

There are different types of hooks like:

• useState – for managing state
• useEffect – for side effects like API calls
• useRef, useContext, and even custom hooks

Hooks help you write cleaner, simpler, and more reusable logic using functional components.

Final Thoughts

• JS is the foundation of web development.
• JSX makes writing UI code in React more intuitive.
• Hooks simplify working with state and logic in function components.

This is just the beginning of your React journey. Tomorrow, I’ll dive deeper into React Hooks!
.