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

Overview

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

Comments
  • Bump loader-utils from 2.0.2 to 2.0.3

    Bump loader-utils from 2.0.2 to 2.0.3

    Bumps loader-utils from 2.0.2 to 2.0.3.

    Release notes

    Sourced from loader-utils's releases.

    v2.0.3

    2.0.3 (2022-10-20)

    Bug Fixes

    • security: prototype pollution exploit (#217) (a93cf6f)
    Changelog

    Sourced from loader-utils's changelog.

    2.0.3 (2022-10-20)

    Bug Fixes

    • security: prototype pollution exploit (#217) (a93cf6f)
    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.

    dependencies 
    opened by dependabot[bot] 1
  • Bump decode-uri-component from 0.2.0 to 0.2.2

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    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.

    dependencies 
    opened by dependabot[bot] 0
  • Bump loader-utils from 2.0.2 to 2.0.4

    Bump loader-utils from 2.0.2 to 2.0.4

    Bumps loader-utils from 2.0.2 to 2.0.4.

    Release notes

    Sourced from loader-utils's releases.

    v2.0.4

    2.0.4 (2022-11-11)

    Bug Fixes

    v2.0.3

    2.0.3 (2022-10-20)

    Bug Fixes

    • security: prototype pollution exploit (#217) (a93cf6f)
    Changelog

    Sourced from loader-utils's changelog.

    2.0.4 (2022-11-11)

    Bug Fixes

    2.0.3 (2022-10-20)

    Bug Fixes

    • security: prototype pollution exploit (#217) (a93cf6f)
    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.

    dependencies 
    opened by dependabot[bot] 0
  • Bump minimatch and recursive-readdir

    Bump minimatch and recursive-readdir

    Bumps minimatch and recursive-readdir. These dependencies needed to be updated together. Updates minimatch from 3.0.4 to 3.1.2

    Commits

    Updates recursive-readdir from 2.2.2 to 2.2.3

    Changelog

    Sourced from recursive-readdir's changelog.

    v2.2.3 - Mon, 19 Sep 2016 21:55:22 GMT

    v2.1.0 - Mon, 19 Sep 2016 21:55:22 GMT

    v2.0.0 - Wed, 06 Apr 2016 04:31:02 GMT

    v1.3.0 - Wed, 14 Oct 2015 14:35:55 GMT

    v1.2.1 - Wed, 14 Jan 2015 16:49:55 GMT

    Commits
    Maintainer changes

    This version was pushed to npm by bnb, a new releaser for recursive-readdir since your current version.


    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.

    dependencies 
    opened by dependabot[bot] 0
  • Bump terser from 5.14.1 to 5.14.2

    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.

    dependencies 
    opened by dependabot[bot] 0
Owner
AmirHossein Mohammadi
Software developer at Narbon., CEO at @tfasoft.
AmirHossein Mohammadi
In this tutorial, you'll learn to develop a wallet for the Solana protocol.

Wallet Tutorial In this tutorial, you'll learn to develop a wallet for the Solana protocol. We will provide a simple Next.js application that you will

Ian De Guzman 1 May 3, 2022
The complete type-safe MUI and react-hook-form combo and beyond with simple API

The complete type-safe MUI and react-hook-form combo and beyond with simple API

Adiat Hasan 45 Dec 24, 2022
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

Enes 239 Dec 13, 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.

Quique Fdez Guerra 387 Jan 4, 2023
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

React Scope 315 Nov 18, 2022
winwiz1 157 Dec 28, 2022
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

Yogesh Gurjar 4 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

Robin Wieruch 282 Oct 16, 2022
A powerful resource to learn React Redux Toolkit Typescript.

React Redux Toolkit Typescript Tác giả Dư Thanh Được Website: duthanhduoc.com Youtube: Được Dev Facebook Profile: Dư Thanh Được Fanpage: Được Dev Tikt

Dư Thanh Được 11 Dec 27, 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

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

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

Academind 4.5k Dec 27, 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

 Wanlu 2 Nov 6, 2021
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

Mustafa Hayati 0 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

Hilmi Erdem KEREN 3 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

React Avançado 456 Dec 19, 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

Le Chanh Nhut 4 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

Brian Holt 35 Dec 24, 2022
Braian D. Vaylet 17 Oct 22, 2022
Nextacular 19 Dec 1, 2022