In this course you learn how to use MUI components in your React applications

Last update: Jul 25, 2022

React + MUI

In this course you learn how to use MUI components in your React applications. But, what is MUI?

MUI offers a comprehensive suite of UI tools to help you ship new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.

JSON Server

I used a json server to store data in a json file. The structure of how to use the json server is like this:

npx json-server --watch <path> --port <port>

Like:

npx json-server --watch data/db.json --port 8000

API

When we setup a json server, we need to use some methods to fetch data or post some data to it.

I usually use Axios. If you want to learn about Axios, check out this course about React + Axios.

Application

This is a TODO manager that I focused in MUI. Layout in web and mobile is different. How?

In web, we have a drawer like this:

Web tasks

But, in mobile, Drawer will be hide and a bottom navigation will be show!

Mobile tasks

Where we add task is a page you can see on the left side, if you go to the page, layout will be like this:

Web add

Layout in mobile has no differences with web.

Mobile add

GitHub

https://github.com/BlackIQ/react-mui-tutorial
You might also like...

CLI, Local API and Local client for React and Typescript: Build a Portfolio Project course.

­čÜÇ JBook (CLI, Local API, Local Client) Complete project of React and Typescript: Build a Portfolio Project course. You can find the whole repo at Git

Oct 30, 2021

The starter code for the final assessment project for Udacity's React & Redux course

Employee Polls Project This is the starter code for the final assessment project

Jul 27, 2022

A Next.js boilerplate to be used in a course called React Avan├žado

This is a Next.js boilerplate to be used in a course called React Avan├žado. What is inside? This project uses lot of stuff as: TypeScript NextJS Style

Jul 24, 2022

This project is my ReactJS course on Udemy.com

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Jan 6, 2022

Next course starter

next-course-starter A NextJS starter to get you started creating educational materials using Markdown Get Started Set up Node.js v14+ Clone this repo

Jul 11, 2022

This project is designed to help those who use antd to develop a website(or web app). Maybe also need to use redux, router and so on.

This project is designed to help those who use antd to develop a website(or web app). Maybe also need to use redux, router and so on.

react-antd-redux-router-starter This project is designed to help those who use antd to develop a website(or web app). Maybe also need to use redux, ro

Apr 13, 2022

An example of how you can use Tailwind UI and React with Deno

Deno Tailwind UI React example I built this example application to show how you can use Tailwind UI and React with Deno. The navigation bar is from Ta

May 16, 2022

Brownie-next-mix - Everything you need to use NextJS with Brownie

Brownie NextJS Mix This mix comes with everything you need to start using NextJS

Jun 20, 2022

Free-from-jsx.macro - Babel macro that allows you to use a flutter like render syntax

Free-from-jsx.macro - Babel macro that allows you to use a flutter like render syntax

Jul 7, 2022
Comments
  • 1. Bump terser from 5.14.1 to 5.14.2

    Bumps terser from 5.14.1 to 5.14.2.

    Changelog

    Sourced from terser's changelog.

    v5.14.2

    • Security fix for RegExps that should not be evaluated (regexp DDOS)
    • Source maps improvements (#1211)
    • Performance improvements in long property access evaluation (#1213)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-07-21 06:57
Create awesome courses that let your audience learn by coding
Create awesome courses that let your audience learn by coding

Create awesome courses that let your audience learn by coding. Why? As a developer, to learn a new software technology, we mostly start reading a docu

Jul 30, 2022
­čą»Papanasi is the Frontend UI library to use cross Frameworks. A set of components to use in Angular, React, Solid, Svelte, Vue and Web Components

?? Papanasi is a UI library to use cross Frameworks. A set of components to use in Angular, React, Solid, Svelte, Vue and Web Components. Is based on the Mitosis library and documented using Storybook.

Jul 28, 2022
Visualize your React components as you interact with your application.
Visualize your React components as you interact with your application.

Visualize your React components as you interact with your application. Setup Install React Scope from Chrome web store. (Important) Install React Deve

Jul 23, 2022
Jul 28, 2022
Airbnb-React - In this project, An Airbnb experience page clone is created to learn and implement React props concepts.
Airbnb-React - In this project, An Airbnb experience page clone is created to learn and implement React props concepts.

Create React Airbnb App In this project An airbnb experience page clone is created to learn and implement React props concepts. Objectives Learn about

Jun 28, 2022
­čôÜ Learn React + Redux by building a SoundCloud Client. Full tutorial included. Source Code for main tutorial but also extensions included.

react-redux-soundcloud I wrote a huge tutorial about setting up your own SoundCloud Client in React + Redux. Additonally you can find a real world exa

Jul 16, 2022
Aug 3, 2022
In this React JS course, create-react-app was used to create the project using typescript as the standard language for development

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Jul 1, 2022
Code snapshots and materials for our "React - The Complete Guide" course
Code snapshots and materials for our

Code snapshots and materials for our "React - The Complete Guide" course

Aug 2, 2022
spring springMVC Hadoop HBase React AntUI course manage system

CourseManageService SpringŃÇüSpringMVC + Hasdoop HBase Course Manage System Quick Start 1 change your hBase service adress:site.linkway.core.dao.HbaseUt

Nov 6, 2021