sergiodxa

import { index, prefix, route } from "@react-router/dev/routes";
import { camelize, pluralize, singularize } from "inflected";

function createCrud(base = "./views") {
	/**
	 * Create a CRUD route configuration.
	 * @param name The name of the resource. It will be pluralized for the path.
	 * @param options The options for the crud.
	 * @param options.member Extra routes to add to each member.
	 * @param options.collection Extra routes to add to the collection.

gaearon

Next.js client-only SPA example

Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.

You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.

You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)

Don't like Next? Here's how to do the same in Gatsby.

JohnPhamous

export const chaosTestStrings = (): void => {
  const textNodes = getAllTextNodes(document.body);

  for (const node of textNodes) {
    const textNodeLength = node.textContent ? node.textContent.length : 0;
    if (node.textContent === null) {
      return;
    }
    if (node.parentElement instanceof Element) {
      if (node.parentElement.dataset.originalText === undefined) {

antfu

Example

Name Description

tannerlinsley

export default function createCrudHooks({
  baseKey,
  indexFn,
  singleFn,
  createFn,
  updateFn,
  deleteFn,
}) {
  const useIndex = (config) => useQuery([baseKey], indexFn, config)
  const useSingle = (id, config) =>

luistak

1. Install Testing library packages and types

yarn add --dev @testing-library/jest-dom @types/testing-library__jest-dom @testing-library/react @testing-library/user-event

2. Create setupTests.ts file at /src with this content:

import '@testing-library/jest-dom/extend-expect';

3. Add jest dom sixteen

iamthesiz

import { PusherProvider } from '@harelpls/use-pusher'

// _app.js
const config = {
  clientKey: 'your-pusher-client-key',
  cluster: 'us2',
  // required for private/presence channels
  authEndpoint: '/api/pusher/auth'
}
const App = ({ Component, pageProps }) => (

tannerlinsley

Replacing Create React App with the Next.js CLI

How dare you make a jab at Create React App!?

Firstly, Create React App is good. But it's a very rigid CLI, primarily designed for projects that require very little to no configuration. This makes it great for beginners and simple projects but unfortunately, this means that it's pretty non-extensible. Despite the involvement from big names and a ton of great devs, it has left me wanting a much better developer experience with a lot more polish when it comes to hot reloading, babel configuration, webpack configuration, etc. It's definitely simple and good, but not amazing.

Now, compare that experience to Next.js which for starters has a much larger team behind it provided by a world-class company (Vercel) who are all financially dedicated to making it the best DX you could imagine to build any React application. Next.js is the 💣-diggity. It has amazing docs, great support, can grow with your requirements into SSR or static site generation, etc.

So why

emmabostian

HTML
- Semantic HTML
- Event delegation
- Accessibility / ARIA

CSS
- Specificity
- Pseudo-elements
- Pseudo-selectors
- Combinators

emmabostian

Data Structures
- Stacks
- Queues
- Linked lists
- Graphs
- Trees
- Tries

Concepts
- Big O Notation