KemaneWright's sandbox: React/Redux Boilerplate

This is a scaffolding project with a bare bones React/Redux boilerplate intended to be downloaded, modified, and added to your modules/custom folder

Important Prerequisites:

If you're not familiar with progressive decoupling and how to expose endpoints in your Drupal site check the external documentation in the sidebar

Already familiar with Views and RESTful Web Services?

Feel free to just install the module and start hacking away
Navigate to the Modules > Custom folder in your terminal and run the following:

git clone --branch '@branch' git@git.drupal.org:sandbox/KemaneWright-3096257.git react_redux_boilerplate
cd react_redux_boilerplate

Your folder structure should now look something like this

Next you’ll need to install the React dependencies

cd app
npm install

While developing

npm run watch

Pushing to production

npm run build

Enable the module under Manage > Extend

Place the block anywhere you'd like under Manage > Structure > Block Layout

Where to write your code?

Everything you do should be in the app folder
The webpack config file will then compile all your javascript and scss within the app folder to their respective (css and js) folders outside of the app folder at the module root.
These are the only two files that get loaded into Drupal, you can see this by looking at the react_block.libraries.yml file

There are examples in each file within the app folder that follow the project from the prerequisite article for creating an event list.

You can simply replace the api path and variable names with whatever you want to retrieve from your Drupal view

app > actions
Make HTTP requests to your Drupal view

app > js
Custom React components

app > reducers
Map HTTP responses to Redux state

Redux is not required to run React it is just a global state management container to better manage your application data with actions and reducers.

If actions and reducers are too confusing and you'd prefer not to use Redux simply do the following:

• Delete the actions folder
• Delete the reducers folder
• Delete the store.js file
• Open the app.js file and remove the Provider component and the store.js file import

More Documentation

This session from Texas Camp covers everything you need from Drupal to React/Redux basics, with a more thorough example of this module in action utilizing POST and DELETE requests as well.

If you’re completely new to React and/or Redux, I highly encourage you to read some documentation before getting started.

Whether you’re a Drupal developer with little React knowledge or a React developer with little Drupal knowledge, you can get up and running with this module in a matter of minutes. I recommend you give progressive decoupling a try and spice up the user experience of your next site.