ryanflorence

Everything I Know About UI Routing

Definitions

1. Location - The location of the application. Usually just a URL, but the location can contain multiple pieces of information that can be used by an app
   1. pathname - The "file/directory" portion of the URL, like invoices/123
   2. search - The stuff after ? in a URL like /assignments?showGrades=1.
   3. query - A parsed version of search, usually an object but not a standard browser feature.
   4. hash - The # portion of the URL. This is not available to servers in request.url so its client only. By default it means which part of the page the user should be scrolled to, but developers use it for various things.
   5. state - Object associated with a location. Think of it like a hidden URL query. It's state you want to keep with a specific location, but you don't want it to be visible in the URL.

gaearon

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() {

joshwcomeau

/**
`useChangeLog` - dev-mode helper hook to let you 
know why a memoized component re-rendered!


Usage example:

const YourComponent = React.memo((props) => {
  // Just drop this fella into your memo component's body.
  useChangeLog(props);

DmitrySoshnikov

/**
 * Event loop.
 *
 * Read details here:
 * http://dmitrysoshnikov.com/ecmascript/javascript-the-core-2nd-edition/#job
 *
 * by Dmitry Soshnikov <dmitry.soshnikov@gmail.com>
 */

/**

ryanoglesby08

/*
  Incredibly simple Node.js and Express application server for serving static assets.
  
  DON'T USE THIS IN PRODUCTION!
    It is meant for learning purposes only. This server is not optimized for performance, 
    and is missing key features such as error pages, compression, and caching.
  
  For production, I recommend using an application framework that supports server-side rendering, 
    such as Next.js. https://nextjs.org

datchley

React/Redux Style Guide

Table of Contents:

• React/Redux Style Guide
  • React Guidelines
    • Organization
    • Components
• Container Components

zenorocha

1. Get your IP Address

echo `ifconfig $(netstat -nr | grep -e default -e "^0\.0\.0\.0" | head -1 | awk '{print $NF}') | grep -e "inet " | sed -e 's/.*inet //' -e 's/ .*//' -e 's/.*\://'`

2. Modify your hosts file

gaearon

// 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 (

d2s

Installing Node.js with nvm to Linux & macOS & WSL

A quick guide on how to setup Node.js development environment.

Install nvm for managing Node.js versions

nvm allows installing several versions of Node.js to the same system. Sometimes applications require a certain versions of Node.js to work. Having the flexibility of using specific versions can help.

1. Open new Terminal window.

DmitrySoshnikov

@kangax's ES6 quiz, explained

@kangax created a new interesting quiz, this time devoted to ES6 (aka ES2015). I found this quiz very interesting and quite hard (made myself 3 mistakes on first pass).

Here we go with the explanations:

Question 1:

(function(x, f = () => x) {