• No products in the cart.

Create dynamic and animated user interfaces with React.

Course 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 step-by-step 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.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.

Learning Outcomes

  • Understand hot reloading to update pages as a result of interface interaction
  • Create different UI components for your sites such as buttons and jumbotrons
  • 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


In order to take this course, you should have some familiarity with React, Node.js, and NPM. You should also have a good knowledge of JavaScript.

Who is this course intended for?

This course can either be taken as a modular part of Packt’s complete Full-Stack React course or as a standalone module.

Your Instructor

Packt Publishing

Packt has been committed to developer learning since 2004. A lot has changed in software since then – but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content – more than 4000 books and video courses -Packt’s mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages to cutting-edge data analytics, and DevOps, Packt takes software professionals in every field to what’s important to them now.

From skills that will help you to develop and future-proof your career to immediate solutions to everyday tech challenges, Packt is a go-to resource to make you a better, smarter developer.


Course Curriculum

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

Course Reviews


  • 5 stars0
  • 4 stars0
  • 3 stars0
  • 2 stars0
  • 1 stars0

No Reviews found for this course.

  • $99.00 $10.00
  • Course Certificate

    Related Courses

    © Learnsector