React anatomy

From wikinotes


react top-level api


  • react can be expressed in pure javascript, or in jsx
  • UIs are divided into components, which have their own state, and are loaded as-ready


/* ${project}/src/index.js
 * essentially your 'index.html'
import ReactDOM from 'react-dom';
import './website.css';             // load CSS onto rendered page
import Foo from './foo';            // load component 'Foo' from 'foo.js'

ReactDOM.render(<Foo/>, document.getElementById('root'));
/* ${project}/src/foo.js
 * a sample component

class Foo {
  constructor(props) {

  render() {
    <p>Hello world</p>



An element is an immutable grouping of html-elements.

define/render elements

const element1 = <h1>Title</h1>
const element2 = <h2>SubTitle</h2>
const element3 = (
        <p>Some text</p>
        <p>Some more text</p>

var elements = [element1, element2, element3]
var parent = document.getElementById('root')
ReactDOM.render(elements, parent)

reloading/re-rendering elements

Every call to ReactDOM.render() replaces the selected element, reloading the changes.
The official docs demonstrate this with a ticking clock.

function tick() {
  const element = (
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
  ReactDOM.render(element, document.getElementById('root'));

setInterval(tick, 1000);


Components are basically functions/classes that parametrize/encapsulate the rendering of an element.
Components are pure functions/classes, they may not modify their params.
Components must return only a single container element.

define component (function)

// component as function
function Description(props) {
    return (

define component (class)

// component as class
class Description extends React.Component {
    render() {
        return (

component usage

Component-Parameters are set like HTML element attributes.

    <Description paragraph="A very excellent game">
    <Description paragraph="A very excellent movie">


A Fragment is like a component, except it lets you return multiple top-level elements.
The top-level elements do not need to be of the same type.
You can use it like a regular component.

define fragment-component (function)

import React from 'react';

function Columns(props) {
    return (

fragment-component usage

    <Columns />  // <-- fragment with several items


There are 2x ways of expressing react.
JSX and regular javascript.



JSX tags shadow React.createElement() calls. They can represent:

  • HTML tag names (div, span, pre)
  • React Components (Class/Function)
  • React Fragment

These are equivalent

const element = (
  <h1 className="greeting">
    Hello, world!
const element = React.createElement(
  {className: 'greeting'},
  'Hello, world!'