Skip to content

Instantly share code, notes, and snippets.

Avatar

Dan Abramov gaearon

View GitHub Profile
@SaraVieira
SaraVieira / gist file.md
Last active Jul 30, 2018
The Origin of Furries
View gist file.md

In this talk we will be all discussing the origin of the furry fandom. How we will thogheter create a new furry-in-js framework. We will going over how they have changed the current fandom world, our hearts and the js world in 5 very awesome minutes! This talk is to prove a point that stars mean nothing in this case.

https://reactiveconf.com/

@halfzebra
halfzebra / PROPOSAL.md
Last active Mar 23, 2018
How Create React App changed the way I work
View PROPOSAL.md

This gist is a proposal for lightning talk at Reactive Conf 2017

Like the idea? Give me a 🌟 and see you in Bratislava!

How Create React App changed the way I work

Hello, my name is Eduard!

I'm the maintainer of Create Elm App and contributor to Create React App and Webpack

@alekseykulikov
alekseykulikov / index.md
Last active Aug 8, 2020
Principles we use to write CSS for modern browsers
View index.md

Recently CSS has got a lot of negativity. But I would like to defend it and show, that with good naming convention CSS works pretty well.

My 3 developers team has just developed React.js application with 7668 lines of CSS (and just 2 !important). During one year of development we had 0 issues with CSS. No refactoring typos, no style leaks, no performance problems, possibly, it is the most stable part of our application.

Here are main principles we use to write CSS for modern (IE11+) browsers:

@thevangelist
thevangelist / my-component.spec.js
Created Aug 4, 2016
The only React.js component test you'll ever need (Enzyme + Chai)
View my-component.spec.js
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from '../src/my-component';
const wrapper = shallow(<MyComponent/>);
describe('(Component) MyComponent', () => {
it('renders without exploding', () => {
expect(wrapper).to.have.length(1);
});
@gaearon
gaearon / connect.js
Last active Sep 24, 2020
connect.js explained
View connect.js
// 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 (
@gaearon
gaearon / LinkThatWorksWithRedux.js
Last active Nov 21, 2018
Drop-in replacement for React Router <Link> that works with React Redux optimizations (https://github.com/reactjs/react-router/issues/470)
View LinkThatWorksWithRedux.js
// While I claim this is a drop-in replacement, it is a little bit slower.
// If you have hundreds of links, you might spend a few more milliseconds rendering the page on transitions.
// KNOWN ISSUES WITH THIS APPROACH:
// * This doesn't work great if you animate route changes with <TransitionGroup>
// because the links are going to get updated immediately during the animation.
// * This might still not update the <Link> correctly for async routes,
// as explained in https://github.com/reactjs/react-router/issues/470#issuecomment-217010985.
@gaearon
gaearon / reducers.js
Last active Sep 22, 2020
How I'd do code splitting in Redux (pseudo code, not tested!)
View reducers.js
import { combineReducers } from 'redux';
import users from './reducers/users';
import posts from './reducers/posts';
export default function createReducer(asyncReducers) {
return combineReducers({
users,
posts,
...asyncReducers
});
@evanrs
evanrs / rewriting-history-with-predicates.md
Last active Nov 4, 2015
Rewriting history with predicates (Reactive 2015 lightning talk proposal)
View rewriting-history-with-predicates.md

This is a proposal for a lightning talk I would give at the Reactive 2015 conference.

NOTE: If you like it, put a star on it—the number of stars decides if it makes the cut!

Rewriting history with predicates

Redux provides a simple pattern for managing application state. As demonstrated in Dan Abramov's talk following this pattern lets you painlessly implement simple undo and time travel. By keeping a history of actions, and reducing a subset

@gaearon
gaearon / slim-redux.js
Last active Sep 18, 2020
Redux without the sanity checks in a single file. Don't use this, use normal Redux. :-)
View slim-redux.js
function mapValues(obj, fn) {
return Object.keys(obj).reduce((result, key) => {
result[key] = fn(obj[key], key);
return result;
}, {});
}
function pick(obj, fn) {
return Object.keys(obj).reduce((result, key) => {
if (fn(obj[key])) {
@tlrobinson
tlrobinson / redux-devtools-separate-window.js
Last active Aug 20, 2019
Put the awesome redux-devtools in it's own window so it doesn't obscure or be obscured by your application
View redux-devtools-separate-window.js
// give it a name so it reuses the same window
var win = window.open(null, "redux-devtools", "menubar=no,location=no,resizable=yes,scrollbars=no,status=no");
// reload in case it's reusing the same window with the old content
win.location.reload();
// wait a little bit for it to reload, then render
setTimeout(function() {
React.render(
<DebugPanel top right bottom left >
You can’t perform that action at this time.