From 00fca8e31afbc82f167beda1d2b7c68acc5416a8 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Sat, 2 Jul 2016 15:26:04 -0400 Subject: [PATCH] Updates, 2016-07-02 --- README.md | 2 +- basic-concepts.md | 37 +++++++++++------- boilerplates-and-starter-kits.md | 12 ++++++ es6-features.md | 12 +++++- functional-programming.md | 8 ++++ git-resources.md | 33 ++++++++++------ immutable-data.md | 10 ++++- javascript-resources.md | 7 +++- pros-cons-discussion.md | 10 ++++- react-performance.md | 10 +++-- react-redux-architecture.md | 32 +++++++++++++++ react-redux-testing.md | 29 +++++++++----- react-tutorials.md | 8 ++++ redux-side-effects.md | 12 ++++++ redux-techniques.md | 29 +++++++++++--- redux-tutorials.md | 25 ++++++++++++ tips-and-best-practices.md | 8 ++++ using-react-with-es6.md | 9 +++++ webpack-advanced-techniques.md | 67 ++++++++++++++++++++++++++++---- webpack-tutorials.md | 8 ++++ 20 files changed, 313 insertions(+), 55 deletions(-) diff --git a/README.md b/README.md index 8b7d167..d5a3026 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ Curated tutorial and resource links I've collected on React, Redux, ES6, and mor Another important resource is the Reactiflux community on Discord, which has chat channels dedicated to discussion of React, Redux, and other related technologies. There's always a number of people hanging out and answering questions, and it's a great place to ask questions and learn. The invite link is at https://www.reactiflux.com. -You might also want to check out my categorized list of Redux-related addons, libraries, and utilities, at [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links). +You might also want to check out my categorized list of Redux-related addons, libraries, and utilities, at [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links). Other useful resource lists include [Awesome React]https://github.com/enaqx/awesome-react), [Awesome React Native](https://github.com/jondot/awesome-react-native), and [Awesome Redux](https://github.com/xgrommx/awesome-redux). ## Table of Contents diff --git a/basic-concepts.md b/basic-concepts.md index 2980dfd..b7c90bf 100644 --- a/basic-concepts.md +++ b/basic-concepts.md @@ -1,9 +1,8 @@ ### Basic Concepts, Terms, and Overviews -- **React How-To** - https://github.com/petehunt/react-howto - Pete Hunt, one of React's creators, gives a high-level suggested order to use when learning React-related technologies (React, NPM, bundlers, ES6, routing, and Flux/Redux) - + +#### Modern Javascript Terms and Tooling Overviews + - **State of the Javascript Landscape in 2016** http://www.infoq.com/articles/state-of-javascript-2016 A very high-level summary of the important terms and technologies that are used in modern Javascript development. @@ -15,10 +14,28 @@ - **State of the Art Javascript in 2016** https://medium.com/javascript-and-opinions/state-of-the-art-javascript-in-2016-ab67fc68eb0b An opinionated list of what tools and libraries a modern JS development stack should include, plus links to further resources. + +- **The Hitchhiker's Guide to the Modern Front End Development Workflow** + http://marcobotto.com/the-hitchhikers-guide-to-the-modern-front-end-development-workflow/ + A useful overview of the many categories and types of tools used in modern web development. + +- **Simplified Javascript Jargon** + http://jargon.js.org/ + An alphabetical list of common terms in the JS world, with very short definitions in the main list and slightly longer descriptions linked for each term. + + +#### React Learning Guidelines + +- **React How-To** + https://github.com/petehunt/react-howto + Pete Hunt, one of React's creators, gives a high-level suggested order to use when learning React-related technologies (React, NPM, bundlers, ES6, routing, and Flux/Redux) - **Timeline for Learning React** https://daveceddia.com/timeline-for-learning-react/ Another high-level suggested timeline for how to approach learning React and related technologies. + + +#### General Suggestions for Learning - **Learn the Javascript Ecosystem one package at a time** http://andrewhfarmer.com/npm-sandboxing/ @@ -28,12 +45,6 @@ http://wesbos.com/overwhelmed-with-web-development/ Wes Bos gives advice on how to cut down on noise, avoid "new shiny" syndrome, and still improve your web dev skills -- **The Hitchhiker's Guide to the Modern Front End Development Workflow** - http://marcobotto.com/the-hitchhikers-guide-to-the-modern-front-end-development-workflow/ - A useful overview of the many categories and types of tools used in modern web development. - -- **Simplified Javascript Jargon** - http://jargon.js.org/ - An alphabetical list of common terms in the JS world, with very short definitions in the main list and slightly longer descriptions linked for each term. - - \ No newline at end of file +- **How to Learn Web Frameworks** + https://medium.com/shopify-ux/how-to-learn-web-frameworks-9d447cb71e68 + Some great advice on how to approach learning web development and frameworks, especiialy if you're a junior developer. \ No newline at end of file diff --git a/boilerplates-and-starter-kits.md b/boilerplates-and-starter-kits.md index a74a6ac..6d1bbbc 100644 --- a/boilerplates-and-starter-kits.md +++ b/boilerplates-and-starter-kits.md @@ -13,6 +13,14 @@ https://github.com/cesarandreu/web-app Another very good learning resource. Heavily commented Webpack config, good default settings. +- **React Laboratory** + https://github.com/tstringer/react-laboratory + An absolute bare-minimum project. One tiny Webpack config, one JS file, one component. Pretty much the smallest possible setup to use React and JSX with Webpack. + +- **Hipster Boilerplate** + https://github.com/Jordaanm/hipster-boilerplate + A learning-oriented repo that builds up a small project config step-by-step. Each commit adds one new feature or capability (Babel+ES6, Webpack bundling, a small Redux app, LESS styling, routing, and hot-reloading). + #### Full-Featured Starter Kits @@ -66,3 +74,7 @@ - **React Starter Project Search Tool** http://andrewhfarmer.com/starter-project/ Search for starter kits with/without specific libraries and sort by GitHub stars, number of dependencies, or recently updated. + +- **Awesome React Boilerplates** + http://habd.as/awesome-react-boilerplates/ + Another good curated list of boilerplates for both React and React Native diff --git a/es6-features.md b/es6-features.md index 64dee02..3aff33c 100644 --- a/es6-features.md +++ b/es6-features.md @@ -47,6 +47,12 @@ http://rainsoft.io/when-not-to-use-arrow-functions-in-javascript/ An in-depth look at when you should stick with standard JS functions instead of arrow functions +#### Specific Features + +- **Powering Javascript with Generators** + http://appendto.com/2016/06/powering-javascript-with-generators + A useful introduction to the generators feature in ES6. + #### Techniques @@ -56,4 +62,8 @@ - **Functional Mixins in ECMAScript 2015** http://raganwald.com/2015/06/17/functional-mixins.html - Another approach at combining mixins and classes \ No newline at end of file + Another approach at combining mixins and classes + +- **Selective transpilation for modern Javascript environments** + https://medium.com/@adamrackis/selective-transpilation-for-modern-javascript-environments-15bde6b75cfd + An investigation into ways to offer up differently-compiled bundles for different platforms with various levels of JS feature support. \ No newline at end of file diff --git a/functional-programming.md b/functional-programming.md index 915c6fb..65adcf0 100644 --- a/functional-programming.md +++ b/functional-programming.md @@ -81,3 +81,11 @@ - **Learning Functional Programming with Javascript** https://youtu.be/e-5obm1G_FY A great talk by Anjana Vakil. Covers several basic concepts of functional programming, including some very nice examples of map/filter/reducer, a clear fdefinition of side effects, and an explanation of how specialized immutable data libraries work. + +- **Thinking in Ramda** + http://randycoulman.com/blog/categories/thinking-in-ramda/ + A series of articles digging into techniques to use with the Ramda FP utility library + +- **Functional Programming Isn't the Answer** + http://degoes.net/articles/fp-is-not-the-answer + A reminder that while FP has potential benefits, it's ultimately just a tool, and the end goal is useful software. \ No newline at end of file diff --git a/git-resources.md b/git-resources.md index 116bf46..152dccc 100644 --- a/git-resources.md +++ b/git-resources.md @@ -37,11 +37,32 @@ http://think-like-a-git.net/ A tutorial for "advanced beginners" who know the basic commands, but want to better understand Git's concepts +- **Git from the Inside Out** + https://codewords.recurse.com/issues/two/git-from-the-inside-out + An explanation of how Git works, by describing the internal data structures and the graph that they form. + + +#### Tips and Useful Info + +- **How to Write a Git Commit Message** + http://chris.beams.io/posts/git-commit/ + Great advice for how to write a succinct, informative, and useful commit message. - **Advance Git** https://medium.com/@jstats/advance-git-dfe557bdbe59 Gives advice for good commit messages, and describes the options and usage for several advanced Git commands (`add --patch`, `rebase`, `reflog`, and more). +- **Git Useful Tips** + http://ericdouglas.github.io/2016/04/01/Git-Useful-Tips/ + A useful reference to commands and concepts. + +- **19 Tips for Everyday Git Use** + http://www.alexkras.com/19-git-tips-for-everyday-use + A variety of practical commands for different scenarios. + +- **Git Tips** + https://github.com/git-tips/tips + A large collection of Git tips and tricks. #### E-Books @@ -90,17 +111,7 @@ http://ndpsoftware.com/git-cheatsheet.html A clickable page that shows how various commands move data between different parts of Git's storage (working copy, index, local repo, remote repo) -- **Git Useful Tips** - http://ericdouglas.github.io/2016/04/01/Git-Useful-Tips/ - A useful reference to commands and concepts. - -- **19 Tips for Everyday Git Use** - http://www.alexkras.com/19-git-tips-for-everyday-use - A variety of practical commands for different scenarios. - -- **Git Tips** - https://github.com/git-tips/tips - A large collection of Git tips and tricks. + #### Desktop GUI Clients diff --git a/immutable-data.md b/immutable-data.md index 2fcad4e..59a352a 100644 --- a/immutable-data.md +++ b/immutable-data.md @@ -13,6 +13,10 @@ - **Immutable Javascript using ES6 and Beyond** http://wecodetheweb.com/2016/02/12/immutable-javascript-using-es6-and-beyond/ Describes ways to handle data immutably using "just" built-in Javascript functions + +- **Immutability is Not Enough** + https://codewords.recurse.com/issues/six/immutability-is-not-enough + A look at how using an immutable data approach doesn't magically prevent all bugs. @@ -47,4 +51,8 @@ - **Painless Immutability** https://guigrpa.github.io/2016/06/16/painless-immutability/ - A somewhat opinionated article from the author of a new immutable data library comparing different options, but still well-written and informative about the pros and cons of each. \ No newline at end of file + A somewhat opinionated article from the author of a new immutable data library comparing different options, but still well-written and informative about the pros and cons of each. + +- **Immutable.js** + http://seanamarasinghe.com/developer/immutable-js/ + An introduction to the API and use cases for Immutable.js \ No newline at end of file diff --git a/javascript-resources.md b/javascript-resources.md index d793769..61baa7d 100644 --- a/javascript-resources.md +++ b/javascript-resources.md @@ -7,7 +7,8 @@ While this list is primarily focused on learning React and Redux, and generally - **Mozilla Developer Network: Javascript** https://developer.mozilla.org/en-US/docs/Web/JavaScript - 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. + https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript + 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. - **Eric Elliott's Javascript Resource Lists** @@ -63,6 +64,10 @@ While this list is primarily focused on learning React and Redux, and generally https://www.sitepoint.com/inner-workings-javascripts-this-keyword/ https://www.sitepoint.com/mastering-javascripts-this-keyword/ A two-part article on the ins and outs of `this`. + +- **Let's Settle `this`, Part One** + https://medium.com/@nashvail/lets-settle-this-part-one-ef36471c7d97 + Another look at `this`, with a number of examples and explanations diff --git a/pros-cons-discussion.md b/pros-cons-discussion.md index 9b81385..78cbc34 100644 --- a/pros-cons-discussion.md +++ b/pros-cons-discussion.md @@ -102,4 +102,12 @@ similar structures in ClojureScript. - **"I'm a web dev who uses jQuery for a large app - How can I convince my bosses a JS framework is the way to go?"** https://www.reddit.com/r/javascript/comments/3v43qf/im_a_web_developer_who_uses_jquery_to_write_a/ - Another long, in-depth discussion thread on the merits of JS frameworks, as well as "big-bang" rewrites \ No newline at end of file + Another long, in-depth discussion thread on the merits of JS frameworks, as well as "big-bang" rewrites + +- **"Why isn't AJAX present in Many examples of React/Flow/Redux?"** + https://www.reddit.com/r/reactjs/comments/4pbq2x/why_isnt_ajax_present_in_many_examples_of/ + A long discussion thread that covers several topics related to tutorials, articles, and official docs, and various approaches. Includes a couple comments from Dan Abramov on the limited size and scope of the React team. + +- **"How can I better market my Javascript library?"** + https://news.ycombinator.com/item?id=11833301 + The developer of a Redux wrapper library asks how to get more attention online. I offer a pretty long reply comment describing the various network effects involved in any addon library, and critique his specific library from a Redux user's perspective. \ No newline at end of file diff --git a/react-performance.md b/react-performance.md index 8e96390..66735b5 100644 --- a/react-performance.md +++ b/react-performance.md @@ -20,8 +20,6 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) http://kelle.co/react-perf-slides/ A slideshow that walks through the core concepts of managing good React performance. - - - **Optimizing React Performance using keys, component lifecycle, and performance tools** http://jaero.space/blog/react-performance-1 http://jaero.space/blog/react-performance-2 @@ -85,6 +83,10 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) https://github.com/jurassix/react-immutable-render-mixin/issues/19#issuecomment-222567064 Immutable.js author Lee Byron comments on a performance discussion, giving advice on suggested Immutable.js usage patterns +- **"Immutable perf tip: avoid toJS"** + https://twitter.com/leeb/status/746733697093668864 + Another suggestion from Lee Byron to avoid use of Immutable.js's data conversion functions based on performance reasons. + #### Redux Performance - **High Performance Redux** @@ -103,5 +105,7 @@ My [Redux Ecosystem Links](https://github.com/markerikson/redux-ecosystem-links) https://github.com/reactjs/redux/issues/1751 Discussion of several factors that affect Redux performance - +- **Improving React and Redux Performance with Reselect** + http://blog.rangle.io/react-and-redux-performance-with-reselect/ + Covers how to use Reselect to define memoized "selector" functions that can cut down on duplicate work diff --git a/react-redux-architecture.md b/react-redux-architecture.md index 0934bbe..99b8b94 100644 --- a/react-redux-architecture.md +++ b/react-redux-architecture.md @@ -74,6 +74,22 @@ https://css-tricks.com/learning-react-container-components/ Describes the container component pattern and how to use it to split up responsibilities between fetching and displaying data. +- **Finding `state`'s place with React and Redux** + https://medium.com/@adamrackis/finding-state-s-place-with-react-and-redux-e9a586630172 + A look at when and how using React component state may be useful, even when using Redux for primary app state + +- **Dataflow through React** + https://jurassix.gitbooks.io/dataflow-through-react/content/index.html + An online book that covers a number of topics on React components and data flow. + +- **A case for setState** + https://medium.com/@zackargyle/a-case-for-setstate-1f1c47cd3f73 + An article arguing that React component state still has a number of uses. + +- **Smart and Dumb Components in React** + http://jaketrent.com/post/smart-dumb-components-react/ + Another look at ways to conceptually categorize components based on responsibilities, and some ways you can organize your code based on those concepts. + #### React and AJAX @@ -134,6 +150,18 @@ https://medium.com/@thejenniekim/two-way-data-binding-and-form-validation-in-react-9d0b15123176 Another demonstration of building a form with some logic and validation. +- **Using React's state to manage data entry** + https://medium.com/@adamrackis/using-reacts-state-to-manage-data-entry-ed92e4fd1a42 + Describes how to manage data for forms using React component state and some wrapper components. + +- **Handling React Forms with Mobx Observables** + https://blog.risingstack.com/handling-react-forms-with-mobx-observables/ + Some examples of working with forms in React, using MobX for the data management. + +- **Forms in React and Redux** + http://x-team.com/2016/02/tutorial-forms-in-react-and-redux/ + A good example of how to set up form handling in conjunction with a Redux store. + #### Project File Structure @@ -164,6 +192,10 @@ - **How to Better Organize Your React Applications?** https://medium.com/@alexmngn/how-to-better-organize-your-react-applications-2fd3ea1920f1 Another feature-style approach, describing things in terms of "components", "scenes", and "services". + +- **Fractal Project Structure** + https://github.com/davezuko/react-redux-starter-kit/wiki/Fractal-Project-Structure + Docs from the React Redux Starter Kit project describing their "Fractal Project Structure" concept, and advice for file and app organization. #### Redux Architecture diff --git a/react-redux-testing.md b/react-redux-testing.md index f915e4a..a043d7a 100644 --- a/react-redux-testing.md +++ b/react-redux-testing.md @@ -26,10 +26,6 @@ https://github.com/mxstbr/react-boilerplate/blob/v3.0.0/docs/testing/component-testing.md Useful description of how to use Mocha, Expect, and Enzyme to test React and Redux code -- **Reddit - "Karma/Mocha/Chai/Sinon setup"** - https://www.reddit.com/r/javascript/comments/4217x6/ive_spent_six_hours_attempting_to_set_up/ - Reddit user Cody_Chaos describes his approach to running unit tests under Node with Mocha, and integration tests in a browser with Karma. Includes several useful config setup snippets. - - **Testing React Applications** http://12devsofxmas.co.uk/2015/12/day-2-testing-react-applications/ A long, in-depth article describing approaches and use of Tape, React TestUtils, and Enzyme @@ -52,10 +48,6 @@ http://dchambers.github.io/articles/testing-react-components-with-teaspoon-and-unexpected/ A short but useful look at a couple testing libraries and ways to use them. -- **Redux Flow Tutorial** - http://dchambers.github.io/articles/redux-flow-tutorial/ - Covers how to set up Flow for type-checking a Redux application - - **Unit Testing React Components and Redux Reducers** http://pebblecode.com/blog/react-redux-unit-testing/ Some basic examples for testing reducers and components. @@ -76,6 +68,25 @@ http://silvenon.com/testing-react-and-redux/ A three-part article that shows how to set up Ava and Babel, then walks through testing Redux code (action creators, reducers, selectors, thunks, and sagas), and React components. + +#### General Testing, Tools, and Setup + +- **Javascript Testing: Unit vs Functional vs Integration** + https://www.sitepoint.com/javascript-testing-unit-functional-integration/ + A comparison of the various levels of tests you can run, and what roles they play in development. + +- **Reddit - "Karma/Mocha/Chai/Sinon setup"** + https://www.reddit.com/r/javascript/comments/4217x6/ive_spent_six_hours_attempting_to_set_up/ + Reddit user Cody_Chaos describes his approach to running unit tests under Node with Mocha, and integration tests in a browser with Karma. Includes several useful config setup snippets. + - **Setting Up Javascript Testing Tools for ES6** http://x-team.com/2016/05/setting-up-javascript-testing-tools-for-es6/ - Tips on configuring tools to work with ES6 code, and writing tests using ES6 \ No newline at end of file + Tips on configuring tools to work with ES6 code, and writing tests using ES6 + +- **Keep Calm and Love Javascript Unit Tests - Part 2: Asynchronism** + http://www.theodo.fr/blog/2016/06/keep-calm-and-love-javascript-unit-tests-part-2-asynchronism/ + Useful tips for testing asynchronous behavior under Mocha. + +- **ESLint Part 1: Exploration** + https://blog.scottnonnenberg.com/eslint-part-1-exploration/ + A solid look at what ESLint is, how you can use it to help keep your code clean, and a number of useful linting plugins that are available. \ No newline at end of file diff --git a/react-tutorials.md b/react-tutorials.md index 4824e49..6209d82 100644 --- a/react-tutorials.md +++ b/react-tutorials.md @@ -66,6 +66,14 @@ - **React Enlightenment** http://www.reactenlightenment.com/ A straightforward, cookbook-style approach to learning React. (Currently a work-in-progress.) + +- **ReactJS Tutorial** + http://www.tutorialspoint.com/reactjs/index.htm + 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. + +- **React Tutorial** + http://www.pshrmn.com/tutorials/react/react/ + A very readable intro to React's concepts. #### Project-Based Tutorials diff --git a/redux-side-effects.md b/redux-side-effects.md index 09f6e19..28165bb 100644 --- a/redux-side-effects.md +++ b/redux-side-effects.md @@ -45,6 +45,18 @@ https://www.reddit.com/r/reactjs/comments/4ng8rr/redux_sagas_benefits/ Discussion of when and why you might want to use sagas, with some great examples in the comments. +- **Manage Side Effects Efficiently with Redux Saga** + https://youtu.be/QJVdcIlqGwc + A presentation describing the concepts of generators and sagas. + +- **Redux Saga conceptual diagram** + https://qiita-image-store.s3.amazonaws.com/0/69860/8cc1a873-c675-9009-570d-9684da4a704f.png + A nifty diagram from @kuy illustrating the general interaction of Redux Saga's async flow operators + +- **"Redux Sagas Benefits?"** + https://www.reddit.com/r/reactjs/comments/4ng8rr/redux_sagas_benefits/ + Some great examples in the comments of how Redux Saga works and how to use it. + #### Other diff --git a/redux-techniques.md b/redux-techniques.md index 724d13a..c5a24cc 100644 --- a/redux-techniques.md +++ b/redux-techniques.md @@ -36,12 +36,8 @@ A video demonstrating a Redux crash reporter and time travel debugger. +#### Type Checking -#### Other -- **Applying Redux Reducers to Arrays** - http://blog.scottlogic.com/2016/05/19/redux-reducer-arrays.html - Looks at one way to implement the classic "multiple instances of one connected component" issue in Redux. - - **Checking React and Redux Code with Flow** http://djcordhose.github.io/react-intro-live-coding/2016_jsunconf.html#/ A slideshow that shows the basics of adding type information to Redux-based code @@ -49,6 +45,19 @@ - **Using Redux with Flow** http://frantic.im/using-redux-with-flow Covers how to use Flow typing with Redux + +- **Type Checking with Flow in React + Redux** + http://www.robinwieruch.de/the-soundcloud-client-in-react-redux-flow/ + +- **Redux Flow Tutorial** + http://dchambers.github.io/articles/redux-flow-tutorial/ + Covers how to set up Flow for type-checking a Redux application + + +#### Other +- **Applying Redux Reducers to Arrays** + http://blog.scottlogic.com/2016/05/19/redux-reducer-arrays.html + Looks at one way to implement the classic "multiple instances of one connected component" issue in Redux. - **Ajax Polling in React with Redux and Sagas** http://notjoshmiller.com/ajax-polling-in-react-with-redux/ @@ -73,4 +82,12 @@ - **Querying a Redux Store** https://medium.com/@adamrackis/querying-a-redux-store-37db8c7f3b0f - A look at best practices for organizing and storing data in Redux, including normalizing data and use of selector functions. \ No newline at end of file + A look at best practices for organizing and storing data in Redux, including normalizing data and use of selector functions. + +- **Redux Saga in Action** + https://medium.com/@totaldis/redux-saga-in-action-s-f7d11cffa35a + Some interesting thoughts on ways to organize the majority of your app's logic using redux-saga + +- **React, Redux, and Redux-Form** + https://jokeyrhyme.github.io/2016/06/27/react-redux-redux-form.html + Thoughts on the merits of using the Redux-Form library \ No newline at end of file diff --git a/redux-tutorials.md b/redux-tutorials.md index 48bdc6c..58c5766 100644 --- a/redux-tutorials.md +++ b/redux-tutorials.md @@ -54,6 +54,15 @@ - **Introduction to Redux and React-Redux** http://julienrenaux.fr/2016/05/30/introduction-to-redux-and-react-redux/ A quick overview of core Redux concepts, with code examples for creating a store and hooking up React components to read the data. + +- **Redux and React Redux** + http://www.pshrmn.com/tutorials/react/redux/ + http://www.pshrmn.com/tutorials/react/react-redux/ + A pair of articles covering basic Redux concepts and usage. + +- **An Introduction to Redux** + https://www.smashingmagazine.com/2016/06/an-introduction-to-redux/ + An overview and intro to the basic concepts of Redux. #### Project-Based Tutorials @@ -103,6 +112,14 @@ - **Let's Write Redux!** http://www.jamasoftware.com/blog/lets-write-redux/ Walks through writing a miniature version of Redux step-by-step, to help explain the concepts and implementation. + +- **Hacking Redux** + http://paulserraino.com/javascript/2016/02/16/hacking-redux.html + Looks at the core concepts in Redux, and builds up a mini-Redux to demonstrate how Redux works internally. + +- **Learning Redux with Reducks** + http://www.aaron-powell.com/tagged/reducks.html + Another "build a mini-Redux" article series. #### Redux Middleware @@ -126,6 +143,14 @@ - **Redux Middleware** http://jonnyreeves.co.uk/2016/redux-middleware/ A tutorial describing how Redux compares to typical "MVC", what a "middleware" is, what they can do, and how you can test them. + +- **Redux Middleware Tutorial** + http://www.pshrmn.com/tutorials/react/redux-middleware/ + An overview of what middleware is, how `applyMiddleware` works, and how to write middleware. + +- **Redux Middleware: Behind the Scenes** + http://briantroncone.com/?p=529 + Digs into the concepts and implementation of middleware. #### Paid Courses and Books diff --git a/tips-and-best-practices.md b/tips-and-best-practices.md index 904c936..75d71b0 100644 --- a/tips-and-best-practices.md +++ b/tips-and-best-practices.md @@ -53,4 +53,12 @@ https://github.com/kylpo/react-playbook https://medium.com/@kylpo/redux-best-practices-eef55a20cc72 A variety of tips, best practices, opinions, and comparisons related to React, Redux, Immutable.js, and MobX. Includes thoughts on component architecture, file structure, coding style, and other topics. + +- **React Best Practices & Patterns** + http://seanamarasinghe.com/developer/react-best-practices-patterns/ + A number of useful conventions for writing React code. + +- **React Gotchas** + https://daveceddia.com/react-gotchas/ + Three quick tips to keep in mind while writing React code (capitalize component names, close all JSX tags, and remember setState is asynchronous) \ No newline at end of file diff --git a/using-react-with-es6.md b/using-react-with-es6.md index 9f7d9f0..0f2dc7c 100644 --- a/using-react-with-es6.md +++ b/using-react-with-es6.md @@ -19,6 +19,10 @@ http://benmccormick.org/2016/05/02/digging-into-react-choosing-component-styles/ A comparison of the three ways to define a React component. Good descriptions, and links to some other related discussions. +- **Refactoring React Components to ES6 Classes** + http://www.newmediacampaigns.com/blog/refactoring-react-components-to-es6-classes + Walks through the steps needed to convert an older-style `React.createClass()` component to use the newer ES6 class syntax instead. + #### Methods and Instance Binding @@ -40,3 +44,8 @@ - **react-bind-decorator** https://github.com/zackargyle/react-bind-decorator Another autobinding approach, intended to be fast and performant. + +- **react-class-binder** + https://github.com/Klathmon/react-class-binder + https://www.reddit.com/r/reactjs/comments/4p0ytu/i_made_a_small_package_to_easily_autobind_this_in/ + Automatically bind methods defined in a React component using the ES2015 class syntax (similar to how React.createClass works). The Reddit comments have discussion on some differences between the various libs that implement autobinding. diff --git a/webpack-advanced-techniques.md b/webpack-advanced-techniques.md index d125511..4de8837 100644 --- a/webpack-advanced-techniques.md +++ b/webpack-advanced-techniques.md @@ -1,6 +1,8 @@ ### Webpack Advanced Techniques -#### Articles and Slideshows +#### General Articles and Slideshows + +#### Build Optimization - **Webpack: Build Performance** https://github.com/webpack/docs/wiki/build-performance @@ -21,7 +23,26 @@ - **Fixing annoying imports in React Projects** https://medium.com/datawallet-tech/fixing-annoying-imports-in-react-projects-895a6ad24c24 A quick example of using Webpack's module aliasing to simplify import paths, with further discussion in the comments. + +- **Webpack Plugins we been keeping on the DLL** + https://medium.com/@soederpop/webpack-plugins-been-we-been-keepin-on-the-dll-cdfdd6cb8cd7 + An overview of Webpack's DllPlugin, and how it can be used for faster dev builds. + +- **Webpack Async Bundle Loading** + http://jilles.me/webpack-async-bundle-loading/ + A quick look at how to delay-load some portion of your app's code. + +- **DllPlugin usage summary** + https://github.com/erikras/react-redux-universal-hot-example/issues/616#issuecomment-228956242 + Notes from a user who wants to document his findings on usage of DllPlugin. Pretty thorough. + +- **Implement Webpack DLL Plugin for React-Boilerplate** + https://github.com/mxstbr/react-boilerplate/pull/495 + A PR adding usage of DllPlugin to React-Boilerplate. Thorough and well-commented - should be a very useful reference to anyone trying to set it up in their own project. + +#### Hot Module Replacement + - **Webpack and Hot Module Replacement** https://medium.com/@rajaraodv/webpack-hot-module-replacement-hmr-e756a726a07 A great in-depth walkthrough of how HMR works @@ -34,12 +55,16 @@ https://medium.com/@dan_abramov/hot-reloading-in-react-1140438583bf Dan Abramov walks through the history of his React Hot Loader and React Transform tools, describes their implementation, flaws, and weaknesses, and looks at a potential solution (later implemented in React Hot Loader 3.0). -- **Webpack Plugins we been keeping on the DLL** - https://medium.com/@soederpop/webpack-plugins-been-we-been-keepin-on-the-dll-cdfdd6cb8cd7 - An overview of Webpack's DllPlugin, and how it can be used for faster dev builds. - - -#### Examples +- **HMR Tutorial Series** + http://andrewhfarmer.com/why-use-hmr/ + http://andrewhfarmer.com/understanding-hmr/ + http://andrewhfarmer.com/3-ways-webpack-hmr/ + http://andrewhfarmer.com/webpack-hmr-tutorial/ + A very readable and informative series of articles on using HMR. + +- **Live Editing Javascript with Webpack** + http://jlongster.com/Backend-Apps-with-Webpack--Part-III + Some interesting and advanced tricks for ways HMR could be used. - **Using React with "plain" Webpack HMR** https://github.com/reactjs/redux/pull/1455 @@ -47,4 +72,30 @@ - **Basic HMR Usage Example** https://gist.github.com/markerikson/dc6cee36b5b6f8d718f2e24a249e0491 - An extracted example demonstrating using "plain" HMR to reload components, reducers, and even sagas. \ No newline at end of file + An extracted example demonstrating using "plain" HMR to reload components, reducers, and even sagas. + + + + +#### Other Tips and Examples + +- **Course: Using Webpack for Production Javascript Apps** + https://egghead.io/courses/using-webpack-for-production-javascript-applications + A video course by Kent C. Dodds, covering a number of very useful Webpack techniques for real-world apps. Requires an Egghead subscription, but solid and useful info. + +- **Javascript at Tumblr - Switching to Webpack** + https://javascript.tumblr.com/post/143583264647/here-at-tumblr-we-use-a-js-bundler-to-compile-our + Tumblr's dev team talks about switching from Browserify to Webpack, their migration steps, and some useful tips learned about pieces like CommonsChunkPlugin. + +- **Webpack HTML plugin in a Nutshell** + http://www.jonathan-petitcolas.com/2016/01/23/webpack-html-plugin-in-a-nutshell.html + Looks at what the HTML Webpack plugin can do and how to use it. + +- **Truly Multiple Entries with Webpack** + https://kuzzmi.com/blog/truly-multiple-entries-with-webpack + Instructions on how to configure multiple entry points properly + + +#### Examples + + \ No newline at end of file diff --git a/webpack-tutorials.md b/webpack-tutorials.md index 0968983..ae33ffa 100644 --- a/webpack-tutorials.md +++ b/webpack-tutorials.md @@ -55,6 +55,14 @@ http://jilles.me/webpack-is-not-as-complicated-as-you-think/ A simple overview of a basic Webpack config looks like. +- **Creating a React and Webpack Project (screencast)** + http://javascriptplayground.com/blog/2016/06/react-webpack-workflow-screencast/ + A video walkthrough of the basic setup for a Webpack-based project. + +- **Webpack 101: An Introduction to Webpack** + http://code.hootsuite.com/webpack-101/ + A useful intro to Webpacks concepts and capabilities, with some examples. + #### Configuration Terms and Concepts