3. Basics of a React App, Consuming a REST API, Displaying Data
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.
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
- 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