Skip to content

Instantly share code, notes, and snippets.

View miloplacencia's full-sized avatar

Camilo Placencia Ulloa miloplacencia

View GitHub Profile
@jquense
jquense / 0. intro.md
Last active September 24, 2022 05:10
Alternative ways to define react Components

The 0.13.0 improvements to React Components are often framed as "es6 classes" but being able to use the new class syntax isn't really the big change. The main thing of note in 0.13 is that React Components are no longer special objects that need to be created using a specific method (createClass()). One of the benefits of this change is that you can use the es6 class syntax, but also tons of other patterns work as well!

Below are a few examples creating React components that all work as expected using a bunch of JS object creation patterns (https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/ch4.md#mixins). All of the examples are of stateful components, and so need to delegate to React.Component for setState(), but if you have stateless components each patterns tends to get even simpler. The one major caveat with react components is that you need to assign props and context to the component instance otherwise the component will be static. The reason is

@nathanharper
nathanharper / default-csrf.js
Last active January 22, 2018 11:56
axios default CSRF Token
let csrfToken = 'lololololol';
let axiosDefaults = require('axios/lib/defaults');
axiosDefaults.headers.common['X-CSRF-Token'] = csrfToken;
@sebmarkbage
sebmarkbage / Enhance.js
Last active January 31, 2024 18:33
Higher-order Components
import { Component } from "React";
export var Enhance = ComposedComponent => class extends Component {
constructor() {
this.state = { data: null };
}
componentDidMount() {
this.setState({ data: 'Hello' });
}
render() {

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.

@ericelliott
ericelliott / essential-javascript-links.md
Last active April 22, 2024 10:15
Essential JavaScript Links
@addyosmani
addyosmani / README.md
Last active April 2, 2024 20:18 — forked from 140bytes/LICENSE.txt
108 byte CSS Layout Debugger

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

@dmlogic
dmlogic / AngularTrait.php
Last active August 29, 2015 14:03
Securing Angular with Laravel
<?php namespace MyApp\Response;
use Cookie;
use Request;
use Session;
use Symfony\Component\HttpFoundation\Cookie as SymfonyCookie;
trait AngularTrait {
/**
@soheilhy
soheilhy / nginxproxy.md
Last active March 22, 2024 08:54
How to proxy web apps using nginx?

Virtual Hosts on nginx (CSC309)

When hosting our web applications, we often have one public IP address (i.e., an IP address visible to the outside world) using which we want to host multiple web apps. For example, one may wants to host three different web apps respectively for example1.com, example2.com, and example1.com/images on the same machine using a single IP address.

How can we do that? Well, the good news is Internet browsers

@adilapapaya
adilapapaya / README
Last active June 27, 2020 11:58
Export Table Data to CSV using Javascript
Example code for exporting data in a table to a csv file.
@thomasfr
thomasfr / Git push deployment in 7 easy steps.md
Last active May 1, 2024 23:17
7 easy steps to automated git push deployments. With small and configurable bash only post-receive hook