There are many different ways to build modern web application 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 are both used for building fast and scalable user interfaces. React is famously known as a the (view) 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 the 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 make a super simple application that will allow us to build a form and have it displayed on the page in real time.
You can write code in whichever way you feel comfortable. Try to create small components/code samples, which will give you more clarity/understanding of any technology. Now, let's see how this book is going to make your life easier when it comes to Bootstrap and ReactJS. We are going to cover some theoretical part and build two simple, real-time examples:
- Hello World! with ReactJS
- A simple static form application with React and Bootstrap
Facebook has really changed the way we think about frontend UI development with the introduction of React. One of the main advantages of this component-based approach is that it is easy to understand, as the view is just a function of the properties and state.
We're going to cover the following topics:
- Setting up the environment
- ReactJS setup
- Bootstrap setup
- Why Bootstrap
- Static form example with React and Bootstrap
React (sometimes called React.js or ReactJS) is an open-source JavaScript library that provides a view for data rendered as HTML. Components have been used typically to render React views that 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 the data changes; and provides a clean separation of components on a modern single-page application.
Observing the following example, we will have a clear idea of normal HTML encapsulation and ReactJS custom HTML tags.
Observe the following JavaScript code snippet:
<section>
<h2>Add your Ticket</h2>
</section>
<script>
var root = document.querySelector
('section').createShadowRoot();
root.innerHTML = '<style>h2{ color: red; }</style>' +
'<h2>Hello World!</h2>';
</script>
Observe the following ReactJS code snippet:
var sectionStyle = {
color: 'red'
};
var AddTicket = React.createClass({
render: function() {
return (<section><h2 style={sectionStyle}>
Hello World!</h2></section>)}
})
ReactDOM.render(<AddTicket/>, mountNode);
As your app comes into existence and develops further, it's advantageous to ensure that your components are used in the right manner. The React app consists of reusable components, which makes code reuse, testing, and separation of concerns easy.
React is not only the V in MVC, but it also has stateful components (stateful components remember everything within this.state). It handles mapping from input to state changes, and it renders components. In this sense, it does everything that an MVC does.
Let's look at React's component life cycle and its different levels. We will discuss more on this in the forthcoming chapters. Observe the following diagram:
Note
React isn't an MVC framework; it's a library for building a composable user interface and reusable components. React is used at Facebook in its production stages and instagram.com is entirely built on React.