Importing your first component

Now, it's time for us to learn more about importing components. Importing is great because we can grab components from anywhere and use them in our app. I mean it – you could grab a component from anywhere on the internet.

First, let's see how the Text component we've been using got into our App.js file.

If we look above the App() function, we will see that the first lines of code are all imports of different components. Let's take a look at those and see if they're that complicated:

Figure 2.4 – Imports displayed in the App.js file

It's pretty easy to read and to understand what exactly is going on here. Let's take the first line, for example. We're importing StatusBar from a package called expo-status-bar.

Why are we're doing that? In our App() function, you'll see that we've used a component called StatusBar.

For us to be able to use a specific component, we'll need to import it from a package or a defined path inside our project.

We can see an import from React but we can't find the React component anywhere inside our code; why is that? This is mostly because we need React to be able to use the React framework while creating all those components and writing JSX.

Underneath, we can see there are three different imports from a package called react-native. We can see StyleSheet, Text, and View. React Native comes packed with a lot of basic but really important implementations of native code for us to use in our React app.

We'll look at these core components in more detail in the next section, but you must understand the fact that those components were imported and then used inside our main function.

You can find packages online, so you could import them into your files easily by using npm. This is already installed with your Node.js configuration, so it's ready to use right now. We can search for packages on https://npmjs.com and easily install any of them with the npm i package-name command.

Right now, we'll focus on the components we received from react-native. We'll install more components in the following chapters but first, we need to learn how to use what we already have at our disposal and how we can build on top of that.

Let's start by importing some of the most important components and use them inside of our app. So, let's go to the third line in our App.js file. Between those brackets where we've imported StyleSheet, Text, and View, we'll add the Image, TextInput, and Button components.

Now, our line will look like this:

import { StyleSheet, Text, View, Image, TextInput, Button } from 'react-native';

Let's try to understand what the purpose of each component is and how we can use them inside our application.