Learn - React Material UI

This is the forth installment of a seven-part series designed to improve your React development skills. This project focuses on integrating material UI in React application.

Getting Started with the Application

Follow these instructions to get the application running:

1. Install Node.js version 14.21.3:
   • nvm install v14.21.3
   • nvm use v14.21.3
2. Install necessary packages:
   • npm install
3. Start the application:
   • To run the project : npm start
   • To run json-server : json-server --watch data/notes.json --port 8080

Roadmap

• Install Material UI Components: Run npm install @material-ui/core.
• Create Boilerplate: Set up routing and basic pages.
• Custom Colors: Create and apply a new theme.
• Create Notes Page: Develop the form and implement form validation.
• CRUD Operations with Axios:
  • Use GET to fetch data from a json-server API and display it.
  • Use POST to submit form data to the json-server database (stored in a json file in the data folder).
• Advanced makeStyles:
  • Learn to integrate JavaScript with makeStyles.
  • Learn to incorporate theme values into makeStyles.
• Add Website Layout: Include a side drawer and app bar.
• Table Manipulation: Learn to manage tables with Material-UI Tables.
• Transfer List Content: Implement content management with a Transfer List component.
• Form Validation: Implement form validation using Formik.
• Theme Options: Toggle between light and dark modes.

Dependencies

• @material-ui/core: For Material-UI components.
• @material-ui/icons: For Material-UI icons.
• react-router-dom: For page routing.
• json-server: To perform basic CRUD operations using a JSON database.
• axios: For API requests.
• date-fns: For formatting dates and times.
• react-masonry-css: For a simple interface to organize items into columns at specified breakpoints.
• classnames: To apply multiple classes to Material-UI components.

Resources

1. NetNinja Material UI
2. Material UI documentation

React Learning Series

This project is part of a comprehensive React learning series:

1. React Application for User Listing
2. Hooks in React
3. State Management in React
4. Material-UI in React (this repository)
5. Redux in React
6. Optimizing React Apps
7. Building a Burger Builder App in React