Introducing React

This workshop is about React Native, that means we first need to establish a foundation with React. Over the course of the next few lessons, we’ll walk through the following:

  1. React Elements and Components
  2. Props and State
  3. JSX (JavaScript XML Syntax)
  4. Component Lifecycle Methods
  5. Events

Heads up

We’ll assume as little prior knowledge with React as possible. However we expect a working knowledge of HTML and JavaScript. If this isn’t your case, we recommend grabbing a partner. Also feel free to ping us during the working sessions.

If you have never worked with web technologies before. the Mozilla Developer Network is a wonderful place to start.

Additionally, there are some fantastic resources on JavaScript:

A Brief Tour

Create an HTML document. It can be called whatever you would like. Fill it with the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Introduction | Learning React</title>
    <link rel="stylesheet" href="lib/style.css" />
  </head>
  <body>
    <div id="entry-point"></div>

    <!-- Wifi might be spotty, so we've downloaded these for you: -->
    <script src="lib/react.js"></script>
    <script src="lib/react-dom.js"></script>

    <script type="text/javascript">
      // Intentionally blank. Your walk-through code will go here
    </script>
  </body>
</html>

There isn’t too much going on here. The important part is that we include React and ReactDOM right before our empty script block.

The React library contains the standard API for React, including the ability to create React elements and components (we’ll cover this distinction later). ReactDOM is a rendering engine for React. It tells React how to build a web page using the DOM.

The DOM stands for Document Object Model, and it is how JavaScript interacts with a web page. You won’t have to interact much (if at all) with the DOM using React.

React Elements

The most primitive data type in React is the element. They are analogous to DOM element; they’re even created similarly:

let hello = React.createElement("p", null, "Hello, World!")

React elements are chunks of data that describe how to build a user interface. Think of them as low level instructions; the assembly of React.

Providing "p" as the first argument tells React to build a paragraph tag. We’ve skipped over the second argument, but it allows you to set information like and id. The third argument, "Hello, World!", is a child element. Since "Hello, World!" is a string, React will automatically build a text node to represent it.

Rendering an element

In order to actually view this element, we need to render it. ReactDOM.render is the function responsible for turning the React elements into actual HTML:

let hello = React.createElement("p", null, "Hello, World!")

// Checkout what this does by opening your HTML file in the browser
ReactDOM.render(hello, document.getElementById("entry-point"))

What’s happening?

Let’s look at the signature of React.createElement from the React docs:

ReactElement createElement(string/ReactClass type, [object props], [children ...])
  1. string/ReactClass: createElement will accept either the string name of an HTML element, or a React component class. We’ll get into React components later.
  2. [object props]: An object of properties. For HTML elements, this could be something like disabled, className or tabIndex.
  3. [children]: Regular HTML elements can have children, and React elements are no exception. This can be any number of additional parameters passed to createElement, so React.createElement('p', null, 'Hello, ', 'World') is also totally valid.

In using React.createElement, we can provide low level instructions to whatever rendering engine we chose for how to build user interfaces. We simply model our UI in the ideal state. React decides the most efficient way to build and update the page for us.

Wrapping up

This concludes the first lesson. You created your first React element and rendered into web page. We also briefly touched on React Components, props, and some other important concepts in the React library.

In the next lesson, we’ll dig deeper by building something more substantive.

Lesson 2