From 5bf6efca46488dd629bafe03e2b597ea5c070c5e Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Sun, 21 Jan 2018 15:58:59 -0500 Subject: [PATCH] Updates, 2018-01-21 --- framework-comparisons.md | 14 +++++++++++++- git-resources.md | 4 ++++ immutable-data.md | 6 +++++- react-implementation.md | 13 ++++++++++++- react-performance.md | 4 ++++ react-redux-testing.md | 9 +++++++++ react-routing.md | 8 ++++++++ react-server-rendering.md | 6 +++++- react-state-management.md | 4 ++++ react-styling.md | 13 +++++++++++++ react-tutorials.md | 31 ++++++++++++++++--------------- redux-architecture.md | 4 ++++ redux-side-effects.md | 14 ++++++++++++++ redux-techniques.md | 2 +- redux-tutorials.md | 8 ++++++++ redux-without-react.md | 8 +++++++- static-typing.md | 22 +++++++++++++++++++++- webpack-advanced-techniques.md | 4 ++++ webpack-tutorials.md | 9 +++++++++ 19 files changed, 161 insertions(+), 22 deletions(-) diff --git a/framework-comparisons.md b/framework-comparisons.md index 72cf8a6..1153abe 100644 --- a/framework-comparisons.md +++ b/framework-comparisons.md @@ -34,6 +34,10 @@ - **Unopinionated comparison of Glimmer and React** https://wyeworks.com/blog/2017/12/20/unopinionated-comparison-of-glimmer-and-react A well-written comparison of small React and Glimmer components that implement the same functionality. + +- **The Ultimate Guide to JavaScript Frameworks** + https://javascriptreport.com/the-ultimate-guide-to-javascript-frameworks/ + A high-level overview of both major and minor JS frameworks in 2018, Groups them into "the big three", "historically significant", "notable", and "the rest of the pack". Provides short descriptions and links to additional resources for each, as well as pros and cons for the better-known frameworks. #### React and Flux vs Backbone @@ -75,4 +79,12 @@ - **A Chip off the Monolith** https://medium.com/onfido-tech/a-chip-off-the-monolith-ec71e06a3015 - The Onfido team describes how they extracted a portion of their monolithic Rails+Ember app into a separate React+Redux app. \ No newline at end of file + The Onfido team describes how they extracted a portion of their monolithic Rails+Ember app into a separate React+Redux app. + +- **7 Tips for migration from Backbone to React & Redux** + https://medium.com/@denisraslov/7-tips-for-migration-from-backbone-to-react-redux-a006a927c39e + 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. + +- **Transitioning Your Marionette App to React** + https://medium.com/@michaelsholty/transitioning-your-marionette-app-to-react-4b94ddefafd1 + Examples of interop between React components and Marionette views \ No newline at end of file diff --git a/git-resources.md b/git-resources.md index 73e2071..db2fe93 100644 --- a/git-resources.md +++ b/git-resources.md @@ -154,6 +154,10 @@ https://blog.tratif.com/2018/01/04/undoing-in-git/ A summary of the most common ways for undoing things in Git, including bringing back removed commits. +- **Beginner's Guide to Interactive Rebasing** + https://hackernoon.com/beginners-guide-to-interactive-rebasing-346a3f9c3a6d + An excellent walkthrough of how to use interactive rebasing for rewriting commit history by editing, deleting, and combining commits + #### E-Books diff --git a/immutable-data.md b/immutable-data.md index 184f440..a31a2ec 100644 --- a/immutable-data.md +++ b/immutable-data.md @@ -161,4 +161,8 @@ - **You're missing out on ImmutableJS Records** https://medium.com/@ahmadbamieh/immutablejs-records-bd369137da06 - An introduction to the Immutable.js Record type, and how it can be used to define data types \ No newline at end of file + An introduction to the Immutable.js Record type, and how it can be used to define data types + +- **Immutability through Mutability - Immer & Redux** + https://medium.com/@Tetheta/immutability-through-mutability-immer-redux-3e14246c6506 + 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. \ No newline at end of file diff --git a/react-implementation.md b/react-implementation.md index 552f10d..a9a7129 100644 --- a/react-implementation.md +++ b/react-implementation.md @@ -86,6 +86,10 @@ https://github.com/nitin42/Making-a-custom-React-renderer A 4-part that teaches how to build a React reconciler for React 16 that renders to a Word document +- **Extending React** + https://www.javascriptjanuary.com/blog/extending-react + Walks through building a very simplified mini React clone, including `createElement`, rendering to the DOM, and `setState` updates + #### Implementation and Internals @@ -184,7 +188,10 @@ https://hackernoon.com/understanding-the-react-source-code-initial-rendering-simple-component-i-80263fe46cf1 https://hackernoon.com/understanding-the-react-source-code-initial-rendering-simple-component-ii-79e7e8bed56c https://hackernoon.com/understanding-the-react-source-code-initial-rendering-simple-component-iii-69c2711c5f33 - Walks through the critical path of React's source code, tracing how a simple component gets rendered. + https://hackernoon.com/understanding-the-react-source-code-iv-e3c4b66da12c + https://hackernoon.com/understanding-the-react-source-code-v-812d69a79fb9 + Walks through the critical path of React 15's source code, tracing how a simple component gets rendered. + #### React Fiber @@ -220,6 +227,10 @@ https://www.robinwieruch.de/what-is-new-in-react-16/ A very useful look at the new user-facing features in React 16, with code examples. +- **Rethinking with React 16** + https://www.javascriptjanuary.com/blog/rethinking-with-react-16 + 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. + - **React Fiber Architecture** https://github.com/acdlite/react-fiber-architecture A description of React's new core algorithm, React Fiber diff --git a/react-performance.md b/react-performance.md index 310f05c..a4e4656 100644 --- a/react-performance.md +++ b/react-performance.md @@ -199,6 +199,10 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) http://lucybain.com/blog/2017/react-js-when-to-rerender/ An easy-to-read overview of when and why a component will re-render. +- **Dragging React performance forward** + https://medium.com/@alexandereardon/dragging-react-performance-forward-688b30d40a33 + A detailed look at how the react-beautiful-dnd library implemented performance improvements with drastically better results, including avoiding unnecessary renders and DOM reads, applying style updates, virtualizing movement, and using lookup tables. + #### Code Splitting and Progressive Apps diff --git a/react-redux-testing.md b/react-redux-testing.md index 62a5cd4..b320bd1 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -337,6 +337,15 @@ https://www.codesai.com/2017/06/testing-hacks-react-redux A series of posts describing several strategies for testing Redux apps, including larger integration tests with mock APIs, handling of async logic, routing, and scroll events. +- **Evaluating Redux Saga Test Libraries** + http://blog.scottlogic.com/2018/01/16/evaluating-redux-saga-test-libraries.html + Looks at several ways to approach testing sagas, and how specific saga test helper libraries use those approaches. Includes a helpful table listing which approaches each helper library supports. + +- **Testing mapState, mapDispatch, and connected components** + http://jsramblings.com/2018/01/15/3-ways-to-test-mapStateToProps-and-mapDispatchToProps.html + http://jsramblings.com/2018/01/21/stuck-testing-your-connected-component.html + A pair of articles that discuss ways to handle testing the various pieces of connected components. + #### General Testing, Tools, and Setup diff --git a/react-routing.md b/react-routing.md index 41bb6ac..6270379 100644 --- a/react-routing.md +++ b/react-routing.md @@ -83,6 +83,14 @@ https://medium.com/airbnb-engineering/server-rendering-code-splitting-and-lazy-loading-with-react-router-v4-bfe596a6af70 Technical discussion of the problems involved in code-splitting server rendered apps, and how Airbnb has implemented solutions using React-Router v4 and Babel. +- **URL Parameters with React Router** + https://tylermcginnis.com/react-router-url-parameters/ + Tyler McGinnis gives a short example of how to use parameters from the current URL in a component with React-Router v4 + +- **Using React Router v4 with create-react-app** + https://codingblast.com/react-router-create-react-app/ + Explains key concepts of React-Router v4, and gives examples of using it in a CRA project + #### Routing with Redux diff --git a/react-server-rendering.md b/react-server-rendering.md index c73d2cb..91b29c0 100644 --- a/react-server-rendering.md +++ b/react-server-rendering.md @@ -111,4 +111,8 @@ - **"Server-Side Rendering - Not Worth It?"** https://www.reddit.com/r/reactjs/comments/7o6oj6/serverside_rendering_not_worth_it/ - An extended Reddit discussion on the pros, cons, and techniques for SSR with React \ No newline at end of file + An extended Reddit discussion on the pros, cons, and techniques for SSR with React + +- **Upgrading a create-react-app project to a SSR + code splitting setup** + https://medium.com/bucharestjs/upgrading-a-create-react-app-project-to-a-ssr-code-splitting-setup-9da57df2040a + 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. \ No newline at end of file diff --git a/react-state-management.md b/react-state-management.md index aa3b69e..fcaad50 100644 --- a/react-state-management.md +++ b/react-state-management.md @@ -74,6 +74,10 @@ - **State management in Javascript** https://codeburst.io/state-management-in-javascript-15d0d98837e1 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. + +- **Three approaches to distribute the state across components in React** + https://engineering.hexacta.com/three-approaches-to-distribute-the-state-across-components-in-react-da4db5a389e0 + 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 #### Using `setState` diff --git a/react-styling.md b/react-styling.md index 8ed4fb1..97fd3d5 100644 --- a/react-styling.md +++ b/react-styling.md @@ -149,6 +149,15 @@ https://medium.com/@tkh44/writing-a-css-in-js-library-from-scratch-96cd23a017b4 The author of the Emotion library shows how to build a simple CSS-in-JS library, to help illustrate how they work. +- **CSS-in-JS** + https://gist.github.com/threepointone/9f87907a91ec6cbcd376dded7811eb31 + 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. + + +- **Things to consider when choosing a React styling framework** + http://jsramblings.com/2017/10/17/things-to-consider-when-choosing-a-react-styling-framework.html + Helpful suggestions for things to compare between different styling libraries, such as how the styles are applied, syntax used, and feature support + #### Style Libraries @@ -212,6 +221,10 @@ https://alligator.io/react/css-in-js-roundup-styling-react-components/ A high-level comparison of 15 different CSS-in-JS libraries +- **Migrating to styled-components cheatsheet** + http://jsramblings.com/2017/10/29/migrating-to-styled-components-cheatsheet.html + Some helpful tips for moving a project from vanilla CSS to the styled-components library + #### Techniques and Examples diff --git a/react-tutorials.md b/react-tutorials.md index 389c5ea..cddde62 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -12,6 +12,10 @@ http://blog.isquaredsoftware.com/2017/02/presentation-react-redux-intro/ An up-to-date HTML slideshow that introduces React and Redux, discusses why they help make applications easier to write via declarative code and predictable data flow, and demonstrates their basic concepts and syntax. Includes several interactive React component examples. +- **The Beginner's Guide to ReactJS** + https://egghead.io/courses/the-beginner-s-guide-to-reactjs + A free video course with short lessons that explain key React concepts, including using `React.createElement` and JSX, conditional rendering, forms, styling, lists, HTTP requests, and deploying a React app. + - **30 Days of React** 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. @@ -115,25 +119,10 @@ - **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 - https://medium.com/@johntucker_48673/react-by-example-part-3-f825444bc1d8 - https://medium.com/@johntucker_48673/react-by-example-part-4-5d32168db362 - https://medium.com/@johntucker_48673/react-by-example-part-5-e1716e69dacc - https://medium.com/@johntucker_48673/react-by-example-part-6-8c71dda057ac - 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.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. - **Intro to React** @@ -203,6 +192,14 @@ https://react.christmas/ A series of short posts that look at specific aspects of using React, including using Create-React-App, testing code, using Fragments, component composition, and much more. +- **6 React Development Tips for Beginners** + https://www.codementor.io/canberkmorelli/i-wish-i-knew-these-before-diving-into-react-fvionauhk Several useful tips for understanding how React works, including behavior of `setState` and component lifecycle methods. + +- **React - Common Questions** + https://academind.com/learn/react/react-q-a/ + An article and accompanying video that explain answers to common questions about React, including whether a complex project setup is necessary, different ways to define components, ways to style React apps, immutability, using React with various backends, and more. + + #### Project-Based Tutorials @@ -411,6 +408,10 @@ https://sabe.io/tutorials/getting-started-with-react A tutorial that demonstrates how to build a simple real-time display of cryptocurrency prices. +- **Creating your first MERN stack application** + https://blog.cloudboost.io/creating-your-first-mern-stack-application-b6604d12e4d3 + Shows how to build an expense manager application, using create-react-app as the basis for the front end. + #### Paid Courses and Books diff --git a/redux-architecture.md b/redux-architecture.md index d817098..0eb94ea 100644 --- a/redux-architecture.md +++ b/redux-architecture.md @@ -34,6 +34,10 @@ https://medium.com/@fastphrase/when-to-use-redux-f0aa70b5b1e2 Some helpful thoughts on when you should use Redux: same app state needed in multiple components, global components that need to be accessed anywhere, too much prop passing, and more. +- **When (and when not) to use Redux** + https://blog.logrocket.com/when-and-when-not-to-use-redux-41807f29a7fb + A useful summary of the problems Redux can help solve in React apps, the major benefits of using Redux, reasons why you might not need Redux, and the basic concepts of Redux. + #### Redux Architecture diff --git a/redux-side-effects.md b/redux-side-effects.md index 1b014f8..7ad6e7e 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -301,6 +301,10 @@ https://medium.com/@joeltbond/learning-redux-saga-event-channels-29dee438fd7b Demonstrates using sagas to interact with the Web MIDI API +- **May Cause Side Effects: How to Implement Redux Sagas as Middlewares** + https://www.javascriptjanuary.com/blog/may-cause-side-effects-how-to-implement-redux-sagas-as-middleware + An extensive article that first implements async functionality with thunks, then walks through how sagas work and refactors the logic to use sagas instead. + #### Observables @@ -332,7 +336,17 @@ https://medium.com/@eric.hulburd.af/creating-and-testing-a-d3-react-game-with-redux-observable-d97f2155421c A detailed look at the concepts and usage of redux-observable. Implements an example game that's built to demonstrate usage in a more meaningful application, and shows how to test epics. +- **Timing of reducing Actions with Redux-Observable** + https://www.bleathem.ca/blog/timing-of-reducing-actions-with-redux-observable/ + Breaks down the sequence of behavior when actions are dispatched, how Redux-Observable interacts with that sequence, and gives examples of epics dispatching actions synchronously and asynchronously. + +- **Streaming Redux state as an Observable with RxJS** + https://dev.to/fahad19/streaming-redux-state-as-an-observable-with-rxjs-5f48 + Examples of how to construct an Observable stream that subscribes to the Redux store state +- **You Aren't Using Redux with Observables Enough** + https://medium.com/@jacobp100/you-arent-using-redux-with-observables-enough-b59329c5a3af + Shows how to use the Redux store as the source for an observable stream, and gives examples of RxJS observable streams that toggle music player behavior and handle async requests that need to be canceled. #### Other Side Effect Approaches diff --git a/redux-techniques.md b/redux-techniques.md index 7a7804f..ded68a1 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -153,7 +153,7 @@ - **Redux Dead Drop** https://medium.com/@erikras/redux-dead-drop-1b9573705bec Describes a possible technique for passing messages between widely separated components, such as triggering focus on a particular DOM node - + #### Reducing Boilerplate diff --git a/redux-tutorials.md b/redux-tutorials.md index e13e980..72da027 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -31,6 +31,10 @@ - **Redux and React: An Introduction** http://jakesidsmith.com/blog/post/2017-11-18-redux-and-react-an-introduction/ A great introduction to Redux's core concepts, with explanations of how to use the React-Redux package to use Redux with React. + +- **React Redux Tutorial for Beginners: Learning Redux in 2018** + https://dev.to/valentinogagliardi/react-redux-tutorial-for-beginners-learning-redux-in-2018-13hj + An excellent tutorial that covers a variety of Redux fundamentals, including a look at the problems Redux helps solve, when you should learn and use Redux, actions and reducers, the Redux store, and how to connect React components to Redux. - **Single State Tree + Flux** http://merrickchristensen.com/articles/single-state-tree.html @@ -424,6 +428,10 @@ - **Finally understand Redux by building your own Store** https://toddmotto.com/redux-typescript-store Teaches Redux concepts by going under the hood and building a Redux-equivalent Store class from scratch + +- **redux-class** + https://github.com/GKhalsa/redux-class + A miniature Redux and React-Redux implementation built for learning purposes #### Paid Courses and Books diff --git a/redux-without-react.md b/redux-without-react.md index b65d064..c1fd49e 100644 --- a/redux-without-react.md +++ b/redux-without-react.md @@ -167,4 +167,10 @@ - **A blockchain-backed Redux clone in 105 lines of code** https://swizec.com/blog/blockchain-backed-redux-clone-105-lines-code/swizec/7980 - An interesting experiment that plays with the idea of implementing Redux's store API around a simple blockchain. \ No newline at end of file + An interesting experiment that plays with the idea of implementing Redux's store API around a simple blockchain. + +- **How to use Redux with Polymer** + https://medium.com/@jalalio/step-1-how-to-use-redux-with-polymer-2-7bcfaee6fdb3 + https://medium.com/@jalalio/step-2-how-to-structure-larger-polymer-2-apps-with-redux-reselect-f588e64a191a + https://medium.com/@jalalio/step-3-how-to-make-async-api-calls-in-a-polymer-2-app-using-redux-thunk-middleware-c71d596c2005 + A 3-part series that shows how to use the polymer-redux bindings, including basic setup, use of Reselect, and async API calls. \ No newline at end of file diff --git a/static-typing.md b/static-typing.md index 71b9c99..ec66529 100644 --- a/static-typing.md +++ b/static-typing.md @@ -250,6 +250,10 @@ https://decembersoft.com/posts/error-ts2532-optional-react-component-props-in-typescript/ Describes a specific TS error message that can result from trying to use default props, and and shows how to solve it. +- **3 Tricks for Using Redux and Immutable.js with TypeScript** + http://blog.mgechev.com/2018/01/18/react-typescript-redux-immutable/ + Examples of statically typing Immutable.js Records, action creators, and class-based actions + #### Advancing Typing Techniques @@ -278,6 +282,10 @@ https://codemix.com/opaque-types-in-javascript/ Describes how to use Flow's "opaque types" feature to make otherwise compatible types separate, such as an account number and a balance. +- **Flavoring: Flexible Nominal Typing for TypeScript** + https://spin.atomicobject.com/2018/01/15/typescript-flexible-nominal-typing/#.Wly5RmUfXDk.hackernews + Looks at an approach for "branding" similar types to make them distinct, some of the problems with branding, and a second approach called "flavoring" that works better with implicit conversions. + #### Tool Comparisons @@ -335,4 +343,16 @@ - **Strict Types :Typescript, Flow, Javascript** https://codeburst.io/strict-types-typescript-flow-javascript-to-be-or-not-to-be-959d2d20c007 - Looks at the rise of static typing in dynamic languages, gives some thoughts on the tradeoffs and benefits of TS and Flow, and tradeoffs for static typing usage as a whole. \ No newline at end of file + Looks at the rise of static typing in dynamic languages, gives some thoughts on the tradeoffs and benefits of TS and Flow, and tradeoffs for static typing usage as a whole. + +- **Inference engines: 5 examples with TypeScript, Flow, and Reason** + https://codeburst.io/inference-engines-5-examples-with-typescript-flow-and-reason-edef2f4cf2d3 + Compares the behavior of three type systems with several specific examples to show how they differ. + +- **Type checking in JavaScript: is it worth it?** + https://ropig.com/blog/type-checking-javascript-worth/ + Some short, high-level thoughts on the pros and cons of using static typing with JS, and tips for leveraging static typing in your project + +- **"Convert React JavaScript Code to TypeScript with Proper Typing"** + https://news.ycombinator.com/item?id=16159389 + A Hacker News thread with a lot of good discussion on the current strengths and weaknesses of TypeScript and Flow \ No newline at end of file diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index 53ac394..4520a4c 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -110,6 +110,10 @@ https://blog.box.com/blog/how-we-improved-webpack-build-performance-95/ Tips for speeding up builds by using Babel caching, not exporting arrays of configs, and doing work in parallel. +- **Keep Webpack Fast: A Field Guide for Better Build Performance** + https://slack.engineering/keep-webpack-fast-a-field-guide-for-better-build-performance-f56a5995e8f1 + An excellent article from Slack's frontend team, listing ways to improve Webpack build speed. Gives overviews of profiling, parallelization tools, reducing workloads, and caching, with plenty of mentions for specific tools and techniques. + #### Code Splitting and Chunking diff --git a/webpack-tutorials.md b/webpack-tutorials.md index 113ce29..85bf067 100644 --- a/webpack-tutorials.md +++ b/webpack-tutorials.md @@ -16,6 +16,11 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac - **Webpack from First Principles** https://www.youtube.com/watch?v=WQue1AN93YU A screencast video explaining what Webpack is and why you would want to use it + +- **"Having a hard time understanding Webpack"** + https://www.reddit.com/r/javascript/comments/7qdksl/having_a_hard_time_understanding_webpack/dsoq9p3/ + https://www.reddit.com/r/javascript/comments/7qdksl/having_a_hard_time_understanding_webpack/dsphcmb/ + A fantastic, friendly, detailed explanation of why you would want to use Webpack and what problems it solves. Written as a walkthrough from "I have a bunch of scripts in my index.html and I have to keep them all in the right order", up to "I have a lot of individual files and they need to be bundled together". - **Egghead.io - Intro to Webpack (Playlist)** https://egghead.io/playlists/intro-to-webpack-4ca2d994 @@ -201,6 +206,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac - **Webpack 3 quickstarter: Configure Webpack from scratch** https://medium.com/@nirjhor123/webpack-3-quickstarter-configure-webpack-from-scratch-30a6c394038a A walkthrough for Webpack setup that covers basic entry and output definition, webpack-dev-server setup, and adding loaders and plugins. + +- **Setting up Webpack for any project** + https://scotch.io/tutorials/setting-up-webpack-for-any-project + Walks through the setup of a basic Webpack config, and common features such as loaders for Babel and SASS, plugins for extracting CSS, inserting defined constants, and tools for different development environments. #### Configuration Terms and Concepts