Simple React JS with Auth0|Redux|MUI and Consume Web API — Part Two
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.
Simple React JS with Auth0|Redux|MUI and Consume Web API — Part One
As always, the final app and the code is available here.
FrontEndForStudents/ReactJSForStudents/randomstuffapp at main ·…
a practice project that consumes my random stuff project web api server …
And, A sequel to this is now available.
Simple React JS with Auth0|Redux|MUI and Consume Web API — Part Three
Let’s keep this party rolling then.
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.
GitHub - auth0-samples/auth0-react-samples: Auth0 Integration Samples for React Applications
Auth0 Integration Samples for React Applications. Contribute to auth0-samples/auth0-react-samples development by…
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.
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.
UI journey of .NET tutor — 17 — Embracing MUI React UI library
My really long journey to make my front end skills better continues. Slow. Steady. I really want to one day build cool…
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.
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.