From dc86f266336855b5eb663f4fc2cb5d4731653323 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Sun, 28 Aug 2016 23:29:44 -0400 Subject: [PATCH] Updates, 2016-08-28 --- community-resources.md | 27 +++++++++++++++++++ es6-features.md | 30 ++++++++++++++++++++- git-resources.md | 5 +++- javascript-resources.md | 4 +++ node-js-and-npm.md | 4 +++ pros-cons-discussion.md | 41 +++++++++++++++++++++++++++- react-performance.md | 8 ++++++ react-redux-architecture.md | 49 +++++++++++++++++++++++++++++++++- react-redux-testing.md | 12 +++++++++ react-styling.md | 6 ++++- react-tutorials.md | 8 ++++++ redux-side-effects.md | 4 +++ redux-techniques.md | 40 ++++++++++++++++++++++++++- redux-tutorials.md | 12 +++++++++ thinking-in-react-and-flux.md | 14 ++++------ tips-and-best-practices.md | 10 +++---- using-react-with-es6.md | 8 ++++++ webpack-advanced-techniques.md | 4 +++ webpack-tutorials.md | 35 +++++++++++++++--------- 19 files changed, 288 insertions(+), 33 deletions(-) diff --git a/community-resources.md b/community-resources.md index bf9e28c..6dcf955 100644 --- a/community-resources.md +++ b/community-resources.md @@ -27,6 +27,26 @@ https://github.com/ericdouglas/react-roadmap A curated list of free resources to master React Development +- **React FAQ** + https://github.com/timarney/react-faq + A collection of links to help answer your questions about React.js + +- **JS Coach** + https://js.coach/ + An automatically-updated searchable and categorized list of JS packages related to React, Webpack, Babel, and more. + + +#### People + +- **Dan Abramov's React List** + https://medium.com/@dan_abramov/my-react-list-862227952a8c + A list of people (mostly but not entirely related to React) that Dan Abramov suggests following + +- **Twitter React Lists** + https://twitter.com/wleong/lists/my-react-list/members + https://twitter.com/oguzbilgic/lists/react-influencers/members + Some Twitter lists that focus on React-related people + #### Podcasts @@ -69,6 +89,10 @@ https://ponyfoo.com/weekly A single email every thursday, discussing front-end web development and related technologies. +- **Deterministic** + https://deterministic.curated.co + A weekly digest of interesting news and articles covering functional programming for the web, especially on the front end. + #### Online Course Sites @@ -79,3 +103,6 @@ - **Frontend Masters** https://frontendmasters.com/ Front-end training courses from masters who are shaping the industry. + + + diff --git a/es6-features.md b/es6-features.md index b2fcb8c..372225d 100644 --- a/es6-features.md +++ b/es6-features.md @@ -28,6 +28,10 @@ http://kamranahmed.info/blog/2016/04/04/es6-in-depth/ A very readable overview of the features in ES6, why you would want to use them, and examples showing what they look like. +- **How to Learn ES6** + https://medium.com/javascript-scene/how-to-learn-es6-47d9a1ac2620 + A set of resources for learning ES6 + #### In-Depth Details @@ -76,4 +80,28 @@ - **Selective transpilation for modern Javascript environments** https://medium.com/@adamrackis/selective-transpilation-for-modern-javascript-environments-15bde6b75cfd - An investigation into ways to offer up differently-compiled bundles for different platforms with various levels of JS feature support. \ No newline at end of file + An investigation into ways to offer up differently-compiled bundles for different platforms with various levels of JS feature support. + + +#### Javascript Module Formats + +- **JavaScript Modules: A Beginner's Guide** + https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc + https://medium.freecodecamp.com/javascript-modules-part-2-module-bundling-5020383cf306 + A two-part article discussing the various ways to define a module in Javascript, and common tools used to bundle modules together + +- **Understanding ES6 Modules via Their History** + https://www.sitepoint.com/understanding-es6-modules-via-their-history/ + A recap of how the various Javascript module formats evolved over time, and how that's lead to ES6 modules + +- **Javascript Module Systems Showndown: CommonJS vs AMD vs ES2015** + https://auth0.com/blog/javascript-module-systems-showdown/ + A look at the history and reasons for each module format's creation + +- **History and Background of Javascript Module Loaders** + https://appendto.com/2016/06/the-short-history-of-javascript-module-loaders/ + An overview of the various tools that have been used to load different module formats over time + +- **Understanding Javascript Modules: Bundling and Transpiling** + https://www.sitepoint.com/javascript-modules-bundling-transpiling/ + An overview of tools commonly used to bundle and transpile various module formats \ No newline at end of file diff --git a/git-resources.md b/git-resources.md index 152dccc..1302fe2 100644 --- a/git-resources.md +++ b/git-resources.md @@ -63,6 +63,10 @@ - **Git Tips** https://github.com/git-tips/tips A large collection of Git tips and tricks. + +- **Digit** + https://github.com/optionfactory/digit + A tool to visualize the contents of a Git repo as an aid to learning #### E-Books @@ -110,7 +114,6 @@ - **Interactive Git Cheat Sheet** http://ndpsoftware.com/git-cheatsheet.html A clickable page that shows how various commands move data between different parts of Git's storage (working copy, index, local repo, remote repo) - #### Desktop GUI Clients diff --git a/javascript-resources.md b/javascript-resources.md index 61baa7d..1dfc6f7 100644 --- a/javascript-resources.md +++ b/javascript-resources.md @@ -24,6 +24,10 @@ While this list is primarily focused on learning React and Redux, and generally - **Learning Javascript and the Danger of Spreading Yourself Too Thin** https://medium.com/@kevininaniche/learning-javascript-and-the-danger-of-spreading-yourself-too-thin-4617384e7ea4 Tips on how to approach learning Javascript, and some additional resources. + +- **Reddit /r/LearnJavascript** + https://www.reddit.com/r/LearnJavascript + A Reddit community for learning Javascript #### Tutorials and Books diff --git a/node-js-and-npm.md b/node-js-and-npm.md index b1d1cfb..f1dc714 100644 --- a/node-js-and-npm.md +++ b/node-js-and-npm.md @@ -27,3 +27,7 @@ NPM 3.7 or later, as that fixes a bug with the progress bar that drastically slo - **Control of Your Global Node Packages on Windows** http://www.bossable.com/1710/nodejs-package-path-for-windows/ Tips for dealing with various path problems + +- **Pragmatic Modularity with Node** + http://mafintosh.com/pragmatic-modularity.html + Includes a description of Node's resolution algorithm for `require` \ No newline at end of file diff --git a/pros-cons-discussion.md b/pros-cons-discussion.md index 78cbc34..c272ae5 100644 --- a/pros-cons-discussion.md +++ b/pros-cons-discussion.md @@ -110,4 +110,43 @@ similar structures in ClojureScript. - **"How can I better market my Javascript library?"** https://news.ycombinator.com/item?id=11833301 - The developer of a Redux wrapper library asks how to get more attention online. I offer a pretty long reply comment describing the various network effects involved in any addon library, and critique his specific library from a Redux user's perspective. \ No newline at end of file + The developer of a Redux wrapper library asks how to get more attention online. I offer a pretty long reply comment describing the various network effects involved in any addon library, and critique his specific library from a Redux user's perspective. + +- **"Our conversion from Angular to React"** + https://www.reddit.com/r/reactjs/comments/4upt6t/netlify_our_conversion_from_angular_to_react/d5smdih + A comment pointing out that React's "mostly the view" status enables it to be used in a wide variety of situations, which also means it works best when you are willing and able to come up with your own architecture. + +- **"Dan Abramov: Redux is not an architecture or a pattern, it's just a library"** + https://www.reddit.com/r/javascript/comments/4rcqpx/dan_abramov_redux_is_not_an_architecture_or/ + A discussion thread covering a number of aspects of Redux usage, including its relation with other libraries and patterns such as event sourcing. + +- **"Why isn't AJAX present in many examples of React/Flow/Redux?"** + https://www.reddit.com/r/reactjs/comments/4pbq2x/why_isnt_ajax_present_in_many_examples_of/ + Discussion of why a typical React app is made up of many different libraries and pieces. + +- **"Confused: Redux or MobX?"** + https://www.reddit.com/r/reactjs/comments/4npzq5/confused_redux_or_mobx/ + 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. + +#### React's PATENTS License + +- **Dan Abramov Twitter threads addressing patent concerns** + https://twitter.com/dan_abramov/status/754992075087745024 + https://twitter.com/dan_abramov/status/766210972776337408 + https://gist.github.com/gaearon/df0c4025e67399af72786d7ac7c819cc + A couple of extended discussions from Dan debunking myths about React's PATENTS clause, and a collection of further related links + +- **Comments from other companies on the acceptability of the license** + https://wptavern.com/automattic-will-continue-to-use-react-js-in-calypso-despite-patent-clause + https://twitter.com/paul_irish/status/754864479460929536 + https://twitter.com/palmerj3/status/766236192669073412 + https://blogs.windows.com/buildingapps/2016/04/13/react-native-on-the-universal-windows-platform/ + Comments from developers at Automattic, Google, Spotify, and Microsoft, indicating they're fine with using React + +- **Further discussions** + https://news.ycombinator.com/item?id=12108273 + https://news.ycombinator.com/item?id=12108526 + https://vimeo.com/170598656#comment_14699807 + https://github.com/facebook/react/issues/7293 + More discussion threads regarding the PATENTS license + \ No newline at end of file diff --git a/react-performance.md b/react-performance.md index c06a9b1..3398690 100644 --- a/react-performance.md +++ b/react-performance.md @@ -69,6 +69,10 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) https://gist.github.com/ryanflorence/a301dc184f75e929a263dc1e80399a28 A tip for improving performance when conditionally rendering components: use a function as a child, and only call that function if the condition is true. +- **Dan Abramov - "Don't stress over binding in render"** + https://twitter.com/dan_abramov/status/760199672824815616 + Dan advises not to worry about binding methods in render functions unless profiling shows it's a real perf problem for you + #### Immutable Data - **Building Efficient UI with React and Redux** @@ -95,6 +99,10 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) https://twitter.com/leeb/status/746733697093668864 Another suggestion from Lee Byron to avoid use of Immutable.js's data conversion functions based on performance reasons. +- **"Potential concerns with using Immutable.js"** + https://www.reddit.com/r/javascript/comments/4rcqpx/dan_abramov_redux_is_not_an_architecture_or/d51g4k4?context=3 + A comment discussing a number of potential negative tradeoffs when using Immutable.js, including both performance anti-patterns and API issues + #### Redux Performance - **High Performance Redux** diff --git a/react-redux-architecture.md b/react-redux-architecture.md index a9b2003..28b5dd4 100644 --- a/react-redux-architecture.md +++ b/react-redux-architecture.md @@ -126,6 +126,38 @@ https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9 Explains the "function as a child" technique as an alternative to Higher Order Components +- **React Patterns** + http://reactpatterns.com/ + A list of common patterns for structuring React components + +- **Ramblings About React and Redux Architecture** + https://medium.com/@kurtiskemple/ramblings-about-react-and-redux-architecture-c27dfff79ddf + Thoughts on structuring components as "Providers", "Behavior", and "Presentational" + +- **How to handle React context in a reliable way** + https://medium.com/react-ecosystem/how-to-handle-react-context-a7592dfdcbc + Covers what the context feature is, how to use it, and some concerns to be aware of. + +- **Higher Order React Components** + http://natpryce.com/articles/000814.html + A solid explanation of what HoCs are, with examples and use cases + +- **Writing a good React Component** + https://medium.com/thoughts-from-travelperk/writing-a-good-react-component-59624ed40b8e + Some very good best practices for writing components. + +- **The Anatomy of a React Redux App** + https://medium.com/@rajaraodv/the-anatomy-of-a-react-redux-app-759282368c5a + Breaks down the component structure of a typical React/Redux app, and classifies the different types of components that usually show up + +- **Making custom renderers for React** + http://goshakkk.name/react-custom-renderers/ + Describes techniques for building custom rendering components that bridge between normal rendering and something like a canvas + +- **Connected Higher Order Components with React and Redux** + http://www.avitzurel.com/blog/2016/08/03/connected-higher-order-components-with-react-and-redux/ + Demonstrates creating HoCs that are connected to Redux + #### React and AJAX - **React AJAX Best Practices** @@ -217,6 +249,11 @@ http://spraso.com/managing-react-controlled-component-state/ Some short examples of how to properly manage state for controlled inputs +- **Radio Buttons and Checkboxes in React** + http://react.tips/radio-buttons-in-reactjs/ + http://react.tips/checkboxes-in-react/ + Tutorials on managing various inputs in forms with React + #### Project File Structure @@ -271,5 +308,15 @@ - **How we reduced boilerplate and handled asynchronous actions with Redux** https://blog.algolia.com/how-we-reduced-boilerplate-and-handled-asynchronous-actions-with-redux/ A look at conventions that have helped the Algolia team write Redux apps. + +- **10 Tips for Better Redux Architecture** + https://medium.com/javascript-scene/10-tips-for-better-redux-architecture-69250425af44 + A great article covering when and why to use Redux, benefits, and several tips for a better application architecture. - \ No newline at end of file +- **Redux without Profanity** + https://tonyhb.gitbooks.io/redux-without-profanity/content/ + An online book covering best practices and approaches for managing a Redux application + +- **Where do I put my business logic in a React-Redux application?** + https://medium.com/@jeffbski/where-do-i-put-my-business-logic-in-a-react-redux-application-9253ef91ce1 + Describes several options for managing logic and async behavior (thunks, sagas, etc), and introduces a new middleware as an alternative approach \ No newline at end of file diff --git a/react-redux-testing.md b/react-redux-testing.md index b1fa3fc..7ee6063 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -76,6 +76,18 @@ http://pebblecode.com/blog/testing-redux-containers/ Demonstrates techniques for properly testing Redux-connected React components using a mock store. +- **React TDD Guide** + https://github.com/zpratt/react-tdd-guide + A repo with step-by-step commits demonstrating approaches to testing React apps + +- **Unit Testing React Components that use Redux** + http://www.thereformedprogrammer.net/unit-testing-react-components-that-use-redux/ + Tips on unit testing components that render more Redux-connected components + +- **Generative Testing using Redux: Reducers** + https://medium.com/javascript-inside/generative-testing-your-redux-reducers-326d7368f284 + A look at using "generative testing" to autoomatically test reducers with varying inputs + #### General Testing, Tools, and Setup diff --git a/react-styling.md b/react-styling.md index 50f3d70..ad03c99 100644 --- a/react-styling.md +++ b/react-styling.md @@ -18,4 +18,8 @@ - **Journey to Enjoyable, Maintainable Styling with React, ITCSS, and CSS-in-JS** https://medium.com/maintainable-react-apps/journey-to-enjoyable-maintainable-styling-with-react-itcss-and-css-in-js-632cfa9c70d6 - A long, in-depth article detailing one dev's progression through various approaches to handling CSS. \ No newline at end of file + A long, in-depth article detailing one dev's progression through various approaches to handling CSS. + +- **Patterns for Style Composition in React** + http://jxnblk.com/writing/posts/patterns-for-style-composition-in-react/ + Some great suggestions for defining reusable React components that can have variations in styling \ No newline at end of file diff --git a/react-tutorials.md b/react-tutorials.md index 0e3ef6b..d745344 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -74,6 +74,10 @@ - **React Tutorial** http://www.pshrmn.com/tutorials/react/react/ A very readable intro to React's concepts. + +- **React Workshop** + https://github.com/jesstelford/react-workshop + A self-directed set of workshop lessons that teach React basics. #### Project-Based Tutorials @@ -190,6 +194,10 @@ http://thereignn.ghost.io/on-the-async-nature-of-setstate-in-react/ 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. +- **React - Basic Theoretical Concepts** + https://github.com/reactjs/react-basic + 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.) + #### Paid Courses and Books Also see the course sites listed in the [Community Resources](community-resources.md#online-course-sites) page. diff --git a/redux-side-effects.md b/redux-side-effects.md index f1ccecb..9fec636 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -14,6 +14,10 @@ - **Pure Functionality and Side Effects with Redux** https://blog.hivejs.org/building-the-ui-2/ An overview of what side effects are, how they fit into Redux, and several approaches for managing them. + +- **"Async Redux workflow: calling actions outside Redux?"** + https://www.reddit.com/r/reactjs/comments/4upe9t/async_redux_workflow_calling_actions_outside_redux/d5sgy5s?context=3 + A comment explaining why using action creator functions is a good practice #### Sagas diff --git a/redux-techniques.md b/redux-techniques.md index 636b702..310ea49 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -19,6 +19,10 @@ - **Fix Ugly JSON Api Responses With Redux Middleware** http://blog.benwiley.org/fix-json-responses-redux-middleware/ Sets up a sample project that requests JSON data, then shows how to use some custom middleware to transform the response. + +- **You Aren't Using Redux Middleware Enough** + https://medium.com/@jacobp100/you-arent-using-redux-middleware-enough-94ffe991e6 + Suggestions for using middleware to solve a number of interesting use cases #### Debugging @@ -34,6 +38,14 @@ - **Drew Bug** https://www.youtube.com/watch?v=n8vkg_RVIRo A video demonstrating a Redux crash reporter and time travel debugger. + +- **Redux DevTools Without Redux** + https://medium.com/@zalmoxis/redux-devtools-without-redux-or-how-to-have-a-predictable-state-with-any-architecture-61c5f5a7716f + Instructions on setting up the Redux DevTools browser extension to use things other than a single Redux store (such as reducers for use within a React component, or other state libs) + +- **Redux Error Reports Concept** + https://medium.com/@jrullmann/redux-error-reports-concept-ab85b658f53e + A semi-hypothetical description of tools that could be built to report errors by leveraging Redux #### Type Checking @@ -92,6 +104,28 @@ http://mediatemple.net/blog/tips/a-quick-look-at-the-react-and-redux-devtools/ An intro to using the React DevTools and Redux DevTools extensions for debugging +- **Real-World React and Redux** + https://dzone.com/articles/real-world-reactjs-and-redux-part-1 + https://dzone.com/articles/real-world-reactjs-and-redux-part-2 + A series of articles covering practical architecture lessons learned from building Redux apps, especially regarding use of custom middleware + +- **Connecting the Linode API to Redux with Higher-Order Functions** + https://engineering.linode.com/2016/08/17/Using-metaprogramming-in-the-manager.html + Linode explains how they generate customized action creators and reducers to talk to different parts of their API + + + +#### UI and Widget Implementations + +- **"How can I display a modal dialog in Redux?"** + http://stackoverflow.com/questions/35623656/how-can-i-display-a-modal-dialog-in-redux-that-performs-asynchronous-actions/35641680 + Dan Abramov describes a great technique for descriptively managing React modal dialogs using Redux actions and state + +- **"Generic Modal Dialogs with Feature-Specific Actions"** + https://www.reddit.com/r/reactjs/comments/4wjmme/implement_a_confirm_modal_using_react_redux/d68ajcw?context=3 + A follow-on to Dan's technique, with a short suggestion for using generic modal components in a variety of situations by including actions as props. + + #### Variations on Redux Architectures @@ -117,4 +151,8 @@ - **Write Better Redux with redux-module-builder** https://www.fullstackreact.com/articles/better-redux-module-management/ - Describes how to use the utilities included in the redux-module-builder package to better organize a Redux application \ No newline at end of file + Describes how to use the utilities included in the redux-module-builder package to better organize a Redux application + +- **The Elegance of React, Redux, and Ramda** + https://medium.com/javascript-inside/the-elegance-of-react-ebc21a2dcd19 + Demonstrates ways to use Ramda to compose together React components and Redux behavior \ No newline at end of file diff --git a/redux-tutorials.md b/redux-tutorials.md index 39fc014..620075f 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -68,6 +68,10 @@ - **Why Redux makes sense to me and how I conceptualize it** https://medium.com/@fay_jai/why-redux-makes-sense-to-me-and-how-i-conceptualize-it-c8a3a9db15ca Some useful analogies for visualizing how Redux works, how the pieces fit together, and why you'd want to use it. + +- **Redux10: A Visual Overview of Redux in 10 Steps** + https://github.com/chrisscoular/Redux10 + A small repo with a standalone HTML page. Walks through 10 simple steps to help explain the basics of Redux. #### Project-Based Tutorials @@ -119,6 +123,14 @@ - **An Adventure in Redux: building redux-adventure** http://csharperimage.jeremylikness.com/2016/07/an-adventure-in-redux-building-redux.html Builds a small randomized dungeon game using Redux, TypeScript, and Angular 2 + +- **Building a Chat App with React, Redux, and PubNub** + https://www.pubnub.com/blog/2016-06-14-getting-started-with-pubnub-and-react/ + https://www.pubnub.com/blog/2016-06-28-reactjs-chat-app-infinite-scroll-history-using-redux/ + https://www.pubnub.com/blog/2016-07-20-adding-realtime-user-list-to-react-chat-app/ + https://www.pubnub.com/blog/2016-08-16-add-typing-indicator-to-your-react-based-chat-app/ + A four-part tutorial that walks through building a realtime chat app + #### Redux Implementation Walkthroughs diff --git a/thinking-in-react-and-flux.md b/thinking-in-react-and-flux.md index 96053db..b193d87 100644 --- a/thinking-in-react-and-flux.md +++ b/thinking-in-react-and-flux.md @@ -4,42 +4,34 @@ https://facebook.github.io/react/docs/thinking-in-react.html The original guide to breaking a UI into components and setting up data flow - - **Removing User Interface Complexity, or Why React is Awesome** http://jlongster.com/Removing-User-Interface-Complexity,-or-Why-React-is-Awesome A long walkthrough that builds up a pseudo-React-like library, demonstrating what React does and why you would want to use it. Has lots of embedded demos. - - **Describing UI State with Data** http://nicolashery.com/describing-ui-state-with-data/ Demonstrates modeling the state and actions of an application, and updating the UI based on that. - - **Common React Mistakes - Unneeded State** http://reactkungfu.com/2015/09/common-react-dot-js-mistakes-unneeded-state/ Examples of how to think about and model data and UI state - - **Understanding the Functional Revolution in Front-End Applications** http://blog.reactandbethankful.com/posts/2015/09/15/understanding-the-functional-revolution/ Higher-level tutorial describing functional programming and how it relates to Javascript, UI, and client-side applications - - **Functional UI and Components as Higher Order Functions** https://blog.risingstack.com/functional-ui-and-components-as-higher-order-functions/ Another tutorial on functional programming and how it relates to React - - **Components, React, and Flux** http://slides.com/danabramov/components-react-flux-wip#/ A fantastic HTML slideshow that discusses how to organize code as reusable components, and the basic concepts and benefits of a Flux unidirectional architecture - - **Reactive, Component-Based UIs** http://banderson.github.io/reactive-component-ui-presentation/#/ Another fantastic HTML slideshow describing the three principles of React: "functional over OOP", "stateless over stateful", "clarity over brevity" (use arrow keys to advance slides) - - **Why You Should Care About Flux** http://jaysoo.ca/2015/06/02/why-you-should-care-about-flux/ Describes the value in separating "reads" from "writes", and eliminating local state @@ -62,4 +54,8 @@ - **"Trying to understand why React prefers one-way data binding"** https://www.reddit.com/r/javascript/comments/4ni311/trying_to_understand_why_react_prefers_oneway/ - Some excellent and very informative discussion on why the "one-way data flow" paradigm is used with React, vs two-way data binding. \ No newline at end of file + Some excellent and very informative discussion on why the "one-way data flow" paradigm is used with React, vs two-way data binding. + +- **You're Missing the Point of React** + https://medium.com/@dan_abramov/youre-missing-the-point-of-react-a20e34a51e1a + Dan Abramov explains React's real value: not popularizing the virtual DOM, but its use of composition and unidirectional data flow \ No newline at end of file diff --git a/tips-and-best-practices.md b/tips-and-best-practices.md index 8a74edd..f259fc8 100644 --- a/tips-and-best-practices.md +++ b/tips-and-best-practices.md @@ -4,10 +4,6 @@ http://www.toptal.com/react/tips-and-practices Several excellent guidelines for component structure and behavior -- **Smart and Dumb Components** - https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 - Describes how to split components into two categories for separation of concerns and reusability - - **Redux Best Practices** https://medium.com/lexical-labs-engineering/redux-best-practices-64d59775802e Guidelines for tools, component structure, file layout, and async data handling @@ -68,4 +64,8 @@ - **You're Missing the Point of JSX** http://blog.andrewray.me/youre-missing-the-point-of-jsx/ - Some arguments in favor of using JSX to define React UIs \ No newline at end of file + Some arguments in favor of using JSX to define React UIs + +- **React/Redux - Best Practices and Gotchas** + http://blog.getstream.io/react-redux-best-practices-gotchas + Several useful tips for avoiding common pitfalls, structuring an application, and using various React-related tools \ No newline at end of file diff --git a/using-react-with-es6.md b/using-react-with-es6.md index 1ccb6bb..3edb7c8 100644 --- a/using-react-with-es6.md +++ b/using-react-with-es6.md @@ -23,6 +23,10 @@ http://www.newmediacampaigns.com/blog/refactoring-react-components-to-es6-classes Walks through the steps needed to convert an older-style `React.createClass()` component to use the newer ES6 class syntax instead. +- **React ES5 to ES6 Checklist** + https://github.com/cht8687/React-ES5-To-ES6-Checklist + A checklist of steps and changes to refactor your ES5-based React code to use ES6 features + #### Methods and Instance Binding @@ -37,6 +41,10 @@ - **React, ES6, Autobinding, and createClass()** http://blog.andrewray.me/react-es6-autobinding-and-createclass/ A useful review of how JS function binding works, and how to handle it in ES6 with React + +- **React Binding Patterns: 5 Approaches for Handling `this`** + https://medium.com/@housecor/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56 + Describes five different ways you can handle binding methods to handle the `this` keyword correctly #### Method Binding Utilities diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index 64ed295..931e05b 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -53,6 +53,10 @@ https://gist.github.com/markerikson/6776848172c33aaa4db882627c689e18 An overview of how the `process.env.NODE_ENV` variable is often used to define optimizations for Webpack production builds +- **Tips for faster Webpack builds** + https://www.reddit.com/r/javascript/comments/4xuknm/webpack_dashboard/d6jdl8z + A Reddit comment with several useful tips to follow when trying to speed up builds + #### Hot Module Replacement - **Webpack and Hot Module Replacement** diff --git a/webpack-tutorials.md b/webpack-tutorials.md index 8437f57..9758b2c 100644 --- a/webpack-tutorials.md +++ b/webpack-tutorials.md @@ -2,11 +2,32 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpack) for more links to documentation, plugins, people, utilities, and articles. -#### Basic Tutorials + +#### Overviews and Introductions + +- **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 + - **Egghead.io - Intro to Webpack (Playlist)** https://egghead.io/playlists/intro-to-webpack-4ca2d994 Three lessons giving a brief introduction to webpack and loaders concepts. First lesson is free. +- **Webpack - The Module Bundler** + http://alp82.github.io/webpack-experiment-slides/#/ + HTML slideshow that describes Webpack's features and links to demos + +- **Unpacking Webpack** + http://blog.tighten.co/unpacking-webpack + A useful overview of what Webpack can do and why you would want to use it. + +- **Webpack 101: An Introduction to Webpack** + http://code.hootsuite.com/webpack-101/ + A useful intro to Webpack's concepts and capabilities, with some examples. + + +#### Basic Tutorials + - **SurviveJS - Webpack** http://survivejs.com/webpack/introduction A full book online book that covers setting up Webpack for both development and production. Also touches topics such as ESLint and npm. @@ -15,10 +36,6 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac https://medium.com/@dabit3/beginner-s-guide-to-webpack-b1f1a3638460 A walkthrough for getting started with a Webpack dev setup -- **Webpack - The Module Bundler** - http://alp82.github.io/webpack-experiment-slides/#/ - HTML slideshow that describes Webpack's features and links to demos - - **Webpack Your Bags** http://blog.madewithlove.be/post/webpack-your-bags/ In-depth article describing what Webpack is, why you would want to use it, and how to set it up @@ -35,10 +52,6 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac https://github.com/danderu/learn-webpack A repository with examples and exercises to learn webpack for newbies -- **Unpacking Webpack** - http://blog.tighten.co/unpacking-webpack - A useful overview of what Webpack can do and why you would want to use it. - - **Utilizing Webpack and Babel to build a React.js App** http://tylermcginnis.com/react-js-tutorial-1-5-utilizing-webpack-and-babel-to-build-a-react-js-app/ A lesson from a larger course on React. Covers basic Webpack concepts and setup. @@ -60,10 +73,6 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac http://javascriptplayground.com/blog/2016/06/react-webpack-workflow-screencast/ A video walkthrough of the basic setup for a Webpack-based project. -- **Webpack 101: An Introduction to Webpack** - http://code.hootsuite.com/webpack-101/ - A useful intro to Webpacks concepts and capabilities, with some examples. - - **Webpack Deep Dive** http://slides.com/kentcdodds/webpack-deep-dive#/ https://github.com/kentcdodds/es6-todomvc