Learning React.js User Interfaces [Video]

Learning React.js User Interfaces [Video]

This video is included in a Mapt subscription
Ben Fhala

Create dynamic and animated user interfaces with React
$106.25
RRP $124.99
Subscribe and access every Packt eBook & Video.
 
  • 4,000+ eBooks & Videos
  • 40+ New titles a month
  • 1 Free eBook/Video to keep every month
Find out moreStart 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