Learning React and Redux
This is the best intro to Redux: Getting Started with Redux
These are a collection of the best links that I read when learning react and redux. There's not a particular order. :\
Idiomatic Redux: The Tao of Redux, Part 2 - Practice and Philosophy · Mark's Dev Blog
http://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-redux-part-2/
Writing a Basic App in Redux
http://davidandsuzi.com/writing-a-basic-app-in-redux/ I’ve been a bit heads down for the last two months, working on a project with React 0.12.2 and Reflux. In that course of time, the React ecosystem has begun to feel foreign to me. React is up…
Redux flow chart
https://twitter.com/aprilarcus/status/621582105374396417
JSConf UY: Flux - Those who forget the past... // Speaker Deck
https://speakerdeck.com/jmorrell/jsconf-uy-flux-those-who-forget-the-past-dot-dot-dot-1 Speaker Deck Sign Up Sign In by Jeremy Morrell Published April 24, 2015 in Programming now with 100% better notes!
Smart and Dumb Components
https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 BismuthThere’s a simple pattern I find immensely useful when writing React applications. If you’ve been doing React for a while, you probably have already discovered them. This article…
Container Components
https://medium.com/@learnreact/container-components-c0e67432e005 One React pattern that has had the greatest effect on my code is the container component pattern.At React.js Conf, Jason Bonta talked about how they build High Performance Components at facebook.…
Efficient Nested React Components — Medium
https://medium.com/@joshuawcomeau/efficient-nested-react-components-dd9347e9b3f3 If you ask people what React’s greatest selling point is, you’ll likely hear performance. Because of its fancy virtual DOM, it does far less page manipulation…
Flux over the Wire | Elie Rotenberg
https://blog.rotenberg.io/flux-over-the-wire-3/ When doing real world web apps, there is a very common pattern: single source of truth shared by multiple clients. The best example of this is a chat: the…
Mixins Are Dead. Long Live Composition — Medium
https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750 I just wrote Mixins are Dead. Long Live Higher-Order Components https://t.co/c3vOMQCyyf
The Case for Flux — Medium
https://medium.com/@dan_abramov/the-case-for-flux-379b7d1982c6 Flux has become trendy in the past few months, and you’ve seen everyone and their dog roll out their own implementations.
Simon Sturmer on Twitter: "#ReactJS lifecycle chart: super helpful when learning advanced React concepts (like shouldComponentUpdate)
https://twitter.com/simonsturmer/status/567937326669651969 #ReactJS lifecycle chart: super helpful when learning advanced React concepts (like shouldComponentUpdate)
Higher-order Components
https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775 Higher Order Components Enhance.js export var Enhance = ComposedComponent => class extends React.Component { constructor() { this.state = { data: null }; } componentDidMount(){ this.setState({ data: 'Hello' }); } render() { return
React.js Conf 2015 - react-router increases your productivity - YouTube
https://www.youtube.com/watch?v=XZfvW1a8Xac&index=7&list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr Michael Jacksonreact-router is a powerful routing library built on top of React that helps you add new screens and flows to your application incredibly quickly, all while keeping the URL in sync with what's being displayed on the page. The project benefits from several years of combined experience w
React.js Conf 2015 - Immutable Data and React - YouTube
https://www.youtube.com/watch?v=I7IdS-PbEgI&feature=youtu.be&list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr Lee Byron, FacebookImmutable data unlocks powerful memoization techniques and prohibits accidental coupling via shared mutable state. It's no accident that these are the the same benefits provided by React.Persistent data structures provide the benefits of immutability while maintaining high perform
React.js best practices and conventions
http://web-design-weekly.com/2015/01/29/opinionated-guide-react-js-best-practices-conventions/ I’ve been using React.js for a little while now, both in my 9 to 5 job and for my own projects, and during that time I have started evolving my own set of React.js best practices. The following guidelines mostly focus on component structure and JSX.
What the flux?
http://jonathancreamer.com/what-the-flux/ I've been really diving into wrapping my brain around React.js and Flux architecture the last couple of weeks. Not going to lie, I've been avoiding it. When I look at the docs and blog posts about Flux, and React, my brain goes...
The React Quick Start Guide
http://www.jackcallister.com/2015/01/05/the-react-quick-start-guide.html This article will give you a quick overview of how to build user interfaces in React JS. There's just enough to get yourself started and nothing more. Code along with this starter kit (instructions in the repo) or just read along. React has quite a small API.
React Primer
http://binarymuse.github.io/react-primer/build/
React and Flux: Building Applications with a Unidirectional Data Flow - YouTube
https://www.youtube.com/watch?v=i__969noyAM Facebook engineers Bill Fisher and Jing Chen are here to talk about Flux and React, and how using an application architecture with a unidirectional data flow cleans up a lot of their code.More HTML5 & JavaScript Resources: http://crcl.to/goTickets to Forward 2: http://forwardjs.com/
enaqx/awesome-react · GitHub
https://github.com/enaqx/awesome-react Awesome React A collection of awesome React tools, resources, videos and shiny things. Resources General Resources React Online Playground React Community Tutorials General Tutorials Writing React Components Writing Isomorphic Apps JSX Flux Tutorials Building Robust Web Apps with React Scotch.
Flux For Stupid People
http://blog.andrewray.me/flux-for-stupid-people/ TL;DR As a stupid person, this is what I wish someone had told me when I struggled learning Flux. It's not straightforward, not well documented, and has many moving parts. This is a follow-up to ReactJS For Stupid People.
Isomorphic Flux // Speaker Deck
https://speakerdeck.com/mridgway/isomorphic-flux Featured Presentations
Async requests with React.js and Flux, revisited.
http://www.code-experience.com/async-requests-with-react-js-and-flux-revisited/ Our company put the approach I outlined in this post into production roughly 6 weeks ago. Recently, I dove back into our Flux application, having not looked at it for a couple of weeks.
Testing React Components – Ovidiu Cherecheș – Medium
https://medium.com/@skidding/testing-react-components-30516bc6a1b3
A Guide to Modular Design Thinking
https://ponyfoo.com/articles/modular-design-thinking
Growing Pains: Migrating Slack’s Desktop App to BrowserView
https://slack.engineering/growing-pains-migrating-slacks-desktop-app-to-browserview-2759690d9c7b
Simple React Patterns
http://lucasmreis.github.io/blog/simple-react-patterns/
Introduction · React Bits
https://vasanthk.gitbooks.io/react-bits/
Scaling React Server-side Rendering
http://arkwright.github.io/scaling-react-server-side-rendering.html
Shape your redux store like your database
https://hackernoon.com/shape-your-redux-store-like-your-database-98faa4754fd5
High Performance React: 3 New Tools to Speed Up Your Apps
Twitter Lite and High Performance React Progressive Web Apps at Scale
React is Slow, React is Fast Optimizing React Apps in Practice
https://react.statuscode.com/issues/29 react status
Issue 29
setState() Gate: Navigating the React setState() Behavior Confusion — Here, Eric Elliott expands upon the recent setState() commentary…
Low effort, high value. Integration tests in Redux apps. https://medium.com/@penzington/low-effort-high-value-integration-tests-in-redux-apps-d3a590bd9fd5
Hot reload all the things!
https://hackernoon.com/hot-reload-all-the-things-ec0fed8ab0
10 Tips for Better Redux Architecture – JavaScript Scene
https://medium.com/javascript-scene/10-tips-for-better-redux-architecture-69250425af44 10 Tips for Better Redux Architecture Mandarin Duck — Malcolm Carlaw (CC-BY-2.0) When I started using React, there was no Redux. There was only the Flux…
Mixins Considered Harmful
https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html “How do I share the code between several components?” is one of the first questions that people ask when they learn React. Our answer has always been to use…
How to Use Classes and Sleep at Night
https://medium.com/@dan_abramov/how-to-use-classes-and-sleep-at-night-9af8de78ccb4 There is a growing sentiment in the JavaScript community that ES6 classes are not awesome:Classes obscure the prototypal inheritance at the core of JS.Classes encourage inheritance but you should…
christianalfoni - Why we are doing MVC and FLUX wrong
http://www.christianalfoni.com/articles/2015_08_02_why-we-are-doing-mvc-and-flux-wrong The MVC (Model View Controller) architecture is referenced in almost all Frontend frameworks. Angular, Ember, Backbone etc, but is it really MVC they are implementing? And is Flux really a different…
The Evolution of Flux Frameworks
https://medium.com/@dan_abramov/the-evolution-of-flux-frameworks-6c16ad26bb31 There has been no shortage of great Flux implementations, such as Flummox, Alt, or Fluxible. Most of them are focused on making Flux easier to use with the server rendering and reducing the…
Composition - not inheritance - in Backbone — Dan Hough
http://danhough.com/blog/backbone-composition/ Composition - not inheritance - in Backbone Inheritance is a concept that most software engineers are familiar with: Given a class or object, another object can “inherit” the properties…
Best practices for building large React applications
http://blog.siftscience.com/blog/2015/best-practices-for-building-large-react-applications
SelectThe Select component is analogous to the <select> HTML tag. It accepts props such as a list of available options and the currently selected option, but it does not own any state. Not…
Performance Tools | React
https://facebook.github.io/react/docs/perf.html
Change And Its Detection In JavaScript Frameworks
http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html Posted on Monday Mar 2, 2015 by Tero Parviainen In 2015 there is no shortage of options when it comes to JavaScript frameworks. Between Angular, Ember, React, Backbone, and their numerous…
More About Refs | React
http://facebook.github.io/react/docs/more-about-refs.html After returning the structure of your UI from the render method, you may find yourself wanting to "reach out" and invoke methods on component instances returned from render. Often, doing something…
Modularise CSS the React way
https://medium.com/@jviereck/modularise-css-the-react-way-1e817b317b04 To me, the following are the parts describing an UI component:In the React universe, content and user interactions are declared using JSX and React uses the VirtualDOM abstraction to make updating…