How do I start up Realm?

Question

https://github.com/realm/realm-browser-osx

I ran a git clone on the above GitHub so it's in my projects directory.

I downloaded the the Realm Browser app from the App Store but now I'm trying to use it in my React Native project. On the GitHub page (above), it says that Realm Browser is a small utility for Mac OS X that lets you open .realm files to view and modify their contents.

What .realm files are there to open? The items I want to put in Realm aren't in .realm files, they're inside my .js file. How would I go about fixing this?

Here's my .js file:

import React, { Component } from 'react';
import {TextInput, KeyboardAvoidingView, Text, StyleSheet, TouchableOpacity} from 'react-native';
import Third from './Third';

class Second extends Component {
    onButtonPress() {
        this.props.navigator.push({
            id: 'Third' // .js file name
        });
    }

    render() {
        const Realm = require('realm');

        class Email {}
        Email.schema = {
            name: 'Email',
            primaryKey: 'name',
            properties: {
                name: 'string',
            },
        };

        const realm = new Realm({schema: [Email]});

// Query
        let email = realm.objects('Email');
        // email.length // => 0

// Write
        realm.write(() => {
            email = realm.create('Email', {
                name: 'something'
            });

            realm.create('Email', {name: "else"}, true);
        });

        return(
            <KeyboardAvoidingView style={styles.container}>

                <TextInput
                    style={styles.userInput}
                    placeholder={" email"}
                />

                <TextInput
                    style={styles.userInput}
                    placeholder={" password"}
                    secureTextEntry={true}
                />

                <TouchableOpacity style={styles.buttonContainer}>
                    <Text onPress={this.onButtonPress.bind(this)} style={styles.buttonText}>Submit</Text>
                </TouchableOpacity>

            </KeyboardAvoidingView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 20 // makes button horizontally longer.
    },

    userInput: {
        marginBottom: 20,
        height: 40,
        borderWidth: 4

    },

    userInput: {
        marginBottom: 20,
        backgroundColor: '#9b42f4',
        height: 40,
        borderRadius: 10,
        borderWidth: 1
    },

    buttonContainer: {
        backgroundColor: '#41bbf4',
        paddingVertical: 10,
        marginBottom: 20,
        borderRadius: 10
    },

    buttonText: {
        textAlign: 'center',
        color: '#FFFFFF'
    }
});

export default Second;