From 648995150d0f76f46e08aa03590dd59e80e90d88 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Sun, 23 Oct 2016 21:22:58 -0400 Subject: [PATCH] Updates, 2016-10-23 Add React Native, React Server Rendering, and Static Types pages Rework MobX page for clarity --- README.md | 4 +++ es6-features.md | 8 +++++ javascript-resources.md | 3 ++ mobx-tutorials.md | 58 ++++++++++++++++++++++++---------- node-js-and-npm.md | 6 +++- pros-cons-discussion.md | 6 ++++ react-component-patterns.md | 16 +++++++--- react-forms.md | 7 +++- react-native.md | 12 +++++++ react-performance.md | 7 ++++ react-redux-architecture.md | 12 +++++++ react-redux-testing.md | 4 +++ react-server-rendering.md | 9 ++++++ react-state-management.md | 4 +++ react-styling.md | 18 ++++++++++- react-tutorials.md | 26 +++++++++++---- redux-techniques.md | 22 +++++++++++-- redux-tutorials.md | 24 ++++++++++++++ static-typing.md | 51 ++++++++++++++++++++++++++++++ thinking-in-react-and-flux.md | 6 +++- tips-and-best-practices.md | 10 +++++- webpack-advanced-techniques.md | 3 ++ 22 files changed, 282 insertions(+), 34 deletions(-) create mode 100644 react-native.md create mode 100644 react-server-rendering.md create mode 100644 static-typing.md diff --git a/README.md b/README.md index 84430d6..8f14139 100644 --- a/README.md +++ b/README.md @@ -30,6 +30,7 @@ You might also want to check out my categorized list of Redux-related addons, li - [Functional Programming](functional-programming.md) - [Immutable Data](immutable-data.md) - [React/Redux Testing](react-redux-testing.md) +- [React Native](./react-native.md) #### Advanced Topics @@ -38,11 +39,14 @@ You might also want to check out my categorized list of Redux-related addons, li - [React and Forms](./react-forms.md) - [React and AJAX](./react-ajax.md) - [React Styling](./react-styling.md) +- [React Server Rendering](./react-server-rendering.md) - [React/Redux Performance](react-performance.md) - [React/Redux Architecture](react-redux-architecture.md) - [Redux Side Effects](redux-side-effects.md) - [Redux Tips and Techniques](redux-techniques.md) - [Webpack Advanced Techniques](webpack-advanced-techniques.md) +- [Static Typing](./static-typing.md) + diff --git a/es6-features.md b/es6-features.md index b552e78..e1541f5 100644 --- a/es6-features.md +++ b/es6-features.md @@ -44,6 +44,10 @@ http://learnharmony.org/ An interactive tool for learning and experimenting with ES6/ES2015 features +- **ES6 New Features Tutorials** + https://www.youtube.com/playlist?list=PL6gx4Cwl9DGBhgcpA8eTYYWg7im72LgLt + A set of video tutorials explaining the new features in ES6 + #### In-Depth Details @@ -95,6 +99,10 @@ 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 +- **ES6 Promise Anti-Patterns and Best Practices** + http://www.datchley.name/promise-patterns-anti-patterns/ + Some advice for good usage of Promises + #### Techniques diff --git a/javascript-resources.md b/javascript-resources.md index e12bd34..fdfbb02 100644 --- a/javascript-resources.md +++ b/javascript-resources.md @@ -107,6 +107,9 @@ While this list is primarily focused on learning React and Redux, and generally https://medium.com/@nashvail/lets-settle-this-part-one-ef36471c7d97 Another look at `this`, with a number of examples and explanations +- **Grokking Scope in Javascript** + https://code.tutsplus.com/tutorials/grokking-scope-in-javascript--cms-26259 + Advice for understanding how Javascript variable coping works #### Paid Courses and Books diff --git a/mobx-tutorials.md b/mobx-tutorials.md index ab05d60..37d2ed3 100644 --- a/mobx-tutorials.md +++ b/mobx-tutorials.md @@ -3,30 +3,54 @@ #### Basic Introductions - **MobX Docs** -https://github.com/mobxjs/mobx -The official MobX documentation. They also have an [interactive 10 minutes introduction](https://mobxjs.github.io/mobx/getting-started.html) to get started with MobX and React. -I would suggest you also take a look at their [API overview](https://mobxjs.github.io/mobx/refguide/api.html). + https://github.com/mobxjs/mobx + https://mobxjs.github.io/mobx/ + https://mobxjs.github.io/mobx/getting-started.html + The official MobX site, with documentation including a getting started introduction and API reference. - **Getting Started with MobX - Video Series** -[MobX introduction tutorial by LearnCode.academy](https://www.youtube.com/watch?v=_q50BXqkAfI) -A quick two videos introduction to MobX, how to set it up get start coding a simple ToDo App. + https://www.youtube.com/watch?v=_q50BXqkAfI + A quick two videos introduction to MobX: how to set it up, and get started coding a simple ToDo App. -- **Managing complex state in React - Video Series** -[Manage Complex State in React Apps with MobX](https://egghead.io/courses/manage-complex-state-in-react-apps-with-mobx) -MobX fundamentals including debugging with the MobX-react devtools. +- **Managing complex state in React with MobX - Video Series** + https://egghead.io/courses/manage-complex-state-in-react-apps-with-mobx + Videos describing MobX fundamentals including debugging with the MobX-react devtools. - **Introduction video to MobX with React - Video** -[Practical React with MobX](https://www.youtube.com/watch?v=XGwuM_u7UeQ) -In depth introduction to MobX with React including 'Why mobx' (all coded with ES5). + https://www.youtube.com/watch?v=XGwuM_u7UeQ + In depth introduction to MobX with React including 'Why mobx' (all coded with ES5). -- **Comparing MobX and Redux - Video** -[Comparing MobX and Redux](https://www.youtube.com/watch?v=83v8cdvGfeA) -A great video to understand the differences between MobX and Redux. +- **React Native with MobX — Getting Started** + https://medium.com/@dabit3/react-native-with-mobx-getting-started-ba7e18d8ff44 + An introduction article about combining MobX and React Native to create a simple list app. + +- **Real World MobX** + https://www.youtube.com/watch?v=Aws40KOx90U + A talk by MobX creator Michel Weststrate, describing MobX's concepts and usage -- **React Native with MobX — Getting Started** -[Medium article](https://medium.com/@dabit3/react-native-with-mobx-getting-started-ba7e18d8ff44#.s9xqrdxxg) -An introduction article about combining MobX and React Native to create a simple list app. #### Testing + - **Testing React and MobX** -[How to Test React and MobX with Jest](https://semaphoreci.com/community/tutorials/how-to-test-react-and-mobx-with-jest?utm_content=buffer15b42&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer) + https://semaphoreci.com/community/tutorials/how-to-test-react-and-mobx-with-jest + A look at ways to test React components and MobX logic + + +#### MobX and Redux Comparisons + +- **Comparing MobX and Redux - Video** + https://www.youtube.com/watch?v=83v8cdvGfeA +A great video to understand the differences between MobX and Redux. + +- **Redux or MobX: An attempt to dissolve the confusion** + http://www.robinwieruch.de/redux-mobx-confusion/ + An in-depth comparison of the ideas, concepts, approaches, and use cases for the two state management libraries + +- **Redux vs MobX by example** + https://hashnode.com/post/redux-vs-mobx-by-example-part-i-intro-and-exploring-redux-cito5m0nn0sssxi53c7zq7jpr + https://hashnode.com/post/redux-vs-mobx-by-example-part-ii-the-simplicity-of-mobx-and-conclusion-citpp2tbu003za853ua1tx228 + Implementation of the same app using both Redux and MobX, and a final comparison of the approaches + +- **"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 diff --git a/node-js-and-npm.md b/node-js-and-npm.md index f1dc714..60d8d96 100644 --- a/node-js-and-npm.md +++ b/node-js-and-npm.md @@ -30,4 +30,8 @@ NPM 3.7 or later, as that fixes a bug with the progress bar that drastically slo - **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 + Includes a description of Node's resolution algorithm for `require` + +- **Node Hero: The Complete Node.js Tutorial** + https://risingstack.com/resources/node-hero + An ebook covering a variety of topics about using Node, including basic usage, NPM, Express, and building server applications. The ebook is free, but requires email registration to download. \ No newline at end of file diff --git a/pros-cons-discussion.md b/pros-cons-discussion.md index 935c595..00dc634 100644 --- a/pros-cons-discussion.md +++ b/pros-cons-discussion.md @@ -145,6 +145,12 @@ similar structures in ClojureScript. https://twitter.com/AdamRackis/status/751486423232966656 Discussion of React's performance compared to an existing Handlebars/Knockout app +- **"Why is everying in Javascript changing so fast?** + https://news.ycombinator.com/item?id=11833301 + https://news.ycombinator.com/item?id=12760268 + https://news.ycombinator.com/item?id=12758514 + Yet another rant thread about Javascript churn, but with a couple very insightful comments about the unique complexities and challenges involved in writing applications for the web. + #### React's PATENTS License - **Facebook Open Source License FAQ** diff --git a/react-component-patterns.md b/react-component-patterns.md index fcd7a86..a2e0caa 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -1,5 +1,8 @@ ### React Component Patterns +**Related topics**: +- [Thinking in React](./thinking-in-react-and-flux.md): Articles discussing ways to think about React applications and component structure + #### Terms and Concepts - **React Patterns** @@ -61,6 +64,11 @@ https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750 A look at some of the issues with using mixins, and reasons why higher-order components are (usually) an improvement. +- **Mixins Considered Harmful** + https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html + https://news.ycombinator.com/item?id=12087796 + Dan Abramov explains why the React team discourages use of mixins, and prefers HoCs + - **Higher Order Components: Theory and Practice** http://engineering.blogfoster.com/higher-order-components-theory-and-practice/ Gives practical use cases for HOCs, such as authentication, routing, and data management, with samples. @@ -101,6 +109,10 @@ http://rea.tech/functions-as-child-components-and-higher-order-components/ Comparisons and examples for these two component patterns +- **ReactCasts: Higher Order Components** + https://youtu.be/6nVxCWUAEPM + A screencast that walks through the idea and usage of Higher Order Components + #### Other Component Patterns @@ -128,7 +140,3 @@ https://medium.com/@mirkomariani/functional-components-with-react-stateless-functions-and-ramda-e83e54fcd86b Examples of using Ramda functions to compose together components -- **Mixins Considered Harmful** - https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html - https://news.ycombinator.com/item?id=12087796 - Dan Abramov explains why the React team discourages use of mixins, and prefers HoCs \ No newline at end of file diff --git a/react-forms.md b/react-forms.md index 4c00d7e..fa58091 100644 --- a/react-forms.md +++ b/react-forms.md @@ -82,4 +82,9 @@ - **Two-Way Data Binding and Form Validation in React** https://medium.com/@thejenniekim/two-way-data-binding-and-form-validation-in-react-9d0b15123176 - Another demonstration of building a form with some logic and validation. \ No newline at end of file + Another demonstration of building a form with some logic and validation. + +- **Form Validation as a Higher Order Component** + https://medium.com/javascript-inside/form-validation-as-a-higher-order-component-pt-1-83ac8fd6c1f0 + https://medium.com/javascript-inside/form-validation-as-a-higher-order-component-pt-2-1edb7881870d + A 2-part series, demonstrating how to use Ramda and FP approaches to create validation logic \ No newline at end of file diff --git a/react-native.md b/react-native.md new file mode 100644 index 0000000..25fb14c --- /dev/null +++ b/react-native.md @@ -0,0 +1,12 @@ +### React Native + + +#### Tutorials + +- **React Native Workshop** + https://rangle-io.gitbooks.io/react-native-workshop/content/ + An introduction to React Native's concepts, in conjunction with Flexbox and Redux + +- **Building the F8 App** + http://makeitopen.com/ + A dive into how the Facebook F8 conference mobile app was built, including planning, design, testing, and data management. \ No newline at end of file diff --git a/react-performance.md b/react-performance.md index 0c8027f..d9a7a9e 100644 --- a/react-performance.md +++ b/react-performance.md @@ -154,3 +154,10 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) http://rea.tech/reactjs-performance-debugging-aka-the-magic-of-reselect-selectors/ Discussion of React perf topics, and how Reselect selector functions can improve perf for Redux apps +- **Refactoring Components for Redux Performance** + https://yahooeng.tumblr.com/post/152078809581/refactoring-components-for-redux-performance + Discusses common perf issues, methods for analyzing perf, and ways to structure Redux-connected container components to cut down on re-rendering. + +- **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 diff --git a/react-redux-architecture.md b/react-redux-architecture.md index 6c15793..fd3fbd1 100644 --- a/react-redux-architecture.md +++ b/react-redux-architecture.md @@ -111,6 +111,14 @@ - **My journey toward a maintainable project structure for React/Redux** https://hackernoon.com/my-journey-toward-a-maintainable-project-structure-for-react-redux-b05dfd999b5 Describes an evolution of approaches for project structure + +- **Building Modular Redux Applications** + https://vimeo.com/album/4199344/video/187454108 + A talk discussing an approach to Redux structure by splitting logic into "data providers/sources" and presentation. + +- **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. #### Redux Architecture @@ -152,6 +160,10 @@ https://hackernoon.com/avoiding-accidental-complexity-when-structuring-your-app-state-6e6d22ad5e2a An excellent set of guidelines for organizing your Redux store structure. +- **Redux Step by STep: A Simple and Robust Workflow for Real Life Apps** + https://hackernoon.com/redux-step-by-step-a-simple-and-robust-workflow-for-real-life-apps-1fdf7df46092 + A follow-up to the "Accidental Complexity" article, discussing principles for structuring a Redux app and demonstrating how they apply to actual code. + - **Things I Wish I Knew About Redux** https://medium.com/horrible-hacks/things-i-wish-i-knew-about-redux-9924abf2f9e0 https://www.reddit.com/r/javascript/comments/4taau2/things_i_wish_i_knew_about_redux/ diff --git a/react-redux-testing.md b/react-redux-testing.md index 3591d55..09d5e37 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -130,6 +130,10 @@ https://medium.com/@mmontoya/testing-reactjs-components-with-mocha-webpack-ce7f710d268c Looks at how mocha-webpack can be used to enable faster testing for React components +- **Testing React Components with Enzyme and Mocha** + https://ifelse.io/2016/04/04/testing-react-components-with-enzyme-and-mocha/ + Examples of setting up a Webpack+Mocha test environment, and using Enzyme for implementing tests + #### General Testing, Tools, and Setup - **Javascript Testing: Unit vs Functional vs Integration** diff --git a/react-server-rendering.md b/react-server-rendering.md new file mode 100644 index 0000000..154a5b3 --- /dev/null +++ b/react-server-rendering.md @@ -0,0 +1,9 @@ +### React Server Rendering + +- **React for Beginers: Creating an Isomorphic React App** + https://codingbox.io/react-for-beginners-creating-isomorphic-react-redux-app-and-deploying-it-on-heroku-6a313f8f3693 + An in-depth article describing an isomorphic project configuration and deployment + +- **React.js: Server side rendering** + http://crypt.codemancers.com/posts/2016-09-16-react-server-side-rendering/ + An example of setting up server rendering using React-Router and Express \ No newline at end of file diff --git a/react-state-management.md b/react-state-management.md index 8abe1b6..e323236 100644 --- a/react-state-management.md +++ b/react-state-management.md @@ -34,6 +34,10 @@ - **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. + +- **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. #### Using `setState` diff --git a/react-styling.md b/react-styling.md index 52f935c..56c3168 100644 --- a/react-styling.md +++ b/react-styling.md @@ -42,4 +42,20 @@ - **Style as a Function of State** https://medium.com/@rofrischmann/styles-as-functions-of-state-1885627a63f7 - A look at how styles can be managed similar to UI, and an example using the author's new styling library \ No newline at end of file + A look at how styles can be managed similar to UI, and an example using the author's new styling library + +- **React JS Style Components** + https://www.youtube.com/watch?v=gNeavlJ7lNY + A talk describing ways to better compose existing styles in an application, using components. + +- **Functional CSS From A Pure UI Perspective** + https://medium.com/@sharifsbeat/functional-css-from-a-pure-ui-perspective-bd04c8af4fdc + Thoughts on various ways to compose classes and styles together. + +- **Invidual Paint for your React Components** + https://vimeo.com/album/4199344/video/187454103 + A talk discussing various approaches to manage styles and themes for React + +- **Components: A Styling Odyssey** + https://speakerdeck.com/alexlande/components-a-styling-odyssey + Slideshow discussing pros and cons of various approaches to managing styles for components \ No newline at end of file diff --git a/react-tutorials.md b/react-tutorials.md index 4f44d6c..85c7322 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -3,13 +3,14 @@ #### Basic Introductions +- **React Documentation** + https://facebook.github.io/react/docs/hello-world.html + https://facebook.github.io/react/tutorial/tutorial.html + The official React documentation, recently rewritten with an excellent set of tutorials, explanations, and API information. + - **React to the Future** http://elijahmanor.com/talks/react-to-the-future/dist/#/ A fantastic HTML slideshow describing what React is, what makes it special, and how to work with it - -- **React Docs Tutorial** - https://facebook.github.io/react/docs/tutorial.html - The original React tutorial page from the React docs - **React: Getting Started and Concepts** https://scotch.io/tutorials/learning-react-getting-started-and-concepts @@ -87,7 +88,14 @@ http://blog.jfo.click/how-react-do/ A tutorial written by someone as they learned React, stepping up through a series of React concepts. - +- **React Tutorials for Beginners** + https://www.youtube.com/playlist?list=PL6gx4Cwl9DGBuKtLgPR_zWYnrwv-JllpA + A set of video tutorials introducing React concepts + +- **How to get Create-React-App to work with your API** + https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/ + An example of how to set up a server to work with Create-React-App + #### Project-Based Tutorials @@ -176,7 +184,8 @@ - **#ReactForNewbies: Building a Todo App with Create-React-App** https://edemkumodzi.com/reactfornewbies-building-a-todo-app-with-create-react-app-part-1-5aae4bd637ee - The first part of an ongoing series, written by someone who is writing the posts as he learns React. + https://edemkumodzi.com/reactfornewbies-building-a-todo-app-with-create-react-app-part-2-f846e2d8b820 + An ongoing series, written by someone who is writing the posts as he learns React. - **Rock and Roll React Tutorial** http://myappincome.co.uk/rock-and-roll-reactjs-tutorial-part-1/ @@ -263,6 +272,11 @@ https://www.youtube.com/watch?v=xsKYAa1ZXpQ A talk digging into React's internal concepts and implementation, including the split between the core library and the renderers. +- **setState() State Mutation Operator May Be Synchronous in ReactJS** + https://www.bennadel.com/blog/2893-setstate-state-mutation-operation-may-be-synchronous-in-reactjs.htm + Digs into the behavior of React's setState method, and discusses when it may be synchronous vs asynchronous + + #### 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-techniques.md b/redux-techniques.md index 5d43c39..33dee8f 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -80,11 +80,21 @@ Covers how to set up Flow for type-checking a Redux application -#### Encapsulation and Reusability +#### Selectors and Normalization - **Querying a Redux Store** https://medium.com/@adamrackis/querying-a-redux-store-37db8c7f3b0f A look at best practices for organizing and storing data in Redux, including normalizing data and use of selector functions. + +- **Redux Normalizr: Improve your State Management** + http://www.robinwieruch.de/the-soundcloud-client-in-react-redux-normalizr/ + A tutorial describing how to use Normalizr for improved data management of nested data in Redux + +- **Using normalizr.js in a Redux store** + https://medium.com/@mcowpercoles/using-normalizr-js-in-a-redux-store-96ab33991369 + Some examples of using Normalizr and selectors to manage normalized data + +#### Encapsulation and Reusability - **Encapsulation in Redux: the Right Way to Write Reusable Components** http://blog.javascripting.com/2016/02/02/encapsulation-in-redux/ @@ -162,6 +172,10 @@ http://jsforallof.us/2016/09/08/conversational-sign-up-form-ui-with-react-and-redux/ An example of form management with Redux +- **Standard actions in Redux** + https://medium.com/@jtbennett/standard-actions-in-redux-c6a415c8aea4 + A description of the Flux Standard Action specification, and how it can be used with Redux + #### Network Management @@ -199,4 +213,8 @@ - **Extreme Decoupling: React, Redux, Selectors** http://www.thinkloop.com/article/extreme-decoupling-react-redux-selectors/ - Discusses an API-first approach to splitting apart a Redux app into view, state, and integration layers. \ No newline at end of file + Discusses an API-first approach to splitting apart a Redux app into view, state, and integration layers. + +- **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" \ No newline at end of file diff --git a/redux-tutorials.md b/redux-tutorials.md index 082017e..1a8c740 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -80,6 +80,14 @@ - **Pro React beta chapter: Using Redux** http://www.pro-react.com/materials/ An alternative version of Pro React's chapter on using Flux that explains Redux usage + +- **React/Redux Tutorials** + https://www.youtube.com/playlist?list=PL6gx4Cwl9DGBbSLZjvleMwldX8jGgXV6a + A set of video tutorials introducing Redux concepts + +- **Redux for the Very Beginner** + http://toranbillups.com/blog/archive/2016/01/22/redux-for-the-very-beginner/ + A beginner-friendly screencast that introduces Redux #### Project-Based Tutorials @@ -126,6 +134,7 @@ https://decembersoft.com/posts/redux-hero-part-1-a-hero-is-born-a-fun-introduction-to-redux-js/ https://decembersoft.com/posts/redux-hero-part-2-actions-and-their-consequences-a-fun-introduction-to-redux-actions/ https://decembersoft.com/posts/redux-hero-part-3-choose-wisely-a-fun-introduction-to-reselect-js/ + https://decembersoft.com/posts/redux-hero-part-4-every-hero-needs-a-villain-a-fun-introduction-to-redux-saga-js/ An introduction to Redux and related libraries through building a small RPG-style game - **An Adventure in Redux: building redux-adventure** @@ -143,6 +152,21 @@ http://myappincome.co.uk/react-redux-tutorial-trending-github-part-1/ A five-part tutorial that builds a small app showing trending Github repos. +- **Mapping Colorado's 14er Mountains with React and Redux** + https://appendto.com/2016/10/mapping-colorados-14er-mountains-with-react-and-redux-mega-tutorial/ + Demonstrates building an app that uses Google Maps to show markers for locations, as well as cards with info on those locations. + +- **Zero to Hero with React and Redux** + https://codequs.com/p/B1oWbS_Nyx/zero-to-hero-with-react-and-redux/ + A 2-hour video tutorial that introduces Redux concepts and use with TypeScript. + +- **Screencast: Builting a React/Redux App from Scratch** + https://medium.com/@kensodev/screencast-1-1-session-building-a-react-redux-application-from-scratch-f888c1e74c6 + A 2-hour screencast demonstrating building a Redux app from the ground up + +- **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 #### Redux Implementation Walkthroughs diff --git a/static-typing.md b/static-typing.md new file mode 100644 index 0000000..e4656c1 --- /dev/null +++ b/static-typing.md @@ -0,0 +1,51 @@ +### Static Typing + + +#### React PropTypes + +- **React Docs: Typechecking With PropTypes** + https://facebook.github.io/react/docs/typechecking-with-proptypes.html + The official reference docs for PropTypes + +- **What are PropTypes?** + https://themeteorchef.com/snippets/what-are-proptypes/ + An introduction to React's PropTypes feature and how it can help create more predictable APIs for components. + +- **React PropTypes & Flow types cheat sheet** + https://medium.com/@chenglou/react-proptypes-flow-types-cheat-sheet-ed80f8e1383d + Some quick comparisons and gotchas between the two type declaration approaches + +- **Accessing React PropTypes Meta-data** + https://medium.com/@nunogrilopinheiro/accessing-react-proptypes-meta-data-45b3465abda7 + A look at how to access PropTypes info at runtime using various tooling + + +#### TypeScript + +- **TypeScript Deep Dive** + https://basarat.gitbooks.io/typescript/content/ + An online book that digs into numerous TypeScript topics + + +#### 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 + +- **Phantom Types with Flow** + https://medium.com/@gcanti/phantom-types-with-flow-828aff73232b + Description of an advanced technique for tracking data flow using types + + +#### Comparisons + +- **Flow as a replacement for PropTypes** + http://blog.rstankov.com/flow-as-replacement-for-proptype/ + Describes some limitations of PropTypes, and how Flow can help solve those + +- **Flow vs TypeScript** + http://djcordhose.github.io/flow-vs-typescript/flow-typescript-2.html#/ + A comparison of the features, goals, and usage of both type systems \ No newline at end of file diff --git a/thinking-in-react-and-flux.md b/thinking-in-react-and-flux.md index 4b955f0..99182c9 100644 --- a/thinking-in-react-and-flux.md +++ b/thinking-in-react-and-flux.md @@ -66,4 +66,8 @@ - **How to solve a Problem with React** https://codequs.com/p/HyLJOnBt/how-to-solve-a-problem-with-react/ - A guide explaining ways to approach planning out a React app: composing individual components into larger components, or working top-down to plan out a component hierarchy. \ No newline at end of file + A guide explaining ways to approach planning out a React app: composing individual components into larger components, or working top-down to plan out a component hierarchy. + +- **A Conceptual Introduction to React Components** + https://ifelse.io/2016/10/20/introducing-react-components/ + Examples and suggestions for how to approach breaking a UI concept into components with relationships \ No newline at end of file diff --git a/tips-and-best-practices.md b/tips-and-best-practices.md index acf1248..de8cf22 100644 --- a/tips-and-best-practices.md +++ b/tips-and-best-practices.md @@ -76,4 +76,12 @@ - **Helpful principles when starting with React** http://ignaciochavez.com/helpful-principles-starting-react/ - Several useful tips for structuring components, managing data flow, and updating data. Has some excellent diagrams illustrating the concepts described. \ No newline at end of file + Several useful tips for structuring components, managing data flow, and updating data. Has some excellent diagrams illustrating the concepts described. + +- **Redux Patterns and Anti-Patterns** + https://tech.affirm.com/redux-patterns-and-anti-patterns-7d80ef3d53bc + Some tips for using Redux, including use of Immutable.js and structuring for action creators and reducers + +- **Our Redux Migration (and 5 tips for adoption in a mature codebase)** + https://blog.agolo.com/our-redux-migration-and-5-tips-for-adoption-in-a-mature-codebase-dc62322cb921 + Lessons learned from migrating to Redux, including choosing a directory structure nd knowing when to use Redux. \ No newline at end of file diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index 7869b13..997fda7 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -76,6 +76,9 @@ https://medium.com/jeremy-gayed/dynamic-vendor-bundling-in-webpack-528993e48aab An approach to dynamically adding anything from `node_modules` to a "vendor" bundle +- **"Vector.im bundle is too big - analysis"** + https://github.com/vector-im/vector-web/issues/2498 + Web perf expert Nolan Lawson analyzes why the JS bundle for the Vector.im web app is too big, and ways it could potentially be improved using code splitting and app structure changes. A good example of ways to improve bundle sizes. #### Hot Module Replacement