I’ve been pretty deep in the weeds of how
redux works with
react. Let’s zoom out and see how all the minutia we’ve learned could all fit together in a deployed app.
My opinionated decisions (inspired by the Rails Doctrine) are:
git push or
firebase deploy or
aws s3 sync. Scaling is stupidly simple - just throw a CloudFront proxy in front of your host. next.js, Ruby on Rails, and Meteor don’t agree with this decision.
- paying a premium for services that replace devops work is better than doing that work yourself: you know why I love coding? I get to make useful stuff. Configuring postgres or mongo databases so a VPS stops running out of memory from uncleared log files isn’t an activity I enjoy doing, it’s a necessary evil to get my stuff to work. If I can pay firebase to manage my authentication, database, and cloud functions so I can just focus on things that make my application unique, I’d much rather do that. I’d like to treat Heroku the same way, but the end result isn’t as good (I still have to think about how many instances - dynos - I need) and way more expensive.
- almost every webapp will need a model CRUD, authentication, and routes: I love that next.js, Ruby on Rails, Meteor, and every other sane web framework come with routes baked in. I hate that there’s no standard way to persist models to a database in React/Redux land, and I hate that I can’t
rails generate scaffold Person name:string age:integer and get every REST CRUD action and view with tests laid out for me. Let’s invest some time in creating sensible defaults to solve authentication, routes, and model persistence (CRUD) so we never have to think about it again (akin to the Rails Doctrine’s Convention over Configuration).
- re-inventing UI/UX components sucks: every project doesn’t need a new and unique design. It needs a custom logo and a distinctive color. People shouldn’t use things I make because my buttons look cool, they should use things I make because the business logic I’ve written makes their lives easier. Bootstrap used to be my go-to choice for pre-made UI components, but material-ui has much better built-in support for React.
- 11 star authentication
- TODO: function first vs. feature first folder organization; smart containers, dumb components, and modules directories
First, create a new app with
create-react-app and add the
$ create-react-app blog
$ cd blog
$ yarn add redux react-redux redux-form react-router-redux material-ui@next material-ui-icons
$ cd src && mkdir actions components reducers
│ └── index.js
- ducks: https://github.com/goopscoop/ga-react-tutorial/blob/6-reduxActionsAndReducers/src/redux/modules/toDoApp.js
fbr generate component Blog title:string body:text public:boolean
generates component, redux actions, firebase connections, tests, and storybook files
https://github.com/react-boilerplate/react-boilerplate has generaters baked in
I believe firebase is create-react-app for the backend
Layouts to copy
Courses to take
- react and firebase: https://frontendmasters.com/courses/firebase-react/connecting-react-to-firebase/#
- VSCode: https://frontendmasters.com/courses/visual-studio-code/
- State management in React with Redux: https://frontendmasters.com/courses/react-state/
- progressive web apps for offline: https://frontendmasters.com/courses/progressive-web-apps/
- Firebase + react: https://fbr.teachable.com/courses/enrolled/250922
- embed complicated multi-file examples: https://stackblitz.com/