React Logo

React is a JavaScript library for building User Interfaces. React uses a virtual DOM diff implementation for ultra-high performance.
Example of a TODO app

This module is for developers, it doesn't do anything out-of-the-box. It just provides the react.js library via the Libraries API module.

Dependencies (D10)

What branch to use (D7)

  • React 7.x-1.x if you are using React 0.13 or lower
  • React 7.x-2.x if you are using React 0.14 or later

Dependencies (D7)

What branch to use ?

  • React 7.x-1.x if you are using React 0.13 or lower
  • React 7.x-2.x if you are using React 0.14 or later

Installation (D10)

Install the module as normal.
Adapt your bundler to mark React and React-Dom as external. See webpack or Vite instructions on how to do this.
Register your bundled code in a libraries.yml and the importmaps module and the browser will make sure that import React from 'react' resolves properly.

Installation (D7)

  1. Unzip the Starter Kit content in sites/all/libraries/react/. (and remove version from directory name)
  2. Verify that library is in this path sites/all/libraries/react/build/react.js.

Usage. 2 variants (D7)

 // It will load the minified variant. "Performant by default"
libraries_load('react');

Or:

// un-minified, for developing purposes 
libraries_load('react', 'source');  

* There is an admin setting to use react-with-addons.js, instead of plain react.js

Examples

This Drupal custom module React blocks [github] renders a "Recent Comments" block using React module as a dependency.

(Submit more examples, I will add them here)

Other React modules

I haven't tried, or tested these, use at your own risk

Future

I don't have plans to bloat this module, the goal is to keep it simple, just as a Libraries API wrapper to add easily React to your Drupal site.

I encourage you to use this module as a dependency for your contrib/custom React modules

--
By David Corbacho

Supporting organizations: 
Pitchburgh grant

Project information

Releases