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
| Feature | JavaScript (JS) | JSX (JavaScript XML) |
|---|---|---|
| Syntax | Pure JavaScript | HTML-like syntax inside JavaScript |
| Use Case | General-purpose logic/code | UI structure in React components |
| Browsers | Directly understood by browsers | Needs to be transpiled (by Babel) |
| Example | const x = 10; | const el = <h1>Hello</h1>; |
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!
.