Basics

Rendering React Elements in the DOM

As seen briefly in the JSX elements post, rendering React elements in the DOM can be achieved using the render() function of the ReactDOM global.
The function takes two parameters: an element, which can contain multiple nested children elements, and a node, which is usually the root DOM node used to render the content within.

React Components

Whilst you can define react elements within a pair of <script> nodes in an HTML document, it is recommended to use components. React components allow you to split the UI that you write into modular, reusable pieces of code.
The most simplest example of a component can be a JavaScript function that accepts a properties …

Basic JSX Syntax

The React library uses a JavaScript syntax extension called JSX. JSX syntax in React looks like a combination of JavaScript and HTML. Some examples of basic JSX syntax can be seen below.
JSX elements are treated as expressions, and therefore they can be stored in a variable, like the below example. Note the use of …

Getting Started with React

React is a a JavaScript library developed by Facebook for building user interfaces. Getting started with React on your local environment requires the following scripts included within your document.
The building blocks used to create the UI are split into components that are rendered using React’s render() function.
The advantages of this approach include ensuring …