ReddiReactDotNet – Templating Project for React and .NET Core

All that is below is in the ReddiReactDotNet Project‘s Github README.md. Fork and clone the project at Github and please let me know what you think (preferably in a nice manner) via the issues listing. :)).

History of this project (if you care to know)

I created a new application at my command prompt with

dotnet new react

but I was unhappy with the default React template as several things that I felt should have been there, were not. So I removed the ClientApp folder and regenerated a new one using

create-react-app clientapp

and since nothing broke with the dotnet side of things I kept going…

I made my preferred boilerplate layout in one file (App.js) using HTML5 semantic tags for the various layout componentsand then split it out into various React components so that I now had a reusable, working, quick-to-deploy template for future projects. I left the App.js for future mocking up, since I can simply switch the reference from <Routes/> back to <App/> in the index.js file and muck around with new React components I want to test out without much risk to other components.

Along the way I tried, failed, and passed several React components I found at the curated Awesome React Components project list and by trial and error came up with this template. Several packages that I found quite useful for quick prototyping and templating and are in this include the following:

1. faker for generating Fake data very quickly to make sure the look and feel was how I wanted it.
2. reactstrap for Bootstrap 4 support, as the more popular (and default one in the original) react-boostrap doesn’t yet support Bootstrap 4
3. bootstrap itself as you need the CSS for reactstrap to work properly
4. react-icons which gives access to all the vector icons from various popular icon projects like Font Awesome, Google Material Design, Typicons, Github Octicons and Ionicons (from Ionic Framework) in one.
5. react-tooltip since in using icons for my nav menus, I still wanted users to see what they linked to, so this is a nice little way to accomplish this without having to sacrifice screen placement real estate for words.
6. react-spinkit a great collection of loading indicators since I componentized with Fake data with the thought that all the data is going to come from Fetch() calls at some point to the ASP.Net Core WebAPI project, so would have some delay and would need a loading indicator as placeholder while this was happening.
7. react-router-dom Of course this might seem obvious, but React Router is used for routing, although it does not come with this by default when using create-react-app