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.
Good-to-have:
Not recommended: |
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
Add a review