React Native is quickly becoming the preferred hybrid mobile app platform. This course will teach you the essentials of React Native including creating components, using props and state, and making use of data from remote sources.
Getting Started with React Native In this module, first we will learn a little bit about React Native and why you would want to use it. We will also learn about the components and APIs available to us, how they are different, and what they can do for our apps. Once we do that, we will install React Native and create our app. After that, we will take a look at the code that makes up a React Native app. Then finally we will learn how to preview the app, and debug any problems that we may have.
Learning React Native Basics Now that we know how to install React Native and generate our project, we can get started. In this module, we will begin to piece together the interface of our app. First we will look at the View component, and how we use it with our other components. After that, we will go over props and state, which is one of the key concepts of React and React Native. Understanding this will be essential to making the best use of React Native. Next we will learn how we can lay out our app with the available tools in React Native. Now an app is useless if you can't see other screens, so we will also look at how we set up navigation. After this module, you should understand how to use the components of React Native to configure the layout of your app. Once we are done, we will have a couple screens in our app and a solid foundation to build on.
Using External Data and Libraries In this module, we will add some more features to the app we are building. First we will set up the video listing that will be displayed in the lessons area. Then we will make use of React Native's built-in networking to connect to YouTube and provide the videos. After that, we will add a basic user authentication system. Even though it won't have full functionality, it will be in place once the final authentication system is ready. Now our main purpose for adding this system, however, will be to store the user account locally. We will then be able to use this locally-stored account to display the logged-in user. After this module, you will know how to grab data from a remote source, as well as how to make use of the storage available on your device.
Finishing the App Welcome back to the React Native Fundamentals course. In this module, we will finish adding all the features to our app. First, we are going to be implementing a simple quiz to test the end user's knowledge. This quiz will make use of a simple data file to supply the questions. This will allow the quiz to be changed simply by providing a new data file. Then after we add the quiz, we will incorporate a blog into our app. This blog will also make use of an API and grab data from a remote source, but this time we will make use of WordPress to provide the data. This will be similar to how we used YouTube, but we will still have another set of issues to consider when using WordPress. WordPress returns post content formatted with HTML tags. As a result, we will need to come up with some way to deal with this content. Then finally, we will add the About component. This won't be a complex component, but we will use this as an opportunity to go over some of the basics of React Native, and what goes into composing a component one more time. After this module, your app will be finished and ready to be compiled for production.
Compiling the React Native App Since we are finished building the app, the last step is to compile it to something that can be installed by anyone. The workflow that we use throughout the course will allow us to use Expo for this. Besides being the app that allows us to preview our project, Expo can also compile an app that is ready for release. First we will look at the options that we have for installing the development environment of Expo. After we have the Expo XDE application installed, we will move our project over to Expo. Since our project was generated using the create-react-native-app, doing this ensures compatibility with Expo. Once we get the app moved into Expo, we can learn how to use the XDE. This desktop application with the graphical user interface automates previewing the app for us. Along with that, it makes it easier to perform tasks such as viewing the logs or restarting the app. Your app should present a unified brand, and these two graphical assets are part of that. When users install your app, the icon will identify it on their device. When they launch your app, the splash page will let them know what is launching. After everything is in order, we will use Expo to compile the app. This cloud build has the benefit of allowing us to compile an app without having the development kit for the desired platform installed. After this step, your app will be ready for release. After this module, the journey is over, and you should be ready to develop your own React Native apps.