React Native Syntax Basics and Styling

I’ve written about installing and getting started with React Native, and how to make basic changes to the text on the initial screen (or “stage”), and now I’m going to write a little bit about some of the important syntax concepts that are different from React that I’ve discovered while working on my React Native app.

A quick refresher on a few differences between React and React Native

1. React is a library, and React Native is a framework.
2. A React Native app is not a mobile web app, but is a native application
3. React Native does not use CSS (more on this a little later!)

React Native Basic Code Structure

Like React, React Native uses ES6 features including arrow functions and also uses JSX.

Here is a snippet from the React Native documentation.

import React, { Component } from 'react';
import { Text } from 'react-native';
export default class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

The <Text></Text> is the JSX, which renders just like HTML would on the page.

With React, you can just wrap HTML in an enclosing <div> tag, for example:

import React from 'react'
const Intro = () => {
  console.log("Intro renders!")
  return (
      <div>
        <div className="container">
        <div className="site-title">
          <h2>Home Page</h2>
        </div>
          <p> Lorem ipsum dolor sit amet, consectetur adipiscing        elit. Pellentesque pulvinar euismod commodo. Etiam orci dolor, commodo non sem vitae, ultricies porttitor sem. 
          </p>
        </div>
      </div>
      )
      }
export default Intro;

In React Native, it’s critical to use JSX, rather than the HTML tags. For example, if you would like something to render as you imagine HTML would render

<p>Hello world!</p>

Then you would write it using the <Text> JSX tags:

<Text>Hello world!</Text>

If you don’t do this, you will get an error message, which is one of the first problems I ran into when getting started with updating my app. This error message in this case (which typically displays on the screen you are using as your view — in this case it was on my iPhone) actually was indicating that I was using HTML tags instead of the proper JSX tags.

Updating Screens

React is single-page, meaning that you aren’t really moving when you navigate around on the application, but rather different components are just showing up on the page. Coming from web applications where a new page was loaded each time you click on something (thinking about a Rails application for example, or using <a href= “#”>Link</a>) the experience is like a much smoother version of the same concept. It feels similar, just seamless and much quicker.

In React Native, however, you navigate between screens or “scenes” using React Native tools. The simplest one suggested by the documentation is React Native Navigation, which is an easy-to-use library that lets use set up screens pretty quickly. As mentioned in the documentation, you can also stack and override the routers, meaning you can make adjustments in one place without having it affect your entire program.

Styling

And finally, a quick overview of styling. (Documentation here.)

React Native does not use CSS. However, for folks who have experience using CSS or a pre-processor like LESS or SASS, teaching yourself how to do styling with React Native should be pretty simple. A lot of the syntax is similar, although the structure is a bit different.

All React Native components have the prop “style”, which allows us to make stylistic changes to the component.

The style can then be called within the component, such as on a <Text>.

export default class StyleExample extends Component {
  render() {
    return (
      <View>
        <Text style={styles.black}>Black Text</Text>
      </View>
    );
  }
}

The style is defined elsewhere in the file (conventionally at the bottom) using the following format

const styles = StyleSheet.create({
  black: {
    color: 'black',
  },
});

Coming Up

A deeper dive into React Native Navigator and creating a Navigation bar and forms!

Resources

React Native | A framework for building native apps using React

What is difference between React native vs React?

React Native from Navigator to React Router docs/example request · Issue #4747 · ReactTraining…

What are five differences between React.js and React Native?