diff --git a/es6-features.md b/es6-features.md index 95a5b0d..8d9fc9d 100644 --- a/es6-features.md +++ b/es6-features.md @@ -72,6 +72,10 @@ https://github.com/mattharrison/Tiny-ES6-Notebook A large list of notes, examples, and discussion on how to use the features in ES6 +- **ECMASyntax** + https://ecmasyntax.io + A reference site listing the syntax of features in ES6, and comparing them with earlier ES behavior. + #### In-Depth Details diff --git a/javascript-resources.md b/javascript-resources.md index 04aaa56..4dfced3 100644 --- a/javascript-resources.md +++ b/javascript-resources.md @@ -103,6 +103,10 @@ While this list is primarily focused on learning React and Redux, and generally http://javascript.info/ A large tutorial series that covers all aspects of the modern Javascript language (basic syntax, data types, objects, and advanced function usage), as well as a section on using Javascript to interact with the DOM in web pages. +- **The JavaScript Way** + https://github.com/bpesquet/thejsway + A modern introduction to the JavaScript language, intended to be beginner-friendly, comprehensive, standards-aligned with the latest syntax and good practices, and hands-on. + #### Interactive Exercises diff --git a/react-ajax.md b/react-ajax.md index e25d6e6..089f7f2 100644 --- a/react-ajax.md +++ b/react-ajax.md @@ -36,7 +36,7 @@ #### Request Implementation Examples - **Implementing React Redux with GraphQL** - https://marufsarker.github.io/blog/posts/2016/05/09/react-redux-with-graphql.html + https://marufsarker.github.io/blog/2016/05/09/react-redux-with-graphql/ Walks through the implementation of a server/client Todo app that uses GraphQL mutations for the async actions. - **Rendering Backend Requests with React** diff --git a/react-architecture.md b/react-architecture.md index 8c59381..e3f5891 100644 --- a/react-architecture.md +++ b/react-architecture.md @@ -240,6 +240,10 @@ https://dev.to/karljakoblind/how-to-become-a-more-productive-react-developer Quick suggestions for useful tools that increase productivity, including Prettier for formatting, ESLint for error checking, the React and Redux DevTools for debugging, and React-Hot-Loader for faster edits. +- **8 Things to learn in React before using Redux** + https://www.robinwieruch.de/learn-react-before-using-redux/ + Robin Wieruch covers a list of key React concepts you should be familiar with before trying to tackle learning Redux or other major state management libraries. + #### React Architecture diff --git a/react-component-patterns.md b/react-component-patterns.md index 581c33f..ddbcf47 100644 --- a/react-component-patterns.md +++ b/react-component-patterns.md @@ -48,6 +48,10 @@ https://github.com/vasanthk/react-bits An extensive list of terms, concepts, patterns, and techniques for writing React components, with explanations and examples. A few of the descriptions are overly opinionated and some items are not things the React team would recommend, but overall an excellent resource. +- **We Jumped the Gun Moving React Components to ES2015 Class Syntax** + https://medium.com/dailyjs/we-jumped-the-gun-moving-react-components-to-es2015-class-syntax-2b2bb6f35cb3 + A Netflix engineer raises concerns about React deprecating `createClass` and pushing users to use ES6 classes. I personally think his concerns are overstated, but there's some interesting points, plus good discussion in the comments. + #### Component Rendering Logic @@ -360,6 +364,10 @@ http://blog.jakoblind.no/simple-explanation-of-higher-order-components-hoc/ A short, easy-to-read explanation of the basic concepts and examples of HOCs. +- **Sharing stateful UI logic in React apps using Render Callback components** + https://trevordmiller.com/blog/react-render-callback-components + Examples of how to use the "render callback" / "function as a child" pattern to extract common logic for reuse. + #### Wrapping Non-React Code diff --git a/react-deployment.md b/react-deployment.md index dad90f9..3992b57 100644 --- a/react-deployment.md +++ b/react-deployment.md @@ -36,4 +36,8 @@ - **Building a Full-Stack App with Serverless and React** http://serverless-stack.com/ A large, well-written, in-depth tutorial that covers all aspects of building a React app with an AWS "serverless" backend: creating an AWS account, setting up the serverless backend and API, building a React app that talks to the API, and deploying the React app on AWS. + +- **Using React in Multiple Environments** + https://daveceddia.com/multiple-environments-with-react/ + Discusses strategies for handling deployments to dev/staging/prod-type environments, including configuration of API endpoints and feature flags. \ No newline at end of file diff --git a/react-implementation.md b/react-implementation.md index 805a2b2..76e08be 100644 --- a/react-implementation.md +++ b/react-implementation.md @@ -97,6 +97,7 @@ http://www.mattgreer.org/articles/react-internals-part-one-basic-rendering/ http://www.mattgreer.org/articles/react-internals-part-two-componentWillMount-and-componentDidMount/ http://www.mattgreer.org/articles/react-internals-part-three-basic-updating/ + http://www.mattgreer.org/articles/react-internals-part-four-setState/ A 5-part series that will recreate React from the ground up, illustrating how it works along the way. @@ -170,6 +171,12 @@ - **Under the hood: ReactJS** https://bogdan-lyashenko.github.io/Under-the-hood-ReactJS/ An incredibly detailed walkthrough of React's entire codebase and execution flow, with many diagrams and flowcharts illustrating things. Very impressive. + +- **Preact Internals** + https://medium.com/@asolove/preact-internals-1-the-easy-parts-3a081fa36205 + https://medium.com/@asolove/preact-internals-2-the-component-model-36a05e32957b + https://medium.com/@asolove/preact-internals-3-some-fiddly-little-bits-f353b1ad7abc + A 3-part series that dives into the implementation and concepts of the Preact library codebase. #### React Fiber diff --git a/react-redux-testing.md b/react-redux-testing.md index 369acf6..a20db01 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -129,6 +129,10 @@ https://dev.bleacherreport.com/react-and-redux-testing-with-jest-how-some-jokers-learned-to-take-snapshots-c186c7e419e6 Discussion of how Jest snapshot tests can be used to replace some manually-written tests for both React components and Redux logic. +- **A Practical Guide to Testing React Apps** + http://acco.io/a-practical-guide-to-testing-react-apps/ + An excellent, comprehensive guide to React testing, covering some of the major tools, types of tests, how to write good React tests, and more. + #### Redux @@ -225,6 +229,10 @@ https://hackernoon.com/a-guide-to-tdd-a-react-redux-todolist-app-part-3-f25c2289c54 https://hackernoon.com/a-guide-to-tdd-a-react-redux-todolist-app-part-4-edb62e113c9b A 4-part series that demonstrates a Test-Driven Development approach to writing a React/Redux app, with detailed explanations of what each test example does. + +- **Building a React/Redux app with Test Driven Development** + https://medium.com/@gilly.ames/building-a-react-redux-app-with-test-driven-development-b2ed73e60be9 + A guided walkthrough that shows how to apply TDD to actions, reducers, and services diff --git a/react-state-management.md b/react-state-management.md index 581f9ba..e17050c 100644 --- a/react-state-management.md +++ b/react-state-management.md @@ -62,6 +62,10 @@ - **Local Storage in React** https://www.robinwieruch.de/local-storage-react/ Demonstrates how to persist state in React using local storage, how to use it as a cache, and how to make it expire. + +- **How to manage or eliminate React state without Redux** + http://monicalent.com/blog/2017/07/23/manage-state-in-react/ + An excellent writeup on techniques you can use to help manage state in React without using Redux, including only using component state for things that are really needed, extracting state management logic, and rethinking when you actually need stateful components. #### Using `setState` @@ -113,4 +117,8 @@ - **"`setState` doesn't actually care whether you've mutated your data or not"** https://news.ycombinator.com/item?id=14706862 - A couple comments from myself, talking about how `setState` actually behaves in practice in relation to mutation and immutability. \ No newline at end of file + A couple comments from myself, talking about how `setState` actually behaves in practice in relation to mutation and immutability. + +- **Atomic `setState` Updates in React** + https://alligator.io/react/getting-atomic-updates-with-setstate/ + Discusses how the standard object form of `setState` can cause race conditions, while the functional form is more predictable. \ No newline at end of file diff --git a/react-styling.md b/react-styling.md index 1033e20..3a06309 100644 --- a/react-styling.md +++ b/react-styling.md @@ -22,6 +22,10 @@ https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660 A fantastic article that reviews why people might want to write their styles in Javascript, explores possible benefits of doing so, and looks at how the "CSS" and "JS" communites can work together going forward. +- **U&I With React** + https://github.com/FarhadG/ui-react + A free online book that teaches how to modular, extendable, and scalable component-based UIs. Covers best practices, and techniques like CSS preprocessors, CSS modules, inline styles, and more. Chapters available to read for free on Github, and the Leanpub book can be picked up for free as well. + #### Components and Styling @@ -152,4 +156,5 @@ https://medium.com/taitounited/create-that-component-1-7a2267bc2833 https://medium.com/taitounited/create-that-component-2-f6e6ba2e6b5a https://medium.com/taitounited/create-that-component-3-25f1f722cead - A series of examples that build components for assorted concepts like toggle switches, ripple effects, and toasts, using libraries like styled-components. \ No newline at end of file + A series of examples that build components for assorted concepts like toggle switches, ripple effects, and toasts, using libraries like styled-components. + diff --git a/react-techniques.md b/react-techniques.md index 67815be..7c96c0c 100644 --- a/react-techniques.md +++ b/react-techniques.md @@ -1,10 +1,24 @@ ### React Tips and Techniques + + +- **Get your React.js application translated with style** + https://medium.com/@jamuhl/get-your-react-js-application-translated-with-style-4ad090aefc2c + A short opinionated intro to several aspects of handling translation in a React app, by the author of a React internationalization library. + +- **Adding Drag and Drop to React** + https://www.dailydrip.com/blog/adding-drag-and-drop-to-react.html + An example of using react-dnd to add drag-and-drop behavior, in conjunction with Redux. + + + +#### Debugging and Error Handling + - **Intro to Debugging React Applications** https://medium.com/@baphemot/intro-to-debugging-reactjs-applications-67cf7a50b3dd An excellent introduction to the basic tools, concepts, and approaches for debugging React apps, including the browser's DevTools console, network tab, and source debugger, as well as the React DevTools. -- **Get your React.js application translated with style** - https://medium.com/@jamuhl/get-your-react-js-application-translated-with-style-4ad090aefc2c - A short opinionated intro to several aspects of handling translation in a React app, by the author of a React internationalization library. \ No newline at end of file +- **React v16 beta is out, suddenly everyone needs to catch UI errors** + https://medium.com/shiftgig-blog/react-v16-beta-is-out-suddenly-everyone-needs-to-catch-ui-errors-37c8c4b527e9 + Discussion and examples of using the new `componentDidCatch` and `ErrorBoundary` features in React 16, including a demo of what errors they will and won't catch. \ No newline at end of file diff --git a/react-tutorials.md b/react-tutorials.md index db7108e..522b949 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -162,6 +162,11 @@ https://medium.com/@malinnaleach/the-philosophy-of-react-e2c126c61af3 Some high-level overviews of React's concepts, like state, props, and control flow +- **A few things every new React developer should know** + https://medium.com/deepscan/a-few-things-every-new-react-developer-should-know-part-1-93940e11800a + https://medium.com/deepscan/a-few-things-every-new-react-developer-should-know-part-2-913e089e8fc2 + + #### Project-Based Tutorials diff --git a/redux-architecture.md b/redux-architecture.md index f664a12..58a45fe 100644 --- a/redux-architecture.md +++ b/redux-architecture.md @@ -255,6 +255,10 @@ - **Why not to store objects in Redux** https://medium.com/trainline-engineering/manage-analytics-actions-in-react-67fae61495de Some quick thoughts on why you should keep plain JS objects in your store, instead of class instances. + +- **10 Redux tips to scale your dev team** + https://blog.matters.tech/10-redux-tips-from-the-trenches-55e06ed1c0a8 + Some excellent suggestions for helping larger dev teams use Redux successfully, including planning traing/docs reading time, generalizing action types, normalizing state, and more. #### Encapsulation and Reusability diff --git a/redux-side-effects.md b/redux-side-effects.md index 2667651..c772213 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -111,6 +111,10 @@ https://codebrahma.com/structuring-async-operations-react-redux-applications/ An introduction to the complexities of handling async logic in JS, and comparisons of how the same series of API calls could be handled using JS Promises, thunks, sagas, and observables. +- **"Redux and API/fetch calls. How do you handle them?** + https://twitter.com/rem/status/888361414070501376 + A Twitter poll asking about people's preferences for handling async work in Redux. The replies are interesting, and show a very wide variety of choices being used. + #### Sagas diff --git a/redux-techniques.md b/redux-techniques.md index 6003698..a51e774 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -259,6 +259,10 @@ https://atech.blog/natterly/toast-notification-system-in-a-react-redux-application The Natterly team walks through how they built a Redux-connected toast notification implementation. +- **A Functional Canvas Approach with Redux** + https://medium.com/@peterxjang/a-functional-canvas-approach-with-redux-ce59a369241b + Some simple examples of how to use Redux and vanilla JS canvas code to draw canvas-based UIs with minimal dependencies. + #### Redux and Forms @@ -378,6 +382,10 @@ http://jimpurbrick.com/2017/07/04/react-vr-redux-revisited/ A pair of posts that discuss using ReactVR and Redux to implement a networked VR application, including using a Redux middleware to synchronize actions between the clients, and approaches to managing consistency and optimistic updates. +- **Using dynamic localization to improve accessibility with React and Redux** + https://medium.com/checkr/using-dynamic-localization-to-improve-accessibility-with-react-and-redux-7650878af6ef + Some quick examples and discussion of how Checkr uses the react-redux-i18 package to set up localization for their app. + #### Network Management @@ -397,3 +405,11 @@ - **Introducing Redux Offline: Offline-First Architecture for Progresive Web Applications** https://hackernoon.com/introducing-redux-offline-offline-first-architecture-for-progressive-web-applications-and-react-68c5167ecfe0 An excellent blog post explaining the need for better offline behavior in web apps, and introducing a new Redux-based library that helps manage that behavior. + +- **Offline GraphQL Queries with Redux Offline and Apollo** + http://www.east5th.co/blog/2017/07/24/offline-graphql-queries-with-redux-offline-and-apollo/ + Discussion of how to use Redux Offline to enable persistance and Apollo queries of data while offline + +- **Redux Websocket Integration** + https://medium.com/@ianovenden/redux-websocket-integration-c1a0d22d3189 + A summary of one possible approach for integrating Websocket functionality into a React/Redux application architecture. diff --git a/static-typing.md b/static-typing.md index 56c534b..f4eb33e 100644 --- a/static-typing.md +++ b/static-typing.md @@ -176,6 +176,10 @@ - **React, Redux, and TypeScript: Typed Connect** https://www.silviogutierrez.com/blog/react-redux-and-typescript-typed-connect/ Discusses a simpler set of typings for the `connect` function and how to use them with React. + +- **A New Redux Action Pattern for TypeSCript 2.4+** + https://spin.atomicobject.com/2017/07/24/redux-action-pattern-typescript/ + Describes how to use the new features in TS 2.4, such as string enums, to simplify defining types for Redux actions. #### Advancing Typing Techniques