Introduction to React Native

Loading...

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

Multiplatform Mobile App Development with React Native

64 оценки

The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with React Native

64 оценки

Курс 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]

Now that you have had a brief introduction to hybrid mobile development,

let's look at React Native in particular in this course.

In this lecture, I will give you a brief overview of React Native.

And after that, we will go on to doing exercises.

Thereby, we learn various aspects of react native.

Along the way, I will introduce you to various concepts

related to React Native as and when required.

Let's begin our journey into React Native by quickly paying a visit

to the React Native website.

And so here, you see where React Native is described as

build native mobile apps using JavaScript and React.

So that is why you need to have good knowledge of JavaScript,

as well as React in order to make use of React Native.

If you are familiar with React and how React components are defined,

which you must be by now, because you would have taken the previous

course in this specialization where we examined React in great detail,

then you would understand how to write React applications.

Now in React Native, we are approaching this by defining React

components and within these React components, however,

when we define the views, the layouts of our screens,

then we will use React Native specific components to define these views.

So as you'll see, you would see like a view in Text and so on.

In the way we define the layouts for our React Native components and

also a React Native app is a real mobile app.

So this is not a mobile web app or a HTML5 mobile app,

as we discussed in the previous lecture.

This is a real app that is built, of course, using JavaScript.

But then, React actually runs on your mobile device.

It will not look any different from an app that is built using the native approach.

Furthermore, as we develop React Native applications,

you will realize that React Native supports something like hot reloading.

Meaning that as you edit your code, the modified version is automatically loaded

into your app, and then it'll immediately reflect the changes within your app,

as we will see when we do the exercises.

If what React Native provides is insufficient to meet your needs,

then you can always go native.

Meaning that you can leverage the native platform

by ejecting out of the React Native environment and

then be able to do part of the application development using native approaches.

Now that means that you would have to use platform specific code and

platform specific features for that purpose.

In this course, we won't go to that level of detail.

As we will realize, when you complete this course,

you can do a lot simply staying within the React Native ecosystem.

And there'll be little incentive for you to go native at

the end of this course, except for very specific needs.

And if you check out the various companies that are using React Native, there you

have a small sample of the applications that are built using React Native.

Things that you may not have realized that they are built using React Native.

Let's get started and learn the basics of React Native.

Having quickly paid a visit to the React Native website,

let's summarize what we have just looked.

We have learned that React Native is a cross-platform, native iOS and

Android app building environment without using web views.

So that is the most important point to be noted.

Now, React Native, as you realize, is mainly focused on the front-end,

the client-side part of your entire development environment.

And also, it uses React plus JavaScript for doing its development.

And also, you get access to 100% of the native APIs via JavaScript.

And then we reuse a lot of packages from NPM, also,

in order to get access to the react environment.

And React Native itself is backed by Facebook.

And Facebook was the one that is behind React and also, correspondingly,

React Native.

And what more proof than to show that Facebook itself

uses React Native for its mobile app that all of you

are obviously familiar in using to access your Facebook.

Now obviously, you may be wondering, how does React Native actually do its work?

Here, I'll give you a brief, not necessarily

a comprehensive view of how React Native actually works, but

just sufficient enough for us to understand how React Native works.

The actual details of how React Native actually accesses the native device

capabilities and so on is not necessary for us to understand completely.

Because we'll be mainly remaining within the React Native

ecosystem while accessing the device capabilities.

So when you go to any native platforms, so you have the entire native platform.

So if you want to target the native platform, obviously,

we realize that the only way to do so is to use the native

development environment and the corresponding languages for the purpose.

Now in this course, our idea is to use hybrid development

using JavaScript as the language of choice.

So we will look at the native platforms, the two native platforms,

Android and iOS, the two halves of this entire landscape.

And so how do we target each of these two platforms?

So this is where we will understand that Android has the V8 JavaScript engine.

And then iOS has the JavaScript code, JavaScript engine, which is used

by the browsers in each of these platforms to run the JavaScript code already.

So we have a virtual machine already that understands JavaScript and

is able to run the JavaScript code, so why not build on top of that?

And that is where React Native puts in its bridge into the native environment.

The bridge that taps in though these virtual machines into

the native devices capabilities.

And on top of that, we built React Native itself, which is implemented in

JavaScript and then partly implemented in native code.

But that part is completely hidden from us.

And so we access by writing React Native application code

on top of the React Native framework.

And the application code is completely written in JavaScript.

Now when you need to render your user interface in either of the two platforms,

then both of these will access the native UI elements,

whether it is in Android or whether it is in iOS.

They will access the native UI elements and

then leverage them while rendering the user interface for both the platforms.

Now this part is automatically taken care of for

us by the React Native platform itself.

And so we can live in the comfort of the JavaScript environment and

write our code completely as if we are writing a React Native application and

be able to leverage all of the native device's capabilities.

In this context, we will also encounter the Expo SDK,

which I will talk about in a little detail in the next lecture, in the exercise.

And then also in a lot more detail in the last module of this course,

where we will look at accessing the native device's capabilities in lot more detail.

So how do we get started with React Native development?

First and foremost, you used to go and access and

install the React Native development tools.

And we're going to leverage the create-react-native-app

command line tool to enable us to do our React Native development.

The create-react-native-app tool sets up the entire ecosystem for

our React Native app development.

It sets up all the things, like if you read about React Native, you would hear

people mentioning about Babel and then doing transpiling and things like that.

We are completely isolated from that part by using the React Native app,

because that sets up this whole environment for us.

And so we are left in the comfort of doing just JavaScript application development.

And that's the reason why I chose to leverage

the create-react-native-app way of doing React Native development.

Now once we install that, then we will be able to scaffold out a React Native app by

simply saying, create-react-native-app, and then give a project name to that.

And then it'll scaffle out the project directory with the necessary

files to get you started in React Native app development.

This is exactly what we will do in the very next exercise that follows

this lecture.

And the create-react-native-app leverages the Expo SDK for helping us to setup

the environment where we can comfortably do our React Native app development.

And so we will explore Expo SDK briefly in the next lecture, and

then also examine it in more detail in the last module.

With this quick understanding of React Native, let's move on to

get some hands on experience with development React Native applications.

[MUSIC]

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

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

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

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

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

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