arcanis

Getting Started With Plug'n'Play

If you use create-react-app, #5136 (released with the 2.0) implements a --use-pnp option that allows you to easily create a new project using PnP! In this case, just use create-react-app --use-pnp together with Yarn 1.12, and you're good to go! 👍

Plug'n'Play is a new initiative from Yarn that aims to remove the need for node_modules. It's already available, and has proved being effective even on large-scale infrastructures. This document describes in a few steps how to quickly get started with it. Spoiler alert: it's quite easy 🙂

First, download a package manager that supports it. Yarn 1.12 already does, so that's what we're going to use! To install it, just follow the instructions on our website: https://yarnpkg.com/en/docs/install

If everything is ok, running yarn --version should give you v1.12.1 or higher. If you don't get this result maybe a

bvaughn

// This is an example of how to fetch external data in response to updated props,
// If you are using an async mechanism that does not support cancellation (e.g. a Promise).

class ExampleComponent extends React.Component {
  _currentId = null;

  state = {
    externalData: null
  };

yangshun

	prettier-eslint	eslint-plugin-prettier	eslint-config-prettier
What it is	A JavaScript module exporting a single function.	An ESLint plugin.	An ESLint configuration.
What it does	Runs the code (string) through prettier then eslint --fix. The output is also a string.	Plugins usually contain implementations for additional rules that ESLint will check for. This plugin uses Prettier under the hood and will raise ESLint errors when your code differs from Prettier's expected output.	This config turns off formatting-related rules that might conflict with Prettier, allowing you to use Prettier with other ESLint configs like eslint-config-airbnb.
How to use it	Either calling the function in your code or via [prettier-eslint-cli](https://github.co

fcgomes92

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentPage: 0,
      pageCount: 10,
    }
  }

  handlePageClick = (data) => {

g0t4

From my Pluralsight course: https://app.pluralsight.com/library/courses/asynchronous-javascript-reasoning/table-of-contents

• Weather http://plnkr.co/edit/ZOAaSdtnfvR6WwiuVZ6s
• Avoid Blocking – Red Background http://plnkr.co/edit/z29VyH5BPvC4oc40EyOu
• setTimeout Pyramid Challenge http://plnkr.co/edit/DGiHFQOQfnipCcpex2RH
• Drag and Drop Red Box http://plnkr.co/edit/SmSpPS5ZgPvkgn8RE6y1
• Timer onReady http://plnkr.co/edit/gafgKCrxnDIJ6YaG9Jpx
• Timer measure http://plnkr.co/edit/kPOgzEuIvUmN4o6Jenem
• Progress Number Crunching - Web Worker https://plnkr.co/edit/Yy7BOZU9sIa8EyrxJwGH
• Event Listeners Are Synchronous http://plnkr.co/edit/mDvSHpF3HcTjtvltGmQn

mxstbr

Enable tab completion for JSX with Emmet in Atom

This guide assumes you have the emmet and language-babel packages already installed in Atom

1. Open the keymap.cson file by clicking on Atom -> Keymap… in the menu bar
2. Add these lines of code to your keymap:

'atom-text-editor[data-grammar~="jsx"]:not([mini])':

kentcdodds

#!/usr/bin/env bash
set -e

# allow being run from somewhere other than the git rootdir
gitroot=$(git rev-parse --show-cdup)

# default gitroot to . if we're already at the rootdir
gitroot=${gitroot:-.};

nm_bin=$gitroot/node_modules/.bin

J2TEAM

Here is a list of scopes to use in Sublime Text 2/3 snippets -

ActionScript: source.actionscript.2
AppleScript: source.applescript
ASP: source.asp
Batch FIle: source.dosbatch
C#: source.cs
C++: source.c++
Clojure: source.clojure

paulirish

/* bling.js */

window.$ = document.querySelectorAll.bind(document);

Node.prototype.on = window.on = function (name, fn) {
  this.addEventListener(name, fn);
}

NodeList.prototype.__proto__ = Array.prototype;

ryanflorence

Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.