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 Path: React: Make Stunning React Websites

Video Description

Create attractive React user interfaces with pretty-looking visualizations

In Detail

Every great website needs a great user interface, and without one, your users will soon leave. The React stack is the perfect tool to create modern dynamic interfaces. It is also capable of rendering data reactively on the web, enabling users to interact with it and see the results in real time.

This Learning Path covers the practical skills needed to make great interface components that incorporate other web development tools, such as Bootstrap, SASS, and hot reloading. It will then show you how to ingest your data and display it on the web using a variety of techniques, such as charts and grids. It will run through the logic process, meaning that you will be able to take these skills and apply them in your own projects.

Beautify your React websites by leveraging the skills this Learning Path promises to deliver.

Prerequisites: Requires working knowledge of ReactJS and some experience with building React websites.

Resources: Code downloads and errata:

  • Learning React.js User Interfaces

  • https://www.packtpub.com/books/content/support/27560

  • PATH PRODUCTS

    This path navigates across the following products (in sequential order):

  • Learning React.js User Interfaces (3h 16m)

  • Learning React.js Data Visualization (3h 5m)

  • Table of Contents

    1. Chapter 1 : Learning React.js User Interfaces
      1. Setting Up our Foundation Project 00:14:26
      2. Setting up Webpack and WebPack-Dev-Server 00:08:12
      3. Bootstrapping our HTML 00:07:20
      4. Hot Reloading with WebPack-Dev-Server 00:05:20
      5. Adding Support for ES6 and JSX with Babel 00:10:46
      6. Building our First JSX React Component 00:13:38
      7. Creating an ES6 React Component 00:07:20
      8. Building a Reusable Bootstrap React Button 00:10:15
      9. Creating Dynamic JSX Tags 00:04:05
      10. Understanding JSX Spread in Depth 00:04:55
      11. Adding Features to Our Button Component 00:07:33
      12. Making Disabled Tags Work 00:03:05
      13. Creating Reusable Utilities 00:04:55
      14. Creating the Jumbotron Component 00:05:27
      15. Building a Reusable Container Class 00:09:25
      16. Removing Unknown Props from HTML 00:04:23
      17. Completing Our Jumbotron with a Dynamic Fluid Child 00:05:14
      18. Dynamically building CSS files with Webpack 00:10:07
      19. Creating SASS Variables 00:05:49
      20. Importing SCSS Files with Webpack 00:11:34
      21. Introducing SCSS Mixins 00:07:37
      22. Animating in React with Add-ons 00:06:30
      23. Choosing Between Children and Props 00:03:28
      24. Working with Events in React 00:04:56
      25. Understanding How State Works 00:03:39
      26. Animating Children with ReactCSSTransitionGroup 00:08:47
      27. Leaving Animations with SASS Nesting 00:07:38
    2. Chapter 2 : Learning React.js Data Visualization
      1. Overview and Setting Things Up 00:08:53
      2. Overview of JSON Basics 00:06:03
      3. Importing JSON Files with webpack 00:05:51
      4. Building ES6 React Classes 00:11:56
      5. Integrating JSON into React Components 00:06:13
      6. Creating a Map 00:04:46
      7. Finding Points on a Map 00:08:19
      8. Calculating a Map's Latitude and Longitude 00:05:24
      9. Using ES6 String Templates 00:05:19
      10. Connecting to the Web Service 00:05:09
      11. Changing a Component's State 00:07:28
      12. Reviewing package.json and webpack Configurations 00:10:06
      13. Modifying Style Attributes in React 00:05:11
      14. Preparing the Chart Data Object 00:07:21
      15. Creating a Bar Chart with ChartJS 00:08:09
      16. Formatting Data 00:12:37
      17. Creating Utility Modules 00:07:45
      18. Adding Random Colors 00:05:04
      19. Cleaning Up Memory Leaks 00:08:33
      20. Diving Deep into Properties 00:08:34
      21. Exploring the Options in ChartJS 00:04:02
      22. MongoD Versus Mongo 00:04:32
      23. Database, Collection, and Document 00:07:29
      24. Preparing Our Data for MongoDB 00:05:56
      25. Setting Up NodeJS with Express and MongoJS 00:09:40
      26. Creating a Radar Chart with MongoDB 00:05:41