DEV Community

kanaga vimala
kanaga vimala

Posted on

The difference between JS (JavaScript) and JSX (JavaScript XML)

🔹 JavaScript (JS)

  • Standard programming language used for web development.
  • Follows ECMAScript standards.
  • Can be run in browsers or with Node.js.
  • Used for general-purpose programming: logic, APIs, data handling, etc.

Example: 

const name = "Alice";
console.log("Hello, " + name);
Enter fullscreen mode Exit fullscreen mode

🔹 JSX (JavaScript XML)

  • Syntax extension for JavaScript.
  • Allows you to write HTML-like code inside JavaScript.
  • Used mainly with React to define UI components.
  • Not valid JavaScript by itself — it needs to be transpiled (e.g., by Babel) into JS.

Example: 

const element = <h1>Hello, world!</h1>;
Enter fullscreen mode Exit fullscreen mode

This compiles to:

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

🧠 Key Differences

Feature JavaScript (JS) JSX
Syntax Standard JS HTML-like embedded in JS
Usage General-purpose UI components in React
Processing Runs as-is Needs transpilation
Developer Tools Supported everywhere Mainly used with React & Babel/Webpack
Learning Curve Easier for beginners Requires understanding of React & Babel

✅ When to Use What?

  • Use JS for any kind of logic, data handling, API calls, etc.
  • Use JSX when building React components and writing UI code that looks like HTML.

If you're building a React app, you'll typically use both together. JSX makes your UI code much cleaner and more readable.

Component

In React, a component is a reusable, independent piece of UI. Think of components as building blocks of a user interface. React components can be written as functions or classes, with function components being more common today (especially with Hooks).

🔸 Types of Components in React

1. Functional Component (Modern & Preferred) 

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}
Enter fullscreen mode Exit fullscreen mode

Or with arrow function:

const Welcome = ({ name }) => <h1>Hello, {name}!</h1>;
Enter fullscreen mode Exit fullscreen mode

2. Class Component (Older Syntax) 

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}
Enter fullscreen mode Exit fullscreen mode

🔹 Component Basics

  • Components accept props (inputs).
  • Components return JSX to describe UI.
  • Functional components can use Hooks for state and lifecycle methods.

🔸 Example: Simple React App with a Component 

// App.js
import React from 'react';

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Output: 

Hello, Alice!
Hello, Bob!
Enter fullscreen mode Exit fullscreen mode

🔹 Components Can Have:

  • Props: External data passed to the component.
  • State: Internal data that changes over time.
  • Lifecycle: (e.g. useEffect) logic that runs at specific points in the component's life.

🔸 React Component Naming Convention

  • Start with capital letters: MyComponent
  • File names often match the component: MyComponent.js or MyComponent.jsx

Let me know if you want to dive into:

  • How to use state in a component (useState)
  • How to handle events in components
  • Props vs state
  • Reusable component patterns

Top comments (0)