Learning Web Development with React and Bootstrap (Harmeet Singh, Mehul Bhatt) (z-library.sk, 1lib.sk, z-lib.sk)

Learning Web Development with React and Bootstrap Build real-time responsive web apps using React and Bootstrap Harmeet Singh Mehul Bhatt BIRMINGHAM - MUMBAI

Learning Web Development with React and Bootstrap Copyright © 2016 Packt Publishing All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information. First published: December 2016 Production reference: 1151216 Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-78646-249-7 www.packtpub.com

Credits Authors Harmeet Singh Mehul Bhatt Copy Editor Safis Editing Reviewer Sandeep Neema Project Coordinator Devanshi Doshi Commissioning Editor Ashwin Nair Proofreader Safis Editing Acquisition Editor Nitin Dasan Indexer Pratik Shirodkar Content Development Editor Narendrakumar Tripathi Graphics Jason Monteiro Technical Editor Huzefa Unwala Production Coordinator Deepika Naik

About the Authors Harmeet Singh is a senior UI developer working for CIGNEX Datamatics with varied experience in UI. He hails from the holy city of Amritsar, India. His expertise includes HTML5, JavaScript, jQuery, AngularJS, and Node.js. His interests include music, sports, dancing, and adventure. Harmeet has given various presentations and conducted many workshops on UI development. On the academic front, Harmeet is a graduate in IT, and is a GNIIT diploma holder from NIIT, specializing in software engineering. He loves to spend time learning and discussing new technologies. He also writes technical articles for his blog at liferayUI (h t t p ://l i f e r a y u i . c o m ). Also, he is an author of the book on Test-Driven JavaScript Development, Packt. He can be reached on Skype at harmeetsingh090. You can also connect with him on LinkedIn at h t t p s ://i n . l i n k e d i n . c o m /i n /h a r m e e t s i n g h 090. I would like to thank my CIGNEX project team and my best friends, Nikhil Nair and Nayan Jyoti Talukdar, whose support and encouragement led me to write this book and kept me motivated throughout the journey of this book. Thank you so much co-author, Mehul Bhatt, for the excellent support. Mehul Bhatt has over 11 years of experience and serves as a user experience (UX) & user interface (UI) practice manager at CIGNEX Datamatics. As a manager, he handles a wide range of onshore and offshore teams. He hails from the princely state of Jamnagar, Gujarat, India. His expertise includes HTML5, CSS3, JavaScript, jQuery, application development, guiding and mentoring developers, and more, which helps clients to take their business to the next level in the open market. Mehul has also won many awards for his excellence. His interests include learning new technologies, music, drama, sports, and exploring new places.

Mehul is Microsoft certified in HTML, CSS, and JavaScript. On the academic front, he holds a post graduate diploma in multimedia, specialized in web development, which gives him the skills to understand customer requirements and excel in the execution of the required performance with the best code quality standards. He can be reached on Skype at mehul_multimedia. You can also connect with him on LinkedIn at h t t p s ://w w w . l i n k e d i n . c o m /i n /m e h u l - b h a t t - 47764b 13. I'd like to thank Harmeet Singh for collaborating with me in developing such a handy book for aspiring developers. I can't forget to thank my wife and my daughter for supporting me at every stage of my life.

About the Reviewer Sandeep Neema has a bachelor's degree in computer science. Presently, he is working as a team lead in Systems Plus Solutions, Pune. In a varied career extending over seven years, Sandeep has worked with TCS, CIGNEX Datamatics, and Azilen Technologies Pvt. Ltd. in different technologies. He is an Oracle-certified Java developer and ISTQB Foundation Level certified tester.

www.PacktPub.com For support files and downloads related to your book, please visit www.PacktPub.com. Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at service@packtpub.com for more details. At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks. h t t p s ://w w w . p a c k t p u b . c o m /m a p t Get the most in-demand software skills with Mapt. Mapt gives you full access to all Packt books and video courses, as well as industry-leading tools to help you plan your personal development and advance your career. Why subscribe? Fully searchable across every book published by Packt Copy and paste, print, and bookmark content On demand and accessible via a web browser

Table of Contents Preface 1 Chapter 1: Getting Started with React and Bootstrap 7 ReactJS 8 Setting up the environment 10 Installing ReactJS and Bootstrap 11 Installing React 12 Bootstrap 13 Installing Bootstrap 14 Using React 15 Static form with React and Bootstrap 17 Summary 25 Chapter 2: Lets Build a Responsive Theme with React-Bootstrap and React 26 Setting up 26 Scaffolding 28 Navigation 28 React-Bootstrap 31 Installing React-Bootstrap 32 Using React-Bootstrap 32 Benefits of React-Bootstrap 33 Bootstrap grid system 38 Helper classes 42 Floats 42 Center elements 43 Show and hide 43 React components 43 React.createElement() 44 Summary 48 Chapter 3: ReactJS-JSX 50 What is JSX in React 50 Advantages of using JSX in React 51 How to make your code neat and clean 51 Acquaintance or understanding 52

[ ii ] Semantics/structured syntax 52 The composite component 53 Namespace components 54 JSXTransformer 60 Attribute expressions 61 Boolean attributes 61 JavaScript expressions 62 Styles 62 Events 62 Attributes 63 Spread attributes 63 Example of a dynamic form with JSX 64 Summary 71 Chapter 4: DOM Interaction with ReactJS 72 Props and state 72 Form components 73 Props in form components 74 Controlled component 75 Uncontrolled component 76 Getting the form values on submit 77 Ref attribute 77 Bootstrap helper classes 89 Caret 89 Clearfix 90 Summary 90 Chapter 5: jQuery Bootstrap Component with React 91 Alerts 92 Usage 92 Bootstrap alert component in React 92 Component lifecycle methods 94 Component integration 95 Bootstrap modal 100 Summary 110 Chapter 6: Redux Architecture 111 What is Redux? 111 Single store approach 115 Read-only state 115 Reducer functions to change the state 116 Architecture of Redux 116

[ iii ] Redux's architectural benefits 118 Redux setup 118 Installing Node.js 119 Setting up the application 119 Development tool setup 120 Redux application setup 122 Actions 122 Reducers 123 Store 124 Components 125 Summary 131 Chapter 7: Routing with React 133 Advantages of React router 133 Installing router 135 Application setup 135 Creating routes 136 Page layout 138 Nested routes 141 React router 144 NotFoundRoute 149 Browser history 150 Query string parameters 151 Customizing your history further 153 Summary 154 Chapter 8: ReactJS API 155 React Top-Level API 155 React API component 155 Mount/Unmount components 156 Object-oriented programming 156 React integration with other APIs 159 React integration with the Facebook API 159 Installing Node 159 Setting up the application 160 Summary 179 Chapter 9: React with Node.js 180 Installing Node and npm 181 React application setup 183 Installing modules 184 Responsive Bootstrap application with React and Node 190 Bootstrap table 203

[ iv ] Bootstrap responsive tables 204 React developer tools 205 Installation 205 How to use 206 Summary 209 Chapter 10: Best Practices 210 Handling data in React 211 Using Flux 211 Using Redux 212 Redux is equal to Flux, really? 212 Single-store approach 213 Read-only state 213 Immutable React state 214 Observables and reactive solutions 215 React routing 215 How React will help to split your code in lazy loading 216 JSX components 217 How easy is it to visualize? 217 Acquaintance or understanding 218 Semantics/structured syntax 218 Using classes 219 Using PropType 219 Benefits of higher-order components 219 Redux architectural benefits 220 Customizing Bootstrap for your app 220 Bootstrap content – typography 221 Bootstrap component – navbar 223 Bootstrap component – forms 223 Bootstrap component – button 225 Bootstrap themes 226 Bootstrap responsive grid system 226 Interesting information about ReactJS and Bootstrap projects 227 Helpful React projects 228 Things to remember 231 Summary 231 Index 234

Preface We all know that JavaScript applications are the future of web development, and there are many different frameworks available to build isomorphic JavaScript web applications. However, with the changing web development world, we all need to modernize ourselves as developers to learn new frameworks and build new tools. It is important to analyze the code methodology of the framework and adopt the same, rather than getting lost in the framework market. ReactJS is an open source JavaScript library, similar to Bootstrap, used for building user interfaces and is famously known as the V (view) in MVC. When we talk about defining M and C, we can use other frameworks, such as Redux and Flux, to handle the remote data. Bootstrap is an open source frontend framework for developing responsive websites and web applications. It includes HTML, CSS, and JavaScript code to build user interface components. It’s a faster and easier way to develop a powerful mobile-first responsive design. The Bootstrap library includes responsive 12-column grids and predefined classes for easy layout options (fixed width and full width). Bootstrap has dozens of prestyled reusable components and custom jQuery plugins, such as button, alerts, dropdowns, modal, tooltip tab, pagination, carousal, badges, and icons. This book starts with a detailed study of ReactJS and Bootstrap. The book further introduces us on how to create small components of ReactJS with Twitter Bootstrap, React-Bootstrap, and so on. It also gives us an understanding on JSX, Redux, and Node.js integration for advanced concepts such as reducers, actions, store, live reload, and webpack. The goal is to help readers to build responsive and scalable web applications with ReactJS and Bootstrap. What this book covers Chapter 1, Getting Started with React and Bootstrap, introduces ReactJS, its life cycle, and Bootstrap with a small form component. Chapter 2, Lets Build a Responsive Theme with React-Bootstrap and React, introduces the React- Bootstrap integration, its benefits, and the Bootstrap-responsive grid system. Chapter 3, ReactJS-JSX, is about the JSX, its advantages, and how it works in React with examples. Chapter 4, DOM Interaction with ReactJS, explains props and state in depth and how React interacts with the DOM, with examples.

Preface [ 2 ] Chapter 5, jQuery Bootstrap Component with React, explores how we can integrate the Bootstrap component into React, with examples. Chapter 6, Redux Architecture, covers the Redux architecture with ReactJS and Node.js with examples as well as its advantages and integration. Chapter 7, Routing with React, showcases the React router with ReactJS and Bootstrap's nav component with example, its advantages, and integration. Chapter 8, ReactJS API, explores how we can integrate third-party APIs such as Facebook to get profile info in ReactJS. Chapter 9, React with Node.js, covers Node.js, which is set up for the server-side React application, and also covers creating small applications using Bootstrap and ReactJS npm modules. Chapter 10, Best Practices, lists the best practices of creating React applications and also helps us understand the differences between Redux and Flux, Bootstrap customization, and a list of projects to follow. What you need for this book To run the examples in this book, the following tools are required: ReactJS 15.1 and above h t t p s ://f a c e b o o k . g i t h u b . i o /r e a c t / ReactJS DOM 15.1 and above h t t p s ://f a c e b o o k . g i t h u b . i o /r e a c t / Babel 5.8.23 h t t p s ://c d n j s . c o m /l i b r a r i e s /b a b e l - c o r e /5. 8. 23 Bootstrap 3.3.5 getbootstrap.com/ jQuery 1.10.2 h t t p ://j q u e r y . c o m /d o w n l o a d / React-Bootstrap 1.0.0 h t t p s ://r e a c t - b o o t s t r a p . g i t h u b . i o / JSX Transformer 0.13.3 h t t p s ://c d n j s . c o m /l i b r a r i e s /r e a c t /0. 13. 0 React Router library 3.0.0 h t t p s ://u n p k g . c o m /r e a c t - r o u t e r @3. 0. 0/u m d /R e a c t R o u t e r . m i n . j s Node.js 0.12.7 h t t p s ://n o d e j s . o r g /e n /b l o g /r e l e a s e /v 0. 12. 7/ MongoDB 3.2 h t t p s ://w w w . m o n g o d b . o r g /d o w n l o a d s #p r o d u c t i o n

Preface [ 3 ] Who this book is for If you have an intermediate knowledge of HTML, CSS, and JavaScript and want to learn how and why ReactJS and Bootstrap is the first approach for developers to create fast, responsive, and scalable user interface of your application, then this book is for you. If your Model, View, Controller (MVC) concept is clear, then it’s added an advantage to understand the architecture of React. Conventions In this book, you will find a number of text styles that distinguish between different kinds of information. Here are some examples of these styles and their explanations. Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "Now we need to create a couple of folders inside the chapter1 folder named images, css, and js (JavaScript) to make your application manageable." A block of code is set as follows: <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> When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold: <div className="container"> <h1>Welcome to EIS</h1> <hr/> <div className="row"> <div className="col-md-12 col-lg-12"> {this.props.children} </div> </div> </div>

Preface [ 4 ] Any command-line input or output is written as follows: npm install <package name> --save New terms and important words are shown in bold. Words that you see on the screen, for example, in menus or dialog boxes, appear in the text like this: "In the Dashboard page, your left-hand navigation shows the Settings link. Please click on that to set the Basic and Advanced settings for your app." Warnings or important notes appear in a box like this. Tips and tricks appear like this. Reader feedback Feedback from our readers is always welcome. Let us know what you think about this book-what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of. To send us general feedback, simply e- mail feedback@packtpub.com, and mention the book's title in the subject of your message. If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, refer to our author guide at www.packtpub.com/authors. Customer support Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.

Preface [ 5 ] Downloading the example code You can download the example code files for this book from your account at h t t p ://w w w . p a c k t p u b . c o m . If you purchased this book elsewhere, you can visit h t t p ://w w w . p a c k t p u b . c o m /s u p p o r t and register to have the files e-mailed directly to you. You can download the code files by following these steps: Log in or register to our website using your e-mail address and password.1. Hover the mouse pointer on the SUPPORT tab at the top.2. Click on Code Downloads & Errata.3. Enter the name of the book in the Search box.4. Select the book for which you're looking to download the code files.5. Choose from the drop-down menu where you purchased this book from.6. Click on Code Download.7. Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of: WinRAR / 7-Zip for Windows Zipeg / iZip / UnRarX for Mac 7-Zip / PeaZip for Linux The code bundle for the book is also hosted on GitHub at h t t p s ://g i t h u b . c o m /P a c k t P u b l i s h i n g /L e a r n i n g - W e b - D e v e l o p m e n t - w i t h - R e a c t - a n d - B o o t s t r a p . We also have other code bundles from our rich catalog of books and videos available at h t t p s ://g i t h u b . c o m /P a c k t P u b l i s h i n g /. Check them out! Downloading the color images of this book We also provide you with a PDF file that has color images of the screenshots/diagrams used in this book. The color images will help you better understand the changes in the output. You can download this file from h t t p s ://w w w . p a c k t p u b . c o m /s i t e s /d e f a u l t /f i l e s /d o w n l o a d s /L e a r n i n g W e b D e v e l o p m e n t w i t h R e a c t a n d B o o t s t r a p _ C o l o r I m a g e s . p d f .

Preface [ 6 ] Errata Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books-maybe a mistake in the text or the code- we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting h t t p ://w w w . p a c k t p u b . c o m /s u b m i t - e r r a t a , selecting your book, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title. To view the previously submitted errata, go to h t t p s ://w w w . p a c k t p u b . c o m /b o o k s /c o n t e n t /s u p p o r t and enter the name of the book in the search field. The required information will appear under the Errata section. Piracy Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy. Please contact us at copyright@packtpub.com with a link to the suspected pirated material. We appreciate your help in protecting our authors and our ability to bring you valuable content. Questions If you have a problem with any aspect of this book, you can contact us at questions@packtpub.com, and we will do our best to address the problem.

1 Getting Started with React and Bootstrap 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.

Getting Started with React and Bootstrap [ 8 ] 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 ReactJS 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>)}