Introduction to React Native

Introduction to React Native (RN101)

Course Length: 2 days
Delivery Methods: Available as private class only
Course Overview

React Native is a popular framework for building cross-platform mobile applications using JavaScript. It leverages the power of React, a JavaScript library for building user interfaces, to create apps that work seamlessly on both iOS and Android platforms. Unlike hybrid apps that rely on WebViews, React Native applications render real native components, which means better performance and a more authentic user experience. The framework also supports code reuse, allowing developers to write code once and deploy it across multiple platforms, including web, macOS, and Windows, making it a versatile tool for mobile app development.

This course offers a comprehensive introduction to React Native, covering essential topics to get you started with building mobile applications. You will learn how to set up a React Native environment using both the React Native CLI and Expo, a framework that simplifies the development process. The course will guide you through creating user interfaces with React Native's core components, managing state, handling forms with react-hook-form, and connecting to a GraphQL server for data management. Additionally, you will explore advanced topics like platform-specific code, app security best practices, and the differences between development and production modes. Practical labs are included to reinforce the concepts, giving you hands-on experience with building and deploying React Native applications.

This course is ideal for JavaScript developers who are new to mobile app development or those looking to expand their skills to include cross-platform mobile app creation. If you have a background in web development with React, you will find this course particularly beneficial, as it builds on concepts you are already familiar with while introducing the mobile-specific aspects of React Native. Whether you're a solo developer, part of a development team, or looking to enhance your career prospects, this course provides the knowledge and skills needed to create robust, native mobile applications efficiently.

Course Benefits
  • Cross-Platform Development Skills: Learn to build mobile applications that work on both iOS and Android with a single codebase, enhancing your versatility as a developer.
  • JavaScript Expertise: Leverage your existing JavaScript knowledge to create native mobile apps without needing to learn new programming languages.
  • Hands-On Learning: Engage in practical labs that reinforce key concepts, allowing you to apply what you've learned immediately.
  • Industry-Relevant Knowledge: Gain insights into the tools and techniques used by leading companies like Facebook, Instagram, and Tesla, who rely on React Native for their mobile apps.
  • Advanced App Development Techniques: Learn how to manage state, handle forms, and connect your apps to data sources using GraphQL, preparing you for complex, real-world projects.
  • Platform-Specific Customization: Understand how to write platform-specific code and utilize native modules for enhanced app performance and user experience.
  • Security Best Practices: Equip yourself with knowledge of app security, including data storage best practices and secure communication techniques.
Course Outline
  1. Introduction to React Native
    1. What is React Native?
      1. Overview and history
      2. Benefits of using React Native
      3. Companies using React Native
  2. React Native Setup
    1. Setting up the development environment
    2. Introduction to React Native CLI and Expo
    3. Lab 1: Getting started with Expo
  3. Running React Native Apps
    1. Development Tools and Processes
      1. Configuring virtual devices (emulators)
      2. Lab 2: Using an emulator
  4. React Native Components and APIs
    1. Core Components
      1. React Native UI primitives
      2. Core Components (View, Text, Image, etc.)
      3. Lab 3: Setting up a server
      4. Lab 4: Connecting to the GraphQL Server
  5. Navigation and Routing
    1. Routing in React Native
      1. Introduction to Expo Router
      2. Creating pages and layouts
      3. Dynamic routes and URL parameters
      4. Lab 5: Creating a Route
      5. Lab 6: Changing Screens
  6. Styling and Layout
    1. Styling in React Native
      1. Introduction to Flexbox and layout
      2. Styling best practices
  7. Forms and Data Handling
    1. Forms in React Native
      1. Handling forms with react-hook-form
      2. Client-side validation
      3. Lab 7: Working with Forms
      4. Lab 8: Connecting the Add Coder form to the GraphQL server using mutations
  8. State Management and Security
    1. State Management
      1. Local vs. global state
      2. Using Context API, Redux, MobX
      3. Lab 9: State, Context, and Modals
    2. Working with Lists
      1. Lab 10: Using FlatList and Adding Styles
    3. App Security
      1. Best practices for data storage
      2. Security protocols and measures
  9. Platform-Specific Code and Guidelines
    1. Handling Platform-Specific Code
      1. Platform modules and extensions
      2. UX guidelines (Material Design and iOS Human Interface Guidelines)
  10. Deployment and Production
    1. Deploying React Native Apps
      1. Development mode vs. Production mode
      2. Using EAS Build for deployment
Class Materials

Each student will receive a comprehensive set of materials, including course notes and all the class examples.

Class Prerequisites

Experience in the following is required for this JavaScript class:

Students must have a solid understanding of JavaScript, as this language is fundamental to building mobile applications with React Native. Additionally, participants should have a computer with the capability to install software globally and access to the internet. This setup is crucial for completing the hands-on labs and exercises that are a key part of the course. Familiarity with using a terminal or command prompt for running commands and installing software is also essential.

Experience in the following would be useful for this JavaScript class:

Familiarity with React will isn't strictly required, but is recommended. Basic knowledge of HTML and CSS is beneficial for understanding component structures and styling within React Native. Previous experience in web development will help you grasp mobile-specific concepts more quickly. Additionally, some exposure to mobile development concepts, even at a high level, can provide a useful context for understanding how React Native integrates with different platforms like iOS and Android.

Live Private Class
  • Private Class for your Team
  • Live training
  • Online or On-location
  • Customizable
  • Expert Instructors
Request Proposal