Using a Headless Moodle with React

The eLearning platforms that we built from scratch required a mobile methodology that would improve the depiction of the site. With the help of the plugin for depiction, we have enhanced the display of Moodle and speeded up the whole process. 

Moodle ReactJS gives you ability to use ReactJS inside any Moodle page.

How to compile multiple modules for different pages

Current webpack.config.js isn’t able to split code into modules. To implement this feature you have to add different entry points to your config file.

How to include moodle JS libraries to your React App

webpack.config.js connects moodle JS libraries, so you can use them in your code following this example:

import React, { useState } from 'react';
import * as Str from 'core/str';

function App() {
    const [title, setTitle] = useState('');

    const getTitle = async (key: string) => setTitle(await Str.get_string(key));
    getTitle('courses');
    
    return (
        <div className="App">
            {title}
        </div>
    );
}

export default App;

Also, you need to add required libraries to the index.d.ts file so TypeScript won’t give you any errors during build process:

declare module 'core/str' {
    const call: any;
    export default call;
}

How to connect your React App to Moodle page

This can be done via basic moodle js file connection. E.g:

require_once(__DIR__ . '/../../config.phр');
require_once('lib.php');

global $CFG, $DB;

echo $OUTPUT->header();

$PAGE->requires->js_call_amd('local_reactjs/app-lazy', 'init');

echo '<div id="your-app-render-id"></div>';

echo $OUTPUT->footer();

The clear advantages of React Headless Moodle:

• Due to the convenience of usage, we managed to change the depiction of the site in the shortest time period. 
• The speed of implementation saves time and expenses.
• It provides smooth learning experience as eLearning content can be simply transferred to new interfaces.
• Editing, updating and managing content is easy and convenient.
• The popularity of React is definitely on the rise. A lot of developers are already familiar with it and use it. There will be some new features in the near future which will expand the customization possibilities in Moodle.

Here you can read more on that:

Github – SmartAppTechnology / moodle-local_reactjs

Moodle ReactJS – gives you ability to use ReactJS inside any moodle page. You’ll need to set up npm dependencies directly at the react directory.

https://github.com/SmartAppTechnology/moodle-local_reactjs

eLearning Software Development | SmartApp

We build Learning Management Systems (LMS) that help increase productivity and expand the reach of education. Contact us for your eLearning solution.

https://smartapp.technology/industries/lms/