Kadi Kraman
Formidable
Course Description
Leverage your JavaScript and React skills for mobile iOS and Android platforms using React Native. Examples in this course allow you to get started quickly and see your changes immediately in React Native using Expo, or use pure React Native standalone if you prefer. You’ll use native components for rendering lists, building forms, and styling them with CSS. Then you’ll learn to navigate between screens and fetch data with React hooks. By then end of the course, you’ll be able to ship your very own native mobile applications!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseLearn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 17 minutes
Kadi Kraman gives an overview of the course material, the course prerequisites, and the tools needed to complete the course.
Kadi talks about the history of React Native, why was it created, and how it works on a high level, and answers questions about working with other languages when using React Native.
Kadi explains that Expo is a suite of tools built for and around React Native that makes building apps easy, and gives the limits and advantages of using Expo when beginning to learn React Native.
Setup
Section Duration: 25 minutes
Kadi demonstrates how to install Expo from the terminal, how to start a new project on Expo, and how to use Expo on a mobile device.
Kadi demonstrates how to set up React Native without Expo, and explains why the process is longer and more demanding.
Kadi explains how adding a linter improves the experience of developing a React Native app, and recommends installing it when using Expo. Plain React Native already has a linter.
Kadi demonstrates a few ways to debug a React Native App using an application simulator or by only using Expo.
Basic Components
Section Duration: 57 minutes
Kadi live codes the component and gives an introduction to React, and highlights the main React Native tags: Text, which is used for displaying text, View, which are equivalent to divs on the web, and ScrollView, which is used to scroll over content. - hhttps://kadikraman.github.io/react-native-v2/intro-to-react
Kadi demonstrates how to add styling to a React Native application, and explains that all styling in a React Native application is inline.
The students are instructed to try to replicate the UI that was shared by the instructor using the tools discussed in the previous lesson.
Kadi live codes the solution to the styling exercise, answers questions about styling and fonts, and demonstrates how to use the array method when writing embedded styling.
Kadi explains that React Native, similarl to React is a component based framework. Components are nested within each other and reuseable. It is best practice to break an app into as many components as possible, and reuse them. Properties and how to write destructured properties is also discussed.
Kadi explains that mapping over elements diminishes performance in a React Native app, and that lists should be used instead of maps.
The students are instructed to refactor code using the FlatList components.
Kadi live codes the solution to the lists exercise.
Navigation
Section Duration: 48 minutes
Kadi introduces the two main navigation libraries, the React Navigation library and the React Native Navigation.React Native Navigation used to be more performant, but now both libraries perform similarly.
Kadi demonstrates how to add navigation while using Expo.
Kadi covers the different steps needed to add navigation in plain React Native, and explains what a podfile is.
Kadi demonstrates how to add interactivity to an app, and refactors the code by adding new components. Touchable components and how to use them to add interactivity is also discussed.
Students are instructed to update the app so that the colors and name are beeing passed into the ColorPalette component to make it reusable.
Kadi live codes the solution to the navigation exercise by making a component reusable and adding the right title page to each screens.
Kadi continues to live code the solution to the navigation exercise by adding a new color scheme and creating a preview component.
Hooks & Network Requests
Section Duration: 28 minutes
Kadi explains what the useState, useCallback and useEffect hooks are, what they are used for, and how they work under the hood. - kadikraman.github.io@react-native-v2/react-hooks
Students are instructed to build a network request to fetch color palettes from an API using all three of the hooks mentioned in the previous section.
Kadi live codes the solution to the network requests exercise.
Kadi explains that React Native components have a built-in scroll indicator, and demonstrates how to add props that refresh the FlatList component.
Forms
Section Duration: 58 minutes
Kadi explains how forms are useful components when using React Native, reviews how to use a few different React Native components, and explains that some components are not built-in and so research will be needed to implement them.
Kadi demonstrates how to use modals in React Native. This is the first step Kadi takes before demonstrating how to add a button to open the modal containing form that allows the user to add new data.
Students are instructed to code a form that allows users to create a color scheme. The form should accept a text name, colors using toggle buttons. A button allowing the submission of the form should also be added.
Kadi live codes the first part of the solution to the form exercise by demonstrating how to create a modal that allows users to input new color schemes to the app.
Kadi continues to live code the solution to the form exercise by demonstrating how to use navigation to go from the color palette modal to the home page, and adds route props to make navigating the app possible.
Kadi live codes the last part of the solution to the form exercise by adding a FlatList component that allows the user to map over the different color schemes and select the color wanted. This section demonstrates how to use React hooks for forms and navigation within React Native.
Wrapping Up
Section Duration: 7 minutes
Kadi reviews what was covered in the course, and points students to more exercises and additional resources to explore next.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops