Dan Abramov gaearon

## CurvedArrow.js
// from/to: { left, top, width, height, shape: 'circle' | 'rect' }
function CurvedArrow({ from, to }) {
  function curvedHorizontal(x1, y1, x2, y2) {
    function pos(t) {
      let mx = x1 + (x2 - x1) / 2;
      let p1 = {x: x1, y: y1};
      let p2 = {x: mx, y: y1};
      let p3 = {x: mx, y: y2};
      let p4 = {x: x2, y: y2};
      return {

## Classes.js
class Spiderman {
  lookOut() {
    alert('My Spider-Sense is tingling.');
  }
}

let miles = new Spiderman();
miles.lookOut();

## node_hot_reload.js
const express = require('express');
const app = express();

// Application
app.get('/', function(req, res) {
  if (process.env.NODE_ENV === 'development') {
    for (var key in require.cache) {
      delete require.cache[key];
    }
  }

## uselayouteffect-ssr.md

      
              1 file
            
          
              3 forks
            
          
              37 comments
            
          
              123 stars
            
          
                gaearon
                / uselayouteffect-ssr.md
            
            
              Last active Jul 23, 2021
            
              
                useLayoutEffect and server rendering
              
          
      View uselayouteffect-ssr.md
  
      
    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() {

  
## MyResponsiveComponent.js
function MyResponsiveComponent() {
  const width = useWindowWidth(); // Our custom Hook
  return (
    <p>Window width is {width}</p>
  );
}

## npm_init_error.md

      
              1 file
            
          
              1 fork
            
          
              7 comments
            
          
              11 stars
            
          
                gaearon
                / npm_init_error.md
            
            
              Created Jun 28, 2018
            
              
                What to do when npm init -y fails
              
          
      View npm_init_error.md
  
      
    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.

  
## 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>

## like_button.js
'use strict';

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {

## minification.md

      
              1 file
            
          
              49 forks
            
          
              52 comments
            
          
              247 stars
            
          
                gaearon
                / minification.md
            
            
              Last active Jul 21, 2021
            
              
                How to Set Up Minification
              
          
      View minification.md
  
      
    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:

  
## 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>
	// from/to: { left, top, width, height, shape: 'circle' \| 'rect' }
	function CurvedArrow({ from, to }) {
	function curvedHorizontal(x1, y1, x2, y2) {
	function pos(t) {
	let mx = x1 + (x2 - x1) / 2;
	let p1 = {x: x1, y: y1};
	let p2 = {x: mx, y: y1};
	let p3 = {x: mx, y: y2};
	let p4 = {x: x2, y: y2};
	return {
	class Spiderman {
	lookOut() {
	alert('My Spider-Sense is tingling.');
	}
	}

	let miles = new Spiderman();
	miles.lookOut();
	const express = require('express');
	const app = express();

	// Application
	app.get('/', function(req, res) {
	if (process.env.NODE_ENV === 'development') {
	for (var key in require.cache) {
	delete require.cache[key];
	}
	}
	function MyResponsiveComponent() {
	const width = useWindowWidth(); // Our custom Hook
	return (
	<p>Window width is {width}</p>
	);
	}
	<!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>
	'use strict';

	class LikeButton extends React.Component {
	constructor(props) {
	super(props);
	this.state = { liked: false };
	}

	render() {
	if (this.state.liked) {