Welcome to Building React Native Apps for Mac

Introduction

Walkthrough

What is React Native? The Mac and Mobile Web App Framework

React Native Pros and Cons for Building macOS Apps

How to Setup a New React Native Mac App

Getting started

State Management in React Native for Mac With MobX Library

How to Solve JavaScript Module Resolution with File Structure

How to Fetch Data From a REST API in a React Native Mac App

How to Create an API Store in React Native with Axios

How to Add Tailwind CSS to a React Native Mac App

How to Use and Customize Tailwind CSS in React Native

Behavior Encapsulation and React Native Reusable Components

Add React Native Navigation on macOS with React Navigation

Building bones of the application

Add Conditional Styles to React Native With Classnames

Optimize React Native with FlatLists and Native Webview

Advanced JavaScript topics

How React and macOS Communicate with React Native Bridge

How to Add React Native Vector Icons and Custom Fonts

How to Build a macOS Menu Bar App With React Native

How to Store Data on macOS Keychain with React Native Bridge

How to Expose macOS Native Modules to React JavaScript

How to Quit a React Native App on macOS

How to Add Hover and Focus States to a React Native Mac App

Limitations of Building Mac Apps With React Native

Build and Publish a React Native App on the Mac App Store

MacOS specific functionality

Advanced macOS functionality

How to Support Multiple Windows in React Native

Auto Launch a React Native Mac App With Swift Dependencies

How to Send macOS Notifications From a React Native App

Add macOS Drag and Drop Support to a React Native App

How to Handle Events in a React Native Mac App

Advanced topics

Good bye

Links and further reading

Links and references

react-native

node.js

typescript

tailwind-rn

In this course we will explore react-native as a framework for building macOS applications. Unlike web based tools, react-native offers a lot of benefits when it comes to performance and the ability to leverage native functionality.

React-native is not without its difficulties and the jump to a desktop environment requires not only novel technical solutions but also a different way of dealing with APIs and UI patterns.

In 30 lessons we cover setting up a scalable application architecture, connecting with native macOS APIs and exploring some workarounds. The course comes with a lot of new techniques, code samples and detailed instructions to develop React Native apps that are truly equal to native alternatives.

Taught by Oscar Franco, who has worked in several companies as team lead and CTO, released a bunch of React Native apps and has contributed many of the newest latest techniques for react-native-macos.

In this course we will learn how to create modern macOS applications using react-native, take advantage of all the goodies react-native provides on the mac.

Building React Native Apps for Mac

How to set up a scalable architecture for your application

How to leverage native APIs with JavaScript

How to create great desktop native experiences

We will start connecting our app to our server to persist and retrieve data. In React Native you can now use the 

 interface to do HTTP requests. This comes already integrated, but some devices have problems with it, and the API is slightly awkward.

 HTTP client library. Its API is a bit easier to use and it never fails, so let's start by adding it as a dependency into our project.

// src/stores/Api.store.ts

import axios from 'axios';
import {IRootStore} from 'Store';

export let createApiStore = (root: IRootStore) => {
  let store = {
    fetchBooks: async () => {
      const res = await axios.get('http://localhost:3000/book')

      return res.data
    },
    addBook: async (title: string) => {
      try {
        const res = await axios.post(
          'http://localhost:3000/book', 
          {title}
        )
  
        return res.data
      } catch(e) {
        console.warn(`error creating book`, e)
      }
    }
  };

  return store;
};

This store follows a similar structure to the previous UI store we created. This time we start by importing the axios dependency. Then our 

 interface to make the create function type-safe.

However, you can see that in this store we are not using 

