Learning React.js User Interfaces [Video]

Learning React.js User Interfaces [Video]

Ben Fhala

Create dynamic and animated user interfaces with React
Mapt Subscription
FREE
$29.99/m after trial
Video
$106.25
RRP $124.99
Save 14%
What do I get with a Mapt Pro subscription?
  • Unlimited access to all Packt’s 5,000+ eBooks and Videos
  • Early Access content, Progress Tracking, and Assessments
  • 1 Free eBook or Video to download and keep every month after trial
What do I get with an eBook?
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with Print & eBook?
  • Get a paperback copy of the book delivered to you
  • Download this book in EPUB, PDF, MOBI formats
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
What do I get with a Video?
  • Download this Video course in MP4 format
  • DRM FREE - read and interact with your content when you want, where you want, and how you want
  • Access this title in the Mapt reader
$0.00
$106.25
$29.99p/m after trial
RRP $124.99
Subscription
Video
Start 30 Day Trial
Subscribe and access every Packt eBook & Video.
 
  • 5,000+ eBooks & Videos
  • 50+ New titles a month
  • 1 Free eBook/Video to keep every month
Start Free Trial
 
Preview in Mapt

Video Details

ISBN 139781787281608
Course Length3 hours 16 Minutes

Video Description

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 amazing modern dynamic interfaces, and this course will take you stepbystep through how to build them. You will learn the practical skills needed to make great interface components that incorporate other web development tools, such as Bootstrap, SASS, and hot reloading. React is an incredibly popular part of modern full stack web development, and is a keystone of fluid SPAs (single page applications). As part of a full stack, it all you need to create full web applications.

The course begins by ensuring you have a solid understanding of Bootstrap and JSX, so you can create React components that can automatically refresh, enabling fully dynamic interfaces. We then introduce ES6 into the mix, showing you how the latest web technologies can be used to make your user interfaces even better. Next, you will see how to integrate and componentize CSS into React using SASS, enabling you to style your components using web standard techniques. Finally, we will dive into animation, and you’ll understand states and events to create reactive user interface components.

Style and Approach

This very carefully modulated course will take you every step of the way through building modern user interface components using React. It is a thorough and methodical course, not skipping over technologies or assuming knowledge. It is also a very practical course, full of examples of the technologies used along the way.

Table of Contents

Bootstrapping React
Setting Up our Foundation Project
Setting up Webpack and WebPack-Dev-Server
Bootstrapping our HTML
Hot Reloading with WebPack-Dev-Server
Adding Support for ES6 and JSX with Babel
Building our First JSX React Component
Building ES6 React Components
Creating an ES6 React Component
Building a Reusable Bootstrap React Button
Creating Dynamic JSX Tags
Understanding JSX Spread in Depth
Adding Features to Our Button Component
Making Disabled Tags Work
Creating a Jumbotron React Component
Creating Reusable Utilities
Creating the Jumbotron Component
Building a Reusable Container Class
Removing Unknown Props from HTML
Completing Our Jumbotron with a Dynamic Fluid Child
SASS
Dynamically building CSS files with Webpack
Creating SASS Variables
Importing SCSS Files with Webpack
Introducing SCSS Mixins
Animating React Components
Animating in React with Add-ons
Choosing Between Children and Props
Working with Events in React
Understanding How State Works
Animating Children with ReactCSSTransitionGroup
Leaving Animations with SASS Nesting

What You Will Learn

  • Understand hot reloading to update pages as a result of interface interaction
  • Create different UI components for your sites such as buttons andjumbotrons
  • Create button components using Bootstrap 4.0
  • Explore deeper integrations with JSX and ES6 to create reusable components
  • Understand the importance of componentizing our HTML into JavaScript
  • Find out how to animate React components

Authors

Table of Contents

Bootstrapping React
Setting Up our Foundation Project
Setting up Webpack and WebPack-Dev-Server
Bootstrapping our HTML
Hot Reloading with WebPack-Dev-Server
Adding Support for ES6 and JSX with Babel
Building our First JSX React Component
Building ES6 React Components
Creating an ES6 React Component
Building a Reusable Bootstrap React Button
Creating Dynamic JSX Tags
Understanding JSX Spread in Depth
Adding Features to Our Button Component
Making Disabled Tags Work
Creating a Jumbotron React Component
Creating Reusable Utilities
Creating the Jumbotron Component
Building a Reusable Container Class
Removing Unknown Props from HTML
Completing Our Jumbotron with a Dynamic Fluid Child
SASS
Dynamically building CSS files with Webpack
Creating SASS Variables
Importing SCSS Files with Webpack
Introducing SCSS Mixins
Animating React Components
Animating in React with Add-ons
Choosing Between Children and Props
Working with Events in React
Understanding How State Works
Animating Children with ReactCSSTransitionGroup
Leaving Animations with SASS Nesting

Video Details

ISBN 139781787281608
Course Length3 hours 16 Minutes
Read More

Read More Reviews

Recommended for You

Learning React.js with Flux [Video] Book Cover
Learning React.js with Flux [Video]
$ 124.99
$ 106.25
Learning React.js Scalable and High-Performance Apps [Video] Book Cover
Learning React.js Scalable and High-Performance Apps [Video]
$ 124.99
$ 106.25
Learning React.js Data Visualization [Video] Book Cover
Learning React.js Data Visualization [Video]
$ 70.99
$ 60.35
Learning ReactJS [Video] Book Cover
Learning ReactJS [Video]
$ 84.99
$ 72.25
Mastering ReactJS [Video] Book Cover
Mastering ReactJS [Video]
$ 94.99
$ 80.75
React.js Essentials Book Cover
React.js Essentials
$ 23.99
$ 16.80