18 min read

In this article by Harmeet Singh and Mehul Bhat, the authors of the book Learning Web Development with React and Bootstrap, we are going to see how we can build responsive web applications with the help of Bootstrap and ReactJS.

(For more resources related to this topic, see here.)

There are many different ways to build modern web applications with JavaScript and CSS, including a lot of different tool choices, and a lot of new theory to learn. This book introduces you to ReactJS and Bootstrap which you will likely come across as you learn about modern web app development. They both are used for building fast and scalable user interfaces. React is famously known as a view (V) in MVC when we talk about defining M and C we need to look somewhere else or we can use other frameworks like Redux and Flux to handle remote data.

The best way to learn code is to write code, so we’re going to jump right in. To show you just how easy it is to get up and running with Bootstrap and ReactJS, we’re going to cover theory and will see how we can make super simple applications as well as integrate with other applications.

ReactJS

React (sometimes styled React.js or ReactJS) is an open-source JavaScript library which provides a view for data rendered as HTML. Components have been used typically to render React views which contain additional components specified as custom HTML tags. React gives you a trivial virtual DOM, powerful views without templates, unidirectional data flow and explicit mutation. It is very methodical in updating the HTML document when data changes; and a clean separation between components on a modern single-page application.

As your app comes into existence and develops, it’s advantageous to ensure that your components are used in the right manner and the React app consists of reusable components, which makes code reuse, testing, and separation of concerns easy.

React is not only V in MVC, it has stateful components, it handles mapping from input to state changes, and it renders components. In this sense, it does everything that an MVC would do.

Let’s look at React’s component life cycle and it’s different levels:

Bootstrap

Bootstrap is an open source frontend framework maintained by Twitter for developing responsive websites and web applications. It includes HTML, CSS, and JavaScript code to build user interface components. It’s a faster and an easier way to develop powerful mobile-first user interface.

Bootstrap grid system allows us to create responsive 12 column grids, layout, and components. It includes predefined classes for easy layout options (fixed width and full width). Bootstrap have pre-styled dozen reusable components and custom jQuery plugins like button, alerts, dropdown, modal, tooltip tab, pagination, carousal, badges, icons and many more.

Bootstrap package includes the compiled and minified version of CSS and JS for our app we just need CSS bootstrap.min.css and fonts folder. This style sheet will provide you the look and feel of all components, responsive layout structure for our application. In the previous version Bootstrap included icons as image but in version 3 they have replaced icons as fonts. We can also customize the Bootstrap CSS stylesheet as per the component featured in our application.

React-Bootstrap

The React-Bootstrap JavaScript framework is similar to Bootstrap rebuilt for React. It’s a complete reimplementation of the Bootstrap frontend reusable components in React. React-Bootstrap has no dependency on any other framework, such as Bootstrap.js or jQuery. It means that if you are using React-Bootstrap then we don’t need to include the jQuery in your project as a dependency. Using React-Bootstrap, we can be sure that, there won’t be external JavaScript calls to render the component which might be incompatible with the React DOM render. However, you can still achieve the same functionality and look and feel as Twitter Bootstrap, but with much cleaner code.

Benefits of React-Bootstrap

  • Compare to Twitter Bootstrap, we can import required code/component.
  • It saves a bit of typing and bugs by compressing the Bootstrap.
  • It reduces typing efforts and, more importantly, conflicts by compressing the Bootstrap.
  • We don’t need to think about the different approaches taken by Bootstrap versus. React
  • It is easy to use
  • It encapsulates in elements
  • It uses JSX syntax
  • It avoids React rendering of the virtual DOM
  • It is easy to detect DOM changes and update the DOM without any conflict
  • It doesn’t have any dependency on other libraries, such as jQuery

Bootstrap grid system

Bootstrap is based on a 12-column grid system which includes a powerful responsive structure and a mobile-first fluid grid system that allows us to scaffold our web app with very few elements. In Bootstrap, we have a predefined series of classes to compose of rows and columns, so before we start we need to include the <div>tag with the container class to wrap our rows and columns. Otherwise, the framework won’t respond as expected because Bootstrap has written CSS which is dependent on it. The preceding snippet has HTML structure of container class <div> tag:

<div class="container"><div>

This will make your web app the centre of the page as well as control the rows and columns to work as expected in responsive.

