From 66b3ad17fae163e6ea73032a37e6411ab845e097 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Sat, 10 Dec 2016 16:21:33 -0500 Subject: [PATCH] Updates, 2016-12-11 --- README.md | 1 + basic-concepts.md | 6 +++- es6-features.md | 15 +++++--- javascript-resources.md | 24 ++++++++++--- mobx-tutorials.md | 13 ++++++- project-structure.md | 34 ++++++++---------- pros-cons-discussion.md | 18 ++++++---- react-ajax.md | 6 +++- react-architecture.md | 14 +++++++- react-component-patterns.md | 47 +++++++++++++++++++++--- react-forms.md | 6 +++- react-implementation.md | 4 +++ react-performance.md | 15 +++++++- react-redux-testing.md | 15 +++++++- react-server-rendering.md | 6 +++- react-state-management.md | 6 ++-- react-tutorials.md | 5 +++ redux-architecture.md | 20 ++++++++--- redux-side-effects.md | 12 +++++-- redux-techniques.md | 5 ++- redux-without-react.md | 25 +++++++++++++ static-typing.md | 66 ++++++++++++++++++++++++---------- webpack-advanced-techniques.md | 8 +++++ webpack-tutorials.md | 11 ++++++ 24 files changed, 308 insertions(+), 74 deletions(-) create mode 100644 redux-without-react.md diff --git a/README.md b/README.md index cd64258..3279ae3 100644 --- a/README.md +++ b/README.md @@ -52,6 +52,7 @@ You might also want to check out my categorized list of Redux-related addons, li - [Redux Middleware](./redux-middleware.md) - [Redux Side Effects](redux-side-effects.md) - [Redux Tips and Techniques](redux-techniques.md) + - [Using Redux Without React](./redux-without-react.md) - **Other** - [Webpack Advanced Techniques](webpack-advanced-techniques.md) - [Static Typing](./static-typing.md) diff --git a/basic-concepts.md b/basic-concepts.md index e041d55..8f96f28 100644 --- a/basic-concepts.md +++ b/basic-concepts.md @@ -47,7 +47,7 @@ https://medium.com/@shubheksha/javascript-package-managers-101-9afd926add0a An overview of what packages and package managers are, some related terms, and how these tools work. - + #### Suggested Learning Approaches - **A Study Plan to Cure Javascript Fatigue** @@ -74,6 +74,10 @@ - **Front-End Developer Handbook** https://www.frontendhandbook.com/ A guide that anyone could use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it. + +- **Top Javascript Frameworks and Topics to Learn in 2017** + https://medium.com/javascript-scene/top-javascript-frameworks-topics-to-learn-in-2017-700a397b711 + Eric Elliott gives some solid advice on what concepts, tools, and technologies are most valuable to learn today, as well as what related technologies are useful but optional. #### General Suggestions for Learning diff --git a/es6-features.md b/es6-features.md index d205032..b1eb601 100644 --- a/es6-features.md +++ b/es6-features.md @@ -71,9 +71,8 @@ http://appendto.com/2016/06/why-do-es6-classes-exist-and-why-now/ Digs into some of the intricacies of ES6 classes, and some of the pros and cons around using them -- **When 'not' to use arrow functions** - http://rainsoft.io/when-not-to-use-arrow-functions-in-javascript/ - An in-depth look at when you should stick with standard JS functions instead of arrow functions + + #### Specific Features @@ -107,8 +106,6 @@ https://www.bennadel.com/blog/3123-using-es6-generators-and-yield-to-implement-asynchronous-workflows-in-javascript.htm A dive into how generators work, and how they can be used to handle async behavior - - - **A Practical Introduction to ES6 Generator Functions** http://thejsguy.com/2016/10/15/a-practical-introduction-to-es6-generator-functions.html Some practical examples discussing what generator functions are, how they work, and what they can be used for. @@ -117,6 +114,14 @@ http://goshakkk.name/javascript-generators-understanding-sample-use-cases/ A simple thinking pattern for easily understanding generators, plus 3 practical applications. +- **My New Favorite ES6 Toy: Destructured Objects as Parameters** + https://css-tricks.com/new-favorite-es6-toy-destructured-objects-parameters/ + An example of using objects and destructuring to act like named parameters + +- **Extract Nested Data from Arrays and Objects with Destructuring Assignment** + https://angulartoreact.com/es6-destructuring/ + Examples of how destructuring can make it easy to create new variables from other data. + #### Promises diff --git a/javascript-resources.md b/javascript-resources.md index caecf00..b9de2a7 100644 --- a/javascript-resources.md +++ b/javascript-resources.md @@ -47,7 +47,7 @@ While this list is primarily focused on learning React and Redux, and generally -#### Tutorials and Books +#### Tutorials, Books, and Courses - **Eloquent Javascript** http://eloquentjavascript.net/ @@ -57,9 +57,9 @@ While this list is primarily focused on learning React and Redux, and generally https://github.com/getify/You-Dont-Know-JS An online book series intended to teach all aspects of Javascript, including the "tougher" parts. -- **Speaking Javascript** - http://speakingjs.com/es5/index.html - A free online book on Javascript from Dr. Axel Rauschmayer. +- **Exploring Javascript** + http://exploringjs.com/ + Multiple free online books from Dr. Axel Rauschmayer. "Speaking Javascript" covers all of Javascript through ES5; "Exploring ES6" covers ES6 in depth; and other books look at versions of Javascript after ES6 and how to set up an ES6+ development environment. - **23 Free Javascript Books** https://hackerlists.com/free-javascript-books/ @@ -84,6 +84,14 @@ While this list is primarily focused on learning React and Redux, and generally http://domenlightenment.com/ A deep look at how to interact with the DOM from Javascript, without using a library or a framework. +- **Javascript30** + https://javascript30.com/ + A free course from Wes Bos that teaches how to build 30 different interesting projects, using only "vanilla" Javascript. + +- **Javascript; The Core** + http://dmitrysoshnikov.com/ecmascript/javascript-the-core/ + A dive into core concepts of how Javascript objects behave: prototypes, constructors, scopes, closures, and `this`. + #### Interactive Exercises @@ -120,6 +128,14 @@ While this list is primarily focused on learning React and Redux, and generally - **Understanding Javascript Function Invocation and `this`** http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/ An excellent explanation of how function calls and the `this` keyword work + +- **When 'not' to use arrow functions** + http://rainsoft.io/when-not-to-use-arrow-functions-in-javascript/ + An in-depth look at when you should stick with standard JS functions instead of arrow functions + +- **Do ES6 Arrow Functions Really Solve "this" in Javascript?** + https://derickbailey.com/2015/09/28/do-es6-arrow-functions-really-solve-this-in-javascript/ + A dive into how `this` works inside of arrow functions, and some places when they may not be appropriate for use. - **Grokking Scope in Javascript** https://code.tutsplus.com/tutorials/grokking-scope-in-javascript--cms-26259 diff --git a/mobx-tutorials.md b/mobx-tutorials.md index 6c6a14e..9433a56 100644 --- a/mobx-tutorials.md +++ b/mobx-tutorials.md @@ -37,6 +37,13 @@ - **Testing React and MobX** https://semaphoreci.com/community/tutorials/how-to-test-react-and-mobx-with-jest A look at ways to test React components and MobX logic + + +#### Other + +- **One awkward thing about MobX: Complex Models** + https://swizec.com/blog/awkward-thing-mobx-complex-models/swizec/7260 + Discussion of potential issues when handling complex models, and some possible workarounds. #### MobX and Redux Comparisons @@ -56,4 +63,8 @@ A great video to understand the differences between MobX and Redux. - **"How does MobX compare with Redux, and which is better for React app development?"** https://hashnode.com/post/how-does-mobx-compare-with-redux-and-which-one-is-better-for-react-app-development-cisrch8eh0030g5532qeds1ja/answer/citq8rptk010cus530wdzdg69 - An excellent answer comparing the two libraries and their philosophies \ No newline at end of file + An excellent answer comparing the two libraries and their philosophies + +- **Redux vs MobX** + https://medium.com/@himrc/redux-vs-mobx-a42c8950f3 + Some quick pros and cons of each, links to other discussions, and thoughts on when to use them. \ No newline at end of file diff --git a/project-structure.md b/project-structure.md index e48f01f..7d9adbf 100644 --- a/project-structure.md +++ b/project-structure.md @@ -2,6 +2,7 @@ **Related topics**: +- [Boilerplates and Starter Kits](./boilerplate-and-starter-kits.md) - [React Component Patterns](./react-component-patterns.md) - [React State Management](./react-state-management.md) - [React and Forms](./react-forms.md) @@ -18,7 +19,8 @@ - **How to Scale React Applications** https://www.smashingmagazine.com/2016/09/how-to-scale-react-applications/ - Max Stoiber, creator of the popular "React-Boilerplate" starter kit, describes the approaches they use to lay out projects based on features. + https://twitter.com/dan_abramov/status/773912160896421889 + Max Stoiber, creator of the popular "React-Boilerplate" starter kit, describes the approaches they use to lay out projects based on features. The Twitter thread has discussion on some tradeoffs, including understand that Redux actions are "global", not scoped. - **Organizing Large React Applications** http://engineering.kapost.com/2016/01/organizing-large-react-applications/ @@ -63,25 +65,17 @@ - **How to Structure real world Redux/React Applications** https://medium.com/@yiquanzhou/how-to-structure-real-world-redux-react-application-d61e66a7dd36 Another look at structuring code, based on business logic, data domains, and reusability. - - -#### React Integration - -- **How to Write a Google Maps React Component** - https://www.fullstackreact.com/articles/how-to-write-a-google-maps-react-component/ - Demonstrates how to wrap a third-party component that has an imperative API, lazy-loading the dependencies, and more. -- **Building SVG Maps with React** - https://blog.komand.com/building-svg-maps-with-react - Demonstrates building a component that zooms and pans SVG graphics based on user input. - -- **How to Sprinkle ReactJS into an Existing Web Application** - https://scotch.io/tutorials/how-to-sprinkle-reactjs-into-an-existing-web-application - Looks at how to incrementally add some React-based functionality into an existing app. - -- **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 +- **When a good plan comes together: React project structure for scaling** + http://thereactionary.net/when-a-good-plan-comes-together-react-project-structure-for-scaling/ + More discussion of tradeoffs in various structure approaches. + +#### Project Setup - \ No newline at end of file +- **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/pros-cons-discussion.md b/pros-cons-discussion.md index 2e49a50..c428abf 100644 --- a/pros-cons-discussion.md +++ b/pros-cons-discussion.md @@ -1,5 +1,9 @@ ### React/Flux/Redux Pros, Cons, and Discussion +**Related Topics**: +- [Redux addons catalog - Apps and Examples](https://github.com/markerikson/redux-ecosystem-links/blob/master/apps-and-examples.md): Links to various projects built with Redux, both purpose-built-examples and "real" applications, as well as several Redux usage stories +- [Redux Architecture and Best Practices](./redux-architecture.md): many "lessons learned"-type articles after having used Redux + #### High-Level Comparisons and Business Cases @@ -82,9 +86,10 @@ Discussion of some of the actual practical advantages of using Redux, with some thoughts on similar structures in ClojureScript. -- **"React Tutorial: Cloning Yelp"** +- **"React Tutorial: Cloning Yelp"** + https://news.ycombinator.com/item?id=11778663 https://news.ycombinator.com/item?id=11782234 - A great quote on the inherent complexity of developing any application (from yet another "Javascript Fatigue"-type discussion thread + Around 250 comments on React, dependency management, tutorial writing, and library churn. Also a great quote on the inherent complexity of developing any application. - **"9 things every ReactJS beginner should know"** https://www.reddit.com/r/javascript/comments/42fo3m/9_things_every_reactjs_beginner_should_know/ @@ -128,10 +133,6 @@ similar structures in ClojureScript. https://news.ycombinator.com/item?id=11890229 Includes an extended discussion on use of Redux with forms -- **"React Tutorial: Cloning Yelp"** - https://news.ycombinator.com/item?id=11778663 - Around 250 comments on React, dependency management, tutorial writing, and library churn. - - **"Why Learning Angular 2 was Excruciating"** https://news.ycombinator.com/item?id=12534296 https://news.ycombinator.com/item?id=12536634 @@ -151,6 +152,11 @@ similar structures in ClojureScript. https://www.reddit.com/r/javascript/comments/59ax4f/youtube_is_being_rebuilt_on_web_components_and/d97rsdd/ Some interesting thoughts on how various frameworks have approached composition, and how React helps make it more approachable. +- **"Modern JS developer workflow makes me sad"** + https://www.reddit.com/r/javascript/comments/5fphiw/modern_js_developer_workflow_makes_me_sad/ + A fairly well-written rant about problems a dev was experiencing due to complexity of build tools. There's extended discussion with some excellent suggestions and advice, and ultimately the author was able to resolve some of the complaints about build times and sourcemaps. + + #### React's PATENTS License - **Facebook Open Source License FAQ** diff --git a/react-ajax.md b/react-ajax.md index 7395f74..460d6dd 100644 --- a/react-ajax.md +++ b/react-ajax.md @@ -34,4 +34,8 @@ - **Handling AJAX In Your React Application with Agility** https://hackernoon.com/handling-ajax-in-your-react-application-with-agility-413f1f21fc70 - Describes three approaches to fetching data in a React app: within a React component, using the Relay GraphQL library, and using Redux middleware \ No newline at end of file + Describes three approaches to fetching data in a React app: within a React component, using the Relay GraphQL library, and using Redux middleware + +- **React-Redux issue #210: "dispatching in componentWillMount?"** + https://github.com/reactjs/react-redux/issues/210#issuecomment-244774674 + Some valuable extended discussion about how managing requests and data really involves several distinct possible states. \ No newline at end of file diff --git a/react-architecture.md b/react-architecture.md index 4355c88..ed64ba8 100644 --- a/react-architecture.md +++ b/react-architecture.md @@ -75,6 +75,14 @@ https://medium.com/javascript-inside/some-thoughts-on-function-components-in-react-cb2938686bc7 Suggestions for ways to approach writing components, particularly using React's functional component syntax +- **Why React is Awesome at Scale** + https://medium.com/@cowi4030/why-react-is-awesome-at-scale-acfd9ce53c23 + Examples of how React's use of declarative rendering simplifies the need to think about imperative state transitions. + +- **"What are the biggest 'aha' moments you had while learning React?"** + https://www.reddit.com/r/reactjs/comments/5gmywc/what_were_the_biggest_aha_moments_you_had_while/ + Some great discussion of important concepts and things to understand about React. + #### React Best Practices @@ -141,4 +149,8 @@ - **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. \ No newline at end of file + Some very good best practices for writing components. + +- **The Top 5 [Tips] of Effective React** + https://code.kiwi.com/the-top-5-of-effective-react-984e54cceac3 + Tips include using container/presentational components, keeping components simple, and more. \ No newline at end of file diff --git a/react-component-patterns.md b/react-component-patterns.md index 9ed12a8..c434f03 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -192,6 +192,37 @@ https://www.okgrow.com/posts/compose-react-sphoc Thoughts and examples of composing multiple small focused HOCs together into a final combined HOC + +#### Wrapping Non-React Code + +- **React and third-party libraries** + http://krasimirtsonev.com/blog/article/react-third-party-library-integration + Demonstrates how to build a React component that wraps up non-React code like a jQuery UI plugin + +- **Using React and jQuery Together** + http://tech.oyster.com/using-react-and-jquery-together/ + Examples of how to use jQuery inside a React component, and React inside jQuery-controlled elements + +- **Using React and PixiJS** + http://www.rinconstrategies.io/using-react-and-pixijs.html + Demonstrates how to use React's component lifecycle methods to control the imperative PixiJS API + +- **Mapping declarative React components to imperative external APIs** + http://reactkungfu.com/2016/02/mapping-declarative-react-components-to-imperative-external-api/ + A quick example of using `componentWillReceiveProps` to pass updates to an imperative API + +- **How to Write a Google Maps React Component** + https://www.fullstackreact.com/articles/how-to-write-a-google-maps-react-component/ + Demonstrates how to wrap a third-party component that has an imperative API, lazy-loading the dependencies, and more. + +- **Building SVG Maps with React** + https://blog.komand.com/building-svg-maps-with-react + Demonstrates building a component that zooms and pans SVG graphics based on user input. + +- **How to Sprinkle ReactJS into an Existing Web Application** + https://scotch.io/tutorials/how-to-sprinkle-reactjs-into-an-existing-web-application + Looks at how to incrementally add some React-based functionality into an existing app, including interaction with jQuery. + #### Other Component Patterns @@ -222,7 +253,15 @@ - **"What is the ideal way to pass data to a callback prop?** https://gist.github.com/jazlalli/fdee443405680f96d19211daa15d1d38 Discussion and examples of various ways to pass data to callbacks between children and parents - -- **React and third-party libraries** - http://krasimirtsonev.com/blog/article/react-third-party-library-integration - Demonstrates how to build a React component that wraps up non-React code like a jQuery UI plugin \ No newline at end of file + +- **How to Render Components Outside the Main React App** + https://blog.komand.com/how-to-render-components-outside-the-main-react-app + An example of a technique that's also know as the "portal" approach, commonly used for rendering modals on top of the rest of an application. + +- **Modals in React** + https://medium.com/@david.gilbertson/modals-in-react-f6c3ff9f4701 + A demonstration of building a reusable modal component using the "portals" technique + +- **On Privacy with React Context** + https://medium.com/@amireh/on-privacy-with-react-context-aa77ffd08509 + Thoughts on some potential issues with various component/state patterns (globals, Redux, Flux, Ember), and a sketch of a notional approach that might help solve some of those issues. \ No newline at end of file diff --git a/react-forms.md b/react-forms.md index 3351499..ac841ab 100644 --- a/react-forms.md +++ b/react-forms.md @@ -110,4 +110,8 @@ - **Creating new fields and widgets for Mozilla's react-jsonschema-form** https://jeffersonheard.github.io/2016/11/creating-new-fields-and-widgets-for-mozillas-react-jsonschema-form/ - Examples of working with the react-jsonschema-form library, including defining form schemas, gotchas, and customization with specific widgets and types \ No newline at end of file + Examples of working with the react-jsonschema-form library, including defining form schemas, gotchas, and customization with specific widgets and types + +- **List or Form, why not both? Making a list with a built in editor in React** + http://thereactionary.net/list-or-form-why-not-both-making-a-list-with-a-built-in-editor-in-react/ + Builds an example of a list with the ability to do inline editing of items. \ No newline at end of file diff --git a/react-implementation.md b/react-implementation.md index 2966fff..08caf6a 100644 --- a/react-implementation.md +++ b/react-implementation.md @@ -94,6 +94,10 @@ https://www.youtube.com/watch?v=VVxQAoNK_XQ A talk exploring how a React renderer works, and how to implement a tiny renderer +- **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 + #### React Fiber diff --git a/react-performance.md b/react-performance.md index 920b109..cb1c451 100644 --- a/react-performance.md +++ b/react-performance.md @@ -158,6 +158,13 @@ Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md) A comment discussing a number of potential negative tradeoffs when using Immutable.js, including both performance anti-patterns and API issues +- **Persistent data structures and structural sharing: a reason to use Immutable.js** + https://medium.com/@dtinth/immutable-js-persistent-data-structures-and-structural-sharing-6d163fbd73d2 + https://www.reddit.com/r/reactjs/comments/5h7pqz/persistent_data_structures_and_structural_sharing/ + https://twitter.com/acemarke/status/806933658204372992 + An excellent article that describes how Immutable.js's implementation can improve performance while updating large objects, with benchmarks. There's further good discussion on Reddit, and in the Twitter thread, Immutable.js author Lee Byron confirms that calling `toJS()` is _very_ expensive and should definitely not be used in a Redux `mapState` function. + + #### Redux Performance - **High Performance Redux** @@ -198,4 +205,10 @@ Also see [Webpack Advanced Techniques](./webpack-advanced-techniques.md) - **React/Redux Performance Tuning Tips** https://medium.com/@arikmaor/react-redux-performance-tuning-tips-cef1a6c50759 - A number of suggestions for improved performance with Redux \ No newline at end of file + A number of suggestions for improved performance with Redux + +- **An artificial example where MobX really shines and Redux is not really suited** + https://medium.com/@dtinth/an-artificial-example-where-mobx-really-shines-and-redux-is-not-really-suited-for-it-1a58313c0c70 + https://www.reddit.com/r/reactjs/comments/5hf4d4/an_artificial_example_where_mobx_really_shines/ + https://github.com/dtinth/pixelpaint/pull/1 + An excellent in-depth article that sets up a specific benchmark example, and compares the performance of a MobX implementation vs several different Redux-based implementations. There's valuable discussion in the Reddit comments, and Dan Abramov submitted a PR to the sample project that demonstrates some fairly simple changes that result in improved Redux performance. \ No newline at end of file diff --git a/react-redux-testing.md b/react-redux-testing.md index 6fb2a69..0394723 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -150,6 +150,15 @@ https://medium.com/@TuckerConnelly/good-practices-for-testing-react-apps-3a64154fa3b1 Thoughts on writing end-to-end tests, unit tests, and integration tests for Reaact applications, including treating components as "black boxes". +- **Testing React components with Jest and Enzyme** + https://hackernoon.com/testing-react-components-with-jest-and-enzyme-41d592c174f + Examples of how to use Jest's snapshot testing and Enzyme's component API to write component tests + +- **Testing with Webpack 2, inject-loader, Karma, Mocha, Chai, and More** + https://cafedev.org/article/2016/12/testing-with-wepack-2-inject-loader-karma-mocha-chai-and-sinon/ + Examples of using these tools to test some complex code, including mocking out dependencies + + #### General Testing, Tools, and Setup - **Javascript Testing: Unit vs Functional vs Integration** @@ -183,4 +192,8 @@ - **Migrating to Jest** https://medium.com/@kentcdodds/migrating-to-jest-881f75366e7e - Kent C. Dodds describes why and how his team at Paypal switched their test setup to use Jest instead of Ava. \ No newline at end of file + Kent C. Dodds describes why and how his team at Paypal switched their test setup to use Jest instead of Ava. + +- **Web Application Test Strategy** + https://blog.scottnonnenberg.com/web-application-test-strategy/ + Thoughts on a "test pyramid" approach to testing, balancing speed and results between unit tests, integration tests, and automation. \ No newline at end of file diff --git a/react-server-rendering.md b/react-server-rendering.md index 19b5d04..c3586c7 100644 --- a/react-server-rendering.md +++ b/react-server-rendering.md @@ -15,4 +15,8 @@ - **React is gaining ground as a universal server side templating system** https://medium.com/@velmu/react-is-gaining-ground-as-a-universal-server-side-templating-system-26fe02eebe12 - Some thoughts on using React as a template rendering engine, integrated into various server-side language stacks. \ No newline at end of file + Some thoughts on using React as a template rendering engine, integrated into various server-side language stacks. + +- **Server Side React** + https://remysharp.com/2016/12/07/server-side-react + A well-written article detailing lessons learned trying to use React to render on the server, including tools used, bumps in the road and links to further resources \ No newline at end of file diff --git a/react-state-management.md b/react-state-management.md index 0e8088a..28fc806 100644 --- a/react-state-management.md +++ b/react-state-management.md @@ -27,8 +27,6 @@ https://medium.com/@justintulk/react-anti-patterns-props-in-initial-state-28687846cc2e Discussion of why using props to initialize a component's state may or may not be a bad idea. - - - **Best Practices for Component State in React** http://brewhouse.io/blog/2015/03/24/best-practices-for-component-state-in-reactjs.html Some excellent suggestions and approaches for state handling and structure. @@ -36,6 +34,10 @@ - **A Visual Guide to State in React** https://daveceddia.com/visual-guide-to-state-in-react/ Describes what "state" is, what kinds of data should be included into React state, and how state flow relates to component updates. + +- **ReactJS: Props vs State** + http://lucybain.com/blog/2016/react-state-vs-pros/ + Explains that "props" are data passed in to a component, while "state" is data managed inside a component. #### Using `setState` diff --git a/react-tutorials.md b/react-tutorials.md index c2d4d37..8040023 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -104,6 +104,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. +- **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. + #### Project-Based Tutorials @@ -229,6 +233,7 @@ http://www.eloquentwebapp.com/instagram-app-node-react-redux/ An in-depth tutorial that demonstrates several advanced React concepts, including routing, hot loading, use of Redux and redux-saga, and more. + #### 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-architecture.md b/redux-architecture.md index d7a3112..e1cac94 100644 --- a/redux-architecture.md +++ b/redux-architecture.md @@ -1,5 +1,9 @@ ### Redux Architecture and Best Practices +**Related Topics**: +- [Redux addons catalog - Apps and Examples](https://github.com/markerikson/redux-ecosystem-links/blob/master/apps-and-examples.md): Links to various projects built with Redux, both purpose-built-examples and "real" applications, as well as several Redux usage stories + + #### When Should You Use Redux? - **You Might Not Need Redux** @@ -134,6 +138,14 @@ - **Learning and scaling a React/Redux app with a distributed team** https://devblog.xero.com/learning-and-scaling-a-react-redux-app-with-a-distributed-team-e4c397def187 Lessons learned from working with a large application with many features, including use of common components, sagas, project structure, and utility libraries + +- **Redux at Knewton** + https://tech.knewton.com/blog/2016/11/redux-at-knewton/ + Discussion of how Redux helped Knewton improve their app, including dev middleware to catch accidental mutations, normalization to help with caching, and other tradeoffs. + +- **4 Things for Efficient Redux** + https://blog.spacelab.team/4-things-for-efficient-redux-17e87b4cd6cb + Suggestions for improved Redux apps based on experience, including using Immutable.js, use of `combineReducers`, listening for actions in multiple reducers, and "aliasing" actions. #### Encapsulation and Reusability @@ -210,10 +222,6 @@ https://medium.com/@totaldis/redux-saga-in-action-s-f7d11cffa35a Some interesting thoughts on ways to organize the majority of your app's logic using redux-saga -- **Scalable Single-Page Application Architecture with Redux and Angular 2** - http://blog.mgechev.com/2016/04/10/scalable-javascript-single-page-app-angular2-application-architecture/ - An in-depth article covering how to architect an application using Redux, Angular 2, and RxJS. - - **redux-scuttlebutt; eventually consistent shared state among peers** https://medium.com/@grrowl/redux-scuttlebutt-eventually-consistent-shared-state-among-peers-191d48102079 Describes how to use the Redux-Scuttlebutt library to sync actions and updates between multiple instances of a Redux application @@ -233,3 +241,7 @@ - **Using React(-Native) with Redux and Redux Saga** https://medium.com/@marcelschulze/using-react-native-with-redux-and-redux-saga-a-new-proposal-ba71f151546f Description of a decoupled saga-based app structure, similar to that described in "Redux Saga in Action" + +- **Minimal Redux Setup** + https://medium.com/@benevolentNinja/minimal-redux-setup-e6a10fcbcb68 + Thoughts on using a single reducer and a single "UPDATE" action type \ No newline at end of file diff --git a/redux-side-effects.md b/redux-side-effects.md index 17afbb2..93be787 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -39,6 +39,10 @@ https://twitter.com/intelligibabble/status/800103510624727040 https://twitter.com/dan_abramov/status/800310164792414208 Some discussion on the pros and cons of redux-thunk's flexibility and usage, as well as possible issues with multiple dispatches in a row. + +- **A simplified approach to calling APIs with Redux** + http://www.sohamkamani.com/blog/2016/06/05/redux-apis/ + A well-written example of creating a "data service" middleware that handles API requests, as well as examples of handling some request status state. #### Sagas @@ -99,8 +103,12 @@ Examples of how Xero's async logic for their dashboard evolved over team, from nested callbacks to promises to Redux with sagas -#### Observables +#### Other Side Effect Approaches - **Epic Middleware in Redux** https://medium.com/@kevinsalter/epic-middleware-in-redux-e4385b6ff7c6 - Discussion and examples of using Redux-Observable and RxJS to create "epics" which can transform actions. \ No newline at end of file + Discussion and examples of using Redux-Observable and RxJS to create "epics" which can transform actions. + +- **Better async Redux** + https://blog.scottnonnenberg.com/better-async-redux-i18n-and-node-js-versions/ + Comparisons and examples of using Redux-Loop for declarative side effects \ No newline at end of file diff --git a/redux-techniques.md b/redux-techniques.md index 85bec15..98ddde5 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -30,7 +30,10 @@ - **Improve your development workflow with the Redux DevTools Extension** https://medium.com/@zalmoxis/improve-your-development-workflow-with-redux-devtools-extension-f0379227ff83 The author of the Redux DevTools extension describes new features, including "pause/locking" for iteration on behavior, and some changes needed to add it to the store. - + +- **Time Travel in React Redux apps using the Redux DevTools** + https://onsen.io/blog/react-redux-devtools-with-time-travel/ + Examples of configuring a Redux store to use the DevTools enhancers, and using both the DevTools components and the browser extension for debugging. #### Reducers diff --git a/redux-without-react.md b/redux-without-react.md new file mode 100644 index 0000000..19726e6 --- /dev/null +++ b/redux-without-react.md @@ -0,0 +1,25 @@ +### Using Redux without React + +- **Redux without React - State Management in Vanilla Javascript** + https://www.sitepoint.com/redux-without-react-state-management-vanilla-javascript/ + A tutorial teaching Redux usage with a plain JS UI layer on top + +- **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 Redux in TypeScript with Angular 2** + http://blog.ng-book.com/introduction-to-redux-with-typescript-and-angular-2/ + An extended tutorial that builds up a mini-Redux in TypeScript, then transitions to building an application + +- **Managing State in Aurelia: How to Use Aurelia with Redux** + https://www.sitepoint.com/managing-state-aurelia-with-redux/ + A tutorial that builds a small Markdown editor three ways: pure Aurelia with data binding, Aurelia with Redux to manage state, and then implementation of undo/redo on top. + +- **Scalable Single-Page Application Architecture with Redux and Angular 2** + http://blog.mgechev.com/2016/04/10/scalable-javascript-single-page-app-angular2-application-architecture/ + An in-depth article covering how to architect an application using Redux, Angular 2, and RxJS. + +- **Using ember-changeset with ember-redux** + https://emberway.io/using-ember-changeset-with-ember-redux-200a7e46c59a + Examples of using a tool called ember-changeset to handle in-progress form edits in conjunction with the ember-redux bindings. \ No newline at end of file diff --git a/static-typing.md b/static-typing.md index 7741fed..0bb8bb7 100644 --- a/static-typing.md +++ b/static-typing.md @@ -1,6 +1,18 @@ ### Static Typing +#### Pros and Cons + +- **The Shocking Secret about Static Types / You Might Not Need Typescript (or Static Types)** + https://medium.com/javascript-scene/the-shocking-secret-about-static-types-514d39bf30a3 + https://medium.com/javascript-scene/you-might-not-need-typescript-or-static-types-aa7cb670a77b Eric Elliott argues against use of static types in Javascript, on the grounds that the tradeoffs aren't worth it and that TDD and code review provide more benefit in reducing bugs. + +- **Why use static types in Javascript?** + https://dev.to/iampeekay/why-use-static-types-in-javascript-part-1 + Part 1 of a 4-part series on static typing: intro to Flow syntax, advantages and disadvantages of static types, and whether they should be used with Javascript. + + + #### React PropTypes - **React Docs: Typechecking With PropTypes** @@ -22,8 +34,6 @@ - **React: Validating Children** http://www.mattzabriskie.com/blog/react-validating-children Examples of using PropTypes to enforce what children can be passed to a component - - #### TypeScript @@ -31,13 +41,21 @@ - **TypeScript Deep Dive** https://basarat.gitbooks.io/typescript/content/ An online book that digs into numerous TypeScript topics - - **Immutable.js Records in TypeScript** https://spin.atomicobject.com/2016/11/30/immutable-js-records-in-typescript/ Examples of setting up typing for custom classes based on Immutable.js's Record class. -#### Flow +- **Strongly Typing Injected React Props** + https://medium.com/@prashaantt/strongly-typing-injected-react-props-635a6828acaf + A demonstration of using TypeScript to define prop types for a React component, and enforcing behavior based on that. + +- **Hybrid Types in TypeScript** + https://turbomack.github.io/posts/2016-12-07-hybrid-types-in-typescript.html + Examples of adding type checking to some dynamic code that uses d3 for visualization. + + +#### Flow Tutorials - **The Fundamentals of Flow in 10-ish Minutes** https://www.youtube.com/watch?v=xWMuAUbXcdQ @@ -67,14 +85,13 @@ http://jaysoo.ca/2016/08/23/why-you-need-types/ Some thoughts on how static typing can help development, with examples using Flow. -- **Runtime Introspection of Flow Types** - https://medium.com/@joe_stant/runtime-introspection-of-flow-types-ddb7e5b042a5 - A look at some ways to potentially use Flow types for further analysis using various tooling +- **Better docs and static analysis** + https://blog.scottnonnenberg.com/better-docs-and-static-analysis/ + A walk through setting up Flow, some possible problems you might encounter, and ways to customize and improve the typing process. + + +#### Redux and Static Types -- **Phantom Types with Flow** - https://medium.com/@gcanti/phantom-types-with-flow-828aff73232b - Description of an advanced technique for tracking data flow using types - - **Checking React and Redux Code with Flow** http://djcordhose.github.io/react-intro-live-coding/2016_jsunconf.html#/ A slideshow that shows the basics of adding type information to Redux-based code @@ -90,17 +107,28 @@ - **Redux Flow Tutorial** http://dchambers.github.io/articles/redux-flow-tutorial/ Covers how to set up Flow for type-checking a Redux application - -- **Exhaustive switch in Flow** - https://ouicar.github.io/2016/08/08/exhaustive-switch.html - A trick to help catch missing case errors in switch statements. - + - **Typed Redux** https://blog.callstack.io/typed-redux-2aa8bff926ff Examples of how to use Flow to add typing to Redux apps -#### Comparisons +#### Advancing Typing Techniques + +- **Runtime Introspection of Flow Types** + https://medium.com/@joe_stant/runtime-introspection-of-flow-types-ddb7e5b042a5 + A look at some ways to potentially use Flow types for further analysis using various tooling + +- **Phantom Types with Flow** + https://medium.com/@gcanti/phantom-types-with-flow-828aff73232b + Description of an advanced technique for tracking data flow using types + +- **Exhaustive switch in Flow** + https://ouicar.github.io/2016/08/08/exhaustive-switch.html + A trick to help catch missing case errors in switch statements. + + +#### Tool Comparisons - **Flow as a replacement for PropTypes** http://blog.rstankov.com/flow-as-replacement-for-proptype/ @@ -112,4 +140,6 @@ - **Typescript vs Flow** https://gist.github.com/voltrevo/ecb5b7292707d29b13ae453ae0b529d9 - A comparison of common features, advantages in either system, missing features, and other aspects. \ No newline at end of file + A comparison of common features, advantages in either system, missing features, and other aspects. + +- \ No newline at end of file diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index 364f5ac..3ef61f4 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -100,6 +100,14 @@ http://odetocode.com/blogs/scott/archive/2016/12/01/building-vendor-and-feature-bundles-with-webpack.aspx Demonstrates using DllPlugin to build a vendor bundle, and generating multiple bundles for different features by dynamically building up multiple entry points. +- **Unlocking a Mystery: Visualizing the Common Webpack Bundles** + https://www.redfin.com/blog/2016/12/unlocking-a-mystery-visualizing-the-common-webpack-bundles.html + A recap of some previous tools used to analyze Webpack bundle sizes, and description of a new tool they built to provide better bundle visualization + +- **Analysing and minimising the size of client side bundle with Webpack and source-map-explorer** + https://medium.com/@nimgrg/analysing-and-minimising-the-size-of-client-side-bundle-with-webpack-and-source-map-explorer-41096559beca + Tips on using source-map-explorer to check the size of code included in a minified bundle, and removing unneeded polyfills + #### Hot Module Replacement diff --git a/webpack-tutorials.md b/webpack-tutorials.md index 0171197..b445a83 100644 --- a/webpack-tutorials.md +++ b/webpack-tutorials.md @@ -32,6 +32,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac - **Webpack: The Missing Guide** http://www.eloquentwebapp.com/webpack-missing-guide/ An intro to what Webpack is, what it can do, and how to use it. + +- **What is Webpack and what can it do for you?** + http://x-team.com/2016/09/webpack-can-absolute-beginners/ + A plain-English explanation of what Webpack is and what problems it can help solve. #### Basic Tutorials @@ -171,3 +175,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac https://github.com/chrisvfritz/maintainable-webpack-config An experiment to make Webpack configs testable and maintainable +- **webpack-blocks** + https://github.com/andywer/webpack-blocks + Functional building blocks for the webpack config. Compose it using feature middlewares like Babel, PostCSS, HMR (Hot Module Replacement), … + +- **webpack-flow** + https://github.com/webpack-flow/webpack-flow + A set of utilities to manage sharable webpack configs and make them reusable. \ No newline at end of file