Getting Started With React Native
Understand and build your first React Native Application
What is React Native?
It’s a JavaScript framework (a library built using JavaScript) for developing client-side applications. The development involves building your application as a collection of JavaScript files (with .js file extension).
Native refers to the fact that a single implementation of your app is sufficient for it to run across multiple platforms i.e. Android, IOS, Web.
In addition to React JS components, which are used to develop web applications, the framework provides its own components for building native applications. So, you can also leverage React JS components inside React Native applications.
On the other hand, React Native applications may also be developed with Expo which is an open-source framework for creating native apps and expo NPM package enables a suite of incredible features for React Native apps.
But let’s take things with baby steps. Starting from this introductory blog to future specific use-cased blogs.
Blog Learning Outcome
React Native application can be broken down into screens, components, navigation, icons, API mostly.
Scribe is React Native / NodeJs application that we created as our BSCS FYP. The description is available at GitHub. Learn from it, and leave a star if you find it beneficial. Also, leave a feedback if you find this blog beneficial or feel something missing. Share with people you think it’ll benefit them.
Below are some of the screens of the application:
In order to develop React Native apps, it’s important to learn concepts like JSX, ES6 Standards, React / React Native components, difference between functional and class components, custom components, props, children, hooks, navigation.
The concepts are made much easier to understand in light of Scribe. This is an introductory blog. So, stay tuned for future React Native blogs that’ll be more specific.
So, Let’s Get Started!
JSX
JSX refers to JavaScript XML notation or expression. It is a way of embedding a markup language inside JavaScript code. It is the reverse of embedding JavaScript inside HTML file. You can think of it as one wrapped inside the other:
Markup Language // Templating Language (like HTML)
.
Script // where script is embedded
.
Markup Language // file extension is that of the template languageScript // JSX
.
Markup Language // where markup is embedded
.
Script // file extension .jsWith JSX, you can create a template for your component without explicitly creating React elements that are rendered to the DOM. It’s the same as writing markup. Consider subsequent comparison:
(
<h1>
This is JSX using HTML tags
</h1>
) // parenthesis are important for multiline script. React.createElement('h1',{},'This is not JSX.') // creating React Elements
// manuallyJSX notation is quite great and easy to use. You can also use React components or your custom components instead of HTML tags to render elements to screen. You’ll see where to put this JSX inside a component down below.
ES6
JavaScript practices were introduced improvements and standards in 2015 as a second revision known as ECMAScript 2015 or ES6. If you use any editor with auto-code-completion feature, you’ll notice that it suggests an implementation practice under ES6. Some of the improvements:
- Arrow Functions Syntax
New and simpler function declaration syntax.
(arg) => { return arg; } // function that takes and returns arg
// curly brackets for writing block of code
// return keyword is necessary
(arg) => arg; // same as above, but for curly brackets
// good for single statement, returns arg
function(arg){return arg} // prior practice used function keyword
// which is redundant- Imports / Exports
Importing and exporting modules/components using keywords import, from, and export.
import * as Sample from './someFile.js'
import some-object from './someFile.js'
export function Sum(x, y){ return x+y; } // export function from this fileLet’s keep it to these two right now. I’ll explain in detail in later blogs! You can also visit ECMAScript for more information.
React / React Native Components
A component refers to a concise functionality with an interface that is deployed on the screen within the app having some purpose. You can think of it as: logic + JSX
In the Welcome screen, there are 4 components.
- Screen: displays the entire screen
- Login button: navigates to login screen on press
- Register button: navigates to register screen on press
- View: displays the logo and title
Some of the components are interactive and some not. For example, the button components let’s you navigate to other screens when you press on it. Whereas, the View component is the one that let’s you display a container. It displays some Text, and an Image being nested inside the View component.
The screen is a component itself that encapsulates the rest of the components as children. The structure of the screen is like this:
<Screen> // Custom component
<View> // React components
<Image />
<Text> </Text>
</View>
<AppButton /> // Custom component
<AppButton />
</Screen>
These frameworks provides many built-in components for developing complex client-side application with such an ease and in less time.
FlatList is a React Native component for rendering a list of items. Each item is rendered based upon a unique identifier. RN gives a warning if the identifier is not unique.
list_of_objects =
[
{id: 1, value: 'one'},
{id: 2, value: 'two'},
]
const Item = ({title}) => (
<View>
<Text>{title}</Text>
</View>
);
// use flatlist like this inside some other component
<Flatlist
data = {list_of_objects}
keyExtractor = {(item) => item.id} // specify id as unique identifier
renderItem={({item}) => <Item title={item.value}/>} // return a component
/>Building Custom Components
RN components are developed using one of the two ways: Functional and Class components. Both aim to achieve the same purpose. Class component is the newer way of developing the same functional components but with a few differences.
Functional Components
Consider the following as the basic functional component syntax:
const compName = (props) => {
// this is where you
// can add some logic
// create variables and functions
return (JSX); // then return a JSX element wrapped within parenthesis
}compName: unique name of the component.
function: takes an input and returns a single JSX element.
props: inputs sent to the component.
return: JSX — a markup language for rendering on the screen
When a component is called from inside some script, it is passed some props. Props are inputs having unique names assigned with some value. Dot notation is used to access those input values. Consider the 2 files below:
// compName.js
// name the file as the component name i.e. compName.js
import {View, Text} from 'react-native'; // built-in components
const compName = (props) => {
const name = props.name // props.name_of_the_prop_received
const job = props.job
return (
<View>
<Text> {name} </Text>
</View>
); // returns a JSX element: an object with single component to render
// View, having children/nested component Text
// {name} is a regular javascript expression inside JSX
}
export default compName; // exporting the component// App.js
import compName from '../path/to/compName.js';
const App = (props) => {
return (
<compName name="John" job="Developer"/> // component usage syntax
);
}A Functional Component, compName, is built as a JavaScript file. App.js file imports and renders the component by returning it as a JSX. It is passed a prop called name which is assigned a value: “John”.
To access this name prop, props.name is used. You can also De-structure the props to avoid using dot notation, like this:
// compName.js
import {View, Text} from 'react-native';
// destructure the props in the function signature with curly braces
const compName = ({name, job}) => {
const name = name
const job = job
return (
<View>
<Text> {name} </Text>
</View>
); // returns a JSX element
}
export default compName; // exporting the componentNote: JSX has to be a single component.
// valid JSX
// component should return a single parent component
// and may have nested / children components
return (
<View> // View: parent component
<Text> {name} </Text> // Text: children component
<button />
</View>
);
// invalid JSX, returns error
// cannot return two components
return (
<View>
<Text> {name} </Text>
</View>
<View></View>
); This would be good enough to get you started with creating custom components.
Class Components
Class component is an object-oriented component development. It has the following syntax:
import React, { Component } from 'react';
import {View, Text} from 'react-native';
class compName extends React.Component {
constructor(){}
// can add aditional methods
render(){
return (
<View>
<Text> Hello </Text>
</View>
);
}
}It’s a class that extends React Component, hence being imported inside the component file. The JSX is returned from inside the render function. Now, there is constructor as well. This class implementation is in accordance to ES6 class specification.
Lifecycle Methods
Class component let’s you add special methods called lifecycle methods for handling component lifecycle — from the time a component is rendered till it’s termination.
class compName extends React.Component {
constructor(props){
this.state = this.props.something
}
// can add aditional methods
ComponentDidMount(){ // called after this component is rendered
// add your logic here
}
ComponentWillUnmount(){
// add your logic here
}
render(){
return (
<View>
<Text> Hello </Text>
</View>
);
}
}One important aspect of Class component is that it is stateful. This means that upon re-render, the component maintains the previous state i.e. the values that were sent to it before re-rendering. Whereas, functional components are stateless functions i.e. the data is lost upon re-render.
Hooks & Stateful Functional Component
You can inject a hook into a functional component to make it stateful.
import React, {useState} from 'react';
const compName = (props) => {
const [num, setNum] = useState(0); // State hook: returns a state
// and a function to update the state.
// num is a state, set Num being
// the update function.
// you can name them as you want
return (
<Text> This is a zero number: {num} </Text>
<button onClick={() => setNum(num + 1)}> Click Me </button>
);
}With state hooks, functional components can now retain the data upon re-renders.
There are many different types of hooks for variety of purposes like useEffect, useRef etc. You can also create custom hooks. I’ll be making a separate blog on it in the near future, so stay tuned.
There are rules for using hooks provided by React. Do follow them for making quality applications.
React Navigation
Navigation refers to the movement from one screen to another within the app. To add navigation to your application, you can use React Navigation as a navigation solution. It let’s you create stack navigation as well as tab navigation.
Stacking screens pushes them to a stack and let’s you move to an associated / children screen. It also lets you go back to your parent screen by popping the current screen when you press the back button.
By pressing the register button, the app navigates to register screen. The navigated screen can also receive props and can be accessed using routes params.
Tab navigation let’s you move to different sections of your app. I have created three tabs: New list, Saved List, and Account.
You can find its implementation inside the navigation directory at Github.
Closing
Hit the like button, leave a star at GitHub, and share if you found this read beneficial!
Stay tuned for future react native blogs on React Native best practices, Component Styles, React Navigation, and many more!
