Skip to main content

Course intro

So you've decided to jump into the exciting world of mobile development with React Native - I am thrilled for you! I find building mobile apps incredibly fun and rewarding, and I hope you will, too.

About this course​

This will be an introduction to building native mobile apps with React Native. To follow along effectively, you should ideally already be familiar with JavaScript or TypeScript. Knowledge of React is desirable but not essential.

We will start from scratch and cover the very fundamentals of React Native development and the primary components you use and interact with. We'll highlight the subtle (and not-so-subtle) ways that web development differs from mobile development and use mobile-friendly UX to build a hopefully nice-looking UI.

About the instructor​

Hi, I'm Kadi 👋

I was fortunate enough to stumble across React Native in the early days and have remained a huge fan ever since. I've worked on many interesting projects, including being the Tech Lead for building the PUMA app.

Aside from consultancy work, I've also been an active member of the React Native community, contributing to open source and speaking at conferences. Latest talks include Getting the most out of Expo Development Builds (at App.js 2024) and React Native Keynote (at React Conf 2024).

I also spearheaded building the React Conf app (find it on Google Play and the App Store) as an end-to-end example of building production apps with Expo. The code for it is available on GitHub.

I currently work a Expo, hoping to bring more people into the amazing world of building mobile apps with React Native!

Find me on Bluesky, LinkedIn or GitHub.

What you'll need​

To follow along with this course you will need:

  • a Mac, Windows or Linux machine with Node.js installed
  • an Android or an iPhone

Course format​

In this course we will "learn by doing". We will build a little utility app completely from scratch and I will introduce various concepts and point out common patterns as we go.

The app will have two main features: a shopping list and a reminder. We'll also add a third screen that will intentionally be left blank. It will be for you to fill out with a feature you would like for your home.

Commands to be executed in your terminal will be displayed in code blocks:

npx expo install expo-router

Code and diffs will be in collapsible elements:

Changes in app/index.tsx
import { View, Text } from "react-native";

export default function HomeScreen = () => {
  return (
    <View>
      <Text>Hello, world!</Text>
    </View>
  )
}

You will periodically see checkpoints with a link to a git commit at the right point in time so you can check your work after each section:

Checkpoint

✔️ Initial commit

The tip annotation will be used to highlight useful tidbits about the topic:

Tip

A useful tip.

And warning annotations offer debugging tips or caution against common mistakes:

Debug

This is a debug tip.

I hope you'll enjoy the course!