React Native, v2
Table of Contents
IntroductionKadi Kraman gives an overview of the course material, the course prerequisites, and the tools needed to complete the course.
About React NativeKadi 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 NativeKadi 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.
Getting Started with ExpoKadi 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 NativeKadi demonstrates how to set up React Native without Expo, and explains why the process is longer and more demanding.
Adding a LinterKadi 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.
DebuggingKadi demonstrates a few ways to debug a React Native App using an application simulator or by only using Expo.
Basic React Native ComponentsKadi 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
StylingKadi demonstrates how to add styling to a React Native application, and explains that all styling in a React Native application is inline.
Styling ExerciseThe students are instructed to try to replicate the UI that was shared by the instructor using the tools discussed in the previous lesson.
Styling SolutionKadi 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.
ComponentsKadi 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.
ListsKadi explains that mapping over elements diminishes performance in a React Native app, and that lists should be used instead of maps.
Lists ExerciseThe students are instructed to refactor code using the FlatList components.
Lists SolutionKadi live codes the solution to the lists exercise.
Navigation IntroKadi 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 ExpoKadi demonstrates how to add navigation while using Expo.
Adding Navigation with Plain React NativeKadi covers the different steps needed to add navigation in plain React Native, and explains what a podfile is.
Adding NavigationKadi 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 ExerciseStudents 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 ComponentKadi 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 DataKadi 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, useEffectKadi 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 ExerciseStudents 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 SolutionKadi live codes the solution to the network requests exercise.
Pull to RefreshKadi explains that React Native components have a built-in scroll indicator, and demonstrates how to add props that refresh the FlatList component.
Overview of Forms in React NativeKadi 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 ModalKadi 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 ExerciseStudents 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 ModalKadi 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 NavigationKadi 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 FlatListKadi 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.