Skip to content

Instantly share code, notes, and snippets.

@gaearon
gaearon / modern_js.md
Last active Oct 2, 2022
Modern JavaScript in React Documentation
View modern_js.md

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
@gaearon
gaearon / index.html
Last active Oct 2, 2022
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>
@gaearon
gaearon / index.html
Last active Oct 2, 2022
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 / connect.js
Last active Sep 30, 2022
connect.js explained
View 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 (
@gaearon
gaearon / minification.md
Last active Sep 29, 2022
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 / uselayouteffect-ssr.md
Last active Sep 25, 2022
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 / slim-redux.js
Last active Sep 12, 2022
Redux without the sanity checks in a single file. Don't use this, use normal Redux. :-)
View 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])) {
View snake.html
<div id="canvas"></div>
<style>
#canvas {
width: 500px;
height: 300px;
border: 5px solid black;
position: relative;
box-sizing: content-box;
}
@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();
@gaearon
gaearon / minesweeper.html
Last active Aug 22, 2022
minesweeper (incomplete/simplfied). stream: https://www.youtube.com/watch?v=CL01_m50TYY
View minesweeper.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="canvas"></div>
<button id="restart">Restart</button>
<script src="minesweeper.js"></script>
<style>
* {