Skip to content

Instantly share code, notes, and snippets.

Dan Abramov gaearon

View GitHub Profile
@gaearon
gaearon / Classes.js
Created May 27, 2020
Beneath Classes: Prototypes
View Classes.js
class Spiderman {
lookOut() {
alert('My Spider-Sense is tingling.');
}
}
let miles = new Spiderman();
miles.lookOut();
View 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];
}
}
@gaearon
gaearon / uselayouteffect-ssr.md
Last active Aug 3, 2020
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() {
@gaearon
gaearon / MyResponsiveComponent.js
Created Nov 1, 2018
Examples from "Making Sense of React Hooks"
View MyResponsiveComponent.js
function MyResponsiveComponent() {
const width = useWindowWidth(); // Our custom Hook
return (
<p>Window width is {width}</p>
);
}
@gaearon
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.

@gaearon
gaearon / index.html
Created Jun 25, 2018
Multiple React components on a single HTML page
View 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>
@gaearon
gaearon / like_button.js
Last active Sep 28, 2019
JSX version of LikeButton
View like_button.js
'use strict';
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
@gaearon
gaearon / minification.md
Last active Jul 29, 2020
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:

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

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

@gaearon
gaearon / index.html
Last active Aug 4, 2020
Add React in One Minute
View 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>
View LikeButton.js
'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
You can’t perform that action at this time.