Learning React Native, Chapter 3: Building Your First Application

The purpose of this chapter is straightforward.  We will write our first app, and deploy it to a device.

Setting Up Your Environment

There are two approaches to developing React Native:
  • create-react-native-app - used in this book most of the time.  It is quicker and easier installation, but only supports JS apps.  
  • full react-native install - Allows writing Objective-C and Java components

Developer Setup: Create React Native App

npm install -g

React Native uses the node package manager.  To us this, you will need to make sure you have Node.js installed. 

Links:
https://nodejs.org/en/download/

Creating Your Application with create-react-native-app

create-react-native-app first_project
This will install all the code you need to start writing a react native app.

Previewing You App on iOS or Android

Starting Your first project should be easy.  Run
npm start
From the terminal.  I had an issue starting my server, but the instructions in the error message worked fine.
Once the app is up and running properly, you will see a QR code on the screen.  You can download the Expo app and run your new app on your mobile device.

Links:

Developer Setup: The Traditional Approach

To develop an iOS app, you will need a mac.  The full instructions can be found in the links section below.  You will need the following items installed:
  • node.js
  • React Native
  • Xcode
  • JDK, Android SDK, and Android Studio

Links:

Creating your first application with react-native

Run
npm install -g
react-native-cli
You might have to be root to run these commaned, it all depends on your operating system.  Then run  
react-native init project-name
 This will install all the boilerplate code you need to start writing your first project.

Running your app on iOS

By using the commmand:
react-native run-ios 
Once everything finishes starting, you can see your app in the simulator.  You can also open the app in Xcode , and run it from there.  You can also run your project on a real device by using Xcode.  You will need a free developer account for this, so you can sign your app.

Running your app on Android

Running on Android doesn't require a free developer account, but it does require Android Studio and the Android SDK.  You can run it in an emulator, or you can run it on your device. To run on your device, you will need to enable debugging on it.  This typically involves finding the secrete settting, by tapping 7 times.  Just Google it.  It's easy.

Exploring the sample code

Working with React Native, you must import every component you wish to use.  In the example file, you will that instead of using
or , we will replace these with and .  One change from the book, all the code is contained in App.js, instead of the specific .js files.  All layouts are specified with Flexbox and style is specified at the bottom of the file.

Building a Weather App

This section promises to be a blur of code and ideas.  It should serve as a reference for later projects.  This is a lot of code here.  It is not well defined, until the end of the section.  The nice thing is, that it all worked perfectly once, I figured out where it all goes. 

Displaying Data

This section shows how to create a new class and import it into our existing file.  I ran into no problems here. 

Fetching data from the web

This section details fetching data from the web.  React Native uses the Fetch API, which relies on promises.  I never could get this example to work on my local machine.  I created a free account on OpenWeatherMap API.  I also made a lot of use of the debugging tools, to determine what the problem was.  I never did find a solution.

Links:

Adding a background image

To make an Image appear, we use the tag with the source attribute.  By adding @2x or @3x, you can have different images for different screen sizes.
Sometime the API changed, and you now have to use .  This was a simple change.

Pulling it all together

This is the listing of the final code base.  It you have any problems, start here.  It will help you determine what you might have done wrong.  I never did get the styling correct, and I never did get fetch to work in the emulator.
Links:

Comments

Post a Comment

Popular posts from this blog

Go Programming Blueprints, Chapter 2, Adding User Accounts

A universal truth in programming is that there are relatively few unique unsolved problems.  What tasked with a new problem, always see what other solutions exist and how we can solve our new one.  In this instance, we are going to use open source solutions to auth against existing services. Handlers all the way down Everything we write will be http handlers.  This allows us to encapsulate objects as far down the chain as needed.  Making pretty social sign in page We get a quick lesson on bootstrap, and why and how to use it.  There are two methods to showing our bootst rap.  We can leave it hosted on a CDN or add it to our assets folder.  Endpoints with Dynamic Paths Go doesn't support the most robust path selections (/path/options), such as ruby on rails or Django python.  As with everything Go, there are open source packages we can use to help with this functionality.  We will use string.split to break our argument paths in the re...
Read more

Successful Big Game Hunting Chapter 10

Chapter 10: Short Course on Bear Hunting As with all the short course chapters, this is a quick chapter on hunting different types of bears.  Mr. Gilchrist has several tips on the different types of bears, and tips on how to distinguish between them.  In at least one western state, there is a test on how to visually tell the difference between a grizzly bear and a black bear. Of course he as tips on how to prepare a bear hide for for taxidermy, and how to score a bear as a trophy.  He also has several tips on how to tell if a bear is a trophy. Favorite Quote: "Bears often react violently to a superficial hit.  He may fall as though mortally wounded, when only hit in the paw"
Read more