How I Integrated Microsoft Immersive Reader in a ReactJS Website

How I Integrated Microsoft Immersive Reader in a ReactJS Website

Immersive Reader is an Azure Cognitive Service for developers who want to embed inclusive capabilities into their apps for enhancing text reading and comprehension for users regardless of age or ability.  Students can color code and label words to indicate their part of speech, user read the text aloud feature, translate words and more. In this tutorial, you'll see How I Integrated Microsoft Immersive Reader in a ReactJS Website

Immersive Reader is an Azure Cognitive Service for developers who want to embed inclusive capabilities into their apps for enhancing text reading and comprehension for users regardless of age or ability. Students can color code and label words to indicate their part of speech, user read the text aloud feature, translate words and more.

The technology was proven to improve learning of ESL students. According to Microsoft:

“The analysis indicated that the students who used Learning Tools (Immersive Reader) had significantly more growth in reading comprehension compared to the historical cohort, after controlling for variables known to be related to reading comprehension”.

Through proprietary artificial intelligence software,  JAAS Foundation created an online portal that delivers a variety of educational games, learning videos and reading materials to underprivileged students primarily directed at teaching English. Schools and teachers can tailor the portal to meet the unique needs of their students or even create their own games.

Integrating Immercieve Reading capabilities into DTML.org seemed like a natural fit. DTML.org is ReactJS website which is connected to MVC.NET APIs hosted on Azure with Azure SQL backend. While immersive Reader has comprehensive documentation, the tutorials on Microsoft site does not cover using Immersive reader in ReactJS websites.

javascript react reactjs microsoft-immersive-reader

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Routing in React without React-Router

I have been using React JS in my projects for quite some time now and am used to managing routing in my app using the react-router package. I have always been keen on having as little dependencies in my apps as possible, so, I always felt perturbed by the use of this particular package in simpler apps which did not have complex routes.

The Ugly Side of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.

Forms of Composition in JavaScript and React

One of the core ideas in functional programming is composition: building larger things from smaller things. The canonical example of this idea should be familiar with legos.