There are four class prefixes which help to define the behaviour of the columns. All the classes are related to different device screen sizes and react in familiar ways. The following table from http://getbootstrap.com defines the variations between all four classes:

 

Extra small devices Phones (<768px)

Small devices Tablets (≥768px)

Medium devices Desktops (≥992px)

Large devices Desktops (≥1200px)

Grid behavior

Horizontal at all times

Collapsed to start, horizontal above breakpoints

Container width

None (auto)

750px

970px

1170px

Class prefix

.col-xs-

.col-sm-

.col-md-

.col-lg-

# of columns

12

Column width

Auto

~62px

~81px

~97px

Gutter width

30px (15px on each side of a column)

Nestable

Yes

Offsets

Yes

Column ordering

Yes

React components

React is basically based on a modular build, with encapsulated components that manage their own state so it will efficiently update and render your components when data changes. In React, components logic is written in JavaScript instead of templates so you can easily pass rich data through your app and manage the state out of the DOM.

Using the render() method, we are rendering a component in React that takes input data and returns what you want to display. It can either take HTML tags (strings) or React components (classes).

Let’s take a quick look at examples of both:

var myReactElement = <div className="hello" />;
ReactDOM.render(myReactElement, 
document.getElementById('example'));

In this example, we are passing HTML as a string into the render method which we have used before creating the <Navbar>:

var ReactComponent = React.createClass({/*...*/});
var myReactElement = <ReactComponent someProperty={true} />;
ReactDOM.render(myReactElement, document.getElementById('example'));

In the preceding example, we are rendering the component, just to create a local variable that starts with an uppercase convention. Using the upper versus lowercase convention in React’s JSX will distinguish between local component classes and HTML tags. So, we can create our React elements or components in two ways: either we can use Plain JavaScript with React.createElement or React’s JSX.

React.createElement()

Using JSX in React is completely optional for creating the react app. As we know, we can create elements with React.createElement which take three arguments: a tag name or component, a properties object, and a variable number of child elements, which is optional:

var profile = React.createElement('li',{className:'list-group-item'}, 'Profile');
var profileImageLink = React.createElement('a',{className:'center-block text-center',href:'#'},'Image');
var profileImageWrapper = React.createElement('li',{className:'list-group-item'}, profileImageLink);
var sidebar = React.createElement('ul', { className: 'list-group' }, profile, profileImageWrapper);
ReactDOM.render(sidebar, document.getElementById('sidebar'));

In the preceding example, we have used React.createElement to generate a ulli structure. React already has built-in factories for common DOM HTML tags.

JSX in React

JSX is extension of JavaScript syntax and if you observe the syntax or structure of JSX, you will find it similar to XML coding.

JSX is doing preprocessor footstep which adds XML syntax to JavaScript. Though, you can certainly use React without JSX but JSX makes react a lot more neat and elegant. Similar like XML, JSX tags are having tag name, attributes, and children and in that if an attribute value is enclosed in quotes that value becomes a string.

The way XML is working with balanced opening and closing tags, JSX works similarly and it also helps to understand and read huge amount of structures easily than JavaScript functions and objects.

Advantages of using JSX in React

Take a look at the following points:

  • JSX is very simple to understand and think about than JavaScript functions
  • Mark-up of JSX would be more familiar to non-programmers
  • Using JSX, your markup becomes more semantic, organized, and significant

JSX – acquaintance or understanding

In the development region, user interface developer, user experience designer, and quality assurance people are not much familiar with any programming language but JSX makes their life easy by providing easy syntax structure which is visually similar to HTML structure.

JSX shows a path to indicate and see through your mind’s eye, the structure in a solid and concise way.

JSX – semantics/structured syntax

Till now, we have seen how JSX syntax is easy to understand and visualize, behind this there is big reason of having semantic syntax structure.

JSX with pleasure converts your JavaScript code into more standard way, which gives clarity to set your semantic syntax and significance component. With the help of JSX syntax you can declare structure of your custom component with information the way you do in HTML syntax and that will do all magic to transform your syntax to JavaScript functions.

ReactDOM namespace helps us to use all HTML elements with the help of ReactJS, isn’t this an amazing feature! It is. Moreover, the good part is, you can write your own named components with help of ReactDOM namespace.

Please check out below HTML simple mark-up and how JSX component helps you to have semantic markup.

