In this chapter, we will take a look at how to get started with using Bootstrap 4 in React and Angular. The assumption here is that you have not used these frameworks before. In this chapter, we are trying to achieve two goals. The first goal is to get started with React and Angular without getting bogged down with their technical details (which can be quite overwhelming if you have not used these frameworks before). The second goal is to show the easiest possible ways to combine Bootstrap 4 with React and Angular. Once you understand the basics that this chapter covers, you should be able to build on top of that knowledge and explore these two wonderful frontend frameworks further.
In this recipe, we will integrate Bootstrap 4 with React. To do this, we will use the create-react-app repository, available at https://github.com/facebookincubator.
We will also use the reactstrap project, as it has been built to use Bootstrap 4 as React components today. You can check out the project at https://reactstrap.github.io.
To preview the completed recipe, go to chapter12/complete/recipe1 and open the index.html file in your browser. In order to get to this finished result, we need to use the create-react-app repository.
Navigate to https://github.com/facebookincubator/create-react-app. The reason to use this repository is simple, as explained in the repository description: Create React apps with no build configuration. Working with React this way removes a layout of complexity, which allows us to achieve the goal of using Bootstrap 4 with this framework that much simpler.
Go to the Getting Started section at https://github.com/facebookincubator...
While React is the V in MVC, Angular is a full-blown framework. In this recipe, we will first take a look at how to install Angular 2 on our system using npm, and then we'll take a look at how to incorporate Bootstrap 4 CDN styles.
To get ready, we will visit the QuickStart guide, from the official documentation, which can be found at https://angular.io/guide/quickstart. There are a couple of prerequisites that we need to satisfy, namely that we use Node version 6.9.x or greater and NPM version 3.x.x.
To check the versions we are using, we need to run the following commands in our console:
node -v; npm -v
Note
If you need to have multiple versions of Node installed on your machine, you may look into Node Version Manager (NVM). For more information, visit https://github.com/creationix/nvm.
In this recipe, we will build from the knowledge gained from the preceding recipe. Now that we understand just a bit about decorators and how components work, we can build a simple home page using Angular 4 and Bootstrap 4. However, in this recipe, we will take it a step further, by including ng-bootstrap into our project.
To find out more about ng-bootstrap, visit the project website at https://ng-bootstrap.github.io/#/home.
We will go through a similar scenario like in the preceding recipe. To get ready, verify that the installed version of Node on your system is at least 6.9, and that the version of npm you have is at least 3.x.x.
Congratulations! You just went through quite a journey with Bootstrap 4. We have covered a lot of different topics and technologies in this book. There is always more to cover, and it is always possible to go into greater depth with any of the topics covered in this book's chapters. Now that you have gone through these recipes, you should be able to build wonderful custom-made sites with Bootstrap 4.
Hopefully, going through this book was a positive learning experience for you. If you are interested in learning even more about Bootstrap 4, make sure that you check out the Packt website, using the search term of Bootstrap 4, or simply go to the following link: https://www.packtpub.com/all?search=bootstrap%204.
Also, you can never go wrong with going back to basics and reading the official Bootstrap documentation, currently available at https://v4-alpha.getbootstrap.com/getting-started/introduction/.
© 2017 Packt Publishing Limited All Rights ReservedAuthor (1)
