Now, that you've completed your first web app using ReactJS and Bootstrap, we're going to build the first responsive theme for your app using both the frameworks. We'll also be touching on the full potential of both frameworks. So, let's start!
Firstly, we need to create a similar folder structure to our Hello World app which we made in Chapter 1, Getting Started with React and Bootstrap.
The following screenshot describes the folder structure:
Now you need to copy the ReactJS and Bootstrap files from chapter1
into the significant directories of Chapter2
and create an index.html
file in the root. The following code snippet is just a base HTML page which includes Bootstrap and React.
Here is the markup of our HTML page:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>ReactJS theme with bootstrap</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <script type="text/javascript" src="js/react.min.js"> </script> <script type="text/javascript" src="js/react-dom.min.js"> </script> <script src="js/browser.min.js"></script> </head> <body> </body> </html>