Skip to content

Commit

Permalink
Updates, 2017-02-19
Browse files Browse the repository at this point in the history
  • Loading branch information
markerikson committed Feb 19, 2017
1 parent 180fba5 commit 906f746
Show file tree
Hide file tree
Showing 16 changed files with 91 additions and 3 deletions.
4 changes: 4 additions & 0 deletions basic-concepts.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,10 @@
- **A Brief History of Javascript**
https://auth0.com/blog/a-brief-history-of-javascript/
Despite the name, it's actually an extended, in-depth history of Javascript's creation and evolution over time.

- **Glossary of Modern Javascript Concepts: Part 1**
https://auth0.com/blog/glossary-of-modern-javascript-concepts/
An excellent overview and introduction to a number of concepts that are used in modern applications, such as "purity", "state", "immutability", "functional programming", "observables", and more.

#### Suggested Learning Approaches

Expand Down
14 changes: 13 additions & 1 deletion es6-features.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,10 @@
https://auth0.com/blog/a-rundown-of-es6-features/
An overview of the features in ES6 and how they can be used.

- **ES6 Summary**
https://github.com/zsolt-nagy/es6-summary
A list of ES6 features and their ES5 equivalents


#### In-Depth Details

Expand Down Expand Up @@ -122,6 +126,10 @@
http://untangled.io/advanced-es6-destructuring-techniques/
Examples of advanced ways to use ES6's destructuring capabilities

- **ES6 Proxies in Practice**
http://www.zsoltnagy.eu/es6-proxies-in-practice/
An overview of how to use ES6 proxies for advanced use cases, with examples


#### Generators

Expand Down Expand Up @@ -235,4 +243,8 @@
- **Native ECMAScript Modules: Overview and New Features**
https://blog.hospodarets.com/native-ecmascript-modules-the-first-overview
https://blog.hospodarets.com/native-ecmascript-modules-new-features
An in-depth look at existing module formats, how ES modules work, and how ES modules relate to bundlers like Webpack
An in-depth look at existing module formats, how ES modules work, and how ES modules relate to bundlers like Webpack

- **Native ECMAScript Modules: dynamic import()**
https://blog.hospodarets.com/native-ecmascript-modules-dynamic-import
Details on how the in-progress `import()` operator will allow dynamic loading of modules.
4 changes: 4 additions & 0 deletions git-resources.md
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,10 @@
- **Git Rebasing and Clean Pull Requests**
https://www.jungledisk.com/blog/2016/11/21/git-rebasing-and-clean-prs/
Some best practices for cleaning up branches and producing readable commits.

- **A closer look at git rebase**
https://dev.to/gonedark/a-closer-look-at-git-rebase
An explanation of what "rebasing" is, with some helpful graphics


#### E-Books
Expand Down
4 changes: 4 additions & 0 deletions immutable-data.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,10 @@
- **Javascript Array Methods: Mutating vs Non-Mutating**
http://lorenstewart.me/2017/01/22/javascript-array-methods-mutating-vs-non-mutating/
An overview of how to accomplish add/remove/replace operations on JS arrays, comparing mutable vs immutable approaches to each.

- **Redux Docs: Immutable Update Patterns**
http://redux.js.org/docs/recipes/reducers/ImmutableUpdatePatterns.html
Some useful examples for correctly updating data immutably, including nested objects, inserting and removing items in arrays, and updating items in arrays, as well as some common mistakes that occur. Important to know when using Redux, but the info is not Redux-specific.



Expand Down
8 changes: 8 additions & 0 deletions pros-cons-discussion.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,10 @@
https://medium.com/opengov-developers/how-react-helped-us-scale-a-large-web-app-d89f96c4790a
A look at how React has been used to scale the OpenGov app architecture in terms of both users and developers.

- **The Other Reasons We Chose React**
https://wheniwork.engineering/the-other-reasons-we-chose-react-fbb37e570999
A summary of how When I Work evaluated several different frameworks for future development, and the reasons why they picked React


#### Redux/Flux Comparisons

Expand Down Expand Up @@ -180,6 +184,10 @@ similar structures in ClojureScript.
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.

