React Native App Overview

Loading...

Из курса от партнера The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with React Native

25 оценки

The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with React Native

25 оценки

Курс 3 из 4 — Specialization Full-Stack Web Development with React

This course focuses on developing truly cross-platform, native iOS and Android apps using React Native (Ver 0.55) and the Expo SDK (Ver. 27.0.0). React Native uses modern JavaScript to get truly native UI and performance while sharing skills and code with the web. You will learn about UI development with React Native UI and layout support and access the native mobile platform's capabilities from Javascript using the Expo SDK. You should have already completed the Bootstrap 4 and the React courses in this specialization before proceeding with this course. At the end of this course you will be able to (a) Build mobile applications targeting multiple platforms with a single codebase, (b) Leverage your React and Javascript skills, (c) Use various features of React Native and the Expo SDK to build truly cross-platform mobile applications, and (d) Use Redux to design the architecture for a React-Redux application

Из урока

Multiplatform Mobile App Development with React Native: An Introduction

This module introduces you to hybrid mobile application development. You will learn about React Native and explore some of the features of React Native to implement a mobile app based on the React application that was implemented in the previous course on React.

Hybrid Mobile App Development17:50

Introduction to React Native10:59

Exercise (Video): Getting Started with React Native18:43

React Native App Overview12:06

Познакомьтесь с преподавателями

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

[MUSIC]

If you're like me, a curious George,

you wouldn't be happy just accepting what has been scaffolded out.

You want to poke your nose into the project folder and

then figure out what is in that project folder.

And at least try to understand some basics of how this

React Native application that we have scaffoled out ctually works.

So let's go ahead and do that in this lecture.

So what did we actually see on the screen for our React Native app?

So when you open the app, you saw that it just prints out

this sentence here saying open up app or js to start working on your app.

Changes you make will automatically reload.

Shake your phone to open the developer menu.

That is a clue of where to begin.

So I have opened my project folder in Visual Studio Code.

You can use your favorite editor to open the project folder so

that you get a chance to go in and examine the code that has been scaffolded out.

So let's begin our journey in our project folder.

Now, as suggested in the view

that we saw of our app, we'll begin our journey at App.js file.

Now even in a React application, you would obviously have the starting

point in App.js file, typically that's the convention that we use here.

Now notice that there is no indexing.html page in a React Native application,

because this is not a web application.

This is a React Native application which runs on a mobile device,

so when you open app.js, you immediately see familiar code here.

Since you have already done a course on React, or

at least you are familiar with React, this should look very, very familiar.

So we are importing React from react here, and

then we are importing these from react-native.

So the react-native library exports some of these,

and which we're going to be importing in this app to make use of.

Now, let's examine what is contained in here.

Now, this should also look very familiar to you.

What we are doing here is creating a React.Component called app and

then we are exporting that React.Component from here and

what will become the starting point for our application.

Now, inside here you see a render function here typical of a React.Component,

and inside the render function you'll see a return and inside the return you'll see

this code here which corresponds to what you saw on the screen.

Now, but you immediately notice that you are seeing new things here called View,

Text, and so on.

So based on your React knowledge,

this is something that you are not familiar with at all.

You have never seen a View or a Text in a React application.

Welcome to the react-native world.

These are react-native components that we are going to be making us of.

And these will be mapped into the corresponding native UI widgets

by react-native, ui widgets on Android and iOS by react-native on your behalf.

So here this view is a container for

a set of information here.

Now, the text is used to display a string of texts as you would expect.

So here you can see that we have three text elements here, three text

React Native components here which enclose the strings here, so

you see your first encounter with a React Native component.

So when you build up the views of your React Native components,

you will be making use of the built-in React Native components and

you will implement your own React Native components which are nothing but

react components, and then you will use them to build up your application.

Now, in addition, notice these here which says style={styles.container}.

And then if you go down here, that's a styles container.

Now React Native, they have decided to use inline JavaScript

based styles to be applied, unlike CSS that you are familiar with.

But this is inline JavaScript based styling that is used by React Native.

Now, he best way to learn how to use this is actually applying

them as we go along in the course, and then you will see

me modifying this and including them as we go long in the course.

Now what is interesting to note here, so this says is StyleSheet.