<div className="divider">
<h2>Questions</h2><hr />
</div>

As you can see in the preceding example, we have wrapped <h2>Questions</h2><hr /> with <div> tag which has classNamedivider so, in React composite component, you can create similar structure and it is as easy as you do your HTML coding with semantic syntax:

<Divider> Questions </Divider>

Composite component

As we know that, you can create your custom component with JSX markup and JSX syntax will transform your component to JavaScript syntax component.

Namespace components

It’s another feature request which is available in React JSX.

We know that JSX is just an extension of JavaScript syntax and it also provides ability to use namespace so, React is also using JSX namespace pattern rather than XML namespacing. By using, standard JavaScript syntax approach which is object property access, this feature is useful for assigning component directly as <Namespace.Component/> instead of assigning variables to access components which are stored in an object.

JSXTransformer

JSXTransformer is another tool to compile JSX in the browser. While reading a code, browser will read attribute type=”text/jsx” in your mentioned <script> tag and it will only transform those scripts which has mentioned type attribute and then it will execute your script or written function in that file. The code will be executed in same manner the way React-tools executes on the server.

JSXTransformer is deprecating in current version of React, but you can find the current version on any provided CDNs and Bower. As per my opinion, it would be great to use Babel REPL tool to compile JavaScript. It has already adopted by React and broader JavaScript community.

Attribute expressions

If you can see above example of show/Hide we have used attribute expression for show the message panel and hide it. In react, there is a bit change in writing an attribute value, in JavaScript expression we write attribute in quotes (“”) but we have to provide pair of curly braces ({}).

var showhideToggle = this.state.collapse ? (<MessagePanel>):null/>;

Boolean attributes

As in Boolean attribute, there are two values, either it can be true or false and if we neglect its value in JSX while declaring attribute, it by default takes value as true. If we want to have attribute value false then we have to use an attribute expression. This scenario can come regularly when we use HTML form elements, for example disabled attribute, required attribute, checked attribute, and readOnly attribute.

In Bootstrap example:

aria-haspopup="true"aria-expanded="true"
// example of writing disabled attribute in JSX
<input type="button" disabled />;
<input type="button" disabled={true} />;

JavaScript expressions

As seen in the preceding example, you can embed JavaScript expressions in JSX using syntax that will be accustomed to any handlebars user, for example style = { displayStyle } allocates the value of the JavaScript variable displayStyle to the element’s style attribute.

Styles

Same as the expression, you can set styles by assigning an ordinary JavaScript object to the style attribute. How interesting, if someone tells you, not to write CSS syntax but you can write JavaScript code to achieve the same, no extra efforts. Isn’t it superb stuff! Yes, it is.

Events

There is a set of event handlers that you can bind in a way that should look much acquainted to anybody who knows HTML.

Generally, as per our practice we set properties on to the object which is anti-pattern in JSX attribute standard.

var component = <Component />;
  component.props.foo = x; // bad
  component.props.bar = y; // also bad

As shown in the preceding example, you can see the anti-pattern and it’s not the best practice. If you don’t know about properties of JSX attributes then propTypes won’t be set and it will throw errors which would be difficult for you to trace.

Props is very sensitive part of attribute so, you should not change it, as each props is having predefined method and you should use it as it is meant for, like we use other JavaScript methods or HTML tags. This doesn’t mean that it is impossible to change Props, it is possible but it is against standard defined by React. Even in React, it will throw error.

Spread attributes

Let’s check out JSX feature—spread attributes:

  var props = {};
  props.foo = x;
  props.bar = y;
  var component = <Component {...props} />;

As you see in above example, your properties which you have declared have become part of your component’s props as well.

Reusability of attributes is also possible here and you can also map it with other attributes. But you have to be very careful in ordering your attributes while you declare it, as it will override the previous declared attribute with lastly declared one.

Props and state

React components translate your raw data into Rich HTML, the props and state together build with that raw data to keep your UI consistent.

Ok, let’s identify what exactly it is:

  • Props and state are both plain JS objects.
  • It triggers with a render update.
  • React manage the component state by calling setState (data, callback). This method will merge data into this.state, and re-renders the component to keep our UI up to date. For example, the state of the drop-down menu (visible or hidden).
  • React component props – short for “properties” that don’t change over time. For example, drop-down menu items. Sometimes components only take some data with this .props method and render it, which makes your component stateless.
  • Using props and state together helps you to make an interactive app.

