Bootstrap 4 – Integrating with AngularJS and React

At this stage of our journey through mastering Bootstrap, we have built the MyPhoto web page using Bootstrap, along with various third-party libraries and plugins, and we have optimized the web page. MyPhoto is now complete in terms of functionality.

In this chapter, we will not develop any new functionality. Instead, we will integrate MyPhoto with two of the currently most popular and powerful JavaScript frameworks: AngularJS ( ) and React (

AngularJS is a Model-View-* (MVC, MVV, and so on) JavaScript framework, while React is a JavaScript library that concentrates solely on the View part of the Model-View-Controller (MVC) type stack. To readers unfamiliar with the MVC, the term refers to a design pattern whereby the logic for modeling and representing the data and the logic for creating the bridge between the two are strictly separated. This development approach is extremely powerful, and consequently, a vast amount of web pages are built with frameworks or libraries such as AngularJS and React, as they provide very useful abstractions on top of JavaScript and the DOM.

At this point, we will fork MyPhoto, creating an AngularJS version and a React version. We will concentrate only on how AngularJS and React can help improve reusability and maintainability and handle dynamic data. While AngularJS and React have other great functionalities, they are beyond the scope of this book.

In this chapter, we will do the following:

  • Integrate AngularJS with MyPhoto
  • Integrate React with MyPhoto

Comments are closed.