React Native, v2
Learning Paths:
Table of Contents
Introduction
Introduction
Kadi Kraman gives an overview of the course material, the course prerequisites, and the tools needed to complete the course.
About React Native
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.
Expo vs. 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
Getting Started with Expo
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.
Getting Started with Plain React Native
Kadi demonstrates how to set up React Native without Expo, and explains why the process is longer and more demanding.
Adding a Linter
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.
Debugging
Kadi demonstrates a few ways to debug a React Native App using an application simulator or by only using Expo.
Basic Components
Basic React Native Components
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
Styling
Kadi demonstrates how to add styling to a React Native application, and explains that all styling in a React Native application is inline.
Styling Exercise
The students are instructed to try to replicate the UI that was shared by the instructor using the tools discussed in the previous lesson.
Styling Solution
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.
Components
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.
Lists
Kadi explains that mapping over elements diminishes performance in a React Native app, and that lists should be used instead of maps.
Lists Exercise
The students are instructed to refactor code using the FlatList components.
Lists Solution
Kadi live codes the solution to the lists exercise.
Navigation
Navigation Intro
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.
Adding Navigation with Expo
Kadi demonstrates how to add navigation while using Expo.
Adding Navigation with Plain React Native
Kadi covers the different steps needed to add navigation in plain React Native, and explains what a podfile is.
Adding Navigation
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.
Navigation Exercise
Students are instructed to update the app so that the colors and name are beeing passed into the ColorPalette component to make it reusable.
Navigation Solution: Reusing a Component
Kadi live codes the solution to the navigation exercise by making a component reusable and adding the right title page to each screens.
Navigation Solution: Adding New Data
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
useState, useCallback, useEffect
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
Network Requests Exercise
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.
Network Requests Solution
Kadi live codes the solution to the network requests exercise.
Pull to Refresh
Kadi explains that React Native components have a built-in scroll indicator, and demonstrates how to add props that refresh the FlatList component.
Forms
Overview of Forms in React Native
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.
Opening a Full Screen Modal
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.
Form Exercise
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.
Form Solution: Creating the Modal
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.
Form Solution: Adding the Navigation
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.
Form Solution: Adding a FlatList
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.
