{"componentChunkName":"component---src-templates-copy-page-js","path":"/learning","result":{"data":{"markdownRemark":{"html":"<p>A selected list of tutorials, articles, and resources on Javascript, React, Redux, and related topics. Brought to you by <a href=\"https://twitter.com/acemarke\">Mark Erikson</a> (aka @acemarke). For additional articles on these and other topics, see <a href=\"https://github.com/markerikson/react-redux-links\">React/Redux Links</a>.</p>\n<h2 id=\"basic-concepts-and-learning-approaches\" style=\"position:relative;\"><a href=\"#basic-concepts-and-learning-approaches\" aria-label=\"basic concepts and learning approaches permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Basic Concepts and Learning Approaches</h2>\n<h3 id=\"overviews-of-javascript-tools-and-concepts\" style=\"position:relative;\"><a href=\"#overviews-of-javascript-tools-and-concepts\" aria-label=\"overviews of javascript tools and concepts permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Overviews of Javascript Tools and Concepts</h3>\n<ul>\n<li><a href=\"http://www.infoq.com/articles/state-of-javascript-2016\">State of the Javascript Landscape in 2016</a><br>\nA very high-level summary of the important terms and technologies that are used in modern Javascript development.</li>\n<li><a href=\"http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/\">The (R)Evolution of Web Development</a><br>\nA slideshow giving an overview of web dev history and modern web dev tools, technologies, and trends.</li>\n<li><a href=\"https://medium.com/@shubheksha/javascript-package-managers-101-9afd926add0a\">Javascript Package Managers 101</a><br>\nAn overview of what packages and package managers are, some related terms, and how these tools work.</li>\n</ul>\n<h3 id=\"suggested-learning-approaches\" style=\"position:relative;\"><a href=\"#suggested-learning-approaches\" aria-label=\"suggested learning approaches permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Suggested Learning Approaches</h3>\n<ul>\n<li><a href=\"https://medium.freecodecamp.com/a-study-plan-to-cure-javascript-fatigue-8ad3a54f2eb1\">A Study Plan to Cure Javascript Fatigue</a><br>\nThe author of the \"State of JS 2016\" survey gives an excellent step-by-step study plan to use when learning the Javascript ecosystem.</li>\n<li><a href=\"https://github.com/petehunt/react-howto\">React How-To</a><br>\nPete Hunt, one of React's creators, gives a high-level suggested order to use when learning React-related technologies (React, NPM, bundlers, ES6, routing, and Flux/Redux)</li>\n<li><a href=\"https://daveceddia.com/timeline-for-learning-react/\">Timeline for Learning React</a><br>\n<a href=\"https://daveceddia.com/how-to-learn-react/\">How to Learn React</a><br>\nAnother high-level suggested timeline for how to approach learning React and related technologies.</li>\n<li><a href=\"https://github.com/ericdouglas/react-roadmap\">React Roadmap</a><br>\nA curated list of free resources to master React Development, in suggested learning order</li>\n<li><a href=\"https://www.robinwieruch.de/tips-to-learn-react-redux/\">Tips to learn React + Redux</a><br>\nAn extensive and excellent list of suggestions to follow when learning and using React and Redux. Tips include when to use different component patterns, when to bring in a state management library, Redux state structuring, unit testing, and much more.</li>\n</ul>\n<h2 id=\"learning-core-javascript-es5\" style=\"position:relative;\"><a href=\"#learning-core-javascript-es5\" aria-label=\"learning core javascript es5 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Learning Core Javascript (ES5)</h2>\n<h3 id=\"general-resources\" style=\"position:relative;\"><a href=\"#general-resources\" aria-label=\"general resources permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>General Resources</h3>\n<ul>\n<li><a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript\">Mozilla Developer Network: Javascript</a><br>\n<a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript\">Mozilla Developer Network: A Re-Introduction to Javascript</a><br>\nMozilla maintains a fantastic set of developer resources for Web technologies, including a comprehensive reference to the Javascript language and a number of associated tutorials. Their \"reintroduction to Javascript\" article is a great overview of what the language looks like.</li>\n<li><a href=\"https://medium.com/javascript-scene/10-priceless-resources-for-javascript-learners-bbf2f7d7f84e\">Eric Elliott's Javascript Resource Lists</a><br>\n<a href=\"https://gist.github.com/ericelliott/d576f72441fc1b27dace/0cee592f8f8b7eae39c4b3851ae92b00463b67b9\">Eric Elliott's Essential Javascript Links</a><br>\nEric Elliott is a strong proponent of Javascript, has written numerous articles about learning and understanding Javascript, and assembled some very useful lists of numerous Javascript resources. (Strong opinions, but has useful info.)</li>\n<li><a href=\"http://wesbos.com/learn-javascript\">Wes Bos's Javascript Resource List</a><br>\nSpeaker and teacher Wes Bos gives links to a number of resources for learning Javascript</li>\n</ul>\n<h3 id=\"books\" style=\"position:relative;\"><a href=\"#books\" aria-label=\"books permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Books</h3>\n<ul>\n<li><a href=\"http://eloquentjavascript.net/\">Eloquent Javascript</a><br>\nA full online book teaching Javascript from the ground up. Very recommended.</li>\n<li><a href=\"https://github.com/getify/You-Dont-Know-JS\">You Don't Know Javascript</a><br>\nAn online book series intended to teach all aspects of Javascript, including the \"tougher\" parts.</li>\n<li><a href=\"http://exploringjs.com/\">Exploring Javascript</a><br>\nMultiple free online books from Dr. Axel Rauschmayer. \"Speaking Javascript\" covers all of Javascript through ES5; \"Exploring ES6\" covers ES6 in depth; and other books look at versions of Javascript after ES6 and how to set up an ES6+ development environment.</li>\n</ul>\n<h2 id=\"learning-current-javascript-es6\" style=\"position:relative;\"><a href=\"#learning-current-javascript-es6\" aria-label=\"learning current javascript es6 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Learning Current Javascript (ES6+)</h2>\n<h3 id=\"es6-feature-overviews\" style=\"position:relative;\"><a href=\"#es6-feature-overviews\" aria-label=\"es6 feature overviews permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>ES6 Feature Overviews</h3>\n<ul>\n<li><a href=\"https://ponyfoo.com/articles/es6\">ES6 Overview in 350 Bullet Points</a><br>\nQuick samples and descriptions of all the various ES6 capabilities</li>\n<li><a href=\"http://es6-features.org/\">ES6 Features Comparison</a><br>\nCode snippets comparing ES6 features with their ES5 equivalents</li>\n<li><a href=\"http://jamesknelson.com/es6-the-bits-youll-actually-use/\">ES6 - The Bits You'll Actually Use</a><br>\nA quick tour through some of the more useful features in ES6</li>\n<li><a href=\"https://auth0.com/blog/a-rundown-of-es6-features/\">A Rundown of Javascript 2015 Features</a><br>\nAn overview of the features in ES6 and how they can be used.</li>\n</ul>\n<h3 id=\"in-depth-details\" style=\"position:relative;\"><a href=\"#in-depth-details\" aria-label=\"in depth details permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>In-Depth Details</h3>\n<ul>\n<li><a href=\"https://ponyfoo.com/articles/tagged/es6-in-depth\">ES6 In Depth</a><br>\nMany articles covering each feature in greater detail</li>\n<li><a href=\"http://exploringjs.com/es6/index.html\">Exploring ES6</a><br>\nA full online book covering every aspect of ES6 in fine detail</li>\n</ul>\n<h2 id=\"react-walkthrough\" style=\"position:relative;\"><a href=\"#react-walkthrough\" aria-label=\"react walkthrough permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>React Walkthrough</h2>\n<p>If you are new to React, try reading these articles in order.</p>\n<h3 id=\"getting-started\" style=\"position:relative;\"><a href=\"#getting-started\" aria-label=\"getting started permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Getting Started</h3>\n<ul>\n<li><a href=\"https://facebook.github.io/react/docs/hello-world.html\">React Documentation: Hello World</a><br>\n<a href=\"https://facebook.github.io/react/tutorial/tutorial.html\">React Documentation: Tutorial</a><br>\nThe official React documentation, recently rewritten with an excellent set of tutorials, explanations, and API information.</li>\n<li><a href=\"https://github.com/facebookincubator/create-react-app\">Create-React-App</a><br>\nThe official project creation tool from the React team. Allows you to set up a new React project, with no configuration work required.</li>\n<li><a href=\"https://hackernoon.com/simple-react-development-in-2017-113bd563691f\">Simple React Development in 2017</a><br>\nAn excellent set of instructions for setting up a React project with minimal fuss and effort needed. Includes links to some useful resources, and info on deploying the app to production.</li>\n<li><a href=\"http://blog.isquaredsoftware.com/2017/02/presentation-react-redux-intro/\">Modern Web Development with React and Redux</a><br>\nAn up-to-date HTML slideshow that introduces React and Redux, discusses why they help make applications easier to write via declarative code and predictable data flow, and demonstrates their basic concepts and syntax. Includes several interactive React component examples.</li>\n<li><a href=\"http://jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webpack/\">Learn Raw React</a><br>\nA ground-up React tutorial that leaves out any other related \"modern\" technologies, Very recommended if you want to skip the buzzwords and acronyms.</li>\n<li><a href=\"https://www.fullstackreact.com/30-days-of-react/\">30 Days of React</a><br>\nA tutorial series that walks you through how to use React, from the ground up, in 30 bite-size articles covering everything from \"What is React?\" to data management to testing and deployment.</li>\n</ul>\n<h3 id=\"data-flow-state-and-props\" style=\"position:relative;\"><a href=\"#data-flow-state-and-props\" aria-label=\"data flow state and props permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Data Flow: “State” and “Props”</h3>\n<ul>\n<li><a href=\"https://daveceddia.com/visual-guide-to-state-in-react/\">A Visual Guide to State in React</a><br>\nDescribes what \"state\" is, what kinds of data should be included into React state, and how state flow relates to component updates.</li>\n<li><a href=\"http://lucybain.com/blog/2016/react-state-vs-pros/\">ReactJS: Props vs State</a><br>\nExplains that \"props\" are data passed in to a component, while \"state\" is data managed inside a component.</li>\n<li><a href=\"http://brewhouse.io/blog/2015/03/24/best-practices-for-component-state-in-reactjs.html\">Best Practices for Component State in React</a><br>\nSome excellent suggestions and approaches for state handling and component structure.</li>\n</ul>\n<h3 id=\"component-patterns\" style=\"position:relative;\"><a href=\"#component-patterns\" aria-label=\"component patterns permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Component Patterns</h3>\n<ul>\n<li><a href=\"http://reactpatterns.com/\">React Patterns</a><br>\nAn excellent list of common patterns for structuring React components, with examples</li>\n<li><a href=\"https://www.kirupa.com/react/component_lifecycle.htm\">The React Component Lifecycle</a><br>\nA useful description of the order and purpose of React’s component lifecycle methods.</li>\n<li><a href=\"https://www.javascriptstuff.com/component-communication/\">8 no-Flux strategies for React component communication</a><br>\nVery helpful list of ways to have React components communicate back and forth</li>\n<li><a href=\"https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0\">Presentational and Container Components</a><br>\nDan Abramov's foundational article on classifying components based on intent and behavior. A must-read for anyone using React.</li>\n<li><a href=\"https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html\">Mixins Considered Harmful</a><br>\nDan Abramov explains why the React team discourages use of mixins, and prefers a pattern called “Higher Order Components” instead</li>\n<li><a href=\"http://slides.com/danabramov/components-react-flux-wip#/\">Components, React, and Flux</a><br>\nA fantastic HTML slideshow that discusses how to organize code as reusable components, and the basic concepts and benefits of a Flux unidirectional architecture</li>\n<li><a href=\"http://banderson.github.io/reactive-component-ui-presentation/#/\">Reactive, Component-Based UIs</a><br>\nAnother fantastic HTML slideshow describing the three principles of React: \"functional over OOP\", \"stateless over stateful\", \"clarity over brevity\" (use arrow keys to advance slides)</li>\n</ul>\n<h3 id=\"function-binding-and-this\" style=\"position:relative;\"><a href=\"#function-binding-and-this\" aria-label=\"function binding and this permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Function Binding and <code>this</code></h3>\n<ul>\n<li><a href=\"https://dmitripavlutin.com/gentle-explanation-of-this-in-javascript/\">Gentle Explanation of <code>this</code> keyword in Javascript</a><br>\nA long and in-depth explanation of the various ways that the <code>this</code> keyword can be defined</li>\n<li><a href=\"https://www.sitepoint.com/inner-workings-javascripts-this-keyword/\">The Inner Workings of Javascript's <code>this</code> keyword</a><br>\n<a href=\"https://www.sitepoint.com/mastering-javascripts-this-keyword/\">Mastering Javascript's <code>this</code> keyword</a><br>\nA two-part article on the ins and outs of <code>this</code>.</li>\n<li><a href=\"http://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react-component-classes/\">Why and How to Bind Methods in your React Component Classes</a><br>\nA good look at function binding in JS, and how it works with React</li>\n<li><a href=\"https://medium.com/@housecor/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56\">React Binding Patterns: 5 Approaches for Handling <code>this</code></a><br>\nDescribes five different ways you can handle binding methods to handle the <code>this</code> keyword correctly</li>\n<li><a href=\"https://www.reddit.com/r/reactjs/comments/54xnao/fat_arrow_vs_autobind_vs_bindbindbindbindbind/d85wj0l\">\"Fat arrow vs autobind vs bindbindbind?”</a><br>\nDan Abramov from the React team gives his thoughts on how to handle method binding.</li>\n</ul>\n<h3 id=\"ajax-requests-and-data-fetching\" style=\"position:relative;\"><a href=\"#ajax-requests-and-data-fetching\" aria-label=\"ajax requests and data fetching permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>AJAX requests and Data Fetching</h3>\n<ul>\n<li><a href=\"https://www.javascriptstuff.com/react-ajax-best-practices/\">React AJAX Best Practices</a><br>\nCovers four ways to approach managing queries and data fetching.</li>\n<li><a href=\"https://daveceddia.com/ajax-requests-in-react/\">AJAX Requests in React: How and Where to Fetch Data</a><br>\nAn overview of where AJAX requests fit into React usage.</li>\n</ul>\n<h3 id=\"immutable-data\" style=\"position:relative;\"><a href=\"#immutable-data\" aria-label=\"immutable data permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Immutable Data</h3>\n<ul>\n<li><a href=\"http://reactkungfu.com/2015/08/pros-and-cons-of-using-immutability-with-react-js/\">Pros and Cons of Using Immutability With React</a><br>\nExcellent description of what immutability is, how to use use these concepts with React, and pros and cons of managing data immutably. While the title refers to React, most of the writing just deals with plain Javascript concepts.</li>\n<li><a href=\"https://daveceddia.com/react-redux-immutability-guide/\">Immutability in React and Redux: The Complete Guide</a><br>\nLearn about side effects and how to avoid them, how to wield immutablity to update objects and arrays in Redux reducers, and the easy way to update state with Immer.</li>\n<li><a href=\"https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns/\">Redux Docs: Structuring Reducers - Immutable Update Patterns</a><br>\nUseful examples for doing proper immutable updates, including common mistakes, proper updates of nested data, updates for arrays, and more. (Helpful for Redux, but not Redux-specific.)</li>\n</ul>\n<h3 id=\"functional-programming\" style=\"position:relative;\"><a href=\"#functional-programming\" aria-label=\"functional programming permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Functional Programming</h3>\n<ul>\n<li><a href=\"http://jaysoo.ca/2016/01/13/functional-programming-little-ideas/\">The Little Idea of Functional Programming</a><br>\nDescribes the three basic principles of FP: \"data in/data out\", \"code as data\", and \"function composition\" all the way down, and demonstrates transforming some data. Has some very helpful graphics and illustrations.</li>\n<li><a href=\"http://blog.jenkster.com/2015/12/what-is-functional-programming.html\">What Is Functional Programming?</a><br>\nDescribes how side effects and \"hidden inputs\" add complexity to code, in very clear terms.</li>\n</ul>\n<h3 id=\"forms-and-inputs\" style=\"position:relative;\"><a href=\"#forms-and-inputs\" aria-label=\"forms and inputs permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Forms and Inputs</h3>\n<ul>\n<li><a href=\"http://goshakkk.name/controlled-vs-uncontrolled-inputs-react/\">Controlled and uncontrolled form inputs in React don't have to be complicated</a><br>\nA great summary of what controlled and uncontrolled inputs are, what each approach looks like, and how to handle values from different types of inputs.</li>\n<li><a href=\"http://lorenstewart.me/2016/10/31/react-js-forms-controlled-components/\">React.js Forms: Controlled Components</a><br>\nAn excellent article that describes the concept of controlled components, and demonstrates examples of how to interact with different types of form inputs</li>\n<li><a href=\"http://jamesknelson.com/learn-raw-react-ridiculously-simple-forms/\">Learn Raw React: Ridiculously Simple Forms</a><br>\nCovers the basics of implementing form rendering, updates, and validation, in plain JS</li>\n</ul>\n<h3 id=\"styles\" style=\"position:relative;\"><a href=\"#styles\" aria-label=\"styles permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Styles</h3>\n<ul>\n<li><a href=\"https://www.kirupa.com/react/styling_in_react.htm\">Styling in React</a><br>\nAn introduction to using React's built-in inline styling abilities</li>\n<li><a href=\"https://www.javascriptstuff.com/how-to-style-react/\">What to use for React styling?</a><br>\nAn excellent overview of the four major ways to deal with styles in React, and what the various tools are. Includes a decision tree to help you decide what to use.</li>\n</ul>\n<h3 id=\"animation\" style=\"position:relative;\"><a href=\"#animation\" aria-label=\"animation permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Animation</h3>\n<ul>\n<li><a href=\"https://greensock.com/react\">Getting Started with React and GSAP</a><br>\nAn article focused on beginner and intermediate levels React developers, on creating animations using the GreenSock Animation Platform (GSAP), including live editable samples. Also includes links to other GSAP learning resources as well.</li>\n</ul>\n<h2 id=\"redux\" style=\"position:relative;\"><a href=\"#redux\" aria-label=\"redux permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Redux</h2>\n<h3 id=\"getting-started-1\" style=\"position:relative;\"><a href=\"#getting-started-1\" aria-label=\"getting started 1 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Getting Started</h3>\n<ul>\n<li><a href=\"https://redux.js.org/\">Redux Docs</a><br>\nThe official Redux documentation. Contains an excellent tutorial that walks you through “here’s what you want to do, and how we came up with this”, as well as recipes for more advanced topics. Be sure to read through the FAQ for answers to common questions and links to further information.</li>\n<li><a href=\"https://egghead.io/series/getting-started-with-redux\">Getting Started with Redux - Video Series</a><br>\n<a href=\"https://github.com/tayiorbeii/egghead.io_redux_course_notes\">Getting Started with Redux - Course Notes</a><br>\nDan Abramov, the creator of Redux demonstrates various concepts in 30 short (2-5 minute) videos. The linked Github repo contains notes and transcriptions of the videos.</li>\n<li><a href=\"https://egghead.io/series/building-react-applications-with-idiomatic-redux\">Building React Applications with Idiomatic Redux - Video Series</a>\n<a href=\"https://github.com/tayiorbeii/egghead.io_idiomatic_redux_course_notes\">Building React Applications with Idiomatic Redux - Course Notes</a><br>\nDan Abramov's second video tutorial series, continuing directly after the first. Includes lessons on store initial state, using Redux with React Router, using \"selector\" functions, normalizing state, use of Redux middleware, async action creators, and more. The linked Github repo contains notes and transcriptions of the videos.</li>\n<li><a href=\"https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6\">A Cartoon Guide to Redux</a><br>\nA nifty introduction to Redux’s concepts using cartoon explanations</li>\n<li><a href=\"http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/\">Redux: From Twitter Hype to Production</a><br>\nAn extremely well-produced slideshow that visually steps through core Redux concepts, usage with React, project organization, and side effects with thunks and sagas. Has some absolutely fantastic animated diagrams demonstrating how data flows through a React+Redux architecture.</li>\n<li><a href=\"https://css-tricks.com/learning-react-redux/\">Leveling Up with React: Redux</a><br>\nA very well-written introduction to Redux and its related concepts, with some useful cartoon-ish diagrams.</li>\n<li><a href=\"https://gist.github.com/gaearon/1d19088790e70ac32ea636c025ba424e\">Connect.js explained</a><br>\nA very simplified version of React Redux's <code>connect()</code> function that illustrates the basic implementation</li>\n</ul>\n<h3 id=\"ajax-timeouts-and-other-side-effects\" style=\"position:relative;\"><a href=\"#ajax-timeouts-and-other-side-effects\" aria-label=\"ajax timeouts and other side effects permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>AJAX, Timeouts, and other “Side Effects”</h3>\n<ul>\n<li><a href=\"http://stackoverflow.com/a/35415559/62937\">Dispatching Redux Actions with a Timeout / </a><br>\n<a href=\"http://stackoverflow.com/a/34599594/62937\">Why do we need middleware for async flow in Redux?</a><br>\nA pair of answers from Dan Abramov, explaining how “side effects” like AJAX calls and asynchronous behavior fit into Redux</li>\n<li><a href=\"https://daveceddia.com/what-is-a-thunk/\">What the heck is a \"thunk\"?</a><br>\nAn explanation of the word “thunk”, and how thunks can be used to do things like AJAX calls.</li>\n</ul>\n<h3 id=\"middleware\" style=\"position:relative;\"><a href=\"#middleware\" aria-label=\"middleware permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Middleware</h3>\n<ul>\n<li><a href=\"http://jonnyreeves.co.uk/2016/redux-middleware/\">Redux Middleware</a><br>\nA tutorial describing how Redux compares to typical \"MVC\", what a \"middleware\" is, what they can do, and how you can test them.</li>\n<li><a href=\"http://blog.krawaller.se/posts/exploring-redux-middleware/\">Exploring Redux Middlewares</a><br>\nUnderstanding middlewares through a series of small experiments</li>\n</ul>\n<h3 id=\"debugging\" style=\"position:relative;\"><a href=\"#debugging\" aria-label=\"debugging permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Debugging</h3>\n<ul>\n<li><a href=\"https://code-cartoons.com/hot-reloading-and-time-travel-debugging-what-are-they-3c8ed2812f35\">Hot reloading and time travel debugging: what are they?</a><br>\nA short but informative article describing these concepts and why they're useful, with cartoon illustrations</li>\n<li><a href=\"https://onsen.io/blog/react-redux-devtools-with-time-travel/\">Time Travel in React Redux apps using the Redux DevTools</a><br>\nExamples of configuring a Redux store to use the DevTools enhancers, and using both the DevTools components and the browser extension for debugging.</li>\n</ul>\n<h3 id=\"writing-reducers\" style=\"position:relative;\"><a href=\"#writing-reducers\" aria-label=\"writing reducers permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Writing Reducers</h3>\n<ul>\n<li><a href=\"https://redux.js.org/recipes/structuring-reducers/structuring-reducers/\">Redux Docs: Structuring Reducers</a><br>\nComprehensive information on writing reducers and structuring data, covering reducer composition, use of <code>combineReducers</code>, normalizing data, proper immutable updating, and more.</li>\n<li><a href=\"http://randycoulman.com/blog/2016/11/22/taking-advantage-of-combinereducers/\">Taking Advantage of <code>combineReducers</code></a><br>\nExamples of using <code>combineReducers</code> multiple times to produce a state tree, and some thoughts on tradeoffs in various approaches to reducer logic.</li>\n</ul>\n<h3 id=\"selectors-and-normalization\" style=\"position:relative;\"><a href=\"#selectors-and-normalization\" aria-label=\"selectors and normalization permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Selectors and Normalization</h3>\n<ul>\n<li><a href=\"https://medium.com/@adamrackis/querying-a-redux-store-37db8c7f3b0f\">Querying a Redux Store</a><br>\nA look at best practices for organizing and storing data in Redux, including normalizing data and use of selector functions.</li>\n<li><a href=\"https://medium.com/@adamrackis/normalizing-redux-stores-for-maximum-code-reuse-ae6e3844ae95\">Normalizing Redux Stores for Maximum Code Reuse</a><br>\nThoughts on how normalized Redux stores enable some useful data handling approaches, with examples of using selector functions to denormalize hierarchical data.</li>\n<li><a href=\"http://blog.isquaredsoftware.com/2016/10/practical-redux-part-1-redux-orm-basics/\">Practical Redux: Redux-ORM Basics</a><br>\n<a href=\"http://blog.isquaredsoftware.com/2016/10/practical-redux-part-2-redux-orm-concepts-and-techniques/\">Practical Redux: Redux-ORM Concepts and Techniques</a><br>\nA look at how Redux-ORM can help manage normalized data in a Redux store, including use cases, basic usage, key concepts, and advanced techniques.</li>\n</ul>\n<h2 id=\"webpack\" style=\"position:relative;\"><a href=\"#webpack\" aria-label=\"webpack permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Webpack</h2>\n<h3 id=\"getting-started-2\" style=\"position:relative;\"><a href=\"#getting-started-2\" aria-label=\"getting started 2 permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Getting Started</h3>\n<ul>\n<li><a href=\"https://webpack.js.org/\">Webpack Documentation</a><br>\nWebpack's new documentation site, explaining concepts, configuration, and recipes</li>\n<li><a href=\"https://youtu.be/WQue1AN93YU\">Webpack from First Principles</a><br>\nA screencast video explaining what Webpack is and why you would want to use it</li>\n<li><a href=\"https://x-team.com/blog/webpack-can-absolute-beginners/\">What is Webpack and what can it do for you?</a><br>\nA plain-English explanation of what Webpack is and what problems it can help solve.</li>\n<li><a href=\"http://survivejs.com/webpack/introduction\">SurviveJS - Webpack</a><br>\nA full book online book that covers setting up Webpack for both development and production. Also touches topics such as ESLint and npm.</li>\n</ul>\n<h3 id=\"configuration-and-concepts\" style=\"position:relative;\"><a href=\"#configuration-and-concepts\" aria-label=\"configuration and concepts permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Configuration and Concepts</h3>\n<ul>\n<li><a href=\"https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9\">Webpack: The Confusing Parts</a><br>\nA great simplification and breakdown of the different pieces that make up a Webpack configuration: dev vs prod, CLI vs dev-server, the \"entry\" option, the \"output\" option / \"path\" vs \"publicPath\", loaders and configuration, Babel, plugins, and path resolving.</li>\n<li><a href=\"https://docs.google.com/presentation/d/10mIapWjv1pyUQaMv6G8MCdoe9OK2Ey8zz-CLkHuFdRI\">Angular + Webpack &#x3C; 3</a><br>\nA long presentation that describes Webpack and its core concepts in depth. A few parts are Angular-centric, but still an extremely clear and informative set of slides. Covers topics like the \"entry\" and \"output\" options, \"loaders\", and \"plugins\".</li>\n<li><a href=\"http://presentations.survivejs.com/advanced-webpack/\">Advanced Webpack</a><br>\nAn in-depth presentation that walks through Webpack concepts, terms, configuration, and usage. Covers a number of advanced topics, and very worth reading.</li>\n</ul>\n<h3 id=\"build-optimization\" style=\"position:relative;\"><a href=\"#build-optimization\" aria-label=\"build optimization permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Build Optimization</h3>\n<ul>\n<li><a href=\"http://sokra.github.io/slides/frontend-optimize\">Advanced Frontend Optimization with Webpack</a><br>\nSlides by Webpack’s original author, describing ways to improve Webpack builds.</li>\n<li><a href=\"https://formidable.com/open-source/playbook/\">Formidable Playbook</a><br>\nFormidable Labs describes their preferred approaches for configuring Webpack, including optimization approaches.</li>\n</ul>\n<h3 id=\"hot-module-reloading\" style=\"position:relative;\"><a href=\"#hot-module-reloading\" aria-label=\"hot module reloading permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Hot Module Reloading</h3>\n<ul>\n<li><a href=\"https://www.javascriptstuff.com/why-use-hmr/\">HMR Tutorial: Do more in less time with Webpack HMR</a><br>\n<a href=\"https://www.javascriptstuff.com/understanding-hmr/\">HMR Tutorial: Understanding Webpack HMR</a><br>\n<a href=\"https://www.javascriptstuff.com/3-ways-webpack-hmr/\">HMR Tutorial: 3 Ways to Set Up Webpack with HMR</a><br>\n<a href=\"https://www.javascriptstuff.com/webpack-hmr-tutorial/\">HMR Tutorial: Webpack HMR Tutorial</a><br>\nA very readable and informative series of articles that explains what HMR is, what benefits it gives, and how to use it.</li>\n<li><a href=\"https://ctheu.com/2015/12/29/webpack-hot-reloading-and-react-how/\">Webpack Hot Reloading and React</a><br>\nAn explanation of how Hot Reloading works, and how the various pieces fit together.</li>\n</ul>","frontmatter":{"title":"Learning","sidebar":true},"headings":[{"depth":2,"value":"Basic Concepts and Learning Approaches"},{"depth":3,"value":"Overviews of Javascript Tools and Concepts"},{"depth":3,"value":"Suggested Learning Approaches"},{"depth":2,"value":"Learning Core Javascript (ES5)"},{"depth":3,"value":"General Resources"},{"depth":3,"value":"Books"},{"depth":2,"value":"Learning Current Javascript (ES6+)"},{"depth":3,"value":"ES6 Feature Overviews"},{"depth":3,"value":"In-Depth Details"},{"depth":2,"value":"React Walkthrough"},{"depth":3,"value":"Getting Started"},{"depth":3,"value":"Data Flow: “State” and “Props”"},{"depth":3,"value":"Component Patterns"},{"depth":3,"value":"Function Binding and this"},{"depth":3,"value":"AJAX requests and Data Fetching"},{"depth":3,"value":"Immutable Data"},{"depth":3,"value":"Functional Programming"},{"depth":3,"value":"Forms and Inputs"},{"depth":3,"value":"Styles"},{"depth":3,"value":"Animation"},{"depth":2,"value":"Redux"},{"depth":3,"value":"Getting Started"},{"depth":3,"value":"AJAX, Timeouts, and other “Side Effects”"},{"depth":3,"value":"Middleware"},{"depth":3,"value":"Debugging"},{"depth":3,"value":"Writing Reducers"},{"depth":3,"value":"Selectors and Normalization"},{"depth":2,"value":"Webpack"},{"depth":3,"value":"Getting Started"},{"depth":3,"value":"Configuration and Concepts"},{"depth":3,"value":"Build Optimization"},{"depth":3,"value":"Hot Module Reloading"}]}},"pageContext":{"id":"15712d73-cbfd-5c81-a345-43013d04d411"}},"staticQueryHashes":["3248290905"]}