This post is 2nd in a the Full Stack Product Series Series. If you just landed here, it might be worthwhile checking out the series overview.
Now lets start getting something up. I like to start with the pieces closest to the user, generally the UI. Starting UI first allows for user testing and getting a better sense of what needs to be done earlier, before working on more integrated pieces.
A quick aside: A tremendous amount of time can, and probably should, be spent understanding what and why to build something before how to build it. At the same time, a blank slate will have few insights to offer. This is where rapid prototyping can offer a ton of support. Paper prototyping, Sketch and InVision, or even good ol’ PowerPoint are all great ways to move quickly and get something in front of humans for feedback. Once there is a good understanding, starting to prototype in something “more real” can have huge benefits as you move along.
Follow Setting up the development environment from React Native to get your machine setup with local development. Since we’re not looking to use any custom or native libraries off the start, the
Expo CLI Quickstart should be a fine start. In a future tutorial we will be ejecting from Expo, but it is a good idea to start as simple as possible first. Name this project
ReactNativeSpike or similar. We will lay the foundation for Coach Me later in this section.
When setting up the app with Expo for the first time, choose the
blank (TypeScript) option.
❯ expo init ReactNativeSpike ? Choose a template: ----- Managed workflow ----- blank a minimal app as clean as an empty canvas ❯ blank (TypeScript) same as blank but with TypeScript configuration tabs several example screens and tabs using react-navigation ----- Bare workflow ----- minimal bare and minimal, just the essentials to get you started minimal (TypeScript) same as minimal but with TypeScript configuration
The React Native project you generated has a lot under the hood. We will explore it in more detail in a future section, but at this point you should be able to run the hello world app that you generated. You can do this in a few ways:
You will need to install Android Studio and do some setup. Android emulator setup for expo on mac is a good walkthough of what to do.
Now that you have the app setup and running, here comes some of the magic of React Native. You can quickly make changes in your app and see them reflected. In the app you should see a message
Open up App.tsx to start working on your app!. Follow that instruction, make a text change to say
Hello World within the
<Text></Text> blocks. Once you save your file, you should see the apps automatically refresh. If it does not update, check that you are running expo service in a terminal of your development machine.
Spend some time adding components to your app. They do not need to do anything at this point, they are just for show. Check out the React Native Docs on Core Components and APIs to get some inspiration.
Before moving on, you should be able to:
Now that you have gotten a chance to play with React Native a bit, it is time to start the Coach Me app. Generate a new React Native project similar to what you did above but give it the name
Now that your app is working, this is a good spot to check-in your code. Generating the project, it automatically git initialized it, however you may notice that the
package-lock.json has been updated after the initial commit. Add the updates and commit it.
Take a look at the reference product CoachMe-App @ 24b1882 to see if you have something similar.
Before moving on, you should have: