diff --git a/basic-concepts.md b/basic-concepts.md index e8705b2..0a2692e 100644 --- a/basic-concepts.md +++ b/basic-concepts.md @@ -186,4 +186,31 @@ - **Keeping Up With the JavaScript World** https://daveceddia.com/keeping-up-with-javascript/ - Dave Ceddia offers some great advice on how to manage learning about what's new and changing in the JS community, including sources to follow for keeping up with what's new, choosing what to learn, and how to tackle actually learning things. \ No newline at end of file + Dave Ceddia offers some great advice on how to manage learning about what's new and changing in the JS community, including sources to follow for keeping up with what's new, choosing what to learn, and how to tackle actually learning things. + + +#### Learning Project Ideas + +- **5 Projects to Help You Learn React** + https://daveceddia.com/react-practice-projects/ + A list of 5 sample project ideas that aren't todo lists, ranging from basic card components to a Github issues page. + +- **The secret to being a top developer is building things! Here's a list of fun apps to build** + https://medium.freecodecamp.org/the-secret-to-being-a-top-developer-is-building-things-heres-a-list-of-fun-apps-to-build-aac61ac0736c + A list of 8 good-sized project ideas, including a Trello clone, cryptocurrency tracker, and a native messenger clone + +- **10 React Start Project Ideas to Get You Coding** + https://medium.com/@dtkatz/10-react-starter-project-ideas-to-get-you-coding-5b35782e1831 + A list of 10 options besides todo lists, including a quiz builder, a music player, and a forum app. + +- **Every time you build a todo list, a puppy dies** + https://medium.freecodecamp.org/every-time-you-build-a-to-do-list-app-a-puppy-dies-505b54637a5d + A list of 28 app ideas that aren't todo lists. Suggests using a Ruby on Rails backend, but the ideas are sufficiently generic. Ideas include a calendar, a book reading club, a Twitter client, and more. + +- **What to do after the React/Redux tutorials** + http://blog.jakoblind.no/react-redux-tutorials/ + Suggests 8 APIs you could use to help build an application after working your way through basic tutorials. + +- **7 GUIs** + http://eugenkiss.github.io/7guis/tasks/ + A list of 7 generic example apps that can be built in any language or UI framework. Intended as a basic usability benchmark for different UI frameworks, but also a decent list of ideas for learning projects. Includes a counter, a temperature converter, a flight booker, a timer, a CRUD app, and more. \ No newline at end of file diff --git a/framework-comparisons.md b/framework-comparisons.md index 1153abe..00826d1 100644 --- a/framework-comparisons.md +++ b/framework-comparisons.md @@ -38,6 +38,10 @@ - **The Ultimate Guide to JavaScript Frameworks** https://javascriptreport.com/the-ultimate-guide-to-javascript-frameworks/ A high-level overview of both major and minor JS frameworks in 2018, Groups them into "the big three", "historically significant", "notable", and "the rest of the pack". Provides short descriptions and links to additional resources for each, as well as pros and cons for the better-known frameworks. + +- **Why I'm switching from Angular to React and Redux** + https://hackernoon.com/why-im-switching-from-angular-to-react-and-redux-in-2018-cb48be00fda7 + One person's opinions on why they decided to work with React and Redux instead of Angular, including flexibility of libraries over the "one way" of a framework, simpler state management with Redux vs services and injected event emitters, and more. #### React and Flux vs Backbone diff --git a/react-architecture.md b/react-architecture.md index 8412b15..26a1e99 100644 --- a/react-architecture.md +++ b/react-architecture.md @@ -268,6 +268,10 @@ http://americanexpress.io/clean-code-dirty-code/ Some very opinionated thoughts on what qualifes as "clean" React code. Your experience may vary, but some interesting food for thought. +- **React Architecture Confessions** + https://benmccormick.org/2018/02/07/react-confessions/ + A great article by Ben McCormick, looking back at mistakes he's made in structuring React applications, why he made those choices, and what he should have done instead. + #### React Architecture diff --git a/react-component-patterns.md b/react-component-patterns.md index ca05e65..54be341 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -260,6 +260,10 @@ http://reactboston.surge.sh/#/ Slides from Ken Wheeler's ReactBoston talk on React's `context` feature. Covers what context is, why you might want to use it, and when/ how to use it/ +- **React's new Context API** + https://dev.to/kentcdodds/reacts--new-context-api-dpi + Kent C Dodds digs into the new `context` API that's coming with React 16.3, looking at why context matters, how to use the new API, and utilities to abstract the process of using `context`. + #### Component Categories @@ -428,6 +432,10 @@ https://medium.com/netflix-techblog/integrating-imperative-apis-into-a-react-application-1257e1b45ac6 A higher-level discussion of how to design declarative React components that encapsulate imperative APIs. +- **Bringing Together React, D3, and Their Ecosystem** + https://www.smashingmagazine.com/2018/02/react-d3-ecosystem/ + An extensive article that looks at common D3 wrapper patterns and libraries, approaches for using D3 inside of React, and React-specific D3 libraries, and gives some suggestions for how to decide which approach and library to use for your project. + #### Modal Dialogs diff --git a/react-implementation.md b/react-implementation.md index a9a7129..f17c19c 100644 --- a/react-implementation.md +++ b/react-implementation.md @@ -185,12 +185,8 @@ Traces through the source code for React 16 / React Fiber, starting with the main `render()` function and diving down from there through the system. - **Understanding the React Source Code** - https://hackernoon.com/understanding-the-react-source-code-initial-rendering-simple-component-i-80263fe46cf1 - https://hackernoon.com/understanding-the-react-source-code-initial-rendering-simple-component-ii-79e7e8bed56c - https://hackernoon.com/understanding-the-react-source-code-initial-rendering-simple-component-iii-69c2711c5f33 - https://hackernoon.com/understanding-the-react-source-code-iv-e3c4b66da12c - https://hackernoon.com/understanding-the-react-source-code-v-812d69a79fb9 - Walks through the critical path of React 15's source code, tracing how a simple component gets rendered. + https://holmeshe.me/categories/Understanding-The-React-Source-Code/ + A multi-part series of posts that walks through the critical path of React 15's source code, tracing how a simple component gets rendered. #### React Fiber diff --git a/react-redux-testing.md b/react-redux-testing.md index b320bd1..c63318c 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -172,6 +172,11 @@ - **Lessons learned testing React & Redux apps with Jest and Enzyme** https://medium.com/@Tetheta/lessons-learned-testing-react-redux-apps-with-jest-and-enzyme-eb581d6d167b Thoughts on best practices based on experience, including complexities of setting up a testing environment, optimal setup for snapshot tests, simplifying test setup, and what aspects of Redux code should be tested. + +- **Integration Testing React and Redux with Mocha and Enzyme** + https://engineering.classdojo.com/blog/2017/01/12/integration-testing-react-redux/ + Tips on dealing with larger-scale integration tests of React apps under Mocha. Discusses handling async API calls, using `mocha-steps` for multi-step tests, and working with React-Router. + #### Redux @@ -346,12 +351,13 @@ http://jsramblings.com/2018/01/21/stuck-testing-your-connected-component.html A pair of articles that discuss ways to handle testing the various pieces of connected components. + #### General Testing, Tools, and Setup -- **An Overview of JavaScript Testing in 2017** - https://medium.com/powtoon-engineering/a-complete-guide-to-testing-javascript-in-2017-a217b4cd5a2a +- **An Overview of JavaScript Testing in 2018** + https://medium.com/welldone-software/an-overview-of-javascript-testing-in-2018-f68950900bc3 A detailed guide to the terms, tools, and concepts used in testing Javascript. - **Javascript Testing: Unit vs Functional vs Integration** diff --git a/react-styling.md b/react-styling.md index 97fd3d5..c6a884c 100644 --- a/react-styling.md +++ b/react-styling.md @@ -158,6 +158,10 @@ http://jsramblings.com/2017/10/17/things-to-consider-when-choosing-a-react-styling-framework.html Helpful suggestions for things to compare between different styling libraries, such as how the styles are applied, syntax used, and feature support +- **Substyle: Build Styling Agnostic Components for React** + https://survivejs.com/blog/substyle-interview/ + An interview with the author of Substyle, a utility that allows component library authors to enable customization of components via several different style-related props. + #### Style Libraries diff --git a/redux-reducers-selectors.md b/redux-reducers-selectors.md index 5f4cf6f..fc5adf2 100644 --- a/redux-reducers-selectors.md +++ b/redux-reducers-selectors.md @@ -138,6 +138,10 @@ https://www.reddit.com/r/reactjs/comments/5dxasp/any_deepdiveadvanced_tutorials_on_reselect/ Discussion on passing arguments to Reselect selectors, and how to use "factory functions" to define per-component selectors for Redux `mapState` functions +- **Selectors in Redux are a MUST** + https://hackernoon.com/selectors-in-redux-are-a-must-d6b0637c79b7 + Examples of how nested Redux state can be difficult to work with, how to separate and structure domain data and UI data, and how and why to write selectors that extract and reshape the data as needed for different parts of the application. + #### Normalization diff --git a/redux-side-effects.md b/redux-side-effects.md index 7ad6e7e..e86e5fc 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -381,4 +381,8 @@ - **Reacting to ProgressEvents with Redux** https://medium.com/@andersonmcook/reacting-to-progressevents-with-redux-355ba021d336 - Demonstrates using the Redux-Logic library and RxJS to handle browser ProgressEvents \ No newline at end of file + Demonstrates using the Redux-Logic library and RxJS to handle browser ProgressEvents + +- **Redux-loop: A better solution for managing asynchronous operations in Redux** + https://lorefnon.tech/2018/02/04/redux-loop-a-better-solution-for-managing-asynchronous-operations-in-redux/ + Gives an overview of how Redux-Loop works for handling side effects, and argues that it provides a better approach than sagas or thunks. \ No newline at end of file diff --git a/redux-techniques.md b/redux-techniques.md index ded68a1..7979583 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -227,6 +227,11 @@ https://blog.cloudboost.io/the-elegance-of-decorated-redux-b0bd7e2de16a Looks at using `connect` as a decorator, extracting `connect` definitions for reuse with multiple components, and combining multiple connections together to apply to a single component. +- **Redux: Let's Code a Higher-Order "Duck"** + https://medium.com/@yazeedb/redux-lets-code-a-higher-order-duck-a045415bef0f + https://medium.com/@yazeedb/redux-lets-refactor-our-higher-order-duck-e44b0110befc + A neat example of how to write reusable logic in Redux. Walks through writing generic CRUD logic for managing the contents of a list, and shows how to organize it using the "ducks" structure and make it reusable for different types of data. The second article shows how to refactor some of the logic using the `createReducer` approach from the Redux docs. + #### Network Management diff --git a/redux-tutorials.md b/redux-tutorials.md index 72da027..ff7d30f 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -285,18 +285,9 @@ https://scotch.io/tutorials/build-a-media-library-with-react-redux-and-redux-saga-part-2 A two-part tutorial that builds an image and video display and preview app -- **Practical Redux** - http://blog.isquaredsoftware.com/2016/10/practical-redux-part-0-introduction/ - http://blog.isquaredsoftware.com/series/practical-redux/ - An ongoing series of posts intended to demonstrate a number of specific Redux techniques by building a sample application, based on the MekHQ application for managing Battletech campaigns. Written by Redux co-maintainer Mark Erikson. - - **A Practical Guide to Redux** http://lorenstewart.me/2016/11/27/a-practical-guide-to-redux/ A tutorial that introduces the key concepts and usage of Redux through the code in a small sample app. - -- **Building a Simple CRUD App with React + Redux** - http://www.thegreatcodeadventure.com/building-a-simple-crud-app-with-react-redux-part-1/ - A nifty 8-part series that demonstrates building a CRUD app, including routing, AJAX calls, and the various CRUD aspects. Very well written, with some useful diagrams as well. - **A comprehensive React-Redux tutorial** https://spapas.github.io/2016/03/02/react-redux-tutorial/ @@ -349,6 +340,12 @@ - **CRUD with Redux** https://www.youtube.com/playlist?list=PLuNEz8XtB51KfnHc99GwscPy1UbLJyXHW A video screencast tutorial series that demonstrates how to build a CRUD app with React, Redux, React-Router, and MongoDB. + +- **Developing Games with React, Redux, and SVG** + https://auth0.com/blog/developing-games-with-react-redux-and-svg-part-1/ + https://auth0.com/blog/developing-games-with-react-redux-and-svg-part-2/ + https://auth0.com/blog/developing-games-with-react-redux-and-svg-part-2/ + A 3-part series that shows how to build a Space Invaders-style action game using React for the UI layer, SVG for the display, and Redux for the data flow, as well as socket.io for a real-time leaderboard and Auth0 for authentication. #### Redux Implementation Walkthroughs diff --git a/redux-ui-management.md b/redux-ui-management.md index 95dac1a..c110dd8 100644 --- a/redux-ui-management.md +++ b/redux-ui-management.md @@ -81,6 +81,10 @@ https://medium.com/@sandropadin/handling-keyboard-commands-with-redux-67584decb3ff Discussion of an approach for managing keybard interaction in a React+Redux app, with an interactive embedded example app on CodeSandbox +- **Modular, fast, small: how we built a server-rendered IDE** + https://repl.it/site/blog/ide + The repl.it team describes how they built a Redux-based plugin architecture that handles window management and layout, with plugins able to interact via Redux actions. + #### Redux and Forms diff --git a/redux-without-react.md b/redux-without-react.md index c1fd49e..7f9c26f 100644 --- a/redux-without-react.md +++ b/redux-without-react.md @@ -173,4 +173,8 @@ https://medium.com/@jalalio/step-1-how-to-use-redux-with-polymer-2-7bcfaee6fdb3 https://medium.com/@jalalio/step-2-how-to-structure-larger-polymer-2-apps-with-redux-reselect-f588e64a191a https://medium.com/@jalalio/step-3-how-to-make-async-api-calls-in-a-polymer-2-app-using-redux-thunk-middleware-c71d596c2005 - A 3-part series that shows how to use the polymer-redux bindings, including basic setup, use of Reselect, and async API calls. \ No newline at end of file + A 3-part series that shows how to use the polymer-redux bindings, including basic setup, use of Reselect, and async API calls. + +- **Building an F# Redux Store for C# Xamarin Apps** + https://thomasbandt.com/fsharp-redux-store-for-xamarin-apps + Discusses why Redux's predictability is beneficial for applications in general, desired behavior for a .NET implementation of Redux, why C# is a poor choice for an implementation, and how to implement Redux using F#. \ No newline at end of file diff --git a/static-typing.md b/static-typing.md index ec66529..123e3d8 100644 --- a/static-typing.md +++ b/static-typing.md @@ -254,6 +254,10 @@ http://blog.mgechev.com/2018/01/18/react-typescript-redux-immutable/ Examples of statically typing Immutable.js Records, action creators, and class-based actions +- **Improved Redux type safety with TypeScript 2.8** + https://medium.com/@martin_hotell/improved-redux-type-safety-with-typescript-2-8-2c11a8062575 + Looks at the new "conditional types" feature in TS2.8, and how that can be used to simplify adding types to Redux logic. + #### Advancing Typing Techniques @@ -355,4 +359,8 @@ - **"Convert React JavaScript Code to TypeScript with Proper Typing"** https://news.ycombinator.com/item?id=16159389 - A Hacker News thread with a lot of good discussion on the current strengths and weaknesses of TypeScript and Flow \ No newline at end of file + A Hacker News thread with a lot of good discussion on the current strengths and weaknesses of TypeScript and Flow + +- **"Why isn't Typescript used more in the React community?"** + https://www.reddit.com/r/reactjs/comments/7yxecm/why_isnt_typescript_used_more_in_the_react/ + An excellent discussion thread on the history and merits of TS and Flow, and their suitability for use with React. In particular, read the comments by Francois Ward of Hubspot (/u/phoenixmatrix), who offers extensive thoughts on why they're switching to TS in the near future. \ No newline at end of file