Basic React principles

A React application is built from Components. A component is a JavaScript class that accepts a set of values (called properties, or in short, props) and returns a tree of DOM elements that can be rendered by the browser.

Consider the following easy example. We will start with the plain JavaScript implementation and show you how to add static typing using TypeScript later:

class HelloWorld extends React.Component { 
  render() { 
    return <div className="greeting"> 
      <h1>Hello {this.props.name}!</h1> 
    </div>; 
  } 
} 

Even if you are used to JavaScript, the syntax will probably seem new to you. Technically, the preceding code example is not plain JavaScript (any browser would refuse to actually run this code), but JSX. JSX is a special syntax extension to JavaScript that allows you to directly define DOM elements using their respective HTML representation. This makes defining React components much easier. Without using JSX, the preceding...