├── less-tutorials.md ├── css-reference.md ├── flow-tutorials.md ├── README.md ├── sass-tutorials.md ├── advance-css-tutorials.md ├── react-intermediate-tutorials.md ├── learn-core-javascript-es5.md ├── react-native-tutorials.md ├── react-advanced-tutorials.md ├── redux-tutorials.md ├── learn-javascript-es6.md └── react-basic-tutorials.md /less-tutorials.md: -------------------------------------------------------------------------------- 1 | #### Getting Started 2 | 3 | - **Getting Started with Less** 4 | https://scotch.io/tutorials/getting-started-with-less 5 | This is the article will take you from beginning to end on getting up and running with Less in no time. 6 | 7 | - **Learn LESS in 10 Minutes (or Less)** 8 | https://tutorialzine.com/2015/07/learn-less-in-10-minutes-or-less 9 | An overview of Less, how to download and use, examples and more. 10 | 11 | - **Sass vs SCSS vs Less** 12 | http://marksheet.io/sass-scss-less.html 13 | The Sass way -------------------------------------------------------------------------------- /css-reference.md: -------------------------------------------------------------------------------- 1 | ### CSS Tutorials 2 | 3 | - **Awesome CSS** 4 | https://github.com/sotayamashita/awesome-css 5 | A curated list of awesome frameworks, style guide and other cool nuggets for the amazing CSS 6 | 7 | - **The Magic of CSS** 8 | http://adamschwartz.co/magic-of-css/ 9 | A CSS course for web developers who want to be magicians. 10 | 11 | - **CSS Reference** 12 | http://cssreference.io/ 13 | A free visual guide to CSS 14 | 15 | - **CSS Tricks** 16 | https://css-tricks.com/ 17 | Tips, Tricks, and Techniques on using Cascading Style Sheets. 18 | 19 | - **What the FlexBox** 20 | https://flexbox.io/ 21 | A simple, free 20 video course that will help you master CSS Flexbox! 22 | 23 | - **CSS Transitions** 24 | http://css3.bradshawenterprises.com/transitions/ 25 | How to use CSS3 transitions, transforms and animations. 26 | 27 | - **5 Tips for Organizing Your CSS** 28 | http://erraticwisdom.com/2006/01/18/5-tips-for-organizing-your-css 29 | This article offers five really useful methods for keeping your stylesheets better organized (and, therefore, easier to edit later). 30 | -------------------------------------------------------------------------------- /flow-tutorials.md: -------------------------------------------------------------------------------- 1 | ### FLOW: is a static type checker for JavaScript. 2 | https://flow.org/ 3 | 4 | #### Flow Tutorials 5 | 6 | - **The Fundamentals of Flow in 10-ish Minutes** 7 | https://www.youtube.com/watch?v=xWMuAUbXcdQ 8 | A short presentation that looks at what Flow is, benefits, and how to use it 9 | 10 | - **Javascript Quick Tips and Tricks - FlowType** 11 | https://www.youtube.com/watch?v=rQh-5R7QVBM 12 | A short presentation that looks at what Flow is, benefits, and how to use it 13 | 14 | - **Flow Guide: The Definitive Guide for using Flow** 15 | https://github.com/ryyppy/flow-guide 16 | Instructions on setting up Flow, a style guide, and links to further info 17 | 18 | - **Setting up Flow when you've already got Babel in place** 19 | https://medium.freecodecamp.com/using-flow-with-babel-c04fdca8d14d 20 | Instructions for integrating Flow into an existing project 21 | 22 | - **Flow type cheat sheet** 23 | http://www.saltycrane.com/blog/2016/06/flow-type-cheat-sheet/ 24 | A comprehensive list of built-in Flow types 25 | 26 | - **Notes on Flow type checking in Javascript** 27 | https://davidxmoody.com/2016/notes-on-flow-type-checking-in-javascript/ 28 | A variety of quick notes and snippets of Flow syntax for various use cases -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Awesome Full Stack Resources 2 | 3 | A collection of curated high-quality articles and resources for someone who wants to levelup their skills as a FullStack Developer. 4 | 5 | > All you need to becoming Full Stack Developer in 2017 6 | 7 | Below you find a set of technologies that you would want to adopt in order to become a frontend, backend or a devops. 8 | 9 | ## Table of Contents 10 | 11 | ### Frontend 12 | 13 | #### CSS 14 | * [CSS Tutorials](/css-reference.md) 15 | * [Protips](https://github.com/AllThingsSmitty/css-protips) 16 | * [Must Watch CSS Talks](https://github.com/AllThingsSmitty/must-watch-css) 17 | * [Scalable CSS](https://github.com/davidtheclark/scalable-css-reading-list) 18 | * [SASS Tutorials](./sass-tutorials.md) 19 | * [LESS Tutorials](./less-tutorials.md) 20 | * [Advance CSS Tutorials (Flexbox, Grids, ..etc)](./advance-css-tutorials.md) 21 | 22 | #### JavaScript 23 | * [Learn Core Javascript (ES5)](./learn-core-javascript-es5.md) 24 | * [Learn Javascript (ES6+)](./learn-javascript-es6.md) 25 | 26 | - **React**: 27 | - [React Basic](./react-basic-tutorials.md) 28 | - [React Intermediate](./react-intermediate-tutorials.md) 29 | - [React Advanced](./react-advanced-tutorials.md) 30 | - [Redux Tutorials](./redux-tutorials.md) 31 | - [Flow Tutorials](./flow-tutorials.md) 32 | 33 | - **React Native**: 34 | - [React Native](./react-native-tutorials.md) 35 | -------------------------------------------------------------------------------- /sass-tutorials.md: -------------------------------------------------------------------------------- 1 | ### SASS Tutorials 2 | 3 | - **Why You Should Be Using It** 4 | https://medium.com/the-web-crunch-publication/a-deeper-look-at-sass-and-why-you-should-be-using-it-e7ec48dcec4c 5 | A Deeper Look at Sass and Why You Should Be Using It 6 | 7 | - **For Beginners: The Friendliest Guide About INSTALLING and USING Sass on Windows** 8 | https://medium.com/@ricardozea/sass-for-beginners-the-friendliest-guide-about-how-to-install-use-sass-on-windows-22ff4a32c1f7 9 | The simplest and most detailed guide about how to install and use Sass you’ll ever read! 10 | 11 | - **Sass and Compass** 12 | http://thesassway.com/beginner 13 | Beginner Guides & Tutorials on Sass and Compass 14 | 15 | - **How Sass Can Save You a Lot of Time** 16 | https://codeburst.io/how-sass-can-save-you-a-lot-of-time-f1198b658012 17 | In this article Robert Cooper explains what CSS preprocessors are, how you can install Sass, the 2 different Sass syntaxes, some of the main features of Sass and finish off with some cool examples. 18 | 19 | - **Useful Sass mixins** 20 | https://medium.com/@vilcins/usefull-sass-mixins-7a68c5491bda 21 | In this post some nifty mixins that should help speed up your development process. 22 | 23 | - **Sass and Compass** 24 | http://thesassway.com/beginner 25 | Beginner Guides & Tutorials on Sass and Compass 26 | 27 | - **Sass and Compass** 28 | http://thesassway.com/beginner 29 | Beginner Guides & Tutorials on Sass and Compass -------------------------------------------------------------------------------- /advance-css-tutorials.md: -------------------------------------------------------------------------------- 1 | ### Advanced CSS Tutorials 2 | 3 | - **Introduction to CSS Grid Layout** 4 | https://mozilladevelopers.github.io/playground/css-grid 5 | Simple tutorial to learn CSS Grid from Mozilla. 6 | 7 | - **A Complete Guide to Grid** 8 | https://css-tricks.com/snippets/css/complete-guide-grid/ 9 | CSS Tricks ‘Complete guide to grid’ 10 | 11 | - **Learn CSS Grid in 5 Minutes** 12 | https://medium.freecodecamp.org/learn-css-grid-in-5-minutes-f582e87b1228 13 | A quick introductions to the future of website layouts. 14 | 15 | - **Flexbox Froggy** 16 | http://flexboxfroggy.com/ 17 | a game where you help Froggy and friends by writing CSS code. 18 | 19 | - **CSS Grid Garden** 20 | http://cssgridgarden.com/ 21 | fantastic way to get started with CSS Grid 22 | - **CSS Grid Template Builder** 23 | https://codepen.io/anthonydugois/pen/RpYBmy 24 | CSS Grid template builder is a great GUI that can easily build both simple and complex grid templates 25 | 26 | - **CSS Griddy** 27 | http://griddy.io/ 28 | Another great interactive tool which allows you to build a CSS grid within your browser 29 | 30 | - **Grid by example** 31 | https://gridbyexample.com/resources/ 32 | A collection of usage examples for the CSS Grid Layout specification created by Rachel Andrew. 33 | 34 | - **Grid Critters** 35 | https://gridcritters.com/p/gridcritters 36 | Master CSS Grids, Save the Critters (Premium Course $225) 37 | 38 | - **Work with animations** 39 | https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animation 40 | -------------------------------------------------------------------------------- /react-intermediate-tutorials.md: -------------------------------------------------------------------------------- 1 | ### Using React with ES6 2 | 3 | - **Which React Component Class Syntax Should I Use?** 4 | http://reactkungfu.com/2015/07/what-react-component-class-syntax-should-i-use/ 5 | Compares the standard React.createClass() syntax vs ES6 React.Component class syntax 6 | 7 | - **Coding with React like a Game Developer** 8 | https://medium.com/@PhilPlckthun/coding-with-react-like-a-game-developer-e39ffaed1643 9 | Demonstrates React usage with ES5 vs ES6, plus some other topics 10 | 11 | - **Chossing React Component Styles** 12 | http://benmccormick.org/2016/05/02/digging-into-react-choosing-component-styles/ 13 | A comparison of the three ways to define a React component. Good descriptions, and links to some other related discussions. 14 | 15 | - **"Arrow Function vs autobind vs bindbindbind?"** 16 | https://www.reddit.com/r/reactjs/comments/54xnao/fat_arrow_vs_autobind_vs_bindbindbindbindbind/d85wj0l 17 | Dan Abramov comments, giving his thoughts on how to handle method binding. 18 | 19 | - **React without `this`** 20 | https://medium.com/@baronmaximilianwilleford/react-without-this-39a76b8f2160 21 | Examples of how to write components in a style that does not require the `this` keyword. Not the common approach, but an interesting idea. 22 | 23 | - **React `createClass` vs ES6 Class Components** 24 | https://www.fullstackreact.com/articles/react-create-class-vs-es6-class-components/ 25 | A comparison of the different ways to create class components in React, and some of the differences between how they behave (including method binding) 26 | 27 | - **React and ES6 - Binding Approaches** 28 | http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html 29 | Various methods of binding "this" in React ES6 classes 30 | 31 | - **Why and How to Bind Methods in your React Component Classes** 32 | http://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react-component-classes/ 33 | A good look at function binding in JS, and how it works with React 34 | -------------------------------------------------------------------------------- /learn-core-javascript-es5.md: -------------------------------------------------------------------------------- 1 | ### Learning Core Javascript (ES5) 2 | 3 | ### General Resources 4 | - **Mozilla Developer Network: Javascript** 5 | https://developer.mozilla.org/en-US/docs/Web/JavaScript) 6 | **Mozilla Developer Network: A Re-Introduction to Javascript** 7 | https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) 8 | Mozilla maintains a fantastic set of developer resources for Web technologies, including a comprehensive reference to the Javascript language and a number of associated tutorials. Their "reintroduction to Javascript" article is a great overview of what the language looks like. 9 | - **Eric Elliott's Javascript Resource Lists** 10 | https://medium.com/javascript-scene/10-priceless-resources-for-javascript-learners-bbf2f7d7f84e) 11 | _ **Eric Elliott's Essential Javascript Links** 12 | https://gist.github.com/ericelliott/d576f72441fc1b27dace/0cee592f8f8b7eae39c4b3851ae92b00463b67b9) 13 | Eric Elliott is a strong proponent of Javascript, has written numerous articles about learning and understanding Javascript, and assembled some very useful lists of numerous Javascript resources. (Strong opinions, but has useful info.) 14 | - **Wes Bos's Javascript Resource List** 15 | http://wesbos.com/learn-javascript) 16 | Speaker and teacher Wes Bos gives links to a number of resources for learning Javascript 17 | 18 | ### Books 19 | - **Eloquent Javascript** 20 | http://eloquentjavascript.net/ 21 | A full online book teaching Javascript from the ground up. Very recommended. 22 | - **You Don't Know Javascript** 23 | https://github.com/getify/You-Dont-Know-JS 24 | An online book series intended to teach all aspects of Javascript, including the "tougher" parts. 25 | - **Exploring Javascript** 26 | http://exploringjs.com/ 27 | 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. -------------------------------------------------------------------------------- /react-native-tutorials.md: -------------------------------------------------------------------------------- 1 | ### React Native 2 | 3 | #### Getting Started 4 | 5 | - **Create your first React Native App with no build config** 6 | https://github.com/react-community/create-react-native-app 7 | a new tool that makes it significantly easier to get started with a React Native project! It’s heavily inspired by the design of Create React App and is the product of a collaboration between Facebook and Expo (formerly Exponent). 8 | 9 | - **React Native Express** 10 | http://www.reactnativeexpress.com 11 | Learn React Native through interactive examples 12 | 13 | #### Tutorials 14 | 15 | - **React Native Workshop** 16 | https://rangle-io.gitbooks.io/react-native-workshop/content/ 17 | This material is for those who are familiar with ReactJS and are willing to dive into developing mobile apps with React Native. 18 | 19 | - **React Native Beginner** 20 | https://www.youtube.com/playlist?list=PL7D-0n1z1EbgAoLu1n5wjcMLDDAQqXOMw 21 | Learn React Native Series for Begineers 22 | 23 | - **Stylying React Native** 24 | https://www.youtube.com/playlist?list=PL7D-0n1z1EbhkundIsOBaN_mlLvV4_hyO 25 | Learn how to design your React Native App UI 26 | 27 | - **A Year of React Native: Styling** 28 | https://madebymany.com/stories/a-year-of-react-native-styling-part-1 29 | https://madebymany.com/stories/a-year-of-react-native-styling-part-2 30 | Looks at ways that styling in RN differs from styling on the web, and useful patterns for organizing styling logic in RN apps. 31 | 32 | - **What Is React Native?** 33 | http://www.learnreact.design/2017/06/20/what-is-react-native/ 34 | React Essentials for Designers 35 | 36 | - **Building the F8 App** 37 | http://makeitopen.com/ 38 | A dive into how the Facebook F8 conference mobile app was built, including planning, design, testing, and data management. 39 | 40 | - **What are the main differences between ReactJS and React-Native?** 41 | https://medium.com/@alexmngn/from-reactjs-to-react-native-what-are-the-main-differences-between-both-d6e8e88ebf24 42 | What I’ve learned from building web, then mobile apps with React 43 | 44 | - **Build an Imgur Client with React Native and MobX** 45 | https://medium.com/react-native-development/build-an-imgur-client-with-react-native-and-mobx-react-native-school-53146d648250 46 | A tutorial that demonstrates build an RN app with MobX for state management, use of RESTful APIs, full-screen images in a ListView, and detection of device orientation 47 | 48 | - **Offline-First Apps with React Native and Redux** 49 | http://rationalappdev.com/offline-first-apps-with-react-native-and-redux/ 50 | A tutorial that builds out a cat GIF app using React Native, Redux, Node, and Express, and includes offline support. 51 | 52 | - **Let's Build: Cryptocurrency Native Mobile App with React Native + Redux** 53 | https://medium.com/react-native-training/bitcoin-ripple-ethereum-price-checker-with-react-native-redux-e9d076037092 54 | https://medium.com/@wesharehoodies/tutorial-react-native-redux-native-mobile-app-for-tracking-cryptocurrency-bitcoin-litecoin-810850cf8acc 55 | https://medium.com/@wesharehoodies/learn-how-to-build-a-rn-redux-cryptocurrency-app-chapter-iii-a454dda156b 56 | https://medium.com/@wesharehoodies/learn-how-to-build-a-rn-redux-cryptocurrency-app-chapter-iv-b0e0c5ca2dca 57 | A 4-part tutorial series that shows how to set up a React Native project, add Redux, fetch data with Redux, and display that data with React. 58 | 59 | - **React Native Effective Patterns** 60 | https://medium.com/the-poli/react-native-effective-patterns-3e0c9db6c32c 61 | Some useful suggestions for writing React Native apps, including use of callbacks, separating navigation from views, use of Redux, and more. 62 | 63 | - **How we restructured our app with React-Navigation** 64 | https://m.oursky.com/how-we-restructured-our-app-with-react-navigation-98a89e219c26 65 | Describes some of the history of the React-Navigation library, and shows some examples of how to use it with Redux and make a Higher-Order Component to work with it. 66 | 67 | - **How to Integrating React-Navigation with Redux including authentication flow** 68 | https://medium.com/@shubhnik/a-comprehensive-guide-for-integrating-react-navigation-with-redux-including-authentication-flow-cb7b90611adf 69 | An extended tutorial that demonstrates connecting React-Navigation and Redux, and shows how to implement an authentication workflow. 70 | -------------------------------------------------------------------------------- /react-advanced-tutorials.md: -------------------------------------------------------------------------------- 1 | ### Advanced React Resources 2 | 3 | #### Component Patterns 4 | 5 | - **Learn React Fundamentals and Advanced Patterns** 6 | https://blog.kentcdodds.com/learn-react-fundamentals-and-advanced-patterns-eac90341c9db 7 | Two and a half hours of new (beginner and advanced) React material from Kent C. Dodds are now available for free on Egghead.io! 8 | 9 | - **React Patterns** 10 | http://reactpatterns.com/ 11 | An excellent list of common patterns for structuring React components, with examples 12 | 13 | - **10 React mini-patterns** 14 | https://hackernoon.com/10-react-mini-patterns-c1da92f068c5 15 | List of design patterns/techniques used while developing with React 16 | 17 | - **React Component Patterns** 18 | https://levelup.gitconnected.com/react-component-patterns-ab1f09be2c82 19 | Stateful x Stateless, Container x Presentational, HOCs, Render Callbacks and more 20 | 21 | - **Higher Order Components** 22 | https://www.sitepoint.com/react-higher-order-components/ 23 | Higher Order Components: A React Application Design Pattern 24 | 25 | - **Breaking up with Higher Order Components.** 26 | https://medium.com/tandemly/im-breaking-up-with-higher-order-components-44b0df2db052 27 | Writing declarative, readable and flexible React components using render props instead of HOCs 28 | 29 | - **React Training: Advanced React - React Patterns** 30 | https://reacttraining.com/patterns/ 31 | The lecture videos from React Training's "Advanced React" course. The videos themselves are now free. Covers topics like declarative vs imperative, compound components, context, Higher Order Components, render props, and controlled components. 32 | 33 | - **How to declare React Components in 2017** 34 | https://medium.com/@npverni/how-to-declare-react-components-in-2017-2a90d9f7984c 35 | A quick overview of the three ways to declare React components, and which ones should be preferred. 36 | 37 | - **React Stateless Functional Components: Nine Wins You Might Have Overlooked** 38 | https://medium.com/@housecor/react-stateless-functional-components-nine-wins-you-might-have-overlooked-997b0d933dbc 39 | Thoughts on reasons why you might want to write more components using the functional syntax. 40 | 41 | #### Component Composition 42 | 43 | - **Higher Order Components: Theory and Practice** 44 | http://engineering.blogfoster.com/higher-order-components-theory-and-practice/ 45 | Gives practical use cases for HOCs, such as authentication, routing, and data management, with samples. 46 | 47 | - **Sharing and Testing Code in React with Higher Order Components** 48 | http://blog.carbonfive.com/2016/02/02/sharing-and-testing-code-in-react-with-higher-order-components/ 49 | Demonstrates extracting HOCs from existing code, and testing them. 50 | 51 | - **Higher Order React Components** 52 | http://natpryce.com/articles/000814.html 53 | A solid explanation of what HoCs are, with examples and use cases 54 | 55 | - **Higher Order Components: A React Application Design Pattern** 56 | https://www.sitepoint.com/react-higher-order-components/ 57 | A discussion of how to use Higher Order Components to keep your React applications tidy, well structured and easy to maintain. Also, how pure functions keep code clean and how these same principles can be applied to React components. 58 | 59 | - **Connected Higher Order Components with React and Redux** 60 | http://www.avitzurel.com/blog/2016/08/03/connected-higher-order-components-with-react-and-redux/ 61 | Demonstrates creating HoCs that are connected to Redux 62 | 63 | - **React, Higher Order Components, and Legacy Applications** 64 | http://browniefed.com/blog/react/ 65 | Examples of how to integrate React into an existing application using HoCs 66 | 67 | - **React Higher Order Components in depth** 68 | https://medium.com/@franleplant/react-higher-order-components-in-depth-cf9032ee6c3e 69 | A very detailed article looking at some advanced HoC patterns 70 | 71 | - **Real World Examples of Higher Order Components** 72 | http://rea.tech/reactjs-real-world-examples-of-higher-order-components/ 73 | Explanations and examples of HOCs and their uses 74 | 75 | - **ReactCasts: Higher Order Components** 76 | https://youtu.be/LTunyI2Oyzw 77 | A screencast that walks through the idea and usage of Higher Order Components 78 | 79 | #### Component Rendering 80 | 81 | - **How to Dynamically Render React Components** 82 | http://kyleshevlin.com/how-to-dynamically-render-react-components/ 83 | A quick example of how to dynamically decide which component type to render 84 | 85 | - **All the Conditional Renderings in React** 86 | https://www.robinwieruch.de/conditional-rendering-react/ 87 | Examples of all the possible ways to conditionally render components 88 | 89 | #### React Component Lifecycle 90 | 91 | - **React Docs: Component Specs and Lifecycle** 92 | https://facebook.github.io/react/docs/component-specs.html 93 | The official React docs page on component lifecycle 94 | 95 | - **Understanding the React Component Lifecycle** 96 | http://busypeoples.github.io/post/react-component-lifecycle/ 97 | A good look at which lifecycle methods run in which situations, as well as the signatures of each method. 98 | 99 | - **Dissecting React Lifecycle Methods** 100 | https://medium.com/@fay_jai/dissecting-reactjs-lifecycle-methods-be4fdea11c6d 101 | Breaks the lifecycle methods down into "mount/unmount" and "update" categories, and describes the purpose and use of each. 102 | 103 | - **The React Component Lifecycle** 104 | https://www.kirupa.com/react/component_lifecycle.htm 105 | Another useful description of the order and purpose of the lifecycle methods. 106 | 107 | - **React In-Depth: The React Life Cycle** 108 | https://developmentarc.gitbooks.io/react-indepth/content/ 109 | A deep dive into the lifecycle methods, and various techniques for using them. 110 | 111 | - **React Lifecycle Cheatsheet** 112 | https://gist.github.com/bvaughn/923dffb2cd9504ee440791fade8db5f9 113 | A table listing the lifecycle methods, when they're called, whether each method allows side effects or state updates, and examples uses for each method 114 | 115 | - **React Lifecycle Methods - how and when to use them** 116 | https://engineering.musefind.com/react-lifecycle-methods-how-and-when-to-use-them-2111a1b692b1 117 | A helpful description of the major component lifecycle methods, including descriptions of common use cases for each one, and whether you can call `setState` inside. -------------------------------------------------------------------------------- /redux-tutorials.md: -------------------------------------------------------------------------------- 1 | ### Redux Reducers and Selectors 2 | 3 | - **Redux Docs: Structuring Reducers** 4 | http://redux.js.org/docs/recipes/StructuringReducers.html 5 | Comprehensive information on writing reducers and structuring data, covering reducer composition, use of `combineReducers`, normalizing data, proper immutable updating, and more. 6 | 7 | - **"How to dynamically load reducers for code splitting in a Redux application?"** 8 | http://stackoverflow.com/questions/32968016/how-to-dynamically-load-reducers-for-code-splitting-in-a-redux-application 9 | Dan Abramov gives a basic exapmle of how to rebuild and replace the root reducer function at runtime 10 | 11 | - **The Power of Higher-Order Reducers** 12 | http://slides.com/omnidan/hor#/ 13 | A slideshow from the author of redux-undo and other libraries, explaining the concept of higher-order reducers and how they can be used 14 | 15 | - **Taking Advantage of `combineReducers`** 16 | http://randycoulman.com/blog/2016/11/22/taking-advantage-of-combinereducers/ 17 | Examples of using `combineReducers` multiple times to produce a state tree, and some thoughts on tradeoffs in various approaches to reducer logic. 18 | 19 | - **State Snapshots in Redux** 20 | http://kyleshevlin.com/state-snapshots-in-redux/ 21 | Describes a useful technique for saving copies of state slices on command, and re-applying those copies at a later point to ensure a known starting point for further actions. 22 | 23 | - **Reducer composition with Higher Order Reducers** 24 | https://medium.com/@mange_vibration/reducer-composition-with-higher-order-reducers-35c3977ed08f 25 | Some great examples of writing small functions that can be composed together to perform larger specific reducer tasks, such as providing initial state, filtering, updating specific keys, and more. 26 | 27 | - **Higher Order Reducers - It just sounds scary** 28 | https://medium.com/@danielkagan/high-order-reducers-it-just-sounds-scary-2b9e5dbfc705 29 | Explains how reducers can be composed like Lego bricks to create reusable and testable reducer logic. 30 | 31 | - **A small trick to write clean reducers** 32 | https://hackernoon.com/a-small-trick-to-write-clean-reducers-a0b1b1eff3d2 33 | Shows a contrived example of updating deeply nested state, and discusses use of `lodash/fp` to simplify the update logic instead. 34 | 35 | - **Combine Redux reducers like a Tetris ninja** 36 | https://engineering.legalstart.fr/combine-redux-reducers-like-a-tetris-ninja-6f4eb690aed5 37 | Discusses the intended use case and limitations of `combineReducers`, and presents a custom utility called `combineMultiKeyReducers` that will pass along specified slices of state to a reducer. 38 | 39 | - **Querying a Redux Store** 40 | https://medium.com/@adamrackis/querying-a-redux-store-37db8c7f3b0f 41 | A look at best practices for organizing and storing data in Redux, including normalizing data and use of selector functions. 42 | 43 | - **Normalizing Redux Stores for Maximum Code Reuse** 44 | https://medium.com/@adamrackis/normalizing-redux-stores-for-maximum-code-reuse-ae6e3844ae95 45 | Thoughts on how normalized Redux stores enable some useful data handling approaches, with examples of using selector functions to denormalize hierarchical data. 46 | 47 | - **Practical Redux: Using Redux-ORM** 48 | http://blog.isquaredsoftware.com/2016/10/practical-redux-part-1-redux-orm-basics/ 49 | http://blog.isquaredsoftware.com/2016/10/practical-redux-part-2-redux-orm-concepts-and-techniques/ 50 | A look at how Redux-ORM can help manage normalized data in a Redux store, including use cases, basic usage, key concepts, and advanced techniques. 51 | 52 | - **"How do you add/remove to a redux store generated with normalizr?** 53 | http://stackoverflow.com/questions/34954726/how-do-you-add-remove-to-a-redux-store-generated-with-normalizr 54 | Stack Overflow discussion of how to handle updates to normalized data 55 | 56 | - **"Any deep-dive/advanced tutorials on reselect?"** 57 | https://www.reddit.com/r/reactjs/comments/5dxasp/any_deepdiveadvanced_tutorials_on_reselect/ 58 | Discussion on passing arguments to Reselect selectors, and how to use "factory functions" to define per-component selectors for Redux `mapState` functions 59 | 60 | - **ReactCasts #8: Selectors in Redux** 61 | https://www.youtube.com/watch?v=frT3to2ACCw 62 | A great overview of why and how to use selector functions to retrieve data from the store, and derive additional data from store values 63 | 64 | - **Use Selectors in Redux for Great Good** 65 | https://medium.com/@TomasEhrlich/use-selectors-in-redux-for-great-good-59286ce2e2a1 66 | A short article explaining the importance of selectors, with a few examples of how they benefit applications and how to use them. 67 | 68 | ### Redux Middleware 69 | 70 | - **A Beginner's Guide to Redux Middleware** 71 | https://www.codementor.io/reactjs/tutorial/beginner-s-guide-to-redux-middleware 72 | A useful explanation of middleware use cases, with numerous examples 73 | 74 | - **Understanding Redux Middleware** 75 | https://medium.com/@meagle/understanding-87566abcfb7a 76 | Breaks down Redux's applyMiddleware function line-by-line, and explains the concepts involved 77 | 78 | - **Building Redux Middleware** 79 | https://reactjsnews.com/redux-middleware 80 | Demonstrates building a basic Redux middleware 81 | 82 | - **Redux Middleware Tutorial** 83 | http://www.pshrmn.com/tutorials/react/redux-middleware/ 84 | An overview of what middleware is, how `applyMiddleware` works, and how to write middleware. 85 | 86 | - **Redux Middleware: Behind the Scenes** 87 | http://briantroncone.com/?p=529 88 | Digs into the concepts and implementation of middleware. 89 | 90 | - **Middlewares and React Redux Lifecycle** 91 | https://medium.com/@rajaraodv/using-middlewares-in-react-redux-apps-f7c9652610c6 92 | A description of what a middleware is, and how it works in Redux 93 | 94 | - **Workshop Slides: Redux Middleware** 95 | http://www.slideshare.net/visualengin/workshop-22-reactredux-m 96 | A slideshow that explains how Redux middleware work, with several helpful visualizations 97 | 98 | - **Understanding Redux Middleware and Writing Custom Ones** 99 | https://dev.to/imwiss/understanding-redux-middleware-and-writing-custom-ones 100 | Describes the concept of middleware in Redux, possible use cases, and gives an example of writing a middleware to handle caching. 101 | 102 | ### Middleware Techniques 103 | 104 | - **Redux Hack: Custom Thunk APIs** 105 | http://chrispearce.co/redux-quick-hack-custom-thunk-apis/ 106 | Demonstrates writing a custom thunk middleware that injects additional dependencies into thunks. 107 | 108 | - **Connecting Redux to your API** 109 | https://blog.boldlisting.com/connecting-redux-to-your-api-eac51ad9ff89 110 | Describes imperative and declarative approaches to managing request data and metadata 111 | 112 | - **You Aren't Using Redux Middleware Enough** 113 | https://medium.com/@jacobp100/you-arent-using-redux-middleware-enough-94ffe991e6 114 | Suggestions for using middleware to solve a number of interesting use cases 115 | 116 | 117 | - **"Do I always need to return a value from a Redux middleware?"** 118 | https://stackoverflow.com/questions/45964129/do-i-always-need-to-return-a-value-from-a-redux-middleware/45964310#45964310 119 | My answer to a question about whether middleware should do `return next(action)`. Short version: yes, always, unless you want to alter expected behavior. 120 | 121 | - **Practical Advanced Redux Webinar: Redux Middleware** 122 | https://www.youtube.com/watch?v=DqWiuvuK_78 123 | A recorded screenshare livestream that discusses the usefulness of Redux middleware, and demonstrates building middleware for fetching data, logging, and throttling. -------------------------------------------------------------------------------- /learn-javascript-es6.md: -------------------------------------------------------------------------------- 1 | ### Javascript ES6 Features 2 | 3 | #### Overviews 4 | 5 | - **ES6 Features Overview** 6 | https://github.com/lukehoban/es6features 7 | Examples of each of the new major features 8 | 9 | - **ES6 Features Comparison** 10 | http://es6-features.org/ 11 | Code snippets comparing ES6 features with their ES5 equivalents 12 | 13 | - **ES6 Overview in 350 Bullet Points** 14 | https://ponyfoo.com/articles/es6 15 | Quick samples and descriptions of all the various ES6 capabilities 16 | 17 | - **Javascript Features** 18 | http://jsfeatures.in/#ES6 19 | More samples of features in ES5, ES6, and ES7 20 | 21 | - **ES6 - The Bits You'll Actually Use** 22 | http://jamesknelson.com/es6-the-bits-youll-actually-use/ 23 | A quick tour through some of the more useful features in ES6 24 | 25 | - **ES6 Succinctly** 26 | http://kamranahmed.info/blog/2016/04/04/es6-in-depth/ 27 | A very readable overview of the features in ES6, why you would want to use them, and examples showing what they look like. 28 | 29 | - **How to Learn ES6** 30 | https://medium.com/javascript-scene/how-to-learn-es6-47d9a1ac2620 31 | A set of resources for learning ES6 32 | 33 | - **ES6 for Humans** 34 | https://github.com/metagrover/ES6-for-humans 35 | A kickstarter guide to writing ES6. 36 | 37 | - **Start Using ES6 Today** 38 | http://wesbos.github.io/ES6-Talk/ 39 | A set of slides describing the features in ES6 40 | 41 | - **Learn Harmony (ES2015) Now** 42 | http://learnharmony.org/ 43 | An interactive tool for learning and experimenting with ES6/ES2015 features 44 | 45 | - **ES6 New Features Tutorials** 46 | https://www.youtube.com/playlist?list=PL6gx4Cwl9DGBhgcpA8eTYYWg7im72LgLt 47 | A set of video tutorials explaining the new features in ES6 48 | 49 | - **ES6 Cheatsheet** 50 | https://es6cheatsheet.com/ 51 | An interactive cheatsheet with editable and runnable examples to help explain the new syntax and features in ES6. Offered as a "Pay What You Want" model, so $0 is a valid choice, but payments are requested. 52 | 53 | - **A Rundown of Javascript 2015 Features** 54 | https://auth0.com/blog/a-rundown-of-es6-features/ 55 | An overview of the features in ES6 and how they can be used. 56 | 57 | - **ES6 Summary** 58 | https://github.com/zsolt-nagy/es6-summary 59 | A list of ES6 features and their ES5 equivalents 60 | 61 | - **Introduction to commonly used ES6 features** 62 | https://zellwk.com/blog/es6/ 63 | A great look at how several of the most useful ES6 features work, such as block scoping, arrow functions, and destructuring. 64 | 65 | - **ES6 Katas: Learn ES6 by doing it** 66 | http://es6katas.org/ 67 | Sets of exercises to help you learn ES6 features and syntax. 68 | 69 | - **Tiny ES6 Notebook** 70 | https://github.com/mattharrison/Tiny-ES6-Notebook 71 | A large list of notes, examples, and discussion on how to use the features in ES6 72 | 73 | - **ECMASyntax** 74 | https://ecmasyntax.io 75 | A reference site listing the syntax of features in ES6, and comparing them with earlier ES behavior. 76 | 77 | - **Laracasts: ES2015 Crash Course** 78 | https://laracasts.com/series/es6-cliffsnotes 79 | A video screencast series that covers the new features and syntax in ES6/ES2015. 80 | 81 | 82 | #### In-Depth Details 83 | 84 | - **ES6 In Depth** 85 | https://ponyfoo.com/articles/tagged/es6-in-depth 86 | Many articles covering each feature in greater detail 87 | 88 | - **Exploring ES6** 89 | http://exploringjs.com/es6/index.html 90 | A full online book covering every aspect of ES6 in fine detail 91 | 92 | - **Understanding ES6** 93 | https://leanpub.com/understandinges6/read 94 | An online book that covers all the changes and features involved in ES6 95 | 96 | - **Javascript Alonge: The "Six" Edition** 97 | https://leanpub.com/javascriptallongesix/read 98 | A book that teaches Javascript and ES6 from a functional programming perspective 99 | 100 | - **Why Do ES6 Classes Exist, and Why Now?** 101 | http://appendto.com/2016/06/why-do-es6-classes-exist-and-why-now/ 102 | Digs into some of the intricacies of ES6 classes, and some of the pros and cons around using them 103 | 104 | 105 | 106 | 107 | #### Specific Features 108 | 109 | - **Metaprogramming in ES6: Symbols, Reflection, and Proxies** 110 | https://www.keithcirkel.co.uk/metaprogramming-in-es6-symbols/ 111 | https://www.keithcirkel.co.uk/metaprogramming-in-es6-part-2-reflect/ 112 | https://www.keithcirkel.co.uk/metaprogramming-in-es6-part-3-proxies/ 113 | A deep dive into three new features of ES6 that enable different ways of metaprogramming. 114 | 115 | - **Detailed overview of well-known Symbols** 116 | https://rainsoft.io/detailed-overview-of-well-known-symbols/ 117 | An in-depth look at the predefined Symbols in ES6 and what they are used for. 118 | 119 | - **Learning ES6: New Collections** 120 | https://www.eventbrite.com/engineering/learning-es6-new-collections/ 121 | Details the new Map, Set, WeakMap & WeakSet collection types in ES6. 122 | 123 | - **Learning ES6: Iterators and Iterables** 124 | https://www.eventbrite.com/engineering/learning-es6-iterators-iterables/ 125 | Covers the new iteration-related features in ES6 126 | 127 | - **The Most In-Depth Yet Understandable ES6 Destructuring Tutorial** 128 | http://untangled.io/in-depth-es6-destructuring-with-assembled-avengers/ 129 | A thorough set of examples for ES6's destructuring feature 130 | 131 | - **My New Favorite ES6 Toy: Destructured Objects as Parameters** 132 | https://css-tricks.com/new-favorite-es6-toy-destructured-objects-parameters/ 133 | An example of using objects and destructuring to act like named parameters 134 | 135 | - **Extract Nested Data from Arrays and Objects with Destructuring Assignment** 136 | https://angulartoreact.com/es6-destructuring/ 137 | Examples of how destructuring can make it easy to create new variables from other data. 138 | 139 | - **The Reflect API of ES6** 140 | http://www.zsoltnagy.eu/the-reflect-api-of-es6/ 141 | An overview of the Reflect API, which allows some complex metaprogramming capabilities. 142 | 143 | - **Advanced ES6 Destructuring Techniques** 144 | http://untangled.io/advanced-es6-destructuring-techniques/ 145 | Examples of advanced ways to use ES6's destructuring capabilities 146 | 147 | - **ES6 Proxies in Practice** 148 | http://www.zsoltnagy.eu/es6-proxies-in-practice/ 149 | An overview of how to use ES6 proxies for advanced use cases, with examples 150 | 151 | - **ES6 Features - 10 Use Cases for Proxy** 152 | http://dealwithjs.io/es6-features-10-use-cases-for-proxy/ 153 | Lists a variety of ways that ES6 proxies can be used, with links to examples 154 | 155 | - **Stop JavaScripting Like It's 1999** 156 | https://www.slideshare.net/HunterLoftis1/connecttech-2017-stop-javascripting-like-its-1999 157 | A slideshow that illustrates how to use async/await and Promises to write cleaner-looking file handling code in a Node environment. 158 | 159 | 160 | #### Generators 161 | 162 | - **Javascript Generators** 163 | https://blog.ragnarson.com/2016/12/15/javascript-generators.html 164 | A nice readable introduction to what generator functions are and how to use them 165 | 166 | - **Powering Javascript with Generators** 167 | http://appendto.com/2016/06/powering-javascript-with-generators 168 | A useful introduction to the generators feature in ES6. 169 | 170 | - **Using ES6 Generators and Yield to Implement Async Workflows** 171 | https://www.bennadel.com/blog/3123-using-es6-generators-and-yield-to-implement-asynchronous-workflows-in-javascript.htm 172 | A dive into how generators work, and how they can be used to handle async behavior 173 | 174 | - **A Practical Introduction to ES6 Generator Functions** 175 | http://thejsguy.com/2016/10/15/a-practical-introduction-to-es6-generator-functions.html 176 | Some practical examples discussing what generator functions are, how they work, and what they can be used for. 177 | 178 | - **3 cases where JavaScript generators rock (+ understanding them)** 179 | http://goshakkk.name/javascript-generators-understanding-sample-use-cases/ 180 | A simple thinking pattern for easily understanding generators, plus 3 practical applications. 181 | 182 | - **ES6 Generators and asynchronous Javascript** 183 | http://web.archive.org/web/20160304215133/https://alexperry.io/javascript/2015/09/17/es6-generators-and-asynchronous-javascript.html 184 | A clear description of how generator functions can be paused and continued, and how that capability enables writing asynchronous code in a synchronous-looking way. 185 | 186 | 187 | 188 | #### Promises 189 | 190 | - **Javascript Promises for Dummies** 191 | https://scotch.io/tutorials/javascript-promises-for-dummies 192 | An introduction to understanding promises 193 | 194 | - **Javascript Promises... in Wicked Detail** 195 | http://www.mattgreer.org/articles/promises-in-wicked-detail/ 196 | Explains what promises are and how they work by building a promise implementation from scratch 197 | 198 | - **Javascript Promises: an Introduction** 199 | https://developers.google.com/web/fundamentals/getting-started/primers/promises 200 | An explanation of what promises are, what they're useful for, terms, and related APIs 201 | 202 | - **ES6 Promises in Depth** 203 | https://ponyfoo.com/articles/es6-promises-in-depth 204 | A detailed description of promises, what they are, and how to use them 205 | 206 | - **Awesome Promises** 207 | https://github.com/wbinnssmith/awesome-promises 208 | Links to tutorials, articles, and other resources on promises 209 | 210 | - **We have a problem with promises** 211 | https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html 212 | Describes some common mistakes while using promises, and how to avoid them 213 | 214 | - **ES6 Promise Anti-Patterns and Best Practices** 215 | http://www.datchley.name/promise-patterns-anti-patterns/ 216 | Some advice for good usage of Promises 217 | 218 | - **Broken Promises** 219 | https://mockbrian.com/blog/2016/12/29/broken-promises/ 220 | Some useful tips for dealing with promises. 221 | 222 | - **JS: Promises/A+, jQuery Deferreds, and errors** 223 | http://lucybain.com/blog/2017/js-promises-errors-a-plus-vs-deferreds/ 224 | A comparison of the two most common Promise definitions, and how they differ in behavior 225 | 226 | - **Practical Promises** 227 | http://trycatchfail.com/blog/?tag=/promises 228 | An excellent series of articles describing the basics of promises, and listing a variety of useful techniques for using promises to solve problems. 229 | 230 | - **Escape from Callback Mountain: the "Functional River" pattern** 231 | https://github.com/justsml/escape-from-callback-mountain/ 232 | An opinionated suggested approach for writing promise callbacks to form a pipeline 233 | 234 | - **ES6 Promises: Patterns and Anti-Patterns** 235 | https://medium.com/datafire-io/es6-promises-patterns-and-anti-patterns-bbb21a5d0918 236 | Several useful techniques for using Promises, such as "promisifying" callback-based functions and running promises in parallel or sequence, and some common mistakes to avoid like not actually returning anything in a promise callback. 237 | 238 | - **Gotchas about async/await and Promises** 239 | https://dev.to/maxart2501/gotchas-about-asyncawait-and-promises-9di 240 | Several valuable tips about how to safely use async/await and Promise behavior, especially around error-handling. 241 | 242 | 243 | #### Techniques 244 | 245 | - **"Real" Mixins with Javascript Classes"** 246 | http://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/ 247 | An explanation of what mixins are, and how to implement them using ES6 classes 248 | 249 | - **Functional Mixins in ECMAScript 2015** 250 | http://raganwald.com/2015/06/17/functional-mixins.html 251 | Another approach at combining mixins and classes 252 | 253 | - **Selective transpilation for modern Javascript environments** 254 | https://medium.com/@adamrackis/selective-transpilation-for-modern-javascript-environments-15bde6b75cfd 255 | An investigation into ways to offer up differently-compiled bundles for different platforms with various levels of JS feature support. 256 | 257 | 258 | #### Javascript Module Formats 259 | 260 | - **JavaScript Modules: A Beginner's Guide** 261 | https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc 262 | https://medium.freecodecamp.com/javascript-modules-part-2-module-bundling-5020383cf306 263 | A two-part article discussing the various ways to define a module in Javascript, and common tools used to bundle modules together 264 | 265 | - **Understanding ES6 Modules via Their History** 266 | https://www.sitepoint.com/understanding-es6-modules-via-their-history/ 267 | A recap of how the various Javascript module formats evolved over time, and how that's lead to ES6 modules 268 | 269 | - **Javascript Module Systems Showndown: CommonJS vs AMD vs ES2015** 270 | https://auth0.com/blog/javascript-module-systems-showdown/ 271 | A look at the history and reasons for each module format's creation 272 | 273 | - **History and Background of Javascript Module Loaders** 274 | https://appendto.com/2016/06/the-short-history-of-javascript-module-loaders/ 275 | An overview of the various tools that have been used to load different module formats over time 276 | 277 | - **Understanding Javascript Modules: Bundling and Transpiling** 278 | https://www.sitepoint.com/javascript-modules-bundling-transpiling/ 279 | An overview of tools commonly used to bundle and transpile various module formats 280 | 281 | - **How Javascript Modules Work - from Past to Present** 282 | http://www.penta-code.com/how-javascript-modules-work-from-past-to-present/ 283 | An overview of the different approaches that have been used to load Javascript modules over time. 284 | 285 | - **Understanding the State of Javascript Modules** 286 | http://georgemauer.net/2016/11/25/how-js-modules-work.html 287 | A look at the major differences in module loading approaches, and why tools like Webpack or Browserify are needed to help, as well as recommendations on which tools to use adn why. 288 | 289 | - **Native ECMAScript Modules: Overview and New Features** 290 | https://blog.hospodarets.com/native-ecmascript-modules-the-first-overview 291 | https://blog.hospodarets.com/native-ecmascript-modules-new-features 292 | An in-depth look at existing module formats, how ES modules work, and how ES modules relate to bundlers like Webpack 293 | 294 | - **Native ECMAScript Modules: dynamic import()** 295 | https://blog.hospodarets.com/native-ecmascript-modules-dynamic-import 296 | Details on how the in-progress `import()` operator will allow dynamic loading of modules. 297 | 298 | - **A 10-Minute Primer to JS Module Formats, Loaders, and Bundlers** 299 | http://jvandemo.com/a-10-minute-primer-to-javascript-modules-module-formats-module-loaders-and-module-bundlers/ 300 | A useful introduction to the various module formats and module tools 301 | 302 | - **History of Javascript: Evolution of JS Modularity** 303 | https://github.com/myshov/history_of_javascript/tree/master/4_evolution_of_js_modularity 304 | A well-researched article that recounts the history and development of Javascript module definition approaches 305 | 306 | - **The State of Javascript Modules** 307 | https://medium.com/webpack/the-state-of-javascript-modules-4636d1774358 308 | An extended article summarizing the state of ES module implementations, how the transition to modules relates to the Node ecosystem, and what the changes will mean for Webpack users and module authors. 309 | 310 | - **Reify: Meteor's evolving Javascript module compiler** 311 | https://blog.meteor.com/reify-meteors-evolving-javascript-module-compiler-70425fa45d81 312 | A detailed look at the subtleties of ES6 module syntax, and how Meteor's Reify compiler and Babel's module transform plugin deal with those restrictions in different ways. 313 | 314 | - **ES6 Modules in Node Today** 315 | https://medium.com/web-on-the-edge/es-modules-in-node-today-32cff914e4b 316 | John-David Dalton, author of Lodash, announces his new ES6 module loader, which enables ES module usage in Node right now. 317 | 318 | - **State of Modules in JavaScript** 319 | https://www.sitepen.com/blog/2017/10/26/state-of-modules-in-javascript/ 320 | Covers the key features of ES modules, including basic syntax, syntax for importing/exporting/re-exporting, dynamic imports, debugging, bundling, and more. -------------------------------------------------------------------------------- /react-basic-tutorials.md: -------------------------------------------------------------------------------- 1 | ### React Tutorials 2 | 3 | #### Basic Introductions 4 | 5 | - **React Documentation** 6 | https://facebook.github.io/react/docs/hello-world.html 7 | https://facebook.github.io/react/tutorial/tutorial.html 8 | The official React documentation, recently rewritten with an excellent set of tutorials, explanations, and API information. 9 | 10 | - **Modern Web Development with React and Redux** 11 | http://blog.isquaredsoftware.com/2017/02/presentation-react-redux-intro/ 12 | An up-to-date HTML slideshow that introduces React and Redux, discusses why they help make applications easier to write via declarative code and predictable data flow, and demonstrates their basic concepts and syntax. Includes several interactive React component examples. 13 | 14 | - **30 Days of React** 15 | https://www.fullstackreact.com/30-days-of-react/ 16 | A tutorial series that walks you through how to use React, from the ground up, in 30 bite-size articles covering everything from "What is React?" to data management to testing and deployment. 17 | 18 | - **Learn React From Your Browser: Introducing React** 19 | https://reactarmory.com/guides/learn-react-by-itself 20 | https://reactarmory.com/examples/hello-world/jsx-hello-world 21 | An excellent tutorial that teaches React concepts from basic principles without buzzwords or build tools, using interactive editable examples. (This is a rewritten and improved version of the "Learn Raw React" tutorial.) Now includes an interactive editor to let you try working with React code there in the browser. 22 | 23 | - **Learn Raw React** 24 | http://jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webpack/ 25 | A ground-up React tutorial that leaves out any other related "modern" technologies, Very recommended if you want to skip the buzzwords and acronyms. 26 | 27 | - **React Fundamentals** 28 | https://tylermcginnis.com/courses/react-fundamentals/ 29 | An online course from an excellent React trainer. Covers key aspects of Javascript, React concepts as of React 16, React Router v4, and building and deploying an application. 30 | 31 | - **React Express** 32 | http://www.react.express/ 33 | An all-in-one beginner's guide to modern React application development. Gives an opinionated walkthrough through create-react-app, npm, webpack, babel, ES2015, ES2016, JSX, React, Redux, CSS-in-JS, and more. 34 | 35 | - **React to the Future** 36 | http://elijahmanor.com/talks/react-to-the-future/dist/#/ 37 | A well-written HTML slideshow describing what React is, what makes it special, and how to work with it 38 | 39 | - **React: Getting Started and Concepts** 40 | https://scotch.io/tutorials/learning-react-getting-started-and-concepts 41 | Walks through the basics of components, JSX, props/lifecycle, and data flow 42 | 43 | - **React.js for Stupid People** 44 | http://blog.andrewray.me/reactjs-for-stupid-people/ 45 | A high-level overview of what React is, and some pros and cons 46 | 47 | - **React.js Tutorial and Guide to the Gotchas** 48 | https://zapier.com/engineering/react-js-tutorial-guide-gotchas/ 49 | Excellent look at what React and JSX are, and how to handle components and state. Also some excellent guidelines to be aware of when writing React code. 50 | 51 | - **Intro to the React Framework** 52 | http://code.tutsplus.com/tutorials/intro-to-the-react-framework--net-35660 53 | Discusses components, JSX, component lifecycle, state/props, and mixins. Covers an older version of React, but most of the information is still useful. 54 | 55 | - **React.js Introduction For People Who Know Just Enough jQuery To Get By** 56 | http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-to-get-by/ 57 | A step-by-step tutorial that builds a simple component with jQuery and with React 58 | 59 | - **Build with React** 60 | http://buildwithreact.com/#articles 61 | A series of short articles introducing React concepts 62 | 63 | - **Survive.js Training** 64 | https://survivejs.github.io/training/#/0 65 | An interactive presentation that goes through quick intros to Babel and Webpack before covering React basics, type checking, state management with Redux and MobX, async data, routing, performance, testing, and structuring applications. 66 | 67 | - **React From Zero** 68 | https://github.com/kay-is/react-from-zero 69 | A simple (99% ES2015 less) tutorial for React. Everything runs in the browser without a manual pre-compilation. 70 | 71 | - **React Hello World Examples** 72 | https://gist.github.com/danawoodman/9cfddb1a0c934a35f31a 73 | A one-page set of simple snippets demonstrating usage of React 74 | 75 | - **I Learned How to be Productive in React in a Week and You Can, Too** 76 | https://css-tricks.com/productive-in-react/ 77 | A solid article written by a React newcomer, covering the basics, some gotchas, and important takeaways. Aimed at general web devs who are curious about React. 78 | 79 | - **React Enlightenment** 80 | http://www.reactenlightenment.com/ 81 | A straightforward, cookbook-style approach to learning React. (Currently a work-in-progress.) 82 | 83 | - **ReactJS Tutorial** 84 | http://www.tutorialspoint.com/reactjs/index.htm 85 | A multi-part tutorial covering numerous aspects of React. Each part is short and the writing is a bit awkward, but the topics and info are useful. 86 | 87 | - **React Tutorial** 88 | http://www.pshrmn.com/tutorials/react/react/ 89 | A very readable intro to React's concepts. 90 | 91 | - **React Workshop** 92 | https://github.com/jesstelford/react-workshop 93 | A self-directed set of workshop lessons that teach React basics. 94 | 95 | - **How React Do?** 96 | http://blog.jfo.click/how-react-do/ 97 | A tutorial written by someone as they learned React, stepping up through a series of React concepts. 98 | 99 | - **React Tutorials for Beginners** 100 | https://www.youtube.com/playlist?list=PL6gx4Cwl9DGBuKtLgPR_zWYnrwv-JllpA 101 | A set of video tutorials introducing React concepts 102 | 103 | - **A Walk Through My "Just Enough React To Get You Into Trouble" Presentation** 104 | http://www.globalnerdy.com/2016/07/22/a-walk-through-my-just-enough-react-to-get-you-into-trouble-presentation-at-tampa-code-camp-2016/ 105 | A blog post version of a talk introducing React's core concepts, and demoing them in JSFiddle 106 | 107 | - **React Intro** 108 | https://docs.google.com/presentation/d/19DaabQG8CB4INKGpaHao0hIXcB7zmETg4IHOZkF7MPM 109 | 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. 110 | 111 | - **React 101: Condensed** 112 | http://erikaybar.name/react-101-medium-and-slides/ 113 | Links to an HTML slideshow and accompanying blog post that introduce just enough info to give you a taste of what React is about. 114 | 115 | - **React by Example** 116 | https://medium.com/front-end-hacking/react-by-example-part-1-76d3e2137cf4 117 | https://medium.com/front-end-hacking/react-by-example-part-2-340582c6f552 118 | https://medium.com/@johntucker_48673/react-by-example-part-3-f825444bc1d8 119 | https://medium.com/@johntucker_48673/react-by-example-part-4-5d32168db362 120 | https://medium.com/@johntucker_48673/react-by-example-part-5-e1716e69dacc 121 | https://medium.com/@johntucker_48673/react-by-example-part-6-8c71dda057ac 122 | https://medium.com/@johntucker_48673/react-by-example-part-7-8dc97b57f668 123 | A multi-part series that illustrates core React concepts via a series of small example repos, with explanations of the source and concepts in the articles. 124 | 125 | - **React.js for the Visual Learner** 126 | https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-1-what-is-this-all-about-a0d28cfd33c6 127 | https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-2-what-is-react-and-why-is-it-cool-d1f9bac69a63 128 | https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-3-building-our-houses-295c43304b18 129 | https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-4-our-first-village-8b44427d4762 130 | https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-5-additions-to-our-houses-7e67ed97b62b 131 | https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-6-building-our-first-project-5429f1afde98 132 | https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-7-building-our-first-user-interface-c61e9a22be2f 133 | https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-8-implementing-react-router-6109671db576 134 | https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-9-chat-bot-demo-using-firebase-637445703c74 135 | https://medium.com/coding-artist/react-js-for-the-visual-learner-chapter-10-reacting-to-what-weve-learned-633ac18469ba 136 | A 10-part series that explains React (and many web dev concepts) from the ground up, with simple terms and lots of metaphors. Aimed at absolute beginners. 137 | 138 | - **Intro to React** 139 | https://www.writesoftware.org/topic/react 140 | A short tutorial series that introduces basic React concepts like JSX, components, props, state, and events. 141 | 142 | - **Everything You Should Know About React: The Basics You Need To Start Building** 143 | https://medium.freecodecamp.org/everything-you-need-to-know-about-react-eaedf53238c4 144 | A comprehensive tutorial that covers topics like components, rendering, JSX, state, event handling, async behavior, props, and refs. 145 | 146 | - **Introduction to React** 147 | http://ivanjurina.com/2017/11/19/introduction-to-react/ 148 | Useful notes and info on the basics of React, from someone who just learned React. 149 | 150 | 151 | #### React Concept Overviews 152 | 153 | - **React's Five Fingers of Death: Master these concepts to master React** 154 | https://medium.freecodecamp.com/the-5-things-you-need-to-know-to-understand-react-a1dbd5d114a3 155 | A humorously-titled quick introduction to some of React's basic concepts 156 | 157 | - **13 Things you need to know about React** 158 | http://aimforsimplicity.com/post/13-things-you-need-to-know-about-react/ 159 | A list of useful key concepts to understand if you want to "speak React" 160 | 161 | - **React Interview Questions** 162 | https://tylermcginnis.com/react-interview-questions/ 163 | Assorted questions and answers that come up while learning React 164 | 165 | - **React Cheat Sheet** 166 | http://reactcheatsheet.com/ 167 | A filterable list of React's APIs and concepts 168 | 169 | - **React Cheat Sheet** 170 | https://ihatetomatoes.net/react-cheat-sheet-pdf/ 171 | A downloadable PDF with snippets demonstrating uses of React's syntax and APIs 172 | 173 | - **The philosophy of React** 174 | https://medium.com/@malinnaleach/the-philosophy-of-react-e2c126c61af3 175 | Some high-level overviews of React's concepts, like state, props, and control flow 176 | 177 | - **A few things every new React developer should know** 178 | https://medium.com/deepscan/a-few-things-every-new-react-developer-should-know-part-1-93940e11800a 179 | https://medium.com/deepscan/a-few-things-every-new-react-developer-should-know-part-2-913e089e8fc2 180 | 181 | - **An Introduction to React and the Surrounding Ecosystem in 2017** 182 | https://www.youtube.com/watch?v=qDTQzIzqodw 183 | A video presentation that describes some of the business case and benefits of using React, introduces React component concepts, and discusses some of the common tools in the React ecosystem. 184 | 185 | - **React Interview Questions** 186 | https://github.com/Pau1fitz/react-interview 187 | A large list of questions on React concepts that might pop up in an interview, with answers. 188 | 189 | 190 | #### Project-Based Tutorials 191 | 192 | - **A Comprehensive Guide to Building Apps with React** 193 | http://tylermcginnis.com/reactjs-tutorial-a-comprehensive-guide-to-building-apps-with-react/ 194 | Walks through the major concepts and API functions in React 195 | 196 | - **Hacking with React** 197 | http://www.hackingwithreact.com/ 198 | A hands-on introduction to making a web app using React 0.14, React Router 1.0, ES6, Jest and more. Book is free to read online, and can also be purchased to get other formats. 199 | 200 | - **React/Flux Tutorial Part 1: React** 201 | http://spapas.github.io/2015/06/05/comprehensive-react-flux-tutorial/ 202 | Demonstrates building up a CRUD app UI using React 203 | 204 | - **Learn React** 205 | https://www.kirupa.com/react/index.htm 206 | A series of articles that cover a variety of topics, including project setup, components, styling, JSX, state, and more. 207 | 208 | - **React Primer (Draft)** 209 | https://github.com/mikechau/react-primer-draft 210 | A very long and well-written dive into React's concepts. Note that the "draft" label is accurate - it still says it covers React 0.12 and 0.13, and the non-React sections listed in the Table of Contents are empty. However, the existing React content is still useful, just be aware that some of the details may be out of date. 211 | 212 | - **React.js Program - React.js Fundamentals** 213 | http://courses.reactjsprogram.com/courses/reactjsfundamentals 214 | A 12-part text+video course that includes quizzes and a hands-on curriculum. The Fundamentals course is free, and the site also includes paid courses for other React and Redux-related topics. 215 | 216 | - **Step by Step Guide to React and Redux** 217 | http://satyam.github.io/book-react-redux/ 218 | A complete guide to building an app with React and Redux, from tool selection to project configuration to server and client code. (NOTE: Currently in-progress as of May 2016 - only covers project configuration and server-side setup so far, but the content looks promising.) 219 | 220 | - **React Speed Coding** 221 | https://leanpub.com/reactspeedcoding 222 | https://github.com/manavsehgal/reactspeedcoding 223 | A complete book that covers the entire application stack, from project setup to component design to connecting to a backend. Free to read online, other formats purchasable. Repo includes demos, samples, code from the book, and the manuscript. 224 | 225 | - **A Complete Intro to React** 226 | http://btholt.github.io/complete-intro-to-react/ 227 | An online workshop intended to get you up to speed on modern development and give you an idea what it's like to develop an app in the React ecosystem. 228 | 229 | - **React+Redux Workshop** 230 | https://github.com/btholt/react-redux-workshop 231 | An online workshop that gets you up to speed on using React and Redux 232 | 233 | - **React Tutorial: Build a Yelp Clone** 234 | https://www.fullstackreact.com/articles/react-tutorial-cloning-yelp/ 235 | A full-length walkthrough of how to build an app that uses routing, Google Maps integration, and more. 236 | 237 | - **Build a Music Player with React & Electron** 238 | https://scotch.io/tutorials/build-a-music-player-with-react-electron-i-setup-basic-concepts 239 | https://scotch.io/tutorials/build-a-music-player-with-react-electron-ii-making-the-ui 240 | https://scotch.io/tutorials/build-a-music-player-with-react-electron-iii-bringing-it-all-together 241 | A 3-part tutorial that builds a desktop music app with React for the UI and Electron for the desktop functionality 242 | 243 | - **Interactive Guide to Server-side rendering with Webpack, React, React Transmit, CSS modules and more** 244 | https://github.com/dimaip/server-side-rendering 245 | A Github project with a series of commits showing steps for putting together a basic app with server-side rendering and async data fetching. 246 | 247 | - **Building a Slack-Style Chat Application** 248 | http://codeutopia.net/blog/2016/01/17/learning-react-basics-and-building-a-basic-application-prototype/ 249 | http://codeutopia.net/blog/2016/01/25/getting-started-with-npm-and-browserify-in-a-react-project/ 250 | http://codeutopia.net/blog/2016/02/01/react-application-data-flow-where-and-how-to-store-your-data/ 251 | http://codeutopia.net/blog/2016/02/08/using-webrtc-and-react-to-build-a-basic-chat-server/ 252 | http://codeutopia.net/blog/2016/02/15/improving-our-react-workflow-with-es6-and-functional-stateless-components/ 253 | A multi-part series that builds up a chat application 254 | 255 | - **SurviveJS - React** 256 | http://survivejs.com/react/introduction 257 | A full book online book that shows how to develop a Kanban application. Covers key ideas of React, Flux, and advanced concepts such as styling. The commercial version has more content, but you can complete the basic tutorial for free. 258 | 259 | - **A Primer on the React Ecosystem** 260 | http://patternhatch.com/2016/07/06/a-primer-on-the-react-ecosystem-part-1-of-3/ 261 | http://patternhatch.com/2016/08/02/a-primer-on-the-react-ecosystem-part-2-of-3/ 262 | A multi-part tutorial that demonstrates how to set up a React development environment, create React components and have them respond to data changes, and manage app state with Redux. 263 | 264 | - **Building Your First Real-World React Application** 265 | http://academy.plot.ly/#react 266 | Max Stoiber's full-size tutorial on building an app using React. Includes an intro to React, project setup, using external libraries, data management with Redux, use of Immutable.js, and testing with Jest. 267 | 268 | - **React 101** 269 | https://blog.tighten.co/react-101-building-a-gif-search-engine 270 | https://blog.tighten.co/react-101-using-redux 271 | https://blog.tighten.co/react-101-routing-and-auth 272 | https://blog.tighten.co/react-101-part-4-firebase 273 | A great 4-part series that progressively builds up a Giphy search engine 274 | 275 | - **#ReactForNewbies: Building a Todo App with Create-React-App** 276 | https://edemkumodzi.com/reactfornewbies-building-a-todo-app-with-create-react-app-part-1-5aae4bd637ee 277 | https://edemkumodzi.com/reactfornewbies-building-a-todo-app-with-create-react-app-part-2-f846e2d8b820 278 | An ongoing series, written by someone who is writing the posts as he learns React. 279 | 280 | - **Rock and Roll React Tutorial** 281 | http://myappincome.co.uk/rock-and-roll-reactjs-tutorial-part-1/ 282 | http://myappincome.co.uk/rock-and-roll-react-js-tutorial-part-2/ 283 | http://myappincome.co.uk/rock-and-roll-react-js-tutorial-part-3/ 284 | A tutorial that builds a React version of the Ember "Rock and Roll App" example. Covers more intermediate topics, and is aimed at new React devs trying to grow their knowledge. 285 | 286 | - **Find Your Park with React and the DarkSky API** 287 | https://appendto.com/2016/10/find-your-park-with-reactjs-and-the-darksky-api/ 288 | Demonstrates building a small app that displays info on a Google map 289 | 290 | - **React Daily UI** 291 | http://codepen.io/collection/DoLZRm/ 292 | https://www.fullstackreact.com/react-daily-ui/001-sign-up-form/ 293 | https://www.fullstackreact.com/react-daily-ui/002-checkout/ 294 | https://www.fullstackreact.com/react-daily-ui/003-landing-page/ 295 | https://www.fullstackreact.com/react-daily-ui/004-calculator/ 296 | A series of tutorials that build small apps, and explain React features and concepts that are used in the process. 297 | 298 | - **Building your First React Javascript App** 299 | http://www.primaryobjects.com/2016/09/19/building-your-first-react-javascript-app/ 300 | A tutorial that builds a small app demonstrating form inputs and remote data requests. 301 | 302 | - **From React to Flux to Redux** 303 | http://react.tips/from-react-to-flux-to-redux/ 304 | Four implementations of a shopping list application, built with varying approaches to help you see the differences: React/ES5, React/ES6, React/Flux/ES5, React/Redux/ES6. 305 | 306 | - **Create an Instagram-like App with Node.js, React, and Redux** 307 | http://www.eloquentwebapp.com/instagram-app-node-react-redux/ 308 | An in-depth tutorial that demonstrates several advanced React concepts, including routing, hot loading, use of Redux and redux-saga, and more. 309 | 310 | - **Building a chat component in React and ES6** 311 | http://www.zsoltnagy.eu/building-a-chat-component-in-react-and-es6/ 312 | An introduction to React by building a small chat app 313 | 314 | - **Learning React with Create-React-App** 315 | https://medium.com/@diamondgfx/learning-react-with-create-react-app-part-1-a12e1833fdc 316 | https://medium.com/@diamondgfx/learning-react-with-create-react-app-part-2-3ad99f38b48d 317 | https://medium.com/@diamondgfx/learning-react-with-create-react-app-part-3-322447d14192 318 | https://medium.com/@diamondgfx/learning-react-with-create-react-app-part-4-9f843c8c1ccc 319 | A tutorial series that introduces React's concepts, using the Create-React-App tool to handle starting the project. 320 | 321 | - **Retrogames Library with Node, React, and Redux: Server API and React Frontend** 322 | https://scotch.io/tutorials/retrogames-library-with-node-react-and-redux-1-server-api-and-react-frontend 323 | Part 1 of a series building an application using Node, React, Redux, and MongoDB with Mongoose. 324 | 325 | - **Building a React Component Library** 326 | https://hackernoon.com/building-a-react-component-library-part-1-d8a1e248fe6c 327 | https://hackernoon.com/building-a-react-component-library-part-2-46fd4f77bb5c 328 | https://hackernoon.com/building-a-react-component-library-part-3-adb2cd0e021c 329 | A series that walks through how to build your own React component library and publish it to NPM. 330 | 331 | - **Building Powerful List Components in React** 332 | https://www.robinwieruch.de/react-paginated-list/ 333 | https://www.robinwieruch.de/react-infinite-scroll/ 334 | https://www.robinwieruch.de/react-advanced-list-component/ 335 | An excellent 3-part series that shows how to build real-world list components that handle pagination and infinite scrolling, using concepts like higher-order-components. 336 | 337 | - **Accept Stripe Payments with React and Express** 338 | https://www.robinwieruch.de/react-express-stripe-payment/ 339 | Demonstrates building a small app that handles payment information using the Stripe service 340 | 341 | - **Let's Learn: Higher Order Components and Websockets** 342 | https://medium.com/let-s-learn/lets-learn-higher-order-components-and-websockets-83a18d36c0d1 Examples that show how to create reusable components that manage a websocket connection and subscriptions to specific events. 343 | 344 | - **Make Your Own Charts in React Without a Charting Library** 345 | https://kyleshevlin.com/make-your-own-charts-in-react-without-a-charting-library-part-1/ 346 | A series that demonstrates building your own chart rendering components. 347 | 348 | - **Intro to React Workshop** 349 | https://github.com/ericvicenti/intro-to-react 350 | An hour-long workshop originally developed for Facebook's F8 developer conference. Includes a workshop video and a follow-along guide to building a simple React app. 351 | 352 | - **Building Tesla's Battery Range Calculator with React** 353 | https://medium.freecodecamp.org/building-teslas-battery-range-calculator-with-react-part-1-2cb7abd8c1ee 354 | A detailed guided walkthrough for building a React version of Tesla's battery range calculator application. Includes lots of code samples, and instructions for deploying a working version of the app. 355 | 356 | - **How to Build Free-Hand Drawing using React** 357 | https://pspdfkit.com/blog/2017/how-to-build-free-hand-drawing-using-react/ 358 | Demonstrates building a component that listens to mouse events, saves the coordinates, and draws the resulting lines using SVG. 359 | 360 | - **React Crash Course for Beginners** 361 | https://code.tutsplus.com/series/react-crash-course-for-beginners--cms-1204 362 | A tutorial series that teaches React concepts by building a movie gallery app. 363 | 364 | - **Creating a Blogging App Using React** 365 | https://code.tutsplus.com/series/creating-a-blogging-app-using-react--cms-1171 366 | A tutorial series that shows how to build a blogging app with a server backend that includes routing authentication, and CRUD. 367 | 368 | - **Build a Metronome in React** 369 | https://daveceddia.com/build-metronome-react/ 370 | An easy-to-follow, step-by-step tutorial that demonstrates key concepts like loading data, initializing state, and handling input changes. 371 | 372 | - **Microservices with Docker, Flask, and React** 373 | https://testdriven.io/part-one-intro/ 374 | A large multi-part tutorial covers setting up a dev environment using Docker containers, building a REST API server with the Python Flask framework, building a UI with React, and deploying it all to Amazon EC2. 375 | 376 | - **Create a Spreadsheet using React** 377 | https://www.writesoftware.org/tutorial/react-spreadsheet 378 | An excellent tutorial that shows how to build a miniature spreadsheet app using React 379 | 380 | - **Developig modern offline apps with ReactJS, Redux, and Electron** 381 | https://blog.codecentric.de/en/2017/10/developing-modern-offline-apps-reactjs-redux-electron-part-1/ 382 | An ongoing multi-part series that covers using React to build an Electron app, including discussion of architectural decisions. 383 | 384 | - **MERN Stack Tutorial** 385 | https://appdividend.com/2017/06/28/mern-stack-tutorial/ 386 | An extensive full-stack app tutorial that covers building an app with React on the client and Mongo+Express on the back end. 387 | 388 | - **Build a realtime PWA with React** 389 | https://blog.pusher.com/build-a-realtime-pwa-with-react/ 390 | Covers building a Progressive Web App that shows crypto-currency pricess, using Create-React-App and the Pusher service. 391 | 392 | 393 | #### Paid Courses and Books 394 | 395 | Also see the course sites listed in the [Community Resources](community-resources.md#online-course-sites) page. 396 | 397 | - **React.js Program** 398 | http://courses.reactjsprogram.com/courses 399 | The complete list of paid courses available on the site, including ES6/7 and Redux + Immutable.js. Courses on React Native and Universal React coming soon. 400 | 401 | - **React for Beginners** 402 | https://reactforbeginners.com/ 403 | A complete course that teaches how to build full real-world applications. Includes videos and source code. 404 | 405 | - **Pro React** 406 | http://www.pro-react.com/ 407 | The book teaches you how to successfully structure increasingly complex front-end applications and interfaces. You will learn how to use React completely, and learn best practices for creating interfaces in a composable way. You will also cover additional tools and libraries in the React ecosystem (such as React Router and Flux architecture). 408 | 409 | - **React: Up & Running** 410 | http://shop.oreilly.com/product/0636920042266.do 411 | http://www.phpied.com/react-up-and-running/ 412 | A book that starts with 0 setup and no tools, just React, then moves on to introduce additional syntax while building a CRUD app. Also covers linting, testing, build processes, and data management. 413 | 414 | **appendTo Instructor-led React Courses** 415 | https://appendto.com/courses/react-training/ 416 | appendTo offers instructor-led, hands-on React training courses on React, Redux, React Native, ES6, and Webpack. 417 | 418 | - **The Road to Learn React** 419 | http://www.robinwieruch.de/the-road-to-learn-react/ 420 | A pay-what-you-want ebook that teaches a good foundation for React itself, including React component patterns, working with data (fetching, sorting, and filtering), unit testing, and more. The author's blog posts are excellent, and this book is definitely recommended. 421 | 422 | - **Taming the State in React** 423 | https://www.robinwieruch.de/learn-react-redux-mobx-state-management/ 424 | https://roadtoreact.com/course-details?courseId=TAMING_THE_STATE 425 | A book and set of course material from the author of "The Road to Learn React", covering state management with setState, Redux, and MobX. 426 | 427 | - **Learn Pure React** 428 | https://daveceddia.com/learn-pure-react/ 429 | 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. 430 | 431 | - **Best ReactJS Books in 2017** 432 | https://reactdom.com/blog/reactjs-books 433 | A list of available React-related books, with some quick reviews. 434 | --------------------------------------------------------------------------------