, because we don't have any state to keep track of for now, but at some point you could also track your requests at this level. The beauty of MobX is that it makes it trivial to add and observe state without too much fuss.

 call. This is a function that will query the 

 endpoint of our mock server. It is an marked with the 

 prefix, thus making async code (such as network calls) easier to read by allowing us to use the 

 keyword. Inside this function we simply call axios (with 

 as a prefix) and passing it the full URL of our server. As the last step we simply return the data to whoever called the function (Axios takes care of parsing the JSON and putting it in the 

 function, which will just take the title of a book. The axios call is a bit different (we call 

), and as a second parameter we pass an object with the title of our book - this object will be stringified into JSON and the server will take care of adding a date to it.

You can also see we have added minimal error handling to the 

 function, with a try/catch block, in case the server returns an error. It's up to you on which level of abstraction you want to handle your errors. I would recommend keeping the API store as stateless as possible and handling errors on the calling stores, because most of the time you want to provide the user with some feedback in case something goes wrong. That might include some business logic, like displaying different types of alerts, specific error messages and so on.

We can now update our root store to contain our new API store:

// src/Store.ts

import { createContext, useContext } from "react"
import { createApiStore } from "stores/Api.store"
import { createUIStore } from "stores/UI.store"

export interface IRootStore {
  ui: ReturnType<typeof createUIStore>,
  api: ReturnType<typeof createApiStore>
}

export let createRootStore = (): IRootStore => {
  let store: any = {}
    
  store.ui = createUIStore(store)
  store.api = createApiStore(store)

  return store
}

 function at the top of the file. Same as when we created the UI store, on our first pass on the root store, we need to add the return type of the create function into the 

 interface. And finally on the body of the function, we can add a new key 

Now you see the power of giving access to the root store from the children stores. From our UI store, we can now directly call the API layer of our app, effectively containing HTTP internals and just dealing with responses. Let's modify our UI store to use the new API store:

---
title: Creating an api store
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/g4jjma4t8g
---

### HTTP layer

We will start connecting our app to our server to persist and retrieve data. In React Native you can now use the `fetch` interface to do HTTP requests. This comes already integrated, but some devices have problems with it, and the API is slightly awkward.

We'll go with a better alternative, the [Axios](https://github.com/axios/axios) HTTP client library. Its API is a bit easier to use and it never fails, so let's start by adding it as a dependency into our project.

```bash
yarn add axios
```

Next we will create a new store in the `stores` folder. Go ahead and create an `Api.store.ts` file, with the following content:

```ts
// src/stores/Api.store.ts

import axios from 'axios';
import {IRootStore} from 'Store';

export let createApiStore = (root: IRootStore) => {
  let store = {
    fetchBooks: async () => {
      const res = await axios.get('http://localhost:3000/book')

      return res.data
    },
    addBook: async (title: string) => {
      try {
        const res = await axios.post(
          'http://localhost:3000/book', 
          {title}
        )
  
        return res.data
      } catch(e) {
        console.warn(`error creating book`, e)
      }
    }
  };

  return store;
};
```

This store follows a similar structure to the previous UI store we created. This time we start by importing the axios dependency. Then our `IRootStore` interface to make the create function type-safe.

However, you can see that in this store we are not using `makeAutoObservable`, because we don't have any state to keep track of for now, but at some point you could also track your requests at this level. The beauty of MobX is that it makes it trivial to add and observe state without too much fuss.

Next we create a `fetchBooks` call. This is a function that will query the `GET` endpoint of our mock server. It is an marked with the `async` prefix, thus making async code (such as network calls) easier to read by allowing us to use the `await` keyword. Inside this function we simply call axios (with `await` as a prefix) and passing it the full URL of our server. As the last step we simply return the data to whoever called the function (Axios takes care of parsing the JSON and putting it in the `data` field of the returned object).

Last we add an `addBook` function, which will just take the title of a book. The axios call is a bit different (we call `.post` instead of `.get`), and as a second parameter we pass an object with the title of our book - this object will be stringified into JSON and the server will take care of adding a date to it.

You can also see we have added minimal error handling to the `addBook` function, with a try/catch block, in case the server returns an error. It's up to you on which level of abstraction you want to handle your errors. I would recommend keeping the API store as stateless as possible and handling errors on the calling stores, because most of the time you want to provide the user with some feedback in case something goes wrong. That might include some business logic, like displaying different types of alerts, specific error messages and so on.

### API store

We can now update our root store to contain our new API store:

```ts
// src/Store.ts

import { createContext, useContext } from "react"
import { createApiStore } from "stores/Api.store"
import { createUIStore } from "stores/UI.store"

export interface IRootStore {
  ui: ReturnType<typeof createUIStore>,
  api: ReturnType<typeof createApiStore>
}

export let createRootStore = (): IRootStore => {
  let store: any = {}
    
  store.ui = createUIStore(store)
  store.api = createApiStore(store)

  return store
}
```

We can now import the new `createApiStore` function at the top of the file. Same as when we created the UI store, on our first pass on the root store, we need to add the return type of the create function into the `IRootStore` interface. And finally on the body of the function, we can add a new key `.api` where we create an instance of the `ApiStore`.

Now you see the power of giving access to the root store from the children stores. From our UI store, we can now directly call the API layer of our app, effectively containing HTTP internals and just dealing with responses. Let's modify our UI store to use the new API store:

Note we have also created an `IBook` interface to provide some type safety for the data we are dealing with.

book.createdAt // undefined 
// since it 
book.date // in the server code






Dima Portenko

`let books = [{title: "Lord of the Rings", date: yesterday.toISOString()}, {title: "Dune", date: yesterday.toISOString()}, {title: "Name of the Wind", date: yesterday.toISOString()}]`date are same so it's not possible to use as Component key

It's just a warning, on a real app you will of course want to use real ids.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Building React Native Apps for Mac

Module 1: Introduction

Introduction:

Start Here

Introduction: (0:58)

Welcome to Building React Native Apps for Mac

Module 2: Getting started

Lesson 1: (1:25)

Walkthrough

Lesson 2:

What is React Native? The Mac and Mobile Web App Framework

Lesson 3: (2:36)

React Native Pros and Cons for Building macOS Apps

Lesson 4: (11:18)

How to Setup a New React Native Mac App

Module 3: Building bones of the application

Lesson 1: (16:15)

State Management in React Native for Mac With MobX Library

Lesson 2: (7:57)

How to Solve JavaScript Module Resolution with File Structure

Lesson 3: (4:53)

How to Fetch Data From a REST API in a React Native Mac App

Lesson 4: (16:39)

How to Create an API Store in React Native with Axios

Lesson 5: (7:17)

How to Add Tailwind CSS to a React Native Mac App

Lesson 6: (10:43)

How to Use and Customize Tailwind CSS in React Native

Lesson 7: (10:18)

Behavior Encapsulation and React Native Reusable Components

Lesson 8: (14:56)

Add React Native Navigation on macOS with React Navigation

Module 4: Advanced JavaScript topics

Lesson 1: (6:56)

Add Conditional Styles to React Native With Classnames

Lesson 2: (9:40)

Optimize React Native with FlatLists and Native Webview

Module 5: MacOS specific functionality

Lesson 1:

How React and macOS Communicate with React Native Bridge

Lesson 2: (7:31)

How to Add React Native Vector Icons and Custom Fonts

Lesson 3: (18:35)

How to Build a macOS Menu Bar App With React Native

Lesson 4: (10:35)

How to Store Data on macOS Keychain with React Native Bridge

Lesson 5: (13:25)

How to Expose macOS Native Modules to React JavaScript

Lesson 6: (7:44)

How to Quit a React Native App on macOS

Lesson 7: (7:23)

How to Add Hover and Focus States to a React Native Mac App

Lesson 8:

Limitations of Building Mac Apps With React Native

Lesson 9: (5:00)

Build and Publish a React Native App on the Mac App Store

Module 2: Advanced topics

Lesson 1:

Advanced macOS functionality

Lesson 2: (15:45)

How to Support Multiple Windows in React Native

Lesson 3: (13:29)

Auto Launch a React Native Mac App With Swift Dependencies

Lesson 4: (11:58)

How to Send macOS Notifications From a React Native App

Lesson 5: (23:58)

Add macOS Drag and Drop Support to a React Native App

Lesson 6: (15:37)

How to Handle Events in a React Native Mac App

Module 6: Links and references

Lesson 1: (0:34)

Good bye

Lesson 2:

Links and further reading