Skip to content

Instantly share code, notes, and snippets.

View bjrmatos's full-sized avatar

BJR Matos bjrmatos

View GitHub Profile
@max-mykhailenko
max-mykhailenko / # Sublime Emmet JSX Reactjs.md
Last active November 25, 2022 23:25
Sublime text 3. Enable Emmet in JSX files with Sublime React plugin

This is no longer needed as Emmet supports JSX - you just need to turn it all on. Did a quick tutorial: http://wesbos.com/emmet-react-jsx-sublime/

Thanks, @wesbos

Problem

  • Using emmet in jsx files
  • Emmet expands text when js autocomplete needed
@ericelliott
ericelliott / essential-javascript-links.md
Last active May 17, 2024 03:38
Essential JavaScript Links
@koistya
koistya / React-Directory-Layout.md
Last active April 7, 2024 19:01
File and folder naming convention for React.js components

File and folder naming convention for React.js components

Directory Layout #1

/actions/...
/components/common/Link.js
/components/common/...
/components/forms/TextBox.js
/components/forms/TextBox.res/style.css
@kpdecker
kpdecker / nodebf.md
Last active June 2, 2016 18:02
mobile.walmart.com #nodebf 2014

Mobile Server Side Rendering

This year marks the first year that we are doing full scale rendering of our SPA application on our mobile.walmart.com Node.js tier, which has provided a number of challenges that are very different from the mostly IO-bound load of our prior #nodebf.

The infrastructure outlined for last year is the same but our Home, Item and a few other pages are prerendered on the server using fruit-loops and hula-hoop to execute an optimized version of our client-side JavaScript and provide a SEO and first-load friendly version of the site.

To support the additional CPU load concerns as peak, which we hope will be unfounded or mitigated by our work, we have also taken a variety of steps to increase cache lifetimes of the pages that are being served in this manner. In order of their impact:

Event Loop Management

@jimfb
jimfb / gist:0eb6e61f300a8c1b2ce7
Last active January 22, 2022 01:52
Parent vs. Owner Context

If you've reached this page, it's probably because your "parent-based and owner-based contexts differ".

As we've been iterating on React's "context" feature, we've discovered that the parent-based relationship is more useful than the owner-based relationship, so we're migrating to use a parent-based hierarchy.

In short, the owner of a component is whomever creates the component, while the parent of a component is whomever would be the containing ancestor in the DOM hierarchy. To learn more about the owner relationship, see the docs here: http://facebook.github.io/react/docs/multiple-components.html

In many cases, the owner and the parent are the same node, in which case, no further action is necessary.

@tkafka
tkafka / LICENSE.txt
Last active May 17, 2024 02:08
Drop-in replacement for ReactCSSTransitionGroup that uses velocity.js instead of CSS transforms. Add your own transitions to `transitions` hash.
The MIT License (MIT)
Copyright (c) 2014 Tomas Kafka
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
var If = React.createClass({
render: function() {
return this.props.value && this.props.children;
}
});
// usage
<If value={this.state.whatever}>
Stuff
</If>
@thomasboyt
thomasboyt / loading.md
Created October 22, 2014 15:09
Flux loading state pattern

I've been struggling to come up with a good pattern for handling loading state in Flux (specifically using Fluxxor, though I think this is an issue for any implementation).

When I say "loading state," what I mean is state in a store that tracks:

  • Whether the data handled by the store was loaded
  • Whether the store is currently attempting to load data
  • Whether the data loaded successfully or errored
  • The error message, if it errored

Here's my first (very simple) pass at this, a store mixin called LoadingStoreMixin.js:

@netpoetica
netpoetica / decoupling-dependencies
Created October 16, 2014 18:53
Even more decoupled than the original - pass dependencies in as args so that they can be easily changed later
document.addEventListener("DOMContentLoaded", function(event) {
/*
Later you can easily change this to any other PubSub library you like.
var _pubSub = PubSub;
or you can even wrap it to define your own API. This way, later on
you can still continue to use _ps.sub and _ps.pub even if you change
out the library defining that behaviour. Let's go with the latter.
@gaearon
gaearon / createAsyncPage.jsx
Last active April 25, 2023 09:06
Webpack's async code splitting with React Router
'use strict';
var React = require('react');
function createAsyncHandler(getHandlerAsync, displayName) {
var Handler = null;
return React.createClass({
displayName: displayName,