React Core Concepts & Syntax – Mastering the Building Blocks

Introduction – Why Understanding Core Concepts Matters

React.js has revolutionized frontend development with its component-driven architecture and declarative programming style. However, to effectively use React, developers must master its core concepts and syntax, such as JSX, components, props, state, and event handling.

In this guide, you’ll learn:

• Essential React concepts every developer must know
• Syntax patterns for components, props, and state
• JSX, Virtual DOM, and event binding
• Best practices with live code examples

Topics Covered

1. Components – The Heart of React

React is built around components, which are reusable and independent UI blocks.

Functional Component

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

Class Component

class Welcome extends React.Component {
  render() {
    return <h1>Hello, Class Component</h1>
  }
}

Modern React favors functional components with Hooks for state and lifecycle management.

2. JSX Syntax – JavaScript + HTML

JSX (JavaScript XML) is a syntax extension that lets you write HTML-like structures in JavaScript.

const heading = <h1 className="main">Welcome</h1>

JSX is transpiled to:

React.createElement('h1', { className: 'main' }, 'Welcome')

Key JSX Rules:

• Use className instead of class
• Use htmlFor instead of for
• Wrap multiple elements in a fragment <>...</>

3. Props – Passing Data Between Components

Props (short for properties) are used to pass data from parent to child components.

Example:

function Greet(props) {
  return <h1>Hello, {props.name}</h1>
}

<Greet name="Alice" />

Props are read-only and help keep components pure.

4. State – Managing Local Component Data

State is used to store and manage dynamic data in a component.

Using useState in Functional Components:

import { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => setCount(count + 1)}>Count: {count}</button>
  )
}

State updates re-render the component.

5. Event Handling in React

React handles events similar to HTML, but with camelCase and function references.

Example:

function ClickMe() {
  const handleClick = () => alert('Clicked!')
  return <button onClick={handleClick}>Click</button>
}

Don’t use string handlers like "onclick='...'"
Use arrow functions to avoid binding issues

6. Component Composition – Nesting Components

React allows nesting components to build complex UIs.

function Header() {
  return <h2>My Site</h2>
}

function Layout() {
  return (
    <div>
      <Header />
      <p>Welcome to my site.</p>
    </div>
  )
}

This promotes modular, maintainable code.

7. Conditional Rendering – Render Based on Logic

React uses JavaScript expressions for conditional rendering.

function Greet({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h1>Welcome Back</h1> : <h1>Please Log In</h1>}
    </div>
  )
}

Other techniques:

• && operator
• ternary operators
• if statements before return

8. Lists and Keys – Rendering Collections

Use .map() to render lists, and always assign a unique key to elements.

const users = ['Alice', 'Bob', 'Charlie']
const listItems = users.map((name, index) => <li key={index}>{name}</li>)

Avoid using index as key if the list can change order.

9. Virtual DOM – Behind the Scenes

React doesn’t interact with the real DOM directly. Instead, it uses a Virtual DOM, an in-memory representation.

• React creates a Virtual DOM tree
• On state/prop changes, React performs a diff
• Only the minimal required DOM changes are applied

This makes updates fast and efficient.

Summary – Recap & Next Steps

React’s core concepts like JSX, components, props, and state are foundational to building responsive, scalable UIs.

Key Takeaways:

• Functional components are preferred in modern React
• JSX lets you write HTML-like code in JavaScript
• Props pass data, state manages internal behavior
• React uses Virtual DOM and diffing for performance

Real-World Relevance:
These concepts power real-world SPAs, dashboards, and mobile apps built using React and React Native.

FAQ Section

What is JSX in React?
JSX stands for JavaScript XML. It allows writing HTML-like syntax inside JavaScript and is transpiled to React.createElement.

Are props mutable?
No. Props are read-only and should not be changed by child components.

What’s the difference between state and props?
Props are passed from parent to child, while state is local and managed within the component.

Can a component have both props and state?
Yes! Components often receive props and also manage internal state for dynamic behavior.

What is the Virtual DOM in React?
It’s a lightweight copy of the real DOM. React compares it to the previous version and updates only what changed, improving performance.