Basically JSX combines JavaScript and HTML (or even CSS with packages like emotion) all in one place.

So writing React manually using the library API directly is verbose and hard to read, that’s why you use JSX and tooling to transpile it for you. Sweet, abstract it away for me please until I get back to it for a deeper understanding 🤠

I am more interested in a deep understanding and reusability of the component system and how to leverage this and have enjoyment of the little time I get to code. My current role is 90% advisory & architecture so I like to deep dive into topics in my own time that’s more code related and I just never get time so I am teaching myself from the beginning. 🤖

1. What are components?

Components are reusable, self-contained pieces of UI that encapsulate both the structure (markup) and behavior (logic) of a part of your application. Think of them as custom HTML elements that you can define once and use everywhere.

There are 2 types of components in React:

1. Function Components (Recommended modern approach)

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

Function components are:

  • Simpler to write and understand
  • Better performance (no class overhead)
  • Support React Hooks for state and lifecycle management
  • Easier to test (pure functions)

2. Class Components (Legacy approach)

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

Class components:

  • Legacy syntax still supported but not recommended for new code
  • More verbose requiring render method
  • Use lifecycle methods instead of hooks
  • Have this binding complexities

2. What are props?

Props (short for “properties”) are read-only data passed from a parent component to a child component. They’re React’s way of making components configurable and reusable.

Key characteristics of props:

  • Immutable - Components cannot modify their own props
  • Unidirectional data flow - Data flows down from parent to child
  • JavaScript objects - Props are wrapped in an object
  • Any data type - Can pass strings, numbers, objects, functions, etc.

Pure functions do not attempt to change their inputs, and always return the same result for the same inputs.

So the fundamental rule is:

All React components must act like pure functions with respect to their props.

This means:

  • No side effects - Don’t modify external variables
  • Predictable output - Same props always produce same render
  • No prop mutation - Never change props.someValue directly

Function Component props

function Welcome(props) {
  return <h1>Hello {props.name}!</h1>
}
  • Accessed via parameter in function components

Class component props

class Message extends React.Component {
  constructor(props) {
    super(props)
    console.log(props.topic)
  }

  render() {
    const { topic } = this.props
    return <div>Today we will learn about {topic}</div>
  }
}
  • Passed to the constructor
  • Must call super(props) before accessing it to access props
  • Accessed via this.props in class
  • props.children is a special prop which accesses the content between the opening and closing JSX expression tags

Conclusion 🐒

So react has two libraries.

  1. react

    • Top level React & JSX / createElement

  2. react-dom

    • Glue layer & ReactDOM.render

let’s keep the ball rolling shall we. onwards and upwards.

Resources: