3. Developing an Item Filter and Filter UI

In this tutorial we walk you through how to make your React JS front end look great by implementing Bootstrap 4. We’ll also demonstrate how we can instantly filter items on the front end.

This tutorial is part 2 of How to Develop a Detached DNN Front End with React JS where we began the creation of a Movie library... administered in the DNN backend, but displayed on an entirely detached React JS front end via a REST API developed with the 2sxc module.

React.js was developed by Facebook and is at the cutting edge of front end development, and it’s quickly becoming the industry standard javascript library of choice worldwide.

2SXC is a fantastic module allowing us to turn DNN into a decent content management system. Recent new features allow us to visually build REST API routes.

This video contains:

• Duplicating the main movie array for filtering
• Committing multiple arrays to state at the same time
• Setting up the user interface
• How to set up a select element in React JSX
• Setting the selected option programmatically
• How to filter an array based upon a simple criteria
• The Javascript filter method
• Building and optimising your app for production