React Recipes

Collection of React and Next.js recipes and learnings. All recipes in TypeScript unless denoted otherwise.

React

• Basic React project - Basic react (typescript) project using CRA.
• Basic React (JavaScript) project - Basic react (javascript) project using CRA.
• Form handling - React form handling.
• Hooks - React built-in hooks: useState, useReducer, useEffect, useContext.
• Props - Passing props to React components.
• Routing - Simple routing using react-router-dom.
• Webpack - Bundle React (typescript) app in webpack for deployment.

React Bootstrap

• Basic React-Bootstrap project - Basic react project with Bootstrap.

Next.js

• Data fetching - Basic next.js data fetching patterns.
• Basic Next.js - Basic next.js project.
• Basic Next.js (App dir) - Basic next.js project using app directory programming model.
• Docker - Dockerize a next.js project.
• Form editor - A more complex form that performs the editing of data.
• Material-UI project - Simple next.js project using material-ui for server-side rending (SSR).
• CustomModal dialog - Simple next.js modal dialgo.
• NextAuth project - For authentication workflow using next-auth.
• Routing - Simple routing in next.js.
• Storybook - Integrate storybook to a next.js project for component-oriented development.
• SWR - The use of useSWR hook to retrieve data.
• Table - Simple NextUI table with edit function.
• Tailwind - Collection of tailwind recipes.
  • Colors - Palette of tailwind colors *-color-*.
  • Theme - Example of switching between dark and light themes in next.js.
  • Widths & Heights - A sample of different widths and heights using tailwind classes w-* and h-*.
• Testing - Testing in next.js.
  • Component testing: cypress - Component testing with cypress.
  • E2E testing: cypress - End-to-end testing with cypress.

Reference

• React: Learn
• React: Reference