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
Introduction to React Native
Loading...
Из курса от партнера The Hong Kong University of Science and Technology
Multiplatform Mobile App Development with React Native
16 оценки
The Hong Kong University of Science and Technology
16 оценки
Курс 3 из 4 — Specialization Full-Stack Web Development with React
Из урока
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.
Познакомьтесь с преподавателями
Jogesh K. MuppalaAssociate 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., 2018 Все права защищены.
