Intro to React Native

Link to slides:

http://links.uclaacm.com/hoth9-react-native-slides

​

​

Link to README:

http://links.uclaacm.com/hoth9-react-native-readme

​

The Game Plan

• Intro to React Native
• Basic setup
• JSX
• Views and Components and Stylesheets
• Custom Components
• Functionality

DISCLAIMER

• We gonna be zoomin
• An understanding of javascript and HTML will greatly help.
• Highly recommend checking out workshop on Javascript/HTML/CSS if you’re unfamiliar with these already.

💨

React Native

How does one natively react pls help

cross-platform mobile development

​

✨

✨

✨

✨

✨

✨

✨

Native Mobile Development

• Native apps: apps installed directly on the mobile device
• (Previously) only able to be developed with platform-specific languages/tools
• iOS: Objective-C, Swift
• Android: Java, Kotlin

​

iOS Android

Cross-Platform Development

• Build apps across multiple platforms using one codebase
• Multiple solutions:
• React Native
• Ionic
• Flutter
• Xamarin

​

iOS Android

React Native

• JavaScript tool for building native mobile apps
• Cross-platform
• JavaScript code is translated into each platform’s native code
• Backed by Facebook
• Lots of community support
• https://reactnative.dev/

​

A fat TL;DR (Summary)

IOS and Android apps are made in different programming languages.

​

• Can we just learn one language/technology �across all platforms?

​

​

�React Native is a cross-platform Javascript tool that lets us!

​

Apps using React Native

Basic Setup

STUFF TO INSTALL (sorry kind of a lot):

• VSCode (Text editor for code)
• Node.JS (DOWNLOAD LTS, NOT CURRENT)
• Expo Go (This is an app you’d download to your phone on the app store unless you have a simulator on computer)

�Feel free to pause and get these installed before continuing!

Create your first React Native app!

Open VSCode.

• Open the terminal in VSCode
• FOR WINDOWS:
• Type “npm i -g expo-cli “ to install expo
• FOR MAC:
• Type “sudo npm i -g expo-cli “ to install expo

You only need to do this once!

Create your first React Native app pt. 2

• Navigate to a folder on your computer you want to put your project in
• After this, type: “expo init name”, where name is whatever you want to call your project.
• Choose a blank template.
• To run code, type: “Expo start”

You can use a simulator or scan the QR code with your phone to open your app on your phone!

Time to fill this with stuff

Javascript and XML’s love child

Javascript – a programming language.

XML - a markup language. (Tells browsers how to format information. Very very similar to HTML.)�

Javascript XML (JSX) - Their baby�

JSX basically lets us write UI in �Javascript.

​

Javascript

XML

JSX

JSX Cont.

Basically, JSX lets us store “markup” code into variables, and directly write it into JavaScript.

• Remember, “markup” is just a fancy term for “stuff that formats the screen.”
• Examples: View, Text, etc. (Demo)

�Note: Save the file after typing code to instantly see your changes!

Components

“View” and “Text” are examples of components. Think of components like basic app elements provided to us!

Ex:

• Text
• Image
• Button
• ScrollView
• TextInput

…and

TONS more.

Text and Image

Two bread and butter components that I’ll quickly demonstrate!

Text:

<Text> Ducks go quack </Text>

Image:

<Image source={require(‘./assets/duck.png’)} />

OR

<Image source={{uri: ‘https://someLinkToImage.png’,}}/>

Imports

Remember how React Native is cross-platform?

• Uses certain bits and pieces from different places
• To use these things, you must IMPORT them.�Ex: To use an “Image” component, it has to be imported at the top of the code.
• React Native usually does this for us, but sometimes it misses something!

�DEMO

Views

Views are containers that hold stuff!

• They make stuff show up on the screen
• Invisible component

​

<View>

<Text> Hello :D </Text>

</View>

What is all this extra stuff

export default function App() {

return(

<View style={styles.container}>� <Text> Guess what? Chicken butt </Text>� </View>

);

}

Let’s make it pretty!

Stylesheets

Easy (and most common) way to format views

• Put all the formatting for a view under one “style” that you get to name
• You can have multiple styles in one style sheet
• Using JSX within the code (curly braces!)�

Stylesheet

app:

Demo

Custom Components

What are they: functions you make, that you can insert in multiple places later in your code.

​

Why this matters: Lets you call one function to reference a whole bunch of code, instead of typing the same code in a bunch of areas.

X

Custom Components Continued -> alliteration!

May be useful to put multiple parts of the same UI element onto the screen.��(UI means user interface– just the stuff the user sees.)

​

COMPONENT

Now, let’s make our app do something.

TouchableOpacity

• Basically a button with a smidge of flair
• Component that user can touch
• Slightly changes color! Very cool.

​

​

DEMO

Screen changes

What if we wanted to have the screen change after the user presses a button?

• Right now, the screen won’t do anything.
• We have a button, but no action for it.

​

​

Button

ACTION

useState()

useState() is a something called a “hook”.

• Basically, lets us update the screen after user interacts with stuff.
• When it is called, it re-renders the whole screen, so we can see new content that might’ve changed from the user’s actions!

useState()

?????????

Declares a new, constant variable (in this case, an array.)

The current state of whatever the element is.

Ex: *user clicks “Duck!” button.* *User clicks “No more duck!” button.*

A function we’ll call later in the body of our code to change the current state.

The initial value we set. This can be a string, integer, and so on. It’s just whatever value you want to start with.

How to use that current state value

So, we’ve defined our current state using the useState() function. How do we put it into our code?

• With curly brackets. { }
• Treat your current state like a variable, and just sandwich in between those two bad boys

�<Text>{duckState}</Text>��- This should change the text to whatever the current state “duckState” is.

DEMO

Time to make some ducks

WOOOO we made our first app!

There are still tons of things beyond this workshop that we didn’t cover. Even the stuff in this workshop, you could spend more than an hour on each!

• Organization
• Navigation
• Component documentation
• Props
• Etc.

​

Quick disclaimer for debugging

By now, whether you’ve been coding along or simply vibing to the information, it’s noteworthy to mention that bugs are common. YOU WILL MAKE ERRORS! (Unless you’re a coding god)

Common sources of headache (CHECK THESE!)

• Syntax (got all your {}? What about []? Maybe even a ()? Or a ,? Any typos?)
• Has everything been imported correctly?
• Only returning one thing?
• Google is your friend

Happy Hacking!