Articles

Anahita Project

Anahita Project's Articles

Rastin Mehr

Rastin Mehr

July 03 2017

React Redux Material UI Resources

In the next release of Anahita we are rebuilding the UIs in #ReactJS and #MaterialUI. The php back-end will be mostly providing Restful APIs and will only be rendering pages with SEO value, otherwise Anahita will be mostly rendering as a single page app #SAP for the logged in users. If you want to start learning the technologies that we will be using here are some resources that I've studied:

ReactJS Tutorial & Documentation: 

Material-UI: 

  1. A Material Design implementation using ReactJS: http://www.material-ui.com
  2. A frontend framework for building admin SPAs on top of REST services, using React and Material Design https://github.com/marmelab/admin-on-rest
  3. Flow is a habit tracker and personal data analytics app that lets you keep focus on what matters. Flow owns none of your data: https://github.com/onejgordon/flow-dashboard
  4. Personal podcast web client https://github.com/danjac/podbaby
  5. A reusable CRM project https://github.com/harryho/react-crm 

ReduxJS: 

  1. For managing UI states and communicating with API: http://redux.js.org 
  2. Awesome Redux: https://github.com/xgrommx/awesome-redux
  3. React-redux "connect" explained: http://www.sohamkamani.com/blog/2017/03/31/react-redux-connect-explained/
  4. Why Redux is not so easy, some alternatives: https://medium.com/@machnicki/why-redux-is-not-so-easy-some-alternatives-24816d5ad22d
  5. A simplified approach to calling APIs with redux: http://www.sohamkamani.com/blog/2016/06/05/redux-apis/

Conventional Redux:

A library for small and medium applications, it wraps the react-redux and provides API based on convention over configuration pattern.https://github.com/mjaneczek/conventional-redux

Note: since Redux implementations could become quite verbose for each entity API, it'd make sense to create a conventional implementation of Redux that would work with Anahita BREAD (browse, read, edit, add, and delete) operations. Then using compositions we can write implementations for actions not included in BREAD for example: follow, unfollow. Or we can normalize our server side controllers to only provide BREAD operations.

ImmutableJS

RelayJS

ReactJS + PHP apps

Webpack

  1. Webpack module bundler for modern js applications: https://webpack.js.org
  2. Straightforward code splitting with React and Webpack: https://hackernoon.com/straightforward-code-splitting-with-react-and-webpack-4b94c28f6c3f
  3. React Hot Loader: https://github.com/gaearon/react-hot-loader 
  4. Hot Module Replacement Guide: https://webpack.js.org/guides/hot-module-replacement/
  5. Hot Module Replacement API: https://webpack.js.org/api/hot-module-replacement/
  6. React Hot Loader: https://github.com/gaearon/react-hot-loader

Misc.

  1. React in a Joomla Component: https://github.com/ecrona/react-joomla

Do you know of any other resources?

If you know of any other resources, please post it in the comments. We are still researching in this domain and the more knowledge we get exposed to, the better. 

2 people liked this
This isn't JQuery. This is a whole new approach to developing web and mobile user interfaces. A React app is a complete app that runs within the browser (or server side for NodeJS apps). It follows functional programming and design patterns that are new and unlike what we are used to in Rails or PHP MVC frameworks.

One effective way to study the code examples once you finished reading all the docs and tutorials: get the code up and running, then go to every js file, comment out the code, rewrite the code one statement at a time and learn what it does and why it is used. It's perfectly ok if you look at the code you have commented out. The idea is that you become familiar with the syntax, design patterns, and being curious about the code that you are reading.
Greg Willson liked this
Added 2 more links about #ReduxJS Connect and API call examples
Rastin Mehr
Rastin Mehr
August 21 2017 Permalink
Added a link to tutorial about Webpack and Code Splitting
Rastin Mehr
Rastin Mehr
August 21 2017 Permalink
Added links regarding Hot Module Replacement (HMR)
Rastin Mehr
Rastin Mehr
August 27 2017 Permalink
Added an example of React in a Joomla component
Rastin Mehr
Rastin Mehr
September 16 2017 Permalink
Added a list of Material UI projects
Greg Willson
October 03 2017 Permalink
https://github.com/jumpsuit/jumpsuit >> DEPRECATED - We urge you to simply use idiomatic redux + redux-thunk.
Rastin Mehr liked this
Rastin Mehr
Rastin Mehr
October 03 2017 Permalink
Thank you Greg, I updated the article.
Greg Willson
October 03 2017 Permalink
your welcome, Rastin. I like the react-redux focus.! nightwatch for testing / Bdd i have been learning more about lately as well. exciting collaborative times :)
Rastin Mehr liked this

Additional Information

Locations

    Powered by Anahita