I. Giới thiệu khóa học:

React Native là một framework mã nguồn mở để xây dựng các ứng dụng đa nền tảng bằng cách sử dụng React và các khả năng gốc của nền tảng. Trong khóa học này, bạn sẽ chuyển từ kiến thức cơ bản về React sang cách triển khai nâng cao hơn bằng React Native. Bạn sẽ xem xét một loạt các thành phần React khác nhau và cách tạo kiểu cho chúng. Và bạn sẽ được thực hành sử dụng các phương pháp tương tác di động khác nhau với React Native.

II. Thời lượng: 40 giờ (5 ngày)

III. Hình thức đào tạo:

Đào tạo trực tiếp tại lớp học, đào tạo online tương tác với giảng viên, đào tạo kết hợp online và trực tiếp tại lớp học, đào tạo tại văn phòng khách hàng theo yêu cầu

IV. Mục tiêu khóa học:

• Tìm hiểu cách sử dụng React Native để xây dựng các ứng dụng di động gốc thực sự cho iOS và Android
• Phát triển ứng dụng di động đa nền tảng (iOS và Android) mà không cần biết Swift, Objective-C hoặc Java/ Android
• Khám phá các tính năng cơ bản và nâng cao của React Native.

V. Đối tượng tham gia:

• Bất kỳ ai muốn sử dụng React để xây dựng ứng dụng di động gốc
• Mọi nhà phát triển di động chỉ muốn học một ngôn ngữ để viết ứng dụng di động đa nền tảng.

VI. Điều kiện tiên quyết:

• Kiến thức cơ bản về JavaScript và React.
• KHÔNG yêu cầu kinh nghiệm phát triển Android/ Java hoặc iOS (Swift, Objective-C).

VII. Nội dung khóa học:

1. Module 1: JavaScript Fundamentals:

• Introduction to JavaScript and its role in web development
• Variables, data types, and operators in JavaScript
• Control flow statements (if-else, loops)
• Functions and scope
• Arrays and objects
• DOM manipulation using JavaScript
• Lab 1: Variable Manipulation
  • Create variables of different data types and perform operations on them.
  • Practice variable scoping and explore the differences between var, let, and const.
• Lab 2: Control Flow
  • Write JavaScript functions that use control flow statements (if-else, loops) to solve specific problems.
  • Implement conditional logic based on user input or data manipulation.
• Lab 3: DOM Manipulation
  • Use JavaScript to interact with the Document Object Model (DOM).
  • Create dynamic web pages by manipulating HTML elements, adding event listeners, and responding to user actions.

2. Module 2: ES6 Fundamentals:

• Introduction to ES6 and its features
• Let, const, and block scoping
• Arrow functions and function enhancements
• Template literals and string interpolation
• OOP es6
• Destructuring assignments
• Modules and imports/exports
• Promises and asynchronous programming
• Lab 1: Arrow Functions and Template Literals
  • Rewrite existing functions using arrow function syntax.
  • Utilize template literals for string interpolation and formatting.
• Lab 2: Modules and Imports/Exports
  • Create multiple JavaScript files with exported functions or variables.
  • Import and use those modules in another file.
• Lab 3: Promises and Asynchronous Programming
  • Write functions that return promises.
  • Use async/await and Promise.all to handle asynchronous operations.

3. Module 3: ReactJS Basics:

• Introduction to ReactJS and its core concepts
• Setting up a React development environment
• React Router
• Webpack
• Creating functional and class components
• JSX syntax and expressions
• Props and state in React
• Handling events in React
• Conditional rendering and lists
• Lab 1: Creating Components
  • Create functional and class components.
  • Compose components to create a simple UI.
• Lab 2: Props and State
  • Pass data between parent and child components using props.
  • Implement state management within a component.
• Lab 3: Event Handling and Conditional Rendering
  • Add event handlers to components and update state accordingly.
  • Conditionally render components based on certain conditions.

4. Module 4: ReactJS Intermediate:

• Component lifecycle methods
• Forms and form handling in React
• Styling React components
• React Router for handling routing in React applications
• Managing state with hooks (useState, useEffect)
• Context API for global state management
• Lab 1: Component Lifecycle Methods
  • Utilize lifecycle methods such as component Did Mount and component Will Unmount to perform specific actions.
  • Understand how to handle side effects in React components.
• Lab 2: Forms and Form Handling
  • Create a form component that handles user input and updates the state accordingly.
  • Implement form validation and display error messages.
• Lab 3: React Router
  • Set up different routes using React Router.
  • Create navigation links and switch between different components based on the route

5. Module 5: ReactJS Advanced:

• Redux
• Working with APIs and asynchronous data fetching
• Error handling and data validation in React
• React hooks for forms and form validation
• Testing React components
• React DevTools for debugging and performance optimization
• Deploying React applications
• Lab 1: API Integration
  • Fetch data from an API and display it in a React component.
  • Handle loading states and error handling for API calls.
• Lab 2: Testing React Components
  • Write unit tests for React components using testing libraries such as Jest or React Testing Library.
  • Test component behavior, state changes, and event handling.
• Lab 3: Performance Optimization
  • Identify performance bottlenecks in a React application using React DevTools or browser profiling tools.
  • Optimize components using techniques like memoization and should Component Update.