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
React Native App Overview
Loading...
Рецензии
4.7 (оценок: 124)
- 5 stars98 ratings
- 4 stars19 ratings
- 3 stars5 ratings
- 2 stars1 ratings
- 1 star1 ratings
SR
Nov 13, 2018
Best course . I love the way of teaching. It helps me to enhance my career.
NA
Jan 27, 2019
I have many skill ,experience, when join a courses. thank for teacher
Из урока
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. Muppala
Associate Professor
[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., 2019 Все права защищены.
