Introduction

Note for the readers

As the whole Claroline interface is built on top of React and Redux, we assume you know their basic concepts and code syntax.

If you don’t, you should read their documentation first :

• The Quick start of the React documentation.
• The Introduction of the Redux documentation.

To a lesser extent, some knowledge about :

• ES6 syntax
• immutability
• functional programming
• webpack
• lodash library
• reselect library

will help to understand the current document.

Webpack

All the JavaScript needed by the application is compiled and distributed by webpack. To ease the development process, we use the webpack-dev-server in order to serve the files. This requires to run the dev server in command line :

1
npm run webpack:dev

Directory structure

JavaScript applications for plugins are stored in MY_PLUGIN/Resources/modules.

Import

Webpack defines some aliases for imports in order to simplify the path to the JS source files

Alias for the Claroline Connect distribution plugins

Plugins declared by Claroline Connect in the src directory.

Original path

1
/src/main/app/Resources/modules/page/components/full.jsx

Alias

1
#/main/app/page/components/full

Usage

1
import {PageFull} from '#/main/app/page/components/full'

Alias for external plugins

Plugins declared by distribution packages located in the vendor directory.

Original path

1
/vendor/vendor-name/package-name/plugin/MY_PLUGIN/Resources/modules/tools/my-tool/index.js

Alias

1
~/vendor-name/package-name/MY_PLUGIN/tools/my-tool

Usage

1
import {PageFull} from '#/main/app/page/components/full'