Component life cycle methods

In React each component has its own specific callback function. These callback’s functions play an important role when we are thinking about DOM manipulation or integrating other plugins in React (jQuery).

Let’s look at some commonly used methods in the lifecycle of a component:

  • getInitialState(): This method will help you to get the initial state of a component.
  • componentDidMount: This method is called automatically when a component is rendered or mounted for the first time in DOM. Integrate JavaScript frameworks, we’ll use this method to perform operations like setTimeout or setInterval, or send AJAX requests.
  • componentWillReceiveProps: This method will be used to receive a new props.
  • componentWillUnmount: This method is invoked before component is unmounted from DOM. Cleanup the DOM memory elements which are mounted in componentDidMount method.
  • componentWillUpdate: This method invoked before updating a new props and state.
  • componentDidUpdate: This is invoked immediately when the component has been updated in DOM

What is Redux?

As we know, in single page applications (SPAs) when we have to contract with state and time, it would be difficult to handgrip state over time. Here, Redux helps a lot, how? Because, in JavaScript application, Redux is handling two states: one is Data state and another is UI state and it’s standard option for SPAs (single page applications). Moreover, bearing in mind, Redux can be used with AngularJS or jQuery or React JavaScript libraries or frameworks.

Now we know, what does Redux mean? In short, Redux is a helping hand to play with states while developing JavaScript applications.

We have seen in our previous examples like, the data flows in one direction only from parent level to child level and it is known as “unidirectional data flow”. React has same flow direction from data to components so in this case it would be very difficult for proper communication of two components in React.

Redux’s architecture benefits:

Compare to other frameworks, it has more benefits:

  • It might not have any other way effects
  • As we know, binning is not needed because components cant not interact directly
  • States are managed globally so less possibility of mismanagement
  • Sometimes, for middleware it would be difficult to manage other way effects

React Top Level API

When we are talking about React API, it’s the starting step to get into React library. Different usage of React will provide different output like using React script tag will make top-level APIs available on the React global, using ES6 with npm will allow us to write import React from ‘react’ and using ES5 with npm will allow us to write var React = require(‘react’), so there are multiple ways to intialize the React with different features.

Mount/Unmount component

Always, it’s recommended to have custom wrapper API in your API, suppose we have single root or more than one root and it will be deleted at some period, so you will not lose it. Facebook is also having the similar set up which automatically calls

unmountComponentAtNode.

I also suggest not to call ReactDOM.render() every time but ideal way is to write or use it through library so, by that way Application will have mounting and unmounting to manage it.

Creating custom wrapper will help you to manage configuration at one place like internationalization, routers, user data and it would be very painful to set up all configuration every time at different places.

React integration with other APIs

React integration is nothing but converting Web component to React component by using JSX, Redux, and other methods of React.

I would like to share here, some of the best practices to be followed to have 100% quality output.

Things to remember while creating application with React

Take a look at the following points to remember:

  • Before you start working on React, always remember that it is just a View library, not the MVC framework.
  • It is advisable to have small length of component to deal with classes and modules as well as it makes life easy while code understanding, unit testing and long run maintenance of component.
  • React has introduced functions of props in its 0.14 version which is recommended to use, it is also known as functional component which helps to split your component.
  • To avoid painful journey while dealing with React-based app, please don’t use much states.
  • As I said earlier that React is only view library so, to deal with rendering part, I recommend to use Redux rather than other frameworks of Flux.
  • If you want to have more type safety then always use propTypes which also helps to catch bug early and acts as a document.
  • I recommend use of shallow rendering method to test React component which allows rendering single component without touching their child components.
  • While dealing with large React applications, always use Webpack, NPM, ES6, JSX, and Babel to complete your application.
  • If you want to have deep dive into React’s application and its elements, you can use Reduxdev tools.

Summary

To begin with, we saw just how easy it is to get ReactJS and Bootstrap installed with the inclusion of JavaScript files and a style sheet.

With Bootstrap, we work towards having a responsive grid system for different mobile devices and applied the fundamental styles of HTML elements with the inclusion of a few classes and divs.

We also saw the framework’s new mobile-first responsive design in action without cluttering up our markup with unnecessary classes or elements.

Resources for Article:

Further resources on this subject:

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here