React Native Training Document
JS/React Training Training (7 - 8 Days)
Roadmap:
NOTE: 1 WD is 8 hours of work. In case of partial trainees, 1 WD is 2 physical days of work for
them.
SOPs, Accounts Setup etc 2 Days
Javascript + ES6 Tutorials (link) 1 Day
React Official Documentation (link)(Helping Link)(Helping Link) 2 Days
Mini Project (link) 1.5 Day
Eslint and Prettier (Including Implementation) (link) 0.5 Day
Redux (Including Implementation) (link)(Helping Link) 1 Day
React Router (Including Implementation) (link) 0.5 Day
Styles Component and SCSS(including Implementation) (Link) 1 Day
RestAPI, Fetch vs Axios (Including Implementation) (Link) 0.5 Day
JS and React Revision 1 Day
Day 1 - 2 (2 Full days total)
HR paperwork and orientation sessions, assets assignment, bank account, HRMS know-how
and most importantly, go through all company SOPs and training SOPs.
JavaScript (Basics):
Reference Book for Javascript: Eloquent Javascript
● Variables
● Data Types
● Conditional Statements
○ if else
○ switch
○ ternary
● Loops
○ while
○ for
○ for of
○ for in
● Comparison Operators
● Functions
● Functions with default parameters
● Callbacks
● Higher Order Functions
● Arrays
● Objects
● null vs undefined
● truthy / falsy concept
● Error Handling
JavaScript (Advance):
Reference video lectures for advanced concepts of javascript: Advance Concepts
● Hoisting in javascript
● Variable and Function Hoisting
● Scope Chain and Lexical Scoping
● IIFF
● “use strict” mode
● Closures in javascript
● Bind() method
● this keyword
● Iterators and Generators
● Classes, Objects, and Inheritance
● Callback Hell
● Promises
● Async / Await
● Event Loop
Arrays and Object Functions:
You might wonder why I need to cover all these functions separately but as you dive deeper in
MERN you see that most of the time you are working with these functions, a better
understanding of these helps you a lot in a longer run. So, you must clear concepts about these
higher order functions at this point.
Reference to learn and practice array functions: w3schools array functions. Practice all the
given functions:
● find()
● findIndex()
● indexOf()
● filter()
● includes()
● push()
● pop()
● map()
● reduce()
● slice()
● splice()
● shift()
● unshift()
● valueOf()
● forEach()
● some()
● Object.keys()
● Object.values()
● Object.entries()
ES6 / ES7 and latest versions:
ECMAScript is nothing but a collection of some new features added to JavaScript that obviously
are designed to make our life easier. Have a look at the following points and see how it solves
the problem in a friendly way.
● Object destructuring
● Object literal
● Spread operator
● Rest operator
● Arrow Functions
● Nullish coalescing operator
● Optional chaining operator
● var vs let vs const
● Trailing commas
React Native Training
React Native Training (7 - 9 Days)
Day-1
Section 1: Introduction to React Native
● Overview of React Native and its advantages over traditional native app
development.
● Setting up the development environment.
● Creating a new React Native project.
Helpful links:
● React Native Official Documentation
● React Native Getting Started Guide
Section 2: React Native Basics
● Understanding the basic structure of a React Native app.
● Exploring the core components provided by React Native.
● Styling components using inline styles and stylesheets.
Helpful links:
● React Native Component APIs
● React Native Styling Guide
Day-2
Section 3: React Navigation
● Navigating between screens in a React Native app.
● Implementing stack navigation, tab navigation, and drawer navigation.
● Passing parameters between screens.
Helpful links:
● React Navigation Documentation
● React Navigation Tutorial
Section 4: Handling User Input
● Capturing user input using text inputs and forms.
● Validating user input.
● Implementing buttons and touch events.
Helpful links:
● React Native Text Input Documentation
● React Native Button Documentation
Day-3
Section 5: Working with APIs and Network Requests
● Making HTTP requests to remote APIs.
● Handling API responses and errors.
● Using third-party libraries for network requests.
Helpful links:
● React Native Networking Guide
● Axios: Promise based HTTP client
Section 6: State Management with Redux
● Understanding the principles of Redux for state management.
● Setting up Redux in a React Native app.
● Creating actions, reducers, and the Redux store.
Helpful links:
● Redux Official Documentation
● React Redux Documentation
Section 7: Async Actions with Redux Thunk
● Handling asynchronous actions in Redux using Redux Thunk middleware.
● Dispatching async actions and handling side effects.
● Managing loading and error states.
Helpful links:
● Redux Thunk Documentation
● Async Actions with Redux Thunk Tutorial
Day-4
Section 8: React Native UI Components and Styling
● Exploring popular UI component libraries for React Native.
● Creating custom reusable UI components.
● Advanced styling techniques using Flexbox and CSS-in-JS.
Helpful links:
● React Native Elements: Cross-Platform UI Toolkit
● React Native Styling Techniques
Section 9: Forms and Form Validation
● Building forms in React Native.
● Implementing form validation and error handling.
● Using form libraries for enhanced functionality.
Helpful links:
● Formik: Form Library for React
● React Hook Form: Performant React Forms
Section 10: Handling Images and Media
● Displaying images and videos in a React Native app.
● Uploading and processing images.
● Working with device cameras and photo libraries.
Helpful links:
● React Native Image Component Documentation
● React Native Camera
Day-5, 6
Section 11: Device Features and Permissions
● Accessing device features such as geolocation, contacts, and sensors.
● Requesting and handling device permissions.
● Working with device notifications.
Helpful links:
● React Native Geolocation
● React Native Permissions
Day-7
Section 12: Localization and Internationalization
● Implementing localization and internationalization in a React Native app.
● Supporting multiple languages and locales.
● Formatting dates, numbers, and currencies.
Helpful links:
● React Native Internationalization (i18n)
● React Native i18n-js
Section 13: Debugging and Error Handling
● Debugging React Native apps using tools like React Native Debugger.
● Handling errors and exceptions in React Native.
● Logging and troubleshooting techniques.
Helpful links:
● React Native Debugger
● Debugging React Native Apps
Section 14: Performance Optimization
● Identifying and optimizing performance bottlenecks in React Native apps.
● Using tools like React Native Performance Analyzer.
● Optimizing rendering, network requests, and memory usage.
Helpful links:
● React Native Performance Tips
● React Native Performance Analyzer
Day-8
Section 15: Testing React Native Apps
● Overview of testing methodologies for React Native apps.
● Writing unit tests and integration tests using Jest.
● Implementing UI testing with Detox.
Helpful links:
● Jest: JavaScript Testing Framework
● React Native Testing Library
Day-9
Section 16: Deployment and App Store Submission
● Preparing a React Native app for production deployment.
● Generating
■ APK file for Android
● Submit APK file on Firebase App Distribution
Helpful links:
● React Native App Deployment Guide
● App Store Connect: App Submission
Day-10
Section 18: Next Steps and Advanced Topics - BONUS
● Exploring advanced topics in React Native.
● Diving deeper into custom animations, gesture handling, and advanced state
management.
● Resources for further learning and staying up-to-date with React Native.
Helpful links:
● React Native Animation
● React Native Gesture Handler
● Native modules into
● Android Native Modules
● iOS Native Modules
● Native Modules NPM Package Setup
Test Project (8 Days):
Project Requirements
(Before starting this, you need to fill the evaluation request form to have your React Native
theory evaluated. Do not start working on the application until the Theory evaluation is clear)
