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:
If you have never worked with web technologies before. the Mozilla Developer Network is a wonderful place to start.
Create an HTML document. It can be called whatever you would like. Fill it with the following code:
There isn’t too much going on here. The important part is that we include
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 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.
"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
"Hello, World!", is a child element. Since
is a string, React will automatically build a text node to represent it.
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"))
Let’s look at the signature of
React.createElement from the
ReactElement createElement(string/ReactClass type, [object props], [children ...])
createElementwill accept either the string name of an HTML element, or a React component class. We’ll get into React components later.
React.createElement('p', null, 'Hello, ', 'World')is also totally valid.
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.
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.