Cover image for ReactJS Blueprints

ReactJS Blueprints

Author Sven A. Robbestad
Release Date: 2016/07/01
ISBN: 9781785886546
Topic:
0%
67
Chapters
0-1
Hours read
0k
Total Words
    Start Reading Now    
       Add to Wishlist       
View table of contents

Book Description

Create powerful applications with ReactJS, the most popular platform for web developers today

About This Book

  • Create web apps with the most popular JavaScript library in the world
  • Learn how to speed up your development process and save valuable time
  • Work though step-by-step tutorials that provide easy-to-understand solutions to real-world problems

Who This Book Is For

This book is for those who want to develop applications with ReactJS. With its wide variety of topics, it caters both to the inexperienced developer as well as to the advanced, and it doesn't require any prior experience with ReactJS.

What You Will Learn

  • Create a development environment that speeds up your development process
  • Find out about responsive web development and create apps that can be used on any device
  • Effortlessly connect to public and private APIs
  • Create efficient components that are easily testable and small enough to completely understand
  • Understand what data flow means in ReactJS and why you never need to worry about where data changes originate
  • Create universal apps that run on the browser as well as on the server
  • Work with modern front-end tooling and level up your skills
  • Train yourself to think in terms of ReactJS

In Detail

The JavaScript revolution has landed! ReactJS is one of those rare technologies that comes out of nowhere and turns established practices on their head. It provides a different way of thinking about how you should develop your apps, and has already gained a massive adoption among web developers. Join the revolution, build web apps faster, and have more fun developing!

Packed with real-world code, this book starts by covering the idea behind ReactJS and the key concepts you must familiarize yourself with. You will learn how to bootstrap your ReactJS projects and you'll also be provided with a handy scaffolding that you can use and reuse over and over.

We then go on to cover a wide variety of apps, and will help you to structure and build your own components. Next, you will build a web shop, create a fully responsive and routable app, and also develop a real-time search app. Further on, you will be taught to work with public APIs to create a map-based application. You will also be taken through some advanced concepts such as Redux that are making a huge splash currently in the world of ReactJS. You'll learn how to efficiently seal off your app for guest access, interact with hardware APIs, and create a photo app. You will then master the art of making your apps universal, and find out how to deploy them to the cloud. Finally, we wrap up the book as you are shown how to make a game. What better way to kick off your ReactJS development journey?

Style and approach

This is an easy-to-follow guide full of real-world ReactJS applications. Each chapter is self-contained, and every code example is explained in detail.

