React Native Components

Loading...

Del curso dictado por The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with React Native

25 calificaciones

The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with React Native

25 calificaciones

Curso 3 de 4 en SpecializationFull-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

De la lección

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.

React Native Components5:10

Exercise (Video): React Native Components Part 120:04

Exercise (Video): React Native Components Part 214:28

Conoce a los instructores

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

[MUSIC]

As we have learned in the React course, React elements and

their React components are the building blocks for our React application.

So you put together a bunch of React elements into a view

in a React component, and then render that view from your React component.

So similarly, in React Native also, a React Native

application also uses React components as the building blocks,

except that the components that are used in the view are React Native components,

as I pointed out in the previous lesson.

Again, to reiterate the point,

a React Native component is nothing but a React component.

So from your knowledge of React, whatever that you learned about a React component,

you can immediately apply them to also a React Native component.

So features like the state, the props, the JSX way of writing the views,

everything comes for the ride in a React Native application.

So if you know React very well, then React Native should be very straightforward for

you, except for the use of the Native components when you design the views.

So again, to emphasize, React Native components make use of

React Native components to design the views.

So you would see that instead of using typical HTML like elements that we did

with React, you will be using React Native components themselves, which then help us

to build the views for our React Native components in our application.

Now, these built in components are mapped into corresponding

Native UI widgets in both Android and in iOS.

So they will be mapped on to the corresponding native widget.

So if you use a text component, in your React native application,

the text component will be mapped on to the text-view

component in an Android device, if you are familiar with Android, and

similarly the UI text in iOS, if you're familiar with iOS, and so on.

So when you encounter any of the components in React Native,

they would have a correspondence with the corresponding Native component

in both Android and iOS.

So that is how the actual views of your

React Native components are built up and rendered.

Now, doing this, if you know React variable,

then React Native should be a breeze, as far as we are concern, except for

learning the React Native unique features in this course.

In addition to the built-in React Native components that we get from

create React Native app, we'll also use another

UI kit called as React Native Elements.

I found that some of the React Native components,

UI components that this React Native Elements kit exports are very interesting.

So I'm going to use that also together with my React Native in

order to make my user interface a lot more easier to design.

So this React Native Elements is an all-in-one UI kit

that allows us to create React Native app UIs.

So it provides several useful UI components like

the typical text for form creation.

It will give you input, and check boxes, and similarly buttons.

Then it gives you a rating bar, and many others.

And as you go through, you will see how each of these are very,

very useful to build.

And we are going to be using that in the very next exercise.

So this is useful for designing the UI for our app.

So as we get started with the next exercise, we're going to first install

React Native Elements into our React Native application.

So to install that, you will say yarn add react-native-elements.

And right now, I'm going to be using the 1.0.0 beta version

of the React Native Elements in this course.

But once the final version is available,

you can simply substitute the final version instead of the beta version.

And as far as I've read from the documentation, the final version should

not see any breaking changes compared to the beta version.

Now, the final version may take some time to be released.

But in the meantime,

we're going to be using the current beta version of React Native Elements.

[MUSIC]

Explora nuestro catálogo

Inscríbete de manera gratuita y obtén recomendaciones personalizadas, actualizaciones y ofertas.

Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.

© 2018 Coursera Inc. Todos los derechos reservados.

Descargar en la App Store

Consíguelo en Google Play