Simple React JS with Auth0|Redux|MUI and Consume Web API — Part Two
One of many great things about JavaScript is that, the whole thing is built like a Jenga game of blocks. One block is standing on another block, and another block.
And, yes, the irony of using Jenga as an example is intentional. The entire JavaScript thing is just as shaky as an actual game of Jenga.
In this part, I talk about how I went about setting up this project so I can use all the many packages, libraries and the magic elixir of life, to make this simple React JS app work.
Note : This is a sequel to my previous post.
As always, the final app and the code is available here.
And, A sequel to this is now available.
First Step — Auth0 React Sample
In React JS, thanks to it’s policy of not giving anything more than the core mechanic — they call it non-opinionated or un-opinionated — you have to install several libraries just to get started.
And also, there is the problem of responsive design. I already suck at responsive design, HTML and CSS. So, we have a problem with that.
There is always the ‘right’ way to do something. Then, there is the ‘easy’ way to do something. I choose the ‘easy’ way and borrow a ‘ready to use’ template to kick start my project.
I pick the Auth0 React Sample anytime I begin work on a new React JS project for the following reasons.
- It comes ready to use with all the essentials — responsive design, Auth0 SDK
- It’s frequently updated and uses modern front end development principles
- The documentation is excellent and the community is great.
- Lastly, I am already married to Auth0 and have to use the React JS project template at some point, anyway.
Grab the sample from their github repo, here.
Note : I usually, download it from the Auth0 dashboard as it comes already loaded with ready to use Auth0 SDK with settings. But, you can get it from GitHub directly.
It’s important to note that Auth0, already comes with the basic stuff. Here is the full list.
This means, we dont have to worry about adding these manually, or figuring out what goes where and why.
Most importantly, in a web app, I care a lot about routing and responsive design. Both of these things are done by Auth0 folks.
Add MUI
The next thing is, I have decided to choose MUI as the UI library for all my future React projects.
You can read more about why, here.
They have a nice little guide here. Still, here are the key steps.
Add Redux and related libraries
Finally, in order to make our app talk to web api and manage state and stuff like that, we need the following libraries.
npm install react-redux redux redux-devtools-extension redux-persist reselect styled-components redux-thunk- redux — helps with state management
- reselect — I think, this helps with filtering
- styled-compoonents — JS in CSS library. very useful for quick styling.
- thunk — helps with making fetch calls, where you finally talk to your web api.
Final Note
This post was about getting your React JS project ready before we do any actual coding.
You know, if you are first timer (and that is my tutorial is all about. First time coders), you are thinking,
“Whoa! I have to do all this, just to build a simple web app? What happened to all those promises on the internet about life being made simpler for developers”
Well, now, you know, that was a big lie. That’s the dark side of it.On the bright side, that is all the set up you need to do. Now, you can move on to actual writing some code and get some things done.
I work as a full time freelance coding tutor. Hire me at UpWork or Fiverr or Stack Overflow. My personal website is here. Find more of my art at Behance and Unsplash. Also, I have a Podcast about everyday life. And, a 2nd Podcast, where I talk about freelancing.
