Mobile Development with React Native
UREACTN
2 days
Interested in a private company training? Request it here.
Introduction to React Native
What exactly is React Native, why do you want to use it over other solutions for mobile development, and how do you set up your development environment?
- The World of Mobile Development
- What is React Native?
- Why Choose React Native?
- Setting up a Development Environment
Getting started with React Native
Hit the ground running and start building your first React Native application. In this chapter we start by taking a closer look at how to structure a React Native project and how to debug our application. We continue with some React Native basics, and build and run our first React Native application.
- Project Structure
- Debugging an Application
- Components
- JSX
- Building our first page
- Adding application state
- Reacting to user input
- LAB: Getting started with React Native
Layout and Styling
Making your app work is one thing, making it usable is another. Mobile apps have to work in different orientations and on different screens. In this chapter we'll explore styling and layout, as well as animations that help your users navigate your app
- Styling and Layout in Mobile Applications
- Layout with Flexbox
- The React Native Styling system
- Adding Animations to enhance User Experience
- LAB: React Native Styling
Managing Data and Resources
Apps need data. Whether they need to load resources from a server, or save user settings to the device. While you might already know about the Fetch API for service calls, React Native has its own way of handling local storage and assets.
- Data in Mobile Apps
- Loading resources from an API
- Working with ListViews
- storing offline data with AsyncStorage
- Working with Assets
- LAB: Storage and Networking
Routing and Navigation
Apps almost always consist of multiple pages. In this chapter we'll explore the different navigation options available in React Navigation, and how you can compose them for easy routing.
- Introducing React Navigation
- Basic routing with Stack Navigation
- Bringing navigation to the foregroung with Tab Navigation
- Drawer Navigation: Save screen space while retaining easy navigation
- Combining Navigators for a better flow in your app
- LAB: Routing and Navigation
In today's world, having a product that works on multiple platforms is quickly becoming essential for a lot of businesses. But of course building the same product multiple times isn't only costly, it also introduces some technical challenges. React Native aims to reduce the complexity of cross-platform development by letting React developers reuse a lot of the skills they already posess.
This course targets professional web developers who are familiar with JavaScript (ES2015+) and HTML and are looking to develop cross-platform mobile applications. Knowledge of React is recommended, but not necessary.