React Native Components

In this lecture, we will talk about React Native Components.

What is a Component in the first place? If you look its definition in your dictionary or through Google search,  a component is simply a part or an element that makes up a larger thing, like a wheel of a car; a wing of an airplane; or a certain module of a computer program.

In ReactJS and React Native, a Component is the basic building blocks of your web or mobile app.

Think about the house that you are currently living in.

It has a kitchen, a bathroom, a bedroom, a garage and many other COMPONENTS or sections.

This model resembles what COMPONENTS are to your APPLICATION.

In this example,  your house represents the Mobile App you’re building.

and the kitchen, bathroom, bedroom and garage are the REACT NATIVE COMPONENTS.

These Components can be the login page, forms, data table, gallery or other user-interface modules of your mobile app.

React Native Components let you split the UI into independent, reusable elements that you can assemble together to create a fully-functional mobile app. Code-wise, you only need to extend the React Component class and then add the required render function to make a component. In the course of our development, we will be creating a lot of components that we will be using to design and assemble our mobile app.

Here are the 5 simple steps to create a Component.

1. First, create a new javascript class. For example,

class LoginComponent{}

2. Second, import the Component class from react library. Something like:

import React, { Component } from ‘react’;

3. Third, extend the Component class to the new Class you had just created. This makes your class to be a React Native Component.

4. Fourth, implement the required render function which will be called to produce the UI elements.

5. And lastly, add other variables, properties and functions for your new component.

 

In the React Native framework, there are a lot of built-in components that you can readily use for your application. Let’s now explore these components in this lecture.

First, open your browser and go to the official React Native documentation. Just type: react native docs

and click here.

Next, scroll down and until you see the Components section. You can see it on the left side of your screen. As you can see here, we have a lot of components to choose from like Buttons, Image, Modal and et cetera. Let’s check out the Button component.

This is the Button component and scroll down to see its properties that you can use. You have the onPress, Title, color and the accessibility Label props. If you scroll further, you can also see some example codes on how to implement this component.

Let’s try out another one. Select the Image component.

For this, we can see that it has only one prop which is the source and same as with the Button component, we also have the sample code as well.

You can check out all of these components and use them to build your full fledge native mobile app.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.