3. Basics of a React App, Consuming a REST API, Displaying Data
  1. 13m 55s
    Jul 01, 2018

In this tutorial we'll be demonstrating how to build a detached, or headless DNN frontend with React.js. By headless, I mean we'll be building a basic standalone dynamic website completely detached from the DNN system, and any data will be pulled from the DNN backend via a REST API built with the 2SXC module.

Today, we'll be working on an example app to display a list of movies, and then in the next part we'll be significantly improving this react app to include some excellent Bootstrap 4 layout and some movie ordering and filtering techniques.

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:

  • React component overview
  • React lifecycle methods
  • Using the Fetch Javascript API to retrieve our Movies
  • How to allow 'CORS' Cross Origin Resource Sharing in DNN
  • Converting the request data to JSON
  • Overview of the React state object
  • Looping through our movies and displaying each title
Tags:
skin advanced dnn8
Author:
Andy Stephenson

About 2018 Edition

3h 0m 34s All Jan 01, 2018

DNN Video Tutorials posted during 2018

Tags:
dnn8 advanced jquery seo skin
Author:
Aderson Oliveira Andy Stephenson
Back

Try FREE
30 days money back guaranteed