Become A Certified
ReactJS Developer Today!
 
Progress or kickstart your career path
in web application development
funding-schemes-sbl-khas-white-centered
5 Days / 40 Hours / 21 Modules
+ 3 month coaching + 1 year eLearning access
Get in Touch With Us
Start Developing
Web Applications
With ReactJS
Pave your path in
web applicationt
development
5 Days / 40 Hours / 21 Modules
+ 3 month coaching + 1 year eLearning access
Get in Touch With Us
funding-schemes-sbl-khas-white-centered
Master the fundamentals of web application development and deep dive into the elements of ReactJS
In this course, we focus on the field of web application development and describe the processes, algorithms, and tools for one to be a successful practitioner of Node and Express JS. Students will be exposed to development techniques used in the mentioned tools.

Duration

5 days / 40 hours

Level

Intermediate to Advanced

Delivery

100% Online - Instructor Led
  • Course Code

    RJS101
  • Audience

    Experienced or entry-level software developers who want to learn how to leverage this powerful and modern web stack.
  • Language

    English
  • Certification

    Awarded by ICTC
 
Key Learning Outcomes
This course will also give students a chance to understand the fundamental issues and challenges of machine learning which include data, model selection, and model complexity. This course will equip you with the necessary skills needed to excel in this field. By the end of the training program, you will be able to:
  • Learn Modern JavaScript
  • Gain understanding of React JS
  • Develop dynamic User Interfaces using ReactJS
  • Gain knowledge of implementing React Hooks
  • Read and write from the file system

 
 
Key Learning Outcomes
This course will also give students a chance to understand the fundamental issues and challenges of machine learning which include data, model selection, and model complexity. This course will equip you with the necessary skills needed to excel in this field. By the end of the training program, you will be able to:
  • Learn Modern JavaScript
  • Gain understanding of React JS
  • Develop dynamic User Interfaces using ReactJS
  • Gain knowledge of implementing React Hooks
  • Read and write from the file system

 
Course modules covered in the ReactJS program
Day 1 - Introduction to "Modern (ES5)" JavaScript, Introduction to REACT, Introduction to JSX

Introduction to "Modern (ES5)" JavaScript

  1. JavaScript Refresher
  2. Introduction to ES2015 (ES6)
  3. Basic language features
  4. Creating variables
  5. Primitives and wrapper objects in JavaScript
  6. JavaScript types: Number, String, Boolean, Date
  7. JavaScript == and false conditions and Triple Equals ===
  8. Functions, functional programming and nesting functions
  9. Arrays – Ordered sequence of items
  10. Indexed property access
  11. Scope and Context
  12. JavaScript visibility rules
  13. Global variables
  14. Object functions and execution
  15. Creating Objects with JavaScript literal syntax and constructor functions
  16. The "this" keyword in JavaScript
  17. Call, Bind and Apply methods
  18. Typeof and objects
  19. Special comparisons for objects
  20. Key JavaScript built-in objects

