Hi, and welcome to our video course on React native.
In this lesson, we're going to be talking
about components and how they're used in React native.
A component in React native is a piece
of code that represents a piece of UI or a specific functionality.
It's essentially a small reusable building
block that can be used to create larger, more complex UIs.
Components are the building blocks of React native,
and they're used to manage and organize the different parts of your application.
They're responsible for rendering the UI,
handling user interactions, and managing the application's state and data.
One of the main benefits of using
components in React native is that they are reusable.
A single component can be used in multiple
places throughout your app, making it easy to manage and maintain your code.
Additionally, components make it easy to test and debug your app as you can
focus on testing a specific component rather than testing the entire app.
Hold on tight. We're about to embark on a journey
of building our first React native component.
This is just the beginning of creating
a beautiful, responsive, and interactive mobile apps.
So let's get to work.
You're now looking at My screen where you
see a simulator open with the Hello World application that we worked on before.
This is the App.js file just displaying hello, world text.
Please open your editor up as well and get started to code with me.
Run your application and don't forget to have the Metro bundler running,
otherwise you are not going to be seeing any updates in your simulator.
Are you ready to take your React native skills to the next level?
Then let's get organized.
We're going to create a new folder called
components to store all of our custom components in.
This is going to make your code clean, organized, and easy to navigate.
Next, we're going to create a new folder
inside of components and name it after our first component.
Our first component's name is going to be Mytext.
So this directory will be named in a similar way.
Now let's create a new Mytext JS file, and this is where we'll write the code
that will make our custom text component come to life.
For this, we're going to need to import React from React.
Then we're going to be needing the text component from React native.
And then let's create a functional component called Mytext.
And let's make it return a text component with Hello React native World inside it.
To make this usable, we're going to have to export it.
So let's do that.
And now let's save it.
And we're ready to use My text component.
With just a few lines of code,
you'll be able to display any text you want on the screen.
Imagine the possibilities.
You can use this component to add a personalized touch to your app or even
to display important information to the user.
The best part, it's super easy to use.
Simply import the Mytext component into your main app file and edit as a tag.
Let's save this.
It's still not in use.
So all we need to do is delete this text
component and then we're just going to use My text component.
We don't need this anymore and we can just
save this file and we're going to see the text in the simulator.
So before you know it,
you already have your own very custom text component rendering on the screen.
This is the basic structure of a component in React native and is the perfect
starting point for building your own custom components.
In this lesson we've learned what a component is,
how it's used React native and the benefits of using components.
And we've also seen an example of a simple text component.
Thank you for watching and see you in the next video.