├── .github ├── PULL_REQUEST_TEMPLATE.md └── workflows │ └── action.yml ├── 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 ├── mlc_config.json ├── 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-hooks.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 | -------------------------------------------------------------------------------- /.github/workflows/action.yml: -------------------------------------------------------------------------------- 1 | name: Check URLs for dead links 2 | on: 3 | workflow_dispatch: 4 | # schedule: 5 | # - cron: "0 11 * * 1" # Runs weekly at 7:00 AM EST on Monday 6 | push: 7 | # jobs: 8 | # markdown-link-check: 9 | # runs-on: ubuntu-latest 10 | # steps: 11 | # - uses: actions/checkout@master 12 | # - uses: gaurav-nelson/github-action-markdown-link-check@v1 13 | # with: 14 | # config-file: 'mlc_config.json' 15 | # use-quiet-mode: 'yes' 16 | # use-verbose-mode: 'yes' 17 | 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 FAQ** 104 | https://github.com/timarney/react-faq 105 | A collection of links to help answer your questions about React, including how to get started 106 | 107 | - **Front-End Developer Handbook** 108 | https://frontendmasters.gitbooks.io/front-end-handbook-2017/content/ 109 | 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. 110 | 111 | - **Top Javascript Frameworks and Topics to Learn in 2017** 112 | https://medium.com/javascript-scene/top-javascript-frameworks-topics-to-learn-in-2017-700a397b711 113 | 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. 114 | 115 | - **How to Learn React: A Five-Step Plan** 116 | https://www.lullabot.com/articles/how-to-learn-react 117 | A good set of suggested steps to follow and tools to use for learning React and Redux. 118 | 119 | - **Ten Things a Serious JavaScript Developer Should Learn** 120 | https://benmccormick.org/2017/07/19/ten-things-javascript/ 121 | A well-written, excellent collection of advice for mid-level JS developers, listing important topics that they should be familiar with. 122 | 123 | - **So you completed the official React tutorial. Now what?** 124 | https://goshakkk.name/next-steps-official-react-tutorial/ 125 | 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. 126 | 127 | - **5 practical tips to finally learn React in 2018** 128 | https://goshakkk.name/tips-finally-learn-react/ 129 | Common-sense suggestions for simplifying the React learning process, including skipping buzzwords and hardcoding data. 130 | 131 | - **Spellbook of Modern Web Dev** 132 | https://github.com/dexteryy/spellbook-of-modern-webdev#gui-framework 133 | A large list of categorized resources for dozens of web development-related topics. 134 | 135 | - **Developer Productivity Tips from the React Experts** 136 | https://www.telerik.com/kendo-react-ui/react-best-practices-and-productivity-tips/ 137 | The KendoReact team curated the top productivity tips of 20+ React experts, ranging from smart ways to get started to advanced productivity hacks. Includes ideas from Emma Wedekind, Kent C. Dodds, vjeux and many more. 138 | 139 | 140 | #### General Suggestions for Learning 141 | 142 | - **Learn the Javascript Ecosystem one package at a time** 143 | https://www.javascriptstuff.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 Manage Javascript Fatigue** 172 | https://auth0.com/blog/how-to-manage-javascript-fatigue/ 173 | 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". 174 | 175 | - **Javascript is a buffet, not the enemy** 176 | https://scriptconf.org/blog/javascript-is-a-buffet-not-the-enemy-chris-heilmann/ 177 | 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. 178 | 179 | - **Are we making the web too complicated?** 180 | http://seldo.com/weblog/2017/05/21/are_we_making_the_web_too_complicated 181 | 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. 182 | 183 | - **Keeping Up With the JavaScript World** 184 | https://daveceddia.com/keeping-up-with-javascript/ 185 | 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. 186 | 187 | 188 | #### Learning Project Ideas 189 | 190 | - **5 Projects to Help You Learn React** 191 | https://daveceddia.com/react-practice-projects/ 192 | A list of 5 sample project ideas that aren't todo lists, ranging from basic card components to a Github issues page. 193 | 194 | - **The secret to being a top developer is building things! Here's a list of fun apps to build** 195 | https://medium.freecodecamp.org/the-secret-to-being-a-top-developer-is-building-things-heres-a-list-of-fun-apps-to-build-aac61ac0736c 196 | A list of 8 good-sized project ideas, including a Trello clone, cryptocurrency tracker, and a native messenger clone 197 | 198 | - **10 React Start Project Ideas to Get You Coding** 199 | https://medium.com/@dtkatz/10-react-starter-project-ideas-to-get-you-coding-5b35782e1831 200 | A list of 10 options besides todo lists, including a quiz builder, a music player, and a forum app. 201 | 202 | - **Every time you build a todo list, a puppy dies** 203 | https://medium.freecodecamp.org/every-time-you-build-a-to-do-list-app-a-puppy-dies-505b54637a5d 204 | A list of 28 app ideas that aren't todo lists. Suggests using a Ruby on Rails backend, but the ideas are sufficiently generic. Ideas include a calendar, a book reading club, a Twitter client, and more. 205 | 206 | - **What to do after the React/Redux tutorials** 207 | http://blog.jakoblind.no/react-redux-tutorials/ 208 | Suggests 8 APIs you could use to help build an application after working your way through basic tutorials. 209 | 210 | - **7 GUIs** 211 | http://eugenkiss.github.io/7guis/tasks/ 212 | A list of 7 generic example apps that can be built in any language or UI framework. Intended as a basic usability benchmark for different UI frameworks, but also a decent list of ideas for learning projects. Includes a counter, a temperature converter, a flight booker, a timer, a CRUD app, and more. 213 | -------------------------------------------------------------------------------- /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 | https://www.javascriptstuff.com/react-starter-projects/ 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 Project Setup 87 | 88 | - **Simple React Development in 2018** 89 | https://hackernoon.com/simple-react-development-in-2017-113bd563691f 90 | 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. 91 | 92 | - **Taming the React Setup** 93 | http://developer.telerik.com/featured/taming-react-setup/ 94 | 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). 95 | 96 | - **Kick-Start React Projects with Create-React-App** 97 | https://www.sitepoint.com/create-react-app/ 98 | Some quick tips on how to use Create-React-App to create a new React project and tweak the setup. 99 | 100 | - **Getting Started with React the Easy Way** 101 | http://codeutopia.net/blog/2016/01/10/getting-started-with-react-the-easy-way/ 102 | Shows the simplest way to load React into a web page and start using it 103 | 104 | - **The Minimal React Webpack Babel Setup** 105 | https://www.robinwieruch.de/minimal-react-webpack-babel-setup/ 106 | 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. 107 | 108 | - **Hipster Boilerplate** 109 | https://github.com/Jordaanm/hipster-boilerplate 110 | 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). 111 | 112 | - **JavaScript Stack from Scratch** 113 | https://github.com/verekia/js-stack-from-scratch 114 | 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. 115 | 116 | - **React Ecosystem Setup - Step-By-Step** 117 | https://codeburst.io/react-ecosystem-setup-step-by-step-walkthrough-721ff45a7fc1 118 | An in-depth walkthrough that shows to to set up Webpack and Babel, and explains why each bit of configuration is needed. 119 | 120 | - **Always up-to-date Guide for Modern JavaScript Development** 121 | https://mvilrokx.gitbooks.io/always-up-to-date-guide-for-modern-javascript-dev/content/ 122 | An opinionated guide for setting up a modern JS development environment. 123 | 124 | - **Setup a React Environment using Webpack and Babel** 125 | https://scotch.io/tutorials/setup-a-react-environment-using-webpack-and-babel 126 | A tutorial that teaches how to set up a basic Webpack 2 + Babel config from scratch. 127 | 128 | - **Setting up Webpack, Babel, and React from scratch in 2017** 129 | https://stanko.github.io/webpack-babel-react-revisited/ 130 | A step-by-step tutorial that demonstrates each piece of the process needed to set up a build system from scratch. 131 | -------------------------------------------------------------------------------- /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 FAQ** 27 | https://github.com/timarney/react-faq 28 | A collection of links to help answer your questions about React.js 29 | 30 | - **JS Coach** 31 | https://js.coach/ 32 | An automatically-updated searchable and categorized list of JS packages related to React, Webpack, Babel, and more. 33 | 34 | - **Awesome React Components** 35 | https://github.com/brillout/awesome-react-components 36 | Catalog of React components / libraries 37 | 38 | - **Awesome React Talks** 39 | https://github.com/mightyCrow/awesome-react-talks 40 | A curated list of talks about React or topics related to React. 41 | 42 | - **230 Curated Resources and Tools for Building Apps with React** 43 | https://appendto.com/2016/12/230-resources-and-tools-for-building-apps-with-react-js/ 44 | A useful list of articles, libraries, and tools that cover the range of React development. 45 | 46 | - **Awesome Create-React-App** 47 | https://github.com/tuchk4/awesome-create-react-app 48 | A collection of articles, links, issues, and information on how to use and customize the Create-React-App tool. 49 | 50 | - **Awesome CSS-in-JS** 51 | https://github.com/tuchk4/awesome-css-in-js 52 | A collection of awesome things regarding CSS in JS approaches 53 | 54 | - **"What are your top React/React Native Blogs that you frequent?"** 55 | https://www.reddit.com/r/reactjs/comments/5t8loz/what_are_your_top_reactreact_native_blogs_that/ 56 | Several comments listing good React-related blogs, including my own list of high-quality blogs that I subscribe to. 57 | 58 | - **Awesome MobX** 59 | https://github.com/mobxjs/awesome-mobx 60 | A collection of awesome things regarding MobX. 61 | 62 | - **Made with React** 63 | http://madewithreact.com/ 64 | A collection of websites and applications using the React or React Native JavaScript library. 65 | 66 | - **Awesome React** 67 | https://react.libhunt.com/ 68 | A categorized collection of awesome React libraries, resources and shiny things, based on the awesome-react list. 69 | 70 | 71 | #### Online IDEs and Editors 72 | 73 | - **CodeSandbox** 74 | https://codesandbox.io/ 75 | 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. 76 | 77 | - **WebpackBin** 78 | https://www.webpackbin.com/ 79 | An online IDE with the ability to import NPM packages, create ES2015 and TypeScript projects, and more. 80 | 81 | - **StackBlitz** 82 | https://stackblitz.com/ 83 | 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. 84 | 85 | 86 | #### People 87 | 88 | - **Dan Abramov's React List** 89 | https://medium.com/@dan_abramov/my-react-list-862227952a8c 90 | A list of people (mostly but not entirely related to React) that Dan Abramov suggests following 91 | 92 | - **Twitter React Lists** 93 | https://twitter.com/wleong/lists/my-react-list/members 94 | https://twitter.com/oguzbilgic/lists/react-influencers/members 95 | Some Twitter lists that focus on React-related people 96 | 97 | - **"41 Javascript Experts to Follow on Twitter"** 98 | http://techbeacon.com/javascript-leaders-you-should-follow-twitter 99 | A varied list of JS-related people. Not specifically React-related, but a useful list. 100 | 101 | 102 | #### Podcasts 103 | 104 | - **Javascript Air** 105 | https://javascriptair.com/ 106 | The live broadcast podcast all about JavaScript 107 | 108 | - **React30** 109 | https://react30.com/ 110 | The weekly React podcast that promises to waste no more than 30 minutes of your time. 111 | 112 | 113 | #### Newsletters 114 | 115 | - **React.js Newsletter** 116 | http://reactjsnewsletter.com/ 117 | The free, weekly newsletter of the best React.js news, articles, projects, and more - brought to you by React.js Program 118 | 119 | - **React Digest** 120 | http://reactdigest.net/ 121 | 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. 122 | 123 | - **React Statuscode** 124 | http://react.statuscode.com/ 125 | A free, once-weekly e-mail newsletter on React from the authors of JavaScript Weekly. 126 | 127 | - **JavaScript Weekly** 128 | http://javascriptweekly.com/ 129 | A free, once-weekly e-mail round-up of JavaScript news and articles. 130 | 131 | - **PonyFoo Weekly** 132 | https://ponyfoo.com/weekly 133 | A single email every thursday, discussing front-end web development and related technologies. 134 | 135 | - **ES.next News** 136 | http://esnextnews.com/ 137 | 5 ECMAScript.next links every week, in your inbox. Curated by Dr. Axel Rauschmayer and Johannes Weber. 138 | 139 | - **Dave Ceddia's Newsletter** 140 | https://daveceddia.com/newsletter/ 141 | Weekly-ish articles in your inbox about React, JavaScript, and more. 142 | 143 | - **React Native Newsletter** 144 | http://reactnative.cc/ 145 | Occasional summary of React Native news, articles, issues & pull requests, 146 | 147 | 148 | #### Online Course Sites 149 | 150 | - **Egghead.io** 151 | https://egghead.io/ 152 | 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. 153 | 154 | - **Frontend Masters** 155 | https://frontendmasters.com/ 156 | Front-end training courses from masters who are shaping the industry. 157 | 158 | 159 | 160 | -------------------------------------------------------------------------------- /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 | - **React/Flux Tutorial Part 2: Flux** 25 | http://spapas.github.io/2015/07/02/comprehensive-react-flux-tutorial-2/ 26 | Reworks the app from part 1 to use Flux 27 | -------------------------------------------------------------------------------- /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 | - **Unopinionated comparison of Glimmer and React** 31 | https://wyeworks.com/blog/2017/12/20/unopinionated-comparison-of-glimmer-and-react 32 | A well-written comparison of small React and Glimmer components that implement the same functionality. 33 | 34 | - **Why I'm switching from Angular to React and Redux** 35 | https://hackernoon.com/why-im-switching-from-angular-to-react-and-redux-in-2018-cb48be00fda7 36 | One person's opinions on why they decided to work with React and Redux instead of Angular, including flexibility of libraries over the "one way" of a framework, simpler state management with Redux vs services and injected event emitters, and more. 37 | 38 | 39 | #### React and Flux vs Backbone 40 | 41 | - **Relieving Backbone Pain with Flux & React** 42 | http://product.hubspot.com/blog/moving-backbone-to-flux-react 43 | A fantastic video that walks through common problems with using Backbone, and how React can help solve those 44 | 45 | - **Avoiding Event Chains in Single-Page Applications** 46 | http://www.code-experience.com/avoiding-event-chains-in-single-page-applications/ 47 | Describes potential problems with Backbone-style events triggering further events, etc 48 | 49 | - **From Backbone to React: Experience Scaling an App** 50 | http://www.techsonian.net/2014/09/from-backbone-to-react-our-experience-scaling-a-web-application/ 51 | Thoughts on potential complexity issues in a Backbone app 52 | 53 | - **From Backbone to React (comments)** 54 | https://news.ycombinator.com/item?id=8329837 55 | Discussion on the previous article 56 | 57 | 58 | #### Migrating to React 59 | 60 | - **How to migrate an application from AngularJS to React and Redux** 61 | https://hackernoon.com/how-to-migrate-an-application-from-angularjs-to-react-and-redux-de0e2d1f70aa 62 | 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. 63 | 64 | - **Octopus Deploy 4.0 - Why we chose React over Angular when rewriting the Octopus 4.0 UI** 65 | https://octopus.com/blog/octopus-v4-angular-to-react 66 | 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. 67 | 68 | - **AngularJS migration to React/Redux** 69 | https://hashnode.com/post/angularjs-migration-to-reactredux-cj7t0m67x012ehowugcvjn1xj 70 | 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. 71 | 72 | - **Migrating complex Javascript applications** 73 | https://www.jackfranklin.co.uk/blog/migrating-complex-javascript-angular-react/ 74 | 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. 75 | 76 | - **A Chip off the Monolith** 77 | https://medium.com/onfido-tech/a-chip-off-the-monolith-ec71e06a3015 78 | The Onfido team describes how they extracted a portion of their monolithic Rails+Ember app into a separate React+Redux app. 79 | 80 | - **7 Tips for migration from Backbone to React & Redux** 81 | https://medium.com/@denisraslov/7-tips-for-migration-from-backbone-to-react-redux-a006a927c39e 82 | 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. 83 | 84 | - **Transitioning Your Marionette App to React** 85 | https://medium.com/@michaelsholty/transitioning-your-marionette-app-to-react-4b94ddefafd1 86 | 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 | - **A Gentle Introduction to Functional Javascript** 30 | http://jrsinclair.com/articles/2016/gentle-introduction-to-functional-javascript-intro/ 31 | http://jrsinclair.com/articles/2016/gentle-introduction-to-functional-javascript-arrays/ 32 | http://jrsinclair.com/articles/2016/gentle-introduction-to-functional-javascript-functions/ 33 | http://jrsinclair.com/articles/2016/gentle-introduction-to-functional-javascript-style/ 34 | Goes through a number of FP-related aspects in Javascript. 35 | 36 | - **Functional Thinking** 37 | http://nealford.com/functionalthinking.html 38 | An extended series of articles collected together. Aimed at Java/JVM programmers, and makes a number of comparisons of OOP vs FP. 39 | 40 | - **Functional Programing in Javascript** 41 | http://reactivex.io/learnrx/ 42 | 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). 43 | 44 | - **The "Thinking Functionally" series** 45 | http://fsharpforfunandprofit.com/series/thinking-functionally.html 46 | 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. 47 | 48 | - **Functional Programming in Javascript** 49 | https://www.youtube.com/watch?v=BMUiFMZr7vk&list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84 50 | A web series by a quirky programmer showing you high level functional concepts in Javascript 51 | 52 | - **Functional Programming Jargon** 53 | https://github.com/hemanth/functional-programming-jargon 54 | A list of FP terms with easier-to-understand definitions and explanations. 55 | 56 | - **An Introduction to Reasonably Pure Functional Programming** 57 | https://www.sitepoint.com/an-introduction-to-reasonably-pure-functional-programming/ 58 | Explain four key concepts of functional programming: pure functions, immutable values, composition, and side effects 59 | 60 | - **Functors, Applicatives, and Monads in Plain English** 61 | http://www.russbishop.net/monoids-monads-and-functors 62 | An attempt to explain these concepts in reasonable terms. 63 | 64 | - **Learning Functional Programming with Javascript** 65 | https://youtu.be/e-5obm1G_FY 66 | 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. 67 | 68 | - **Thinking in Ramda** 69 | http://randycoulman.com/blog/categories/thinking-in-ramda/ 70 | A series of articles digging into techniques to use with the Ramda FP utility library 71 | 72 | - **Functional Programming Isn't the Answer** 73 | http://degoes.net/articles/fp-is-not-the-answer 74 | A reminder that while FP has potential benefits, it's ultimately just a tool, and the end goal is useful software. 75 | 76 | - **An Intro to Functional Programming Concepts in Javascript** 77 | https://medium.com/@collardeau/intro-to-functional-programming-concepts-in-javascript-b0650773139c 78 | https://medium.com/@collardeau/intro-to-functional-programming-concepts-in-javascript-part-2-f45228c49eed 79 | https://medium.com/@collardeau/part-3-an-intro-to-functional-programming-concepts-in-javascript-febf9368ffe6 80 | A multi-part series covering a number of FP concepts, how to use them in Javascript, and use of the Ramda FP utility library 81 | 82 | - **Functional-Light JS** 83 | https://github.com/getify/Functional-Light-JS 84 | 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. 85 | 86 | - **The Case for Lenses in Pragmatic Business Applications** 87 | http://www.brandonkeown.com/2016/10/lenses-for-fun-and-profit.html 88 | Demonstrates the use of Ramda's "lens" concept for encapsulating data access 89 | 90 | - **Functional Lenses, How Do They Work** 91 | https://medium.com/@dtipson/functional-lenses-d1aba9e52254 92 | A dive into the "lens" concept, and how they can be used to manipulate data structures 93 | 94 | - **Don't Be Scared of Functional Programming** 95 | https://www.smashingmagazine.com/2014/07/dont-be-scared-of-functional-programming/ 96 | Several examples of functional programming principles, both in plain JS and with Underscore.js 97 | 98 | - **Functional Programming Basics in ES6** 99 | https://www.youtube.com/watch?v=HvMemAgOw6I 100 | Talk on functional programming with JavaScript and ES6 syntax. Covers basics such as purity, referential transparency, closures, immutability, currying, composition, and recursion. 101 | 102 | - **Dipping a toe into functional JS with lodash/fp** 103 | https://simonsmith.io/dipping-a-toe-into-functional-js-with-lodash-fp/ 104 | Examples of using Lodash's functional API for logic and React component composition 105 | 106 | - **Composability: From Callbacks to Categories in ES6** 107 | https://medium.com/@homam/composability-from-callbacks-to-categories-in-es6-f3d91e62451e 108 | Explores different solutions to "callback hell", based on various FP concepts 109 | 110 | - **So You Want To Be a Functional Programmer** 111 | https://medium.com/@cscalfani/so-you-want-to-be-a-functional-programmer-part-6-db502830403 112 | A multi-part series on functional programming concepts and learning approaches (links to previous parts in the article). 113 | 114 | - **Higher-order functions in Lodash** 115 | http://pragmatists.pl/blog/2017/05/higher-order-functions-in-lodash/ 116 | An explanation of several FP concepts like partial application and currying, and how Lodash offers utility functions to help make use of those concepts. 117 | 118 | - **How to Draw an Owl** 119 | https://glebbahmutov.com/blog/how-to-draw-an-owl/ 120 | Demonstrates refactoring some complex imperative code into a functional approach that uses concepts like pure functions, lenses, immutable data, and the Maybe monad 121 | 122 | - **What's Functional Programming All About?** 123 | http://www.lihaoyi.com/post/WhatsFunctionalProgrammingAllAbout.html 124 | A detailed explanation of how "functional" programming differs from "imperative" programming, using a food recipe as an example of the steps involved. 125 | 126 | - **Higher Order Functions and Redux Thunk** 127 | https://medium.com/@joedski/higher-order-functions-and-redux-thunk-1e5983ae6b03 128 | An exploration of ways to wrap behavior around thunks, including composing functions together. 129 | 130 | - **Functional Programming Jargon** 131 | https://functional.works-hub.com/blog/Functional-Programming-Jargon 132 | A large list of functional programming terms, with explanations for each and examples of those terms using JS 133 | 134 | - **Awesome FP JS** 135 | https://github.com/stoeffel/awesome-fp-js 136 | A collection of links to libraries, tools, and resources for FP usage in JS 137 | 138 | - **Currying vs Partial Application** 139 | http://www.datchley.name/currying-vs-partial-application/ 140 | A great explanation of the difference between "currying" functions and "partially applying" them 141 | 142 | - **Lodash is not (only) for list manipulation!** 143 | https://blog.pragmatists.com/lodash-is-not-only-for-list-manipulation-791c2e3b9de1 144 | 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 | - **Git for Humans** 45 | https://speakerdeck.com/alicebartlett/git-for-humans 46 | A slideshow introducing Git concepts without complex terminology 47 | 48 | - **Getting Git** 49 | https://gettinggit.com/ 50 | A paid video tutorial series that covers Git commands in detail, as well as everyday scenarios you might encounter while using Git 51 | 52 | - **Learn Enough Git to Be Dangerous** 53 | https://www.learnenough.com/git-tutorial 54 | A tutorial that teaches practical use of Git basics, Github, and Git workflows. 55 | 56 | - **Git Magic** 57 | https://crypto.stanford.edu/~blynn/gitmagic/ 58 | An extensive Git tutorial that teaches usage instructions first, and works its way up to advanced Git techniques and concepts. 59 | 60 | - **Git Beyond the Basics** 61 | http://blog.bloomca.me/2017/11/17/git-beyond-the-basics.html 62 | A good tutorial that explains intermediate concepts like merging, rebasing, cherry-picking, and cleaning pull requests 63 | 64 | 65 | #### Tips and Useful Info 66 | 67 | - **How to Write a Git Commit Message** 68 | http://chris.beams.io/posts/git-commit/ 69 | Great advice for how to write a succinct, informative, and useful commit message. 70 | 71 | - **Advance Git** 72 | https://medium.com/@jstats/advance-git-dfe557bdbe59 73 | Gives advice for good commit messages, and describes the options and usage for several advanced Git commands (`add --patch`, `rebase`, `reflog`, and more). 74 | 75 | - **19 Tips for Everyday Git Use** 76 | http://www.alexkras.com/19-git-tips-for-everyday-use 77 | A variety of practical commands for different scenarios. 78 | 79 | - **Git Tips** 80 | https://github.com/git-tips/tips 81 | A large collection of Git tips and tricks. 82 | 83 | - **Digit** 84 | https://github.com/optionfactory/digit 85 | A tool to visualize the contents of a Git repo as an aid to learning 86 | 87 | - **Advanced Git Advice** 88 | https://medium.com/@zlobin/advanced-git-advice-27087a7fbb29 89 | A variety of useful tips and commands. 90 | 91 | - **A Note about Git Commit Messages** 92 | http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html 93 | Some quick explanations of how to format Git commit messages, and commands where message formatting matters 94 | 95 | - **Git Commit Good Practices** 96 | https://wiki.openstack.org/wiki/GitCommitMessages 97 | A number of good practices to follow when making commits and writing commit messages 98 | 99 | - **Life-Saving Git Tips** 100 | https://www.cuttlesoft.com/life-saving-git-tips/ 101 | A variety of useful tips, including use of cherry-picking, local pulling and testing, and use of aliases to simplify tasks 102 | 103 | - **Git Flight Rules** 104 | https://github.com/k88hudson/git-flight-rules 105 | 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. 106 | 107 | - **Advanced Git Commands You Will Actually Use** 108 | https://stosb.com/blog/advanced-git-commands-you-will-actually-use/ 109 | Describes a wide variety of useful commands, such as ways to refer to commits, searching commit logs, manipulating history, and much more. 110 | 111 | ## Specific Techniques 112 | 113 | - **Git's Patch Mode All the Way** 114 | https://blog.petrzemek.net/2016/07/10/git-patch-mode-all-the-way/ 115 | Shows how to use Git's ability to selectively pick and choose chunks of code as part of various actions 116 | 117 | - **Git: Undoing changes and rewriting history** 118 | http://slides.com/lilianakastilio/github-4#/ 119 | A slideshow discussing various ways to change commit history 120 | 121 | - **Beginner's guide to git rebasing and squashing** 122 | https://shinglyu.github.io/web/2016/11/08/servo-rebase-and-squash-guide.html 123 | A tutorial on rebasing and squashing commits to change past history. 124 | 125 | - **Git Rebasing and Clean Pull Requests** 126 | https://www.jungledisk.com/blog/2016/11/21/git-rebasing-and-clean-prs/ 127 | Some best practices for cleaning up branches and producing readable commits. 128 | 129 | - **A closer look at git rebase** 130 | https://dev.to/gonedark/a-closer-look-at-git-rebase 131 | An explanation of what "rebasing" is, with some helpful graphics 132 | 133 | - **Visualize Merge History with git log --graph, --first-parent, and --no-merges** 134 | https://redfin.engineering/visualize-merge-history-with-git-log-graph-first-parent-and-no-merges-c6a9b5ff109c 135 | 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. 136 | 137 | - **How to undo (almost) anything with Git** 138 | https://github.com/blog/2019-how-to-undo-almost-anything-with-git 139 | Instructions for undoing and redoing changes in various scenarios. 140 | 141 | - **Undoing in Git** 142 | https://blog.tratif.com/2018/01/04/undoing-in-git/ 143 | A summary of the most common ways for undoing things in Git, including bringing back removed commits. 144 | 145 | - **Beginner's Guide to Interactive Rebasing** 146 | https://hackernoon.com/beginners-guide-to-interactive-rebasing-346a3f9c3a6d 147 | An excellent walkthrough of how to use interactive rebasing for rewriting commit history by editing, deleting, and combining commits 148 | 149 | 150 | #### E-Books 151 | 152 | - **Pro Git** 153 | https://git-scm.com/book/en/v2 154 | An in-depth online reference to all aspects of Git 155 | 156 | - **Git Internals** 157 | https://github.com/pluralsight/git-internals-pdf 158 | A free PDF that digs deep into Git's data structures and behavior 159 | 160 | 161 | #### Workflows 162 | 163 | - **Git Workflows** 164 | http://documentup.com/skwp/git-workflows-book 165 | Covers ways to increase productivity, create cleaner commit history, and improve code reviews 166 | 167 | - **Understanding the Git Workflow** 168 | https://sandofsky.com/blog/git-workflow.html 169 | Looks at how to properly handle branches and local history vs public history 170 | 171 | - **A Successful Git Branching Model** 172 | http://nvie.com/posts/a-successful-git-branching-model/ 173 | Describes a widely used multi-branch approach to managing development and release processes 174 | 175 | 176 | #### Cheat Sheets 177 | 178 | - **A Visual Git Reference** 179 | http://marklodato.github.io/visual-git-guide/index-en.html 180 | Describes several common Git commands, with diagrams to explain what each one does 181 | 182 | - **Tower - Git Cheat Sheet** 183 | https://www.git-tower.com/blog/git-cheat-sheet/ 184 | A quick reference PDF listing some common commands 185 | 186 | - **Interactive Git Cheat Sheet** 187 | http://ndpsoftware.com/git-cheatsheet.html 188 | A clickable page that shows how various commands move data between different parts of Git's storage (working copy, index, local repo, remote repo) 189 | 190 | - **giteveryday** 191 | https://www.kernel.org/pub/software/scm/git/docs/giteveryday.html 192 | A useful minimum set of commands for Everyday Git. Commands grouped by usefulness to different categories of users. 193 | 194 | - **Git Getting Started Cheat Sheet** 195 | https://gist.github.com/akras14/3d242d80af8388ebca60 196 | Another useful list of commands with explanations 197 | 198 | 199 | #### Desktop GUI Clients 200 | 201 | - **SourceTree** (Win, Mac; free) 202 | https://www.sourcetreeapp.com/ 203 | 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) ). 204 | 205 | - **Git Extensions** (Win; free) 206 | http://gitextensions.github.io/ 207 | A Windows client with Windows Explorer and Visual Studio integration 208 | 209 | - **Git Tower** (Mac, Win; commercial) 210 | https://www.git-tower.com/ 211 | A well-designed commercial Git client for Mac and Windows 212 | 213 | - **SmartGit** (Win, Mac, Linux; commercial) 214 | http://www.syntevo.com/smartgit/ 215 | A cross-platform Git client aimed at professionals 216 | 217 | - **GitKraken** (Win, Mac, Linux; semi-commercial) 218 | http://www.gitkraken.com/ 219 | A cross-platform Git client 220 | -------------------------------------------------------------------------------- /immutable-data.md: -------------------------------------------------------------------------------- 1 | ### Immutable Data 2 | 3 | #### Basic Concepts 4 | 5 | - **Pros and Cons of Using Immutability With React** 6 | http://reactkungfu.com/2015/08/pros-and-cons-of-using-immutability-with-react-js/ 7 | 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. 8 | 9 | - **Immutable Javascript using ES6 and Beyond** 10 | http://wecodetheweb.com/2016/02/12/immutable-javascript-using-es6-and-beyond/ 11 | Describes ways to handle data immutably using "just" built-in Javascript functions, particularly ES6 syntax 12 | 13 | - **Pure javascript immutable arrays** 14 | http://vincent.billey.me/pure-javascript-immutable-array 15 | A reminder to avoid the built-in Array functions that mutate the array, with snippets demonstrating alernative immutable functionality 16 | 17 | - **Javascript Array: slice vs splice** 18 | https://ariya.io/2014/02/javascript-array-slice-vs-splice 19 | A reminder that "slice" and "splice" are different functions with different behavior 20 | 21 | - **Immutable Data from Scratch** 22 | https://ryanfunduk.com/articles/immutable-data-from-scratch/ 23 | Demonstrates building up an immutable update utility library similar to React's Update Addons 24 | 25 | - **Immutable Objects with `Object.freeze`** 26 | http://adripofjavascript.com/blog/drips/immutable-objects-with-object-freeze.html 27 | A quick look at how to use `Object.freeze` to enforce immutability. 28 | 29 | - **Immutability in Javascript** 30 | http://www.sitepoint.com/immutability-javascript/ 31 | Describes a couple basic concepts of immutable data in Javascript, and how the Immutable.js library can be used for those concepts. 32 | 33 | - **Immutable Data Structures and Javascript** 34 | http://jlongster.com/Using-Immutable-Data-Structures-in-JavaScript 35 | In-depth article covering the value of immutable data, and two common JS libraries 36 | - **Immutability is Not Enough** 37 | https://codewords.recurse.com/issues/six/immutability-is-not-enough 38 | A look at how using an immutable data approach doesn't magically prevent all bugs. 39 | - **Javascript Array Methods: Mutating vs Non-Mutating** 40 | http://lorenstewart.me/2017/01/22/javascript-array-methods-mutating-vs-non-mutating/ 41 | An overview of how to accomplish add/remove/replace operations on JS arrays, comparing mutable vs immutable approaches to each. 42 | - **Redux Docs: Immutable Update Patterns** 43 | https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns 44 | 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. 45 | 46 | - **Immutably setting a value in a JS array (or how an array is also an object)** 47 | https://medium.com/@giltayar/immutably-setting-a-value-in-a-js-array-or-how-an-array-is-also-an-object-55337f4d6702 48 | An example of how `Object.assign` can be used to immutably update an array 49 | - **ReactCasts #9: Immutability in Javascript** 50 | https://www.youtube.com/watch?v=4LzcQyZ9JOU 51 | 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. 52 | - **Why Mutation Can Be Scary** 53 | http://alistapart.com/article/why-mutation-can-be-scary 54 | 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. 55 | 56 | #### Immutability and React 57 | 58 | - **Immutability in React** 59 | http://www.sitepoint.com/immutability-react/ 60 | Covers the reasons and basic concepts of using immutable data with React 61 | - **Why Should I Care About Immutable Data In React?** 62 | http://www.bennadel.com/blog/2903-why-should-i-care-about-immutable-data-in-reactjs.htm 63 | Describes the major benefits of using immutable data in React, with a demo 64 | 65 | - **React: A (very brief) talk about immutability** 66 | https://medium.com/pro-react/a-brief-talk-about-immutability-and-react-s-helpers-70919ab8ae7c 67 | Talks about the issues with mutation, and some ways to update immutably 68 | 69 | - **Comparing and Modifying Objects in React** 70 | https://blog.komand.com/object-comparison-in-react-js-components 71 | Some examples of comparing objects inside of React's lifecycle methods, and how to update them properly. 72 | - **Handling State in React: Four Immutable Approaches to Consider** 73 | https://medium.com/@housecor/handling-state-in-react-four-immutable-approaches-to-consider-d1f5c00249d5 74 | A summary of four different ways to update state immutably 75 | - **Immutability in React and Redux** 76 | https://medium.com/@nitishkr88/immutability-in-react-and-redux-7137f7b3197 77 | 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. 78 | 79 | #### Immutable Data Libraries 80 | 81 | - **Introducing Immer: Immutability the easy way** 82 | https://hackernoon.com/introducing-immer-immutability-the-easy-way-9d73d8f71cb3 83 | 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. 84 | 85 | - **List of immutable libraries** 86 | https://gist.github.com/jlongster/bce43d9be633da55053f 87 | A follow-up to James Longster's article, with pointers to numerous immutable data libraries 88 | - **Redux Ecosystem Links: Immutable Data** 89 | https://github.com/markerikson/redux-ecosystem-links/blob/master/immutable-data.md 90 | 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. 91 | - **Painless Immutability** 92 | https://guigrpa.github.io/2016/06/16/painless-immutability/ 93 | 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. 94 | - **Immutable.js** 95 | http://seanamarasinghe.com/developer/immutable-js/ 96 | An introduction to the API and use cases for Immutable.js 97 | - **How to use Immutable.js Records with React and Redux** 98 | https://medium.com/azendoo-team/immutable-record-react-redux-99f389ed676 99 | Examples for using Immutable.js records for clarity and consistency of data management 100 | - **Immutable.js: An Introduction with examples written for humans** 101 | http://untangled.io/immutable-js-an-introduction-with-examples-written-for-humans/ 102 | A detailed series of tutorials explaining how to use Immutable.js's API 103 | - **Seamless-Immutable: An Alternative to Immutable.js** 104 | https://medium.com/@ckoster22/seamless-immutable-an-alternative-to-immutablejs-12795d6bf577 105 | Examples of how to use the Seamless-Immutable library, and how it compares to Immutable.js 106 | - **Using Ramda's `evolve` in Redux reducers to create new state** 107 | https://www.jernejsila.com/2017/02/25/using-ramda-evolve-redux-reducers-creating-new-state/ 108 | Some quick examples of how Ramda's API can be used for applying immutable data updates 109 | - **How to Use Immutable.js in a React Redux Application** 110 | https://codebrahma.com/how-to-use-immutable-js-in-a-react-redux-application/ 111 | 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 112 | - **Immutable Deep State Updates in React with Ramda.js** 113 | https://vanslaars.io/post/setstate-lenses/ 114 | Some excellent examples of how to use Ramda's "lens" functions to define immutable state update logic 115 | - **Why I Don't Use Immutable.js with Redux** 116 | https://medium.com/front-end-hacking/why-i-dont-use-immutable-js-with-redux-db05004f436 117 | Thoughts on the pros and cons of using Immutable.js in a Redux app 118 | - **Using Immutable.js with Redux** 119 | https://medium.com/front-end-hacking/using-immutable-js-with-redux-ba89025e45e2 120 | A follow-up to the previous article, with several examples of how to properly use Immutable.js with Redux 121 | - **Should I use Immutable.js with Redux?** 122 | https://medium.com/@fastphrase/should-i-use-immutablejs-with-redux-58f88d6fd81e 123 | A detailed list of pros and cons for using Immutable.js in a Redux app 124 | 125 | - **Practical Guide to using Immutable.js with Redux and React** 126 | https://medium.com/@fastphrase/practical-guide-to-using-immutablejs-with-redux-and-react-c5fd9c99c6b2 127 | A follow-up to the previous article, showing how to correctly set up and use Immutable.js with Redux 128 | - **Qim: Select from your Immutable JavaScript Cake and Update It Symmetrically Too** 129 | https://zapier.com/engineering/qim-immutable-javascript/ 130 | 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. 131 | - **Lenses with Immutable.js** 132 | https://medium.com/@drboolean/lenses-with-immutable-js-9bda85674780 133 | 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. 134 | - **You're missing out on ImmutableJS Records** 135 | https://medium.com/@ahmadbamieh/immutablejs-records-bd369137da06 136 | An introduction to the Immutable.js Record type, and how it can be used to define data types 137 | - **Immutability through Mutability - Immer & Redux** 138 | https://medium.com/@Tetheta/immutability-through-mutability-immer-redux-3e14246c6506 139 | 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. 140 | -------------------------------------------------------------------------------- /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 | - **Zero to One: How I Mastered Javascript and You Can Too** 40 | https://hashnode.com/post/zero-to-one-how-i-mastered-javascript-and-how-you-can-too-ciuwmrw9j00r50q539clhhdj7 41 | An article describing how one person approached learning Javascript, with suggestions and advice to follow. 42 | 43 | - **Want to Learn Javascript in 2016?** 44 | https://medium.com/@_cmdv_/i-want-to-learn-javascript-in-2015-e96cd85ad225 45 | Extensive suggestions for resources to use when learning Javascript 46 | 47 | - **6 Quick & Proven Tips to Help You Learn JavaScript** 48 | https://blog.alexdevero.com/6-quick-proven-tips-learn-javascript/ 49 | 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. 50 | 51 | - **Array iteration methods summarized** 52 | https://gist.github.com/ljharb/58faf1cfcb4e6808f74aae4ef7944cff 53 | An explanation of all the different Array methods that loop over the array, what they do, and when they should be used 54 | 55 | #### Tutorials, Books, and Courses 56 | 57 | - **Eloquent Javascript** 58 | http://eloquentjavascript.net/ 59 | A full online book teaching Javascript from the ground up. Very recommended. 60 | 61 | - **You Don't Know Javascript** 62 | https://github.com/getify/You-Dont-Know-JS 63 | An online book series intended to teach all aspects of Javascript, including the "tougher" parts. 64 | 65 | - **Exploring Javascript** 66 | http://exploringjs.com/ 67 | 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. 68 | 69 | - **The Modern Javascript Tutorial** 70 | http://javascript.info/ 71 | 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. 72 | 73 | - **Rithm School Free Javascript Course** 74 | https://www.rithmschool.com/courses 75 | 76 | - **Practical Javascript** 77 | http://watchandcode.com/p/practical-javascript 78 | A free online course to learn Javascript fundamentals. 79 | 80 | - **Javascript Path** 81 | https://github.com/javascript-society/javascript-path 82 | A list of books to master JavaScript Development 83 | 84 | - **DOM Enlightenment** 85 | http://domenlightenment.com/ 86 | A deep look at how to interact with the DOM from Javascript, without using a library or a framework. 87 | 88 | - **Javascript30** 89 | https://javascript30.com/ 90 | A free course from Wes Bos that teaches how to build 30 different interesting projects, using only "vanilla" Javascript. 91 | 92 | - **Javascript; The Core** 93 | http://dmitrysoshnikov.com/ecmascript/javascript-the-core-2nd-edition/ 94 | 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. 95 | 96 | - **The JavaScript Way** 97 | https://github.com/bpesquet/thejsway 98 | 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. 99 | 100 | 101 | #### Online Code Editors 102 | 103 | - **CodeSandbox** 104 | https://codesandbox.io 105 | A full-fledged online IDE that lets you build entire applications using React, Vue, and other toolkits. 106 | 107 | - **A Roundup of Online Code Playgrounds** 108 | https://www.sitepoint.com/round-up-online-code-playgrounds/ 109 | An overview and comparison of various online Javascript live code editing tools. 110 | 111 | 112 | #### Articles and Gotchas 113 | 114 | - **Mozilla Javascript Reference: the `this` keyword** 115 | https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this 116 | MDN's usual excellent documentation, explaining how `this` works in Javascript 117 | 118 | - **Gentle Explanation of `this` keyword in Javascript** 119 | https://dmitripavlutin.com/gentle-explanation-of-this-in-javascript/ 120 | https://www.reddit.com/r/javascript/comments/4o1546/gentle_explanation_of_this_keyword_in_javascript/ 121 | Another long and in-depth explanation, plus some good discussion in the Reddit comments. 122 | 123 | - **The Inner Workings of Javascript's `this` keyword** 124 | https://www.sitepoint.com/inner-workings-javascripts-this-keyword/ 125 | https://www.sitepoint.com/mastering-javascripts-this-keyword/ 126 | A two-part article on the ins and outs of `this`. 127 | 128 | - **Let's Settle `this`, Part One** 129 | https://medium.com/@nashvail/lets-settle-this-part-one-ef36471c7d97 130 | Another look at `this`, with a number of examples and explanations 131 | 132 | - **Understanding Javascript Function Invocation and `this`** 133 | http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/ 134 | An excellent explanation of how function calls and the `this` keyword work 135 | 136 | - **When 'not' to use arrow functions** 137 | https://dmitripavlutin.com/when-not-to-use-arrow-functions-in-javascript/ 138 | An in-depth look at when you should stick with standard JS functions instead of arrow functions 139 | 140 | - **Do ES6 Arrow Functions Really Solve "this" in Javascript?** 141 | https://derickbailey.com/2015/09/28/do-es6-arrow-functions-really-solve-this-in-javascript/ 142 | A dive into how `this` works inside of arrow functions, and some places when they may not be appropriate for use. 143 | 144 | - **Grokking Scope in Javascript** 145 | https://code.tutsplus.com/tutorials/grokking-scope-in-javascript--cms-26259 146 | Advice for understanding how Javascript variable coping works 147 | 148 | - **Let It Be - How to declare JavaScript variables** 149 | http://madhatted.com/2016/1/25/let-it-be 150 | https://www.reddit.com/r/javascript/comments/44yjzo/let_it_be_how_to_declare_javascript_variables/ 151 | A look at how `var`, `let`, and `const` behave, and how using them communicates intent. Further discussion in the Reddit comments. 152 | 153 | - **This in Javascript** 154 | https://zellwk.com/blog/this/ 155 | Tries to demystify the behavior of the `this` keyword by explaining the six situations that can change the value of `this`. 156 | 157 | - **Which Array Function When?** 158 | https://dev.to/andrew565/which-array-function-when 159 | 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. 160 | 161 | - **What is This in Javascript?** 162 | https://developer.telerik.com/topics/web-development/what-is-this-in-javascript/ 163 | An easy-to-read explanation of the different ways `this` can be defined in a function. 164 | 165 | - **Everything you wanted to know about JavaScript scope** 166 | https://toddmotto.com/everything-you-wanted-to-know-about-javascript-scope/ 167 | 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. 168 | 169 | - **On `this` in Javascript** 170 | http://georgemauer.net/2017/08/03/on-this-in-javascript.html 171 | 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 172 | 173 | #### Paid Courses and Books 174 | 175 | - **Javascript: Understanding the Weird Parts** 176 | https://www.udemy.com/understand-javascript/?couponCode=YOUTUBE19 177 | https://www.youtube.com/watch?v=Bv_5Zv5c-Ts 178 | http://joanmira.com/javascript-understanding-the-weird-parts/ 179 | 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. 180 | -------------------------------------------------------------------------------- /mlc_config.json: -------------------------------------------------------------------------------- 1 | { 2 | "aliveStatusCodes": [ 3 | 0, 4 | 200, 5 | 429 6 | ], 7 | "fallbackRetryDelay": "30s", 8 | "retryCount": 2, 9 | "timeout": "5s" 10 | } -------------------------------------------------------------------------------- /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 | - **MobX First Impressions** 32 | https://benmccormick.org/2017/01/09/mobx-first-impressions/ 33 | A quick introduction to MobX's basic concepts and how it works 34 | 35 | - **How to Manage your JavaScript Application State with MobX** 36 | https://www.sitepoint.com/manage-javascript-application-state-mobx/ 37 | A detailed tutorial that introduces basic MobX usage, using only jQuery for the UI updates 38 | 39 | - **MobX + React Tutorial: Building your first app** 40 | http://orlandohamsho.com/javascript/mobx-react-tutorial-building-first-application/ 41 | A walkthrough that builds a basic list/detail application, and introduces the basics of MobX along the way. 42 | 43 | 44 | #### Testing 45 | 46 | - **Testing React and MobX** 47 | https://semaphoreci.com/community/tutorials/how-to-test-react-and-mobx-with-jest 48 | A look at ways to test React components and MobX logic 49 | 50 | 51 | #### Other 52 | - **One awkward thing about MobX: Complex Models** 53 | https://swizec.com/blog/one-awkward-thing-about-mobx-complex-models/ 54 | Discussion of potential issues when handling complex models, and some possible workarounds. 55 | 56 | - **MobX - Like React, but for Data** 57 | http://danielearwicker.github.io/MobX_Like_React_but_for_Data.html 58 | Thoughts on MobX's core concepts, and how they relate to immutability, derived data, and observables. 59 | 60 | - **The Fundamental Principles Behind MobX** 61 | https://hackernoon.com/the-fundamental-principles-behind-mobx-7a725f71f3e8 62 | MobX creator Michel Weststrate discusses MobX's key concepts, including running all updates synchronously, and potential use of Proxies as a future improvement. 63 | 64 | - **Creating a reusable popver system with React and MobX** 65 | https://medium.com/@enitoni/creating-a-reusable-popover-system-with-react-and-mobx-7f47cc3b270d 66 | A useful tutorial on implementing a React modal system driven by MobX state 67 | 68 | - **7 Tips for Using MobX** 69 | https://engineering.huiseoul.com/7-tips-of-using-mobx-6ca8c35071dc 70 | Some helpful tips for using MobX, including using the right reactions, using reactions with names, using strict mode, and more. 71 | 72 | - **The Curious Case of Mobx State Tree** 73 | https://medium.com/@mweststrate/the-curious-case-of-mobx-state-tree-7b4e22d461f 74 | Michel Weststrate, author of MobX, introduces the MobX-State-Tree library, which builds on MobX to add additional useful capabilities. 75 | 76 | - **MobX (with Decorators) in create-react-app** 77 | https://www.robinwieruch.de/create-react-app-mobx-decorators/ 78 | Covers how to use MobX in a CRA project, with and without decorators. 79 | 80 | - **React Performance and MobX** 81 | https://medium.com/workday-engineering/react-performance-and-mobx-b038085ecb72 82 | An informative look at how React's rendering process normally occurs, and how use of MobX-React affects React performance. 83 | 84 | 85 | #### MobX and Redux Comparisons 86 | 87 | - **"Confused: Redux or MobX?** 88 | https://www.reddit.com/r/reactjs/comments/4npzq5/confused_redux_or_mobx/ 89 | 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. 90 | 91 | - **Redux or MobX: An attempt to dissolve the confusion** 92 | http://www.robinwieruch.de/redux-mobx-confusion/ 93 | An in-depth comparison of the ideas, concepts, approaches, and use cases for the two state management libraries 94 | 95 | - **MobX vs Redux: Comparing the Opposing Paradigms** 96 | https://youtu.be/76FRrbY18Bs 97 | A fantastic presentation by Preethi Kasireddy at ReactConf 2017, comparing the philosophies, concepts, tradeoffs, and use cases for Redux and MobX. 98 | 99 | - **Redux vs MobX by example** 100 | https://hashnode.com/post/redux-vs-mobx-by-example-part-i-intro-and-exploring-redux-cito5m0nn0sssxi53c7zq7jpr 101 | https://hashnode.com/post/redux-vs-mobx-by-example-part-ii-the-simplicity-of-mobx-and-conclusion-citpp2tbu003za853ua1tx228 102 | Implementation of the same app using both Redux and MobX, and a final comparison of the approaches 103 | 104 | - **"How does MobX compare with Redux, and which is better for React app development?"** 105 | https://hashnode.com/post/how-does-mobx-compare-with-redux-and-which-one-is-better-for-react-app-development-cisrch8eh0030g5532qeds1ja/answer/citq8rptk010cus530wdzdg69 106 | An excellent answer comparing the two libraries and their philosophies 107 | 108 | - **Comparing MobX and Redux - Video** 109 | https://www.youtube.com/watch?v=83v8cdvGfeA 110 | A great video to understand the differences between MobX and Redux. 111 | 112 | - **Redux vs MobX** 113 | https://medium.com/@himrc/redux-vs-mobx-a42c8950f3 114 | Some quick pros and cons of each, links to other discussions, and thoughts on when to use them. 115 | 116 | - **Redux or MobX: What I learned after refactoring a medium-sized React app** 117 | https://dannyherran.com/2017/03/react-redux-mobx-takeaways/ 118 | A useful list of takeaways, pros and cons of each library and the impact on an existing React application. 119 | 120 | - **Comparing Redux and MobX with two CTOs** 121 | https://youtu.be/ZGVwMkrL2n0 122 | A recorded presentation of two CTOs comparing several major aspects of React state management with `setState`, MobX, and Redux 123 | 124 | - **Introduction to Redux and MobX** 125 | https://medium.com/@guptagaruda/introduction-to-redux-and-mobx-e6fa98b6479 126 | 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. 127 | 128 | -------------------------------------------------------------------------------- /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 | - **Node Hero: The Complete Node.js Tutorial** 32 | https://risingstack.com/resources/node-hero 33 | 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. 34 | 35 | - **Understanding NPM** 36 | https://unpm.nodesource.com/ 37 | An interactive visualization that is intended to help you understand the role and scope of NPM. 38 | 39 | - **NPM for Beginners: A Guide for Front-End Developers** 40 | https://www.impressivewebs.com/npm-for-beginners-a-guide-for-front-end-developers/ 41 | 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 | - **Four Strategies for Organizing Code** 26 | https://medium.com/@msandin/strategies-for-organizing-code-2c9d690b6f33 27 | Describes "by component", "by toolbox", "by layer", and "by kind" approaches. 28 | 29 | - **Rules for Structuring (Redux) Applications** 30 | http://jaysoo.ca/2016/02/28/organizing-redux-application/ 31 | http://jaysoo.ca/2016/02/28/applying-code-organization-rules-to-concrete-redux-code/ 32 | http://jaysoo.ca/2016/12/12/additional-guidelines-for-project-structure/ 33 | Gives several useful rules for structuring code, with examples. 34 | 35 | - **A Better File Structure for React/Redux Applications** 36 | http://marmelab.com/blog/2015/12/17/react-directory-structure.html 37 | Suggests a domain-based structure, with tests kept alongside the code they relate to. 38 | 39 | - **Route-Based Folder Structure** 40 | https://gist.github.com/ryanflorence/daafb1e3cb8ad740b346 41 | Ryan Florence, an author of React Router, gives his suggested file structure. 42 | 43 | - **How to Better Organize Your React Applications?** 44 | https://medium.com/@alexmngn/how-to-better-organize-your-react-applications-2fd3ea1920f1 45 | Another feature-style approach, describing things in terms of "components", "scenes", and "services". 46 | 47 | - **Fractal Project Structure** 48 | https://github.com/davezuko/react-redux-starter-kit/wiki/Fractal-Project-Structure 49 | Docs from the React Redux Starter Kit project describing their "Fractal Project Structure" concept, and advice for file and app organization. 50 | 51 | - **Redux Structure: a Way to Success** 52 | https://datarockets.com/blog/redux-structure 53 | Thoughts on a "modules and components"-based approach to file structure, 54 | 55 | - **My journey toward a maintainable project structure for React/Redux** 56 | https://hackernoon.com/my-journey-toward-a-maintainable-project-structure-for-react-redux-b05dfd999b5 57 | Describes an evolution of approaches for project structure 58 | 59 | - **Building Modular Redux Applications** 60 | https://vimeo.com/album/4199344/video/187454108 61 | A talk discussing an approach to Redux structure by splitting logic into "data providers/sources" and presentation. 62 | 63 | - **How to Structure real world Redux/React Applications** 64 | https://medium.com/@yiquanzhou/how-to-structure-real-world-redux-react-application-d61e66a7dd36 65 | Another look at structuring code, based on business logic, data domains, and reusability. 66 | 67 | - **When a good plan comes together: React project structure for scaling** 68 | http://web.archive.org/web/20170706123441/http://thereactionary.net/when-a-good-plan-comes-together-react-project-structure-for-scaling/ 69 | More discussion of tradeoffs in various structure approaches. 70 | 71 | - **Structuring and Organizing the React Components Directory** 72 | http://noah-prince-tech-blog.ghost.io/structuring-and-organizing-the-react-components-directory/ 73 | Some useful suggestions for folder layout, folder naming, and import handling. 74 | 75 | - **React Project Structure** 76 | https://daveceddia.com/react-project-structure/ 77 | 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`. 78 | 79 | - **Decoupling Hierarchies for Maintainable Code** 80 | https://medium.com/altschool-engineering/decoupling-hierarchies-for-maintainable-code-b13c24b2f047 81 | Some very interesting thoughts on how component structure, data flow, and folder structure can interact with each other. 82 | 83 | - **Writing Scalable React Apps with the Component Folder Pattern** 84 | https://medium.com/styled-components/component-folder-pattern-ee42df37ec68 85 | 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. 86 | 87 | - **Fractal: A React app structure for infinite scale** 88 | https://hackernoon.com/fractal-a-react-app-structure-for-infinite-scale-4dab943092af 89 | 90 | - **Domain directory structure for React apps - why it's worth trying** 91 | https://tech.offgrid-electric.com/domain-directory-structure-for-react-apps-why-its-worth-trying-b3855ee77a1e 92 | Discusses experience with the "A Better File Structure" approach, and gives advice on best practices for import paths, creating sub-domains, and more. 93 | 94 | - **The 100% correct way to structure a React app (or why there's no such thing** 95 | https://hackernoon.com/the-100-correct-way-to-structure-a-react-app-or-why-theres-no-such-thing-3ede534ef1ed 96 | 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 | https://www.javascriptstuff.com/react-ajax-best-practices 27 | Covers four ways to approach managing queries and data fetching. 28 | 29 | - **AJAX/HTTP Library Comparison** 30 | https://www.javascriptstuff.com/ajax-libraries 31 | A useful overview of the most popular AJAX libraries, including platform support and feature comparisons. 32 | 33 | - **3 Libraries and 3 Ways to handle AJAX in React Apps** 34 | https://appendto.com/2017/01/3-libraries-and-3-ways-to-handle-ajax-in-react-apps/ 35 | Demonstrates three approaches to structuring AJAX calls (root component, containers, and via Redux middleware), and lists three of the most popular AJAX libraries. 36 | 37 | - **How to make AJAX API calls in React** 38 | https://www.techiediaries.com/react-ajax/ 39 | 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. 40 | 41 | 42 | #### Request Implementation Examples 43 | 44 | - **Implementing React Redux with GraphQL** 45 | https://marufsarker.github.io/blog/posts/react-redux-with-graphql/ 46 | Walks through the implementation of a server/client Todo app that uses GraphQL mutations for the async actions. 47 | 48 | - **Rendering Backend Requests with React** 49 | https://blog.boldlisting.com/rendering-backend-requests-with-react-7e493103c2b6 50 | Describes a pattern for dealing with components that depend on loading data from a backend 51 | 52 | - **Build a React + Flux App with User Authentication** 53 | https://scotch.io/tutorials/build-a-react-flux-app-with-user-authentication 54 | 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. 55 | 56 | - **Building Realtime Collaborative Offline-First Apps with React, Redux, PouchDB, and Websockets** 57 | https://www.yld.io/blog/building-realtime-collaborative-offline-first-apps/ 58 | A blog post and sample project demonstrating various layers of client-server syncing, eventually driving a Redux store and React UI. 59 | 60 | - **Handling AJAX In Your React Application with Agility** 61 | https://hackernoon.com/handling-ajax-in-your-react-application-with-agility-413f1f21fc70 62 | Describes three approaches to fetching data in a React app: within a React component, using the Relay GraphQL library, and using Redux middleware 63 | 64 | - **You don't need a fancy framework to use GraphQL with React** 65 | https://edgecoders.com/you-dont-need-a-fancy-framework-to-use-graphql-with-react-b47b436626fb 66 | A detailed explanation of how to construct GraphQL queries in a client and load the data into React components, without using any complicated libraries. 67 | 68 | 69 | #### Handling Request Status with State 70 | 71 | - **React-Redux issue #210: "dispatching in componentWillMount?"** 72 | https://github.com/reactjs/react-redux/issues/210#issuecomment-244774674 73 | Some valuable extended discussion about how managing requests and data really involves several distinct possible states. 74 | 75 | - **"Slaying a UI Antipattern" comparisons** 76 | http://blog.jenkster.com/2016/06/how-elm-slays-a-ui-antipattern.html 77 | https://medium.com/javascript-inside/slaying-a-ui-antipattern-in-fantasyland-907cbc322d2a 78 | https://medium.com/@gcanti/slaying-a-ui-antipattern-with-flow-5eed0cfb627b 79 | https://medium.com/@marsbergen/nice-pattern-for-redux-state-b8641b6ff9d1 80 | https://medium.com/javascript-inside/slaying-a-ui-antipattern-in-react-64a3b98242c 81 | Articles by different authors that demonstrate how to handle the common "loading/no data/data" issue with various static typing approaches and FP principles. 82 | 83 | - **Better data fetching with RemoteDataJS** 84 | https://www.jackfranklin.co.uk/blog/remote-data-js/ 85 | 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. 86 | 87 | - **A Better Way To Handle Loading State In Redux** 88 | http://nikolay.rocks/2017-06-18-better-redux-loading 89 | 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 | https://www.javascriptstuff.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 | - **How to deploy a React application: an in depth overview of various options to deploy** 47 | https://codebrahma.com/deploy-react-application-depth-overview-various-options-deploy/ 48 | 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. 49 | 50 | - **So you want to host your Single Page React App on Github Pages?** 51 | https://itnext.io/so-you-want-to-host-your-single-age-react-app-on-github-pages-a826ab01e48 52 | Solutions for common problems encountered when trying to deploy a React app on Github Pages, especially around routing. 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 | https://x-team.com/blog/tutorial-forms-in-react-and-redux/ 86 | Demonstrates building a simple set of wrapper components to manage forms using React and Redux 87 | 88 | - **Using React's state to manage data entry** 89 | https://medium.com/@adamrackis/using-reacts-state-to-manage-data-entry-ed92e4fd1a42 90 | Describes how to manage data for forms using React component state and some wrapper components. 91 | 92 | - **Handling React Forms with Mobx Observables** 93 | https://blog.risingstack.com/handling-react-forms-with-mobx-observables/ 94 | Some examples of working with forms in React, using MobX for the data management. 95 | 96 | - **Radio Buttons and Checkboxes in React** 97 | http://react.tips/radio-buttons-in-reactjs/ 98 | http://react.tips/checkboxes-in-react/ 99 | Tutorials on managing various inputs in forms with React 100 | 101 | - **Building a Multi-Step Registration Form with React** 102 | https://www.viget.com/articles/building-a-multi-step-registration-form-with-react 103 | A form example that shows how to track the current form step, render the right form component, and store all the necessary form data 104 | 105 | - **Making dynamic form inputs with React** 106 | https://goshakkk.name/array-form-inputs/ 107 | Covers how to build a form that can add and remove entries dynamically, with examples. 108 | 109 | - **How to handle forms with just React** 110 | https://medium.com/@everdimension/how-to-handle-forms-with-just-react-ac066c48bd4f 111 | Describes a different approach for reading and managing form data, besides the usual "controlled inputs" pattern, based on the Javascript FormData object. 112 | 113 | - **Should a form for editing update the underlying model?** 114 | https://goshakkk.name/react-forms-for-editing/ 115 | 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. 116 | 117 | - **Modeling form state in React** 118 | http://beautifulcode.1stdibs.com/2017/03/23/react-form-state/ 119 | Examples of how to structure form state to handle values and validation. Applicable no matter what state management approach is being used. 120 | 121 | - **Better Form Management** 122 | https://medium.com/@robbiedelavictoria/better-form-management-37c994095b1c 123 | A couple useful examples of approaches for simplifying React form handling logic. 124 | 125 | - **Forms in React** 126 | http://presentations.survivejs.com/forms-in-react/#/ 127 | 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. 128 | 129 | - **Some Thoughts on Forms in React** 130 | https://medium.com/javascript-inside/some-thoughts-on-forms-in-react-9ca2d9078c20 131 | 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. 132 | 133 | - **How to Work with Forms, Inputs, and Events in React** 134 | https://medium.com/capital-one-developers/how-to-work-with-forms-inputs-and-events-in-react-c337171b923b 135 | An excerpt from the book "React Quickly", which gives an overview of the recommended way to use forms in a React app. 136 | 137 | - **An imperative guide to forms in React** 138 | https://blog.logrocket.com/an-imperative-guide-to-forms-in-react-927d9670170a 139 | A useful overview of how to work with forms. Includes several runnable examples, and also looks at how the Formik library can simplify form handling. 140 | 141 | 142 | #### Form Validation 143 | 144 | - **Form Validation Tutorial with React.js** 145 | https://html5hive.org/reactjs-form-validation-tutorial/ 146 | A good example of setting up form validation in React 147 | 148 | - **Elegant Form Validation in React** 149 | https://spin.atomicobject.com/2016/10/05/form-validation-react/ 150 | Examples of adding validation to a form 151 | 152 | - **Two-Way Data Binding and Form Validation in React** 153 | https://medium.com/@thejenniekim/two-way-data-binding-and-form-validation-in-react-9d0b15123176 154 | Another demonstration of building a form with some logic and validation. 155 | 156 | - **Form Validation as a Higher Order Component** 157 | https://medium.com/javascript-inside/form-validation-as-a-higher-order-component-pt-1-83ac8fd6c1f0 158 | https://medium.com/javascript-inside/form-validation-as-a-higher-order-component-pt-2-1edb7881870d 159 | A 2-part series, demonstrating how to use Ramda and FP approaches to create validation logic 160 | 161 | - **Form recipe: Conditionally disabling the Submit button** 162 | http://goshakkk.name/form-recipe-disable-submit-button-react/ 163 | Some simple examples of validating data from controlled inputs 164 | 165 | - **Instant form field validation with React's controlled inputs** 166 | https://goshakkk.name/instant-form-fields-validation-react/ 167 | Examples of how to perform validation during rendering, and immediately show which inputs are invalid 168 | 169 | - **Really Dumb Form Validation** 170 | https://medium.com/@l_e/really-dumb-form-validations-739611d2ffcd 171 | Some quick examples of simple but effective form validation handling inside of React components. 172 | 173 | - **Why not field-level validations?** 174 | https://goshakkk.name/y-no-field-level-validations/ 175 | Thoughts on why it's better to handle validation at the "whole form" level, rather than strictly per-field. 176 | 177 | - **Validating React forms upon submit** 178 | https://goshakkk.name/submit-time-validation-react/ 179 | Discusses core concepts of validating form inputs, and demonstrates how to handle validations on submit for both uncontrolled and controlled components. 180 | 181 | 182 | #### Other 183 | 184 | - **List or Form, why not both? Making a list with a built in editor in React** 185 | 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/ 186 | Builds an example of a list with the ability to do inline editing of items. 187 | 188 | - **Comparison of form libraries in React** 189 | https://codebrahma.com/form-libraries-in-react/ 190 | A good comparison of several different React/Redux-based form libraries, with code snippets demonstrating usage. 191 | 192 | - **The Joy of Forms with React and Formik** 193 | https://keyholesoftware.com/2017/10/23/the-joy-of-forms-with-react-and-formik/ 194 | Looks at some of the complexities with handling forms in React, and how the Formik library can help simplify that logic. 195 | 196 | - **Painless React Forms with Formik** 197 | https://hackernoon.com/painless-react-forms-with-formik-e61b70473c60 198 | Describes how the Formik library can help solve transforming props to form state, validation and error messages, and handling form submission. 199 | 200 | - **Formik - Handling files and reCaptch** 201 | https://hackernoon.com/formik-handling-files-and-recaptcha-209cbeae10bc 202 | Demonstrates how to use the Formik library to accept uploaded files and work with reCaptcha validation. 203 | 204 | - **Final Form / React Final Form** 205 | https://codeburst.io/final-form-the-road-to-the-checkered-flag-cd9b75c25fe 206 | https://medium.com/@erikras/final-form-arrays-and-mutators-13159cb7d285 207 | https://blog.cloudboost.io/final-form-decorators-calculated-fields-and-warnings-bf9cccd21b7e 208 | Erik Rasmussen, author of the popular Redux-Form library, introduces his new framework-agnostic Final Form library and its bindings for React. -------------------------------------------------------------------------------- /react-hooks.md: -------------------------------------------------------------------------------- 1 | ### React Hooks 2 | 3 | 4 | #### Official Resources 5 | 6 | - **React Docs: Hooks** 7 | https://reactjs.org/docs/hooks-intro.html 8 | The main resource for learning hooks. Includes an intro with motivation, tutorials on `useState` and `useEffect`, discussion of custom hooks, the full hooks API reference, and an in-depth FAQ. **Read the hooks docs first before looking at anything else!** 9 | 10 | - **ReactConf 2018: React Today and Tomorrow** 11 | https://www.youtube.com/watch?v=dpw9EHDh2bM 12 | Sophie Alpert and Dan Abramov's talk unveiling hooks, live at ReactConf 2018. 13 | 14 | - **A Complete Guide to `useEffect`** 15 | https://overreacted.io/a-complete-guide-to-useeffect/ 16 | An incredibly detailed deep dive by Dan Abramov into the mindset of using hooks correctly. Covers the relationship between class lifecycles and hooks, how to work with the dependencies array, dealing with closures and stale data, and much much more. This is required reading for anyone using hooks. 17 | 18 | - **Making Sense of React Hooks** 19 | https://dev.to/dan_abramov/making-sense-of-react-hooks-2eib 20 | Dan Abramov provides a lot of additional context around the hooks proposal, including potential benefits like co-locating related logic, examples of how to use hooks, whether they are "magic", and more. **Also a must-read.** 21 | 22 | 23 | #### Hooks Tutorials 24 | 25 | - **Why React Hooks?** 26 | https://tylermcginnis.com/why-react-hooks/ 27 | A great introduction to hooks by Tyler McGinnis, with a focus on "why do these exist, and what problems do they solve?". 28 | 29 | - **A Simple Intro to React Hooks** 30 | https://daveceddia.com/intro-to-hooks/ 31 | https://daveceddia.com/usestate-hook-examples/ 32 | https://daveceddia.com/usereducer-hook-examples/ 33 | https://daveceddia.com/useeffect-hook-examples/ 34 | https://daveceddia.com/usecontext-hook/ 35 | Dave Ceddia continues his excellent easy-to-read React tutorials with a friendly intro to the basics of several hooks. 36 | 37 | - **What are React Hooks?** 38 | https://www.robinwieruch.de/react-hooks/ 39 | https://www.robinwieruch.de/react-hooks-fetch-data/ 40 | An excellent article by Robin Wieruch. Includes examples of problems that hooks can help solve, discussion of how the changes affect React overall, and multiple examples for the `useState` and `useEffect` hooks. A follow-up post discusses how to handle data fetching. 41 | 42 | - **Everything you need to know about React Hooks** 43 | https://dev.to/vcarl/everything-you-need-to-know-about-react-hooks-doh 44 | A thorough post from Carl Vitullo that digs into the potential use cases of all of the built-in hooks. Definitely worth reading once you've gotten your head around the basic ideas. 45 | 46 | - **An Introduction to Hooks in React** 47 | https://www.fullstackreact.com/articles/an-introduction-to-hooks-in-react/#community-reaction-to-hooks 48 | An extensive article with numerous examples of `useState`, `useEffect`, and `useContext`. Also covers `useRef`, custom hooks, writing tests for hooks, and some community reactions. 49 | 50 | 51 | #### Understanding Hooks Concepts 52 | 53 | - **React Hooks Demystified** 54 | https://dev.to/kayis/react-hooks-demystified-2af6 55 | Implements a tiny fake version of React, then illustrates how hooks are "just" implemented with some global variables, like an array to track which hooks were used in the current function component. 56 | 57 | - **React hooks: not magic, just arrays** 58 | https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e 59 | Describes how the "rules of hooks" are all about React's use of arrays (or linked lists) internally, with diagrams to illustrate how the behavior is implemented. 60 | 61 | - **Getting Closure on Hooks** 62 | https://www.youtube.com/watch?v=KJP1E-Y-xyo 63 | https://www.swyx.io/getting-closure-on-hooks/ 64 | Shawn Wang's excellent talk and post that shows how hooks work by building a mini-React with hooks in just a few lines of code 65 | 66 | - **Why React Hooks, and how did we even get here?** 67 | https://medium.freecodecamp.org/why-react-hooks-and-how-did-we-even-get-here-aa5ed5dc96af 68 | A look back at earlier common patterns for reusing React logic (mixins, higher-order components, and render props), some of their strengths and weaknesses, and how hooks improve on those patterns. 69 | 70 | - **Under the Hood of React's hooks system** 71 | https://medium.com/the-guild/under-the-hood-of-reacts-hooks-system-eb59638c9dba 72 | A well-written explanation of how hooks work internally, with some useful diagrams and snippets of the relevant React implementation code. 73 | 74 | - **React RFC #68: React Hooks** 75 | https://github.com/reactjs/rfcs/pull/68 76 | The official RFC announcing hooks. There's hundreds of comments from the community debating various pros and cons of the API design. Probably not worth reading the entire thread, but some interesting thoughts in there. 77 | -------------------------------------------------------------------------------- /react-implementation.md: -------------------------------------------------------------------------------- 1 | ### React Implementation and Concepts 2 | 3 | 4 | #### Resources 5 | 6 | - **React Team core Notes** 7 | https://github.com/reactjs/core-notes 8 | Notes from the React team's weekly-ish meetings 9 | 10 | 11 | #### Core Concepts 12 | 13 | - **React Components, Elements, and Instances** 14 | https://medium.com/@dan_abramov/react-components-elements-and-instances-90800811f8ca 15 | Clarifies the differences between these related terms. 16 | 17 | - **React Elements vs React Components vs Component Backing Instances** 18 | https://medium.com/@fay_jai/react-elements-vs-react-components-vs-component-backing-instances-14d42729f62 19 | Another solid comparison of what these terms mean, how React uses them, and how they differ. 20 | 21 | - **React - Basic Theoretical Concepts** 22 | https://github.com/reactjs/react-basic 23 | React team member Seb Markbage dives into his mental model for how React works. (Note: after the first few paragraphs, _not_ "basic" at all. Definitely an involved read, but informative.) 24 | 25 | - **Our First 50,000 Stars** 26 | https://facebook.github.io/react/blog/2016/09/28/our-first-50000-stars.html 27 | A post celebrating React's progress, including a history of how React's concepts came together over time 28 | 29 | - **React Elements vs React Components** 30 | https://tylermcginnis.com/react-elements-vs-react-components/ 31 | An explanation of how elements represent DOM nodes, what `createElement` does, and how components and rendering relate to elements 32 | 33 | 34 | #### Miniature React Implementations 35 | 36 | - **Building React from Scratch** 37 | https://www.youtube.com/watch?v=_MAD4Oly9yg 38 | Paul O'Shannessy walks through building a mini React implementation 39 | 40 | - **Building Your Own React Clone in Five Easy Steps** 41 | http://blog.javascripting.com/2016/10/05/building-your-own-react-clone-in-five-easy-steps/ 42 | Builds a mini-React implementation to illustrate the basic principles 43 | 44 | - **Reverse Engineering React** 45 | https://vimeo.com/album/3930691 46 | A video series covering the implementation of an alternative/miniature version of React called "Reaction". Note that it doesn't look at React itself, but does cover all the equivalent concepts in a simpler implementation. 47 | 48 | - **Tiny React Reimplementation** 49 | http://jsbin.com/qiguyibolu/1/edit?js,output 50 | A _very_ tiny (100 lines) implementation of React's basic algorithm 51 | 52 | - **Tiny React Renderer** 53 | https://github.com/iamdustan/tiny-react-renderer 54 | A heavily commented learning implementation of a bare basic React renderer 55 | 56 | - **How to write your own Virtual DOM** 57 | https://medium.com/@deathmood/how-to-write-your-own-virtual-dom-ee74acc13060 58 | https://medium.com/@deathmood/write-your-virtual-dom-2-props-events-a957608f5c76 59 | A series of articles that build up a small Virtual DOM system from scratch. 60 | 61 | - **Write Your Own React.js!** 62 | https://medium.com/@calebmer/write-your-own-react-js-776dbef98b8 63 | Some thoughts on why and how you might want to try writing your own React-alike, and some of the tradeoffs involved in writing something like React. 64 | 65 | - **Didact: Learning how React works by building it from scratch** 66 | https://engineering.hexacta.com/didact-learning-how-react-works-by-building-it-from-scratch-51007984e5c5 67 | https://engineering.hexacta.com/didact-element-creation-and-jsx-d05171c55c56 68 | https://engineering.hexacta.com/didact-rendering-dom-elements-91c9aa08323b 69 | https://engineering.hexacta.com/didact-instances-reconciliation-and-virtual-dom-9316d650f1d0 70 | https://engineering.hexacta.com/didact-components-and-state-53ab4c900e37 71 | https://engineering.hexacta.com/didact-fiber-incremental-reconciliation-b2fe028dcaec 72 | An ongoing series of articles showing how to build parts of React's API and implementation, like `createElement`, `setState`, and the "Fiber" reconciliation approach. 73 | 74 | - **deact: React under the hood** 75 | https://github.com/lukebelliveau/deact 76 | A repository for learning about how React works internally. Has a link to a slide set that explains the concepts, and has branches for the various lessons. 77 | 78 | - **React Internals** 79 | http://www.mattgreer.org/articles/react-internals-part-one-basic-rendering/ 80 | http://www.mattgreer.org/articles/react-internals-part-two-componentWillMount-and-componentDidMount/ 81 | http://www.mattgreer.org/articles/react-internals-part-three-basic-updating/ 82 | http://www.mattgreer.org/articles/react-internals-part-four-setState/ 83 | A 5-part series that will recreate React from the ground up, illustrating how it works along the way. 84 | 85 | - **Making a custom React renderer** 86 | https://github.com/nitin42/Making-a-custom-React-renderer 87 | A 4-part that teaches how to build a React reconciler for React 16 that renders to a Word document 88 | 89 | - **Extending React** 90 | https://www.javascriptjanuary.com/blog/extending-react 91 | Walks through building a very simplified mini React clone, including `createElement`, rendering to the DOM, and `setState` updates 92 | 93 | 94 | #### Implementation and Internals 95 | 96 | - **React as a UI Runtime by Dan Abramov** 97 | https://overreacted.io/react-as-a-ui-runtime 98 | A deep dive into the React programming model from first principles 99 | 100 | - **React.js Reconciliation** 101 | https://www.infoq.com/presentations/react-reconciliation 102 | A video presentation digging into how React's reconciliation algorithm determines how to properly update nodes based on render output. 103 | 104 | - **ReactJS: Under the Hood** 105 | https://www.youtube.com/watch?v=xsKYAa1ZXpQ 106 | A talk digging into React's internal concepts and implementation, including the split between the core library and the renderers. 107 | 108 | - **Dive Into React Codebase: Transactions** 109 | http://reactkungfu.com/2015/12/dive-into-react-codebase-transactions/ 110 | A deep dive into the implementation of React's internal "transactions" concept 111 | 112 | - **React Events In Depth** 113 | https://www.youtube.com/watch?v=dRo_egw7tBc 114 | A Javascript Air episode focused on how React's Events system works, with React team members Dan Abramov and Ben Alpert 115 | 116 | - **Dive Into React Codebase: Handling state changes** 117 | http://reactkungfu.com/2016/03/dive-into-react-codebase-handling-state-changes/ 118 | A deep dive into how React implements component state and `setState()` 119 | 120 | - **On the Async Nature of `setState` in React** 121 | http://thereignn.ghost.io/on-the-async-nature-of-setstate-in-react/ 122 | Digs into the behavior of `setState`, and whether it is actually always async or not. Some decent info, although the final section does make some strange statements. 123 | 124 | - **setState() State Mutation Operator May Be Synchronous in ReactJS** 125 | https://www.bennadel.com/blog/2893-setstate-state-mutation-operation-may-be-synchronous-in-reactjs.htm 126 | Digs into the behavior of React's setState method, and discusses when it may be synchronous vs asynchronous 127 | 128 | - **React Internals: Through the Lens of a Renderer** 129 | https://www.youtube.com/watch?v=VVxQAoNK_XQ 130 | A talk exploring how a React renderer works, and how to implement a tiny renderer 131 | 132 | - **Making custom renderers for React** 133 | http://goshakkk.name/react-custom-renderers/ 134 | Describes techniques for building custom rendering components that bridge between normal rendering and something like a canvas 135 | 136 | - **The Inner Workings of Virtual DOM** 137 | https://medium.com/@rajaraodv/the-inner-workings-of-virtual-dom-666ee7ad47cf 138 | An in-depth article that digs into how a Virtual DOM implementation works, using Preact as an example. Includes some detailed flowcharts of their behavior. 139 | 140 | - **React Internals** 141 | https://zackargyle.github.io/react-internals-slides/#/ 142 | An informative slideshow that walks through many aspects of React's implementation and behavior, including rendering, reconciliation, setState, Fiber, and more, with helpful visualizations. 143 | 144 | - **Preact Internals** 145 | https://medium.com/@asolove/preact-internals-1-the-easy-parts-3a081fa36205 146 | https://medium.com/@asolove/preact-internals-2-the-component-model-36a05e32957b 147 | A series of posts that walk through the Preact codebase and explain its implementation, as well as the component model. 148 | 149 | - **The React Source Code: A Beginner's Walkthrough** 150 | https://medium.com/@ericchurchill/the-react-source-code-a-beginners-walkthrough-i-7240e86f3030 151 | A long, detailed walkthrough of large parts of the React codebase 152 | 153 | - **Preact: Into the void 0** 154 | https://youtu.be/LY6y3HbDVmg 155 | A talk by Jason Miller, author of Preact, covering some of the core implementation concepts behind Preact (and other virtual DOM/component libraries), as well as some important aspects for DOM manipulation performance. 156 | 157 | - **Under the hood: ReactJS** 158 | https://bogdan-lyashenko.github.io/Under-the-hood-ReactJS/ 159 | An incredibly detailed walkthrough of React's entire codebase and execution flow, with many diagrams and flowcharts illustrating things. Very impressive. 160 | 161 | - **Preact Internals** 162 | https://medium.com/@asolove/preact-internals-1-the-easy-parts-3a081fa36205 163 | https://medium.com/@asolove/preact-internals-2-the-component-model-36a05e32957b 164 | https://medium.com/@asolove/preact-internals-3-some-fiddly-little-bits-f353b1ad7abc 165 | A 3-part series that dives into the implementation and concepts of the Preact library codebase. 166 | 167 | - **An Interview with the React Team About Wordpress and Project Gutenberg** 168 | https://wpcouple.com/interview-react-team-facebook-wordpress-gutenberg/ 169 | A Wordpress community site interviews Dan Abramov, Andrew Clark, and Sophie Alpert about a variety of topics, including how they prioritize features, how React is tested, dealing with breaking changes, downsides of React, and aspects of Wordpress using React for its "Project Gutenberg" tool. 170 | 171 | - **The React Story: How Facebook's Instagram Acquisition Led to the Open Sourcing of React** 172 | https://stackshare.io/posts/the-react-story 173 | An extensive podcast interview with Pete Hunt, former React team member, recounting his early work at Facebook, how he began using React at Instagram, how that led to the growth of React inside Facebook, and how the decision to open-source React happened. Page includes a complete transcript of the discussion. 174 | 175 | - **How exactly does React handle events?** 176 | https://levelup.gitconnected.com/how-exactly-does-react-handles-events-71e8b5e359f2 177 | A detailed look at how React's internal event handling works, including normalization of events, SyntheticEvent objects, and more. 178 | 179 | - **A look inside React Fiber** 180 | http://makersden.io/blog/look-inside-fiber/ 181 | Traces through the source code for React 16 / React Fiber, starting with the main `render()` function and diving down from there through the system. 182 | 183 | - **Understanding the React Source Code** 184 | https://holmeshe.me/categories/Understanding-The-React-Source-Code/ 185 | A multi-part series of posts that walks through the critical path of React 15's source code, tracing how a simple component gets rendered. 186 | 187 | 188 | #### React Fiber 189 | 190 | - **React v16.0** 191 | https://reactjs.org/blog/2017/09/26/react-v16.0.html 192 | The React team officially announces the release of React 16 and describes the new features, including returning arrays, error handling, better server-side rendering, and more. 193 | 194 | - **React 16: A look inside an API-compatible rewrite** 195 | https://code.facebook.com/posts/1716776591680069/react-16-a-look-inside-an-api-compatible-rewrite-of-our-frontend-ui-library/ 196 | The React team describes how they handled building and testing React 16 to be backwards compatible with existing code. 197 | 198 | - **ReactConf 2017: A Cartoon Intro to Fiber** 199 | https://youtu.be/ZCuYPiUIONs 200 | A fantastic presentation by Lin Clark, explaining the core concepts and implementation of React Fiber with cartoon illustrations. 201 | 202 | - **Roadmap for React - Fiber and Beyond** 203 | https://www.youtube.com/watch?v=QW5TE4vrklU 204 | A keynote by Andrew Clark, describing the ideas behind React Fiber and the benefits it will give. 205 | 206 | - **React Fiber: A Closer Look at the New Engine of React** 207 | https://www.infoq.com/news/2017/05/react-fiber-closer-look 208 | A useful summary of the goals and implementation approach for the new React Fiber algorithm 209 | 210 | - **Top Resources to Explore React Fiber** 211 | https://hackernoon.com/top-resources-to-explore-react-fiber-9a2b19114520 212 | A helpful list of links to further articles and resources for learning about React Fiber 213 | 214 | - **React Fiber for the rest of us** 215 | http://www.benmvp.com/slides/2017/reactboston/fiber.html#/ 216 | Slides from Ben Ilegbodu's ReactBoston presentation, which summarize the changes in React 16. 217 | 218 | - **What's new in React 16?** 219 | https://www.robinwieruch.de/what-is-new-in-react-16/ 220 | A very useful look at the new user-facing features in React 16, with code examples. 221 | 222 | - **Rethinking with React 16** 223 | https://www.javascriptjanuary.com/blog/rethinking-with-react-16 224 | An informative overview of the major changes in React 16, including the goals of the "React Fiber" rewrite, Fragments, Error Boundaries, server-side rendering improvements, and more. 225 | 226 | - **React Fiber Architecture** 227 | https://github.com/acdlite/react-fiber-architecture 228 | A description of React's new core algorithm, React Fiber 229 | 230 | - **What's Next for React - React Fiber** 231 | https://www.youtube.com/watch?v=aV1271hd9ew 232 | Andrew Clark describes the concepts, implementation, and potential benefits of the in-progress React Fiber internal algorithm reimplementation. 233 | 234 | - **React Fiber Resources** 235 | https://github.com/koba04/react-fiber-resources 236 | Links and info on the new React Fiber algorithm 237 | 238 | - **Why, What, and How of React Fiber** 239 | https://www.youtube.com/watch?v=crM1iRVGpGQ 240 | Kent C Dodds interviews Dan Abramov and Andrew Clark about what React Fiber is intended to do, how it works, and what it means for the React codebase. 241 | 242 | - **What is React Fiber?** 243 | https://giamir.com/what-is-react-fiber 244 | An overview of the React Fiber rewrite, and how React's reconciler has been rewritten to improve performance and make rendering more flexible. 245 | -------------------------------------------------------------------------------- /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 | - **Build an Imgur Client with React Native and MobX** 31 | https://medium.com/react-native-development/build-an-imgur-client-with-react-native-and-mobx-react-native-school-53146d648250 32 | 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 33 | 34 | - **Offline-First Apps with React Native and Redux** 35 | http://rationalappdev.com/offline-first-apps-with-react-native-and-redux/ 36 | A tutorial that builds out a cat GIF app using React Native, Redux, Node, and Express, and includes offline support. 37 | 38 | - **Let's Build: Cryptocurrency Native Mobile App with React Native + Redux** 39 | https://medium.com/react-native-training/bitcoin-ripple-ethereum-price-checker-with-react-native-redux-e9d076037092 40 | https://medium.com/@wesharehoodies/tutorial-react-native-redux-native-mobile-app-for-tracking-cryptocurrency-bitcoin-litecoin-810850cf8acc 41 | https://medium.com/@wesharehoodies/learn-how-to-build-a-rn-redux-cryptocurrency-app-chapter-iii-a454dda156b 42 | https://medium.com/@wesharehoodies/learn-how-to-build-a-rn-redux-cryptocurrency-app-chapter-iv-b0e0c5ca2dca 43 | 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. 44 | 45 | 46 | 47 | #### Specific aspects 48 | 49 | - **Using iOS Image Picker with React Native** 50 | http://goshakkk.name/react-native-camera-roll-image-picker/ 51 | 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. 52 | 53 | - **Rapid cross-platform development with React Native** 54 | https://robots.thoughtbot.com/rapid-cross-platform-mobile-development-with-react-native 55 | Thoughts on how React Native enables code reuse and iteration, and a look at using the flexbox-based layout system on various platforms. 56 | 57 | - **Debugging React Native Applications** 58 | https://medium.com/reactnativeacademy/debugging-react-native-applications-6bff3f28c375 59 | A useful description of tools and techniques that can be used to help debug RN apps. 60 | 61 | - **Under the hood of React Native** 62 | https://speakerdeck.com/mkonicek/under-the-hood-of-react-native 63 | A slideset digging into the guts of how React Native works 64 | 65 | - **What I learned from building my first React Native App** 66 | http://cmichel.io/lessons-from-building-first-react-native-app/ 67 | A number of informative lessons learned building an app using RN and Redux, including components, performance, workflow, and use of Redux. 68 | 69 | - **Understanding React Native flexbox layout** 70 | https://medium.com/the-react-native-log/understanding-react-native-flexbox-layout-7a528200afd4 71 | A helpful visual guide to how Flexbox works, both in general and specific to React Native 72 | 73 | - **How to Create An Authentication System and a Persistent User Session with React Native** 74 | http://www.theodo.fr/blog/2017/03/how-to-create-an-authentication-system-and-a-persistent-user-session-with-react-native/ 75 | Demonstrates how to build an app that uses JWT authentication, and persist the token in storage to keep the user logged in 76 | 77 | - **React Native Effective Patterns** 78 | https://medium.com/the-poli/react-native-effective-patterns-3e0c9db6c32c 79 | Some useful suggestions for writing React Native apps, including use of callbacks, separating navigation from views, use of Redux, and more. 80 | 81 | - **React Native Layout Tricks** 82 | https://www.theodo.fr/blog/2017/04/react-native-layout-tricks/ 83 | Helpful examples for achieving specific UI layouts using RN's Flexbox implementation 84 | 85 | - **Where does authentication fit in a React Native app?** 86 | https://goshakkk.name/auth-in-react-native-apps/ 87 | Some quick thoughts on what authentication involves and how to handle it in an RN app 88 | 89 | - **The building blocks of React Native animations** 90 | https://goshakkk.name/react-native-animated-building-blocks/ 91 | 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. 92 | 93 | - **6 Tips You Want to Know about React Native Performance** 94 | https://www.simplytechnologies.net/blog/2017/6/6/6-tips-you-want-to-know-about-react-native-performance 95 | Several useful suggestions for improving RN performance, including RN-specific suggestions like using FlatList instead of ListView, and pushing animations into native code. 96 | 97 | - **How we restructured our app with React-Navigation** 98 | https://m.oursky.com/how-we-restructured-our-app-with-react-navigation-98a89e219c26 99 | 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. 100 | 101 | - **A comprehensive guide for integrating React-Navigation with Redux including authentication flow** 102 | https://medium.com/@shubhnik/a-comprehensive-guide-for-integrating-react-navigation-with-redux-including-authentication-flow-cb7b90611adf 103 | An extended tutorial that demonstrates connecting React-Navigation and Redux, and shows how to implement an authentication workflow. 104 | 105 | - **A Year of React Native: Styling** 106 | https://madebymany.com/stories/a-year-of-react-native-styling-part-1 107 | https://madebymany.com/stories/a-year-of-react-native-styling-part-2 108 | Looks at ways that styling in RN differs from styling on the web, and useful patterns for organizing styling logic in RN apps. 109 | 110 | - **React Native app performance: Major issues and insights on improving your app's performance** 111 | https://www.simform.com/react-native-app-performance/ 112 | 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. 113 | 114 | - **React Native at Grofers: Using React Native components inside native views** 115 | https://lambda.grofers.com/starting-with-react-native-at-grofers-a-guide-to-using-react-native-components-inside-native-bbdd6a3470d4 116 | Looks at the pros and cons of using RN components in native views, including turnaround shipping speed, approach for bridging views, and performance. 117 | 118 | - **React Native Events in Gory Details: What Happens on the Way to Listeners** 119 | https://levelup.gitconnected.com/react-native-events-in-gory-details-what-happens-on-the-way-to-listeners-2cee6c55940c 120 | A deep dive into the internnal behavior and implementation of React Native's event system. 121 | 122 | - **Simplifying react-native navigation with a Redux router** 123 | https://medium.com/@ericacooksey/simplifying-react-native-navigation-with-a-redux-wrapper-8d5d530af8fc 124 | 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 v4: The Complete Guide** 71 | https://www.sitepoint.com/react-router-v4-complete-guide/ 72 | A detailed tutorial that covers the React Router v4 API and concepts, with many examples 73 | 74 | - **Server Rendering, Code Splitting, and Lazy Loading with React Router v4** 75 | https://medium.com/airbnb-engineering/server-rendering-code-splitting-and-lazy-loading-with-react-router-v4-bfe596a6af70 76 | Technical discussion of the problems involved in code-splitting server rendered apps, and how Airbnb has implemented solutions using React-Router v4 and Babel. 77 | 78 | - **URL Parameters with React Router** 79 | https://tylermcginnis.com/react-router-url-parameters/ 80 | Tyler McGinnis gives a short example of how to use parameters from the current URL in a component with React-Router v4 81 | 82 | - **Using React Router v4 with create-react-app** 83 | https://codingblast.com/react-router-create-react-app/ 84 | Explains key concepts of React-Router v4, and gives examples of using it in a CRA project 85 | 86 | 87 | #### Routing with Redux 88 | 89 | - **Let the URL Do the Talking** 90 | http://formidable.com/blog/2016/07/11/let-the-url-do-the-talking-part-1-the-pain-of-react-router-in-redux/ 91 | http://formidable.com/blog/2016/07/19/let-the-url-do-the-talking-part-2-bargaining-and-acceptance-with-redux-and-react-router/ 92 | http://formidable.com/blog/2016/07/25/let-the-url-do-the-talking-part-3-empower-the-url-with-redux-little-router/ 93 | http://formidable.com/blog/2016/09/13/introducing-nested-routing-in-redux-little-router/ 94 | 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 95 | 96 | 97 | - **An Introduction to the Redux-First Routing Model** 98 | https://medium.freecodecamp.com/an-introduction-to-the-redux-first-routing-model-98926ebf53cb 99 | 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. 100 | 101 | - **Pre Release: Redux-First Router - A Step Beyond Redux-Little-Router** 102 | https://medium.com/faceyspacey/pre-release-redux-first-router-a-step-beyond-redux-little-router-cd2716576aea 103 | 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. 104 | 105 | - **Routedux - Routing the Redux way** 106 | https://cjdev.github.io/routedux/ 107 | An article introducing a library that maps URLs to actions and vice versa. 108 | 109 | - **Entering/Leaving hooks of routing for Redux apps** 110 | https://medium.com/@kuy/entering-leaving-hooks-of-routing-for-react-redux-app-22e6eea055a5 111 | 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. 112 | 113 | - **Routes as State in React** 114 | https://blog.boon.gl/2017/06/29/routes-as-state-in-react.html 115 | Some thoughts on why tracking route data as state might make sense, and some examples of how to approach that. 116 | 117 | - **Redux-First Router data fetching; solving the 80% use case for async middleware** 118 | https://medium.com/faceyspacey/redux-first-router-data-fetching-solving-the-80-use-case-for-async-middleware-14529606c262 119 | An extended article discussing "component-first" vs "route-first" data fetching approaches, and how the author's library helps solve the "route-first" approach. 120 | 121 | - **Redux-First Router: Just Dispatch Actions** 122 | https://survivejs.com/blog/redux-first-router-interview/ 123 | 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. 124 | 125 | - **A Redux First Router Saga** 126 | https://medium.com/@bryanfillmer/a-redux-first-router-saga-67c2cda9252e 127 | Examples and discussion of how to use sagas in conjunction with Redux-based routing to handle side effects that are connected to route changes. 128 | 129 | - **Redux First Router - First Impressions** 130 | https://www.dailydrip.com/topics/react/drips/redux-first-router-first-impressions 131 | A short tutorial that shows how to add redux-first-router to a CRA project and configure it. 132 | 133 | - **React Router to Redux First Router** 134 | https://medium.com/@jonsamp/react-router-to-redux-first-router-2fea05c4c2b7 135 | 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. 136 | 137 | 138 | #### Authentication 139 | 140 | - **How to Build a React Application with User Login and Authentication** 141 | https://stormpath.com/blog/build-a-react-app-with-user-authentication 142 | 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. 143 | 144 | - **JWT Authentication with React + Redux** 145 | http://www.thegreatcodeadventure.com/jwt-authentication-with-react-redux/ 146 | Demonstrates handling sign-in flow, including a dynamic login/logout link, and implementing routes that can only be seen by logged-in users. 147 | 148 | - **Role based authorization in React** 149 | https://hackernoon.com/role-based-authorization-in-react-c70bb7641db4 150 | Some alternative approaches to the previous post, using React component patterns like Higher Order Components to control authorization and rendering 151 | 152 | - **Dealing with Authentication in React** 153 | https://medium.com/@nesbtesh/dealing-with-authentication-in-react-cadb679fbc0f 154 | Some short examples of saving an authentication token, writing queries to use and update that token, and checking the token when rendering components. 155 | 156 | - **Preact Authentication Tutorial** 157 | https://auth0.com/blog/preact-authentication-tutorial/ 158 | A tutorial that demonstrates how to build an app with Preact, including authentication, and makes some comparisons to doing so in React. 159 | 160 | - **How to Implement Authentication for Your React App** 161 | https://medium.appbase.io/how-to-implement-authentication-for-your-react-app-cf09eef3bb0b 162 | https://medium.appbase.io/securing-a-react-web-app-with-server-side-authentication-1b7c7dc55c16 163 | A pair of posts that demonstrate implementing both client-side and server-side authentication behavior for a React/Node app. 164 | 165 | - **Protected Routes and Authentication with React Router v4** 166 | https://tylermcginnis.com/react-router-protected-routes-authentication/ 167 | A great tutorial that shows how to create routes that only authenticated users can access. 168 | 169 | - **Securing a React Web App with Authorization Rules** 170 | https://medium.appbase.io/securing-a-react-web-app-with-authorization-rules-2e43bf5592ca 171 | A tutorial that shows how to add authorization and authentication to a Todo app 172 | 173 | - **Composing authorizing into React apps** 174 | https://medium.com/@sarat1669/composing-authorization-into-react-apps-180fa3c18d1 175 | Examples of generic auth management at the component level, using a package called react-identity. 176 | -------------------------------------------------------------------------------- /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 | - **Server-side rendering with create-react-app** 66 | https://medium.com/@cereallarceny/server-side-rendering-with-create-react-app-fiber-react-router-v4-helmet-redux-and-thunk-275cb25ca972 67 | 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. 68 | 69 | - **React SSR** 70 | https://blog.eleven-labs.com/en/react-ssr/ 71 | A step-by-step guide to setting up an SSR React app from scratch, including use of Redux. 72 | 73 | - **Case study of SSR with React in a large e-commerce app** 74 | http://blog.jakoblind.no/case-study-of-ssr-with-react-in-a-large-e-commerce-app/ 75 | 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. 76 | 77 | - **Scaling React Server-Side Rendering** 78 | http://arkwright.github.io/scaling-react-server-side-rendering.html 79 | 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. 80 | 81 | - **You might (not) need a Server Side Rendering Framework** 82 | https://adrienharnay.me/you-might-not-need-a-server-side-rendering-framework/ 83 | Discusses building a home-grown SSR setup using Webpack, rather than reusing something like Next.js. 84 | 85 | - **Server-side rendering React apps** 86 | https://hph.is/coding/server-side-rendering-react 87 | 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. 88 | 89 | - **Using React and Next.js to build a PWA** 90 | https://aerolab.co/blog/react-nextjs-pwa/ 91 | Shows how to build a Hacker News app using the Next.js SSR platform 92 | 93 | - **The simple guide to server-side rendering React with styled-components** 94 | https://medium.com/styled-components/the-simple-guide-to-server-side-rendering-react-with-styled-components-d31c6b2b8fbf 95 | A short walkthrough that sets up a basic React SSR app, and adds the styled-components library for styling 96 | 97 | - **How I spent my Christmas enabling SSR** 98 | https://medium.com/@tabu_craig/how-i-spent-my-christmas-enabling-ssr-5bacfc686032 99 | A recap of how a team set up SSR for their existing React+Redux+Redux-Saga application, with the major changes they implemented 100 | 101 | - **"Server-Side Rendering - Not Worth It?"** 102 | https://www.reddit.com/r/reactjs/comments/7o6oj6/serverside_rendering_not_worth_it/ 103 | An extended Reddit discussion on the pros, cons, and techniques for SSR with React 104 | 105 | - **Upgrading a create-react-app project to a SSR + code splitting setup** 106 | https://medium.com/bucharestjs/upgrading-a-create-react-app-project-to-a-ssr-code-splitting-setup-9da57df2040a 107 | 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 | https://www.javascriptstuff.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 | https://jxnblk.com/blog/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 | https://www.javascriptstuff.com/css-modules-by-example/ 91 | A set of 7 examples demonstrating ways to use CSS modules. 92 | 93 | - **Functional CSS - The Good, The Bad, and Some Protips for React.js Users** 94 | https://github.com/chibicode/react-functional-css-protips 95 | An essay describing the "functional CSS" approach, pros and cons of using it, and tips for using that approach with React. 96 | 97 | - **How we made our product more personalized with CSS Variables and React** 98 | https://medium.com/geckoboard-under-the-hood/how-we-made-our-product-more-personalized-with-css-variables-and-react-b29298fde608 99 | A walkthrough of how to build a themeable application using React components that update CSS variables for dynamic styles 100 | 101 | - **Styling your React app for beginners** 102 | https://medium.com/@dylan.broadbridge/styling-your-react-app-for-beginners-f6b39779019b 103 | Examples of basic CSS usage in a CRA-based application, including importing CSS files and use of inline styles in components for layout. 104 | 105 | 106 | #### JS-Based Approaches 107 | 108 | - **Journey to Enjoyable, Maintainable Styling with React, ITCSS, and CSS-in-JS** 109 | https://medium.com/maintainable-react-apps/journey-to-enjoyable-maintainable-styling-with-react-itcss-and-css-in-js-632cfa9c70d6 110 | A long, in-depth article detailing one dev's progression through various approaches to handling CSS. 111 | 112 | - **Thoughts on Inline Styles** 113 | https://medium.com/@andrewingram/my-thoughts-on-inline-styles-da94682b5e35 114 | 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. 115 | 116 | - **Style as a Function of State** 117 | https://medium.com/@rofrischmann/styles-as-functions-of-state-1885627a63f7 118 | A look at how styles can be managed similar to UI, and an example using the author's new styling library 119 | 120 | - **Invidual Paint for your React Components** 121 | https://vimeo.com/album/4199344/video/187454103 122 | A talk discussing various approaches to manage styles and themes for React 123 | 124 | - **Writing Your Styles in JS != Writing Inline Styles** 125 | http://mxstbr.blog/2016/11/inline-styles-vs-css-in-js 126 | 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. 127 | 128 | - **CSS-in-JS comparisons** 129 | https://github.com/MicheleBertoli/css-in-js 130 | A repository that contains implementation comparisons between many different CSS-in-JS libraries 131 | 132 | - **Comparing CSS in JS Solutions** 133 | http://ludovf.net/blog/comparing-css-in-js-solutions/ 134 | An overview of the various CSS-in-JS libraries and how their implementations differ. 135 | 136 | - **CSS in React Comparison Examples** 137 | https://github.com/joeshub/css-in-react 138 | A repo that demonstrates the basics of several different React CSS approaches and libraries. 139 | 140 | - **Should I use CSS-in-JS with React?** 141 | https://reactarmory.com/answers/should-i-use-css-in-js 142 | Some opinionated thoughts on the pros and cons of using CSS-in-JS approaches, including concerns about possibly security issues. 143 | 144 | - **Writing a CSS-in-JS Library from Scratch** 145 | https://medium.com/@tkh44/writing-a-css-in-js-library-from-scratch-96cd23a017b4 146 | The author of the Emotion library shows how to build a simple CSS-in-JS library, to help illustrate how they work. 147 | 148 | - **CSS-in-JS** 149 | https://gist.github.com/threepointone/9f87907a91ec6cbcd376dded7811eb31 150 | 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. 151 | 152 | 153 | - **Things to consider when choosing a React styling framework** 154 | http://jsramblings.com/2017/10/17/things-to-consider-when-choosing-a-react-styling-framework.html 155 | Helpful suggestions for things to compare between different styling libraries, such as how the styles are applied, syntax used, and feature support 156 | 157 | - **Substyle: Build Styling Agnostic Components for React** 158 | https://survivejs.com/blog/substyle-interview/ 159 | An interview with the author of Substyle, a utility that allows component library authors to enable customization of components via several different style-related props. 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 | - **Styled-Components Nitty-Gritty** 209 | https://www.elpassion.com/blog/styled-components-nitty-gritty 210 | An introduction to how to use the styled-components library, the problems that it solves, and how it works internally 211 | 212 | - **A Field Guide to CSS-in-JS** 213 | https://medium.com/@wonderboymusic/a-field-guide-to-css-in-js-f7cbd9ed79a7 214 | Looks at how to use the styled-components and emotion libraries, including syntax, theming, variables, classname generation, and more. 215 | 216 | - **CSS-in-JS Roundup: Styling React Components** 217 | https://alligator.io/react/css-in-js-roundup-styling-react-components/ 218 | A high-level comparison of 15 different CSS-in-JS libraries 219 | 220 | - **Migrating to styled-components cheatsheet** 221 | http://jsramblings.com/2017/10/29/migrating-to-styled-components-cheatsheet.html 222 | Some helpful tips for moving a project from vanilla CSS to the styled-components library 223 | 224 | 225 | #### Techniques and Examples 226 | 227 | - **How to build animated microinteractions in React** 228 | https://medium.freecodecamp.com/how-to-build-animated-microinteractions-in-react-aab1cb9fe7c8 229 | Examples of various ways to create small animations to give feedback as the user interacts with components 230 | 231 | - **Create That Component** 232 | https://medium.com/taitounited/create-that-component-1-7a2267bc2833 233 | https://medium.com/taitounited/create-that-component-2-f6e6ba2e6b5a 234 | https://medium.com/taitounited/create-that-component-3-25f1f722cead 235 | A series of examples that build components for assorted concepts like toggle switches, ripple effects, and toasts, using libraries like styled-components. 236 | 237 | -------------------------------------------------------------------------------- /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 | - **SVG Patterns in React - Build a Twitter Wall** 13 | https://www.robinwieruch.de/react-svg-patterns/ 14 | A tutorial that covers several aspects of using SVG in React, and demonstrates how to use the svg-patterns library to generate patterend backgrounds. 15 | 16 | - **Translating React Apps** 17 | https://tech.gadventures.com/translating-react-apps-99dede52d924 18 | Discusses how to use the React-Intl library to add translations to a React app 19 | 20 | - **Lessons from migrating a large codebase to React 16** 21 | https://blog.discordapp.com/lessons-from-migrating-a-large-codebase-to-react-16-e60e49102aa6 22 | 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. 23 | 24 | - **Robust React User Interfaces with Finite State Machines** 25 | https://css-tricks.com/robust-react-user-interfaces-with-finite-state-machines/ 26 | 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. 27 | 28 | - **The Complete Firebase in React Authentication Tutorial** 29 | https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial/ 30 | A comprehensive article that covers setting up a React app that uses React Router for handling routes, and Firebase for authentication and user management. 31 | 32 | - **Don't Over React! Rendering Binary Data** 33 | https://www.bignerdranch.com/blog/dont-over-react/ 34 | Useful approaches for handling file blobs in a React app 35 | 36 | - **Global Component Registration** 37 | http://dylanpaulus.com/reactjs/2017/12/08/global-component-registration/ 38 | An example of extending the standard approach for looking up component types at runtime, by allowing the lookup table to be modified. 39 | 40 | - **Getting Started with Web Accessibility** 41 | https://medium.com/@emilymears/getting-started-with-web-accessibility-in-react-9e591fdb0d52 42 | An excellent look at ways to handle accessibility in React, including use of refs for focus, ARIA attributes, helpful tools, and more. 43 | 44 | 45 | #### Security 46 | 47 | - **Exploiting Script Injection Flaws in ReactJS Apps** 48 | https://medium.com/dailyjs/exploiting-script-injection-flaws-in-reactjs-883fb1fe36c1 49 | 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. 50 | 51 | - **How can I securely use CSS-in-JS with React?** 52 | https://reactarmory.com/answers/how-can-i-use-css-in-js-securely 53 | Covers several potential security holes that can result from allowing user input into CSS-in-JS libraries, with examples. 54 | 55 | 56 | #### JSX and Events 57 | 58 | - **Is JSX Still Relevant? Are there other options?** 59 | https://goshakkk.name/jsx-relevancy-options/ 60 | 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. 61 | 62 | - **React Without JSX** 63 | https://mockbrian.com/blog/2017/08/11/react-without-jsx/ 64 | 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. 65 | 66 | - **Integrating React and Redux Into an Existing Backbone App** 67 | http://blog.isquaredsoftware.com/2017/07/react-redux-backbone-integration/ 68 | 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`. 69 | 70 | - **How I learned to stop worrying and love the JSX** 71 | http://jamesknelson.com/learned-stop-worrying-love-jsx/ 72 | 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. 73 | 74 | - **React without a build step** 75 | https://medium.com/@alexkrolick/writing-react-components-for-3rd-party-embedding-50331c18e26 76 | 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. 77 | 78 | - **9 Things You Should Know About JSX** 79 | https://dev.to/sarah_chima/9-things-you-should-know-about-jsx-3bm 80 | A useful explanation of what JSX syntax is, how it works, and and how to use it. 81 | 82 | - **How the JSX Transform Works** 83 | https://jaketrent.com/post/how-jsx-transform-works/ 84 | A helpful explanation of how JSX tags are transformed into React elements, with example snippets 85 | 86 | - **JSX In Depth - an interactive tutorial** 87 | http://blog.klipse.tech/javascript/2016/12/14/jsx.html 88 | An interactive version of the "JSX in Depth" tutorial from the React docs 89 | 90 | - **Events in React** 91 | https://www.kirupa.com/react/events_in_react.htm 92 | An introduction to React's event handling system, including useful tips and some gotchas 93 | 94 | - **React events in depth** 95 | https://www.youtube.com/watch?v=dRo_egw7tBc 96 | A video chat between Kent C Dodds, Dan Abramov, and Ben Alpert, discussing how events work in React 97 | 98 | - **Using React Fragments for the first time** 99 | https://www.jackfranklin.co.uk/blog/react-fragments/ 100 | Describes the Fragment "component" and syntax introduced in React 16.2, the problems Fragments solve, and how to use them. 101 | 102 | 103 | #### Debugging and Error Handling 104 | 105 | - **Intro to Debugging React Applications** 106 | https://medium.com/@baphemot/intro-to-debugging-reactjs-applications-67cf7a50b3dd 107 | 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. 108 | 109 | - **React v16 beta is out, suddenly everyone needs to catch UI errors** 110 | https://medium.com/shiftgig-blog/react-v16-beta-is-out-suddenly-everyone-needs-to-catch-ui-errors-37c8c4b527e9 111 | 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. 112 | 113 | - **Catching exceptions using Higher Order Components in React 16** 114 | https://codeburst.io/catching-exceptions-using-higher-order-components-in-react-16-b8a401853a10 115 | https://twitter.com/dan_abramov/status/890716011133100032 116 | 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 | https://github.com/pshrmn/notes/blob/master/redux/redux-middleware.md 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 | #### Middleware Techniques 58 | 59 | - **Two Weird Tricks with Redux** 60 | http://jlongster.com/Two-Weird-Tricks-with-Redux 61 | https://news.ycombinator.com/item?id=11488633 62 | 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. 63 | 64 | - **Connecting Redux to your API** 65 | https://blog.boldlisting.com/connecting-redux-to-your-api-eac51ad9ff89 66 | Describes imperative and declarative approaches to managing request data and metadata 67 | 68 | - **Fix Ugly JSON Api Responses With Redux Middleware** 69 | http://blog.benwiley.org/fix-json-responses-redux-middleware/ 70 | Sets up a sample project that requests JSON data, then shows how to use some custom middleware to transform the response. 71 | 72 | - **You Aren't Using Redux Middleware Enough** 73 | https://medium.com/@jacobp100/you-arent-using-redux-middleware-enough-94ffe991e6 74 | Suggestions for using middleware to solve a number of interesting use cases 75 | 76 | - **Defining user on-boarding flows with Redux middleware** 77 | https://medium.com/@JohnRandom/defining-user-on-boarding-flows-with-redux-middlewares-217885acbafc 78 | Demonstrates implementing an on-boarding feature by implementing a Redux middleware to track user behavior and dispatch actions in response. 79 | 80 | - **"Do I always need to return a value from a Redux middleware?"** 81 | https://stackoverflow.com/questions/45964129/do-i-always-need-to-return-a-value-from-a-redux-middleware/45964310#45964310 82 | My answer to a question about whether middleware should do `return next(action)`. Short version: yes, always, unless you want to alter expected behavior. 83 | 84 | - **Practical Advanced Redux Webinar: Redux Middleware** 85 | https://www.youtube.com/watch?v=DqWiuvuK_78 86 | A recorded screenshare livestream that discusses the usefulness of Redux middleware, and demonstrates building middleware for fetching data, logging, and throttling. 87 | 88 | - **Redux: Drawing the Lines between Actions and Middleware** 89 | https://michaelwashburnjr.com/redux-actions-middleware/ 90 | Compares examples of behavior between thunks and middleware, and discusses when you might want to implement behavior in a middleware. 91 | 92 | - **Redux Middleware and Enhancers** 93 | https://chariotsolutions.com/blog/post/redux-middleware-and-enhancers-getting-redux-to-log-debug-and-process-async-work/ 94 | Describes some common Redux middleware and their uses, as well as how to set up the Redux DevTools enhancer for debugging. 95 | 96 | - **Redux analytics, without middleware** 97 | http://web.archive.org/web/20170617100422/http://blog.reactandbethankful.com/posts/2016/09/27/redux-analytics-without-middleware/ 98 | 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. 99 | 100 | - **How to use Redux middleware to decouple AJAX call?** 101 | http://www.albertgao.xyz/2017/12/07/how-to-use-redux-middleware-to-decouple-ajax-call/ 102 | Demonstrates writing a middleware that accepts a plain object description of an HTTP request, and executes the request 103 | 104 | - **Custom Form Validation in React with Redux Middleware** 105 | http://tech.tunecore.com/redux-form-validation-middleware 106 | A detailed example of how middleware can be used to implement some complex form validation logic in a centralized way. 107 | -------------------------------------------------------------------------------- /redux-ui-management.md: -------------------------------------------------------------------------------- 1 | ### Redux UI Management 2 | 3 | #### UI and Widget Implementations 4 | 5 | - **"How can I display a modal dialog in Redux?"** 6 | http://stackoverflow.com/questions/35623656/how-can-i-display-a-modal-dialog-in-redux-that-performs-asynchronous-actions/35641680 7 | 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. 8 | 9 | - **Creating Reusable Generic Modals in React and Redux** 10 | http://blog.isquaredsoftware.com/2016/11/posts-on-packtpub-generic-redux-modals-and-building-better-bundles/ 11 | https://www.reddit.com/r/reactjs/comments/4wjmme/implement_a_confirm_modal_using_react_redux/d68ajcw?context=3 12 | 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.) 13 | 14 | - **Implement a confirm modal using React & Redux** 15 | https://blog.jslancer.com/blog/2016/08/07/implement-a-confirm-modal-using-react-redux/ 16 | Demonstrates wrapping up an existing modal library to be controlled by Redux actions 17 | 18 | - **Implementing Search/Filter on a list in React and Redux** 19 | https://medium.com/@yaoxiao1222/implementing-search-filter-a-list-on-redux-react-bb5de8d0a3ad 20 | 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. 21 | 22 | - **Creating Reusable Generic Modal Dialogs with React and Redux** 23 | https://www.packtpub.com/books/content/creating-reusable-generic-modals-react-and-redux 24 | A quick look at how to get results from generic dialogs like a ColorPicker, while keeping your Redux state serializable and component structure decoupled. 25 | 26 | - **Animating with React, Redux, and D3** 27 | https://medium.com/swizec-a-geek-with-a-hat/animating-with-react-redux-and-d3-80852153a25b 28 | Explanation and examples of drawing animated particles using D3 to calculate new positions, Redux to store the state, and React to render them. 29 | 30 | - **Open Sourcing a Redux Component** 31 | https://medium.com/@itsBenCripps/open-sourcing-a-redux-component-bb82f260ff62 32 | 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. 33 | 34 | - **A Redux-Saga Implementation of Modal Confirmation Dialogs in React** 35 | https://decembersoft.com/posts/a-redux-saga-implementation-of-modal-confirmation-dialogs-in-react-redux/ 36 | Some examples of using sagas for controlling flow of async calls and dialog management 37 | 38 | - **Practical Recursion: Implementing a File Item Tree View in React & Electron** 39 | https://codeburst.io/practical-recursion-implementing-a-file-tree-view-in-react-electron-af62e7b46d26?gi=da3b8e9bf9ee 40 | Demonstrates implementing a tree view component that shows folder structure read from the filesystem, and managing the visibility of tree nodes in Redux 41 | 42 | - **How To Manage UI State with Redux** 43 | https://codeburst.io/how-to-manage-ui-state-with-redux-24deb6cf0d57 44 | 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. 45 | 46 | - **Introduce Redux local state to your React App** 47 | https://medium.com/@tangbenze/introduce-redux-local-state-to-your-react-app-9f96f18d4f35 48 | Demonstrates setup and use of a addon library to manage scoped actions, reducers, and connections for isolated component state. 49 | 50 | - **Using react-redux-set-local** 51 | https://www.andrewfong.com/blog/2017/07/03/react-redux-set-local/ 52 | 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. 53 | 54 | - **Making Toast from Scratch in React-Redux** 55 | https://spin.atomicobject.com/2017/07/12/react-redux-toast/ 56 | A short tutorial that shows how to build your own "toast" notifications in React+Redux, with a link to the resulting implementation. 57 | 58 | - **Toast notification system in a React/Redux application** 59 | https://www.deployhq.com/blog/toast-notification-system-in-a-react-redux-application 60 | The Natterly team walks through how they built a Redux-connected toast notification implementation. 61 | 62 | - **A Functional Canvas Approach with Redux** 63 | https://medium.com/@peterxjang/a-functional-canvas-approach-with-redux-ce59a369241b 64 | https://medium.com/@peterxjang/a-functional-canvas-approach-with-redux-bab357d6c33c 65 | Some simple examples of how to use Redux and vanilla JS canvas code to draw canvas-based UIs with minimal dependencies. 66 | 67 | - **React/Redux with Mapbox** 68 | https://medium.com/@mcculloughrt/react-redux-with-mapbox-78fa3767211e 69 | Useful techniques for driving the appearance and behavior of a Mapbox-based geospatial app from React and Redux. 70 | 71 | - **React/Redux: Modals and Dialogs** 72 | https://medium.com/front-end-hacking/react-redux-no-need-to-component-state-for-modals-73871157b52e 73 | Discussion of the pros and cons of powering modals via Redux, with examples of how to show them using React 16's Portals. 74 | 75 | - **Handling Keyboard Commands with Redux** 76 | https://medium.com/@sandropadin/handling-keyboard-commands-with-redux-67584decb3ff 77 | Discussion of an approach for managing keybard interaction in a React+Redux app, with an interactive embedded example app on CodeSandbox 78 | 79 | - **Modular, fast, small: how we built a server-rendered IDE** 80 | https://repl.it/site/blog/ide 81 | The repl.it team describes how they built a Redux-based plugin architecture that handles window management and layout, with plugins able to interact via Redux actions. 82 | 83 | #### Redux and Forms 84 | 85 | - **Practical Redux, Part 7: Form Change Handling, Data Editing, and Feature Reducers** 86 | http://blog.isquaredsoftware.com/2017/01/practical-redux-part-7-forms-editing-reducers/ 87 | Demonstrates how to use a custom form wrapper component to buffer input change events 88 | 89 | - **Practical Redux, Part 8: Form Draft Data Management** 90 | http://blog.isquaredsoftware.com/2017/01/practical-redux-part-8-form-draft-data-management/ 91 | Discusses how to implement logic to handle "draft/work-in-progress" data while editing items 92 | 93 | - **Abstracted Form State with Redux-Form** 94 | https://speakerdeck.com/erikras/abstracted-form-state-with-redux-form 95 | 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. 96 | 97 | - **React, Redux, and Redux-Form** 98 | https://jokeyrhyme.github.io/2016/06/27/react-redux-redux-form.html 99 | Thoughts on the merits of using the Redux-Form library 100 | 101 | - **Conversational sign-up form UI with React and Redux** 102 | https://web.archive.org/web/20190715044522/http://jsforallof.us/2016/09/08/conversational-sign-up-form-ui-with-react-and-redux/ 103 | An example of form management with Redux 104 | 105 | - **Should you store your form state in Redux?** 106 | http://goshakkk.name/should-i-put-form-state-into-redux/ 107 | Thoughts on the tradeoffs involved in storing form data in component state vs Redux, and different potential use cases. 108 | 109 | - **Writing maintainable forms with Redux** 110 | https://medium.com/@SBoudrias/writing-maintainable-forms-with-redux-2ef30b5d0e35 111 | Some basic examples for handling validation, loading initial data, and change tracking in forms. 112 | 113 | - **Using forms in React-Redux: Tips and Tricks** 114 | https://medium.com/@royisch/using-forms-in-react-redux-tips-and-tricks-48ad9c7522f6 115 | Some helpful suggestions for using Redux-Form to manage forms in a Redux app 116 | 117 | - **Dealing with forms in React/Redux - A simple pattern** 118 | https://medium.com/@jonasjensen/dealing-with-forms-in-react-redux-a-simple-pattern-7b94b393eb26 119 | Helpful examples for writing some simple generic form-handling reducers and action creators 120 | 121 | - **Here's what you can do to make migrating your forms to Redux easier in the future** 122 | https://goshakkk.name/prep-forms-for-redux/ 123 | Simple but useful advice on extracting form logic as reducer functions inside of classes 124 | 125 | - **Redux Form Validation Tutorial Example From Scratch** 126 | https://appdividend.com/2017/11/05/redux-form-validation-tutorial-example/ 127 | A tutorial that demonstrates setting up a Redux app that uses Redux-Form, and adding validation logic to that form. 128 | -------------------------------------------------------------------------------- /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 | 11 | #### Angular 12 | 13 | - **An Adventure in Redux: building redux-adventure** 14 | http://csharperimage.jeremylikness.com/2016/07/an-adventure-in-redux-building-redux.html 15 | Builds a small randomized dungeon game using Redux, TypeScript, and Angular 2 16 | 17 | - **Building Redux in TypeScript with Angular 2** 18 | http://blog.ng-book.com/introduction-to-redux-with-typescript-and-angular-2/ 19 | An extended tutorial that builds up a mini-Redux in TypeScript, then transitions to building an application 20 | 21 | - **Scalable Single-Page Application Architecture with Redux and Angular 2** 22 | http://blog.mgechev.com/2016/04/10/scalable-javascript-single-page-app-angular2-application-architecture/ 23 | An in-depth article covering how to architect an application using Redux, Angular 2, and RxJS. 24 | 25 | - **Build a Better Angular 2 Application with Redux and ngrx** 26 | http://onehungrymind.com/build-better-angular-2-application-redux-ngrx/ 27 | 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. 28 | 29 | - **Real World Angular** 30 | https://blog.realworldfullstack.io/real-world-angular-part-4-state-of-my-spa-10bf90c5a15 31 | https://blog.realworldfullstack.io/real-world-angular-part-5-light-my-fire-34b0bcb351a8 32 | An Angular 2 tutorial that builds an app using Redux and Firebase 33 | 34 | - **Managing State in Angular with ngrx/store** 35 | https://auth0.com/blog/managing-state-in-angular-with-ngrx-store/ 36 | A tutorial that demonstrates use of the ngrx/store variation of Redux as part of an Angular app. 37 | 38 | - **Web app architecture based on Redux** 39 | http://devblog.ztp.pt/web-app-architecture-based-on-redux/ 40 | https://medium.com/@akaztp/case-study-pt-2-implementing-redux-on-angular-9e79cd4faa37 41 | 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. 42 | 43 | - **NgRx Antipatterns** 44 | https://brianflove.com/2017-11-01/ngrx-anti-patterns/ 45 | Examples of some ways to improve poor NgRx usage patterns. 46 | 47 | - **Getting started with Angular and Redux** 48 | https://damienbod.com/2017/09/07/getting-started-with-angular-and-redux/ 49 | A tutorial that covers setting up an Angular app that uses NgRx for state management. Recently updated to work with Angular 5. 50 | 51 | - **Learn Redux in Angular with NgRx Store** 52 | https://malcoded.com/posts/angular-ngrx-guide 53 | 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. 54 | 55 | - **Ultimate Angular: NGRX Store + Effects** 56 | https://ultimateangular.com/ngrx-store-effects 57 | 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. 58 | 59 | - **NGRX Store: Understanding State Selectors** 60 | https://toddmotto.com/ngrx-store-understanding-state-selectors 61 | A deep look at how selectors can be used to extract data from a store and transform it as needed by components. 62 | 63 | - **NGRX Store: Actions vs Action Creators** 64 | https://toddmotto.com/ngrx-store-actions-versus-action-creators 65 | Describes the reasons for defining actions as constants, namespacing actions, using action creator functions, and defining actions as TypeScript classes 66 | 67 | - **"ngrx/store vs angular/store"** 68 | https://www.reddit.com/r/Angular2/comments/67coeo/ngrxstore_vs_angularreduxstore/ 69 | Discussion of the differences between ngrx/store and angular/store, with a comparison from an angular/store contributor 70 | 71 | - **A Beginner's Guide to Ngrx/store** 72 | https://medium.com/stratajet-tech/a-beginners-guide-to-ngrx-store-bc2184d6d7f0 73 | Describes how ngrx/store implements the Redux pattern using RxJS, and walks through a todo app tutorial 74 | 75 | 76 | #### Ember 77 | 78 | - **Why ember redux?** 79 | http://toranbillups.com/blog/archive/2017/08/02/why-ember-redux/ 80 | The author of the ember-redux lib talks about why he likes Redux, and why he prefers using it with Ember. 81 | 82 | - **The Frontside Podcast: ember-redux and glimmer-redux** 83 | https://frontside.io/podcast/055-redux-and-ember-with-toran-billups 84 | https://frontside.io/podcast/089-glimmer-redux-with-toran-billups 85 | A pair of podcasts with the creator of ember-redux and glimmer-redux 86 | 87 | 88 | - **Setting Up Redux + Observables in an Ember App** 89 | https://medium.com/@john.sniezek/setting-up-redux-observables-in-an-ember-app-aca9dccdd152 90 | A tutorial that shows how to set up ember-redux and add redux-observable. 91 | 92 | - **Using ember-changeset with ember-redux** 93 | https://emberway.io/using-ember-changeset-with-ember-redux-200a7e46c59a 94 | Examples of using a tool called ember-changeset to handle in-progress form edits in conjunction with the ember-redux bindings. 95 | 96 | 97 | #### Aurelia 98 | 99 | - **Managing State in Aurelia: How to Use Aurelia with Redux** 100 | https://www.sitepoint.com/managing-state-aurelia-with-redux/ 101 | 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. 102 | 103 | - **Managing State in Aurelia: How to Use Aurelia with Redux** 104 | https://www.sitepoint.com/managing-state-aurelia-with-redux/ 105 | Covers setting up a standard Aurelia app, adding Redux, and use of redux-undo with the example. 106 | 107 | - **Why Aurelia and Redux is a natural and powerful combination** 108 | https://www.cognizantsoftvision.com/blog/aurelia-redux/ 109 | Thoughts on the benefits of Aurelia compared to other frameworks, and examples of how to use Redux in an Aurelia app. 110 | 111 | #### Other 112 | 113 | - **Explorations in Adapting Redux to C#** 114 | https://spin.atomicobject.com/2017/03/13/adapting-redux-c-sharp-xamarin/ 115 | An informative look at how AtomicObject has a Redux variant in C# 116 | 117 | - **Something Useless - Redux Implemented in Elixir** 118 | http://hostiledeveloper.com/2017/04/18/something-useless-redux-implemented-in-elixir.html 119 | An Elixir developor walks through implementing Redux in Elixir 120 | 121 | - **Advanced Redux in Xamarin** 122 | https://medium.com/pageup-tech/advanced-redux-in-xamarin-part-1-action-creators-19cb257093d2 123 | https://medium.com/pageup-tech/advanced-redux-in-xamarin-part-2-persistent-actions-middleware-2c1c684328a 124 | https://medium.com/pageup-tech/advanced-redux-in-xamarin-part-3-database-middleware-5dac7b5ee6ba 125 | 126 | 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. 127 | 128 | - **Coupling a Stencil TODO app with Redux** 129 | https://www.javascripttuts.com/coupling-a-stencil-todo-app-with-redux/ 130 | A tutorial that updates an existing Stencil Todo app to use Redux 131 | 132 | - **Getting started with Redux in Swift** 133 | https://medium.com/mackmobile/getting-started-with-redux-in-swift-54e00f323e2b 134 | An overview of how to use the ReSwift library as part of an iOS app. 135 | 136 | - **Cedux: Experimenting with the Redux Model in C for Managing State** 137 | https://spin.atomicobject.com/2017/11/27/redux-model-in-c-cedux/ 138 | Examples of an experimental implementation of Redux in C 139 | 140 | - **Lessons learned implementing Redux on Android** 141 | https://blog.pusher.com/lessons-learned-implementing-redux-on-android/ 142 | Recaps experiences from using a Redux-based approach in Android apps using Kotlin 143 | 144 | - **How to use Redux with Polymer** 145 | https://medium.com/@jalalio/step-1-how-to-use-redux-with-polymer-2-7bcfaee6fdb3 146 | https://medium.com/@jalalio/step-2-how-to-structure-larger-polymer-2-apps-with-redux-reselect-f588e64a191a 147 | https://medium.com/@jalalio/step-3-how-to-make-async-api-calls-in-a-polymer-2-app-using-redux-thunk-middleware-c71d596c2005 148 | A 3-part series that shows how to use the polymer-redux bindings, including basic setup, use of Reselect, and async API calls. 149 | 150 | - **Building an F# Redux Store for C# Xamarin Apps** 151 | https://thomasbandt.com/fsharp-redux-store-for-xamarin-apps 152 | Discusses why Redux's predictability is beneficial for applications in general, desired behavior for a .NET implementation of Redux, why C# is a poor choice for an implementation, and how to implement Redux using F#. -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------