dan gaearon

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

  
## 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
            
          
              83 forks
            
          
              75 comments
            
          
              372 stars
            
          
                gaearon
                / minification.md
            
            
              Last active
              March 4, 2024 12:45
            
              
                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:

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

## LikeButton.js
'use strict';

const e = React.createElement;

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

## modern_js.md

      
              1 file
            
          
              130 forks
            
          
              244 comments
            
          
              1274 stars
            
          
                gaearon
                / modern_js.md
            
            
              Last active
              April 18, 2024 15:01
            
              
                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


## prepack-gentle-intro-1.md

      
              1 file
            
          
              26 forks
            
          
              14 comments
            
          
              638 stars
            
          
                gaearon
                / prepack-gentle-intro-1.md
            
            
              Last active
              February 13, 2024 14:30
            
              
                A Gentle Introduction to Prepack, Part 1
              
          
Note:
When this guide is more complete, the plan is to move it into Prepack documentation.

For now I put it out as a gist to gather initial feedback.

A Gentle Introduction to Prepack (Part 1)

If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code:

Babel lets you use newer JavaScript language features, and outputs equivalent code that targets older JavaScript engines.


## theme_sort_of.json
{
    "editor.fontFamily": "Consolas",
    "editor.fontSize": 18,
    "editor.lineHeight": 26,
    "editor.minimap.enabled": false,
    "editor.renderIndentGuides": false,
    "editor.renderLineHighlight": "none",
    "javascript.validate.enable": false,
    // "workbench.colorTheme": (find something that looks like Oceanic Next and put it here)
    "window.zoomLevel": -1,
	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) {
	'use strict';

	const e = React.createElement;

	class LikeButton extends React.Component {
	constructor(props) {
	super(props);
	this.state = { liked: false };
	}
	{
	"editor.fontFamily": "Consolas",
	"editor.fontSize": 18,
	"editor.lineHeight": 26,
	"editor.minimap.enabled": false,
	"editor.renderIndentGuides": false,
	"editor.renderLineHighlight": "none",
	"javascript.validate.enable": false,
	// "workbench.colorTheme": (find something that looks like Oceanic Next and put it here)
	"window.zoomLevel": -1,