- **"Create an Instagram-like App with React, Node, and Redux"**
https://www.reddit.com/r/javascript/comments/5pyeni/tutorial_create_an_instagramlike_app_with_react/dcvlvzw/
A humorous comment summarizing the benefits of using React over jQuery, and Redux/MobX along with plain React.


#### React's PATENTS License

Expand Down
4 changes: 4 additions & 0 deletions react-component-patterns.md
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,10 @@
https://dev.to/kayis/higher-order-components-and-context-example
Examples of using Higher Order Components to pass data to nested components using `context`

- **Context in React Applications**
http://javascriptplayground.com/blog/2017/02/context-in-reactjs-applications/
An overview of what `context` is, how it works, and when you should use it for passing data


#### Component Categories

Expand Down
4 changes: 4 additions & 0 deletions react-state-management.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,10 @@
- **Watch Out for Undefined State**
https://daveceddia.com/watch-out-for-undefined-state/
Discusses the common mistake of making data requests and not having data fields initialized for use in the initial render, and looks at several ways to handle the issue.

- **How to Work with and Manipulate State in React**
https://www.sitepoint.com/work-with-and-manipulate-state-in-react/
Covers how to access and update state in components, the difference between state and props, and working with stateless components.


#### Using `setState`
Expand Down
6 changes: 5 additions & 1 deletion react-tutorials.md
Original file line number Diff line number Diff line change
Expand Up @@ -304,4 +304,8 @@ Also see the course sites listed in the [Community Resources](community-resource

- **Learn Pure React**
https://daveceddia.com/learn-pure-react/
A paid ebook that lays out a guided step-by-step process for learning React quickly and in the right order, with a focus on the fundamentals of React.
A paid ebook that lays out a guided step-by-step process for learning React quickly and in the right order, with a focus on the fundamentals of React.

- **Best ReactJS Books in 2017**
https://reactdom.com/blog/reactjs-books
A list of available React-related books, with some quick reviews.
4 changes: 4 additions & 0 deletions redux-architecture.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,10 @@
http://jaysoo.ca/2015/06/02/why-you-should-care-about-flux/
Describes the value in separating "reads" from "writes", and eliminating local state. Applies to Redux as well.

- **Redux and Why It's Good For You**
https://www.fullstackreact.com/articles/redux-with-mark-erikson/
An introduction to some benefits that Redux can give you when used in a React app, including multiple views of the same data and improved development with hot reloading.


#### Redux Architecture

Expand Down
4 changes: 4 additions & 0 deletions redux-side-effects.md
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,10 @@
https://decembersoft.com/posts/4-tips-for-managing-many-sagas-in-a-react-redux-saga-app/
Some useful suggestions for structuring and organizing sagas

- **Implementing feature flags using React and Redux Saga**
http://blog.launchdarkly.com/implementing-feature-flags-in-single-page-apps-using-react-and-redux-saga/
A quick example of how to use sagas to manage feature flag API requests


#### Other Side Effect Approaches

Expand Down
4 changes: 4 additions & 0 deletions redux-techniques.md
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,10 @@
https://medium.com/@itsBenCripps/open-sourcing-a-redux-component-bb82f260ff62
Details how the author developed a complex React+Redux grid component, including HTML structure, proper use of Immutable.js for good perf, and lib exports.

- **Scalable Modals with React and Redux**
https://codersmind.com/scalable-modals-react-redux/
Demonstrates implementing the basic Redux modal manager technique described by Dan Abramov in his Stack Overflow answer.


#### Redux and Forms

Expand Down
8 changes: 8 additions & 0 deletions redux-tutorials.md
Original file line number Diff line number Diff line change
Expand Up @@ -199,6 +199,10 @@
- **A comprehensive React-Redux tutorial**
https://spapas.github.io/2016/03/02/react-redux-tutorial/
A very long, detailed article that digs into Redux's concepts, and builds a book management application in the process.

- **React and Redux Sagas Authentication App Tutorial**
http://start.jcolemorrison.com/react-and-redux-sagas-authentication-app-tutorial/
A 3-part tutorial that builds a reasonably complex app, using Redux-Saga, Redux-Form and React-Router, with an emphasis on practical aspects of putting things together.


#### Using Redux with non-React Frameworks
Expand Down Expand Up @@ -250,6 +254,10 @@
- **Rebuilding Redux**
https://www.spencerdixon.com/blog/rebuilding-redux/
A short screencast that demonstrates building a mini-Redux from scratch

- **Build Alterdux: A Redux-Compatible Library From Scratch**
https://antjanus.com/blog/web-development-tutorials/front-end-development/build-alterdux-redux-like-redux-compatible-library-scratch/
A useful example of building a mini-Redux from the ground up, with explanations of some of the ideas that Redux uses.


#### Paid Courses and Books
Expand Down
10 changes: 9 additions & 1 deletion static-typing.md
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,10 @@
- **Type-Checking React and Redux with Flow**
https://blog.callstack.io/type-checking-react-and-redux-thunk-with-flow-part-1-ad12de935c36
Examples of how to define Flow types for React components. (Part 2 will cover Redux.)

- **How the Debugger got into the Flow**
http://jasonlaster.github.io/devtools/js/2017/01/20/typing-the-debugger.html
A look at how the Firefox DevTools team uses Flow to help type their React and Redux code for improved maintainability


#### Advancing Typing Techniques
Expand Down Expand Up @@ -184,4 +188,8 @@

- **Refactoring 30000 Lines of JS with types**
https://www.reaktor.com/blog/refactoring-30000-lines-js-types/
A description of the Reaktor team's approach to adding types to their project, their experience with both Typescript and Flow, and why they chose Typescript.
A description of the Reaktor team's approach to adding types to their project, their experience with both Typescript and Flow, and why they chose Typescript.

- **How we migrated a 200K+ LOC Project to TypeScript**
https://hashnode.com/post/how-we-migrated-a-200k-loc-project-to-typescript-and-survived-to-tell-the-story-ciyzhikcc0001y253w00n11yb
The Coherent Labs team discusses the tradeoffs in using static typing for JS code, why they chose TypeScript, and how they approached migrating their codebase to TypeScript.
4 changes: 4 additions & 0 deletions using-react-with-es6.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,10 @@
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

- **React `createClass` vs ES6 Class Components**
https://www.fullstackreact.com/articles/react-create-class-vs-es6-class-components/
A comparison of the different ways to create class components in React, and some of the differences between how they behave (including method binding)


#### Methods and Instance Binding

Expand Down
4 changes: 4 additions & 0 deletions webpack-advanced-techniques.md
Original file line number Diff line number Diff line change
Expand Up @@ -265,6 +265,10 @@
https://dev.to/kayis/easy-offline-first-apps-with-webpacks-offline-plugin
A look at how to use the OfflinePlugin to cache Webpack-generated assets for offline use.

- **Working with Fonts with Webpack**
https://shellmonger.com/2016/01/22/working-with-fonts-with-webpack/
Explains how to configure Webpack to use external font files.


#### Webpack Tools

Expand Down
8 changes: 8 additions & 0 deletions webpack-tutorials.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac
- **Webpack: It's Not Magic**
https://naomiajacobs.github.io/WebpackTalk/
An excellent HTML slideshow that explains how Webpack allows you to use code that is nice to write, and transforms it into code that the browser fully understands. Also looks at how Webpack works conceptually.

- **Webpack 2**
http://sokra.github.io/slides/webpack2/#3
A slideshow from Webpack's original author. Describes the basics of Webpack, how it can be used to build Progressive Web Apps, and improve speed and reliability through bundling.


#### Basic Tutorials
Expand Down Expand Up @@ -145,6 +149,10 @@ Also see the [Awesome Webpack list](https://github.com/d3viant0ne/awesome-webpac
- **A Beginner's Guide to Webpack 2 and Module Bundling**
https://www.sitepoint.com/beginners-guide-to-webpack-2-and-module-bundling/
An extended tutorial that covers many Webpack concepts, including basic setup, loaders, plugin, code splitting, and the Webpack Dev Server

- **From zero to Webpack, one error at a time**
http://www.jumoel.com/2017/zero-to-webpack.html
A tutorial that builds a working Webpack config step-by-step, with explanations of how and why each piece is added.


#### Configuration Terms and Concepts
Expand Down

0 comments on commit 906f746

Please sign in to comment.