Introduction to REACT

  1. What react is and what it is not
  2. React concepts
  3. Component composition
  4. How react works
  5. How Virtual DOM works
  6. How react handles data binding
  7. Advantages & Limitations of REACT
  8. Setting up ReactJS Development Environment
  9. Using Webpack / Babel
  • Using npm & package.json file
  • Look at an ReactJS application
  • Organizing source code
  • React browser plugin

    • Introduction to JSX

    1. What is JSX
    2. JSX Elements and their surroundings
    3. Attributes in JSX
    4. Nested JSX
    5. JSX Outer Elements
    6. Rendering JSX
    7. HTML attributes in JSX - Class and Id etc
    8. ReactDOM.render()
    9. Passing variables to ReactDOM.render()
    10. The Virtual DOM
    11. If-else in JSX
    12. IIFE in JSX for complex logic
    13. JavaScript expressions
    14. JSX like attribute, boolean or child expression
    15. Lab: HelloWorld Application
    Day 2 - Creating a simple React Application, Component Life Cycle, Composing Components, Forms, Event handling, Styling React Components & Elements

    Creating a simple React Application

    1. A simple react component with JSX template
    2. Component structure
    3. React render
    4. Pure components
    5. Functional components
    6. Class based components
    7. Why use one or the other
    8. Component props and property passing
    9. Props validation with data types
    10. Limitations of props
    11. Using state
    12. When to use state, when to use props
    13. Global variables
    14. Testing components
    15. Lab: HeaderComponent, FooterComponent and ProductListComponent

    Component Life Cycle

    1. Start-up and Mounting Components
    2. Updating Components
    3. Unmounting Components
    4. Calling / Implementing life cycle methods
    5. Setting Properties

    Composing Components

    1. Components within Components
    2. Known children and unknown children
    3. Sibling Components and Key
    4. Parent and Child Components
    5. Communication from parent to child
    6. Communication from child to parent
    7. Lab: Communication between ProductComponent and ProductListComponent

    Forms

    1. Form components example textbox, textarea, checkbox, radiobutton, select
    2. Controlled form components
    3. Uncontrolled form components
    4. Checkboxes and Radios
    5. Select box with default selected values
    6. Form validation
    7. Lab: ListComponent, AddProductComponent, ModifyProductComponent

    Event handling

    1. React.js Event Handlers
    2. Synthetic Events
    3. Form
    4. Composition
    5. Focus
    6. Keyboard
    7. Mouse
    8. Clipboard
    9. Selection
    10. Touch
    11. Event Pooling
    12. Other useful events in React
    13. Sharing events across the components
    14. Lab: SeachProductComponent and SortProductComponent
    15. Lab: ShoppingCartComponent – Add products into shopping cart

    Styling React Components & Elements

    1. CSS and inline styles
    2. Setting up the react for React bootstrap
    3. Implementing the react bootstrap components
    4. Setting Styles Dynamically
    5. Setting Class Names Dynamically
    6. Enabling & Using CSS Modules
    7. Working with Media Queries
    Day 3 - Securing React Applications , React Router & Navigation, Introduction to FLUX, Modelling Application State, Actions

    Securing React Applications

    1. JSON Web Tokens (JWT)
    2. Session State
    3. Storing the state on the client
    4. Authentication & Authorization

    React Router & Navigation

    1. Loading the router library
    2. Router configuration
    3. Passing and receiving parameters
    4. React-cookie integration
    5. Protecting routes on the client
    6. Lab: Participants Registration
    7. Lab: Login, Authentication and Authorization
    8. Lab: Dashboard
    9. Lab: User Profile, My Products

    Introduction to FLUX

    1. Flux pattern
    2. Flux Application Architecture
    3. Rational and MVC comparison
    4. Data Flow – Action, Dispatcher, Store & View
    5. Reducer / Action / Store
    6. Lab: Storing JWT in web store
    7. Lab: Storing User Profile, My Products in web store

    Modelling Application State

    1. Foreword on Redux - What is Redux?
    2. Managing App State with Redux
    3. Reducers
    4. Containers - Connecting Redux to React
    5. Implementation of a Container Class
    6. Containers and Reducers Review

    Actions

    1. Actions and Action Creators
    2. Binding Action Creators
    3. Creating an Action
    4. Consuming Actions in Reducers
    5. Consuming Actions in Reducers Continued
    6. Conditional Rendering
    7. Reducers and Actions Review
    Day 4 - Catching Data, Creating a dynamic UI in React, Advanced ReactJS Concepts

    Catching Data

    1. Introduction
    2. Catching Data with Posts Reducer
    3. Catching Data with Posts Reducer Continued
    4. Fetching Data with Lifecycle Methods
    5. Fetching Data with Lifecycle Methods Continued

    Creating a dynamic UI in React

    1. React Stateful Components
    2. Keeping components stateless
    3. Auto binding
    4. Event Delegation
    5. React.js Error Handling

    Advanced ReactJS Concepts

    1. Function component
    2. Destructuring props
    3. JSX spread attributes
    4. Merge destructured props with other values
    5. Conditional rendering
    6. Children types
    7. Array as children
    8. Function as children
    9. Render prop
    10. Children pass-through
    11. Proxy component
    12. Style component
    13. Event switch
    14. Layout component
    15. Container component
    16. Higher-order component
    17. State hoisting
    18. Controlled input
    Day 5 - React Hooks, Introduction to TypeScript, React with TypeScript, Unit Testing

    React Hooks

    1. What are React Hooks
    2. Introducing the useState Hook
    3. Introducing the useEffect Hook
    4. Function components vs Class components
    5. Fetching Data with useEffect
    6. Using the useRef Hook
    7. CRUD app with React Hooks
    8. Connecting to an API using React Hooks

    Introduction to TypeScript

    1. Environment Setup
    2. Basic Syntax
    3. Number, Strings, Arrays, Tuples, Union and Enumerators
    4. Types, Variables and Operators
    5. Decision Making and Loops
    6. Functions and Lambda Expressions
    7. Generics
    8. Interface, Classes, Objects and Namespaces
    9. Modules
    10. Decorators
    11. Ambient and Mixins

    React with TypeScript

    1. Introduction
    2. Functional Components
    3. Class Components
    4. Higher Order Components
    5. Render Props
    6. Lab: Convert the e-Commerce Solution using TypeScript

    Unit Testing

    1. Tools for Unit Testing
    2. Jest & Jasmine
    3. Enzyme
    4. React Unit Testing
    5. Testing DOM manipulations
    6. Testing properties and state
    7. Simulating Events
    8. Shallow Rendering
    node-min
    express-min
    mongo-min
    Our Training Methodology

    Practical Assignments

    We provide hands-on assignments that requires practical implementation.

    Virtual Coaching Sessions

    Online coaching sessions that happen over the phone, via video, or on a web platform.

    1 Year Access to LMS

    Get access to learning resources upto 1 year of class completion.

    Live Project Experience

    Hands-on learning and training gives participants the opportunity to experience real world situations.

    Online Assessments

    Participants can assess reflect on their own learning and their level/skills.

    Free Industry Webinars

    Stay current on market research trends, learn best practices through our webinar sessions.

    Key Features

    • 40 hours of instructor led training
    • Fully Online
    • Class recording available
    • Interactive Learning
    • 8 hour Coaching Session
    • 100% HRDF SBL-KHAS Claimable!

    Pre-Requisites

    • General programming experience and knowledge of HTML, CSS and JavaScript.
    • Analytical Mindset
    • Willingness to self learn online
    • We will start from the very basics
    • Committed to complete all tasks

    Who Should Join

    • Professional switching careers
    • Web Developers
    • IT Engineers
    • Students
    • New Programmers
    Program Key Highlights
    online-learning-2
    40 hours of Remote Online Learning
    learning-hours
    80 Additional Self Learning Hours
    hands-on
    12 Live Hands-on Projects
    certification
    Certified by International Body
    mentor
    Mentorship with Industry Experts
    industry
    Designed for Beginners & Professionals
    Request for more Information

      Your Instructor
       
      jegan-pic
       
      Thayanithy Jegan
      CTO & Co-Founder of Thulija Technologies,
      Certified Trainer and Consultant

      A seasoned technology professional with over 17 years of industry experience as a software developer, solutions architect and technology consultant for major organizations.
      Thayanithy Jegan has trained executives and developers in companies such as Maxis, IFCA, SWIFT, PSDC, DHL, Standard Chartered, Infineon Technologies, Siemens and Bank Negara to name a few to break into various technology stacks and as well as data science, big data, and artificial intelligence.
      He has led major projects with clients such as Suruhanjaya Syarikat Malaysia (SSM), MYCOID, Kementerian Kerja Raya, Ministry of Education (MOE), Universiti Malaya, Perfisio Solutions, Kementerian Perdagangan Antarabangsa dan Industri, amongst others. He has also served as a Consultant for MIMOS Berhad, a Research and Development organisation that functions as an advisor to the Malaysian Government on technologies, policies and strategies relating to IT.
      python-cert
      Get Professionally Certified
      Upon successfully completing this program, participants will be awarded the Professional Certification in Python Data Science by International Council for Technology Certifications (ICTC).
      This award is a validation to the efforts taken to master the domain expertise that will set you apart from your competition.
      Be a part of the global network of data science professionals and join the community across sectors.
      ReactJS Training FAQs
      1Do I Get A Certificate At The End Of The Course?

      Yes.You will get a certificate at the end of the course from Thulija Academy.

      2How Will The Labs Be Conducted?

      Labs will be conducted through online means. Recorded playbacks are provided to participants after the sessions are over.

      Get in Touch With Us Today!

      This training program is suitable for anyone who intends to enter into the field of Software Development. This program is being conducted in Malaysia and can be joined by anyone, anywhere in the world remotely.
      Program Fee


      RM 3,700.00

      One-time fee. One year access to course materials.
       
       



      READY TO KICKSTART YOUR CAREER?
      Please fill in the form and a Program Advisor will reach out to you. You can also reach out to us at info@thulija.com or +60123661502
      Contact us on Whatsapp for more enquiries