React Native

41

Mastering React Native

React Native is a library for creating native mobile applications using familiar web technologies that is built on top of React. What this means is that in order to understand React Native, we must first explore React. In this chapter, we’ll examine the fundamentals of React. First, we’ll talk briefly about the circumstances that led to React being created. We’ll also cover these React concepts:

  • JSX, a JavaScript/HTML hybrid that we use to describe React components

Props

Alternatively, PropTypes can be added to a React component as a static property using the static keyword. This syntax is cleaner, but is not officially part of the ECMAScript specification at this point. While most transpiler programs will recognize this syntax, we’ll avoid it in this book for that reason.

  • React components
  • Component composition
  • Component properties, or props
  • Handling events
  • Component state
  • The React component lifecycle
  • Alternate component forms

Describing components in JSX

In recent years, there have been many developments in JavaScript as a language itself. For instance, the new ECMAScript 2015 (ES2015-sometimes called ES6) specification, which defines the next version of JavaScript, is becoming increasingly solidified. If a developer wishes to write in ES2015-and many do-they need to use a program to convert the newer syntax into one that is compatible with the majority of browsers. Additionally, there are a number of JavaScript-like syntaxes, such as CoffeeScript and TypeScript, that ultimately have to be converted to browser-compatible JavaScript in order to function.

With all of these developments and alternate syntaxes, many developers have become accustomed to transforming code into browser-compatible JavaScript instead of writing it directly. When Facebook created React, they capitalized on this and created a syntax similar to HTML that could be used to describe components. It’s called JavaScript XML (JSX), and it is a declarative markup language that is written in tandem with JavaScript to define a component’s layout.

Using JSX is not an absolute requirement for writing React, but without it, React becomes verbose and cumbersome. Furthermore, since most developers will be using tools such as Babel already to convert their ES2015 code into JavaScript, writing in JSX does not add much burden because most of those tools come with support for JSX built in.

JSX looks almost exactly like HTML:

It differs from HTML5 only slightly. HTML and JSX have a common ancestor language called XML(Extensible Markup Language). HTML has since diverged in some ways from strict XML that JSX has not. For instance, in the case of a tag such as the image tag (that is, <img>) HTML and JSX differ. The <img> tag is called self-closing in that there is no standalone closing tag like we might see with a <div> or a <p>. For a self-closing tag in HTML, a forward slash before the end is optional:

In JSX (and XML, for that matter), this forward slash is required:

There are other differences between JSX and HTML that arise from JSX being written in the context of JavaScript. The first is that class is a keyword in JavaScript, whereas that word is used as an attribute of HTML elements to allow elements to be targeted by CSS for styling. So, when we would use class in HTML, we instead have to use className in JSX:

A consolation prize for this small inconvenience is we get the benefit of being able to interleave JavaScript into places in our markup where we typically wouldn’t in normal HTML. For instance, defining inline styles can use a JavaScript object, rather than cramming all properties into a string.

Notice here that there are two sets of curly braces on the style attribute’s value. The outer set of curly braces is used to show that the code contained is JavaScript. The inner set is a JavaScript object literal containing the CSS style property names and their respective values.

Not only can attribute values be written in JavaScript, but so too can the content contained between JSX tags. This way, we can use dynamic properties to render text content:

As we’ll see in coming section, there are more tags available to us than we would see in normal HTML. In fact, our application-defined components themselves can be added into JSX markup:

Understanding JSX is paramount to starting to create React components; however, JSX makes up only a part of a complete component.