3. Developing an Item Filter and Filter UI
  1. 14m 22s
    Sep 01, 2018

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
seo advanced dnn8
Andy Stephenson

About 2018 Edition

3h 0m 34s All Jan 01, 2018

DNN Video Tutorials posted during 2018

dnn8 advanced jquery seo skin
Aderson Oliveira Andy Stephenson

30 days money back guaranteed