dan gaearon

## 00-README-NEXT-SPA.md

      
              5 files
            
          
              42 forks
            
          
              28 comments
            
          
              454 stars
            
          
                gaearon
                / 00-README-NEXT-SPA.md
            
            
              Last active
              September 8, 2024 07:57
            
              
                Next.js SPA example with dynamic client-only routing and static hosting
              
          
    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.


## modern_js.md

      
              1 file
            
          
              130 forks
            
          
              245 comments
            
          
              1276 stars
            
          
                gaearon
                / modern_js.md
            
            
              Last active
              August 22, 2024 22:11
            
              
                Modern JavaScript in React Documentation
              
          
    If you haven’t worked with JavaScript in the last few years, these three points should give you enough knowledge to feel comfortable reading the React documentation:

We define variables with let and const statements. For the purposes of the React documentation, you can consider them equivalent to var.
We use the class keyword to define JavaScript classes. There are two things worth remembering about them. Firstly, unlike with objects, you don't need to put commas between class method definitions. Secondly, unlike many other languages with classes, in JavaScript the value of this in a method [depends on how it is called](https://developer.mozilla.org/en-US/docs/Web/Jav


## uselayouteffect-ssr.md

      
              1 file
            
          
              10 forks
            
          
              76 comments
            
          
              213 stars
            
          
                gaearon
                / uselayouteffect-ssr.md
            
            
              Last active
              August 18, 2024 23:29
            
              
                useLayoutEffect and server rendering
              
          
    If you use server rendering, keep in mind that neither useLayoutEffect nor useEffect can run until the JavaScript is downloaded.
You might see a warning if you try to useLayoutEffect on the server. Here's two common ways to fix it.
Option 1: Convert to useEffect

If this effect isn't important for first render (i.e. if the UI still looks valid before it runs), then useEffect instead.
function MyComponent() {

  
## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>

    <h2>Add React in One Minute</h2>
    <p>This page demonstrates using React with no build tooling.</p>

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>

    <h2>Add React in One Minute</h2>
    <p>This page demonstrates using React with no build tooling.</p>

## connect.js
// connect() is a function that injects Redux-related props into your component.
// You can inject data and callbacks that change that data by dispatching actions.
function connect(mapStateToProps, mapDispatchToProps) {
  // It lets us inject component as the last step so people can use it as a decorator.
  // Generally you don't need to worry about it.
  return function (WrappedComponent) {
    // It returns a component
    return class extends React.Component {
      render() {
        return (

## minification.md

      
              1 file
            
          
              83 forks
            
          
              75 comments
            
          
              373 stars
            
          
                gaearon
                / minification.md
            
            
              Last active
              June 8, 2024 08:15
            
              
                How to Set Up Minification
              
          
    In production, it is recommended to minify any JavaScript code that is included with your application. Minification can help your website load several times faster, especially as the size of your JavaScript source code grows.
Here's one way to set it up:

Install Node.js
Run npm init -y in your project folder (don't skip this step!)
Run npm install terser

Now, to minify a file called like_button.js, run in the terminal:

  
## npm_init_error.md

      
              1 file
            
          
              1 fork
            
          
              12 comments
            
          
              16 stars
            
          
                gaearon
                / npm_init_error.md
            
            
              Created
              June 28, 2018 00:53
            
              
                What to do when npm init -y fails
              
          
    If you get an "Invalid name" error when you run npm init -y, rename the project folder to only contain lowercase ASCII letters or hyphens (e.g. my-project), and try again.

  
## Wordle.js
import { useState, useEffect, useRef, useMemo } from 'react'

export default function Wordle() {
  let [currentAttempt, setCurrentAttempt] = useState('')
  let [bestColors, setBestColors] = useState(() => new Map())
  let [history, setHistory] = usePersistedHistory(h => {
    waitForAnimation(h)
  })

  useEffect(() => {

## slim-redux.js
function mapValues(obj, fn) {
  return Object.keys(obj).reduce((result, key) => {
    result[key] = fn(obj[key], key);
    return result;
  }, {});
}

function pick(obj, fn) {
  return Object.keys(obj).reduce((result, key) => {
    if (fn(obj[key])) {
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>Add React in One Minute</title>
	</head>
	<body>

	<h2>Add React in One Minute</h2>
	<p>This page demonstrates using React with no build tooling.</p>
	// connect() is a function that injects Redux-related props into your component.
	// You can inject data and callbacks that change that data by dispatching actions.
	function connect(mapStateToProps, mapDispatchToProps) {
	// It lets us inject component as the last step so people can use it as a decorator.
	// Generally you don't need to worry about it.
	return function (WrappedComponent) {
	// It returns a component
	return class extends React.Component {
	render() {
	return (
	import { useState, useEffect, useRef, useMemo } from 'react'

	export default function Wordle() {
	let [currentAttempt, setCurrentAttempt] = useState('')
	let [bestColors, setBestColors] = useState(() => new Map())
	let [history, setHistory] = usePersistedHistory(h => {
	waitForAnimation(h)
	})

	useEffect(() => {
	function mapValues(obj, fn) {
	return Object.keys(obj).reduce((result, key) => {
	result[key] = fn(obj[key], key);
	return result;
	}, {});
	}

	function pick(obj, fn) {
	return Object.keys(obj).reduce((result, key) => {
	if (fn(obj[key])) {