From 818ae1919bb8fa68d658ab7c965175300dc49884 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Mon, 3 Jul 2017 15:42:24 -0400 Subject: [PATCH] Updates, 2017-07-03 --- boilerplates-and-starter-kits.md | 58 ++++++++++++++++++++++---- community-resources.md | 4 ++ es6-features.md | 3 ++ immutable-data.md | 6 ++- javascript-resources.md | 9 ++++ project-structure.md | 13 ++---- pros-cons-discussion.md | 17 ++++++++ react-architecture.md | 8 ++++ react-component-patterns.md | 4 ++ react-deployment.md | 11 ++++- react-implementation.md | 23 +++++++++++ react-native.md | 10 ++++- react-performance.md | 9 +++- react-redux-testing.md | 4 ++ react-routing.md | 4 ++ react-state-management.md | 4 ++ react-styling.md | 4 ++ react-tutorials.md | 71 +++++++++++++++----------------- redux-architecture.md | 19 ++++++++- redux-side-effects.md | 18 +++++++- redux-techniques.md | 12 ++++++ redux-tutorials.md | 4 ++ redux-without-react.md | 4 ++ static-typing.md | 11 +++++ webpack-advanced-techniques.md | 8 ++++ webpack-tutorials.md | 9 ++++ 26 files changed, 286 insertions(+), 61 deletions(-) diff --git a/boilerplates-and-starter-kits.md b/boilerplates-and-starter-kits.md index 3f9af83..37673a0 100644 --- a/boilerplates-and-starter-kits.md +++ b/boilerplates-and-starter-kits.md @@ -21,13 +21,6 @@ https://github.com/tstringer/react-laboratory 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. -- **Hipster Boilerplate** - https://github.com/Jordaanm/hipster-boilerplate - 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). - -- **JavaScript Stack from Scratch** - https://github.com/verekia/js-stack-from-scratch - 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. #### Full-Featured Starter Kits @@ -85,3 +78,54 @@ - **Awesome React Boilerplates** http://habd.as/awesome-react-boilerplates/ Another good curated list of boilerplates for both React and React Native + + + +#### React Project Setup + +- **Simple React Development in 2017** + https://hackernoon.com/simple-react-development-in-2017-113bd563691f + 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. + +- **Taming the React Setup** + http://developer.telerik.com/featured/taming-react-setup/ + 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). + +- **Kick-Start React Projects with Create-React-App** + https://www.sitepoint.com/create-react-app/ + Some quick tips on how to use Create-React-App to create a new React project and tweak the setup. + +- **Getting Started with React the Easy Way** + http://codeutopia.net/blog/2016/01/10/getting-started-with-react-the-easy-way/ + Shows the simplest way to load React into a web page and start using it + +- **The Minimal React Webpack Babel Setup** + https://www.robinwieruch.de/minimal-react-webpack-babel-setup/ + 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. + +- **Hipster Boilerplate** + https://github.com/Jordaanm/hipster-boilerplate + 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). + +- **JavaScript Stack from Scratch** + https://github.com/verekia/js-stack-from-scratch + 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. + +- **React Ecosystem Setup - Step-By-Step** + https://codeburst.io/react-ecosystem-setup-step-by-step-walkthrough-721ff45a7fc1 + An in-depth walkthrough that shows to to set up Webpack and Babel, and explains why each bit of configuration is needed. + +- **Always up-to-date Guide for Modern JavaScript Development** + https://mvilrokx.gitbooks.io/always-up-to-date-guide-for-modern-javascript-dev/content/ + An opinionated guide for setting up a modern JS development environment. + +- **Setup a React Environment using Webpack and Babel** + https://scotch.io/tutorials/setup-a-react-environment-using-webpack-and-babel + A tutorial that teaches how to set up a basic Webpack 2 + Babel config from scratch. + +- **Setting up a Front-End Project** + https://medium.com/@Torwori/setting-up-a-front-end-project-part-1-d7fbaaaa5e14 + https://medium.com/@Torwori/setting-up-a-front-end-project-part-2-cbbae56ffd15 + https://medium.com/@Torwori/setting-up-a-front-end-project-part-3-38f1681d310b + https://medium.com/@Torwori/setting-up-a-front-end-project-part-4-b6fe32e58e5 + An in-depth tutorial series covering setup and configuration of many tools, including Git, Webpack, Babel, ESLint, and Typescript. \ No newline at end of file diff --git a/community-resources.md b/community-resources.md index 34327c7..5288e63 100644 --- a/community-resources.md +++ b/community-resources.md @@ -63,6 +63,10 @@ https://www.reddit.com/r/reactjs/comments/5t8loz/what_are_your_top_reactreact_native_blogs_that/ Several comments listing good React-related blogs, including my own list of high-quality blogs that I subscribe to. +- **Awesome MobX** + https://github.com/mobxjs/awesome-mobx + A collection of awesome things regarding MobX. + #### People diff --git a/es6-features.md b/es6-features.md index ab97c3c..6d115ee 100644 --- a/es6-features.md +++ b/es6-features.md @@ -64,6 +64,9 @@ https://zellwk.com/blog/es6/ A great look at how several of the most useful ES6 features work, such as block scoping, arrow functions, and destructuring. +- **ES6 Katas: Learn ES6 by doing it** + http://es6katas.org/ + Sets of exercises to help you learn ES6 features and syntax. #### In-Depth Details diff --git a/immutable-data.md b/immutable-data.md index 17b066d..2a8dc3f 100644 --- a/immutable-data.md +++ b/immutable-data.md @@ -134,4 +134,8 @@ - **Practical Guide to using Immutable.js with Redux and React** https://medium.com/@fastphrase/practical-guide-to-using-immutablejs-with-redux-and-react-c5fd9c99c6b2 - A follow-up to the previous article, showing how to correctly set up and use Immutable.js with Redux \ No newline at end of file + A follow-up to the previous article, showing how to correctly set up and use Immutable.js with Redux + +- **Qim: Select from your Immutable JavaScript Cake and Update It Symmetrically Too** + https://zapier.com/engineering/qim-immutable-javascript/ + 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. \ No newline at end of file diff --git a/javascript-resources.md b/javascript-resources.md index c853789..04aaa56 100644 --- a/javascript-resources.md +++ b/javascript-resources.md @@ -45,9 +45,14 @@ While this list is primarily focused on learning React and Redux, and generally https://medium.com/@_cmdv_/i-want-to-learn-javascript-in-2015-e96cd85ad225 Extensive suggestions for resources to use when learning Javascript +- **6 Quick & Proven Tips to Help You Learn JavaScript** + https://blog.alexdevero.com/6-quick-proven-tips-learn-javascript/ + 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. + - **Array iteration methods summarized** https://gist.github.com/ljharb/58faf1cfcb4e6808f74aae4ef7944cff An explanation of all the different Array methods that loop over the array, what they do, and when they should be used + #### Tutorials, Books, and Courses @@ -94,6 +99,10 @@ While this list is primarily focused on learning React and Redux, and generally http://dmitrysoshnikov.com/ecmascript/javascript-the-core/ A dive into core concepts of how Javascript objects behave: prototypes, constructors, scopes, closures, and `this`. +- **The Modern Javascript Tutorial** + http://javascript.info/ + 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. + #### Interactive Exercises diff --git a/project-structure.md b/project-structure.md index d22b439..8bbfd62 100644 --- a/project-structure.md +++ b/project-structure.md @@ -76,7 +76,7 @@ http://noah-prince-tech-blog.ghost.io/structuring-and-organizing-the-react-components-directory/ Some useful suggestions for folder layout, folder naming, and import handling. -- **How OkCupied organizes its multi-page React App** +- **How OkCupid organizes its multi-page React App** https://tech.okcupid.com/how-okcupid-organizes-its-multi-page-react-app/ https://www.reddit.com/r/reactjs/comments/5widfg/how_okcupid_organizes_its_multipage_react_app/ The OkCupid team discusses their approach for a multi-page app, including bundles, use of the Ducks pattern, and folder structures. Some good follow-up discussion in the Reddit comments. @@ -84,13 +84,6 @@ - **React Project Structure** https://daveceddia.com/react-project-structure/ 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`. - -#### Project Setup - -- **Setting up a Front-End Project** - https://medium.com/@Torwori/setting-up-a-front-end-project-part-1-d7fbaaaa5e14 - https://medium.com/@Torwori/setting-up-a-front-end-project-part-2-cbbae56ffd15 - https://medium.com/@Torwori/setting-up-a-front-end-project-part-3-38f1681d310b - https://medium.com/@Torwori/setting-up-a-front-end-project-part-4-b6fe32e58e5 - An in-depth tutorial series covering setup and configuration of many tools, including Git, Webpack, Babel, ESLint, and Typescript. \ No newline at end of file +- **Decoupling Hierarchies for Maintainable Code** + https://medium.com/altschool-engineering/decoupling-hierarchies-for-maintainable-code-b13c24b2f047 diff --git a/pros-cons-discussion.md b/pros-cons-discussion.md index 7113ec3..eed4ad2 100644 --- a/pros-cons-discussion.md +++ b/pros-cons-discussion.md @@ -90,6 +90,18 @@ https://medium.com/@maxlynch/redux-is-the-pivotal-frontend-innovation-a406736552cb An opinionated article that says state management is even more important than components. +- **Reflections on React** + https://medium.com/@burkeholland/reflections-on-react-65d152a13d9e + A former Telerik dev gives his thoughts on the current state of the React world, including how much people like it, use of standard JS syntax like classes, the variety of UI libs, and the lack of serious enterprise-class components like data grids and schedulers. Some good discussion in the comments, too. + +- **The delight of working on a React + Redux app** + https://medium.com/dailyjs/the-delight-of-working-on-a-react-redux-app-affc22757e81 + Some interesting personal opinions on the benefits of working with React+Redux, including explicitness, traceability, and easy unit testing. + +- **Don't Blame it on React or Redux** + https://diessi.ca/blog/dont-blame-it-on-react-or-redux/ + Some short but well-written thoughts that argue in favor of React and Redux's "do it yourself" / "don't prescribe how to solve everything" approach, and that blaming them for bad app design or boilerplate is wrong. + #### Comment Threads and Discussions @@ -217,6 +229,11 @@ similar structures in ClojureScript. https://www.reddit.com/r/javascript/comments/5wixxc/reactredux_or_angular_2_better_for_big_enterprise/ Some good discussion on what "enterprise" means, and the relative merits of various frameworks for building enterprise apps. +- **"Redux is overused. Use setState first unless you know why you need Redux"** + https://twitter.com/_jayphelps/status/846226930416345088 + Jay Phelps, author of redux-observable, starts a long and involved Twitter thread about when it's appropriate to use Redux - use cases, app sizes, and reasons. Lots of interesting opinions. + + #### React's PATENTS License - **Facebook Open Source License FAQ** diff --git a/react-architecture.md b/react-architecture.md index 29593bc..8c59381 100644 --- a/react-architecture.md +++ b/react-architecture.md @@ -106,6 +106,10 @@ - **Thinking in React** https://www.codementor.io/radubrehar/thinking-in-react-8duata34n Some quick thoughts on how React's rendering approach can be applied universally, how it simplifies dealing with state transitions, and how its API helps devs build UIs naturally. + +- **Front End Center: Single-Responsibility Components: Object-Oriented Design in React** + https://youtu.be/pSdp92Up8O8 + An excellent screencast that discusses how the "Single Responsibility Principle" can be applied to organizing and designing React components. #### React Best Practices @@ -232,6 +236,10 @@ https://medium.com/dailyjs/techniques-for-decomposing-react-components-e8a1081ef5da Three useful techniques for splitting up components: splitting render methods, passing React elements as props, and extracting higher-order components. +- **How to become a more productive React developer** + https://dev.to/karljakoblind/how-to-become-a-more-productive-react-developer + Quick suggestions for useful tools that increase productivity, including Prettier for formatting, ESLint for error checking, the React and Redux DevTools for debugging, and React-Hot-Loader for faster edits. + #### React Architecture diff --git a/react-component-patterns.md b/react-component-patterns.md index 58da9b0..0add817 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -433,6 +433,10 @@ https://medium.com/@danparkk/react-modals-scalable-customizable-neat-components-f2088d60f3d3 An extended discussion of what concepts are involved in creating modals in web pages, why this can become complex, and how to implement them in a scalable way using React and Redux. +- **Tasks and Portals in React** + https://medium.com/@MoneyhubEnterpr/tasks-and-portals-in-react-1df2438cdebb + Describes how MoneyHub implemented modal dialogs with wizard-like workflows that tie together multiple screens, using a combination of container components and portals. + #### Composing Components with Functional Programming diff --git a/react-deployment.md b/react-deployment.md index 891a2b5..dad90f9 100644 --- a/react-deployment.md +++ b/react-deployment.md @@ -27,4 +27,13 @@ - **From React to an Electron app ready for production** https://medium.com/@kitze/%EF%B8%8F-from-react-to-an-electron-app-ready-for-production-a0468ecb1da3 - Walks through the basics of configuring a Create-React-App-based Electron app and building it for production. \ No newline at end of file + Walks through the basics of configuring a Create-React-App-based Electron app and building it for production. + +- **React with Any Backend** + http://andrewhfarmer.com/react-with-any-backend/ + Some short discussion and suggestions for project structure and deployment steps when building a React app that talks to a non-Javascript backend server. + +- **Building a Full-Stack App with Serverless and React** + http://serverless-stack.com/ + 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. + \ No newline at end of file diff --git a/react-implementation.md b/react-implementation.md index 6e7a732..ada3ca1 100644 --- a/react-implementation.md +++ b/react-implementation.md @@ -30,6 +30,25 @@ https://tylermcginnis.com/react-elements-vs-react-components/ An explanation of how elements represent DOM nodes, what `createElement` does, and how components and rendering relate to elements + +#### JSX and Events + +- **How the JSX Transform Works** + https://jaketrent.com/post/how-jsx-transform-works/ + A helpful explanation of how JSX tags are transformed into React elements, with example snippets + +- **JSX In Depth - an interactive tutorial** + http://blog.klipse.tech/javascript/2016/12/14/jsx.html + An interactive version of the "JSX in Depth" tutorial from the React docs + +- **Events in React** + https://www.kirupa.com/react/events_in_react.htm + An introduction to React's event handling system, including useful tips and some gotchas + +- **React events in depth** + https://www.youtube.com/watch?v=dRo_egw7tBc + A video chat between Kent C Dodds, Dan Abramov, and Ben Alpert, discussing how events work in React + #### Miniature React Implementations @@ -142,6 +161,10 @@ - **Preact: Into the void 0** https://youtu.be/LY6y3HbDVmg 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. + +- **Under the hood: ReactJS** + https://bogdan-lyashenko.github.io/Under-the-hood-ReactJS/ + An incredibly detailed walkthrough of React's entire codebase and execution flow, with many diagrams and flowcharts illustrating things. Very impressive. #### React Fiber diff --git a/react-native.md b/react-native.md index 531d538..6ed7cbc 100644 --- a/react-native.md +++ b/react-native.md @@ -75,4 +75,12 @@ - **Where does authentication fit in a React Native app?** https://goshakkk.name/auth-in-react-native-apps/ - Some quick thoughts on what authentication involves and how to handle it in an RN app \ No newline at end of file + Some quick thoughts on what authentication involves and how to handle it in an RN app + +- **The building blocks of React Native animations** + https://goshakkk.name/react-native-animated-building-blocks/ + 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. + +- **6 Tips You Want to Know about React Native Performance** + https://www.simplytechnologies.net/blog/2017/6/6/6-tips-you-want-to-know-about-react-native-performance + Several useful suggestions for improving RN performance, including RN-specific suggestions like using FlatList instead of ListView, and pushing animations into native code. \ No newline at end of file diff --git a/react-performance.md b/react-performance.md index 4bc2381..98651f9 100644 --- a/react-performance.md +++ b/react-performance.md @@ -93,8 +93,9 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) Discussion and examples of using the "virtualization" technique to only render list components that are currently in view. - **Creating more efficient React views with windowing** - https://bvaughn.github.io/connect-tech-2016/#/ - An excellent slideshow on performance topics from the author of the React-Virtualized library. Covers sources of slowness, ways to avoid re-renders, and a deep look at "windowing/virtualization" for high-performance lists. + https://bvaughn.github.io/forward-js-2017/#/ + https://youtu.be/t4tuhg7b50I + An excellent talk on performance topics from Brian Vaughn, a React core team member and author of the React-Virtualized library. Covers sources of slowness, ways to avoid re-renders, and a deep look at "windowing/virtualization" for high-performance lists. - **React Component Profiling** https://blog.yld.io/2016/11/25/react-component-profiling/ @@ -184,6 +185,10 @@ Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md) https://hackernoon.com/improving-first-time-load-of-a-production-react-app-part-1-of-2-e7494a7c7ab0 A detailed look at the various approaches used by UrbanClap to improve their load time, including file chunking, on-demand loading, dropping non-critical libraries, and more +- **Simple Pattern for Asynchronously Loading React Components** + https://mackness.github.io/react/patterns/2017/03/20/simple-pattern-for-asynchronously-loading-react-components.html + A quick example of using dynamic importing to lazy-load React components + #### Immutable Data diff --git a/react-redux-testing.md b/react-redux-testing.md index ac1ea0e..e858f4d 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -206,6 +206,10 @@ - **Redux Testing Step by Step: A simple Methodology for Testing Business Logic** https://hackernoon.com/redux-testing-step-by-step-a-simple-methodology-for-testing-business-logic-8901670756ce An excellent article by Tal Kol, describing how different types of tests fit together, the different kinds of Redux code that need to be tested, and how to write tests for each. + +- **TDDing React + Redux** + http://engineering.pivotal.io/post/tdding-react-and-redux/ + Helpful examples of patterns for testing various parts of a React+Redux app. diff --git a/react-routing.md b/react-routing.md index b7cdefd..712fc87 100644 --- a/react-routing.md +++ b/react-routing.md @@ -31,6 +31,10 @@ https://hackernoon.com/routing-in-react-the-uncomplicated-way-b2c5ffaee997 Examples of how to implement a custom routing approach, with minimal external dependencies. +- **Build your own React Router v4** + https://tylermcginnis.com/build-your-own-react-router-v4/ + 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. + #### Routing with Redux diff --git a/react-state-management.md b/react-state-management.md index 242cbcf..1a7d46a 100644 --- a/react-state-management.md +++ b/react-state-management.md @@ -58,6 +58,10 @@ - **Understanding State and Props in React** https://hackernoon.com/understanding-state-and-props-in-react-94bc09232b9c A helpful explanation of the difference between "props" and "state". + +- **Local Storage in React** + https://www.robinwieruch.de/local-storage-react/ + Demonstrates how to persist state in React using local storage, how to use it as a cache, and how to make it expire. #### Using `setState` diff --git a/react-styling.md b/react-styling.md index f8bd793..c52c1ce 100644 --- a/react-styling.md +++ b/react-styling.md @@ -134,6 +134,10 @@ https://medium.com/@steida/css-in-js-the-argument-refined-471c7eb83955 The author of the Este.js boilerplate describes his investigation of various React styling libraries, and how he ended up building his own +- **Styled-Components in Action** + https://medium.com/@lvarayut/styled-components-in-action-723852f2a93d + A tutorial that walks through the main goals and concepts of Styled-Components, with examples + #### Techniques and Examples diff --git a/react-tutorials.md b/react-tutorials.md index 5564477..b9d8f3e 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -16,6 +16,9 @@ https://www.fullstackreact.com/30-days-of-react/ A tutorial series that walks you through how to use React, from the ground up, in 30 bite-size articles covering everything from "What is React?" to data management to testing and deployment. +- **Learn React From Your Browser: Introducing React** + https://reactarmory.com/guides/learn-react-in-browser-with-animated-fractal/introducing-react An excellent tutorial that teaches React concepts from basic principles without buzzwords or build tools, using interactive editable examples. (This is a rewritten and improved version of the "Learn Raw React" tutorial.) + - **Learn Raw React** http://jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webpack/ A ground-up React tutorial that leaves out any other related "modern" technologies, Very recommended if you want to skip the buzzwords and acronyms. @@ -104,22 +107,10 @@ https://docs.google.com/presentation/d/19DaabQG8CB4INKGpaHao0hIXcB7zmETg4IHOZkF7MPM A slideshow from Lee Byron, one of React's early team members, giving an overview of what React is, how it works, and how it can fit into applications. -- **Events in React** - https://www.kirupa.com/react/events_in_react.htm - An introduction to React's event handling system, including useful tips and some gotchas - - **React 101: Condensed** http://erikaybar.name/react-101-medium-and-slides/ Links to an HTML slideshow and accompanying blog post that introduce just enough info to give you a taste of what React is about. -- **JSX In Depth - an interactive tutorial** - http://blog.klipse.tech/javascript/2016/12/14/jsx.html - An interactive version of the "JSX in Depth" tutorial from the React docs - -- **React events in depth** - https://www.youtube.com/watch?v=dRo_egw7tBc - A video chat between Kent C Dodds, Dan Abramov, and Ben Alpert, discussing how events work in React - - **React by Example** https://medium.com/front-end-hacking/react-by-example-part-1-76d3e2137cf4 https://medium.com/front-end-hacking/react-by-example-part-2-340582c6f552 @@ -130,32 +121,19 @@ https://medium.com/@johntucker_48673/react-by-example-part-7-8dc97b57f668 A multi-part series that illustrates core React concepts via a series of small example repos, with explanations of the source and concepts in the articles. - -#### React Project Setup +- **React.js for the Visual Learner** + https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-1-what-is-this-all-about-a0d28cfd33c6 + https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-2-what-is-react-and-why-is-it-cool-d1f9bac69a63 + https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-3-building-our-houses-295c43304b18 + https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-4-our-first-village-8b44427d4762 + https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-5-additions-to-our-houses-7e67ed97b62b + https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-6-building-our-first-project-5429f1afde98 + https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-7-building-our-first-user-interface-c61e9a22be2f + https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-8-implementing-react-router-6109671db576 + https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-9-chat-bot-demo-using-firebase-637445703c74 + https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-10-reacting-to-what-weve-learned-633ac18469ba + A 10-part series that explains React (and many web dev concepts) from the ground up, with simple terms and lots of metaphors. Aimed at absolute beginners. -- **Simple React Development in 2017** - https://hackernoon.com/simple-react-development-in-2017-113bd563691f - 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. - -- **Taming the React Setup** - http://developer.telerik.com/featured/taming-react-setup/ - 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). - -- **Kick-Start React Projects with Create-React-App** - https://www.sitepoint.com/create-react-app/ - Some quick tips on how to use Create-React-App to create a new React project and tweak the setup. - -- **Getting Started with React the Easy Way** - http://codeutopia.net/blog/2016/01/10/getting-started-with-react-the-easy-way/ - Shows the simplest way to load React into a web page and start using it - -- **The Minimal React Webpack Babel Setup** - https://www.robinwieruch.de/minimal-react-webpack-babel-setup/ - 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. - -- **How to get Create-React-App to work with your API** - https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/ - An example of how to set up a server to work with Create-React-App #### React Concept Overviews @@ -337,6 +315,25 @@ https://www.robinwieruch.de/react-express-stripe-payment/ Demonstrates building a small app that handles payment information using the Stripe service +- **Let's Learn: Higher Order Components and Websockets** + https://medium.com/let-s-learn/lets-learn-higher-order-components-and-websockets-83a18d36c0d1 Examples that show how to create reusable components that manage a websocket connection and subscriptions to specific events. + +- **Make Your Own Charts in React Without a Charting Library** + https://kyleshevlin.com/make-your-own-charts-in-react-without-a-charting-library-part-1/ + A series that demonstrates building your own chart rendering components. + +- **Intro to React Workshop** + https://github.com/ericvicenti/intro-to-react + An hour-long workshop originally developed for Facebook's F8 developer conference. Includes a workshop video and a follow-along guide to building a simple React app. + +- **Building Tesla's Battery Range Calculator with React** + https://medium.freecodecamp.org/building-teslas-battery-range-calculator-with-react-part-1-2cb7abd8c1ee + A detailed guided walkthrough for building a React version of Tesla's battery range calculator application. Includes lots of code samples, and instructions for deploying a working version of the app. + +- **How to Build Free-Hand Drawing using React** + https://pspdfkit.com/blog/2017/how-to-build-free-hand-drawing-using-react/ + Demonstrates building a component that listens to mouse events, saves the coordinates, and draws the resulting lines using SVG. + #### Paid Courses and Books diff --git a/redux-architecture.md b/redux-architecture.md index 47b48f6..70c168b 100644 --- a/redux-architecture.md +++ b/redux-architecture.md @@ -240,6 +240,18 @@ - **Getting started in React with Redux** https://medium.com/@simonhfrost/getting-started-in-react-with-redux-8b2b42b66dee Some quick tips for structuring a Redux app, including several related to organizing state. + +- **Notes from my first React + Redux project** + https://medium.com/audelabs/notes-from-my-first-react-redux-project-3f799beeb140 + A recap of how the author built a front end for a complex online payment site. Doesn't really have specific suggestions, but it's well written and serves as a useful description of the common libraries and tools in a React+Redux app and how they fit together. + +- **Journey of a Thousand Ducks** + https://tech.iheart.com/video-journey-of-a-thousand-ducks-f0bb1a9b982c + Devs from the iHeartRadio web team describe how they have approached refactoring their React app with homegrown state management to use Redux. + +- **React+Redux: Tips and Best Practices for Clean, Reliable, & Maintainable Code** https://speakerdeck.com/goopscoop/react-plus-redux-tips-and-best-practices-for-clean-reliable-and-scalable-code + An excellent slideshow with a wide variety of tips and suggestions, including keeping action creators simple and data manipulation in reducers, abstracting away API calls, avoiding spreading props, and more. + #### Encapsulation and Reusability @@ -330,6 +342,7 @@ Discussion of ways to structure reducers, selectors, and other logic into reusable features + #### Variations on Redux Architectures - **Redux Saga in Action** @@ -386,4 +399,8 @@ - **Scaling Redux for real-life applications** https://hackernoon.com/scaling-redux-for-real-life-applications-be18c731a54d - Describes a variation of the "ducks" structure that divides code into "basic concepts" that contain app state and minimal logic, and "container concepts" that contain minimal data and implement most application logic. \ No newline at end of file + Describes a variation of the "ducks" structure that divides code into "basic concepts" that contain app state and minimal logic, and "container concepts" that contain minimal data and implement most application logic. + +- **Agile Front End Enterprise Architecture with React, Redux, and Vanilla JS** + https://medium.com/shiftgig-blog/agile-front-end-architectures-with-react-redux-and-vanilla-js-23f4e5626e01 + A description of how ShiftGig organizes their architecture, including a combination of Redux usage with sagas, and traditional OOP approaches like Model classes and Services. \ No newline at end of file diff --git a/redux-side-effects.md b/redux-side-effects.md index f67549b..9ab4ad4 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -103,6 +103,10 @@ https://medium.com/@talkol/redux-thunks-dispatching-other-thunks-discussion-and-best-practices-dd6c2b695ecf Some excellent thoughts on when it's okay to have a thunk dispatch another thunk, and other possible approaches. +- **Redux-Observable Epics vs Redux Sagas** + https://shift.infinite.red/redux-observable-epics-vs-redux-sagas-8e53610c0eda + A humorous look at how redux-observable and redux-saga compare. It recaps their backgrounds and basic ideas, then shows comparison implementations for some small tasks and rates the approaches. + #### Sagas @@ -201,6 +205,10 @@ https://medium.com/@TomasEhrlich/redux-saga-factories-and-decorators-8dd9ce074923 Some quick examples of creating reusable sagas to reduce duplicate code +- **Handling action errors in Redux-Saga using Either** + https://medium.com/@jamiedixon/handling-errors-in-redux-saga-using-either-12671bc6cf90 + Demonstrates an approach to handling error cases in Flux Standard Actions using the functional programming "Either" concept. + #### Other Side Effect Approaches @@ -222,4 +230,12 @@ - **Elm Architecture with Redux** https://smallbusinessforum.co/elm-architecture-with-react-redux-redux-loop-645a67070b1a - A short look at how Elm handles side effects, and how Redux-Loop can help implement a similar approach in Redux \ No newline at end of file + A short look at how Elm handles side effects, and how Redux-Loop can help implement a similar approach in Redux + +- **Redux-cycles** + http://nick.balestra.ch/talk/redux-cycles/#/0 + A slideshow that describes the basics of Cycle.js, and how the redux-cycles library can be used to handle side effects in Redux + +- **How to make your React app fully functional, fully reactive, and able to handle all those crazy side effects** + https://medium.freecodecamp.org/how-to-make-your-react-app-fully-functional-fully-reactive-and-able-to-handle-all-those-crazy-e5da8e7dac10 + A lengthy look at Cycle.js and the redux-cycles library, with plenty of diagrams to illustrate how it handles data flow. \ No newline at end of file diff --git a/redux-techniques.md b/redux-techniques.md index 424b4fd..3e9906b 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -43,6 +43,10 @@ - **Redux DevTools for Dummies** https://medium.com/@tylerwclark/redux-devtools-for-dummies-74566c597d7 An overview of the Redux DevTools Extension, including examples of how to properly add the DevTools when setting up a Redux store, and explanations of the various parts of the extension's UI. + +- **How to treat Errors as first-class citizen in Flux (and Redux)** + https://medium.com/@jamiedixon/how-to-treat-errors-as-first-class-citizens-in-flux-and-redux-fca7f3d5c02d + Discusses how the FSA structure expects actions to have an optional `error` field, and how to write code that deals with that. #### Reducers @@ -221,6 +225,14 @@ https://codeburst.io/practical-recursion-implementing-a-file-tree-view-in-react-electron-af62e7b46d26?gi=da3b8e9bf9ee Demonstrates implementing a tree view component that shows folder structure read from the filesystem, and managing the visibility of tree nodes in Redux +- **How To Manage UI State with Redux** + https://codeburst.io/how-to-manage-ui-state-with-redux-24deb6cf0d57 + 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. + +- **Introduce Redux local state to your React App** + https://medium.com/@tangbenze/introduce-redux-local-state-to-your-react-app-9f96f18d4f35 + Demonstrates setup and use of a addon library to manage scoped actions, reducers, and connections for isolated component state. + #### Redux and Forms diff --git a/redux-tutorials.md b/redux-tutorials.md index 75702f9..981c3b8 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -236,6 +236,10 @@ https://www.nathanl.in/posts/nathans-guide-to-building-kick-ass-react-applications-part-i https://www.nathanl.in/posts/building-kickass-react-applications-with-nathan-part-ii-adding-redux A tutorial intended to bridge the gap between "hello world" tutorials and "real-world" boilerplates. Covers building a server-rendered React application using Webpack 2, React Router 4, Redux, and ES6. + +- **Building Tesla's Battery Range Calculator with React+Redux** + https://medium.freecodecamp.org/building-teslas-battery-range-calculator-with-react-part-2-redux-version-2ffe29018eec + Follows the "plain React" version in Part 1 by introducing basic Redux concepts, and modifying the original version to use Redux for managing state. #### Redux Implementation Walkthroughs diff --git a/redux-without-react.md b/redux-without-react.md index 9c2a31b..8896ade 100644 --- a/redux-without-react.md +++ b/redux-without-react.md @@ -44,6 +44,10 @@ https://www.pluralsight.com/guides/front-end-javascript/ui-state-management-with-redux-in-angular-2 An extended article that discusses the benefits of using Redux to manage state, and build an example app that uses Redux to control modals and sidebars. +- **Managing State in Angular with ngrx/store** + https://auth0.com/blog/managing-state-in-angular-with-ngrx-store/ + A tutorial that demonstrates use of the ngrx/store variation of Redux as part of an Angular app. + #### Other - **Managing State in Aurelia: How to Use Aurelia with Redux** diff --git a/static-typing.md b/static-typing.md index 03c9634..5304b95 100644 --- a/static-typing.md +++ b/static-typing.md @@ -61,6 +61,10 @@ - **A Typed pluck: exploring TypeScript 2.1's mapped types** https://medium.com/@danvdk/a-typed-pluck-exploring-typescript-2-1s-mapped-types-c15f72bf4ca8 Detailed explanation of how the "mapped types" feature in TS 2.1 can be used to add typing to functions that map over data + +- **Hello World with Webpack, TypeScript, and React** + https://www.bennadel.com/blog/3293-hello-world-with-webpack-and-typescript-2-3-4-in-react-15-6-1.htm + An example of setting up a project that uses Webpack, React, an TypeScript together. #### Flow Tutorials @@ -164,6 +168,10 @@ - **React Higher Order Components in TypeScript made simple** https://dev.to/danhomola/react-higher-order-components-in-typescript-made-simple Demonstrates how to extract an HOC and properly define types for various groups of props + +- **React, Redux, and TypeScript: Typed Connect** + https://www.silviogutierrez.com/blog/react-redux-and-typescript-typed-connect/ + Discusses a simpler set of typings for the `connect` function and how to use them with React. #### Advancing Typing Techniques @@ -227,3 +235,6 @@ https://medium.com/@ckoster22/why-i-was-looking-forward-to-flow-and-then-i-wasnt-7c0a86f2d603 Some useful thoughts on the tradeoffs involved in using Flow +- **Flow: What's the verdict?** + https://amplitude.engineering/flow-whats-the-verdict-9a458ecde27f + Thoughts on some pros and cons of using FLow, including dealing with code that doesn't have types, and several specific use cases the Amplitude team has run into. \ No newline at end of file diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index 65a41b7..60ac387 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -82,6 +82,10 @@ https://medium.com/@martin_hotell/tree-shake-lodash-with-webpack-jest-and-typescript-2734fa13b5cd Walks through ways to configure Webpack and Babel to properly tree shake Lodash so that it only includes used functions. +- **Webpack for real tasks: decreasing front-end size and improving caching** + https://iamakulov.com/notes/webpack-front-end-size-caching/ + Covers a variety of ways to improve bundle sizes, including minification with Uglify, tree shaking imports, referencing external libraries, and more. + #### Code Splitting and Chunking @@ -345,6 +349,10 @@ https://medium.com/webpack/unambiguous-webpack-config-with-typescript-8519def2cac7 Shows how to use Typescript and type definitions to ensure correct setup of Webpack configs. +- **Webpack 2 & Semantic-UI Theming** + https://medium.com/webmonkeys/webpack-2-semantic-ui-theming-a216ddf60daf + Discusses how to configure Webpack to load Semantic-UI's LESS files to allow use of a custom theme. + #### Webpack Tools diff --git a/webpack-tutorials.md b/webpack-tutorials.md index a79d5a9..2cc89be 100644 --- a/webpack-tutorials.md +++ b/webpack-tutorials.md @@ -173,6 +173,15 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac https://medium.com/front-end-hacking/webpack-by-example-part-3-a4ceaaa6299a https://medium.com/front-end-hacking/webpack-by-example-part-4-f55821016821 A 4-part series that illustrates core Webpack concepts via a series of small example repos, with explanations of the source and concepts in the articles. + +- **How to setup Webpack 2.0 from scratch in 2017** + https://medium.com/@wesharehoodies/easy-guide-for-webpack-2-0-from-scratch-fe508a3ce44e + https://medium.com/@wesharehoodies/simple-beginner-guide-for-webpack-2-0-from-scratch-part-ii-66beb5dbccc2 + A detailed tutorial that walks through setting up a Webpack config piece-by-piece, and explains several Webpack concepts along the way. + +- **A Webpack Setup that Makes Sense** + https://medium.com/@Idan_Co/a-webpack-setup-that-makes-sense-35b4b6b8ef5f + Looks at ways to define Webpack setup and tasks in a more modular, reusable manner. #### Configuration Terms and Concepts