Material-UI with React

Learn to apply Google Material Design with React using Material-UI library
$40.00
Course Videos

41 lessons

FREE VIDEOS
Module 01: Introduction
Learn about this course
01:39

01. Agenda
00:31

02. What are the Pre-requisites for this course?
00:22

03. What is covered in course?
01:00

04. What is not covered in this course?
00:24

05. About Author
00:36

06. Why Material-UI?
00:47

07. Why Material-UI continued? (04:29)
04:29

08. Project Setup
04:29

09. Summary
00:25

Module 02: Concepts And Syntax
01. Agenda
00:25

02. Quick Overview of ES6 Syntax
06:28

03. What is CSS-In-JS?
03:12

04. What is Material-UI Grid?
04:27

05. Summary
00:23

Module 03: Get Started With Stratafly
01. Agenda
00:20

02. Build Stratafly Header
07:37

03. Set Up Material Theme
06:29

04. Develop TripType And Traveller Components Part I
06:00

05. Develop TripType And Traveller Components Part II
04:31

06. Develop Location And Date Components
06:45

07. Develop Empty Results Component
01:29

08. Summary
00:23

Module 04: Search Results And Travellers Count
01. Agenda
00:24

02. Develop SearchResults Component
10:34

03. Develop TravellerDialog Component
09:06

04. Introduction To Flights Data Set
01:46

05. Summary
00:28

Module 05: Add State And Search Capabilities
01. Agenda
00:16

02. Implement Flight Search
03:40

03. Add State To SearchForm Component
04:43

04. Add Actions To TravellerDialog Component
06:15

05. Summary
00:28

Module 06: Select And Review Flights!
01. Agenda
00:26

02. Develop ReviewSelection Component
06:46

03. Develop ReviewSelection Component PartII
06:13

04. Develop ReturnFlights Component
03:36

05. Summary
00:23

Module 07: Flight Payment And Confirmation
01. Agenda
00:20

02. Develop And Integrate Payment Component
06:25

03. Develop And Integrate Confirmation Component
03:26

04. Summary
00:53

Olivier Tassinari

"bonsaiilabs's course on Material-UI is a great way to get started ✨. Learn all the key concepts and how to apply them in practice."

- Olivier Tassinari, Co-founder at Material-UI

Overview

React is the most popular JavaScript framework for developing user interfaces with over 21 million downloads per month from npm. With companies like Uber, Facebook, Airbnb and many others using React, it is a solid choice to invest in learning

But, how do you make beautiful user interfaces with React? How do you make websites that follow consistent theme, buttons, typography, inputs among other important elements? This is where React leaves a lot of room for other frameworks to fill.

Material-UI is an excellent framework to develop beautiful React components faster! You can start with Google Material Design out of the box or create your own design system. This course teaches the fundamentals of Google Material Design and how to develop an end-to-end flight search and booking application using Material-UI and React.

You will be able to showcase this project in your portfolio and to your prospective employers

What you will learn

Creating a custom material theme from scratch

Working knowledge of theme, typography, and Grid System

Working knowledge of Material-UI Components from defaults to complete customisation

Developing a project from scratch to a complete product ready to be deployed

Hands-On programming of Stateless and Stateful React Components

Fundamentals of Google Material Design

Overview of ES6 features

Prerequisites

- You must know to read and write React JS

100% online
Work at your pace and schedule.
Intermediate Level
2h 10m
Course Duration
Includes

Course support via private Slack Channel

Lifetime Access

Hands-On Project

Source Code

Free Future Course Updates

WHAT LEARNERS SAY

A combination of React with Material UI with a good project is rare. and I found this course very useful to learn Material UI and also how to think and apply the logic while building a product. Overall a great course, Explanation was very clear and concise.

- Vikneshwaran JK