React Basics for Beginners: Components, JSX, Props, and State Explained

React is a JavaScript library for building modern, interactive user interfaces. Understanding its core concepts will help you create scalable and maintainable applications.

Components: Building Blocks of React

Components help developers break complex interfaces into manageable and reusable pieces.

Example of a simple component:

function Welcome() {
  return <h1>Hello, world!</h1>;
}

Components can represent anything from a single button to an entire page section, allowing you to organize your application efficiently.

JSX: Writing UI in JavaScript

React uses JSX, a syntax extension that allows you to write HTML-like structures directly inside JavaScript.

Example:

const element = <p>This is JSX content.</p>;

JSX makes UI definitions more readable and easier to reason about compared to manual DOM manipulation.

Props: Passing Data Between Components

Props (short for properties) allow data to flow from parent components to child components.

Example:

function Greeting(props) {
  return <h2>Hello, {props.name}</h2>;
}

<Greeting name="Developer" />

Props make components dynamic and reusable by allowing them to receive external data.

State: Managing Dynamic Data

State represents data that changes over time within a component. When state updates, React automatically re-renders the UI.

Example using hooks:

import { useState } from "react";

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

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

State is essential for handling user interactions and dynamic interfaces.

Event Handling in React

React handles events similarly to standard JavaScript but uses a consistent syntax across components.

Example:

function Button() {
  function handleClick() {
    console.log("Button clicked");
  }

  return <button onClick={handleClick}>Click me</button>;
}

Events allow components to respond to user actions such as clicks or input changes.

Why React Is Popular

Developers choose React because it offers:

• Predictable UI behavior
• Reusable component structures
• Efficient updates through virtual DOM techniques
• Strong ecosystem and community support
• Compatibility with modern web workflows

These benefits make React suitable for both small projects and large-scale applications.

Final Thoughts

Learning React starts with understanding its core building blocks:

• Components structure the interface
• JSX defines how UI elements appear
• Props enable reusable data-driven components
• State manages dynamic interactions

Once you grasp these concepts, building modern interactive interfaces becomes significantly more approachable.

Upcoming articles will explore React project structure, hooks in depth, performance patterns, and practical frontend architecture strategies.