What is StyleSheet?

StyleSheet as you'll see is imported from react-native.

The StyleSheet allows you to to construct a stylesheet, so

this is like CSS stylesheet that we have seen but implemented in,

again, JavaScript, and then this creates a stylesheet

with one particular object here called container.

So the container style is what we have applied here, so this is how you

apply a style to any of the React Native components that we use there.

Now, they're are built in React Native components and

other React Native components.

The built-in components that we're going to examine all give you access

to this way of styling them.

So what does the style do here?

So this is container flex.

Now, React Native uses the flex box as a way of styling the contents in there.

Flex box, something that you must have encountered in the bootstrap course which

was the first one that we saw in this specialization.

Same flex box kind of support is available, or

synthesized in React Native here, so when this says flex one, so

is flex to occupy as much space as is permitted here.

And one here says one unit, that is the weight here.

So if you say flex 1 for one and then you have another container with flex 2,

then they will get one-third and two-thirds of the screen.

And then the second part is the backgroundColor here.

So this backgroundColor is applied to this view here which contains this text.

So here you see that the diagram color is #fff here.

And also the aligned items is centered here.

So that's why your items are aligned center in the screen,

and also says justify content center.

So horizontally and vertically, the content

inside this view is aligned to the center of the screen there.

Now we can change this to other values.

So you can see that the aligned items allows me to specify radius options.

Either you can say flex-start which will align it to the the starting flex-end,

align to the right end.

Center stretch, meaning it will stretch to

occupy the entire space that is available and baseline, here.

And justifyContent takes on choices, flex-start,

flex-end, center, space-between, space-around, and so on.

Now, as we go through this course,

I will be implementing some of these styles, and then as I implement them,

I will show you why I am specifying those styles, as shown there.

Now, to help you to understand that we can make changes,

I'm just going to delete some of these and

then change the background color to, Let's see,

0ff, and then save the changes.

And then you will immediately see that your application will be reloaded.

If your application doesn't reload automatically,

then you can just pull down, sometimes I have found that the application

doesn't automatically refresh itself.

Just pull down the notification tab and click on the refresh button there and

that will refresh your application, and there you go.

You see the modified application there.

Most often the application will automatically reload, so

that is hard reloading available for you, but sometimes it acts in strange manners.

In that case, just pull down and refresh the application like that.

Sometimes you may even need to shut down your yarn server and then restart it.

Now I have seen that kind of problem also occasionally happen,

so if you encounter any of these things and

your app is not refreshing, first step is to refresh by manually refreshing it

by using the notification and click on the refresh button there.

The other alternative is to restart your yarn start and

then that will also help to refresh.

But there you go.

You'll see how you're React Native application can be updated.

So that is our journey into App.js.

Now in addition to these, there are some other files here,

which I am not going to touch at this moment.

You are just going to leave them as such and

when required, we are going to examine some of these things.

Now package.json something that you're familiar with.

You can go into package.json and the explore to see what is inside where.

And in package.json,

you will see this devDependency called react-native-scripts installed there.

And the react-native-scripts is the one that contains the scripts that allow you

to work with your React Native application.

So when you typed yarn start or npm start, what you are essentially doing is

you are executing this command here called react-native-scripts start,

and that is what starts serving up your React Native application to

be viewed in your Expo app in your device there.

Now, you'll see some additional scripts installed there.

We're going to be looking at them a little bit later.

Now, going into the dependencies you'll see that there is an expo

that is installed there.

We'll examine expo in more detail later on.

You'll see that React is already installed there because this is

a React Native application which is dependent on React, so

that's why we install react and react native is also installed there.

So those are the versions of react and

react-native that I am using in this course.

So that's a quick tour of the package.json file.

And some of the other ones we will be leaving them as such,

we don't need to look at them at the moment.

We'll come back to look at some of the other files when required.

With this I hope you are enjoying a quick tool of your React Native

project folder and seen how your React Native application is actually created and

scuffled it out by the create React Native app.

And how your React Native app is being served up into your mobile device.

[MUSIC]

Ознакомьтесь с нашим каталогом

Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.

Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.

© Coursera Inc., 2018 Все права защищены.

Загрузить из App Store

Загрузить в Google Play