Table of Contents

  1. ReactJS Blueprints
    1. Table of Contents
    2. ReactJS Blueprints
    3. Credits
    4. Foreword
    5. About the Author
    6. About the Reviewers
    7. www.PacktPub.com
      1. eBooks, discount offers, and more
        1. Why subscribe?
    8. 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. Errata
        3. Piracy
        4. Questions
    9. 1. Diving Headfirst into ReactJS
      1. Introducing ReactJS
        1. Modern JavaScript development
      2. Component specification
        1. Props and states
          1. Props
          2. States
        2. render
        3. statics
        4. propTypes
        5. displayName
      3. Life cycle methods
        1. componentDidMount
        2. componentWillMount
        3. shouldComponentUpdate
        4. componentWillReceiveProps
        5. componentWillUpdate
        6. componentDidUpdate
        7. componentWillUnmount
      4. Synthetic events and the Virtual DOM
        1. The DOM
        2. The virtual DOM
        3. Synthetic event handlers
        4. Putting it all together
      5. Composition
      6. Developing with modern frontend tools
        1. Browserify
        2. Scaffolding our React app
        3. Running the app
      7. Summary
    10. 2. Creating a Web Shop
      1. An overview of the components
      2. Setting up a shop
        1. Creating the layout
        2. Adding your own CSS code
        3. Adding a route handler
        4. The menu and footer
        5. Creating the pages
        6. Creating a database of products
        7. Creating a data store to fetch the products
        8. Building the product's listing and the item page
        9. Creating a cart store
        10. Checking out
        11. Providing a receipt
      3. Summary
    11. 3. Responsive Web Development with ReactJS
      1. Creating a flexible layout
        1. Choosing the right framework
          1. Setting up your app with Bootstrap
            1. Creating a flexible grid
            2. Creating a responsive menu and navigation bar
            3. Creating responsive wells
            4. Creating responsive panels
            5. Creating responsive alerts
            6. Responsively embedded media and video content
            7. Creating responsive buttons
            8. Creating dynamic progress bars
            9. Creating fluid carousels
            10. Working with fluid images and the picture element
            11. Reducing your footprint
            12. Creating a Reactified picture element
            13. Creating responsive form fields
            14. Using Glyphicons and font-awesome icons
            15. Creating a responsive landing page
      2. Summary
    12. 4. Building a Real-Time Search App
      1. Creating your own search API
        1. Getting started with your API
        2. Creating the API
        3. Importing documents
        4. Querying the API
        5. Creating a wildcard search
        6. Securing your API
      2. Creating your ReactJS search app
        1. Setting up your app
        2. Creating a search service
          1. Testing the service
        3. Setting up the store
        4. Creating the search view
        5. Performing searches
        6. Navigating the search results with the arrow keys
        7. Debouncing the search
        8. Moving beyond the quick search to the results page
        9. Setting up the results page
        10. Setting up pagination
        11. Setting up endless scroll
      3. Summary
    13. 5. Creating a Map App with HTML5 APIs
      1. The state of HTML5 APIs
        1. The High Resolution Time API
        2. The Vibration API
        3. The Battery Status API
        4. The Page Visibility API
        5. The Geolocation API
      2. Creating our map app
        1. Setting up geolocation
        2. Showing static maps
        3. Creating an interactive map
      3. Summary
    14. 6. Advanced React
      1. A new bundling strategy
        1. How Browserify works
        2. How Webpack works
        3. A difficult choice – Browserify or Webpack
      2. Creating a new scaffold with Webpack
        1. The Babel configuration
        2. The Webpack configuration
        3. Adding assets
        4. Creating an Express server
        5. Adding ReactJS to the mix
        6. Starting the server
      3. Introducing Redux
        1. The global store
        2. Understanding actions
        3. Understanding reducers
        4. Installing Redux
      4. Creating a login app
        1. Creating an action
        2. Creating a reducer
        3. Creating a store
        4. Adding devtools
        5. Tying the files together
        6. Handling refresh
      5. The Login API
      6. Summary
    15. 7. Reactagram
      1. Getting started
      2. Setting up the routes
      3. Creating a higher order function
      4. Creating a random username
      5. Creating a welcome screen
      6. Taking a picture
      7. Adding filters
      8. Adding the stream
      9. Creating an item page and adding comments
      10. Wrapping up
      11. Summary
    16. 8. Deploying Your App to the Cloud
      1. Choosing a cloud provider
      2. Setting up cloud deployment with npm
      3. Preparing your Browserify app for cloud deployment
        1. The actual process
      4. Deploying a Webpack app to the cloud
      5. Summary
    17. 9. Creating a Shared App
      1. Server rendering versus client rendering
      2. Terminology confusion
      3. Developing a server-rendered app
        1. Adding packages
        2. Adding CSS
        3. Adding Bootstrap CDN to index.html
        4. Creating components
        5. Setting up a server-rendered Express React server
        6. Setting up Webpack for server-rendering
        7. Setting up npm scripts for server rendering
      4. Adding Redux to your server-rendered app
        1. Adding packages
        2. Adding files
        3. Adding server rendering
        4. Performing faster cloud deployment
      5. The final structure
      6. Summary
    18. 10. Making a Game
      1. The optimal Webpack configuration
        1. Scripting with ShellJS
        2. Static typechecking with Flow
      2. Creating an HTML5 canvas engine
      3. Creating the game
        1. Responding to keyboard events
      4. Further improvements
      5. Summary
    19. Index
13.58.121.131