abbassizied / crud-rtk-react-with-ts-app

README

• 🔥🔥 React TypeScript Cheatsheets
• date-fns
• date-fns - modern JavaScript date utility library
• Reactjs: Using same form for add and update
• TypeScript Date (With Examples)
• React material UI form validation using error and helperText
• How to Sort Array of Objects In Typescript
• How to Create a Reusable React Form component
• How to make forms reusable and dynamic in React
• Use immer to drive state with a React hooks
• The Ultimate Guide to MUI TextField onChange with TypeScript
• Add or remove input fields dynamically with ReactJS
• Zod – A user input validation library for both frontend and backend.
• React Hook Form – A library for validating React forms
• The simple images uploader applied Render Props patter
• Multiple Image Upload In ReactJS
• Material UI Image Upload example with Preview, Axios & Progress Bar
• 🔥How to enable file upload on React's Material UI simple input?
• X - NotForMui - React input file component with images preview
• X - NotForMui - A proof of concept for: https://github.com/JakeHartnell/react-images-upload
• 🔥 A Material-UI File Upload Dropzone For React
• material-ui-dropzone
• 🔥🔥🔥🔥 React, RTK Query, React Hook Form and Material UI – Image Upload
• 🔥🔥🔥🔥 how to use file upload in react mui 5
• How to Create React Multiple File Upload using NextJS and Typescript
• Redux Toolkit
• Using Redux Toolkit - Usage With TypeScript
• How To Sort an Array of Objects by Date in TypeScript
• 🔥🔥 React.JS Typescript with ReduxToolkit CRUD Sample
• 🔥🔥 ASP.NET Core Web API with Angular Basic CRUD (Create-Read-Update-Delete) Operations
• 🔥🔥 RTK Query Examples
• 🔥🔥🔥🔥🔥🔥 React CRUD example with Redux Toolkit, RTK Query & REST API
• React Post Data with Redux Toolkit RTK Query Tutorial

Keeping Server-Only Code out of Client Components (Poisoning)

• The "server only" package: use this package to mark modules that contain server-only code and to receive a build-time error explaining that this module can only be used on the server.

npm install server-only // To prevent unintended client usage of server code 

// Then
import 'server-only'

• The "client only" package: use this package to mark modules that contain client-only code and to receive a build-time error explaining that this module can only be used on the client.

npm install client-only // To prevent unintended server usage of client code 

// Then
import 'client-only'

Suspense

import { Suspense } from 'react'

<Suspense fallback={<p>Loading ...</p>}>
 // *******        
</Suspense>

Uncontrolled vs. Controlled

• The component can be controlled or uncontrolled.
  • A component is controlled when it's managed by its parent using props.
  • A component is uncontrolled when it's managed by its own local state.

🌈 Tech Stack

• TypeScript
• React
• Jest with React Testing Library for the unit tests
• Cypress for the end-to-end tests

🔀 Related information

Feel free to check it out and star the repo! 🌟😊🙌