React Native Fundamentals

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.
Course info
Rating
(29)
Level
Intermediate
Updated
Jun 18, 2018
Duration
2h 38m
Table of contents
Description
Course info
Rating
(29)
Level
Intermediate
Updated
Jun 18, 2018
Duration
2h 38m
Description

The basis of development with a hybrid platform is understanding how to use JavaScript to create the app. In this course, React Native Fundamentals, you will learn how to build a complete mobile app. First, you will learn how to use the components available in React Native. Then, you will explore how to grab data from a remote source and navigate around the app. Finally, you will discover how to compile an app ready for release to the desired app store. When you are done with this course, you will have solid knowledge of React Native that will help you move forward and build your own apps.

About the author
About the author

After over 16 years in IT, Reggie finally decided to follow a long-term dream of learning to code. The path Reggie chose led him to pick up JavaScript, and building Web and mobile apps.

More from the author
Ionic End to End
Beginner
3h 8m
Nov 6, 2017
Angular 2 End-to-end
Beginner
2h 40m
Apr 17, 2017
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi everyone. My name is Reggie Dawson, and welcome to my course, React Native Fundamentals. I am a freelance developer with a focus on JavaScript frameworks. React Native is quickly becoming the most popular hybrid mobile app platform. Unlike other hybrid frameworks, React Native will generate a true native app. In this course, you will learn the fundamentals of React Native, and only a basic knowledge of JavaScript is required. Some of the major topics we will cover include composing React Native components, how to use props and state, grabbing data from remote APIs, and navigating around the app. By the end of this course, you will know how to build a mobile app of your own with React Native. I hope you will join me on this journey to learn React Native with the React Native Fundamentals course at Pluralsight.

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.