React JS in Singapore

Learning Objectives
This module introduces the participants to components, the smallest building block of a React application. Participants will learn about the types of components and will also learn about JSX, a JavaScript derivative syntax used for defining layouts & elements.

Topics

• What are components?
• Types of Components
• JSX

Hands-on

• Create a class component that lets you type text in a <textarea> field while it displays word and character counts that update as you type
• Create a Card component that one often sees on social media platforms
• Write a component that acts as a list item in a UI that renders list of books

Learning Objectives
This module introduces the participants to the concept of state and its importance when building React applications. Participants will also learn about props which allow us to pass data to components.

Topics

• What is state?
• Stateful function components
• What are props?
• Type-checking with Prop Types

Hands-on

• Create a toggle button for a hypothetical space-craft’s guidance system panel
• Build a simple theme switcher using state in a function component using the Hooks API
• Work on a component called UserCard which has to accept data using props

Learning Objectives
This module introduces participants to the process of rendering lists of elements such as a list of users, messages or products in a React application. Participants will also learn about the importance of the ‘key’ attribute and the use of React fragments for rendering adjacent root level elements.

Topics

• Using the map() function
• The ‘key’ attribute
• Using fragments 

Hands-on

• Use the map function to render lists of components using an Array of movies and set all important ‘key’ prop
• Implement the Fragment operator in a React Component instead of an enclosing div element

Learning Objectives
This module brings the focus back on components as participants venture deep into the lifecycle of a class-based component. Participants will learn to implement side effects such as network requests to APIs, running timers and managing clean-ups and errors. Thereafter, participants will learn about the synthetic event system in React before learning about error boundaries.

Topics

• Lifecycle of a component
• Side-effects and lifecycle
• Managing clean-up
• Events
• Error Management

Hands-on

• Implement the componentDidMount lifecycle method to bring in data from a mock weather service
• Implement the componentDidUpdate lifecycle method to update the data
• componentWillUnmount lifecycle function to tear down the timer instance in an app
• Work with events to set state properties
• Implement an Error Boundary component to intercept errors in child components  

Learning Objectives
This module introduces the participants to form elements. Participants will learn to build controlled and uncontrolled form components including ways to efficiently handle events. After this, participants will build a currency converter application that works with an actual API, as a mini project.

Topics

• Controlled form components
• Uncontrolled form components
• Handling inputs efficiently
• Mini-Project: Building a currency converter app

Hands-on

• Turn an input element into a controlled component
• Implement refs to pull and set data to DOM elements when needed

Learning Objectives
This module introduces the participants to two techniques aimed at sharing and reusing code in a React application. Participants will learn and implement render props as well as build higher order components.

Topics

• Render props
• Higher order components

Learning Objectives
This module introduces the participants to portals in React as well as a look at how events bubble up in the case of portals.

Topics

• Introduction to Portals
• Event bubbling in Portals

Hands-on
Work with Portals to render a dialog box component in a DOM element other than the root div where the React app is mounted

Learning Objectives
This module introduces the participants to React’s data flow architecture using props and the Context API

Topics

• Unidirectional data flow
• Using props for sharing global data
• The Context API

Hands-on
Instantiate a context, and provider and consumer components to trickle data down to the component hierarchy

Learning Objectives
This module introduces the participants to the Hooks API, a remarkable feature that levels up function components in React to introduce opt-in features including the ability to write your own reusable features

Topics

• Understanding Hooks
• The useState() hook
• Side effects using the useEffect() hook
• The useContext() hook
• The useReducer() hook
• Writing your own hook

Hands-on

• Build a PowerTags component that can be used to dynamically add/remove tags or keywords
• Use the useEffect function to fetch data from a stock app
• Implement the useContext hook to consume data from a context provider
• Use the useReducer hook to offload state management and define actions and their resulting state changes
• Build a custom hook named ‘useGeoLocation’ which accesses the HTML5 GeoLocation API to continually fetch the latitude and longitude of the user’s location  

Learning objectives
This module introduces the participants to routing in a single page application. Thereafter, participants deep dive into React Router to introduce routing in React applications.

Topics

• Routing in a React app
• Routing with React Router
• Nested routes & parameters
• Protecting routes

Hands-on

• Integrate React router in a project that features multiple sections
• Incorporate nested routing on the /books route so that details of books
• Protect a route from unauthenticated access

Learning objectives
This module introduces the participants to code splitting in React applications and the use of the Suspense API for lazy loading components when they’re needed.

Topics

• Code splitting & Suspense
• Route based code splitting & lazy loading components

Hands-on

• Implement React.lazy and Suspense to load two components when needed
• Implement React.lazy and Suspense when working with React Router

Learning objectives
This module introduces the participants to isomorphic applications and server-side rendering React applications.

Topics

• Server-side rendering
• SSR with React - Setup & Server
• SSR with React - The Toolchain

Learning objectives
This module introduces the participants to Redux, a popular central state store for React applications. Participants will be led through a practical application that implements Redux and its features.

Topics

• State management & Redux 
• Setting up Redux 
  
• Actions & Reducers
  
• Using the connect() higher order function
• Using Redux hooks

Learning objectives
Using Jest with EnzymeThis module introduces the participants to testing. Participants will learn about the Jest testing framework and write unit and integration tests for React components and applications.

Topics

• Introduction to Testing
• Using Jest with test utils from React DOM
• Using Jest with the React Testing Library
• Using Jest with Enzyme