I finally bit the bullet and learned React properly. After years of jQuery and some Angular, React’s component model took some getting used to. Here’s what clicked for me and might help other backend developers making the transition.

Components: The Building Blocks

Everything in React is a component. Think of them like C# classes that render UI. You can write them as functions (preferred now) or classes:

// Function component (recommended)
function Welcome(props) {
  return 
Hello, {props.name}!
;
}

// Class component (older style)
class Welcome extends React.Component {
  render() {
    return 
Hello, {this.props.name}!
;
  }
}

Function components are simpler and with Hooks (new in React 16.8), they can do everything class components can.

Props: Data Flows Down

Props are how you pass data to components. They’re read-only—a component cannot modify its own props. This is React’s way of keeping data flow predictable:

// Parent component
function App() {
  return (
    

      
      
    
  );
}

// Child component receives props
function UserCard(props) {
  return (
    

      
{props.name}
      
{props.email}
    
  );
}

// Or with destructuring (cleaner)
function UserCard({ name, email }) {
  return (
    

      
{name}
      
{email}
    
  );
}

State: Component Memory

State is data that changes over time. When state changes, React re-renders the component:

import React, { useState } from 'react';

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

      
Count: {count}
       setCount(count + 1)}>
        Increment
      
    
  );
}

useState returns an array: the current value and a function to update it. When you call setCount, React re-renders the component with the new value.

The Mental Model

Here’s what helped me: React components are like pure functions. Given the same props and state, they always render the same output. When something changes, React efficiently updates only what’s needed in the DOM.

• Props = function parameters (from parent)
• State = local variables (owned by component)
• Render = the return value (UI)

Common Gotchas

• Don’t modify state directly: this.state.count = 5 won’t trigger a re-render
• State updates may be batched and asynchronous
• Always return a single root element (or use fragments)
• Use className instead of class for CSS classes

References

• React Official Docs
• Introducing Hooks