This follow-along tutorial covers most of the essential features modern prototype React Native apps need, including databases and authentication. It is written using modern JavaScript and React style, using only functional components and hooks. Like all follow-along tutorials, this is an introduction and source of example code, but does not test your ability to use them on your own. You are following a recipe for a simple application -- but there's much to learn as you do each step.
React Native shares many concepts with ReactJS, used for web development. For key concepts in React, see my React notes.
While you can build React Native applications directly, we'll use Expo. Expo is a set of tools and services to simplify creating, building, and deploying React Native applications.
In the material below, I say "in React" for concepts that apply to both React and React Native. I say "in Expo" or "in React Native" for concepts that apply only to React Native and Expo.
If you want a preview of what running Expo is like, watch this video. Since the video was made the end of 2019, some details have changed.
Tracking Progress
This tutorial is long. There's a lot to learn. It will take days or more. The worst thing is to do nothing for days, then work in a panic. To encourage steady progress, your process for completing each task will be
- Read and code: This is the key learning step. The goal is not to copy and paste code, but to understand the many concepts introduced in JavaScript, React, and React Native, and assemble the code given into a working app.
- Test: Verify that the app works as intended in both a web build and a deployment to either an iOS or Android device.
- Deploy: Deploy the web version to a public host. Verify that the deployed version also works. How to deploy to Firebase will be described below.
- Push: Commit and push to your Github repository.
- Report: Fill in the data asked for on the progress report spreadsheet. A link to the spreadsheet is on Canvas.
Don't skip any of the above steps. Don't report success if there's not a working deployed version. Don't just copy code. That's of no value to anyone.
You do not have to use exactly the code given. Experiment. Document what you did differently and why in code comments or even better on Campuswire.