AEM – ReactJS Integration thru Maven

ReactJS is supported by CommonJS module systems like browserify or webpack. However, AEM structure encourages a different approach. Instead of using npm to import React packages, we will be using the clientlib feature to handle the prebuilt copies of React and React DOM and Maven in compiling our JSX source code.

1. Download the ReactJS Starter Kit
2. Extract the contents. Normally, in the development environment, one would only need the react-dom.js and react.js.
3. Copy these files into the proper clientlib directory inside the project. Don’t forget to include these scripts into the js.txt file. Also, add your source js but be sure to point to the compiled code in the ‘build’ directory.
4. Add the React JSX Transformer Plugin into the pom.xml:

   <plugin>
       <groupId>uk.co.codezen</groupId>
       <artifactId>react-jsxtransformer-maven-plugin</artifactId>
       <version>1.0</version>
   
       <executions>
           <execution>
               <goals>
                   <goal>compile</goal>
               </goals>
           </execution>
       </executions>
       <configuration>
           </sourcePath></sourcePath>
           </targetPath></targetPath>
       </configuration>
   </plugin>

5. Fill in the sourcePath attribute with the path of the directory where your source code is. In the targetPath attribute, copy the sourcePath and append “/build”
6. Build the project.

TO-DO:

• Extend the mojo from the plugin to do either of the following:
  • accept an array of source path, compile the javascript files in those paths, and automatically create a build subdirectory in each path where the compiled javascript will be saved; or
  • automatically search for javascript files within the scope of the pom, compile the javascript files in those paths, and automatically create a build subdirectory in each path where the compiled javascript will be saved.