English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 3h 16m | 0.98 GB
Create dynamic and animated user interfaces with React
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.
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
Table of Contents
01 Setting Up our Foundation Project
02 Setting up Webpack and WebPack-Dev-Server
03 Bootstrapping our HTML
04 Hot Reloading with WebPack-Dev-Server
05 Adding Support for ES6 and JSX with Babel
06 Building our First JSX React Component
07 Creating an ES6 React Component
08 Building a Reusable Bootstrap React Button
09 Creating Dynamic JSX Tags
10 Understanding JSX Spread in Depth
11 Adding Features to Our Button Component
12 Making Disabled Tags Work
13 Creating Reusable Utilities
14 Creating the Jumbotron Component
15 Building a Reusable Container Class
16 Removing Unknown Props from HTML
17 Completing Our Jumbotron with a Dynamic Fluid Child
18 Dynamically building CSS files with Webpack
19 Creating SASS Variables
20 Importing SCSS Files with Webpack
21 Introducing SCSS Mixins
22 Animating in React with Add-ons
23 Choosing Between Children and Props
24 Working with Events in React
25 Understanding How State Works
26 Animating Children with ReactCSSTransitionGroup
27 Leaving Animations with SASS Nesting
Resolve the captcha to access the links!