O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Learning Web Development with React and Bootstrap

Book Description

Build real-time responsive web apps using React and Bootstrap

About This Book

  • Showcase the power of React-Bootstrap through real-world examples
  • Explore the benefits of integrating React with various frameworks and APIs
  • See the benefits of using the latest frameworks to make your web development experience enchanting

Who This Book Is For

This book is for anybody who is interested in modern web development and has intermediate knowledge of HTML, CSS, and JavaScript. Basic knowledge of any JavaScript MVC framework would also be helpful.

What You Will Learn

  • See how to integrate Bootstrap with React
  • Explore the Redux architecture and understand its benefits
  • Build a custom responsive theme with React-Bootstrap components
  • Easily interact with DOM on your web browser
  • Appreciate the advantages of using JSX
  • Get acquainted with the various routing methods in React
  • Integrate external APIs into React

In Detail

Bootstrap is one of the most popular front-end frameworks, and integrating it with React allows web developers to write much cleaner code. This book will help you gain a thorough understanding of the Bootstrap framework and show you how to build impressive web apps.

In this book, you will get an overview of the features of Bootstrap and ReactJS, along with the integration of React-Bootstrap components with ReactJS. You will understand the benefits of using JSX and the Redux architecture. The server-side rendering of React will also be shown. All the concepts are explained by developing real-world examples.

By the end of this book, you will be equipped to create responsive web applications using Bootstrap style and React-Bootstrap components with ReactJS, and will have an insight into the best practices.

Style and approach

The mission is to help you make a live and fully-responsive web application using React-Bootstrap with hands-on examples and step-by-step instructions. This book is linear as well as progressive, so every chapter builds upon the knowledge gained in the last.

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

Table of Contents

  1. Learning Web Development with React and Bootstrap
    1. Learning Web Development with React and Bootstrap
    2. Credits
    3. About the Authors
    4. About the Reviewer
    5. www.PacktPub.com
      1. Why subscribe?
    6. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Downloading the color images of this book
        3. Errata
        4. Piracy
        5. Questions
    7. 1. Getting Started with React and Bootstrap
      1. ReactJS
      2. Setting up the environment
      3. Installing ReactJS and Bootstrap
        1. Installing React
      4. Bootstrap
        1. Installing Bootstrap
      5. Using React
      6. Static form with React and Bootstrap
      7. Summary
    8. 2. Lets Build a Responsive Theme with React-Bootstrap and React
      1. Setting up
      2. Scaffolding
      3. Navigation
      4. React-Bootstrap
        1. Installing React-Bootstrap
        2. Using React-Bootstrap
        3. Benefits of React-Bootstrap
      5. Bootstrap grid system
      6. Helper classes
        1. Floats
        2. Center elements
        3. Show and hide
      7. React components
        1. React.createElement()
      8. Summary
    9. 3. ReactJS-JSX
      1. What is JSX in React
        1. Advantages of using JSX in React
        2. How to make your code neat and clean
      2. Acquaintance or understanding
      3. Semantics/structured syntax
      4. The composite component
      5. Namespace components
        1. JSXTransformer
      6. Attribute expressions
        1. Boolean attributes
        2. JavaScript expressions
          1. Styles
          2. Events
          3. Attributes
          4. Spread attributes
        3. Example of a dynamic form with JSX
      7. Summary
    10. 4. DOM Interaction with ReactJS
      1. Props and state
      2. Form components
        1. Props in form components
        2. Controlled component
        3. Uncontrolled component
      3. Getting the form values on submit
        1. Ref attribute
        2. Bootstrap helper classes
          1. Caret
          2. Clearfix
      4. Summary
    11. 5. jQuery Bootstrap Component with React
      1. Alerts
        1. Usage
      2. Bootstrap alert component in React
      3. Component lifecycle methods
      4. Component integration
        1. Bootstrap modal
      5. Summary
    12. 6. Redux Architecture
      1. What is Redux?
        1. Single store approach
        2. Read-only state
        3. Reducer functions to change the state
      2. Architecture of Redux
        1. Redux's architectural benefits
      3. Redux setup
        1. Installing Node.js
          1. Setting up the application
        2. Development tool setup
        3. Redux application setup
          1. Actions
          2. Reducers
          3. Store
          4. Components
      4. Summary
    13. 7. Routing with React
      1. Advantages of React router
      2. Installing router
      3. Application setup
      4. Creating routes
      5. Page layout
      6. Nested routes
        1. React router
          1. NotFoundRoute
          2. Browser history
          3. Query string parameters
        2. Customizing your history further
      7. Summary
    14. 8. ReactJS API
      1. React Top-Level API
      2. React API component
        1. Mount/Unmount components
      3. Object-oriented programming
      4. React integration with other APIs
        1. React integration with the Facebook API
          1. Installing Node
          2. Setting up the application
      5. Summary
    15. 9. React with Node.js
      1. Installing Node and npm
        1. React application setup
        2. Installing modules
      2. Responsive Bootstrap application with React and Node
        1. Bootstrap table
          1. Bootstrap responsive tables
      3. React developer tools
        1. Installation
        2. How to use
      4. Summary
    16. 10. Best Practices
      1. Handling data in React
        1. Using Flux
        2. Using Redux
        3. Redux is equal to Flux, really?
          1. Single-store approach
          2. Read-only state
        4. Immutable React state
        5. Observables and reactive solutions
      2. React routing
        1. How React will help to split your code in lazy loading
        2. JSX components
        3. How easy is it to visualize?
        4. Acquaintance or understanding
        5. Semantics/structured syntax
        6. Using classes
        7. Using PropType
        8. Benefits of higher-order components
        9. Redux architectural benefits
      3. Customizing Bootstrap for your app
        1. Bootstrap content - typography
        2. Bootstrap component - navbar
        3. Bootstrap component - forms
        4. Bootstrap component - button
        5. Bootstrap themes
        6. Bootstrap responsive grid system
      4. Interesting information about ReactJS and Bootstrap projects
      5. Helpful React projects
      6. Things to remember
      7. Summary