├── .github └── PULL_REQUEST_TEMPLATE.md ├── README.md ├── basic-concepts.md ├── boilerplates-and-starter-kits.md ├── community-resources.md ├── es6-features.md ├── flux-tutorials.md ├── framework-comparisons.md ├── functional-programming.md ├── git-resources.md ├── immutable-data.md ├── javascript-resources.md ├── mobx-tutorials.md ├── node-js-and-npm.md ├── project-structure.md ├── pros-cons-discussion.md ├── react-ajax.md ├── react-architecture.md ├── react-component-composition.md ├── react-component-patterns.md ├── react-deployment.md ├── react-forms.md ├── react-implementation.md ├── react-native.md ├── react-performance.md ├── react-redux-architecture.md ├── react-redux-testing.md ├── react-routing.md ├── react-server-rendering.md ├── react-state-management.md ├── react-styling.md ├── react-techniques.md ├── react-tutorials.md ├── redux-architecture.md ├── redux-middleware.md ├── redux-reducers-selectors.md ├── redux-side-effects.md ├── redux-techniques.md ├── redux-tutorials.md ├── redux-ui-management.md ├── redux-without-react.md ├── static-typing.md ├── thinking-in-react-and-flux.md ├── tips-and-best-practices.md ├── using-react-with-es6.md ├── webpack-advanced-techniques.md └── webpack-tutorials.md /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | # Formatting 2 | 3 | Please follow the existing formatting for each entry. In order to get newlines without paragraph breaks, each entry should have two spaces at the end of the line after both the URL and the title. Also, two-space indents before the URL and the description. Example: 4 | 5 | ```markdown 6 | - **Link Title** 7 | http://example.com 8 | Link description here 9 | ``` 10 | 11 | Result: 12 | 13 | - **Link Title** 14 | http://example.com 15 | Link description here 16 | 17 | Please do _not_ strip whitespace for existing entries! 18 | -------------------------------------------------------------------------------- /basic-concepts.md: -------------------------------------------------------------------------------- 1 | ### Basic Concepts, Terms, and Overviews 2 | 3 | 4 | #### Modern Javascript Terms and Tooling Overviews 5 | 6 | - **State of the Javascript Landscape in 2016** 7 | http://www.infoq.com/articles/state-of-javascript-2016 8 | A very high-level summary of the important terms and technologies that are used in modern Javascript development. 9 | 10 | - **The Hitchiker's Guide to Modern JS Tooling** 11 | http://reactkungfu.com/2015/07/the-hitchhikers-guide-to-modern-javascript-tooling/ 12 | A great overview of many of the most common build tools, package managers, test frameworks, and code quality tools currently in use 13 | 14 | - **State of the Art Javascript in 2016** 15 | https://medium.com/javascript-and-opinions/state-of-the-art-javascript-in-2016-ab67fc68eb0b 16 | An opinionated list of what tools and libraries a modern JS development stack should include, plus links to further resources. 17 | 18 | - **The Hitchhiker's Guide to the Modern Front End Development Workflow** 19 | http://marcobotto.com/the-hitchhikers-guide-to-the-modern-front-end-development-workflow/ 20 | A useful overview of the many categories and types of tools used in modern web development. 21 | 22 | - **Simplified Javascript Jargon** 23 | http://jargon.js.org/ 24 | An alphabetical list of common terms in the JS world, with very short definitions in the main list and slightly longer descriptions linked for each term. 25 | 26 | - **Modern Javascript Development** 27 | https://mgadams.com/modern-javascript-development-part-1-d271f3790c1c 28 | An overview of how browsers, Javascript, and Javascript frameworks have evolved into today's landscape of tools and technologies 29 | 30 | - **Making Sense of Front-End Build Tools** 31 | https://medium.freecodecamp.com/making-sense-of-front-end-build-tools-3a1b3a87043b 32 | An approach to understanding the variety of build tools by categorizing them as "installing" vs "doing" 33 | 34 | - **The State of Javascript in 2017: Survey Results** 35 | https://stateofjs.com/ 36 | Results from a survey of over 23000 developers, covering use of Javascript tools, technologies, and concepts. 37 | 38 | - **The (R)Evolution of Web Development** 39 | http://blog.isquaredsoftware.com/presentations/2016-10-revolution-of-web-dev/ 40 | A slideshow giving an overview of web dev history and modern web dev tools, technologies, and trends. 41 | 42 | - **The State of Javascript** 43 | https://youtu.be/5NIL3Epadj0 44 | A talk by Jack Franklin, summarizing the state of modern web development. 45 | 46 | - **Javascript Package Managers 101** 47 | https://medium.com/@shubheksha/javascript-package-managers-101-9afd926add0a 48 | An overview of what packages and package managers are, some related terms, and how these tools work. 49 | 50 | - **2016 Javascript Rising Stars** 51 | https://risingstars2016.js.org/ 52 | A summary of which JS projects gained the most popularity in 2016, based on new Github stars. Serves as a useful overview of tool categories and popular tools 53 | 54 | - **A Brief History of Javascript** 55 | https://auth0.com/blog/a-brief-history-of-javascript/ 56 | Despite the name, it's actually an extended, in-depth history of Javascript's creation and evolution over time. 57 | 58 | - **Glossary of Modern Javascript Concepts: Part 1** 59 | https://auth0.com/blog/glossary-of-modern-javascript-concepts/ 60 | https://auth0.com/blog/glossary-of-modern-javascript-concepts-part-2/ 61 | An excellent overview and introduction to a number of concepts that are used in modern applications. Part 1 covers topics like "purity", "state", "immutability", "functional programming", and "observables". Part 2 looks at ideas like "1-way data flow vs 2-way binding", "scope", "components", "JIT/AOT compilation", and more. 62 | 63 | - **The Tools of the JS Trade** 64 | https://dev.to/kayis/the-tools-of-the-js-trade 65 | A helpful overview of commonly used JS development tools, grouped by type, with short descriptions for each. 66 | 67 | - **Choosing a frontend framework in 2017** 68 | https://medium.com/this-dot-labs/building-modern-web-applications-in-2017-791d2ef2e341 69 | An excellent look at the history of the major client-side web frameworks, how they developed over the last few years, and some suggestions for when each framework might be appropriate. 70 | 71 | - **The melting pot of JavaScript** 72 | https://increment.com/development/the-melting-pot-of-javascript/ 73 | Dan Abramov discusses the apparent messiness of the JavaScript ecosystem, why there's a proliferation of tools and libraries, the complexity of configuring those tools, and how providing good defaults can lead to a better experience for the community. 74 | 75 | - **Modern JavaScript Explained for Dinosaurs** 76 | https://medium.com/@peterxjang/modern-javascript-explained-for-dinosaurs-f695e9747b70 77 | Recaps the history of how JavaScript tools have evolved to what they are today in 2017, to provide historical context. Includes examples of how different tools were used and and what problems they help solve. 78 | 79 | - **A Brief, Incomplete History of JavaScript** 80 | https://closebrace.com/articles/2017-09-11/a-brief-incomplete-history-of-javascript 81 | An excellent history lesson that recaps the four major eras of web development and JS usage: the Early Era, the jQuery Era, the Single Page App Era, and the Modern Era. 82 | 83 | - **Frontend in 2017: The important parts** 84 | https://blog.logrocket.com/frontend-in-2017-the-important-parts-4548d085977f 85 | An overview of major trends, tools, and concepts in the front-end web dev world in 2017. Very good look at what's popular, what's changing, and how these pieces fit together. 86 | 87 | 88 | #### Suggested Learning Approaches 89 | 90 | - **A Study Plan to Cure Javascript Fatigue** 91 | https://medium.freecodecamp.com/a-study-plan-to-cure-javascript-fatigue-8ad3a54f2eb1 92 | The author of the "State of JS 2016" survey gives an excellent step-by-step study plan to use when learning the Javascript ecosystem. 93 | 94 | - **React How-To** 95 | https://github.com/petehunt/react-howto 96 | Pete 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) 97 | 98 | - **Timeline for Learning React** 99 | https://daveceddia.com/timeline-for-learning-react/ 100 | https://daveceddia.com/how-to-learn-react/ 101 | Another high-level suggested timeline for how to approach learning React and related technologies. 102 | 103 | - **React Roadmap** 104 | https://github.com/ericdouglas/react-roadmap 105 | A curated list of free resources to master React Development, in suggested learning order 106 | 107 | - **React FAQ** 108 | https://github.com/timarney/react-faq 109 | A collection of links to help answer your questions about React, including how to get started 110 | 111 | - **Front-End Developer Handbook** 112 | https://frontendmasters.gitbooks.io/front-end-handbook-2017/content/ 113 | A guide that anyone could use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it. 114 | 115 | - **Top Javascript Frameworks and Topics to Learn in 2017** 116 | https://medium.com/javascript-scene/top-javascript-frameworks-topics-to-learn-in-2017-700a397b711 117 | Eric Elliott gives some solid advice on what concepts, tools, and technologies are most valuable to learn today, as well as what related technologies are useful but optional. 118 | 119 | - **How to Learn React: A Five-Step Plan** 120 | https://www.lullabot.com/articles/how-to-learn-react 121 | A good set of suggested steps to follow and tools to use for learning React and Redux. 122 | 123 | - **Ten Things a Serious JavaScript Developer Should Learn** 124 | https://benmccormick.org/2017/07/19/ten-things-javascript/ 125 | A well-written, excellent collection of advice for mid-level JS developers, listing important topics that they should be familiar with. 126 | 127 | - **So you completed the official React tutorial. Now what?** 128 | https://goshakkk.name/next-steps-official-react-tutorial/ 129 | General advice on how to approach learning new things in general without getting overloaded, as well as specific advice for concepts and ideas to learn about after grasping the basics of React. 130 | 131 | - **5 practical tips to finally learn React in 2018** 132 | https://goshakkk.name/tips-finally-learn-react/ 133 | Common-sense suggestions for simplifying the React learning process, including skipping buzzwords and hardcoding data. 134 | 135 | - **Spellbook of Modern Web Dev** 136 | https://github.com/dexteryy/spellbook-of-modern-webdev#gui-framework 137 | A large list of categorized resources for dozens of web development-related topics. 138 | 139 | 140 | #### General Suggestions for Learning 141 | 142 | - **Learn the Javascript Ecosystem one package at a time** 143 | http://andrewhfarmer.com/npm-sandboxing/ 144 | Some tips for how to approach learning the JS ecosystem without being overwhelmed. 145 | 146 | - **On being overwhelmed with our fast paced industry** 147 | http://wesbos.com/overwhelmed-with-web-development/ 148 | Wes Bos gives advice on how to cut down on noise, avoid "new shiny" syndrome, and still improve your web dev skills 149 | 150 | - **How to Learn Web Frameworks** 151 | https://medium.com/shopify-ux/how-to-learn-web-frameworks-9d447cb71e68 152 | Some great advice on how to approach learning web development and frameworks, especially if you're a junior developer. 153 | 154 | - **How to keep up: "First do it, then do it right, then do it better"** 155 | https://medium.com/@addyosmani/totally-get-your-frustration-ea11adf237e3 156 | Advice from Addy Osmani on how to cope with learning new JS technologies 157 | 158 | - **"Ask HN: Overwhelmed with learning front-end, how do I proceed?"** 159 | https://news.ycombinator.com/item?id=12882816 160 | A discussion thread with numerous suggestions for ways to learn front-end technologies. 161 | 162 | - **Deciding What to Learn / When the Latest Tech Makes You Feel Dumb** 163 | http://gedd.ski/post/what-not-to-learn/ 164 | http://gedd.ski/post/when-tech-makes-you-feel-dumb/ 165 | A pair of short but excellent posts giving advice on how to deal with tech and information overload. 166 | 167 | - **Redux vs MobX vs Flux vs... Do you even need that?** 168 | http://goshakkk.name/redux-vs-mobx-vs-flux-etoomanychoices/ 169 | Advice on avoiding choice overload when learning a toolset like React, by simplifying and just focusing on one new thing at a time. 170 | 171 | - **How to avoid Javascript fatigue and sleep well at night** 172 | https://www.javascriptfatigue.club/blog/2016/11/29/how-to-avoid-javascript-fatigue-and-sleep-well-at-night 173 | A talk giving suggestions for dealing with learning tools and techologies, including knowing when to stop reading, following specific experts, learning patterns, and focusing on what the real problem is you're trying to solve 174 | 175 | - **How to Manage Javascript Fatigue** 176 | https://auth0.com/blog/how-to-manage-javascript-fatigue/ 177 | A description of what "JS fatigue" means in practice, and advice for managing it, including "picking battles", "make something interesting", and "be aware of common concepts". 178 | 179 | - **Javascript is a buffet, not the enemy** 180 | https://scriptconf.org/blog/javascript-is-a-buffet-not-the-enemy-chris-heilmann/ 181 | An excellent presentation from long-time browser developer Chris Heilmann, offering suggestions for dealing with the modern Javascript world using a buffet as a metaphor. 182 | 183 | - **Are we making the web too complicated?** 184 | http://seldo.com/weblog/2017/05/21/are_we_making_the_web_too_complicated 185 | Fantastic thoughts from Laurie Voss on why modern web development appears to be complicated: expectations for web usage have changed, and developers are trying to adapt. 186 | 187 | - **Keeping Up With the JavaScript World** 188 | https://daveceddia.com/keeping-up-with-javascript/ 189 | Dave Ceddia offers some great advice on how to manage learning about what's new and changing in the JS community, including sources to follow for keeping up with what's new, choosing what to learn, and how to tackle actually learning things. -------------------------------------------------------------------------------- /boilerplates-and-starter-kits.md: -------------------------------------------------------------------------------- 1 | ### Boilerplates and Starter Kits 2 | 3 | 4 | #### Suggested Starter Kits for Learners 5 | 6 | **NOTE**: It's easy for someone new to the React/Redux ecosystem to get confused by some of these boilerplates and starter kits. Many of them include dozens of specifically-configured libraries, and it can be hard for a learner to understand how all the pieces fit together. If you're trying to learn React or Redux for the first time, it's suggested that you start with reading tutorials and articles first, until you have a reasonable understanding of how things work. However, if you _do_ want to use a starter kit as a learning tool, I specifically suggest the ones in this section. They are simpler, easier to understand, and well documented. In particular, Create-React-App is highly recommended. Also see [Should I use a boilerplate with React?](http://blog.jakoblind.no/should-i-use-a-boilerplate-for-react/) for similar thoughts. 7 | 8 | - **Create-React-App** 9 | https://github.com/facebookincubator/create-react-app 10 | An "official", no-visible-configuration tool to instantly create a React project with bundling, minification, and basic CSS and image handling all set up and ready to go. If you outgrow the basic features, the underlying tools can be exposed and modified using a one-time "eject" command. It's a great tool to use to when learning React, or just to set up a project quickly. 11 | 12 | - **Simple Redux Boilerplate** 13 | https://github.com/tsaiDavid/simple-redux-boilerplate 14 | Excellent example. Includes enough to be useful, but not too many dependencies so it's confusing. 15 | 16 | - **Web-App** 17 | https://github.com/cesarandreu/web-app 18 | Another very good learning resource. Heavily commented Webpack config, good default settings. 19 | 20 | - **React Laboratory** 21 | https://github.com/tstringer/react-laboratory 22 | An absolute bare-minimum project. One tiny Webpack config, one JS file, one component. Pretty much the smallest possible setup to use React and JSX with Webpack. 23 | 24 | - **TypeScript React Starter** 25 | https://github.com/Microsoft/TypeScript-React-Starter 26 | A quick start guide to setting up a TypeScript project using a TS-specific variation on Create-React-app's `react-scripts` package. Includes instructions for adding TSLint, Jest, Enzyme, and Redux. 27 | 28 | 29 | 30 | #### Full-Featured Starter Kits 31 | 32 | - **React-Redux Universal Hot Example** 33 | https://github.com/erikras/react-redux-universal-hot-example 34 | Has the kitchen sink, and more. Popular, but maybe too many things stuffed into one repo. 35 | 36 | - **React-Redux Starter Kit** 37 | https://github.com/davezuko/react-redux-starter-kit 38 | Generally recommended. Well laid out, good documentation. Worth looking at. Has become significantly more complex over time as well. 39 | 40 | - **react-boilerplate** 41 | https://github.com/mxstbr/react-boilerplate 42 | A highly scalable, offline-first foundation for your next project with the best DX and a focus on performance and best practices. Excellent documentation. 43 | 44 | - **React Starter Kit** 45 | https://github.com/kriasoft/react-starter-kit 46 | A full-featured universal/isomorphic starter kit, with good documentation 47 | 48 | - **React Slingshot** 49 | https://github.com/coryhouse/react-slingshot 50 | A flexible starter kit designed to illustrate best practices. 51 | 52 | 53 | #### Specific Concept Demonstrations 54 | 55 | - **Ultimate Hot-Reloading Example** 56 | https://github.com/glenjamin/ultimate-hot-reloading-example 57 | Demonstrates hot-reloading of pretty much everything, both client-side and server-side 58 | 59 | - **Universal-JS** 60 | https://github.com/colinmeinke/universal-js 61 | A well-written universal starter with docs explaining choices, and plenty of example tests. 62 | 63 | - **React + Electron Boilerplate** 64 | https://github.com/chentsulin/electron-react-boilerplate 65 | Electron application boilerplate based on React, Redux, React Router, Webpack, React Transform HMR for rapid application development 66 | 67 | - **React-Redux-Cesium-Testing Demo** 68 | https://github.com/markerikson/react-redux-cesium-testing-demo 69 | Demonstrates a number of useful bits of project configuration, including offline tests with Mocha+JSDOM, live-reloading tests in the browser using mocha-loader, async loading of React components, use of the Cesium 3D globe library with React and Webpack, and using the Shrinkpack tool to manage dependencies inside the repo. Not intended for production use, but could serve as a useful example. 70 | 71 | - **React Static Plate** 72 | https://github.com/webyak/react-static-plate 73 | Build static sites with React to host on Amazon S3, Github Pages, Surge, etc. An interesting alternative to other static page generation tools. 74 | 75 | 76 | #### Other 77 | 78 | - **React Starter Project Search Tool** 79 | http://andrewhfarmer.com/starter-project/ 80 | Search for starter kits with/without specific libraries and sort by GitHub stars, number of dependencies, or recently updated. 81 | 82 | - **Awesome React Boilerplates** 83 | http://habd.as/awesome-react-boilerplates/ 84 | Another good curated list of boilerplates for both React and React Native 85 | 86 | - **React Community: Starter Kit** 87 | https://reactjs.org/community/starter-kits.html 88 | A list of starter kits that are officially recommended by the React team, as well as other kits from the community. 89 | 90 | 91 | 92 | #### React Project Setup 93 | 94 | - **Simple React Development in 2018** 95 | https://hackernoon.com/simple-react-development-in-2017-113bd563691f 96 | An 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. 97 | 98 | - **Taming the React Setup** 99 | http://developer.telerik.com/featured/taming-react-setup/ 100 | Describes seven different setups for writing React code, from simple (plain react.js loaded into the browser), to complex (use of Babel with Webpack or JSPM). 101 | 102 | - **Kick-Start React Projects with Create-React-App** 103 | https://www.sitepoint.com/create-react-app/ 104 | Some quick tips on how to use Create-React-App to create a new React project and tweak the setup. 105 | 106 | - **Getting Started with React the Easy Way** 107 | http://codeutopia.net/blog/2016/01/10/getting-started-with-react-the-easy-way/ 108 | Shows the simplest way to load React into a web page and start using it 109 | 110 | - **The Minimal React Webpack Babel Setup** 111 | https://www.robinwieruch.de/minimal-react-webpack-babel-setup/ 112 | A clear walkthrough for the key steps needed to set up a useful Webpack+Babel config from scratch for a productive React dev environment. Very helpful if you choose not to use Create-React-App. 113 | 114 | - **Hipster Boilerplate** 115 | https://github.com/Jordaanm/hipster-boilerplate 116 | A learning-oriented repo that builds up a small project config step-by-step. Each commit adds one new feature or capability (Babel+ES6, Webpack bundling, a small Redux app, LESS styling, routing, and hot-reloading). 117 | 118 | - **JavaScript Stack from Scratch** 119 | https://github.com/verekia/js-stack-from-scratch 120 | This is a minimalistic and straight to the point guide to assembling a JavaScript stack. It teaches you how to set up ES6, Babel, Gulp, ESLint, React, Redux, Webpack, Immutable, Mocha, Chai, Sinon, and Flow. It requires some general programming knowledge, and JavaScript basics. It focuses on wiring all these tools together and giving you the simplest possible example for each tool. You can see this tutorial as a way to write your own boilerplate from scratch. 121 | 122 | - **React Ecosystem Setup - Step-By-Step** 123 | https://codeburst.io/react-ecosystem-setup-step-by-step-walkthrough-721ff45a7fc1 124 | An in-depth walkthrough that shows to to set up Webpack and Babel, and explains why each bit of configuration is needed. 125 | 126 | - **Always up-to-date Guide for Modern JavaScript Development** 127 | https://mvilrokx.gitbooks.io/always-up-to-date-guide-for-modern-javascript-dev/content/ 128 | An opinionated guide for setting up a modern JS development environment. 129 | 130 | - **Setup a React Environment using Webpack and Babel** 131 | https://scotch.io/tutorials/setup-a-react-environment-using-webpack-and-babel 132 | A tutorial that teaches how to set up a basic Webpack 2 + Babel config from scratch. 133 | 134 | - **Setting up a Front-End Project** 135 | https://medium.com/@Torwori/setting-up-a-front-end-project-part-1-d7fbaaaa5e14 136 | https://medium.com/@Torwori/setting-up-a-front-end-project-part-2-cbbae56ffd15 137 | https://medium.com/@Torwori/setting-up-a-front-end-project-part-3-38f1681d310b 138 | https://medium.com/@Torwori/setting-up-a-front-end-project-part-4-b6fe32e58e5 139 | An in-depth tutorial series covering setup and configuration of many tools, including Git, Webpack, Babel, ESLint, and Typescript. 140 | 141 | - **Setting up Webpack, Babel, and React from scratch in 2017** 142 | https://stanko.github.io/webpack-babel-react-revisited/ 143 | A step-by-step tutorial that demonstrates each piece of the process needed to set up a build system from scratch. 144 | 145 | - **How to set up React, Webpack 3, and Babel, in 2017** 146 | https://www.valentinog.com/blog/react-webpack-babel/ 147 | A clear explanation of how to create a basic Webpack+Babel setup for a React app, with descriptions of why each step is necessary. -------------------------------------------------------------------------------- /community-resources.md: -------------------------------------------------------------------------------- 1 | ### Community Resources 2 | 3 | 4 | #### Link Lists 5 | 6 | - **Awesome React** 7 | https://github.com/enaqx/awesome-react 8 | A collection of awesome things regarding the React ecosystem. 9 | 10 | - **Awesome React Native** 11 | https://github.com/jondot/awesome-react-native 12 | An "awesome" type curated list of React Native components, news, tools, and learning material 13 | 14 | - **Redux Ecosystem Links** 15 | https://github.com/markerikson/redux-ecosystem-links 16 | A categorized list of Redux-related addons, libraries, and utilities 17 | 18 | - **Awesome Redux** 19 | https://github.com/xgrommx/awesome-redux 20 | Awesome list of Redux examples, articles, and libraries. 21 | 22 | - **Awesome Webpack** 23 | https://github.com/d3viant0ne/awesome-webpack 24 | A curated list of awesome Webpack resources, libraries and tools 25 | 26 | - **React Roadmap** 27 | https://github.com/ericdouglas/react-roadmap 28 | A curated list of free resources to master React Development 29 | 30 | - **React FAQ** 31 | https://github.com/timarney/react-faq 32 | A collection of links to help answer your questions about React.js 33 | 34 | - **JS Coach** 35 | https://js.coach/ 36 | An automatically-updated searchable and categorized list of JS packages related to React, Webpack, Babel, and more. 37 | 38 | - **Awesome React Components** 39 | https://github.com/brillout/awesome-react-components 40 | Catalog of React components / libraries 41 | 42 | - **Awesome React Talks** 43 | https://github.com/mightyCrow/awesome-react-talks 44 | A curated list of talks about React or topics related to React. 45 | 46 | - **230 Curated Resources and Tools for Building Apps with React** 47 | https://appendto.com/2016/12/230-resources-and-tools-for-building-apps-with-react-js/ 48 | A useful list of articles, libraries, and tools that cover the range of React development. 49 | 50 | - **Awesome Create-React-App** 51 | https://github.com/tuchk4/awesome-create-react-app 52 | A collection of articles, links, issues, and information on how to use and customize the Create-React-App tool. 53 | 54 | - **Planet React** 55 | https://www.planet-react.org/ 56 | A blog aggregator that collects posts from dozens of blogs written by members of the React community. An excellent resource. 57 | 58 | - **Awesome CSS-in-JS** 59 | https://github.com/tuchk4/awesome-css-in-js 60 | A collection of awesome things regarding CSS in JS approaches 61 | 62 | - **"What are your top React/React Native Blogs that you frequent?"** 63 | https://www.reddit.com/r/reactjs/comments/5t8loz/what_are_your_top_reactreact_native_blogs_that/ 64 | Several comments listing good React-related blogs, including my own list of high-quality blogs that I subscribe to. 65 | 66 | - **Awesome MobX** 67 | https://github.com/mobxjs/awesome-mobx 68 | A collection of awesome things regarding MobX. 69 | 70 | - **Made with React** 71 | http://madewithreact.com/ 72 | A collection of websites and applications using the React or React Native JavaScript library. 73 | 74 | - **Awesome React** 75 | https://react.libhunt.com/ 76 | A categorized collection of awesome React libraries, resources and shiny things, based on the awesome-react list. 77 | 78 | 79 | #### Online IDEs and Editors 80 | 81 | - **CodeSandbox** 82 | https://codesandbox.io/ 83 | An online IDE focused on React applications. Includes the ability to import NPM packages, browse existing sandboxes by tags, export projects for use with Create-React-App, and much more. 84 | 85 | - **WebpackBin** 86 | https://www.webpackbin.com/ 87 | An online IDE with the ability to import NPM packages, create ES2015 and TypeScript projects, and more. 88 | 89 | - **StackBlitz** 90 | https://stackblitz.com/ 91 | An online IDE based on Visual Studio Code, including its Intellisense code completion. Can create React and Angular projects, import NPM packages, continue development while offline, and more. 92 | 93 | 94 | #### People 95 | 96 | - **Dan Abramov's React List** 97 | https://medium.com/@dan_abramov/my-react-list-862227952a8c 98 | A list of people (mostly but not entirely related to React) that Dan Abramov suggests following 99 | 100 | - **Twitter React Lists** 101 | https://twitter.com/wleong/lists/my-react-list/members 102 | https://twitter.com/oguzbilgic/lists/react-influencers/members 103 | Some Twitter lists that focus on React-related people 104 | 105 | - **"41 Javascript Experts to Follow on Twitter"** 106 | http://techbeacon.com/javascript-leaders-you-should-follow-twitter 107 | A varied list of JS-related people. Not specifically React-related, but a useful list. 108 | 109 | 110 | #### Podcasts 111 | 112 | - **Javascript Air** 113 | https://javascriptair.com/ 114 | The live broadcast podcast all about JavaScript 115 | 116 | - **React30** 117 | https://react30.com/ 118 | The weekly React podcast that promises to waste no more than 30 minutes of your time. 119 | 120 | 121 | #### Newsletters 122 | 123 | - **Full Stack React** 124 | http://newsletter.fullstackreact.com/ 125 | Fullstack React is a weekly newsletter about the React ecosystem with an emphasis on useful libraries, tutorials and code. Subscribe to read the best articles each week on React, Flux, GraphQL, Relay, and friends. 126 | 127 | - **React.js Newsletter** 128 | http://reactjsnewsletter.com/ 129 | The free, weekly newsletter of the best React.js news, articles, projects, and more - brought to you by React.js Program 130 | 131 | - **React Digest** 132 | http://reactdigest.net/ 133 | A free, weekly newsletter about the latest news in React Javascript community. The only news source you need targeted on (but not limited to) React, Javascript, Flux and functional programming. 134 | 135 | - **Curated React** 136 | http://curatedreact.com/ 137 | Curated React is a weekly curated publication full of interesting, relevant links geared towards ReactJS and React Native. 138 | 139 | - **React Statuscode** 140 | http://react.statuscode.com/ 141 | A free, once-weekly e-mail newsletter on React from the authors of JavaScript Weekly. 142 | 143 | - **JavaScript Weekly** 144 | http://javascriptweekly.com/ 145 | A free, once-weekly e-mail round-up of JavaScript news and articles. 146 | 147 | - **PonyFoo Weekly** 148 | https://ponyfoo.com/weekly 149 | A single email every thursday, discussing front-end web development and related technologies. 150 | 151 | - **Deterministic** 152 | https://deterministic.curated.co 153 | A weekly digest of interesting news and articles covering functional programming for the web, especially on the front end. 154 | 155 | - **ES.next News** 156 | http://esnextnews.com/ 157 | 5 ECMAScript.next links every week, in your inbox. Curated by Dr. Axel Rauschmayer and Johannes Weber. 158 | 159 | - **Dave Ceddia's Newsletter** 160 | https://daveceddia.com/newsletter/ 161 | Weekly-ish articles in your inbox about React, JavaScript, and more. 162 | 163 | - **React Native Newsletter** 164 | http://reactnative.cc/ 165 | Occasional summary of React Native news, articles, issues & pull requests, 166 | 167 | 168 | #### Online Course Sites 169 | 170 | - **Egghead.io** 171 | https://egghead.io/ 172 | Numerous courses with short, bite-size videos on a wide variety of topics. Some courses and videos are free, others require a paid subscription to Egghead to access. 173 | 174 | - **Frontend Masters** 175 | https://frontendmasters.com/ 176 | Front-end training courses from masters who are shaping the industry. 177 | 178 | 179 | 180 | -------------------------------------------------------------------------------- /flux-tutorials.md: -------------------------------------------------------------------------------- 1 | ### Flux Tutorials and Concepts 2 | 3 | 4 | - **The Flux Quick Start Guide** 5 | http://www.jackcallister.com/2015/02/26/the-flux-quick-start-guide.html 6 | A quick overview of the key concepts of Flux 7 | 8 | - **Getting to Know Flux** 9 | https://scotch.io/tutorials/getting-to-know-flux-the-react-js-architecture 10 | A good look at what Flux is, what the pieces are, and how they fit together 11 | 12 | - **Flux in Depth - Overview and Components** 13 | http://blog.mgechev.com/2015/05/15/flux-in-depth-overview-components/ 14 | Another in-depth article on Flux concepts and structure 15 | 16 | - **Architecting React Apps with Flux** 17 | http://tylermcginnis.com/reactjs-tutorial-pt-3-architecting-react-js-apps-with-flux/ 18 | Describes how Flux organizes data flow, and how pieces fit together 19 | 20 | - **For Flux' Sake** 21 | https://github.com/MIJOTHY/FOR_FLUX_SAKE 22 | A Flux tutorial and description, with a sample project 23 | 24 | - **Thinking in Flux** 25 | http://www.actioniq.co/blog/thinking-in-flux/ 26 | An example of writing a component that works in a Flux data flow 27 | 28 | - **A Cartoon Guide to Flux** 29 | https://code-cartoons.com/a-cartoon-guide-to-flux-6157355ab207 30 | A high-level description of Flux concepts, with cartoons 31 | 32 | - **React/Flux Tutorial Part 2: Flux** 33 | http://spapas.github.io/2015/07/02/comprehensive-react-flux-tutorial-2/ 34 | Reworks the app from part 1 to use Flux 35 | -------------------------------------------------------------------------------- /framework-comparisons.md: -------------------------------------------------------------------------------- 1 | ### Javascript Framework Comparisons 2 | 3 | #### React, Angular, Ember, and Vue 4 | 5 | - **Angular vs React vs Vue: A 2017 Comparison** 6 | https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-2017-comparison-c5c52d620176 7 | The best framework comparison article I've seen. Covers multiple important considerations when choosing a framework, clearly describes the pros, cons, approaches, and tradeoffs of each library, and gives some suggestions for why you might want to choose one framework over the other. Also links to several additional comparison articles at the end. 8 | 9 | - **Comparing Frontend Approaches** 10 | https://medium.com/@peterxjang/comparing-frontend-frameworks-part-1-introduction-6cf3d49e42cf 11 | A series that builds the same notes app with jQuery, Vue, React, and Elm, and compares the pros and cons of the approaches. 12 | 13 | - **Web Framework Comparisons** 14 | https://www.sitepen.com/blog/2017/06/13/if-we-chose-our-javascript-framework-like-we-chose-our-music/ 15 | https://www.sitepen.com/blog/2017/11/10/web-frameworks-conclusions/ 16 | A 9-part series that compares Angular 2+, React+Redux, Vue, Ember, Dojo 2, and Aurelia. Covers topics like UI development, UX design, foundational technologies, common usage, testing, and soundness. The series is written by a company that works on Dojo, but the comparisons and descriptions are fair. Links go to the first and last articles in the series. 17 | 18 | - **How I stopped loving Angular** 19 | https://codeburst.io/how-i-stopped-loving-angular-c2935f7378c4 20 | An extensive article detailing the author's critiques of Angular 2+, and why they ultimately chose to switch to Vue instead. 21 | 22 | - **React vs Angular: An In-depth Comparison** 23 | https://www.sitepoint.com/react-vs-angular/ 24 | A well-written post that not only offers comparisons between React and Angular, but gives suggested approaches for comparing tools and ecosystems in general. 25 | 26 | - **React vs Angular 2+: Developer Ergonomics** 27 | https://medium.com/@stelly_ryan/react-vs-angular-2-developer-ergonomics-b6d5103e8699 28 | Specific opinion-based comparisons on the developer experience for React and Angular in areas like components, testing, and framework-specific syntax, based on writing equivalent example apps using both frameworks. 29 | 30 | - **How is React different from Vue?** 31 | https://javascriptreport.com/how-is-react-different-from-vue/ 32 | A higher-level overview of some of the similarities and differences between React and Vue, including quotes from Dan Abramov and Evan You. 33 | 34 | - **Unopinionated comparison of Glimmer and React** 35 | https://wyeworks.com/blog/2017/12/20/unopinionated-comparison-of-glimmer-and-react 36 | A well-written comparison of small React and Glimmer components that implement the same functionality. 37 | 38 | - **The Ultimate Guide to JavaScript Frameworks** 39 | https://javascriptreport.com/the-ultimate-guide-to-javascript-frameworks/ 40 | A high-level overview of both major and minor JS frameworks in 2018, Groups them into "the big three", "historically significant", "notable", and "the rest of the pack". Provides short descriptions and links to additional resources for each, as well as pros and cons for the better-known frameworks. 41 | 42 | 43 | #### React and Flux vs Backbone 44 | 45 | - **Relieving Backbone Pain with Flux & React** 46 | http://product.hubspot.com/blog/moving-backbone-to-flux-react 47 | A fantastic video that walks through common problems with using Backbone, and how React can help solve those 48 | 49 | - **Avoiding Event Chains in Single-Page Applications** 50 | http://www.code-experience.com/avoiding-event-chains-in-single-page-applications/ 51 | Describes potential problems with Backbone-style events triggering further events, etc 52 | 53 | - **From Backbone to React: Experience Scaling an App** 54 | http://www.techsonian.net/2014/09/from-backbone-to-react-our-experience-scaling-a-web-application/ 55 | Thoughts on potential complexity issues in a Backbone app 56 | 57 | - **From Backbone to React (comments)** 58 | https://news.ycombinator.com/item?id=8329837 59 | Discussion on the previous article 60 | 61 | 62 | #### Migrating to React 63 | 64 | - **How to migrate an application from AngularJS to React and Redux** 65 | https://hackernoon.com/how-to-migrate-an-application-from-angularjs-to-react-and-redux-de0e2d1f70aa 66 | Recaps several useful techniques to use when migrating an Angular 1.x app to React and Redux, including moving the build to use Webpack, rendering React components inside of Angular directives, sharing dependencies, and integrating Redux into the application. 67 | 68 | - **Octopus Deploy 4.0 - Why we chose React over Angular when rewriting the Octopus 4.0 UI** 69 | https://octopus.com/blog/octopus-v4-angular-to-react 70 | Thoughts on how their original Angular 1 app had become unmaintainable, why they picked React, use of TypeScript, and how they approached architecting the React version. 71 | 72 | - **AngularJS migration to React/Redux** 73 | https://hashnode.com/post/angularjs-migration-to-reactredux-cj7t0m67x012ehowugcvjn1xj 74 | Examples of how to approach migrating an Angular 1 app by first switching some components to use React, then adding state management to use Redux. 75 | 76 | - **Migrating complex Javascript applications** 77 | https://javascriptplayground.com/blog/2017/08/migrating-complex-javascript-angular-react/ 78 | Jack Franklin describes the lessons learned when his team migrated from Angular to React, including why they migrated, how they approached the architecture changes, how they prioritized what to change, and more. Includes some examples of the Angular->React change, but also good advice in general. 79 | 80 | - **A Chip off the Monolith** 81 | https://medium.com/onfido-tech/a-chip-off-the-monolith-ec71e06a3015 82 | The Onfido team describes how they extracted a portion of their monolithic Rails+Ember app into a separate React+Redux app. 83 | 84 | - **7 Tips for migration from Backbone to React & Redux** 85 | https://medium.com/@denisraslov/7-tips-for-migration-from-backbone-to-react-redux-a006a927c39e 86 | Excellent practical advice for adding React and Redux into a Backbone app, including rendering React components inside Backbone views, syncing Backbone and Redux, and planning the migration timing. 87 | 88 | - **Transitioning Your Marionette App to React** 89 | https://medium.com/@michaelsholty/transitioning-your-marionette-app-to-react-4b94ddefafd1 90 | Examples of interop between React components and Marionette views -------------------------------------------------------------------------------- /functional-programming.md: -------------------------------------------------------------------------------- 1 | ### Functional Programming 2 | 3 | - **The Little Idea of Functional Programming** 4 | http://jaysoo.ca/2016/01/13/functional-programming-little-ideas/ 5 | Describes 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. 6 | 7 | - **Understanding Programmatic Side Effects** 8 | http://c2fo.io/c2fo/programming/2016/05/11/understanding-programmatic-side-effects/ 9 | A short article that explains the concept of "side effects" 10 | 11 | - **What Is Functional Programming?** 12 | http://blog.jenkster.com/2015/12/what-is-functional-programming.html 13 | Describes how side effects and "hidden inputs" add complexity to code, in very clear terms. 14 | 15 | - **Getting Functional with Javascript** 16 | http://www.datchley.name/getting-functional-with-javascript-part-1/ 17 | http://www.datchley.name/getting-functional-with-javascript-part-2/ 18 | http://www.datchley.name/getting-functional-with-javascript-part-3/ 19 | Demonstrates FP concepts by showing how to filter, group, and sort an array of data. Lots of good descriptions, samples, and explanations. 20 | 21 | - **Functional Programming for Javascript People** 22 | https://medium.com/@chetcorcos/functional-programming-for-javascript-people-1915d8775504 23 | Tries to explain core FP concepts and patterns in understandable terms. 24 | 25 | - **Functors, Applicatives, and Monads in Pictures** 26 | http://adit.io/posts/2013-04-17-functors,_applicatives,_and_monads_in_pictures.html 27 | A long article that tries to describe several FP terms using lots of cartoons. 28 | 29 | - **Introduction to Immutable.js and Functional Programming Concepts** 30 | https://auth0.com/blog/2016/03/23/intro-to-immutable-js/ 31 | Covers the benefits of using immutable data, pure functions, and other FP concepts, and how those related to Immutable.js. 32 | 33 | - **Practical Intro to Monads in Javascript** 34 | http://tech.evojam.com/2016/02/22/practical-intro-to-monads-in-javascript/ 35 | http://tech.evojam.com/2016/03/21/practical-intro-to-monads-in-javascript-either/ 36 | An attempt to describe monads aimed at developers and engineers. 37 | 38 | - **A Gentle Introduction to Functional Javascript** 39 | http://jrsinclair.com/articles/2016/gentle-introduction-to-functional-javascript-intro/ 40 | http://jrsinclair.com/articles/2016/gentle-introduction-to-functional-javascript-arrays/ 41 | http://jrsinclair.com/articles/2016/gentle-introduction-to-functional-javascript-functions/ 42 | http://jrsinclair.com/articles/2016/gentle-introduction-to-functional-javascript-style/ 43 | Goes through a number of FP-related aspects in Javascript. 44 | 45 | - **Professor Frisby's Mostly Adequate Guide to Functional Programming** 46 | https://drboolean.gitbooks.io/mostly-adequate-guide/content/ 47 | A long (and still growing) online book covering functional topics. Starts fairly simple, definitely gets more complex in later chapters. 48 | 49 | - **Functional Thinking** 50 | http://nealford.com/functionalthinking.html 51 | An extended series of articles collected together. Aimed at Java/JVM programmers, and makes a number of comparisons of OOP vs FP. 52 | 53 | - **Functional Programing in Javascript** 54 | http://reactivex.io/learnrx/ 55 | Teaches functional programming concepts through a series of interactive exercises. Intended as a precursor to learning the Reactive Extensions for Javascript library (RxJS), but uses plain JS and teaches general concepts in the process. (Later exercises are hidden until earlier ones are completed - hit "Show Answer" and "Run" on an exercise if you want to skip ahead). 56 | 57 | - **The "Thinking Functionally" series** 58 | http://fsharpforfunandprofit.com/series/thinking-functionally.html 59 | A series of lessons teaching functional concepts using F#. Very well written, clear and easy to understand. Examples use F#, but concepts are widely applicable. 60 | 61 | - **Imperative to Functional Programming Succinctly** 62 | https://www.syncfusion.com/resources/techportal/details/ebooks/imperative 63 | A short ebook covering many functional concepts. 64 | 65 | - **Functional Programming in Javascript** 66 | https://www.youtube.com/watch?v=BMUiFMZr7vk&list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84 67 | A web series by a quirky programmer showing you high level functional concepts in Javascript 68 | 69 | - **Functional Programming Jargon** 70 | https://github.com/hemanth/functional-programming-jargon 71 | A list of FP terms with easier-to-understand definitions and explanations. 72 | 73 | - **An Introduction to Reasonably Pure Functional Programming** 74 | https://www.sitepoint.com/an-introduction-to-reasonably-pure-functional-programming/ 75 | Explain four key concepts of functional programming: pure functions, immutable values, composition, and side effects 76 | 77 | - **Functors, Applicatives, and Monads in Plain English** 78 | http://www.russbishop.net/monoids-monads-and-functors 79 | An attempt to explain these concepts in reasonable terms. 80 | 81 | - **Learning Functional Programming with Javascript** 82 | https://youtu.be/e-5obm1G_FY 83 | A great talk by Anjana Vakil. Covers several basic concepts of functional programming, including some very nice examples of map/filter/reducer, a clear fdefinition of side effects, and an explanation of how specialized immutable data libraries work. 84 | 85 | - **Thinking in Ramda** 86 | http://randycoulman.com/blog/categories/thinking-in-ramda/ 87 | A series of articles digging into techniques to use with the Ramda FP utility library 88 | 89 | - **Functional Programming Isn't the Answer** 90 | http://degoes.net/articles/fp-is-not-the-answer 91 | A reminder that while FP has potential benefits, it's ultimately just a tool, and the end goal is useful software. 92 | 93 | - **An Intro to Functional Programming Concepts in Javascript** 94 | https://medium.com/@collardeau/intro-to-functional-programming-concepts-in-javascript-b0650773139c 95 | https://medium.com/@collardeau/intro-to-functional-programming-concepts-in-javascript-part-2-f45228c49eed 96 | https://medium.com/@collardeau/part-3-an-intro-to-functional-programming-concepts-in-javascript-febf9368ffe6 97 | A multi-part series covering a number of FP concepts, how to use them in Javascript, and use of the Ramda FP utility library 98 | 99 | - **JavaScript and Functional Programming** 100 | https://bethallchurch.github.io/JavaScript-and-Functional-Programming/ 101 | An overview of the basic principles of functional programming, and how they can be applied in Javascript. Also includes links to a variety of other articles and resources. 102 | 103 | - **Functional-Light JS** 104 | https://github.com/getify/Functional-Light-JS 105 | This book explores the core principles of functional programming (FP) that can be applied to JavaScript. But what makes this book different is that we approach these principles without drowning in all the heavy terminology. We look at a subset of FP foundational concepts that I call "Functional-Light Programming" (FLP) and apply it to JavaScript. 106 | 107 | - **The Case for Lenses in Pragmatic Business Applications** 108 | http://www.brandonkeown.com/2016/10/lenses-for-fun-and-profit.html 109 | Demonstrates the use of Ramda's "lens" concept for encapsulating data access 110 | 111 | - **Functional Lenses, How Do They Work** 112 | https://medium.com/@dtipson/functional-lenses-d1aba9e52254 113 | A dive into the "lens" concept, and how they can be used to manipulate data structures 114 | 115 | - **Don't Be Scared of Functional Programming** 116 | https://www.smashingmagazine.com/2014/07/dont-be-scared-of-functional-programming/ 117 | Several examples of functional programming principles, both in plain JS and with Underscore.js 118 | 119 | 120 | - **Functional Programming Basics in ES6** 121 | https://www.youtube.com/watch?v=HvMemAgOw6I 122 | Talk on functional programming with JavaScript and ES6 syntax. Covers basics such as purity, referential transparency, closures, immutability, currying, composition, and recursion. 123 | 124 | 125 | - **Using Composition and Array Functions** 126 | http://ignaciochavez.com/using-composition-and-array-functions/ 127 | Some useful examples of composing together different functions to accomplish a task. Has some very nice diagrams illustrating the process. 128 | 129 | - **Dipping a toe into functional JS with lodash/fp** 130 | https://simonsmith.io/dipping-a-toe-into-functional-js-with-lodash-fp/ 131 | Examples of using Lodash's functional API for logic and React component composition 132 | 133 | - **Composability: From Callbacks to Categories in ES6** 134 | https://medium.com/@homam/composability-from-callbacks-to-categories-in-es6-f3d91e62451e 135 | Explores different solutions to "callback hell", based on various FP concepts 136 | 137 | 138 | - **So You Want To Be a Functional Programmer** 139 | https://medium.com/@cscalfani/so-you-want-to-be-a-functional-programmer-part-6-db502830403 140 | A multi-part series on functional programming concepts and learning approaches (links to previous parts in the article). 141 | 142 | - **Imperative vs Declarative Programming** 143 | https://medium.freecodecamp.com/imperative-vs-declarative-programming-283e96bf8aea 144 | Metaphors, examples, and explanations for the terms "declarative" and "imperative", and how those relate to Functional Programming 145 | 146 | - **Higher-order functions in Lodash** 147 | http://pragmatists.pl/blog/2017/05/higher-order-functions-in-lodash/ 148 | An explanation of several FP concepts like partial application and currying, and how Lodash offers utility functions to help make use of those concepts. 149 | 150 | - **How to Draw an Owl** 151 | https://glebbahmutov.com/blog/how-to-draw-an-owl/ 152 | Demonstrates refactoring some complex imperative code into a functional approach that uses concepts like pure functions, lenses, immutable data, and the Maybe monad 153 | 154 | - **Classes, Complexity, and Functional Programming** 155 | https://medium.com/@kentcdodds/classes-complexity-and-functional-programming-a8dd86903747 156 | Kent C Dodds looks at pros and cons of using classes, issues with the `this` keyword in Javascript, and some ways to avoid using classes 157 | 158 | - **What's Functional Programming All About?** 159 | http://www.lihaoyi.com/post/WhatsFunctionalProgrammingAllAbout.html 160 | A detailed explanation of how "functional" programming differs from "imperative" programming, using a food recipe as an example of the steps involved. 161 | 162 | - **Higher Order Functions and Redux Thunk** 163 | https://medium.com/@joedski/higher-order-functions-and-redux-thunk-1e5983ae6b03 164 | An exploration of ways to wrap behavior around thunks, including composing functions together. 165 | 166 | - **Functional Programming Jargon** 167 | https://functional.works-hub.com/blog/Functional-Programming-Jargon 168 | A large list of functional programming terms, with explanations for each and examples of those terms using JS 169 | 170 | - **Awesome FP JS** 171 | https://github.com/stoeffel/awesome-fp-js 172 | A collection of links to libraries, tools, and resources for FP usage in JS 173 | 174 | - **Currying vs Partial Application** 175 | http://www.datchley.name/currying-vs-partial-application/ 176 | A great explanation of the difference between "currying" functions and "partially applying" them 177 | 178 | - **Lodash is not (only) for list manipulation!** 179 | https://blog.pragmatists.com/lodash-is-not-only-for-list-manipulation-791c2e3b9de1 180 | Examples of how to compose the `lodash/fp` functions to create functional data transformation pipelines. -------------------------------------------------------------------------------- /git-resources.md: -------------------------------------------------------------------------------- 1 | ### Git Tutorials and Resources 2 | 3 | #### Resource Pages 4 | 5 | - **Understanding Git** 6 | http://www.queness.com/post/16139/understanding-git 7 | A collection of links to articles, tutorials, cheat sheets, and clients 8 | 9 | - **7 Useful Git Tips for Beginners** 10 | http://sixrevisions.com/web-development/git-tips/ 11 | High-level directions for learning Git, including links to many tutorials 12 | 13 | 14 | #### Tutorials 15 | 16 | - **Atlassian Git Tutorials** 17 | https://www.atlassian.com/git/tutorials 18 | An excellent collection of tutorials, from basics to advanced topics. Very well written and easy to read. 19 | 20 | - **Git Concepts Simplified** 21 | http://gitolite.com/gcs.html 22 | An HTML slideshow that walks through Git's core concepts, with diagrams. 23 | 24 | - **Learn Version Control with Git** 25 | https://www.git-tower.com/learn/git/ebook/command-line/introduction 26 | A complete introduction to using Git that assumes no prior knowledge 27 | 28 | - **Git from the Bottom Up** 29 | https://jwiegley.github.io/git-from-the-bottom-up/ 30 | Explains Git by describing the internal data structures and how they work. More technical than other tutorials, but understanding the way Git handles data can really make understanding the commands easier. 31 | 32 | - **Conversational Git** 33 | http://blog.anvard.org/conversational-git/ 34 | An easy-to-read, informal approach to learning Git 35 | 36 | - **Think like a Git** 37 | http://think-like-a-git.net/ 38 | A tutorial for "advanced beginners" who know the basic commands, but want to better understand Git's concepts 39 | 40 | - **Git from the Inside Out** 41 | https://codewords.recurse.com/issues/two/git-from-the-inside-out 42 | An explanation of how Git works, by describing the internal data structures and the graph that they form. 43 | 44 | - **Ry's Git Tutorial** 45 | http://rypress.com/tutorials/git/index 46 | An excellent introduction to Git's key concepts and command. Very well written and explained. 47 | 48 | - **Git for Humans** 49 | https://speakerdeck.com/alicebartlett/git-for-humans 50 | A slideshow introducing Git concepts without complex terminology 51 | 52 | - **Getting Git** 53 | https://gettinggit.com/ 54 | A paid video tutorial series that covers Git commands in detail, as well as everyday scenarios you might encounter while using Git 55 | 56 | - **Learn Enough Git to Be Dangerous** 57 | https://www.learnenough.com/git-tutorial 58 | A tutorial that teaches practical use of Git basics, Github, and Git workflows. 59 | 60 | - **Git Magic** 61 | https://crypto.stanford.edu/~blynn/gitmagic/ 62 | An extensive Git tutorial that teaches usage instructions first, and works its way up to advanced Git techniques and concepts. 63 | 64 | - **Git Beyond the Basics** 65 | http://blog.bloomca.me/2017/11/17/git-beyond-the-basics.html 66 | A good tutorial that explains intermediate concepts like merging, rebasing, cherry-picking, and cleaning pull requests 67 | 68 | 69 | #### Tips and Useful Info 70 | 71 | - **How to Write a Git Commit Message** 72 | http://chris.beams.io/posts/git-commit/ 73 | Great advice for how to write a succinct, informative, and useful commit message. 74 | 75 | - **Advance Git** 76 | https://medium.com/@jstats/advance-git-dfe557bdbe59 77 | Gives advice for good commit messages, and describes the options and usage for several advanced Git commands (`add --patch`, `rebase`, `reflog`, and more). 78 | 79 | - **Git Useful Tips** 80 | http://ericdouglas.github.io/2016/04/01/Git-Useful-Tips/ 81 | A useful reference to commands and concepts. 82 | 83 | - **19 Tips for Everyday Git Use** 84 | http://www.alexkras.com/19-git-tips-for-everyday-use 85 | A variety of practical commands for different scenarios. 86 | 87 | - **Git Tips** 88 | https://github.com/git-tips/tips 89 | A large collection of Git tips and tricks. 90 | 91 | - **Digit** 92 | https://github.com/optionfactory/digit 93 | A tool to visualize the contents of a Git repo as an aid to learning 94 | 95 | - **Advanced Git Advice** 96 | https://medium.com/@zlobin/advanced-git-advice-27087a7fbb29 97 | A variety of useful tips and commands. 98 | 99 | - **A Note about Git Commit Messages** 100 | http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html 101 | Some quick explanations of how to format Git commit messages, and commands where message formatting matters 102 | 103 | - **Git Commit Good Practices** 104 | https://wiki.openstack.org/wiki/GitCommitMessages 105 | A number of good practices to follow when making commits and writing commit messages 106 | 107 | - **Life-Saving Git Tips** 108 | https://www.cuttlesoft.com/life-saving-git-tips/ 109 | A variety of useful tips, including use of cherry-picking, local pulling and testing, and use of aliases to simplify tasks 110 | 111 | - **Git Cheat Sheet: Useful Commands, Tips and Tricks** 112 | https://sentheon.com/blog/git-cheat-sheet.html 113 | A large cheat sheet / reference for a variety of Git usage topics, including workflow, configuration, .gitignore syntax, different categories of commands, and more. 114 | 115 | - **Git Flight Rules** 116 | https://github.com/k88hudson/git-flight-rules 117 | A guide for Git users about what to do when things go wrong. Covers topics like editing commits, staging and unstaging files, fixing branches, rebasing/merging, and much more. 118 | 119 | - **Advanced Git Commands You Will Actually Use** 120 | https://stosb.com/blog/advanced-git-commands-you-will-actually-use/ 121 | Describes a wide variety of useful commands, such as ways to refer to commits, searching commit logs, manipulating history, and much more. 122 | 123 | ## Specific Techniques 124 | 125 | - **Git's Patch Mode All the Way** 126 | https://blog.petrzemek.net/2016/07/10/git-patch-mode-all-the-way/ 127 | Shows how to use Git's ability to selectively pick and choose chunks of code as part of various actions 128 | 129 | - **Git: Undoing changes and rewriting history** 130 | http://slides.com/lilianakastilio/github-4#/ 131 | A slideshow discussing various ways to change commit history 132 | 133 | - **Beginner's guide to git rebasing and squashing** 134 | https://shinglyu.github.io/web/2016/11/08/servo-rebase-and-squash-guide.html 135 | A tutorial on rebasing and squashing commits to change past history. 136 | 137 | - **Git Rebasing and Clean Pull Requests** 138 | https://www.jungledisk.com/blog/2016/11/21/git-rebasing-and-clean-prs/ 139 | Some best practices for cleaning up branches and producing readable commits. 140 | 141 | - **A closer look at git rebase** 142 | https://dev.to/gonedark/a-closer-look-at-git-rebase 143 | An explanation of what "rebasing" is, with some helpful graphics 144 | 145 | - **Visualize Merge History with git log --graph, --first-parent, and --no-merges** 146 | https://redfin.engineering/visualize-merge-history-with-git-log-graph-first-parent-and-no-merges-c6a9b5ff109c 147 | Describes issues with using `git log` to visualize history, and some arguments that can be used to give a potentially better picture of what's actually happened. 148 | 149 | - **How to undo (almost) anything with Git** 150 | https://github.com/blog/2019-how-to-undo-almost-anything-with-git 151 | Instructions for undoing and redoing changes in various scenarios. 152 | 153 | - **Undoing in Git** 154 | https://blog.tratif.com/2018/01/04/undoing-in-git/ 155 | A summary of the most common ways for undoing things in Git, including bringing back removed commits. 156 | 157 | - **Beginner's Guide to Interactive Rebasing** 158 | https://hackernoon.com/beginners-guide-to-interactive-rebasing-346a3f9c3a6d 159 | An excellent walkthrough of how to use interactive rebasing for rewriting commit history by editing, deleting, and combining commits 160 | 161 | 162 | #### E-Books 163 | 164 | - **Pro Git** 165 | https://git-scm.com/book/en/v2 166 | An in-depth online reference to all aspects of Git 167 | 168 | - **Git Succinctly** 169 | https://www.syncfusion.com/resources/techportal/details/ebooks/git 170 | A free PDF that covers Git concepts and usage 171 | 172 | - **Git Internals** 173 | https://github.com/pluralsight/git-internals-pdf 174 | A free PDF that digs deep into Git's data structures and behavior 175 | 176 | 177 | #### Workflows 178 | 179 | - **Git Workflows** 180 | http://documentup.com/skwp/git-workflows-book 181 | Covers ways to increase productivity, create cleaner commit history, and improve code reviews 182 | 183 | - **Understanding the Git Workflow** 184 | https://sandofsky.com/blog/git-workflow.html 185 | Looks at how to properly handle branches and local history vs public history 186 | 187 | - **A Successful Git Branching Model** 188 | http://nvie.com/posts/a-successful-git-branching-model/ 189 | Describes a widely used multi-branch approach to managing development and release processes 190 | 191 | 192 | #### Cheat Sheets 193 | 194 | - **Git CLI Cheat Sheet** 195 | http://cheat.errtheblog.com/s/git 196 | A list of many useful Git commands, with explanations 197 | 198 | - **A Visual Git Reference** 199 | http://marklodato.github.io/visual-git-guide/index-en.html 200 | Describes several common Git commands, with diagrams to explain what each one does 201 | 202 | - **Tower - Git Cheat Sheet** 203 | https://www.git-tower.com/blog/git-cheat-sheet/ 204 | A quick reference PDF listing some common commands 205 | 206 | - **Interactive Git Cheat Sheet** 207 | http://ndpsoftware.com/git-cheatsheet.html 208 | A clickable page that shows how various commands move data between different parts of Git's storage (working copy, index, local repo, remote repo) 209 | 210 | - **giteveryday** 211 | https://www.kernel.org/pub/software/scm/git/docs/giteveryday.html 212 | A useful minimum set of commands for Everyday Git. Commands grouped by usefulness to different categories of users. 213 | 214 | - **Git Getting Started Cheat Sheet** 215 | https://gist.github.com/akras14/3d242d80af8388ebca60 216 | Another useful list of commands with explanations 217 | 218 | 219 | #### Desktop GUI Clients 220 | 221 | - **SourceTree** (Win, Mac; free) 222 | https://www.sourcetreeapp.com/ 223 | A solid Git client, with a good variety of features. Includes UI for interactive rebase, which makes that task much easier to do. Note that a recent release (1.8 for Windows, 2.2 for Mac) drastically changed the UI appearance, added required accounts, has had a number of performance issues, and is generally seen as a step backwards. You may want to download the earlier versions instead ([1.6.25 for Windows](https://downloads.atlassian.com/software/sourcetree/windows/SourceTreeSetup_1.6.25.exe), [2.1 for Mac](https://downloads.atlassian.com/software/sourcetree/SourceTree_2.1.dmg) ). 224 | 225 | - **Git Extensions** (Win; free) 226 | http://gitextensions.github.io/ 227 | A Windows client with Windows Explorer and Visual Studio integration 228 | 229 | - **Git Tower** (Mac, Win; commercial) 230 | https://www.git-tower.com/ 231 | A well-designed commercial Git client for Mac and Windows 232 | 233 | - **SmartGit** (Win, Mac, Linux; commercial) 234 | http://www.syntevo.com/smartgit/ 235 | A cross-platform Git client aimed at professionals 236 | 237 | - **GitKraken** (Win, Mac, Linux; semi-commercial) 238 | http://www.gitkraken.com/ 239 | A cross-platform Git client 240 | -------------------------------------------------------------------------------- /immutable-data.md: -------------------------------------------------------------------------------- 1 | ### Immutable Data 2 | 3 | 4 | #### Basic Concepts 5 | 6 | - **Pros and Cons of Using Immutability With React** 7 | http://reactkungfu.com/2015/08/pros-and-cons-of-using-immutability-with-react-js/ 8 | Excellent 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. 9 | 10 | - **Javascript and Immutability** 11 | http://t4d.io/javascript-and-immutability/ 12 | A description of how to properly immutably update objects and arrays using functions like assign and slice 13 | 14 | - **Immutable Javascript using ES6 and Beyond** 15 | http://wecodetheweb.com/2016/02/12/immutable-javascript-using-es6-and-beyond/ 16 | Describes ways to handle data immutably using "just" built-in Javascript functions, particularly ES6 syntax 17 | 18 | - **Pure javascript immutable arrays** 19 | http://vincent.billey.me/pure-javascript-immutable-array 20 | A reminder to avoid the built-in Array functions that mutate the array, with snippets demonstrating alernative immutable functionality 21 | 22 | - **Javascript Array: slice vs splice** 23 | https://ariya.io/2014/02/javascript-array-slice-vs-splice 24 | A reminder that "slice" and "splice" are different functions with different behavior 25 | 26 | - **Immutable Data from Scratch** 27 | https://ryanfunduk.com/articles/immutable-data-from-scratch/ 28 | Demonstrates building up an immutable update utility library similar to React's Update Addons 29 | 30 | - **Immutable Objects with `Object.freeze`** 31 | http://adripofjavascript.com/blog/drips/immutable-objects-with-object-freeze.html 32 | A quick look at how to use `Object.freeze` to enforce immutability. 33 | 34 | - **Immutability in Javascript** 35 | http://www.sitepoint.com/immutability-javascript/ 36 | Describes a couple basic concepts of immutable data in Javascript, and how the Immutable.js library can be used for those concepts. 37 | 38 | - **Immutable Data Structures and Javascript** 39 | http://jlongster.com/Using-Immutable-Data-Structures-in-JavaScript 40 | In-depth article covering the value of immutable data, and two common JS libraries 41 | 42 | - **Immutability is Not Enough** 43 | https://codewords.recurse.com/issues/six/immutability-is-not-enough 44 | A look at how using an immutable data approach doesn't magically prevent all bugs. 45 | 46 | - **Javascript Array Methods: Mutating vs Non-Mutating** 47 | http://lorenstewart.me/2017/01/22/javascript-array-methods-mutating-vs-non-mutating/ 48 | An overview of how to accomplish add/remove/replace operations on JS arrays, comparing mutable vs immutable approaches to each. 49 | 50 | - **Redux Docs: Immutable Update Patterns** 51 | http://redux.js.org/docs/recipes/reducers/ImmutableUpdatePatterns.html 52 | Some useful examples for correctly updating data immutably, including nested objects, inserting and removing items in arrays, and updating items in arrays, as well as some common mistakes that occur. Important to know when using Redux, but the info is not Redux-specific. 53 | 54 | - **Immutably setting a value in a JS array (or how an array is also an object)** 55 | https://medium.com/@giltayar/immutably-setting-a-value-in-a-js-array-or-how-an-array-is-also-an-object-55337f4d6702 56 | An example of how `Object.assign` can be used to immutably update an array 57 | 58 | - **ReactCasts #9: Immutability in Javascript** 59 | https://www.youtube.com/watch?v=4LzcQyZ9JOU 60 | A screencast discussing why immutability is important and its benefits. Compares Javascript's lack of built-in immutability with other languages, and shows how to do immutable operations in plain Javascript. 61 | 62 | - **Why Mutation Can Be Scary** 63 | http://alistapart.com/article/why-mutation-can-be-scary 64 | A detailed look at how JS objects and primitives behave in relation to mutability, how `Object.assign` works, and some alternative functions for merging objects. 65 | 66 | #### Immutability and React 67 | 68 | - **Immutability in React** 69 | http://www.sitepoint.com/immutability-react/ 70 | Covers the reasons and basic concepts of using immutable data with React 71 | 72 | - **Why Should I Care About Immutable Data In React?** 73 | http://www.bennadel.com/blog/2903-why-should-i-care-about-immutable-data-in-reactjs.htm 74 | Describes the major benefits of using immutable data in React, with a demo 75 | 76 | - **React: A (very brief) talk about immutability** 77 | https://medium.com/pro-react/a-brief-talk-about-immutability-and-react-s-helpers-70919ab8ae7c 78 | Talks about the issues with mutation, and some ways to update immutably 79 | 80 | - **Comparing and Modifying Objects in React** 81 | https://blog.komand.com/object-comparison-in-react-js-components 82 | Some examples of comparing objects inside of React's lifecycle methods, and how to update them properly. 83 | 84 | - **Handling State in React: Four Immutable Approaches to Consider** 85 | https://medium.com/@housecor/handling-state-in-react-four-immutable-approaches-to-consider-d1f5c00249d5 86 | A summary of four different ways to update state immutably 87 | 88 | - **Immutability in React and Redux** 89 | https://medium.com/@nitishkr88/immutability-in-react-and-redux-7137f7b3197 90 | A good introduction to immutability concepts and practical usage. Covers how equality comparisons work in Javascript, reference comparisons vs deep quality checks, ways to avoid mutations, use of Immutable.js, and how to handle nested updates. 91 | 92 | #### Immutable Data Libraries 93 | 94 | - **Introducing Immer: Immutability the easy way** 95 | https://hackernoon.com/introducing-immer-immutability-the-easy-way-9d73d8f71cb3 96 | Michel Weststrate, author of MobX, introduces his new Immer library, which uses ES6 proxies to allow writing normal mutative code while the updates are applied immutably. 97 | 98 | - **List of immutable libraries** 99 | https://gist.github.com/jlongster/bce43d9be633da55053f 100 | A follow-up to James Longster's article, with pointers to numerous immutable data libraries 101 | 102 | - **Redux Ecosystem Links: Immutable Data** 103 | https://github.com/markerikson/redux-ecosystem-links/blob/master/immutable-data.md 104 | A large list of libraries for managing immutable data in Javascript. Some of them are Redux-specific, but also includes many general-purpose immutable data libraries as well. 105 | 106 | - **Painless Immutability** 107 | https://guigrpa.github.io/2016/06/16/painless-immutability/ 108 | A somewhat opinionated article from the author of a new immutable data library comparing different options, but still well-written and informative about the pros and cons of each. 109 | 110 | - **Immutable.js** 111 | http://seanamarasinghe.com/developer/immutable-js/ 112 | An introduction to the API and use cases for Immutable.js 113 | 114 | - **How to use Immutable.js Records with React and Redux** 115 | https://medium.com/azendoo-team/immutable-record-react-redux-99f389ed676 116 | Examples for using Immutable.js records for clarity and consistency of data management 117 | 118 | - **Immutable.js: An Introduction with examples written for humans** 119 | http://untangled.io/immutable-js-an-introduction-with-examples-written-for-humans/ 120 | A detailed series of tutorials explaining how to use Immutable.js's API 121 | 122 | - **Seamless-Immutable: An Alternative to Immutable.js** 123 | https://medium.com/@ckoster22/seamless-immutable-an-alternative-to-immutablejs-12795d6bf577 124 | Examples of how to use the Seamless-Immutable library, and how it compares to Immutable.js 125 | 126 | - **Using Ramda's `evolve` in Redux reducers to create new state** 127 | https://www.jernejsila.com/2017/02/25/using-ramda-evolve-redux-reducers-creating-new-state/ 128 | Some quick examples of how Ramda's API can be used for applying immutable data updates 129 | 130 | - **How to Use Immutable.js in a React Redux Application** 131 | https://codebrahma.com/how-to-use-immutable-js-in-a-react-redux-application/ 132 | Answers to six common questions about why and how to use Immutable.js in a React/Redux app, including whether to keep everything as Immutable.js objects, whether to use it inside of components, and potential benefits of using Immutable.js 133 | 134 | - **Immutable Deep State Updates in React with Ramda.js** 135 | https://vanslaars.io/post/setstate-lenses/ 136 | Some excellent examples of how to use Ramda's "lens" functions to define immutable state update logic 137 | 138 | - **Why I Don't Use Immutable.js with Redux** 139 | https://medium.com/front-end-hacking/why-i-dont-use-immutable-js-with-redux-db05004f436 140 | Thoughts on the pros and cons of using Immutable.js in a Redux app 141 | 142 | - **Using Immutable.js with Redux** 143 | https://medium.com/front-end-hacking/using-immutable-js-with-redux-ba89025e45e2 144 | A follow-up to the previous article, with several examples of how to properly use Immutable.js with Redux 145 | 146 | - **Should I use Immutable.js with Redux?** 147 | https://medium.com/@fastphrase/should-i-use-immutablejs-with-redux-58f88d6fd81e 148 | A detailed list of pros and cons for using Immutable.js in a Redux app 149 | 150 | - **Practical Guide to using Immutable.js with Redux and React** 151 | https://medium.com/@fastphrase/practical-guide-to-using-immutablejs-with-redux-and-react-c5fd9c99c6b2 152 | A follow-up to the previous article, showing how to correctly set up and use Immutable.js with Redux 153 | 154 | - **Qim: Select from your Immutable JavaScript Cake and Update It Symmetrically Too** 155 | https://zapier.com/engineering/qim-immutable-javascript/ 156 | An in-depth look at a new lens-style immutable update utility called Qim, including what problems it helps solve and how to use it. 157 | 158 | - **Lenses with Immutable.js** 159 | https://medium.com/@drboolean/lenses-with-immutable-js-9bda85674780 160 | Discusses how "lenses" can be used to dig into data structures and update them in an immutable way, and how to define lenses that work on Immutable.js objects. 161 | 162 | - **You're missing out on ImmutableJS Records** 163 | https://medium.com/@ahmadbamieh/immutablejs-records-bd369137da06 164 | An introduction to the Immutable.js Record type, and how it can be used to define data types 165 | 166 | - **Immutability through Mutability - Immer & Redux** 167 | https://medium.com/@Tetheta/immutability-through-mutability-immer-redux-3e14246c6506 168 | A look at Michel Weststrate's Immer library, which uses ES6 proxies to produce immutable updates using normal mutative code. Shows how this can simplify nested state updates in Redux reducers. -------------------------------------------------------------------------------- /javascript-resources.md: -------------------------------------------------------------------------------- 1 | ### Javascript Resources 2 | 3 | While this list is primarily focused on learning React and Redux, and generally assumes that you understand the older Javascript ES5 standard, there's many great resources out there for learning Javascript. This page points to some similar resource lists that are focused on Javascript, as well as some additional useful articles and resources. 4 | 5 | 6 | #### General Resources 7 | 8 | - **Mozilla Developer Network: Javascript** 9 | https://developer.mozilla.org/en-US/docs/Web/JavaScript 10 | https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript 11 | Mozilla 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. 12 | 13 | - **Modern JS Cheatsheet** 14 | https://github.com/mbeaudru/modern-js-cheatsheet 15 | An extensive list of explanations for syntax and concepts used in modern JS applications 16 | 17 | - **Eric Elliott's Javascript Resource Lists** 18 | https://medium.com/javascript-scene/10-priceless-resources-for-javascript-learners-bbf2f7d7f84e 19 | https://gist.github.com/ericelliott/d576f72441fc1b27dace/0cee592f8f8b7eae39c4b3851ae92b00463b67b9 20 | Eric 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. (Note that he is very strongly opinionated in his own articles, particularly about certain code patterns that he feels everyone should follow, but overall his advice and information is pretty solid.) 21 | 22 | - **Wes Bos's Javascript Resource List** 23 | http://wesbos.com/learn-javascript 24 | Speaker and teacher Wes Bos gives links to a number of resources for learning Javascript 25 | 26 | 27 | - **Learning Javascript and the Danger of Spreading Yourself Too Thin** 28 | https://medium.com/@kevininaniche/learning-javascript-and-the-danger-of-spreading-yourself-too-thin-4617384e7ea4 29 | Tips on how to approach learning Javascript, and some additional resources. 30 | 31 | - **Reddit /r/LearnJavascript** 32 | https://www.reddit.com/r/LearnJavascript 33 | A Reddit community for learning Javascript 34 | 35 | - **Roadmap for Learning the Javascript Language** 36 | http://bytearcher.com/articles/roadmap-for-learning-javascript-language/ 37 | A suggested approach for how to learn Javascript. 38 | 39 | - **What Do I Need to Know to Ace a JavaScript Interview?** 40 | https://github.com/adam-s/js-interview-review 41 | Collected resources for studying Javascript and preparing for an interview 42 | 43 | - **Zero to One: How I Mastered Javascript and You Can Too** 44 | https://hashnode.com/post/zero-to-one-how-i-mastered-javascript-and-how-you-can-too-ciuwmrw9j00r50q539clhhdj7 45 | An article describing how one person approached learning Javascript, with suggestions and advice to follow. 46 | 47 | - **Want to Learn Javascript in 2016?** 48 | https://medium.com/@_cmdv_/i-want-to-learn-javascript-in-2015-e96cd85ad225 49 | Extensive suggestions for resources to use when learning Javascript 50 | 51 | - **6 Quick & Proven Tips to Help You Learn JavaScript** 52 | https://blog.alexdevero.com/6-quick-proven-tips-learn-javascript/ 53 | Points to a couple of suggested books to help learn JS, and gives several additional suggestions for approaches and resources to use in the process. 54 | 55 | - **Array iteration methods summarized** 56 | https://gist.github.com/ljharb/58faf1cfcb4e6808f74aae4ef7944cff 57 | An explanation of all the different Array methods that loop over the array, what they do, and when they should be used 58 | 59 | - **Front End Interview Preparation Guide** 60 | https://github.com/Jobeir/front-end-interview-preparation-guide 61 | A list of useful books, courses, and resources for learning JS, and links to interview questions and quizzes that would be beneficial in helping test out knowledge. 62 | 63 | 64 | #### Tutorials, Books, and Courses 65 | 66 | - **Eloquent Javascript** 67 | http://eloquentjavascript.net/ 68 | A full online book teaching Javascript from the ground up. Very recommended. 69 | 70 | - **You Don't Know Javascript** 71 | https://github.com/getify/You-Dont-Know-JS 72 | An online book series intended to teach all aspects of Javascript, including the "tougher" parts. 73 | 74 | - **Exploring Javascript** 75 | http://exploringjs.com/ 76 | Multiple 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. 77 | 78 | - **The Modern Javascript Tutorial** 79 | http://javascript.info/ 80 | A large tutorial series that covers all aspects of the modern Javascript language (basic syntax, data types, objects, and advanced function usage), as well as a section on using Javascript to interact with the DOM in web pages. 81 | 82 | - **23 Free Javascript Books** 83 | https://hackerlists.com/free-javascript-books/ 84 | A list of many Javascript books available for free online. 85 | 86 | - **Rithm School Free Javascript Course** 87 | https://www.rithmschool.com/courses 88 | 89 | - **Practical Javascript** 90 | http://watchandcode.com/p/practical-javascript 91 | A free online course to learn Javascript fundamentals. 92 | 93 | - **Javascript Path** 94 | https://github.com/javascript-society/javascript-path 95 | A list of books to master JavaScript Development 96 | 97 | - **DevFreeBooks: Javascript** 98 | https://devfreebooks.org/javascript/ 99 | A list of free online books for Javascript 100 | 101 | - **DOM Enlightenment** 102 | http://domenlightenment.com/ 103 | A deep look at how to interact with the DOM from Javascript, without using a library or a framework. 104 | 105 | - **Javascript30** 106 | https://javascript30.com/ 107 | A free course from Wes Bos that teaches how to build 30 different interesting projects, using only "vanilla" Javascript. 108 | 109 | - **Javascript; The Core** 110 | http://dmitrysoshnikov.com/ecmascript/javascript-the-core-2nd-edition/ 111 | A dive into core concepts of how Javascript objects behave: prototypes, constructors, scopes, closures, and `this`. The second edition includes more of a focus on ES6 and newer features. 112 | 113 | - **The JavaScript Way** 114 | https://github.com/bpesquet/thejsway 115 | A modern introduction to the JavaScript language, intended to be beginner-friendly, comprehensive, standards-aligned with the latest syntax and good practices, and hands-on. 116 | 117 | 118 | #### Online Code Editors 119 | 120 | - **CodeSandbox** 121 | https://codesandbox.io 122 | A full-fledged online IDE that lets you build entire applications using React, Vue, and other toolkits. 123 | 124 | - **A Roundup of Online Code Playgrounds** 125 | https://www.sitepoint.com/round-up-online-code-playgrounds/ 126 | An overview and comparison of various online Javascript live code editing tools. 127 | 128 | 129 | #### Articles and Gotchas 130 | 131 | - **Mozilla Javascript Reference: the `this` keyword** 132 | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this 133 | MDN's usual excellent documentation, explaining how `this` works in Javascript 134 | 135 | - **Gentle Explanation of `this` keyword in Javascript** 136 | http://rainsoft.io/gentle-explanation-of-this-in-javascript/ 137 | https://www.reddit.com/r/javascript/comments/4o1546/gentle_explanation_of_this_keyword_in_javascript/ 138 | Another long and in-depth explanation, plus some good discussion in the Reddit comments. 139 | 140 | - **The Inner Workings of Javascript's `this` keyword** 141 | https://www.sitepoint.com/inner-workings-javascripts-this-keyword/ 142 | https://www.sitepoint.com/mastering-javascripts-this-keyword/ 143 | A two-part article on the ins and outs of `this`. 144 | 145 | - **Let's Settle `this`, Part One** 146 | https://medium.com/@nashvail/lets-settle-this-part-one-ef36471c7d97 147 | Another look at `this`, with a number of examples and explanations 148 | 149 | - **Understanding Javascript Function Invocation and `this`** 150 | http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/ 151 | An excellent explanation of how function calls and the `this` keyword work 152 | 153 | - **When 'not' to use arrow functions** 154 | http://rainsoft.io/when-not-to-use-arrow-functions-in-javascript/ 155 | An in-depth look at when you should stick with standard JS functions instead of arrow functions 156 | 157 | - **Do ES6 Arrow Functions Really Solve "this" in Javascript?** 158 | https://derickbailey.com/2015/09/28/do-es6-arrow-functions-really-solve-this-in-javascript/ 159 | A dive into how `this` works inside of arrow functions, and some places when they may not be appropriate for use. 160 | 161 | - **Grokking Scope in Javascript** 162 | https://code.tutsplus.com/tutorials/grokking-scope-in-javascript--cms-26259 163 | Advice for understanding how Javascript variable coping works 164 | 165 | - **Let It Be - How to declare JavaScript variables** 166 | http://madhatted.com/2016/1/25/let-it-be 167 | https://www.reddit.com/r/javascript/comments/44yjzo/let_it_be_how_to_declare_javascript_variables/ 168 | A look at how `var`, `let`, and `const` behave, and how using them communicates intent. Further discussion in the Reddit comments. 169 | 170 | - **This in Javascript** 171 | https://zellwk.com/blog/this/ 172 | Tries to demystify the behavior of the `this` keyword by explaining the six situations that can change the value of `this`. 173 | 174 | - **Which Array Function When?** 175 | https://dev.to/andrew565/which-array-function-when 176 | A great explanation of the differences between the various methods that can loop over arrays (`map`, `filter`, `reduce`, and `forEach`), and when you should use each one. 177 | 178 | - **What is This in Javascript?** 179 | https://developer.telerik.com/topics/web-development/what-is-this-in-javascript/ 180 | An easy-to-read explanation of the different ways `this` can be defined in a function. 181 | 182 | - **Everything you wanted to know about JavaScript scope** 183 | https://toddmotto.com/everything-you-wanted-to-know-about-javascript-scope/ 184 | A detailed look at the concept of "scopes" in JS, including global, local, function, and lexical scopes, and how `this` behaves in relation to scopes. 185 | 186 | - **On `this` in Javascript** 187 | http://georgemauer.net/2017/08/03/on-this-in-javascript.html 188 | Describes how `this` is just a function parameter you don't get to name, and shows how it works with normal functions, arrow functions, and classes 189 | 190 | #### Paid Courses and Books 191 | 192 | - **Javascript: Understanding the Weird Parts** 193 | https://www.udemy.com/understand-javascript/?couponCode=YOUTUBE19 194 | https://www.youtube.com/watch?v=Bv_5Zv5c-Ts 195 | http://joanmira.com/javascript-understanding-the-weird-parts/ 196 | A widely recommended course on Javascript by Tony Alicea. The first 3.5-hour video is free on Youtube, with a discount link for the course. The last link is notes from the course. -------------------------------------------------------------------------------- /mobx-tutorials.md: -------------------------------------------------------------------------------- 1 | ### MobX Tutorials 2 | 3 | 4 | #### Basic Introductions 5 | - **MobX Docs** 6 | https://github.com/mobxjs/mobx 7 | https://mobxjs.github.io/mobx/ 8 | https://mobxjs.github.io/mobx/getting-started.html 9 | The official MobX site, with documentation including a getting started introduction and API reference. 10 | 11 | - **Getting Started with MobX - Video Series** 12 | https://www.youtube.com/watch?v=_q50BXqkAfI 13 | A quick two videos introduction to MobX: how to set it up, and get started coding a simple ToDo App. 14 | 15 | - **Managing complex state in React with MobX - Video Series** 16 | https://egghead.io/courses/manage-complex-state-in-react-apps-with-mobx 17 | Videos describing MobX fundamentals including debugging with the MobX-react devtools. 18 | 19 | - **Introduction video to MobX with React - Video** 20 | https://www.youtube.com/watch?v=XGwuM_u7UeQ 21 | In depth introduction to MobX with React including 'Why mobx' (all coded with ES5). 22 | 23 | - **React Native with MobX — Getting Started** 24 | https://medium.com/@dabit3/react-native-with-mobx-getting-started-ba7e18d8ff44 25 | An introduction article about combining MobX and React Native to create a simple list app. 26 | 27 | - **Real World MobX** 28 | https://www.youtube.com/watch?v=Aws40KOx90U 29 | A talk by MobX creator Michel Weststrate, describing MobX's concepts and usage 30 | 31 | - **A MobX introduction and case study** 32 | https://blog.wearewizards.io/a-mobx-introduction-and-case-study 33 | An introduction to MobX, with examples showing how it works in a real app with Typescript 34 | 35 | - **MobX First Impressions** 36 | https://benmccormick.org/2017/01/09/mobx-first-impressions/ 37 | A quick introduction to MobX's basic concepts and how it works 38 | 39 | - **How to Manage your JavaScript Application State with MobX** 40 | https://www.sitepoint.com/manage-javascript-application-state-mobx/ 41 | A detailed tutorial that introduces basic MobX usage, using only jQuery for the UI updates 42 | 43 | - **MobX + React Tutorial: Building your first app** 44 | http://orlandohamsho.com/javascript/mobx-react-tutorial-building-first-application/ 45 | A walkthrough that builds a basic list/detail application, and introduces the basics of MobX along the way. 46 | 47 | 48 | #### Testing 49 | 50 | - **Testing React and MobX** 51 | https://semaphoreci.com/community/tutorials/how-to-test-react-and-mobx-with-jest 52 | A look at ways to test React components and MobX logic 53 | 54 | 55 | #### Other 56 | 57 | - **One awkward thing about MobX: Complex Models** 58 | https://swizec.com/blog/awkward-thing-mobx-complex-models/swizec/7260 59 | Discussion of potential issues when handling complex models, and some possible workarounds. 60 | 61 | - **MobX - Like React, but for Data** 62 | http://danielearwicker.github.io/MobX_Like_React_but_for_Data.html 63 | Thoughts on MobX's core concepts, and how they relate to immutability, derived data, and observables. 64 | 65 | - **The Fundamental Principles Behind MobX** 66 | https://hackernoon.com/the-fundamental-principles-behind-mobx-7a725f71f3e8 67 | MobX creator Michel Weststrate discusses MobX's key concepts, including running all updates synchronously, and potential use of Proxies as a future improvement. 68 | 69 | - **Creating a reusable popver system with React and MobX** 70 | https://medium.com/@enitoni/creating-a-reusable-popover-system-with-react-and-mobx-7f47cc3b270d 71 | A useful tutorial on implementing a React modal system driven by MobX state 72 | 73 | - **7 Tips for Using MobX** 74 | https://engineering.huiseoul.com/7-tips-of-using-mobx-6ca8c35071dc 75 | Some helpful tips for using MobX, including using the right reactions, using reactions with names, using strict mode, and more. 76 | 77 | - **Mobx React - Best Practices** 78 | https://medium.com/@daniel.bischoff/mobx-react-best-practices-17e01cec4140 79 | Several tips for good use of MobX with React, including separating API calls from stores, injecting stores into components, using @computed, and more. 80 | 81 | - **The Curious Case of Mobx State Tree** 82 | https://medium.com/@mweststrate/the-curious-case-of-mobx-state-tree-7b4e22d461f 83 | Michel Weststrate, author of MobX, introduces the MobX-State-Tree library, which builds on MobX to add additional useful capabilities. 84 | 85 | - **MobX (with Decorators) in create-react-app** 86 | https://www.robinwieruch.de/create-react-app-mobx-decorators/ 87 | Covers how to use MobX in a CRA project, with and without decorators. 88 | 89 | 90 | #### MobX and Redux Comparisons 91 | 92 | - **"Confused: Redux or MobX?** 93 | https://www.reddit.com/r/reactjs/comments/4npzq5/confused_redux_or_mobx/ 94 | An in-depth thread comparing the two libraries. Includes comments from both Dan Abramov of Redux and Michel Weststrate of MobX describing their libraries, as well a number of other good comparisons. 95 | 96 | - **Redux or MobX: An attempt to dissolve the confusion** 97 | http://www.robinwieruch.de/redux-mobx-confusion/ 98 | An in-depth comparison of the ideas, concepts, approaches, and use cases for the two state management libraries 99 | 100 | - **MobX vs Redux: Comparing the Opposing Paradigms** 101 | https://youtu.be/76FRrbY18Bs 102 | A fantastic presentation by Preethi Kasireddy at ReactConf 2017, comparing the philosophies, concepts, tradeoffs, and use cases for Redux and MobX. 103 | 104 | - **Redux vs MobX by example** 105 | https://hashnode.com/post/redux-vs-mobx-by-example-part-i-intro-and-exploring-redux-cito5m0nn0sssxi53c7zq7jpr 106 | https://hashnode.com/post/redux-vs-mobx-by-example-part-ii-the-simplicity-of-mobx-and-conclusion-citpp2tbu003za853ua1tx228 107 | Implementation of the same app using both Redux and MobX, and a final comparison of the approaches 108 | 109 | - **"How does MobX compare with Redux, and which is better for React app development?"** 110 | https://hashnode.com/post/how-does-mobx-compare-with-redux-and-which-one-is-better-for-react-app-development-cisrch8eh0030g5532qeds1ja/answer/citq8rptk010cus530wdzdg69 111 | An excellent answer comparing the two libraries and their philosophies 112 | 113 | - **Comparing MobX and Redux - Video** 114 | https://www.youtube.com/watch?v=83v8cdvGfeA 115 | A great video to understand the differences between MobX and Redux. 116 | 117 | - **Redux vs MobX** 118 | https://medium.com/@himrc/redux-vs-mobx-a42c8950f3 119 | Some quick pros and cons of each, links to other discussions, and thoughts on when to use them. 120 | 121 | - **Redux or MobX: What I learned after refactoring a medium-sized React app** 122 | https://dannyherran.com/2017/03/react-redux-mobx-takeaways/ 123 | A useful list of takeaways, pros and cons of each library and the impact on an existing React application. 124 | 125 | - **Comparing Redux and MobX with two CTOs** 126 | https://youtu.be/ZGVwMkrL2n0 127 | A recorded presentation of two CTOs comparing several major aspects of React state management with `setState`, MobX, and Redux 128 | 129 | - **Introduction to Redux and MobX** 130 | https://medium.com/@guptagaruda/introduction-to-redux-and-mobx-e6fa98b6479 131 | A very nice comparison of the core concepts and benefits for Redux and MobX, with some good diagrams, useful tips, and links to relevant resources. 132 | 133 | -------------------------------------------------------------------------------- /node-js-and-npm.md: -------------------------------------------------------------------------------- 1 | ### Node.js and NPM 2 | 3 | Note: it is HIGHLY recommended that you install Node 5.x, particularly if you are on Windows. Node 5.x 4 | includes NPM 3.x, which fixes many problems working with packages on Windows. Also, you will want to use 5 | NPM 3.7 or later, as that fixes a bug with the progress bar that drastically slowed down installations. 6 | 7 | - **A Beginner's Guide to NPM** 8 | http://www.sitepoint.com/beginners-guide-node-package-manager/ 9 | Good overview of the major NPM commands for package management 10 | 11 | - **How to use NPM to Manage Node Packages** 12 | https://www.digitalocean.com/community/tutorials/how-to-use-npm-to-manage-node-js-packages-on-a-linux-server 13 | Focused on Linux, but the commands should mostly be cross-platform 14 | 15 | - **NPM - Node.js Package Manager** 16 | https://semaphoreci.com/community/tutorials/npm-node-js-package-manager 17 | Good tutorial on working with packages and dependencies using NPM 18 | 19 | - **Microsoft's Node.js Guidelines** 20 | https://github.com/Microsoft/nodejs-guidelines 21 | A great resource for setting up and working with Node on Windows, including solutions for common issues like compiling native-code modules and path length problems 22 | 23 | - **Learn You Node with VS Code** 24 | http://devhammer.net/blog/learn-you-node-with-vs-code/ 25 | Some basic instructions for setting up Node and working with NPM 26 | 27 | - **Control of Your Global Node Packages on Windows** 28 | http://www.bossable.com/1710/nodejs-package-path-for-windows/ 29 | Tips for dealing with various path problems 30 | 31 | - **Pragmatic Modularity with Node** 32 | http://mafintosh.com/pragmatic-modularity.html 33 | Includes a description of Node's resolution algorithm for `require` 34 | 35 | - **Node Hero: The Complete Node.js Tutorial** 36 | https://risingstack.com/resources/node-hero 37 | An ebook covering a variety of topics about using Node, including basic usage, NPM, Express, and building server applications. The ebook is free, but requires email registration to download. 38 | 39 | - **Understanding NPM** 40 | https://unpm.nodesource.com/ 41 | An interactive visualization that is intended to help you understand the role and scope of NPM. 42 | 43 | - **NPM for Beginners: A Guide for Front-End Developers** 44 | https://www.impressivewebs.com/npm-for-beginners-a-guide-for-front-end-developers/ 45 | An excellent introduction to what NPM is, and how to use it for installing and managing package dependencies. -------------------------------------------------------------------------------- /project-structure.md: -------------------------------------------------------------------------------- 1 | ### Project Structure 2 | 3 | 4 | **Related topics**: 5 | - [Boilerplates and Starter Kits](./boilerplates-and-starter-kits.md) 6 | - [React Component Patterns](./react-component-patterns.md) 7 | - [React State Management](./react-state-management.md) 8 | - [React and Forms](./react-forms.md) 9 | - [React and AJAX](./react-ajax.md) 10 | - [React Architecture and Best Practices](./react-architecture.md) 11 | - [Redux Architecture and Best Practices](./redux-architecture.md) 12 | 13 | 14 | #### Project File Structure 15 | 16 | - **Scaling React.js Applications** 17 | https://vimeo.com/168648012 18 | Max Stoiber's talk about managing large react.js applications. Covers "Feature" structure, redux-saga and CSS modules. 19 | 20 | - **How to Scale React Applications** 21 | https://www.smashingmagazine.com/2016/09/how-to-scale-react-applications/ 22 | https://twitter.com/dan_abramov/status/773912160896421889 23 | Max Stoiber, creator of the popular "React-Boilerplate" starter kit, describes the approaches they use to lay out projects based on features. The Twitter thread has discussion on some tradeoffs, including understand that Redux actions are "global", not scoped. 24 | 25 | - **Organizing Large React Applications** 26 | http://engineering.kapost.com/2016/01/organizing-large-react-applications/ 27 | Describes "File-Type First", "Feature First / Pods" approaches, as well as other related structure issues. 28 | 29 | - **Four Strategies for Organizing Code** 30 | https://medium.com/@msandin/strategies-for-organizing-code-2c9d690b6f33 31 | Describes "by component", "by toolbox", "by layer", and "by kind" approaches. 32 | 33 | - **Rules for Structuring (Redux) Applications** 34 | http://jaysoo.ca/2016/02/28/organizing-redux-application/ 35 | http://jaysoo.ca/2016/02/28/applying-code-organization-rules-to-concrete-redux-code/ 36 | http://jaysoo.ca/2016/12/12/additional-guidelines-for-project-structure/ 37 | Gives several useful rules for structuring code, with examples. 38 | 39 | - **A Better File Structure for React/Redux Applications** 40 | http://marmelab.com/blog/2015/12/17/react-directory-structure.html 41 | Suggests a domain-based structure, with tests kept alongside the code they relate to. 42 | 43 | - **Route-Based Folder Structure** 44 | https://gist.github.com/ryanflorence/daafb1e3cb8ad740b346 45 | Ryan Florence, an author of React Router, gives his suggested file structure. 46 | 47 | - **How to Better Organize Your React Applications?** 48 | https://medium.com/@alexmngn/how-to-better-organize-your-react-applications-2fd3ea1920f1 49 | Another feature-style approach, describing things in terms of "components", "scenes", and "services". 50 | 51 | - **Fractal Project Structure** 52 | https://github.com/davezuko/react-redux-starter-kit/wiki/Fractal-Project-Structure 53 | Docs from the React Redux Starter Kit project describing their "Fractal Project Structure" concept, and advice for file and app organization. 54 | 55 | - **Redux Structure: a Way to Success** 56 | https://datarockets.com/blog/redux-structure 57 | Thoughts on a "modules and components"-based approach to file structure, 58 | 59 | - **My journey toward a maintainable project structure for React/Redux** 60 | https://hackernoon.com/my-journey-toward-a-maintainable-project-structure-for-react-redux-b05dfd999b5 61 | Describes an evolution of approaches for project structure 62 | 63 | - **Building Modular Redux Applications** 64 | https://vimeo.com/album/4199344/video/187454108 65 | A talk discussing an approach to Redux structure by splitting logic into "data providers/sources" and presentation. 66 | 67 | - **How to Structure real world Redux/React Applications** 68 | https://medium.com/@yiquanzhou/how-to-structure-real-world-redux-react-application-d61e66a7dd36 69 | Another look at structuring code, based on business logic, data domains, and reusability. 70 | 71 | - **When a good plan comes together: React project structure for scaling** 72 | http://web.archive.org/web/20170706123441/http://thereactionary.net/when-a-good-plan-comes-together-react-project-structure-for-scaling/ 73 | More discussion of tradeoffs in various structure approaches. 74 | 75 | - **Structuring and Organizing the React Components Directory** 76 | http://noah-prince-tech-blog.ghost.io/structuring-and-organizing-the-react-components-directory/ 77 | Some useful suggestions for folder layout, folder naming, and import handling. 78 | 79 | - **How OkCupid organizes its multi-page React App** 80 | https://tech.okcupid.com/how-okcupid-organizes-its-multi-page-react-app/ 81 | https://www.reddit.com/r/reactjs/comments/5widfg/how_okcupid_organizes_its_multipage_react_app/ 82 | The OkCupid team discusses their approach for a multi-page app, including bundles, use of the Ducks pattern, and folder structures. Some good follow-up discussion in the Reddit comments. 83 | 84 | - **React Project Structure** 85 | https://daveceddia.com/react-project-structure/ 86 | An excellent article that gives practical advice for structuring the source of a React app, especially if you're a beginner or using `create-react-app`. 87 | 88 | - **Decoupling Hierarchies for Maintainable Code** 89 | https://medium.com/altschool-engineering/decoupling-hierarchies-for-maintainable-code-b13c24b2f047 90 | Some very interesting thoughts on how component structure, data flow, and folder structure can interact with each other. 91 | 92 | - **Writing Scalable React Apps with the Component Folder Pattern** 93 | https://medium.com/styled-components/component-folder-pattern-ee42df37ec68 94 | Describes a specific variation on "feature folders" that puts all files for a given component in a separate folder, as well as an approach for providing configurable component rendering with default behavior as a fallback. 95 | 96 | - **Fractal: A React app structure for infinite scale** 97 | https://hackernoon.com/fractal-a-react-app-structure-for-infinite-scale-4dab943092af 98 | 99 | - **Domain directory structure for React apps - why it's worth trying** 100 | https://tech.offgrid-electric.com/domain-directory-structure-for-react-apps-why-its-worth-trying-b3855ee77a1e 101 | Discusses experience with the "A Better File Structure" approach, and gives advice on best practices for import paths, creating sub-domains, and more. 102 | 103 | - **The 100% correct way to structure a React app (or why there's no such thing** 104 | https://hackernoon.com/the-100-correct-way-to-structure-a-react-app-or-why-theres-no-such-thing-3ede534ef1ed 105 | An extensive set of pragmatic thoughts on good practices for React project structure. Tries to quantify time spent on activities like creating new files and switching editor tabs, and gives some opinions on which patterns are more useful. -------------------------------------------------------------------------------- /react-ajax.md: -------------------------------------------------------------------------------- 1 | ### React and AJAX 2 | 3 | #### Basic Concepts 4 | 5 | - **AJAX Requests in React: How and Where to Fetch Data** 6 | https://daveceddia.com/ajax-requests-in-react/ 7 | An overview of where AJAX requests fit into React usage. 8 | 9 | - **How to make AJAX requests in React?** 10 | https://medium.com/@baphemot/how-to-make-ajax-requests-in-react-a6a52bb5a8b1 11 | A helpful introduction to making AJAX requests, including libraries to use, where to run requests, and a couple examples of handling "loading..." status. 12 | 13 | - **Understanding React: data hydration / initialization** 14 | https://medium.com/@baphemot/understanding-reactjs-data-hydration-initialization-bacbb790c7cb 15 | Describes several possible approaches to loading data from a server at app startup, including API calls and ways to embed data into the page. 16 | 17 | - **Where to fetch Data: componentWillMount vs componentDidMount** 18 | https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/ 19 | A quick comparison of when these two lifecycle methods are called, and why AJAX calls should generally be done in `componentDidMount` 20 | 21 | - **How to fetch data in React** 22 | https://www.robinwieruch.de/react-fetching-data/ 23 | An excellent look at several key aspects of fetching in data in React apps, including what components should containg the fetching and display logic, what lifecycle methods to use for API calls, and how to abstract out the fetching process into its own component. 24 | 25 | - **React AJAX Best Practices** 26 | http://andrewhfarmer.com/react-ajax-best-practices/ 27 | Covers four ways to approach managing queries and data fetching. 28 | 29 | - **AJAX/HTTP Library Comparison** 30 | http://andrewhfarmer.com/ajax-libraries/ 31 | A useful overview of the most popular AJAX libraries, including platform support and feature comparisons. 32 | 33 | - **Loading data from APIs in React** 34 | http://javascriptplayground.com/blog/2017/01/http-requests-reactjs/ 35 | A 10-minute screencast that demonstrates how to create a component that fetches data from an API and renders it in a page. Covers how to use the React lifecycle to make requests, using the `fetch` API, and dealing with response successes and failures. 36 | 37 | - **3 Libraries and 3 Ways to handle AJAX in React Apps** 38 | https://appendto.com/2017/01/3-libraries-and-3-ways-to-handle-ajax-in-react-apps/ 39 | Demonstrates three approaches to structuring AJAX calls (root component, containers, and via Redux middleware), and lists three of the most popular AJAX libraries. 40 | 41 | - **How to make AJAX API calls in React** 42 | https://www.techiediaries.com/react-ajax/ 43 | Looks at common libraries that are used for making AJAX calls in React apps, discusses which lifecycle methods to use for starting AJAX calls, and gives examples of using `fetch` to make AJAX calls. 44 | 45 | 46 | #### Request Implementation Examples 47 | 48 | - **Implementing React Redux with GraphQL** 49 | https://marufsarker.github.io/blog/2016/05/09/react-redux-with-graphql/ 50 | Walks through the implementation of a server/client Todo app that uses GraphQL mutations for the async actions. 51 | 52 | - **Rendering Backend Requests with React** 53 | https://blog.boldlisting.com/rendering-backend-requests-with-react-7e493103c2b6 54 | Describes a pattern for dealing with components that depend on loading data from a backend 55 | 56 | - **Build a React + Flux App with User Authentication** 57 | https://scotch.io/tutorials/build-a-react-flux-app-with-user-authentication 58 | Builds a React app that calls a remote API and authenticates users. Uses a specific auth provider and basic Flux implementation, but the concepts are widely applicable. 59 | 60 | - **Building Realtime Collaborative Offline-First Apps with React, Redux, PouchDB, and Websockets** 61 | http://blog.yld.io/2015/11/30/building-realtime-collaborative-offline-first-apps-with-react-redux-pouchdb-and-web-sockets/ 62 | A blog post and sample project demonstrating various layers of client-server syncing, eventually driving a Redux store and React UI. 63 | 64 | - **Handling AJAX In Your React Application with Agility** 65 | https://hackernoon.com/handling-ajax-in-your-react-application-with-agility-413f1f21fc70 66 | Describes three approaches to fetching data in a React app: within a React component, using the Relay GraphQL library, and using Redux middleware 67 | 68 | - **You don't need a fancy framework to use GraphQL with React** 69 | https://edgecoders.com/you-dont-need-a-fancy-framework-to-use-graphql-with-react-b47b436626fb 70 | A detailed explanation of how to construct GraphQL queries in a client and load the data into React components, without using any complicated libraries. 71 | 72 | 73 | #### Handling Request Status with State 74 | 75 | - **React-Redux issue #210: "dispatching in componentWillMount?"** 76 | https://github.com/reactjs/react-redux/issues/210#issuecomment-244774674 77 | Some valuable extended discussion about how managing requests and data really involves several distinct possible states. 78 | 79 | - **"Slaying a UI Antipattern" comparisons** 80 | http://blog.jenkster.com/2016/06/how-elm-slays-a-ui-antipattern.html 81 | https://medium.com/javascript-inside/slaying-a-ui-antipattern-in-fantasyland-907cbc322d2a 82 | https://medium.com/@gcanti/slaying-a-ui-antipattern-with-flow-5eed0cfb627b 83 | https://medium.com/@marsbergen/nice-pattern-for-redux-state-b8641b6ff9d1 84 | https://medium.com/javascript-inside/slaying-a-ui-antipattern-in-react-64a3b98242c 85 | Articles by different authors that demonstrate how to handle the common "loading/no data/data" issue with various static typing approaches and FP principles. 86 | 87 | - **Better data fetching with RemoteDataJS** 88 | http://javascriptplayground.com/blog/2016/06/remote-data-js/ 89 | Examples of how to use the author's RemoteDataJS library to manage request state. Helpful to see the list of states it tracks, even if you don't use the library. 90 | 91 | - **Dealing with APIs in React with ReactRemoteData** 92 | http://javascriptplayground.com/blog/2017/03/remote-data-react-components/ 93 | The author of the RemoteDataJS libraries shows a small React wrapper he created and how to use it 94 | 95 | - **A Better Way To Handle Loading State In Redux** 96 | http://nikolay.rocks/2017-06-18-better-redux-loading 97 | Discusses several ways to store "loading/success/failure" state, and tradeoffs of the approaches. Talks about Redux, but applies to React as well. -------------------------------------------------------------------------------- /react-deployment.md: -------------------------------------------------------------------------------- 1 | ### React Deployment 2 | 3 | #### Applications 4 | 5 | - **Understanding React deployment** 6 | https://medium.com/@baphemot/understanding-react-deployment-5a717d4378fd 7 | An excellent overview of the basic steps needed to deploy a React app, including solutions for common problems such as routing producing 404s and changes not showing up properly. 8 | 9 | - **Surge vs Github Pages: How to deploy a create-react-app project** 10 | https://medium.freecodecamp.com/surge-vs-github-pages-deploying-a-create-react-app-project-c0ecbf317089 11 | Shows how to deploy a CRA-based app onto the Surge.sh and Github Pages static hosting sites 12 | 13 | - **Fullstack React: Deploying a React App** 14 | https://www.fullstackreact.com/articles/deploying-a-react-app-to-s3/ 15 | https://www.fullstackreact.com/articles/deploying-a-react-app-with-a-server/ 16 | A pair of articles that show how to deploy a React app's static assets onto Amazon S3, and a backend API server onto Heroku 17 | 18 | - **Deploying React + Redux to Heroku** 19 | http://www.thegreatcodeadventure.com/deploying-react-redux-to-heroku/ 20 | Covers configuring Webpack for production, setting up build tasks and environment variables, configuring an Express server, and pushing the app to Heroku 21 | 22 | - **Create-React-App with an Express Backend** 23 | https://daveceddia.com/create-react-app-express-backend/ 24 | A quick overview showing how to configure Create-React-App to proxy API requests to a separate server (example uses Express, but applies to any other app server). 25 | 26 | - **Create-React-App with Express in Production** 27 | https://daveceddia.com/create-react-app-express-production/ 28 | Shows how to set up an React app with an Express server that serves as both API server and static file server, and deploy it to Heroku. 29 | 30 | - **From React to an Electron app ready for production** 31 | https://medium.com/@kitze/%EF%B8%8F-from-react-to-an-electron-app-ready-for-production-a0468ecb1da3 32 | Walks through the basics of configuring a Create-React-App-based Electron app and building it for production. 33 | 34 | - **React with Any Backend** 35 | http://andrewhfarmer.com/react-with-any-backend/ 36 | Some short discussion and suggestions for project structure and deployment steps when building a React app that talks to a non-Javascript backend server. 37 | 38 | - **Building a Full-Stack App with Serverless and React** 39 | http://serverless-stack.com/ 40 | A large, well-written, in-depth tutorial that covers all aspects of building a React app with an AWS "serverless" backend: creating an AWS account, setting up the serverless backend and API, building a React app that talks to the API, and deploying the React app on AWS. 41 | 42 | - **Using React in Multiple Environments** 43 | https://daveceddia.com/multiple-environments-with-react/ 44 | Discusses strategies for handling deployments to dev/staging/prod-type environments, including configuration of API endpoints and feature flags. 45 | 46 | - **Deploy a React app with SASS using Nginx** 47 | http://zabana.me/notes/build-deploy-react-app-with-nginx.html 48 | Covers several important notes for adding SASS to an ejected CRA app, creating a deploy step using rsync, and setting up the Nginx web server to serve the app. 49 | 50 | - **How to deploy a React application: an in depth overview of various options to deploy** 51 | https://codebrahma.com/deploy-react-application-depth-overview-various-options-deploy/ 52 | A detailed look at what deployment for production means, what files are involved, how to properly build an app for production, and places to host a react app. 53 | 54 | 55 | #### Libraries 56 | 57 | - **Creating react-editables: How to build a set of reusable React components** 58 | https://medium.com/@niwaa/creating-react-editables-how-to-build-a-set-of-reusable-react-components-with-an-hoc-and-write-7a685947a992 59 | Looks at the steps needed to create a set of reusable React components and publish them to NPM. Includes extended thoughts on component design for reusability. 60 | 61 | - **Adventures in creating a React component library with Create React App and TypeScript** 62 | https://medium.com/@stokedbits/adventures-in-creating-a-react-component-library-with-create-react-app-and-typescript-26d1116a7d87 63 | Walks through the process of using the TS+CRA starter kit as a baseline for building and publishing a component library. 64 | 65 | - **A guide to building a React component for NPM** 66 | https://medium.com/@markus.s.englund/a-guide-to-building-a-react-component-for-npm-68f03b314753 67 | A high-level overview of things to consider when publishing a React-based component library, including accessibility, documentation, naming, and marketing -------------------------------------------------------------------------------- /react-forms.md: -------------------------------------------------------------------------------- 1 | ### React and Forms 2 | 3 | (Note: the "linked state mixin" and "two-way binding" approaches described in some of these articles are still valid, but _mostly_ discouraged at this point. The more idiomatic approach is "one-way data flow" with "controlled inputs".) 4 | 5 | 6 | **Related topics**: 7 | 8 | - [Redux Techniques: Redux and Forms](redux-techniques.md#redux-and-forms) 9 | 10 | 11 | #### "Controlled" and "Uncontrolled Inputs 12 | 13 | - **React Docs: Forms** 14 | https://facebook.github.io/react/docs/forms.html 15 | The React documentation page on forms. Describes "controlled" and "uncontrolled" form inputs. 16 | 17 | - **React "controlled" vs "uncontrolled" inputs** 18 | https://gist.github.com/markerikson/d71cfc81687f11609d2559e8daee10cc 19 | An explanation of the terms "controlled inputs" and "uncontrolled inputs" 20 | 21 | - **React Form Components** 22 | http://donavon.js.org/react-forms/ 23 | A look at controlled vs uncontrolled inputs, with a useful note about issues with controlled inputs and certain browsers. 24 | 25 | - **Uncontrolled components are an anti-pattern** 26 | https://medium.com/@jedwards8/uncontrolled-components-are-an-anti-pattern-abbdd86fd39e 27 | Argues that uncontrolled components are a bad idea and should be avoided. 28 | 29 | - **ReactJS and controlled forms** 30 | http://leftdevel.com/blog/reactjs-controlled-forms/ 31 | A look at the difference between controlled and uncontrolled inputs, and some problems that can come from using uncontrolled inputs. 32 | 33 | - **Managing React Controlled Component State** 34 | http://spraso.com/managing-react-controlled-component-state/ 35 | Some short examples of how to properly manage state for controlled inputs 36 | 37 | - **Managing state and controlled form fields with React** 38 | https://blog.iansinnott.com/managing-state-and-controlled-form-fields-with-react/ 39 | Describes the concepts of "controlled" and "uncontrolled" inputs. 40 | 41 | - **React Hates me: "Overcontrolled" components** 42 | http://www.matthiaslienau.de/blog/2015/4/8/react-hates-me-overcontrolled-components 43 | Describes some specific issues with controlled inputs and the preventDefault method 44 | 45 | - **React.js Forms: Controlled Components** 46 | http://lorenstewart.me/2016/10/31/react-js-forms-controlled-components/ 47 | An excellent article that describes the concept of controlled components, and demonstrates examples of how to interact with different types of form inputs 48 | 49 | - **Controlled and uncontrolled form inputs in React don't have to be complicated** 50 | http://goshakkk.name/controlled-vs-uncontrolled-inputs-react/ 51 | A great summary of what controlled and uncontrolled inputs are, what each approach looks like, and how to handle values from different types of inputs. 52 | 53 | - **Controllable React Components** 54 | https://speakerdeck.com/lettertwo/controllable-react-components 55 | A slideshow discussing how React components can themselves either be controlled or uncontrolled, and introducing a library to help make components controllable. 56 | 57 | - **Collecting data from a wizard form** 58 | https://goshakkk.name/wizard-form-collect-info/ 59 | Examples of how to handle data management for a multi-step form 60 | 61 | - **React Forms: Using Refs** 62 | https://css-tricks.com/react-forms-using-refs/ 63 | A quick recap of what "controlled components" are, and some excellent examples of how to use refs to directly access values for different types of inputs in forms 64 | 65 | - **Understanding your options with forms in React** 66 | https://medium.com/@thegreengreek/understanding-your-options-with-forms-in-react-afedc91ebf3e 67 | A quick summary of the three major forms approachs (controlled inputs, uncontrolled inputs + refs, uncontrolled inputs + serialization), with code examples for each 68 | 69 | - **Transitioning from uncontrolled inputs to controlled** 70 | https://goshakkk.name/turn-uncontrolled-into-controlled/ 71 | Explains how to refactor React forms with uncontrolled inputs to use controlled inputs instead. 72 | 73 | - **Tightly Controlled Textareas - Building solid plain text editors in React** 74 | https://hashnode.com/post/tightly-controlled-textareas-building-solid-plain-text-editors-in-react-cj6yvu6yq00cls5wtrbbkw96d 75 | A tutorial for implementing controlled behavior for a simple Markdown text editor component, including examples. 76 | 77 | 78 | #### Form Tutorials and Usage 79 | 80 | - **Learn Raw React: Ridiculously Simple Forms** 81 | http://jamesknelson.com/learn-raw-react-ridiculously-simple-forms/ 82 | Covers the basics of implementing form rendering, updates, and validation, in plain JS 83 | 84 | - **Forms in React and Redux** 85 | http://x-team.com/2016/02/tutorial-forms-in-react-and-redux/ 86 | Demonstrates building a simple set of wrapper components to manage forms using React and Redux 87 | 88 | - **Not-so-simple Forms with React** 89 | http://www.randseay.com/articles/forms-with-react 90 | Explains how to set up more advanced form scenarios such as optional or repeatable sections. 91 | 92 | - **Using React's state to manage data entry** 93 | https://medium.com/@adamrackis/using-reacts-state-to-manage-data-entry-ed92e4fd1a42 94 | Describes how to manage data for forms using React component state and some wrapper components. 95 | 96 | - **Handling React Forms with Mobx Observables** 97 | https://blog.risingstack.com/handling-react-forms-with-mobx-observables/ 98 | Some examples of working with forms in React, using MobX for the data management. 99 | 100 | - **Forms in React and Redux** 101 | http://x-team.com/2016/02/tutorial-forms-in-react-and-redux/ 102 | A good example of how to set up form handling in conjunction with a Redux store. 103 | 104 | - **Radio Buttons and Checkboxes in React** 105 | http://react.tips/radio-buttons-in-reactjs/ 106 | http://react.tips/checkboxes-in-react/ 107 | Tutorials on managing various inputs in forms with React 108 | 109 | - **Building a Multi-Step Registration Form with React** 110 | https://www.viget.com/articles/building-a-multi-step-registration-form-with-react 111 | A form example that shows how to track the current form step, render the right form component, and store all the necessary form data 112 | 113 | - **Making dynamic form inputs with React** 114 | https://goshakkk.name/array-form-inputs/ 115 | Covers how to build a form that can add and remove entries dynamically, with examples. 116 | 117 | - **How to handle forms with just React** 118 | https://medium.com/@everdimension/how-to-handle-forms-with-just-react-ac066c48bd4f 119 | Describes a different approach for reading and managing form data, besides the usual "controlled inputs" pattern, based on the Javascript FormData object. 120 | 121 | - **Should a form for editing update the underlying model?** 122 | https://goshakkk.name/react-forms-for-editing/ 123 | Some quick thoughts on ways to handle tracking data in a form - whether it should be fully controlled by a parent, or accept the initial values and report them when it's submitted. 124 | 125 | - **Modeling form state in React** 126 | http://beautifulcode.1stdibs.com/2017/03/23/react-form-state/ 127 | Examples of how to structure form state to handle values and validation. Applicable no matter what state management approach is being used. 128 | 129 | - **Better Form Management** 130 | https://medium.com/@robbiedelavictoria/better-form-management-37c994095b1c 131 | A couple useful examples of approaches for simplifying React form handling logic. 132 | 133 | - **Forms in React** 134 | http://presentations.survivejs.com/forms-in-react/#/ 135 | Slides for a workshop on approaches for managing forms in React. Includes summaries of the various major approaches for managing forms, and links to several useful form-related libraries. 136 | 137 | - **Some Thoughts on Forms in React** 138 | https://medium.com/javascript-inside/some-thoughts-on-forms-in-react-9ca2d9078c20 139 | An extended look at several form-related concepts, including describing them as "view-driven" vs "model-driven", extracting form management into a Higher-Order Component, adding validation, and more. 140 | 141 | - **How to Work with Forms, Inputs, and Events in React** 142 | https://medium.com/capital-one-developers/how-to-work-with-forms-inputs-and-events-in-react-c337171b923b 143 | An excerpt from the book "React Quickly", which gives an overview of the recommended way to use forms in a React app. 144 | 145 | 146 | #### Form Validation 147 | 148 | - **Form Validation Tutorial with React.js** 149 | https://html5hive.org/reactjs-form-validation-tutorial/ 150 | A good example of setting up form validation in React 151 | 152 | - **Elegant Form Validation in React** 153 | https://spin.atomicobject.com/2016/10/05/form-validation-react/ 154 | Examples of adding validation to a form 155 | 156 | - **Two-Way Data Binding and Form Validation in React** 157 | https://medium.com/@thejenniekim/two-way-data-binding-and-form-validation-in-react-9d0b15123176 158 | Another demonstration of building a form with some logic and validation. 159 | 160 | - **Form Validation as a Higher Order Component** 161 | https://medium.com/javascript-inside/form-validation-as-a-higher-order-component-pt-1-83ac8fd6c1f0 162 | https://medium.com/javascript-inside/form-validation-as-a-higher-order-component-pt-2-1edb7881870d 163 | A 2-part series, demonstrating how to use Ramda and FP approaches to create validation logic 164 | 165 | - **Form recipe: Conditionally disabling the Submit button** 166 | http://goshakkk.name/form-recipe-disable-submit-button-react/ 167 | Some simple examples of validating data from controlled inputs 168 | 169 | - **Instant form field validation with React's controlled inputs** 170 | https://goshakkk.name/instant-form-fields-validation-react/ 171 | Examples of how to perform validation during rendering, and immediately show which inputs are invalid 172 | 173 | - **Really Dumb Form Validation** 174 | https://medium.com/@l_e/really-dumb-form-validations-739611d2ffcd 175 | Some quick examples of simple but effective form validation handling inside of React components. 176 | 177 | - **Why not field-level validations?** 178 | https://goshakkk.name/y-no-field-level-validations/ 179 | Thoughts on why it's better to handle validation at the "whole form" level, rather than strictly per-field. 180 | 181 | - **Validating React forms upon submit** 182 | https://goshakkk.name/submit-time-validation-react/ 183 | Discusses core concepts of validating form inputs, and demonstrates how to handle validations on submit for both uncontrolled and controlled components. 184 | 185 | 186 | #### Other 187 | 188 | - **Creating new fields and widgets for Mozilla's react-jsonschema-form** 189 | https://jeffersonheard.github.io/2016/11/creating-new-fields-and-widgets-for-mozillas-react-jsonschema-form/ 190 | Examples of working with the react-jsonschema-form library, including defining form schemas, gotchas, and customization with specific widgets and types 191 | 192 | - **List or Form, why not both? Making a list with a built in editor in React** 193 | http://web.archive.org/web/20161214145219/http://thereactionary.net/list-or-form-why-not-both-making-a-list-with-a-built-in-editor-in-react/ 194 | Builds an example of a list with the ability to do inline editing of items. 195 | 196 | - **Comparison of form libraries in React** 197 | https://codebrahma.com/form-libraries-in-react/ 198 | A good comparison of several different React/Redux-based form libraries, with code snippets demonstrating usage. 199 | 200 | - **The Joy of Forms with React and Formik** 201 | https://keyholesoftware.com/2017/10/23/the-joy-of-forms-with-react-and-formik/ 202 | Looks at some of the complexities with handling forms in React, and how the Formik library can help simplify that logic. 203 | 204 | - **Painless React Forms with Formik** 205 | https://hackernoon.com/painless-react-forms-with-formik-e61b70473c60 206 | Describes how the Formik library can help solve transforming props to form state, validation and error messages, and handling form submission. 207 | 208 | - **Formik - Handling files and reCaptch** 209 | https://hackernoon.com/formik-handling-files-and-recaptcha-209cbeae10bc 210 | Demonstrates how to use the Formik library to accept uploaded files and work with reCaptcha validation. 211 | 212 | - **Final Form / React Final Form** 213 | https://codeburst.io/final-form-the-road-to-the-checkered-flag-cd9b75c25fe 214 | https://medium.com/@erikras/final-form-arrays-and-mutators-13159cb7d285 215 | https://blog.cloudboost.io/final-form-decorators-calculated-fields-and-warnings-bf9cccd21b7e 216 | Erik Rasmussen, author of the popular Redux-Form library, introduces his new framework-agnostic Final Form library and its bindings for React. -------------------------------------------------------------------------------- /react-native.md: -------------------------------------------------------------------------------- 1 | ### React Native 2 | 3 | 4 | #### Tutorials 5 | 6 | - **React Native Express** 7 | http://www.reactnativeexpress.com/ 8 | A full set of tutorials for everything related to React Native 9 | 10 | - **Awesome React Native Education** 11 | https://github.com/hsavit1/Awesome-React-Native-Education 12 | An overview of the React Native ecosystem, in a similar style to react-redux-links 13 | 14 | - **React Native Workshop** 15 | https://rangle-io.gitbooks.io/react-native-workshop/content/ 16 | An introduction to React Native's concepts, in conjunction with Flexbox and Redux 17 | 18 | - **React Native Made Easy** 19 | https://www.reactnative.guide/ 20 | An extensive tutorial that teaches many aspects of React Native project setup and tooling while building an example notes app. 21 | 22 | - **Building the F8 App** 23 | http://makeitopen.com/ 24 | A dive into how the Facebook F8 conference mobile app was built, including planning, design, testing, and data management. 25 | 26 | - **Build a Coffee Finder App with React Native and the Yelp API** 27 | https://appendto.com/2016/11/build-a-coffee-finder-app-with-react-native-and-the-yelp-api/ 28 | A tutorial that covers building an IOS app that fetches data, organizes views, and displays the data on a map. 29 | 30 | - **How to distribute React Native components backed by native code** 31 | https://www.benwixen.com/articles/distributing-react-native-components-with-native-code/ 32 | A project layout for redistributable components with native code, that includes unit tests and supports automatic linking. 33 | 34 | - **Build an Imgur Client with React Native and MobX** 35 | https://medium.com/react-native-development/build-an-imgur-client-with-react-native-and-mobx-react-native-school-53146d648250 36 | A tutorial that demonstrates build an RN app with MobX for state management, use of RESTful APIs, full-screen images in a ListView, and detection of device orientation 37 | 38 | - **Offline-First Apps with React Native and Redux** 39 | http://rationalappdev.com/offline-first-apps-with-react-native-and-redux/ 40 | A tutorial that builds out a cat GIF app using React Native, Redux, Node, and Express, and includes offline support. 41 | 42 | - **Let's Build: Cryptocurrency Native Mobile App with React Native + Redux** 43 | https://medium.com/react-native-training/bitcoin-ripple-ethereum-price-checker-with-react-native-redux-e9d076037092 44 | https://medium.com/@wesharehoodies/tutorial-react-native-redux-native-mobile-app-for-tracking-cryptocurrency-bitcoin-litecoin-810850cf8acc 45 | https://medium.com/@wesharehoodies/learn-how-to-build-a-rn-redux-cryptocurrency-app-chapter-iii-a454dda156b 46 | https://medium.com/@wesharehoodies/learn-how-to-build-a-rn-redux-cryptocurrency-app-chapter-iv-b0e0c5ca2dca 47 | A 4-part tutorial series that shows how to set up a React Native project, add Redux, fetch data with Redux, and display that data with React. 48 | 49 | 50 | 51 | #### Specific aspects 52 | 53 | - **Using iOS Image Picker with React Native** 54 | http://goshakkk.name/react-native-camera-roll-image-picker/ 55 | Getting an ImagePicker to work on iOS is painful. It's barely documented. This tutorial-style article shows you everything you need to do to finally start asking users for images. 56 | 57 | - **Rapid cross-platform development with React Native** 58 | https://robots.thoughtbot.com/rapid-cross-platform-mobile-development-with-react-native 59 | Thoughts on how React Native enables code reuse and iteration, and a look at using the flexbox-based layout system on various platforms. 60 | 61 | - **Debugging React Native Applications** 62 | https://medium.com/reactnativeacademy/debugging-react-native-applications-6bff3f28c375 63 | A useful description of tools and techniques that can be used to help debug RN apps. 64 | 65 | - **Under the hood of React Native** 66 | https://speakerdeck.com/mkonicek/under-the-hood-of-react-native 67 | A slideset digging into the guts of how React Native works 68 | 69 | - **What I learned from building my first React Native App** 70 | http://cmichel.io/lessons-from-building-first-react-native-app/ 71 | A number of informative lessons learned building an app using RN and Redux, including components, performance, workflow, and use of Redux. 72 | 73 | - **Understanding React Native flexbox layout** 74 | https://medium.com/the-react-native-log/understanding-react-native-flexbox-layout-7a528200afd4 75 | A helpful visual guide to how Flexbox works, both in general and specific to React Native 76 | 77 | - **How to Create An Authentication System and a Persistent User Session with React Native** 78 | http://www.theodo.fr/blog/2017/03/how-to-create-an-authentication-system-and-a-persistent-user-session-with-react-native/ 79 | Demonstrates how to build an app that uses JWT authentication, and persist the token in storage to keep the user logged in 80 | 81 | - **React Native Effective Patterns** 82 | https://medium.com/the-poli/react-native-effective-patterns-3e0c9db6c32c 83 | Some useful suggestions for writing React Native apps, including use of callbacks, separating navigation from views, use of Redux, and more. 84 | 85 | - **React Native Layout Tricks** 86 | https://www.theodo.fr/blog/2017/04/react-native-layout-tricks/ 87 | Helpful examples for achieving specific UI layouts using RN's Flexbox implementation 88 | 89 | - **Where does authentication fit in a React Native app?** 90 | https://goshakkk.name/auth-in-react-native-apps/ 91 | Some quick thoughts on what authentication involves and how to handle it in an RN app 92 | 93 | - **The building blocks of React Native animations** 94 | https://goshakkk.name/react-native-animated-building-blocks/ 95 | Several useful sets of guidelines for thinking through and implementation animations in React Native, including "how should this change", visual state, transitions, and interpolations, plus links to additional resources for RN animations. 96 | 97 | - **6 Tips You Want to Know about React Native Performance** 98 | https://www.simplytechnologies.net/blog/2017/6/6/6-tips-you-want-to-know-about-react-native-performance 99 | Several useful suggestions for improving RN performance, including RN-specific suggestions like using FlatList instead of ListView, and pushing animations into native code. 100 | 101 | - **How we restructured our app with React-Navigation** 102 | https://m.oursky.com/how-we-restructured-our-app-with-react-navigation-98a89e219c26 103 | Describes some of the history of the React-Navigation library, and shows some examples of how to use it with Redux and make a Higher-Order Component to work with it. 104 | 105 | - **A comprehensive guide for integrating React-Navigation with Redux including authentication flow** 106 | https://medium.com/@shubhnik/a-comprehensive-guide-for-integrating-react-navigation-with-redux-including-authentication-flow-cb7b90611adf 107 | An extended tutorial that demonstrates connecting React-Navigation and Redux, and shows how to implement an authentication workflow. 108 | 109 | - **A Year of React Native: Styling** 110 | https://madebymany.com/stories/a-year-of-react-native-styling-part-1 111 | https://madebymany.com/stories/a-year-of-react-native-styling-part-2 112 | Looks at ways that styling in RN differs from styling on the web, and useful patterns for organizing styling logic in RN apps. 113 | 114 | - **React Native app performance: Major issues and insights on improving your app's performance** 115 | https://www.simform.com/react-native-app-performance/ 116 | A detailed look at common causes of perf issues in RN, such as memory leaks, large app size, and slow rendering, and discusses various solutions. 117 | 118 | - **React Native at Grofers: Using React Native components inside native views** 119 | https://lambda.grofers.com/starting-with-react-native-at-grofers-a-guide-to-using-react-native-components-inside-native-bbdd6a3470d4 120 | Looks at the pros and cons of using RN components in native views, including turnaround shipping speed, approach for bridging views, and performance. 121 | 122 | - **React Native Events in Gory Details: What Happens on the Way to Listeners** 123 | https://levelup.gitconnected.com/react-native-events-in-gory-details-what-happens-on-the-way-to-listeners-2cee6c55940c 124 | A deep dive into the internnal behavior and implementation of React Native's event system. 125 | 126 | - **Simplifying react-native navigation with a Redux router** 127 | https://medium.com/@ericacooksey/simplifying-react-native-navigation-with-a-redux-wrapper-8d5d530af8fc 128 | Examples of how to implement a Redux-based approach for handling navigation in conjunction with react-native-navigation -------------------------------------------------------------------------------- /react-redux-architecture.md: -------------------------------------------------------------------------------- 1 | ### React/Redux Architecture 2 | 3 | 4 | **Related topics**: 5 | - [React Component Patterns](./react-component-patterns.md) 6 | - [React State Management](./react-state-management.md) 7 | - [React and Forms](./react-forms.md) 8 | - [React and AJAX](./react-ajax.md) 9 | - [React Architecture and Best Practices](./react-architecture.md) 10 | - [Redux Architecture and Best Practices](./redux-architecture.md) 11 | - [Project Structure](./project-structure.md) 12 | -------------------------------------------------------------------------------- /react-routing.md: -------------------------------------------------------------------------------- 1 | ### React and Routing 2 | 3 | #### Routing 4 | 5 | - **Routing React Apps: The Complete Guide** 6 | https://scotch.io/tutorials/routing-react-apps-the-complete-guide 7 | An in-depth article covering use of React-Router (v2) 8 | 9 | 10 | - **Do I Even Need a Routing Library?** 11 | http://jamesknelson.com/even-need-routing-library/ 12 | Another excellent article from James K Nelson that digs into the core concepts behind a topic, this time looking at what routing libraries do, issues with browser history, and what to consider when deciding on a routing approach. 13 | 14 | - **Webpack code splitting with Create React App and React Router** 15 | https://www.drewbolles.com/blog/2016/11/14/webpack-code-splitting-with-create-react-app-react-router/ 16 | A quick example of how to use React-Router's hooks to set up code splitting with Webpack 17 | 18 | - **Multifactor Authentication in your React Apps** 19 | https://scotch.io/tutorials/multifactor-authentication-in-your-react-apps 20 | A tutorial demonstrating how to use the Auth0 service, along with React Router, to implement multi-factor authentication for an app. 21 | 22 | - **How to Handle Routing in React** 23 | https://code.tutsplus.com/tutorials/understanding-how-to-handle-routing-in-react--cms-27355 24 | A quick example of using React-Router v2 in a small React app 25 | 26 | - **React-router alternative: switch** 27 | https://medium.com/@daveford/react-router-alternative-switch-acd7961f08db 28 | Some examples of simply using switch statements and the history API for routing 29 | 30 | - **Routing in React, the uncomplicated way** 31 | https://hackernoon.com/routing-in-react-the-uncomplicated-way-b2c5ffaee997 32 | Examples of how to implement a custom routing approach, with minimal external dependencies. 33 | 34 | - **Build your own React Router v4** 35 | https://tylermcginnis.com/build-your-own-react-router-v4/ 36 | Tyler McGinnis, a React Training partner, walks through the process of building a miniature version of React Router v4 to help explain its concepts and implementation. 37 | 38 | - **A little bit of history** 39 | https://medium.com/@pshrmn/a-little-bit-of-history-f245306f48dd 40 | A deep look at the "history" library, which is the core of React Router and used by other routing libraries as well. 41 | 42 | - **Building a context-free React router** 43 | https://reactarmory.com/guides/context-free-react-router 44 | A tutorial that teaches how to create a simple push-state based React router without relying on React's context API. 45 | 46 | - **All About React Router 4** 47 | https://css-tricks.com/react-router-4/ 48 | A deep look at patterns and strategies for using React-Router v4 successfully. 49 | 50 | - **React Router DOM: set-up, essential components, & parameterized routes** 51 | https://blog.logrocket.com/react-router-dom-set-up-essential-components-parameterized-routes-505dc93642f1 52 | An introduction to the concept of a router, setting up React-Router, essential parts of the library, and how to build routes that have parameters. 53 | 54 | - **Advanced React Router concepts: recursive path, code splitting, animated transitions, and more** 55 | https://blog.logrocket.com/advanced-react-router-concepts-code-splitting-animated-transitions-scroll-restoration-recursive-17096c0cf9db 56 | A tutorial that demonstrates how to implement a variety of useful features using React-Router v4. 57 | 58 | - **React Router 4 Tutorial From Scratch** 59 | https://appdividend.com/2017/09/12/react-router-tutorial-example-scratch/ 60 | A short tutorial demonstrating use of React Router v4 61 | 62 | - **React Router v4 Unofficial Migration Guide** 63 | https://codeburst.io/react-router-v4-unofficial-migration-guide-5a370b8905a 64 | Practical advice and specific steps needed to migrate an app from React-Router v3 to v4. 65 | 66 | - **Introduction to React Router** 67 | https://dev.to/aurelkurtula/introduction-to-react-router-ha 68 | A quick look at the basics of React-Router v4. 69 | 70 | - **React Router DOM, plain and simple** 71 | http://coding4real.com/2017/12/19/using-react-router-dom/ 72 | An introduction that shows how to add React-Router to a basic React app, and describes the basic API. 73 | 74 | - **React Router v4: The Complete Guide** 75 | https://www.sitepoint.com/react-router-v4-complete-guide/ 76 | A detailed tutorial that covers the React Router v4 API and concepts, with many examples 77 | 78 | - **React Router v4: Philosophy and Introduction** 79 | https://tylermcginnis.com/react-router-philosophy-introduction/ 80 | A deep look at the history of React Router, and how v4 works as "just components". 81 | 82 | - **Server Rendering, Code Splitting, and Lazy Loading with React Router v4** 83 | https://medium.com/airbnb-engineering/server-rendering-code-splitting-and-lazy-loading-with-react-router-v4-bfe596a6af70 84 | Technical discussion of the problems involved in code-splitting server rendered apps, and how Airbnb has implemented solutions using React-Router v4 and Babel. 85 | 86 | - **URL Parameters with React Router** 87 | https://tylermcginnis.com/react-router-url-parameters/ 88 | Tyler McGinnis gives a short example of how to use parameters from the current URL in a component with React-Router v4 89 | 90 | - **Using React Router v4 with create-react-app** 91 | https://codingblast.com/react-router-create-react-app/ 92 | Explains key concepts of React-Router v4, and gives examples of using it in a CRA project 93 | 94 | 95 | #### Routing with Redux 96 | 97 | - **Let the URL Do the Talking** 98 | http://formidable.com/blog/2016/07/11/let-the-url-do-the-talking-part-1-the-pain-of-react-router-in-redux/ 99 | http://formidable.com/blog/2016/07/19/let-the-url-do-the-talking-part-2-bargaining-and-acceptance-with-redux-and-react-router/ 100 | http://formidable.com/blog/2016/07/25/let-the-url-do-the-talking-part-3-empower-the-url-with-redux-little-router/ 101 | http://formidable.com/blog/2016/09/13/introducing-nested-routing-in-redux-little-router/ 102 | A series of articles discussing pain points when using React-Router and Redux together, and introducing a library called Redux-Little-Router as an alternative 103 | 104 | 105 | - **An Introduction to the Redux-First Routing Model** 106 | https://medium.freecodecamp.com/an-introduction-to-the-redux-first-routing-model-98926ebf53cb 107 | An article that argues in favor of keeping location state in Redux, updating it with actions, and syncing the browser URL based on that state. Includes a sample implementation for the approach, and a link to the actual library the author built. 108 | 109 | - **Pre Release: Redux-First Router - A Step Beyond Redux-Little-Router** 110 | https://medium.com/faceyspacey/pre-release-redux-first-router-a-step-beyond-redux-little-router-cd2716576aea 111 | An opinionated article that argues against the approaches used by both React-Router and Redux-Little-Router, in favor of basing routing state in Redux, with a corresponding new library. 112 | 113 | - **Routedux - Routing the Redux way** 114 | https://cjdev.github.io/routedux/ 115 | An article introducing a library that maps URLs to actions and vice versa. 116 | 117 | - **Entering/Leaving hooks of routing for Redux apps** 118 | https://medium.com/@kuy/entering-leaving-hooks-of-routing-for-react-redux-app-22e6eea055a5 119 | Discusses use of enter/leave routing hooks for handling component data fetching needs, and how that is handled with the author's Redux-based routing library. 120 | 121 | - **Routes as State in React** 122 | https://blog.boon.gl/2017/06/29/routes-as-state-in-react.html 123 | Some thoughts on why tracking route data as state might make sense, and some examples of how to approach that. 124 | 125 | - **Redux-First Router data fetching; solving the 80% use case for async middleware** 126 | https://medium.com/faceyspacey/redux-first-router-data-fetching-solving-the-80-use-case-for-async-middleware-14529606c262 127 | An extended article discussing "component-first" vs "route-first" data fetching approaches, and how the author's library helps solve the "route-first" approach. 128 | 129 | - **Redux-First Router: Just Dispatch Actions** 130 | https://survivejs.com/blog/redux-first-router-interview/ 131 | An interview with the author of the redux-first-router library. The author describes the core concepts, how it differs from React-Router, useful features, and why he developed it. 132 | 133 | - **A Redux First Router Saga** 134 | https://medium.com/@bryanfillmer/a-redux-first-router-saga-67c2cda9252e 135 | Examples and discussion of how to use sagas in conjunction with Redux-based routing to handle side effects that are connected to route changes. 136 | 137 | - **Redux First Router - First Impressions** 138 | https://www.dailydrip.com/topics/react/drips/redux-first-router-first-impressions 139 | A short tutorial that shows how to add redux-first-router to a CRA project and configure it. 140 | 141 | - **React Router to Redux First Router** 142 | https://medium.com/@jonsamp/react-router-to-redux-first-router-2fea05c4c2b7 143 | Describes some of the problems the Codecademy team had using React-Router in conjunction with Redux, and why they switched to Redux-First-Router instead. 144 | 145 | 146 | #### Authentication 147 | 148 | - **How to Build a React Application with User Login and Authentication** 149 | https://stormpath.com/blog/build-a-react-app-with-user-authentication 150 | Builds a small React app from the ground up, with use of React-Router for routing and the Stormpath SDK to handle authentication and authorization. 151 | 152 | - **JWT Authentication with React + Redux** 153 | http://www.thegreatcodeadventure.com/jwt-authentication-with-react-redux/ 154 | Demonstrates handling sign-in flow, including a dynamic login/logout link, and implementing routes that can only be seen by logged-in users. 155 | 156 | - **Role-based authorization using React-Router** 157 | http://frontendinsights.com/role-based-authorization-using-react-router/ 158 | A look at some ways to control component routes based on user roles 159 | 160 | - **Role based authorization in React** 161 | https://hackernoon.com/role-based-authorization-in-react-c70bb7641db4 162 | Some alternative approaches to the previous post, using React component patterns like Higher Order Components to control authorization and rendering 163 | 164 | - **Dealing with Authentication in React** 165 | https://medium.com/@nesbtesh/dealing-with-authentication-in-react-cadb679fbc0f 166 | Some short examples of saving an authentication token, writing queries to use and update that token, and checking the token when rendering components. 167 | 168 | - **Role based routing with React and Redux** 169 | http://crazysigma.com/blogs/2017/04/16/role-based-routing-react-redux/ 170 | A description of a fairly simple approach for defining role-based handling of routes, with sample code. 171 | 172 | - **Preact Authentication Tutorial** 173 | https://auth0.com/blog/preact-authentication-tutorial/ 174 | A tutorial that demonstrates how to build an app with Preact, including authentication, and makes some comparisons to doing so in React. 175 | 176 | - **How to Implement Authentication for Your React App** 177 | https://medium.appbase.io/how-to-implement-authentication-for-your-react-app-cf09eef3bb0b 178 | https://medium.appbase.io/securing-a-react-web-app-with-server-side-authentication-1b7c7dc55c16 179 | A pair of posts that demonstrate implementing both client-side and server-side authentication behavior for a React/Node app. 180 | 181 | - **Protected Routes and Authentication with React Router v4** 182 | https://tylermcginnis.com/react-router-protected-routes-authentication/ 183 | A great tutorial that shows how to create routes that only authenticated users can access. 184 | 185 | - **Securing a React Web App with Authorization Rules** 186 | https://medium.appbase.io/securing-a-react-web-app-with-authorization-rules-2e43bf5592ca 187 | A tutorial that shows how to add authorization and authentication to a Todo app -------------------------------------------------------------------------------- /react-server-rendering.md: -------------------------------------------------------------------------------- 1 | ### React Server Rendering 2 | 3 | - **What's New with Server-Side Rendering in React 16** 4 | https://hackernoon.com/whats-new-with-server-side-rendering-in-react-16-9b0d78585d67 5 | Sasha Aickin, who wrote most of React 16's new SSR implementation, gives a very detailed look at how the implementation and behavior have changed. 6 | 7 | - **React for Beginers: Creating an Isomorphic React App** 8 | https://medium.com/codingbox/react-for-beginners-creating-isomorphic-react-redux-app-and-deploying-it-on-heroku-6a313f8f3693 9 | An in-depth article describing an isomorphic project configuration and deployment 10 | 11 | - **React.js: Server side rendering** 12 | http://crypt.codemancers.com/posts/2016-09-16-react-server-side-rendering/ 13 | An example of setting up server rendering using React-Router and Express 14 | 15 | - **ReactJS: Server side rendering with router v4 and redux** 16 | http://crypt.codemancers.com/posts/2017-06-03-reactjs-server-side-rendering-with-router-v4-and-redux/ 17 | A follow-up to the previous post that shows how to implement SSR using React-Router v4 instead of v3, and includes use of Redux as well. 18 | 19 | - **Build a Universal Javascript App** 20 | https://www.packtpub.com/books/content/build-universal-javascript-app-part-1 21 | https://www.packtpub.com/books/content/build-universal-javascript-app-part-2 22 | A tutorial that discusses some benefits of building a universal app, and walks through building an app with Express, React, and React Router. 23 | 24 | - **React is gaining ground as a universal server side templating system** 25 | https://medium.com/@velmu/react-is-gaining-ground-as-a-universal-server-side-templating-system-26fe02eebe12 26 | Some thoughts on using React as a template rendering engine, integrated into various server-side language stacks. 27 | 28 | - **Server Side React** 29 | https://remysharp.com/2016/12/07/server-side-react 30 | A well-written article detailing lessons learned trying to use React to render on the server, including tools used, bumps in the road and links to further resources 31 | 32 | - **Universal React Rendering: How We Rebuilt SitePoint** 33 | https://www.sitepoint.com/universal-react-rendering-sitepoint/ 34 | The SitePoint team explains how they added server-rendered React content into their existing Wordpress application 35 | 36 | - **React on the Server for Beginners: Build a Universal React and Node App** 37 | https://scotch.io/tutorials/react-on-the-server-for-beginners-build-a-universal-react-and-node-app 38 | Details building a React app that renders on both the client and the server 39 | 40 | - **Going Isomorphic with Python and React** 41 | https://dev.to/__amol__/going-isomorphic-with-python-and-react 42 | A look at how to use DukPy and React together to write an isomorphic web application with Python without even installing Node.js. 43 | 44 | - **Server side rendering with React, React Router v4, React Helmet, and CSS Modules** 45 | https://blog.digitalkwarts.com/server-side-rendering-with-reactjs-react-router-v4-react-helmet-and-css-modules/ 46 | A detailed tutorial demonstrating how to set up a production-ready SSR application 47 | 48 | - **Code Cracked for Code Splitting + SSR in Reactlandia: React Loadable + Webpack Flush Chunks** 49 | https://hackernoon.com/code-cracked-for-code-splitting-ssr-in-reactlandia-react-loadable-webpack-flush-chunks-and-1a6b0112a8b8 50 | Describes some of the problems involved in properly implementing both SSR and code-splitting, and how a combination of libraries seems to help solve those problems. 51 | 52 | - **Server-Side React Rendering** 53 | https://css-tricks.com/server-side-react-rendering/ 54 | A good tutorial that walks through the basic setup needed to start rendering React components into HTML in an Express server. 55 | 56 | 57 | - **Server-Render like a Pro /w Redux-First Router in 10 steps** 58 | https://medium.com/faceyspacey/server-render-like-a-pro-w-redux-first-router-in-10-steps-b27dd93859de 59 | A walkthrough for using the author's Redux-First Router library for managing SSR, including setting up Webpack configs. 60 | 61 | - **Introducing Second: a framework for mostly-static React applications** 62 | https://wildlyinaccurate.com/introducing-second-a-framework-for-mostly-static-react-applications/ 63 | Describes a new library for rendering static sites with React, with the ability to opt-in to "dehydrating" certain components on the client to make them interactive. 64 | 65 | 66 | - **Simple declarative Redux state with React Router 4 server side rendering** 67 | https://medium.com/@AlexFaunt/satisfying-your-apps-state-343118b0730d 68 | Demonstrates using a combination of React-Router 4 and a custom promise middleware to manage async data handling in an SSR React+Redux application. 69 | 70 | - **Server-side rendering with create-react-app** 71 | https://medium.com/@cereallarceny/server-side-rendering-with-create-react-app-fiber-react-router-v4-helmet-redux-and-thunk-275cb25ca972 72 | Demonstrates how to set up server-side-rendering with a standard CRA project to allow proper meta tags to be added without having to eject. Includes sample code for creating an Express app that does the work. 73 | 74 | - **React SSR** 75 | https://blog.eleven-labs.com/en/react-ssr/ 76 | A step-by-step guide to setting up an SSR React app from scratch, including use of Redux. 77 | 78 | - **Case study of SSR with React in a large e-commerce app** 79 | http://blog.jakoblind.no/case-study-of-ssr-with-react-in-a-large-e-commerce-app/ 80 | A set of tips and lessons learned from implementing SSR in an existing React app over the course of several years, including some concrete implementation details. 81 | 82 | - **Scaling React Server-Side Rendering** 83 | http://arkwright.github.io/scaling-react-server-side-rendering.html 84 | A long, detailed look at how a team implemented React+Redux SSR on top of an existing monolithic application. Includes discussion of many real-world issues experienced, such as load balancing and component caching. 85 | 86 | - **Making CRA apps work with SSR** 87 | https://medium.com/@zhirzh/making-cra-apps-work-with-ssr-part-1-8f5f813d510b 88 | https://medium.com/@zhirzh/making-cra-apps-work-with-ssr-part-2-fb871868216e 89 | https://medium.com/@zhirzh/making-cra-apps-work-with-ssr-part-3-199d70b4cbe5 90 | A series of posts that shows how to add SSR to an ejected CRA app, including use of Redux and React-Router. 91 | 92 | - **You might (not) need a Server Side Rendering Framework** 93 | https://adrienharnay.me/you-might-not-need-a-server-side-rendering-framework/ 94 | Discusses building a home-grown SSR setup using Webpack, rather than reusing something like Next.js. 95 | 96 | - **Server-side rendering React apps** 97 | https://hph.is/coding/server-side-rendering-react 98 | A friendly introduction to setting up a basic SSR React 16 app from scratch, including simple rendering of HTML, addition of Webpack and Babel, and use of React-Router. 99 | 100 | - **Using React and Next.js to build a PWA** 101 | https://aerolab.co/blog/react-nextjs-pwa/ 102 | Shows how to build a Hacker News app using the Next.js SSR platform 103 | 104 | - **The simple guide to server-side rendering React with styled-components** 105 | https://medium.com/styled-components/the-simple-guide-to-server-side-rendering-react-with-styled-components-d31c6b2b8fbf 106 | A short walkthrough that sets up a basic React SSR app, and adds the styled-components library for styling 107 | 108 | - **How I spent my Christmas enabling SSR** 109 | https://medium.com/@tabu_craig/how-i-spent-my-christmas-enabling-ssr-5bacfc686032 110 | A recap of how a team set up SSR for their existing React+Redux+Redux-Saga application, with the major changes they implemented 111 | 112 | - **"Server-Side Rendering - Not Worth It?"** 113 | https://www.reddit.com/r/reactjs/comments/7o6oj6/serverside_rendering_not_worth_it/ 114 | An extended Reddit discussion on the pros, cons, and techniques for SSR with React 115 | 116 | - **Upgrading a create-react-app project to a SSR + code splitting setup** 117 | https://medium.com/bucharestjs/upgrading-a-create-react-app-project-to-a-ssr-code-splitting-setup-9da57df2040a 118 | Walks through the process of setting up server-side rendering with Express, adding code splitting with the react-loadable library, and naming chunks with Webpack. -------------------------------------------------------------------------------- /react-state-management.md: -------------------------------------------------------------------------------- 1 | ### React State Management 2 | 3 | #### State Types and Data Flow 4 | 5 | - **A Visual Guide to State in React** 6 | https://daveceddia.com/visual-guide-to-state-in-react/ 7 | Describes what "state" is, what kinds of data should be included into React state, and how state flow relates to component updates. 8 | 9 | - **ReactJS: Props vs State** 10 | http://lucybain.com/blog/2016/react-state-vs-pros/ 11 | Explains that "props" are data passed in to a component, while "state" is data managed inside a component. 12 | 13 | - **Props vs State** 14 | https://github.com/uberVU/react-guide/blob/master/props-vs-state.md 15 | A quick summary of the differences between "props" and "state" in React components 16 | 17 | - **The 5 Types of React Application State** 18 | http://jamesknelson.com/5-types-react-application-state/ 19 | Describes different categories of state: data, communication, control, session, and location 20 | 21 | - **"M" and "C" in "MVC"** 22 | https://www.youtube.com/watch?v=fUpkYixd03k 23 | https://github.com/jamesknelson/m-and-c-in-mvc-talk 24 | James K. Nelson's talk at ReactNext, talking about the multiple categories of state and how controller components can manage them. 25 | 26 | - **Exploring React's State Propagation** 27 | https://www.sitepoint.com/exploring-reacts-state-propagation/ 28 | Discusses data flow in React, the difference between `state` and `props`, and the usefulness of immutability 29 | 30 | - **Redux'ing without Redux** 31 | https://medium.com/@m.mollaverdi/reduxing-without-redux-75dbd5c05336 32 | Thoughts on how some of Redux's goodness can perhaps be utilised without actually using Redux. 33 | 34 | - **Dataflow through React** 35 | https://jurassix.gitbooks.io/dataflow-through-react/content/index.html 36 | An online book that covers a number of topics on React components and data flow. 37 | 38 | - **React Anti-Patterns: Props in Initial State** 39 | https://medium.com/@justintulk/react-anti-patterns-props-in-initial-state-28687846cc2e 40 | Discussion of why using props to initialize a component's state may or may not be a bad idea. 41 | 42 | - **Best Practices for Component State in React** 43 | http://brewhouse.io/blog/2015/03/24/best-practices-for-component-state-in-reactjs.html 44 | Some excellent suggestions and approaches for state handling and structure. 45 | 46 | - **React state management patterns** 47 | http://vijayt.com/post/react-state-management-patterns/ 48 | Useful summaries of some common patterns for managing state (encapsulated vs uni-directional flow, single store or multiple stores, shared state between components). 49 | 50 | - **Watch Out for Undefined State** 51 | https://daveceddia.com/watch-out-for-undefined-state/ 52 | Discusses the common mistake of making data requests and not having data fields initialized for use in the initial render, and looks at several ways to handle the issue. 53 | 54 | - **How to Work with and Manipulate State in React** 55 | https://www.sitepoint.com/work-with-and-manipulate-state-in-react/ 56 | Covers how to access and update state in components, the difference between state and props, and working with stateless components. 57 | 58 | - **Lowest Common Ancestor** 59 | https://blog.embermap.com/lowest-common-ancestor-fbf5d5313a1 60 | An article that discusses the principle of keeping shared state at the "lowest common ancestor" of the components that need it. Actually talks about Ember, but the concepts are completely applicable to React as well. 61 | 62 | - **Understanding State and Props in React** 63 | https://hackernoon.com/understanding-state-and-props-in-react-94bc09232b9c 64 | A helpful explanation of the difference between "props" and "state". 65 | 66 | - **Local Storage in React** 67 | https://www.robinwieruch.de/local-storage-react/ 68 | Demonstrates how to persist state in React using local storage, how to use it as a cache, and how to make it expire. 69 | 70 | - **How to manage or eliminate React state without Redux** 71 | http://monicalent.com/blog/2017/07/23/manage-state-in-react/ 72 | An excellent writeup on techniques you can use to help manage state in React without using Redux, including only using component state for things that are really needed, extracting state management logic, and rethinking when you actually need stateful components. 73 | 74 | - **State management in Javascript** 75 | https://codeburst.io/state-management-in-javascript-15d0d98837e1 76 | Not React-specific, but some excellent general principles for dealing with state overall: represent data uniquely, derive values, define dependencies, and localise state as much as possible. 77 | 78 | - **Three approaches to distribute the state across components in React** 79 | https://engineering.hexacta.com/three-approaches-to-distribute-the-state-across-components-in-react-da4db5a389e0 80 | Looks at three ways to handle state that needs to apply to sibling components: controlling the state in the parent, synchronizing the states, and forcing a different component instance via the `key` prop 81 | 82 | 83 | #### Using `setState` 84 | 85 | - **React component state cheatsheet** 86 | https://twitter.com/dan_abramov/status/749710501916139520 87 | Dan Abramov pseudocodes his guidelines for when to put something into component state 88 | 89 | - **Where to Hold React Component Data: state, store, static, and this** 90 | https://medium.freecodecamp.com/where-do-i-belong-a-guide-to-saving-react-component-data-in-state-store-static-and-this-c49b335e2a00 91 | A great summary of different places to store state, and when and why you should use each. 92 | 93 | - **How to handle state in React: The Missing FAQ** 94 | https://medium.com/react-ecosystem/how-to-handle-state-in-react-6f2d3cd73a0c 95 | An article that dispels misunderstandings and answers common questions about how to handle state in React. 96 | 97 | - **Finding `state`'s place with React and Redux** 98 | https://medium.com/@adamrackis/finding-state-s-place-with-react-and-redux-e9a586630172 99 | A look at when and how using React component state may be useful, even when using Redux for primary app state 100 | 101 | - **A case for setState** 102 | https://medium.com/@zackargyle/a-case-for-setstate-1f1c47cd3f73 103 | An article arguing that React component state still has a number of uses. 104 | 105 | - **Using a function in `setState` instead of an object** 106 | https://medium.com/@shopsifter/using-a-function-in-setstate-instead-of-an-object-1f5cfd6e55d1 107 | An introduction to a lesser-known feature of `setState`: the ability to pass a callback function to update the state. Useful for ensuring proper updates. 108 | 109 | - **"Best kept React secret: declare state changes separately from component classes"** 110 | https://twitter.com/dan_abramov/status/824308413559668744 111 | Dan Abramov shows some screenshots that demonstrate how to define state update functions outside a component, then pass them to `setState` 112 | 113 | - **Functional `setState` is the future of React** 114 | https://medium.freecodecamp.com/functional-setstate-is-the-future-of-react-374f30401b6b 115 | Discusses passing a function to `setState` to perform updates, why that approach is useful, and how that pattern can be used to separate state update logic from component definition 116 | 117 | - **Does React have a `setState` problem? / `setState()` Gate: Navigating Behavior Confusion** 118 | https://twitter.com/i/moments/842710066826530816 119 | https://medium.com/javascript-scene/setstate-gate-abc10a9b2d82 120 | Eric Elliott recently posted a tweet saying that `setState` is bad for learners, and advanced devs have learned to avoid it. That spawned a large Twitter thread arguing the idea. Elliott later posted an article explaining his concerns in detail. Some excellent reading and points to consider all around - the "Moments" link includes a few of the tweets, but the whole thread is worth reading. 121 | 122 | - **Understanding ReactJS: `setState`** 123 | https://medium.com/@baphemot/understanding-reactjs-setstate-a4640451865b 124 | Several helpful tips and concepts for understanding how component state and `setState` work, including how to initialize component state, ways to call `setState`, and common errors. 125 | 126 | - **Stack Overflow: "Do I need to use `setState(function)` overload?"** 127 | http://stackoverflow.com/questions/43428456/do-i-need-to-use-setstatefunction-overload-in-this-case/43440790#43440790 128 | Dan Abramov gives a great in-depth answer explaining when and why to pass an updater function to `setState` instead of passing an object 129 | 130 | - **"`setState` doesn't actually care whether you've mutated your data or not"** 131 | https://news.ycombinator.com/item?id=14706862 132 | A couple comments from myself, talking about how `setState` actually behaves in practice in relation to mutation and immutability. 133 | 134 | - **Atomic `setState` Updates in React** 135 | https://alligator.io/react/getting-atomic-updates-with-setstate/ 136 | Discusses how the standard object form of `setState` can cause race conditions, while the functional form is more predictable. 137 | 138 | - **`setState` ftw** 139 | https://speakerdeck.com/michelebertoli/setstate-ftw 140 | Slides from Facebook dev Michele Bertoli's talk on how `setState` works, how to use it properly, and useful techniques for working with `setState`. 141 | -------------------------------------------------------------------------------- /react-styling.md: -------------------------------------------------------------------------------- 1 | ### React and Styling 2 | 3 | #### Basic Concepts 4 | 5 | - **Styling in React** 6 | https://www.kirupa.com/react/styling_in_react.htm 7 | An introduction to using React's built-in inline styling abilities 8 | 9 | - **How To Style React** 10 | http://andrewhfarmer.com/how-to-style-react/ 11 | An 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. 12 | 13 | - **Understand the React Styling Paradigms** 14 | http://jsramblings.com/2017/09/22/understand-the-react-styling-paradigms.html 15 | An excellent, very readable summary of the three main ways to deal with styles in React (plain CSS, CSS modules, and CSS-in-JS). Lists some pros and cons for each one, and points to some additional resources for learning about them. 16 | 17 | - **CSS in JS** 18 | http://blog.vjeux.com/2014/javascript/react-css-in-js-nationjs.html 19 | Christopher Chedeau's classic talk that inspired the "CSS in JS" revolution 20 | 21 | - **Components: A Styling Odyssey** 22 | https://speakerdeck.com/alexlande/components-a-styling-odyssey 23 | Slideshow discussing pros and cons of various approaches to managing styles for components 24 | 25 | - **A Unified Styling Language** 26 | https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660 27 | A fantastic article that reviews why people might want to write their styles in Javascript, explores possible benefits of doing so, and looks at how the "CSS" and "JS" communites can work together going forward. 28 | 29 | - **U&I With React** 30 | https://github.com/FarhadG/ui-react 31 | A free online book that teaches how to modular, extendable, and scalable component-based UIs. Covers best practices, and techniques like CSS preprocessors, CSS modules, inline styles, and more. Chapters available to read for free on Github, and the Leanpub book can be picked up for free as well. 32 | 33 | - **All You Need To Know About CSS-in-JS** 34 | https://medium.com/@wesharehoodies/all-you-need-to-know-about-css-in-js-984a72d48ebc 35 | A clear summary of the differences between "inline styles" and "CSS-in-JS", the pros and cons of using CSS-in-JS, and quick examples of using some of the most popular CSS-in-JS libraries. 36 | 37 | - **The CSS Holy War & How To Think Beyond Dogma / A Brief History of CSS-in-JS: How We Got Here and Where We're Going** 38 | https://medium.com/gitconnected/the-css-holy-war-how-to-think-beyond-dogma-e2c67692d409 39 | https://medium.com/gitconnected/a-brief-history-of-css-in-js-how-we-got-here-and-where-were-going-ea6261c19f04 40 | A pair of articles that look at the history of CSS, discuss the problems it tries to solve, 41 | and describe the use of CSS-in-JS as a way to help solve certain use cases in today's apps. 42 | 43 | - **Four ways to style React components** 44 | https://codeburst.io/4-four-ways-to-style-react-components-ac6f323da822 45 | Quick examples of plain CSS, CSS modules, inline styles, and the styled-components library. 46 | 47 | - **The best "styling in React" tutorial you've ever seen** 48 | https://blog.logrocket.com/the-best-styling-in-react-tutorial-youve-ever-seen-676f1284b945 49 | A comparison of how to style an application using inline styles, the styled-components library, and CSS modules. Has some good explanations of how each approach works. 50 | 51 | - **CSS-in-JS 101: All you need to know** 52 | https://github.com/stereobooster/css-in-js-101 53 | An extensive look at different ways to handle CSS in React, with pros and cons, techniques for optimizing CSS, and comparisons of different CSS-in-JS libraries. 54 | 55 | - **Styling React** 56 | https://survivejs.com/react/advanced-techniques/styling-react/ 57 | An overview of the various approaches for styling React applications and components, and some of the problems each approach tries to solve. 58 | 59 | 60 | #### Components and Styling 61 | 62 | - **Component Based Style Reuse** 63 | https://www.youtube.com/watch?v=_70Yp8KPXH8 64 | Pete Hunt talks about various approaches to defining styles for components in plain CSS and in React 65 | 66 | - **Patterns for Style Composition in React** 67 | http://jxnblk.com/writing/posts/patterns-for-style-composition-in-react/ 68 | Some great suggestions for defining reusable React components that can have variations in styling 69 | 70 | - **Functional CSS From A Pure UI Perspective** 71 | https://medium.com/@sharifsbeat/functional-css-from-a-pure-ui-perspective-bd04c8af4fdc 72 | Thoughts on various ways to compose classes and styles together. 73 | 74 | - **React JS Style Components** 75 | https://www.youtube.com/watch?v=gNeavlJ7lNY 76 | A talk describing ways to better compose existing styles in an application, using components. 77 | 78 | - **Orthogonality and CSS in JS** 79 | https://benmccormick.org/2017/01/03/orthogonality-and-css-in-js/ 80 | Some thoughts on the "separation of concerns" concept, and how that relates to defining modular code and components (including styling). 81 | 82 | - **James Kyle's thoughts on styling and components** 83 | https://twitter.com/i/moments/861549552901468160 84 | A Twitter thread from James Kyle, discussing how many of the arguments about styling and components are a result of people building different kinds of applications 85 | 86 | 87 | #### CSS-Based Approaches 88 | 89 | - **CSS Modules by Example** 90 | http://andrewhfarmer.com/css-modules-by-example/ 91 | A set of 7 examples demonstrating ways to use CSS modules. 92 | 93 | - **Elephants, The Three Code Ilities, & Two Months With CSS Modules** 94 | http://chrispearce.co/elephants-the-three-code-ilities-two-months-with-css-modules/ 95 | A look at how Lystable used CSS Modules to scale their codebase. 96 | 97 | - **Functional CSS - The Good, The Bad, and Some Protips for React.js Users** 98 | https://github.com/chibicode/react-functional-css-protips 99 | An essay describing the "functional CSS" approach, pros and cons of using it, and tips for using that approach with React. 100 | 101 | - **How we made our product more personalized with CSS Variables and React** 102 | https://medium.com/geckoboard-under-the-hood/how-we-made-our-product-more-personalized-with-css-variables-and-react-b29298fde608 103 | A walkthrough of how to build a themeable application using React components that update CSS variables for dynamic styles 104 | 105 | - **Styling your React app for beginners** 106 | https://medium.com/@dylan.broadbridge/styling-your-react-app-for-beginners-f6b39779019b 107 | Examples of basic CSS usage in a CRA-based application, including importing CSS files and use of inline styles in components for layout. 108 | 109 | 110 | #### JS-Based Approaches 111 | 112 | - **Journey to Enjoyable, Maintainable Styling with React, ITCSS, and CSS-in-JS** 113 | https://medium.com/maintainable-react-apps/journey-to-enjoyable-maintainable-styling-with-react-itcss-and-css-in-js-632cfa9c70d6 114 | A long, in-depth article detailing one dev's progression through various approaches to handling CSS. 115 | 116 | - **Thoughts on Inline Styles** 117 | https://medium.com/@andrewingram/my-thoughts-on-inline-styles-da94682b5e35 118 | A look at reasons why people might or might not use inline style approaches, and some opinions and suggestions on when to use different approaches. 119 | 120 | - **Style as a Function of State** 121 | https://medium.com/@rofrischmann/styles-as-functions-of-state-1885627a63f7 122 | A look at how styles can be managed similar to UI, and an example using the author's new styling library 123 | 124 | - **Invidual Paint for your React Components** 125 | https://vimeo.com/album/4199344/video/187454103 126 | A talk discussing various approaches to manage styles and themes for React 127 | 128 | - **Writing Your Styles in JS != Writing Inline Styles** 129 | http://mxstbr.blog/2016/11/inline-styles-vs-css-in-js 130 | Max Stoiber describes the key difference between "inline styles" and "CSS-in-JS" approaches: styles applied to elements vs styles added to a style tag. 131 | 132 | - **CSS-in-JS comparisons** 133 | https://github.com/MicheleBertoli/css-in-js 134 | A repository that contains implementation comparisons between many different CSS-in-JS libraries 135 | 136 | - **Comparing CSS in JS Solutions** 137 | http://ludovf.net/blog/comparing-css-in-js-solutions/ 138 | An overview of the various CSS-in-JS libraries and how their implementations differ. 139 | 140 | - **CSS in React Comparison Examples** 141 | https://github.com/joeshub/css-in-react 142 | A repo that demonstrates the basics of several different React CSS approaches and libraries. 143 | 144 | - **Should I use CSS-in-JS with React?** 145 | https://reactarmory.com/answers/should-i-use-css-in-js 146 | Some opinionated thoughts on the pros and cons of using CSS-in-JS approaches, including concerns about possibly security issues. 147 | 148 | - **Writing a CSS-in-JS Library from Scratch** 149 | https://medium.com/@tkh44/writing-a-css-in-js-library-from-scratch-96cd23a017b4 150 | The author of the Emotion library shows how to build a simple CSS-in-JS library, to help illustrate how they work. 151 | 152 | - **CSS-in-JS** 153 | https://gist.github.com/threepointone/9f87907a91ec6cbcd376dded7811eb31 154 | First in a series of posts from Sunil Pai, author of the Glamor library. Explains the basic concepts of handling CSS values as JS objects and arrays. 155 | 156 | 157 | - **Things to consider when choosing a React styling framework** 158 | http://jsramblings.com/2017/10/17/things-to-consider-when-choosing-a-react-styling-framework.html 159 | Helpful suggestions for things to compare between different styling libraries, such as how the styles are applied, syntax used, and feature support 160 | 161 | 162 | #### Style Libraries 163 | 164 | - **Styling ReactJS Applications** 165 | https://www.youtube.com/watch?v=19gqsBc_Cx0 166 | Max Stoiber's talk at ReactNL 2016, comparing various options for styling React applications and introducing his new library, Styled-Components. 167 | 168 | - **Scalable Styles in Production JS** 169 | https://medium.com/front-end-hacking/scalable-styles-in-production-js-cde88016f357 170 | Some comparisons between various approaches to managing styles (plain CSS, inline styles, CSS-in-JS), and why Aphrodite can help solve some of the issues that come up. 171 | 172 | - **"Styled Components or Glamor?"** 173 | https://www.reddit.com/r/reactjs/comments/5eq8ew/styled_components_or_glamor/ 174 | Discussion and comparisons between some different CSS-in-JS libraries 175 | 176 | - **The magic behind styled-components** 177 | http://mxstbr.blog/2016/11/styled-components-magic-explained/ 178 | A look at how the styled-components library uses the new ES6 "tagged template literals" feature to interpolate arguments and build up CSS 179 | 180 | - **Styled-Components: Enforcing Best Practices** 181 | https://www.smashingmagazine.com/2017/01/styled-components-enforcing-best-practices-component-based-systems/ 182 | A look at some best practices for writing styles for reusable components, and how the styled-components library can help enforce those principles. 183 | 184 | - **A 5-Minute Intro to Styled Components** 185 | https://medium.freecodecamp.com/a-5-minute-intro-to-styled-components-41f40eb7cd55 186 | A quick intro to the styled-components library 187 | 188 | - **CSS in JS: The Argument Refined** 189 | https://medium.com/@steida/css-in-js-the-argument-refined-471c7eb83955 190 | The author of the Este.js boilerplate describes his investigation of various React styling libraries, and how he ended up building his own 191 | 192 | - **Styled-Components in Action** 193 | https://medium.com/@lvarayut/styled-components-in-action-723852f2a93d 194 | A tutorial that walks through the main goals and concepts of Styled-Components, with examples 195 | 196 | - **Emotion: The Next Generation of CSS-in-JS** 197 | https://medium.com/@tkh44/emotion-ad1c45c6d28b 198 | The author of the Emotion library gives an overview of its principles, benchmarks, and uses. 199 | 200 | - **With styled-components into the future** 201 | https://medium.com/styled-components/with-styled-components-into-the-future-d1d917e7c22c 202 | A talk transcript that discusses the history and future direction of the Styled-Components library, including how it works, improvements in v2, and plans for interoperability between CSS-in-JS libraries. 203 | 204 | - **The performance of styled React components** 205 | http://blog.primehammer.com/2017/09/27/the-performance-of-styled-react-components/ 206 | Benchmarks comparing size, build speed, and other aspects of different CSS-in-JS libraries. 207 | 208 | - **Structuring our Styled Components** 209 | https://tech.decisiv.com/structuring-our-styled-components-part-i-2bf21fa64b28 210 | Discusses applying the Block-Element-Modifier styling structure approach to use of the styled-components library, with examples. 211 | 212 | - **Styled-Components Nitty-Gritty** 213 | https://blog.elpassion.com/styled-components-nitty-gritty-2d74b8690ef8 214 | An introduction to how to use the styled-components library, the problems that it solves, and how it works internally 215 | 216 | - **A Field Guide to CSS-in-JS** 217 | https://medium.com/@wonderboymusic/a-field-guide-to-css-in-js-f7cbd9ed79a7 218 | Looks at how to use the styled-components and emotion libraries, including syntax, theming, variables, classname generation, and more. 219 | 220 | - **CSS-in-JS Roundup: Styling React Components** 221 | https://alligator.io/react/css-in-js-roundup-styling-react-components/ 222 | A high-level comparison of 15 different CSS-in-JS libraries 223 | 224 | - **Migrating to styled-components cheatsheet** 225 | http://jsramblings.com/2017/10/29/migrating-to-styled-components-cheatsheet.html 226 | Some helpful tips for moving a project from vanilla CSS to the styled-components library 227 | 228 | 229 | #### Techniques and Examples 230 | 231 | - **How to build animated microinteractions in React** 232 | https://medium.freecodecamp.com/how-to-build-animated-microinteractions-in-react-aab1cb9fe7c8 233 | Examples of various ways to create small animations to give feedback as the user interacts with components 234 | 235 | - **Create That Component** 236 | https://medium.com/taitounited/create-that-component-1-7a2267bc2833 237 | https://medium.com/taitounited/create-that-component-2-f6e6ba2e6b5a 238 | https://medium.com/taitounited/create-that-component-3-25f1f722cead 239 | A series of examples that build components for assorted concepts like toggle switches, ripple effects, and toasts, using libraries like styled-components. 240 | 241 | -------------------------------------------------------------------------------- /react-techniques.md: -------------------------------------------------------------------------------- 1 | ### React Tips and Techniques 2 | 3 | 4 | - **Get your React.js application translated with style** 5 | https://medium.com/@jamuhl/get-your-react-js-application-translated-with-style-4ad090aefc2c 6 | A short opinionated intro to several aspects of handling translation in a React app, by the author of a React internationalization library. 7 | 8 | - **Adding Drag and Drop to React** 9 | https://www.dailydrip.com/blog/adding-drag-and-drop-to-react.html 10 | An example of using react-dnd to add drag-and-drop behavior, in conjunction with Redux. 11 | 12 | - **Climbing Up the React Component Tree** 13 | https://www.ynonperek.com/2017/08/05/react-parent-hirearchy/ 14 | https://www.reddit.com/r/reactjs/comments/6s4czp/traversing_react_tree_in_the_opposite_direction/ 15 | Gives examples for calculating an array describing a component's parents, including using a HOC and using context. Not a recommended thing to try, but the exploration of the idea is interesting. 16 | The Reddit comments have a bit more useful discussion. 17 | 18 | - **SVG Patterns in React - Build a Twitter Wall** 19 | https://www.robinwieruch.de/react-svg-patterns/ 20 | A tutorial that covers several aspects of using SVG in React, and demonstrates how to use the svg-patterns library to generate patterend backgrounds. 21 | 22 | - **Translating React Apps** 23 | https://tech.gadventures.com/translating-react-apps-99dede52d924 24 | Discusses how to use the React-Intl library to add translations to a React app 25 | 26 | - **Lessons from migrating a large codebase to React 16** 27 | https://blog.discordapp.com/lessons-from-migrating-a-large-codebase-to-react-16-e60e49102aa6 28 | An excellent post from the Discord team recapping how they migrated an older React codebase to work with React 16, including use of codemods, replacing private API usage, upgrading dependencies, and other issues they ran into. 29 | 30 | - **React UI Frameworks, Compared** 31 | https://gather.engineering/react-ui-frameworks-compared-dd631eb5c982 32 | A list of available React UI frameworks, with reviews and comparisons on breadth of components, quality, project health, and more. Includes Ant Design, PrimeReact, Office UI Fabric, Blueprint, React UI, Semantic UI React, ExtReact, and Kendo React UI. 33 | 34 | - **Robust React User Interfaces with Finite State Machines** 35 | https://css-tricks.com/robust-react-user-interfaces-with-finite-state-machines/ 36 | An excellent article that describes the concepts of state machines, how they relate to applications, and how they can be applied to help manage React component behavior. 37 | 38 | - **The Complete Firebase in React Authentication Tutorial** 39 | https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial/ 40 | A comprehensive article that covers setting up a React app that uses React Router for handling routes, and Firebase for authentication and user management. 41 | 42 | - **Don't Over React! Rendering Binary Data** 43 | https://www.bignerdranch.com/blog/dont-over-react/ 44 | Useful approaches for handling file blobs in a React app 45 | 46 | - **Global Component Registration** 47 | http://dylanpaulus.com/reactjs/2017/12/08/global-component-registration/ 48 | An example of extending the standard approach for looking up component types at runtime, by allowing the lookup table to be modified. 49 | 50 | - **Getting Started with Web Accessibility** 51 | https://medium.com/@emilymears/getting-started-with-web-accessibility-in-react-9e591fdb0d52 52 | An excellent look at ways to handle accessibility in React, including use of refs for focus, ARIA attributes, helpful tools, and more. 53 | 54 | 55 | #### Security 56 | 57 | - **Exploiting Script Injection Flaws in ReactJS Apps** 58 | https://medium.com/dailyjs/exploiting-script-injection-flaws-in-reactjs-883fb1fe36c1 59 | Describes how React is safe by design as long as it's used as intended, and looks at several possible attack vectors that can result from wrong use of React. 60 | 61 | - **How can I securely use CSS-in-JS with React?** 62 | https://reactarmory.com/answers/how-can-i-use-css-in-js-securely 63 | Covers several potential security holes that can result from allowing user input into CSS-in-JS libraries, with examples. 64 | 65 | 66 | #### JSX and Events 67 | 68 | - **Is JSX Still Relevant? Are there other options?** 69 | https://goshakkk.name/jsx-relevancy-options/ 70 | Gosha Arinich addresses complaints about using JSX and "mixing HTML into JS" by discussing how JSX is syntax sugar for `React.createElement()` calls, and how JSX is really optional. 71 | 72 | - **React Without JSX** 73 | https://mockbrian.com/blog/2017/08/11/react-without-jsx/ 74 | Describes how to add React to an existing page with no build tools, and a couple approaches to writing render functions that don't use JSX. 75 | 76 | - **Integrating React and Redux Into an Existing Backbone App** 77 | http://blog.isquaredsoftware.com/2017/07/react-redux-backbone-integration/ 78 | A look at ways to show React components inside of Backbone views, and some discussion of how to simplify React rendering when JSX isn't available by using libraries like `react-hyperscript-helpers`. 79 | 80 | - **How I learned to stop worrying and love the JSX** 81 | http://jamesknelson.com/learned-stop-worrying-love-jsx/ 82 | Discusses several aspects of JSX, including "separation of concerns", how JSX translates into function calls, that JSX is optional, when to avoid using JSX, and more. 83 | 84 | - **React without a build step** 85 | https://medium.com/@alexkrolick/writing-react-components-for-3rd-party-embedding-50331c18e26 86 | Describes how using `React.createElement` instead of JSX eliminates the need for a compile step, compares examples of equivalent JSX and `createElement` usage, and shows how to write a small embeddable widget using React/Preact that doesn't need any build step at all. 87 | 88 | - **9 Things You Should Know About JSX** 89 | https://dev.to/sarah_chima/9-things-you-should-know-about-jsx-3bm 90 | A useful explanation of what JSX syntax is, how it works, and and how to use it. 91 | 92 | - **How the JSX Transform Works** 93 | https://jaketrent.com/post/how-jsx-transform-works/ 94 | A helpful explanation of how JSX tags are transformed into React elements, with example snippets 95 | 96 | - **JSX In Depth - an interactive tutorial** 97 | http://blog.klipse.tech/javascript/2016/12/14/jsx.html 98 | An interactive version of the "JSX in Depth" tutorial from the React docs 99 | 100 | - **Events in React** 101 | https://www.kirupa.com/react/events_in_react.htm 102 | An introduction to React's event handling system, including useful tips and some gotchas 103 | 104 | - **React events in depth** 105 | https://www.youtube.com/watch?v=dRo_egw7tBc 106 | A video chat between Kent C Dodds, Dan Abramov, and Ben Alpert, discussing how events work in React 107 | 108 | - **Using React Fragments for the first time** 109 | https://javascriptplayground.com/blog/2017/12/react-fragments/ 110 | Describes the Fragment "component" and syntax introduced in React 16.2, the problems Fragments solve, and how to use them. 111 | 112 | 113 | #### Debugging and Error Handling 114 | 115 | - **Intro to Debugging React Applications** 116 | https://medium.com/@baphemot/intro-to-debugging-reactjs-applications-67cf7a50b3dd 117 | An excellent introduction to the basic tools, concepts, and approaches for debugging React apps, including the browser's DevTools console, network tab, and source debugger, as well as the React DevTools. 118 | 119 | - **React v16 beta is out, suddenly everyone needs to catch UI errors** 120 | https://medium.com/shiftgig-blog/react-v16-beta-is-out-suddenly-everyone-needs-to-catch-ui-errors-37c8c4b527e9 121 | Discussion and examples of using the new `componentDidCatch` and `ErrorBoundary` features in React 16, including a demo of what errors they will and won't catch. 122 | 123 | - **Catching exceptions using Higher Order Components in React 16** 124 | https://codeburst.io/catching-exceptions-using-higher-order-components-in-react-16-b8a401853a10 125 | https://twitter.com/dan_abramov/status/890716011133100032 126 | Examples of how to write a Higher-Order-Component that adds error boundaries. ALso worth contrasting with Dan's tweet, where he suggests that you shouldn't need to use HOCs to make use of error boundaries. -------------------------------------------------------------------------------- /redux-middleware.md: -------------------------------------------------------------------------------- 1 | ### Redux Middleware 2 | 3 | #### Tutorials 4 | 5 | - **Exploring Redux Middlewares** 6 | http://blog.krawaller.se/posts/exploring-redux-middleware/ 7 | Understanding middlewares through a series of small experiments 8 | 9 | - **Understanding Redux Middleware** 10 | https://medium.com/@meagle/understanding-87566abcfb7a 11 | Breaks down Redux's applyMiddleware function line-by-line, and explains the concepts involved 12 | 13 | - **Building Redux Middleware** 14 | https://reactjsnews.com/redux-middleware 15 | Demonstrates building a basic Redux middleware 16 | 17 | - **A Beginner's Guide to Redux Middleware** 18 | https://www.codementor.io/reactjs/tutorial/beginner-s-guide-to-redux-middleware 19 | A useful explanation of middleware use cases, with numerous examples 20 | 21 | - **Redux Middleware** 22 | http://jonnyreeves.co.uk/2016/redux-middleware/ 23 | A tutorial describing how Redux compares to typical "MVC", what a "middleware" is, what they can do, and how you can test them. 24 | 25 | - **Redux Middleware Tutorial** 26 | http://www.pshrmn.com/tutorials/react/redux-middleware/ 27 | An overview of what middleware is, how `applyMiddleware` works, and how to write middleware. 28 | 29 | - **Redux Middleware: Behind the Scenes** 30 | http://briantroncone.com/?p=529 31 | Digs into the concepts and implementation of middleware. 32 | 33 | - **Middlewares and React Redux Lifecycle** 34 | https://medium.com/@rajaraodv/using-middlewares-in-react-redux-apps-f7c9652610c6 35 | A description of what a middleware is, and how it works in Redux 36 | 37 | - **ReactCasts #6: Redux Middleware** 38 | https://www.youtube.com/watch?v=T-qtHI1qHIg 39 | A screencast that describes how middleware fit into Redux, their uses, and how to implement a custom middleware 40 | 41 | - **Redux Middleware** 42 | https://vmayakumar.wordpress.com/2016/12/27/redux-middleware/ 43 | Some analogies for understanding middleware in terms of the OOP "Decorator Pattern" vs Functional Programming composition 44 | 45 | - **Workshop Slides: Redux Middleware** 46 | http://www.slideshare.net/visualengin/workshop-22-reactredux-m 47 | A slideshow that explains how Redux middleware work, with several helpful visualizations 48 | 49 | - **Understanding Redux Middleware and Writing Custom Ones** 50 | https://dev.to/imwiss/understanding-redux-middleware-and-writing-custom-ones 51 | Describes the concept of middleware in Redux, possible use cases, and gives an example of writing a middleware to handle caching. 52 | 53 | - **Build your own Redux middleware** 54 | https://blog.campvanilla.com/redux-middleware-basics-getting-started-17dc31c6435c 55 | A good explanation of how middleware fit into the Redux data flow, how middleware are defined, and how to write a simple logging middleware. 56 | 57 | - **Learning Redux Middlewares by Reading Their Source** 58 | https://www.ynonperek.com/2017/08/21/learning-redux-middlewares-by-reading-their-source/ 59 | Explores the source code for redux-thunk, redux-promise, and redux-batch-middleware to help understand how middleware work. 60 | 61 | 62 | #### Middleware Techniques 63 | 64 | - **Two Weird Tricks with Redux** 65 | http://jlongster.com/Two-Weird-Tricks-with-Redux 66 | https://news.ycombinator.com/item?id=11488633 67 | James Longster describes a couple useful approaches he found while writing the Firefox Developer Tools: checking for specific actions using a middleware, and managing multiple async requests. The HN comments include some useful discussion. 68 | 69 | - **Redux Hack: Custom Thunk APIs** 70 | http://chrispearce.co/redux-quick-hack-custom-thunk-apis/ 71 | Demonstrates writing a custom thunk middleware that injects additional dependencies into thunks. 72 | 73 | - **Connecting Redux to your API** 74 | https://blog.boldlisting.com/connecting-redux-to-your-api-eac51ad9ff89 75 | Describes imperative and declarative approaches to managing request data and metadata 76 | 77 | - **Fix Ugly JSON Api Responses With Redux Middleware** 78 | http://blog.benwiley.org/fix-json-responses-redux-middleware/ 79 | Sets up a sample project that requests JSON data, then shows how to use some custom middleware to transform the response. 80 | 81 | - **You Aren't Using Redux Middleware Enough** 82 | https://medium.com/@jacobp100/you-arent-using-redux-middleware-enough-94ffe991e6 83 | Suggestions for using middleware to solve a number of interesting use cases 84 | 85 | - **Defining user on-boarding flows with Redux middleware** 86 | https://medium.com/@JohnRandom/defining-user-on-boarding-flows-with-redux-middlewares-217885acbafc 87 | Demonstrates implementing an on-boarding feature by implementing a Redux middleware to track user behavior and dispatch actions in response. 88 | 89 | - **"Do I always need to return a value from a Redux middleware?"** 90 | https://stackoverflow.com/questions/45964129/do-i-always-need-to-return-a-value-from-a-redux-middleware/45964310#45964310 91 | My answer to a question about whether middleware should do `return next(action)`. Short version: yes, always, unless you want to alter expected behavior. 92 | 93 | - **Practical Advanced Redux Webinar: Redux Middleware** 94 | https://www.youtube.com/watch?v=DqWiuvuK_78 95 | A recorded screenshare livestream that discusses the usefulness of Redux middleware, and demonstrates building middleware for fetching data, logging, and throttling. 96 | 97 | - **Redux: Drawing the Lines between Actions and Middleware** 98 | https://michaelwashburnjr.com/redux-actions-middleware/ 99 | Compares examples of behavior between thunks and middleware, and discusses when you might want to implement behavior in a middleware. 100 | 101 | - **Redux Middleware and Enhancers** 102 | https://chariotsolutions.com/blog/post/redux-middleware-and-enhancers-getting-redux-to-log-debug-and-process-async-work/ 103 | Describes some common Redux middleware and their uses, as well as how to set up the Redux DevTools enhancer for debugging. 104 | 105 | - **Redux analytics, without middleware** 106 | http://web.archive.org/web/20170617100422/http://blog.reactandbethankful.com/posts/2016/09/27/redux-analytics-without-middleware/ 107 | Discusses pros and cons of using middleware for analytics, and shows how to create a store enhancer that wraps `subscribe` to allow providing selectors and callbacks. 108 | 109 | - **How to use Redux middleware to decouple AJAX call?** 110 | http://www.albertgao.xyz/2017/12/07/how-to-use-redux-middleware-to-decouple-ajax-call/ 111 | Demonstrates writing a middleware that accepts a plain object description of an HTTP request, and executes the request -------------------------------------------------------------------------------- /redux-ui-management.md: -------------------------------------------------------------------------------- 1 | ### Redux UI Management 2 | 3 | 4 | #### UI and Widget Implementations 5 | 6 | - **"How can I display a modal dialog in Redux?"** 7 | http://stackoverflow.com/questions/35623656/how-can-i-display-a-modal-dialog-in-redux-that-performs-asynchronous-actions/35641680 8 | Dan Abramov describes a great technique for descriptively managing React modal dialogs using Redux actions and state, by storing names of components and their props. 9 | 10 | - **Creating Reusable Generic Modals in React and Redux** 11 | http://blog.isquaredsoftware.com/2016/11/posts-on-packtpub-generic-redux-modals-and-building-better-bundles/ 12 | https://www.reddit.com/r/reactjs/comments/4wjmme/implement_a_confirm_modal_using_react_redux/d68ajcw?context=3 13 | Describes an extension to Dan's technique that allows generic "picker" dialogs such as a ColorPicker to be reused by different parts of an application while keeping the Redux state serializable. (Blog post is based on my original comment on Reddit.) 14 | 15 | - **Implement a confirm modal using React & Redux** 16 | http://jslancer.com/2016/08/07/implement-a-confirm-modal-using-react-redux/ 17 | Demonstrates wrapping up an existing modal library to be controlled by Redux actions 18 | 19 | - **Implementing Search/Filter on a list in React and Redux** 20 | https://medium.com/@yaoxiao1222/implementing-search-filter-a-list-on-redux-react-bb5de8d0a3ad 21 | Some quick examples of using Redux to supply a list of items as a prop, and using React local component state to store a filtered version based on inputs. 22 | 23 | - **Creating Reusable Generic Modal Dialogs with React and Redux** 24 | https://www.packtpub.com/books/content/creating-reusable-generic-modals-react-and-redux 25 | A quick look at how to get results from generic dialogs like a ColorPicker, while keeping your Redux state serializable and component structure decoupled. 26 | 27 | - **Animating with React, Redux, and D3** 28 | https://medium.com/swizec-a-geek-with-a-hat/animating-with-react-redux-and-d3-80852153a25b 29 | Explanation and examples of drawing animated particles using D3 to calculate new positions, Redux to store the state, and React to render them. 30 | 31 | - **Open Sourcing a Redux Component** 32 | https://medium.com/@itsBenCripps/open-sourcing-a-redux-component-bb82f260ff62 33 | Details how the author developed a complex React+Redux grid component, including HTML structure, proper use of Immutable.js for good perf, and lib exports. 34 | 35 | - **Scalable Modals with React and Redux** 36 | https://codersmind.com/scalable-modals-react-redux/ 37 | Demonstrates implementing the basic Redux modal manager technique described by Dan Abramov in his Stack Overflow answer. 38 | 39 | - **A Redux-Saga Implementation of Modal Confirmation Dialogs in React** 40 | https://decembersoft.com/posts/a-redux-saga-implementation-of-modal-confirmation-dialogs-in-react-redux/ 41 | Some examples of using sagas for controlling flow of async calls and dialog management 42 | 43 | - **Practical Recursion: Implementing a File Item Tree View in React & Electron** 44 | https://codeburst.io/practical-recursion-implementing-a-file-tree-view-in-react-electron-af62e7b46d26?gi=da3b8e9bf9ee 45 | Demonstrates implementing a tree view component that shows folder structure read from the filesystem, and managing the visibility of tree nodes in Redux 46 | 47 | - **How To Manage UI State with Redux** 48 | https://codeburst.io/how-to-manage-ui-state-with-redux-24deb6cf0d57 49 | An informative discussion of application state vs internal component state, how "UI state" fits into app state, and how to write a UI reducer that tracks UI state. 50 | 51 | - **Introduce Redux local state to your React App** 52 | https://medium.com/@tangbenze/introduce-redux-local-state-to-your-react-app-9f96f18d4f35 53 | Demonstrates setup and use of a addon library to manage scoped actions, reducers, and connections for isolated component state. 54 | 55 | - **Using react-redux-set-local** 56 | https://www.andrewfong.com/blog/2017/07/03/react-redux-set-local/ 57 | Discussion of the rationale and implementation of a library for connecting isolated portions of a Redux store state to a component while maintaining separation between presentation and state management. 58 | 59 | - **Making Toast from Scratch in React-Redux** 60 | https://spin.atomicobject.com/2017/07/12/react-redux-toast/ 61 | A short tutorial that shows how to build your own "toast" notifications in React+Redux, with a link to the resulting implementation. 62 | 63 | - **Toast notification system in a React/Redux application** 64 | https://atech.blog/natterly/toast-notification-system-in-a-react-redux-application 65 | The Natterly team walks through how they built a Redux-connected toast notification implementation. 66 | 67 | - **A Functional Canvas Approach with Redux** 68 | https://medium.com/@peterxjang/a-functional-canvas-approach-with-redux-ce59a369241b 69 | https://medium.com/@peterxjang/a-functional-canvas-approach-with-redux-bab357d6c33c 70 | Some simple examples of how to use Redux and vanilla JS canvas code to draw canvas-based UIs with minimal dependencies. 71 | 72 | - **React/Redux with Mapbox** 73 | https://medium.com/@mcculloughrt/react-redux-with-mapbox-78fa3767211e 74 | Useful techniques for driving the appearance and behavior of a Mapbox-based geospatial app from React and Redux. 75 | 76 | - **React/Redux: Modals and Dialogs** 77 | https://medium.com/front-end-hacking/react-redux-no-need-to-component-state-for-modals-73871157b52e 78 | Discussion of the pros and cons of powering modals via Redux, with examples of how to show them using React 16's Portals. 79 | 80 | - **Handling Keyboard Commands with Redux** 81 | https://medium.com/@sandropadin/handling-keyboard-commands-with-redux-67584decb3ff 82 | Discussion of an approach for managing keybard interaction in a React+Redux app, with an interactive embedded example app on CodeSandbox 83 | 84 | 85 | #### Redux and Forms 86 | 87 | - **Practical Redux, Part 7: Form Change Handling, Data Editing, and Feature Reducers** 88 | http://blog.isquaredsoftware.com/2017/01/practical-redux-part-7-forms-editing-reducers/ 89 | Demonstrates how to use a custom form wrapper component to buffer input change events 90 | 91 | - **Practical Redux, Part 8: Form Draft Data Management** 92 | http://blog.isquaredsoftware.com/2017/01/practical-redux-part-8-form-draft-data-management/ 93 | Discusses how to implement logic to handle "draft/work-in-progress" data while editing items 94 | 95 | - **Abstracted Form State with Redux-Form** 96 | https://speakerdeck.com/erikras/abstracted-form-state-with-redux-form 97 | Slides by the author of Redux-Form, discussing how forms work in plain HTML/Javascript, in React, and how the Redux-Form library can integrate them into Redux. 98 | 99 | - **React, Redux, and Redux-Form** 100 | https://jokeyrhyme.github.io/2016/06/27/react-redux-redux-form.html 101 | Thoughts on the merits of using the Redux-Form library 102 | 103 | - **Conversational sign-up form UI with React and Redux** 104 | http://jsforallof.us/2016/09/08/conversational-sign-up-form-ui-with-react-and-redux/ 105 | An example of form management with Redux 106 | 107 | - **Should you store your form state in Redux?** 108 | http://goshakkk.name/should-i-put-form-state-into-redux/ 109 | Thoughts on the tradeoffs involved in storing form data in component state vs Redux, and different potential use cases. 110 | 111 | - **Writing maintainable forms with Redux** 112 | https://medium.com/@SBoudrias/writing-maintainable-forms-with-redux-2ef30b5d0e35 113 | Some basic examples for handling validation, loading initial data, and change tracking in forms. 114 | 115 | - **Using forms in React-Redux: Tips and Tricks** 116 | https://medium.com/@royisch/using-forms-in-react-redux-tips-and-tricks-48ad9c7522f6 117 | Some helpful suggestions for using Redux-Form to manage forms in a Redux app 118 | 119 | - **Dealing with forms in React/Redux - A simple pattern** 120 | https://medium.com/@jonasjensen/dealing-with-forms-in-react-redux-a-simple-pattern-7b94b393eb26 121 | Helpful examples for writing some simple generic form-handling reducers and action creators 122 | 123 | - **Here's what you can do to make migrating your forms to Redux easier in the future** 124 | https://goshakkk.name/prep-forms-for-redux/ 125 | Simple but useful advice on extracting form logic as reducer functions inside of classes 126 | 127 | - **Forms with Redux Form v7** 128 | https://codeburst.io/forms-with-redux-form-v7-part-1-of-2-e636d760e9b4 129 | https://codeburst.io/forms-with-redux-form-v7-part-2-of-2-f44ffee4a34d 130 | An extensive tutorial on Redux-Form that covers a variety of topics, including basic setup, making reusable form components, styling, dynamic fields with dependencies, real-time validation, and more. 131 | 132 | - **Redux Form Validation Tutorial Example From Scratch** 133 | https://appdividend.com/2017/11/05/redux-form-validation-tutorial-example/ 134 | A tutorial that demonstrates setting up a Redux app that uses Redux-Form, and adding validation logic to that form. -------------------------------------------------------------------------------- /redux-without-react.md: -------------------------------------------------------------------------------- 1 | ### Using Redux without React 2 | 3 | 4 | #### Vanilla JS and jQuery 5 | 6 | - **Redux without React - State Management in Vanilla Javascript** 7 | https://www.sitepoint.com/redux-without-react-state-management-vanilla-javascript/ 8 | A tutorial teaching Redux usage with a plain JS UI layer on top 9 | 10 | - **The Easiest Way to Start Using Redux Today** 11 | https://viktorfonic.com/start-using-redux/ 12 | A useful tutorial that introduces Redux and demonstrates using it with a jQuery-based UI 13 | 14 | 15 | #### Angular 16 | 17 | - **An Adventure in Redux: building redux-adventure** 18 | http://csharperimage.jeremylikness.com/2016/07/an-adventure-in-redux-building-redux.html 19 | Builds a small randomized dungeon game using Redux, TypeScript, and Angular 2 20 | 21 | - **Building Redux in TypeScript with Angular 2** 22 | http://blog.ng-book.com/introduction-to-redux-with-typescript-and-angular-2/ 23 | An extended tutorial that builds up a mini-Redux in TypeScript, then transitions to building an application 24 | 25 | - **Scalable Single-Page Application Architecture with Redux and Angular 2** 26 | http://blog.mgechev.com/2016/04/10/scalable-javascript-single-page-app-angular2-application-architecture/ 27 | An in-depth article covering how to architect an application using Redux, Angular 2, and RxJS. 28 | 29 | - **Building a Redux Application with Angular 2** 30 | https://www.pluralsight.com/guides/front-end-javascript/building-a-redux-application-with-angular-2-part-1 31 | https://www.pluralsight.com/guides/front-end-javascript/building-a-redux-application-with-angular-2-part-2 32 | A tutorial that teaches how to use Redux and Angular 2 together, by building a small finance app 33 | 34 | - **Build a Better Angular 2 Application with Redux and ngrx** 35 | http://onehungrymind.com/build-better-angular-2-application-redux-ngrx/ 36 | An extended article that demonstrates how to build a Redux-based Angular 2 app using the ngrx store implementation. Some interesting discussion in the comments. 37 | 38 | - **Real World Angular** 39 | https://blog.realworldfullstack.io/real-world-angular-part-4-state-of-my-spa-10bf90c5a15 40 | https://blog.realworldfullstack.io/real-world-angular-part-5-light-my-fire-34b0bcb351a8 41 | An Angular 2 tutorial that builds an app using Redux and Firebase 42 | 43 | - **UI State management with Redux in Angular 2** 44 | https://www.pluralsight.com/guides/front-end-javascript/ui-state-management-with-redux-in-angular-2 45 | An extended article that discusses the benefits of using Redux to manage state, and build an example app that uses Redux to control modals and sidebars. 46 | 47 | - **Managing State in Angular with ngrx/store** 48 | https://auth0.com/blog/managing-state-in-angular-with-ngrx-store/ 49 | A tutorial that demonstrates use of the ngrx/store variation of Redux as part of an Angular app. 50 | 51 | - **Angular Form Validations With Redux for Multiple Routes** 52 | https://dzone.com/articles/angular-form-validations-with-redux-for-multiple-r 53 | Examples of setting up Redux-based form validation in an Angular app. 54 | 55 | - **Web app architecture based on Redux** 56 | http://devblog.ztp.pt/web-app-architecture-based-on-redux/ 57 | https://medium.com/@akaztp/case-study-pt-2-implementing-redux-on-angular-9e79cd4faa37 58 | A series of posts describing a modular / layered architecture built around Redux, including a data layer for managing fetching, a business layer using RxJS Epics, and folder structure for Angular components. 59 | 60 | - **NgRx Antipatterns** 61 | http://brianflove.com/2017/11/01/ngrx-anti-patterns/ 62 | Examples of some ways to improve poor NgRx usage patterns. 63 | 64 | - **Getting started with Angular and Redux** 65 | https://damienbod.com/2017/09/07/getting-started-with-angular-and-redux/ 66 | A tutorial that covers setting up an Angular app that uses NgRx for state management. Recently updated to work with Angular 5. 67 | 68 | - **Learn Redux in Angular with NgRx Store** 69 | https://malcoded.com/posts/angular-ngrx-guide 70 | An extensive tutorial that introduces the concept of Redux and its Angular equivalent NgRx/store, and walks through building a small Angular currency conversion app. 71 | 72 | - **Ultimate Angular: NGRX Store + Effects** 73 | https://ultimateangular.com/ngrx-store-effects 74 | A free video course from Angular expert Todd Motto. Covers core Redux concepts, writing a Redux store, the NgRx version of Redux, and how to use the ngrx/effects library for handling side effects. 75 | 76 | - **NGRX Store: Understanding State Selectors** 77 | https://toddmotto.com/ngrx-store-understanding-state-selectors 78 | A deep look at how selectors can be used to extract data from a store and transform it as needed by components. 79 | 80 | - **NGRX Store: Actions vs Action Creators** 81 | https://toddmotto.com/ngrx-store-actions-versus-action-creators 82 | Describes the reasons for defining actions as constants, namespacing actions, using action creator functions, and defining actions as TypeScript classes 83 | 84 | - **"ngrx/store vs angular/store"** 85 | https://www.reddit.com/r/Angular2/comments/67coeo/ngrxstore_vs_angularreduxstore/ 86 | Discussion of the differences between ngrx/store and angular/store, with a comparison from an angular/store contributor 87 | 88 | - **A Beginner's Guide to Ngrx/store** 89 | https://medium.com/stratajet-tech/a-beginners-guide-to-ngrx-store-bc2184d6d7f0 90 | Describes how ngrx/store implements the Redux pattern using RxJS, and walks through a todo app tutorial 91 | 92 | 93 | #### Ember 94 | 95 | - **Why ember redux?** 96 | http://toranbillups.com/blog/archive/2017/08/02/why-ember-redux/ 97 | The author of the ember-redux lib talks about why he likes Redux, and why he prefers using it with Ember. 98 | 99 | - **The Frontside Podcast: ember-redux and glimmer-redux** 100 | https://frontside.io/podcast/055-redux-and-ember-with-toran-billups 101 | https://frontside.io/podcast/089-glimmer-redux-with-toran-billups 102 | A pair of podcasts with the creator of ember-redux and glimmer-redux 103 | 104 | 105 | - **Setting Up Redux + Observables in an Ember App** 106 | https://medium.com/@john.sniezek/setting-up-redux-observables-in-an-ember-app-aca9dccdd152 107 | A tutorial that shows how to set up ember-redux and add redux-observable. 108 | 109 | - **Using ember-changeset with ember-redux** 110 | https://emberway.io/using-ember-changeset-with-ember-redux-200a7e46c59a 111 | Examples of using a tool called ember-changeset to handle in-progress form edits in conjunction with the ember-redux bindings. 112 | 113 | 114 | #### Aurelia 115 | 116 | - **Managing State in Aurelia: How to Use Aurelia with Redux** 117 | https://www.sitepoint.com/managing-state-aurelia-with-redux/ 118 | A tutorial that builds a small Markdown editor three ways: pure Aurelia with data binding, Aurelia with Redux to manage state, and then implementation of undo/redo on top. 119 | 120 | - **Managing State in Aurelia: How to Use Aurelia with Redux** 121 | https://www.sitepoint.com/managing-state-aurelia-with-redux/ 122 | Covers setting up a standard Aurelia app, adding Redux, and use of redux-undo with the example. 123 | 124 | - **Why Aurelia and Redux is a natural and powerful combination** 125 | https://www.softvision.com/blog/aurelia-redux/ 126 | Thoughts on the benefits of Aurelia compared to other frameworks, and examples of how to use Redux in an Aurelia app. 127 | 128 | 129 | #### Other 130 | 131 | 132 | 133 | - **Explorations in Adapting Redux to C#** 134 | https://spin.atomicobject.com/2017/03/13/adapting-redux-c-sharp-xamarin/ 135 | An informative look at how AtomicObject has a Redux variant in C# 136 | 137 | - **Something Useless - Redux Implemented in Elixir** 138 | http://hostiledeveloper.com/2017/04/18/something-useless-redux-implemented-in-elixir.html 139 | An Elixir developor walks through implementing Redux in Elixir 140 | 141 | - **Advanced Redux in Xamarin** 142 | https://medium.com/pageup-tech/advanced-redux-in-xamarin-part-1-action-creators-19cb257093d2 143 | https://medium.com/pageup-tech/advanced-redux-in-xamarin-part-2-persistent-actions-middleware-2c1c684328a 144 | https://medium.com/pageup-tech/advanced-redux-in-xamarin-part-3-database-middleware-5dac7b5ee6ba 145 | 146 | Discusses how to use a C# implementation of Reedux, including the concepts of action creators and thunks, implementing persistence via middleware, and interacting with a database. 147 | 148 | - **Android.apply(Redux)** 149 | https://blog.shazam.com/android-apply-redux-2ad0f7355e0 150 | Discusses a Redux-inspired pattern for use with Android as an alternative to the MVP approach. 151 | 152 | - **Coupling a Stencil TODO app with Redux** 153 | https://www.javascripttuts.com/coupling-a-stencil-todo-app-with-redux/ 154 | A tutorial that updates an existing Stencil Todo app to use Redux 155 | 156 | - **Getting started with Redux in Swift** 157 | https://medium.com/mackmobile/getting-started-with-redux-in-swift-54e00f323e2b 158 | An overview of how to use the ReSwift library as part of an iOS app. 159 | 160 | - **Cedux: Experimenting with the Redux Model in C for Managing State** 161 | https://spin.atomicobject.com/2017/11/27/redux-model-in-c-cedux/ 162 | Examples of an experimental implementation of Redux in C 163 | 164 | - **Lessons learned implementing Redux on Android** 165 | https://blog.pusher.com/lessons-learned-implementing-redux-on-android/ 166 | Recaps experiences from using a Redux-based approach in Android apps using Kotlin 167 | 168 | - **A blockchain-backed Redux clone in 105 lines of code** 169 | https://swizec.com/blog/blockchain-backed-redux-clone-105-lines-code/swizec/7980 170 | An interesting experiment that plays with the idea of implementing Redux's store API around a simple blockchain. 171 | 172 | - **How to use Redux with Polymer** 173 | https://medium.com/@jalalio/step-1-how-to-use-redux-with-polymer-2-7bcfaee6fdb3 174 | https://medium.com/@jalalio/step-2-how-to-structure-larger-polymer-2-apps-with-redux-reselect-f588e64a191a 175 | https://medium.com/@jalalio/step-3-how-to-make-async-api-calls-in-a-polymer-2-app-using-redux-thunk-middleware-c71d596c2005 176 | A 3-part series that shows how to use the polymer-redux bindings, including basic setup, use of Reselect, and async API calls. -------------------------------------------------------------------------------- /thinking-in-react-and-flux.md: -------------------------------------------------------------------------------- 1 | ### Thinking in React and Flux 2 | 3 | **Related Topics** 4 | - [React Component Patterns](./react-component-patterns.md) 5 | - [React State Management](./react-state-management.md) 6 | - [React Architecture and Best Practices](./react-architecture.md) 7 | - [Redux Architecture and Best Practices)](./redux-architecture.md) 8 | - [Project Structure](./project-structure.md) -------------------------------------------------------------------------------- /tips-and-best-practices.md: -------------------------------------------------------------------------------- 1 | ### Tips, Guidelines, and Best Practices 2 | 3 | **Related Topics** 4 | - [React Architecture and Best Practices](./react-architecture.md) 5 | - [Redux Architecture and Best Practices](./redux-architecture.md) -------------------------------------------------------------------------------- /using-react-with-es6.md: -------------------------------------------------------------------------------- 1 | ### Using React with ES6 2 | 3 | 4 | #### React Component Definitions 5 | 6 | - **Which React Component Class Syntax Should I Use?** 7 | http://reactkungfu.com/2015/07/what-react-component-class-syntax-should-i-use/ 8 | Compares the standard React.createClass() syntax vs ES6 React.Component class syntax 9 | 10 | - **Coding with React like a Game Developer** 11 | https://medium.com/@PhilPlckthun/coding-with-react-like-a-game-developer-e39ffaed1643 12 | Demonstrates React usage with ES5 vs ES6, plus some other topics 13 | 14 | - **The React Quick Start Guide: ES6 Edition** 15 | http://www.jackcallister.com/2015/08/30/the-react-quick-start-guide-es6-edition.html 16 | An ES6 version of the other guide listed earlier 17 | 18 | - **Digging Into React: Choosing Component Styles** 19 | http://benmccormick.org/2016/05/02/digging-into-react-choosing-component-styles/ 20 | A comparison of the three ways to define a React component. Good descriptions, and links to some other related discussions. 21 | 22 | - **Refactoring React Components to ES6 Classes** 23 | http://www.newmediacampaigns.com/blog/refactoring-react-components-to-es6-classes 24 | Walks through the steps needed to convert an older-style `React.createClass()` component to use the newer ES6 class syntax instead. 25 | 26 | - **React ES5 to ES6 Checklist** 27 | https://github.com/cht8687/React-ES5-To-ES6-Checklist 28 | A checklist of steps and changes to refactor your ES5-based React code to use ES6 features 29 | 30 | - **React `createClass` vs ES6 Class Components** 31 | https://www.fullstackreact.com/articles/react-create-class-vs-es6-class-components/ 32 | A comparison of the different ways to create class components in React, and some of the differences between how they behave (including method binding) 33 | 34 | 35 | #### Methods and Instance Binding 36 | 37 | - **React and ES6 - Binding Approaches** 38 | http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html 39 | Various methods of binding "this" in React ES6 classes 40 | 41 | - **Why and How to Bind Methods in your React Component Classes** 42 | http://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react-component-classes/ 43 | A good look at function binding in JS, and how it works with React 44 | 45 | - **React, ES6, Autobinding, and createClass()** 46 | http://blog.andrewray.me/react-es6-autobinding-and-createclass/ 47 | A useful review of how JS function binding works, and how to handle it in ES6 with React 48 | 49 | - **React Binding Patterns: 5 Approaches for Handling `this`** 50 | https://medium.com/@housecor/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56 51 | Describes five different ways you can handle binding methods to handle the `this` keyword correctly 52 | 53 | - **"Fat arrow vs autobind vs bindbindbind?"** 54 | https://www.reddit.com/r/reactjs/comments/54xnao/fat_arrow_vs_autobind_vs_bindbindbindbindbind/d85wj0l 55 | Dan Abramov comments, giving his thoughts on how to handle method binding. 56 | 57 | - **Do you even need that bind?** 58 | https://swizec.com/blog/do-you-even-need-that-bind/swizec/7247 59 | A dive through React's implementation of event handling, and why callback binding is needed 60 | 61 | - **Use Property Initializers for Cleaner React Components** 62 | https://www.fullstackreact.com/articles/use-property-initializers-for-cleaner-react-components/ 63 | A look at how the "Class Properties"/"Property Initializer" syntax allows much cleaner definition of method binding, and how to configure Babel to use that syntax 64 | 65 | - **Javascript, React, This, and Programming Fundamentals** 66 | https://www.andrewfong.com/blog/2017/05/13/javascript-react-this-and-programming-fundamentals/ 67 | A helpful explanation of how `this` works in Javascript, how method binding works, and how that relates to React classes and class methods. 68 | 69 | 70 | 71 | 72 | 73 | 74 | #### Method Binding Utilities 75 | 76 | - **React-Autobind** 77 | https://github.com/cassiozen/React-autobind 78 | A useful utility to bind class methods. A good compromise - makes binding explicit, but removes repetition. 79 | 80 | - **react-bind-decorator** 81 | https://github.com/zackargyle/react-bind-decorator 82 | Another autobinding approach, intended to be fast and performant. 83 | 84 | - **react-class-binder** 85 | https://github.com/Klathmon/react-class-binder 86 | https://www.reddit.com/r/reactjs/comments/4p0ytu/i_made_a_small_package_to_easily_autobind_this_in/ 87 | Automatically bind methods defined in a React component using the ES2015 class syntax (similar to how React.createClass works). The Reddit comments have discussion on some differences between the various libs that implement autobinding. 88 | 89 | - **Reflective Bind** 90 | https://github.com/flexport/reflective-bind 91 | A Babel plugin that transforms use of inline functions in render methods so you don't have to worry about rendering performance. 92 | -------------------------------------------------------------------------------- /webpack-tutorials.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/valentinogagliardi/react-redux-links/6bc4e2e875d5b04a96403480ef2f1f5392f58e14/webpack-tutorials.md --------------------------------------------------------------------------------