Material-UI with React
Learn to apply Google Material Design with React using Material-UI library
$40.00
$25.00
Course Videos
41 lessons
Module 01: Introduction
Learn about this course
01. Agenda
02. What are the Pre-requisites for this course?
03. What is covered in course?
04. What is not covered in this course?
05. About Author
06. Why Material-UI?
07. Why Material-UI continued? (04:29)
08. Project Setup
09. Summary
Module 02: Concepts And Syntax
01. Agenda
02. Quick Overview of ES6 Syntax
03. What is CSS-In-JS?
04. What is Material-UI Grid?
05. Summary
Module 03: Get Started With Stratafly
01. Agenda
02. Build Stratafly Header
03. Set Up Material Theme
04. Develop TripType And Traveller Components Part I
05. Develop TripType And Traveller Components Part II
06. Develop Location And Date Components
07. Develop Empty Results Component
08. Summary
Module 04: Search Results And Travellers Count
01. Agenda
02. Develop SearchResults Component
03. Develop TravellerDialog Component
04. Introduction To Flights Data Set
05. Summary
Module 05: Add State And Search Capabilities
01. Agenda
02. Implement Flight Search
03. Add State To SearchForm Component
04. Add Actions To TravellerDialog Component
05. Summary
Module 06: Select And Review Flights!
01. Agenda
02. Develop ReviewSelection Component
03. Develop ReviewSelection Component PartII
04. Develop ReturnFlights Component
05. Summary
Module 07: Flight Payment And Confirmation
01. Agenda
02. Develop And Integrate Payment Component
03. Develop And Integrate Confirmation Component
04. Summary
"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
Intermediate Level
2h 10m
Includes
Course support via private Slack Channel
Lifetime Access
Hands-On Project
Source Code
Free Future Course Updates
WHAT LEARNERS SAY
Great way to learn about material-ui and react.