We have completed our first Hello World app with React and Bootstrap and everything looks good and as expected. Now it's time do more and create one static login form, applying the Bootstrap look and feel to it. Bootstrap is a great way to make your app a responsive grid system for different mobile devices and apply the fundamental styles on HTML elements with the inclusion of a few classes and divs.
First, let's start to make an HTML structure to follow the Bootstrap grid system.
Create a div
and add a className .container
for (fixed width) and .container-fluid
for (full width). Use the className
attribute instead of using class
:
<div className="container-fluid"></div>
As we know, class
and for
are discouraged as XML attribute names. Moreover, these are reserved words in many JavaScript libraries so, to have a clear difference and identical understanding, instead of using class
and for
, we can use className
and htmlFor
. Create a div
and add the className="row"
. The row
must be placed within .container-fluid
:
<div className="container-fluid"> <div className="row"></div> </div>
Now create columns that must be immediate children of a row:
<div className="container-fluid"> <div className="row"> <div className="col-lg-6"></div> </div> </div>
.row
and .col-xs-4
are predefined classes that are available for quickly making grid layouts.
Add the h1
tag for the title of the page:
<div className="container-fluid"> <div className="row"> <div className="col-sm-6"> <h1>Login Form</h1> </div> </div> </div>
Grid columns are created by the given specified number of col-sm-*
of 12 available columns. For example, if we are using a four column layout, we need to specify to col-sm-3
lead-in equal columns:
Class name |
Devices |
|
Small devices |
|
Medium devices |
|
Large devices |
We are using the col-sm-*
prefix to resize our columns for small devices. Inside the columns, we need to wrap our form elements label
and input
tags into a div
tag with the form-group
class:
<div className="form-group"> <label for="emailInput">Email address</label> <input type="email" className="form-control" id="emailInput" placeholder="Email"/> </div>
Forget the style of Bootstrap; we need to add the form-control
class in our input elements. If we need extra padding in our label
tag then we can add the control-label
class on the label
.
Let's quickly add the rest of the elements. I am going to add a password
and submit
button.
In previous versions of Bootstrap, form elements were usually wrapped in an element with the form-action
class. However, in Bootstrap 3, we just need to use the same form-group
instead of form-action
. We will discuss Bootstrap classes and responsiveness in more detail in Chapter 2, Lets Build a Responsive Theme with React-Bootstrap and React.
Here is our complete HTML code:
<div className="container-fluid"> <div className="row"> <div className="col-lg-6"> <form> <h1>Login Form</h1> <hr/> <div className="form-group"> <label for="emailInput">Email address</label> <input type="email" className="form-control" id="emailInput" placeholder="Email"/> </div> <div className="form-group"> <label for="passwordInput">Password</label> <input type="password" className= "form-control" id="passwordInput" placeholder="Password"/> </div> <button type="submit" className="btn btn-default col-xs-offset-9 col-xs-3">Submit</button> </form> </div> </div> </div>
Now create one object inside the var loginFormHTML
script tag and assign this HTML:
Var loginFormHTML = <div className="container-fluid"> <div className="row"> <div className="col-lg-6"> <form> <h1>Login Form</h1> <hr/> <div className="form-group"> <label for="emailInput">Email address</label> <input type="email" className="form-control" id="emailInput" placeholder="Email"/> </div> <div className="form-group"> <label for="passwordInput">Password</label> <input type="password" className="form- control" id="passwordInput" placeholder="Password"/> </div> <button type="submit" className="btn btn-default col-xs- offset-9 col-xs-3">Submit</button> </form> </div> </div>
We will pass this object in the React.DOM()
method instead of directly passing the HTML:
ReactDOM.render(LoginformHTML,document.getElementById('hello'));
Our form is ready. Now let's see how it looks in the browser:
The compiler is unable to parse our HTML because we have not enclosed one of the div
tags properly. You can see in our HTML that we have not closed the wrapper container-fluid
at the end. Now close the wrapper tag at the end and open the file again in your browser.
Here is the HTML after closing the div
tag:
<!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <title>ReactJS Chapter 1</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> <!-- Add your site or application content here --> <div id="loginForm"></div> <script type="text/babel"> var LoginformHTML = <div className="container-fluid"> <div className="row"> <div className="col-lg-6"> <form> <h1>Login Form</h1> <hr/> <div className="form-group"> <label for="emailInput">Email address</label> <input type="email" className="form-control" id= "emailInput" placeholder="Email"/> </div> <div className="form-group"> <label for="passwordInput">Password</label> <input type="password" className="form-control" id="passwordInput" placeholder="Password"/> </div> <button type="submit" className="btn btn-default col-xs-offset-9 col-xs-3">Submit</button> </form> </div> </div> </div> ReactDOM.render(LoginformHTML,document.getElementById ('loginForm'); </script> </body> </html>
Now, you can check your page on a browser and you will be able to see the form with the look and feel as shown in the following screenshot:
Now it's working fine and looks good. Bootstrap also provides two additional classes to make your elements smaller and larger: input-lg
and input-sm
. You can also check the responsive behavior by resizing the browser. Observe the following screenshot:
That looks great. Our small static login form application is ready with responsive behavior.
As this is an introductory chapter, a question might come to your mind of how will React be helpful or beneficial?
Here's your answer:
The preceding points are very high-level and we will see more benefits in detail with the upcoming examples in the chapters that follow.