Chapter 2: Basics of React Native

We started by learning about why React Native and Galio form the best combination for us to start building our first cross-platform mobile application. After setting up our environment and configuring the necessary files, we created our first React Native project with Expo and we learned about the different ways we can test the app both physically and digitally.

I believe that learning about the whys before the hows helps build a better, more robust knowledge base. Having passed through the whys, it is now time to learn about how React Native works and how to use it to create our apps.

That is why we'll start this chapter by going through the file structure of our React Native project for us to understand how these files and folders are connected. We'll then go through the App.js file and explain how this works for us as the main entry point into our application.

Once we've learned about the file structure, it is time for us to learn about what JSX is and how to use it – the skeleton of any React application. We'll be comparing JSX to HTML a lot, so you'll have to know a bit of HTML beforehand. Rest easy if you don't know much about web development – we'll lay down some HTML concepts as well, but learning a bit about it on your own may help you a lot in the long run. Understanding the concept of JSX is where we'll deal with the concept of components, a concept we barely touched on in the first chapter. This should be completely understood by the end of this chapter.

Once we've understood the main concepts of JSX and how it is connected to React and React Native, we'll do our first component import. We'll learn what npm/yarn is and how to use it for importing and uploading components or libraries on the web. This is exciting as you'll see the importance of having a huge community backing a framework and how you can participate and make new friends.

It is now time to learn about the core components of React Native. We'll understand how and in which contexts they're useful while we discuss different ways of improving them or even changing them completely. The core components are the base components for all the components we'll find online. That means that almost every component inherits from the core ones, which makes them important to learn about and understand.

By the end of this chapter, you'll have learned how to build a component. You'll have also learned how to use it in our app or future apps and how to organize the files so that you'll never get lost searching for your components.

I believe that by the end of this chapter, you will be able to start building really simple apps that can serve as a stepping stone for building bigger, more complex projects. Understanding these concepts doesn't stop at reading this book – it goes further than that, and you'll see me always encouraging you to check out the official documentation of whatever project/framework we're using as the documentation should always be something a programmer should feel comfortable reading. Learning to read the documentation is a skill you'll develop in time by reading and being as interested as possible in the project you're passionate about.

This chapter will cover the following topics:

• Using App.js – the main entry point
• Understanding the concept of JSX
• Importing your first component
• Core components
• Understanding and creating a component