NTUC LearningHub

Upon completing this course, participants will be able to:

  • Understand the fundamentals of React and its concepts, including creating and nesting functional components, adding markup and styles, displaying data, rendering conditions and lists, responding to events, and sharing data between components.
  • Use React Hooks to handle rendering and managing state, create and manage forms, and interact with backend servers through APIs, including asynchronous data fetching and performing CRUD operations.
  • Manage routing with React Router and pass information through routes.
  • Implement React Context as an alternative to passing down props, including using themes and managing global state with context.
  • Use Redux and integrate it into a React App to manage global state.
  • Test React applications using necessary tools for unit testing and writing unit tests with React Testing Library.
  • Understand TypeScript and implement React components using TypeScript, including using interfaces and decorators, and implementing types in components, hooks, and API consumption.

 

Pre-requisites

 

  • Basic knowledge of HTML, CSS, and JavaScript, and familiarity with modern web development concepts is recommended.
  • Hardware & Software
    • This course will be conducted as a Virtual Live Class (VLC) via Zoom platform.
    • Participants must own a Zoom account and have a laptop or a desktop with “Zoom Client for Meetings” installed. Download from zoom.us/download.
System Requirement
Must-have:
Please ensure that your computer or laptop meets the following requirements.

  • Operating system: Windows 10 or MacOS (64 bit or above)
  • Processor/CPU: 1.8 GHz, 2-core Intel Core i3 or higher
  • Minimum 20 GB hard disk space
  • Minimum 8 GB RAM
  • Webcam (camera must be turned on for the duration of the class)
  • Microphone
  • Internet Connection: Wired or Wireless broadband
  • Latest version of Zoom software to be installed on computer or laptop prior to the class.

Good-to-have:

  • Wired internet connection
    Wired internet will provide you with stable and reliable connection.
  • Dual monitors
    Using a dual monitor setup will undoubtedly improve your training experience, enabling you to simultaneously participate in hands-on exercises and maintain engagement with your instructor.

Not recommended:
Using tablets are not recommended due to their smaller screen size, which could cause eye strain and discomfort over the course of the program's duration.

 

Course Outline

 

Lesson 1: Introduction to ReactJS

  • Introduction to JavaScript ES6
  • Introduction and Installation of React JS using JSX
  • How to create and nest functional components
  • How to add markup and styles
  • How to display data
  • How to render conditions and lists
  • How to respond to events and update the screen
  • How to share data between components

 

Lesson 2: Get Started with React Hooks

  • Motivation for using React Hooks
  • Overview of various Hooks
  • Using the State Hook in creating a Form
  • Using the Reducer Hook in creating a Form
  • State Hook vs Reducer Hook
  • Using Effect Hook

 

Lesson 3: Interacting with backend server through API

  • Access, create, and delete remote server data using Axios
  • Asynchronous data fetching with React hooks and promises
  • Get the data from API to populate Components
  • Perform create and update data with a Form
  • Perform delete data from a list

Lesson 4: Manage routing with React Router

  • Introducing React Router
  • Managing the routes in an App
  • Passing down information through the route

 

Lesson 5: Implementing React Context

  • Introducing React Context
  • Implementing Themes
  • Use context for global state

 

Lesson 6: Redux Overview

  • Introduction to Store
  • Provider Component
  • Actions
  • Reducers
  • Dispatchers
  • Selector
  • Use redux for global state

 

Lesson 7: Testing React Applications

  • What are the necessary Tools required for Unit Testing?
  • React Unit Testing overview
  • Introduction to JEST
  • Write unit tests with React Testing Library

 

Lesson 8: React with Typescript

  • Why use Typescript?
  • Type safety, inference and Intellisense
  • Interfaces
  • Decorators
  • Implement Types in React Component
  • Implement Types in React hooks and API consumption

 

Certificate Obtained and Conferred by

 

  • Certificate of Achievement from NTUC LearningHub will be issued to participants who have met at least 75% attendance and passed the prescribed assessment(s).
  • Upon meeting at least 75% attendance and passing the assessment(s), Statement of Attainment (SOAs) will be issued by SkillsFuture Singapore (SSG) to certify that the participant has achieved the following Competency Standard(s):
    • Applications Development (ICT-DIT-3002-1.2)
Categories
More Information
  • NTUC LearningHub
  • No comments yet.
  • Add a review
    error: Content is protected !!